1407 files changed, 169531 insertions, 0 deletions

diff --git a/files/fr/web/api/abortsignal/index.html b/files/fr/web/api/abortsignal/index.html
new file mode 100644
index 0000000000..6648360c02
--- /dev/null
+++ b/files/fr/web/api/abortsignal/index.html
@@ -0,0 +1,100 @@
+---
+title: AbortSignal
+slug: Web/API/AbortSignal
+tags:
+  - API
+  - AbortSignal
+  - DOM
+  - Interfaces
+  - Reference
+translation_of: Web/API/AbortSignal
+---
+<div>{{APIRef("DOM")}}{{SeeCompatTable}}</div>
+
+<p>L'interface <strong><code>AbortSignal</code></strong> représente un objet signal qui vous permet de communiquer avec une requête DOM (telle que Fetch) et de l'annuler si nécessaire par un objet {{domxref("AbortController")}}.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>L'interface AbortSignal hérite des propriétés de son interface parent {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("AbortSignal.aborted")}} {{readonlyInline}}</dt>
+ <dd>Un {{domxref("Boolean")}} (<em>booléen</em>) qui indique si les requêtes avec lesquelles le signal communique sont annulées (<code>true</code>) ou non (<code>false</code>).</dd>
+</dl>
+
+<h3 id="Gestionnaire_dévènement">Gestionnaire d'évènement</h3>
+
+<dl>
+ <dt>{{domxref("AbortSignal.onabort")}}</dt>
+ <dd>appelé quand un évènement {{event("abort_(dom_abort_api)", "abort")}} est lancé, c'est-à-dire quand les requêtes DOM avec lesquelles le signal communique sont annulées.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>L'interface AbortSignal hérite des méthodes de son interface parent {{domxref("EventTarget")}}.</em></p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'extrait suivant, nous visons à télécharger une vidéo en utilisant l'<a href="https://developer.mozilla.org/fr/docs/Web/API/Fetch_API">API Fetch</a>.</p>
+
+<p>Tout d'abord, nous créons un contrôleur en utilisant le constructeur {{domxref("AbortController.AbortController","AbortController()")}}, puis nous saisissons une référence associée à son objet {{domxref("AbortSignal")}} au moyen de la propriété {{domxref("AbortController.signal")}}.</p>
+
+<p>Lorsque la  <a href="https://developer.mozilla.org/fr/docs/Web/API/GlobalFetch/fetch">requête fetch</a> (<em>extraction</em>) est lancée, nous transmettons le paramètre <code>AbortSignal</code> en tant qu'option dans l'objet d'options de la requête (voir <code>{signal}</code> ci-dessous). Cela associe le signal et le contrôleur à la requête d'extraction et nous permet de l'annuler en appelant {{domxref("AbortController.abort()")}}, comme indiqué ci-dessous dans le second écouteur d'événements.</p>
+
+<pre class="brush: js notranslate">var controller = new AbortController();
+var signal = controller.signal;
+
+var downloadBtn = document.querySelector('.download');
+var abortBtn = document.querySelector('.abort');
+
+downloadBtn.addEventListener('click', fetchVideo);
+
+abortBtn.addEventListener('click', function() {
+  controller.abort();
+  console.log('Download aborted');
+});
+
+function fetchVideo() {
+  ...
+  fetch(url, {signal}).then(function(response) {
+    ...
+  }).catch(function(e) {
+    reports.textContent = 'Download error: ' + e.message;
+  })
+}</pre>
+
+<div class="note">
+<p><strong>Note </strong>: Lorsque <code>abort()</code> est appelé, la réponse <code>fetch()</code> rejette avec une erreur <code>AbortError</code>.</p>
+</div>
+
+<p>vous pouvez trouver un exemple de travail complet sur GitHub — voir <a href="https://github.com/mdn/dom-examples/tree/master/abort-api">abort-api</a> (<a href="https://mdn.github.io/dom-examples/abort-api/">voir cas d'usage concret</a>).</p>
+
+<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('DOM WHATWG', '#interface-AbortSignal', 'AbortSignal')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité sur cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez vérifier <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une demande de retrait.</div>
+
+<p>{{Compat("api.AbortSignal")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Fetch_API">API Fetch</a></li>
+ <li><a href="https://developers.google.com/web/updates/2017/09/abortable-fetch">Abortable Fetch</a> par Jake Archibald (en)</li>
+</ul>
diff --git a/files/fr/web/api/abstractworker/index.html b/files/fr/web/api/abstractworker/index.html
new file mode 100644
index 0000000000..0dfabf2783
--- /dev/null
+++ b/files/fr/web/api/abstractworker/index.html
@@ -0,0 +1,79 @@
+---
+title: AbstractWorker
+slug: Web/API/AbstractWorker
+tags:
+  - API
+  - Interface
+  - Reference
+  - Web Workers
+translation_of: Web/API/AbstractWorker
+---
+<p>{{ APIRef() }}</p>
+
+<p>L'interface <strong><code>AbstractWorker</code></strong> de l'<a href="/fr/docs/Web/API/Web_Workers_API">API Web Worker</a> résume les propriétés et les méthodes communes à tous les types de workers, comme {{domxref("Worker")}}, {{domxref("SharedWorker")}} ou {{domxref("ServiceWorker")}}. Étant une classe abstraite, vous n'interagirez pas directement avec elle.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>L'interface <code>AbstractWorker</code></em><em> n'hérite d'aucune propriété.</em></p>
+
+<h3 id="Gestionnaires_d’évènements">Gestionnaires d’évènements</h3>
+
+<dl>
+ <dt>{{domxref("AbstractWorker.onerror")}}</dt>
+ <dd>Un {{ domxref("EventListener") }} appelé chaque fois qu'un {{domxref("ErrorEvent")}} de type <code>error</code> apparaît à l'intérieur du worker.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>L'interface de <code>AbstractWorker</code></em><em> n'hérite ou n'implémente aucune méthode.</em></p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Notez que vous n’utiliserez pas directement l’interface <code>AbstractWorker</code> dans votre code — lorsqu’elles sont appelées, les interfaces {{domxref("Worker")}} et {{domxref("SharedWorker")}} héritent des propriétés d’<code>AbstractWorker</code>. L’extrait de code suivant présente la création d’un objet {{domxref("Worker")}} utilisant le constructeur {{domxref("Worker.Worker", "Worker()")}}, ainsi que l’usage de cet objet:</p>
+
+<pre class="brush: js">var monWorker = new Worker("worker.js");
+
+first.onchange = function() {
+  monWorker.postMessage([first.value,second.value]);
+  console.log('Message envoyé au worker');
+}</pre>
+
+<p>Le worker est chargé à partir du ficher «<code>worker.js</code>». Ce code suppose qu'il y a un élément {{HTMLElement("input")}}, représenté par <code>first</code>, avec un gestionnaire d'évènement pour l'évènement {{domxref("change")}} qui signale un changement de valeur par l'utilisateur, ce qui entraîne l'envoi d'un message au <em>worker</em>.</p>
+
+<p>Pour des exemples complets, voir :</p>
+
+<ul>
+ <li><a class="external external-icon" href="https://github.com/mdn/simple-web-worker">Exemple de worker dédié simple </a>(<a class="external external-icon" href="http://mdn.github.io/simple-web-worker/">exécuter le worker dédié</a>).</li>
+ <li><a class="external external-icon" href="https://github.com/mdn/simple-shared-worker">Exemple de worker partagé simple</a> (<a class="external external-icon" href="http://mdn.github.io/simple-shared-worker/">exécuter le worker partagé</a>).</li>
+</ul>
+
+<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", "#abstractworker", "AbstractWorker")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Pas de changement depuis {{SpecName("Web Workers")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.AbstractWorker")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>Les interfaces {{domxref("Worker")}}, {{domxref("ServiceWorker")}} et {{domxref("SharedWorker")}} qui héritent d’<strong><code>AbstractWorker</code></strong> .</li>
+ <li><a href="/fr/docs/Web/API/Web_Workers_API">Web Workers API</a></li>
+ <li><a href="/fr/docs/Web/API/Web_Workers_API/Utilisation_des_web_workers">Utilisation des web workers </a></li>
+</ul>
diff --git a/files/fr/web/api/abstractworker/onerror/index.html b/files/fr/web/api/abstractworker/onerror/index.html
new file mode 100644
index 0000000000..b5ed4928e6
--- /dev/null
+++ b/files/fr/web/api/abstractworker/onerror/index.html
@@ -0,0 +1,55 @@
+---
+title: AbstractWorker.onerror
+slug: Web/API/AbstractWorker/onerror
+translation_of: Web/API/AbstractWorker/onerror
+---
+<p>{{ APIRef("AbstractWorker") }}</p>
+
+<p>La propriété <code><strong>AbstractWorker</strong></code><strong><code>.onerror</code></strong> de l'interface {{domxref("AbstractWorker")}} représente un {{domxref("EventHandler")}}, c'est-à-dire une fonction à appeler lorsque l'événement {{event("error")}} survient et se propage à travers le {{domxref("Worker")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre>myWorker.onerror = function() { ... };</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'extrait de code suivant montre la création d'un objet <a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker" title="The Worker interface represents a background task that can be easily created and can send messages back to its creator. Creating a worker is as simple as calling the Worker() constructor and specifying a script to be run in the worker thread."><code>Worker</code></a> utilisant le constructeur <a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker.Worker" title="The Worker() constructor creates a Worker that executes the script at the specified URL. This script must obey the same-origin policy."><code>Worker()</code></a> et l'ajout d'un gestionnaire <code>onerror</code> à l'objet en question :</p>
+
+<pre class="brush: js">var myWorker = new Worker("worker.js");
+
+myWorker.onerror = function() {
+  console.log('le worker a rencontré une erreur !');
+}</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', "#handler-abstractworker-onerror", "AbstractWorker.onerror")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">he compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("api.AbstractWorker.onerror")}}</p>
+
+<h3 id="Comportement_des_worker_en_cas_derreur_cross-origin">Comportement des worker en cas d'erreur cross-origin</h3>
+
+<p>Dans les versions antérieurs des navigateurs, essayer de charger un script <em>worker</em> en cross-origin lève une exception <code>SecurityError</code>; dans les versions plus récentes, un évènement {{event("error")}} est déclenché; suite à un changement de spécification. Pour plus d'information sur la manière de gérer cela: <a href="https://www.fxsitecompat.com/en-CA/docs/2016/loading-cross-origin-worker-now-fires-error-event-instead-of-throwing-worker-in-sandboxed-iframe-no-longer-allowed/">(en) Loading cross-origin worker now fires error event instead of throwing; worker in sandboxed iframe no longer allowed</a>.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("AbstractWorker")}} à laquelle elle appartient.</li>
+</ul>
diff --git a/files/fr/web/api/analysernode/analysernode/index.html b/files/fr/web/api/analysernode/analysernode/index.html
new file mode 100644
index 0000000000..eac71c9b94
--- /dev/null
+++ b/files/fr/web/api/analysernode/analysernode/index.html
@@ -0,0 +1,101 @@
+---
+title: AnalyserNode()
+slug: Web/API/AnalyserNode/AnalyserNode
+translation_of: Web/API/AnalyserNode/AnalyserNode
+---
+<p>{{APIRef("'Web Audio API'")}}{{SeeCompatTable}}</p>
+
+<p><span class="seoSummary">Le constructeur <strong><code>AnalyserNode</code></strong> crée un nouvel objet {{domxref("AnalyserNode")}}.</span></p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var analyserNode = new AnalyserNode(context, options)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><em>context</em></dt>
+ <dd>Référence à un {{domxref("AudioContext")}}.</dd>
+ <dt><em>options</em> {{optional_inline}}</dt>
+ <dd>
+ <ul>
+  <li><code>fftSize</code>: taille initiale sde la FFT pour l'analyse du domaine fréquentiel . La valeur par défaut est 2048.</li>
+  <li><code>maxDecibels</code>: <span id="result_box" lang="fr"><span class="hps">valeur</span> <span class="hps">maximale de</span></span> puissance de la plage pour l'analyse FFT, en décibels. La valeur par défaut est -30.</li>
+  <li><code>minDecibels</code>: <span id="result_box" lang="fr"><span class="hps">valeur</span> <span class="hps">minimale de</span></span> puissance de la plage pour l'analyse FFT, en décibels. La valeur par défaut est -100.</li>
+  <li><code>smoothingTimeConstant</code>:  valeur de lissage pour l'analyse FFT. La valeur par défaut est 0.8</li>
+ </ul>
+ </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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API','#the-analysernode-interface','AnalyserNode')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td>Première définition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatChrome(55.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(42)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(55.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile(42)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(55.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fr/web/api/analysernode/fftsize/index.html b/files/fr/web/api/analysernode/fftsize/index.html
new file mode 100644
index 0000000000..1e65de8d0a
--- /dev/null
+++ b/files/fr/web/api/analysernode/fftsize/index.html
@@ -0,0 +1,160 @@
+---
+title: AnalyserNode.fftSize
+slug: Web/API/AnalyserNode/fftSize
+translation_of: Web/API/AnalyserNode/fftSize
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<p>La propriété <code>fftSize</code> de l'objet {{ domxref("AnalyserNode") }} est un nombre entier non signé qui représente la taille de la FFT (<a href="/en-US/docs/" title="/en-US/docs/">transfomation de Fourier rapide</a>) à utiliser pour déterminer le domaine fréquentiel.<br>
+ <br>
+ La valeur de la propriété <code>fftSize</code> property's doit être une puissance de 2 non nulle située dans l'intervalle compris entre <code>32</code> et 32768 ; sa valeur par défaut est <code>2048</code>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: si la valeur n'est pas une puissance de 2, ou si elle ne se trouve pas dans l'intervalle spécifiée, l'exception <code>INDEX_SIZE_ERR</code> est levée.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var contexteAudio = new AudioContext();
+var analyseur = contexteAudio.createAnalyser();
+analyseur.fftSize = 2048;
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un nombre entier non signé.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'exemple suivant montre comment créer simplement un  <code>AnalyserNode</code> avec {{domxref("AudioContext")}}, puis utiliser  {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo <a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a>  (et en particulier <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js lines 128–205</a>).</p>
+
+<pre class="brush: js">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+var analyseur = contexteAudio.createAnalyser();
+
+  ...
+
+analyseur.fftSize = 2048;
+var tailleMemoireTampon = analyseur.fftSize;
+var tableauDonnees = new Uint8Array(tailleMemoireTampon);
+analyseur.getByteTimeDomainData(tableauDonnees);
+
+// dessine un oscilloscope de la source audio
+
+function dessiner() {
+
+      dessin = requestAnimationFrame(dessiner);
+
+      analyseur.getByteTimeDomainData(tableauDonnees);
+
+      contexteCanvas.fillStyle = 'rgb(200, 200, 200)';
+      contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR);
+
+      contexteCanvas.lineWidth = 2;
+      contexteCanvas.strokeStyle = 'rgb(0, 0, 0)';
+
+      contexteCanvas.beginPath();
+
+      var largeurTranche = LARGEUR * 1.0 / tailleMemoireTampon;
+      var x = 0;
+
+      for(var i = 0; i &lt; tailleMemoireTampon; i++) {
+
+        var v = tableauDonnees[i] / 128.0;
+        var y = v * HAUTEUR/2;
+
+        if(i === 0) {
+          contexteCanvas.moveTo(x, y);
+        } else {
+          contexteCanvas.lineTo(x, y);
+        }
+
+        x += largeurTranche;
+      }
+
+      contexteCanvas.lineTo(canvas.width, canvas.height/2);
+      contexteCanvas.stroke();
+    };
+
+    dessiner();</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('Web Audio API', '#widl-AnalyserNode-fftSize', 'fftSize')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support basique</td>
+   <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(25.0)}} </td>
+   <td>{{CompatNo}}</td>
+   <td>15.0{{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6.0{{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>26.0</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>33.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/analysernode/frequencybincount/index.html b/files/fr/web/api/analysernode/frequencybincount/index.html
new file mode 100644
index 0000000000..4d2d37a151
--- /dev/null
+++ b/files/fr/web/api/analysernode/frequencybincount/index.html
@@ -0,0 +1,143 @@
+---
+title: AnalyserNode.frequencyBinCount
+slug: Web/API/AnalyserNode/frequencyBinCount
+translation_of: Web/API/AnalyserNode/frequencyBinCount
+---
+<p>{{ APIRef("Web Audio API") }}<br>
+ <br>
+ La propriété <strong><code>frequencyBinCount</code></strong> de l'objet <a href="https://developer.mozilla.org/fr/docs/Web/API/AnalyserNode" title="L' interface AnalyserNode représente un noeud capable de fournir une fréquence en temps réel et l'analyse des informations temporaires. C'est un AudioNode qui passe le flux audio inchangé depuis l'entrée vers la sortie. Il a exactement une entrée et une sortie. Le noeud fonctionne même si la sortie n'est pas connectée."><code>AnalyserNode</code></a> est un nombre entier non signé équivalent à la moitié la taille de la FFT. Il correspond en général au nombre de valeurs que vous aurez à manipuler pour la visualisation.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var contexteAudio = new AudioContext();
+var analyseur = contexteAudio.createAnalyser();
+var tailleMemoireTampon = analyseur.frequencyBinCount;
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un nombre entier non signé.</p>
+
+<h2 id="Example">Example</h2>
+
+<p>L'exemple suivant montre comment créer simplement un  <code>AnalyserNode</code> avec <a href="https://developer.mozilla.org/fr/docs/Web/API/AudioContext" title="L'interface AudioContext représente un graphe de traitement audio fait de modules audio reliés entre eux, chaque module correspondant à un AudioNode. Un contexte audio contrôle à la fois la création des nœuds qu'il contient et l'exécution du traitement audio, ou du décodage. On commence toujours par créer un contexte audio, et tout ce qui va se passer ensuite se situera dans ce contexte."><code>AudioContext</code></a>, puis utiliser  <a href="https://developer.mozilla.org/fr/docs/Web/API/Window/requestAnimationFrame" title="La méthode window.requestAnimationFrame() notifie le navigateur que vous souhaitez executer une animation et demande que celui-ci execute une fonction spécifique de mise à jour de l'animation, avant le prochain repaint du navigateur. Cette méthode prend comme argument un callback qui sera appelé avant le repaint du navigateur."><code>requestAnimationFrame</code></a> et <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/canvas" title="L'élément HTML Canvas (&lt;canvas>) permet de modifier une zone graphique via un script (habituellement en JavaScript). Par exemple, il peut être utilisé pour dessiner des graphiques, manipuler des images ou jouer des animations. Il peut être utilisé pour l'affichage d'un jeu en ligne ou tout autre contenu interactif. Il est fortement recommandé de fournir un contenu alternatif au contenu du bloc &lt;canvas>. Ce contenu pourra être utilisé par les navigateurs plus anciens ne supportant pas l'élément &lt;canvas> et ceux pour lesquels JavaScript est désactivé."><code>&lt;canvas&gt;</code></a> pour collecter les données temporelles et dessiner un oscilloscopeen sortie. Pour des exemples plus complets, voir notre démo <a class="external external-icon" href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a>  (et en particulier <a class="external external-icon" href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js lines 128–205</a>).</p>
+
+<pre class="brush: js">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+var analyseur = contexteAudio.createAnalyser();
+analyseur.minDecibels = -90;
+analyseur.maxDecibels = -10;
+
+  ...
+
+analyseur.fftSize = 256;
+var tailleMemoireTampon = analyseur.frequencyBinCount;
+console.log(tailleMemoireTampon);
+var tableauDonnees = new Uint8Array(tailleMemoireTampon);
+
+contexteCanvas.clearRect(0, 0, LARGEUR, HAUTEUR);
+
+function dessiner() {
+  dessin = requestAnimationFrame(dessiner);
+
+  analyseur.getByteFrequencyData(tableauDonnees);
+
+  contexteCanvas.fillStyle = 'rgb(0, 0, 0)';
+  contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR);
+
+  var largeurBarre = (LARGEUR / tailleMemoireTampon) * 2.5 - 1;
+  var hauteurBarre;
+  var x = 0;
+
+  for(var i = 0; i &lt; tailleMemoireTampon; i++) {
+    hauteurBarre = tableauDonnees[i];
+
+    contexteCanvas.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)';
+    contexteCanvas.fillRect(x,HAUTEUR-hauteurBarre/2,largeurBarre,hauteurBarre/2);
+
+    x += largeurBarre;
+  }
+};
+
+dessiner();</pre>
+
+<h2 id="Spécification">Spécification</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('Web Audio API', '#widl-AnalyserNode-frequencyBinCount', 'frequencyBinCount')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support basique</td>
+   <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(25.0)}} </td>
+   <td>{{CompatNo}}</td>
+   <td>15.0{{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6.0{{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>26.0</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>33.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="new" href="https://developer.mozilla.org/fr/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/analysernode/getbytefrequencydata/index.html b/files/fr/web/api/analysernode/getbytefrequencydata/index.html
new file mode 100644
index 0000000000..7eb1da5c89
--- /dev/null
+++ b/files/fr/web/api/analysernode/getbytefrequencydata/index.html
@@ -0,0 +1,159 @@
+---
+title: AnalyserNode.getByteFrequencyData()
+slug: Web/API/AnalyserNode/getByteFrequencyData
+translation_of: Web/API/AnalyserNode/getByteFrequencyData
+---
+<p>{{ APIRef("Web Audio API") }}<br>
+ <br>
+ La méthode <strong><code>getByteFrequencyData()</code></strong> de l'objet <a href="https://developer.mozilla.org/fr/docs/Web/API/AnalyserNode" title="L' interface AnalyserNode représente un noeud capable de fournir une fréquence en temps réel et l'analyse des informations temporaires. C'est un AudioNode qui passe le flux audio inchangé depuis l'entrée vers la sortie. Il a exactement une entrée et une sortie. Le noeud fonctionne même si la sortie n'est pas connectée."><code>AnalyserNode</code></a> copie les données de fréquence dans le {{domxref("Uint8Array")}} passé en argument.</p>
+
+<div>
+<p>Si le tableau a moins d'éléments que {{domxref("AnalyserNode.frequencyBinCount")}}, les excédants sont supprimés; s'il en a davantage, les excédants sont ignorés.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var contexteAudio = new AudioContext();
+var analyseur = contexteAudio.createAnalyser();
+
+// Uint8Array devrait avoir la même taille que frequencyBinCount
+var tableauDonnees = new Uint8Array(analyseur.frequencyBinCount);
+
+// remplit le Uint8Array avec les données retournées par la méthode getByteFrequencyData()
+analyseur.getByteFrequencyData(tableauDonnees);
+</pre>
+
+<h3 id="Retourne">Retourne</h3>
+
+<p>Un {{domxref("Uint8Array")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'exemple suivant montre comment créer simplement un  <code>AnalyserNode</code> avec <a href="https://developer.mozilla.org/fr/docs/Web/API/AudioContext" title="L'interface AudioContext représente un graphe de traitement audio fait de modules audio reliés entre eux, chaque module correspondant à un AudioNode. Un contexte audio contrôle à la fois la création des nœuds qu'il contient et l'exécution du traitement audio, ou du décodage. On commence toujours par créer un contexte audio, et tout ce qui va se passer ensuite se situera dans ce contexte."><code>AudioContext</code></a>, puis utiliser  <a href="https://developer.mozilla.org/fr/docs/Web/API/Window/requestAnimationFrame" title="La méthode window.requestAnimationFrame() notifie le navigateur que vous souhaitez executer une animation et demande que celui-ci execute une fonction spécifique de mise à jour de l'animation, avant le prochain repaint du navigateur. Cette méthode prend comme argument un callback qui sera appelé avant le repaint du navigateur."><code>requestAnimationFrame</code></a> et <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/canvas" title="L'élément HTML Canvas (&lt;canvas>) permet de modifier une zone graphique via un script (habituellement en JavaScript). Par exemple, il peut être utilisé pour dessiner des graphiques, manipuler des images ou jouer des animations. Il peut être utilisé pour l'affichage d'un jeu en ligne ou tout autre contenu interactif. Il est fortement recommandé de fournir un contenu alternatif au contenu du bloc &lt;canvas>. Ce contenu pourra être utilisé par les navigateurs plus anciens ne supportant pas l'élément &lt;canvas> et ceux pour lesquels JavaScript est désactivé."><code>&lt;canvas&gt;</code></a> pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo <a class="external external-icon" href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a>  (et en particulier <a class="external external-icon" href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js lines 128–205</a>).</p>
+
+<pre class="brush: js">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+var analyseur = contexteAudio.createAnalyser();
+
+  ...
+
+analyseur.fftSize = 256;
+var tailleMemoireTampon = analyseur.frequencyBinCount;
+console.log(tailleMemoireTampon);
+var tableauDonnees = new Uint8Array(tailleMemoireTampon);
+
+contexteCanvas.clearRect(0, 0, LARGEUR, HAUTEUR);
+
+function dessiner() {
+  dessin = requestAnimationFrame(dessiner);
+
+  analyseur.getByteFrequencyData(tableauDonnees);
+
+  contexteCanvas.fillStyle = 'rgb(0, 0, 0)';
+  contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR);
+
+  var largeurBarre = (LARGEUR / tailleMemoireTampon) * 2.5;
+  var hauteurBarre;
+  var x = 0;
+
+  for(var i = 0; i &lt; tailleMemoireTampon; i++) {
+    hauteurBarre = tableauDonnees[i];
+
+    contexteCanvas.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)';
+    contexteCanvas.fillRect(x,HAUTEUR-hauteurBarre/2,largeurBarre,hauteurBarre/2);
+
+    x += largeurBarre + 1;
+  }
+};
+
+dessiner();</pre>
+
+<h2 id="Paramètres">Paramètres</h2>
+
+<dl>
+ <dt>array</dt>
+ <dd>Le {{domxref("Uint8Array")}} dans lequel seront copiées les données relatives à la fréquence.</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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#widl-AnalyserNode-getByteFrequencyData-void-Uint8Array-array', 'getByteFrequencyData()')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support basique</td>
+   <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(25.0)}} </td>
+   <td>{{CompatNo}}</td>
+   <td>15.0{{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6.0{{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>26.0</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>33.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p><a class="new" href="/fr/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></p>
+
+<ul>
+</ul>
diff --git a/files/fr/web/api/analysernode/getbytetimedomaindata/index.html b/files/fr/web/api/analysernode/getbytetimedomaindata/index.html
new file mode 100644
index 0000000000..8baaf608b4
--- /dev/null
+++ b/files/fr/web/api/analysernode/getbytetimedomaindata/index.html
@@ -0,0 +1,169 @@
+---
+title: AnalyserNode.getByteTimeDomainData()
+slug: Web/API/AnalyserNode/getByteTimeDomainData
+translation_of: Web/API/AnalyserNode/getByteTimeDomainData
+---
+<p>{{ APIRef("Mountain View APIRef Project") }}</p>
+
+<div>
+<p>La méthode <strong><code>getByteTimeDomainData()</code></strong> de l'interface {{ domxref("AnalyserNode") }} copie les données de forme d'onde, ou du domaine temporel, dans un tableau {{domxref("Uint8Array")}} passé en paramètre.</p>
+
+<p>Si le tableau a moins d'éléments que la propriété {{domxref("AnalyserNode.fftSize")}}, les données en excès sont supprimées. S'il a davantage d'éléments, les éléments non utilisés sont ignorés.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> contexteAudio <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">AudioContext</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> analyseur <span class="operator token">=</span> contexteAudio<span class="punctuation token">.</span><span class="function token">createAnalyser</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;
+
+</span></code>// La taille du tableau Uint8Array doit correspondre à la valeur de la propriété fftSize <code class="language-js">
+</code>var tableauDonnees = new Uint8Array(analyseur.fftSize);
+
+// remplit le tableau Uint8Array avec les données renvoyées par la méthode getByteTimeDomainData()
+analyseur.getByteTimeDomainData(tableauDonnees); </pre>
+
+<h3 id="Renvoie">Renvoie</h3>
+
+<p>Un tableau {{domxref("Uint8Array")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'exemple suivant montre comment créer simplement un  <code>AnalyserNode</code> avec {{domxref("AudioContext")}}, puis utiliser  {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a>  (et en particulier <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js lignes 128–205</a>).</p>
+
+<pre class="brush: js">var <code class="language-js">contexteAudio</code> = new (window.AudioContext || window.webkitAudioContext)();
+var analyseur = <code class="language-js">contexteAudio</code>.createAnalyser();
+
+  ...
+
+analyseur.fftSize = 2048;
+var tailleMemoireTampon = analyseur.frequencyBinCount;
+var tableauDonnees = new Uint8Array(tailleMemoireTampon);
+analyseur.getByteTimeDomainData(tableauDonnees);
+
+// dessine un oscilloscope de la source audio
+
+function dessiner() {
+
+      dessin = requestAnimationFrame(dessiner);
+
+      analyseur.getByteTimeDomainData(tableauDonnees);
+
+      contexteCanvas.fillStyle = 'rgb(200, 200, 200)';
+      contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR);
+
+      contexteCanvas.lineWidth = 2;
+      contexteCanvas.strokeStyle = 'rgb(0, 0, 0)';
+
+      contexteCanvas.beginPath();
+
+      var largeurBarre = WIDTH * 1.0 / tailleMemoireTampon;
+      var x = 0;
+
+      for(var i = 0; i &lt; tailleMemoireTampon; i++) {
+
+        var v = tableauDonnees[i] / 128.0;
+        var y = v * HAUTEUR/2;
+
+        if(i === 0) {
+          contexteCanvas.moveTo(x, y);
+        } else {
+          contexteCanvas.lineTo(x, y);
+        }
+
+        x += largeurBarre;
+      }
+
+      contexteCanvas.lineTo(canvas.width, canvas.height/2);
+      contexteCanvas.stroke();
+    };
+
+    dessiner();</pre>
+
+<h2 id="Paramètres">Paramètres</h2>
+
+<dl>
+ <dt>array</dt>
+ <dd>Le tableau {{domxref("Uint8Array")}} dans lequel les données temporelles seront copiées.</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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#widl-AnalyserNode-getByteTimeDomainData-void-Uint8Array-array', 'getByteTimeDomainData()')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support basique</td>
+   <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(25.0)}} </td>
+   <td>{{CompatNo}}</td>
+   <td>15.0{{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6.0{{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>26.0</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>33.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/analysernode/getfloatfrequencydata/index.html b/files/fr/web/api/analysernode/getfloatfrequencydata/index.html
new file mode 100644
index 0000000000..382218f900
--- /dev/null
+++ b/files/fr/web/api/analysernode/getfloatfrequencydata/index.html
@@ -0,0 +1,156 @@
+---
+title: AnalyserNode.getFloatFrequencyData()
+slug: Web/API/AnalyserNode/getFloatFrequencyData
+translation_of: Web/API/AnalyserNode/getFloatFrequencyData
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<div>
+<p>La méthode <strong><code>getFloatFrequencyData()</code></strong> de l'interface {{ domxref("AnalyserNode") }} copie les données de fréquence dans un tableau {{domxref("Float32Array")}} passé en paramètre.</p>
+
+<p>Si le tableau a moins d'éléments que la propriété {{domxref("AnalyserNode.frequencyBinCount")}}, les données en excès sont supprimées. S'il a davantage d'éléments, les éléments non utilisés sont ignorés.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var contexteAudio = new AudioContext();
+var analyseur = contexteAudio.createAnalyser();
+
+// La taille du tableau Float32Array doit correspondre à la valeur de la propriété frequencyBinCount
+var tableauDonnees = new Float32Array(analyseur.frequencyBinCount);
+
+// remplit le tableau Uint8Array avec les données renvoyées par la méthode getByteTimeDomainData()
+analyseur.getByteTimeDomainData(tableauDonnees);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>array</code></dt>
+ <dd>{{domxref("Float32Array")}} dans lequel seront copiées les données de fréquence. Pour tout échantillon silencieux, la valeur est <code>-<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code>.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p><code>undefined</code>.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'exemple suivant montre comment créer simplement un  <code>AnalyserNode</code> avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo <a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a>  (et en particulier <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js lignes 128–205</a>).</p>
+
+<pre class="brush: js">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+var analyseur = contexteAudio.createAnalyser();
+
+  ...
+
+analyseur.fftSize = 256;
+var tailleMemoireTampon = analyseur.frequencyBinCount;
+console.log(tailleMemoireTampon);
+var tableauDonnees = new Float32Array(tailleMemoireTampon);
+
+contexteCanvas.clearRect(0, 0, LARGEUR, HAUTEUR);
+
+function dessiner() {
+  dessin = requestAnimationFrame(dessiner);
+  analyseur.getFloatFrequencyData(dataArray);
+  contexteCanvas.fillStyle = 'rgb(0, 0, 0)';
+  contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR);
+
+  var largeurBarre = (LARGEUR / tailleMemoireTampon) * 2.5;
+  var hauteurBarre;
+  var x = 0;
+
+  for(var i = 0; i &lt; tailleMemoireTampon; i++) {
+    hauteurBarre = (tableauDonnees[i] + 140)*2;
+    contexteCanvas.fillStyle = 'rgb(' + Math.floor(hauteurBarre+100) + ',50,50)';
+    contexteCanvas.fillRect(x, HEIGHT-hauteurBarre/2, largeurBarre, hauteurBarre/2);
+    x += largeurBarre + 1;
+  }
+};
+
+dessiner();</pre>
+
+<h2 id="Paramètres_2">Paramètres</h2>
+
+<dl>
+ <dt>array</dt>
+ <dd>Le tableau {{domxref("Float32Array")}} dans lequel seront copiées les données du domaine fréquentiel.</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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#widl-AnalyserNode-getFloatFrequencyData-void-Float32Array-array', 'getFloatFrequencyData()')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
+   <td>{{CompatGeckoDesktop(25.0)}} </td>
+   <td>{{CompatNo}}</td>
+   <td>15.0{{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6.0{{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>26.0</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>33.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/analysernode/getfloattimedomaindata/index.html b/files/fr/web/api/analysernode/getfloattimedomaindata/index.html
new file mode 100644
index 0000000000..171f5419c8
--- /dev/null
+++ b/files/fr/web/api/analysernode/getfloattimedomaindata/index.html
@@ -0,0 +1,166 @@
+---
+title: AnalyserNode.getFloatTimeDomainData()
+slug: Web/API/AnalyserNode/getFloatTimeDomainData
+translation_of: Web/API/AnalyserNode/getFloatTimeDomainData
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<div>
+<p>La méthode <strong><code>getFloatTimeDomainData()</code></strong> de l'interface {{ domxref("AnalyserNode") }} copie les données de forme d'onde ou du domaine temporel, dans un tableau {{domxref("Float32Array")}} passé en paramètre.</p>
+
+<p>Si le tableau a moins d'éléments que la propriété {{domxref("AnalyserNode.fftSize")}}, les données en excès sont supprimées. S'il a davantage d'éléments, les éléments non utilisés sont ignorés.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var contexteAudio = new AudioContext();
+var analyseur = contexteAudio.createAnalyser();
+
+// La taille du tableau Float32Array doit correspondre à la valeur de la propriété fftSize
+var tableauDonnees = new Float32Array(analyseur.fftSize);
+
+// remplit le tableau Float32Array avec les données renvoyées par la méthode getFloatTimeDomainData()
+analyseur.getFloatTimeDomainData(tableauDonnees);
+</pre>
+
+<h3 id="Renvoie">Renvoie</h3>
+
+<p>Un tableau {{domxref("Float32Array")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'exemple suivant montre comment créer simplement un  <code>AnalyserNode</code> avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo <a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a>  (et en particulier <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js lignes 128–205</a>).</p>
+
+<pre class="brush: js">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+var analyseur = contexteAudio.createAnalyser();
+
+  ...
+
+analyseur.fftSize = 1024;
+var tailleMemoireTampon = analyseur.fftSize;
+console.log(tailleMemoireTampon);
+var tableauDonnees = new Float32Array(tailleMemoireTampon);
+
+contexteCanvas.clearRect(0, 0, LARGEUR, HAUTEUR);
+
+function dessiner() {
+  dessin = requestAnimationFrame(dessiner);
+  analyseur.getFloatTimeDomainData(tableauDonnees);
+
+  contexteCanvas.fillStyle = 'rgb(200, 200, 200)';
+  contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR);
+  contexteCanvas.lineWidth = 2;
+  contexteCanvas.strokeStyle = 'rgb(0, 0, 0)';
+  contexteCanvas.beginPath();
+
+  var largeurTranche = LARGEUR * 1.0 / tailleMemoireTampon;
+  var x = 0;
+
+  for(var i = 0; i &lt; tailleMemoireTampon; i++) {
+    var v = tableauDonnees[i] * 200.0;
+    var y = HAUTEUR/2 + v;
+
+    if(i === 0) {
+      contexteCanvas.moveTo(x, y);
+    } else {
+      contexteCanvas.lineTo(x, y);
+    }
+    x += largeurTranche;
+  }
+
+  contexteCanvas.lineTo(canvas.width, canvas.height/2);
+  contexteCanvas.stroke();
+};
+
+dessiner();</pre>
+
+<p> </p>
+
+<h2 id="Paramètres">Paramètres</h2>
+
+<dl>
+ <dt>array</dt>
+ <dd>Un tableau {{domxref("Float32Array")}} dans lequel seront copiées les données du domaine temporel.</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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#widl-AnalyserNode-getFloatTimeDomainData-void-Float32Array-array', 'getFloatTimeDomainData()')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support basique</td>
+   <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(25.0)}} </td>
+   <td>{{CompatNo}}</td>
+   <td>15.0{{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6.0{{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>26.0</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>33.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/analysernode/index.html b/files/fr/web/api/analysernode/index.html
new file mode 100644
index 0000000000..dcf94620e6
--- /dev/null
+++ b/files/fr/web/api/analysernode/index.html
@@ -0,0 +1,181 @@
+---
+title: AnalyserNode
+slug: Web/API/AnalyserNode
+tags:
+  - API
+  - AnalyserNode
+  - Reference
+translation_of: Web/API/AnalyserNode
+---
+<div>{{APIRef("Web Audio API")}}</div>
+
+<p>L' interface <strong><code>AnalyserNode</code></strong><strong> </strong>représente un noeud capable de fournir en temps réel des informations d'analyse de la fréquence et du domaine temporel. C'est un {{domxref("AudioNode")}} qui transmet le flux audio inchangé depuis l'entrée vers la sortie, mais permet de capturer les données générées pour les traiter et/ou les visualiser.</p>
+
+<p>Il a exactement une entrée et une sortie. Le noeud fonctionne même si la sortie n'est pas connectée.</p>
+
+<p><img alt="Without modifying the audio stream, the node allows to get the frequency and time-domain data associated to it, using a FFT." src="https://mdn.mozillademos.org/files/12968/fttaudiodata.svg"></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">N<dfn>ombre d'entrées</dfn></th>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Nombre de sorties</dfn></th>
+   <td><code>1</code> (mais peut ne pas être connectée)</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Mode de comptage des canaux</dfn></th>
+   <td><code>"explicit"</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Nombre de canaux</dfn></th>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Interprétation du canal</dfn></th>
+   <td><code>"speakers"</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Héritage">Héritage</h2>
+
+<p>L'interface hérite des parents suivants:</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("AnalyserNode.AnalyserNode", "AnalyserNode()")}}</dt>
+ <dd>Crée une nouvelle instance de l'objet <code>AnalyserNode</code>.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Hérite des propriétés de son parent. </em><em>{{domxref("AudioNode")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("AnalyserNode.fftSize")}}</dt>
+ <dd>Entier long non signé qui représente la taille de la <a href="/en-US/docs/">FFT</a> (transformation de Fourier rapide) qui sera utilisé pour déterminer le domaine fréquentiel.</dd>
+ <dt>{{domxref("AnalyserNode.frequencyBinCount")}} {{readonlyInline}}</dt>
+ <dd>Entier long non signé égal à la moitié fftSize. C'est en général le nombre de valeurs qu'on manipule pour la visualisation.</dd>
+ <dt>{{domxref("AnalyserNode.minDecibels")}}</dt>
+ <dd>Nombre flottant à double précision qui représente la valeur minimale de puissance dans la plage de mise à l'échelle pour l'analyse des données FFT, pour la conversion en octets non signés - cela équivaut à la valeur minimum de la plage de résultats de <code>getByteFrequencyData()</code>.</dd>
+ <dt>{{domxref("AnalyserNode.maxDecibels")}}</dt>
+ <dd>Nombre flottant à double précision qui représente la valeur maximale de puissance dans la plage de mise à l'échelle pour l'analyse des données FFT, pour la conversion en octets non signés - cela équivaut à la valeur maximum de la plage de résultats de <code>getByteFrequencyData()</code>.</dd>
+ <dt>{{domxref("AnalyserNode.smoothingTimeConstant")}}</dt>
+ <dd>Nombre flottant à double précision qui représente la moyenne de la trame en cours avec la dernière trame analysée - elle permet de lisser la transition entre les valeurs.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Hérite des propriétés de son parent, </em><em>{{domxref("AudioNode")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("AnalyserNode.getFloatFrequencyData()")}}</dt>
+ <dd>Copie les données de fréquence dans un tableau {{domxref("Float32Array")}} passé en paramètre.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("AnalyserNode.getByteFrequencyData()")}}</dt>
+ <dd>Copie les données de fréquence dans un tableau {{domxref("Uint8Array")}} passé en paramètre.</dd>
+ <dt>{{domxref("AnalyserNode.getFloatTimeDomainData()")}}</dt>
+ <dd>Copie les données de forme d'onde ou du domaine temporel dans un tableau {{domxref("Float32Array")}} passé en paramètre.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("AnalyserNode.getByteTimeDomainData()")}}</dt>
+ <dd>Copie les données de forme d'onde ou du domaine temporel dans un tableau {{domxref("Uint8Array")}} passé en paramètre.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<div class="note">
+<p><strong>Note</strong>: Voir <a href="/fr/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Visualisations avec la Web Audio API</a> pour plus d'informations.</p>
+</div>
+
+<p>L'exemple suivant montre comment créer simplement un  <code>AnalyserNode</code> avec {{domxref("AudioContext")}}, puis utiliser  {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a>  (et en particulier <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js lines 128–205</a>).</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+var analyseur = contexteAudio.createAnalyser();
+
+  ...
+
+analyseur.fftSize = 2048;
+var tailleMemoireTampon = analyseur.frequencyBinCount;
+var tableauDonnees = new Uint8Array(tailleMemoireTampon);
+analyseur.getByteTimeDomainData(tableauDonnees);
+
+// dessine un oscilloscope de la source audio
+</code>
+<code class="language-js">var canvas = document.getElementById("oscilloscope");
+var contexteCanvas = canvas.getContext("2d");
+
+function dessiner() {
+
+      requestAnimationFrame(dessiner);
+
+      analyseur.getByteTimeDomainData(tableauDonnees);
+
+      contexteCanvas.fillStyle = 'rgb(200, 200, 200)';
+      contexteCanvas.fillRect(0, 0, WIDTH, HEIGHT);
+
+      contexteCanvas.lineWidth = 2;
+      contexteCanvas.strokeStyle = 'rgb(0, 0, 0)';
+
+      contexteCanvas.beginPath();
+
+      var sliceWidth = WIDTH * 1.0 / tailleMemoireTampon;
+      var x = 0;
+
+      for(var i = 0; i &lt; tailleMemoireTampon; i++) {
+
+        var v = tableauDonnees[i] / 128.0;
+        var y = v * HEIGHT/2;
+
+        if(i === 0) {
+          contexteCanvas.moveTo(x, y);
+        } else {
+          contexteCanvas.lineTo(x, y);
+        }
+
+        x += sliceWidth;
+      }
+
+      contexteCanvas.lineTo(canvas.width, canvas.height/2);
+      contexteCanvas.stroke();
+    };
+
+    dessiner();</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('Web Audio API', '#the-analysernode-interface', 'AnalyserNode')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.AnalyserNode")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/analysernode/maxdecibels/index.html b/files/fr/web/api/analysernode/maxdecibels/index.html
new file mode 100644
index 0000000000..a66fdaefd4
--- /dev/null
+++ b/files/fr/web/api/analysernode/maxdecibels/index.html
@@ -0,0 +1,149 @@
+---
+title: AnalyserNode.maxDecibels
+slug: Web/API/AnalyserNode/maxDecibels
+translation_of: Web/API/AnalyserNode/maxDecibels
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<p>La propriété <strong><code>maxDecibels</code></strong> de l'objet {{ domxref("AnalyserNode") }} est un nombre  flottant à double précision représentant la puissance maximum de l'intervalle pour l'analyse des données FFT, pour une conversion vers des valeurs non signées ou des nombres flottants — en d'autres termes, elle spécifie la valeur maximum pour l'intervalle de résultats des méthodes <code>getFloatFrequencyData()</code> et <code>getByteFrequencyData()</code>.</p>
+
+<p>Sa valeur par défaut est <code>-30</code>.</p>
+
+<div class="note">
+<p><strong>Note</strong>:  Si une valeur supérieure à <code>AnalyserNode.maxDecibels</code> est indiquée, une erreur <code>INDEX_SIZE_ERR</code> est levée.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var contexteAudio = new AudioContext();
+var analyseur = contexteAudio.createAnalyser();
+analyseur.maxDecibels = -10;
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un nombre flottant à double précision.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'exemple suivant montre comment créer simplement un  <code>AnalyserNode</code> avec {{domxref("AudioContext")}}, puis utiliser  {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo <a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a>  (et en particulier <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js lignes 128–205</a>).</p>
+
+<pre class="brush: js">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+var analyseur = contexteAudio.createAnalyser();
+analyseur.minDecibels = -90;
+analyseur.maxDecibels = -10;
+
+  ...
+
+analyseur.fftSize = 256;
+var tailleMemoireTampon = analyseur.frequencyBinCount;
+console.log(bufferLength);
+var tableauDonnees = new Uint8Array(tailleMemoireTampon);
+
+contexteCanvas.clearRect(0, 0, LARGEUR, HAUTEUR);
+
+function dessiner() {
+  dessin = requestAnimationFrame(dessiner);
+
+  analyseur.getByteFrequencyData(tableauDonnees);
+
+  contexteCanvas.fillStyle = 'rgb(0, 0, 0)';
+  contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR);
+
+  var largeurBarre = (LARGEUR / tailleMemoireTampon) * 2.5;
+  var hauteurBarre;
+  var x = 0;
+
+  for(var i = 0; i &lt; tailleMemoireTampon; i++) {
+    hauteurBarre = tableauDonnees[i];
+
+    contexteCanvas.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)';
+    contexteCanvas.fillRect(x,HEIGHT-hauteurBarre/2,largeurBarre,hauteurBarre/2);
+
+    x += largeurBarre + 1;
+  }
+};
+
+dessiner();</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('Web Audio API', '#widl-AnalyserNode-maxDecibels', 'maxDecibels')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support basique</td>
+   <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(25.0)}} </td>
+   <td>{{CompatNo}}</td>
+   <td>15.0{{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6.0{{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>26.0</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>33.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/analysernode/mindecibels/index.html b/files/fr/web/api/analysernode/mindecibels/index.html
new file mode 100644
index 0000000000..f75062cc0d
--- /dev/null
+++ b/files/fr/web/api/analysernode/mindecibels/index.html
@@ -0,0 +1,149 @@
+---
+title: AnalyserNode.minDecibels
+slug: Web/API/AnalyserNode/minDecibels
+translation_of: Web/API/AnalyserNode/minDecibels
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<p>La propriété <strong><code>minDecibels</code></strong> de l'objet {{ domxref("AnalyserNode") }} est un nombre flottant à double précision représentant la puissance maximum de l'intervalle pour l'analyse des données FFT, pour une conversion vers des valeurs non signées ou des nombres flottants — en d'autres termes, elle spécifie la valeur minimum pour l'intervalle de résultats des méthodes <code>getFloatFrequencyData()</code> et <code>getByteFrequencyData()</code>.</p>
+
+<p>Sa valeur par défaut est <code>-100</code>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Si une valeur inférieure à <code>AnalyserNode.minDecibels</code> est indiquée, une erreur <code>INDEX_SIZE_ERR</code> est levée.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var contexteAudio = new AudioContext();
+var analyseur = contexteAudio.createAnalyser();
+analyseur.maxDecibels = -90;
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un nombre flottant à double précision.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'exemple suivant montre comment créer simplement un  <code>AnalyserNode</code> avec {{domxref("AudioContext")}}, puis utiliser  {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo <a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a>  (et en particulier <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js lines 128–205</a>).</p>
+
+<pre class="brush: js">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+var analyseur = contexteAudio.createAnalyser();
+analyseur.minDecibels = -90;
+analyseur.maxDecibels = -10;
+
+  ...
+
+analyseur.fftSize = 256;
+var tailleMemoireTampon = analyseur.frequencyBinCount;
+console.log(bufferLength);
+var tableauDonnees = new Uint8Array(tailleMemoireTampon);
+
+contexteCanvas.clearRect(0, 0, LARGEUR, HAUTEUR);
+
+function dessiner() {
+  dessin = requestAnimationFrame(dessiner);
+
+  analyseur.getByteFrequencyData(tableauDonnees);
+
+  contexteCanvas.fillStyle = 'rgb(0, 0, 0)';
+  contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR);
+
+  var largeurBarre = (LARGEUR / tailleMemoireTampon) * 2.5;
+  var hauteurBarre;
+  var x = 0;
+
+  for(var i = 0; i &lt; tailleMemoireTampon; i++) {
+    hauteurBarre = tableauDonnees[i];
+
+    canvasCtx.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)';
+    canvasCtx.fillRect(x,HEIGHT-hauteurBarre/2,largeurBarre,hauteurBarre/2);
+
+    x += largeurBarre + 1;
+  }
+};
+
+dessiner();</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('Web Audio API', '#widl-AnalyserNode-maxDecibels', 'maxDecibels')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support basique</td>
+   <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(25.0)}} </td>
+   <td>{{CompatNo}}</td>
+   <td>15.0{{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6.0{{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>26.0</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>33.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/analysernode/smoothingtimeconstant/index.html b/files/fr/web/api/analysernode/smoothingtimeconstant/index.html
new file mode 100644
index 0000000000..3b9382dbff
--- /dev/null
+++ b/files/fr/web/api/analysernode/smoothingtimeconstant/index.html
@@ -0,0 +1,154 @@
+---
+title: AnalyserNode.smoothingTimeConstant
+slug: Web/API/AnalyserNode/smoothingTimeConstant
+translation_of: Web/API/AnalyserNode/smoothingTimeConstant
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<p>La propriété <strong><code>smoothingTimeConstant</code></strong> de l'interface {{ domxref("AnalyserNode") }} est un nombre flottant à double précision qui représente <span lang="fr"><span class="hps">une</span><span class="hps"> </span><span class="hps">moyenne</span> </span>entre le buffer courant et le buffer précédent<span lang="fr"><span> - elle sert à lisser</span></span> la transition entre les valeurs.</p>
+
+<p>La valeur est <code>0.8</code> par défaut; elle doit être comprise entre <code>0</code> et <code>1</code>. Lorsqu'elle vaut 0, aucune moyenne n'est effectuée, tandis que la valeur 1 signifie que le chevauchement entre le buffer en cours et le buffer précédent est conséquent lors du calcul des valeurs, ce qui a pour effet d'adoucir le changement lors des appels {{domxref("AnalyserNode.getFloatFrequencyData")}}/{{domxref("AnalyserNode.getByteFrequencyData")}}.</p>
+
+<p>En termes techniques, on applique une <a href="http://webaudio.github.io/web-audio-api/#blackman-window">fenêtre de Blackman</a> pour lisser les valeurs dans le temps. La valeur par défaut convient à la plupart des cas.</p>
+
+<div class="note">
+<p><strong>Note</strong>:  Si la valeur n'est pas comprise entre 0 et 1, une exception <code>INDEX_SIZE_ERR</code> est levée.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var contexteAudio = new AudioContext();
+var analyseur = contexteAudio.createAnalyser();
+analyseur.smoothingTimeConstant = 1;
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un nombre flottant à double précision.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'exemple suivant montre comment créer simplement un  <code>AnalyserNode</code> avec {{domxref("AudioContext")}}, puis utiliser  {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo <a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a>  (et en particulier <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js lines 128–205</a>).</p>
+
+<p><code>Si vou sêtes curieux du fonctionnement de smoothingTimeConstant()</code>, essayez de cloner l'exemple ci-dessous et d'affecter : <code>analyser.smoothingTimeConstant = 0;</code>. Vous verrez que les changements de valeur sont bien plus discordants.</p>
+
+<pre class="brush: js">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+var analyseur = contexteAudio.createAnalyser();
+analyseur.minDecibels = -90;
+analyseur.maxDecibels = -10;
+analyseur.smoothingTimeConstant = 0.85;
+
+  ...
+
+analyseur.fftSize = 256;
+var tailleMemoireTampon = analyseur.frequencyBinCount;
+console.log(tailleMemoireTampon);
+var tableauDonnees = new Uint8Array(tailleMemoireTampon);
+
+contexteCanvas.clearRect(0, 0, LARGEUR, HAUTEUR);
+
+function dessiner() {
+  dessin = requestAnimationFrame(dessiner);
+
+  analyseur.getByteFrequencyData(tableauDonnees);
+
+  contexteCanvas.fillStyle = 'rgb(0, 0, 0)';
+  contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR);
+
+  var largeurBarre = (LARGEUR / tailleMemoireTampon) * 2.5;
+  var hauteurBarre;
+  var x = 0;
+
+  for(var i = 0; i &lt; tailleMemoireTampon; i++) {
+    hauteurBarre = tableauDonnees[i];
+
+    contexteCanvas.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)';
+    contexteCanvas.fillRect(x, HAUTEUR-hauteurBarre/2, largeurBarre, hauteurBarre/2);
+
+    x += largeurBarre + 1;
+  }
+};
+
+dessiner();</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('Web Audio API', '#widl-AnalyserNode-smoothingTimeConstant', 'smoothingTimeConstant')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support basique</td>
+   <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(25.0)}} </td>
+   <td>{{CompatNo}}</td>
+   <td>15.0{{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6.0{{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>26.0</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>33.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/animation/index.html b/files/fr/web/api/animation/index.html
new file mode 100644
index 0000000000..1e6d42ec28
--- /dev/null
+++ b/files/fr/web/api/animation/index.html
@@ -0,0 +1,188 @@
+---
+title: Animation
+slug: Web/API/Animation
+tags:
+  - API
+  - Animations
+  - Experimental
+  - Interface
+  - Reference
+  - Web Animations
+  - waapi
+  - web animation api
+translation_of: Web/API/Animation
+---
+<p>{{ APIRef("Web Animations API") }}{{SeeCompatTable}}</p>
+
+<p>L'interface <strong><code>Animation</code></strong> de <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API">l'API Web Animations</a> correspond à un lecteur d'animations et offre les commandes nécessaires au contrôle et à la chronologie d'un noeud ou d'une source d'animation.</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("Animation.Animation()", "Animation()")}}</dt>
+ <dd>Crée une nouvelle instance de l'objet <code>Animation</code>.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("Animation.currentTime")}}</dt>
+ <dd>La valeur actuelle de temps de l'animation en millisecondes, que l'animation soit en pause ou en cours. Si l'animation ne possède pas de {{domxref("AnimationTimeline", "timeline")}}, est inactive ou n'a toujours pas été lancée, la valeur est <code>null</code>.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.effect")}}</dt>
+ <dd>Récupère et défini le {{domxref("KeyframeEffect")}} associé à cette animation.</dd>
+ <dt>{{domxref("Animation.finished")}} {{readOnlyInline}}</dt>
+ <dd>Retourne la <code>Promise </code>terminée en cours pour cette animation.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.id")}}</dt>
+ <dd>Récupère et défini le <code>String</code> utilisé pour identifier l'animation.</dd>
+ <dt>{{domxref("Animation.playState")}} {{readOnlyInline}}</dt>
+ <dd>Retourne une valeur énumérée qui décit l'état de lecture de l'animation.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.playbackRate")}}</dt>
+ <dd>Retourne et défini la fréquence de lecture de l'animation.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.ready")}} {{readOnlyInline}}</dt>
+ <dd>Retourne la <code>Promise </code>prête en cours pour l'animation.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.startTime")}}</dt>
+ <dd>Retourne et défini le moment prévu auquel la lecture de l'animation devrait commencer.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.timeline")}}</dt>
+ <dd>Retourne et défini la {{domxref("AnimationTimeline", "timeline")}} associée à cette animation.</dd>
+</dl>
+
+<h3 id="Gestionnaire_d'événements">Gestionnaire d'événements</h3>
+
+<dl>
+ <dt>{{domxref("Animation.oncancel")}}</dt>
+ <dd>Retourne et défini le gestionnaire d'événement pour l'événement <code>cancel </code>(annuler).</dd>
+ <dt>{{domxref("Animation.onfinish")}}</dt>
+ <dd>Retourne et défini le gestionnaire d'événement pour l'événement <code>finish</code> (terminer).</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("Animation.cancel()")}}</dt>
+ <dd>Supprime toutes les {{domxref("KeyframeEffect", "keyframeEffects")}} dues à cette animation et interomp la lecture.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.finish()")}}</dt>
+ <dd>Cherche la fin de l'animation, en fonction que l'animation soit en lecture normale ou inversée.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.pause()")}}</dt>
+ <dd>Suspend la lecture de l'animation.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.play()")}}</dt>
+ <dd>Démarre ou reprend la lecture de l'animation, ou redémarre l'animation au début si celle-ci est déjà terminée.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.reverse()")}}</dt>
+ <dd>Inverse la direction de lecture, en s'arrêtant au début de l'animation. Si l'animation est terminée ou annulée, elle sera jouée de la fin vers le début.</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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Web Animations", "#the-animation-interface", "Animation")}}</td>
+   <td>{{Spec2("Web Animations")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatChrome(39.0)}} [1]</td>
+   <td>{{CompatGeckoDesktop(48)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>effet, ligne temporelle, terminée, prête</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>Constructeur</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(48)}}</td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatVersionUnknown}} [1]</td>
+   <td>{{CompatGeckoMobile(48)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Les version précédent Chomme 44 implémente AnimationPlayer (le nom de l'interface dans la version précédente de cette spécification).</p>
+
+<p> </p>
diff --git a/files/fr/web/api/animationeffecttimingproperties/delay/index.html b/files/fr/web/api/animationeffecttimingproperties/delay/index.html
new file mode 100644
index 0000000000..bb8c8d9e56
--- /dev/null
+++ b/files/fr/web/api/animationeffecttimingproperties/delay/index.html
@@ -0,0 +1,140 @@
+---
+title: Delay
+slug: Web/API/AnimationEffectTimingProperties/delay
+tags:
+  - API
+  - Animation
+  - AnimationEffectTimingProperties
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/API/EffectTiming/delay
+---
+<div>{{SeeCompatTable}}{{APIRef("Web Animations")}}</div>
+
+<p>La propriété <strong><code>delay</code></strong> est un dictionnaire pour {{domxref("AnimationEffectTimingProperties")}} qui représente le nombre de millisecondes à attendre avant de démarrer une animation.</p>
+
+<div class="note">
+<p><strong>Note :</strong> {{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}} et {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} acceptent toutes un objet avec des propriétés de minutage, y compris <code>delay</code>. La valeur de <code>delay</code> correspond directement à {{domxref("AnimationEffectTimingReadOnly.delay")}} dans les objets  {{domxref("AnimationEffectReadOnly.timing")}} renvoyés par {{domxref("AnimationEffectReadOnly")}}, {{domxref("KeyframeEffectReadOnly")}} et {{domxref("KeyframeEffect")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>timingProperties</em> = {
+  delay: <em>delayInMilliseconds</em>
+};
+
+<em>timingProperties</em>.delay = <em>delayInMilliseconds</em>;
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un nombre qui indique la durée qui doit s'écouler entre le début du cycle de l'animation et le début de l'intervalle d'activité (c'est-à-dire le moment où l'animation commence réellement). La valeur par défaut est 0.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple <em><a href="https://codepen.io/rachelnabors/pen/EPJdJx?editors=0010">Pool of Tears</a></em>, chaque larme commence à un instant aléatoire grâce à l'objet de minutage :</p>
+
+<pre class="brush: js">// Générateur de valeurs plus
+// ou moins aléatoires
+var getRandomMsRange = function(min, max) {
+  return Math.random() * (max - min) + min;
+}
+
+// On parcourt l'ensemble des larmes
+tears.forEach(function(el) {
+
+  // On anime chacune des larmes
+  el.animate(
+    tearsFalling,
+    {
+      delay: getRandomMsRange(-1000, 1000), // aléatoire pour chaque larme
+      duration: getRandomMsRange(2000, 6000), // aléatoire pour chaque larme
+      iterations: Infinity,
+      easing: "cubic-bezier(0.6, 0.04, 0.98, 0.335)"
+    });
+});</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Animations', '#start-delay', 'delay')}}</td>
+   <td>{{Spec2('Web Animations')}}</td>
+   <td>Brouillon d'édiiton.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(45)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Chrome pour Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(45)}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] L'API Web Animations est uniquement activée par défaut pour les canaux <em>Nightly</em> et <em>Developer Edition</em>. Elle peut être activée dans les autres versions avec la préférence <code>dom.animations-api.core.enabled</code>.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Web_Animations_API">L'API Web Animations</a></li>
+ <li>{{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}}, et {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} qui acceptent toutes un objet de minutage, y compris celui-ci (<code>delay</code>)</li>
+ <li>La valeur de cette propriété correspond à celle de {{domxref("AnimationEffectTimingReadOnly")}} (qui est l'objet de minutage {{domxref("AnimationEffectReadOnly.timing", "timing")}} pour {{domxref("AnimationEffectReadOnly")}}, {{domxref("KeyframeEffectReadOnly")}} et {{domxref("KeyframeEffect")}}).</li>
+ <li>Les propriétés CSS {{cssxref("transition-delay")}} et {{cssxref("animation-delay")}}</li>
+</ul>
diff --git a/files/fr/web/api/animationeffecttimingproperties/index.html b/files/fr/web/api/animationeffecttimingproperties/index.html
new file mode 100644
index 0000000000..cc984622c9
--- /dev/null
+++ b/files/fr/web/api/animationeffecttimingproperties/index.html
@@ -0,0 +1,124 @@
+---
+title: Animation Effect Timing Properties
+slug: Web/API/AnimationEffectTimingProperties
+tags:
+  - API
+  - Animation
+  - AnimationEffectTimingProperties
+  - Dictionnaire
+  - Experimental
+  - Interface
+  - Reference
+translation_of: Web/API/EffectTiming
+---
+<div>{{SeeCompatTable}}{{APIRef("Web Animations")}}</div>
+
+<p>Le dictionnaire <strong><code>AnimationEffectTimingProperties</code></strong> est utilisé par les méthodes {{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}} et {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} afin de décrire les propriétés temporelles pour les effets d'animation. L'ensemble de ces propriétés sont optionnelles mais si <code>duration</code> n'est pas paramétrée, l'animation ne sera pas lancée.</p>
+
+<p>Ces propriétés décrivent la façon dont l'agent utilisateur applique l'animation entre chaque étape (<em>keyframe</em>) et comment elle se comporte au début et à la fin.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("AnimationEffectTimingProperties.delay", "delay")}} {{optional_inline}}</dt>
+ <dd>Le nombre de millisecondes à attendre avant de démarrer l'animation. La valeur par défaut est 0.</dd>
+ <dt>{{domxref("AnimationEffectTimingProperties.direction", "direction")}} {{optional_inline}}</dt>
+ <dd>Indique si l'animation se déroule dans le sens the animation runs forwards (<code>normal</code>), backwards (<code>reverse</code>), switches direction after each iteration (<code>alternate</code>), or runs backwards and switches direction after each iteration (<code>alternate-reverse</code>). Defaults to <code>"normal"</code>.</dd>
+ <dt>{{domxref("AnimationEffectTimingProperties.duration", "duration")}} {{optional_inline}}</dt>
+ <dd>La durée d'une itération, exprimée en millisecondes. La valeur par défaut est 0. Bien que cette propriété soit optionnelle, il faut garder à l'esprit que l'animation ne sera pas lancée si la valeur est 0.</dd>
+ <dt>{{domxref("AnimationEffectTimingProperties.easing", "easing")}} {{optional_inline}}</dt>
+ <dd>La courbe de progression de l'animation au cours du temps. Cette propriété accepte des valeurs pré-paramétrées comme <code>"linear"</code>, <code>"ease"</code>, <code>"ease-in"</code>, <code>"ease-out"</code> et <code>"ease-in-out"</code> ou une fonction <code>"cubic-bezier"</code> de la forme <code>"cubic-bezier(0.42, 0, 0.58, 1)"</code>. La valeur par défaut est <code>"linear"</code>.</dd>
+ <dt>{{domxref("AnimationEffectTimingProperties.endDelay", "endDelay")}} {{optional_inline}}</dt>
+ <dd>Le nombre de millisecondes à attendre après la fin de l'animation. Cette propriété est principalement utilisée lorsqu'on enchaîne une animation à la suite d'une autre. La valeur par défaut est 0.</dd>
+ <dt>{{domxref("AnimationEffectTimingProperties.fill", "fill")}} {{optional_inline}}</dt>
+ <dd>Indique si les effets de l'animation doivent s'appliqués sur l'élément avant d'être lancée (<code>"backwards"</code>), être conservés après la fin de l'animation (<code>"forwards"</code>) ou les deux <code>both</code>. La valeur par défaut est <code>"none"</code>.</dd>
+ <dt>{{domxref("AnimationEffectTimingProperties.iterationStart", "iterationStart")}} {{optional_inline}}</dt>
+ <dd>Décrit le point de départ de l'animation par rapport à une itération. Une valeur de 0.5 indique que l'animation démarre au milieu de la première animation (dans ce cas, après deux itérations, l'animation sera arrivée à la moitié de la troisième itération). La valeur par défaut est 0.0.</dd>
+ <dt>{{domxref("AnimationEffectTimingProperties.iterations", "iterations")}} {{optional_inline}}</dt>
+ <dd>Le nombre de fois que l'animation doit être répétée. La valeur par défaut est 1. Il est possible d'utiliser la valeur {{jsxref("Infinity")}} pour répéter l'animation aussi longtemps que l'élément existe.</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('Web Animations', '#the-animationeffecttimingproperties-dictionary', 'AnimationEffectTimingProperties' )}}</td>
+   <td>{{Spec2('Web Animations')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Microsoft Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(45)}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(45)}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] The Web Animations API is only enabled by default in Firefox Developer Edition and Nightly builds. You can enable it in beta and release builds by setting the preference <code>dom.animations-api.core.enabled</code> to <code>true</code>, and can disable it in any Firefox version by setting this preference to <code>false</code>.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Web_Animations_API">L'API Web Animations</a></li>
+ <li><a href="/fr/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API">Utiliser l'API Web Animations</a></li>
+ <li>{{domxref("Element.animate()")}}</li>
+ <li>{{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}}</li>
+ <li>{{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}}</li>
+</ul>
diff --git a/files/fr/web/api/animationevent/animationevent/index.html b/files/fr/web/api/animationevent/animationevent/index.html
new file mode 100644
index 0000000000..ddb3270265
--- /dev/null
+++ b/files/fr/web/api/animationevent/animationevent/index.html
@@ -0,0 +1,130 @@
+---
+title: AnimationEvent()
+slug: Web/API/AnimationEvent/AnimationEvent
+translation_of: Web/API/AnimationEvent/AnimationEvent
+---
+<p>{{APIRef("Web Animations")}}{{SeeCompatTable}}</p>
+
+<p>Le constructeur <code><strong>AnimationEvent()</strong></code> retourne un nouvel {{domxref("AnimationEvent")}}, représentant un évènement en relation avec une animation.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>animationEvent</em> = new AnimationEvent(<em>type</em>, {animationName: <em>aPropertyName</em>,
+                                           elapsedTime  : <em>aFloat</em>,
+                                           pseudoElement: <em>aPseudoElementName</em>});
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p><em>Le constructeur <code>AnimationEvent()</code> </em>constructeur hérite également des arguments de <em> {{domxref("Event.Event", "Event()")}}.</em></p>
+
+<dl>
+ <dt><code>type</code></dt>
+ <dd>Un {{domxref("DOMString")}} représentant le nom du type de <code>AnimationEvent</code>. Il est sensible à la casse (majuscule-minuscule) et peut être: <code>'animationstart'</code>, <code>'animationend'</code>, or <code>'animationiteration'</code>.</dd>
+ <dt><code>animationName</code> {{optional_inline}}</dt>
+ <dd>Un {{domxref("DOMString")}} contenant la valeur de  la propriété associée avec la transition.{{cssxref("animation-name")}} . Prend par défaut <code style="font-size: 16px !important; line-height: 24px !important;">""</code>.</dd>
+ <dt><code>elapsedTime</code> {{optional_inline}}</dt>
+ <dd>Un <code>float</code> donne le montant de temps d'une application qui a fonctionné, en secondes, quand l'évenenement est déclenché, excluant le temps de pause des animations. Pour un évènement <code>"animationstart"</code> , <code>elapsedTime</code> est de <code>0.0</code> jusqu'a ce qu'il y ai une valeur négative pour une valeur {{cssxref("animation-delay")}}, dans le case où l'évenement est déclenché par <code>elapsedTime</code> contenant <code>(-1 *  </code><em>délais</em><code>)</code>. SA valeur par défaut vaut <code>0.0</code>.</dd>
+ <dt><code>pseudoElement</code> {{optional_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}}, starting with <code>"::"</code>, containing the name of the <a href="/en-US/docs/Web/CSS/Pseudo-elements" title="Learn more about pseudo-elements.">pseudo-element</a> the animation runs on. If the animation doesn't run on a pseudo-element but on the element itself, specify an empty string: <code>""</code>. It defaults to <code>""</code>.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>A new {{domxref("AnimationEvent")}}, initialized per any provided options.</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('CSS3 Animations', '#AnimationEvent-interface', 'AnimationEvent()') }}</td>
+   <td>{{ Spec2('CSS3 Animations')}}</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(43.0)}}</td>
+   <td>{{ CompatGeckoDesktop("23.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>pseudoElement</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("23.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("23.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+  </tr>
+  <tr>
+   <td><code>pseudoElement</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("23.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Using_CSS_animations">Using CSS animations</a></li>
+ <li>Animation-related CSS properties and at-rules: {{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}}</li>
+ <li>The {{domxref("AnimationEvent")}} interface it belongs to.</li>
+</ul>
diff --git a/files/fr/web/api/animationevent/animationname/index.html b/files/fr/web/api/animationevent/animationname/index.html
new file mode 100644
index 0000000000..7e47bdccff
--- /dev/null
+++ b/files/fr/web/api/animationevent/animationname/index.html
@@ -0,0 +1,52 @@
+---
+title: AnimationEvent.animationName
+slug: Web/API/AnimationEvent/animationName
+tags:
+  - API
+  - AnimationEvent
+  - CSS Animations
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/API/AnimationEvent/animationName
+---
+<p>{{SeeCompatTable}}{{ apiref("AnimationEvent") }}</p>
+
+<p>La propriété en lecture seule <code><strong>AnimationEvent.animationName</strong></code> est une {{domxref("DOMString")}} contenant la valeur de la propriété CSS {{cssxref("animation-name")}} associée à la transition.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>nom</em> = <em>AnimationEvent</em>.animationName</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('CSS3 Animations', '#AnimationEvent-animationName', 'AnimationEvent.animationName')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>Première définition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.AnimationEvent.animationName")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/CSS/Animations_CSS">Utiliser les animations CSS</a></li>
+ <li>{{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>L'interface {{domxref("AnimationEvent")}} à laquelle elle appartient.</li>
+</ul>
diff --git a/files/fr/web/api/animationevent/elapsedtime/index.html b/files/fr/web/api/animationevent/elapsedtime/index.html
new file mode 100644
index 0000000000..4ddac24d0e
--- /dev/null
+++ b/files/fr/web/api/animationevent/elapsedtime/index.html
@@ -0,0 +1,98 @@
+---
+title: AnimationEvent.elapsedTime
+slug: Web/API/AnimationEvent/elapsedTime
+tags:
+  - API
+  - AnimationEvent
+  - CSS Animations
+  - Experimental
+  - Property
+  - Reference
+translation_of: Web/API/AnimationEvent/elapsedTime
+---
+<p>{{SeeCompatTable}}{{ apiref("AnimationEvent") }}</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>La propriété en lecture seule <code><strong>AnimationEvent.elapsedTime</strong></code> est un <code>float</code> indiquant la quantité de temps pendant laquelle l'animation a tournée, en secondes, quand l'évènement a été déclenché, excluant tout temps où l'animation était en pause. Pour un évènement <code>"animationstart", </code><code>elapsedTime</code> est <code>0.0</code> sauf si {{cssxref("animation-delay")}} a une valeur négative, dans ce cas l'évènement est déclenché avec <code>elapsedTime </code>contenant <code>(-1 * </code><em>délai</em><code>)</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>temps</em> = <em>AnimationEvent</em>.elapsedTime</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('CSS3 Animations', '#AnimationEvent-elapsedTime', 'AnimationEvent.elapsedTime') }}</td>
+   <td>{{ Spec2('CSS3 Animations')}}</td>
+   <td>Première définition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("6.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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("6.0") }}</td>
+   <td>10.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="/fr/docs/CSS/Animations_CSS">Utiliser les animations CSS</a></li>
+ <li>Propriétés CSS et règles @ en relations avec les animations CSS: {{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}}.</li>
+ <li>L'interface {{domxref("AnimationEvent")}} à laquelle elle appartient.</li>
+</ul>
diff --git a/files/fr/web/api/animationevent/index.html b/files/fr/web/api/animationevent/index.html
new file mode 100644
index 0000000000..0001dcfe0d
--- /dev/null
+++ b/files/fr/web/api/animationevent/index.html
@@ -0,0 +1,78 @@
+---
+title: AnimationEvent
+slug: Web/API/AnimationEvent
+tags:
+  - API
+  - Experimental
+  - Interface
+  - Reference
+  - Web Animations
+translation_of: Web/API/AnimationEvent
+---
+<p>{{SeeCompatTable}}{{APIRef("Web Animations API")}}</p>
+
+<p><span class="seoSummary">L'interface <code><strong>AnimationEvent</strong></code> représentent les évènements apportant des informations sur les <a href="/fr/docs/CSS/Animations_CSS">animations CSS</a>.</span></p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<dl>
+</dl>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("AnimationEvent.AnimationEvent", "AnimationEvent()")}}</dt>
+ <dd>Créer un évènement AnimationEvent avec les paramètres spécifiés.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Hérite également des propriétés de son parent {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("AnimationEvent.animationName")}} {{readonlyInline}}</dt>
+ <dd>Est une {{domxref("DOMString")}} contenant la valeur de la propriété CSS {{cssxref("animation-name")}} associée à la transition.</dd>
+ <dt>{{domxref("AnimationEvent.elapsedTime")}} {{readonlyInline}}</dt>
+ <dd>Est un nombre à virgule flottante, donnant le temps pendant lequel l'animation s'est déroulée, en secondes, quand l'évènement est déclenché, en excluant tous les temps de pause de l'animation. Pour un évènement <code>animationstart</code>, <code>elapsedTime</code> est à 0.0 sauf si {{cssxref("animation-delay")}} a une valeur négative. Dans ce cas, l'évènement sera déclenché avec <code>elapsedTime</code> contenant (-1 * la valeur de <code>animation-delay</code>).</dd>
+ <dt>{{domxref("AnimationEvent.pseudoElement")}} {{readonlyInline}}</dt>
+ <dd>est une {{domxref("DOMString")}}, démarrant avec '::', contenant le nom du pseudo-élément où l'animation se déroule. Si l'animation ne se déroule pas sur un pseudo-élément, mais sur un élément, la chaîne de caractères sera vide.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Hérite également des propriétés de son parent {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("AnimationEvent.initAnimationEvent()")}} {{non-standard_inline}}{{deprecated_inline}}</dt>
+ <dd>Initialise un AnimationEvent créé avec la méthode obsolète {{domxref("Document.createEvent()", "Document.createEvent(\"AnimationEvent\")")}}.</dd>
+</dl>
+
+<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('CSS3 Animations', '#AnimationEvent-interface', 'AnimationEvent') }}</td>
+   <td>{{ Spec2('CSS3 Animations') }}</td>
+   <td>Première définition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.AnimationEvent")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="/fr/docs/CSS/Animations_CSS">Utiliser les animations CSS</a></li>
+ <li>{{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}}.</li>
+</ul>
diff --git a/files/fr/web/api/animationevent/pseudoelement/index.html b/files/fr/web/api/animationevent/pseudoelement/index.html
new file mode 100644
index 0000000000..ced5bee1aa
--- /dev/null
+++ b/files/fr/web/api/animationevent/pseudoelement/index.html
@@ -0,0 +1,50 @@
+---
+title: AnimationEvent.pseudoElement
+slug: Web/API/AnimationEvent/pseudoElement
+tags:
+  - API
+  - AnimationEvent
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/API/AnimationEvent/pseudoElement
+---
+<p>{{SeeCompatTable}}{{ apiref("AnimationEvent") }}</p>
+
+<p><span class="seoSummary">La propriété en lecture seule <code><strong>AnimationEvent.pseudoElement</strong></code> est une {{domxref("DOMString")}}, commençant par <code>'::'</code>, contenant le nom du <a href="/fr/docs/CSS/Pseudo-éléments" title="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-élément</a> sur lequel tourne l'animation. </span>Si l'animation ne tourne pas sur un pseudo-élément, mais sur un élément, c'est une chaîne de caractère vide : <code>''</code><code>.</code></p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>nom</em> = <em>AnimationEvent</em>.pseudoElement</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('CSS3 Animations', '#AnimationEvent-pseudoElement', 'AnimationEvent.pseudoElement') }}</td>
+   <td>{{ Spec2('CSS3 Animations')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.AnimationEvent.pseudoElement")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="/fr/docs/CSS/Animations_CSS">Utiliser les animations CSS</a></li>
+ <li>Propriétés et règles @ en relation avec les animations CSS : {{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}}.</li>
+ <li>L'interface {{domxref("AnimationEvent")}} à laquelle elle est rattachée.</li>
+</ul>
diff --git a/files/fr/web/api/api_fichier_systeme/index.html b/files/fr/web/api/api_fichier_systeme/index.html
new file mode 100644
index 0000000000..8cef71b2fa
--- /dev/null
+++ b/files/fr/web/api/api_fichier_systeme/index.html
@@ -0,0 +1,114 @@
+---
+title: API fichier système
+slug: Web/API/API_fichier_systeme
+translation_of: Web/API/File_and_Directory_Entries_API
+---
+<p>{{DefaultAPISidebar("API fichier système")}}{{Non-standard_header()}}</p>
+
+<p>L'API fichier système simule un fichier système en local que les applications web peuvent utiliser. Vous pouvez développer des applications qui lisent, écrivent, et créent des fichiers et/ou des dossiers dans un espace virtuel.</p>
+
+<p>Deux API très simulaires existent en fonction du comportement asynchrone ou synchrone souhaité. L'API synchrone est prévu pour être utilisée dans un {{domxref("Worker")}} et retournera les valeurs recherchées. The asynchronous API will not block and functions and the API will not return values; instead, you will need to supply a callback function to handle the response whenever it arrives.</p>
+
+<h2 id="API_asynchrone">API asynchrone</h2>
+
+<p>L'API asynchrone a les interfaces suivantes :</p>
+
+<ul>
+ <li><a href="/en/DOM/File_API/File_System_API/LocalFileSystem" title="en/DOM/File_API/File_System_API/LocalFileSystem">LocalFileSystem</a> a deux méthodes globales qui vous permet d'avoir accès à un espace virtuel : requestFileSystem() et resolveLocalFileSystemURL().  Les méthodes sont implémentées par l'objet <a href="/fr/docs/window">window</a> et le worker global scope.</li>
+ <li><a href="/en/DOM/File_API/File_System_API/FileSystem" title="en/DOM/File_API/File_system_API/FileSystem">FileSystem</a> représente un fichier système. L'objet est la passerelle à votre API toute entière.</li>
+ <li><a href="/en/DOM/File_API/File_System_API/Entry" title="en/DOM/File_API/File_system_API/Entry">Entry</a> représente une entrée dans un fichier système. L'entrée peut être un fichier ou un dossier.</li>
+ <li><a href="/en/DOM/File_API/File_System_API/DirectoryEntry" title="en/DOM/File_API/File_system_API/DirectoryEntry">DirectoryEntry</a> représente un dossier dans un fichier système.</li>
+ <li><a href="/en/DOM/File_API/File_System_API/DirectoryReader" title="en/DOM/File_API/File_system_API/DirectoryReader">DirectoryReader</a> vous permet la lecture de fichiers et dossiers à partir d'un dossier.</li>
+ <li><a href="/en/DOM/File_API/File_System_API/FileEntry" title="en/DOM/File_API/File_system_API/FileEntry">FileEntry</a> représente un fichier dans un fichier système.</li>
+ <li><a href="/en/DOM/File_API/File_System_API/FileError" title="en/DOM/File_API/File_system_API/FileError">FileError</a> est une erreur que vous pourriez rencontrer pendant l'utilisation des méthodes asynchrones.</li>
+</ul>
+
+<h2 id="API_synchrone">API synchrone</h2>
+
+<p>L'API synchrone est utile avec les <a href="/En/Using_web_workers" rel="internal" title="https://developer.mozilla.org/En/Using_web_workers">WebWorkers</a>. Contrairement à l'API asynchrone, l'API synchrone n'utilise pas les callbacks parce que les méthodes de l'API retournent des valeurs.</p>
+
+<ul>
+ <li><a href="/en/DOM/File_API/File_System_API/LocalFileSystemSync" title="en/DOM/File_API/File_System_API/LocalFileSystemSync">LocalFileSystemSync</a> a deux méthodes globales qui vous permet d'avoir accès à un espace virtuel : requestFileSystemSync() et resolveLocalFileSystemSyncURL(). Les méthodes sont implémentées par l'objet worker.</li>
+ <li><a href="/en/DOM/File_API/File_System_API/FileSystemSync" title="en/DOM/File_API/File_system_API/FileSystemSync">FileSystemSync</a> représente un fichier système.</li>
+ <li><a href="/en/DOM/File_API/File_System_API/EntrySync" title="en/DOM/File_API/File_system_API/EntrySync">EntrySync</a> représente une entrée dans un fichier système. L'entrée peut être un fichier ou un dossier.</li>
+ <li><a href="/en/DOM/File_API/File_System_API/DirectoryEntrySync" title="en/DOM/File_API/File_system_API/DirectoryEntrySync">DirectoryEntrySync</a> représente un dossier dans un fichier système.</li>
+ <li><a href="/en/DOM/File_API/File_System_API/DirectoryReaderSync" title="en/DOM/File_API/File_system_API/DirectoryReaderSync">DirectoryReaderSync</a>  vous permet la lecture de fichiers et dossiers à partir d'un dossier.</li>
+ <li><a href="/en/DOM/File_API/File_System_API/FileEntrySync" title="en/DOM/File_API/File_system_API/FileEntrySync">FileEntrySync</a> représente un fichier dans un fichier système.</li>
+ <li><a href="/en/DOM/File_API/File_System_API/FileException" title="en/DOM/File_API/File_system_API/FileException">FileException</a> est une erreur que vous pourriez rencontrer pendant l'utilisation des méthodes synchrones.</li>
+</ul>
+
+<h2 id="Compatibilité_navigateur">Compatibilité navigateur</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>API asynchrone</td>
+   <td>13 {{ property_prefix("webkit") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td>API synchrone</td>
+   <td>13 {{ property_prefix("webkit") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>API asynchrone</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatVersionUnknown() }} {{ property_prefix("webkit") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td>API synchrone</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatVersionUnknown() }} {{ property_prefix("webkit") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Particularité : {{ spec("http://dev.w3.org/2009/dap/file-system/pub/FileSystem/", "File API: Directories and System Specification", "NOTE") }}</li>
+ <li>Commentaire Mozilla : <a href="https://hacks.mozilla.org/2012/07/why-no-filesystem-api-in-firefox/">Why no FileSystem API in Firefox?</a></li>
+</ul>
diff --git a/files/fr/web/api/api_html_drag_and_drop/index.html b/files/fr/web/api/api_html_drag_and_drop/index.html
new file mode 100644
index 0000000000..fd73e301f8
--- /dev/null
+++ b/files/fr/web/api/api_html_drag_and_drop/index.html
@@ -0,0 +1,268 @@
+---
+title: Glisser et déposer
+slug: Web/API/API_HTML_Drag_and_Drop
+tags:
+  - Avancé
+  - Glisser-deposer
+  - Guide
+  - HTML
+  - drag and drop
+translation_of: Web/API/HTML_Drag_and_Drop_API
+---
+<p>{{DefaultAPISidebar("HTML Drag and Drop API")}}</p>
+
+<p><span class="seoSummary"><strong>L'interface HTML <em>Drag and Drop</em></strong> (pour glisser-déposer) permet à des applications d'utiliser des fonctionnalités de glisser-déposer dans le navigateur.</span> L'utilisateur pourra sélectionner des éléments déplaçables à la souris et les déplacer vers un élément où on peut déposer en relâchant le bouton de la souris. Une représentation translucide de l'élément déplacé suit le pointeur lors de l'opération.</p>
+
+<p>Pour les sites web et les extensions, on peut personnaliser les éléments qui peuvent être déplacés, la façon dont ceux-ci sont signalés et les éléments qui peuvent servir de destination.</p>
+
+<p>L'aperçu de cette API inclut une description des interfaces, les étapes à suivre pour prendre en charge ces fonctionnalités dans une application et un aperçu de l'interopérabilité de ces interfaces.</p>
+
+<h2 id="Évènements_de_déplacement">Évènements de déplacement</h2>
+
+<p>L'API HTML <em>Drag and Drop</em> utilise le modèle d'évènements du DOM ({{domxref("Event")}}) ainsi que les éléments de déplacements (<em>{{domxref("DragEvent")}}</em>) hérités des évènements liés à la souris ({{domxref("MouseEvent")}}). Une opération de déplacement commence généralement lorsqu'un utilisateur sélectionne un élément déplaçable puis qu'il le déplace sur un élément de destination avant de relâcher l'élément déplacé.</p>
+
+<p>Lors des opérations de déplacement, plusieurs évènements sont déclenchés (dont certains qui sont déclenchés à plusieurs reprises comme {{event("drag")}} et {{event("dragover")}}).</p>
+
+<p>Chaque <a href="/fr/docs/Web/API/DragEvent#Event_types">type d'évènement de déplacement</a> possède un <a href="/fr/docs/Web/API/DragEvent#GlobalEventHandlers">gestionnaire d'évènement global (une méthode <code>on...</code>)</a> :</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Évènement</th>
+   <th scope="col">Gestionnaire d'évènement global</th>
+   <th scope="col">Déclenchement</th>
+  </tr>
+  <tr>
+   <td>{{event('drag')}}</td>
+   <td>{{domxref('GlobalEventHandlers.ondrag','ondrag')}}</td>
+   <td>…un objet déplaçable (que ce soit un élément ou une sélection de texte) est déplacée.</td>
+  </tr>
+  <tr>
+   <td>{{event('dragend')}}</td>
+   <td>{{domxref('GlobalEventHandlers.ondragend','ondragend')}}</td>
+   <td>…une opération de déplacement se termine (en relâchant le bouton de la souris ou en utilisant la touche Echap, voir <a href="/en-US/docs/DragDrop/Drag_Operations#dragend" title="Finishing a Drag">Terminer un déplacement</a>)</td>
+  </tr>
+  <tr>
+   <td>{{event('dragenter')}}</td>
+   <td>{{domxref('GlobalEventHandlers.ondragenter','ondragenter')}}</td>
+   <td>…un élément en cours de déplacement arrive sur une zone de dépôt valide (voir <a href="/fr/docs/DragDrop/Drag_Operations#droptargets" title="Specifying Drop Targets">indiquer une cible de destination</a>).</td>
+  </tr>
+  <tr>
+   <td>{{event('dragexit')}}</td>
+   <td>{{domxref('GlobalEventHandlers.ondragexit','ondragexit')}}</td>
+   <td>…un élément n'est plus la sélection immédiate du déplacement.</td>
+  </tr>
+  <tr>
+   <td>{{event('dragleave')}}</td>
+   <td>{{domxref('GlobalEventHandlers.ondragleave','ondragleave')}}</td>
+   <td>…un élément en cours de déplacement quitte une zone de dépôt valide.</td>
+  </tr>
+  <tr>
+   <td>{{event('dragover')}}</td>
+   <td>{{domxref('GlobalEventHandlers.ondragover','ondragover')}}</td>
+   <td>…un élément en cours de déplacement est en cours de survol d'une zone de dépôt valide (cet évènement est déclenché toutes les quelques centaines de millisecondes).</td>
+  </tr>
+  <tr>
+   <td>{{event('dragstart')}}</td>
+   <td>{{domxref('GlobalEventHandlers.ondragstart','ondragstart')}}</td>
+   <td>…l'utilisateur commence à déplacer un élément (voir <a href="/fr/docs/DragDrop/Drag_Operations#dragstart" title="Starting a Drag Operation">démarrer une opération de glissement</a>).</td>
+  </tr>
+  <tr>
+   <td>{{event('drop')}}</td>
+   <td>{{domxref('GlobalEventHandlers.ondrop','ondrop')}}</td>
+   <td>…un élément est déposé sur une cible valide (voir <a href="/fr/docs/DragDrop/Drag_Operations#drop" title="Performing a Drop">déposer un élément</a>).</td>
+  </tr>
+ </tbody>
+</table>
+
+<p class="note"><strong>Note :</strong> Les évènements <code>dragstart</code> et <code>dragend</code> ne sont pas déclenchés lors qu'on glisse-dépose un fichier de l'appareil dans le navigateur.</p>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<p>Les interfaces fournies par cette API sont</p>
+
+<ul>
+ <li>{{domxref("DragEvent")}},</li>
+ <li>{{domxref("DataTransfer")}},</li>
+ <li>{{domxref("DataTransferItem")}}</li>
+ <li>{{domxref("DataTransferItemList")}}.</li>
+</ul>
+
+<p>L'interface {{domxref("DragEvent")}} possède un constructeur et une propriété {{domxref("DragEvent.dataTransfer","dataTransfer")}} qui est un objet {{domxref("DataTransfer")}}.</p>
+
+<p>Les objets {{domxref("DataTransfer")}} incluent l'état du glisser-déposer, le type de déplacement (<code>copy</code> ou <code>move</code>), les données déplacées (un ou plusieurs objets) et le type MIME de chaque objet déplacé. Les objets {{domxref("DataTransfer")}} possèdent également des méthodes permettant d'ajouter ou de retirer des objets aux données déplacées.</p>
+
+<p>Les interfaces {{domxref("DragEvent")}} et {{domxref("DataTransfer")}} sont standard et suffisent à apporter des fonctionnalités de glisser/déposer. Toutefois, Firefox prend en charge quelques extensions spécifiques à Gecko (cf. ci-après) pour l'objet {{domxref("DataTransfer")}} (bien entendu, ces extensions ne fonctionneront que dans Firefox et pas dans les autres navigateurs).</p>
+
+<p>Chaque objet {{domxref("DataTransfer")}} possède une propriété  {{domxref("DataTransfer.items","items")}} qui est une liste ({{domxref("DataTransferItemList","list")}}) d'objets {{domxref("DataTransferItem")}}. Un objet {{domxref("DataTransferItem")}} représente un seul objet déplacé, avec une propriété {{domxref("DataTransferItem.kind","kind")}} qui indique s'il s'agit d'un texte (<code>string</code>) ou d'un fichier (<code>file</code>) et une propriété {{domxref("DataTransferItem.type","type")}} qui correspond au type MIME de la donnée déplacée. L'objet {{domxref("DataTransferItem")}} possède également des méthodes pour consulter les données de l'objet déplacé.</p>
+
+<p>L'objet {{domxref("DataTransferItemList")}} est une liste d'objets {{domxref("DataTransferItem")}}. La liste possède des méthodes pour ajouter un objet en déplacement à la liste, pour retirer un objet de la liste ou pour vider la liste de tout ses objets.</p>
+
+<p>La différence principale entre {{domxref("DataTransfer")}} et {{domxref("DataTransferItem")}} est l'utilisation de la méthode synchrone {{domxref("DataTransfer.getData","getData()")}} pour la première et de la méthode asynchrone {{domxref("DataTransferItem.getAsString","getAsString()")}} pour la deuxième.</p>
+
+<p class="note"><strong>Note :</strong> {{domxref("DragEvent")}} et {{domxref("DataTransfer")}} sont largement prises en charge par les navigateurs de bureau tandis que {{domxref("DataTransferItem")}} et {{domxref("DataTransferItemList")}} ont une compatibilité plus restreinte. Voir la section ci-après sur l'interopérabilité.</p>
+
+<h3 id="Interfaces_spécifiques_à_Gecko">Interfaces spécifiques à Gecko</h3>
+
+<p>Mozilla / Firefox prend en charge certaines fonctionnalités qui ne font pas partie du modèle standard. Ce sont des fonctions utilitaires pour aider au déplacement de plusieurs objets ou de données qui ne sont pas du texte (des fichiers par exemple). Pour plus d'informations, voir <a href="/fr/docs/Web/API/HTML_Drag_and_Drop_API/Multiple_items" title="Dragging and Dropping Multiple Items">Glisser-déposer plusieurs objets</a>. Voir aussi la page de référence de {{domxref("DataTransfer")}} pour la liste de l'ensemble <a href="/fr/docs/Web/API/DataTransfer#Gecko_properties">des propriétés spécifique à Gecko</a> et <a href="/fr/docs/Web/API/DataTransfer#Gecko_methods">des méthodes spécifiques à Gecko</a>.</p>
+
+<h2 id="Bases">Bases</h2>
+
+<p>Dans cette section, nous allons voir les premières étapes nécessaires aux fonctionnalités de glisser-déposer dans une application.</p>
+
+<h3 id="Identifier_ce_qui_peut_être_déplacé">Identifier ce qui peut être déplacé</h3>
+
+<p>Pour qu'un élément puisse être déplacé, il faut lui ajouter l'attribut {{htmlattrxref("draggable")}} ainsi que le gestionnaire d'évènement global {{domxref("GlobalEventHandlers.ondragstart","ondragstart")}} :</p>
+
+<pre class="brush: html">&lt;script&gt;
+function dragstart_handler(ev) {
+ // On ajoute l'identifiant de l'élément cible à l'objet de transfert
+ ev.dataTransfer.setData("text/plain", ev.target.innerText);
+}
+&lt;/script&gt;
+
+&lt;p id="p1" draggable="true" ondragstart="dragstart_handler(event)"&gt;Cet élément est déplaçable.&lt;/p&gt;
+</pre>
+
+<p>Voir <a href="/fr/docs/Web/HTML/Global_attributes/draggable" title="draggable global attribute">la page de référence sur l'attribut <code>draggable</code></a> et <a href="/fr/docs/Web/Guide/HTML/Drag_operations#draggableattribute">le guide sur les opérations de déplacement</a> pour plus d'informations.</p>
+
+<h3 id="Définir_les_données_déplacées">Définir les données déplacées</h3>
+
+<p>Une application peut inclure plusieurs objets dans une opération de glisser/déposer. Chaque objet est une chaîne de caractères ({{domxref("DOMString")}}) ayant un type MIME particulier (indiqué par son attribut <code>type</code>) tel que <code>text/html</code>.</p>
+
+<p>Chaque {{domxref("DragEvent")}} possède une propriété  {{domxref("DragEvent.dataTransfer","dataTransfer")}} contenant les données transportées. Cette propriété (un objet {{domxref("DataTransfer")}}) possède des méthodes pour gérer les données transportées. La méthode {{domxref("DataTransfer.setData","setData()")}} permet d'ajouter un objet aux données transportées :</p>
+
+<pre class="brush: js">function dragstart_handler(ev) {
+  // On ajoute différents types de données transportées
+  ev.dataTransfer.setData("text/plain", ev.target.innerText);
+  ev.dataTransfer.setData("text/html", ev.target.outerHTML);
+  ev.dataTransfer.setData("text/uri-list", ev.target.ownerDocument.location.href);
+}
+</pre>
+
+<p>Pour connaître la liste des types de donnée communément utilisées lors d'un glisser/déposer (texte, HTML, liens, fichiers, etc.), voir <a href="/fr/docs/DragDrop/Recommended_Drag_Types" title="Recommended Drag Types">les types recommandés</a>. Pour plus d'informations sur les informations transportées, voir <a href="/fr/docs/Web/Guide/HTML/Drag_operations#dragdata" title="Drag Data">Drag Data</a>.</p>
+
+<h3 id="Définir_limage_pour_le_déplacement">Définir l'image pour le déplacement</h3>
+
+<p>Par défaut, le navigateur fournit une image qui apparaît à côté du pointeur lors de l'opération de déplacement. Toutefois, une application peut définir une image personnalisée grâce à la méthode {{domxref("DataTransfer.setDragImage","setDragImage()")}} :</p>
+
+<pre class="brush: js">function dragstart_handler(ev) {
+  // On crée une image qu'on utilise pour le déplacement
+  // Note : on changera "example.gif" vers une vraie image
+  // (sinon l'image par défaut sera utilisée)
+  var img = new Image();
+  img.src = 'example.gif';
+  ev.dataTransfer.setDragImage(img, 10, 10);
+}
+</pre>
+
+<p>Pour en savoir plus, voir <a href="/fr/docs/DragDrop/Drag_Operations#dragfeedback" title="Setting the Drag Feedback Image">Définir l'image de <em>feedback</em> pour le glisser-déposer</a>.</p>
+
+<h3 id="Définir_leffet_de_déplacement">Définir l'effet de déplacement</h3>
+
+<p>La propriété {{domxref("DataTransfer.dropEffect","dropEffect")}} est utilisée pour fournir un retour à l'utilisateur qui effectue l'opération de glisser/déposer. Généralement, cela se traduit par la modification du curseur affiché par le navigateur lors du déplacement.</p>
+
+<p>Il est possible de définir trois effets :</p>
+
+<ul>
+ <li><code>copy</code> : indique que les données déplacées seront copiées depuis l'emplacement source vers la cible.</li>
+ <li><code>move</code> : indique que les données déplacées seront déplacées depuis l'emplacement source vers la cible.</li>
+ <li><code>link</code> : indique qu'une relation ou une connexion sera créée entre la source et la cible.</li>
+</ul>
+
+<p>Lors de l'opération de déplacement, les effets peuvent être modifiés afin d'indiquer que certains effets sont autorisés à certains emplacements.</p>
+
+<p>Voici un exemple illustrant l'utilisation de cette propriété.</p>
+
+<pre class="brush: js">function dragstart_handler(ev) {
+  ev.dataTransfer.dropEffect = "copy";
+}
+</pre>
+
+<p>See <a href="/en-US/docs/Web/Guide/HTML/Drag_operations#drageffects" title="Drag Effects">Drag Effects</a> for more details.</p>
+
+<h3 id="Définir_la_zone_où_déposer_lélément_déplacé">Définir la zone où déposer l'élément déplacé</h3>
+
+<p>Par défaut, le navigateur empêche de déposer quoi que ce soit sur la plupart des éléments HTML. Pour modifier ce comportement, il faut qu'un élément devienne une zone cible ou qu'il soit identifié comme "<em>droppable</em>". L'élément doit avoir les deux gestionnaires d'évènements {{domxref("GlobalEventHandlers.ondragover","ondragover")}} et {{domxref("GlobalEventHandlers.ondrop","ondrop")}} comme attributs. Dans l'exemple suivant, on montre comment utiliser ces attributs et on fournit des gestionnaires d'évènements simples associés :</p>
+
+<pre class="brush: html">&lt;script&gt;
+function dragover_handler(ev) {
+ ev.preventDefault();
+ ev.dataTransfer.dropEffect = "move";
+}
+function drop_handler(ev) {
+ ev.preventDefault();
+ // On récupère l'identifiant de la cible et on ajoute l'élément déplacé au DOM de la cible
+ var data = ev.dataTransfer.getData("text/plain");
+ ev.target.appendChild(document.getElementById(data));
+}
+&lt;/script&gt;
+
+&lt;p id="target" ondrop="drop_handler(event)" ondragover="dragover_handler(event)"&gt;Zone pour déposer&lt;/p&gt;
+</pre>
+
+<p>On voit ici que chaque gestionnaire invoque {{domxref("Event.preventDefault","preventDefault()")}} afin d'éviter toute gestion d'évènement ultérieure (comme <a href="/fr/docs/Web/API/Touch_events">les évènements tactiles</a> ou <a href="/fr/docs/Web/API/Pointer_events">les évènements de pointeur</a>).</p>
+
+<p>Pour plus d'information, voir <a href="/fr/docs/Web/Guide/HTML/Drag_operations#droptargets">Indiquer une cible pour un glisser-déposer</a>.</p>
+
+<h3 id="Gérer_le_dépôt_de_lobjet">Gérer le dépôt de l'objet</h3>
+
+<p>Le gestionnaire de l'évènement {{event("drop")}} permet de gérer les données déposées avec la logique de l'application. Généralement, une application utilisera {{domxref("DataTransfer.getData","getData()")}} afin de récupérer les données déplacées et les traitera. L'application peut choisir d'avoir un comportement différent selon la valeur de {{domxref("DataTransfer.dropEffect","dropEffect")}} et/ou celles des autres propriétés.</p>
+
+<p>Dans l'exemple suivant, on montre un gestionnaire pour le dépot de l'objet : on récupère l'identifiant (<code>id</code>) de l'élément déplacé puis on utilise celui-ci afin de le déplacer depuis la source vers la cible :</p>
+
+<pre class="brush: html">&lt;script&gt;
+function dragstart_handler(ev) {
+ // On ajoute l'identifiant de l'élément cible à l'objet de transfert
+ ev.dataTransfer.setData("application/my-app", ev.target.id);
+ ev.dataTransfer.dropEffect = "move";
+}
+function dragover_handler(ev) {
+ ev.preventDefault();
+ ev.dataTransfer.dropEffect = "move"
+}
+function drop_handler(ev) {
+ ev.preventDefault();
+ // On obtient l'identifiant de la cible et on ajoute l'élément déplacé
+ // au DOM de la cible
+ var data = ev.dataTransfer.getData("application/my-app");
+ ev.target.appendChild(document.getElementById(data));
+}
+&lt;/script&gt;
+
+&lt;p id="p1" draggable="true" ondragstart="dragstart_handler(event)"&gt;Cet élément peut être déplacé.&lt;/p&gt;
+&lt;div id="target" ondrop="drop_handler(event)" ondragover="dragover_handler(event)"&gt;Zone pour le dépôt&lt;/div&gt;
+</pre>
+
+<p>Pour plus d'information, voir <a href="/fr/docs/Web/Guide/HTML/Drag_operations#drop">Gérer le dépôt lors d'une opération de glisser-déposer</a>.</p>
+
+<h3 id="Terminer_lopération_de_glisserdéposer">Terminer l'opération de glisser/déposer</h3>
+
+<p>À la fin de l'opération, c'est l'évènement {{event("dragend")}} qui est déclenché <em>sur l'élément source</em> (celui qui a été "saisi" au début). Cet évènement est déclenché lorsque l'opération est terminée ou qu'elle a été annulée. Le gestionnaire d'évènement pour {{event("dragend")}} peut vérifier la valeur de la propriété {{domxref("DataTransfer.dropEffect","dropEffect")}} afin de déterminer si l'opération a réussi ou non.</p>
+
+<p>Pour plus d'informations sur la gestion de la fin d'une opération de glisser-déposer, voir <a href="/fr/docs/DragDrop/Drag_Operations#dragend" title="Finishing a Drag">Terminer un glisser-déposer</a>.</p>
+
+<h2 id="Interopérabilité">Interopérabilité</h2>
+
+<p>Comme on peut le voir <a href="/en-US/docs/Web/API/DataTransferItem#Browser_compatibility">dans le tableau de compatibilité pour l'interface <code>DataTransferItem</code></a>, la prise en charge du <em>drag-and-drop</em> est assez répandue parmi les navigateurs de bureau à l'exception des interfaces {{domxref("DataTransferItem")}} et {{domxref("DataTransferItemList")}}. Ce tableau montre également que la prise en charge sur mobile est assez faible.</p>
+
+<h2 id="Examples_and_demos" name="Examples_and_demos">Exemples et démos</h2>
+
+<ul>
+ <li><a href="https://mdn.github.io/dom-examples/drag-and-drop/copy-move-DataTransfer.html">Copier et déplacer des éléments avec l'interface <code>DataTransfer</code></a></li>
+ <li><a href="http://mdn.github.io/dom-examples/drag-and-drop/copy-move-DataTransferItemList.html">Copier et déplacer des éléments avec l'interface <code>DataTransferListItem</code></a></li>
+ <li><a href="https://jsbin.com/hiqasek/edit?html,js,output">JSBin : Glisser-déposer des fichiers</a></li>
+ <li>
+  <p><a href="https://park.glitch.me/">Un parking réalisé avec l'API Drag and Drop</a> (<a href="https://glitch.com/edit/#!/park">lien pour éditer le code</a>)</p>
+ </li>
+</ul>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li><a class="internal" href="/fr/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations" title="Drag Operations">Les opérations de déplacement</a></li>
+ <li><a class="internal" href="/fr/docs/Web/API/HTML_Drag_and_Drop_API/Multiple_items" title="Dragging and Dropping Multiple Items">Glisser-déposer plusieurs objets</a></li>
+ <li><a class="internal" href="/fr/docs/Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types" title="Recommended Drag Types">Types de déplacement recommandés</a></li>
+ <li><a href="https://html.spec.whatwg.org/multipage/interaction.html#dnd" title="Drag and Drop Standard">Spécification HTML5 : Drag and Drop</a></li>
+ <li><a href="http://caniuse.com/#search=draganddrop" title="Drag and Drop interoperability data from CanIUse">Données d'interopérabilité pour l'API Drag and Drop sur CanIUse</a></li>
+</ul>
diff --git a/files/fr/web/api/api_html_drag_and_drop/opérations_de_glissement/index.html b/files/fr/web/api/api_html_drag_and_drop/opérations_de_glissement/index.html
new file mode 100644
index 0000000000..0ddaad6583
--- /dev/null
+++ b/files/fr/web/api/api_html_drag_and_drop/opérations_de_glissement/index.html
@@ -0,0 +1,294 @@
+---
+title: Opérations de glissement
+slug: Web/API/API_HTML_Drag_and_Drop/Opérations_de_glissement
+translation_of: Web/API/HTML_Drag_and_Drop_API/Drag_operations
+---
+<p>Ce qui suit décrit les étapes qui se déroulent lors d'un Glisser Déposer.</p>
+
+<p class="note">Les opérations de glisser décrits dans ce document utilisent l'interface {{domxref("DataTransfer")}}. Ce document n'utilise pas l'interface {{domxref("DataTransferItem")}} ni l'interface {{domxref("DataTransferItemList")}}.</p>
+
+<h2 id="draggableattribute" name="draggableattribute">L'attribut draggable</h2>
+
+<p>Dans une page Web, certains cas nécessitent l'usage du Glisser Déposer. Il peut servir pour des sélections de texte, d'images ou de liens. Lorsqu'une image ou un lien sont glissés, l'URL de l'image ou du lien est défini comme données du glissement, et le Glisser commence. Pour d'autres éléments, il peut s'agir d'une sélection effectuée qui servira au glissement. Pour voir cet effet, sélectionnez une zone dans une page Web, puis cliquez dedans en maintenant le bouton de la souris et glissez la sélection. Un rendu translucide de la sélection apparaitra en suivant le pointeur de la souris. Il s'agit toutefois du comportement par défaut du glissement si aucun scrutateur n'a été défini pour traiter les données.</p>
+
+<p>En HTML, excepté le comportement par défaut des images, des liens et des sélections, aucun autre élément ne peut être glissé. Tous les éléments XUL peuvent être glissés.</p>
+
+<p>Pour rendre un autre élément HTML glissable, deux choses doivent être faites :</p>
+
+<ul>
+ <li>Définissez l'attribut <code>{{htmlattrxref("draggable")}}</code> à <code>true</code> sur l'élément que vous voulez rendre glissable.</li>
+ <li>Ajoutez un scrutateur sur l'événement <code>{{event("dragstart")}}</code> et définissez les données du glissement dans ce scrutateur.</li>
+ <li>{{domxref("DataTransfer.setData","Définir la donnée de glissement")}} au sein du scrutateur ajouté précédemment.</li>
+</ul>
+
+<p>Voici un exemple qui permet à une section de contenu d'être glissée :</p>
+
+<pre>&lt;div draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'Ce texte peut être glissé')"&gt;
+  Ce texte &lt;strong&gt;peut&lt;/strong&gt; être glissé.
+&lt;/div&gt;
+</pre>
+
+<p>L'attribut <code>{{htmlattrxref("draggable")}}</code> est défini à true, ce qui rend l'élément glissant. Si cet attribut est omis ou défini à false, l'élément ne serait pas glissant et le texte serait alors simplement sélectionné. Cet attribut peut être placé sur n'importe quel élément, y compris des images et des liens. Toutefois, pour les deux derniers, la valeur par défaut est true, donc vous n'utiliserez l'attribut <code>{{htmlattrxref("draggable")}}</code> <code> </code>que pour le définir à <code>false</code> pour interdire le glissement de ces éléments.</p>
+
+<p>Notez que lorsqu'un élément est rendu glissable, le texte ou les autres éléments qu'il contient ne peuvent plus être sélectionné de manière classique en cliquant et déplaçant la souris. Au lieu de cela, l'utilisateur doit maintenir la touche <kbd>Alt</kbd> appuyée pour sélectionner le texte avec la souris, ou bien utilisez le clavier.</p>
+
+<p>Pour des éléments XUL, il n'est pas nécessaire d'utiliser l'attribut <code>{{htmlattrxref("draggable")}}</code>, car tous les éléments XUL sont glissables.</p>
+
+<pre>&lt;button label="Glisse moi" ondragstart="event.dataTransfer.setData('text/plain', 'Bouton à glisser');"&gt;
+</pre>
+
+<p> </p>
+
+<h2 id="dragstart" name="dragstart">Démarrer une opération de glissement</h2>
+
+<p>Dans cet exemple, un scrutateur est ajouté à l'événement dragstart en utilisant l'attribut <code>ondragstart</code>.</p>
+
+<pre>&lt;div draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'Ce texte peut être glissé')"&gt;
+  Ce texte &lt;strong&gt;peut&lt;/strong&gt; être glissé.
+&lt;/div&gt;
+</pre>
+
+<p>Lorsqu'un utilisateur commence un glissement, l'événement dragstart est déclenché. Dans cet exemple, le scrutateur dragstart a été ajouté à l'élément à déplacer lui-même. Vous pouvez toutefois mettre le scrutateur sur un ancètre plus élevé car l'événement drag diffuse comme le font les autres événements. À l'intérieur de l'événement dragstart, vous devez spécifier la donnée de glissement, l'image filligrane et les effets du glissement tels que décrits ci-dessous. Cependant, seule la donnée de glissement est nécessaire ; l'image et les effets du glissement par défaut sont suffisants pour la majorité des cas.</p>
+
+<h2 id="dragdata" name="dragdata">Donnée de glissement</h2>
+
+<p>Tous les événements de glissement ont une propriété appelée <a class="internal" href="/Fr/GlisserD%C3%A9poser/DataTransfer" title="Fr/GlisserDéposer/DataTransfer">dataTransfer</a> utilisée pour contenir la donnée de glissement.</p>
+
+<p>Lorsqu'un glissement a lieu, une donnée doit être associée au glissement pour identifier ce qui est en train de glisser. Par exemple, lors du glissement d'un texte sélectionné dans un champs de texte, la donnée associée au glissement est le texte lui-même. De même, lors du glissement d'un lien, la donnée associée est l'URL du lien.</p>
+
+<p>La donnée de glissement contient deux informations : son type ou format et sa valeur. Le format est une chaîne de caractère (telle que <a class="internal" href="/Fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#text" title="Fr/GlisserDéposer/Types de glissement recommandés#text">text/plain</a> pour un texte), et la valeur est un texte. Lorsqu'un glissement démarre, vous devez lui ajouter en fournissant un type et la donnée. Dans les scrutateurs des événements <code>dragenter</code> et <code>dragover</code> au cours d'un glissement, vous pouvez vérifier les types de données et indiquer si un dépôt est permis ou non. Par exemple, une cible de dépôt qui accepte que des liens testera les types lien <a class="internal" href="/Fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#link" title="Fr/GlisserDéposer/Types de glissement recommandés#link">text/uri-list</a>. Pendant un évément de dépôt, un scrutateur récupèrera la donnée glissée et l'insèrera dans la zone de dépôt.</p>
+
+<p>Les types MIME habituels sont <a class="internal" href="/Fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#text" title="Fr/GlisserDéposer/Types de glissement recommandés#text">text/plain</a> ou <a class="internal" href="/Fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#image" title="Fr/GlisserDéposer/Types de glissement recommandés#image">image/jpeg</a>, mais vous pouvez créer vos propres types. La liste des types les plus utilisés est disponible sur <a class="internal" href="/Fr/GlisserD%C3%A9poser/Types_de_glissement" title="Fr/GlisserDéposer/Types de glissement">cette page</a>.</p>
+
+<p>Un glissement peut fournir une donnée dans différents types. Ceci permet à une donnée d'être disponible dans des types spécifiques, souvent personnalisés, toujours en fournissant un format pour les cibles ne supportant pas ces types spécifiques. Habituellement, il s'agit toujours d'une version textuelle de type <a class="internal" href="/Fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#text" title="Fr/GlisserDéposer/Types de glissement recommandés#text">text/plain</a>. La donnée n'en sera qu'une représentation sous la forme d'un texte.</p>
+
+<p>Pour définir une donnée dans un dataTransfer, utilisez la méthode <a class="internal" href="/Fr/GlisserD%C3%A9poser/DataTransfer#setData" title="Fr/GlisserDéposer/DataTransfer#setData">setData</a>. Elle prend deux arguments qui sont le type de la donnée et sa valeur. Par exemple :</p>
+
+<pre>event.dataTransfer.setData("text/plain", "Texte à glisser");
+</pre>
+
+<p>Dans ce cas, la valeur de la donnée est "Texte à glisser" et son format est <a class="internal" href="/Fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#text" title="Fr/GlisserDéposer/Types de glissement recommandés#text">text/plain</a>.</p>
+
+<p>Vous pouvez fournir une donnée dans de multiples formats. Il suffit d'appeler la méthode <a class="internal" href="/Fr/GlisserD%C3%A9poser/DataTransfer#setData" title="Fr/GlisserDéposer/DataTransfer#setData">setData</a> plusieurs fois avec chacun des formats. Vous devez l'appeler dans l'ordre du format le plus spécifique au moins spécifique.</p>
+
+<pre>var dt = event.dataTransfer;
+dt.setData("application/x-bookmark", bookmarkString);
+dt.setData("text/uri-list", "http://www.mozilla.org");
+dt.setData("text/plain", "http://www.mozilla.org");
+</pre>
+
+<p>Ici, une donnée est ajoutée avec trois types différents. Le premier type 'application/x-bookmark' est un type personnalisé. Toutes les applications ne vont pas supporter ce type, mais vous pouvez l'utiliser pour le glissement entre des zones d'une même application ou d'un même site. En fournissant la donnée avec d'autres types, vous la rendez disponible à moindre échelle pour d'autres applications. Le type 'application/x-bookmark' fournira ainsi plus de détail à l'application qu'avec les autres types qui ne seraient que de simples liens ou textes.</p>
+
+<p>Notez que cet exemple, <a class="internal" href="/Fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#link" title="Fr/GlisserDéposer/Types de glissement recommandés#link">text/uri-list</a> et <a class="internal" href="/Fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#text" title="Fr/GlisserDéposer/Types de glissement recommandés#text">text/plain</a> contiennent la même donnée. C'est souvent le cas, mais pas forcément nécessaire.</p>
+
+<p>Si vous essayez d'ajouter une donnée deux fois avec le même format, alors la nouvelle donnée remplacera l'ancienne, mais à la même position que l'ancienne dans la liste.</p>
+
+<p>Vous pouvez effacer la donnée en utilisant la méthode <a class="internal" href="/Fr/GlisserD%C3%A9poser/DataTransfer#clearData" title="Fr/GlisserDéposer/DataTransfer#clearData">clearData</a>, avec un seul argument qui est le type de la donnée à effacer.</p>
+
+<pre>event.dataTransfer.clearData("text/uri-list");
+</pre>
+
+<p>L'argument de type de la méthode <a class="internal" href="/Fr/GlisserD%C3%A9poser/DataTransfer#clearData" title="Fr/GlisserDéposer/DataTransfer#clearData">clearData</a> est optionnel. S'il n'est pas précisé, la donnée associée à tous les types est effacée. Et si aucune donnée à glisser n'est ajoutée, alors l'opération de glissement ne s'effectue pas.</p>
+
+<h2 id="dragfeedback" name="dragfeedback">Définir l'image filigrane d'un glissement</h2>
+
+<p>Lorsqu'un glissement a lieu, une image translucide est générée à partir de l'origine du glissement (l'élément d'origine ayant déclenché l'événement), et cette image suit le déplacement de la souris. Elle est créée automatiquement donc vous n'avez pas à le faire vous même. Toutefois, vous pouvez personnaliser cette image filigrane grâce à <a class="internal" href="/Fr/GlisserD%C3%A9poser/DataTransfer#setDragImage" title="Fr/GlisserDéposer/DataTransfer#setDragImage">setDragImage</a>.</p>
+
+<pre>event.dataTransfer.setDragImage(image, xOffset, yOffset);
+</pre>
+
+<p>Trois arguments sont nécessaires. Le premier est la référence à une image. Cette référence pointera en gérénal vers un élément image, mais elle peut pointer aussi vers un canvas ou vers tous autres éléments. L'image filigrane sera simplement générée telle qu'elle ressemble à l'écran, et dessinée à sa taille d'origine. Il est également possible d'utiliser des images et des canvas qui ne sont pas dans un document, comme le montre cet exemple :</p>
+
+<pre>function dragWithCustomImage(event)
+{
+  var canvas = document.createElement("canvas");
+  canvas.width = canvas.height = 50;
+
+  var ctx = canvas.getContext("2d");
+  ctx.lineWidth = 4;
+  ctx.moveTo(0, 0);
+  ctx.lineTo(50, 50);
+  ctx.moveTo(0, 50);
+  ctx.lineTo(50, 0);
+  ctx.stroke();
+
+  var dt = event.dataTransfer;
+  dt.setData('text/plain', 'Data to Drag');
+  dt.setDragImage(canvas, 25, 25);
+}
+</pre>
+
+<p>Cette technique est utile pour dessiner des images filigranes personnalisées en utilisant l'élément canvas.</p>
+
+<p>Les deuxième et troisième arguments de la méthode <a class="internal" href="/Fr/GlisserD%C3%A9poser/DataTransfer#setDragImage" title="Fr/GlisserDéposer/DataTransfer#setDragImage">setDragImage</a> sont les décalages de l'image par rapport au pointeur de la souris. Dans cet exemple, comme le canvas fait 50 pixels de large et 50 pixels de haut, nous utilisons son centre (soit 25 et 25) pour que l'image soit centrée sur le pointeur de la souris.</p>
+
+<h2 id="drageffects" name="drageffects">Effets du glissement</h2>
+
+<p>Lors d'un glisser/déposer, plusieur opérations se déroulent. L'opération <code>copy</code> indique que la donnée glissée sera copiée de son emplacement d'origine au lieu de dépot. L'opération <code>move</code> indique que la donnée glissée sera déplacée, et l'opération <code>link</code> indique une forme de relation ou de connexion entre l'origine et le lieu de dépot.</p>
+
+<p>Vous pouvez spécifier laquelle de ces trois opérations sera autorisée au niveau de l'origine du glissement, en définissant la propriété <a class="internal" href="/Fr/GlisserD%C3%A9poser/DataTransfer#effectAllowed" title="Fr/GlisserDéposer/DataTransfer#effectAllowed">effectAllowed</a> dans un scrutateur d'événement <code>dragstart</code>.</p>
+
+<pre>event.dataTransfer.effectAllowed = "copy";
+</pre>
+
+<p>Dans cet exemple, seule une copie n'est autorisée. Vous pouvez combiner les valeurs de plusieurs façons :</p>
+
+<dl>
+ <dt>none</dt>
+ <dd>Aucune opération permise</dd>
+ <dt>copy</dt>
+ <dd>Copie uniquement</dd>
+ <dt>move</dt>
+ <dd>Déplacement uniquement</dd>
+ <dt>link</dt>
+ <dd>Lien uniquement</dd>
+ <dt>copyMove</dt>
+ <dd>Copie ou déplacement uniquement</dd>
+ <dt>copyLink</dt>
+ <dd>Copie ou lien uniquement</dd>
+ <dt>linkMove</dt>
+ <dd>Lien ou déplacement uniquement</dd>
+ <dt>all</dt>
+ <dd>Copie, déplacement ou lien</dd>
+</dl>
+
+<p>Notez que ces valeurs doivent être écrites exactement comme cela. Si vous ne modifiez pas la propriété <a class="internal" href="/Fr/GlisserD%C3%A9poser/DataTransfer#effectAllowed" title="Fr/GlisserDéposer/DataTransfer#effectAllowed">effectAllowed</a>, alors tous les opérations seront permises comme pour la valeur 'all'. L'usage de cette propriété intervient seulement si vous souhaitez exclure des types spécifiques.</p>
+
+<p>Pendant une opération de glissement, un scrutateur pour les événements <code>dragenter</code> ou <code>dragover</code> peut tester la propriété <a class="internal" href="/Fr/GlisserD%C3%A9poser/DataTransfer#effectAllowed" title="Fr/GlisserDéposer/DataTransfer#effectAllowed">effectAllowed</a> afin de voir quelles opérations sont autorisées. La propriété associée <a class="internal" href="/Fr/GlisserD%C3%A9pose/DataTransfer#dropEffect" title="Fr/GlisserDépose/DataTransfer#dropEffect">dropEffect</a> doit être définie dans un de ces événements pour spécifier ce que chaque opération aura à faire. Les valeurs valides pour <a class="internal" href="/Fr/GlisserD%C3%A9pose/DataTransfer#dropEffect" title="Fr/GlisserDépose/DataTransfer#dropEffect">dropEffect</a> sont <code>none</code>, <code>copy</code>, <code>move</code> ou <code>link</code>. Il n'y a pas de combinaison pour cette propriété.</p>
+
+<p>Pour les événements <code>dragenter</code> et <code>dragover</code>, la propriété <a class="internal" href="/Fr/GlisserD%C3%A9pose/DataTransfer#dropEffect" title="Fr/GlisserDépose/DataTransfer#dropEffect">dropEffect</a> est initialisée avec l'effet attendu par l'utilisateur. L'utilisateur peut modifier l'effet désiré en appuyant sur une touche de modification. Bien que les touches varient selon la plateforme, habituellement, il s'agit d'une combinaison des touches Maj et Control qui permettent de copier, déplacer et créer un raccourci. Le pointeur de la souris change de forme pour montrer l'opération souhaitée, par exemple un signe + à côté de la souris pour une copie.</p>
+
+<p>Vous pouvez modifier les propriétés <a class="internal" href="/Fr/GlisserD%C3%A9poser/DataTransfer#effectAllowed" title="Fr/GlisserDéposer/DataTransfer#effectAllowed">effectAllowed</a> et <a class="internal" href="/Fr/GlisserD%C3%A9pose/DataTransfer#dropEffect" title="Fr/GlisserDépose/DataTransfer#dropEffect">dropEffect</a> pendant les événements <code>dragenter</code> ou <code>dragover</code>, si par exemple une cible ne supporte qu'un seul type d'opération. La modification de la propriété <a class="internal" href="/Fr/GlisserD%C3%A9poser/DataTransfer#effectAllowed" title="Fr/GlisserDéposer/DataTransfer#effectAllowed">effectAllowed</a> vous permet de spécifier les opérations autorisées sur une cible donnée. Par exemple, mettre une propriété <code>copyMove</code> permet des opération de copie ou de déplacement, mais pas de créer un lien raccourci.</p>
+
+<p>Vous pouvez modifier la propriété <a class="internal" href="/Fr/GlisserD%C3%A9pose/DataTransfer#dropEffect" title="Fr/GlisserDépose/DataTransfer#dropEffect">dropEffect</a> en remplaçant l'effet de l'utilisateur, et forcer à obtenir une opération spécifique. Notez que cet effet doit être un de ceux listé dans la propriété <a class="internal" href="/Fr/GlisserD%C3%A9poser/DataTransfer#effectAllowed" title="Fr/GlisserDéposer/DataTransfer#effectAllowed">effectAllowed</a>, sinon une valeur alternative sera attribuée.</p>
+
+<pre>event.dataTransfer.effectAllowed = "copyMove";
+event.dataTransfer.dropEffect = "copy";
+</pre>
+
+<p>Dans cet exemple, la copie est l'effet proposé qui est inclus dans la liste des effets autorisés.</p>
+
+<p>Vous pouvez utiliser la valeur <code>none</code> pour interdir tout dépôt à cet emplacement.</p>
+
+<h2 id="droptargets" name="droptargets">Spécifier les cibles de dépôt</h2>
+
+<p>Un scrutateur pour les événements <code>dragenter</code> et <code>dragover</code> est utilisé pour indiquer des cibles de dépôt valides, c'est-à-dire là où les items pourront être déposés. La plupart des zones d'une page Web ne sont pas des endroits valides pour déposer des données. Ainsi, le comportement par défaut pour ces événements ne permet pas un dépôt.</p>
+
+<p>Si vous voulez autoriser un dépôt, vous devez empêcher le comportement par défaut en annulant l'événement. Il suffit soit de retourner <code>false</code> à partir d'un scrutateur d'événement, ou par l'appel de la méthode événementielle <a class="internal" href="/fr/DOM/event.preventDefault" title="fr/DOM/event.preventDefault">event.preventDefault</a>. Cette dernière solution est plus faisable avec une fonction définie dans un script séparé.</p>
+
+<pre>&lt;div ondragover="return false"&gt;
+&lt;div ondragover="event.preventDefault()"&gt;
+</pre>
+
+<p>L'appel de la méthode <a class="internal" href="/fr/DOM/event.preventDefault" title="fr/DOM/event.preventDefault">event.preventDefault</a> pendant les événements <code>dragenter</code> et <code>dragover</code> indiquera qu'un dépôt est permis à cet endroit. Toutefois, il est fréquent d'appeler la méthode <a class="internal" href="/fr/DOM/event.preventDefault" title="fr/DOM/event.preventDefault">event.preventDefault</a> seulement dans certaines situations, par exemple si un lien est en train d'être glissé. Pour cela, appelez une fonction qui testera une condition et annulera l'événement seulement si cette condition est rencontrée. Dans le cas contraire, il suffit de ne pas annuler l'événement et aucun dépôt ne se réalisera si l'utilisateur lache le bouton de la souris.</p>
+
+<p>Il est plus fréquent d'accepter ou non un dépôt en fonction du type de la donnée glissée. Par exemple, permettre les images ou les liens, ou bien les deux. Pour cela, testez les <a class="internal" href="/fr/GlisserD%C3%A9poser/DataTransfer#types" title="fr/GlisserDéposer/DataTransfer#types">types</a> de l'objet <code>dataTransfer</code>. Les types sont sous la forme d'une liste de chaînes de caractères ajoutées au début du glissement, du plus signifiant au moins signifiant.</p>
+
+<pre>function doDragOver(event)
+{
+  var isLink = event.dataTransfer.types.contains("text/uri-list");
+  if (isLink)
+    event.preventDefault();
+}
+</pre>
+
+<p>Dans cet exemple, la méthode <code>contains</code> est utilisée pour vérifier si le type <a class="internal" href="/fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#link" title="fr/GlisserDéposer/Types de glissement recommandés#link">text/uri-list</a> est présent dans la liste des types. S'il l'est, l'événement est annulé, ce qui autorise un dépôt. Si la donnée ne contient pas un lien, l'événement ne sera pas annulé et le dépôt ne sera pas autorisé à cet endroit.</p>
+
+<p>Vous pouvez également définir une propriété <a class="internal" href="/fr/GlisserD%C3%A9poser/DataTransfer#effectAllowed" title="fr/GlisserDéposer/DataTransfer#effectAllowed">effectAllowed</a> ou <a class="internal" href="/fr/GlisserD%C3%A9poser/DataTransfer#dropEffect" title="fr/GlisserDéposer/DataTransfer#dropEffect">dropEffect</a> ou les deux à la fois si vous souhaitez être plus précis sur le type d'opération autorisé. Naturellement, le changement de propriété n'aura aucun effet si vous n'avez pas annulé l'événement.</p>
+
+<h2 id="dropfeedback" name="dropfeedback">Retour d'information du dépôt</h2>
+
+<p>Il y a de nombreuses manières d'indiquer à l'utilisateur que le dépot est autorisé dans une certaine zone. Le pointeur de la souris va être mis à jour en fonction de la valeur de la propriété <a href="/En/DragDrop/DataTransfer#dropEffect.28.29" title="dropEffect">dropEffect</a>. L'apparence exacte dépend de la plateforme de l'utilisateur, généralement il s'agit d'un icone représentant un signe plus qui apparaît pour une copie par exemple, et un 'impossible de déposer ici' peut apparaître quand le dépôt n'est pas autorisé. Cette information contextuelle est suffisante dans la plupart des cas.</p>
+
+<p>De plus, vous pouvez aussi mettre à jour l'interface utilisateur en surlignant au besoin. Pour un simple surlignage, vous pouvez utiliser la pseudo-classe <code>-moz-drag-over</code>sur la cible du dépôt.</p>
+
+<pre>.droparea:-moz-drag-over {
+  border: 1px solid black;
+}
+</pre>
+
+<p>Dans cet example, l'élement comportant la classe <code>droparea</code> va recevoir un bord noir de un pixel tant que la cible sera valide, ce qui est le cas, si la méthode <a href="/en/DOM/event.preventDefault" title="en/DOM/event.preventDefault">event.preventDefault</a> est appelé durant l'évenement <code>dragenter</code>. Il est à noter que vous devez annuler l'évenement <code>dragenter</code> de cette pseudo-classe tant que l'état n'est pas verifié par l'évenement <code>dragover</code>.</p>
+
+<p>For more complex visual effects, you can also perform other operations during the <code>dragenter</code> event, for example, by inserting an element at the location where the drop will occur. For example, this might be an insertion marker or an element that represents the dragged element in its new location. To do this, you could create an <a href="/en/XUL/image" title="image">image</a> or <a href="/en/XUL/separator" title="separator">separator</a> element for example, and simply insert it into the document during the <code>dragenter</code> event.</p>
+
+<p>The <code>dragover</code> event will fire at the element the mouse is pointing at. Naturally, you may need to move the insertion marker around a <code>dragover</code> event as well. You can use the event's <a href="/en/DOM/event.clientX" title="clientX">clientX</a> and <a href="/en/DOM/event.clientY" title="clientY">clientY</a> properties as with other mouse events to determine the location of the mouse pointer.</p>
+
+<p>Finally, the <code>dragleave</code> event will fire at an element when the drag leaves the element. This is the time when you should remove any insertion markers or highlighting. You do not need to cancel this event. Any highlighting or other visual effects specified using the <code>-moz-drag-over</code> pseudoclass will be removed automatically. The <code>dragleave</code> event will always fire, even if the drag is cancelled, so you can always ensure that any insertion point cleanup can be done during this event.</p>
+
+<h2 id="drop" name="drop">Performing a Drop</h2>
+
+<p>When the user releases the mouse, the drag and drop operation ends. If the mouse was released over an element that is a valid drop target, that is, one that cancelled the last <code>dragenter</code> or <code>dragover</code> event, then the drop will be successful, and a <code>drop</code> event will fire at the target. Otherwise, the drag operation is cancelled and no <code>drop</code> event is fired.</p>
+
+<p>During the <code>drop</code> event, you should retrieve that data that was dropped from the event and insert it at the drop location. You can use the <a href="/En/DragDrop/DataTransfer#dropEffect.28.29" title="dropEffect">dropEffect</a> property to determine which drag operation was desired.</p>
+
+<p>As with all drag related events, the event's <code>dataTransfer</code> property will hold the data that is being dragged. The <a href="/En/DragDrop/DataTransfer#getData.28.29" title="getData">getData</a> method may be used to retrieve the data again.</p>
+
+<pre>function onDrop(event)
+{
+  var data = event.dataTransfer.getData("text/plain");
+  event.target.textContent = data;
+  event.preventDefault();
+}
+</pre>
+
+<p>The <a href="/En/DragDrop/DataTransfer#getData.28.29" title="getData">getData</a> method takes one argument, the type of data to retrieve. It will return the string value that was set when the <a href="/En/DragDrop/DataTransfer#setData.28.29" title="setData">setData</a> was called at the beginning of the drag operation. An empty string will be returned if data of that type does not exist. Naturally though, you would likely know that the right type of data was available, as it was previously checked during a <code>dragover</code> event.</p>
+
+<p>In the example here, once we have retrieved the data, we insert the string as the textual content of the target. This has the effect of inserting the dragged text where it was dropped, assuming that the drop target is an area of text such as a <code>p</code> or <code>div</code> element.</p>
+
+<p>In a web page, you should call the <a href="/en/DOM/event.preventDefault" title="en/DOM/event.preventDefault">preventDefault</a> method of the event if you have accepted the drop so that the default browser handling does not handle the droppped data as well. For example, when a link is dragged to a web page, Firefox will open the link. By cancelling the event, this behaviour will be prevented.</p>
+
+<p>You can retrieve other types of data as well. If the data is a link, it should have the type <a href="/En/DragDrop/Recommended_Drag_Types#link" title="text/uri-list">text/uri-list</a>. You could then insert a link into the content.</p>
+
+<pre>function doDrop(event)
+{
+  var links = event.dataTransfer.getData("text/uri-list").split("\n");
+  for each (var link in links) {
+    if (link.indexOf("#") == 0)
+      continue;
+
+    var newlink = document.createElement("a");
+    newlink.href = link;
+    newlink.textContent = link;
+    event.target.appendChild(newlink);
+  }
+  event.preventDefault();
+}
+</pre>
+
+<p>This example inserts a link from the dragged data. As you might be able to guess from the name, the <a href="/En/DragDrop/Recommended_Drag_Types#link" title="text/uri-list">text/uri-list</a> type actually may contain a list of URLs, each on a separate line. In this code, we use the <a href="/en/Core_JavaScript_1.5_Reference/Global_Objects/String/split" title="split">split</a> to split the string into lines, then iterate over the list of lines, inserting each as a link into the document. Note also that we skip links starting with a number sign (#) as these are comments.</p>
+
+<p>For simple cases, you can use the special type <code>URL</code> to just retrieve the first valid URL in the list. For example:</p>
+
+<pre>var link = event.dataTransfer.getData("URL");
+</pre>
+
+<p>This eliminates the need to check for comments or iterate through lines yourself, however it is limited to only the first URL in the list.</p>
+
+<p>The <code>URL</code> type is a special type used only as a shorthand, and it does not appear within the list of types specified in the <a href="/En/DragDrop/DataTransfer#types.28.29" title="types">types</a> property.</p>
+
+<p>Sometimes you may support a number of different formats, and you want to retrieve the data that is most specific that is supported. In this example, three formats are support by a drop target.</p>
+
+<p>The following example returns the data associated with the best supported format:</p>
+
+<pre>function doDrop(event)
+{
+  var types = event.dataTransfer.types;
+  var supportedTypes = ["application/x-moz-file", "text/uri-list", "text/plain"];
+  types = supportedTypes.filter(function (value) types.contains(value));
+  if (types.length)
+    var data = event.dataTransfer.getData(types[0]);
+  event.preventDefault();
+}
+</pre>
+
+<p>This method relies on JavaScript functionality available in Firefox 3. However the code could be adjusted to support other platforms.</p>
+
+<h2 id="dragend" name="dragend">Finishing a Drag</h2>
+
+<p>Once the drag is complete, a <code>dragend</code> is fired at the source of the drag (the same element that received the <code>dragstart</code> event). This event will fire if the drag was successful or if it was cancelled. However, you can use the <a href="/En/DragDrop/DataTransfer#dropEffect.28.29" title="dropEffect">dropEffect</a> to determine what drop operation occurred.</p>
+
+<p>If the <a href="/En/DragDrop/DataTransfer#dropEffect.28.29" title="dropEffect">dropEffect</a> property has the value <code>none</code> during a <code>dragend</code>, then the drag was cancelled. Otherwise, the effect specifies which operation was performed. The source can use this information after a move operation to remove the dragged item from the old location. The <a href="/En/DragDrop/DataTransfer#mozUserCancelled.28.29" title="dropEffect">mozUserCancelled</a> property will be set to true if the user cancelled the drag (by pressing Escape), and false if the drag was cancelled for other reasons such as an invalid drop target, or if was successful.</p>
+
+<p>A drop can occur inside the same window or over another application. The <code>dragend</code> event will always fire regardless. The event's <a href="/en/DOM/event.screenX" title="screenX">screenX</a> and <a href="/en/DOM/event.screenY" title="screenY">screenY</a> properties will be set to the screen coordinate where the drop occurred.</p>
+
+<p>After the <code>dragend</code> event has finished propagating, the drag and drop operation is complete.</p>
diff --git a/files/fr/web/api/api_indexeddb/basic_concepts_behind_indexeddb/index.html b/files/fr/web/api/api_indexeddb/basic_concepts_behind_indexeddb/index.html
new file mode 100644
index 0000000000..cb05bef3fe
--- /dev/null
+++ b/files/fr/web/api/api_indexeddb/basic_concepts_behind_indexeddb/index.html
@@ -0,0 +1,209 @@
+---
+title: Les concepts basiques d'IndexedDB
+slug: Web/API/API_IndexedDB/Basic_Concepts_Behind_IndexedDB
+tags:
+  - Avancé
+  - IndexedDB
+  - concepts
+translation_of: Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB
+---
+<p>{{DefaultAPISidebar("IndexedDB")}}</p>
+
+<p class="summary"><strong>IndexedDB</strong> est un moyen pour permettre le stockage de données dans le navigateur d'un utilisateur, de manière persistante. Ses fonctions de recherche avancées permettent de créer des applications qui fonctionnent tant connectées que déconnectées. IndexedDB est utile pour créer des applications qui stockent une grande quantité de données (par exemple : un catalogue de DVDs dans une bibliothèque) et des applications qui n'ont pas forcément besoin d'une connectivité Internet continue (par exemple : des clients de messagerie électronique, des listes de tâches, des bloc-notes).</p>
+
+<h2 id="À_propos_de_ce_document">À propos de ce document</h2>
+
+<p>Ce document introduit les concepts et les termes essentiels d'IndexedDB. Vous aurez une vue d'ensemble et vous comprendrez les concepts-clés.</p>
+
+<p>Vous pourrez trouver ici :</p>
+
+<ul>
+ <li>Pour en savoir plus sur les termes d'IndexedDB, voyez la section <a href="#definitions">Définitions</a>.</li>
+ <li>Pour avoir un tutoriel sur l'utilisation de l'API, voyez <a href="https://developer.mozilla.org/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB" title="en/IndexedDB/IndexedDB primer">Utiliser IndexedDB</a>.</li>
+ <li>Pour la documentation de référence sur l'API IndexedDB, voyez l'article <a href="https://developer.mozilla.org/fr/docs/Web/API/API_IndexedDB" title="https://developer.mozilla.org/en/IndexedDB">IndexedDB</a> et ses sous-parties, qui documentent les types d'objets utilisés par IndexedDB.</li>
+ <li>Pour plus d'informations sur la manière dont le navigateur gère vos données en arrière-plan, lisez <a href="https://developer.mozilla.org/fr/docs/Web/API/API_IndexedDB/Browser_storage_limits_and_eviction_criteria">Limites de stockage du navigateur et critères d'éviction</a><a href="https://developer.mozilla.org/fr/docs/Web/API/API_IndexedDB/Browser_storage_limits_and_eviction_criteria">.</a></li>
+</ul>
+
+<h2 id="Vue_densemble_dIndexedDB">Vue d'ensemble d'IndexedDB</h2>
+
+<p>IndexedDB vous permet de stocker et récupérer des objets qui sont indexés avec une "clé". Tous les changements que vous faites dans la base de données sont forcément transactionnels. Comme la plupart des solutions de stockage du web, IndexedDB respecte la politique de sécurité utilisant l'origne (<a class="external" href="http://www.w3.org/Security/wiki/Same_Origin_Policy" title="http://www.w3.org/Security/wiki/Same_Origin_Policy">same-origin policy</a>). Ainsi, vous pouvez accéder aux données stockées d'un domaine, alors que vous ne pouvez pas accéder aux données de domaines différents.</p>
+
+<p>IndexedDB est une API <a href="https://developer.mozilla.org/fr/docs/Web/API/API_IndexedDB#Asynchronous_API" title="/en/IndexedDB#Asynchronous_API">asynchrone</a> qui peut être utilisée dans la plupart des contextes, <a href="https://developer.mozilla.org/fr/docs/Utilisation_des_web_workers" title="/fr/docs/DOM/Using_web_workers">Web Workers</a> inclus. Elle comportait également une version <a href="https://developer.mozilla.org/fr/docs/Web/API/API_IndexedDB#Synchronous_API" title="/en/IndexedDB#Synchronous_API">synchrone</a> prévue pour être utilisée dans des <a href="https://developer.mozilla.org/fr/docs/Utilisation_des_web_workers" title="/fr/docs/DOM/Using_web_workers">Web Workers</a>. mais cette option a été retirée de la spécification en raison du manque d'intérêt de la communauté Web.</p>
+
+<p>IndexedDB est une alternative à l'API WebSQL Database, qui a été dépréciée par le W3C le 18 novembre 2010. Alors que ces APIs sont toutes deux des solutions de stockage, elles n'offrent pas les mêmes fonctionnalités. WebSQL Database est un système d'accès à une base de données relationnelle alors qu'IndexedDB est un système de table indexée. </p>
+
+<h2 id="concepts" name="concepts">Les grands concepts</h2>
+
+<p>Si vous avez l'habitude de travailler avec d'autres types de bases de données, vous pourrez être désorienté par l'utlisation d'IndexedDB. Mais il suffit de garder les concepts importants suivants en tête :</p>
+
+<ul>
+ <li><strong>Les bases de données IndexedDB stockent des paires clé-valeur.</strong> Les valeurs peuvent êtres des objets structurés, et les clés peuvent être des propriétés de ces objets. Vous pouvez créer des index à partir de n'importe quelle propriété des objets, pour faciliter la recherche et l'énumération triée. Les clés peuvent être des objets binaires.</li>
+ <li><strong>IndexedDB est construit autour d'un modèle de base de données transactionnelle.</strong> Tout ce que vous faites avec IndexedDB se passe dans le contexte d'une <a href="#gloss_transaction">transaction</a>. L'API IndexedDB fournit beaucoup d'objets qui représentent des index, des tables, des curseurs, etc, mais chacun de ces objets est forcément relié à une transaction donnée. Il n'est pas possible d'exécuter de commandes ou d'ouvrir des curseurs en dehors d'une transaction. Les transactions ont une durée de vie bien définie, donc essayez d'utiliser une transaction après avoir terminé le traitement des exceptions. De plus, les transactions s'engagent automatiquement, elles ne peuvent être lancées manuellement.<br>
+  Ce modèle basé sur des transactions est vraiment utile : rendez-vous compte qu'un utilisateur peut ouvrir deux instances de la même application web dans deux onglets différents en même temps. Si on n'utilisait pas d'opérations transactionnelles, une instance pourrait écraser les modifications de l'autre, et vice versa. Si vous n'êtes pas à l'aise avec la notion de transaction dans une base de données, vous pouvez consulter l'<a href="http://fr.wikipedia.org/wiki/Transaction_%28base_de_donn%C3%A9es%29" title="http://fr.wikipedia.org/wiki/Transaction_%28base_de_donn%C3%A9es%29">article Wikipedia sur les transactions</a>. Vous pouvez aussi voir plus loin la partie <a href="#gloss_transaction">transaction</a> dans la section des définitions.</li>
+ <li><strong>L'API IndexedDB est principalement asynchrone.</strong> L'API ne vous donne pas les données en retournant des valeurs. Au contraire, vous devez utiliser une fonction de rappel ("callback"). Vous ne stockez pas une valeur dans la base de données, ou vous ne récupérez pas une valeur de la base de manière synchrone, mais vous demandez qu'une opération de base de données soit exécutée. Un événement DOM est envoyé lorsque l'opération est terminée, et le type d'événement vous permet de savoir si l'opération a réussi ou échoué. Cela peut sembler un peu compliqué au premier abord, mais après tout, ce n'est pas si différent du fonctionnement de <a href="/fr/docs/XMLHttpRequest" title="/fr/docs/XMLHttpRequest">XMLHttpRequest</a>.</li>
+ <li><strong>IndexedDB utilise de nombreuses requêtes. </strong>Les requêtes sont des objets qui reçoivent les événements DOM de succès ou d'échec mentionnés précédemment. Elles ont des propriétés <code>onsuccess</code> et <code>onerror</code>, et vous pouvez appeler <code>addEventListener()</code> et <code>removeEventListener()</code> sur ces objets. Elles ont aussi les propriétés <code>readyState</code>, <code>result</code>, et <code>errorCode</code> qui vous donnent l'état d'une requête. La propriété <code>result</code> est plutôt magique car elle peut correspondre à beaucoup de choses différentes, en fonction de la manière dont la requête a été créée (par exemple, une instance de <code>IDBCursor</code>, ou la clé de la valeur que vous venez d'insérer dans la base de données.)</li>
+ <li><strong>IndexedDB utilise les évènements DOM pour vous informer quand les résultats sont disponibles.</strong> Les évènements DOM ont toujours une  propriété de <code style="font-size: 14px;">type</code> (dans IndexedDB, sont préférables <code>"success" <em>(succès)</em></code> ou <code>"error" <em>(erreur)</em></code>). Les évènements DOM ont aussi une propriété <code>target</code> <em>(cible) </em>qui dit vers où l'évènement est dirigé. Dans la plupart des cas, la <code>target</code> d'un évènement est l'objet <code>IDBRequest</code> <span id="result_box" lang="fr"><span>qui a été généré à la suite d'une opération de base de données</span></span> . <span id="result_box" lang="fr"><span>Les événements "success" ne se propagent pas et ne peuvent être annulés</span></span> . Les évènements "Error", se propagent et peuvent être annulés. C'est très important, <span id="result_box" lang="fr"><span>lors d'un événement d'erreur, les transactions annulent au fur et à mesure </span></span><span lang="fr"><span> qu'elles s'exécutent, à moins qu'il ne soit annulé</span></span> .</li>
+ <li><strong>IndexedDB est orienté objet.</strong> IndexedDB n'est pas une base de données relationnelle, avec des tables, des colonnes et des lignes. Cette différence importante et fondamentale change votre manière de concevoir et construire vos applications.<br>
+  Dans un espace de stockage de données relationel habituel, on aurait un tableau qui permet de stocker un ensemble de lignes de données, et de colonnes de types nommés de donnée. Avec IndexedDB, au contraire, vous créez un objet de stockage pour un type de données, et les objets JavaScript persistent simplement dans cet espace. Chaque objet de stockage peut utiliser un ensemble d'index qui rendent efficaces la recherche et l'itération. Si les systèmes de base de données orientée objet ne vous sont pas familiers, vous pouvez aller lire l'<a href="http://fr.wikipedia.org/wiki/Base_de_donn%C3%A9es_orient%C3%A9e_objet" title="http://fr.wikipedia.org/wiki/Base_de_donn%C3%A9es_orient%C3%A9e_objet">article Wikipedia sur les bases de données orientées objet</a>.</li>
+ <li><strong>IndexedDB n'utilise pas le langage </strong> <strong>Structured Query Language</strong> (<strong>SQL).</strong> Il utilise des requêtes sur un index pour obtenir un curseur, que l'on utilise ensuite pour parcourir l'ensemble des résultats. Si vous ne connaissez pas bien les systèmes NoSQL, vous pouvez consulter l'<a href="http://fr.wikipedia.org/wiki/NoSQL" title="http://fr.wikipedia.org/wiki/NoSQL">article Wikipedia sur NoSQL</a>.</li>
+ <li><a name="origin"><strong>IndexedDB adhère au principe de same-origin policy <em>(politique de même origine)</em></strong></a>. <span id="result_box" lang="fr"><span>Une origine est le domaine, le protocole d'application et le port URL du document où le script est exécuté.</span></span> Chaque origine <span id="result_box" lang="fr"><span>a son propre ensemble de bases de données associées</span></span> . Chaque base de données a un nom qui l'identifie dans une origine.<br>
+  La limite de sécurité d'IndexedDB empêche les applications d'accèder à des données d'origine différente. Par exemple, alors qu'une application ou une page <a class="external" href="http://www.example.com/app/" rel="freelink">http://www.example.com/app/</a> peut récupérer des données de <a class="external" href="http://www.example.com/dir/" rel="freelink">http://www.example.com/dir/</a>, parce qu'elles ont la même origine, elle ne peut pas récupérer les données de <a class="external" href="http://www.example.com:8080/dir/" rel="freelink">http://www.example.com:8080/dir/</a> (port différent) ni de <a class="link-https" href="https://www.example.com/dir/" rel="freelink">https://www.example.com/dir/</a> (protocole différent), parce que leurs origines sont différentes.</li>
+</ul>
+
+<h2 id="definitions" name="definitions">Définitions</h2>
+
+<p>Cette section définit et explique les termes utilisés dans l'API IndexedDB.</p>
+
+<h3 id="database" name="database">Database <em>(base de données)</em></h3>
+
+<dl>
+ <dt><a name="gloss_database">database<em> (base de données)</em></a></dt>
+ <dd><span id="result_box" lang="fr"><span>Un référentiel d'informations, comprenant généralement un ou plusieurs objets de stockage.</span> <span>Chaque base de données doit avoir les éléments suivants</span></span> :
+ <ul>
+  <li>Name . <em>(nom)</em> Il identifie la base de données <span id="result_box" lang="fr"><span>dans une origine spécifique et reste constant tout au long de la durée de sa vie.</span> <span>Le nom peut être n'importe quelle valeur de chaîne de caractères (y compris une chaîne vide).</span></span></li>
+  <li>Current <a href="#gloss_version"><em>version</em></a> <em>(version actuelle)</em>. Lors de la création de la base de données, sa version est le nombre entier <code>1</code>. <span id="result_box" lang="fr"><span>Chaque base de données ne peut avoir qu'une seule version à un moment donné</span></span> .</li>
+ </ul>
+ </dd>
+ <dt><a name="durable">durable</a></dt>
+ <dd><span id="result_box" lang="fr"><span>Dans Firefox, IndexedDB était durable, ce qui signifie que dans une transaction readwrite <em>(lecture/écriture)</em> {{domxref ("IDBTransaction.on complet")}} était déclenché uniquement lorsque toutes les données étaient garanties, avant d'être écrites sur le disque.</span></span></dd>
+ <dd><span lang="fr"><span>À partir de Firefox 40, les transactions IndexedDB ont des garanties de durabilité relachées pour augmenter les performances (voir {{Bug ("1112702")}}) ; comportement identique à celui des autres navigateurs qui mettent en oeuvre IndexedDB. Dans ce cas, l'événement {{Event ("complete")}} est déclenché après la réception par le système d'exploitation de la commande d'écriture, mais potentiellement avant l'écriture effective de ces données sur le disque. L'événement peut donc être livré plus rapidement qu'avant, mais il existe un petit risque que la transaction entière soit perdue si le système d'exploitation l'écrase ou s'il y a une perte de puissance du système avant l'écriture sur le disque. Étant donné que ces événements catastrophiques sont rares, la plupart des consommateurs ne devraient pas nécessairement s'en préoccuper davantage.</span></span></dd>
+</dl>
+
+<div class="note">
+<p><span lang="fr"><span>Note : Dans Firefox, si vous souhaitez être sûr de la durabilité pour une raison ou une autre (par exemple, vous stockez des données critiques qui ne peuvent pas être recalculées plus tard), vous pouvez forcer une transaction d'écriture sur le disque avant la délivrance de l'évènement </span></span> <code>complete</code>  par la création d'une transaction utilisant le mode expérimental (non standard) <code>readwriteflush</code>  (voir {{domxref("IDBDatabase.transaction")}}).  Ceci est actuellement expérimental et ne peut être utilisé que si la préférence <code>dom.indexedDB.experimental</code> est renseignée avec " <code>true</code> " <em>(vrai)</em> dans <code>about:config</code>.</p>
+</div>
+
+<dl>
+ <dt></dt>
+ <dt><a name="gloss_object_store">object store <em>(objet de stockage)</em></a></dt>
+ <dd>
+ <p><span id="result_box" lang="fr"><span>Le mécanisme avec lequel les données sont stockées dans la base de données</span></span>. L'objet de stockage maintient constamment ses enregistrements, lesquels sont des paires  "key-value" <em>(clé-valeur)</em>. Les enregistrements dans l'objet de stockage sont triés dans l'ordre ascendant des "<em><a href="#gloss_key">keys"</a></em> <em>(clés)</em>.</p>
+
+ <p>Chaque objet de stockage doit avoir un nom qui est unique dans la base de données. Il peut éventuellement avoir un <em><a href="#gloss_keygenerator">key generator</a></em> (générateur de clé) et un <em><a href="#gloss_keypath">key path</a></em> <em>(chemin de clé)</em>. S'il a un "key path", il utilise <em><a href="#gloss_inline_key">in-line keys</a></em> <em>(clés en ligne)</em> ; sinon, il utilise <em><a href="#gloss_outofline_key">out-of-line keys</a></em> <em>(clé hors ligne)</em>.</p>
+
+ <p>Pour la documentation de référence sur les objets de stockage, voir <a href="https://developer.mozilla.org/fr/docs/Web/API/IDBObjectStore" rel="internal">IDBObjectStore</a> ou <a href="https://developer.mozilla.org/fr/docs/Web/API/IDBObjectStoreSync" rel="internal">IDBObjectStoreSync</a>.</p>
+ </dd>
+ <dt><a name="gloss_version">version</a></dt>
+ <dd>À la première création de la base de données, sa version est le nombre entier <code>1</code>. <span id="result_box" lang="fr"><span>Chaque base de données possède une seule version à un moment donné ;</span> <span>il ne peut pas exister plusieurs versions dans le même temps.</span></span> La seule façon de changer la version est de l'ouvrir avec une version plus haute. Ceci démarre une <em>transaction</em> <code>VERSION_CHANGE</code> et lance un évènement <code>upgradeneeded</code>. <span id="result_box" lang="fr"><span>Le seul endroit où le schéma de la base de données peut être mis à jour est à l'intérieur du gestionnaire de cet événement</span></span>.</dd>
+ <dd>Note : Cette définition décrit les <a class="external external-icon" href="http://dvcs.w3.org/hg/IndexedDB/raw-file/tip/Overview.html">spécifications les plus récentes</a>, <span id="result_box" lang="fr"><span>qui ne sont implémentées que dans des navigateurs à jour.</span></span> <span id="result_box" lang="fr"><span>Les anciens navigateurs ont implémenté la méthode </span></span> <a href="https://developer.mozilla.org/en-US/docs/IndexedDB/IDBDatabase#setVersion()" title="/en-US/docs/IndexedDB/IDBDatabase#setVersion()"><code>IDBDatabase.setVersion()</code></a> <span id="result_box" lang="fr"><span>maintenant obsolète et supprimée</span></span>.</dd>
+ <dt><a name="gloss_database_connection">database connection<em> (connexion de la base de données)</em></a></dt>
+ <dd>Une opération créée en ouvrant une <em><a href="#gloss_database">database</a></em> <em>(base de données)</em>. <span id="result_box" lang="fr"><span>Une base de données peut avoir plusieurs connexions en même temps.</span></span></dd>
+ <dt><a name="gloss_transaction">transaction</a></dt>
+ <dd>
+ <p><span id="result_box" lang="fr"><span>Un ensemble atomique d'accès aux données et d'opérations de modification des données sur une base de données particulière.</span> <span>C'est la façon dont vous interagissez avec les données dans une base.</span> <span>En fait, toute lecture ou changement dans la base de données doit se produire dans une transaction.</span></span></p>
+
+ <p><span id="result_box" lang="fr"><span>Une connexion à la base de données peut avoir plusieurs transactions actives associées à la fois, pourvu que les transactions d'écriture n'aient pas de chevauchement</span></span> <a href="#gloss_scope"><em>scopes</em></a>. <span id="result_box" lang="fr"><span>La portée (scope) des transactions, qui est définie lors de la création, détermine l'objet avec lequel la transaction peut interagir, et reste constante pour la durée de vie de la transaction.</span></span> <span id="result_box" lang="fr"><span>Ainsi, par exemple, si une connexion à la base de données a déjà une transaction d'écriture avec une portée qui couvre simplement l'objet de stockage </span></span> <code>flyingMonkey</code> <span lang="fr"><span>, vous pouvez commencer une seconde transaction avec une portée sur les objets de stockage unicornCentaur et unicornPegasus.</span> <span>En ce qui concerne les transactions de lecture, vous pouvez en avoir plusieurs - même avec chevauchements.</span></span></p>
+
+ <p><span id="result_box" lang="fr"><span>Les transactions doivent être de courte durée, pour que le navigateur puisse mettre fin à une transaction trop longue, afin de libérer des ressources de stockage verrouillées par cette dernière.</span> <span>Vous pouvez annuler la transaction, ce qui modifie les changements apportés à la base de données dans la transaction.</span> <span>Et vous n'avez même pas à attendre que la transaction commence ou soit active pour l'annuler.</span></span></p>
+
+ <p>Les trois modes de transaction sont : " <code>readwrite</code> " <em>(lecture/écriture)</em>, " <code>readonly</code> " <em>(lecture seule)</em>, et " <code>versionchange</code> " <em>(changement de version)</em>. La seule manière de créer et supprimer les objets de stockage et les index est d'utiliser une transaction <a href="https://developer.mozilla.org/en-US/docs/Web/Reference/Events/versionchange_indexedDB"><code>versionchange</code></a> . Pour en apprendre plus sur les types de transactions, voir l'article de référence pour <a href="https://developer.mozilla.org/fr/docs/Web/API/API_IndexedDB" title="https://developer.mozilla.org/en/IndexedDB">IndexedDB</a>.</p>
+
+ <p><span id="result_box" lang="fr"><span>Parce que tout se passe au sein d'une transaction, c'est un concept très important dans IndexedDB.</span> <span>Pour en savoir plus sur les transactions, en particulier sur la façon dont elles se rapportent aux versions, voir</span></span> <a href="https://developer.mozilla.org/fr/docs/Web/API/IDBTransaction"> IDBTransaction</a>, <span class="short_text" id="result_box" lang="fr"><span>qui a également une documentation de référence</span></span> . Pour la documentation sur l'API synchrone, voir <a href="https://developer.mozilla.org/fr/docs/Web/API/IDBTransactionSync" rel="internal">IDBTransactionSync</a>.</p>
+ </dd>
+ <dt><a name="gloss_request">request <em>(requêtes)</em></a></dt>
+ <dd><span id="result_box" lang="fr"><span>L'opération par laquelle la lecture et l'écriture sur une base de données est effectuée.</span> <span>Chaque requête représente une opération de lecture ou d'écriture.</span></span></dd>
+ <dt><a name="gloss_index">index</a></dt>
+ <dd>
+ <p><span id="result_box" lang="fr"><span>Un index est un objet de stockage spécialisé pour rechercher des enregistrements dans un autre objet de stockage appelé "</span></span> <em>referenced object store"</em>  <em>(objet de stockage référencé)</em><span lang="fr"><span>.</span> <span>L'index est un stockage persistant de key-value <em>(clé-valeur)</em>  dans lequel la partie "value" des enregistrements contient la partie "key" d'un enregistrement de l'objet de stockage référencé.</span> <span>Les enregistrements dans un index sont automatiquement remplis chaque fois que ceux de l'objet référencé sont insérés, mis à jour ou supprimés.</span> <span>Chaque enregistrement d'un index ne peut indiquer qu'un seul enregistrement dans son objet référencé, mais plusieurs index peuvent référencer le même objet.</span> <span>Lorsque l'objet référencé change, tous les index qui s'y réfèrent sont mis à jour automatiquement.</span></span></p>
+
+ <p><span id="result_box" lang="fr"><span>Vous pouvez également rechercher des enregistrements dans un objet de stockage en utilisant la</span></span> <a href="#gloss_key">clé</a><em>.</em></p>
+
+ <p>Pour en apprendre plus sur l'utilisation des index, voir <a href="/en/IndexedDB/Using_IndexedDB#Using_an_index" title="en/IndexedDB/Using_IndexedDB#Using_an_index">Using IndexedDB</a>. Pour la documentation de référence sur l'index, voir <a href="../../../../en/IndexedDB/IDBKeyRange" rel="internal">IDBKeyRange</a>.</p>
+ </dd>
+</dl>
+
+<h3 id="key" name="key">Key and value <em>(clé et valeur)</em></h3>
+
+<dl>
+ <dt><a name="gloss_key">key <em>(clé)</em></a></dt>
+ <dd>
+ <p><span id="result_box" lang="fr"><span>Une valeur de données par laquelle les valeurs stockées sont organisées et récupérées dans l'objet de stockage .</span> <span>Celui-ci peut obtenir la clé de l'une des trois sources : un générateur de clés, un chemin de clé et une valeur explicitement spécifiée.</span> <span>La clé doit être d'un type de données qui a un nombre supérieur au précédent.</span> <span>Chaque enregistrement doit avoir une clé unique dans l'objet de stockage, de sorte que celui-ci ne peut comporter plusieurs enregistrements avec la même clé.</span></span></p>
+
+ <p><span class="short_text" id="result_box" lang="fr"><span>Une clé peut être de l'un des types suivants</span></span> : <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/String" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String">string</a> <em>(chaîne de caractères)</em>, <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Date" title="en/JavaScript/Reference/Global Objects/Date">date</a>, float <em>(flottante)</em>, binary blob <em>(blob binaire)</em> et <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array" title="en/JavaScript/Reference/Global Objects/Array">array</a> <em>(tableau)</em>. Pour les tableaux, <span class="short_text" id="result_box" lang="fr"><span>la valeur de la clé peut être comprise entre vide et l'infini</span></span>. Et vous pouvez inclure un tableau dans un tableau.</p>
+
+ <p>Vous pouvez également rechercher des enregistrements dans un objet de stockage en utilisant l'<em><a href="#gloss_index">index</a>.</em></p>
+ </dd>
+ <dt><a name="gloss_keygenerator">key generator<em> (générateur de clé)</em></a></dt>
+ <dd>Un mécanisme pour produire de nouvelles clés dans une séquence ordonnée. Si un objet de stockage n'a pas de générateur de clé, l'application doit fournir les clés des enregistrements stockés. Les générateurs ne sont pas partagés entre les objets de stockage. <span id="result_box" lang="fr"><span>Il s'agit d'un détail concernant les navigateurs, car dans le développement web, vous ne créez pas réellement ou ne gérez pas les accès aux générateurs de clés.</span></span></dd>
+ <dt><a name="gloss_inline_key">in-line key <em>(clé en ligne)</em></a></dt>
+ <dd>Une clé qui est stockée comme partie d'une valeur de stockage. Elle est trouvée en utilisant "<em>key path" (chemin de clé)</em>. Une clé en ligne peut être créée par un générateur. Une fois la clé générée, elle peut être stockée dans la valeur utilisant le "key path" ou être utilisée comme clé.</dd>
+ <dt><a name="gloss_outofline_key">out-of-line key <em>(clé hors ligne)</em></a></dt>
+ <dd>Une clé stockée séparément de la valeur stockée.</dd>
+ <dt><a name="gloss_keypath">key path <em>(chemin de clé)</em></a></dt>
+ <dd><span id="result_box" lang="fr"><span>Définit où le navigateur doit extraire la clé d'une valeur dans l'objet de stockage ou l'index.</span> <span>Un chemin de clé valide peut inclure l'un des éléments suivants : une chaîne vide, un identifiant JavaScript ou plusieurs identifiants JavaScript séparés par des périodes, ou un tableau contenant ces éléments.</span> <span>Il ne peut pas inclure d'espaces.</span></span></dd>
+ <dt><a name="gloss_value">value <em>(valeur)</em></a></dt>
+ <dd>
+ <p><span id="result_box" lang="fr"><span>Chaque enregistrement a une valeur, qui peut inclure tout ce qui peut être exprimé en JavaScript, y compris</span></span> : <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Boolean" rel="internal" title="en/JavaScript/Reference/Global_Objects/Boolean">boolean</a> <em>(bouléen)</em>, <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Number" rel="internal" title="en/JavaScript/Reference/Global_Objects/Number">number</a><em> (nombre)</em>, <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/String" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String">string</a> <em>(chaîne de caractères)</em>, <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Date" title="en/JavaScript/Reference/Global Objects/Date">date</a>, <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object" title="en/JavaScript/Reference/Global Objects/Object">object</a> <em>(objet)</em>, <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array" title="en/JavaScript/Reference/Global Objects/Array">array</a> <em>(tableau)</em>, <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/RegExp" rel="internal" title="en/JavaScript/Reference/Global_Objects/RegExp">regexp</a>, <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/undefined" title="en/JavaScript/Reference/Global_Objects/undefined">undefined</a> <em>(indéfini)</em>, and null <em>(nul)</em>.</p>
+
+ <p>Quand un objet ou un tableau est stocké, les propriétés et valeurs dans cet objet ou ce tableau peuvent aussi être toute valeur valide.</p>
+
+ <p><a href="https://developer.mozilla.org/fr/docs/Web/API/Blob" title="en/DOM/Blob">Blobs</a> et fichiers peuvent être stockés, voir <a class="external external-icon" href="http://dvcs.w3.org/hg/IndexedDB/raw-file/tip/Overview.html">specification</a> {{ fx_minversion_inline("11") }}.</p>
+ </dd>
+</dl>
+
+<h3 id="range" name="range">Intervalle et portée</h3>
+
+<dl>
+ <dt><a name="gloss_scope">scope (<em>portée ou étendue</em>)</a></dt>
+ <dd><span id="result_box" lang="fr"><span>L'ensemble des objets de stockage et index auxquels s'applique une transaction.</span> <span>Les portées des transactions en lecture seule peuvent se chevaucher et s'exécuter en même temps.</span> <span>Par contre, les portées des transactions d'écriture ne peuvent pas se chevaucher.</span> <span>Vous pouvez toujours démarrer plusieurs transactions avec la même portée en même temps, mais elles entrent dans une file d'attente et s'exécutent l'une après l'autre.</span></span></dd>
+ <dt><a name="gloss_cursor">cursor <em>(curseur)</em></a></dt>
+ <dd>Un mécanisme <span id="result_box" lang="fr"><span>pour l'itération de plusieurs enregistrements avec une </span></span> <em>"key range"</em> <span lang="fr"><span><em>(intervalle de clés</em>).</span> <span>Le curseur possède une source qui indique quel index ou objet stocké est itéré.</span> <span>Il a une position dans l'intervalle et se déplace dans une direction qui augmente ou diminue dans l'ordre des clés d'enregistrement.</span> <span>Pour la documentation de référence sur les curseurs, voir</span></span> <a href="https://developer.mozilla.org/fr/docs/Web/API/IDBCursor" rel="internal">IDBCursor</a> ou <a href="https://developer.mozilla.org/fr/docs/Web/API/IDBCursorSync" rel="internal">IDBCursorSync</a>.</dd>
+ <dt><a name="gloss_key_range">key range <em>(intervalle de clés)</em></a></dt>
+ <dd>
+ <p><span id="result_box" lang="fr"><span>Un intervalle continu sur un type de données utilisé pour les clés.</span> <span>Les enregistrements peuvent être récupérés à partir des objets de stockage et des index à l'aide de touches ou d'un intervalle de clés.</span> <span>Vous pouvez limiter ou filtrer l'intervalle en utilisant les limites inférieures et supérieures.</span> <span>Par exemple, vous pouvez itérer sur toutes les valeurs d'une clé entre x et y.</span></span></p>
+
+ <p>Pour la documentation de référence sur "key range", voir <a href="https://developer.mozilla.org/fr/docs/Web/API/IDBKeyRange" rel="internal">IDBKeyRange</a>.</p>
+ </dd>
+</dl>
+
+<h2 id="limitations" name="limitations">Limitations</h2>
+
+<p>IndexedDB <span id="result_box" lang="fr"><span>est conçu pour couvrir la plupart des cas qui nécessitent un stockage côté client.</span> <span>Cependant, il n'est pas adapté pour quelques cas comme les suivants :</span></span></p>
+
+<ul>
+ <li><span id="result_box" lang="fr"><span>Tri par classement international .</span> <span>Toutes les langues ne trient pas les chaînes de la même manière, de sorte que le classement ne peut être internationalisé.</span> <span>Bien que la base de données ne puisse pas stocker des données dans un ordre spécifiquement international, vous pouvez trier les données que vous avez déjà lues sur votre base de données.</span> <span>Notez, cependant, que le </span></span><a href="https://developer.mozilla.org/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB#Locale-aware_sorting">locale-aware sorting</a> <span lang="fr"><span> a été autorisée avec un indicateur expérimental activé (actuellement pour Firefox uniquement) depuis Firefox 43.</span></span></li>
+ <li><span id="result_box" lang="fr"><span>Synchronisation .</span> <span>L'API n'est pas conçue pour prendre en charge la synchronisation avec une base de données côté serveur.</span> <span>Vous devez écrire un code qui synchronise une base de données indexedDB côté client avec une base de données côté serveur.</span></span></li>
+ <li><span id="result_box" lang="fr"><span>Recherche de texte intégral .</span> <span>L'API n'a pas d'équivalent à l'opérateur </span></span> <span style="direction: ltr;"><code>LIKE</code></span> <span lang="fr"><span> en SQL.</span></span></li>
+</ul>
+
+<p><span id="result_box" lang="fr"><span>En outre, sachez que les navigateurs peuvent effacer la base de données, comme dans les conditions suivantes</span></span> :</p>
+
+<ul>
+ <li><span id="result_box" lang="fr"><span>L'utilisateur demande un effacement.</span> <span>De nombreux navigateurs ont des paramètres qui permettent aux utilisateurs d'effacer toutes les données stockées pour un site Web donné, y compris les cookies, les signets, les mots de passe stockés et les données IndexedDB.</span></span></li>
+ <li><span id="result_box" lang="fr"><span>Le navigateur est en mode de navigation privée.</span> <span>Certains navigateurs ont des modes "navigation privée" (Firefox) ou "incognito" (Chrome).</span> <span>À la fin de la session, le navigateur efface la base de données.</span></span></li>
+ <li><span class="short_text" id="result_box" lang="fr"><span>La limite de disque ou de quota a été atteinte.</span></span></li>
+ <li>Les données sont corrompues.</li>
+ <li><span id="result_box" lang="fr"><span>Un changement incompatible est apporté à la fonctionnalité.</span></span></li>
+</ul>
+
+<p><span id="result_box" lang="fr"><span>Les circonstances exactes et les capacités du navigateur changent au fil du temps, mais la philosophie générale des fournisseurs de navigateurs est de faire les efforts nécessaires pour conserver les données lorsque c'est possible.</span></span></p>
+
+<h2 id="next" name="next">Étape suivante</h2>
+
+<p><span id="result_box" lang="fr"><span>Avec ces grands concepts dans nos poches, nous pouvons obtenir des choses plus concrètes.</span> <span>Pour un tutoriel sur l'utilisation de l'API, voir</span></span> <a href="https://developer.mozilla.org/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB"> Using IndexedDB</a>.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p>Spécification</p>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/IndexedDB/" title="http://www.w3.org/TR/IndexedDB/"><span style="direction: ltr;">Indexed Database API Specification</span></a></li>
+</ul>
+
+<p>Référence</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/API_IndexedDB" title="https://developer.mozilla.org/en/IndexedDB">IndexedDB API Reference</a></li>
+</ul>
+
+<p>Tutoriels</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Using IndexedDB</a></li>
+</ul>
+
+<p>Article connexe</p>
+
+<ul>
+ <li><a class="external" href="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx" title="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx">IndexedDB — The Store in Your Browser</a></li>
+</ul>
diff --git a/files/fr/web/api/api_indexeddb/browser_storage_limits_and_eviction_criteria/index.html b/files/fr/web/api/api_indexeddb/browser_storage_limits_and_eviction_criteria/index.html
new file mode 100644
index 0000000000..bfa95657cc
--- /dev/null
+++ b/files/fr/web/api/api_indexeddb/browser_storage_limits_and_eviction_criteria/index.html
@@ -0,0 +1,139 @@
+---
+title: Limites de stockage du navigateur et critères d'éviction
+slug: Web/API/API_IndexedDB/Browser_storage_limits_and_eviction_criteria
+tags:
+  - Base de données
+  - IndexedDB
+  - LRU
+  - Limites
+  - Stockage
+  - eviction
+translation_of: Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria
+---
+<div>{{DefaultAPISidebar("IndexedDB")}}</div>
+
+<div class="note">
+<p>Il existe un certain nombre de technologies Web qui stockent des données d'un type ou d'un autre du côté client (c'est-à-dire sur le disque local). Le processus par lequel le navigateur calcule l'espace alloué au stockage de données Web et les données à supprimer quand la limite est atteinte n'est pas simple et diffère d'un navigateur à l'autre. Cet article tente d'expliquer comment tout cela fonctionne.</p>
+</div>
+
+<div class="note">
+<p><strong>Note </strong>: Les informations ci-dessous devraient être assez précises pour la plupart des navigateurs modernes, mais les spécificités du navigateur sont évoquées quand elles sont connues. Opera et Chrome devraient se comporter de la même manière dans tous les cas. Mais <a href="http://www.opera.com/mobile/mini">Opera Mini</a> (encore basé sur presto du côté serveur) ne stocke aucune donnée sur le client.</p>
+</div>
+
+<h2 id="Les_différents_types_de_stockage_des_données">Les différents types de stockage des données</h2>
+
+<p>Même dans le même navigateur, en utilisant la même méthode de stockage, il existe différentes classes de stockage de données à comprendre. Cette section traite des différents types que vous pouvez trouver dans différents navigateurs.</p>
+
+<p>Généralement, les deux principaux types de stockage sont les suivants :</p>
+
+<ul>
+ <li>Persistant : ce sont des données qui doivent être conservées pendant une longue période. Elles ne seront évincéés que si l'utilisateur le choisit (par exemple, dans Firefox, il existe un bouton "nettoyer stockage" dans la boîte de dialogue d'informations sur la page pour chaque page).</li>
+ <li>Temporaire : il s'agit de données qui n'ont pas besoin de persister très longtemps. Elles seront évacuées en-dessous d'un minimum d'utilisation ({{anch("LRU policy")}}) lorsque les limites de stockage sont atteintes.</li>
+</ul>
+
+<p>Par défaut, le stockage temporaire sera utilisé dans la plupart des contextes d'utilisation (par exemple, des applications Web standard) et le persistant pour les applications installées (par exemple, les applications Firefox installées sur le système d'exploitation Firefox OS / Firefox de bureau, les applications Chrome).</p>
+
+<h3 id="Spécificités_de_Firefox">Spécificités de Firefox</h3>
+
+<p>Dans Firefox, vous pouvez choisir le type de stockage que vous souhaitez utiliser en incluant une option propriétaire — <code>storage</code> — lorsque vous créez une base de données IndexedDB en utilisant {{domxref ("IDBFactory.open ()", "open ()")}} :</p>
+
+<ul>
+ <li>
+  <pre class="brush: js"><code>var request = indexedDB.open("myDatabase", { version: 1, storage: "persistent" });</code></pre>
+ </li>
+ <li>
+  <pre class="brush: js"><code>var request = indexedDB.open("myDatabase", { version: 1, storage: "temporary" });</code></pre>
+ </li>
+</ul>
+
+<p>Dans Firefox, quand le stockage persistant est choisi, l'utilisateur reçoit une fenêtre de dialogue d'interface utilisateur pour l'avertir que ces données persisteront et lui demander s'il en est satisfait.</p>
+
+<p>Les données de stockage temporaire ne provoquent aucune fenêtre de dialogue vers l'utilisateur, mais il y a des {{anch("Limites de stockage")}}.</p>
+
+<h3 id="Default_storage_dans_Firefox_(stockage_par_défaut)">"Default storage" dans Firefox <em>(stockage par défaut)</em></h3>
+
+<p>C'est le troisième type de stockage à envisager dans Firefox — "Default storage" <em>(stockage par défaut)</em>.  C'est une option par défaut, utilisée quand vous ne spécifiez pas le paramètre <code>storage</code>  vu ci-dessus. Les données du stockage par défaut se comportent différemment selon les circonstances : assimilées aux données d'un stockage persistant pour les applications installées de Firefox OS, ou d'un stockage temporaire pour tout autre type d'utilisation.</p>
+
+<h2 id="Où_sont_stockées_les_données">Où sont stockées les données ?</h2>
+
+<p>Chaque type de stockage représente un référentiel distinct, voici la cartographie réelle des répertoires sous le profil Firefox d'un utilisateur (d'autres navigateurs peuvent différer légèrement) :</p>
+
+<ul>
+ <li><code>&lt;profile&gt;/storage</code> — le principal, le plus haut niveau de répertoire pour le stockage maintenu par le " quota manager " <em>(manager de quotas)</em> (voir ci-dessous).</li>
+ <li><code>&lt;profile&gt;/storage/permanent</code> — répertoire de stockage des données persistantes.</li>
+ <li><code>&lt;profile&gt;/storage/temporary</code> — répertoire de stockage des données temporaires.</li>
+ <li><code>&lt;profile&gt;/storage/default</code> — répertoire de stockage des données par défaut.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note :</strong>  Depuis l'introduction de l' <a href="https://developer.mozilla.org/en-US/docs/Web/API/Storage_API">API Storage</a> , le dossier "permanent" peut être considéré comme obsolète, il n'est plus utilisé que pour les bases de données de type persistant IndexedDB. Peu importe le mode, "best-effort"<em> (meilleur effort)</em> ou "persistant", les données sont stockées sous <code>&lt;profile&gt;/storage/default</code>.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: Dans Firefox, vous pouvez trouver votre dossier profil en entrant : <code>support</code> dans la barre d'URL et en appuyant sur le bouton <em>Show in..</em>. <em>(</em><em>Afficher dans ...)</em> (par exemple, <em>"Show in Finder"</em> sur Mac OS X) à côté du titre <em>"Profile Folder" (</em><em>dossier de profil)</em> .</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: Si vous regardez dans votre profil les répertoires de données stockées, vous pouvez voir un quatrième dossier : <code>persistent</code> . À la base, le dossier <code>persistent</code> a été renommé <code>permanent,</code> il y a quelques temps, pour faciliter les mises à niveau / migrations.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: Les utilisateurs ne doivent pas ajouter leurs propres répertoires ou fichiers sous <code>&lt;profile&gt;/storage</code> . Cela entraînerait l'échec de l'initialisation du stockage ; par exemple {{domxref ("IDBFactory.open ()", "open ()")}} déclencherait un événement d'erreur.</p>
+</div>
+
+<h2 id="Limites_de_stockage">Limites de stockage</h2>
+
+<p>L'espace de stockage maximal du navigateur est dynamique  — il est basé sur la taille de votre disque dur. La limite globale est calculée sur la base de 50% de l'espace disque libre. Dans Firefox, un outil interne du navigateur appelé " Quota Manager " <em>(gestionnaire de quotas)</em> surveille la quantité d'espace disque utilisée par chaque origine et supprime les données si nécessaire.</p>
+
+<p>Donc, si votre disque dur est de 500 Go, le stockage total d'un navigateur est de 250 Go. S'il est dépassé, une procédure appelée <strong>"origin eviction"</strong> <em>(</em><em>éviction d'origine)</em> entre en jeu, en supprimant la valeur totale de l'origine jusqu'à ramener le niveau de stockage en-dessous de la limite. La suppression d'une base de données d'origine peut entraîner des problèmes d'incohérence.</p>
+
+<p>Il y a aussi une autre limite appelée <strong>group limit</strong> — ceci est défini comme 20% de la limite globale. Chaque origine fait partie d'un groupe (groupe d'origines). Il existe un groupe pour chaque domaine eTLD + 1.</p>
+
+<p>Par exemple :</p>
+
+<ul>
+ <li><code>mozilla.org</code> — groupe1, origine1</li>
+ <li><code>www.mozilla.org</code> — groupe1, origine2</li>
+ <li><code>joe.blogs.mozilla.org</code> — groupe1, origine3</li>
+ <li><code>firefox.com</code> — groupe2, origine4</li>
+</ul>
+
+<p>Ces groupes, <code>mozilla.org</code>, <code>www.mozilla.org</code>, et <code>joe.blogs.mozilla.org</code> peuvent utiliser globalement un maximum de 20% de la limite globale. <code>firefox.com</code> a un maximum distinct de 20%.</p>
+
+<p>Les deux limites reagissent différemment quand la limite est atteinte :</p>
+
+<ul>
+ <li>La limite de groupe est également appelée «limite dure»: elle ne déclenche pas l'éviction d'origine.</li>
+ <li>La limite globale est une «limite douce» car il est possible que certains espaces soient libérés et que l'opération puisse se poursuivre.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: Si la limite de groupe est dépassée, ou si l'éviction d'origine ne crée pas assez d'espace libre, le navigateur lance  <code>QuotaExceededError</code>.</p>
+</div>
+
+<h2 id="Politique_LRU">Politique LRU</h2>
+
+<p>Lorsque l'espace disque disponible est rempli, le gestionnaire de quotas commence à effacer les données sur la base de la politique LRU — l'origine la moins utilisée sera d'abord supprimée, puis la suivante, jusqu'à ce que le navigateur ne dépasse plus la limite.</p>
+
+<p>Nous traçons le "dernier temps d'accès" pour chaque origine utilisant le stockage temporaire. Une fois que la limite globale du stockage temporaire est atteinte, nous essayons de trouver toutes les origines actuellement inutilisées (c'est-à-dire, sans onglets ou applications ouverts qui conservent des bases de données ouvertes). Celles-ci sont ensuite triées sur le dernier accès. Les origines les moins récemment utilisées sont ensuite supprimées jusqu'à ce qu'il y ait suffisamment d'espace pour répondre à la demande qui a déclenché cette éviction d'origine.</p>
+
+<h2 id="Quelles_technologies_utilisent_le_stockage_de_données_du_navigateur">Quelles technologies utilisent le stockage de données du navigateur ?</h2>
+
+<p>Dans Firefox, les technologies suivantes utilisent le stockage de données du navigateur pour stocker des données au besoin. Nous les qualifions de "quota clients" dans ce contexte :</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/API_IndexedDB">IndexedDB</a></li>
+ <li><a href="http://asmjs.org/">asm.js</a> caching</li>
+ <li><a href="/fr/docs/Web/API/Cache">Cache API</a></li>
+</ul>
+
+<p>Le «dernier temps d'accès» des origines est mis à jour lorsque l'un de ces éléments est activé / désactivé. L'éviction d'origine supprimera les données pour tous ces "quota clients".</p>
+
+<p>Dans Chrome / Opera, l'API " Quota Management" gère les quotas pour <a href="/en-US/docs/Web/HTML/Using_the_application_cache">AppCache</a>, <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a>, WebSQL et <a href="/en-US/docs/Web/API/File_System_API">File System API</a>.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="http://www.html5rocks.com/en/tutorials/offline/quota-research/">Working with quota on mobile browsers</a>, de<a href="http://blog.agektmr.com" title="Eiji Kitamura"> Eiji Kitamura.</a> Une analyse détaillée du stockage côté client sur les navigateurs mobiles.</li>
+ <li><a href="https://developers.google.com/web/updates/2011/11/Quota-Management-API-Fast-Facts">Quota Management API : Fast Facts</a>, de<a href="http://blog.agektmr.com" title="Eiji Kitamura"> Eiji Kitamura.</a> Un regard sur l'API Quota Management dans Chrome / Blink (qui devrait également inclure Opera aussi.)</li>
+</ul>
diff --git a/files/fr/web/api/api_indexeddb/index.html b/files/fr/web/api/api_indexeddb/index.html
new file mode 100644
index 0000000000..682043df0e
--- /dev/null
+++ b/files/fr/web/api/api_indexeddb/index.html
@@ -0,0 +1,322 @@
+---
+title: IndexedDB
+slug: Web/API/API_IndexedDB
+tags:
+  - API
+  - Avancé
+  - Bases de données
+  - IndexedDB
+  - Stockage
+translation_of: Web/API/IndexedDB_API
+---
+<p>{{DefaultAPISidebar("IndexedDB")}}</p>
+
+<p>IndexedDB est une API de bas niveau qui permet le stockage côté client de quantités importantes de données structurées, incluant des fichiers/blobs. Cette API utilise des index afin de permettre des recherches performantes sur ces données. Alors que <a href="/fr/docs/Web/API/Web_Storage_API">Web Storage</a> est utile pour stocker de petites quantités de données, il est moins utile pour stocker de grandes quantités de données structurées. IndexedDB fournit une solution. Cette page est le point d'entrée pour tout ce qui concerne IndexedDB sur MDN - vous y trouverez les liens vers la référence complète de l'API et les guides d'utilisation, le support par les navigateurs, et quelques explications des concepts clés.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<div class="note">
+<p><strong>Note</strong>: l'API IndexedDB est puissante, mais elle peut sembler trop compliquée dans les cas simples. Si vous préferez une API plus simple, essayez des librairies comme <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="https://www.npmjs.com/package/idb">idb</a>, <a href="https://www.npmjs.com/package/idb-keyval">idb-keyval</a>, <a href="http://jsstore.net/">JsStore</a> et <a href="https://github.com/google/lovefield">lovefield</a> qui offrent de nombreux avantages aux développeurs de IndexedDB.</p>
+</div>
+
+<h2 id="Concepts_clés_et_utilisation">Concepts clés et utilisation</h2>
+
+<p>IndexedDB est un système de gestion de base de données transactionnel, similaire à un SGBD relationnel basé sur SQL. Cependant contrairement aux SGBD relationnels, qui utilisent des tables avec des colonnes fixes, IndexedDB est une base de données orientée objet basée sur JavaScript. <span style="line-height: 1.5;">IndexedDB vous permet de stocker et de récupérer des objets qui sont indexés avec une </span><strong style="line-height: 1.5;">clef</strong><span style="line-height: 1.5;">; tout objet supporté par </span><a href="https://developer.mozilla.org/fr/docs/Web/API/Web_Workers_API/algorithme_clonage_structure">l'algorithme de clônage structuré</a><span style="line-height: 1.5;"> peut être stocké. </span><span style="line-height: 1.5;">Vous devez spécifier le schéma de la base de données, ouvrir une connexion à votre base de données, puis récupérer et mettre à jour des données dans une série de </span><strong style="line-height: 1.5;">transactions</strong><span style="line-height: 1.5;">.</span></p>
+
+<ul>
+ <li><span style="line-height: 1.5;">Plus d'informations sur les <a href="/fr/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB">concepts derrière IndexedDB</a>.</span></li>
+ <li><span style="line-height: 1.5;">Apprenez à utiliser IndexedDB de manière asynchrone à partir des principes fondamentaux grâce à notre guide <a href="/fr/docs/IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a>.</span></li>
+ <li><span style="line-height: 1.5;">Combinez IndexedDB pour le stockage des données en mode déconnecté avec les Service Workers pour stocker des assets en mode déconnecté, comme précisé dans <a href="/fr/docs/Web/Progressive_web_apps/Offline_Service_workers">Faire fonctionner les PWAs en mode déconnecté grâce aux Service workers</a></span><span style="line-height: 1.5;">.</span></li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: Comme la plupart des solutions de stockage en ligne, IndexedDB suit la politique <a class="external" href="http://www.w3.org/Security/wiki/Same_Origin_Policy">same-origin policy</a>. Alors même que vous pouvez accèder à des données stockées au sein d'un domaine, vous ne pouvez pas accéder à des données sur plusieurs domaines.</p>
+</div>
+
+<h3 id="Synchrone_et_asynchrone">Synchrone et asynchrone</h3>
+
+<p>Les opérations effectuées par IndexedDB sont réalisées de manière asynchrone, afin de ne pas bloquer l'application. IndexedDB comprend à la fois une API asynchrone et une API synchrone. L'API synchrone était à l'origine uniquement destinée pour un usage avec les <a href="/fr/docs/Utilisation_des_web_workers">Web workers</a>, mais elle a été retirée de la spécification parce qu'il était difficile de savoir si elle était nécessaire. Cependant l'API synchrone pourrait être ré-integrée si il y a une demande suffisante de la part des développeurs web.</p>
+
+<h3 id="Limites_de_stockage_et_critères_déviction">Limites de stockage et critères d'éviction</h3>
+
+<p>Il y a un certain nombre de technologies web pour stocker différents types de données côté client (par exemple sur votre disque local). IndexedDB est la plus couramment citée. Le processus par lequel le navigateur calcule combien d'espace il doit allouer aux données web, et ce qu'il doit supprimer quand la limite est atteinte, n'est pas simple et varie entre les différents navigateurs.<a href="/fr/docs/IndexedDB/Browser_storage_limits_and_eviction_criteria"> L'article "limites de stockage des navigateurs et critères d'éviction"</a> tente d'expliquer ce fonctionnement, au moins pour le cas de Firefox.</p>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<p>Pour accèder à une base de données, il faut apeller <a href="/fr/docs/Web/API/IDBFactory.open"><code>open()</code></a> sur l'attribut <a href="/fr/docs/Web/API/IDBEnvironment.indexedDB"><code>indexedDB</code></a> d'un objet <a href="/fr/docs/DOM/window">window</a>. Cette méthode retourne un objet {{domxref("IDBRequest")}}; Les opérations asynchrones communiquent avec l'application appelante en déclenchant des évènements sur les objets {{domxref("IDBRequest")}}.</p>
+
+<h3 id="Se_connecter_à_la_base_de_données">Se connecter à la base de données</h3>
+
+<dl>
+ <dt>{{domxref("IDBEnvironment")}}</dt>
+ <dd>Fournit un accès aux fonctionnalités d'IndexedDB. Implémenté par les objets {{domxref("window")}} et {{domxref("worker")}}.</dd>
+ <dt>{{domxref("IDBFactory")}}</dt>
+ <dd>Fournit un accès à la base de données.C'est l'interface implémentée par l'objet global <a href="/fr/docs/Web/API/IDBEnvironment.indexedDB"><code>indexedDB</code></a> et c'est donc le point d'entrée de l'API.</dd>
+ <dt>{{domxref("IDBOpenDBRequest")}}</dt>
+ <dd>Représente une requête d'ouverture de la base de données.</dd>
+ <dt>{{domxref("IDBDatabase")}}</dt>
+ <dd>Représente une connexion à la base de données. C'est le seul moyen d'obtenir une transaction sur la base de données.</dd>
+ <dt>
+ <h3 id="Récupérer_et_modifier_les_données">Récupérer et modifier les données</h3>
+ </dt>
+</dl>
+
+<dl>
+ <dt>{{domxref("IDBTransaction")}}</dt>
+ <dd>Représente une transaction. Vous créez une transaction sur la base de données, spécifiez la portée (comme à quel magasin d'objets vous souhaitez accèder), et déterminez le type d'accès désiré (lecture seule ou lecture et écriture).</dd>
+ <dt>{{domxref("IDBRequest")}}</dt>
+ <dd>Interface générique qui récupère les requêtes à la base de données et fournit un accès aux résultats.</dd>
+ <dt>{{domxref("IDBObjectStore")}}</dt>
+ <dd>Représente un magasin d'objets qui permet l'accès à un ensemble de données d'une base de données IndexedDB, recherché par clé primaire.</dd>
+ <dt>{{domxref("IDBIndex")}}</dt>
+ <dd>Permet aussi d'accèder à un sous-ensemble de données d'une base IndexedDB mais utilise un index pour récupérer les enregistrements, au lieu d'une clé primaire. C'est parfois plus rapide qu'un usage de {{domxref("IDBObjectStore")}}.</dd>
+ <dt>{{domxref("IDBCursor")}}</dt>
+ <dd>Itérateur sur les magasins d'objets et les index.</dd>
+ <dt>{{domxref("IDBCursorWithValue")}}</dt>
+ <dd>Itérateur sur les magasins d'objets et les index et retourne la valeur courante du curseur.</dd>
+ <dt>{{domxref("IDBKeyRange")}}</dt>
+ <dd>Définit une portée de valeurs qui peut être utilisée pour récupérer des données de la base de données dans une certaine portée.</dd>
+ <dt>{{domxref("IDBLocaleAwareKeyRange")}} {{Non-standard_inline}}</dt>
+ <dd>Définit une portée de valeurs qui peut être utilisée pour récupérer des données de la base de données dans une certaine portée, triées en fonction des règles de la localisation spécifiée pour un certain index (voir <a href="/fr/docs/Web/API/IDBObjectStore/createIndex#Parameters"><code>createIndex()</code>'s optionalParameters</a>).</dd>
+</dl>
+
+<h3 id="Interfaces_dévénements_personnalisés">Interfaces d'événements personnalisés</h3>
+
+<p>Cette spécification provoque des évènements avec les interfaces personnalisées suivantes:</p>
+
+<dl>
+ <dt>{{domxref("IDBVersionChangeEvent")}}</dt>
+ <dd><code>L'interface IDBVersionChangeEvent</code> indique que la version de la base de données à changé, résultat de la fonction de saisie d'un évènement  {{domxref("IDBOpenDBRequest.onupgradeneeded")}}.</dd>
+</dl>
+
+<h3 id="Interfaces_obsolètes">Interfaces obsolètes</h3>
+
+<p>Une précedente version des spécifications a défini ces interfaces, désormais supprimées. Elles sont toujours documentées dans le cas où vous avez besoin de mettre à jour du code déja écrit :</p>
+
+<dl>
+ <dt>{{domxref("IDBVersionChangeRequest")}} {{obsolete_inline}}</dt>
+ <dd>Représente une requête de changement de version de la base de données. Le moyen pour changer de version de la base de données a désormais changé (avec un appel de {{domxref("IDBFactory.open")}} sans aussi appeler {{domxref("IDBDatabase.setVersion")}}), et l'interface  {{domxref("IDBOpenDBRequest")}} a désormais la fonction de l'ancienne (supprimée) {{domxref("IDBVersionChangeRequest")}}.</dd>
+ <dt>{{domxref("IDBDatabaseException")}}  {{obsolete_inline}}</dt>
+ <dd>Représente une exception (erreur) qui peut survenir durant les opérations sur la base de données.</dd>
+ <dt>{{domxref("IDBTransactionSync")}} {{obsolete_inline}}</dt>
+ <dd>Version synchrone de {{domxref("IDBTransaction")}}.</dd>
+ <dt>{{domxref("IDBObjectStoreSync")}} {{obsolete_inline}}</dt>
+ <dd>Version synchrone de {{domxref("IDBObjectStore")}}.</dd>
+ <dt>{{domxref("IDBIndexSync")}} {{obsolete_inline}}</dt>
+ <dd>Version synchrone de  {{domxref("IDBIndex")}}.</dd>
+ <dt>{{domxref("IDBFactorySync")}} {{obsolete_inline}}</dt>
+ <dd>Version synchrone de {{domxref("IDBFactory")}}.</dd>
+ <dt>{{domxref("IDBEnvironmentSync")}} {{obsolete_inline}}</dt>
+ <dd>Version synchrone de {{domxref("IDBEnvironment")}}.</dd>
+ <dt>{{domxref("IDBDatabaseSync")}} {{obsolete_inline}}</dt>
+ <dd>Version synchrone de {{domxref("IDBDatabase")}}.</dd>
+ <dt>{{domxref("IDBCursorSync")}} {{obsolete_inline}}</dt>
+ <dd>Version synchrone de {{domxref("IDBCursor")}}.</dd>
+</dl>
+
+<h2 id="Example" name="Example">Exemples</h2>
+
+<ul>
+ <li><a class="external external-icon" href="http://marco-c.github.io/eLibri/">eLibri:</a> Une application puissante de bibliothèque et de lecteur de livres électroniques, écrit par Marco Castelluccio, gagnant du <em>DevDerby IndexedDB</em> de Mozilla.</li>
+ <li><a class="external external-icon" href="https://github.com/chrisdavidmills/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external external-icon" href="http://mdn.github.io/to-do-notifications/">voir la démonstration en ligne</a>): L'application de référence pour les exemples de la documentation.</li>
+ <li><a class="external external-icon" href="http://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/">Stocker des images et des fichiers dans IndexedDB</a></li>
+</ul>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">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('IndexedDB')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("IndexedDB 2")}}</td>
+   <td>{{Spec2("IndexedDB 2")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<div id="compat-desktop">
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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(23)}}{{property_prefix("webkit")}}<br>
+    {{CompatChrome(24)}} (unprefixed)<br>
+    {{CompatChrome(38)}} (prefixes deprecated)<br>
+    {{CompatChrome(57)}} (prefixes removed)</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("10.0")}} {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10</td>
+   <td>15</td>
+   <td>
+    <p>7.1, partial<br>
+     10</p>
+   </td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatVersionUnknown}} (unprefixed)<br>
+    {{CompatChrome(38)}} (prefixes deprecated)<br>
+    {{CompatChrome(57)}} (prefixes removed)</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("37.0")}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10</td>
+  </tr>
+  <tr>
+   <td>Available in privacy mode<sup>[3]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>IDBLocaleAwareKeyRange</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("43.0")}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</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>Fonctionnalité</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE/Edge Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}} (unprefixed)<br>
+    {{CompatChrome(38)}} (prefixes deprecated)<br>
+    {{CompatChrome(57)}} (prefixes removed)</td>
+   <td>{{CompatVersionUnknown}} (unprefixed)<br>
+    {{CompatChrome(38)}} (prefixes deprecated)<br>
+    {{CompatChrome(57)}} (prefixes removed)</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>{{CompatOpera(22)}}</td>
+   <td>8, partial<br>
+    10</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatVersionUnknown}} (unprefixed)<br>
+    {{CompatChrome(38)}} (prefixes deprecated)<br>
+    {{CompatChrome(57)}} (prefixes removed)</td>
+   <td>{{CompatVersionUnknown}} (unprefixed)<br>
+    {{CompatChrome(38)}} (prefixes deprecated)<br>
+    {{CompatChrome(57)}} (prefixes removed)</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10</td>
+  </tr>
+  <tr>
+   <td>Available in privacy mode<sup>[3]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>IDBLocaleAwareKeyRange</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("43.0")}}<sup>[2]</sup></td>
+   <td>2.5<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</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>{{CompatOpera(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+</div>
+</div>
+
+<ul>
+ <li>[1] {{domxref("IDBCursorWithValue")}} n'est pas disponible dans les workers jusqu'à Gecko 42.0 {{geckoRelease("42.0")}}.</li>
+ <li>[2] Cette fonctions est actuellement cachée — pour l'activer et l'experimenter, aller dans about:config et activer dom.indexedDB.experimental.</li>
+ <li>[3] AKA "Private Browsing Mode" (Firefox) et "Incognito" (Chrome).</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="external" href="https://localforage.github.io/localForage/">localForage</a>: Un <em>Polyfill</em> fournissant une syntaxe clé-valeurs simple pour un stockage côté client; il utilise IndexedDB en arrière plan, mais se retourne d'abord sur WebSQL puis sur localStorage pour les navigateurs qui ne supportent pas IndexedDB.</li>
+ <li><a class="external" href="http://www.dexie.org/">dexie.js</a> : Un <em>wrapper </em>pour IndexedDB qui permet un développement plus rapide avec une syntaxe simple.</li>
+ <li><a class="external" href="https://github.com/erikolson186/zangodb">ZangoDB </a>: Une interface MongoDB-like pour indexedDB qui <span id="result_box" lang="fr"><span>prend en charge la plupart des fonctionnalités familières de filtrage, projection, tri, mise à jour et agrégation de MongoDB.</span></span></li>
+ <li><a class="external" href="http://jsstore.net/">JsStore </a>: Un contenu indexedDB avec SQL comme syntaxe.</li>
+ <li><a class="external" href="https://github.com/mWater/minimongo">MiniMongo</a></li>
+ <li><a class="external" href="https://pouchdb.com">PouchDB</a></li>
+</ul>
diff --git a/files/fr/web/api/api_indexeddb/using_indexeddb/index.html b/files/fr/web/api/api_indexeddb/using_indexeddb/index.html
new file mode 100644
index 0000000000..a8df123888
--- /dev/null
+++ b/files/fr/web/api/api_indexeddb/using_indexeddb/index.html
@@ -0,0 +1,1337 @@
+---
+title: Utiliser IndexedDB
+slug: Web/API/API_IndexedDB/Using_IndexedDB
+tags:
+  - Avancé
+  - Base de données
+  - Guide
+  - IndexedDB
+  - Stockage
+  - Tutoriel
+translation_of: Web/API/IndexedDB_API/Using_IndexedDB
+---
+<p class="summary">IndexedDB est un moyen de stocker des données de manière persistante dans un navigateur. Cela vous laisse créer des applications web avec de riches possibilités de requêtes indépendamment de la disponibilité du réseau puisque vos applications peuvent fonctionner en ligne ou hors-ligne. </p>
+
+<h2 id="À_propos_de_ce_document">À propos de ce document</h2>
+
+<p>Ce tutoriel vous guide à travers l'utilisation de l'API asynchrone de IndexedDB. Si vous n'êtes pas familier avec le principe de IndexedDB, vous devriez d'abord lire <a href="/en/IndexedDB/Basic_Concepts_Behind_IndexedDB" title="en/IndexedDB/Basic Concepts Behind IndexedDB">les concepts basiques d'IndexedDB</a>.</p>
+
+<p>Pour la documentation de référence sur l'API d'IndexedDB, voyez l'article <a href="/en/IndexedDB" title="https://developer.mozilla.org/en/IndexedDB">IndexedDB</a> et ses sous-parties, qui détaille les types d'objets utilisés par IndexedDB, ainsi que les méthodes sur l'API asynchrone (l'API synchrone a été retirée de la spécification).</p>
+
+<h2 id="pattern" name="pattern">Modèle de base</h2>
+
+<p>Le modèle de base qu'IndexedDB utilise est le suivant :</p>
+
+<ol>
+ <li>Ouvrir une base de données.</li>
+ <li>Créer un objet de stockage dans la base de données. </li>
+ <li>Démarrer une transaction, et faire des requêtes pour faire quelques opérations sur des bases de données, comme ajouter, ou récupérer des données.</li>
+ <li>
+  <div>Attendre que l'exécution soit terminée, en écoutant le bon type d'événement DOM.</div>
+ </li>
+ <li>
+  <div>Faire quelque chose avec les résultats (qui peuvent être trouvés dans l'objet de la requête).</div>
+ </li>
+</ol>
+
+<p>Maintenant que nous avons ces grands concepts en poche, nous pouvons voir des choses plus concrètes.</p>
+
+<h2 id="open" name="open">Créer et structurer l'objet de stockage</h2>
+
+<p><span id="result_box" lang="fr"><span>Étant donné que la spécification évolue encore, les implémentations actuelles de IndexedDB se cachent sous les préfixes du navigateur.</span> <span>Les fournisseurs de navigateurs peuvent avoir des implémentations différentes de l'API IndexedDB standard jusqu'à ce que la spécification se soit solidifiée.</span> <span>Mais une fois qu'un consensus est atteint sur la norme, les fournisseurs l'implémentent sans les balises de préfixe.</span> <span>Actuellement, certaines implémentations ont supprimé le préfixe : Internet Explorer 10, Firefox 16, Chrome 24. Lorsqu'ils utilisent un préfixe, les navigateurs basés sur Gecko utilisent le préfixe </span></span> <code>moz</code><span lang="fr"><span>, tandis que les navigateurs WebKit utilisent le préfixe </span></span> <code>webkit</code><span lang="fr"><span>.</span></span></p>
+
+<h3 id="Utiliser_une_version_expérimentale_dIndexedDB">Utiliser une version expérimentale d'IndexedDB</h3>
+
+<p>Au cas où vous souhaiteriez tester votre code dans des navigateurs qui utilisent toujours un préfixe, vous pouvez utiliser le code suivant :  </p>
+
+<pre class="brush: js">// Sur la ligne suivante, vous devez inclure les préfixes des implémentations que vous souhaitez tester.
+window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
+// N'UTILISEZ PAS "var indexedDB = ..." si vous n'êtes pas dans une fonction.
+// De plus, vous pourriez avoir besoin de réferences à des objets window.IDB*:
+window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
+window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange
+// (Mozilla n'a jamais préfixé ces objets, donc nous n'avons pas besoin de window.mozIDB*)</pre>
+
+<p>Faites attention aux implémentations qui utilisent un préfixe ; elles peuvent être boguées, incomplètes, voire suivre une ancienne version de la spécification. Il n'est donc pas recommandé d'utiliser en production. Il serait préférable de ne pas supporter ces navigateurs :</p>
+
+<pre class="brush: js">if (!window.indexedDB) {
+    window.alert("Votre navigateur ne supporte pas une version stable d'IndexedDB. Quelques fonctionnalités ne seront pas disponibles.")
+}
+</pre>
+
+<h3 id="Ouvrir_une_base_de_données">Ouvrir une base de données</h3>
+
+<p>On commence l'ensemble du processus comme ceci :</p>
+
+<pre class="brush: js">// Ouvrons notre première base
+var request = window.indexedDB.open("MyTestDatabase", 3);
+</pre>
+
+<p>Vous avez vu ? Ouvrir une base de données est comme n'importe quelle autre opération — vous avez juste à le "demander".</p>
+
+<p>La requête "open" n'ouvre pas la base de données ni ne démarre une transaction aussitôt. L'appel de la fonction <code>open()</code> retourne un objet <a href="/en-US/docs/IndexedDB/IDBOpenDBRequest" title="/en-US/docs/IndexedDB/IDBOpenDBRequest"><code>IDBOpenDBRequest</code></a> avec un résultat  (success) ou une valeur d'erreur qui permet de la gérer comme un évènement. La plupart des autres fonctions asynchrones dans IndexedDB fonctionnent de la même façon ; Elles retournent un objet <a href="/en-US/docs/IndexedDB/IDBRequest" title="/en-US/docs/IndexedDB/IDBRequest"><code style="font-size: 14px; color: rgb(51, 51, 51);">IDBRequest</code></a> avec le résultat ou une erreur. Le résultat de la fonction "open" est une instance de <code style="font-size: 14px; color: rgb(51, 51, 51);"><a href="/en-US/docs/IndexedDB/IDBDatabase" title="/en-US/docs/IndexedDB/IDBDatabase">IDBDatabase</a></code>.</p>
+
+<p>Le second paramètre de la méthode open est la version de la base de données. La version de la base détermine le schéma de celle-ci — Les objets stockés dans la base de données et leur structure. Si la base de données n'existe pas déjà, elle est créée via l'opération <code>open()</code>, puis, un événement <code>onupgradeneeded</code> est déclenché et vous créez le schéma de la base dans le gestionnaire pour cet événement. Si la base de données existe, mais que vous spécifiez un numéro de version plus élevé, un événement <code>onupgradeneeded</code> est déclenché  immédiatement, vous permettant de mettre à jour le schéma dans son gestionnaire – plus d'informations dans <a href="#Updating_the_version_of_the_database">Updating the version of the database</a> plus bas et la page référence {{ domxref("IDBFactory.open") }}.</p>
+
+<div class="warning">
+<p><strong>Important</strong>: Le numéro de version est un nombre "<code>unsigned long long</code>" <span id="result_box" lang="fr"><span>ce qui signifie qu'il peut s'agir d'un entier très grand</span></span>. Cela veut également dire que vous ne pouvez pas utiliser de réél, sinon, il sera converti au nombre entier le plus proche (inférieur) et la transaction peut ne pas démarrer ou ne pas déclencher l'événement <code>upgradeneeded</code>. Par exemple, n'utilisez pas 2.4 comme un numéro de version :<br>
+ <code>var request = indexedDB.open("MyTestDatabase", 2.4); // Ne faites pas ça, même si la version sera arrondie à 2</code></p>
+</div>
+
+<h4 id="Générer_des_gestionnaires">Générer des gestionnaires</h4>
+
+<p>La première chose que vous ferez avec la plupart des requêtes que vous générerez sera d'ajouter des gestionnaires de succès ou d'erreurs :</p>
+
+<pre class="brush: js">request.onerror = function(event) {
+  // Faire quelque chose avec request.errorCode !
+};
+request.onsuccess = function(event) {
+  // Faire quelque chose avec request.result !
+};</pre>
+
+<p>Laquelle de ces deux fonctions, <code>onsuccess()</code> or <code>onerror()</code>, sera appelée ? Si tout se passe bien, un évènement success (qui est un évènement DOM dont la propriété <code>type</code> est à <code>"success"</code>) est déclenché avec <code>request</code> comme cible. Une fois déclenché, la fonction <code>onsuccess()</code> de <code>request</code> est lancée avec l'évènement success comme argument. S’il y avait un quelconque problème, un évènement erreur (qui est un évènement DOM dont la propriété <code>type</code> est définie à <code>"error"</code>) est lancée dans <code>request</code>. Cela déclenche la fonction <code><code>onerror()</code></code> avec l'évènement d'erreur comme argument.</p>
+
+<p>L'API IndexedDB est conçue pour minimiser le recours à la gestion des erreurs, donc vous ne serez pas amené à voir beaucoup d'évènements erreurs (du moins, pas tant que vous utilisez l'API !). Cependant, dans le cas d'une ouverture de base de données, il y a quelques conditions qui génèrent des évènements d'erreurs. Le problème le plus courant est que l'utilisateur a décidé d'interdire l'accès à la création de base de données. Un des principaux objectifs d’IndexedDB est de permettre un stockage important de données pour l'utilisation hors-ligne. (Pour en savoir plus sur la capacité de stockage de chaque navigateur, voyez <a href="/en/IndexedDB#Storage_limits" title="https://developer.mozilla.org/en/IndexedDB#Storage_limits">Storage limits</a>).</p>
+
+<p>Évidemment, les navigateurs ne peuvent permettre qu'une publicité en ligne ou un site malicieux pollue votre ordinateur, donc ils informent l’utilisateur la première fois qu'une application web tente d'ouvrir un espace de stockage IndexedDB. L'utilisateur peut choisir de permettre ou refuser l'accès. En ce qui concerne l’utilisation d’IndexedDB en mode privé, les données restent en mémoire jusqu’à ce que la session privée soit close (Navigation privée pour Firefox et mode Incognito pour Chrome, mais dans Firefox, cela <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=781982">n'est pas encore implémenté</a> depuis novembre 2015, aussi vous ne pouvez pas utiliser IndexedDB dans le mode privé de Firefo du tout).</p>
+
+<p>Maintenant, en admettant qu’un utilisateur ait accepté la création d'une base, et que vous receviez un évènement "success" qui déclenche le callback <em>(rappel)</em> "success" ; que se passe-il après ? La requête a génèré un appel à <code>indexedDB.open()</code>, donc <code>request.result</code> est une instance de <code>IDBDatabase</code>, et vous voulez garder en mémoire cela pour plus tard. Votre code devrait ressembler à ceci :</p>
+
+<pre class="brush: js">var db;
+var request = indexedDB.open("MyTestDatabase");
+request.onerror = function(event) {
+  alert("Pourquoi ne permettez-vous pas à ma web app d'utiliser IndexedDB?!");
+};
+request.onsuccess = function(event) {
+  db = event.target.result;
+};
+</pre>
+
+<h4 id="Gérer_les_erreurs">Gérer les erreurs</h4>
+
+<p>Comme mentionné ci-dessus, les évènements d’erreur génèrent des info-bulles. Ils  sont rattachés à la requête qui a généré l’erreur, puis la bulle de l'évènement est transmis à la transaction, et enfin à l'objet de la base de données. Si vous souhaitez éviter d'ajouter un gestionnaire d'erreurs à chaque requête, vous pouvez en ajouter un unique à l'objet de la base de donnée, de cette manière :</p>
+
+<pre class="brush: js">db.onerror = function(event) {
+  // Gestionnaire d'erreur générique pour toutes les erreurs de requêtes de cette base
+  alert("Database error: " + event.target.errorCode);
+};
+</pre>
+
+<p>Une des erreurs courantes possibles lorsqu'on ouvre une base de données, c'est <code>VER_ERR</code>. Celle-ci indique que la version de la base de données stockée sur le disque est <em>supérieure </em>à la version que vous êtes en train d'essayer d'ouvrir. C'est un cas qui doit toujours être pris en considération par le gestionnaire d'erreurs.</p>
+
+<h3 id="Créer_ou_mettre_à_jour_une_version_de_base_de_données">Créer ou mettre à jour une version de base de données</h3>
+
+<p>Lorsque vous créez une nouvelle base de données, ou que vous augmentez le numéro de version d'une base existante (en spécifiant un numéro de version supérieur à celui que vous aviez auparavant, lors de {{ anch("Ouvrir une base de données") }}), l'évènement <code style="font-size: 14px; color: rgb(51, 51, 51);">onupgradeneeded</code><span style="line-height: 21px;"> sera déclenché et un objet </span><code><span style="line-height: 1.5;">IDBVersionChangeEvent</span></code> sera passé à un évènement <code>onversionchange</code> dans <code>request.result</code> (la variable <code>db</code> dans l'exemple). Dans le gestionnaire d’évènement <code>upgradeneeded</code>, vous devez créer les objets de stockage requis pour cette version de base :</p>
+
+<pre class="brush:js;  language-js"><code class="language-js"><span class="comment token">// Cet évènement est seulement implémenté dans des navigateurs récents
+</span>request<span class="punctuation token">.</span>onupgradeneeded <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> db <span class="operator token">=</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">;</span>
+
+ <span class="comment token"> // Crée un </span></code>objet de stockage<code class="language-js"><span class="comment token"> pour cette base de données
+</span>  <span class="keyword token">var</span> objectStore <span class="operator token">=</span> db<span class="punctuation token">.</span><span class="function token">createObjectStore<span class="punctuation token">(</span></span><span class="string token">"name"</span><span class="punctuation token">,</span> <span class="punctuation token">{</span> keyPath<span class="punctuation token">:</span> <span class="string token">"myKey"</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>Dans ce cas, la base de données disposera aussitôt des objets de stockage de la version précédente de la base, donc vous n’aurez pas à créer de nouveau ces objets de stockage. Vous aurez seulement besoin de créer de nouveaux objets de stockage, ou d'en supprimer de la version précédente si vous n'en avez plus besoin. Si vous avez besoin de changer un objet de stockage existant  (par exemple, pour changer la <code>keyPath</code>), alors vous devez supprimer l’ancien objet de stockage et le créer à nouveau avec les nouveaux paramètres. Notez que ceci supprimera les informations dans l'objet de stockage ! Si vous avez besoin de sauvegarder ces informations, vous devez les lire et les sauvegarder quelque part avant de mettre à jour la base de données.</p>
+
+<p>Essayer de créer un objet de stockage avec un nom déjà existant (ou essayer de supprimer un objet de stockage avec un nom qui n'existe pas encore) renverra une erreur. </p>
+
+<p>Si l'évènement <code>onupgradeneeded</code> quitte avec succès, le gestionnaire <code>onsuccess</code> de la requête d'ouverture de la base de données sera déclenché. </p>
+
+<p>Blink/Webkit supporte la version courante de la spécification, telle que livrée dans Chrome 23+ et Opera 17+ ; IE10+ également. Les autres implémentations plus anciennes ne prennent pas en charge <code>indexedDB.open(name, version).onupgradeneeded</code>. Pour plus d'informations sur la mise à jour de version de base de données sur les anciens Webkit/Blink, référez vous à <a href="https://developer.mozilla.org/en/IndexedDB/IDBDatabase#setVersion%28%29_.0A.0ADeprecated" title="https://developer.mozilla.org/en/IndexedDB/IDBDatabase#setVersion()_.0A.0ADeprecated">IDBDatabase reference article</a>.</p>
+
+<h3 id="Structurer_la_base_de_données">Structurer la base de données</h3>
+
+<p>Maintenant, structurons la base de données. IndexedDB utilise des objets de stockage plutôt que des tableaux, et une seule base de données peut contenir un nombre quelconque d'objets de stockage. Chaque fois qu'une valeur est stockée dans un objet de stockage, elle est associée à une clé. Il y a différentes manières pour une clé d'être définie, selon que l'objet de stockage utilise un <a href="/en/IndexedDB#gloss_key_path" title="https://developer.mozilla.org/en/IndexedDB#gloss_key_path">key path</a> <em>(chemin de clé)</em> ou un <a href="/en/IndexedDB#gloss_key_generator" title="en/IndexedDB#gloss key generator">key generator</a> <em>(générateur de clé)</em>.</p>
+
+<p>Le tableau suivant montre les différentes manières d'attribuer des clés.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Key Path <em>chemin de clé </em>(<code>keyPath</code>)</th>
+   <th scope="col">Key Generator <em>générateur de clé </em>(<code>autoIncrement</code>)</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Non</td>
+   <td>Non</td>
+   <td>L'objet de stockage peut contenir n'importe quel type de valeur, même des valeurs primitives comme des nombres ou des chaînes de caractères. Vous devez fournir un argument clé séparé chaque fois que vous souhaitez ajouter une nouvelle valeur.</td>
+  </tr>
+  <tr>
+   <td>Oui</td>
+   <td>Non</td>
+   <td>L'objet de stockage peut contenir des objets JavaScript. Les objets doivent avoir une propriété qui a le même nom que le key path.</td>
+  </tr>
+  <tr>
+   <td>Non</td>
+   <td>Oui</td>
+   <td>L'objet de stockage peut contenir n'importe quel type de valeur. La clé est générée pour vous automatiquement, ou vous pouvez fournir un argument  clé séparé si vous voulez utiliser une clé spécifique.</td>
+  </tr>
+  <tr>
+   <td>Oui</td>
+   <td>Oui</td>
+   <td>L'objet de stockage peut contenir des objets JavaScript. Normalement, une clé est générée, et sa valeur est stockée dans l'objet dans une propriété avec le même nom que le key path. Cependant, si une telle propriété existe, sa valeur est utilisée en tant que clé, plutôt que la génération d'une nouvelle clé.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Vous pouvez aussi créer des index sur un objet de stockage, à condition que l'objet de stockage contienne des objets, et non des primitives. Un index vous permet de consulter les valeurs stockées dans un objet de stockage en utilisant la valeur d'une propriété de l'objet stocké, plutôt que la clé de l'objet.</p>
+
+<p>En outre, les index ont la capacité d'appliquer des contraintes simples sur les données stockées. En paramétrant l'option <code>unique</code> lorsque l'on crée un index, ce dernier fait que deux objets ne peuvent être enregistrés en ayant la même valeur pour le chemin de clé de l'index. Par exemple, si vous avez un objet de stockage qui contient un ensemble de personnes, et que vous voulez vous assurer que deux personnes n’aient pas la même adresse de courriel, vous pouvez utiliser un index avec le paramètre <code>unique</code> à <code>true</code>.</p>
+
+<p>Cela peut sembler confus, mais ce simple exemple devrait illustrer ces concepts. D'abord, nous définissons quelques données client à utiliser dans notre exemple :</p>
+
+<pre class="brush: js  language-js"><code class="language-js"><span class="comment token">// Voici à quoi ressemblent nos données client.
+</span><span class="keyword token">const</span> customerData <span class="operator token">=</span> <span class="punctuation token">[</span>
+  <span class="punctuation token">{</span> ssn<span class="punctuation token">:</span> <span class="string token">"444-44-4444"</span><span class="punctuation token">,</span> name<span class="punctuation token">:</span> <span class="string token">"Bill"</span><span class="punctuation token">,</span> age<span class="punctuation token">:</span> <span class="number token">35</span><span class="punctuation token">,</span> email<span class="punctuation token">:</span> <span class="string token">"bill@company.com"</span> <span class="punctuation token">}</span><span class="punctuation token">,</span>
+  <span class="punctuation token">{</span> ssn<span class="punctuation token">:</span> <span class="string token">"555-55-5555"</span><span class="punctuation token">,</span> name<span class="punctuation token">:</span> <span class="string token">"Donna"</span><span class="punctuation token">,</span> age<span class="punctuation token">:</span> <span class="number token">32</span><span class="punctuation token">,</span> email<span class="punctuation token">:</span> <span class="string token">"donna@home.org"</span> <span class="punctuation token">}</span>
+<span class="punctuation token">]</span><span class="punctuation token">;</span></code></pre>
+
+<p>Bien sûr, vous n'utiliseriez pas le numéro de sécurité sociale comme clé primaire dans une table clients parce que tout le monde n'a pas de numéro de sécurité sociale, et vous pourriez stocker leur date de naissance au lieu de leur âge, mais laissons ces choix non pertinents pour des raisons de commodité et continuons.</p>
+
+<p>Maintenant, voyons la création d'une base de données pour stocker ces données :</p>
+
+<pre class="brush: js  language-js"><code class="language-js"><span class="keyword token">const</span> dbName <span class="operator token">=</span> <span class="string token">"the_name"</span><span class="punctuation token">;</span>
+
+<span class="keyword token">var</span> request <span class="operator token">=</span> indexedDB<span class="punctuation token">.</span><span class="function token">open<span class="punctuation token">(</span></span>dbName<span class="punctuation token">,</span> <span class="number token">2</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+request<span class="punctuation token">.</span>onerror <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+ <span class="comment token"> // Gestion des erreurs.
+</span><span class="punctuation token">}</span><span class="punctuation token">;</span>
+request<span class="punctuation token">.</span>onupgradeneeded <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> db <span class="operator token">=</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">;</span>
+
+ <span class="comment token"> // Créer un objet de stockage qui contient les informations de nos clients.
+</span> <span class="comment token"> // Nous allons utiliser "ssn" en tant que clé parce qu'il est garanti d'être
+</span> <span class="comment token"> // unique - du moins, c'est ce qu'on en disait au lancement.
+</span>  <span class="keyword token">var</span> objectStore <span class="operator token">=</span> db<span class="punctuation token">.</span><span class="function token">createObjectStore<span class="punctuation token">(</span></span><span class="string token">"customers"</span><span class="punctuation token">,</span> <span class="punctuation token">{</span> keyPath<span class="punctuation token">:</span> <span class="string token">"ssn"</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+ <span class="comment token"> // Créer un index pour rechercher les clients par leur nom. Nous pourrions
+</span> <span class="comment token"> // avoir des doublons (homonymes), alors on n'utilise pas d'index unique.
+</span>  objectStore<span class="punctuation token">.</span><span class="function token">createIndex<span class="punctuation token">(</span></span><span class="string token">"name"</span><span class="punctuation token">,</span> <span class="string token">"name"</span><span class="punctuation token">,</span> <span class="punctuation token">{</span> unique<span class="punctuation token">:</span> <span class="keyword token">false</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+ <span class="comment token"> // Créer un index pour rechercher les clients par leur adresse courriel. Nous voulons nous
+</span> <span class="comment token"> // assurer que deux clients n'auront pas la même, donc nous utilisons un index unique.
+</span>  objectStore<span class="punctuation token">.</span><span class="function token">createIndex<span class="punctuation token">(</span></span><span class="string token">"email"</span><span class="punctuation token">,</span> <span class="string token">"email"</span><span class="punctuation token">,</span> <span class="punctuation token">{</span> unique<span class="punctuation token">:</span> <span class="keyword token">true</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+ <span class="comment token"> // Utiliser la transaction "oncomplete" pour être sûr que la création de l'objet de stockage
+</span> <span class="comment token"> // est terminée avant d'ajouter des données dedans.
+</span>  objectStore<span class="punctuation token">.</span>transaction<span class="punctuation token">.</span>oncomplete <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+   <span class="comment token"> // Stocker les valeurs dans le nouvel objet de stockage.
+</span>    <span class="keyword token">var</span> customerObjectStore <span class="operator token">=</span> db<span class="punctuation token">.</span><span class="function token">transaction<span class="punctuation token">(</span></span><span class="string token">"customers"</span><span class="punctuation token">,</span> <span class="string token">"readwrite"</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">objectStore<span class="punctuation token">(</span></span><span class="string token">"customers"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="keyword token">in</span> customerData<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      customerObjectStore<span class="punctuation token">.</span><span class="function token">add<span class="punctuation token">(</span></span>customerData<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>
+
+<div>Comme indiqué précédemment, <code>onupgradeneeded</code> est le seul endroit où vous pouvez modifier la structure de la base de données. Dans cette méthode, vous pouvez créer et supprimer des objets de stockage, construire et supprimer des index.</div>
+
+<div></div>
+
+<p>Les objets de stockage sont créés avec un simple appel à <code>createObjectStore()</code>. La méthode prend le nom du stockage et un paramètre de type objet. Même si les paramètres sont optionnels, ils vous laissent définir d'importantes propriétés et redéfinir le type d'un objet de stockage que vous voulez créer. Dans notre cas, nous avons demandé un objet de stockage nommé "customers" et défini un <code>keyPath</code>, qui est la propriété rendant unique un objet individuel dans le stockage. Cette propriété dans l'exemple est "ssn" puisqu'un numéro de sécurité sociale est garanti unique. "ssn" doit être présent sur chaque objet stocké dans <code>objectStore</code>.</p>
+
+<p>Nous avons aussi demandé un index nommé "name" qui examine la propriété <code>name</code> dans les objets stockés. Comme avec<code> createObjectStore()</code>, <code>createIndex()</code> prend un paramètre de type objet facultatif (<code>options</code>) qui définit le type d’index à créer. Ajouter des objets qui n’auront pas de propriété <code>name</code> fonctionnera, mais ces objets n'apparaîtront pas dans l'index "name".</p>
+
+<p>Nous pouvons récupérer les objets client stockés, en utilisant directement leur <code>ssn</code> dans l'objet de stockage, ou en utilisant leur nom via l’index <code>name</code>. Pour en savoir plus sur ce fonctionnement, se référer à la section <a href="https://developer.mozilla.org/en/IndexedDB/Using_IndexedDB#Using_an_index" title="Using IndexedDB#Using an index">utiliser un index</a>.</p>
+
+<h3 id="Utiliser_le_générateur_de_clés">Utiliser le générateur de clés</h3>
+
+<p>Paramétrer un marqueur <code>autoIncrement</code> lorsque l'on crée un objet de stockage activera le générateur de clés pour cet objet de stockage. Par défault, ce marqueur n'est pas défini.</p>
+
+<p>Avec la générateur de clés, une clé sera générée automatiquement lorsque vous ajoutez une valeur dans un objet de stockage. Le compteur initial pour la génération de clés est toujours défini à 1 lorsque l'objet de stockage est créé pour la première fois. Fondamentalement, une nouvelle clé auto-générée sera incrémentée de 1 par rapport à la précédente. Le nombre courant d'un générateur de clé ne décroit jamais, à moins qu'un résultat d'opération sur la base soit annulé, par exemple, l'abandon d'une transaction sur la base. En conséquence, supprimer un enregistrement, voire l'ensemble des enregistrements d'un objet de stockage n'affecte jamais le générateur de clés d'un objet de stockage.</p>
+
+<p>Nous pouvons créer un autre objet de stockage avec un générateur de clés comme ci-dessous :</p>
+
+<pre class="brush: js  language-js"><code class="language-js"><span class="comment token">// Ouverture d'indexedDB.
+</span><span class="keyword token">var</span> request <span class="operator token">=</span> indexedDB<span class="punctuation token">.</span><span class="function token">open<span class="punctuation token">(</span></span>dbName<span class="punctuation token">,</span> <span class="number token">3</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+request<span class="punctuation token">.</span>onupgradeneeded <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+
+    <span class="keyword token">var</span> db <span class="operator token">=</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">;</span>
+
+   <span class="comment token"> // Création d'un autre objet appelé "names" avec l'option autoIncrement définie à true.
+</span>    <span class="keyword token">var</span> objStore <span class="operator token">=</span> db<span class="punctuation token">.</span><span class="function token">createObjectStore<span class="punctuation token">(</span></span><span class="string token">"names"</span><span class="punctuation token">,</span> <span class="punctuation token">{</span> autoIncrement <span class="punctuation token">:</span> <span class="keyword token">true</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+   <span class="comment token"> // Puisque l'objet "names" a un générateur de clés, la clé pour la valeur name est générée automatiquement.
+</span>   <span class="comment token"> // Les enregistrements ajoutés ressembleront à ceci :
+</span>   <span class="comment token"> // key : 1 =&gt; value : "Bill"
+</span>   <span class="comment token"> // key : 2 =&gt; value : "Donna"
+</span>    <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="keyword token">in</span> customerData<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        objStore<span class="punctuation token">.</span><span class="function token">add<span class="punctuation token">(</span></span>customerData<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>name<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>Pour plus de détails sur le générateur de clés, voyez <a href="http://www.w3.org/TR/IndexedDB/#key-generator-concept">"W3C Key Generators"</a>.</p>
+
+<h2 id="Ajouter_récupérer_et_supprimer_des_données">Ajouter, récupérer et supprimer des données</h2>
+
+<p>Avant de faire quoi que ce soit avec votre nouvelle base de données, vous aurez besoin de démarrer une transaction. Les transactions viennent de l'objet base de données, et vous devez spécifier sur quel objet vous souhaitez faire pointer la transaction. Une fois dans la transaction, vous pouvez accéder à l'objet de stockage qui contient vos données et faire vos requêtes. Puis, vous devez décider si vous allez appliquer des changements à la base de données, ou si vous avez juste besoin de la lire. Les transactions disposent de trois modes disponibles: <code>readonly</code> <em>(lecture seule)</em>, <code>readwrite</code> <em>(lecture/écriture)</em>, et <code>versionchange</code> <em>(changement de version)</em>.</p>
+
+<p>Pour changer le "schéma" ou la structure de la base de données — qui implique de créer ou supprimer des objets de stockage ou des index — la transaction doit être en mode <code>versionchange</code>. Cette transaction est ouverte en appelant la méthode {{domxref("IDBFactory.open")}}  avec une <code>version</code> spécifiée. (Dans les navigateurs WebKit, qui n'ont pas implémenté la dernière spécification, la méthode {{domxref("IDBFactory.open")}} prend seulement un paramètre, le <code>nom</code> de la base de données ; Vous devez donc appeler {{domxref("IDBVersionChangeRequest.setVersion")}} pour établir la transaction <code>versionchange</code>.)</p>
+
+<p>Pour lire les enregistrements d'un objet de stockage existant, la transaction peut être en mode <code>readonly</code>ou <code>readwrite</code>. Pour appliquer des changements à un objet de stockage existant, la transaction doit être en mode <code>readwrite</code>. Vous démarrez ces transactions avec {{domxref("IDBDatabase.transaction")}}. La méthode accepte deux paramètres : les <code>storeNames</code> (la portée, définie comme un tableau des objets de stockage auxquels vous souhaitez accéder) et le <code>mode</code> (<code>readonly</code> ou <code>readwrite</code>) pour la transaction. La méthode retourne un objet de transaction contenant la méthode {{domxref("IDBIndex.objectStore")}}, que vous utilisez pour accéder à votre objet de stockage. Par défaut, lorsqu'aucun mode n'est spécifié, les transactions démarrent en mode <code>readonly</code>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: À partir de Firefox 40, les transactions IndexedDB ont des garanties de durabilité relachées afin d'augmenter les performances (voir {{Bug("1112702")}}.) Auparavant, lors d'une transaction <code>readwrite</code> {{domxref("IDBTransaction.oncomplete")}} était déclenché seulement lorsque les données étaient garanties pour une écriture sur le disque. Dans Firefox 40+ l'évènement <code>complete</code> est déclenché une fois que l'OS a autorisé l'écriture de données, mais potentiellement avant que les données soient réellement écrites sur le disque. L'évènement <code>complete</code> peut ainsi être livré plus vite qu'avant, cependant, il existe un petit risque que l'ensemble de la transaction soit perdu si l'OS s'effondre ou si un problème électrique survient avant que les données soient écrites. Comme de tels évènements catastrophiques sont rares, la plupart des utilisateurs n'ont pas à s'en soucier. Si vous devez vous assurer de la durabilité pour quelconque raison que ce soit (par exemple, vous stockez des données critiques qui ne peuvent être recalculées plus tard) vous pouvez forcer une transaction à écrire sur le disque avant que l'évènement <code>complete</code> ne soit délivré en créant une transaction utilisant un mode expérimental (non-standard) <code>readwriteflush</code>  (se référer à {{domxref("IDBDatabase.transaction")}}.</p>
+</div>
+
+<p>Vous pouvez accélérer l'accès à vos données en utilisant le bon mode et la bonne portée dans la transaction. Voici deux astuces :</p>
+
+<ul>
+ <li>Lorsque vous définissez la portée, spécifiez uniquement les objets de stockage dont vous avez besoin. De cette manière, vous pouvez exécuter plusieurs transactions simultanément sans qu'elles se chevauchent.</li>
+ <li>Spécifier le mode <code>readwrite</code> pour une transaction seulement lorsque c'est nécessaire. Vous pouvez exécuter simulaténement plusieurs transactions <code>readonly</code> avec chevauchements, mais vous ne pouvez avoir qu'une seule transaction <code>readwrite</code> dans un objet de stockage. Pour en savoir plus, regardez la définition des <dfn><a href="https://developer.mozilla.org/en-US/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB#Database">transactions</a></dfn> dans l'article des <a href="https://developer.mozilla.org/en-US/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB">concepts de base</a>.</li>
+</ul>
+
+<h3 id="Ajouter_des_données_dans_la_base_de_données">Ajouter des données dans la base de données</h3>
+
+<p>Si vous venez juste de créer une base de données, alors vous souhaitez probablement écrire dedans. Voici comment ça se passe :</p>
+
+<pre class="brush:js;  language-js"><code class="language-js"><span class="keyword token">var</span> transaction <span class="operator token">=</span> db<span class="punctuation token">.</span><span class="function token">transaction<span class="punctuation token">(</span></span><span class="punctuation token">[</span><span class="string token">"customers"</span><span class="punctuation token">]</span><span class="punctuation token">,</span> <span class="string token">"readwrite"</span><span class="punctuation token">)</span><span class="punctuation token">;</span><span class="comment token">
+// Note: Les anciennes implémentations utilisent la constante dépréciée IDBTransaction.READ_WRITE au lieu de "readwrite".
+</span><span class="comment token">// Au cas où vous souhaitiez mettre en oeuvre ces implémentations, vous pouvez écrire :
+</span><span class="comment token">// var transaction = db.transaction(["customers"], IDBTransaction.READ_WRITE);</span></code></pre>
+
+<p>La fonction <code>transaction()</code> prend deux arguments (bien que l'un d'eux soit facultatif) et retourne un objet transaction. Le premier argument est une liste d'objets de stockage que la transaction va traiter. Vous pouvez passer un tableau vide si vous voulez que la transaction traite l'ensemble des objets de stockage, mais ne le faites pas, parce que la spécification indique qu'un tableau vide devrait générer une InvalidAccessError. Si vous ne spécifiez rien pour le deuxième argument, vous démarrerez une transaction "read-only" <em>(lecture seule)</em> . Si vous souhaitez aussi écrire, vous devrez passer l'option <code>"readwrite"</code> <em>(lecture/écriture)</em>.</p>
+
+<p>Maintenant que vous avez une transaction, vous devez comprendre sa durée de vie. Les transactions sont étroitement liées à la boucle de l'évènement. Si vous établissez une transaction et si vous sortez de la boucle d'évènements sans l'utiliser, alors la transaction deviendra inactive. La seule manière de garder la transaction active est d'y insérer une requête. Lorsque la requête est terminée, vous obtenez un évènement DOM, et en supposant que la requête ait réussi, vous avez une autre opportunité d'étendre la transaction durant ce "callback" <em>(rappel)</em>. Si vous sortez de la boucle d'évènements sans étendre la transaction, alors elle devient inactive, etc… Tant qu'il reste des demandes en attente, la transaction reste active. La durée de vie des transactions est vraiment très simple, mais cela peut prendre un peu de temps de la maîtriser. Quelques exemples supplémentaires aideront. Si vous commencez à voir des codes d'erreur <code>TRANSACTION_INACTIVE_ERR</code>, alors vous avez raté quelque chose.</p>
+
+<p>Les transactions peuvent recevoir des évènements DOM de trois types : <code>error</code> <em>(erreur)</em>, <code>abort</code> <em>(abandonnée)</em> et <code>complete</code> <em>(terminée)</em>. Nous avons déjà parlé du fait que les <code>error</code> créent des bulles, ainsi une transaction peut recevoir des évènements d'erreur venant de n'importe quelle requête l'ayant généré. Un point plus subtil ici, c'est que le comportement par défaut d'une erreur est d'abandonner la transaction là où elle a eu lieu. A moins que vous gériez l’erreur en appelant d'abord <code>stopPropagation()</code> sur l’évènement erreur, puis que vous fassiez quelque chose d'autre, la transaction complète sera annulée. Cette conception vous oblige à réfléchir et gérer les erreurs, mais vous pouvez toujours ajouter un gestionnaire d'erreurs "fourre-tout" à la base de données si la gestion d'erreurs fines est trop lourde. Si vous ne gérez pas un évènement d'erreur, ou si vous appelez <code>abort()</code> sur la transaction, alors la transaction est annulée et un évènement <code>abort</code> est lancé sur la transaction. Sinon, une fois que toutes les demandes en instance sont terminées, vous recevez un évènement <code>complete</code>. Si vous faites beaucoup d'opérations sur les bases de données, alors suivre la transaction plutôt que les requêtes individuelles, peut certainement vous aider.</p>
+
+<p>Maintenant que vous avons une transaction, nous avons besoin de récupérer l'objet de stockage de celle-ci. Les transactions vous permettent seulement d'avoir l'objet de stockage que vous avez spécifié lors de la création de la transaction. Puis, vous pouvez ajouter toutes les données dont vous avez besoin.</p>
+
+<pre class="brush: js  language-js"><code class="language-js"><span class="comment token">// Faire quelque chose lorsque toutes les données sont ajoutées à la base de données.
+</span>transaction<span class="punctuation token">.</span>oncomplete <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="function token">alert<span class="punctuation token">(</span></span><span class="string token">"All done!"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span>
+
+transaction<span class="punctuation token">.</span>onerror <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+ <span class="comment token"> // N'oubliez pas de gérer les erreurs !
+</span><span class="punctuation token">}</span><span class="punctuation token">;</span>
+
+<span class="keyword token">var</span> objectStore <span class="operator token">=</span> transaction<span class="punctuation token">.</span><span class="function token">objectStore<span class="punctuation token">(</span></span><span class="string token">"customers"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="keyword token">in</span> customerData<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> request <span class="operator token">=</span> objectStore<span class="punctuation token">.</span><span class="function token">add<span class="punctuation token">(</span></span>customerData<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  request<span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+   <span class="comment token"> // event.target.result == customerData[i].ssn;
+</span>  <span class="punctuation token">}</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<div>La méthode <code>result</code> d’une requête venant d'un appel à <code>add()</code> est la clé de la valeur qui vient d'être ajoutée. Dans ce cas, ce devrait être équivalent à la propriété <code>ssn</code> de l'objet qui vient d'être ajouté, puisque l'objet de stockage utilise la propriété <code>ssn</code> pour le key path. Notez que la fonction <code>add()</code> requiert qu'aucun objet déjà présent dans la base ait la même clé. Si vous essayez de modifier une entrée existante, ou si vous ne vous en occupez pas, vous pouvez utiliser la fonction <code>put()</code>, comme montré plus loin dans la section {{ anch("Updating an entry in the database") }}.</div>
+
+<div></div>
+
+<h3 id="Supprimer_des_données_dans_la_base_de_données">Supprimer des données dans la base de données</h3>
+
+<p>Supprimer des données est très similaire :</p>
+
+<pre class="brush: js  language-js"><code class="language-js"><span class="keyword token">var</span> request <span class="operator token">=</span> db<span class="punctuation token">.</span><span class="function token">transaction<span class="punctuation token">(</span></span><span class="punctuation token">[</span><span class="string token">"customers"</span><span class="punctuation token">]</span><span class="punctuation token">,</span> <span class="string token">"readwrite"</span><span class="punctuation token">)</span>
+                <span class="punctuation token">.</span><span class="function token">objectStore<span class="punctuation token">(</span></span><span class="string token">"customers"</span><span class="punctuation token">)</span>
+                <span class="punctuation token">.</span><span class="keyword token">delete</span><span class="punctuation token">(</span><span class="string token">"444-44-4444"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+request<span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+ <span class="comment token"> // c'est supprimé !
+</span><span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>
+
+<h3 id="Récupérer_des_données_de_la_base_de_données">Récupérer des données de la base de données</h3>
+
+<p>Maintenant que la base de données dispose de quelques informations, vous pouvez les récupérer de plusieurs façons. D'abord, la plus simple <code>get()</code>. Vous devez fournir une clé pour récupérer la valeur, comme ceci :</p>
+
+<pre class="brush: js  language-js"><code class="language-js"><span class="keyword token">var</span> transaction <span class="operator token">=</span> db<span class="punctuation token">.</span><span class="function token">transaction<span class="punctuation token">(</span></span><span class="punctuation token">[</span><span class="string token">"customers"</span><span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> objectStore <span class="operator token">=</span> transaction<span class="punctuation token">.</span><span class="function token">objectStore<span class="punctuation token">(</span></span><span class="string token">"customers"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> request <span class="operator token">=</span> objectStore<span class="punctuation token">.</span><span class="keyword token">get</span><span class="punctuation token">(</span><span class="string token">"444-44-4444"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+request<span class="punctuation token">.</span>onerror <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+ <span class="comment token"> // gestion des erreurs!
+</span><span class="punctuation token">}</span><span class="punctuation token">;</span>
+request<span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+ <span class="comment token"> // Faire quelque chose avec request.result !
+</span>  <span class="function token">alert<span class="punctuation token">(</span></span><span class="string token">"Name for SSN 444-44-4444 is "</span> <span class="operator token">+</span> request<span class="punctuation token">.</span>result<span class="punctuation token">.</span>name<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>
+
+<p>Ça fait beaucoup de code pour une "simple" récupération. Voici comment le raccourcir un peu, en supposant que vous gériez les erreurs au niveau de la base de données :</p>
+
+<pre class="brush: js  language-js"><code class="language-js">db<span class="punctuation token">.</span><span class="function token">transaction<span class="punctuation token">(</span></span><span class="string token">"customers"</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">objectStore<span class="punctuation token">(</span></span><span class="string token">"customers"</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="keyword token">get</span><span class="punctuation token">(</span><span class="string token">"444-44-4444"</span><span class="punctuation token">)</span><span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="function token">alert<span class="punctuation token">(</span></span><span class="string token">"Name for SSN 444-44-4444 is "</span> <span class="operator token">+</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">.</span>name<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>
+
+<div>Vous voyez comment ça fonctionne ? Comme il n'y a qu'un seul objet de stockage, vous pouvez éviter de passer une liste d'objets dont vous avez besoin dans votre transaction, et juste passer le nom comme une chaîne de caractères. Aussi, nous faisons seulement une lecture de la base, donc nous n'avons pas besoin d'une transaction <code>"readwrite"</code>. Appeler une <code>transaction()</code> sans spécifier de mode nous donne une transaction <code>"readonly"</code>. Une autre subtilité ici est que nous n'enregistrons pas l'objet de notre requête dans une variable. Comme l’évènement DOM a la requête comme cible, vous pouvez utiliser l'évènement pour récupérer la propriété <code>result</code>.</div>
+
+<div></div>
+
+<p>Vous pouvez accélérer l’accès à vos données  en limitant la portée et le mode de la transaction. Voici deux astuces :</p>
+
+<ul>
+ <li>Lors de la définition de la <a href="https://developer.mozilla.org/fr/docs/IndexedDB/Using_IndexedDB$edit#scope">scope</a> <em>(portée)</em>, spécifiez seulement l’objet de stockage dont vous avez besoin. De cette manière, vous pouvez avoir de multiples opérations simultanées sans qu’elles se chevauchent.</li>
+ <li>Spécifier une transaction en mode readwrite uniquement lorsque c’est nécessaire. Vous pouvez avoir de multiples opérations simultanées en lecture seule, mais vous ne pouvez avoir qu’une transaction "readwrite" <em>(lecture/écriture)</em> sur un objet de stockage. Pour en savoir plus, voir la définition relative aux <a href="https://developer.mozilla.org/en-US/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB#gloss_transaction">transactions in the Basic Concepts article</a>.</li>
+</ul>
+
+<h3 id="Mettre_à_jour_une_entrée_dans_la_base_de_données">Mettre à jour une entrée dans la base de données</h3>
+
+<p>Maintenant que nous avons récupéréré quelques données, les mettre à jour et en insérer est assez simple. Mettons à jour l’exemple précédent :</p>
+
+<pre class="brush: js  language-js"><code class="language-js"><span class="keyword token">var</span> objectStore <span class="operator token">=</span> db<span class="punctuation token">.</span><span class="function token">transaction<span class="punctuation token">(</span></span><span class="punctuation token">[</span><span class="string token">"customers"</span><span class="punctuation token">]</span><span class="punctuation token">,</span> <span class="string token">"readwrite"</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">objectStore<span class="punctuation token">(</span></span><span class="string token">"customers"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> request <span class="operator token">=</span> objectStore<span class="punctuation token">.</span><span class="keyword token">get</span><span class="punctuation token">(</span><span class="string token">"444-44-4444"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+request<span class="punctuation token">.</span>onerror <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+ <span class="comment token"> // Gestion des erreurs!
+</span><span class="punctuation token">}</span><span class="punctuation token">;</span>
+request<span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+ <span class="comment token"> // On récupère l'ancienne valeur que nous souhaitons mettre à jour
+</span>  <span class="keyword token">var</span> data <span class="operator token">=</span> request<span class="punctuation token">.</span>result<span class="punctuation token">;</span>
+
+ <span class="comment token"> // On met à jour ce(s) valeur(s) dans l'objet
+</span>  data<span class="punctuation token">.</span>age <span class="operator token">=</span> <span class="number token">42</span><span class="punctuation token">;</span>
+
+ <span class="comment token"> // Et on remet cet objet à jour dans la base
+</span>  <span class="keyword token">var</span> requestUpdate <span class="operator token">=</span> objectStore<span class="punctuation token">.</span><span class="function token">put<span class="punctuation token">(</span></span>data<span class="punctuation token">)</span><span class="punctuation token">;</span>
+   requestUpdate<span class="punctuation token">.</span>onerror <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="comment token"> // Faire quelque chose avec l’erreur
+</span>   <span class="punctuation token">}</span><span class="punctuation token">;</span>
+   requestUpdate<span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="comment token"> // Succès - la donnée est mise à jour !
+</span>   <span class="punctuation token">}</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>
+
+<div>Ici, nous avons créé une variable <code>objectStore</code> et nous avons recherché un enregistrement d’un client, identifié par la valeur ssn (<code>444-44-4444</code>). Nous avons ensuite mis le résultat dans une variable (<code>data</code>), mis à jour la propriété <code>age</code> de cet objet, puis créé une deuxième requête (<code>requestUpdate</code>) pour mettre l'enregistrement du client dans l'<code>objectStore</code>, en écrasant la valeur précédente.</div>
+
+<div class="note">
+<p><strong>Note</strong>: dans ce cas, nous avons eu à spécifier une transaction <code>readwrite</code> puisque nous voulions écrire dans la base, et pas seulement la lire.</p>
+</div>
+
+<h3 id="Utiliser_un_curseur">Utiliser un curseur</h3>
+
+<p>Utiliser <code>get()</code> nécessite de connaître la clé que vous souhaitez récupérer. Si vous voulez parcourir toutes les valeurs de l’objet de stockage, alors vous devez utiliser un curseur. Voici comment ça marche :</p>
+
+<pre class="brush: js  language-js"><code class="language-js"><span class="keyword token">var</span> objectStore <span class="operator token">=</span> db<span class="punctuation token">.</span><span class="function token">transaction<span class="punctuation token">(</span></span><span class="string token">"customers"</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">objectStore<span class="punctuation token">(</span></span><span class="string token">"customers"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+objectStore<span class="punctuation token">.</span><span class="function token">openCursor<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> cursor <span class="operator token">=</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">;</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span>cursor<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="function token">alert<span class="punctuation token">(</span></span><span class="string token">"Name for SSN "</span> <span class="operator token">+</span> cursor<span class="punctuation token">.</span>key <span class="operator token">+</span> <span class="string token">" is "</span> <span class="operator token">+</span> cursor<span class="punctuation token">.</span>value<span class="punctuation token">.</span>name<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    cursor<span class="punctuation token">.</span><span class="keyword token">continue</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+  <span class="keyword token">else</span> <span class="punctuation token">{</span>
+    <span class="function token">alert<span class="punctuation token">(</span></span><span class="string token">"No more entries!"</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>La fonction <code>openCursor()</code> prend en compte plusieurs arguments. En premier, vous pouvez spécifier une plage de résultats à récupérer en utilisant un objet  "key range" que nous allons voir dans une minute. En deuxième, vous pouvez spécifier la direction vers laquelle vous souhaitez itérer. Dans l’exemple ci-dessus, nous avons itéré tous les objets dans l’ordre ascendant. Le "callback" <em>(rappel)</em> de réussite pour les curseurs est un peu spécial. L'objet cursor lui-même est le <code>result</code> <em>(résutat)</em> de la requête (au-dessus, nous utilisons le raccourci <code>event.target.result</code>). Puis la clé et valeur courante peuvent être trouvées dans les propriétés <code>key</code><em>(clé)</em>  et <code>value</code> <em>(valeur)</em> de l’objet cursor. Si vous souhaitez continuer, vous devez appeler <code>continue()</code> sur le curseur. Lorsque vous avez atteint la fin des données (ou s’il n’y a plus d’entrées qui correspondent à votre requête <code>openCursor()</code> ) , vous aurez toujours votre callback  success, mais la propriété <code>result</code> sera <code>undefined</code>.</p>
+
+<p>Une utilisation classique avec les curseurs est de récupérer tous les objets dans un objet de stockage et de les mettre dans un tableau, comme ceci :</p>
+
+<pre class="brush: js  language-js"><code class="language-js"><span class="keyword token">var</span> customers <span class="operator token">=</span> <span class="punctuation token">[</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
+
+objectStore<span class="punctuation token">.</span><span class="function token">openCursor<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> cursor <span class="operator token">=</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">;</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span>cursor<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    customers<span class="punctuation token">.</span><span class="function token">push<span class="punctuation token">(</span></span>cursor<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    cursor<span class="punctuation token">.</span><span class="keyword token">continue</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+  <span class="keyword token">else</span> <span class="punctuation token">{</span>
+    <span class="function token">alert<span class="punctuation token">(</span></span><span class="string token">"Got all customers: "</span> <span class="operator token">+</span> customers<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>
+
+<div class="note">
+<p><strong>Note</strong>: Mozilla a aussi implémenté <code>getAll()</code> pour gérer ce cas (et <code>getAllKeys()</code>, <span class="short_text" id="result_box" lang="fr"><span>qui est actuellement caché derrière la préférence</span></span> <code>dom.indexedDB.experimental</code>  dans about:config) . ceux-ci ne font pas partie d' IndexedDB standard, et peuvent disparaître dans le futur. Nous les avons inclus partceque nous pensons qu'ils sont utiles. Le code suivant fait exactement la même chose que ci-dessus :</p>
+
+<pre class="brush: js  language-js"><code class="language-js">objectStore<span class="punctuation token">.</span><span class="function token">getAll<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="function token">alert<span class="punctuation token">(</span></span><span class="string token">"Got all customers: "</span> <span class="operator token">+</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>
+
+<p>Il y a un coût de performance associé avec la recherche de la propriété <code>value</code> du curseur, parce que l'objet est créé paresseusement. Quand vous utilisez <code>getAll()</code> par exemple, Gecko doit créer tous les objets à la fois. Si vous êtes seulement intéressé par la lecture de chaque clé, pour l'instance, il est beaucoup plus efficace d'utiliser un curseur que <code>getAll()</code>. <span id="result_box" lang="fr"><span>Si vous essayez d'obtenir un tableau de tous les objets d'un objet de stockage, utilisez</span></span> <code>getAll()</code>.</p>
+</div>
+
+<h3 id="Utiliser_un_index">Utiliser un index</h3>
+
+<p><span id="result_box" lang="fr"><span>Le stockage des données des clients utilisant le SSN comme clé est logique puisque le SSN identifie un individu unique.</span> <span>(Que ce soit une bonne idée pour la vie privée est une question différente, et en dehors du champ de cet article). Si vous devez rechercher un client par son nom, vous devrez toutefois faire itérer sur toutes les clés SSN dans la base de données jusqu'à ce que vous</span> <span>trouviez la bonne.</span> <span>La recherche de cette manière serait très lente, alors, vous pouvez utiliser un index.</span></span></p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="comment token">// D'abord, assurez-vous de créer un index dans request.onupgradeneeded:</span>
+<span class="comment token">// objectStore.createIndex("name", "name");</span>
+<span class="comment token">// Autrement, vous obtiendrez une DOMException.</span>
+
+<span class="keyword token">var</span> index <span class="operator token">=</span> objectStore<span class="punctuation token">.</span><span class="function token">index</span><span class="punctuation token">(</span><span class="string token">"name"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+index<span class="punctuation token">.</span><span class="keyword token">get</span><span class="punctuation token">(</span><span class="string token">"Donna"</span><span class="punctuation token">)</span><span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="function token">alert</span><span class="punctuation token">(</span><span class="string token">"Donna's SSN is "</span> <span class="operator token">+</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">.</span>ssn<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>
+
+<p>Le "name" du curseur n'est pas unique, <span class="short_text" id="result_box" lang="fr"><span>donc il pourrait y avoir plus d'une entrée avec le</span></span> <code>name</code> attribué à  <code>"Donna"</code>. <span id="result_box" lang="fr"><span>Dans ce cas, vous obtenez toujours celui qui a la valeur clé la plus basse</span></span> .</p>
+
+<p>Si vous avez besoin d'accèder à toutes les entrées avec un <code>name</code> donné, vous pouvez utiliser un curseur. Vous pouvez ouvrir deux types différents de curseurs sur les index. Un curseur normal situe la propriété index de l'objet dans l'objet de stockage. Un curseur de clés situe la propriété index des clés utilisées pour stocker l'objet dans l'objet de stockage. Les différences sont illustrées ici :</p>
+
+<pre class="brush: js  language-js"><code class="language-js"><span class="comment token">// Utilisation d'un curseur normal pour saisir tous les enregistrements des objets client
+</span>index<span class="punctuation token">.</span><span class="function token">openCursor<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> cursor <span class="operator token">=</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">;</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span>cursor<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+   <span class="comment token"> // cursor.key est un nom, comme "Bill", et cursor.value est l'objet entier.
+</span>    <span class="function token">alert<span class="punctuation token">(</span></span><span class="string token">"Name: "</span> <span class="operator token">+</span> cursor<span class="punctuation token">.</span>key <span class="operator token">+</span> <span class="string token">", SSN: "</span> <span class="operator token">+</span> cursor<span class="punctuation token">.</span>value<span class="punctuation token">.</span>ssn <span class="operator token">+</span> <span class="string token">", email: "</span> <span class="operator token">+</span> cursor<span class="punctuation token">.</span>value<span class="punctuation token">.</span>email<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    cursor<span class="punctuation token">.</span><span class="keyword token">continue</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span>
+<span class="comment token">
+// Utilisation d'un curseur de clés pour saisir les clés des enregistrements des objets client
+</span>index<span class="punctuation token">.</span><span class="function token">openKeyCursor<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> cursor <span class="operator token">=</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">;</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span>cursor<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+   <span class="comment token"> // cursor.key est un nom, comme "Bill", et cursor.value est le SSN.
+</span>   <span class="comment token"> // </span></code><span id="result_box" lang="fr"><span>Pas moyen d'obtenir directement le reste de l'objet stocké</span></span> <code class="language-js"><span class="comment token">.
+</span>    <span class="function token">alert<span class="punctuation token">(</span></span><span class="string token">"Name: "</span> <span class="operator token">+</span> cursor<span class="punctuation token">.</span>key <span class="operator token">+</span> <span class="string token">", SSN: "</span> <span class="operator token">+</span> cursor<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    cursor<span class="punctuation token">.</span><span class="keyword token">continue</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>
+
+<h3 id="Spécifier_lintervalle_et_la_direction_du_curseur">Spécifier l'intervalle et la direction du curseur</h3>
+
+<p>Si vous souhaitez limiter l'intervalle de valeurs que vous voyez dans un curseur, vous pouvez utiliser un objet <code>IDBKeyRange</code> et le donner comme premier argument à <code>openCursor()</code> ou <code>openKeyCursor()</code> . Vous pouvez créer un intervalle de clés qui n'autorise qu'une seule clé, ou qui a des limites inférieure et supérieure, ou qui a des bornes inférieure et supérieure. La limite peut être "closed" <em>(fermée)</em> (c'est-à-dire que l'intervalle de clés comprend les valeurs données) ou "open" <em>(ouverte)</em> (c'est-à-dire que la plage de clés n'inclut pas les valeurs données. Voici comment cela fonctionne :</p>
+
+<pre class="brush: js  language-js"><code class="language-js"><span class="comment token">// Correspond seulement à "Donna"
+</span><span class="keyword token">var</span> singleKeyRange <span class="operator token">=</span> IDBKeyRange<span class="punctuation token">.</span><span class="function token">only<span class="punctuation token">(</span></span><span class="string token">"Donna"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="comment token">
+// Correspond à n'importe quoi contenant "Bill", y compris "Bill"
+</span><span class="keyword token">var</span> lowerBoundKeyRange <span class="operator token">=</span> IDBKeyRange<span class="punctuation token">.</span><span class="function token">lowerBound<span class="punctuation token">(</span></span><span class="string token">"Bill"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="comment token">
+// Correspond à n'importe quoi contenant "Bill", mais pas "Bill"
+</span><span class="keyword token">var</span> lowerBoundOpenKeyRange <span class="operator token">=</span> IDBKeyRange<span class="punctuation token">.</span><span class="function token">lowerBound<span class="punctuation token">(</span></span><span class="string token">"Bill"</span><span class="punctuation token">,</span> <span class="keyword token">true</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="comment token">
+// Correspond à n'importe quoi, mais  "Donna" exclus.
+</span><span class="keyword token">var</span> upperBoundOpenKeyRange <span class="operator token">=</span> IDBKeyRange<span class="punctuation token">.</span><span class="function token">upperBound<span class="punctuation token">(</span></span><span class="string token">"Donna"</span><span class="punctuation token">,</span> <span class="keyword token">true</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="comment token">
+// Correspond à n'importe quoi compris entre "Bill" et "Donna", mais "Donna" exclus.
+</span><span class="keyword token">var</span> boundKeyRange <span class="operator token">=</span> IDBKeyRange<span class="punctuation token">.</span><span class="function token">bound<span class="punctuation token">(</span></span><span class="string token">"Bill"</span><span class="punctuation token">,</span> <span class="string token">"Donna"</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">,</span> <span class="keyword token">true</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="comment token">
+// Pour utiliser un des intervalles de clés, placez le en premier argument de openCursor()/openKeyCursor()
+</span>index<span class="punctuation token">.</span><span class="function token">openCursor<span class="punctuation token">(</span></span>boundKeyRange<span class="punctuation token">)</span><span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> cursor <span class="operator token">=</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">;</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span>cursor<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+   <span class="comment token"> // Faire quelque chose avec la sélection.
+</span>    cursor<span class="punctuation token">.</span><span class="keyword token">continue</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>Parfois, <span id="result_box" lang="fr"><span>vous voudrez peut-être itérer dans l'ordre décroissant plutôt que dans l'ordre croissant (la direction par défaut pour tous les curseurs).</span> <span>Le changement de direction est réalisé en passant</span></span> <code>prev</code> <span lang="fr"><span> à la fonction </span></span> <code>openCursor()</code> <span lang="fr"><span> antérieure comme second argument :</span></span></p>
+
+<pre class="brush: js  language-js"><code class="language-js">objectStore<span class="punctuation token">.</span><span class="function token">openCursor<span class="punctuation token">(</span></span>boundKeyRange<span class="punctuation token">,</span> <span class="string token">"prev"</span><span class="punctuation token">)</span><span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> cursor <span class="operator token">=</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">;</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span>cursor<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+   <span class="comment token"> // Faire quelque chose avec les entrées.
+</span>    cursor<span class="punctuation token">.</span><span class="keyword token">continue</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><span id="result_box" lang="fr"><span>Si vous souhaitez simplement spécifier un changement de direction, mais ne pas limiter les résultats, vous pouvez simplement passer "null" comme premier argument :</span></span></p>
+
+<pre class="brush: js  language-js"><code class="language-js">objectStore<span class="punctuation token">.</span><span class="function token">openCursor<span class="punctuation token">(</span></span><span class="keyword token">null</span><span class="punctuation token">,</span> <span class="string token">"prev"</span><span class="punctuation token">)</span><span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> cursor <span class="operator token">=</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">;</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span>cursor<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+   <span class="comment token"> // Faire quelque chose avec les entrées.
+</span>    cursor<span class="punctuation token">.</span><span class="keyword token">continue</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><span id="result_box" lang="fr"><span>Étant donné que l'index "</span></span>name<span lang="fr"><span>" n'est pas unique, il peut y avoir plusieurs entrées où le </span></span> <code>name</code> <span lang="fr"><span> est le même.</span> <span>Notez qu'une telle situation ne peut pas se produire avec les objets stockés car la clé doit toujours être unique.</span> <span>Si vous souhaitez filtrer les doublons pendant l'itération du curseur sur les index, vous pouvez passer </span></span> <code>nextunique</code> <span lang="fr"><span> (ou </span></span> <code>prevunique</code> <span lang="fr"><span> si vous revenez en arrière) comme paramètre de direction.</span> <span>Lorsque nextunique ou prevunique sont utilisés, l'entrée avec la clé la plus basse est toujours celle retournée.</span></span></p>
+
+<pre class="brush: js  language-js"><code class="language-js">index<span class="punctuation token">.</span><span class="function token">openKeyCursor<span class="punctuation token">(</span></span><span class="keyword token">null</span><span class="punctuation token">,</span> <span class="string token">"nextunique"</span><span class="punctuation token">)</span><span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> cursor <span class="operator token">=</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">;</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span>cursor<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+   <span class="comment token"> // Faire quelque chose avec les entrées.
+</span>    cursor<span class="punctuation token">.</span><span class="keyword token">continue</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>Voyez "<a href="https://developer.mozilla.org/en-US/docs/Web/API/IDBCursor?redirectlocale=en-US&amp;redirectslug=IndexedDB%2FIDBCursor#Constants">IDBCursor Constants</a>" <span class="short_text" id="result_box" lang="fr"><span>pour les arguments de direction valides</span></span>.</p>
+
+<h2 id="La_version_change_alors_quune_application_Web_est_ouverte_dans_un_autre_onglet"><span id="result_box" lang="fr"><span>La version change alors qu'une application Web est ouverte dans un autre onglet</span></span></h2>
+
+<p><span id="result_box" lang="fr"><span>Lorsque votre application Web change de telle sorte qu'une modification de version est nécessaire pour votre base de données, vous devez considérer ce qui se passe si l'utilisateur a l'ancienne version de votre application ouverte dans un onglet, puis charge la nouvelle version de votre application dans une autre</span> <span>.</span> <span>Lorsque vous appelez </span></span> <code>open()</code> <span lang="fr"><span> avec une version plus grande que la version actuelle de la base de données, toutes les autres bases de données ouvertes doivent reconnaître explicitement la demande avant de commencer à modifier la base de données (un événement </span></span> <code>onblocked</code>  <em>(bloqué)</em><span lang="fr"><span> est déclenché jusqu'à ce qu'elles soient fermées ou rechargées).</span> <span>Voici comment cela fonctionne :</span></span></p>
+
+<pre class="brush: js  language-js"><code class="language-js"><span class="keyword token">var</span> openReq <span class="operator token">=</span> mozIndexedDB<span class="punctuation token">.</span><span class="function token">open<span class="punctuation token">(</span></span><span class="string token">"MyTestDatabase"</span><span class="punctuation token">,</span> <span class="number token">2</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+openReq<span class="punctuation token">.</span>onblocked <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+ <span class="comment token"> // </span></code> <span id="result_box" lang="fr"><span>Si un autre onglet est chargé avec la base de données, il doit être fermé</span></span> <code class="language-js"><span class="comment token">
+</span> <span class="comment token"> // avant que nous puissions continuer.
+</span>  <span class="function token">alert<span class="punctuation token">(</span></span><span class="string token">"Veuillez fermer tous les ongles ouverts sur ce site!"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span>
+
+openReq<span class="punctuation token">.</span>onupgradeneeded <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+ <span class="comment token"> // Toutes les autres bases de données ont été fermées. Tout régler.
+</span>  db<span class="punctuation token">.</span><span class="function token">createObjectStore<span class="punctuation token">(</span></span><span class="comment token">/* ... */</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="function token">useDatabase<span class="punctuation token">(</span></span>db<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+openReq<span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> db <span class="operator token">=</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">;</span>
+  <span class="function token">useDatabase<span class="punctuation token">(</span></span>db<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">return</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="keyword token">function</span> <span class="function token">useDatabase<span class="punctuation token">(</span></span>db<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+ <span class="comment token"> // </span></code><span id="result_box" lang="fr"><span>Assurez-vous d'ajouter un gestionnaire pour être averti si une autre page demande</span></span> <code class="language-js"><span class="comment token">
+</span> <span class="comment token"> // un changement de version. Nous devons fermer la base de données. </span></code>
+<code class="language-js"><span class="comment token">  // </span></code><span lang="fr"><span>Cela permet à l'autre page de mettre à niveau la base de données.</span></span> <code class="language-js"><span class="comment token">
+</span> <span class="comment token"> // </span></code> <span id="result_box" lang="fr"><span>Si vous ne le faites pas, la mise à niveau ne se produira que lorsque l'utilisateur fermera l'onglet</span></span> <code class="language-js"><span class="comment token">.
+</span>  db<span class="punctuation token">.</span>onversionchange <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    db<span class="punctuation token">.</span><span class="function token">close<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="function token">alert<span class="punctuation token">(</span></span><span class="string token">"A new version of this page is ready. Please reload!"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span><span class="punctuation token">;</span>
+
+ <span class="comment token"> // </span></code> <span class="short_text" id="result_box" lang="fr"><span>Faire quelque chose avec la base de données</span></span> <code class="language-js"><span class="comment token">.
+</span><span class="punctuation token">}</span></code></pre>
+
+<p><span id="result_box" lang="fr"><span>Vous devriez également écouter les erreurs </span></span> <code>VersionError</code> <span lang="fr"><span> pour gérer le cas où les applications déjà ouvertes déclencheraient un code conduisant à une nouvelle tentative d'ouverture de la base de données, mais en utilisant une version désuète.</span></span></p>
+
+<h2 id="Sécurité">Sécurité</h2>
+
+<p><span id="result_box" lang="fr"><span>IndexedDB utilise le principe "</span></span> same-origin " <span lang="fr"><span><em>(même origine)</em>, ce qui signifie qu'il relie le stockage à l'origine du site qui le crée (généralement, c'est le domaine ou le sous-domaine du site), de sorte qu'il ne peut être consulté par aucune autre origine.</span></span></p>
+
+<p>Le contenu de la fenêtre de tiers (par exemple le contenu de {{htmlelement("iframe")}}) peut accèder à IndexedDB pour l'origine dans laquelle il est intégré, à moins que le navigateur ne soit configuré pour <a href="https://support.mozilla.org/en-US/kb/disable-third-party-cookies">ne jamais accepter de cookies tiers</a> (voir le {{bug("1147821")}}).</p>
+
+<h2 id="Avertissement_concernant_larrêt_du_navigateur"><span class="short_text" id="result_box" lang="fr"><span>Avertissement concernant l'arrêt du navigateur</span></span></h2>
+
+<p><span id="result_box" lang="fr"><span>Lorsque le navigateur s'arrête (parce que l'utilisateur a choisi l'option Quit ou Exit), le disque contenant la base de données est supprimé de manière inattendue ou les permissions sont perdues dans le magasin de base de données, les choses suivantes se produisent :</span></span></p>
+
+<ol>
+ <li><span id="result_box" lang="fr"><span>Chaque transaction sur chaque base de données affectée (ou toutes les bases de données ouvertes, dans le cas de l'arrêt du navigateur) est interrompue avec un </span></span> <code>AbortError</code>. L'effet est le même que si {{domxref("IDBTransaction.abort()")}} est appelé sur chaque transaction.</li>
+ <li><span id="result_box" lang="fr"><span>Une fois toutes les transactions terminées, la connexion à la base de données est fermée</span></span> .</li>
+ <li>Enfin, l'objet {{domxref("IDBDatabase")}} <span id="result_box" lang="fr"><span>représentant la connexion à la base de données reçoit un</span></span> évènement {{event("close")}} . Vous pouvez utiliser un gestionnaire d'évènements  {{domxref("IDBDatabase.onclose")}} pour écouter ces évènements, <span id="result_box" lang="fr"><span>afin de savoir quand une base de données est fermée de façon inattendue</span></span> .</li>
+</ol>
+
+<p><span id="result_box" lang="fr"><span>Le comportement décrit ci-dessus est nouveau et n'est disponible que pour les versions de navigateur suivantes : Firefox 50, Google Chrome 31 (approximativement).</span></span></p>
+
+<p><span id="result_box" lang="fr"><span>Avant ces versions de navigateurs, les transactions étaient interrompues silencieusement et aucun événement {{event ("close")}} n'était déclenché, donc il n'y avait aucun moyen de détecter une fermeture de base de données inattendue.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span>Étant donné que l'utilisateur peut quitter le navigateur à tout moment, cela signifie que vous ne pouvez pas compter sur une transaction particulière à compléter, et sur les navigateurs plus anciens, vous n'êtes même pas informé quand elles ne sont pas terminées.</span> <span>Il y a plusieurs conséquences à ce comportement.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span>Tout d'abord, vous devez vous occuper de toujours laisser votre base de données dans un état cohérent à la fin de chaque transaction.</span> <span>Par exemple, supposons que vous utilisiez IndexedDB pour stocker une liste d'éléments que l'utilisateur est autorisé à éditer.</span> <span>Vous enregistrez la liste après l'édition en effaçant l'objet de stockage puis en écrivant la nouvelle liste.</span> <span>Si vous effacez l'objet de stockage dans une transaction et que vous écrivez la nouvelle liste dans une autre transaction, il existe un danger : si le navigateur se ferme après l'effacement mais avant l'écriture, votre base de données est  vide.</span> <span>Pour éviter cela, vous devez combiner l'effacement et l'écriture en une seule transaction.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span>Ensuite, vous ne devez jamais lier les transactions de base de données pour les événements </span></span> unload <em>(déchargement</em>)<span lang="fr"><span>.</span> <span>Si l'événement </span></span> unload <span lang="fr"><span>est déclenché par la fermeture du navigateur, toutes les transactions créées dans le gestionnaire d'événements </span></span>unload<span lang="fr"><span> ne seront jamais terminées.</span> <span>Une approche intuitive, pour le maintien de certaines informations dans les sessions du navigateur, est de le lire à partir de la base de données, lorsque le navigateur (ou une page particulière) est ouvert, le mettre à jour à mesure que l'utilisateur interagit avec le navigateur, puis l'enregistrer dans la base de données lorsque le navigateur (</span> <span>ou page) se ferme.</span> <span>Cependant, cela ne fonctionne pas.</span> <span>Les transactions de la base de données sont créées dans le gestionnaire d'événements </span></span>unload<span lang="fr"><span>, mais comme elles sont asynchrones, elles sont interrompues avant qu'elles puissent s'exécuter.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span>En fait, il n'y a aucun moyen de garantir que les transactions IndexedDB seront terminées, même avec un arrêt normal du navigateur.</span> <span>Voir {{bug (870645)}}.</span> <span>Comme solution de rechange pour cette notification d'arrêt normal, vous pouvez suivre vos transactions et ajouter un événement </span></span> <code>beforeunload</code> <span lang="fr"><span> pour avertir l'utilisateur si des transactions ne sont pas encore terminées au moment du déchargement.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span>Au-moins, avec l'ajout des notifications d'annulation et {{domxref ("IDBDatabase.onclose")}}, vous pouvez savoir quand cela s'est produit.</span></span></p>
+
+<h2 id="Le_tri_et_les_langues">Le tri et les langues</h2>
+
+<p>Mozilla <span id="result_box" lang="fr"><span>a implémenté la capacité d'effectuer un tri des données IndexedDB localisées sur Firefox 43+.</span> <span>Par défaut, IndexedDB n'a pas pris en charge l'internationalisation des chaînes de tri, et était trié comme s'il s'agissait d'un texte anglais.</span> <span>Par exemple, "b", "á", "z", "a" devaient être triés comme suit :</span></span></p>
+
+<ul>
+ <li>a</li>
+ <li>b</li>
+ <li>z</li>
+ <li>á</li>
+</ul>
+
+<p><span id="result_box" lang="fr"><span>ce qui n'est évidemment pas la façon dont les utilisateurs souhaitent que leurs données soient triées - Aaron et Áaron, par exemple, doivent aller l'un à côté de l'autre dans une liste de contacts.</span> <span>L'obtention d'un tri international approprié exige donc que l'ensemble des données soit appelé dans la mémoire et que le tri soit exécuté par le JavaScript côté client, ce qui n'est pas très efficace.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span>Cette nouvelle fonctionnalité permet aux développeurs de spécifier une "locale" <em>(langue)</em> lors de la création d'un index en utilisant </span></span> {{domxref("IDBObjectStore.createIndex()")}} <span lang="fr"><span> (vérifiez ses paramètres). Dans ce cas, lorsqu'un curseur est utilisé pour itérer sur l'ensemble de données</span> <span>, et si vous souhaitez spécifier un tri local, vous pouvez utiliser un {{domxref ("IDBLocaleAwareKeyRange")}}.</span></span></p>
+
+<p>{{domxref("IDBIndex")}} <span id="result_box" lang="fr"><span>a également eu de nouvelles propriétés qui lui ont été ajoutées pour spécifier la langue :</span></span> <code>locale</code> (retourne la langue si elle est spécifiée, ou null sinon) et <code>isAutoLocale</code> (retourne <code>true</code><em> (vrai)</em> si l'index a été créé avec une "locale auto", <span id="result_box" lang="fr"><span>ce qui signifie que la langue par défaut de la plate-forme est utilisée,</span></span> sinon <code>false</code>).</p>
+
+<div class="note">
+<p><strong>Note </strong>: Cette fonctionnalité est couramment cachée derrière une marque (flag) — <span class="short_text" id="result_box" lang="fr"><span>pour l'activer et l'expérimenter, aller à</span></span> <a>about:config</a> et activez <code>dom.indexedDB.experimental</code>.</p>
+</div>
+
+<h2 id="Full_IndexedDB_example" name="Full_IndexedDB_example">Exemple complet d'IndexedDB</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html  language-html"><code class="language-html"><span class="script token"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/javascript<span class="punctuation token">"</span></span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span></span>
+
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>h1</span><span class="punctuation token">&gt;</span></span>IndexedDB Demo: storing blobs, e-publication example<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>h1</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>note<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>
+        Works and tested with:
+      <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>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>compat<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>msg<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>form</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>register-form<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>table</span><span class="punctuation token">&gt;</span></span>
+        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>tbody</span><span class="punctuation token">&gt;</span></span>
+          <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>tr</span><span class="punctuation token">&gt;</span></span>
+            <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>td</span><span class="punctuation token">&gt;</span></span>
+              <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pub-title<span class="punctuation token">"</span></span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>required<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+                Title:
+              <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</span><span class="punctuation token">&gt;</span></span>
+            <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>td</span><span class="punctuation token">&gt;</span></span>
+            <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>td</span><span class="punctuation token">&gt;</span></span>
+              <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pub-title<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pub-title<span class="punctuation token">"</span></span> <span class="punctuation token">/&gt;</span></span>
+            <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>td</span><span class="punctuation token">&gt;</span></span>
+          <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>tr</span><span class="punctuation token">&gt;</span></span>
+          <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>tr</span><span class="punctuation token">&gt;</span></span>
+            <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>td</span><span class="punctuation token">&gt;</span></span>
+              <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pub-biblioid<span class="punctuation token">"</span></span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>required<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+                Bibliographic ID:<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">/&gt;</span></span>
+                <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>span</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>note<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>(ISBN, ISSN, etc.)<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>span</span><span class="punctuation token">&gt;</span></span>
+              <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</span><span class="punctuation token">&gt;</span></span>
+            <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>td</span><span class="punctuation token">&gt;</span></span>
+            <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>td</span><span class="punctuation token">&gt;</span></span>
+              <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pub-biblioid<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pub-biblioid<span class="punctuation token">"</span></span><span class="punctuation token">/&gt;</span></span>
+            <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>td</span><span class="punctuation token">&gt;</span></span>
+          <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>tr</span><span class="punctuation token">&gt;</span></span>
+          <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>tr</span><span class="punctuation token">&gt;</span></span>
+            <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>td</span><span class="punctuation token">&gt;</span></span>
+              <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pub-year<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+                Year:
+              <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</span><span class="punctuation token">&gt;</span></span>
+            <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>td</span><span class="punctuation token">&gt;</span></span>
+            <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>td</span><span class="punctuation token">&gt;</span></span>
+              <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>number<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pub-year<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pub-year<span class="punctuation token">"</span></span> <span class="punctuation token">/&gt;</span></span>
+            <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>td</span><span class="punctuation token">&gt;</span></span>
+          <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>tr</span><span class="punctuation token">&gt;</span></span>
+        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>tbody</span><span class="punctuation token">&gt;</span></span>
+        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>tbody</span><span class="punctuation token">&gt;</span></span>
+          <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>tr</span><span class="punctuation token">&gt;</span></span>
+            <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>td</span><span class="punctuation token">&gt;</span></span>
+              <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pub-file<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+                File image:
+              <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</span><span class="punctuation token">&gt;</span></span>
+            <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>td</span><span class="punctuation token">&gt;</span></span>
+            <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>td</span><span class="punctuation token">&gt;</span></span>
+              <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>file<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pub-file<span class="punctuation token">"</span></span><span class="punctuation token">/&gt;</span></span>
+            <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>td</span><span class="punctuation token">&gt;</span></span>
+          <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>tr</span><span class="punctuation token">&gt;</span></span>
+          <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>tr</span><span class="punctuation token">&gt;</span></span>
+            <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>td</span><span class="punctuation token">&gt;</span></span>
+              <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pub-file-url<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+                Online-file image URL:<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">/&gt;</span></span>
+                <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>span</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>note<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>(same origin URL)<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>span</span><span class="punctuation token">&gt;</span></span>
+              <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</span><span class="punctuation token">&gt;</span></span>
+            <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>td</span><span class="punctuation token">&gt;</span></span>
+            <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>td</span><span class="punctuation token">&gt;</span></span>
+              <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pub-file-url<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pub-file-url<span class="punctuation token">"</span></span><span class="punctuation token">/&gt;</span></span>
+            <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>td</span><span class="punctuation token">&gt;</span></span>
+          <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>tr</span><span class="punctuation token">&gt;</span></span>
+        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>tbody</span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>table</span><span class="punctuation token">&gt;</span></span>
+
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button-pane<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>add-button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Add Publication<span class="punctuation token">"</span></span> <span class="punctuation token">/&gt;</span></span>
+        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>reset<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>register-form-reset<span class="punctuation token">"</span></span><span class="punctuation token">/&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>form</span><span class="punctuation token">&gt;</span></span>
+
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>form</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>delete-form<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>table</span><span class="punctuation token">&gt;</span></span>
+        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>tbody</span><span class="punctuation token">&gt;</span></span>
+          <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>tr</span><span class="punctuation token">&gt;</span></span>
+            <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>td</span><span class="punctuation token">&gt;</span></span>
+              <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pub-biblioid-to-delete<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+                Bibliographic ID:<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">/&gt;</span></span>
+                <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>span</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>note<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>(ISBN, ISSN, etc.)<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>span</span><span class="punctuation token">&gt;</span></span>
+              <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</span><span class="punctuation token">&gt;</span></span>
+            <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>td</span><span class="punctuation token">&gt;</span></span>
+            <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>td</span><span class="punctuation token">&gt;</span></span>
+              <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pub-biblioid-to-delete<span class="punctuation token">"</span></span>
+                     <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pub-biblioid-to-delete<span class="punctuation token">"</span></span> <span class="punctuation token">/&gt;</span></span>
+            <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>td</span><span class="punctuation token">&gt;</span></span>
+          <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>tr</span><span class="punctuation token">&gt;</span></span>
+          <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>tr</span><span class="punctuation token">&gt;</span></span>
+            <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>td</span><span class="punctuation token">&gt;</span></span>
+              <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>key-to-delete<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+                Key:<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">/&gt;</span></span>
+                <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>span</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>note<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>(for example 1, 2, 3, etc.)<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>span</span><span class="punctuation token">&gt;</span></span>
+              <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</span><span class="punctuation token">&gt;</span></span>
+            <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>td</span><span class="punctuation token">&gt;</span></span>
+            <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>td</span><span class="punctuation token">&gt;</span></span>
+              <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>key-to-delete<span class="punctuation token">"</span></span>
+                     <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>key-to-delete<span class="punctuation token">"</span></span> <span class="punctuation token">/&gt;</span></span>
+            <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>td</span><span class="punctuation token">&gt;</span></span>
+          <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>tr</span><span class="punctuation token">&gt;</span></span>
+        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>tbody</span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>table</span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button-pane<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>delete-button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Delete Publication<span class="punctuation token">"</span></span> <span class="punctuation token">/&gt;</span></span>
+        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>clear-store-button<span class="punctuation token">"</span></span>
+               <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Clear the whole store<span class="punctuation token">"</span></span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>destructive<span class="punctuation token">"</span></span> <span class="punctuation token">/&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>form</span><span class="punctuation token">&gt;</span></span>
+
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>form</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>search-form<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button-pane<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>search-list-button<span class="punctuation token">"</span></span>
+               <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>List database content<span class="punctuation token">"</span></span> <span class="punctuation token">/&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>form</span><span class="punctuation token">&gt;</span></span>
+
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pub-msg<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pub-viewer<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>ul</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pub-list<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>ul</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css  language-css"><code class="language-css"><span class="selector token">body </span><span class="punctuation token">{</span>
+  <span class="property token">font-size</span><span class="punctuation token">:</span> 0.8em<span class="punctuation token">;</span>
+  <span class="property token">font-family</span><span class="punctuation token">:</span> Sans-Serif<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token">form </span><span class="punctuation token">{</span>
+  <span class="property token">background-color</span><span class="punctuation token">:</span> #cccccc<span class="punctuation token">;</span>
+  <span class="property token">border-radius</span><span class="punctuation token">:</span> 0.3em<span class="punctuation token">;</span>
+  <span class="property token">display</span><span class="punctuation token">:</span> inline-block<span class="punctuation token">;</span>
+  <span class="property token">margin-bottom</span><span class="punctuation token">:</span> 0.5em<span class="punctuation token">;</span>
+  <span class="property token">padding</span><span class="punctuation token">:</span> 1em<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token">table </span><span class="punctuation token">{</span>
+  <span class="property token">border-collapse</span><span class="punctuation token">:</span> collapse<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token">input </span><span class="punctuation token">{</span>
+  <span class="property token">padding</span><span class="punctuation token">:</span> 0.3em<span class="punctuation token">;</span>
+  <span class="property token">border-color</span><span class="punctuation token">:</span> #cccccc<span class="punctuation token">;</span>
+  <span class="property token">border-radius</span><span class="punctuation token">:</span> 0.3em<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token">.required:after </span><span class="punctuation token">{</span>
+  <span class="property token">content</span><span class="punctuation token">:</span> <span class="string token">"*"</span><span class="punctuation token">;</span>
+  <span class="property token">color</span><span class="punctuation token">:</span> red<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token">.button-pane </span><span class="punctuation token">{</span>
+  <span class="property token">margin-top</span><span class="punctuation token">:</span> 1em<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token">#pub-viewer </span><span class="punctuation token">{</span>
+  <span class="property token">float</span><span class="punctuation token">:</span> right<span class="punctuation token">;</span>
+  <span class="property token">width</span><span class="punctuation token">:</span> 48%<span class="punctuation token">;</span>
+  <span class="property token">height</span><span class="punctuation token">:</span> 20em<span class="punctuation token">;</span>
+  <span class="property token">border</span><span class="punctuation token">:</span> solid #d092ff 0.1em<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+<span class="selector token">#pub-viewer iframe </span><span class="punctuation token">{</span>
+  <span class="property token">width</span><span class="punctuation token">:</span> 100%<span class="punctuation token">;</span>
+  <span class="property token">height</span><span class="punctuation token">:</span> 100%<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token">#pub-list </span><span class="punctuation token">{</span>
+  <span class="property token">width</span><span class="punctuation token">:</span> 46%<span class="punctuation token">;</span>
+  <span class="property token">background-color</span><span class="punctuation token">:</span> #eeeeee<span class="punctuation token">;</span>
+  <span class="property token">border-radius</span><span class="punctuation token">:</span> 0.3em<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+<span class="selector token">#pub-list li </span><span class="punctuation token">{</span>
+  <span class="property token">padding-top</span><span class="punctuation token">:</span> 0.5em<span class="punctuation token">;</span>
+  <span class="property token">padding-bottom</span><span class="punctuation token">:</span> 0.5em<span class="punctuation token">;</span>
+  <span class="property token">padding-right</span><span class="punctuation token">:</span> 0.5em<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token">#msg </span><span class="punctuation token">{</span>
+  <span class="property token">margin-bottom</span><span class="punctuation token">:</span> 1em<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token">.action-success </span><span class="punctuation token">{</span>
+  <span class="property token">padding</span><span class="punctuation token">:</span> 0.5em<span class="punctuation token">;</span>
+  <span class="property token">color</span><span class="punctuation token">:</span> #00d21e<span class="punctuation token">;</span>
+  <span class="property token">background-color</span><span class="punctuation token">:</span> #eeeeee<span class="punctuation token">;</span>
+  <span class="property token">border-radius</span><span class="punctuation token">:</span> 0.2em<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token">.action-failure </span><span class="punctuation token">{</span>
+  <span class="property token">padding</span><span class="punctuation token">:</span> 0.5em<span class="punctuation token">;</span>
+  <span class="property token">color</span><span class="punctuation token">:</span> #ff1408<span class="punctuation token">;</span>
+  <span class="property token">background-color</span><span class="punctuation token">:</span> #eeeeee<span class="punctuation token">;</span>
+  <span class="property token">border-radius</span><span class="punctuation token">:</span> 0.2em<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token">.note </span><span class="punctuation token">{</span>
+  <span class="property token">font-size</span><span class="punctuation token">:</span> smaller<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token">.destructive </span><span class="punctuation token">{</span>
+  <span class="property token">background-color</span><span class="punctuation token">:</span> orange<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+<span class="selector token">.destructive:hover </span><span class="punctuation token">{</span>
+  <span class="property token">background-color</span><span class="punctuation token">:</span> #ff8000<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+<span class="selector token">.destructive:active </span><span class="punctuation token">{</span>
+  <span class="property token">background-color</span><span class="punctuation token">:</span> red<span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js  language-js"><code class="language-js"><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="keyword token">var</span> COMPAT_ENVS <span class="operator token">=</span> <span class="punctuation token">[</span>
+    <span class="punctuation token">[</span><span class="string token">'Firefox'</span><span class="punctuation token">,</span> <span class="string token">"&gt;= 16.0"</span><span class="punctuation token">]</span><span class="punctuation token">,</span>
+    <span class="punctuation token">[</span><span class="string token">'Google Chrome'</span><span class="punctuation token">,</span>
+     <span class="string token">"&gt;= 24.0 (you may need to get Google Chrome Canary), NO Blob storage support"</span><span class="punctuation token">]</span>
+  <span class="punctuation token">]</span><span class="punctuation token">;</span>
+  <span class="keyword token">var</span> compat <span class="operator token">=</span> $<span class="punctuation token">(</span><span class="string token">'#compat'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  compat<span class="punctuation token">.</span><span class="function token">empty<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  compat<span class="punctuation token">.</span><span class="function token">append<span class="punctuation token">(</span></span><span class="string token">'&lt;ul id="compat-list"&gt;&lt;/ul&gt;'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  COMPAT_ENVS<span class="punctuation token">.</span><span class="function token">forEach<span class="punctuation token">(</span></span><span class="keyword token">function</span><span class="punctuation token">(</span>val<span class="punctuation token">,</span> idx<span class="punctuation token">,</span> array<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    $<span class="punctuation token">(</span><span class="string token">'#compat-list'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">append<span class="punctuation token">(</span></span><span class="string token">'&lt;li&gt;'</span> <span class="operator token">+</span> val<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span> <span class="operator token">+</span> <span class="string token">': '</span> <span class="operator token">+</span> val<span class="punctuation token">[</span><span class="number token">1</span><span class="punctuation token">]</span> <span class="operator token">+</span> <span class="string token">'&lt;/li&gt;'</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="keyword token">const</span> DB_NAME <span class="operator token">=</span> <span class="string token">'mdn-demo-indexeddb-epublications'</span><span class="punctuation token">;</span>
+  <span class="keyword token">const</span> DB_VERSION <span class="operator token">=</span> <span class="number token">1</span><span class="punctuation token">;</span><span class="comment token"> // </span></code> <span id="result_box" lang="fr"><span>Utilisez un "long long" pour cette valeur (ne pas utiliser un flottant (float))</span></span> <code class="language-js"><span class="comment token">
+</span>  <span class="keyword token">const</span> DB_STORE_NAME <span class="operator token">=</span> <span class="string token">'publications'</span><span class="punctuation token">;</span>
+
+  <span class="keyword token">var</span> db<span class="punctuation token">;</span>
+
+ <span class="comment token"> // </span></code> <span id="result_box" lang="fr"><span>Utilisé pour garder une trace de la vue affichée pour éviter de la recharger inutilement</span></span><code class="language-js"><span class="comment token">
+</span>  <span class="keyword token">var</span> current_view_pub_key<span class="punctuation token">;</span>
+
+  <span class="keyword token">function</span> <span class="function token">openDb<span class="punctuation token">(</span></span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"openDb ..."</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">var</span> req <span class="operator token">=</span> indexedDB<span class="punctuation token">.</span><span class="function token">open<span class="punctuation token">(</span></span>DB_NAME<span class="punctuation token">,</span> DB_VERSION<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    req<span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+     <span class="comment token"> // </span></code> <span id="result_box" lang="fr"><span>Le mieux utiliser "this" que "req" pour obtenir le résultat et éviter </span></span> <code class="language-js"><span class="comment token">
+</span>     <span class="comment token"> // </span></code><span id="result_box" lang="fr"><span>les problèmes avec "</span></span><code class="language-js"><span class="comment token">garbage collection".
+</span>     <span class="comment token"> // db = req.result;
+</span>      db <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">.</span>result<span class="punctuation token">;</span>
+      console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"openDb DONE"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span><span class="punctuation token">;</span>
+    req<span class="punctuation token">.</span>onerror <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      console<span class="punctuation token">.</span><span class="function token">error<span class="punctuation token">(</span></span><span class="string token">"openDb:"</span><span class="punctuation token">,</span> evt<span class="punctuation token">.</span>target<span class="punctuation token">.</span>errorCode<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span><span class="punctuation token">;</span>
+
+    req<span class="punctuation token">.</span>onupgradeneeded <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"openDb.onupgradeneeded"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="keyword token">var</span> store <span class="operator token">=</span> evt<span class="punctuation token">.</span>currentTarget<span class="punctuation token">.</span>result<span class="punctuation token">.</span><span class="function token">createObjectStore<span class="punctuation token">(</span></span>
+        DB_STORE_NAME<span class="punctuation token">,</span> <span class="punctuation token">{</span> keyPath<span class="punctuation token">:</span> <span class="string token">'id'</span><span class="punctuation token">,</span> autoIncrement<span class="punctuation token">:</span> <span class="keyword token">true</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+      store<span class="punctuation token">.</span><span class="function token">createIndex<span class="punctuation token">(</span></span><span class="string token">'biblioid'</span><span class="punctuation token">,</span> <span class="string token">'biblioid'</span><span class="punctuation token">,</span> <span class="punctuation token">{</span> unique<span class="punctuation token">:</span> <span class="keyword token">true</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      store<span class="punctuation token">.</span><span class="function token">createIndex<span class="punctuation token">(</span></span><span class="string token">'title'</span><span class="punctuation token">,</span> <span class="string token">'title'</span><span class="punctuation token">,</span> <span class="punctuation token">{</span> unique<span class="punctuation token">:</span> <span class="keyword token">false</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      store<span class="punctuation token">.</span><span class="function token">createIndex<span class="punctuation token">(</span></span><span class="string token">'year'</span><span class="punctuation token">,</span> <span class="string token">'year'</span><span class="punctuation token">,</span> <span class="punctuation token">{</span> unique<span class="punctuation token">:</span> <span class="keyword token">false</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+
+  <span class="comment token">/**
+   * @paramètre {string}<em>(chaîne de caractères)</em> store_name
+   * @paramètre {string}<em>(chaîne de caractères)</em> mode either "readonly" ou "readwrite"
+   */</span>
+  <span class="keyword token">function</span> <span class="function token">getObjectStore<span class="punctuation token">(</span></span>store_name<span class="punctuation token">,</span> mode<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">var</span> tx <span class="operator token">=</span> db<span class="punctuation token">.</span><span class="function token">transaction<span class="punctuation token">(</span></span>store_name<span class="punctuation token">,</span> mode<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">return</span> tx<span class="punctuation token">.</span><span class="function token">objectStore<span class="punctuation token">(</span></span>store_name<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">clearObjectStore<span class="punctuation token">(</span></span>store_name<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">var</span> store <span class="operator token">=</span> <span class="function token">getObjectStore<span class="punctuation token">(</span></span>DB_STORE_NAME<span class="punctuation token">,</span> <span class="string token">'readwrite'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">var</span> req <span class="operator token">=</span> store<span class="punctuation token">.</span><span class="function token">clear<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    req<span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="function token">displayActionSuccess<span class="punctuation token">(</span></span><span class="string token">"Store cleared"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="function token">displayPubList<span class="punctuation token">(</span></span>store<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span><span class="punctuation token">;</span>
+    req<span class="punctuation token">.</span>onerror <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      console<span class="punctuation token">.</span><span class="function token">error<span class="punctuation token">(</span></span><span class="string token">"clearObjectStore:"</span><span class="punctuation token">,</span> evt<span class="punctuation token">.</span>target<span class="punctuation token">.</span>errorCode<span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="function token">displayActionFailure<span class="punctuation token">(</span></span><span class="keyword token">this</span><span class="punctuation token">.</span>error<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="keyword token">function</span> <span class="function token">getBlob<span class="punctuation token">(</span></span>key<span class="punctuation token">,</span> store<span class="punctuation token">,</span> success_callback<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">var</span> req <span class="operator token">=</span> store<span class="punctuation token">.</span><span class="keyword token">get</span><span class="punctuation token">(</span>key<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    req<span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="keyword token">var</span> value <span class="operator token">=</span> evt<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">;</span>
+      <span class="keyword token">if</span> <span class="punctuation token">(</span>value<span class="punctuation token">)</span>
+        <span class="function token">success_callback<span class="punctuation token">(</span></span>value<span class="punctuation token">.</span>blob<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="comment token">/**
+   * @paramètre objet de stockage {IDBObjectStore=}
+   */</span>
+  <span class="keyword token">function</span> <span class="function token">displayPubList<span class="punctuation token">(</span></span>store<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"displayPubList"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+    <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="keyword token">typeof</span> store <span class="operator token">==</span> <span class="string token">'undefined'</span><span class="punctuation token">)</span>
+      store <span class="operator token">=</span> <span class="function token">getObjectStore<span class="punctuation token">(</span></span>DB_STORE_NAME<span class="punctuation token">,</span> <span class="string token">'readonly'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+    <span class="keyword token">var</span> pub_msg <span class="operator token">=</span> $<span class="punctuation token">(</span><span class="string token">'#pub-msg'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    pub_msg<span class="punctuation token">.</span><span class="function token">empty<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">var</span> pub_list <span class="operator token">=</span> $<span class="punctuation token">(</span><span class="string token">'#pub-list'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    pub_list<span class="punctuation token">.</span><span class="function token">empty<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+   <span class="comment token"> // </span></code> <span id="result_box" lang="fr"><span>Réinitialisation de l'iframe afin qu'il n'indique pas le contenu précédent</span></span> <code class="language-js"><span class="comment token">
+</span>    <span class="function token">newViewerFrame<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+    <span class="keyword token">var</span> req<span class="punctuation token">;</span>
+    req <span class="operator token">=</span> store<span class="punctuation token">.</span><span class="function token">count<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+   <span class="comment token"> // </span></code><span id="result_box" lang="fr"><span>Les requêtes sont exécutées dans l'ordre où elles ont été faites en-dehors de la</span></span> <code class="language-js"><span class="comment token">
+</span>   <span class="comment token"> // transaction, </span></code> <span id="result_box" lang="fr"><span>et leurs résultats sont retournés dans le même ordre.</span></span> <code class="language-js"><span class="comment token">
+</span>   <span class="comment token"> // </span></code><span id="result_box" lang="fr"><span>Ainsi, le texte du compteur ci-dessous sera affiché avant la liste de pub actuelle</span></span> <code class="language-js"><span class="comment token">
+</span>   <span class="comment token"> // </span></code><span id="result_box" lang="fr"><span>(ce n'est pas algorithmiquement important dans ce cas)</span></span> <code class="language-js"><span class="comment token">.
+</span>    req<span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      pub_msg<span class="punctuation token">.</span><span class="function token">append<span class="punctuation token">(</span></span><span class="string token">'&lt;p&gt;There are &lt;strong&gt;'</span> <span class="operator token">+</span> evt<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result <span class="operator token">+</span>
+                     <span class="string token">'&lt;/strong&gt; record(s) in the object store.&lt;/p&gt;'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span><span class="punctuation token">;</span>
+    req<span class="punctuation token">.</span>onerror <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      console<span class="punctuation token">.</span><span class="function token">error<span class="punctuation token">(</span></span><span class="string token">"add error"</span><span class="punctuation token">,</span> <span class="keyword token">this</span><span class="punctuation token">.</span>error<span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="function token">displayActionFailure<span class="punctuation token">(</span></span><span class="keyword token">this</span><span class="punctuation token">.</span>error<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span><span class="punctuation token">;</span>
+
+    <span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span>
+    req <span class="operator token">=</span> store<span class="punctuation token">.</span><span class="function token">openCursor<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    req<span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="keyword token">var</span> cursor <span class="operator token">=</span> evt<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">;</span>
+
+     <span class="comment token"> // </span></code> <span id="result_box" lang="fr"><span>Si le curseur pointe vers quelque chose, demandez les données</span></span> <code class="language-js"><span class="comment token">
+</span>      <span class="keyword token">if</span> <span class="punctuation token">(</span>cursor<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"displayPubList cursor:"</span><span class="punctuation token">,</span> cursor<span class="punctuation token">)</span><span class="punctuation token">;</span>
+        req <span class="operator token">=</span> store<span class="punctuation token">.</span><span class="keyword token">get</span><span class="punctuation token">(</span>cursor<span class="punctuation token">.</span>key<span class="punctuation token">)</span><span class="punctuation token">;</span>
+        req<span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+          <span class="keyword token">var</span> value <span class="operator token">=</span> evt<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">;</span>
+          <span class="keyword token">var</span> list_item <span class="operator token">=</span> $<span class="punctuation token">(</span><span class="string token">'&lt;li&gt;'</span> <span class="operator token">+</span>
+                            <span class="string token">'['</span> <span class="operator token">+</span> cursor<span class="punctuation token">.</span>key <span class="operator token">+</span> <span class="string token">'] '</span> <span class="operator token">+</span>
+                            <span class="string token">'(biblioid: '</span> <span class="operator token">+</span> value<span class="punctuation token">.</span>biblioid <span class="operator token">+</span> <span class="string token">') '</span> <span class="operator token">+</span>
+                            value<span class="punctuation token">.</span>title <span class="operator token">+</span>
+                            <span class="string token">'&lt;/li&gt;'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+          <span class="keyword token">if</span> <span class="punctuation token">(</span>value<span class="punctuation token">.</span>year <span class="operator token">!</span><span class="operator token">=</span> <span class="keyword token">null</span><span class="punctuation token">)</span>
+            list_item<span class="punctuation token">.</span><span class="function token">append<span class="punctuation token">(</span></span><span class="string token">' - '</span> <span class="operator token">+</span> value<span class="punctuation token">.</span>year<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+          <span class="keyword token">if</span> <span class="punctuation token">(</span>value<span class="punctuation token">.</span><span class="function token">hasOwnProperty<span class="punctuation token">(</span></span><span class="string token">'blob'</span><span class="punctuation token">)</span> <span class="operator token">&amp;&amp;</span>
+              <span class="keyword token">typeof</span> value<span class="punctuation token">.</span>blob <span class="operator token">!</span><span class="operator token">=</span> <span class="string token">'undefined'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+            <span class="keyword token">var</span> link <span class="operator token">=</span> $<span class="punctuation token">(</span><span class="string token">'&lt;a href="'</span> <span class="operator token">+</span> cursor<span class="punctuation token">.</span>key <span class="operator token">+</span> <span class="string token">'"&gt;File&lt;/a&gt;'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+            link<span class="punctuation token">.</span><span class="function token">on<span class="punctuation token">(</span></span><span class="string token">'click'</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="keyword token">return</span> <span class="keyword token">false</span><span class="punctuation token">;</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+            link<span class="punctuation token">.</span><span class="function token">on<span class="punctuation token">(</span></span><span class="string token">'mouseenter'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+                      <span class="function token">setInViewer<span class="punctuation token">(</span></span>evt<span class="punctuation token">.</span>target<span class="punctuation token">.</span><span class="function token">getAttribute<span class="punctuation token">(</span></span><span class="string token">'href'</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>
+            list_item<span class="punctuation token">.</span><span class="function token">append<span class="punctuation token">(</span></span><span class="string token">' / '</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+            list_item<span class="punctuation token">.</span><span class="function token">append<span class="punctuation token">(</span></span>link<span class="punctuation token">)</span><span class="punctuation token">;</span>
+          <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
+            list_item<span class="punctuation token">.</span><span class="function token">append<span class="punctuation token">(</span></span><span class="string token">" / No attached file"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+          <span class="punctuation token">}</span>
+          pub_list<span class="punctuation token">.</span><span class="function token">append<span class="punctuation token">(</span></span>list_item<span class="punctuation token">)</span><span class="punctuation token">;</span>
+        <span class="punctuation token">}</span><span class="punctuation token">;</span>
+
+       <span class="comment token"> // </span></code> <span class="short_text" id="result_box" lang="fr"><span>Passer à l'objet de stockage suivant</span></span><code class="language-js"><span class="comment token">
+</span>        cursor<span class="punctuation token">.</span><span class="keyword token">continue</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+       <span class="comment token"> // Ce compteur sert seulement à créer des identifiants distincts
+</span>        i<span class="operator token">++</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
+        console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"No more entries"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span>
+    <span class="punctuation token">}</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+
+  <span class="keyword token">function</span> <span class="function token">newViewerFrame<span class="punctuation token">(</span></span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">var</span> viewer <span class="operator token">=</span> $<span class="punctuation token">(</span><span class="string token">'#pub-viewer'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    viewer<span class="punctuation token">.</span><span class="function token">empty<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">var</span> iframe <span class="operator token">=</span> $<span class="punctuation token">(</span><span class="string token">'&lt;iframe /&gt;'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    viewer<span class="punctuation token">.</span><span class="function token">append<span class="punctuation token">(</span></span>iframe<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">return</span> iframe<span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+
+  <span class="keyword token">function</span> <span class="function token">setInViewer<span class="punctuation token">(</span></span>key<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"setInViewer:"</span><span class="punctuation token">,</span> arguments<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    key <span class="operator token">=</span> <span class="function token">Number<span class="punctuation token">(</span></span>key<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">if</span> <span class="punctuation token">(</span>key <span class="operator token">==</span> current_view_pub_key<span class="punctuation token">)</span>
+      <span class="keyword token">return</span><span class="punctuation token">;</span>
+
+    current_view_pub_key <span class="operator token">=</span> key<span class="punctuation token">;</span>
+
+    <span class="keyword token">var</span> store <span class="operator token">=</span> <span class="function token">getObjectStore<span class="punctuation token">(</span></span>DB_STORE_NAME<span class="punctuation token">,</span> <span class="string token">'readonly'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="function token">getBlob<span class="punctuation token">(</span></span>key<span class="punctuation token">,</span> store<span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span>blob<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"setInViewer blob:"</span><span class="punctuation token">,</span> blob<span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="keyword token">var</span> iframe <span class="operator token">=</span> <span class="function token">newViewerFrame<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+     <span class="comment token"> // </span></code><span id="result_box" lang="fr"><span>Il n'est pas possible de définir un lien direct vers</span></span> <code class="language-js"><span class="comment token">
+</span>     <span class="comment token"> // </span></code>le <span id="result_box" lang="fr"><span>blob pour fournir un moyen de le télécharger directement.</span></span> <code class="language-js"><span class="comment token">
+</span>      <span class="keyword token">if</span> <span class="punctuation token">(</span>blob<span class="punctuation token">.</span>type <span class="operator token">==</span> <span class="string token">'text/html'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        <span class="keyword token">var</span> reader <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">FileReader</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+        reader<span class="punctuation token">.</span>onload <span class="operator token">=</span> <span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+          <span class="keyword token">var</span> html <span class="operator token">=</span> evt<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">;</span>
+          iframe<span class="punctuation token">.</span><span class="function token">load<span class="punctuation token">(</span></span><span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+            $<span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">contents<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">find<span class="punctuation token">(</span></span><span class="string token">'html'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">html<span class="punctuation token">(</span></span>html<span class="punctuation token">)</span><span class="punctuation token">;</span>
+          <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+        <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+        reader<span class="punctuation token">.</span><span class="function token">readAsText<span class="punctuation token">(</span></span>blob<span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>blob<span class="punctuation token">.</span>type<span class="punctuation token">.</span><span class="function token">indexOf<span class="punctuation token">(</span></span><span class="string token">'image/'</span><span class="punctuation token">)</span> <span class="operator token">==</span> <span class="number token">0</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        iframe<span class="punctuation token">.</span><span class="function token">load<span class="punctuation token">(</span></span><span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+          <span class="keyword token">var</span> img_id <span class="operator token">=</span> <span class="string token">'image-'</span> <span class="operator token">+</span> key<span class="punctuation token">;</span>
+          <span class="keyword token">var</span> img <span class="operator token">=</span> $<span class="punctuation token">(</span><span class="string token">'&lt;img id="'</span> <span class="operator token">+</span> img_id <span class="operator token">+</span> <span class="string token">'"/&gt;'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+          $<span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">contents<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">find<span class="punctuation token">(</span></span><span class="string token">'body'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">html<span class="punctuation token">(</span></span>img<span class="punctuation token">)</span><span class="punctuation token">;</span>
+          <span class="keyword token">var</span> obj_url <span class="operator token">=</span> window<span class="punctuation token">.</span>URL<span class="punctuation token">.</span><span class="function token">createObjectURL<span class="punctuation token">(</span></span>blob<span class="punctuation token">)</span><span class="punctuation token">;</span>
+          $<span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">contents<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">find<span class="punctuation token">(</span></span><span class="string token">'#'</span> <span class="operator token">+</span> img_id<span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">attr<span class="punctuation token">(</span></span><span class="string token">'src'</span><span class="punctuation token">,</span> obj_url<span class="punctuation token">)</span><span class="punctuation token">;</span>
+          window<span class="punctuation token">.</span>URL<span class="punctuation token">.</span><span class="function token">revokeObjectURL<span class="punctuation token">(</span></span>obj_url<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="keyword token">else</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>blob<span class="punctuation token">.</span>type <span class="operator token">==</span> <span class="string token">'application/pdf'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        $<span class="punctuation token">(</span><span class="string token">'*'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">css<span class="punctuation token">(</span></span><span class="string token">'cursor'</span><span class="punctuation token">,</span> <span class="string token">'wait'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+        <span class="keyword token">var</span> obj_url <span class="operator token">=</span> window<span class="punctuation token">.</span>URL<span class="punctuation token">.</span><span class="function token">createObjectURL<span class="punctuation token">(</span></span>blob<span class="punctuation token">)</span><span class="punctuation token">;</span>
+        iframe<span class="punctuation token">.</span><span class="function token">load<span class="punctuation token">(</span></span><span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+          $<span class="punctuation token">(</span><span class="string token">'*'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">css<span class="punctuation token">(</span></span><span class="string token">'cursor'</span><span class="punctuation token">,</span> <span class="string token">'auto'</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>
+        iframe<span class="punctuation token">.</span><span class="function token">attr<span class="punctuation token">(</span></span><span class="string token">'src'</span><span class="punctuation token">,</span> obj_url<span class="punctuation token">)</span><span class="punctuation token">;</span>
+        window<span class="punctuation token">.</span>URL<span class="punctuation token">.</span><span class="function token">revokeObjectURL<span class="punctuation token">(</span></span>obj_url<span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
+        iframe<span class="punctuation token">.</span><span class="function token">load<span class="punctuation token">(</span></span><span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+          $<span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">contents<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">find<span class="punctuation token">(</span></span><span class="string token">'body'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">html<span class="punctuation token">(</span></span><span class="string token">"No view available"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+        <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span>
+
+    <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+
+  <span class="comment token">/**
+   * @paramètre {string} <em>(chaîne de caractères)</em> biblioid <em>(identifiant bibliothèque)</em>
+   * @paramètre {string} <em>(chaîne de caractères) </em>title <em>(titre)</em>
+   * @paramètre {number} <em>(nombre)</em> year <em>(année)</em>
+   * @paramètre {string} <em>(chaîne de caractères) </em>url : l'URL de l'image à télécharger et stocker sur le pc
+   *   IndexedDB database. La ressource derrière cette URL assujettie à
+   *   "Same origin policy", donc pour que cette méthode fonctionne, l'URL doit venir de
+   *   la même origine que le site web/l'application sur lequel le code est déployé.
+   */</span>
+  <span class="keyword token">function</span> <span class="function token">addPublicationFromUrl<span class="punctuation token">(</span></span>biblioid<span class="punctuation token">,</span> title<span class="punctuation token">,</span> year<span class="punctuation token">,</span> url<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"addPublicationFromUrl:"</span><span class="punctuation token">,</span> arguments<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+    <span class="keyword token">var</span> xhr <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">XMLHttpRequest</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    xhr<span class="punctuation token">.</span><span class="function token">open<span class="punctuation token">(</span></span><span class="string token">'GET'</span><span class="punctuation token">,</span> url<span class="punctuation token">,</span> <span class="keyword token">true</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+   <span class="comment token"> // </span></code> <span class="short_text" id="result_box" lang="fr"><span>Définir le type de réponse recherché à "blob<code>"</code></span></span> <code class="language-js"><span class="comment token">
+</span>   <span class="comment token"> // http://www.w3.org/TR/XMLHttpRequest2/#the-response-attribute
+</span>    xhr<span class="punctuation token">.</span>responseType <span class="operator token">=</span> <span class="string token">'blob'</span><span class="punctuation token">;</span>
+    xhr<span class="punctuation token">.</span>onload <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+                           <span class="keyword token">if</span> <span class="punctuation token">(</span>xhr<span class="punctuation token">.</span>status <span class="operator token">==</span> <span class="number token">200</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+                             console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"Blob retrieved"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+                             <span class="keyword token">var</span> blob <span class="operator token">=</span> xhr<span class="punctuation token">.</span>response<span class="punctuation token">;</span>
+                             console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"Blob:"</span><span class="punctuation token">,</span> blob<span class="punctuation token">)</span><span class="punctuation token">;</span>
+                             <span class="function token">addPublication<span class="punctuation token">(</span></span>biblioid<span class="punctuation token">,</span> title<span class="punctuation token">,</span> year<span class="punctuation token">,</span> blob<span class="punctuation token">)</span><span class="punctuation token">;</span>
+                           <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
+                             console<span class="punctuation token">.</span><span class="function token">error<span class="punctuation token">(</span></span><span class="string token">"addPublicationFromUrl error:"</span><span class="punctuation token">,</span>
+                                           xhr<span class="punctuation token">.</span>responseText<span class="punctuation token">,</span> xhr<span class="punctuation token">.</span>status<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>
+    xhr<span class="punctuation token">.</span><span class="function token">send<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+   <span class="comment token"> // </span></code><span id="result_box" lang="fr"><span>Nous ne pouvons pas utiliser jQuery ici car, à partir de jQuery 1.8.3<code>,</code> </span></span><code class="language-js"><span class="comment token">
+</span>   <span class="comment token"> // </span></code><span id="result_box" lang="fr"><span>le nouveau "blob"</span></span> <code class="language-js"><span class="comment token">responseType n'est pas géré.
+</span>   <span class="comment token"> // http://bugs.jquery.com/ticket/11461
+</span>   <span class="comment token"> // http://bugs.jquery.com/ticket/7248
+</span>   <span class="comment token"> // $.ajax({
+</span>   <span class="comment token"> //   url: url,
+</span>   <span class="comment token"> //   type: 'GET',
+</span>   <span class="comment token"> //   xhrFields: { responseType: 'blob' },
+</span>   <span class="comment token"> //   success: function(data, textStatus, jqXHR) {
+</span>   <span class="comment token"> //     console.log("Blob retrieved");
+</span>   <span class="comment token"> //     console.log("Blob:", data);
+</span>   <span class="comment token"> //     // addPublication(biblioid, title, year, data);
+</span>   <span class="comment token"> //   },
+</span>   <span class="comment token"> //   error: function(jqXHR, textStatus, errorThrown) {
+</span>   <span class="comment token"> //     console.error(errorThrown);
+</span>   <span class="comment token"> //     displayActionFailure("Error during blob retrieval");
+</span>   <span class="comment token"> //   }
+</span>   <span class="comment token"> // });
+</span>  <span class="punctuation token">}</span>
+
+  <span class="comment token">/**
+   * @paramètre {string} <em>(chaîne de caractères)</em> biblioid <em>(identifiant bibliothèque)</em>
+   * @paramètre {string} <em>(chaîne de caractères) </em>title <em>(titre)</em>
+   * @paramètre {number} <em>(nombre)</em> year <em>(année)</em>
+   * @paramètre {Blob=} blob
+   */</span>
+  <span class="keyword token">function</span> <span class="function token">addPublication<span class="punctuation token">(</span></span>biblioid<span class="punctuation token">,</span> title<span class="punctuation token">,</span> year<span class="punctuation token">,</span> blob<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"addPublication arguments:"</span><span class="punctuation token">,</span> arguments<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">var</span> obj <span class="operator token">=</span> <span class="punctuation token">{</span> biblioid<span class="punctuation token">:</span> biblioid<span class="punctuation token">,</span> title<span class="punctuation token">:</span> title<span class="punctuation token">,</span> year<span class="punctuation token">:</span> year <span class="punctuation token">}</span><span class="punctuation token">;</span>
+    <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="keyword token">typeof</span> blob <span class="operator token">!</span><span class="operator token">=</span> <span class="string token">'undefined'</span><span class="punctuation token">)</span>
+      obj<span class="punctuation token">.</span>blob <span class="operator token">=</span> blob<span class="punctuation token">;</span>
+
+    <span class="keyword token">var</span> store <span class="operator token">=</span> <span class="function token">getObjectStore<span class="punctuation token">(</span></span>DB_STORE_NAME<span class="punctuation token">,</span> <span class="string token">'readwrite'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">var</span> req<span class="punctuation token">;</span>
+    <span class="keyword token">try</span> <span class="punctuation token">{</span>
+      req <span class="operator token">=</span> store<span class="punctuation token">.</span><span class="function token">add<span class="punctuation token">(</span></span>obj<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span> <span class="keyword token">catch</span> <span class="punctuation token">(</span><span class="class-name token">e</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>name <span class="operator token">==</span> <span class="string token">'DataCloneError'</span><span class="punctuation token">)</span>
+        <span class="function token">displayActionFailure<span class="punctuation token">(</span></span><span class="string token">"This engine doesn't know how to clone a Blob, "</span> <span class="operator token">+</span>
+                             <span class="string token">"use Firefox"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="keyword token">throw</span> e<span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+    req<span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"Insertion in DB successful"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="function token">displayActionSuccess<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="function token">displayPubList<span class="punctuation token">(</span></span>store<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span><span class="punctuation token">;</span>
+    req<span class="punctuation token">.</span>onerror <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>
+      console<span class="punctuation token">.</span><span class="function token">error<span class="punctuation token">(</span></span><span class="string token">"addPublication error"</span><span class="punctuation token">,</span> <span class="keyword token">this</span><span class="punctuation token">.</span>error<span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="function token">displayActionFailure<span class="punctuation token">(</span></span><span class="keyword token">this</span><span class="punctuation token">.</span>error<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="comment token">/**
+   * @paramètre {string} <em>(chaîne de caractères)</em> biblioid <em>(identifiant bibliothèque)</em>
+   */</span>
+  <span class="keyword token">function</span> <span class="function token">deletePublicationFromBib<span class="punctuation token">(</span></span>biblioid<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"deletePublication:"</span><span class="punctuation token">,</span> arguments<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">var</span> store <span class="operator token">=</span> <span class="function token">getObjectStore<span class="punctuation token">(</span></span>DB_STORE_NAME<span class="punctuation token">,</span> <span class="string token">'readwrite'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">var</span> req <span class="operator token">=</span> store<span class="punctuation token">.</span><span class="function token">index<span class="punctuation token">(</span></span><span class="string token">'biblioid'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    req<span class="punctuation token">.</span><span class="keyword token">get</span><span class="punctuation token">(</span>biblioid<span class="punctuation token">)</span><span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="keyword token">typeof</span> evt<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result <span class="operator token">==</span> <span class="string token">'undefined'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        <span class="function token">displayActionFailure<span class="punctuation token">(</span></span><span class="string token">"No matching record found"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+        <span class="keyword token">return</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span>
+      <span class="function token">deletePublication<span class="punctuation token">(</span></span>evt<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">.</span>id<span class="punctuation token">,</span> store<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span><span class="punctuation token">;</span>
+    req<span class="punctuation token">.</span>onerror <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      console<span class="punctuation token">.</span><span class="function token">error<span class="punctuation token">(</span></span><span class="string token">"deletePublicationFromBib:"</span><span class="punctuation token">,</span> evt<span class="punctuation token">.</span>target<span class="punctuation token">.</span>errorCode<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="comment token">/**
+   * @paramètre {number} <em>(nombre)</em> key <em>(clé)</em>
+   * @paramètre {IDBObjectStore=} store <em>(objet de stockage)</em>
+   */</span>
+  <span class="keyword token">function</span> <span class="function token">deletePublication<span class="punctuation token">(</span></span>key<span class="punctuation token">,</span> store<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"deletePublication:"</span><span class="punctuation token">,</span> arguments<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+    <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="keyword token">typeof</span> store <span class="operator token">==</span> <span class="string token">'undefined'</span><span class="punctuation token">)</span>
+      store <span class="operator token">=</span> <span class="function token">getObjectStore<span class="punctuation token">(</span></span>DB_STORE_NAME<span class="punctuation token">,</span> <span class="string token">'readwrite'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+   <span class="comment token"> // Selon les spécifications http://www.w3.org/TR/IndexedDB/#object-store-deletion-operation
+</span>   <span class="comment token"> // le résultat de l'objet de stockage, l'algorithme de l'opération de suppression est
+</span>   <span class="comment token"> // "undefined" (<em>indéfini</em>), donc il n'est pas possible de savoir si certains enregistrements
+</span>   <span class="comment token"> // ont été effectivement supprimés en lisant le résultat de la requête.
+</span>    <span class="keyword token">var</span> req <span class="operator token">=</span> store<span class="punctuation token">.</span><span class="keyword token">get</span><span class="punctuation token">(</span>key<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    req<span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="keyword token">var</span> record <span class="operator token">=</span> evt<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">;</span>
+      console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"record:"</span><span class="punctuation token">,</span> record<span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="keyword token">typeof</span> record <span class="operator token">==</span> <span class="string token">'undefined'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        <span class="function token">displayActionFailure<span class="punctuation token">(</span></span><span class="string token">"No matching record found"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+        <span class="keyword token">return</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span>
+     <span class="comment token"> // Attention: </span></code> <span id="result_box" lang="fr"><span>La même clé utilisée pour la création doit être transmise pour</span></span> <code class="language-js"><span class="comment token">
+</span>     <span class="comment token"> // la suppression. </span></code> <span id="result_box" lang="fr"><span>Si la clé était un nombre pour la création, elle <code>doit</code></span></span><code class="language-js"><span class="comment token">
+</span>     <span class="comment token"> // être un nombre pour la suppression.
+</span>      req <span class="operator token">=</span> store<span class="punctuation token">.</span><span class="keyword token">delete</span><span class="punctuation token">(</span>key<span class="punctuation token">)</span><span class="punctuation token">;</span>
+      req<span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"evt:"</span><span class="punctuation token">,</span> evt<span class="punctuation token">)</span><span class="punctuation token">;</span>
+        console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"evt.target:"</span><span class="punctuation token">,</span> evt<span class="punctuation token">.</span>target<span class="punctuation token">)</span><span class="punctuation token">;</span>
+        console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"evt.target.result:"</span><span class="punctuation token">,</span> evt<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">)</span><span class="punctuation token">;</span>
+        console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"delete successful"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+        <span class="function token">displayActionSuccess<span class="punctuation token">(</span></span><span class="string token">"Deletion successful"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+        <span class="function token">displayPubList<span class="punctuation token">(</span></span>store<span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span><span class="punctuation token">;</span>
+      req<span class="punctuation token">.</span>onerror <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        console<span class="punctuation token">.</span><span class="function token">error<span class="punctuation token">(</span></span><span class="string token">"deletePublication:"</span><span class="punctuation token">,</span> evt<span class="punctuation token">.</span>target<span class="punctuation token">.</span>errorCode<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>
+    req<span class="punctuation token">.</span>onerror <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      console<span class="punctuation token">.</span><span class="function token">error<span class="punctuation token">(</span></span><span class="string token">"deletePublication:"</span><span class="punctuation token">,</span> evt<span class="punctuation token">.</span>target<span class="punctuation token">.</span>errorCode<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="keyword token">function</span> <span class="function token">displayActionSuccess<span class="punctuation token">(</span></span>msg<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    msg <span class="operator token">=</span> <span class="keyword token">typeof</span> msg <span class="operator token">!</span><span class="operator token">=</span> <span class="string token">'undefined'</span> <span class="operator token">?</span> <span class="string token">"Success: "</span> <span class="operator token">+</span> msg <span class="punctuation token">:</span> <span class="string token">"Success"</span><span class="punctuation token">;</span>
+    $<span class="punctuation token">(</span><span class="string token">'#msg'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">html<span class="punctuation token">(</span></span><span class="string token">'&lt;span class="action-success"&gt;'</span> <span class="operator token">+</span> msg <span class="operator token">+</span> <span class="string token">'&lt;/span&gt;'</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">displayActionFailure<span class="punctuation token">(</span></span>msg<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    msg <span class="operator token">=</span> <span class="keyword token">typeof</span> msg <span class="operator token">!</span><span class="operator token">=</span> <span class="string token">'undefined'</span> <span class="operator token">?</span> <span class="string token">"Failure: "</span> <span class="operator token">+</span> msg <span class="punctuation token">:</span> <span class="string token">"Failure"</span><span class="punctuation token">;</span>
+    $<span class="punctuation token">(</span><span class="string token">'#msg'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">html<span class="punctuation token">(</span></span><span class="string token">'&lt;span class="action-failure"&gt;'</span> <span class="operator token">+</span> msg <span class="operator token">+</span> <span class="string token">'&lt;/span&gt;'</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">resetActionStatus<span class="punctuation token">(</span></span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"resetActionStatus ..."</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    $<span class="punctuation token">(</span><span class="string token">'#msg'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">empty<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"resetActionStatus DONE"</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">addEventListeners<span class="punctuation token">(</span></span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"addEventListeners"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+    $<span class="punctuation token">(</span><span class="string token">'#register-form-reset'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">click<span class="punctuation token">(</span></span><span class="keyword token">function</span><span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="function token">resetActionStatus<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+    $<span class="punctuation token">(</span><span class="string token">'#add-button'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">click<span class="punctuation token">(</span></span><span class="keyword token">function</span><span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"add ..."</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="keyword token">var</span> title <span class="operator token">=</span> $<span class="punctuation token">(</span><span class="string token">'#pub-title'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">val<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="keyword token">var</span> biblioid <span class="operator token">=</span> $<span class="punctuation token">(</span><span class="string token">'#pub-biblioid'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">val<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span>title <span class="operator token">||</span> <span class="operator token">!</span>biblioid<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        <span class="function token">displayActionFailure<span class="punctuation token">(</span></span><span class="string token">"Required field(s) missing"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+        <span class="keyword token">return</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span>
+      <span class="keyword token">var</span> year <span class="operator token">=</span> $<span class="punctuation token">(</span><span class="string token">'#pub-year'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">val<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="keyword token">if</span> <span class="punctuation token">(</span>year <span class="operator token">!</span><span class="operator token">=</span> <span class="string token">''</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+       <span class="comment token"> // Le mieux est d'utiliser Number.isInteger si le moteur a EcmaScript 6
+</span>        <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="function token">isNaN<span class="punctuation token">(</span></span>year<span class="punctuation token">)</span><span class="punctuation token">)</span>  <span class="punctuation token">{</span>
+          <span class="function token">displayActionFailure<span class="punctuation token">(</span></span><span class="string token">"Invalid year"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+          <span class="keyword token">return</span><span class="punctuation token">;</span>
+        <span class="punctuation token">}</span>
+        year <span class="operator token">=</span> <span class="function token">Number<span class="punctuation token">(</span></span>year<span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
+        year <span class="operator token">=</span> <span class="keyword token">null</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span>
+
+      <span class="keyword token">var</span> file_input <span class="operator token">=</span> $<span class="punctuation token">(</span><span class="string token">'#pub-file'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="keyword token">var</span> selected_file <span class="operator token">=</span> file_input<span class="punctuation token">.</span><span class="keyword token">get</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">)</span><span class="punctuation token">.</span>files<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
+      console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"selected_file:"</span><span class="punctuation token">,</span> selected_file<span class="punctuation token">)</span><span class="punctuation token">;</span>
+     <span class="comment token"> // </span></code><span id="result_box" lang="fr"><span>Garder une référence sur la façon de réinitialiser l'entrée du fichier dans l'interface</span></span><code class="language-js"><span class="comment token">
+</span>     <span class="comment token"> // </span></code><span lang="fr"><span>utilisateur une fois que nous</span></span><code> avons sa valeur</code><code class="language-js"><span class="comment token">, mais au lieu de faire cela nous utiliserons
+</span>     <span class="comment token"> // plutôt un type "reset" entré dans le formulaire HTML .
+</span>     <span class="comment token"> // file_input.val(null);
+</span>      <span class="keyword token">var</span> file_url <span class="operator token">=</span> $<span class="punctuation token">(</span><span class="string token">'#pub-file-url'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">val<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="keyword token">if</span> <span class="punctuation token">(</span>selected_file<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        <span class="function token">addPublication<span class="punctuation token">(</span></span>biblioid<span class="punctuation token">,</span> title<span class="punctuation token">,</span> year<span class="punctuation token">,</span> selected_file<span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>file_url<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        <span class="function token">addPublicationFromUrl<span class="punctuation token">(</span></span>biblioid<span class="punctuation token">,</span> title<span class="punctuation token">,</span> year<span class="punctuation token">,</span> file_url<span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
+        <span class="function token">addPublication<span class="punctuation token">(</span></span>biblioid<span class="punctuation token">,</span> title<span class="punctuation token">,</span> year<span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span>
+
+    <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+    $<span class="punctuation token">(</span><span class="string token">'#delete-button'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">click<span class="punctuation token">(</span></span><span class="keyword token">function</span><span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"delete ..."</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="keyword token">var</span> biblioid <span class="operator token">=</span> $<span class="punctuation token">(</span><span class="string token">'#pub-biblioid-to-delete'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">val<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="keyword token">var</span> key <span class="operator token">=</span> $<span class="punctuation token">(</span><span class="string token">'#key-to-delete'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">val<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+      <span class="keyword token">if</span> <span class="punctuation token">(</span>biblioid <span class="operator token">!</span><span class="operator token">=</span> <span class="string token">''</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        <span class="function token">deletePublicationFromBib<span class="punctuation token">(</span></span>biblioid<span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>key <span class="operator token">!</span><span class="operator token">=</span> <span class="string token">''</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+       <span class="comment token"> // Le mieux est d'utiliser Number.isInteger si le moteur a EcmaScript 6
+</span>        <span class="keyword token">if</span> <span class="punctuation token">(</span>key <span class="operator token">==</span> <span class="string token">''</span> <span class="operator token">||</span> <span class="function token">isNaN<span class="punctuation token">(</span></span>key<span class="punctuation token">)</span><span class="punctuation token">)</span>  <span class="punctuation token">{</span>
+          <span class="function token">displayActionFailure<span class="punctuation token">(</span></span><span class="string token">"Invalid key"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+          <span class="keyword token">return</span><span class="punctuation token">;</span>
+        <span class="punctuation token">}</span>
+        key <span class="operator token">=</span> <span class="function token">Number<span class="punctuation token">(</span></span>key<span class="punctuation token">)</span><span class="punctuation token">;</span>
+        <span class="function token">deletePublication<span class="punctuation token">(</span></span>key<span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span>
+    <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+    $<span class="punctuation token">(</span><span class="string token">'#clear-store-button'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">click<span class="punctuation token">(</span></span><span class="keyword token">function</span><span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="function token">clearObjectStore<span class="punctuation token">(</span></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="keyword token">var</span> search_button <span class="operator token">=</span> $<span class="punctuation token">(</span><span class="string token">'#search-list-button'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    search_button<span class="punctuation token">.</span><span class="function token">click<span class="punctuation token">(</span></span><span class="keyword token">function</span><span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="function token">displayPubList<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="punctuation token">}</span>
+
+  <span class="function token">openDb<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="function token">addEventListeners<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span><span class="comment token"> // Immediately-Invoked Function Expression (IIFE)</span></code></pre>
+
+<p>{{ LiveSampleLink('Full_IndexedDB_example', "Test the online live demo") }}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p>Référence :</p>
+
+<ul>
+ <li><a href="/en/IndexedDB" title="https://developer.mozilla.org/en/IndexedDB">IndexedDB API Reference</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/IndexedDB/" title="http://www.w3.org/TR/IndexedDB/">Indexed Database API Specification</a></li>
+ <li><a href="/en-US/docs/IndexedDB/Using_IndexedDB_in_chrome" title="/en-US/docs/IndexedDB/Using_IndexedDB_in_chrome">Using IndexedDB in chrome</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_JavaScript_Generators_in_Firefox">Using JavaScript generators in Firefox</a></li>
+ <li>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">interface files</a> dans le code source de Firefox</li>
+</ul>
+
+<p>Tutoriels :</p>
+
+<ul>
+ <li><a href="http://www.html5rocks.com/en/tutorials/indexeddb/uidatabinding/" title="http://www.html5rocks.com/en/tutorials/indexeddb/uidatabinding/">Databinding UI Elements with IndexedDB</a></li>
+ <li><a class="external external-icon" href="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx" title="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx">IndexedDB — The Store in Your Browser</a></li>
+</ul>
+
+<p>Bibliothèques :</p>
+
+<ul>
+ <li><a href="http://mozilla.github.io/localForage/">localForage </a>: Un Polyfill <span id="result_box" lang="fr"><span>qui fournit un nom simple : la syntaxe de valeur pour le stockage de données côté client, qui utilise IndexedDB en arrière-plan, mais retourne à WebSQL puis à localStorage pour les navigateurs qui ne prennent pas en charge IndexedDB.</span></span></li>
+ <li><a href="http://www.dexie.org/">dexie.js </a>: <span id="result_box" lang="fr"><span>Une enveloppe pour IndexedDB qui permet un développement de code beaucoup plus rapide grâce à une syntaxe simple et agréable.</span></span></li>
+ <li><a href="https://github.com/erikolson186/zangodb">ZangoDB </a>: Un MongoDB-like interface pour IndexedDB <span id="result_box" lang="fr"><span>qui prend en charge la plupart des fonctionnalités familières de filtrage, projection, tri, mise à jour et agrégation de </span></span> MongoDB.</li>
+ <li><a href="http://jsstore.net/">JsStore</a> : <span id="result_box" lang="fr"><span>Une enveloppe d'IndexedDB simple et avancée ayant une syntaxe SQL.</span></span></li>
+</ul>
diff --git a/files/fr/web/api/attr/index.html b/files/fr/web/api/attr/index.html
new file mode 100644
index 0000000000..171e224254
--- /dev/null
+++ b/files/fr/web/api/attr/index.html
@@ -0,0 +1,217 @@
+---
+title: Attr
+slug: Web/API/Attr
+tags:
+  - API
+  - Attribut
+  - DOM
+translation_of: Web/API/Attr
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Ce type représente un attribut d'un élément DOM comme un objet. Dans la plupart des méthodes DOM, vous auriez probablement récupéré l'attribut directement comme une chaîne (par exemple, {{domxref ("element.getAttribute()")}}, mais certaines fonctions (par exemple, {{domxref ("element.getAttributeNode()" )}}) ou des moyens d'itération donnent des types Attr.</p>
+
+<div class="warning">
+<p><strong>Attention :</strong> À partir de Gecko 7.0 {{geckoRelease ("7.0")}}, ceux qui vont être retirés afficheront des messages d'avertissement dans la console. Vous devriez modifier votre code en conséquence. Voir {{anch("Propriétés et méthodes dépréciées")}} pour une liste complète.</p>
+</div>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("Attr.name", "name")}} {{readOnlyInline}}</dt>
+ <dd>Le nom de l'attribut.</dd>
+ <dt>{{domxref("Attr.namespaceURI", "namespaceURI")}} {{readOnlyInline}}</dt>
+ <dd>Une {{domxref("DOMString","Chaîne de caractères")}} <span id="result_box" lang="fr"><span>représentant l'URI de l'espace nom de l'attribut ou <code>null</code> s'il n'y a pas d'espace nom.</span></span></dd>
+ <dt>{{domxref("Attr.localName", "localName")}} {{readOnlyInline}}</dt>
+ <dd>Une {{domxref("DOMString","Chaîne de caractères")}} représentant <span class="short_text" id="result_box" lang="fr"><span>la partie locale du nom qualifié de l'attribut.</span></span></dd>
+ <dt>{{domxref("Attr.prefix", "prefix")}} {{readOnlyInline}}</dt>
+ <dd>Une {{domxref("DOMString","Chaîne de caractères")}} représentant <span id="result_box" lang="fr"><span> le préfixe de l'espace nom de l'attribut, ou <code>null</code> si aucun préfixe n'est spécifié.</span></span></dd>
+ <dt>{{domxref("Attr.ownerElement", "ownerElement")}} {{readOnlyInline}}</dt>
+ <dd>L'élément contenant l'attribut.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note :</strong> DOM Niveau 4 <span class="short_text" id="result_box" lang="fr"><span>a supprimé cette propriété</span></span> . <span id="result_box" lang="fr"><span>L'hypothèse était que puisque nous obtenons un objet Attr d'un</span></span> {{domxref("Element")}}, nous devrions déjà connaître les éléments associés.<br>
+ <span class="short_text" id="result_box" lang="fr"><span>Comme cela n'est pas vrai quand les objets</span></span> <code>Attr</code>  sont retournés par {{domxref("Document.evaluate")}}, <span class="short_text" id="result_box" lang="fr"><span>le DOM Living Standard a réintroduit la propriété.</span></span></p>
+
+<p><span class="short_text" id="result_box" lang="fr"><span>Gecko affiche une note de dépréciation à partir de</span></span> Gecko 7.0 {{geckoRelease("7.0")}}. Cette note a été supprimée dans Gecko 49.0 {{geckoRelease("49.0")}}.</p>
+</div>
+
+<dl>
+ <dt>{{domxref("Attr.specified", "specified")}} {{readOnlyInline}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Cette propriété renvoie toujours la valeur <code>true</code>.</span> <span>À l'origine, elle renvoyait true si l'attribut était explicitement spécifié dans le code source ou par un script, et <code>false</code> si sa valeur provenait de la valeur par défaut définie dans la DTD du document.</span></span></dd>
+ <dt>{{domxref("Attr.value", "Value")}}</dt>
+ <dd>La valeur de l'attribut.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note:</strong> DOM Niveau 3 a défini <code>namespaceURI</code>, <code>localName</code> et <code>prefix</code> sur l'interface {{domxref("Node")}}. Dans DOM4 ils ont été déplacés vers <code>Attr</code>.</p>
+
+<p>Cette modification est implémentée dans Chrome depuis la version 46.0 et Firefox à partir de la version 48.0.</p>
+</div>
+
+<h2 id="Propriétés_et_méthodes_dépréciées"><span class="short_text" id="result_box" lang="fr"><span class="hps">Propriétés et méthodes</span> <span class="hps">dépréciées</span></span></h2>
+
+<p>Les propriétés suivantes ont été dépréciées. Si elle est disponible, la méthode ou propriété de remplacement appropriée est fournie.</p>
+
+<dl>
+ <dt><code>attributes</code></dt>
+ <dd>Cette propriété retourne désormais toujours <code>NULL</code>.</dd>
+ <dt><code>childNodes </code> {{obsolete_inline(14)}}</dt>
+ <dd>Cette propriété retourne désormais toujours <code>un</code> {{domxref("NodeList")}}  vide.</dd>
+ <dt><code>firstChild </code> {{obsolete_inline(14)}}</dt>
+ <dd>Cette propriété retourne désormais toujours <code>NULL</code>.</dd>
+ <dt><code>isId</code> {{readOnlyInline}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Indique si l'attribut est un "attribut ID".</span> <span>Un "attribut ID" étant un attribut dont la valeur devrait être unique dans un document DOM.</span> <span>En HTML DOM, "id" est le seul attribut ID, mais les documents XML peuvent en définir d'autres.</span> <span>Qu'un attribut soit unique ou non est souvent déterminé par</span></span>  un {{Glossary("DTD")}}  ou une autre description de schéma.</dd>
+ <dt><code>lastChild </code> {{obsolete_inline(14)}}</dt>
+ <dd>Cette propriété retourne désormais toujours <code>NULL</code>.</dd>
+ <dt><code>nextSibling</code></dt>
+ <dd>Cette propriété retourne désormais toujours <code>NULL</code>.</dd>
+ <dt><code>nodeName</code></dt>
+ <dd>Utilisez {{domxref("Attr.name")}} à la place.</dd>
+ <dt><code>nodeType</code></dt>
+ <dd>Cette propriété retourne toujours 2. (<code>ATTRIBUTE_NODE</code>).</dd>
+ <dt><code>nodeValue</code></dt>
+ <dd>Utilisez {{domxref("Attr.value")}} à la place.</dd>
+ <dt><code>ownerDocument</code></dt>
+ <dd>Vous n'auriez pas dû l'utiliser en premier lieu, donc cela ne devrait pas vous ennuyer qu'il soit retiré.</dd>
+ <dt><code>parentNode</code></dt>
+ <dd>Cette propriété retourne désormais toujours NULL.</dd>
+ <dt><code>previousSibling</code></dt>
+ <dd>Cette propriété retourne désormais toujours NULL.</dd>
+ <dt><code>schemaTypeInfo</code> {{obsolete_inline}} {{readOnlyInline}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Les informations de type associées à cet attribut.</span> <span>Bien que l'information de type contenue dans cet attribut soit garantie après le chargement du document ou l'appel de</span></span> {{domxref("Document.normalizeDocument")}}, cette propriété <span id="result_box" lang="fr"><span>peut ne pas être fiable si le nœud a été déplacé.</span></span></dd>
+ <dt><code>specified</code></dt>
+ <dd>Cette propriété retourne désormais toujours true.</dd>
+ <dt><code>textContent</code></dt>
+ <dd>Utilisez {{domxref ("Attr.value")}} à la place.</dd>
+</dl>
+
+<p><br>
+ Les méthodes suivantes ont été dépréciées:</p>
+
+<dl>
+ <dt><code>appendChild() </code> {{obsolete_inline(14)}}</dt>
+ <dd>Modifiez à la place la valeur de {{domxref ("Attr.value")}}.</dd>
+ <dt><code>cloneNode()</code></dt>
+ <dd>Vous n'auriez pas dû l'utiliser en premier lieu, donc cela ne devrait pas vous ennuyer qu'il soit retiré.</dd>
+ <dt><code>createAttribute()</code></dt>
+ <dd>Utilisez {{domxref("Attr.setAttribute()")}} à la place.</dd>
+ <dt><code>createAttributeNS()</code></dt>
+ <dd>Utilisez {{domxref("Attr.setAttributeNS()")}} à la place.</dd>
+ <dt><code>getAttributeNode()</code></dt>
+ <dd>Utilisez {{domxref("Attr.getAttribute()")}} à la place.</dd>
+ <dt><code>getAttributeNodeNS()</code></dt>
+ <dd>Utilisez {{domxref("Attr.getAttributeNS()")}} à la place.</dd>
+ <dt><code>hasAttributes() </code>{{obsolete_inline("21.0")}}</dt>
+ <dd>Cette méthode retourne désormais toujours false.</dd>
+ <dt><code>hasChildNodes()</code></dt>
+ <dd>Cette méthode retourne désormais toujours false.</dd>
+ <dt><code>insertBefore()</code></dt>
+ <dd>Modifiez à la place la valeur de {{domxref ("Attr.value")}}.</dd>
+ <dt><code>isSupported()</code></dt>
+ <dd>Vous n'auriez pas dû l'utiliser en premier lieu, donc cela ne devrait pas vous ennuyer qu'il soit retiré.</dd>
+ <dt><code>isEqualNode()</code></dt>
+ <dd>Vous n'auriez pas dû l'utiliser en premier lieu, donc cela ne devrait pas vous ennuyer qu'il soit retiré.</dd>
+ <dt><code>normalize()</code></dt>
+ <dd>Vous n'auriez pas dû l'utiliser en premier lieu, donc cela ne devrait pas vous ennuyer qu'il soit retiré.</dd>
+ <dt><code>removeAttributeNode()</code></dt>
+ <dd>Utilisez {{domxref("Attr.removeAttribute()")}} à la place.</dd>
+ <dt><code>removeChild() </code> {{obsolete_inline(14)}}</dt>
+ <dd>Modifiez à la place la valeur de {{domxref("Attr.value")}}.</dd>
+ <dt><code>replaceChild() </code> {{obsolete_inline(14)}}</dt>
+ <dd>Modifiez à la place la valeur de {{domxref("Attr.value")}}.</dd>
+ <dt><code>setAttributeNode()</code></dt>
+ <dd>Utilisez {{domxref("Attr.setAttribute()")}} à la place.</dd>
+ <dt><code>setAttributeNodeNS()</code></dt>
+ <dd>Utilisez {{domxref("Attr.setAttributeNS()")}} à la place.</dd>
+</dl>
+
+<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("DOM WHATWG", "#interface-attr", "Attr")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>Ajoute la propriété <code>ownerElement</code> property</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#interface-attr", "Attr")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td>A déplacé les <code>namespaceURI</code>, <code>prefix</code> et <code>localName</code> de {{domxref("Node")}} vers cet API et supprimé <code>ownerElement</code>, <code>schemaTypeInfo</code> et <code>isId</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM3 Core", "core.html#ID-637646024", "Attr")}}</td>
+   <td>{{Spec2("DOM3 Core")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] À partir de Chrome 45, cette propriété n'hérite plus de Node.</p>
diff --git a/files/fr/web/api/attr/localname/index.html b/files/fr/web/api/attr/localname/index.html
new file mode 100644
index 0000000000..11e306eac5
--- /dev/null
+++ b/files/fr/web/api/attr/localname/index.html
@@ -0,0 +1,139 @@
+---
+title: Attr.localName
+slug: Web/API/Attr/localName
+tags:
+  - API
+  - DOM
+  - Propriétés
+  - Reference
+translation_of: Web/API/Attr/localName
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La propriété <code><strong>Attr.localName</strong></code>, en lecture seule, renvoie la partie locale du nom qualifié d'un élément.</p>
+
+<div class="note">
+<p>Avant DOM4, cette API était définie dans l'interface {{domxref("Node")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>name</var> = <var>attribute</var>.localName
+</pre>
+
+<h3 id="Valeur_renvoyée">Valeur renvoyée</h3>
+
+<p>Une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> qui représente la partie locale du nom qualifié de l'élément.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Cet exemple affiche "id" dans une  fenêtre d'alerte.</p>
+
+<h3 id="Contenu_HTML">Contenu HTML</h3>
+
+<pre class="brush: html">&lt;button id="exemple"&gt;Clique ici&lt;/button&gt;</pre>
+
+<h3 id="Contenu_JavaScript">Contenu JavaScript</h3>
+
+<pre class="brush: js">const element = document.querySelector("#exemple");
+element.addEventListener("click", function() {
+  const attribute = element.attributes[0];
+  alert(attribute.localName);
+});
+</pre>
+
+<p>{{ EmbedLiveSample('Exemple','100%',30) }}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Le nom local d'un attribut est la partie du nom qualifié de cet attribut avant les deux points. les noms qualifiés sont utilisés en XML, dans les espaces de nom de certains documents.</p>
+
+<div class="note">
+<p><strong>Note :</strong> dans {{Gecko("1.9.2")}} et avant, cette propriété renvoie le nom en majuscule pour les attributs HTML du  DOM HTML (contrairement aux atttributs XHTML ). Dans les versions plus récentes, en accord avec HTML5, cette propriété renvoie la casse correspondante au DOM utilisé, c'est-à-dire en minuscule pour les attributs du DOM XHTMl et du DOM HTML.</p>
+</div>
+
+<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('DOM4', '#interface-attr', 'Attr.localName')}}</td>
+   <td>{{Spec2('DOM4')}}</td>
+   <td>première définition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>46.0<sup>[1]</sup></td>
+   <td>17</td>
+   <td>{{CompatGeckoDesktop("48.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge Mobile</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>17</td>
+   <td>{{CompatGeckoMobile("48.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+</div>
+
+<p>[1] Cette API était disponible précédemment au travers de l'API {{domxref("Node")}}.</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>{{domxref("Attr.namespaceURI")}}</li>
+ <li>{{domxref("Attr.prefix")}}</li>
+ <li>{{domxref("Element.localName")}}</li>
+ <li>{{domxref("Node.localName")}}</li>
+</ul>
diff --git a/files/fr/web/api/attr/namespaceuri/index.html b/files/fr/web/api/attr/namespaceuri/index.html
new file mode 100644
index 0000000000..cbc57a0351
--- /dev/null
+++ b/files/fr/web/api/attr/namespaceuri/index.html
@@ -0,0 +1,130 @@
+---
+title: Attr.namespaceURI
+slug: Web/API/Attr/namespaceURI
+tags:
+  - API
+  - DOM
+  - Reference
+  - namespaceURI
+translation_of: Web/API/Attr/namespaceURI
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La propriété en lecture seule <code><strong>Attr.namespaceURI</strong></code> retourne l'URI d'espace de nom de l'attribut, ou <code>null</code> si l'élément  n'est pas dans un espace de noms.</p>
+
+<div class="note">
+<p>Avant DOM4 cet API était défini dans l'interface {{domxref("Node")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>namespace</var> = <var>attribute</var>.namespaceURI</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans cet extrait de code, un attribut est examiné pour son {{domxref("localName")}} et son <code>namespaceURI</code>. Si le <code>namespaceURI</code> renvoie l'espace de noms XUL et le <code>localName</code> retourne "browser" (<em>navigateur</em>), alors le noeud est compris comme étant un <code>&lt;browser/&gt;</code> XUL.</p>
+
+<pre class="brush:js">if (attribute.localName == "value" &amp;&amp;
+    attribute.namespaceURI == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") {
+  // ceci est une valeur XUL
+}</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Ce n'est pas une valeur calculée, mais le résultat d'une recherche d'espace de noms basée sur un examen des déclarations d'espace de noms dans la portée. L'URI de l'espace de noms d'un attribut est figé à l'heure de création de l'attribut.</p>
+
+<p>Dans Firefox 3.5 et précédents, l'URI d'espace de nom pour les attributs HTML dans les documents HTML est <code>null</code>. Dans les versions ultérieures, en conformité avec HTML5, il est <code><a class="external" href="https://www.w3.org/1999/xhtml" rel="freelink">https://www.w3.org/1999/xhtml</a></code> comme dans XHTML. {{gecko_minversion_inline("1.9.2")}}</p>
+
+<p>Vous pouvez créer un attribut avec le <code>namespaceURI</code> spécifié en utilisant la méthode de DOM niveau 2 {{domxref("Element.setAttributeNS")}}.</p>
+
+<p>Selon la spécification <a class="external" href="https://www.w3.org/TR/xml-names11/">Namespaces en XML</a>, un attribut n'hérite pas de l'espace de noms de l'élément auquel il est attaché. Si un attribut n'est pas explicitement donné à un espace de noms, il n'a pas d'espace de noms.</p>
+
+<p>Le DOM ne gère pas ou n'applique pas la validation de l'espace de noms en soi. Il appartient à l'application DOM de faire toute validation nécessaire. Notez également que le préfixe d'espace de noms, une fois associé à un nœud particulier, ne peut pas être modifié.</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">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-element-namespaceuri", "Element.namespaceuri")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>46.0<sup>[1]</sup></td>
+   <td>17</td>
+   <td>{{CompatGeckoDesktop("48.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge Mobile</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>17</td>
+   <td>{{CompatGeckoMobile("48.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+</div>
+
+<div id="compat-mobile"> </div>
+
+<p>[1] Cet API était auparavant disponible dans l'API {{domxref("Node")}}.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Attr.localName")}}</li>
+ <li>{{domxref("Attr.prefix")}}</li>
+ <li>{{domxref("Element.namespaceURI")}}</li>
+ <li>{{domxref("Node.namespaceURI")}}</li>
+</ul>
diff --git a/files/fr/web/api/attr/prefix/index.html b/files/fr/web/api/attr/prefix/index.html
new file mode 100644
index 0000000000..1749174b01
--- /dev/null
+++ b/files/fr/web/api/attr/prefix/index.html
@@ -0,0 +1,117 @@
+---
+title: Attr.prefix
+slug: Web/API/Attr/prefix
+tags:
+  - API
+  - DOM
+  - Propriétés
+  - Reference
+translation_of: Web/API/Attr/prefix
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La propriété <strong><code>Attr.prefix </code></strong>en lecture seule renvoie le préfixe de l'espace de noms de l'attribut spécifié ou null si aucun préfixe n'est spécifié</p>
+
+<div class="note">
+<p>Avant DOM4, cette API a été définie dans l'interface {{domxref ("Node")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>string</var> = <var>attribute</var>.prefix
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Le code suivant affiche "x" dans la console.</p>
+
+<pre class="brush:xml">&lt;div x:id="example" onclick="console.log(this.attributes[0].prefix)"/&gt;
+</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Cela ne fonctionnera que lorsqu'un analyseur conscient de l'espace de noms est utilisé, c'est-à-dire lorsqu'il s'agit d'un document avec un type MIME XML. Cela ne fonctionnera pas pour les documents HTML.</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">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-attr-prefix", "Attr.prefix")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>46.0<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("48.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("48.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Cet API <span class="short_text" id="result_box" lang="fr"><span>était auparavant disponible sur l'API</span></span> {{domxref("Node")}}.</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>{{domxref("Attr.namespaceURI")}}</li>
+ <li>{{domxref("Attr.localName")}}</li>
+ <li>{{domxref("Element.prefix")}}</li>
+ <li>{{domxref("Node.prefix")}}</li>
+</ul>
diff --git a/files/fr/web/api/audiobuffer/audiobuffer/index.html b/files/fr/web/api/audiobuffer/audiobuffer/index.html
new file mode 100644
index 0000000000..a6d231a809
--- /dev/null
+++ b/files/fr/web/api/audiobuffer/audiobuffer/index.html
@@ -0,0 +1,104 @@
+---
+title: AudioBuffer()
+slug: Web/API/AudioBuffer/AudioBuffer
+translation_of: Web/API/AudioBuffer/AudioBuffer
+---
+<p>{{APIRef("Web Audio API")}}{{SeeCompatTable}}</p>
+
+<p><span class="seoSummary">Le constructeur <strong><code>AudioBuffer</code></strong> créer un nouvel objet {{domxref("AudioBuffer")}}.</span></p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var audioBuffer = new AudioBuffer([options]);
+var audioBuffer = new AudioBuffer(context[, options]);</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><em>context </em>{{obsolete_inline("")}}</dt>
+ <dd>Référence à un {{domxref("AudioContext")}}. Ce paramètre a été supprimer de la specification. <span id="result_box" lang="fr"><span>Consultez la section Compatibilité du navigateur pour plus de détails.</span></span></dd>
+ <dt><em>options</em> {{optional_inline}}</dt>
+ <dd>Les options sont les suivantes:
+ <ul>
+  <li><code>length</code>:  L<span id="result_box" lang="fr"><span>ongueur de l'échantillonnage du tampon</span></span>.</li>
+  <li><code>numberOfChannels</code>: Nombre de cannaux du buffer. La valeur par défaut est 1. </li>
+  <li><code>sampleRate</code>: Taux d'échantillonnage du buffer en Hz. La valeur par défaut est le taux d'<span id="result_box" lang="fr"><span>échantillonnage du </span></span><code>context</code><span lang="fr"><span> utilisé dans la construction de cet objet </span></span></li>
+ </ul>
+ </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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API','#AudioBuffer','AudioBuffer')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_Navigateurs">Compatibilité des Navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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(55)}}<br>
+    {{CompatChrome(58)}} (no <code>context</code> parameter)</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(42)}}<br>
+    {{CompatOpera(45)}} (no <code>context</code> parameter)</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android Webview</th>
+   <th>Chrome pour Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(55)}}<br>
+    {{CompatChrome(58)}} (no <code>context</code> parameter)</td>
+   <td>{{CompatChrome(55)}}<br>
+    {{CompatChrome(58)}} (no <code>context</code> parameter)</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile(42)}}<br>
+    {{CompatOperaMobile(45)}}  (no <code>context</code> parameter)</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fr/web/api/audiobuffer/copyfromchannel/index.html b/files/fr/web/api/audiobuffer/copyfromchannel/index.html
new file mode 100644
index 0000000000..249358ec17
--- /dev/null
+++ b/files/fr/web/api/audiobuffer/copyfromchannel/index.html
@@ -0,0 +1,142 @@
+---
+title: AudioBuffer.copyFromChannel()
+slug: Web/API/AudioBuffer/copyFromChannel
+tags:
+  - API
+  - Méthode
+  - Reference
+  - Web Audio API
+translation_of: Web/API/AudioBuffer/copyFromChannel
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<div>
+<p><span class="seoSummary">La méthode <code>copyFromChannel() </code>de l'interface {{ domxref("AudioBuffer") }} copie les échantillons de l'un des canaux de l'<code>AudioBuffer</code> dans un tableau.</span></p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>tableauDonnees</em>.copyFromChannel(<em>destination</em>,numeroCanal,decalageDebut);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><em>destination</em></dt>
+ <dd>Un tableau {{domxref("Float32Array")}} dans lequel copier les données.</dd>
+ <dt><em>channelNumber</em></dt>
+ <dd>Le numéro du canal de l'AudioBuffer depuis lequel copier les données. Si <em>channelNumber</em> est supérieur ou égal à {{domxref("AudioBuffer.numberOfChannels")}}, une exception <code>INDEX_SIZE_ERR est</code> levée.</dd>
+ <dt><em>startInChannel</em> {{optional_inline}}</dt>
+ <dd>Un offset optionnel à partir duquel copier les données. Si la valeur de <em>startInChannel</em> est supérieure à {{domxref("AudioBuffer.length")}}, une exception <code>INDEX_SIZE_ERR</code> est levée.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">var tableauDonnees = contextAudio.createBuffer(2, frameCount, contextAudio.sampleRate);
+var autreTableau = new Float32Array(length);
+tableauDonnees.copyFromChannel(autreTableau,1,0);
+</pre>
+
+<h2 id="Spécification">Spécification</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('Web Audio API', '#widl-AudioBuffer-copyFromChannel-void-Float32Array-destination-long-channelNumber-unsigned-long-startInChannel', 'copyFromChannel')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support basique</td>
+   <td>{{CompatChrome(14.0)}} {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(27)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15 {{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Non préfixé</td>
+   <td>{{CompatChrome(43.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(27)}}</td>
+   <td>1.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(28.0)}} {{property_prefix("webkit")}}</td>
+  </tr>
+  <tr>
+   <td>Non prefixé</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/audiobuffer/copytochannel/index.html b/files/fr/web/api/audiobuffer/copytochannel/index.html
new file mode 100644
index 0000000000..664bacb843
--- /dev/null
+++ b/files/fr/web/api/audiobuffer/copytochannel/index.html
@@ -0,0 +1,141 @@
+---
+title: AudioBuffer.copyToChannel()
+slug: Web/API/AudioBuffer/copyToChannel
+translation_of: Web/API/AudioBuffer/copyToChannel
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<div>
+<p><span class="seoSummary">La méthode <code>copyToChannel() </code>de l'interface {{ domxref("AudioBuffer") }} copie les échantillons du tableau source vers le canal de l'<code>AudioBuffer</code> spécifié.</span></p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>myArrayBuffer</em>.copyToChannel(<em>source</em>, <em>channelNumber</em>, <em>startInChannel</em>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><em>source</em></dt>
+ <dd>Le tableau {{jsxref("Float32Array")}} depuis lequel copier les données.</dd>
+ <dt><em>channelNumber</em></dt>
+ <dd>Le numéro du canal de l'{{domxref("AudioBuffer")}} dans lequel copier les données. Si <em>channelNumber</em> est supérieur ou égal à {{domxref("AudioBuffer.numberOfChannels")}}, une exception <code>INDEX_SIZE_ERR est</code> levée.</dd>
+ <dt><em>startInChannel {{optional_inline}}</em></dt>
+ <dd>Un offset optionnel à partir duquel copier les données. Si la valeur de <em>startInChannel</em> est supérieure à {{domxref("AudioBuffer.length")}}, une exception <code>INDEX_SIZE_ERR</code> est levée.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">var tableauDonnees = contextAudio.createBuffer(2, frameCount, contextAudio.sampleRate);
+var autreTableau = new Float32Array;
+// Copy les données depuis le second canal vers le second tableau.
+tableauDonnees.copyFromChannel(autreTableau,1,0);
+// Copie les données depuis le second tableau vers le premier canal du premier tableau. A présent les deux canaux ont des données identiques.
+tableauDonnees.copyToChannel (autreTableau,0,0);
+</pre>
+
+<h2 id="Spécification">Spécification</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('Web Audio API', '#widl-AudioBuffer-copyToChannel-void-Float32Array-source-long-channelNumber-unsigned-long-startInChannel', 'copyToChannel')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support basique</td>
+   <td>{{CompatChrome(14.0)}} {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(27)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15 {{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Non préfixé</td>
+   <td>{{CompatChrome(43.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(25)}}</td>
+   <td>1.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(28.0)}} {{property_prefix("webkit")}}</td>
+  </tr>
+  <tr>
+   <td>Non préfixé</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/audiobuffer/duration/index.html b/files/fr/web/api/audiobuffer/duration/index.html
new file mode 100644
index 0000000000..88bf829765
--- /dev/null
+++ b/files/fr/web/api/audiobuffer/duration/index.html
@@ -0,0 +1,128 @@
+---
+title: AudioBuffer.duration
+slug: Web/API/AudioBuffer/duration
+translation_of: Web/API/AudioBuffer/duration
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<div>
+<p>La propriéré <code>duration</code>  de l'interface {{ domxref("AudioBuffer") }} renvoie un nombre flottant à double précision représentant la durée, en secondes, des données PCM stockées dans le buffer.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js;highlight[22]">var tableauTampon = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
+tableauTampon.duration;</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Nombre flottant à double précision.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js;highlight[22]">// Stereo
+var nombreCanaux = 2;
+
+// Crée une mémoire tampon vide de 2 secondes
+// à la fréquence d'échantillonage du contexte AudioContext
+var nombreFrames = contexteAudio.sampleRate * 2.0;
+var tableauDonnees = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
+
+bouton.onclick = function() {
+  // remplit la mémoire tampon avec du bruit blanc
+  // valeurs aléatoires entre -1.0 et 1.0
+  for (var canal = 0; canal &lt; nombreCanaux; canal++) {
+    // génère le tableau contenant les données
+    var tampon = tableauDonnees.getChannelData(canal);
+    for (var i = 0; i &lt; nombreFrames; i++) {
+      // Math.random() donne une valeur comprise entre [0; 1.0]
+      // l'audio doit être compris entre [-1.0; 1.0]
+      tampon[i] = Math.random() * 2 - 1;
+    }
+  }
+  console.log(tableauDonnees.duration);
+}
+</pre>
+
+<h2 id="Spécification">Spécification</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('Web Audio API', '#widl-AudioBuffer-duration', 'duration')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support basique</td>
+   <td>14 {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>23</td>
+   <td>{{CompatNo}}</td>
+   <td>15 {{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatNo}}</td>
+   <td>28 {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>25</td>
+   <td>1.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/audiobuffer/getchanneldata/index.html b/files/fr/web/api/audiobuffer/getchanneldata/index.html
new file mode 100644
index 0000000000..6b06c4ead2
--- /dev/null
+++ b/files/fr/web/api/audiobuffer/getchanneldata/index.html
@@ -0,0 +1,157 @@
+---
+title: AudioBuffer.getChannelData()
+slug: Web/API/AudioBuffer/getChannelData
+translation_of: Web/API/AudioBuffer/getChannelData
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<div>
+<div>
+<p><span class="seoSummary">La méthode </span><code>getChannelData</code><span class="seoSummary"><code>() </code>de l'interface {{ domxref("AudioBuffer") }} renvoie un </span>{{domxref("Float32Array")}} contenant les données PCM associées au canal spécifié (0 correspondant au premier canal)<span class="seoSummary">.</span></p>
+</div>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js;highlight[22]">var tableauDonnees = contexteAudio.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
+var tampon = tableauDonnees.getChannelData(canal);</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un {{domxref("Float32Array")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans l'exemple suivant crée un buffer de 2 secondes, le remplit avec du bruit blanc puis le lit via un {{ domxref("AudioBufferSourceNode") }}. Vous pouvez aussi <a href="http://mdn.github.io/audio-buffer/">exécuter le code</a>, or <a href="https://github.com/mdn/audio-buffer">voir le code source</a>.</p>
+
+<pre class="brush: js;highlight[21]">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+var bouton = document.querySelector('button');
+var preformate = document.querySelector('pre');
+var monScript = document.querySelector('script');
+
+preformate.innerHTML = monScript.innerHTML;
+
+// Stéréo
+var nombreCanaux = 2;
+// Crée un buffer vide de 2 secondes
+// au taux d'échantillonage du contexte audio
+var nombreFrames = contexteAudio.sampleRate * 2.0;
+
+var tableauDonnees = contexteAudio.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
+
+bouton.onclick = function() {
+  // remplit la mémoire tampon avec du bruit blanc
+  // valeurs aléatoires entre -1.0 et 1.0
+  for (var canal = 0; canal &lt; nombreCanaux; canal++) {
+    // génère le tableau contenant les données
+    var tampon = tableauDonnees.getChannelData(canal);
+    for (var i = 0; i &lt; nombreFrames; i++) {
+      // Math.random() donne une valeur comprise entre [0; 1.0]
+      // l'audio doit être compris entre [-1.0; 1.0]
+      tampon[i] = Math.random() * 2 - 1;
+    }
+  }
+
+  // Récupère un AudioBufferSourceNode.
+  // C'est un AudioNode à utiliser quand on veut jouer AudioBuffer
+  var source = contexteAudio.createBufferSource();
+
+  // assigne le buffer au AudioBufferSourceNode
+  source.buffer = tableauDonnees;
+
+  // connecte le AudioBufferSourceNode avec
+  // la destination pour qu'on puisse entendre le son
+  source.connect(contexteAudio.destination);
+
+  // lance la lecture du so
+  source.start();
+}</pre>
+
+<h2 id="Paramètres">Paramètres</h2>
+
+<dl>
+ <dt>channel</dt>
+ <dd>The channel property is an index representing the particular channel to get data for. An index value of 0 represents the first channel. If the <code>channel</code> index value is greater than of equal to {{domxref("AudioBuffer.numberOfChannels")}}, an <code>INDEX_SIZE_ERR</code> exception will be thrown.</dd>
+</dl>
+
+<h2 id="Spécification">Spécification</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('Web Audio API', '#widl-AudioBuffer-getChannelData-Float32Array-unsigned-long-channel', 'getChannelData')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support basique</td>
+   <td>14 {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>23</td>
+   <td>{{CompatNo}}</td>
+   <td>15 {{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatNo}}</td>
+   <td>28 {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>25</td>
+   <td>1.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/audiobuffer/index.html b/files/fr/web/api/audiobuffer/index.html
new file mode 100644
index 0000000000..591814a229
--- /dev/null
+++ b/files/fr/web/api/audiobuffer/index.html
@@ -0,0 +1,213 @@
+---
+title: AudioBuffer
+slug: Web/API/AudioBuffer
+tags:
+  - API
+  - Experimental
+  - Reference
+  - Web Audio API
+translation_of: Web/API/AudioBuffer
+---
+<p>{{APIRef("Web Audio API")}}</p>
+
+<p>L'interface AudioBuffer représente une ressource audio stockée en mémoire, créée à partir d'un fichier audio avec la méthode {{ domxref("AudioContext.decodeAudioData()") }}, ou à partir de données brutes avec {{ domxref("AudioContext.createBuffer()") }}. Une fois mises en mémoire dans un AudioBuffer, les données audio sont transférées dans un {{ domxref("AudioBufferSourceNode") }} afin d'être lues.<br>
+ <br>
+ Ce type d'objet est conçu pour contenir de petit extraits audio, durant généralement moins de 45s. Pour les sons plus longs, les objets implémentant {{domxref ("MediaAudioElementSourceNode")}} sont plus adaptés. La mémoire tampon contient des données au format non entrelacé IEEE 32-bit PCM linéaire, avec une portée nominale comprise entre -1 et +1. S'il y a plusieurs canaux, ils sont stockés dans des mémoires-tampon distinctes.</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("AudioBuffer.AudioBuffer", "AudioBuffer()")}}</dt>
+ <dd>Crée et retourne un nouvel objet <code>AudioBuffer</code>.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("AudioBuffer.sampleRate")}} {{readonlyInline}}</dt>
+ <dd>Retourne un nombre flottant qui représente la fréquence d'échantillonnage, en échantillons par seconde, des données PCM stockées dans la mémoire tampon.</dd>
+ <dt>{{domxref("AudioBuffer.length")}} {{readonlyInline}}</dt>
+ <dd>Retourne un nombre entier qui représente la longueur, en trames d'échantillonnage , des données PCM stockées dans la mémoire tampon.</dd>
+ <dt>{{domxref("AudioBuffer.duration")}} {{readonlyInline}}</dt>
+ <dd>Retourne un nombre à virgule flottante de double précision qui représente la durée, exprimée en secondes, des données PCM stockées dans la mémoire tampon.</dd>
+ <dt>{{domxref("AudioBuffer.numberOfChannels")}} {{readonlyInline}}</dt>
+ <dd>Retourne un nombre entier qui représente le nombre de canaux audio discrets décrits par les données PCM stockées dans la mémoire tampon.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("AudioBuffer.getChannelData()")}}</dt>
+ <dd>Retourne un {{domxref ("Float32Array")}} contenant les données PCM associés au canal, défini par l'index du canal (0 représentant le premier canal).</dd>
+ <dt>{{domxref("AudioBuffer.copyFromChannel()")}}</dt>
+ <dd>Copie les échantillons du canal associé à <span class="idlType"><code>AudioBuffer</code></span> dans un tableau de destination.</dd>
+ <dt>{{domxref("AudioBuffer.copyToChannel()")}}</dt>
+ <dd>Copie les échantillons dans le canal associé à <span class="idlType"><code>AudioBuffer</code></span>, depuis le tableau <code>source</code>.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'exemple suivant montre comment créer un  <code>AudioBuffer</code> et le remplir avec du bruit blanc. Le code source est disponible sur notre repo <a href="https://github.com/mdn/audio-buffer">audio-buffer demo</a>; une <a href="http://mdn.github.io/audio-buffer/">version live</a> est également consultable.</p>
+
+<pre class="brush: js;highlight:[7,14,27] line-numbers  language-js"><code class="language-js"><span class="comment token">// Stéréo</span>
+<span class="keyword token">var</span> nombreCanaux <span class="operator token">=</span> <span class="number token">2</span><span class="punctuation token">;</span>
+
+<span class="comment token">// Crée une mémoire tampon vide de 2 secondes</span>
+<span class="comment token">// à la fréquence d'échantillonage du contexte AudioContext</span>
+<span class="keyword token">var</span> nombreFrames <span class="operator token">=</span> contexteAudio<span class="punctuation token">.</span>sampleRate <span class="operator token">*</span> <span class="number token">2.0</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> tableauDonnees <span class="operator token">=</span> audioCtx<span class="punctuation token">.</span><span class="function token">createBuffer</span><span class="punctuation token">(</span>nombreCanaux<span class="punctuation token">,</span> nombreFrames<span class="punctuation token">,</span> contexteAudio<span class="punctuation token">.</span>sampleRate<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+bouton<span class="punctuation token">.</span>onclick <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>
+  <span class="comment token">// remplit la mémoire tampon avec du bruit blanc</span>
+  <span class="comment token">// valeurs aléatoires entre -1.0 et 1.0</span>
+  <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> canal <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> canal <span class="operator token">&lt;</span> nombreCanaux<span class="punctuation token">;</span> canal<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="comment token">// génère le tableau contenant les données</span>
+    <span class="keyword token">var</span> tampon <span class="operator token">=</span> tableauDonnees<span class="punctuation token">.</span><span class="function token">getChannelData</span><span class="punctuation token">(canal</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token">&lt;</span> nombreFrames<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="comment token">// Math.random() donne une valeur comprise entre [0; 1.0]</span>
+      <span class="comment token">// l'audio doit être compris entre [-1.0; 1.0]</span>
+      tampon<span class="punctuation token">[</span>i<span class="punctuation token">]</span> <span class="operator token">=</span> Math<span class="punctuation token">.</span><span class="function token">random</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">*</span> <span class="number token">2</span> <span class="operator token">-</span> <span class="number token">1</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+  <span class="punctuation token">}</span>
+
+  <span class="comment token">// Récupère un AudioBufferSourceNode.</span>
+  <span class="comment token">// C'est un AudioNode à utiliser quand on veut jouer AudioBuffer</span>
+  <span class="keyword token">var</span> source <span class="operator token">=</span> contexteAudio<span class="punctuation token">.</span><span class="function token">createBufferSource</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="comment token">// assigne le buffer au AudioBufferSourceNode</span>
+  source<span class="punctuation token">.</span>buffer <span class="operator token">=</span> tableauDonnees<span class="punctuation token">;</span>
+
+  <span class="comment token">// connecte le AudioBufferSourceNode avec</span>
+  <span class="comment token">// la destination pour qu'on puisse entendre le son</span>
+  source<span class="punctuation token">.</span><span class="function token">connect</span><span class="punctuation token">(</span>contexteAudio<span class="punctuation token">.</span>destination<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="comment token">// lance la lecture du so</span>
+  source<span class="punctuation token">.</span><span class="function token">start</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="punctuation token">}</span></code></pre>
+
+<h2 id="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('Web Audio API', '#AudioBuffer-section', 'AudioBuffer')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</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>Support basique</td>
+   <td>{{CompatChrome(14.0)}} {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(25)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(15)}} {{property_prefix("webkit")}}<br>
+    {{CompatOpera(22)}}</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+  <tr>
+   <td><code>copyFromChannel()</code> and <code>copyToChannel()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(27)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>constructeur</td>
+   <td>{{CompatChrome(55.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(42)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(25)}}</td>
+   <td>1.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+   <td>{{CompatChrome(28.0)}} {{property_prefix("webkit")}}</td>
+  </tr>
+  <tr>
+   <td><code>copyFromChannel()</code> and <code>copyToChannel()</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(27)}}</td>
+   <td> </td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>constructeur</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(55.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile(42)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(55.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/audiobuffer/length/index.html b/files/fr/web/api/audiobuffer/length/index.html
new file mode 100644
index 0000000000..144d83bede
--- /dev/null
+++ b/files/fr/web/api/audiobuffer/length/index.html
@@ -0,0 +1,128 @@
+---
+title: AudioBuffer.length
+slug: Web/API/AudioBuffer/length
+translation_of: Web/API/AudioBuffer/length
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<div>
+<p>La propriété <code>length</code> de l'interface {{ domxref("AudioBuffer") }} renvoie un entier représentant la longueur, en trames d'échantillonage, des données PCM stockées dans la mémoire-tampon.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js;highlight[22]">var tableauMemoireTampon = contexteAudio.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
+tableauMemoireTampon.length;
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un nombre entier.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js;highlight[22]">// Stereo
+var nombreCanaux = 2;
+
+// Crée une mémoire tampon vide de 2 secondes
+// à la fréquence d'échantillonage du contexte AudioContext
+var nombreFrames = contexteAudio.sampleRate * 2.0;
+var tableauDonnees = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
+
+
+bouton.onclick = function() {
+  // remplit la mémoire tampon avec du bruit blanc
+  // valeurs aléatoires entre -1.0 et 1.0
+  for (var canal = 0; canal &lt; nombreCanaux; canal++) {
+    // génère le tableau contenant les données
+    var tampon = tableauDonnees.getChannelData(canal);
+    for (var i = 0; i &lt; nombreFrames; i++) {
+      // Math.random() donne une valeur comprise entre [0; 1.0]
+      // l'audio doit être compris entre [-1.0; 1.0]
+      tampon[i] = Math.random() * 2 - 1;
+    }
+  }
+  console.log(tableauDonnees.length);
+}</pre>
+
+<h2 id="Spécification">Spécification</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('Web Audio API', '#widl-AudioBuffer-length', 'length')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support basique</td>
+   <td>14 {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>23</td>
+   <td>{{CompatNo}}</td>
+   <td>15 {{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatNo}}</td>
+   <td>28 {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>25</td>
+   <td>1.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/audiobuffer/numberofchannels/index.html b/files/fr/web/api/audiobuffer/numberofchannels/index.html
new file mode 100644
index 0000000000..23043032e7
--- /dev/null
+++ b/files/fr/web/api/audiobuffer/numberofchannels/index.html
@@ -0,0 +1,129 @@
+---
+title: AudioBuffer.numberOfChannels
+slug: Web/API/AudioBuffer/numberOfChannels
+translation_of: Web/API/AudioBuffer/numberOfChannels
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<div>
+<p>La propriété <code>numberOfChannels</code> de l'interface {{ domxref("AudioBuffer") }} renvoie un nombre entier représentant le nombre de canaux audio diiscrets décrits par les données PCM stockées dans la mémoire-tampon.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js;highlight[22]">var tableauMemoireTampon = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
+tableauMemoireTampon.numberOfChannels;
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un nombre entier.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js;highlight[22]">// Stereo
+var nombreCanaux = 2;
+
+// Crée une mémoire tampon vide de 2 secondes
+// à la fréquence d'échantillonage du contexte AudioContext
+var nombreFrames = contexteAudio.sampleRate * 2.0;
+var tableauDonnees = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
+
+
+bouton.onclick = function() {
+  // remplit la mémoire tampon avec du bruit blanc
+  // valeurs aléatoires entre -1.0 et 1.0
+  for (var canal = 0; canal &lt; nombreCanaux; canal++) {
+    // génère le tableau contenant les données
+    var tampon = tableauDonnees.getChannelData(canal);
+    for (var i = 0; i &lt; nombreFrames; i++) {
+      // Math.random() donne une valeur comprise entre [0; 1.0]
+      // l'audio doit être compris entre [-1.0; 1.0]
+      tampon[i] = Math.random() * 2 - 1;
+    }
+  }
+  console.log(tableauDonnees.numberOfChannels);
+}
+</pre>
+
+<h2 id="Spécification">Spécification</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('Web Audio API', '#widl-AudioBuffer-numberOfChannels', 'numberOfChannels')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support basique</td>
+   <td>14 {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>23</td>
+   <td>{{CompatNo}}</td>
+   <td>15 {{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatNo}}</td>
+   <td>28 {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>25</td>
+   <td>1.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/audiobuffer/samplerate/index.html b/files/fr/web/api/audiobuffer/samplerate/index.html
new file mode 100644
index 0000000000..be7a7baca5
--- /dev/null
+++ b/files/fr/web/api/audiobuffer/samplerate/index.html
@@ -0,0 +1,129 @@
+---
+title: AudioBuffer.sampleRate
+slug: Web/API/AudioBuffer/sampleRate
+translation_of: Web/API/AudioBuffer/sampleRate
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<div>
+<p>La propriété <code>sampleRate</code> de l'interface {{ domxref("AudioBuffer") }} renvoie un nombre à virgule flottante  représentant la taux d'échantillonage, en échantillons par seconde, des données PCM stockées dans la mémoire-tampon.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js;highlight[22]">var tableauMemoireTampon = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
+tableauMemoireTampon.sampleRate;
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un nombre à virgule flottante indiquant le taux d'échantillonnage actuelle des données du tampon, en echantillonnage par seconde.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js;highlight[22]">// Stereo
+var nombreCanaux = 2;
+
+// Crée une mémoire tampon vide de 2 secondes
+// à la fréquence d'échantillonage du contexte AudioContext
+var nombreFrames = contexteAudio.sampleRate * 2.0;
+var tableauDonnees = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
+
+
+bouton.onclick = function() {
+  // remplit la mémoire tampon avec du bruit blanc
+  // valeurs aléatoires entre -1.0 et 1.0
+  for (var canal = 0; canal &lt; nombreCanaux; canal++) {
+    // génère le tableau contenant les données
+    var tampon = tableauDonnees.getChannelData(canal);
+    for (var i = 0; i &lt; nombreFrames; i++) {
+      // Math.random() donne une valeur comprise entre [0; 1.0]
+      // l'audio doit être compris entre [-1.0; 1.0]
+      tampon[i] = Math.random() * 2 - 1;
+    }
+  }
+  console.log(tableauDonnees.sampleRate);
+}
+</pre>
+
+<h2 id="Spécification">Spécification</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('Web Audio API', '#widl-AudioBuffer-sampleRate', 'sampleRate')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_Navigateurs">Compatibilité des Navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support basique</td>
+   <td>14 {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>23</td>
+   <td>{{CompatNo}}</td>
+   <td>15 {{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatNo}}</td>
+   <td>28 {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>25</td>
+   <td>1.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/audiobuffersourcenode/buffer/index.html b/files/fr/web/api/audiobuffersourcenode/buffer/index.html
new file mode 100644
index 0000000000..7973ada3dc
--- /dev/null
+++ b/files/fr/web/api/audiobuffersourcenode/buffer/index.html
@@ -0,0 +1,154 @@
+---
+title: AudioBufferSourceNode.buffer
+slug: Web/API/AudioBufferSourceNode/buffer
+translation_of: Web/API/AudioBufferSourceNode/buffer
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<div class="summary">
+<p>La propriété <code><strong>buffer</strong></code> de l'interface {{ domxref("AudioBufferSourceNode") }} donne la possibilité de lire un son en utilisant un {{domxref("AudioBuffer")}} comme ressource audio.</p>
+</div>
+
+<p>Si la propriété <code>buffer</code> a la valeur NULL, elle définit un canal unique silencieux (chaque échantillon vaut 0).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>AudioBufferSourceNode</em>.buffer = <em>soundBuffer</em>;
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un {{domxref("AudioBuffer")}} qui contient les données représentant le son que le noeud va lire.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<div class="note">
+<p><strong>Note</strong>: pour un exemple complet, voir <a class="external external-icon" href="http://mdn.github.io/audio-buffer/">le code interprété</a>, ou <a class="external external-icon" href="https://github.com/mdn/audio-buffer">le code source</a>.</p>
+</div>
+
+<pre class="brush: js;highlight[19]">var myArrayBuffer = audioCtx.createBuffer(2, frameCount, audioCtx.sampleRate);
+
+button.onclick = function() {
+  // Remplit le buffer avec du bruit blanc;
+  // valeurs aléatoires entre -1.0 et 1.0
+  for (var channel = 0; channel &lt; channels; channel++) {
+   // Crée le ArrayBuffer qui contient effectivement les données
+   var nowBuffering = myArrayBuffer.getChannelData(channel);
+   for (var i = 0; i &lt; frameCount; i++) {
+     // Math.random() is in [0; 1.0]
+     // audio doit être compris entre [-1.0; 1.0]
+     nowBuffering[i] = Math.random() * 2 - 1;
+   }
+  }
+
+  // Crée un AudioBufferSourceNode.
+  // C'est le AudioNode à utiliser pour jouer un AudioBuffer
+  var source = audioCtx.createBufferSource();
+  // Définit le buffer dans l'AudioBufferSourceNode
+  source.buffer = myArrayBuffer;</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("Web Audio API", "#widl-AudioBufferSourceNode-buffer", "buffer")}}</td>
+   <td>{{Spec2("Web Audio API")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)<sup>[2]</sup></th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("23.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15 {{property_prefix("webkit")}}<br>
+    22</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+  <tr>
+   <td>Propriété <code>detune</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("40.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)<sup>[2]</sup></th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatNo}}</td>
+   <td>28 {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("25.0")}}</td>
+   <td>1.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+  <tr>
+   <td>Propriété <code>detune</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] supprimé dans Chrome 44.0. Etait supporté avec un préfixe <code>webkit</code> depuis la version 14.</p>
+
+<p>[2] Firefox ne gère pas correctement la valeur <code>null</code>. Au lieu de produire un noeud avec un seul canal silencieux, le noeud devient inutilisable et est ignoré si on essaie de le connecter à un autre noeud.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p>{{page("/en-US/docs/Web/API/AudioBufferSourceNode","See_also")}}</p>
diff --git a/files/fr/web/api/audiobuffersourcenode/detune/index.html b/files/fr/web/api/audiobuffersourcenode/detune/index.html
new file mode 100644
index 0000000000..60fc6f0121
--- /dev/null
+++ b/files/fr/web/api/audiobuffersourcenode/detune/index.html
@@ -0,0 +1,80 @@
+---
+title: AudioBufferSourceNode.detune
+slug: Web/API/AudioBufferSourceNode/detune
+tags:
+  - API
+  - Propriété
+  - Reference
+  - Web Audio API
+translation_of: Web/API/AudioBufferSourceNode/detune
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<p>La  propriété <code>detune</code> de l'interface {{ domxref("AudioBufferSourceNode") }} est un {{domxref("AudioParam")}} de type <a href="/fr/docs/DOM/AudioParam#k-rate">k-rate</a> représentant le désaccord des oscillations en <a href="http://en.wikipedia.org/wiki/Cent_%28music%29">cents</a>.</p>
+
+<p>Ses valeur sont comprises entre -1200 et 1200.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js"><code class="language-js"><span class="keyword token">var</span> source <span class="operator token">=</span> contexteAudio<span class="punctuation token">.</span><span class="function token">createBufferSource<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span></code>
+source.detune.value = 100; // valeur en cents</pre>
+
+<div class="note">
+<p><strong>Note:</strong> bien que l'<code>AudioParam</code> renvoyé soit en lecture seule, la valeur qu'il représente ne l'est pas.</p>
+</div>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un {{domxref("AudioParam")}} de type <a href="/fr/docs/DOM/AudioParam#k-rate">k-rate</a>.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js;highlight[9]">var audioCtx = new AudioContext();
+
+var nbChan = 2;
+var nbFrames = audioCtx.sampleRate * 2.0;
+
+var audioBuffer = audioCtx.createBuffer(nbChan, nbFrames, audioCtx.sampleRate);
+
+for (var chan = 0; chan &lt; nbChan; chan++) {
+  var chanData = audioBuffer.getChannelData(chan);
+  for (var i = 0; i &lt; nbFrames; i++) {
+    chanData[i] = Math.random() * 2 - 1;
+  }
+}
+
+var source = audioCtx.createBufferSource();
+source.buffer = audioBuffer;
+source.connect(audioCtx.destination);
+source.detune.value = 100; // valeur en cents
+source.start();
+</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('Web Audio API', '#widl-AudioBufferSourceNode-detune', 'detune')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+
+
+<p>{{Compat("api.AudioBufferSourceNode.detune")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/audiobuffersourcenode/index.html b/files/fr/web/api/audiobuffersourcenode/index.html
new file mode 100644
index 0000000000..b689f99b77
--- /dev/null
+++ b/files/fr/web/api/audiobuffersourcenode/index.html
@@ -0,0 +1,158 @@
+---
+title: AudioBufferSourceNode
+slug: Web/API/AudioBufferSourceNode
+tags:
+  - API
+  - Buffer
+  - Experimental
+  - Reference
+  - Web Audio API
+translation_of: Web/API/AudioBufferSourceNode
+---
+<p>{{APIRef("Web Audio API")}}</p>
+
+<p class="summary"><span lang="fr">L'interface <strong>AudioBufferSourceNode</strong> est un {{domxref("AudioScheduledSourceNode")}} qui représente une source audio constituée de données audio en mémoire, stockées dans un {{domxref ("AudioBuffer")}}. Elle est particulièrement utile pour lire des sons qui requierrent des conditions de lecture particulières, comme la synchronisation sur un certain rythme, et peuvent être stockés en mémoire. Si ce type de son doit être lu depuis le disque ou le réseau, il conviendra d'utiliser un {{domxref("AudioWorkletNode")}}. </span></p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<p><span lang="fr">Un AudioBufferSourceNode n'a pas d'entrée et il comporte une unique sortie, dont le nombre de canaux est spécifié par la propriété </span>{{domxref("AudioBufferSourceNode.buffer", "buffer")}}. <span lang="fr">Si aucun buffer n'est paramétré, c'est-à-dire si la valeur de l'attribut est NULL, la sortie contient un seul canal silencieux (chaque échantillon vaut 0).</span></p>
+
+<p><br>
+ <span lang="fr">Un</span> {{domxref("AudioBufferSourceNode")}} ne peut être joué qu'une seule fois; autrement dit un seul appel à la fonction <code>AudioBufferSourceNode.start()</code> est autorisé. Pour rejouer le son, il faut créer un nouvel <code>AudioBufferSourceNode</code>. Heureusement ces noeuds ne demandent pas beaucoup de ressource, et les véritables <code>AudioBuffer</code>s peuvent être réutilisés. On dit que les <code>AudioBufferSourceNode</code>s doivent être utilisés en mode "one shot": une fois que la lecture est lancée, toutes les références peuvent être supprimées, et elles seront collectées par le ramasse-miette automatiquement quand la lecture des sons sera terminée.</p>
+
+<p>Plusieurs appels à la fonction <code>AudioBufferSourceNode.stop()</code> sont autorisés. Le dernier appel remplace le précédent, à condition que le <code>AudioBufferSourceNode </code>n'ait pas déjà atteint la fin du buffer.</p>
+
+<p><img alt="The AudioBufferSourceNode takes the content of an AudioBuffer and m" src="https://mdn.mozillademos.org/files/12670/AudioBufferSourceNode.svg" style="height: 233px; padding-bottom: 10px; width: 438px;"></p>
+
+
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><dfn>Nombre d'entrées</dfn></th>
+   <td><code>0</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Nombre de sorties</dfn></th>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Nombre de canaux</dfn></th>
+   <td>défini par l'objet {{domxref("AudioBuffer")}} associé</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("AudioBufferSourceNode.AudioBufferSourceNode", "AudioBufferSourceNode()")}}</dt>
+ <dd>Crée et retourne un nouvel objet <code>AudioBufferSourceNode</code>. Un {{domxref("AudioBufferSourceNode")}} peut être instancié à l'aide la méthode {{domxref("AudioContext.createBufferSource()")}}.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Hérite des propriétés de son parent, {{domxref("AudioNode")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("AudioBufferSourceNode.buffer")}}</dt>
+ <dd>{{domxref ("AudioBuffer")}} qui définit la ressource à jouer; lorsqu'il a la valeur NULL, définit un canal unique silencieux (dans lequel chaque échantillon vaut 0.0).</dd>
+ <dt>{{domxref("AudioBufferSourceNode.detune")}}</dt>
+ <dd>{{domxref("AudioParam")}} de type <a href="/fr/docs/DOM/AudioParam#k-rate">k-rate</a> représentant le désaccordage de la fréquence exprimé en <a href="http://en.wikipedia.org/wiki/Cent_%28music%29">cents</a>. Cette valeur est composée à partir du <code>playbackRate</code> pour déterminer la vitesse à laquelle le son sera jouée. Sa valeur par défaut est <code>0</code> (qui correspond à aucun désaccordage), et son rang nominal va de -∞ à ∞.</dd>
+ <dt>{{domxref("AudioBufferSourceNode.loop")}}</dt>
+ <dd>Attribut booléen indiquant si la ressource doit être lue de nouveau lorsque la fin de l'{{domxref ("AudioBuffer")}} est atteinte. Sa valeur par défaut est <code>false</code>.</dd>
+ <dt>{{domxref("AudioBufferSourceNode.loopStart")}} {{optional_inline}}</dt>
+ <dd>Nombre flottant à double précision indiquant, en secondes, à quel moment de l'{{domxref ("AudioBuffer")}} la lecture doit reprendre. Sa valeur par défaut est 0.</dd>
+ <dt>{{domxref("AudioBufferSourceNode.loopEnd")}} {{optional_inline}}</dt>
+ <dd>Nombre flottant à double précision indiquant, en secondes, à quel moment de l'{{domxref ("AudioBuffer")}} la relecture doit s'arrêter (et éventuellement boucler à nouveau). Sa valeur par défaut est 0.</dd>
+ <dt>{{domxref("AudioBufferSourceNode.playbackRate")}}</dt>
+ <dd>{{domxref ("AudioParam")}} de type <a href="/fr/docs/Web/API/AudioParam#a-rate">a-rate</a> qui définit le facteur de vitesse à laquelle la ressource audio sera jouée. Comme aucune correction de pitch n'est appliquée sur la sortie, il peut être utilisé pour modifier le pitch de l'échantillon.</dd>
+</dl>
+
+<h3 id="Gestionnaires_d'évènement"><span class="short_text" id="result_box" lang="fr"><span class="hps">Gestionnaires d'évènement</span></span></h3>
+
+<p><em>Hérite des gestionnaires d'évènement de son parent, {{domxref("AudioScheduledSourceNode")}}</em>.</p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Hérite des méthodes de son parent, {{domxref("AudioNode")}}.</em></p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Cet exemple crée un tampon de deux secondes, le remplit avec du bruit blanc et le joue par l'intermédiaire d'un <code>AudioBufferSourceNode</code>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Vous pouvez aussi <a class="external external-icon" href="http://mdn.github.io/audio-buffer/">exécuter the code</a>, ou <a class="external external-icon" href="https://github.com/mdn/audio-buffer">regarder le code source</a>.</p>
+</div>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> contexteAudio <span class="operator token">=</span> <span class="keyword token">new</span> <span class="punctuation token">(</span>window<span class="punctuation token">.</span>AudioContext <span class="operator token">||</span> window<span class="punctuation token">.</span>webkitAudioContext<span class="punctuation token">)</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> bouton <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'button'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> pre <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'pre'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> monScript <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'script'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+pre<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> monScript<span class="punctuation token">.</span>innerHTML<span class="punctuation token">;</span>
+
+<span class="comment token">// Stéréo</span>
+<span class="keyword token">var</span> canaux <span class="operator token">=</span> <span class="number token">2</span><span class="punctuation token">;
+</span>
+<span class="comment token">// Crée un tampon vide de deux secondes</span>
+<span class="comment token">// au taux d'échantillonnage du AudioContext</span>
+<span class="keyword token">var</span> compteurTrames <span class="operator token">=</span> contexteAudio<span class="punctuation token">.</span>sampleRate <span class="operator token">*</span> <span class="number token">2.0</span><span class="punctuation token">;</span>
+
+<span class="keyword token">var</span> myArrayBuffer <span class="operator token">=</span> contexteAudio<span class="punctuation token">.</span><span class="function token">createBuffer</span><span class="punctuation token">(</span><span class="number token">2</span><span class="punctuation token">,</span> compteurTrames<span class="punctuation token">,</span> contexteAudio<span class="punctuation token">.</span>sampleRate<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+bouton<span class="punctuation token">.</span>onclick <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>
+  <span class="comment token">// remplit le tampon avec du bruit blanc;</span>
+  <span class="comment token">// valeurs aléatoires entre -1.0 et 1.0</span>
+  <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> canal <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> canal <span class="operator token">&lt;</span> canaux<span class="punctuation token">;</span> canal<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+   <span class="comment token">// crée le ArrayBuffer qui contient les données</span>
+   <span class="keyword token">var</span> nowBuffering <span class="operator token">=</span> myArrayBuffer<span class="punctuation token">.</span><span class="function token">getChannelData</span><span class="punctuation token">(</span>canal<span class="punctuation token">);</span>
+   <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token">&lt;</span> compteurTrames<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+     <span class="comment token">// Math.random() est compris entre [0; 1.0]</span>
+     <span class="comment token">// audio doit être compris entre [-1.0; 1.0]</span>
+     nowBuffering<span class="punctuation token">[</span>i<span class="punctuation token">]</span> <span class="operator token">=</span> Math<span class="punctuation token">.</span><span class="function token">random</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">*</span> <span class="number token">2</span> <span class="operator token">-</span> <span class="number token">1</span><span class="punctuation token">;</span>
+   <span class="punctuation token">}</span>
+  <span class="punctuation token">}</span>
+
+  <span class="comment token">// crée AudioBufferSourceNode.</span>
+  <span class="comment token">// c'est AudioNode utilisé pour lire un AudioBuffer</span>
+  <span class="keyword token">var</span> source <span class="operator token">=</span> contexteAudio<span class="punctuation token">.</span><span class="function token">createBufferSource</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="comment token">// initialise le tampon du AudioBufferSourceNode</span>
+  source<span class="punctuation token">.</span>buffer <span class="operator token">=</span> myArrayBuffer<span class="punctuation token">;</span>
+  <span class="comment token">// connecte l'AudioBufferSourceNode avec la destination</span>
+  <span class="comment token">// de façon à ce qu'on puisse entendre le son</span>
+  source<span class="punctuation token">.</span><span class="function token">connect</span><span class="punctuation token">(</span>contexteAudio<span class="punctuation token">.</span>destination<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="comment token">// lance la lecture de la source</span>
+  source<span class="punctuation token">.</span><span class="function token">start</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<div class="note">
+<p><strong>Note</strong>: Pour un exemple de <code>decodeAudioData</code>(), voir la page {{domxref("AudioContext.decodeAudioData")}}.</p>
+</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('Web Audio API', '#AudioBufferSourceNode-section', 'AudioBufferSourceNode')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div>{{Compat("api.AudioBufferSourceNode")}}</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/audiobuffersourcenode/loop/index.html b/files/fr/web/api/audiobuffersourcenode/loop/index.html
new file mode 100644
index 0000000000..f05b01a520
--- /dev/null
+++ b/files/fr/web/api/audiobuffersourcenode/loop/index.html
@@ -0,0 +1,155 @@
+---
+title: AudioBufferSourceNode.loop
+slug: Web/API/AudioBufferSourceNode/loop
+tags:
+  - API
+  - AudioBufferSourceNode
+  - Loop
+  - Reference
+  - Web Audio API
+translation_of: Web/API/AudioBufferSourceNode/loop
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<div>
+<p>La propriété <code>loop</code> de l'interface {{domxref("AudioBufferSourceNode") }} est un booléen indiquant si la ressource audio doit être rejouée quand à la fin de l'{{domxref("AudioBuffer")}}.</p>
+</div>
+
+<p>La valeur par défaut de la propriété <code>loop </code>est <code>false</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js;highlight[2]">var source = audioCtx.createBufferSource();
+source.loop = true;
+</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>Un booléen.</p>
+
+<p>Lorsque la lecture en boucle est activée, le son commence à jouer au point spécifié lorsque {{domxref("AudioBufferSourceNode.start", "start()")}} est appelée. Quand il atteint le point spécifié par la propriété {{domxref("AudioBufferSourceNode.loopEnd", "loopEnd")}}, il recommence au point spécifié par la propriété {{domxref("AudioBufferSourceNode.loopStart", "loopStart")}}</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans cet exemple, la fonction {{domxref("AudioContext.decodeAudioData")}} est utilisée pour décoder une piste audio et la placer dans un {{domxref("AudioBufferSourceNode")}}. Les boutons mis à disposition permettent de lire et d'arrêter la lecture audio, et un slider est utilisé pour changer la valeur de <code>playbackRate</code> en temps réel. Quand la lecture est terminée, elle boucle.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Vous pouvez <a class="external external-icon" href="http://mdn.github.io/decode-audio-data/">essayer un exemple live</a> (or <a class="external external-icon" href="https://github.com/mdn/decode-audio-data">voir la source</a>.)</p>
+</div>
+
+<pre class="brush: js;highlight[17]">function getData() {
+  source = audioCtx.createBufferSource();
+  request = new XMLHttpRequest();
+
+  request.open('GET', 'viper.ogg', true);
+
+  request.responseType = 'arraybuffer';
+
+  request.onload = function() {
+    var audioData = request.response;
+
+    audioCtx.decodeAudioData(audioData, function(buffer) {
+        myBuffer = buffer;
+        source.buffer = myBuffer;
+        source.playbackRate.value = playbackControl.value;
+        source.connect(audioCtx.destination);
+        source.loop = true;
+      },
+
+      function(e){"Error with decoding audio data" + e.err});
+
+  }
+
+  request.send();
+}
+
+// lie les boutons pour lire et arrêter l'audio, et le slider
+
+play.onclick = function() {
+  getData();
+  source.start(0);
+  play.setAttribute('disabled', 'disabled');
+  playbackControl.removeAttribute('disabled');
+}</pre>
+
+<h2 id="Spécification">Spécification</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('Web Audio API', '#widl-AudioBufferSourceNode-loop', 'loop')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support basique</td>
+   <td>14 {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>23</td>
+   <td>{{CompatNo}}</td>
+   <td>15 {{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatNo}}</td>
+   <td>28 {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>25</td>
+   <td>1.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/audiobuffersourcenode/loopend/index.html b/files/fr/web/api/audiobuffersourcenode/loopend/index.html
new file mode 100644
index 0000000000..b76cfb83a8
--- /dev/null
+++ b/files/fr/web/api/audiobuffersourcenode/loopend/index.html
@@ -0,0 +1,107 @@
+---
+title: AudioBufferSourceNode.loopEnd
+slug: Web/API/AudioBufferSourceNode/loopEnd
+tags:
+  - API
+  - Audio
+  - AudioBufferSourceNode
+  - Propriété
+  - Reference
+  - Web Audio API
+translation_of: Web/API/AudioBufferSourceNode/loopEnd
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<p>La propriété <strong><code>loopEnd</code></strong> de l'interface {{ domxref("AudioBufferSourceNode") }} est un nombre flottant à double précision qui indique, en secondes, à quel moment de l'{{domxref("AudioBuffer")}} la relecture doit s'arrêter, et éventuellement boucler de nouveau en reprenant à la position indiquée par la propriété {{domxref("AudioBufferSourceNode.loopStart", "loopStart")}}. Elle n'est prise en compte que si la propriété {{domxref("AudioBufferSourceNode.loop", "loop")}} vaut <code>true.</code></p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js;highlight[20]">var source = contexteAudio.createBufferSource();
+source.loopEnd = 3;
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un nombre flottant à double précision. La valeur par défaut est <code>0</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, la fonction {{domxref("AudioContext.decodeAudioData")}} est utilisée pour décoder une piste audio et la mettre dans un {{domxref("AudioBufferSourceNode")}}. L'interface fournit deux boutons pour démarrer et arrêter la lecture, et des sliders pour modifier les propriétés <code>playbackRate</code>, <code>loopStart</code> et <code>loopEnd</code> à la volée.</p>
+
+<p>Lorsque la lecture de la source audio est terminée, elle boucle. Il est possible de contrôler la durée de la boucle en modifiant <code>loopStart</code> et <code>loopEnd</code>. Par exemple, si leurs valeurs sont fixées à 20 et 25, respectivement, le son bouclera entre la 20ème et la 25ème secondes du morceau.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Voir <a href="http://mdn.github.io/decode-audio-data/"> l'exemple complet</a> et <a href="https://github.com/mdn/decode-audio-data">son code source</a>.</p>
+</div>
+
+<pre class="brush: js">function getData() {
+  source = contexteAudio.createBufferSource();
+  requete = new XMLHttpRequest();
+
+  requete.open('GET', 'viper.ogg', true);
+
+  requete.responseType = 'arraybuffer';
+
+
+  requete.onload = function() {
+    var donneesAudio = requete.response;
+
+    contexteAudio.decodeAudioData(donneesAudio, function(buffer) {
+        maMemoireTampon = buffer;
+        dureeMorceau = buffer.duration;
+        source.buffer = maMemoireTampon;
+        source.playbackRate.value = playbackControl.value;
+        source.connect(contexteAudio.destination);
+        source.loop = true;
+
+        loopstartControl.setAttribute('max', Math.floor(dureeMorceau));
+        loopendControl.setAttribute('max', Math.floor(dureeMorceau));
+      },
+
+      function(e){"Erreur lors du décodage des données audio " + e.err});
+
+  }
+
+  requete.send();
+}
+
+  ...
+
+loopstartControl.oninput = function() {
+  source.loopStart = loopstartControl.value;
+  loopstartValue.innerHTML = loopstartControl.value;
+}
+
+loopendControl.oninput = function() {
+  source.loopEnd = loopendControl.value;
+  loopendValue.innerHTML = loopendControl.value;
+}</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('Web Audio API', '#widl-AudioBufferSourceNode-loopEnd', 'loopEnd')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.AudioBufferSourceNode.loopEnd")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/audiobuffersourcenode/loopstart/index.html b/files/fr/web/api/audiobuffersourcenode/loopstart/index.html
new file mode 100644
index 0000000000..25c55f52d1
--- /dev/null
+++ b/files/fr/web/api/audiobuffersourcenode/loopstart/index.html
@@ -0,0 +1,152 @@
+---
+title: AudioBufferSourceNode.loopStart
+slug: Web/API/AudioBufferSourceNode/loopStart
+translation_of: Web/API/AudioBufferSourceNode/loopStart
+---
+<p>{{ APIRef("Web Audio API") }}<br>
+ La propriété <code>loopStart</code> de l'interface {{ domxref("AudioBufferSourceNode") }} est un nombre flottant à double précision qui indique, en secondes, à quel moment de l'{{domxref("AudioBuffer")}} la lecture doit reprendre lors d'une boucle. Elle n'est prise en compte que lorque la propriété {{domxref("AudioBufferSourceNode.loop", "loop")}} est <code>true</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js;highlight[20]">var source = contexteAudio.createBufferSource();
+source.loopStart = 3;
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un nombre flottant à double précision. La valeur par défaut est <code>0</code>.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans cet exemple, la fonction {{domxref("AudioContext.decodeAudioData")}} est utilisée pour décoder une piste audio et la mettre dans un {{domxref("AudioBufferSourceNode")}}. L'interface fournit deux boutons pour démarrer et arrêter la lecture, et des sliders pour modifier les propriétés <code>playbackRate</code>, <code>loopStart</code> et <code>loopEnd</code> à la volée.</p>
+
+<p>Lorsque la lecture de la source audio est terminée, elle boucle. Il est possible de contrôler la durée de la boucle en modifiant <code>loopStart</code> et <code>loopEnd</code>. Par exemple, si leurs valeurs sont fixées à 20 et 25, respectivement, le son bouclera entre la 20ème et la 25ème secondes du morceau.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Voir <a class="external external-icon" href="http://mdn.github.io/decode-audio-data/"> l'exemple complet</a> et <a class="external external-icon" href="https://github.com/mdn/decode-audio-data">son code source</a>.</p>
+</div>
+
+<pre class="brush: js">function getData() {
+  source = contexteAudio.createBufferSource();
+  requete = new XMLHttpRequest();
+
+  requete.open('GET', 'viper.ogg', true);
+
+  requete.responseType = 'arraybuffer';
+
+
+  requete.onload = function() {
+    var donneesAudio = requete.response;
+
+    contexteAudio.decodeAudioData(donneesAudio, function(buffer) {
+        maMemoireTampon = buffer;
+        dureeMorceau = buffer.duration;
+        source.buffer = maMemoireTampon;
+        source.playbackRate.value = playbackControl.value;
+        source.connect(contexteAudio.destination);
+        source.loop = true;
+
+        loopstartControl.setAttribute('max', Math.floor(dureeMorceau));
+        loopendControl.setAttribute('max', Math.floor(dureeMorceau));
+      },
+
+      function(e){"Erreur lors du décodage des données audio " + e.err});
+
+  }
+
+  requete.send();
+}
+
+  ...
+
+loopstartControl.oninput = function() {
+  source.loopStart = loopstartControl.value;
+  loopstartValue.innerHTML = loopstartControl.value;
+}
+
+loopendControl.oninput = function() {
+  source.loopEnd = loopendControl.value;
+  loopendValue.innerHTML = loopendControl.value;
+}</pre>
+
+<h2 id="Spécification">Spécification</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('Web Audio API', '#widl-AudioBufferSourceNode-loopStart', 'loopStart')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support basique</td>
+   <td>14 {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>23</td>
+   <td>{{CompatNo}}</td>
+   <td>15 {{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatNo}}</td>
+   <td>28 {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>25</td>
+   <td>1.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/audiobuffersourcenode/playbackrate/index.html b/files/fr/web/api/audiobuffersourcenode/playbackrate/index.html
new file mode 100644
index 0000000000..550f87be46
--- /dev/null
+++ b/files/fr/web/api/audiobuffersourcenode/playbackrate/index.html
@@ -0,0 +1,201 @@
+---
+title: AudioBufferSourceNode.playbackRate
+slug: Web/API/AudioBufferSourceNode/playbackRate
+translation_of: Web/API/AudioBufferSourceNode/playbackRate
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<div>
+<p>La propriété <code>playbackRate</code> de l'interface {{ domxref("AudioBufferSourceNode") }} est un {{domxref("AudioParam")}} de type <a href="https://developer.mozilla.org/en-US/docs/DOM/AudioParam#k-rate">k-rate</a> qui définit la vitesse à laquelle le contenu audio sera lu.</p>
+</div>
+
+<p>Une valeur de 1.0 (c'est ) indique que le son doit être lu à la vitesse de son taux d'échantillonnage, une valeur inférieure qu'il doit être lu plus lentement, et une valeur supérieure plus rapidement. la valeur par défaut est <code>1.0</code>. Pour toute autre valeur l'<code>AudioBufferSourceNode</code> rééchantillone le son avant de l'envoyer vers la sortie.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var source = contexteAudio.createBufferSource();
+source.playbackRate.value = 1.25; // proportion : 25% plus rapide que la vitesse normale
+</pre>
+
+<div class="syntaxbox">
+<div class="note">
+<p><strong>Note</strong>: Bien que le <code>AudioParam</code> renvoyé soit en lecture seule, la valeur qu'il représente ne l'est pas.</p>
+</div>
+</div>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un {{domxref("AudioParam")}} dont la {{domxref("AudioParam.value", "value")}} est un nombre flottant à double précision, qui représente la vitesse de lecture d'un son en proportion décimale du taux d'échantillonnage original.</p>
+
+<p>Considérons un buffer audio échantillonné à 44.1 kHz (44,100 échantillons par seconde). Observons l'effet de quelques valeurs de la propriété <code>playbackRate</code> :</p>
+
+<ul>
+ <li>un <code>playbackRate</code> de 1.0 entraîne une lecture à vitesse originale : 44,100 Hz.</li>
+ <li>un <code>playbackRate</code> de 0.5 entraîne une lecture à la moitié de la vitesse originale : 22,050 Hz.</li>
+ <li>un <code>playbackRate</code> de 2.0 entraîne une lecture au double de la vitesse originale : 88,200 Hz.</li>
+</ul>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans cet exemple, la fonction {{domxref("AudioContext.decodeAudioData")}} est utilisée pour décoder une piste audio et la mettre dans un {{domxref("AudioBufferSourceNode")}}. L'interface fournit deux boutons pour démarrer et arrêter la lecture, et des sliders pour modifier les propriétés <code>playbackRate</code>, <code>loopStart</code> et <code>loopEnd</code> à la volée.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Voir <a class="external external-icon" href="http://mdn.github.io/decode-audio-data/"> l'exemple complet</a> et <a class="external external-icon" href="https://github.com/mdn/decode-audio-data">son code source</a>.</p>
+</div>
+
+<pre class="brush: html">&lt;input class="playback-rate-control" type="range" min="0.25" max="3" step="0.05" value="1"&gt;
+&lt;span class="playback-rate-value"&gt;1.0&lt;/span&gt;
+</pre>
+
+<pre class="brush: js;highlight[15]">function getData() {
+  source = contexteAudio.createBufferSource();
+  requete = new XMLHttpRequest();
+
+  requete.open('GET', 'viper.ogg', true);
+
+  requete.responseType = 'arraybuffer';
+
+
+  requete.onload = function() {
+    var donneesAudio = requete.response;
+
+    contexteAudio.decodeAudioData(donneesAudio, function(buffer) {
+        maMemoireTampon = buffer;
+        dureeMorceau = buffer.duration;
+        source.buffer = maMemoireTampon;
+        source.playbackRate.value = playbackControl.value;
+        source.connect(contexteAudio.destination);
+        source.loop = true;
+
+        loopstartControl.setAttribute('max', Math.floor(dureeMorceau));
+        loopendControl.setAttribute('max', Math.floor(dureeMorceau));
+      },
+
+      function(e){"Erreur lors du décodage des données audio " + e.err});
+
+  }
+
+  requete.send();
+}
+
+// connecte les boutons pour lancer et arrêter la lecture, et modifier la vitesse de lecture
+
+play.onclick = function() {
+  getData();
+  source.start(0);
+  play.setAttribute('disabled', 'disabled');
+  playbackControl.removeAttribute('disabled');
+}
+
+stop.onclick = function() {
+  source.stop(0);
+  play.removeAttribute('disabled');
+  playbackControl.setAttribute('disabled', 'disabled');
+}
+
+playbackControl.oninput = function() {
+  source.playbackRate.value = playbackControl.value;
+  playbackValue.innerHTML = playbackControl.value;
+}</pre>
+
+<h2 id="Spécification">Spécification</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('Web Audio API', '#widl-AudioBufferSourceNode-playbackRate', 'playbackRate')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support basique</td>
+   <td>14 {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>23</td>
+   <td>{{CompatNo}}</td>
+   <td>15 {{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+  <tr>
+   <td>Lecture inversée avec playbackRate &lt; 0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatNo}}</td>
+   <td>28 {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>25</td>
+   <td>1.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+  <tr>
+   <td>Lecture inversée avec playbackRate &lt; 0</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/audiobuffersourcenode/start/index.html b/files/fr/web/api/audiobuffersourcenode/start/index.html
new file mode 100644
index 0000000000..a92ef12caa
--- /dev/null
+++ b/files/fr/web/api/audiobuffersourcenode/start/index.html
@@ -0,0 +1,140 @@
+---
+title: AudioBufferSourceNode.start()
+slug: Web/API/AudioBufferSourceNode/start
+translation_of: Web/API/AudioBufferSourceNode/start
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<div>
+<p>La méthode <code>start()</code> de l'interface {{ domxref("AudioBufferSourceNode") }} permet de planifier la lecture du buffer audio.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>AudioBufferSourceNode</em>.start([<em>when</em>][, <em>offset</em>][, <em>duration</em>]);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>when {{optional_inline}}</dt>
+ <dd>Le paramètre <code>when</code> indique <em>à quel moment</em> la lecture doit commencer. Si <code>when</code> représente une date passée, la lecture commence immédiatement. Si la méthode est invoquée plus d'une fois, ou après un appel à <code>AudioBufferSourceNode.stop()</code>, une exception est levée.<br>
+ Le temps, en secondes, auquel la lecture doit commencer, spécifié dans le même systèmes de coordonnées temporalles utilisé par {{domxref("AudioContext")}}. Si <code>when</code> est inférieur à ({{domxref("AudioContext.currentTime")}}, ou égal à 0, la lecture commence immédiatement. <strong>La valeur par défaut est 0.</strong></dd>
+ <dt>offset {{optional_inline}}</dt>
+ <dd>Décalage, en secondes, indiquant où la lecture doit commencer. Par example, pour lancer la lecture au milieu d'un son durant 10 secondes, l'<code>offset</code> doit être 5. La valeur par défaut, 0, démarre la lecture au début du buffer. Les valeurs supérieures à la fin du son sont silencieusement ajustées à la valeur maximum possible (basée sur les propriétés {{domxref("AudioBuffer.duration", "duration")}} et/ou {{domxref("AudioBufferSourceNode.loopEnd", "loopEnd")}}). Le calcul du décalage se fait en utilisant le taux d'échantillonnage original, donc même lorsqu'un son est lu au double de sa vitesse, le milieu d'un buffer de 10 secondes est toujours 5.</dd>
+ <dt>duration {{optional_inline}}</dt>
+ <dd>Le paramètre <code>duration</code>, dont la valeur par défaut est la longueur du contenu moins le décalage (offset) du début de lecture, indique la longueur du contenu audio qui doit être lue.<br>
+ Durée du son qui doit être lue, en secondes. Si ce paramètre n'est pas spécifié ou a pour valeur 0 (valeur par défaut), le son est lu jusqu'à la fin, s'il n'est pas arrêté par la méthode {{domxref("AudioScheduledSourceNode.stop", "stop()")}}. L'utilisation de ce paramètre est fonctionellement équivalente à l'appel de la méthode <code>start(when, offset)</code> suivi de la méthode <code>stop(when+duration)</code>.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<dl>
+ <dt><code>TypeError</code></dt>
+ <dd>Une valeur négative a été spécifiée pour au moins l'un des trois paramètres de temps. N'essayez pas de trafiquer les lois de la physique.</dd>
+ <dt><code>InvalidStateError</code></dt>
+ <dd><code>start()</code> a déjà été appelé. Cette fonction ne peut être appelée qu'une seule fois pour chaque <code>AudioBufferSourceNode</code>.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>L'exemple le plus simple lance la lecture du buffer audio depuis le début - inutile de spécifier des paramètres dans ce cas:</p>
+
+<pre class="brush: js">source.start();</pre>
+
+<p>L'exemple suivant, plus complexe, jouera, après une seconde de pause, un tronçon d'une durée de 10 secondes à partir de la 3ème seconde des données en mémoire.</p>
+
+<pre class="brush: js">source.start(contexteAudio.currentTime + 1,3,10);</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Pour un exemple plus complexe montrant la méthode <code>start()</code> en action, consulter l'exemple {{domxref("AudioContext.decodeAudioData")}}. Voir aussi <a class="external external-icon" href="http://mdn.github.io/decode-audio-data/"> l'exemple complet</a> et <a class="external external-icon" href="https://github.com/mdn/decode-audio-data">son code source</a>.</p>
+</div>
+
+<dl>
+</dl>
+
+<h2 id="Spécification">Spécification</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('Web Audio API', '#widl-AudioBufferSourceNode-start-void-double-when-double-offset-double-duration', 'start()')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support basique</td>
+   <td>14 {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>23</td>
+   <td>{{CompatNo}}</td>
+   <td>15 {{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatNo}}</td>
+   <td>28 {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>25</td>
+   <td>1.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/audiocontext/creategain/index.html b/files/fr/web/api/audiocontext/creategain/index.html
new file mode 100644
index 0000000000..b9142efffc
--- /dev/null
+++ b/files/fr/web/api/audiocontext/creategain/index.html
@@ -0,0 +1,167 @@
+---
+title: AudioContext.createGain()
+slug: Web/API/AudioContext/createGain
+tags:
+  - API
+  - Audio
+  - AudioContext
+  - Contrôle du volume
+  - Méthode
+  - Son
+  - Volume
+  - Web Audio
+  - createGain
+translation_of: Web/API/BaseAudioContext/createGain
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<div>
+<p>La méthode createGain de l'interface {{ domxref("AudioContext") }} crée un {{ domxref("GainNode") }} qui peut être utilisé pour contrôler le volume global du graphe audio.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var contexteAudio = new AudioContext();
+var gainNode = contexteAudio.createGain();</pre>
+
+<h3 id="Description" name="Description">Retourne</h3>
+
+<p>Un {{domxref("GainNode")}} qui prend en entrée une ou plusieurs sources audio et en sortie un son dont le volume a été ajusté à un niveau indiqué par le paramètre de type <a href="https://developer.mozilla.org/en-US/docs/Web/API/AudioParam#a-rate">a-rate</a> {{domxref("GainNode.gain")}}.</p>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<p>L'exemple suivant montre l'utilisation d'un {{domxref("AudioContext")}} pour créer un {{ domxref("GainNode") }}, qui sert à activer et désactiver le son au clic d'un bouton, en changeant la valeur de la propriété gain.<br>
+ <br>
+ L'extrait de code ci-dessous ne fonctionne pas tel quel - pour un exemple complet qui fonctionne, consulter la démo <a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a> (<a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js">et son code source</a>.)</p>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;button class="boutonson"&gt;Mute button&lt;/button&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: js">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+var gainNode = contexteAudio.createGain();
+var boutonSon = document.querySelector('.boutonson'),
+    source;
+
+if (navigator.getUserMedia) {
+  navigator.getUserMedia (
+    // contraintes - cette app nécessite seulement l'audio
+    {
+       audio: true
+    },
+    // fonction de rappel en cas de succès
+    function (flux) {
+        source = contexteAudio.createMediaStreamSource(flux);
+    },
+    // fonction de rappel en cas d'erreur
+    function (erreur) {
+        console.log("L'erreur à la noix suivante vient de se produire : " + erreur);
+    });
+}
+else {
+    console.log("getUserMedia n'est pas supporté par votre navigateur !");
+}
+
+source.connect(gainNode);
+gainNode.connect(contexteAudio.destination);
+
+  ...
+
+boutonSon.onclick = couperSon;
+
+function couperSon () {
+    if (boutonSon.id == "") {
+        gainNode.gain.value = 0;
+        boutonSon.id = "activated";
+        boutonSon.innerHTML = "Activer le son";
+    }
+    else {
+        gainNode.gain.value = 1;
+        boutonSon.id = "";
+        boutonSon.innerHTML = "Couper le son";
+    }
+}</pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#widl-AudioContext-createGain-GainNode', 'createGain()')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateur">Compatibilité navigateur</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support basique</td>
+   <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(25.0)}} </td>
+   <td>{{CompatNo}}</td>
+   <td>15.0{{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6.0{{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>26.0</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>33.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="sect1"> </h2>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/audiocontext/createmediaelementsource/index.html b/files/fr/web/api/audiocontext/createmediaelementsource/index.html
new file mode 100644
index 0000000000..ae1878798d
--- /dev/null
+++ b/files/fr/web/api/audiocontext/createmediaelementsource/index.html
@@ -0,0 +1,108 @@
+---
+title: AudioContext.createMediaElementSource()
+slug: Web/API/AudioContext/createMediaElementSource
+translation_of: Web/API/AudioContext/createMediaElementSource
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<div>
+<p>La méthode <code>createMediaElementSource()</code> de l’interface {{ domxref("AudioContext") }} est utilisée pour créer un nouvel objet {{ domxref("MediaElementAudioSourceNode") }} d’après un élément HTML {{ htmlelement("audio") }} ou {{ htmlelement("video") }} existant, permettant ainsi de jouer et de manipuler l’audio de cet élément.</p>
+</div>
+
+<p>Pour plus de détails à propos des nœuds source audio des éléments média, constultez la page de référence de {{ domxref("MediaElementAudioSourceNode") }}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var audioCtx = new AudioContext();
+var source = audioCtx.createMediaElementSource(myMediaElement);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>myMediaElement</code></dt>
+ <dd>Un objet {{domxref("HTMLMediaElement")}} que vous voulez injecter dans un graphe de traitement audio pour le manipuler.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un {{domxref("MediaElementAudioSourceNode")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Cet exemple simple crée une source depuis un élément {{ htmlelement("audio") }} grâce à <code>createMediaElementSource()</code>, puis passe le signal audio à travers un {{ domxref("GainNode") }} avant de l’injecter dans le {{ domxref("AudioDestinationNode") }} pour la lecture. Quand le pointeur de la souris est déplacé, la fonction <code>updatePage()</code> est invoquée, et calcule le gain actuel comme rapport de la position Y de la souris divisée par la hauteur totale de la fenêtre. Vous pouvez ainsi augmenter ou diminuer le volume de la musique jouée, en déplaçant le pointeur de la souris vers le haut ou vers le bas.</p>
+
+<div class="note">
+<p><strong>Note</strong> : Vous pouvez également <a href="http://mdn.github.io/webaudio-examples/media-source-buffer/">voir cet exemple en temps réel</a>, ou <a href="https://github.com/mdn/webaudio-examples/tree/master/media-source-buffer">examiner le code source</a>.</p>
+</div>
+
+<pre class="brush: js">var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+var myAudio = document.querySelector('audio');
+var pre = document.querySelector('pre');
+var myScript = document.querySelector('script');
+
+pre.innerHTML = myScript.innerHTML;
+
+// Crée un MediaElementAudioSourceNode
+// et y injecte le HTMLMediaElement
+var source = audioCtx.createMediaElementSource(myAudio);
+
+// Crée un nœud gain
+var gainNode = audioCtx.createGain();
+
+// Crée les variables pour stocker la position Y du pointeur
+// et la HAUTEUR de l’écran
+var CurY;
+var HEIGHT = window.innerHeight;
+
+// Récupère les nouvelles coordonnées du pointeur quand la souris est déplacée
+// et définit la nouvelle valeur de gain
+
+document.onmousemove = updatePage;
+
+function updatePage(e) {
+    CurY = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
+
+    gainNode.gain.value = CurY/HEIGHT;
+}
+
+
+// connecte le AudioBufferSourceNode au nœud gain
+// et le nœud gain à la destination, de sorte qu’on puisse jouer la
+// musique et ajuster le volume avec le curseur de la souris
+source.connect(gainNode);
+gainNode.connect(audioCtx.destination);</pre>
+
+<div class="note">
+<p><strong>Note </strong>: Du fait de l’appel à <code>createMediaElementSource()</code>, la lecture de l’audio du {{ domxref("HTMLMediaElement") }} est redirigée dans le graphe de traitement de l’AudioContext. Ainsi, jouer / mettre en pause le média est toujours possible via l’API des éléments média ou via les contrôles du lecteur.</p>
+</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('Web Audio API', '#widl-AudioContext-createMediaElementSource-MediaElementAudioSourceNode-HTMLMediaElement-mediaElement', 'createMediaElementSource()')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité dans cette page est généré depuis des données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.AudioContext.createMediaElementSource")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/audiocontext/index.html b/files/fr/web/api/audiocontext/index.html
new file mode 100644
index 0000000000..f6a38fa8bd
--- /dev/null
+++ b/files/fr/web/api/audiocontext/index.html
@@ -0,0 +1,308 @@
+---
+title: AudioContext
+slug: Web/API/AudioContext
+tags:
+  - API
+  - Audio
+  - Buffer
+  - Experimental
+  - Reference
+  - Web Audio API
+translation_of: Web/API/AudioContext
+---
+<p>{{APIRef("Web Audio API")}}</p>
+
+<p>L'interface AudioContext représente un graphe de traitement audio fait de modules audio reliés entre eux, chaque module correspondant à un {{domxref ("AudioNode")}}. Un contexte audio contrôle à la fois la création des nœuds qu'il contient et l'exécution du traitement audio, ou du décodage. On commence toujours par créer un contexte audio, et tout ce qui va se passer ensuite se situera dans ce contexte.</p>
+
+<p>Un contexte audio peut être la cible d'événements, par conséquent il implémente l'interface {{domxref ("EventTarget")}}.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("AudioContext.AudioContext", "AudioContext()")}}</dt>
+ <dd>Crée et retourne un nouvel objet <code>AudioContext</code>.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("AudioContext.currentTime")}} {{readonlyInline}}</dt>
+ <dd>Renvoie un double flottant, qui représente un temps en secondes en augmentation continue, utilisé pour situer dans le temps. Il commence à <code>0</code>.</dd>
+ <dt>{{domxref("AudioContext.destination")}} {{readonlyInline}}</dt>
+ <dd>Retourne un {{domxref ("AudioDestinationNode")}} représentant la destination finale de tous les fichiers audio dans un contexte. On peut le considérer comme un dispositif de rendu audio.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("AudioContext.listener")}} {{readonlyInline}}</dt>
+ <dd>Renvoie l'objet {{domxref("AudioListener")}}, utilisé pour la spatialisation 3D.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("AudioContext.sampleRate")}} {{readonlyInline}}</dt>
+ <dd>Renvoie un nombre flottant représentant la fréquence d'échantillonnage (échantillons par seconde) utilisée par tous les nœuds dans ce contexte.La fréquence d'échantillonnage d'un contexte audio ne peut pas être modifiée.</dd>
+ <dt>{{domxref("AudioContext.state")}} {{readonlyInline}}</dt>
+ <dd>Renvoie l'état actuel du contexte audio.</dd>
+ <dt>{{domxref("AudioContext.mozAudioChannelType")}} {{ non-standard_inline() }} {{readonlyInline}}</dt>
+ <dd>Sur Firefox OS, utilisé pour renvoyer la piste audio dans laquelle sera jouée le son qui sera lancé dans le contexte audio.</dd>
+</dl>
+
+<h3 id="Event_handlers">Event handlers</h3>
+
+<dl>
+ <dt>{{domxref("AudioContext.onstatechange")}}</dt>
+ <dd>Un gestionnaire d'évènement déclenché par un évènement du type {{event("statechange")}}. Cela a lieu quand l'état du contexte audio change, en raison de l'appel des méthodes de changement d'état ({{domxref("AudioContext.suspend")}}, {{domxref("AudioContext.resume")}}, ou {{domxref("AudioContext.close")}}.)</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Met également en œuvre des méthodes de l'interface {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("AudioContext.close()")}}</dt>
+ <dd>Supprime le contexte audio, et libère toutes les ressources audio système qu'il utilisait.</dd>
+ <dt>{{domxref("AudioContext.createBuffer()")}}</dt>
+ <dd>Crée un nouvel objet {{domxref ("AudioBuffer")}} vide, auquel on pourra assigner des données et que l'on pourra jouer via un {{ domxref("AudioBufferSourceNode") }}</dd>
+ <dt>{{domxref("AudioContext.createBufferSource()")}}</dt>
+ <dd>Crée un objet {{domxref ("AudioBufferSourceNode")}}, qui peut être utilisé pour jouer et manipuler des données audio contenues dans un objet {{domxref("AudioBuffer")}}. Les {{domxref("AudioBuffer")}}s sont créés avec la fonction {{domxref("AudioContext.createBuffer")}} ou retournés par la fonction {{domxref("AudioContext.decodeAudioData")}} quand elle décode une piste audio avec succès.</dd>
+ <dt>{{domxref("AudioContext.createMediaElementSource()")}}</dt>
+ <dd>Crée un objet {{domxref ("MediaElementAudioSourceNode")}} associé à {{domxref ("HTMLMediaElement")}}. Il peut être utilisé pour manipuler le son d'éléments {{HTMLElement("video")}} ou {{HTMLElement("audio")}}.</dd>
+ <dt>{{domxref("AudioContext.createMediaStreamSource()")}}</dt>
+ <dd>Crée un objet {{domxref ("MediaStreamAudioSourceNode")}} associé à un {{domxref ("MediaStream")}} correspondant à un flux audio, qui peut provenir du microphone de l'ordinateur local ou d'autres sources.</dd>
+ <dt>{{domxref("AudioContext.createMediaStreamDestination()")}}</dt>
+ <dd>Crée un objet {{domxref ("MediaStreamAudioDestinationNode")}} associé à un {{domxref ("MediaStream")}} correspondant à un flux audio, qui peut être stocké dans un fichier local ou envoyé à un autre ordinateur.</dd>
+ <dt>{{domxref("AudioContext.createScriptProcessor()")}}</dt>
+ <dd>Crée un objet {{domxref ("ScriptProcessorNode")}} qui sert à faire du traitement audio directement avec JavaScript.</dd>
+ <dt>{{domxref("AudioContext.createStereoPanner()")}}</dt>
+ <dd>Crée un objet {{domxref ("StereoPannerNode")}} qui permet d'appliquer une panoramique sonore à une source audio.</dd>
+ <dt>{{domxref("AudioContext.createAnalyser()")}}</dt>
+ <dd>Crée un objet {{domxref ("AnalyserNode")}} qui expose les données de temps et de fréquence, et peut être utilisé pour créer des visualisations de données.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("AudioContext.createBiquadFilter()")}}</dt>
+ <dd>Crée un objet {{domxref ("BiquadFilterNode")}}, qui représente un filtre de deuxième niveau, qui combine différents types de filtres de base : fréquences hautes, fréquences basses, passe-bande, etc.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("AudioContext.createChannelMerger()")}}</dt>
+ <dd>Crée un objet {{domxref ("ChannelMergerNode")}} qui permet de rassembler les canaux de différents flux audio en un seul flux.</dd>
+ <dt>{{domxref("AudioContext.createChannelSplitter()")}}</dt>
+ <dd>Crée un objet {{domxref ("ChannelSplitterNode")}} utilisé pour accéder aux différents canaux d'un même flux audio et les traiter séparément.</dd>
+ <dt>{{domxref("AudioContext.createConvolver()")}}</dt>
+ <dd>Crée un objet {{domxref ("ConvolverNode")}}, qui permet d'appliquer des effets de convolution à un graphe audio, par exemple un effet de réverb.</dd>
+ <dt>{{domxref("AudioContext.createDelay()")}}</dt>
+ <dd>Crée un objet {{domxref ("DelayNode")}}, utilisé pour retarder le signal audio entrant d'un certain temps. Il est également </dd>
+ <dt>{{domxref("AudioContext.createDynamicsCompressor()")}}</dt>
+ <dd>Crée un objet {{domxref("DynamicsCompressorNode")}} qui permet d'appliquer une compression sur un signal audio.</dd>
+ <dt>{{domxref("AudioContext.createGain()")}}</dt>
+ <dd>Crée un objet {{domxref ("GainNode")}} qui permet de controller le niveau sonore global d'un graphe audio.</dd>
+ <dt>{{domxref("AudioContext.createIIRFilter()")}}</dt>
+ <dd>Crée un objet {{domxref("IIRFilterNode")}}, qui représente un filtre de second ordre configurable comme différents types de filtres communs.</dd>
+ <dt>{{domxref("AudioContext.createOscillator()")}}</dt>
+ <dd>Crée un objet {{domxref("OscillatorNode")}} qui représente une onde périodique. Il génère simplement un son.</dd>
+ <dt>{{domxref("AudioContext.createPanner()")}}</dt>
+ <dd>Crée un objet {{domxref("PannerNode")}} utilisé pour spatialiser une source audio entrante dans un espace 3D.</dd>
+ <dt>{{domxref("AudioContext.createPeriodicWave()")}}</dt>
+ <dd>Crée un objet {{domxref("PeriodicWave")}}, utilisé pour définir une onde périodique qui peut être utilisée pour contrôler la sortie d'un {{ domxref("OscillatorNode") }}.</dd>
+ <dt>{{domxref("AudioContext.createWaveShaper()")}}</dt>
+ <dd>Crée un objet {{domxref ("WaveShaperNode")}}, qui permet d'implémenter des effets de distorsion non linéaires.</dd>
+ <dt>{{domxref("AudioContext.createAudioWorker()")}}</dt>
+ <dd>Crée un objet {{domxref("AudioWorkerNode")}}, qui permet d'interagir avec un thread web worker afin de générer, traiter, ou analyser le son directement. Ajouté à la spec le 29 août 2014, mais encore implémenté par aucun des navigateurs à ce jour.</dd>
+ <dt>{{domxref("AudioContext.decodeAudioData()")}}</dt>
+ <dd>Décode de façon asynchrone les données d'un fichier audio contenues dans un objet {{domxref("ArrayBuffer")}}. Dans ce cas, le ArrayBuffer est en général chargé depuis un attribut de réponse {{domxref("XMLHttpRequest")}} quand l'attribut <code>responseType</code> est <code>arraybuffer</code>. Cette méthode ne fonctionne que sur des fichiers complets, pas sur des fragments de fichiers.</dd>
+ <dt>{{domxref("AudioContext.resume()")}}</dt>
+ <dd>Reprend le défilement du temps dans un contexte audio où il a précédemment été suspendu.</dd>
+ <dt>{{domxref("AudioContext.suspend()")}}</dt>
+ <dd>Suspend le défilement du temps dans un contexte audio, empêchant de façon temporaire l'accès au hardware audio, et réduisant par là l'utilisation du CPU et de la batterie.</dd>
+</dl>
+
+<h2 id="Méthodes_obsolètes">Méthodes obsolètes</h2>
+
+<dl>
+ <dt>{{domxref("AudioContext.createJavaScriptNode()")}}</dt>
+ <dd>Crée un objet {{domxref("JavaScriptNode")}}, utilisé pour un traitement audio directement en JavaScript. Cette méthode est obsolète, et a été remplacée par {{domxref("AudioContext.createScriptProcessor()")}}.</dd>
+ <dt>{{domxref("AudioContext.createWaveTable()")}}</dt>
+ <dd>Crée un objet {{domxref("WaveTableNode")}}, utilisé pour définir une onde audio périodique. Cette méthode est obsolète, et a été remplacée par {{domxref("AudioContext.createPeriodicWave()")}}.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Déclaration basique d'un audio context :</p>
+
+<pre><code>var contexteAudio = new AudioContext;</code></pre>
+
+<p>Variante avec gestion de la compatibilité navigateur:</p>
+
+<pre><code>var AudioContext = window.AudioContext || window.webkitAudioContext;
+var contexteAudio = new AudioContext();
+
+var oscillatorNode = contexteAudio.createOscillator();
+var gainNode = contexteAudio.createGain();
+var finish = contexteAudio.destination;
+// etc.</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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#AudioContext-section', 'AudioNode')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}<br>
+    35</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(25.0)}} </td>
+   <td>{{CompatNo}}</td>
+   <td>15.0{{property_prefix("webkit")}}<br>
+    22</td>
+   <td>6.0{{property_prefix("webkit")}}</td>
+  </tr>
+  <tr>
+   <td><code>createStereoPanner()</code></td>
+   <td>{{CompatChrome(42.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(37.0)}} </td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>onstatechange</code>, <code>state</code>, <code>suspend()</code>, <code>resume()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(40.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatSafari(8.0)}}</td>
+  </tr>
+  <tr>
+   <td><code>createConstantSource()</code></td>
+   <td>{{CompatChrome(56.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(52)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(43)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Non préfixé</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(37.0)}} </td>
+   <td>2.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>createStereoPanner()</code></td>
+   <td>{{CompatChrome(42.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(42.0)}}</td>
+  </tr>
+  <tr>
+   <td><code>onstatechange</code>, <code>state</code>, <code>suspend()</code>, <code>resume()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>createConstantSource()</code></td>
+   <td>{{CompatChrome(56.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(52)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(56.0)}}</td>
+  </tr>
+  <tr>
+   <td>Non préfixé</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile(43)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+ <li>{{domxref("OfflineAudioContext")}}</li>
+</ul>
diff --git a/files/fr/web/api/audiolistener/index.html b/files/fr/web/api/audiolistener/index.html
new file mode 100644
index 0000000000..dd66fbcd98
--- /dev/null
+++ b/files/fr/web/api/audiolistener/index.html
@@ -0,0 +1,186 @@
+---
+title: AudioListener
+slug: Web/API/AudioListener
+tags:
+  - API
+  - Experimental
+  - Reference
+  - Web Audio API
+translation_of: Web/API/AudioListener
+---
+<p>{{APIRef("Web Audio API")}}</p>
+
+<p>L'interface <em>AudioListener </em>représente la position et l'orientation de l'unique personne écoutant la scène audio; elle est utilisée dans le cadre d'une <a href="/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics">spatialisation audio</a>. Tous les {{domxref ("PannerNode")}} sont spatialisés par rapport à l'objet <em>AudioListener </em>stocké dans la propriété {{domxref ("AudioContext.listener")}}.</p>
+
+<p><span id="result_box" lang="fr"><span class="hps">Il est important</span> <span class="hps">de noter qu'il n'y</span> <span class="hps">a qu'un seul</span> <span class="hps">auditeur</span> <span class="hps">par</span> <span class="alt-edited hps">contexte, et qu'il ne s'agit</span><span class="hps"> pas</span> d'<span class="atn hps">un {{domxref("AudioNode")}}.</span></span></p>
+
+<p><img alt="We see the position, velocity, up and front vectors of an AudioListener, with the up and front vectors at 90° each from the other" src="https://mdn.mozillademos.org/files/12652/listener.svg" style="height: 249px; width: 720px;"></p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Hérite des propriétés de son parent, </em><code>AudioNode</code>.</p>
+
+<div class="note">
+<p>Les valeurs de position, d'orientation, et du haut de la tête peuvent être définies et lues à l'aide de différentes syntaxes. Par exemple, l'accès se fait à l'aide de la propriété, <code>AudioListener.positionX</code>, tandis que la même propriété est définir à l'aide de <code>AudioListener.positionX.value</code>. C'est pourquoi ces valeurs ne sont pas marquées  en lecture seule, bien qu'elles apparaissent comme tel dans la spécification IDL.</p>
+</div>
+
+<dl>
+ <dt>{{domxref("AudioListener.positionX")}}</dt>
+ <dd>Position de l'auditeur avec des coordonnées cartésiennes selon la règle de la main droite. La valeur par défaut est 0.</dd>
+ <dt>{{domxref("AudioListener.positionY")}}</dt>
+ <dd>Position verticale de l'auditeur avec des coordonnées cartésiennes selon la règle de la main droite. La valeur par défaut est 0.</dd>
+ <dt>{{domxref("AudioListener.positionZ")}}</dt>
+ <dd>Position longitudinale (avant et arrière) de l'auditeur avec des coordonnées cartésiennes selon la règle de la main droite. La valeur par défaut est 0.</dd>
+ <dt>{{domxref("AudioListener.forwardX")}}</dt>
+ <dd>Position horizontale de l'orientation vers l'avant de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (<code>positionX</code>, <code>positionY</code>, and <code>positionZ</code>). Les valeurs de direction vers l'avant et vers le haut sont indépendantes  linéairement l'une de l'autre. La valeur par défaut est 0.</dd>
+ <dt>{{domxref("AudioListener.forwardY")}}</dt>
+ <dd>Position verticale de l'orientation vers l'avant de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (<code>positionX</code>, <code>positionY</code>, and <code>positionZ</code>). Les valeurs de direction vers l'avant et vers le haut sont indépendantes  linéairement l'une de l'autre. La valeur par défaut est 0.</dd>
+ <dt>{{domxref("AudioListener.forwardZ")}}</dt>
+ <dd>Position longitudinale (avant et arrière) de l'orientation vers l'avant de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (<code>positionX</code>, <code>positionY</code>, and <code>positionZ</code>). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0.</dd>
+ <dt>{{domxref("AudioListener.upX")}}</dt>
+ <dd>Position horizontale du haut de la tête de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (<code>positionX</code>, <code>positionY</code>, and <code>positionZ</code>). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0.</dd>
+ <dt>{{domxref("AudioListener.upY")}}</dt>
+ <dd>Position verticale du haut de la tête de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (<code>positionX</code>, <code>positionY</code>, and <code>positionZ</code>). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0.</dd>
+ <dt>{{domxref("AudioListener.upZ")}}</dt>
+ <dd>Position longitudinale (avant et arrière) du haut de la tête de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (<code>positionX</code>, <code>positionY</code>, and <code>positionZ</code>). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Hérite des propriétés de son parent, </em><code>AudioNode</code>.</p>
+
+<dl>
+ <dt>{{domxref("AudioListener.setOrientation()")}}</dt>
+ <dd><span id="result_box" lang="fr"><span class="hps">Définit</span> <span class="hps">l'orientation</span> <span class="hps">de l'auditeur.</span></span></dd>
+ <dt>{{domxref("AudioListener.setPosition()")}}</dt>
+ <dd>Définit la position de l'auditeur. Consulter {{anch("Deprecated features")}}  pour savoir pourquoi cette méthode est désormais obsolète.</dd>
+</dl>
+
+<h2 id="Fonctionnalités_obsolètes">Fonctionnalités obsolètes</h2>
+
+<dl>
+ <dt>{{domxref("AudioListener.dopplerFactor")}} {{obsolete_inline}}</dt>
+ <dd>Nombre flottant à double précision représentant la quantité de "pitch shift" à utiliser pour le rendu d'un <a href="http://en.wikipedia.org/wiki/Doppler_effect">effet doppler</a>.</dd>
+ <dt>{{domxref("AudioListener.speedOfSound")}} {{obsolete_inline}}</dt>
+ <dd>Nombre flottant à double précision représentant la vitesse du son, en <em>mètres par seconde</em>.</dd>
+</dl>
+
+<p>Dans une version précédente de la spécification, les propriétés <code>dopplerFactor</code> et <code>speedOfSound</code> et la méthode <code>setPosition()</code> lpouvaient être utilisés pour contrôler un effet doppler appliqué à un {{domxref("AudioBufferSourceNode")}} connecté en aval - ils pouvaient être transposés en fonction de la vitesse relative du {{domxref("PannerNode")}}, et de l'{{domxref("AudioListener")}}. Ces fonctionnalités soulevaient un certain nombre de problèmes :</p>
+
+<ul>
+ <li>Seuls les {{domxref("AudioBufferSourceNode")}} étaient transposés, pas les autres noeuds source.</li>
+ <li>Le comportement à adopter lorsqu'un {{domxref("AudioBufferSourceNode")}} était connecté à plusieurs {{domxref("PannerNode")}} n'était pas clair.</li>
+ <li>Comme la vélocité du panoramique et de l'auditeur n'étaient pas des {{domxref("AudioParam")}}, la modification du pitch ne pouvait pas être appliquée uniformément, ce qui provoquait des irrégularités dans le son.</li>
+</ul>
+
+<p>C'est la raison pour laquelle elles ont été supprimées.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>{{page("/en-US/docs/Web/API/AudioContext.createPanner","Example")}}</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('Web Audio API', '#AudioListener-section', 'AudioListener')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support basique</td>
+   <td>{CompatChrome(10.0)}}{{property_prefix("webkit")}}<br>
+    {{CompatVersionUnknown}} (unprefixed)</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(25.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>6.0{{property_prefix("webkit")}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>position, forward, and up properties</td>
+   <td>{{CompatChrome(52.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>6.0{{property_prefix("webkit")}}</td>
+   <td>39</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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 pour Androïd</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<br>
+    {{CompatVersionUnknown}} (unprefixed)</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>26.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(33.0)}}<br>
+    {{CompatVersionUnknown}} (unprefixed)</td>
+  </tr>
+  <tr>
+   <td>position, forward, and up properties</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(52.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>39</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(52.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Firefox supporte toujours les méthodes utilisées précédemment pour définir les valeurs de ces propriétés, à savoir <code>setPosition()</code> et <code>setOrientation()</code>.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/audionode/index.html b/files/fr/web/api/audionode/index.html
new file mode 100644
index 0000000000..13d36f8759
--- /dev/null
+++ b/files/fr/web/api/audionode/index.html
@@ -0,0 +1,198 @@
+---
+title: AudioNode
+slug: Web/API/AudioNode
+translation_of: Web/API/AudioNode
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<p>L'interface <strong><code>AudioNode</code></strong> est une interface générique pour représenter un module de traitement audio tel qu'une source audio {{HTMLElement("audio")}}, un élément {{HTMLElement("video")}}, un {{domxref("OscillatorNode")}}, une sortie audio, ou un module de traitement intermédiaire  (filtres {{domxref("BiquadFilterNode")}} ou {{domxref("ConvolverNode")}}), un contrôle de volume {{domxref("GainNode")}}.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<p><img alt="AudioNodes participating in an AudioContext create a audio routing graph." src="https://mdn.mozillademos.org/files/9713/WebAudioBasics.png" style="display: block; height: 230px; margin: 0px auto; width: 677px;"></p>
+
+<p>Un <code>AudioNode</code> a des entrées et sorties, chacune avec un certain nombre de <em>canaux</em>.<em> </em>Un <code>AudioNode</code> avec zero entrée et une ou plusieurs sorties est appelée un <em> noeud source</em>. Le traitement exact varie d'un <code>AudioNode</code> à l'autre; en général un noeud lit l'entrée, réalise un traitement, et génère de nouvelles valeurs pour la sortie, ou laisse simplement l'entrée traverser (par exemple dans le cas de l'{{domxref("AnalyserNode")}}, où le résultat du traitment du traitement est accessible à part).</p>
+
+<p>Plusieurs noeuds peuvent être reliés dans un <em>graphe de traitement</em>. Un tel graphe est contenu dans un {{domxref("AudioContext")}}. Chaque <code>AudioNode</code> fait partie d'exactement un contexte. Les noeuds de traitement héritent des  propriétés et méthodse d'<code>AudioNode</code>, mais définissent aussi leurs propres fonctionnalités par dessus. Pour plus de détails, voir les pages individuelles liées sur la page d'accueil <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Un <code>AudioNode</code> peut être la cible d'évènements, et implémente donc l'interface {{domxref("EventTarget")}}.</p>
+</div>
+
+<h2 id="Propriétés" style="">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("AudioNode.context")}} {{readonlyInline}}</dt>
+ <dd>Renvoie le {{domxref("AudioContext")}} associé, c'est-à-dire l'objet représentant le graphe de traitement dont le noeud fait partie.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("AudioNode.numberOfInputs")}} {{readonlyInline}}</dt>
+ <dd>Renvoie le nombre d'entrées d'un noeud. Les noeuds source sont des noeuds dont la propriété <code>numberOfInputs</code> a la valeur <code>0</code>.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("AudioNode.numberOfOutputs")}} {{readonlyInline}}</dt>
+ <dd>Renvoie le nombre de sorties d'un noeud. Les noeuds de destination — comme {{ domxref("AudioDestinationNode") }} — sont des noeuds dont cette propriété a la valeur <code>0</code>.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("AudioNode.channelCount")}}</dt>
+ <dd>Représente un entier utilisé pour déterminer le nombre de canaux lors d'une <a href="/fr/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#Conversion_ascendante_et_descendante">conversion ascendante ou descendante</a>. Son usage et sa définition précise dépendent de la valeur de {{domxref("AudioNode.channelCountMode")}}.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("AudioNode.channelCountMode")}}</dt>
+ <dd>Représente une liste énumérative qui décrit la façon dont les canaux doivent être connectés entre les entrées et les sorties.</dd>
+ <dt>{{domxref("AudioNode.channelInterpretation")}}</dt>
+ <dd>Représente une liste énumérative qui décrit la signification des canaux. Cette interprétation définit la façon dont la <a href="/fr/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#Conversion_ascendante_et_descendante">conversion ascendante ou descendante</a> est réalisée. Les valeurs possibles sont <code>"speakers"</code> ou <code>"discrete"</code>.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Implémente aussi les méthodes de l'interface </em>{{domxref("EventTarget")}}.</p>
+
+<dl>
+ <dt>{{domxref("AudioNode.connect()")}}</dt>
+ <dd>Permet de connecter une sortie du noeud à l'entrée d'un autre noeud, soit comme données audio, soir comme valeur d'un {{domxref("AudioParam")}}.</dd>
+ <dt>{{domxref("AudioNode.disconnect()")}}</dt>
+ <dd>Permet de déconnecter le noeud d'un autre noeud auquel il est déjà connecté.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Ce simple extrait de code illustre la creation de quelques noeuds audio, et la façon dont les propriétés et méthodes <code>AudioNode</code> peuvent être utilisées. Vous pouvez trouver d'autres exemples sur n'importe lequel des exemples liés sur la page <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a> (par exemple <a href="https://github.com/mdn/violent-theremin">Violent Theremin</a>.)<span class="p"> </span></p>
+
+<pre class="brush: js;highlight[8,9,11,12,13,14]">var AudioContext = window.AudioContext || window.webkitAudioContext;
+
+var audioCtx = new AudioContext();
+
+var oscillator = audioCtx.createOscillator();
+var gainNode = audioCtx.createGain();
+
+oscillator.connect(gainNode);
+gainNode.connect(audioCtx.destination);
+
+oscillator.context;
+oscillator.numberOfInputs;
+oscillator.numberOfOutputs;
+oscillator.channelCount;</pre>
+
+<h2 id="Spécification">Spécification</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('Web Audio API', '#the-audionode-interface', 'AudioNode')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateur">Compatibilité navigateur</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(25.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15.0{{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>channelCount</code> <code>channelCountMode</code></td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>connect</code><code>(AudioParam)</code></td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>25.0</td>
+   <td>1.2</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>channelCount</code><br>
+    <code>channelCountMode</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>connect</code><code>(AudioParam)</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/audioparam/index.html b/files/fr/web/api/audioparam/index.html
new file mode 100644
index 0000000000..d718ac2ce4
--- /dev/null
+++ b/files/fr/web/api/audioparam/index.html
@@ -0,0 +1,219 @@
+---
+title: AudioParam
+slug: Web/API/AudioParam
+tags:
+  - API
+  - Experimental
+  - Reference
+  - Web Audio API
+translation_of: Web/API/AudioParam
+---
+<p>{{APIRef("Web Audio API")}}</p>
+
+<p>L'interface <strong><code>AudioParam</code></strong> représente un paramètre audio, en général un paramètre d'un {{domxref ("AudioNode")}} tel qu'un {{ domxref("GainNode.gain") }}. On peut lui donner une valeur spécifique ou définir une variation de valeur qui intervient à un certain moment et selon un certain fonctionnement.</p>
+
+<p>Il y a deux sortes de <code>AudioParam</code>, <em>a-rate</em> et <em>k-rate</em> :</p>
+
+<ul>
+ <li>Un <code>AudioParam</code> <em>a-rate</em> réévalue la valeur du paramètre audio pour chaque trame d'échantillons du signal audio.</li>
+ <li>Un <code>AudioParam</code> <em>k-rate </em>utilise la même valeur de paramètre audio initial pour l'ensemble du bloc traité, c'est-à-dire 128 échantillons.</li>
+</ul>
+
+<p>Chaque {{domxref ("AudioNode")}} définit lequel de ses paramètres sont <em>a-rate</em> ou <em>k-rate</em>.</p>
+
+<p>Chaque <code>AudioParam</code> a une liste d'événements, initialement vide, qui définit quand et comment les valeurs changent. Si cette liste n'est pas vide, les modifications faites directement avec <code>AudioParam.value</code> sont ignorées. Cette liste d'événements permet de planifier les changements qui doivent se produire à des moments très précis à l'aide de courbes d'automatisation chronologiques arbitraires. Les informations de temps utilisées sont celles définies par {{domxref ("AudioContext.currentTime")}}.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Hérite des propriétés de son parent, <code>AudioNode</code>.</em></p>
+
+<dl>
+ <dt>{{domxref("AudioParam.defaultValue")}} {{readonlyInline}}</dt>
+ <dd>Volume initial tel que défini par l'{{domxref ("AudioNode")}} qui crée l'<code>AudioParam</code>.</dd>
+ <dt>{{domxref("AudioParam.maxValue")}} {{readonlyInline}}</dt>
+ <dd>Valeur maximum de la plage nominale (effective). </dd>
+ <dt>{{domxref("AudioParam.minValue")}} {{readonlyinline}}</dt>
+ <dd>Valeur minimum de la plage nominale (effective). </dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("AudioParam.value")}}</dt>
+ <dd>Volume, exprimé sous forme de nombre flottant, initialement défini par la valeur de <code>AudioParam.defaultValue</code>. Même s'il peut être modifié, toute modification qui a lieu alors que des événements d'automatisation sont prévus - événements programmés en utilisant les méthodes de la <code>AudioParam</code> - est ignorée, sans lever aucune exception</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Hérite des propriétés de son parent, AudioNode.</em></p>
+
+<dl>
+ <dt>{{domxref("AudioParam.setValueAtTime()")}}</dt>
+ <dd>Planifie un changement de la valeur d' <code>AudioParam</code> à un moment précis, <code>startTime</code>, tel que mesuré par rapport à {{domxref ("AudioContext.currentTime")}}. La nouvelle valeur est passée en argument.</dd>
+ <dt>{{domxref("AudioParam.linearRampToValueAtTime()")}}</dt>
+ <dd>Planifie un changement de la valeur d'<code>AudioParam</code>. Le changement commence à l'heure prévue pour l'événement précédent, évolue selon une rampe linéaire jusqu'à la nouvelle valeur passée dans l'argument <code>value</code>, et atteint la nouvelle valeur à l'heure indiquée par le paramètre <code>endTime</code>.</dd>
+ <dt>{{domxref("AudioParam.exponentialRampToValueAtTime()")}}</dt>
+ <dd>Planifie un changement de la valeur d'<code>AudioParam</code>. Le changement commence à l'heure prévue pour l'événement précédent, suit une rampe exponentielle jusqu'à la nouvelle valeur passée dans l'argument <code>value</code>, et atteint la nouvelle valeur à l'heure indiquée par le paramètre <code>endTime</code>.<br>
+ Les rampes exponentielles sont utiles lors du changement de fréquence ou de taux de lecture en raison de la façon dont l'oreille humaine fonctionne.</dd>
+ <dt>{{domxref("AudioParam.setTargetAtTime()")}}</dt>
+ <dd>Planifie le début d'un changement de la valeur d'<code>AudioParam</code>. Le changement commence à l'heure spécifiée par l'argument <code>startTime</code> et de façon exponentielle tend vers la valeur donnée par le paramètre <code>target</code>. Le taux de décroissance exponentielle est définie par le paramètre <code>timeConstant</code>. C'est le temps nécessaire à un système continu linéaire du premier ordre invariant dans le temps pour atteindre la valeur de 1 - 1 / e (environ 63,2%) donné une réponse d'entrée de l'étape (passage de 0 à 1 en valeur), Plus il est grand, plus la transition sera facile. Ceci est utile pour la décroissance ou la libération de portions d'enveloppes.</dd>
+ <dt>{{domxref("AudioParam.setValueCurveAtTime()")}}</dt>
+ <dd>Planifie des valeurs de <code>AudioParam</code> selon un jeu de valeurs, défini par le paramètre  <code>values </code>({{domxref ("Float32Array")}}), mis à l'échelle pour s'adapter à l'intervalle de temps donné, en commençant à <code>startTime</code>.</dd>
+ <dt>{{domxref("AudioParam.cancelScheduledValues()")}}</dt>
+ <dd>Annule toutes les modifications futures prévues du <code>AudioParam</code>.</dd>
+ <dt>{{domxref("AudioParam.cancelAndHoldAtTime()")}}</dt>
+ <dd>Annule toutes les modifications futures prévues du <code>AudioParam</code> mais maintient sa valeur à un certain moment, en attendant que d'autres changements soient effectués. La nouvelle valeur est passée en argument.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Ce premier exemple simple montre la définition de la valeur de  <code>gain </code>d'un<code> </code>{{domxref("GainNode")}}. <code>gain</code> est un exemple de paramètre audio de type a-rate, car sa valeur peut potentiellement être différente pour chaque trame d'échantillon.</p>
+
+<pre class="brush: js;highlight[5]">var AudioContext = window.AudioContext || window.webkitAudioContext;
+var audioCtx = new AudioContext();
+
+var gainNode = audioCtx.createGain();
+gainNode.gain.value = 0;</pre>
+
+<p>Ce deuxième exemple montre la définition de plusieurs paramètres d'un {{ domxref("BiquadFilterNode") }}. Ce sont des exemples de paramètre audio de type k-rate AudioParam's, comme les valeurs sont définies une fois pour l'ensemble des échantillons.</p>
+
+<pre class="brush: js;highlight[6,7,8]">var AudioContext = window.AudioContext || window.webkitAudioContext;
+var audioCtx = new AudioContext();
+
+var biquadFilter = audioCtx.createBiquadFilter();
+
+biquadFilter.type = "lowshelf";
+biquadFilter.frequency.value = 1000;
+biquadFilter.gain.value = 25;</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('Web Audio API', '#AudioParam-section', 'AudioParam')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support basique</td>
+   <td>{{CompatChrome(14.0)}} {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(23)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15 {{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+  <tr>
+   <td>Non prefixé</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>minValue</code>and<code>maxValue</code></td>
+   <td>{{CompatChrome(52.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>39</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>cancelAndHoldAtTime()</code></td>
+   <td>{{CompatChrome(57.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android Webview</th>
+   <th>Chrome pour Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(14)}} {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(23)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15 {{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+  <tr>
+   <td>Non préfixé</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>minValue</code> and <code>maxValue</code></td>
+   <td>{{CompatChrome(52)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>39</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>cancelAndHoldAtTime()</code></td>
+   <td>{{CompatChrome(57)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/audioprocessingevent/index.html b/files/fr/web/api/audioprocessingevent/index.html
new file mode 100644
index 0000000000..baad6beb8d
--- /dev/null
+++ b/files/fr/web/api/audioprocessingevent/index.html
@@ -0,0 +1,150 @@
+---
+title: AudioProcessingEvent
+slug: Web/API/AudioProcessingEvent
+tags:
+  - API
+  - Experimental
+  - Reference
+  - Web Audio API
+translation_of: Web/API/AudioProcessingEvent
+---
+<p>{{APIRef("Web Audio API")}}{{deprecated_header}}</p>
+
+<p><span class="seoSummary">AudioProcessingEvent représente l'évènement qui est passé lorsqu'un tampon {{domxref ("ScriptProcessorNode")}} est prêt à être traité.</span></p>
+
+<div class="note">
+<p><strong>Note</strong>: Cette fonctionnalité est dépréciée à partir de la version du 29 Août 2014 de la spécification Web Audio API, elle sera remplacée par les <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API#Audio_Workers">Audio Workers</a>.</p>
+</div>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>La liste ci-dessous inclut les propriétés héritées de son parent, {{domxref("Event")}}.</em></p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Propriété</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{ReadOnlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>La cible de l'évènement (la plus haute dans le DOM).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{ReadOnlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Le type d'évènement.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{ReadOnlyInline}}</td>
+   <td><code>boolean</code></td>
+   <td>Indique si l'évènement se propage normalement.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{ReadOnlyInline}}</td>
+   <td><code>boolean</code></td>
+   <td>Indique s'il est possible d'annuler l'évènement.</td>
+  </tr>
+  <tr>
+   <td><code>playbackTime</code> {{ReadOnlyInline}}</td>
+   <td><code>double</code></td>
+   <td>Moment auquel le son sera joué, tel que défini par {{domxref("AudioContext.currentTime")}}</td>
+  </tr>
+  <tr>
+   <td><code>inputBuffer</code> {{ReadOnlyInline}}</td>
+   <td>{{domxref("AudioBuffer")}}</td>
+   <td>Tampon contenant les données audio à traiter en entrée. Le nombre de canaux est défini comme paramètre, <code>numberOfInputChannels</code>, de la méthode constructeur {{domxref("AudioContext.createScriptProcessor()")}}. L'<code>AudioBuffer</code> renvoyé est valide uniquement dans la portée de la fonction <code>onaudioprocess</code>.</td>
+  </tr>
+  <tr>
+   <td><code>outputBuffer</code> {{ReadOnlyInline}}</td>
+   <td>{{domxref("AudioBuffer")}}</td>
+   <td>Tampon dans lequel les données doivent être écrites en sortie. Le nombre de canaux est défini comme paramètre, <code>numberOfOutputChannels</code>, de la méthode constructeur {{domxref("AudioContext.createScriptProcessor()")}}. L'<code>AudioBuffer</code> renvoyé est valide uniquement dans la portée de la fonction <code>onaudioprocess</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécification">Spécification</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('Web Audio API', '#AudioProcessingEvent-section', 'AudioProcessingEvent')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support basique</td>
+   <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(25.0)}} </td>
+   <td>{{CompatNo}}</td>
+   <td>15.0{{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6.0{{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>26.0</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>33.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/audioworklet/index.html b/files/fr/web/api/audioworklet/index.html
new file mode 100644
index 0000000000..e87fdefa21
--- /dev/null
+++ b/files/fr/web/api/audioworklet/index.html
@@ -0,0 +1,73 @@
+---
+title: AudioWorklet
+slug: Web/API/AudioWorklet
+tags:
+  - API
+  - Audio
+  - AudioWorklet
+  - Background
+  - Custom
+  - Interface
+  - Low-latency
+  - Reference
+  - Web Audio API
+  - Worklet
+  - Zero-latency
+  - latency
+  - sound
+translation_of: Web/API/AudioWorklet
+---
+<p>{{APIRef("Web Audio API")}}{{securecontext_header}}</p>
+
+<p class="summary"><span class="seoSummary">L'interface <strong><code>AudioWorklet</code></strong> dans l'<a href="/fr/docs/Web/API/Web_Audio_API">API Web Audio</a> est utilisée pour fournir des scripts de traitement audio personnalisés qui s'exécutent dans un thread séparé afin de fournir un traitement audio à très faible latence.</span> Le code du worklet est exécuté dans le contexte d'exécution global {{domxref("AudioWorkletGlobalScope")}}, en utilisant un thread audio web séparé qui est partagé par le worklet et les autres nœuds audio.</p>
+
+<p>L'accès à distance d'<code>AudioWorklet</code> du contexte audio se fait par la propriété {{domxref("BaseAudioContext.audioWorklet")}}.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>L'interface <code>AudioWorklet</code> </em>ne définit pas de propriétés propres, mais hérite des propriétés de<em> {{domxref("Worklet")}}.</em></p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p>Cette interface hérite des méthodes de<em> {{domxref('Worklet')}}. L'interface <code>AudioWorklet</code> </em>ne définit aucune méthode propre<em>.</em></p>
+
+<h2 id="Evénements">Evénements</h2>
+
+<p>L'<em><code>AudioWorklet</code> </em>n'a pas d'événements auxquels il répond<em>.</em></p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Voir {{domxref("AudioWorkletNode")}} pour des exemples complets de création de nœuds audio personnalisés.</p>
+
+<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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API','#audioworklet','AudioWorklet')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td>Définition intiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_du_navigateur">Compatibilité du navigateur</h2>
+
+<div>
+
+
+<p>{{Compat("api.AudioWorklet")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("AudioWorkletGlobalScope")}} — le contexte global d'exécution d'un <code>AudioWorklet</code></li>
+ <li><a href="/fr/docs/Web/API/Web_Audio_API">API Web Audio</a></li>
+ <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/authenticatorassertionresponse/authenticatordata/index.html b/files/fr/web/api/authenticatorassertionresponse/authenticatordata/index.html
new file mode 100644
index 0000000000..aaef147350
--- /dev/null
+++ b/files/fr/web/api/authenticatorassertionresponse/authenticatordata/index.html
@@ -0,0 +1,84 @@
+---
+title: AuthenticatorAssertionResponse.authenticatorData
+slug: Web/API/AuthenticatorAssertionResponse/authenticatorData
+tags:
+  - API
+  - Propriété
+  - Reference
+  - Web Authentication API
+  - WebAuthn
+translation_of: Web/API/AuthenticatorAssertionResponse/authenticatorData
+---
+<p>{{draft}}{{securecontext_header}}{{DefaultAPISidebar("Web Authentication API")}}</p>
+
+<p>La propriété <code><strong>authenticatorData</strong></code> (rattachée à  l'interface {{domxref("AuthenticatorAssertionResponse")}}) fournit un {{jsxref("ArrayBuffer")}} qui contient les informations relatives à l'authenticateur tels que :</p>
+
+<ul>
+ <li>l'empreinte d'identifiant (rpIdHash pour <em>Relying Party ID Hash</em>)</li>
+ <li>un compteur de signature</li>
+ <li>un test quant à la présence de l'utilisateur</li>
+ <li>des marqueurs (<em>flags</em>) de vérification de l'utilisateur</li>
+ <li>les éventuelles extensions traitées par l'authenticateur</li>
+</ul>
+
+<p>Cette propriété est signée par l'authenticateur (c'est l'un des deux champs qui est signé).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var authnrData = assertion.response.authnrData;
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un objet {{jsxref("ArrayBuffer")}} dont la propriété {{jsxref("ArrayBuffer.byteLength")}} indique qu'il mesure au moins 37 octets et qui contient les champs suivants :</p>
+
+<ul>
+ <li><code><strong>rpIdHash</strong></code> (32 octets) - Une empreinte SHA256 de l'identifiant de la partie fiable (i.e. - le domaine) tel que vu par le navigateur. Le serveur s'assurera ensuite que cette empreinte correspond à sa propre origine afin d'empêcher les tentatives de hameçonnage (<em>phishing</em>) ou d'autres attaques de l'homme du milieu (<em>man-in-the-middle</em>).</li>
+ <li><code><strong>flags</strong></code> (1 octet) - Une série de bits qui indique les différents attributs validés par l'authenticateur. Les bits sont décrits comme suit (où le bit 0 correspond au bit de poids faible) (tous les bits ne sont pas mentionnés car certains sont réservés pour une utilisation future) :
+  <ul>
+   <li>Bit 0 : Présence de l'utilisateur (<em>User Presence</em> - UP) : si ce bit est actif, cela signifie que l'authenticateur a validé la présence de l'utilisateur par un test de présence (<em>Test of User Presence</em> - TUP). Cela peut notamment correspondre à l'appui sur un bouton de l'authenticateur.</li>
+   <li>Bit 2 : Vérification de l'utilisateur (<em>User Verification</em> - UV) : si ce bit est actif, cela signifie que l'authenticateur a vérifié l'utilisateur en question via une méthode d'authentification (biométrique, code PIN, autre).</li>
+   <li>Bit 6 : Présence des données d'authentification vérifiées (<em>Attested Credential Data </em>- AT) : si ce bit est actif, le champ <code>attestedCredentialData</code> suivra immédiatement après les 37 premiers octets de cet objet.</li>
+   <li>Bit 7 : Présence des données d'extension (<em>Extension data</em> - ED) : si ce bit est actif, les données d'extensions suivront le champ <code>attestedCredentialData</code> s'il est présent ou seront situées après les 37 premiers octets de cet objet sinon.</li>
+  </ul>
+ </li>
+ <li><code><strong>signCount</strong></code> (4 octets) : un compteur de signature provenant de l'authenticateur. Cela permet au serveur de détecter un éventuel clonage de l'authenticateur.</li>
+ <li><code><strong>attestedCredentialData</strong></code> (longueur variable) : les informations d'authentification qui ont été créées. Ce champ est uniquement présent lors d'un appel à <code>navigator.credentials.create()</code>. Ces informations sont représentées par une séquence d'octets au format suivant :
+  <ul>
+   <li><code><strong>AAGUID</strong></code> (16 octets) - <em>Authenticator Attestation Globally Unique Identifier</em>, un identifiant universel unique pour l'attestation de l'authenticateur qui identifie le modèle de l'authenticateur (pas cet exemplaire en particulier) afin qu'une autre partie puisse comprendre les caractéristiques de l'authenticateur en consultant ses méta-données.</li>
+   <li><code><strong>credentialIdLength</strong></code> (2 octets) - la longueur, en octets, de l'identifiant d'authentification qui suit ces octets.</li>
+   <li><code><strong>credentialId</strong></code> (longueur variable) - un identifiant unique pour ces informations d'authentification et qui pourra être demandé pour de futures authentifications. Cette information mesure <code>credentialIdLength</code> octets.</li>
+   <li><code><strong>credentialPublicKey</strong></code> (longueur variable) - une clé publique encodée au format <a href="https://tools.ietf.org/html/rfc8152">COSE</a>. Cette clé publique sera stockée sur le serveur et associée au compte de l'utilisateur afin d'être utilisée pour de futures authentifications.</li>
+  </ul>
+ </li>
+ <li><code><strong>extensions</strong></code> (longueur variable) - Une carte optionnelle, encodée au format <a href="https://tools.ietf.org/html/rfc7049">CBOR</a>, et qui contient les extensions de l'authenticateur.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>TBD</p>
+
+<h2 id="Specifications">Specifications</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('WebAuthn')}}</td>
+   <td>{{Spec2('WebAuthn')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.AuthenticatorAssertionResponse")}}</p>
diff --git a/files/fr/web/api/authenticatorassertionresponse/index.html b/files/fr/web/api/authenticatorassertionresponse/index.html
new file mode 100644
index 0000000000..946e3e9e3a
--- /dev/null
+++ b/files/fr/web/api/authenticatorassertionresponse/index.html
@@ -0,0 +1,69 @@
+---
+title: AuthenticatorAssertionResponse
+slug: Web/API/AuthenticatorAssertionResponse
+tags:
+  - API
+  - AuthenticatorAssertionResponse
+  - Interface
+  - Reference
+  - Web Authentification API
+  - WebAuthn
+translation_of: Web/API/AuthenticatorAssertionResponse
+---
+<p>{{APIRef("Web Authentication API")}}{{securecontext_header}}</p>
+
+<p>L'interface <code><strong>AuthenticatorAssertionResponse</strong></code>, rattachée à l'<a href="/fr/docs/Web/API/Web_Authentication_API">API Web Authentication</a>, est renvoyée par un appel à {{domxref('CredentialsContainer.get()')}} lorsqu'on a passé un objet {{domxref('PublicKeyCredential')}} en argument. Cette interface fournit une preuve à un service que l'objet possède une paire de clé et que la requête d'authentification est valide et approvée.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt><code>AuthenticatorAssertionResponse.clientDataJSON</code></dt>
+ <dd>Les données du client pour l'authentification telles que l'origine et le <em>challenge</em>. La propriété {{domxref("AuthenticatorAttestationResponse.clientDataJSON","clientDataJSON")}} est héritée de {{domxref("AuthenticatorResponse")}}.</dd>
+ <dt>{{domxref("AuthenticatorAssertionResponse.authenticatorData")}}</dt>
+ <dd>Un objet {{jsxref("ArrayBuffer")}} contenant les informations sur l'authenticateur telles que :
+ <ul>
+  <li>l'empreinte d'identifiant (<em>Relying Party ID Hash</em>) <code>rpidHash</code></li>
+  <li>un compteur de signature</li>
+  <li>un test de présence d'utilisateur</li>
+  <li>des marqueurs de vérification de l'utilisateur</li>
+  <li>les éventuelles extensions traitées par l'authentificateur</li>
+ </ul>
+ Ce champ est l'un des deux champs qui est signé par l'authentificateur.</dd>
+ <dt>{{domxref("AuthenticatorAssertionResponse.signature")}}</dt>
+ <dd>Une signature d'assertion par rapport à {{domxref("AuthenticatorAssertionResponse.authenticatorData")}} et {{domxref("AuthenticatorResponse.clientDataJSON")}}. La signature d'assertion est créée avec la clé privée de la paire de clés (générée avec l'appel à <code>create()</code>) et est vérifiée avec la clé publique la même paire de clé.</dd>
+ <dt>{{domxref("AuthenticatorAssertionResponse.userHandle")}}</dt>
+ <dd>Un objet {{jsxref("ArrayBuffer")}} contenant un identifiant opaque pour l'utilisateur.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p>Aucune.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>TBD</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('WebAuthn')}}</td>
+   <td>{{Spec2('WebAuthn')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.AuthenticatorAssertionResponse")}}</p>
diff --git a/files/fr/web/api/authenticatorattestationresponse/index.html b/files/fr/web/api/authenticatorattestationresponse/index.html
new file mode 100644
index 0000000000..3ea1a680dd
--- /dev/null
+++ b/files/fr/web/api/authenticatorattestationresponse/index.html
@@ -0,0 +1,57 @@
+---
+title: AuthenticatorAttestationResponse
+slug: Web/API/AuthenticatorAttestationResponse
+tags:
+  - API
+  - AuthenticatorAttestationResponse
+  - Interface
+  - Reference
+  - Web Authentication API
+  - WebAuthn
+translation_of: Web/API/AuthenticatorAttestationResponse
+---
+<p>{{APIRef("Web Authentication API")}}{{securecontext_header}}</p>
+
+<p>L'interface <strong><code>AuthenticatorAttestationResponse</code></strong>, rattachée à l'<a href="/en-US/docs/Web/API/Web_Authentication_API">API Web Authentication</a>, est renvoyée par un appel à {{domxref('CredentialsContainer.create()')}} lorsqu'un objet {{domxref('PublicKeyCredential')}} est passé à la méthode. Elle fournit une racine cryptographique de confiance pour la nouvelle paire de clés qui a été générée.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt><code>AuthenticatorAttestationResponse.clientDataJSON</code></dt>
+ <dd>Les données relatives aux client pour l'authentification telles que l'origine et le <em>challenge</em>. La propriété {{domxref("AuthenticatorAttestationResponse.clientDataJSON","clientDataJSON")}} est héritée de l'interface {{domxref("AuthenticatorResponse")}}.</dd>
+ <dt>{{domxref("AuthenticatorAttestationResponse.attestationObject")}}</dt>
+ <dd>Un objet {{domxref("ArrayBuffer")}} qui contient les données de l'authenticateur ainsi qu'une instruction d'attestation pour la nouvelle paire de clés.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p>Aucune.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>TBD</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('WebAuthn')}}</td>
+   <td>{{Spec2('WebAuthn')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.AuthenticatorAttestationResponse")}}</p>
diff --git a/files/fr/web/api/authenticatorresponse/index.html b/files/fr/web/api/authenticatorresponse/index.html
new file mode 100644
index 0000000000..45bfafa8da
--- /dev/null
+++ b/files/fr/web/api/authenticatorresponse/index.html
@@ -0,0 +1,61 @@
+---
+title: AuthenticatorResponse
+slug: Web/API/AuthenticatorResponse
+tags:
+  - API
+  - Interface
+  - Reference
+  - Web Authentication API
+  - Web Authn
+translation_of: Web/API/AuthenticatorResponse
+---
+<p>{{APIRef("Web Authentication API")}}{{securecontext_header}}</p>
+
+<p>L'interface <code><strong>AuthenticatorResponse</strong></code>, rattachée à l'<a href="/en-US/docs/Web/API/Web_Authentication_API">API Web Authentication</a>, constitue l'interface de base pour les interfaces qui fournissent une racine cryptographique de confiance pour une paire de clés. Les interfaces filles contiennent des informations relatives au navigateur telles que l'origine du <em>challenge</em> et qui peuvent être renvoyée par {{domxref("PublicKeyCredential.response")}}.</p>
+
+<h2 id="Interfaces_basées_sur_AuthenticatorResponse">Interfaces basées sur <code>AuthenticatorResponse</code></h2>
+
+<p>Voici la liste des interfaces basées sur <code>AuthenticatorResponse</code>.</p>
+
+<div class="index">
+<ul>
+ <li>{{domxref("AuthenticatorAssertionResponse")}}</li>
+ <li>{{domxref("AuthenticatorAttestationResponse")}}</li>
+</ul>
+</div>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("AuthenticatorResponse.clientDataJSON")}}</dt>
+ <dd>Une chaîne de caractères <a href="/fr/docs/Learn/JavaScript/Objects/JSON">JSON</a> stockée dans un {{domxref("ArrayBuffer")}} et qui représente les données du client passées à {{domxref("CredentialsContainer.create()")}} ou {{domxref("CredentialsContainer.get()")}}.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p>Aucune.</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('WebAuthn')}}</td>
+   <td>{{Spec2('WebAuthn')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.AuthenticatorResponse")}}</p>
diff --git a/files/fr/web/api/baseaudiocontext/createbiquadfilter/index.html b/files/fr/web/api/baseaudiocontext/createbiquadfilter/index.html
new file mode 100644
index 0000000000..d7af5e1521
--- /dev/null
+++ b/files/fr/web/api/baseaudiocontext/createbiquadfilter/index.html
@@ -0,0 +1,86 @@
+---
+title: BaseAudioContext.createBiquadFilter()
+slug: Web/API/BaseAudioContext/createBiquadFilter
+tags:
+  - API
+  - BaseAudioContext
+  - Méthode
+  - Reference
+  - Web Audio
+  - Web Audio API
+  - createBiquadFilter
+translation_of: Web/API/BaseAudioContext/createBiquadFilter
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<div>
+<p>La méthode <code>createBiquadFilter()</code> de l'interface {{ domxref("BaseAudioContext") }} crée un {{ domxref("BiquadFilterNode") }}, qui représente un filtre de second ordre configurable comme plusieurs types de filtres communs différents.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">baseAudioContext.createBiquadFilter();</pre>
+
+<h3 id="Description" name="Description">Retourne</h3>
+
+<p>un {{domxref("BiquadFilterNode")}}.</p>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<p>L'exemple suivant montre une utilisation basique d'un AudioContext pour créer un nœud de filtre Biquad. Pour un exemple fonctionnel complet, visitez notre démonstration <a href="https://mdn.github.io/voice-change-o-matic/">voice-change-o-matic</a> (et lisez de même le <a href="https://github.com/mdn/voice-change-o-matic">code source</a>).</p>
+
+<pre class="brush: js">var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+
+//set up the different audio nodes we will use for the app
+var analyser = audioCtx.createAnalyser();
+var distortion = audioCtx.createWaveShaper();
+var gainNode = audioCtx.createGain();
+var biquadFilter = audioCtx.createBiquadFilter();
+var convolver = audioCtx.createConvolver();
+
+// connect the nodes together
+
+source = audioCtx.createMediaStreamSource(stream);
+source.connect(analyser);
+analyser.connect(distortion);
+distortion.connect(biquadFilter);
+biquadFilter.connect(convolver);
+convolver.connect(gainNode);
+gainNode.connect(audioCtx.destination);
+
+// Manipulate the Biquad filter
+
+biquadFilter.type = "lowshelf";
+biquadFilter.frequency.setValueAtTime(1000, audioCtx.currentTime);
+biquadFilter.gain.setValueAtTime(25, audioCtx.currentTime);</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>{{SpecName('Web Audio API', '#dom-baseaudiocontext-createbiquadfilter', 'createBiquadFilter()')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+
+
+<p>{{Compat("api.BaseAudioContext.createBiquadFilter")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser l'API Web Audio</a></li>
+</ul>
diff --git a/files/fr/web/api/baseaudiocontext/createbuffer/index.html b/files/fr/web/api/baseaudiocontext/createbuffer/index.html
new file mode 100644
index 0000000000..b10510eb94
--- /dev/null
+++ b/files/fr/web/api/baseaudiocontext/createbuffer/index.html
@@ -0,0 +1,175 @@
+---
+title: BaseAudioContext.createBuffer()
+slug: Web/API/BaseAudioContext/createBuffer
+tags:
+  - API
+  - AudioContext
+  - BaseAudioContext
+  - Method
+  - Reference
+  - Web Audio API
+  - createBuffer
+translation_of: Web/API/BaseAudioContext/createBuffer
+---
+<p>{{APIRef("API Web Audio")}}</p>
+
+<p>La méthode <code>createBuffer()</code> de l'interface {{domxref("BaseAudioContext")}} est utilisée pour créer un nouvel objet {{domxref("AudioBuffer")}} vide, qui peut ensuite être rempli.</p>
+
+<p>Pour plus de détails sur les tampons audio, consultez la page de référence {{domxref ("AudioBuffer")}}.</p>
+
+<div class="note">
+<p><strong>Note :</strong> <code>createBuffer()</code> permettait de prendre des données compressées et de restituer des échantillons décodés, mais cette possibilité a été supprimée de la spécification, du fait que tout le décodage était effectué dans le thread principal, donc <code>createBuffer()</code> bloquait l'exécution du reste du code. La méthode asynchrone <code>decodeAudioData()</code> fait la même chose - prend l'audio compressé, par exemple, un fichier MP3, et vous renvoie directement un {{domxref("AudioBuffer")}} que vous pouvez ensuite faire jouer via {{domxref("AudioBufferSourceNode")}}. Pour des utilisations simples comme la lecture d'un fichier MP3, <code>decodeAudioData()</code> est ce que vous devriez utiliser.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var tampon = baseAudioContext.createBuffer(<em>nbDeCanaux</em>, <em>longueur</em>, <em>frequenceDEchantillonnage</em>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<div class="note">
+<p><strong>Note :</strong> pour une explication en profondeur de la façon dont les tampons audio fonctionnent, ainsi que de leur signification, lire <a href="/fr/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API">Les concepts de base de la Web Audio API</a> de notre guide des concepts de base.</p>
+</div>
+
+<dl>
+ <dt>nbDeCanaux</dt>
+ <dd>Un nombre entier représentant le nombre de canaux que ce tampon doit avoir. Les implémentations doivent prendre en charge un minimum de 1 canal et un maximum de 32 canaux.</dd>
+ <dt>longueur</dt>
+ <dd><span id="result_box" lang="fr"><span class="alt-edited">Un entier représentant la taille du tampon dans les trames d'échantillons.</span></span></dd>
+ <dt>frequenceDEchantillonnage</dt>
+ <dd>La fréquence d'échantillonnage des données audio linéaires en trames d'échantillons par seconde. Une implémentation doit supporter des fréquences d'échantillonnage comprises au minimum dans la plage 22050 et 96000.</dd>
+</dl>
+
+<h3 id="Retourne">Retourne</h3>
+
+<p>Un {{domxref("AudioBuffer")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Tout d'abord, deux exemples triviaux simples pour aider à expliquer comment les paramètres sont utilisés :</p>
+
+<pre class="brush: js">var ctxAudio = new AudioContext();
+var tampon = ctxAudio.createBuffer(2, 22050, 44100);</pre>
+
+<p>Si vous utilisez cet appel, vous obtiendrez un tampon stéréo (deux canaux), qui, lorsque relu avec un <code>AudioContext</code> fonctionnant à 44100Hz (très courant, la plupart des cartes son normales fonctionnent à cette fréquence), durera 0,5 seconde : 22050 trames / 44100 Hz = 0,5 seconde.</p>
+
+<pre class="brush: js">var ctxAudio = new AudioContext();
+var tampon = ctxAudio.createBuffer(1, 22050, 22050);</pre>
+
+<p>Si vous utilisez cet appel, vous obtiendrez un tampon mono (un canal), qui, lorsqu'il sera relu avec un <code>AudioContext</code> fonctionnant à 44100Hz, sera automatiquement *rééchantillonné* à 44100Hz (et produira donc 44100 trames), et durera 1,0 seconde : 44100 images / 44100Hz = 1 seconde.</p>
+
+<div class="note">
+<p><strong>Note :</strong> le rééchantillonnage audio est très similaire au redimensionnement d'une image : supposons que vous ayez une image 16 x 16, mais que vous vouliez qu'elle remplisse une zone 32x32: vous la redimensionnez (rééchantillonnez). Le résultat aura une qualité moindre (il pourra être flou ou bizarre, selon l'algorithme de redimensionnement), mais cela fonctionnera, et l'image redimensionnée prendra moins de place. L'audio rééchantillonné est exactement la même chose - vous économisez de l'espace, mais en pratique, vous ne pourrez pas reproduire correctement le contenu haute fréquence (les sons aigus).</p>
+</div>
+
+<p>Examinons maintenant un exemple de <code>createBuffer()</code> plus complexe, dans lequel nous créons un tampon de deux secondes, le remplissons de bruit blanc, puis le reproduisons via {{domxref("AudioBufferSourceNode")}}. Le commentaire devrait clairement faire comprendre ce qui se passe. Vous pouvez également exécuter le code en direct ou regarder le source.</p>
+
+<pre class="brush: js;highlight[14]">var ctxAudio = new (window.AudioContext || window.webkitAudioContext)();
+
+// Création d'un tampon stéréo vide de trois secondes à la fréquence d'échantillonnage de l'AudioContext
+var monArrayBuffer = ctxAudio.createBuffer(2, ctxAudio.sampleRate * 3, ctxAudio.sampleRate);
+
+// Remplissage du tampon avec du bruit blanc ;
+// simplement des valeurs aléatoires entre -1,0 et 1,0
+for (var canal = 0; canal &lt; monArrayBuffer.numberOfChannels; canal++) {
+  // Cela nous donne le ArrayBuffer qui contient effectivement les données
+  var donneesCourantes = monArrayBuffer.getChannelData(canal);
+  for (var i = 0; i &lt; monArrayBuffer.length; i++) {
+    // Math.random() est dans [0; 1,0]
+    // l'audio doit se trouver dans [-1,0; 1,0]
+    donneesCourantes[i] = Math.random() * 2 - 1;
+  }
+}
+
+// Récupération d'un AudioBufferSourceNode.
+// C'est l'AudioNode à utiliser quand nous voulons lire un AudioBuffer
+var source = ctxAudio.createBufferSource();
+// Définir le tampon dans l'AudioBufferSourceNode
+source.buffer = monArrayBuffer;
+// Connecter l'AudioBufferSourceNode à la destination,
+// de sorte que nous puissions entendre le son
+source.connect(ctxAudio.destination);
+// Démarrer la lecture de la source
+source.start();</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('Web Audio API', '#dom-baseaudiocontext-createbuffer', 'createBuffer()')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(25.0)}} </td>
+   <td>{{CompatNo}}</td>
+   <td>15.0 {{property_prefix("webkit")}}<br>
+    22</td>
+   <td>6.0{{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>26.0</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>33.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utilisation de l'API Web Audio</a></li>
+</ul>
diff --git a/files/fr/web/api/baseaudiocontext/createbuffersource/index.html b/files/fr/web/api/baseaudiocontext/createbuffersource/index.html
new file mode 100644
index 0000000000..4449e78563
--- /dev/null
+++ b/files/fr/web/api/baseaudiocontext/createbuffersource/index.html
@@ -0,0 +1,93 @@
+---
+title: BaseAudioContext.createBufferSource()
+slug: Web/API/BaseAudioContext/createBufferSource
+translation_of: Web/API/BaseAudioContext/createBufferSource
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<p><span class="seoSummary">La méthode <code>createBufferSource()</code> de l’interface {{ domxref("BaseAudioContext") }} est utilisée pour créer un nouveau {{ domxref("AudioBufferSourceNode") }}, qui peut être employé pour jouer des données audio contenues dans un objet {{ domxref("AudioBuffer") }}.</span> Des {{ domxref("AudioBuffer") }} peuvent être créés en utilisant {{domxref("BaseAudioContext.createBuffer")}}, ou sont retournés par la méthode {{domxref("BaseAudioContext.decodeAudioData")}} quand elle a terminé de décoder une piste audio avec succès.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <var>source</var> = <var>baseAudioContext</var>.createBufferSource();</pre>
+
+<h3 id="Retourne">Retourne</h3>
+
+<p>Un {{domxref("AudioBufferSourceNode")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans cet exemple, on crée un tampon de deux secondes, on le remplit avec du bruit blanc, puis on le joue via un {{ domxref("AudioBufferSourceNode") }}. Les commentaires devraient expliquer clairement ce qui se passe.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Vous pouvez également <a href="https://mdn.github.io/webaudio-examples/audio-buffer/" lang="en-US">exécuter le code en direct</a>, ou <a href="https://github.com/mdn/webaudio-examples/blob/master/audio-buffer/index.html" lang="en-US">voir la source</a>.</p>
+</div>
+
+<pre class="brush: js;highlight[31]">var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+var button = document.querySelector('button');
+var pre = document.querySelector('pre');
+var myScript = document.querySelector('script');
+
+pre.innerHTML = myScript.innerHTML;
+
+// Stéréo
+var channels = 2;
+// Crée un tampon stéréo vide de deux secondes au
+// taux d’échantillonage de l’AudioContext
+var frameCount = audioCtx.sampleRate * 2.0;
+
+var myArrayBuffer = audioCtx.createBuffer(2, frameCount, audioCtx.sampleRate);
+
+button.onclick = function() {
+  // Remplit le tampon avec du bruit blanc ;
+  // simplement des valeurs aléatoires entre -1.0 et 1.0
+  for (var channel = 0; channel &lt; channels; channel++) {
+   // Ceci nous donne l’ArrayBuffer qui contient les données
+   var nowBuffering = myArrayBuffer.getChannelData(channel);
+   for (var i = 0; i &lt; frameCount; i++) {
+     // Math.random() est parmi [0; 1.0]
+     // audio doit être parmi [-1.0; 1.0]
+     nowBuffering[i] = Math.random() * 2 - 1;
+   }
+  }
+
+  // Obtient un AudioBufferSourceNode.
+  // C’est l’AudioNode à utiliser quand nous voulons jouer un AudioBuffer
+  var source = audioCtx.createBufferSource();
+  // renseigne l’AudioBufferSourceNode avec notre tampon
+  source.buffer = myArrayBuffer;
+  // connecte l’AudioBufferSourceNode à la
+  // destination afin qu’on puisse entendre le son
+  source.connect(audioCtx.destination);
+  // commence la lecture de la source
+  source.start();
+}</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('Web Audio API', '#dom-baseaudiocontext-createbuffersource', 'createBufferSource()')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">La table de compatibilité dans cette page est générée à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request.</em></div>
+
+<p>{{Compat("api.BaseAudioContext.createBufferSource")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API" lang="fr">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/baseaudiocontext/createpanner/index.html b/files/fr/web/api/baseaudiocontext/createpanner/index.html
new file mode 100644
index 0000000000..9630c4af5f
--- /dev/null
+++ b/files/fr/web/api/baseaudiocontext/createpanner/index.html
@@ -0,0 +1,157 @@
+---
+title: BaseAudioContext.createPanner()
+slug: Web/API/BaseAudioContext/createPanner
+tags:
+  - API
+  - AudioContext
+  - BaseAudioContext
+  - Méthode
+  - Reference
+  - Web Audio
+  - Web Audio API
+  - createPanner
+translation_of: Web/API/BaseAudioContext/createPanner
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<div>
+<p>La méthode <code>createPanner()</code> de l'interface {{ domxref("BaseAudioContext") }} est utilisée pour créer un nouveau {{domxref("PannerNode")}}, qui sert à spatialiser dans un environnement 3D un flux audio entrant.</p>
+</div>
+
+<p>Le <em>panner node</em> est spatialisé en relation avec l'{{domxref("AudioListener") }} de l'AudioContext (défini par l'attribut {{domxref("AudioContext.listener") }}), qui représente la position et l'orientation de la personne écoutant le flux audio.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">baseAudioCtx.createPanner();</pre>
+
+<h3 id="Retourne">Retourne</h3>
+
+<p>Un {{domxref("PannerNode")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans l'exemple suivant, vous pouvez voir comment la méthode <code>createPanner()</code>, l'{{domxref("AudioListener")}} et le {{domxref("PannerNode")}} peuvent être utilisés pour contrôler la spatialisation d'un flux audio. Généralement, vous définirez la position dans un espace 3D que votre écouteur et votre <em>panner</em> (source) occupaient initialement, puis ajuster la position de l'un ou des deux au fur et à mesure de l'utilisation. Vous pourriez par exemple vouloir déplacer un personnage dans un monde de jeu vidéo, et vouloir que le rendu audio change de manière réaliste tandis que le personnage s'approche ou s'éloigne d'un diffuseur audio tel qu'une chaîne stéréo. Dans cet exemple, vous pouvez voir ceci contrôlé par les fonctions <code>moveRight()</code>, <code>moveLeft()</code>, etc., qui définissent de nouvelles valeurs pour la position du <em>panner</em> via la fonction <code>PositionPanner()</code>.</p>
+
+<p>Pour voir une implantation complète, visitez notre <a href="https://mdn.github.io/webaudio-examples/panner-node/">exemple de panner-node</a> (<a href="https://github.com/mdn/webaudio-examples/tree/master/panner-node">lisez le code source aussi !</a>) – cette démonstration vous transporte dans un environnement 2.5D appelé "Pièce de métal", où vous pouvez jouer un morceau sur une boom box et vous déplacer autour de celle-ci pour entendre comment le son change !</p>
+
+<p>Notez la manière dont nous avons utilisé la détection de fonctionnalité pour soit donner au navigateur les nouvelles valeurs des propriétés (comme {{domxref("AudioListener.forwardX")}}) pour définir la position, etc. s'il le permet, ou d'anciennes méthodes (comme {{domxref("AudioListener.setOrientation()")}}) s'il les permet aussi mais non les nouvelles propriétés.</p>
+
+<pre class="brush: js">// set up listener and panner position information
+var WIDTH = window.innerWidth;
+var HEIGHT = window.innerHeight;
+
+var xPos = Math.floor(WIDTH/2);
+var yPos = Math.floor(HEIGHT/2);
+var zPos = 295;
+
+// define other variables
+
+var AudioContext = window.AudioContext || window.webkitAudioContext;
+var audioCtx = new AudioContext();
+
+var panner = audioCtx.createPanner();
+panner.panningModel = 'HRTF';
+panner.distanceModel = 'inverse';
+panner.refDistance = 1;
+panner.maxDistance = 10000;
+panner.rolloffFactor = 1;
+panner.coneInnerAngle = 360;
+panner.coneOuterAngle = 0;
+panner.coneOuterGain = 0;
+
+if(panner.orientationX) {
+  panner.orientationX.setValueAtTime(1, audioCtx.currentTime);
+  panner.orientationY.setValueAtTime(0, audioCtx.currentTime);
+  panner.orientationZ.setValueAtTime(0, audioCtx.currentTime);
+} else {
+  panner.setOrientation(1,0,0);
+}
+
+var listener = audioCtx.listener;
+
+if(listener.forwardX) {
+  listener.forwardX.setValueAtTime(0, audioCtx.currentTime);
+  listener.forwardY.setValueAtTime(0, audioCtx.currentTime);
+  listener.forwardZ.setValueAtTime(-1, audioCtx.currentTime);
+  listener.upX.setValueAtTime(0, audioCtx.currentTime);
+  listener.upY.setValueAtTime(1, audioCtx.currentTime);
+  listener.upZ.setValueAtTime(0, audioCtx.currentTime);
+} else {
+  listener.setOrientation(0,0,-1,0,1,0);
+}
+
+var source;
+
+var play = document.querySelector('.play');
+var stop = document.querySelector('.stop');
+
+var boomBox = document.querySelector('.boom-box');
+
+var listenerData = document.querySelector('.listener-data');
+var pannerData = document.querySelector('.panner-data');
+
+leftBound = (-xPos) + 50;
+rightBound = xPos - 50;
+
+xIterator = WIDTH/150;
+
+// listener will always be in the same place for this demo
+
+if(listener.positionX) {
+  listener.positionX.setValueAtTime(xPos, audioCtx.currentTime);
+  listener.positionY.setValueAtTime(yPos, audioCtx.currentTime);
+  listener.positionZ.setValueAtTime(300, audioCtx.currentTime);
+} else {
+  listener.setPosition(xPos,yPos,300);
+}
+
+listenerData.innerHTML = 'Listener data: X ' + xPos + ' Y ' + yPos + ' Z ' + 300;
+
+// panner will move as the boombox graphic moves around on the screen
+function positionPanner() {
+  if(panner.positionX) {
+    panner.positionX.setValueAtTime(xPos, audioCtx.currentTime);
+    panner.positionY.setValueAtTime(yPos, audioCtx.currentTime);
+    panner.positionZ.setValueAtTime(zPos, audioCtx.currentTime);
+  } else {
+    panner.setPosition(xPos,yPos,zPos);
+  }
+  pannerData.innerHTML = 'Panner data: X ' + xPos + ' Y ' + yPos + ' Z ' + zPos;
+}</pre>
+
+<div class="note">
+<p><strong>Note</strong>: In terms of working out what position values to apply to the listener and panner, to make the sound appropriate to what the visuals are doing on screen, there is quite a bit of math involved, but you will soon get used to it with a bit of experimentation.</p>
+</div>
+
+<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>{{SpecName('Web Audio API', '#dom-baseaudiocontext-createpanner', 'createPanner()')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div>
+
+
+<p>{{Compat("api.BaseAudioContext.createPanner")}}</p>
+</div>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser l'API Web Audio</a></li>
+</ul>
diff --git a/files/fr/web/api/baseaudiocontext/createperiodicwave/index.html b/files/fr/web/api/baseaudiocontext/createperiodicwave/index.html
new file mode 100644
index 0000000000..94622f3a32
--- /dev/null
+++ b/files/fr/web/api/baseaudiocontext/createperiodicwave/index.html
@@ -0,0 +1,108 @@
+---
+title: BaseAudioContext.createPeriodicWave()
+slug: Web/API/BaseAudioContext/createPeriodicWave
+tags:
+  - API
+  - Audio
+  - AudioContext
+  - BaseAudioContext
+  - Media
+  - Méthode
+  - Web Audio API
+  - createPeriodicWave
+translation_of: Web/API/BaseAudioContext/createPeriodicWave
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<div>
+<p><span class="seoSummary">La méthode <code>createPeriodicWave()</code> de l'interface {{ domxref("BaseAudioContext") }} est utilisée pour créer une {{domxref("PeriodicWave")}} (onde périodique), qui sert à définir une onde sinusoïdale périodique qui peut être utilisée pour modeler la sortie d'un {{ domxref("OscillatorNode") }}.</span></p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var onde = <em>AudioContext</em>.createPeriodicWave(<em>réel</em>, <em>imag</em>[, <em>constraints</em>]);</pre>
+
+<h3 id="Retour">Retour</h3>
+
+<p>Un {{domxref("PeriodicWave")}}.</p>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>réel</code></dt>
+ <dd>Un tableau de termes cosinus (traditionnellement les termes A).</dd>
+ <dt><code>imag</code></dt>
+ <dd>Un tableau de termes sinus (traditionnellement les termes B).</dd>
+ <dt><code>contraintes</code> {{optional_inline}}</dt>
+ <dd>Un objet dictionnaire spécifiant si la normalisation doit être désactivée (si non spécifié, la normalisation est activée par défaut). Il accepte une propriété :
+ <ul>
+  <li><code>disableNormalization</code>: si réglé à <code>true</code>, la normalisation est désactivée pour l'onde périodique. Sa valeur par défaut est <code>false</code>.</li>
+ </ul>
+ </dd>
+</dl>
+
+<div class="note">
+<p>Si normalisée, l'onde résultante aura une valeur absolue de sommet égale à 1.</p>
+</div>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'exemple suivant illustre un usage simple de <code>createPeriodicWave()</code>, pour créer un objet {{domxref("PeriodicWave")}} contenant une simple courbe de sinus.</p>
+
+<pre class="brush: js">var réel = new Float32Array(2);
+var imag = new Float32Array(2);
+var contexteAudio = new AudioContext();
+var oscillateur = contexteAudio.createOscillator();
+
+réel[0] = 0;
+imag[0] = 0;
+réel[1] = 1;
+imag[1] = 0;
+
+var onde = contexteAudio.createPeriodicWave(réel, imag, {disableNormalization: true});
+
+oscillateur.setPeriodicWave(wave);
+
+oscillateur.connect(contexteAudio.destination);
+
+oscillateur.start();
+oscillateur.stop(2);</pre>
+
+<p>Cela fonctionne car un son n'ayant qu'un unique harmonique est par définition une onde sinusoïdale.</p>
+
+<p>Ici, nous créons une <code>PeriodicWave</code> avec deux valeurs. La première est le décalage DC, qui est la valeur à la quelle l'ocillateur démarre. 0 est une bonne valeur de départ ici car nous voulons commencer la courbe au milieu de l'intervalle [-1.0; 1.0].</p>
+
+<p>La seconde valeur et les suivantes sont les composantes de sinus et de cosinus. Vous pouvez les voir comme le résultat d'une transformation de Fourier, où l'on obtient les valeurs du domaine de fréquence à partir de la valeur du domaine de temps. Ici, avec <code>createPeriodicWave()</code>, vous spécifiez les fréquences, et le navigateur calcule une transformation inverse de Fourier pour obtenir un tampon de domaine de temps pour la fréquence de l'oscillateur. Ici, nous définissons seulement un composant au volume maximal (1.0) sur l'harmonique fondamentale, ainsi on obtient une courbe sinusoïdale.</p>
+
+<p>Les coefficients de la transformation de Fourier doivent être données dans un ordre <em>croissant</em> (c'est-à-dire <math><semantics><mrow><mrow><mo>(</mo><mrow><mi>a</mi><mo>+</mo><mi>b</mi><mi>i</mi></mrow><mo>)</mo></mrow><msup><mi>e</mi><mi>i</mi></msup><mo>,</mo><mrow><mo>(</mo><mrow><mi>c</mi><mo>+</mo><mi>d</mi><mi>i</mi></mrow><mo>)</mo></mrow><msup><mi>e</mi><mrow><mn>2</mn><mi>i</mi></mrow></msup><mo>,</mo><mrow><mo>(</mo><mrow><mi>f</mi><mo>+</mo><mi>g</mi><mi>i</mi></mrow><mo>)</mo></mrow><msup><mi>e</mi><mrow><mn>3</mn><mi>i</mi></mrow></msup></mrow><annotation encoding="TeX">\left(a+bi\right)e^{i} , \left(c+di\right)e^{2i} , \left(f+gi\right)e^{3i}    </annotation></semantics></math> etc) et peuvent être positifs ou négatifs. Une méthode simple pour obtenir manuellement de tels coefficients (bien qu'elle ne soit la meilleure) est d'utiliser une calculateur graphique.</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('Web Audio API', '#dom-baseaudiocontext-createperiodicwave', 'createPeriodicWave')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+
+
+<p>{{Compat("api.BaseAudioContext.createPeriodicWave")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser l'API Web Audio</a></li>
+</ul>
diff --git a/files/fr/web/api/baseaudiocontext/index.html b/files/fr/web/api/baseaudiocontext/index.html
new file mode 100644
index 0000000000..76208b71b9
--- /dev/null
+++ b/files/fr/web/api/baseaudiocontext/index.html
@@ -0,0 +1,291 @@
+---
+title: BaseAudioContext
+slug: Web/API/BaseAudioContext
+tags:
+  - API
+  - Audio
+  - BaseAudioContext
+  - Interface
+  - Reference
+  - TopicStub
+  - Web Audio API
+translation_of: Web/API/BaseAudioContext
+---
+<div>{{APIRef("Web Audio API")}}</div>
+
+<p class="summary"><span class="seoSummary">L'interface <code>BaseAudioContext</code> agit comme une définition de base pour les graphiques de traitement audio en ligne et hors ligne, comme représenté par {{domxref("AudioContext")}} et {{domxref("OfflineAudioContext")}} respectivement.</span> Vous n'utiliseriez pas <code>BaseAudioContext</code> directement — vous utiliseriez ses fonctionnalités via l'une de ces deux interfaces héréditaires.</p>
+
+<p>Un <code>BaseAudioContext</code> peut être une cible d'événements, il implémente donc l'interface {{domxref("EventTarget")}}.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("BaseAudioContext.audioWorklet")}} {{experimental_inline}} {{readonlyInline}}</dt>
+ <dd>Renvoie l'objet {{domxref("AudioWorklet")}}, utilisé pour créer des AudioNodes personnalisés avec traitement JavaScript.</dd>
+ <dt>{{domxref("BaseAudioContext.currentTime")}} {{readonlyInline}}</dt>
+ <dd>Renvoie un double représentant une durée matérielle toujours croissante en secondes utilisée pour la planification. Il commence à <code>0</code>.</dd>
+ <dt>{{domxref("BaseAudioContext.destination")}} {{readonlyInline}}</dt>
+ <dd>Renvoie un {{domxref("AudioDestinationNode")}} représentant la destination finale de tout l'audio dans le contexte. Il peut être considéré comme le périphérique de rendu audio.</dd>
+ <dt>{{domxref("BaseAudioContext.listener")}} {{readonlyInline}}</dt>
+ <dd>Renvoie l'objet {{domxref("AudioListener")}}, utilisé pour la spatialisation 3D.</dd>
+ <dt>{{domxref("BaseAudioContext.sampleRate")}} {{readonlyInline}}</dt>
+ <dd>Renvoie un float représentant la fréquence d'échantillonnage (en échantillons par seconde) utilisée par tous les <span class="tlid-translation translation" lang="fr"><span title="">nœuds dans ce contexte.</span></span> La fréquence d'échantillonnage d'un {{domxref("AudioContext")}} ne peut pas être modifiée.</dd>
+ <dt>{{domxref("BaseAudioContext.state")}} {{readonlyInline}}</dt>
+ <dd>Renvoie l'état actuel de l'<code>AudioContext</code>.</dd>
+</dl>
+
+<h3 id="Gestionnaires_dévénements">Gestionnaires d'événements</h3>
+
+<dl>
+ <dt>{{domxref("BaseAudioContext.onstatechange")}}</dt>
+ <dd>Un gestionnaire d'événements qui s'exécute lorsqu'un événement de type {{event("statechange")}} s'est déclenché. Cela se produit lorsque l'état de l'<code>AudioContext</code> change, en raison de l'appel de l'une des méthodes de changement d'état ({{domxref("AudioContext.suspend")}}, {{domxref("AudioContext.resume")}}, ou {{domxref("AudioContext.close")}}).</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Implémente également les méthodes de l'interface </em>{{domxref("EventTarget")}}.</p>
+
+<dl>
+ <dt>{{domxref("BaseAudioContext.createBuffer()")}}</dt>
+ <dd>Crée un nouvel objet {{ domxref("AudioBuffer") }} vide, qui peut ensuite être rempli de données et lu via un {{ domxref("AudioBufferSourceNode") }}.</dd>
+ <dt>{{domxref("BaseAudioContext.createConstantSource()")}}</dt>
+ <dd>Crée un objet {{domxref("ConstantSourceNode")}}, qui est une source audio qui émet en continu un signal sonore monophonique (un canal) dont les échantillons ont tous la même valeur.</dd>
+ <dt>{{domxref("BaseAudioContext.createBufferSource()")}}</dt>
+ <dd>Crée un {{domxref("AudioBufferSourceNode")}}, qui peut être utilisé pour lire et manipuler des données audio contenues dans un objet {{ domxref("AudioBuffer") }}. Les {{ domxref("AudioBuffer") }} sont créés à l'aide de {{domxref("AudioContext.createBuffer")}} ou renvoyés par {{domxref("AudioContext.decodeAudioData")}} lorsqu'il décode avec succès une piste audio.</dd>
+ <dt>{{domxref("BaseAudioContext.createScriptProcessor()")}}</dt>
+ <dd>Crée un {{domxref("ScriptProcessorNode")}}, qui peut être utilisé pour le traitement audio direct via JavaScript.</dd>
+ <dt>{{domxref("BaseAudioContext.createStereoPanner()")}}</dt>
+ <dd>Crée un {{domxref("StereoPannerNode")}}, qui peut être utilisé pour appliquer un panoramique stéréo à une source audio.</dd>
+ <dt>{{domxref("BaseAudioContext.createAnalyser()")}}</dt>
+ <dd>Crée un {{domxref("AnalyserNode")}}, qui peut être utilisé pour exposer les données de temps et de fréquence audio et par exemple pour créer des visualisations de données.</dd>
+ <dt>{{domxref("BaseAudioContext.createBiquadFilter()")}}</dt>
+ <dd>Crée un {{domxref("BiquadFilterNode")}}, qui représente un filtre du second ordre configurable en plusieurs types de filtres courants: passe-haut, passe-bas, passe-bande, etc.</dd>
+ <dt>{{domxref("BaseAudioContext.createChannelMerger()")}}</dt>
+ <dd>Crée un {{domxref("ChannelMergerNode")}}, qui est utilisé pour combiner les canaux de plusieurs flux audio en un seul flux audio.</dd>
+ <dt>{{domxref("BaseAudioContext.createChannelSplitter()")}}</dt>
+ <dd>Crée un {{domxref("ChannelSplitterNode")}}, qui est utilisé pour accéder aux canaux individuels d'un flux audio et les traiter séparément.</dd>
+ <dt>{{domxref("BaseAudioContext.createConvolver()")}}</dt>
+ <dd>Crée un {{domxref("ConvolverNode")}}, qui peut être utilisé pour appliquer des effets de convolution à votre graphique audio, par exemple un effet de réverbération.</dd>
+ <dt>{{domxref("BaseAudioContext.createDelay()")}}</dt>
+ <dd>Crée un {{domxref("DelayNode")}}, qui est utilisé pour retarder le signal audio entrant d'une certaine quantité. Ce nœud est également utile pour créer des boucles de rétroaction dans un graphique d'API Web Audio.</dd>
+ <dt>{{domxref("BaseAudioContext.createDynamicsCompressor()")}}</dt>
+ <dd>Crée un {{domxref("DynamicsCompressorNode")}}, qui peut être utilisé pour appliquer une compression acoustique à un signal audio.</dd>
+ <dt>{{domxref("BaseAudioContext.createGain()")}}</dt>
+ <dd>Crée un {{domxref("GainNode")}}, qui peut être utilisé pour contrôler le volume global du graphique audio.</dd>
+ <dt>{{domxref("BaseAudioContext.createIIRFilter()")}}</dt>
+ <dd>Crée un {{domxref("IIRFilterNode")}}, qui représente un filtre du second ordre configurable en plusieurs types de filtres communs différents.</dd>
+ <dt>{{domxref("BaseAudioContext.createOscillator()")}}</dt>
+ <dd>Crée un {{domxref("OscillatorNode")}}, une source représentant une forme d'one périodique. Cela génère essentiellement un ton.</dd>
+ <dt>{{domxref("BaseAudioContext.createPanner()")}}</dt>
+ <dd>Crée un {{domxref("PannerNode")}}, qui est utilisé pour spatialiser un flux audio entrant dans l'espace 3D.</dd>
+ <dt>{{domxref("BaseAudioContext.createPeriodicWave()")}}</dt>
+ <dd>Crée un {{domxref("PeriodicWave")}}, utilisé pour définir une forme d'one périodique qui peut être utilisée pour déterminer la sortie d'un {{ domxref("OscillatorNode") }}.</dd>
+ <dt>{{domxref("BaseAudioContext.createWaveShaper()")}}</dt>
+ <dd>Crée un {{domxref("WaveShaperNode")}}, qui est utilisé pour implémenter des effets de distorsion non linéaires.</dd>
+ <dt>{{domxref("BaseAudioContext.decodeAudioData()")}}</dt>
+ <dd>Décode de manière asynchrone les données de fichiers audio contenues dans un {{domxref("ArrayBuffer")}}. Dans ce cas, le ArrayBuffer est généralement chargé à partir de l'attribut <code>response</code> d'un {{domxref("XMLHttpRequest")}} après avoir défini le <code>responseType</code> sur <code>arraybuffer</code>. Cette méthode ne foncionne que sur des fichiers complets et non sur des fragments de fichiers audio.</dd>
+ <dt>{{domxref("BaseAudioContext.resume()")}}</dt>
+ <dd>Reprend la progression du temps dans un contexte audio précédemment suspendu / mis en pause.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Déclaration de context audio de base:</p>
+
+<pre class="brush: js notranslate">var audioCtx = new AudioContext();</pre>
+
+<p>Variante de nagivateur croisé:</p>
+
+<pre class="brush: js notranslate">var AudioContext = window.AudioContext || window.webkitAudioContext;
+var audioCtx = new AudioContext();
+
+var oscillatorNode = audioCtx.createOscillator();
+var gainNode = audioCtx.createGain();
+var finish = audioCtx.destination;
+// etc.</pre>
+
+<h2 id="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('Web Audio API', '#BaseAudioContext', 'BaseAudioContext')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support de base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15.0{{property_prefix("webkit")}}<br>
+    22</td>
+   <td>6.0{{property_prefix("webkit")}}</td>
+  </tr>
+  <tr>
+   <td><code>baseLatency</code></td>
+   <td>{{CompatChrome(60)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>createConstantSource()</code></td>
+   <td>{{CompatChrome(56)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(52)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(43)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>createStereoPanner()</code></td>
+   <td>{{CompatChrome(42)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(37.0)}} </td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>onstatechange</code>, <code>state</code>, <code>suspend()</code>, <code>resume()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(40.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatSafari(8.0)}}</td>
+  </tr>
+  <tr>
+   <td>Sans préfixe</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android Webview</th>
+   <th>Chrome pour Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>2.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>baseLatency</code></td>
+   <td>{{CompatChrome(60)}}</td>
+   <td>{{CompatChrome(60)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>createConstantSource()</code></td>
+   <td>{{CompatChrome(56)}}</td>
+   <td>{{CompatChrome(56)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(52)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>createStereoPanner()</code></td>
+   <td>{{CompatChrome(42)}}</td>
+   <td>{{CompatChrome(42)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>onstatechange</code>, <code>state</code>, <code>suspend()</code>, <code>resume()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Sans préfixe</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile(43)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul style="margin-left: 40px;">
+ <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Utilisation de l'API Web Audio</a></li>
+ <li>{{domxref("AudioContext")}}</li>
+ <li>{{domxref("OfflineAudioContext")}}</li>
+</ul>
diff --git a/files/fr/web/api/battery_status_api/index.html b/files/fr/web/api/battery_status_api/index.html
new file mode 100644
index 0000000000..e7bf255db7
--- /dev/null
+++ b/files/fr/web/api/battery_status_api/index.html
@@ -0,0 +1,106 @@
+---
+title: API Battery Status
+slug: Web/API/Battery_status_API
+tags:
+  - API
+  - Aperçu
+  - Guide
+  - Obsolete
+translation_of: Web/API/Battery_Status_API
+---
+<p>{{DefaultAPISidebar("Battery API")}}{{Obsolete_Header}}</p>
+
+<p>L'<strong>API <em>Battery Status</em></strong>, souvent mentionnée sous le nom <strong>Battery API</strong>, fournit des informations sur le niveau de charge du système et permet d'envoyer des événements pour prévenir d'un changement du niveau de charge de la batterie. Cela peut être utilisé pour ajuster la consommation d'une application et la réduire pour réduire l'utilisation de la batterie lorsque son niveau de charge est bas ou encore de sauvegarder les données quand la batterie est bientôt vide.</p>
+
+<p>L'API Battery Status API étend l'interface {{domxref("window.navigator")}} avec la propriété {{domxref("window.navigator.battery")}}, méthode qui renvoie une promesse, résolue par l'objet {{domxref("BatteryManager")}}. Cet objet permet d'ajouter des nouveaux événements pour superviser l'état de la batterie.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, on cherche à surveiller les changements, à la fois du statut de la charge (est-ce que l'équipement est branché et se recharge ou est ce que l'équipement est alimenté par sa batterie) et des changements du niveau de charge dans le temps.</p>
+
+<p>Cela se fait en surveillant les événements : </p>
+
+<ul>
+ <li>{{event("chargingchange")}}: changement de l'êtat de charge</li>
+ <li>{{event("levelchange")}}: changement du niveau de batterie</li>
+ <li>{{event("chargingtimechange")}}: évolution de l'estimation du temps de recharge</li>
+ <li>{{event("dischargingtimechange")}}: évolution de l'estimation d'autonomie sur batterie</li>
+</ul>
+
+<pre class="brush: js;">navigator.getBattery().then(function(battery) {
+  function updateAllBatteryInfo(){
+    updateChargeInfo();
+    updateLevelInfo();
+    updateChargingInfo();
+    updateDischargingInfo();
+  }
+  updateAllBatteryInfo();
+
+  battery.addEventListener('chargingchange', function(){
+    updateChargeInfo();
+  });
+  function updateChargeInfo(){
+    console.log("Battery en charge ? "
+                + (battery.charging ? "Oui" : "Non"));
+  }
+
+  battery.addEventListener('levelchange', function(){
+    updateLevelInfo();
+  });
+  function updateLevelInfo(){
+    console.log("Niveau de batterie: "
+                + battery.level * 100 + "%");
+  }
+
+  battery.addEventListener('chargingtimechange', function(){
+    updateChargingInfo();
+  });
+  function updateChargingInfo(){
+    console.log("Temps avant charge de la batterie: "
+                 + battery.chargingTime + " secondes");
+  }
+
+  battery.addEventListener('dischargingtimechange', function(){
+    updateDischargingInfo();
+  });
+  function updateDischargingInfo(){
+    console.log("Autonomie sur batterie: "
+                 + battery.dischargingTime + " secondes");
+  }
+
+});
+</pre>
+
+<p>Voir aussi <a class="external" href="http://www.w3.org/TR/battery-status/#examples">l'exemple de la spécification</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("Battery API")}}</td>
+   <td>{{Spec2("Battery API")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.BatteryManager")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/Apps/Build/gather_and_modify_data/retrieving_battery_status_information">Récupérer les informations relatives à la batterie - article et démonstration</a></li>
+ <li><a class="external" href="http://hacks.mozilla.org/2012/02/using-the-battery-api-part-of-webapi/">Billet de blog sur Hacks - Utiliser l'API Battery (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/api/batterymanager/charging/index.html b/files/fr/web/api/batterymanager/charging/index.html
new file mode 100644
index 0000000000..9ca1bf21ac
--- /dev/null
+++ b/files/fr/web/api/batterymanager/charging/index.html
@@ -0,0 +1,65 @@
+---
+title: BatteryManager.charging
+slug: Web/API/BatteryManager/charging
+translation_of: Web/API/BatteryManager/charging
+---
+<div>{{obsolete_header}}</div>
+
+<div>{{APIRef("Battery API")}}</div>
+
+<p>Une valeur booléenne indiquant si la batterie de l'équipement est en train d'être chargée.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <em>charging</em> = battery.charging</pre>
+
+<p><code>charging</code> indique si <code><em>battery</em></code>, qui est un objet du type {{domxref("BatteryManager")}}, est en charge; si la batterie est en charge, la variable a la valeur <code>true</code>. Sinon, dans le cas de la décharge, la variable a la valeurvaux <code>false</code>.</p>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<h3 id="Code_HTML">Code HTML</h3>
+
+<pre class="brush: html">&lt;div id="charging"&gt;(&amp;ecirc;tat de charge inconnu)&lt;/div&gt;</pre>
+
+<h3 id="Code_JavaScript">Code JavaScript</h3>
+
+<pre class="brush: js; highlight:[3]">navigator.getBattery().then(function(battery) {
+
+    var charging = battery.charging;
+
+    document.querySelector('#charging').textContent = charging ;
+});</pre>
+
+<p>{{ EmbedLiveSample('Example', '100%', 30) }}</p>
+
+<h2 id="Spécifications">Spécifications</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("Battery API")}}</td>
+   <td>{{Spec2("Battery API")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.BatteryManager.charging")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("BatteryManager")}}</li>
+ <li>{{domxref("Navigator.getBattery")}}</li>
+</ul>
diff --git a/files/fr/web/api/batterymanager/chargingtime/index.html b/files/fr/web/api/batterymanager/chargingtime/index.html
new file mode 100644
index 0000000000..0644df447e
--- /dev/null
+++ b/files/fr/web/api/batterymanager/chargingtime/index.html
@@ -0,0 +1,71 @@
+---
+title: BatteryManager.chargingTime
+slug: Web/API/BatteryManager/chargingTime
+translation_of: Web/API/BatteryManager/chargingTime
+---
+<div>{{obsolete_header}}</div>
+
+<p>{{APIRef("Battery API")}}</p>
+
+<p>Indique le temps, en secondes, qu'il reste jusqu'à que la batterie soit rechargée.</p>
+
+<div class="note">
+<p>Même si le temps retourné devrait être précis à la seconde, les navigateurs arrondissent cette valeur (typiquement à 15 minutes près) afin de limiter l'identification et le suivi des utilisateurs.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>time</em> = battery.chargingTime</pre>
+
+<p><code>time</code> est le temps restant en secondes jusqu'à que <code><em>battery</em></code>, qui est un objet de type {{domxref("BatteryManager")}}, soit rechargée, ou vaut 0 si la batterie est déjà rechargée. Si la batterie est en décharge, la variable vaut <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code>.</p>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<h3 id="Code_HTML">Code HTML</h3>
+
+<pre class="brush: html">&lt;div id="chargingTime"&gt;(temps de charge inconnu)&lt;/div&gt;
+</pre>
+
+<h3 id="Code_JavaScript">Code JavaScript</h3>
+
+<pre class="brush: js; highlight:[3]">navigator.getBattery().then(function(battery) {
+
+   var time = battery.chargingTime;
+
+   document.querySelector('#chargingTime').textContent = battery.chargingTime;
+});
+</pre>
+
+<p>{{ EmbedLiveSample('Example', '100%', 30) }}</p>
+
+<h2 id="Spécifications">Spécifications</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("Battery API")}}</td>
+   <td>{{Spec2("Battery API")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.BatteryManager.chargingTime")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("BatteryManager")}}</li>
+ <li>{{domxref("Navigator.getBattery")}}</li>
+</ul>
diff --git a/files/fr/web/api/batterymanager/dischargingtime/index.html b/files/fr/web/api/batterymanager/dischargingtime/index.html
new file mode 100644
index 0000000000..265e99384d
--- /dev/null
+++ b/files/fr/web/api/batterymanager/dischargingtime/index.html
@@ -0,0 +1,71 @@
+---
+title: BatteryManager.dischargingTime
+slug: Web/API/BatteryManager/dischargingTime
+translation_of: Web/API/BatteryManager/dischargingTime
+---
+<div>{{obsolete_header}}</div>
+
+<div>{{APIRef("Battery API")}}</div>
+
+<p>Indique le temps, en secondes, qu'il reste jusqu'à que la batterie soit déchargée.</p>
+
+<div class="note">
+<p>Même si le temps retourné devrait être précis à la seconde, les navigateurs arrondissent cette valeur (typiquement à 15 minutes près) afin de limiter l'identification et le suivi des utilisateurs.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <em>time</em> = battery.dischargingTime</pre>
+
+<p><code>time</code> est le temps restant en secondes jusqu'à que <code><em>battery</em></code>, qui est un objet de type {{domxref("BatteryManager")}}, soit complètement déchargée. La variable vaut <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity" title="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code> si la batterie est en train d'être chargée ou si le système ne parvient pas à calculer un temps restant.</p>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<h3 id="Code_HTML">Code HTML</h3>
+
+<pre class="brush: html">&lt;div id="dischargingTime"&gt;(temps de d&amp;eacute;charge inconnu)&lt;/div&gt;
+</pre>
+
+<h3 id="Code_JavaScript">Code JavaScript</h3>
+
+<pre class="brush: js;  highlight:[3]">navigator.getBattery().then(function(battery) {
+
+    var time = battery.dischargingTime;
+
+    document.querySelector('#dischargingTime').textContent = battery.dischargingTime;
+});
+</pre>
+
+<p>{{ EmbedLiveSample('Example', '100%', 30) }}</p>
+
+<h2 id="Spécifications">Spécifications</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("Battery API")}}</td>
+   <td>{{Spec2("Battery API")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.BatteryManager.dischargingTime")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("BatteryManager")}}</li>
+ <li>{{domxref("Navigator.getBattery")}}</li>
+</ul>
diff --git a/files/fr/web/api/batterymanager/index.html b/files/fr/web/api/batterymanager/index.html
new file mode 100644
index 0000000000..a14fe8ed9a
--- /dev/null
+++ b/files/fr/web/api/batterymanager/index.html
@@ -0,0 +1,141 @@
+---
+title: BatteryManager
+slug: Web/API/BatteryManager
+tags:
+  - Mobile
+  - batterie
+  - gestion
+  - niveau
+translation_of: Web/API/BatteryManager
+---
+<p>{{ApiRef()}}</p>
+
+<h2 id="Sommaire">Sommaire</h2>
+
+<p>L'interface <code>BatteryManager </code>fournit des moyens pour obtenir des informations sur le niveau de charge de la batterie du système.</p>
+
+<p>La propriété {{domxref ("window.navigator.battery", "navigator.battery")}} retourne une instance de l'interface <code>BatteryManager </code>que vous pouvez utiliser pour interagir avec l'API d'état de la batterie.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("BatteryManager.charging")}} {{ReadOnlyInline}}</dt>
+ <dd>Un Boolean indiquant si oui ou non la batterie est actuellement en cours de charge.</dd>
+ <dt>{{domxref("BatteryManager.chargingTime")}} {{ReadOnlyInline}}</dt>
+ <dd>Un nombre qui représente le temps restant en secondes jusqu'à ce que la batterie soit complètement chargée, ou 0 si la batterie est complètement chargée.</dd>
+ <dt>{{domxref("BatteryManager.dischargingTime")}} {{ReadOnlyInline}}</dt>
+ <dd>Un nombre qui représente le temps restant en secondes jusqu'à ce que la batterie soit complètement déchargée et le système suspendu.</dd>
+ <dt>{{domxref("BatteryManager.level")}} {{ReadOnlyInline}}</dt>
+ <dd>Un nombre qui représente le niveau de charge de la batterie du système adapté à une valeur comprise entre 0.0 et 1.0.</dd>
+</dl>
+
+<h3 id="Gestionnaires_d'Evenements">Gestionnaires d'Evenements</h3>
+
+<dl>
+ <dt>{{domxref("BatteryManager.onchargingchange")}}</dt>
+ <dd>Un gestionnaire pour le changement de la présence ou non du chargeur.</dd>
+ <dt>{{domxref("BatteryManager.onchargingtimechange")}}</dt>
+ <dd>Un gestionnaire pour la mise à jour du temps de charge</dd>
+ <dt>{{domxref("BatteryManager.ondischargingtimechange")}}</dt>
+ <dd>Un gestionnaire pour la mise à jour du temps de décharge</dd>
+ <dt>{{domxref("BatteryManager.onlevelchange")}}</dt>
+ <dd>Un gestionnaire pour la mise à jour pour les changement du niveau de batterie</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p>Hérite de {{domxref("EventTarget")}}:</p>
+
+<p>{{page("/en-US/docs/Web/API/EventTarget","Methods")}}</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">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Battery API')}}</td>
+   <td>{{Spec2('Battery API')}}</td>
+   <td>Spécification initale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>
+    <p>{{CompatChrome(39.0)}}</p>
+
+    <p>{{CompatNo()}}</p>
+   </td>
+   <td>{{CompatGeckoDesktop("10")}} {{ property_prefix("moz") }} [1]<br>
+    {{CompatGeckoDesktop("16")}} (without prefix) [2]</td>
+   <td>{{ CompatNo() }}</td>
+   <td>25</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionalité</th>
+   <th>Android</th>
+   <th>Chrome Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatNo()}}</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{CompatGeckoMobile("10")}} {{ property_prefix("moz") }} [1]<br>
+    {{CompatGeckoMobile("16")}} (without prefix) [2]</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Notes_Gecko">Notes Gecko</h3>
+
+<div class="note">
+<p>[1] désactivée par défaut dans Firefox 10.0, mais peut être activé réglant la préférence <code>dom.battery.enabled </code>à <code>true</code>. À partir de Firefox 11.0, <code>mozBattery </code>est activée par défaut pour mac le support est venus avec Gecko 18.0 {{geckoRelease("18.0")}}.</p>
+</div>
+
+<p class="note">[2] L'API batterie est actuellement supportée sur Android, Windows et Linux avec UPower installé. Support de MacOS est disponible à partir de Gecko 18.0 {{geckoRelease ("18.0")}}.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{ domxref("navigator.getBattery","navigator.getBattery") }}</li>
+ <li>La <a href="/en-US/docs/WebAPI/Battery_Status" title="/en-US/docs/WebAPI/Battery_Status">Battery Status API</a></li>
+</ul>
diff --git a/files/fr/web/api/batterymanager/level/index.html b/files/fr/web/api/batterymanager/level/index.html
new file mode 100644
index 0000000000..f7a5e9e062
--- /dev/null
+++ b/files/fr/web/api/batterymanager/level/index.html
@@ -0,0 +1,69 @@
+---
+title: BatteryManager.level
+slug: Web/API/BatteryManager/level
+translation_of: Web/API/BatteryManager/level
+---
+<div>{{obsolete_header}}</div>
+
+<div>{{APIRef("Battery API")}}</div>
+
+<p>Indique le niveau de charge de la batterie en tant que valeur comprise entre <code>0.0</code> (déchargée) et <code>1.0</code> (rechargée).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var level = battery.level</pre>
+
+<p><code>level</code> est un nombre représentant le niveau de charge de la batterie en tant que valeur comprise entre <code>0.0</code> et <code>1.0</code>. Une veleur de <code>0.0</code> signifie que <code><em>battery</em></code>, qui est un objet de type {{domxref("BatteryManager")}}, est vide, et que le système est sur le point d'être désactivé. Une valeur de <code>1.0</code> signifie que la batterie est pleine.</p>
+
+<p>La valeur <code>1.0</code> est aussi retournée si le système n'est pas capable de déterminer son niveau de charge ou si le système n'est pas alimenté par une batterie.</p>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<h3 id="Code_HTML">Code HTML</h3>
+
+<pre class="brush: html  language-html">&lt;div id="level"&gt;(niveau de batterie inconnu)&lt;/div&gt;<code class="language-html">
+</code></pre>
+
+<h3 id="Code_JavaScript">Code JavaScript</h3>
+
+<pre class="brush: js;  highlight:[3]">navigator.getBattery().then(function(battery) {
+
+    var level = battery.level;
+
+    document.querySelector('#level').textContent = level;
+});
+</pre>
+
+<p>{{ EmbedLiveSample('Example', '100%', 30, '', 'Web/API/BatteryManager/level') }}</p>
+
+<h2 id="Spécifications">Spécifications</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("Battery API")}}</td>
+   <td>{{Spec2("Battery API")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.BatteryManager.level")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("BatteryManager")}}</li>
+ <li>{{domxref("Navigator.getBattery")}}</li>
+</ul>
diff --git a/files/fr/web/api/beforeunloadevent/index.html b/files/fr/web/api/beforeunloadevent/index.html
new file mode 100644
index 0000000000..056075a91a
--- /dev/null
+++ b/files/fr/web/api/beforeunloadevent/index.html
@@ -0,0 +1,93 @@
+---
+title: BeforeUnloadEvent
+slug: Web/API/BeforeUnloadEvent
+tags:
+  - API
+  - Reference
+translation_of: Web/API/BeforeUnloadEvent
+---
+<p>{{APIRef}}</p>
+
+<p>L'évènement <strong><code>beforeunload</code></strong> est déclenché quand la fenêtre, le document et ses ressources sont sur le point d'être déchargées.</p>
+
+<p>Si une chaine non vide est assignée à la propriété <code>returnValue</code> de l'évènement, une boite de confirmation apparait pour demander à l'utilisateur de valider le changement d'adresse (voir les exemples ci-dessous). Si aucune valeur n'est fournise, l'évènement est traité silencieusement. Certaines implantations ne demandent confirmation que si le cadre ou tout cadre embarqué reçoit une action utilisateur. Voir {{anch("Browser compatibility")}} pour plus d'informations.</p>
+
+<p>{{InheritanceDiagram(600, 120)}}</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>Bouillonne</strong></td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <td><strong>Annulable</strong></td>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <td><strong>Cibles</strong></td>
+   <td>defaultView</td>
+  </tr>
+  <tr>
+   <td><strong>Interface</strong></td>
+   <td>{{domxref("Event")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:js; notranslate">window.addEventListener("beforeunload", function(event) {
+  event.returnValue = "\o/";
+});
+
+// est équivalent à
+window.addEventListener("beforeunload", function(event) {
+  event.preventDefault();
+});</pre>
+
+<p>Les navigateurs basés sur WebKit ne suivent pas la spécification concernant la demande de confirmation. Un exemple similaire fonctionnant sur presque tous les navigateurs serait plutôt comme :</p>
+
+<pre class="brush: js notranslate">window.addEventListener("beforeunload", function (e) {
+  var confirmationMessage = "\o/";
+
+  (e || window.event).returnValue = confirmationMessage;     // Gecko + IE
+  return confirmationMessage;                                /* Safari, Chrome, and other
+                                                              * WebKit-derived browsers */
+});</pre>
+
+<h2 id="Spé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("HTML WHATWG", "browsing-the-web.html#the-beforeunloadevent-interface", "BeforeUnloadEvent")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+
+
+<p>{{Compat("api.BeforeUnloadEvent")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{Event("DOMContentLoaded")}}</li>
+ <li>{{Event("readystatechange")}}</li>
+ <li>{{Event("load")}}</li>
+ <li>{{Event("beforeunload")}}</li>
+ <li>{{Event("unload")}}</li>
+ <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#prompt-to-unload-a-document" title="http://www.whatwg.org/specs/web-apps/current-work/#prompt-to-unload-a-document">Unloading Documents — Prompt to unload a document</a></li>
+</ul>
diff --git a/files/fr/web/api/biquadfilternode/frequency/index.html b/files/fr/web/api/biquadfilternode/frequency/index.html
new file mode 100644
index 0000000000..e9602bba1d
--- /dev/null
+++ b/files/fr/web/api/biquadfilternode/frequency/index.html
@@ -0,0 +1,83 @@
+---
+title: BiquadFilterNode.frequency
+slug: Web/API/BiquadFilterNode/frequency
+translation_of: Web/API/BiquadFilterNode/frequency
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<div>
+<p>La propriété <code>frequency</code> de l'interface {{ domxref("BiquadFilterNode") }} est un  {{domxref("AudioParam")}} de type <a href="/fr/docs/DOM/AudioParam#k-rate">k-rate</a> : un nombre flottant à double précision représentant une fréquence de l'algorithme de filtrage courant, exprimée en hertz (Hz).</p>
+
+<p>Sa valeur par défaut est de <code>350</code> avec une portée nominale de <code>10</code> à la <a href="http://en.wikipedia.org/wiki/Nyquist_frequency" title="http://en.wikipedia.org/wiki/Nyquist_frequency">fréquence de Nyquist</a>, qui est la moitié de la fréquence d'échantillonnage.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">var contexteAudio = new AudioContext();
+var filtreBiquad = contexteAudio.createBiquadFilter();
+filtreBiquad.frequency.value = 3000;</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Bien que le <code>AudioParam</code> renvoyé soit en lecture seule, la valeur qu'il représente ne l'est pas.</p>
+</div>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un {{domxref("AudioParam")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'exemple suivant montre l'utilisation basique d'un AudioContext pour créer un filtre Biquad. Pour un exemple complet, consultez notre démo <a href="http://mdn.github.io/voice-change-o-matic/">voice-change-o-matic</a> (et son <a href="https://github.com/mdn/voice-change-o-matic">code source</a>).</p>
+
+<pre class="brush: js">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+
+// mise en place des différents noeuds audio que nous utiliserons par la suite
+var analyseur = contexteAudio.createAnalyser();
+var distortion = contexteAudio.createWaveShaper();
+var noeudGain = contexteAudio.createGain();
+var filtreBiquad = contexteAudio.createBiquadFilter();
+var convolution = contexteAudio.createConvolver();
+
+// connecte les noeuds ensemble
+
+source = audioCtx.createMediaStreamSource(stream);
+source.connect(analyseur);
+analyseur.connect(distortion);
+distortion.connect(filtreBiquad);
+biquadFilter.connect(convolution);
+convolution.connect(noeudGain);
+noeudGain.connect(contexteAudio.destination);
+
+// manipule le filtre Biquad
+
+filtreBiquad.type = "lowshelf";
+filtreBiquad.frequency.value = 1000;
+filtreBiquad.gain.value = 25;
+</pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#widl-BiquadFilterNode-frequency', 'frequency')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div>{{Compat("api.BiquadFilterNode.frequency")}}</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/biquadfilternode/index.html b/files/fr/web/api/biquadfilternode/index.html
new file mode 100644
index 0000000000..ec843a69f1
--- /dev/null
+++ b/files/fr/web/api/biquadfilternode/index.html
@@ -0,0 +1,253 @@
+---
+title: BiquadFilterNode
+slug: Web/API/BiquadFilterNode
+tags:
+  - API
+  - Experimental
+  - Reference
+  - Web Audio API
+translation_of: Web/API/BiquadFilterNode
+---
+<p>{{APIRef("Web Audio API")}}</p>
+
+<p class="summary">L'interface <code><strong>BiquadFilterNode</strong></code> représente un simple filtre de bas niveau, créé avec la méthode <span class="seoSummary">{{ domxref("AudioContext.createBiquadFilter()") }}</span>. Il s'agit d'un {{domxref("AudioNode")}} qui peut représenter différents types de filtres, dispositifs de réglage de tonalité ou égaliseurs graphiques. Un <code>BiquadFilterNode</code> a toujours exactement une entrée et une sortie.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><dfn>Nombre d'entrées</dfn></th>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Nombre de sorties</dfn></th>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Mode de comptage des canaux</dfn></th>
+   <td><code>"max"</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Nombre de canaux</dfn></th>
+   <td><code>2</code> (pas utilisés dans le mode de comptage par défaut)</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Interprétation du canal</dfn></th>
+   <td><code>"speakers"</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("BiquadFilterNode.BiquadFilterNode", "BiquadFilterNode()")}}</dt>
+ <dd>Crée une nouvelle instance d'un objet  <code>BiquadFilterNode</code>.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Hérite des propriétés de son parent, </em><em>{{domxref("AudioNode")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("BiquadFilterNode.frequency")}}</dt>
+ <dd>Est un {{domxref ("AudioParam")}} de type <a href="/fr/docs/Web/API/AudioParam#a-rate">a-rate</a> : un nombre flottant à double précision représentant une fréquence de l'algorithme de filtrage, exprimée en Hertz.</dd>
+ <dt>{{domxref("BiquadFilterNode.detune")}}</dt>
+ <dd>Est un {{domxref ("AudioParam")}} de type <a href="/fr/docs/Web/API/AudioParam#a-rate">a-rate</a> : un nombre flottant à double précision représentant le désaccordage de la fréquence exprimé en <a class="external external-icon" href="https://fr.wikipedia.org/wiki/Cent_et_savart">cents</a>.</dd>
+ <dt>{{domxref("BiquadFilterNode.Q")}}</dt>
+ <dd>Est un {{domxref ("AudioParam")}} de type <a href="/fr/docs/Web/API/AudioParam#a-rate">a-rate</a> : un nombre flottant à double précision représentant un <a href="http://en.wikipedia.org/wiki/Q_factor" title="http://en.wikipedia.org/wiki/Q_factor">facteur</a><a href="http://en.wikipedia.org/wiki/Q_factor" title="http://en.wikipedia.org/wiki/Q_factor"> Q</a>, ou facteur de qualité.</dd>
+ <dt>{{domxref("BiquadFilterNode.gain")}} {{readonlyInline}}</dt>
+ <dd>Est un {{domxref ("AudioParam")}} de type <a href="/fr/docs/Web/API/AudioParam#a-rate">a-rate</a> : un nombre flottant à double précision représentant le <a href="http://en.wikipedia.org/wiki/Gain" title="http://en.wikipedia.org/wiki/Gain">gain</a><a href="http://en.wikipedia.org/wiki/Gain" title="http://en.wikipedia.org/wiki/Gain"> </a>utilisé dans l'algorithme de filtrage.</dd>
+ <dt>{{domxref("BiquadFilterNode.type")}}</dt>
+ <dd>Une chaîne définissant le type d'algorithme de filtrage que le noeud implémente:</dd>
+ <dd>La signification des paramètres diffère en fonction du type du filtre (sauf detune qui a la même signification dans tous les cas, et n'est donc pas listé ci-dessous)</dd>
+ <dd>
+ <table class="standard-table">
+  <caption></caption>
+  <thead>
+   <tr>
+    <th scope="row"><code>type</code></th>
+    <th scope="col">Description</th>
+    <th scope="col"><code>frequency</code></th>
+    <th scope="col"><code>Q</code></th>
+    <th scope="col"><code>gain</code></th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <th scope="row"><code>lowpass</code></th>
+    <td>Filtre standard passe-bas résonnant de second ordre avec atténuation de 12dB/octave. Les fréquences inférieures au seuil sont inchangées; les fréquences supérieures sont atténuées.</td>
+    <td>La fréquence de coupure</td>
+    <td>Indique comment la fréquence a <span id="result_box" lang="fr"><span class="hps">culminé</span> </span><span id="result_box" lang="fr"> </span>autour de la coupure. Plus la valeur est élevée, plus le point culminant est haut</td>
+    <td>Non utilisé</td>
+   </tr>
+   <tr>
+    <th scope="row"><code>highpass</code></th>
+    <td>Filtre standard passe-haut résonnant de second ordre avec atténuation de 12dB/octave. Les fréquences inférieures à la fréquence de coupure sont atténuées, les fréquences supérieures sont inchangées.</td>
+    <td>La fréquence de coupure</td>
+    <td>Indique comment la fréquence a <span id="result_box" lang="fr"><span class="hps">culminé</span> </span><span id="result_box" lang="fr"> </span>autour de la coupure. Plus la valeur est élevée, plus le point culminant est haut</td>
+    <td>Non utilisé</td>
+   </tr>
+   <tr>
+    <th scope="row"><code>bandpass</code></th>
+    <td>Filtre standard passe-bande de second ordre. Les fréquences en dehors de la plage donnée de fréquences sont atténués, et les fréquences à l'intérieur sont inchangées.</td>
+    <td>Le centre de la gamme de fréquences.</td>
+    <td>Contrôle la largeur de la bande de fréquences. Plus Q est grande, plus la bande de fréquences est grande.</td>
+    <td>Non utilisé</td>
+   </tr>
+   <tr>
+    <th scope="row"><code>lowshelf</code></th>
+    <td>Filtre standard de dégradé de basses fréquences de second ordre. Les fréquences inférieures à la fréquence obtiennent une impulsion ou une atténuation; Les fréquences supérieurs sont inchangées.</td>
+    <td>La limite supérieure des fréquences obtenant une impulsion ou une atténuation</td>
+    <td>Non utilisé</td>
+    <td>L'impulsion, en dB, à appliquer; s'il est négatif, ce sera une atténuation.</td>
+   </tr>
+   <tr>
+    <th scope="row"><code>highshelf</code></th>
+    <td>Filtre standard de dégradé de hautes fréquences de second ordre. Les fréquences supérieures à la fréquence obtiennent une impulsion, ou une atténuation; Les fréquences inférieurs restent inchangées</td>
+    <td>La limite inférieure des fréquences obtenant une impulsion ou une atténuation</td>
+    <td>Non utilisé</td>
+    <td>L'impulsion, en dB, à appliquer; s'il est négatif, ce sera une atténuation.</td>
+   </tr>
+   <tr>
+    <th scope="row"><code>peaking</code></th>
+    <td>Les fréquences à l'intérieur de la gamme obtiennent une impulsion ou une atténuation; les fréquences en dehors de celle-ci sont inchangées.</td>
+    <td>Le milieu de la gamme de fréquences obtiennent une impulsion, ou un attenuation</td>
+    <td>Contrôle la largeur de la bande de fréquences. Plus grande est Q, plus grande est la bande de fréquences.</td>
+    <td>L'impulsion, en dB, à appliquer; s'il est négatif, ce sera une atténuation.</td>
+   </tr>
+   <tr>
+    <th scope="row"><code>notch</code></th>
+    <td>Filtre coupe standard, appelé aussi coupe-bande. C'est l'inverse d'un filtre passe-bande: les fréquences en dehors de la gamme de fréquences donnée sont inchangées; les fréquences à l'intérieur de celle-ci sont atténuées.</td>
+    <td>Le centre de la gamme de fréquences.</td>
+    <td>Contrôle la largeur de la bande de fréquences. Plus grande est Q, plus grande est la bande de fréquences.</td>
+    <td>Non utilisé</td>
+   </tr>
+   <tr>
+    <th scope="row"><code>allpass</code></th>
+    <td>Filtre standard passe-tout du second ordre. Laisse toutes les fréquences inchangées, mais modifie le rapport de phase entre les différentes fréquences.</td>
+    <td>La fréquence du retard de groupe maximal, qui est la fréquence à laquelle le centre de la transition de phase se produit.</td>
+    <td>Contrôle finement la transition à la fréquence moyenne. Plus ce paramètre est grand, plus la transition est fine et large.</td>
+    <td>Non utilisé</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Hérite des propriétés de son parent, </em><em>{{domxref("AudioNode")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("BiquadFilterNode.getFrequencyResponse()")}}</dt>
+ <dd>A partir des valeurs courantes des paramètres de filtre, calcule la fréquence de réponse pour des fréquences spécifiées dans le tableau de fréquences <em>frequencyHz</em> passé en paramètre.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>{{page("/fr/docs/Web/API/AudioContext.createBiquadFilter","Example")}}</p>
+
+<h2 id="Spécification">Spécification</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('Web Audio API', '#BiquadFilterNode-section', 'BiquadFilterNode')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support basique</td>
+   <td>{{CompatChrome(50.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(25.0)}} </td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(15)}}{{property_prefix("webkit")}}<br>
+    {{CompatOpera(22)}} (unprefixed)</td>
+   <td>6.0{{property_prefix("webkit")}}</td>
+  </tr>
+  <tr>
+   <td>constructeur</td>
+   <td>{{CompatChrome(55.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(42)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>26.0</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(50.0)}}</td>
+  </tr>
+  <tr>
+   <td>constructeur</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(55.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile(42)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(55.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/blob/blob/index.html b/files/fr/web/api/blob/blob/index.html
new file mode 100644
index 0000000000..fa229550e2
--- /dev/null
+++ b/files/fr/web/api/blob/blob/index.html
@@ -0,0 +1,77 @@
+---
+title: Blob()
+slug: Web/API/Blob/Blob
+tags:
+  - API
+  - Blob
+  - Constructeur
+  - Experimental
+  - File API
+  - Reference
+translation_of: Web/API/Blob/Blob
+---
+<div>{{APIRef("File API")}}</div>
+
+<p>Le constructeur <code><strong>Blob()</strong></code> retourne un nouvel objet {{domxref("Blob")}}. Le contenu d'un blob consiste en une concaténation de valeurs données dans le tableau passé en paramètre.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var aBlob = new Blob(<em> array</em>)
+var aBlob = new Blob( <em>array</em>, <em>options</em> );
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>array</code></dt>
+ <dd>Un tableau ({{jsxref("Array")}}) d'objets de type {{jsxref("ArrayBuffer")}}, {{domxref("ArrayBufferView")}}, {{domxref("Blob")}}, {{domxref("DOMString")}}, ou un mélange de tels objets qui seront insérés dans le {{domxref("Blob")}}. Les chaînes <code>DOMString</code> seront encodées en UTF-8.</dd>
+ <dt><code>options</code> {{optional_inline}}</dt>
+ <dd>Un paramètre optionnel qui est un dictionnaire <code>BlobPropertyBag</code> et qui peut être utilisé pour définir les deux attributs suivants :
+ <ul>
+  <li><code>type</code> : cet attribut représente le type MIME du contenu du tableau qui sera inséré dans le blob. La valeur par défaut pour cette propriété est la chaîne vide <code>""</code>.</li>
+  <li><code>endings</code> : cet attribut spécifie la façon dont les chaînes qui contiennent des sauts de lignes (<code>\n</code>) doivent être retranscrites. Il peut prendre l'une de ces valeurs :
+   <ul>
+    <li><code>"native"</code> indiquera que les caractères de fin doivent être adaptés pour correspondre à ceux utilisés par le système d'exploitation</li>
+    <li><code>"transparent"</code> indiquera que les fin de lignes sont stockées telles quelles dans le blob (aucune modification).</li>
+   </ul>
+   La valeur par défaut pour cet attribut est <code>"transparent"</code>. {{non-standard_inline}}</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js  language-js">// Un tableau qui contient une seule DOMString
+var aFileParts = ['&lt;a id="a"&gt;&lt;b id="b"&gt;Coucou :) !&lt;/b&gt;&lt;/a&gt;'];
+
+// Le blob
+var oMyBlob = new Blob(aFileParts, {type : 'text/html'});</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('File API', '#constructorBlob', 'Blob()')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Blob.Blob")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Le déprécié {{domxref("BlobBuilder")}} qui a été remplacé par ce constructeur.</li>
+</ul>
diff --git a/files/fr/web/api/blob/index.html b/files/fr/web/api/blob/index.html
new file mode 100644
index 0000000000..62a3ba68f5
--- /dev/null
+++ b/files/fr/web/api/blob/index.html
@@ -0,0 +1,240 @@
+---
+title: Blob
+slug: Web/API/Blob
+tags:
+  - API
+  - Référence(2)
+  - WebAPI
+translation_of: Web/API/Blob
+---
+<div>{{APIRef("File API")}}</div>
+
+<p>Un objet <strong><code>Blob</code></strong> représente un objet, semblable à un fichier, qui est immuable et qui contient des données brutes. Les <em>blobs</em> (pour <em><strong>B</strong>inary <strong>L</strong>arge <strong>Ob</strong>jects</em>) représentent des données qui ne sont pas dans un format JavaScript natif. L'interface {{domxref("File")}} est basée sur l'interface <code>Blob</code> et hérite des fonctionnalités de cette dernière tout en ajoutant des fonctionnalités pour gérer les fichiers sur le système de l'utilisateur.</p>
+
+<p>Pour construire un <code>Blob</code> à partir d'objets qui ne sont pas des blobs ou à partir d'autres données, on pourra utiliser le constructeur {{domxref("Blob.Blob", "Blob()")}}. Pour créer un blob qui contient un sous-ensemble d'un autre blob, on pourra employer la méthode {{domxref("Blob.slice()", "slice()")}}. Pour obtenir un <code>Blob</code> à partir d'un fichier du système de l'utilisateur, consulter la documentation {{domxref("File")}}.</p>
+
+<p>Les API qui acceptent des objets <code>Blob</code> sont également listées sur la documentation de {{domxref("File")}}.</p>
+
+<div class="note">
+<p><strong>Note :</strong> La méthode <code>slice()</code> utilisait auparavant un deuxième argument qui indiquait le nombre d'octets à copier dans le nouveau blob. Si on utilisait un couple de valeur <code>début + longueur</code> qui dépassait la taille du blob source, le blob qui était renvoyé contenait les données à partir de l'indice de début et jusuq'à la fin du blob.</p>
+</div>
+
+<div class="note"><strong>Note :</strong> La méthode <code>slice()</code> doit être utilisée avec certains préfixes sur certaines versions de navigateurs : <code>blob.mozSlice()</code> pour Firefox 12 et antérieur, <code>blob.webkitSlice()</code> dans Safari. Un ancienne version de <code>slice()</code> sans préfixes avait une sémantique différente et est désormais obsolète. La prise en charge de <code>blob.mozSlice()</code> a été abandonnée avec Firefox 30.</div>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("Blob.Blob", "Blob(blobParts[, options])")}}</dt>
+ <dd>Ce constructeur renvoie un nouvel objet <code>Blob</code> qui contient la concaténation des valeurs du tableau passé en paramètre.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("Blob.isClosed")}} {{readonlyinline}} {{experimental_inline}}</dt>
+ <dd>Un booléen qui indique si la méthode {{domxref("Blob.close()")}} a été appelée sur le blob. Les blobs qui ont été fermés ne peuvent pas être lus.</dd>
+ <dt>{{domxref("Blob.size")}} {{readonlyinline}}</dt>
+ <dd>La taille des données contenues dans l'objet <code>Blob</code>, exprimée en octets.</dd>
+ <dt>{{domxref("Blob.type")}} {{readonlyinline}}</dt>
+ <dd>Une chaîne de caractères qui indique le type MIME des données contenues dans le <code>Blob</code>. Si le type est inconnu, la chaîne de caractères est vide.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("Blob.close()")}} {{experimental_inline}}</dt>
+ <dd>Cette méthode clotûre le blob et libère éventuellement les ressources sous-jacentes.</dd>
+ <dt>{{domxref("Blob.slice()", "Blob.slice([début[, fin[, contentType]]])")}}</dt>
+ <dd>Cette méthode renvoie un nouvel objet <code>Blob</code> qui contient les données dans le fragment du <code>Blob</code> source entre <code>début</code> et <code>fin</code>.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_du_constructeur_Blob">Utilisation du constructeur <code>Blob</code></h3>
+
+<p>Le constructeur {{domxref("Blob.Blob", "Blob()")}} permet de créer des blobs à partir d'autres objets. Par exemple, on peut construire un blob à partir d'une chaîne de caractères :</p>
+
+<pre>var debug = {coucou: "monde"};
+var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'});</pre>
+
+<h3 id="Créer_une_URL_de_données_vers_un_tableau_typé">Créer une URL de données vers un tableau typé</h3>
+
+<pre class="brush: js">var typedArray = GetTheTypedArraySomehow();
+
+// On ajoute un type MIME pertinent
+var blob = new Blob([typedArray], {type: 'application/octet-binary'});
+var url = URL.createObjectURL(blob);
+
+// url ressemblera à :
+//   blob:d3958f5c-0777-0845-9dcf-2cb28783acaf
+
+// désormais on peut utiliser l'URL dans tout
+// contexte qui utilise des URL (img.src par
+// exemple)
+</pre>
+
+<h3 id="Extraire_des_données_à_partir_d'un_blob">Extraire des données à partir d'un blob</h3>
+
+<p>La seule façon de lire le contenu d'un blob est d'utiliser un objet {{domxref("FileReader")}}. Dans le code qui suit, on lit le contenu d'un blob sous la forme d'un tableau typé.</p>
+
+<pre class="brush: js">var reader = new FileReader();
+reader.addEventListener("loadend", function() {
+   // reader.result contient le contenu du
+   // blob sous la forme d'un tableau typé
+});
+reader.readAsArrayBuffer(blob);</pre>
+
+<p>En utilisant d'autres méthodes de {{domxref("FileReader")}}, on peut lire le contenu du blob si c'est une chaîne ou une URL de données.</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('File API','#blob','Blob')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support simple</td>
+   <td>5<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>4<sup>[2]</sup></td>
+   <td>10</td>
+   <td>11.10<sup>[1]</sup></td>
+   <td>5.1<sup>[1]</sup></td>
+  </tr>
+  <tr>
+   <td><code>slice()</code></td>
+   <td>10 {{property_prefix("webkit")}}<br>
+    21</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>5 {{property_prefix("moz")}}<sup>[3]</sup><br>
+    13</td>
+   <td>10</td>
+   <td>12</td>
+   <td>5.1 {{property_prefix("webkit")}}</td>
+  </tr>
+  <tr>
+   <td>Constructeur <code>Blob()</code></td>
+   <td>20</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("13.0")}}</td>
+   <td>10</td>
+   <td>12.10</td>
+   <td>6</td>
+  </tr>
+  <tr>
+   <td><code>close()</code> et <code>isClosed</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}<sup>[4]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("13.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>slice()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Constructeur <code>Blob()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>close()</code> et <code>isClosed</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}<sup>[4]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] La version de <code>slice()</code> qui prend en compte la longueur comme deuxième argument a été implémentée dans <a href="https://trac.webkit.org/changeset/55670">WebKit</a> et <a href="https://www.opera.com/docs/specs/presto28/file/#blob">Opera 11.10</a>. Cependant, cette syntaxe était différente de celle de {{jsxref("Array/slice", "Array.slice()")}} et de {{jsxref("String/slice", "String.slice()")}}, WebKit ra arrêté de supporter cette syntaxe et a ajouté la prise en charge de la nouvelle syntaxe dans <a href="http://trac.webkit.org/changeset/83873"><code>Blob.webkitSlice()</code></a>.</p>
+
+<p>[2] Une version de <code>slice()</code> qui prenait une longueur en deuxième argument était implémentée dans <a href="https://hg.mozilla.org/mozilla-central/rev/1b3947ed93c6">Firefox 4</a>. Cependant, cette syntaxe était différente de celle de {{jsxref("Array/slice", "Array.slice()")}} et de {{jsxref("String/slice", "String.slice()")}}, Gecko a arrêté de supporter cette syntaxe et a ajouté la prise en charge de la nouvelle syntaxe dans <code>mozSlice()</code>.</p>
+
+<p>[3] Avant Gecko 12.0 {{geckoRelease("12.0")}}, un bug impactait <code>slice()</code>; les paramètres <code>start</code> et <code>end</code> étaient mal gérés lorsqu'ils étaient en dehors de l'intervalle des valeurs qui peuvent être représentés sur 64 bits, signés. Cela a désormais été corrigé (prise en charge des valeurs non-signées sur 64 bits).</p>
+
+<p>[4] Cf. {{bug("1048325")}}</p>
+
+<h3 id="Notes_de_compatibilité_pour_Gecko_accéder_à_cette_fonctionnalité_dans_du_code_privilégié">Notes de compatibilité pour Gecko : accéder à cette fonctionnalité dans du code privilégié</h3>
+
+<p>Pour utiliser cette fonctionnalité dans du chrome, JSM ou Bootstrap, il faudra l'importer de cette façon :</p>
+
+<pre class="brush: js">Cu.importGlobalProperties(['Blob']);
+</pre>
+
+<p><code>Blob</code> est disponible dans les portées des <em>workers</em>.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("BlobBuilder")}}</li>
+ <li>{{domxref("File")}}</li>
+ <li>{{domxref("URL.createObjectURL")}}</li>
+ <li><a href="/fr/docs/Mozilla/Tech/XPCOM/Language_Bindings/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
+</ul>
diff --git a/files/fr/web/api/blob/type/index.html b/files/fr/web/api/blob/type/index.html
new file mode 100644
index 0000000000..8823dd1bb9
--- /dev/null
+++ b/files/fr/web/api/blob/type/index.html
@@ -0,0 +1,75 @@
+---
+title: Blob.type
+slug: Web/API/Blob/type
+tags:
+  - API
+  - DOM
+  - Fichiers
+  - Propriété
+translation_of: Web/API/Blob/type
+---
+<div>{{APIRef("File API")}}</div>
+
+<p>La propriété <strong><code>type</code></strong> de l'objet <a href="fr/docs/Web/API/Blob"><code>Blob</code></a> fourni le type MIME (Internet media type) d'un fichier. Celle-ci retourne une chaîne de caractère vide si le type n'a pas pu être déterminé.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var mimetype = <var>instanceOfFile</var>.type</pre>
+
+<h2 id="Valeur">Valeur</h2>
+
+<p>Une chaîne de caractères (par exemple : "image/png").</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush:js">var i, fileInput, files, allowedFileTypes;
+
+// fileInput est un HTMLInputElement: &lt;input type="file" multiple id="myfileinput"&gt;
+fileInput = document.getElementById("myfileinput");
+
+// files est un objet FileList (similaire à NodeList)
+files = fileInput.files;
+
+// notre application accepte seulement les images de type *.png, *.jpeg et *.gif
+allowedFileTypes = ["image/png", "image/jpeg", "image/gif"];
+
+for (i = 0; i &lt; files.length; i++) {
+  // Vérifie si file.type est un type autorisé.
+  if (allowedFileTypes.indexOf(<strong>files[i].type</strong>) &gt; -1) {
+    // le type du fichier (file) correspond à l'un des types autorisés. Faites quelque chose ici.
+  }
+});
+</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('File API', '#dfn-type', 'type')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div>
+
+
+<p>{{Compat("api.Blob.type")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+</div>
+
+<ul>
+ <li>{{domxref("Blob")}}</li>
+</ul>
diff --git a/files/fr/web/api/blobbuilder/index.html b/files/fr/web/api/blobbuilder/index.html
new file mode 100644
index 0000000000..69aab6d794
--- /dev/null
+++ b/files/fr/web/api/blobbuilder/index.html
@@ -0,0 +1,124 @@
+---
+title: BlobBuilder
+slug: Web/API/BlobBuilder
+tags:
+  - API
+  - DOM
+  - DOM Reference
+  - Obsolete
+translation_of: Web/API/BlobBuilder
+---
+<p>{{APIRef("File API")}}{{ obsolete_header}}</p>
+
+<p>L'interface <code>BlobBuilder</code> fournit une manière simple de construire des objets {{domxref("Blob")}}. Il suffit de créer un <code>BlobBuilder</code> et de lui ajouter des données  en appellant la méthode {{manch("append")}}. Une fois finalisé, l'appel à la méthode {{manch("getBlob")}} permet de récupérer un {{domxref("Blob")}} contenant les données envoyées au constructeur dudit Blob.</p>
+
+<div class="note"><strong>Note:</strong> L'interface <code>BlobBuilder</code> est désormais déconseillé (deprecated) au profit du nouveau constructeur {{domxref('Blob')}}.</div>
+
+<h2 id="Aperçu_des_méthodes">Aperçu des méthodes</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>void <a href="/en-US/docs/Web/API/BlobBuilder#append()">append</a>(in ArrayBuffer data);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="/en-US/docs/Web/API/BlobBuilder#append()">append</a>(in Blob data);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="/en-US/docs/Web/API/BlobBuilder#append()">append</a>(in String data, [optional] in String endings);</code></td>
+  </tr>
+  <tr>
+   <td><code>Blob <a href="/en-US/docs/Web/API/BlobBuilder#getBlob()">getBlob</a>([optional] in DOMString contentType);</code></td>
+  </tr>
+  <tr>
+   <td><code>File <a href="/en-US/docs/Web/API/BlobBuilder#getFile()">getFile</a>(in DOMString name, [optional] in DOMString contentType);</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<h3 id="append()">append()</h3>
+
+<p>Ajoute le contenu de l'objet JavaScript spécifié au {{domxref("Blob")}} en construction. Si la valeur spécifiée n'est pas un {{domxref("Blob")}}, un <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer"><code>ArrayBuffer</code></a>, ou une <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String"><code>String</code></a>, la valeur est forcée (coerced) à string avant d'être ajoutée au blob.</p>
+
+<pre class="syntaxbox">void append(
+  in ArrayBuffer data
+);
+
+void append(
+  in Blob data
+);
+
+
+void append(
+  in String data,
+  [optional] in String endings
+);
+</pre>
+
+<h6 id="Paramètres">Paramètres</h6>
+
+<dl>
+ <dt><code>data</code></dt>
+ <dd>Les données à ajouter au {{domxref("Blob")}} en construction.</dd>
+ <dt><code>endings</code></dt>
+ <dd>Spécifie comment les chaînes (strings) contenant des <code>\n</code> doivent être rendues. Cela peut être <code>"transparent"</code> (endings inchangés) ou <code>"native"</code> (les endings sont changés pour respecter la convention du système de fichier de l'OS de l'hôte). Par défault, la valeur est <code>"transparent"</code>.</dd>
+</dl>
+
+<h3 id="getBlob()">getBlob()</h3>
+
+<p>Retourne l'objet {{domxref("Blob")}} qui a été construit en utilisant les données passées en argument des différents appels à {{manch("append")}}.</p>
+
+<pre class="syntaxbox">Blob getBlob(
+  in DOMString contentType {{optional_inline}}
+);
+</pre>
+
+<h6 id="Paramètres_2">Paramètres</h6>
+
+<dl>
+ <dt>contentType {{optional_inline}}</dt>
+ <dd>Le type MIME des données  retournées par le {{domxref("Blob")}}. Ce sera la valeur de la propriété 'type' de l'objet <code>Blob</code>.</dd>
+</dl>
+
+<h6 id="Valeur_de_retour">Valeur de retour</h6>
+
+<p>Un objet {{domxref("Blob")}} contenant toutes les données passées en argument de chaque appel à  {{manch("append")}} depuis la création du <code>BlobBuilder</code>. Cela remet aussi à zéro (reset) le <code>BlobBuilder</code> de tel sorte que le prochain appel à {{manch("append")}} démarrera la création d'un nouveau blob vierge.</p>
+
+<h3 id="getFile()_non-standard_inline">getFile() {{non-standard_inline}}</h3>
+
+<p>Retourne un objet {{domxref("File")}}.</p>
+
+<pre class="syntaxbox">File getFile(
+  in DOMString name,
+  [optional] in DOMString contentType
+);
+</pre>
+
+<h6 id="Paramètres_3">Paramètres</h6>
+
+<dl>
+ <dt>name</dt>
+ <dd>Le nom du fichier.</dd>
+ <dt>contentType {{optional_inline}}</dt>
+ <dd>Le type MIME des données  retournées par le {{domxref("File")}}. Ce sera la valeur de la propriété 'type' de l'objet <code>File</code>.</dd>
+</dl>
+
+<h6 id="Valeur_deretour">Valeur deretour</h6>
+
+<p>Un objet {{domxref("File")}}.</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.BlobBuilder")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{spec("http://dev.w3.org/2009/dap/file-system/file-writer.html#idl-def-BlobBuilder", "File API Specification: BlobBuilder", "ED")}}</li>
+ <li>{{domxref("Blob")}}</li>
+ <li>{{domxref("File")}}</li>
+</ul>
diff --git a/files/fr/web/api/blobevent/blobevent/index.html b/files/fr/web/api/blobevent/blobevent/index.html
new file mode 100644
index 0000000000..742af43a44
--- /dev/null
+++ b/files/fr/web/api/blobevent/blobevent/index.html
@@ -0,0 +1,61 @@
+---
+title: BlobEvent.BlobEvent()
+slug: Web/API/BlobEvent/BlobEvent
+tags:
+  - API
+  - Blob
+  - Constructeur
+  - DOM
+  - Evènement
+translation_of: Web/API/BlobEvent/BlobEvent
+---
+<p>{{APIRef("Media Capture and Streams")}}{{seeCompatTable}}</p>
+
+<p>Le constructeur <code><strong>BlobEvent()</strong></code> renvoie un nouvel objet {{domxref("BlobEvent")}} créé avec un {{domxref("Blob")}} associé.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>blobEvent</em> = new BlobEvent({data: <em>aSpecificBlob</em>}[, timecode]);
+</pre>
+
+<h3 id="Arguments">Arguments</h3>
+
+<p><em>Le constructeur <code>BlobEvent()</code></em><em> hérite des arguments de {{domxref("Event.Event", "Event()")}}.</em></p>
+
+<dl>
+ <dt><code>data</code></dt>
+ <dd>est un {{domxref("Blob")}} associé à l'évènement.</dd>
+ <dt><code>timecode</code> {{optional_inline}}</dt>
+ <dd>un {{domxref("DOMHighResTimeStamp")}} à utiliser pour initialiser l'événement blob.</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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('MediaStream Recording', '#blob-event', 'BlobEvent')}}</td>
+   <td>{{Spec2('MediaStream Recording')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.BlobEvent.BlobEvent")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("BlobEvent")}} à laquelle il appartient.</li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/web/api/blobevent/data/index.html b/files/fr/web/api/blobevent/data/index.html
new file mode 100644
index 0000000000..ea9939f3bd
--- /dev/null
+++ b/files/fr/web/api/blobevent/data/index.html
@@ -0,0 +1,50 @@
+---
+title: BlobEvent.data
+slug: Web/API/BlobEvent/data
+tags:
+  - API
+  - Blob
+  - DOM
+  - Evènement
+  - Propriétés
+  - données
+translation_of: Web/API/BlobEvent/data
+---
+<p>{{ apiref("Media Capture and Streams") }}</p>
+
+<p>{{ SeeCompatTable() }}</p>
+
+<p>La propriété en lecture seule <code><strong>BlobEvent.data</strong></code> représente un {{domxref("Blob")}} associé à l'évènement.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>associatedBlob</em> = <em>BlobEvent</em>.data</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('MediaStream Recording', '#widl-BlobEvent-data', 'BlobEvent.data')}}</td>
+   <td>{{Spec2('MediaStream Recording')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.BlobEvent.data")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("BlobEvent")}} à laquelle elle appartient.</li>
+</ul>
diff --git a/files/fr/web/api/blobevent/index.html b/files/fr/web/api/blobevent/index.html
new file mode 100644
index 0000000000..97d8bf745e
--- /dev/null
+++ b/files/fr/web/api/blobevent/index.html
@@ -0,0 +1,72 @@
+---
+title: BlobEvent
+slug: Web/API/BlobEvent
+tags:
+  - API
+  - Audio
+  - Blob
+  - Interface
+  - Media
+  - MediaStream Recording
+  - MediaStream Recording API
+  - Reference
+  - Video
+  - events
+translation_of: Web/API/BlobEvent
+---
+<div>{{APIRef ("Media Capture and Streams")}}</div>
+
+<p>L'interface <code>BlobEvent</code> représente les événements associés à un {{domxref ("Blob")}}. Ces blobs sont généralement, mais pas nécessairement, associés au contenu multimédia.</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("BlobEvent.BlobEvent", "BlobEvent()")}}</dt>
+ <dd>Crée un événement <code>BlobEvent</code> avec les paramètres donnés.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Hérite des propriétés de son parent, {{domxref("Event")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("BlobEvent.data")}} {{readonlyInline}}</dt>
+ <dd>Un objet {{domxref("Blob")}} qui représente les données associées à l'évènement. L'évènement a été déclenché sur le {{domxref("EventTarget")}} en raison de quelque chose survenu spécifiquement sur ce {{domxref("Blob")}}.</dd>
+ <dt>{{domxref("BlobEvent.timecode")}} {{readonlyinline}}</dt>
+ <dd>{{domxref("DOMHighResTimeStamp")}} indique la différence entre l'horodatage du premier bloc de données et l'horadatage du premier bloc <code>BlobEvent</code> produit par cet enregistreur. On notera que le <em>timecode</em> du premier <code>BlobEvent</code> produit , n'a pas besoin d'être nul.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Pas de méthode spécifique ; hérite des méthodes de son parent<em> {{domxref("Event")}}.</em></em></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('MediaStream Recording', '#blob-event', 'BlobEvent')}}</td>
+   <td>{{Spec2('MediaStream Recording')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.BlobEvent")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface de base {{domxref("Event")}} .</li>
+ <li><a href="/fr/docs/Web/API/MediaStream_Recording_API">L'API MediaStream Recording </a>: envoie des objets <code>BlobEvent</code> chaque fois qu'un fragment de media est prêt.</li>
+ <li><a href="/fr/docs/Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API">Utiliser l'API MediaStream Recording</a></li>
+</ul>
diff --git a/files/fr/web/api/body/index.html b/files/fr/web/api/body/index.html
new file mode 100644
index 0000000000..9753edeba3
--- /dev/null
+++ b/files/fr/web/api/body/index.html
@@ -0,0 +1,96 @@
+---
+title: Body
+slug: Web/API/Body
+tags:
+  - API
+  - BODY
+  - Experimental
+  - Fetch
+  - Fetch API
+  - Interface
+  - Reference
+  - TopicStub
+  - request
+translation_of: Web/API/Body
+---
+<div>{{ APIRef("Fetch") }}</div>
+
+<p><span class="seoSummary">Le {{glossary("mixin")}} <strong><code>Body</code></strong> de l'<a href="/fr/docs/Web/API/Fetch_API">API Fetch</a> représente le corps de d'une requête ou d'une réponse, vous permettant de déclarer le type de son contenu et comment le manipuler.</span></p>
+
+<p><code>Body</code> est implémenté par {{domxref("Request")}} et {{domxref("Response")}}. Ces derniers fournissent un objet avec un un corps associé (un <a href="/fr/docs/Web/API/Streams_API">stream</a>), un drapeaux pour indiquer si le corps a déjà été utilisé (initialisé à faux), et un type MIME (au début, une séquence vide d'octet).</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("Body.body")}} {{readonlyInline}}</dt>
+ <dd>Un simple <em>getter</em> utilisé pour obtenir un {{domxref("ReadableStream")}} du contenu.</dd>
+ <dt>{{domxref("Body.bodyUsed")}} {{readonlyInline}}</dt>
+ <dd>Un {{jsxref("Boolean")}} qui indique si le corps a déjà été lu.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("Body.arrayBuffer()")}}</dt>
+ <dd>Prend un flux {{domxref("Response")}}, le lit en entier, et le retourne sous forme d'un {{jsxref("ArrayBuffer")}} au travers d'une promesse.</dd>
+ <dt>{{domxref("Body.blob()")}}</dt>
+ <dd>Prends un flux {{domxref("Response")}}, le lit en entier, et le retourne dans un {{domxref("Blob")}} au travers d'une promesse.</dd>
+ <dt>{{domxref("Body.formData()")}}</dt>
+ <dd>Prends un flux {{domxref("Response")}}, le lit en entier, et le retourne dans un objet {{domxref("FormData")}} au travers d'une promesse.</dd>
+ <dt>{{domxref("Body.json()")}}</dt>
+ <dd>Prends un flux {{domxref("Response")}}, le lit en entier et retourne une promesse résolue avec le résultat textuel interprété comme du {{jsxref("JSON")}}.</dd>
+ <dt>{{domxref("Body.text()")}}</dt>
+ <dd>Prend un flux {{domxref("Response")}}, le lit en entier, et le retourne dans une {{domxref("USVString")}} (texte) au travers d'une promesse. La réponse est <em>toujours</em> décodée en utilisant l'UTF-8.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>L'exemple suivant utilise un simple appel <code>fetch</code> pour récupérer une image et l'afficher dans un élément {{htmlelement("img")}}. Notez qu'une fois l'image téléchargée, nous devons appeler {{domxref("Body.blob","Body.blob()")}} ({{domxref("Response")}} implémente body) pour connaître le MIME type correcte.</p>
+
+<h3 id="Code_HTML">Code HTML</h3>
+
+<pre class="brush: html notranslate">&lt;img class="my-image" src="https://wikipedia.org/static/images/project-logos/frwiki-1.5x.png"&gt;
+</pre>
+
+<h3 id="Code_JavaScript">Code JavaScript</h3>
+
+<pre class="brush: js notranslate">const myImage = document.querySelector('.my-image');
+fetch('https://upload.wikimedia.org/wikipedia/commons/7/77/Delete_key1.jpg')
+	.then(res =&gt; res.blob())
+	.then(res =&gt; {
+		const objectURL = URL.createObjectURL(res);
+		myImage.src = objectURL;
+});</pre>
+
+<p>{{ EmbedLiveSample('Examples', '100%', '250px') }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécifications</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#body-mixin','Body')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Body")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/fr/docs/Web/HTTP/CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/fr/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/fr/web/api/body/json/index.html b/files/fr/web/api/body/json/index.html
new file mode 100644
index 0000000000..121768d6ea
--- /dev/null
+++ b/files/fr/web/api/body/json/index.html
@@ -0,0 +1,86 @@
+---
+title: Body.json()
+slug: Web/API/Body/json
+tags:
+  - API
+  - BODY
+  - Experimental
+  - Fetch
+  - JSON
+  - Méthode
+  - Reference
+translation_of: Web/API/Body/json
+---
+<div>{{APIRef("Fetch")}}</div>
+
+<p>La méthode <strong><code>json()</code></strong> de {{domxref("Body")}} lit un Stream {{domxref("Response")}} jusqu'au bout. Elle retourne une promesse qui s'auto-résout en renvoyant le corps de la requête parsée au format {{jsxref("JSON")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">response.json().then(function(data) {
+  // faire quelque chose avec les données
+});</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Aucun.</p>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une promesse résolue contenant le corps de la requête (au format JSON) converti sous la forme d'un objet JavaScript. Cet objet peut correspondre à n'importe quel contenu représentable dans le format JSON -- un objet, un tableau, une chaîne de caractère, un nombre…</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans l'exemple <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-json">fetch json</a> (lancer <a href="http://mdn.github.io/fetch-examples/fetch-json/">cet exemple</a>), nous créons une nouvelle requête en utilisant le constructeur {{domxref("Request.Request", "Request()")}}, puis utilisons celle-ci pour récupérer un fichier <code>.json</code>. Lorsque l'appel à <strong>fetch </strong>réussit, on lit les données et on les parse en utilisant <code>json()</code> pour les convertir en un objet JS, puis enfin on utilise les valeurs de l'objet obtenu pour les insérer dans une liste de noeuds, de manière à afficher nos produits. </p>
+
+<pre>const myList = document.querySelector('ul');
+const myRequest = new Request('products.json');
+
+fetch(myRequest)
+  .then(response =&gt; response.json())
+  .then(data =&gt; {
+    for (const product of data.products) {
+      let listItem = document.createElement('li');
+      listItem.appendChild(
+        document.createElement('strong')
+      ).textContent = product.Name;
+      listItem.append(
+        ` can be found in ${
+          product.Location
+        }. Cost: `
+      );
+      listItem.appendChild(
+        document.createElement('strong')
+      ).textContent = `£${product.Price}`;
+      myList.appendChild(listItem);
+    }
+  });</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('Fetch','#dom-body-json','Body.json()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Body.json")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</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/fr/web/api/bytestring/index.html b/files/fr/web/api/bytestring/index.html
new file mode 100644
index 0000000000..48cb5b812d
--- /dev/null
+++ b/files/fr/web/api/bytestring/index.html
@@ -0,0 +1,38 @@
+---
+title: ByteString
+slug: Web/API/ByteString
+tags:
+  - API
+  - DOM
+  - Reference
+  - WebIDL
+translation_of: Web/API/ByteString
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><strong><code>ByteString</code></strong> est une chaîne de caractères en UTF-8 qui contient l'ensemble des séquences d'octets possibles. <code>ByteString</code> correspond à une chaîne de caractères (type {{jsxref("String")}}) lorsqu'il est manipulé en JavaScript. En général, cet objet est uniquement utilisé dans l'interfaçage de protocoles qui utilisent les octets et les chaînes de façon interchangeable (HTTP par exemple).</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('WebIDL', '#idl-ByteString', 'ByteString')}}</td>
+   <td>{{Spec2('WebIDL')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("String")}}</li>
+ <li><a href="/fr/docs/Web/JavaScript/Typed_arrays/String_view"><code>StringView</code> – une représentation des chaînes de caractères, semblable à celle utilisée par le langage C, basée sur les tableaux typés</a></li>
+ <li><a href="/fr/docs/Web/API/DOMString/Binary">Les chaînes binaires</a></li>
+</ul>
diff --git a/files/fr/web/api/cache/add/index.html b/files/fr/web/api/cache/add/index.html
new file mode 100644
index 0000000000..25846672e0
--- /dev/null
+++ b/files/fr/web/api/cache/add/index.html
@@ -0,0 +1,116 @@
+---
+title: Cache.add()
+slug: Web/API/Cache/add
+tags:
+  - API
+  - Add
+  - Cache
+  - Experimental
+  - Méthode
+  - Reference
+  - Service Worker
+  - Service worker API
+  - ServiceWorker
+translation_of: Web/API/Cache/add
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<p>La méthode <strong><code>add()</code></strong> de l'interface {{domxref("Cache")}} accepte une URL, la récupère, et ajoute l'objet réponse qui en résulte dans le cache. La méthode <code>add()</code> est équivalent au code suivant :</p>
+
+<pre class="brush: js">fetch(url).then(function(response) {
+  if (!response.ok) {
+    throw new TypeError('bad response status');
+  }
+  return cache.put(url, response);
+})</pre>
+
+<p>Pour des opérations plus complexes, il faut utiliser {{domxref("Cache.put","Cache.put()")}} directement.</p>
+
+<div class="note">
+<p><strong>Note</strong>: <code>add()</code> écrasera toute paire clé/valeur précedemment stockée en cache et qui correspond à la requête.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="sytaxbox"><em>cache</em>.add(<em>request</em>).then(function() {
+  //request a été ajoutée au cache
+});
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>request</dt>
+ <dd>La requête à mettre en cache. Ce paramètre peut être un objet {{domxref("Request", "Requête")}} ou une URL.</dd>
+</dl>
+
+<h3 id="Retour">Retour</h3>
+
+<p>Une {{jsxref("Promise", "Promesse")}} qui est résolue en void.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><strong>Exception</strong></th>
+   <th scope="col"><strong>Arrive quand</strong></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>TypeError</code></td>
+   <td>
+    <p>Le schéma d'URL n'est pas <code>http</code> ou <code>https</code>.</p>
+
+    <p>Le statut de la réponse n'est pas dans les 200 (i.e., une requête qui a échoué.) Cela peut arriver si la requête échoue, mais également si la requête est une <em>cross-origin no-cors</em> (auquel cas le statut retourné est systématiquement 0.)</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Ce bloc de code attends le déclenchement d'un {{domxref("InstallEvent")}}, puis lance {{domxref("ExtendableEvent.waitUntil","waitUntil")}} qui gère la phase d'installation de l'application. Cela consite à appeler {{domxref("CacheStorage.open")}} afin de créer un nouveau cache, puis à utiliser {{domxref("Cache.add")}} pour y ajouter des ressources.</p>
+
+<pre class="brush: js">this.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v1').then(function(cache) {
+      return cache.add('/sw-test/index.html');
+    })
+  );
+});
+</pre>
+
+<h2 id="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('Service Workers', '#dom-cache-add', 'Cache: add')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité sur cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Cache.add")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les Service Workers</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WorkerGlobalScope.caches")}}</li>
+</ul>
diff --git a/files/fr/web/api/cache/addall/index.html b/files/fr/web/api/cache/addall/index.html
new file mode 100644
index 0000000000..9f43ef9387
--- /dev/null
+++ b/files/fr/web/api/cache/addall/index.html
@@ -0,0 +1,118 @@
+---
+title: Cache.addAll()
+slug: Web/API/Cache/addAll
+tags:
+  - API
+  - Cache
+  - Experimental
+  - Méthode
+  - Reference
+  - Service Worker
+  - Service worker API
+  - ServiceWorker
+  - addAll
+translation_of: Web/API/Cache/addAll
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<p>La méthode <strong><code>addAll()</code></strong> de l'interface {{domxref("Cache")}} accepte un tableau d'URLS, les récupères, et ajoute les objets réponse qui en résultent au cache en question. Les objets requêtes crées pendant la phase de récupération deviennent des clés vers les opérations de réponse stockées. </p>
+
+<div class="note">
+<p><strong>Note</strong>: <code>addAll()</code> écrasera toute paire clé/valeur précedemment stockée en cache et qui correspond à une requête, mais échouera si l'opération <code>put() </code>ainsi créée devrait engendrer l'éffacement d'une entrée cache créée par la même méthode <code>addAll()</code>.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">cache.addAll(requests[]).then(function() {
+  //requests have been added to the cache
+});
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>requests</dt>
+ <dd>Un tableau d'objets {{domxref("Request", "Requête")}} à ajouter au cache.</dd>
+</dl>
+
+<h3 id="Retour">Retour</h3>
+
+<p>Une {{jsxref("Promise", "Promesse")}} qui est résolue en void.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><strong>Exception</strong></th>
+   <th scope="col"><strong>Arrive quand</strong></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>TypeError</code></td>
+   <td>
+    <p>Le schéma d'URL n'est pas <code>http</code> ou <code>https</code>.</p>
+
+    <p>Le statut de la réponse n'est pas dans les 200 (i.e., une requête qui a échoué.) Cela peut arriver si la requête échoue, mais également si la requête est une <em>cross-origin no-cors</em> (auquel cas le statut retourné est systématiquement 0.)</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples"><strong>Exemples</strong></h2>
+
+<p>Ce bloc de code attends le déclenchement d'un {{domxref("InstallEvent")}}, puis lance {{domxref("ExtendableEvent.waitUntil","waitUntil")}} qui gère la phase d'installation de l'application. Cela consite à appeler {{domxref("CacheStorage.open")}} afin de créer un nouveau cache, puis à utiliser <code>addAll()</code> pour y ajouter une série de ressources.</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">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#dom-cache-addall', 'Cache: addAll')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité sur cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Cache.addAll")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les Service Workers</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WorkerGlobalScope.caches")}}</li>
+</ul>
diff --git a/files/fr/web/api/cache/delete/index.html b/files/fr/web/api/cache/delete/index.html
new file mode 100644
index 0000000000..332a9f984a
--- /dev/null
+++ b/files/fr/web/api/cache/delete/index.html
@@ -0,0 +1,87 @@
+---
+title: Cache.delete()
+slug: Web/API/Cache/delete
+tags:
+  - API
+  - Cache
+  - Experimental
+  - Méthode
+  - Reference
+  - Service Workers
+  - ServiceWorker
+  - delete
+translation_of: Web/API/Cache/delete
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<p>La méthode <strong><code>delete()</code></strong> de l'interface {{domxref("Cache")}} cherche l'entrée {{domxref("Cache")}} dont la clé est la requête passée en argument, et retourne une {{jsxref("Promise", "Promesse")}}. Si une entrée {{domxref("Cache")}} est trouvée, elle est supprimée, et la promesse est résolue à <code>true</code>. Dans le cas contraire, la promesse est résolue à <code>false</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">cache.delete(request,{options}).then(function(true) {
+  //your cache entry has been deleted
+});
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>request</dt>
+ <dd>La {{domxref("Request", "Requête")}} à supprimer.</dd>
+ <dt>options {{optional_inline}}</dt>
+ <dd>Un objet dont les paramètres contrôlent comment le matching est effectué lors de l'opération de <code>delete</code>. Les options disponibles sont :
+ <ul>
+  <li><code>ignoreSearch</code>: Un {{domxref("Boolean")}} qui spécifie si le matching doit ignorer ou non la query string dans l'url.  Si mis à <code>true</code>, la partie <code>?value=bar</code> de l'url <code>http://foo.com/?value=bar</code> sera ignorée lors du matching. Est à <code>false</code> par défaut.</li>
+  <li><code>ignoreMethod</code>: Un {{domxref("Boolean")}} qui, quand mis à <code>true</code>, empêche les opérations de matching de valider la méthode <code>HTTP</code> de la {{domxref("Request", "Requête")}} (en temps normal, seules <code>GET</code> et <code>HEAD</code> sont autorisées.) Est à  <code>false</code> par défaut.</li>
+  <li><code>ignoreVary</code>: Un {{domxref("Boolean")}} qui, quand mis à <code>true,</code> indique à l'opération de matching de ne pas effectuer le matching <code>VARY</code> des header.  En d'autres termes, si l'URL correspond, un match sera obtenu peu importe que la {{domxref("Response", "Réponse")}} ait un header <code>VARY</code> ou non. Est à <code>false</code> par défaut.</li>
+  <li><code>cacheName</code>: Une {{domxref("DOMString")}} qui représente un cache spécifique où effectuer la recherche. A noter que cette option est ignorée par <code>Cache.delete()</code>.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Retour">Retour</h3>
+
+<p>Une {{jsxref("Promise", "Promesse")}} qui est résolue à <code>true</code> si l'entrée de cache est supprimée, ou à <code>false</code> dans le cas contraire.</p>
+
+<h2 id="Exemples" style="line-height: 30px; font-size: 2.14285714285714rem;">Exemples</h2>
+
+<pre class="brush: js">caches.open('v1').then(function(cache) {
+  cache.delete('/images/image.png').then(function(response) {
+    someUIUpdateFunction();
+  });
+})</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('Service Workers', '#dom-cache-delete', 'Cache: delete')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilités_des_navigateurs">Compatibilités des navigateurs</h2>
+
+<div>
+<div>
+<div class="hidden">Le tableau de compatibilité sur cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Cache.delete")}}</p>
+</div>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les Service Workers</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WorkerGlobalScope.caches")}}</li>
+</ul>
diff --git a/files/fr/web/api/cache/index.html b/files/fr/web/api/cache/index.html
new file mode 100644
index 0000000000..6f5843d631
--- /dev/null
+++ b/files/fr/web/api/cache/index.html
@@ -0,0 +1,156 @@
+---
+title: Cache
+slug: Web/API/Cache
+tags:
+  - API
+  - API Cache
+  - API Service worker
+  - Cache
+  - Interface
+  - Reference
+  - Service Workers
+  - Stockage
+  - hors ligne
+translation_of: Web/API/Cache
+---
+<p>{{APIRef("Service Workers API")}} {{SeeCompatTable}}</p>
+
+<p>L'interface <code>Cache</code> fournit un mécanisme de stockage pour les paires d'objets <code><a href="http://fetch.spec.whatwg.org/#request">Request</a></code>/<code><a href="http://fetch.spec.whatwg.org/#response">Response</a></code> qui sont mises en cache, par exemple dans le cadre du cycle de vie {{domxref("ServiceWorker")}}. Il est à noter que l'interface <code>Cache</code> est exposée à des portées fenêtrées ainsi qu'à des service workers. Vous n'êtes pas obligé de l'utiliser avec des services workers, même si elle est définie dans la spécification relative aux services workers.</p>
+
+<p>Une origine peut avoir plusieurs objets nommés <code>Cache</code>. Vous êtes responsable de l'implémentation de la manière dont votre script (par exemple dans un {{domxref("ServiceWorker")}}) gère les mises à jour du cache. Les éléments d'un cache ne sont pas mis à jour, sauf demande explicite ; ils n'expirent pas, sauf s'ils sont supprimés. Utilisez {{domxref("CacheStorage.open", "CacheStorage.open()")}} pour ouvrir un objet <code>Cache</code> spécifique et appelez ensuite l'une des méthodes <code>Cache</code> pour maintenir le <code>Cache</code>.</p>
+
+<p>Vous êtes également responsable de la purge périodique des entrées du cache. Chaque navigateur a une limite stricte sur la quantité de mémoire cache qu'une origine donnée peut utiliser. Les estimations de l'utilisation du quota de cache sont disponibles via le lien {{domxref("StorageEstimate")}} API. Le navigateur fait de son mieux pour gérer l'espace disque, mais il peut supprimer le stockage en cache d'une origine. Le navigateur supprime généralement toutes les données d'une origine ou aucune des données d'une origine. Veillez à nommer les caches et à n'utiliser les caches qu'à partir de la version du script sur laquelle ils peuvent fonctionner en toute sécurité. Pour plus d'informations, voir <a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers#Supprimer_les_anciens_caches">Suppression des anciens caches</a>.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong> : Les implémentations initiales du cache (dans Blink et Gecko) résolvent les engagements {{domxref("Cache.add()")}}, {{domxref("Cache.addAll()")}}, et {{domxref("Cache.put()")}} lorsque le corps de la réponse est entièrement écrit sur le stockage. Des versions plus récentes de la spécification précisent que le navigateur peut résoudre la promesse dès que l'entrée est enregistrée dans la base de données, même si le corps de réponse est encore en cours d'écriture.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Note </strong>: L'algorithme des correspondances de clés est dépendant de la valeur de l'<a href="https://www.fastly.com/blog/best-practices-using-vary-header">en-tête VARY</a>. Ainsi, pour faire correspondre une nouvelle clé, il faut examiner à la fois la clé et la valeur des entrées dans le Cache.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> L'API de mise en cache n'honore pas les en-têtes de mise en cache HTTP.</p>
+</div>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("Cache.match", "Cache.match(request, options)")}} {{experimental_inline}}</dt>
+ <dd>Retourne une {{jsxref("Promise" , "Promesse" )}} qui se résout en une réponse associée à la première requête correspondante dans l'objet {{domxref("Cache")}}.</dd>
+ <dt>{{domxref("Cache.matchAll", "Cache.matchAll(request, options)")}} {{experimental_inline}}</dt>
+ <dd>Retourne une {{jsxref("Promise" , "Promesse" )}} qui se résout en un tableau de toutes les requêtes correspondantes dans l'objet {{domxref("Cache")}}.</dd>
+ <dt>{{domxref("Cache.add", "Cache.add(request)")}} {{experimental_inline}}</dt>
+ <dd>Prend une URL, la récupère et ajoute l'objet réponse associé au cache donné. C'est une fonctionnalité équivalente à l'appel de fetch(), puis à l'utilisation de Cache.put() pour ajouter les résultats  au cache.</dd>
+ <dt>{{domxref("Cache.addAll", "Cache.addAll(requests)")}} {{experimental_inline}}</dt>
+ <dd>Prend un tableau d'URLs, les récupère, et ajoute les objets réponses associés au cache donné.</dd>
+ <dt>{{domxref("Cache.put", "Cache.put(request, response)")}} {{experimental_inline}}</dt>
+ <dd>Prend à la fois une requête et sa réponse et l'ajoute au cache donné.</dd>
+ <dt>{{domxref("Cache.delete", "Cache.delete(request, options)")}} {{experimental_inline}}</dt>
+ <dd>Trouve l'entrée {{domxref("Cache")}} dont la clé est la requête, et le cas échéant, supprime l'entrée {{domxref("Cache")}} et retourne une {{jsxref("Promise" , "Promesse" )}} qui se résout à <code>true</code>. Si aucune entrée {{domxref("Cache")}} n'est trouvée, elle retourne <code>false</code>.</dd>
+ <dt>{{domxref("Cache.keys", "Cache.keys(request, options)")}} {{experimental_inline}}</dt>
+ <dd>Retourne une {{jsxref("Promise" , "Promesse" )}} qui se résout en un tableau clés {{domxref("Cache")}}.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Cet extrait de code provient de <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/selective-caching/service-worker.js">l'exemple de mise en cache sélective</a>. (voir <a href="https://googlechrome.github.io/samples/service-worker/selective-caching/">selective caching live</a>) Le code utilise {{domxref("CacheStorage.open", "CacheStorage.open(cacheName)")}} pour ouvrir tous les objets {{domxref("Cache")}} avec un en-tête Content-Type qui débute par <code>font/</code>.</p>
+
+<p>Le code utilise alors {{domxref("Cache.match", "Cache.match(request, options)")}} pour voir s'il y a déjà une fonte correspondante dans le cache, et le cas échéant, la retourne. S'il n'y a pas de correspondance, le code récupère la fonte à partir du réseau et utilise {{domxref("Cache.put","Cache.put(request, response)")}} pour mettre en cache la ressource récupérée.</p>
+
+<p>Le code gère les exceptions déclenchées par l'opération de {{domxref("Globalfetch.fetch","fetch()")}}. A noter qu'une réponse HTTP en erreur (e.g., 404) ne déclenchera pas une exception. Elle retournera un objet de réponse normal qui dispose du code d'erreur approprié.</p>
+
+<p>Cet extrait de code illustre également une bonne pratique pour versionner les caches utilisés par le service worker. Bien qu'il y ait seulement un cache dans cet exemple, la même approche peut être utilisée pour des caches multiples. Il associe un identifiant  court avec un nom de cache versionné et spécifique. Le code supprime aussi tous les caches qui ne sont pas nommés dans <code>CURRENT_CACHES</code>.</p>
+
+<div class="note"><strong>Note:</strong> In Chrome, visit chrome://inspect/#service-workers and click on the "inspect" link below the registered service worker to view logging statements for the various actions the <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/selective-caching/service-worker.js">service-worker.js</a> script is performing.</div>
+
+<pre class="brush: js">var CACHE_VERSION = 1;
+
+// Shorthand identifier mapped to specific versioned cache.
+var CURRENT_CACHES = {
+  font: 'font-cache-v' + CACHE_VERSION
+};
+
+self.addEventListener('activate', function(event) {
+  var expectedCacheNames = Object.keys(CURRENT_CACHES).map(function(key) {
+    return CURRENT_CACHES[key];
+  });
+
+  // Active worker won't be treated as activated until promise resolves successfully.
+  event.waitUntil(
+    caches.keys().then(function(cacheNames) {
+      return Promise.all(
+        cacheNames.map(function(cacheName) {
+          if (expectedCacheNames.indexOf(cacheName) == -1) {
+            console.log('Deleting out of date cache:', cacheName);
+
+            return caches.delete(cacheName);
+          }
+        })
+      );
+    })
+  );
+});
+
+self.addEventListener('fetch', function(event) {
+  console.log('Handling fetch event for', event.request.url);
+
+  event.respondWith(
+
+    // Opens Cache objects that start with 'font'.
+    caches.open(CURRENT_CACHES['font']).then(function(cache) {
+      return cache.match(event.request).then(function(response) {
+        if (response) {
+          console.log(' Found response in cache:', response);
+
+          return response;
+        }
+      }).catch(function(error) {
+
+        // Handles exceptions that arise from match() or fetch().
+        console.error('  Error in fetch handler:', error);
+
+        throw error;
+      });
+    })
+  );
+});</pre>
+
+<h3 id="Storing_cookies_in_Caches">Storing cookies in Caches</h3>
+
+<p>L'<a href="/fr/docs/Web/API/Fetch_API">API Fetch</a> exige que les en-têtes {{httpheader("Set-Cookie")}} soient supprimés avant de renvoyer un objet {{domxref("Response")}} à partir de {{domxref("WindowOrWorkerGlobalScope", "fetch()")}}. Ainsi, une réponse stockée dans un cache ne contiendra pas d'en-têtes.</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('Service Workers', '#cache', 'Cache')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité sur cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Cache")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les Service Workers</a></li>
+ <li><a class="external external-icon" href="https://github.com/mdn/sw-test">Code d'exemple basique de Service workers</a></li>
+ <li><a class="external external-icon" href="https://jakearchibald.github.io/isserviceworkerready/">Le ServiceWorker est prêt ?</a></li>
+ <li>{{jsxref("Promise" , "Promesse" )}}</li>
+ <li><a href="/fr/docs/Web/API/Web_Workers_API/Utilisation_des_web_workers">Utilisation des Web Workers</a></li>
+</ul>
diff --git a/files/fr/web/api/cache/keys/index.html b/files/fr/web/api/cache/keys/index.html
new file mode 100644
index 0000000000..9852434719
--- /dev/null
+++ b/files/fr/web/api/cache/keys/index.html
@@ -0,0 +1,96 @@
+---
+title: Cache.keys()
+slug: Web/API/Cache/keys
+tags:
+  - API
+  - Cache
+  - Experimental
+  - Méthode
+  - Reference
+  - Service Workers
+  - ServiceWorker
+  - keys
+translation_of: Web/API/Cache/keys
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<p>La méthode <strong><code>keys()</code></strong> de l'interface {{domxref("Cache")}} retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de clé de {{domxref("Cache")}}.</p>
+
+<p>Les requêtes sont retournées dans le même ordre que l'ordre d'insertion.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Les requêtes avec des URLs déjà présentes mais des headers différents peuvent être retournées si leurs réponses comportent le header <code>VARY</code>.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">cache.keys(request,{options}).then(function(response) {
+  // fait quelque chose avec votre tableau de réponses
+});
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>request {{optional_inline}}</dt>
+ <dd>La {{domxref("Request", "Requête")}} à retourner, si une clé en particulier est désirée.</dd>
+ <dt>options {{optional_inline}}</dt>
+ <dd>Un objet dont les paramètres contrôlent comment le matching est effectué lors de l'opération <code>keys</code>. Les options disponibles sont :</dd>
+ <dd>
+ <ul>
+  <li><code>ignoreSearch</code>: Un {{domxref("Boolean")}} qui spécifie si le matching doit ignorer ou non la query string dans l'url.  Si mis à <code>true</code>, la partie <code>?value=bar</code> de l'url <code>http://foo.com/?value=bar</code> sera ignorée lors du matching. Est à <code>false</code> par défaut.</li>
+  <li><code>ignoreMethod</code>: Un {{domxref("Boolean")}} qui, quand mis à <code>true</code>, empêche les opérations de matching de valider la méthode <code>HTTP</code> de la {{domxref("Request", "Requête")}} (en temps normal, seules <code>GET</code> et <code>HEAD</code> sont autorisées). Est à  <code>false</code> par défaut.</li>
+  <li><code>ignoreVary</code>: Un {{domxref("Boolean")}} qui, quand mis à <code>true,</code> indique à l'opération de matching de ne pas effectuer le matching <code>VARY</code> des header.  En d'autres termes, si l'URL correspond, un match sera obtenu peu importe que la {{domxref("Response", "Réponse")}} ait un header <code>VARY</code> ou non. Est à <code>false</code> par défaut.</li>
+  <li><code>cacheName</code>: Une {{domxref("DOMString")}} qui représente un cache spécifique où effectuer la recherche. A noter que cette option est ignorée par <code>Cache.keys()</code>.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Retour">Retour</h3>
+
+<p>Une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de clé de {{domxref("Cache")}}.</p>
+
+<h2 id="Exemples" style="line-height: 30px; font-size: 2.14285714285714rem;">Exemples</h2>
+
+<pre class="brush: js">caches.open('v1').then(function(cache) {
+  cache.keys().then(function(keys) {
+    keys.forEach(function(request, index, array) {
+      cache.delete(request);
+    });
+  });
+})</pre>
+
+<h2 id="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('Service Workers', '#dom-cache-keys', 'Cache: keys')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilités_des_navigateurs">Compatibilités des navigateurs</h2>
+
+<div>
+<div>
+<div class="hidden">Le tableau de compatibilité sur cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Cache.keys")}}</p>
+</div>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les Service Workers</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WorkerGlobalScope.caches")}}</li>
+</ul>
diff --git a/files/fr/web/api/cache/match/index.html b/files/fr/web/api/cache/match/index.html
new file mode 100644
index 0000000000..bfb4f5c0c6
--- /dev/null
+++ b/files/fr/web/api/cache/match/index.html
@@ -0,0 +1,107 @@
+---
+title: Cache.match()
+slug: Web/API/Cache/match
+tags:
+  - API
+  - Cache
+  - Experimental
+  - Méthode
+  - Reference
+  - Service Workers
+  - Service worker API
+  - ServiceWorker
+  - match
+translation_of: Web/API/Cache/match
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<p>La méthode <strong><code>match()</code></strong> de l'interface {{domxref("Cache")}} retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en une {{domxref("Response", "Réponse")}} associée à la première requête qui match dans l'objet {{domxref("Cache")}}. Si aucune requête n'est trouvée, la {{jsxref("Promise", "Promesse")}} est résolue en {{jsxref("undefined")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">cache.match(request,{options}).then(function(response) {
+  // faire quelque chose avec la réponse
+});
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>request</dt>
+ <dd>La {{domxref("Request")}} à trouver dans le {{domxref("Cache")}}.</dd>
+ <dt>options {{optional_inline}}</dt>
+ <dd>Un objet qui définit des options pour l'opération de <code>match</code>. Les options disponibles sont les suivantes :
+ <ul>
+  <li><code>ignoreSearch</code>: Un {{domxref("Boolean")}} qui spécifie si le matching doit ignorer ou non la query string dans l'url.  Si mis à <code>true</code>, la partie <code>?value=bar</code> de l'url <code>http://foo.com/?value=bar</code> sera ignorée lors du matching. Est à <code>false</code> par défaut.</li>
+  <li><code>ignoreMethod</code>: Un {{domxref("Boolean")}} qui, quand mis à <code>true</code>, empêche les opérations de matching de valider la méthode <code>HTTP</code> de la {{domxref("Request", "Requête")}} (en temps normal, seules <code>GET</code> et <code>HEAD</code> sont autorisées.) Est à  <code>false</code> par défaut.</li>
+  <li><code>ignoreVary</code>: Un {{domxref("Boolean")}} qui, quand mis à <code>true,</code> indique à l'opération de matching de ne pas effectuer le matching <code>VARY</code> des header.  En d'autres termes, si l'URL correspond, un match sera obtenu peu importe que la {{domxref("Response", "Réponse")}} ait un header <code>VARY</code> ou non. Est à <code>false</code> par défaut.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Retour">Retour</h3>
+
+<p>Une {{jsxref("Promise", "Promesse")}} qui est résolue en la première {{domxref("Response", "Réponse")}} qui match la requête, ou en {{jsxref("undefined")}} si aucune requête n'est trouvée.</p>
+
+<div class="note">
+<p><strong>Note</strong>: <code>Cache.match()</code> est quasiment identique à {{domxref("Cache.matchAll()")}}, si ce n'est qu'elle est résolue en <code>response[0]</code> (la première réponse qui matche) plutôt que <code>response[]</code> (un tableau de toutes les réponses qui matchent).</p>
+</div>
+
+<h2 id="Exemples" style="line-height: 30px; font-size: 2.14285714285714rem;">Exemples</h2>
+
+<p>Cet exemple est extrait de l'exemple <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/custom-offline-page/service-worker.js">Page hors ligne custom</a> (<a href="https://googlechrome.github.io/samples/service-worker/custom-offline-page/index.html">demo</a>).</p>
+
+<p>L'exemple suivant se sert d'un cache pour fournir les données demandées même quand une requête échoue. Une clause <code>catch()</code> est déclenchée quand l'appel à <code>fetch()</code> lève une exception. A l'intérieur de la clause <code>catch()</code>, <code>match()</code> est utilisée to pour retourner la réponse appropriée.</p>
+
+<p>Dans cet exemple, nous avons décidé que seul les documents HTML récupérés via le verbe HTTP GET seront mis en cache. <span style="line-height: 19.0909080505371px;">Si notre condition <code>if()</code> est false, le gestionnaire fetch n'intercepte pas la requête. Si d'autres gestionnaires fetch sont enregistrés, ils ont une occasion d'appeler <code>event.respondWith()</code>. Si aucun gestionnaire fetch ne décide d'appeler <code>event.respondWith()</code>, la requête sera gérée par le navigateur comme si les service workers n'avaient pas existé. Si </span><code style="font-style: normal; line-height: 19.0909080505371px;">fetch()</code><span style="line-height: 19.0909080505371px;"> retourne une réponse HTTP valide avec un code réponse dans les 4xx ou 5xx, la clause </span><code style="font-style: normal; line-height: 19.0909080505371px;">catch()</code><span style="line-height: 19.0909080505371px;"> ne sera PAS appelée. </span></p>
+
+<pre class="brush: js">self.addEventListener('fetch', function(event) {
+  // We only want to call event.respondWith() if this is a GET request for an HTML document.
+  if (event.request.method === 'GET' &amp;&amp;
+      event.request.headers.get('accept').indexOf('text/html') !== -1) {
+    console.log('Handling fetch event for', event.request.url);
+    event.respondWith(
+      fetch(event.request).catch(function(e) {
+        console.error('Fetch failed; returning offline page instead.', e);
+        return caches.open(OFFLINE_CACHE).then(function(cache) {
+          return cache.match(OFFLINE_URL);
+        });
+      })
+    );
+  }
+});</pre>
+
+<h2 id="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('Service Workers', '#dom-cache-match', 'Cache match')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilités_des_navigateurs">Compatibilités des navigateurs</h2>
+
+<div>
+<div>
+<div class="hidden">Le tableau de compatibilité sur cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Cache.match")}}</p>
+</div>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les Service Workers</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WorkerGlobalScope.caches")}}</li>
+</ul>
diff --git a/files/fr/web/api/cache/matchall/index.html b/files/fr/web/api/cache/matchall/index.html
new file mode 100644
index 0000000000..4ea5b00be0
--- /dev/null
+++ b/files/fr/web/api/cache/matchall/index.html
@@ -0,0 +1,93 @@
+---
+title: Cache.matchAll()
+slug: Web/API/Cache/matchAll
+tags:
+  - API
+  - Cache
+  - Experimental
+  - Méthode
+  - Reference
+  - Service Workers
+  - Service worker API
+  - ServiceWorker
+  - matchAll
+translation_of: Web/API/Cache/matchAll
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<p>La méthode <strong><code>matchAll()</code></strong> de l'interface {{domxref("Cache")}} retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de toutes les requêtes qui matchent dans l'objet {{domxref("Cache")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">cache.matchAll(request,{options}).then(function(response) {
+  // faire quelque chose avec le tableau des réponses
+});
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>request</dt>
+ <dd>La {{domxref("Request", "Requête")}} à trouver dans le {{domxref("Cache")}}.</dd>
+ <dt>options {{optional_inline}}</dt>
+ <dd>Un objet d'options vous permettant de définir des options de contrôle spécifiques pour la correspondance effectuée. Les options disponibles sont les suivantes :
+ <ul>
+  <li><code>ignoreSearch</code>: Un {{domxref("Boolean")}} qui spécifie si le matching doit ignorer ou non la query string dans l'url.  Si mis à <code>true</code>, la partie <code>?value=bar</code> de l'url <code>http://foo.com/?value=bar</code> sera ignorée lors du matching. Est à <code>false</code> par défaut.</li>
+  <li><code>ignoreMethod</code>: Un {{domxref("Boolean")}} qui, quand mis à <code>true</code>, empêche les opérations de matching de valider la méthode <code>HTTP</code> de la {{domxref("Request", "Requête")}} (en temps normal, seules <code>GET</code> et <code>HEAD</code> sont autorisées.) Est à  <code>false</code> par défaut.</li>
+  <li><code>ignoreVary</code>: Un {{domxref("Boolean")}} qui, quand mis à <code>true,</code> indique à l'opération de matching de ne pas effectuer le matching <code>VARY</code> des header.  En d'autres termes, si l'URL correspond, un match sera obtenu peu importe que la {{domxref("Response", "Réponse")}} ait un header <code>VARY</code> ou non. Est à <code>false</code> par défaut.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Retour">Retour</h3>
+
+<p>Une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de toutes les requêtes qui matchent dans l'objet {{domxref("Cache")}}.</p>
+
+<div class="note">
+<p><strong>Note</strong>: {{domxref("Cache.match()")}} est quasiment identique à <a href="https://developer.mozilla.org/fr/docs/Web/API/Cache/matchAll" title="Cette documentation n'a pas encore été rédigée, vous pouvez aider en contribuant !"><code>Cache.matchAll()</code></a>, si ce n'est qu'elle est résolue en <code>response[0]</code> (la première réponse qui matche) plutôt que <code>response[]</code> (un tableau de toutes les réponses qui matchent).</p>
+</div>
+
+<h2 id="Exemples" style="line-height: 30px; font-size: 2.14285714285714rem;">Exemples</h2>
+
+<pre class="brush: js">caches.open('v1').then(function(cache) {
+  cache.matchAll('/images/').then(function(response) {
+    response.forEach(function(element, index, array) {
+      cache.delete(element);
+    });
+  });
+})</pre>
+
+<h2 id="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('Service Workers', '#dom-cache-matchall', 'Cache: matchAll')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilités_des_navigateurs">Compatibilités des navigateurs</h2>
+
+<div>
+<div>
+<div class="hidden">Le tableau de compatibilité sur cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Cache.matchAll")}}</p>
+</div>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les Service Workers</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.caches")}}</li>
+</ul>
diff --git a/files/fr/web/api/cache/put/index.html b/files/fr/web/api/cache/put/index.html
new file mode 100644
index 0000000000..16dfeed1fb
--- /dev/null
+++ b/files/fr/web/api/cache/put/index.html
@@ -0,0 +1,119 @@
+---
+title: Cache.put()
+slug: Web/API/Cache/put
+tags:
+  - API
+  - Cache
+  - Experimental
+  - Méthode
+  - Reference
+  - Service Workers
+  - Service worker API
+  - ServiceWorker
+  - put
+translation_of: Web/API/Cache/put
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<p>La méthode <strong><code>put()</code></strong> de l'interface {{domxref("Cache")}} permet d'ajouter des paires clé/valeur à l'objet {{domxref("Cache")}} en cours.</p>
+
+<p>Souvent, le comportement voulu est juste de {{domxref("WindowOrWorkerGlobalScope.fetch","fetch()")}} une ou plusieurs requête, et d'ajouter les résultats directement dans le cache. Dans ce type de cas, il est plus judicieux d'utiliser  {{domxref("Cache.add","Cache.add()")}}/{{domxref("Cache.addAll","Cache.addAll()")}} , étant donné que ces méthodes sont des raccourcis pour une ou plusieurs de ces opérations :</p>
+
+<pre class="brush: js">fetch(url).then(function(response) {
+  if (!response.ok) {
+    throw new TypeError('Bad response status');
+  }
+  return cache.put(url, response);
+})</pre>
+
+<div class="note">
+<p><strong>Note</strong>: <code>put()</code> écrasera toute paire clé/valeur précedemment stockée en cache et qui correspond à la requête.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: Les implémentations initiales de Cache (à la fois dans Blink et Gecko) résolvent les promesses   {{domxref("Cache.add")}}, {{domxref("Cache.addAll")}}, et {{domxref("Cache.put")}} quand le corps de la réponse est entièrement écrit en stockage.  Les versions plus récentes des spécifications sont plus précises en déclarant que le navigateur peut résoudre ces promesses dès que l'entrée est enregistrée en base de donnée, même si le reste de la requête est encore en train d'arriver.</p>
+</div>
+
+<div class="note">
+<p><strong>Note:</strong> Depuis Chrome 46, l'API Cache ne stocke que les requêtes depuis des origines sécurisées, à savoir celles servies en HTTPS.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">cache.put(request, response).then(function() {
+  // la paire requête/réponse a été ajoutée au cache
+});
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>request</dt>
+ <dd>La {{domxref("Request", "Requête")}} à ajouter au cache.</dd>
+ <dt>response</dt>
+ <dd>La {{domxref("Response", "Réponse")}} à associer à la requête.</dd>
+</dl>
+
+<h3 id="Retour">Retour</h3>
+
+<p>Une {{jsxref("Promise", "Promesse")}} est retournée avec void.</p>
+
+<div class="note">
+<p><strong>Note</strong>: La promesse sera rompue avec un <code>TypeError</code> si le schéma d'URL n'est pas <code>http</code> ou <code>https</code>.</p>
+</div>
+
+<h2 id="Exemples" style="line-height: 30px; font-size: 2.14285714285714rem;">Exemples</h2>
+
+<p>Cet extrait de code est tiré du MDN <a href="https://github.com/mdn/sw-test/">sw-test example</a> (lancez <a href="https://mdn.github.io/sw-test/">sw-test dans votre navigateur</a>). On attend le déclenchement d'un {{domxref("FetchEvent")}}, puis l'on va retourner une réponse spéciale d'après la procédure suivante :</p>
+
+<ol>
+ <li>Vérifier si un match pour la requête a été trouvé dans le {{domxref("CacheStorage")}} grâce à  {{domxref("CacheStorage.match","CacheStorage.match()")}} . Si oui, servir cette réponse.</li>
+ <li>Sinon, ouvrir le cache <code>v1</code> avec <code>open()</code>, insérer la requête réseau par défaut dans le cache via {{domxref("Cache.put","Cache.put()")}} , et retourner un clone de cette requête avec <code>return response.clone()</code> — nécessaire car <code>put()</code> détruit le corps de la réponse.</li>
+ <li>En cas d'échec (e.g., car le réseau est inaccessible), retourner une réponse de secours.</li>
+</ol>
+
+<pre class="brush: js">var response;
+var cachedResponse = caches.match(event.request).catch(function() {
+  return fetch(event.request);
+}).then(function(r) {
+  response = r;
+  caches.open('v1').then(function(cache) {
+    cache.put(event.request, response);
+  });
+  return response.clone();
+}).catch(function() {
+  return caches.match('/sw-test/gallery/myLittleVader.jpg');
+});</pre>
+
+<h2 id="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('Service Workers', '#dom-cache-put', 'Cache: put')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité sur cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Cache.put")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les Service Workers</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.caches")}}</li>
+</ul>
diff --git a/files/fr/web/api/cachestorage/delete/index.html b/files/fr/web/api/cachestorage/delete/index.html
new file mode 100644
index 0000000000..fa7fadf1b9
--- /dev/null
+++ b/files/fr/web/api/cachestorage/delete/index.html
@@ -0,0 +1,85 @@
+---
+title: CacheStorage.delete()
+slug: Web/API/CacheStorage/delete
+tags:
+  - API
+  - CacheStorage
+  - Experimental
+  - Reference
+  - Service Workers
+  - ServiceWorker
+  - delete
+translation_of: Web/API/CacheStorage/delete
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<p>La fonction <code><strong>delete</strong></code><strong><code>()</code></strong> de l'interface {{domxref("CacheStorage")}} trouve l'objet {{domxref("Cache")}} correspondant à un <code>cacheName</code>, et si trouvé, supprime l'objet {{domxref("Cache")}} et retourne une {{jsxref("Promise", "Promesse")}} qui renvoie <code>true</code>. Si aucun objet {{domxref("Cache")}} n'est trouvé, elle retourne <code>false</code>.</p>
+
+<p>Vous pouvez accéder à <code>CacheStorage</code> via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">caches.delete(<em>cacheName</em>).then(function(true) {
+  // le cache est maintenant supprimé
+});
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>cacheName</dt>
+ <dd>Le nom du cache que vous souhaitez supprimer.</dd>
+</dl>
+
+<h3 id="Retour">Retour</h3>
+
+<p>Une {{jsxref("Promise", "Promesse")}} qui renvoie <code>true</code> si l'objet {{domxref("Cache")}} est trouvé et supprimé, <code>false</code> sinon.</p>
+
+<h2 id="Exemples" style="line-height: 30px; font-size: 2.14285714285714rem;">Exemples</h2>
+
+<p>Dans ce fragment de code, nous attendons un évènement, et bloquons avec un {{domxref("ExtendableEvent.waitUntil","waitUntil()")}}, qui nettoie les anciens, inutilisés, caches avant que le nouveau service worker soit activé. Nous avons ici une liste blanche contenant le nom du cache que nous voulons garder. Nous retournons les clés des caches dans l'objet {{domxref("CacheStorage")}} utilisant {{domxref("CacheStorage.keys")}}, pour ensuite vérifier que chaque clé est dans la liste blance. Sinon, nous la supprimons avec <code>delete().</code></p>
+
+<pre class="brush: js">then.addEventListener('activate', function(event) {
+  var cacheWhitelist = ['v2'];
+
+  event.waitUntil(
+    caches.keys().then(function(keyList) {
+      return Promise.all(keyList.map(function(key) {
+        if (cacheWhitelist.indexOf(key) === -1) {
+          return caches.delete(key);
+        }
+      }));
+    })
+  );
+});</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('Service Workers', '#cache-storage-delete', 'CacheStorage: delete')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilités_des_navigateurs">Compatibilités des navigateurs</h2>
+
+
+
+<p>{{Compat("api.CacheStorage.delete")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les Service Workers</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.caches")}}</li>
+</ul>
diff --git a/files/fr/web/api/cachestorage/has/index.html b/files/fr/web/api/cachestorage/has/index.html
new file mode 100644
index 0000000000..d28ba6eeb0
--- /dev/null
+++ b/files/fr/web/api/cachestorage/has/index.html
@@ -0,0 +1,80 @@
+---
+title: CacheStorage.has()
+slug: Web/API/CacheStorage/has
+tags:
+  - API
+  - CacheStorage
+  - Experimental
+  - Méthode
+  - Reference
+  - Service Workers
+  - ServiceWorker
+  - has
+translation_of: Web/API/CacheStorage/has
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<p>La méthode <strong><code>has()</code></strong> de l'interface {{domxref("CacheStorage")}} retourne une {{jsxref("Promise", "Promesse")}} qui renvoie <code>true</code> si un objet {{domxref("Cache")}} est égal au <code>cacheName</code>.</p>
+
+<p>Vous pouvez accéder à <code>CacheStorage</code> via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">caches.has(<em>cacheName</em>).then(function(true) {
+  // le cache existe!
+});
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>cacheName</dt>
+ <dd>Un  {{domxref("DOMString")}} représentant le nom de l'objet {{domxref("Cache")}} que vous cherchez dans le {{domxref("CacheStorage")}}.</dd>
+</dl>
+
+<h3 id="Retour">Retour</h3>
+
+<p>Une {{jsxref("Promise", "Promesse")}} qui renvoie <code>true</code> si le cache existe.</p>
+
+<h2 id="Exemples" style="line-height: 30px; font-size: 2.14285714285714rem;">Exemples</h2>
+
+<p>L'exemple suivant vérifie qu'un cache nommé 'v1' exists. Si c'est le cas, nous lui ajoutons une liste d'assets. Si non (la promesse <code>has()</code> est rejetée) alors nous exécutons une sorte d'initialisation du cache.</p>
+
+<pre class="brush: js">caches.has('v1').then(function() {
+  caches.open('v1').then(function(cache) {
+      return cache.addAll(myAssets);
+  });
+}).catch(function() {
+  someCacheSetupfunction();
+});;</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('Service Workers', '#cache-storage-has', 'CacheStorage: has')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilités_des_navigateurs">Compatibilités des navigateurs</h2>
+
+
+
+<p>{{Compat("api.CacheStorage.has")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les Service Workers</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WorkerGlobalScope.caches")}}</li>
+</ul>
diff --git a/files/fr/web/api/cachestorage/index.html b/files/fr/web/api/cachestorage/index.html
new file mode 100644
index 0000000000..73138a4baf
--- /dev/null
+++ b/files/fr/web/api/cachestorage/index.html
@@ -0,0 +1,196 @@
+---
+title: CacheStorage
+slug: Web/API/CacheStorage
+tags:
+  - API
+  - Cache de stockage
+  - Experimental
+  - Interface
+  - Reference
+  - Service Workers
+  - ServiceWorker
+translation_of: Web/API/CacheStorage
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<p>L'interface <code>CacheStorage</code> représente le stockage des objets {{domxref("Cache")}}.</p>
+
+<p>L'interface :</p>
+
+<ul>
+ <li>Fournit un répertoire principal de tous les caches nommés qui peut être accessible par un {{domxref("ServiceWorker")}} ou un autre type de travailleur ou portée de {{domxref("window")}} (vous n'êtes pas limité à l'utiliser uniquement avec des Service Workers, même si la spécification {{SpecName("Service Workers")}} le définit).
+  <div class="note"><strong>Note </strong>: <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=1026063">Chrome et Safari n'exposent que "CacheStorage" au contexte fenêtré sur HTTPS</a> <sup>(EN)</sup>. {{domxref("window.caches")}} sera indéfinie, à moins qu'un certificat SSL ne soit configuré.</div>
+ </li>
+ <li>Maintient une correspondance entre les noms des chaînes de caractères et les objets {{domxref("Cache")}} correspondants.</li>
+</ul>
+
+<p>Utilisez {{domxref("CacheStorage.open()")}} pour obtenir une instance {{domxref("Cache")}}.</p>
+
+<p>Utilisez {{domxref("CacheStorage.match()")}} pour vérifier si une {{domxref("Request", "Requête")}} donnée est une clé dans l'un des objets {{domxref("Cache")}} que l'objet <code>CacheStorage</code> surveille.</p>
+
+<p>Vous pouvez accéder à <code>CacheStorage</code> via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}.</p>
+
+<div class="note"><strong>Note</strong>: CacheStorage échouera systématiquement avec une <code>SecurityError</code> sur les domaines non certifiés (i.e. ceux qui n'utilisent pas HTTPS, bien que cette définition risque de devenir plus complexe dans le future). Pendant vos tests vous pouvez contourner ce comportement en cochant l'option "Enable Service Workers over HTTP (when toolbox is open)" dans les options Firefox Devtools / le menu gear.</div>
+
+<div class="note"><strong>Note</strong>: {{domxref("CacheStorage.match()")}} est une méthode de convenance. Il est possible d'implémenter une fonctionnalité équivalente pour matcher une entrée de cache en appelant {{domxref("CacheStorage.open()")}}, puis en retournant {{domxref("CacheStorage.keys()")}}, et en matchant les entrées voulues avec {{domxref("CacheStorage.match()")}}.</div>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("CacheStorage.match()")}} {{experimental_inline}}</dt>
+ <dd>Cherche si une {{domxref("Request")}} donnée est la clé de n'importe lequel des objets {{domxref("Cache")}} maintenus par le {{domxref("CacheStorage")}}, et retourne une {{jsxref("Promise", "Promesse")}} résolue en cet objet {{domxref("Cache")}}.</dd>
+ <dt>{{domxref("CacheStorage.has()")}} {{experimental_inline}}</dt>
+ <dd>Retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en <code>true</code> si un objet {{domxref("Cache")}} qui correspond au <code>cacheName</code> existe.</dd>
+ <dt>{{domxref("CacheStorage.open()")}} {{experimental_inline}}</dt>
+ <dd>Retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en l'objet {{domxref("Cache")}} qui correspond au <code>cacheName</code> (si il n'existe pas, un nouveau cache est créé).</dd>
+ <dt>{{domxref("CacheStorage.delete()")}} {{experimental_inline}}</dt>
+ <dd>Trouve l'objet {{domxref("Cache")}} correspondant au <code>cacheName</code>, et si il est trouvé, supprime l'objet {{domxref("Cache")}} et retourne une {{jsxref("Promise", "Promesse")}} résolue à <code>true</code>. Si aucun objet {{domxref("Cache")}} n'est trouvé, la {{jsxref("Promise", "Promesse")}} est résolue à <code>false</code>.</dd>
+ <dt>{{domxref("CacheStorage.keys()")}} {{experimental_inline}}</dt>
+ <dd>Retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau qui contient toutes les chaînes correspondantes aux objets {{domxref("Cache")}} maintenus par le {{domxref("CacheStorage")}}. Cette méthode peut s'utiliser pour itérer sur une liste de tous les objets {{domxref("Cache")}}.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Cet extrait de code est tiré de l'<a href="https://github.com/mdn/sw-test/">exemple MDN sw-test</a> (lancer <a href="https://mdn.github.io/sw-test/">sw-test dans votre navigateur</a>). Ce service worker script attends le déclenchement d'un {{domxref("InstallEvent")}}, puis lance {{domxref("ExtendableEvent.waitUntil","waitUntil")}} pour gérer la phase d'installation de l'app. Cela consiste à appeler {{domxref("CacheStorage.open")}} pour créer un nouveau cache, puis {{domxref("Cache.addAll")}} pour y ajouter une série d'assets.</p>
+
+<p>Dans le second bloc de code, on attends le déclenchement d'un {{domxref("FetchEvent")}}. On construit ensuite une réponse spéciale comme suit :</p>
+
+<ol>
+ <li>Vérifier si il y a un match pour la requête dans le CacheStorage. Le cas échéant, servir ça.</li>
+ <li>Sinon, récupérer la requête sur le réseau, puis ouvrir le cache du premier bloc et y ajouter un clone de la requête grâce à {{domxref("Cache.put")}} (<code>cache.put(event.request, response.clone())</code>.)</li>
+ <li>En cas d'échec (e.g. car le réseau est inaccessible), retourner une réponse par défaut.</li>
+</ol>
+
+<p>Enfin, on retourne cette réponse en utilisant {{domxref("FetchEvent.respondWith")}}.</p>
+
+<pre class="brush: js">this.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v1').then(function(cache) {
+      return cache.addAll([
+        '/sw-test/',
+        '/sw-test/index.html',
+        '/sw-test/style.css',
+        '/sw-test/app.js',
+        '/sw-test/image-list.js',
+        '/sw-test/star-wars-logo.jpg',
+        '/sw-test/gallery/',
+        '/sw-test/gallery/bountyHunters.jpg',
+        '/sw-test/gallery/myLittleVader.jpg',
+        '/sw-test/gallery/snowTroopers.jpg'
+      ]);
+    })
+  );
+});
+
+self.addEventListener('fetch', function(event) {
+  event.respondWith(caches.match(event.request).then(function(response) {
+    // caches.match() fonctionne toujours
+    // mais en cas de succès, la réponse aura une valeur
+    if (response !== undefined) {
+      return response;
+    } else {
+      return fetch(event.request).then(function (response) {
+        // la réponse ne peut être utilisée qu'une seule fois
+        // nous devons sauvegarder le clone pour mettre
+        // une copie en cache et servir le second
+        let responseClone = response.clone();
+
+        caches.open('v1').then(function (cache) {
+          cache.put(event.request, responseClone);
+        });
+        return response;
+      }).catch(function () {
+        return caches.match('/sw-test/gallery/myLittleVader.jpg');
+      });
+    }
+  }));
+});</pre>
+
+<p>Cet extrait montre comment l'API peut être utilisée en dehors du contexte d'un Service Worker, et utilise l'opérateur "await" pour un code beaucoup plus lisible.</p>
+
+<pre class="brush: js">// Essayer d'obtenir des données du cache, mais se rabattre sur la récupération en direct.
+async function getData() {
+   const cacheVersion = 1;
+   const cacheName    = `myapp-${ cacheVersion }`;
+   const url          = 'https://jsonplaceholder.typicode.com/todos/1';
+   let cachedData     = await getCachedData( cacheName, url );
+
+   if ( cachedData ) {
+      console.log( 'Récupération des données mises en cache' );
+      return cachedData;
+   }
+
+   console.log( 'Obtenir de nouvelles données' );
+
+   const cacheStorage = await caches.open( cacheName );
+   await cacheStorage.add( url );
+   cachedData = await getCachedData( cacheName, url );
+   await deleteOldCaches( cacheName );
+
+   return cachedData;
+}
+
+// Obtenir des données du cache.
+async function getCachedData( cacheName, url ) {
+   const cacheStorage   = await caches.open( cacheName );
+   const cachedResponse = await cacheStorage.match( url );
+
+   if ( ! cachedResponse || ! cachedResponse.ok ) {
+      return false;
+   }
+
+   return await cachedResponse.json();
+}
+
+// Delete any old caches to respect user's disk space.
+async function deleteOldCaches( currentCache ) {
+   const keys = await caches.keys();
+
+   for ( const key of keys ) {
+      const isOurCache = 'myapp-' === key.substr( 0, 6 );
+
+      if ( currentCache === key || ! isOurCache ) {
+         continue;
+      }
+
+      caches.delete( key );
+   }
+}
+
+try {
+   const data = await getData();
+   console.log( { data } );
+} catch ( error ) {
+   console.error( { error } );
+}</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('Service Workers', '#cache-storage', 'CacheStorage')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilités_des_navigateurs">Compatibilités des navigateurs</h2>
+
+
+
+<p>{{Compat("api.CacheStorage")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Utilisation des Service Workers</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.caches")}}</li>
+</ul>
diff --git a/files/fr/web/api/cachestorage/keys/index.html b/files/fr/web/api/cachestorage/keys/index.html
new file mode 100644
index 0000000000..650b9b4f53
--- /dev/null
+++ b/files/fr/web/api/cachestorage/keys/index.html
@@ -0,0 +1,83 @@
+---
+title: CacheStorage.keys()
+slug: Web/API/CacheStorage/keys
+tags:
+  - API
+  - CacheStorage
+  - Experimental
+  - Méthodes
+  - Reference
+  - Service Workers
+  - ServiceWorker
+  - keys
+translation_of: Web/API/CacheStorage/keys
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<p>La méthode <code><strong>keys</strong></code><strong><code>()</code></strong> de l'interface {{domxref("CacheStorage")}} retourne une {{jsxref("Promise", "Promesse")}} qui renvoie une liste content les chaines de caractères correspondant à tous les noms des {{domxref("Cache")}} suivient par l'objet {{domxref("CacheStorage")}}. Utilisez cette méthode pour itérer sur une liste de tous les objets {{domxref("Cache")}}.</p>
+
+<p>Vous pouvez accéder à <code>CacheStorage</code> via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">caches.keys().then(function(<em>keyList</em>) {
+  // faire quelque-chose avec votre keylist
+});
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Aucun.</p>
+
+<h3 id="Retour">Retour</h3>
+
+<p>Une {{jsxref("Promise", "Promesse")}} qui retourne une liste de noms de {{domxref("Cache")}} contenus dans un objet {{domxref("CacheStorage")}}.</p>
+
+<h2 id="Exemples" style="line-height: 30px; font-size: 2.14285714285714rem;">Exemples</h2>
+
+<p>Dans ce fragment de code, nous attendons un évènement, et bloquons avec un {{domxref("ExtendableEvent.waitUntil","waitUntil()")}}, qui nettoie les anciens caches, inutilisés, avant que le nouveau service worker soit activé. Nous avons ici une liste blanche contenant le nom du cache que nous voulons garder. Nous retournons les clés des caches dans l'objet {{domxref("CacheStorage")}} utilisant {{domxref("CacheStorage.keys")}}, pour ensuite vérifier que chaque clé est dans la liste blance. Sinon, nous la supprimons avec <code>delete().</code></p>
+
+<pre class="brush: js">then.addEventListener('activate', function(event) {
+  var cacheWhitelist = ['v2'];
+
+  event.waitUntil(
+    caches.keys().then(function(keyList) {
+      return Promise.all(keyList.map(function(key) {
+        if (cacheWhitelist.indexOf(key) === -1) {
+          return caches.delete(key);
+        }
+      });
+    })
+  );
+});</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('Service Workers', '#dom-cachestorage-keys', 'CacheStorage: keys')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilités_des_navigateurs">Compatibilités des navigateurs</h2>
+
+
+
+<p>{{Compat("api.CacheStorage.keys")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les Service Workers</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WorkerGlobalScope.caches")}}</li>
+</ul>
diff --git a/files/fr/web/api/cachestorage/match/index.html b/files/fr/web/api/cachestorage/match/index.html
new file mode 100644
index 0000000000..42346f8fd0
--- /dev/null
+++ b/files/fr/web/api/cachestorage/match/index.html
@@ -0,0 +1,115 @@
+---
+title: CacheStorage.match()
+slug: Web/API/CacheStorage/match
+tags:
+  - API
+  - CacheStorage
+  - Experimental
+  - Méthode
+  - Reference
+  - Service Workers
+  - ServiceWorkers
+  - match
+translation_of: Web/API/CacheStorage/match
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<p>La fonction <strong><code>match()</code></strong> de l'interface {{domxref("CacheStorage")}} qu'une {{domxref("Request", "Requête")}} est la clé d'un objet {{domxref("Cache")}} object suivie par un objet {{domxref("CacheStorage")}} et retourne une {{jsxref("Promise", "Promesse")}} qui renvoie la {{domxref("Response", "Réponse")}} correspondante.</p>
+
+<p>Vous pouvez accéder à <code>CacheStorage</code> via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}.</p>
+
+<p>Les objets <code>Cache</code> sont cherchés par ordre de création.</p>
+
+<div class="note"><strong>Note</strong>: {{domxref("CacheStorage.match()", "caches.match()")}} est une méthode de commodité. Une fonctionnalité équivalente consiste à appeler {{domxref("cache.match()")}} sur chaque cache (dans l'ordre renvoyé par {{domxref("CacheStorage.keys()", "caches.keys()")}}) jusqu'à ce qu'une {{domxref("Response", "Réponse")}} soit renvoyée.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">caches.match(<em>request</em>,{<em>options</em>}).then(function(<em>response</em>) {
+  // faire quelque-chose avec la requête et la réponse
+});
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>request</dt>
+ <dd>La {{domxref("Request", "Requête")}} recherchée.</dd>
+ <dt>options {{optional_inline}}</dt>
+ <dd>Un objet dont les propriétés contrôlent comment la correspondance est fait avec l'opération <code>match</code>. Les options disponible sont:
+ <ul>
+  <li><code>ignoreSearch</code>: Un {{domxref("Boolean")}} qui détermine si le preocessus de rapprochement doit ignorer la chaîne de requête dans l'url. Défini à <code>true</code>, la partie <code>?value=bar</code> de <code>http://foo.com/?value=bar</code> sera ignoré lors d'un rapporchement. La valeur par défaut est <code>false</code>.</li>
+  <li><code>ignoreMethod</code>: Un {{domxref("Boolean")}} qui, quand défini à <code>true</code>, empêche l'opération de rapprochement de valider le verbe http de la {{domxref("Request", "Requête")}} <code>http</code> (normalement, seulement <code>GET</code> et <code>HEAD</code> sont authorisés) La valeur par défaut est <code>false</code>.</li>
+  <li><code>ignoreVary</code>: Un {{domxref("Boolean")}} qui, quand défini à <code>true</code>, dit à l'opération de rapprochement de ne pas faire le rapprochement avec le header <code>VARY</code>. En d'autres termes, si une URL est sélectionnée elle sera conservée indépemment de la présence du header <code>VARY</code>. La valeur par défaut est <code>false</code>.</li>
+  <li><code>cacheName</code>: Un {{domxref("DOMString")}} qui représente le cache dans lequel on recherche.<span style="display: none;"> </span></li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Une {{jsxref("Promise", "Promesse")}} qui renvoie les {{domxref("Response", "Réponses")}} correspondante.</p>
+
+<h2 id="Exemples" style="line-height: 30px; font-size: 2.14285714285714rem;">Exemples</h2>
+
+<p>Cet exemple est tiré du MDN <a href="https://github.com/mdn/sw-test/">sw-test example</a> (voir <a href="https://mdn.github.io/sw-test/">sw-test running live</a>). Nous attendons pour un évènement {{domxref("FetchEvent")}} et nous construisons une réponse comme suit:</p>
+
+<ol>
+ <li>Vérifier si une correspondance pour la requète est trouvée dans le {{domxref("CacheStorage")}} en utilisant {{domxref("CacheStorage.match")}}. Si oui, la servir.</li>
+ <li>Si non, ouvrire le cache <code>v1</code> avec <code>open()</code>, mettre le réseau par défaut dans le cache avec {{domxref("Cache.put")}} et retourner un clone du réseau par défaut en utilisant <code>return response.clone()</code> — obligatoire car <code>put()</code> détruit le corps de la réponse.</li>
+ <li>Si ceci échoue (e.g., parce que le réseau est inactif), retourner une réponse de secours.</li>
+</ol>
+
+<pre class="brush: js">self.addEventListener('fetch', function(event) {
+  event.respondWith(caches.match(event.request).then(function(response) {
+    // caches.match() always resolves
+    // but in case of success response will have value
+    if (response !== undefined) {
+      return response;
+    } else {
+      return fetch(event.request).then(function (response) {
+        // response may be used only once
+        // we need to save clone to put one copy in cache
+        // and serve second one
+        let responseClone = response.clone();
+
+        caches.open('v1').then(function (cache) {
+          cache.put(event.request, responseClone);
+        });
+        return response;
+      }).catch(function () {
+        return caches.match('/sw-test/gallery/myLittleVader.jpg');
+      });
+    }
+  }));
+});</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('Service Workers', '#dom-cachestorage-match', 'CacheStorage: match')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilités_des_navigateurs">Compatibilités des navigateurs</h2>
+
+
+
+<p>{{Compat("api.CacheStorage.match")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les Service Workers</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.caches")}}</li>
+</ul>
diff --git a/files/fr/web/api/cachestorage/open/index.html b/files/fr/web/api/cachestorage/open/index.html
new file mode 100644
index 0000000000..a2c81af6f9
--- /dev/null
+++ b/files/fr/web/api/cachestorage/open/index.html
@@ -0,0 +1,93 @@
+---
+title: CacheStorage.open()
+slug: Web/API/CacheStorage/open
+tags:
+  - API
+  - CacheStorage
+  - Experimental
+  - Méthode
+  - Reference
+  - Service Workers
+  - ServiceWorkers
+  - open
+translation_of: Web/API/CacheStorage/open
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<p>La fonction <strong><code>open()</code></strong>de l'interface {{domxref("CacheStorage")}} retourne une {{jsxref("Promise", "Promesse")}} qui renvoie l'objet {{domxref("Cache")}} correspondant a un <code>cacheName</code>.</p>
+
+<p>Vous pouvez accéder à <code>CacheStorage</code> via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Si le {{domxref("Cache")}} spécifié n'existe pas, un nouveau cache sera crée avec <code>cacheName</code> et retournera une {{jsxref("Promise", "Promesse")}} renvoyant le nouvel objet {{domxref("Cache")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">caches.open(<em>cacheName</em>).then(function(<em>cache</em>) {
+  // faire quelque-chose avec le cache
+});
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>cacheName</dt>
+ <dd>Le nom du cache que vous voulez ouvrir.</dd>
+</dl>
+
+<h3 id="Retour">Retour</h3>
+
+<p>Une {{jsxref("Promise", "Promesse")}} qui renvoie l'objet {{domxref("Cache")}} demandé.</p>
+
+<h2 id="Exemples" style="line-height: 30px; font-size: 2.14285714285714rem;">Exemples</h2>
+
+<p>Cet exemple est tiré de l'<a href="https://github.com/mdn/sw-test/">exemple MDN sw-test</a> (voir <a href="https://mdn.github.io/sw-test/">sw-test en direct</a>). Ici, nous attendons qu'un {{domxref("InstallEvent")}} se déclenche, puis nous lançons {{domxref("ExtendableEvent.waitUntil", "waitUntil()")}} pour gérer le processus d'installation de l'application. Cela consiste à appeler <code>CacheStorage.open()</code> pour créer un nouveau cache, puis à utiliser {{domxref("Cache.addAll()")}} pour y ajouter une série d'éléments.</p>
+
+<pre class="brush: js">self.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v1').then(function(cache) {
+      return cache.addAll([
+        '/sw-test/',
+        '/sw-test/index.html',
+        '/sw-test/style.css',
+        '/sw-test/app.js',
+        '/sw-test/image-list.js',
+        '/sw-test/star-wars-logo.jpg',
+        '/sw-test/gallery/bountyHunters.jpg',
+        '/sw-test/gallery/myLittleVader.jpg',
+        '/sw-test/gallery/snowTroopers.jpg'
+      ]);
+    })
+  );</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('Service Workers', '#dom-cachestorage-open', 'CacheStorage: open')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilités_des_navigateurs">Compatibilités des navigateurs</h2>
+
+
+
+<p>{{Compat("api.CacheStorage.open")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les Service Workers</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WorkerGlobalScope.caches")}}</li>
+</ul>
diff --git a/files/fr/web/api/canvas_api/index.html b/files/fr/web/api/canvas_api/index.html
new file mode 100644
index 0000000000..a697d99b2a
--- /dev/null
+++ b/files/fr/web/api/canvas_api/index.html
@@ -0,0 +1,168 @@
+---
+title: API canvas
+slug: Web/API/Canvas_API
+tags:
+  - API
+  - Canvas
+  - Reference
+translation_of: Web/API/Canvas_API
+---
+<div>{{IncludeSubnav("/fr/docs/Jeux")}} {{CanvasSidebar}}</div>
+
+<p class="summary">Ajouté en <a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/HTML5">HTML5</a>, l'élément {{HTMLElement("canvas")}} est un nouvel élément qui peut être utilisé pour dessiner des graphismes via des scripts <a href="/fr/docs/JavaScript" title="fr/docs/JavaScript">JavaScript</a>. Par exemple, Il peut être utilisé pour dessiner des graphes, faire des compositions de photos, des animations, ou même faire du traitement ou de l'affichage de vidéos en temps réel.</p>
+
+<p>Les applications Mozilla ont commencé à supporter &lt;canvas&gt; à partir de Gecko 1.8 (c'est-à-dire <a href="/fr/docs/Firefox_1.5_pour_les_développeurs" title="fr/docs/Firefox_1.5_pour_les_développeurs">Firefox 1.5</a>). L'élément a été introduit à l'origine par Apple pour le <a class="external" href="http://www.apple.com/macosx/features/dashboard/">Dashboard d'OS X</a> et pour Safari. Internet Explorer supporte &lt;canvas&gt; depuis la version 9 et ultérieures, pour les versions précédentes d'IE, une page peut effectuer ce support de &lt;canvas&gt; en incluant un script depuis le projet <a href="http://excanvas.sourceforge.net/">Explorer Canvas  </a>de Google.</p>
+
+<p>L'élément &lt;canvas&gt; est aussi utilisé par <a href="https://developer.mozilla.org/fr/docs/Web/API/WebGL_API">WebGL</a> pour afficher des graphismes 3D avec accélération matérielle sur des pages web.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Voilà un simple extrait de code qui utilise la méthode {{domxref("CanvasRenderingContext2D.fillRect()")}}.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.fillStyle = 'green';
+ctx.fillRect(10, 10, 100, 100);
+</pre>
+
+<p>Éditez le code ci-dessous pour voir les changements avoir lieu directement dans le canvas:</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.fillStyle = 'green';
+ctx.fillRect(10, 10, 100, 100);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js notranslate">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var edit = document.getElementById('edit');
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener('click', function() {
+  textarea.focus();
+})
+
+textarea.addEventListener('input', drawCanvas);
+window.addEventListener('load', drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="Références">Références</h2>
+
+<div class="index">
+<ul>
+ <li>{{domxref("HTMLCanvasElement")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasGradient")}}</li>
+ <li>{{domxref("CanvasImageSource")}}</li>
+ <li>{{domxref("CanvasPattern")}}</li>
+ <li>{{domxref("ImageBitmap")}}</li>
+ <li>{{domxref("ImageData")}}</li>
+ <li>{{domxref("RenderingContext")}}</li>
+ <li>{{domxref("TextMetrics")}}</li>
+ <li>{{domxref("OffscreenCanvas")}}{{experimental_inline}}</li>
+ <li>{{domxref("Path2D")}} {{experimental_inline}}{{domxref("ImageBitmapRenderingContext")}}{{experimental_inline}}</li>
+</ul>
+</div>
+
+<p>Les interfaces liées au <code>WebGLRenderingContext</code> sont référencées sous <a href="/en-US/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a>.</p>
+
+<p>{{domxref("CanvasCaptureMediaStream")}} est lié.</p>
+
+<h2 id="Guides_et_tutoriels">Guides et tutoriels</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Tutoriel_canvas">Tutoriel canvas</a></dt>
+ <dd>Un tutoriel complet qui couvre à la fois l'usage élémentaire de <code>&lt;canvas&gt;</code> mais aussi ses fonctionnalités avancées.</dd>
+ <dt><a href="/fr/docs/Extraits_de_code/Canvas" title="fr/docs/Extraits_de_code/Canvas">Extraits de code : Canvas</a></dt>
+ <dd>Quelques extraits de code orientés vers les développeurs d'extension qui utilisent <code>&lt;canvas&gt;</code>.</dd>
+ <dt><a href="/fr/docs/Un_raycaster_basique_avec_canvas">Demo: Un raycaster basique avec canvas</a></dt>
+ <dd>Une demonstration d'animation utilisant le ray-tracing dans un élément canvas.</dd>
+ <dt><a href="/fr/docs/Web/HTML/Canvas/Dessiner_des_objets_DOM_dans_un_element_canvas">Dessiner des objets DOM dans un élément canvas</a></dt>
+ <dd>Comment dessiner un contenu DOM, tel que des éléments HTML, dans un canvas.</dd>
+ <dt><a href="/fr/docs/HTML/Manipulating_video_using_canvas">Manipulation vidéo avec la balise canvas</a></dt>
+ <dd>Combiner {{HTMLElement("video")}} et {{HTMLElement("canvas")}} pour manipuler des données video en temps réel.</dd>
+</dl>
+
+<h2 id="Ressources">Ressources</h2>
+
+<h3 id="Général">Général</h3>
+
+<ul>
+ <li><a href="http://joshondesign.com/p/books/canvasdeepdive/title.html">HTML5 Canvas Deep Dive</a> (en)</li>
+ <li><a href="http://bucephalus.org/text/CanvasHandbook/CanvasHandbook.html">Canvas Handbook</a> (en)</li>
+</ul>
+
+<h3 id="Bibliothèques">Bibliothèques</h3>
+
+<ul>
+ <li><a href="http://fabricjs.com">Fabric.js</a> est une bibliothèque open-source qui peut analyser du code SVG.</li>
+ <li><a href="https://github.com/ericdrowell/KineticJS">Kinetic.js</a> est une bibliothèque open-source concentrée sur l'interactivité pour les applications mobiles et de bureau.</li>
+ <li><a href="http://paperjs.org/">Paper.js</a> est une bibliothèque open-source qui rajoute un système de dessin vectoriel au canvas HTML5.</li>
+ <li><a href="http://origamijs.com/docs/">Origami.js</a> est une bibliothèque légère open-source pour canvas.</li>
+ <li><a href="http://libcanvas.github.com/">libCanvas</a> est un framework canvas puissant et léger.</li>
+ <li><a href="http://processingjs.org">Processing.js</a> est un portage du langage de visuaisation Processing.</li>
+ <li><a href="https://playcanvas.com/">PlayCanvas</a> est un moteur de jeu open-source.</li>
+ <li><a href="http://www.pixijs.com/">Pixi.js</a> est un moteur de jeu open-source.</li>
+ <li><a href="http://www.liquidx.net/plotkit/">PlotKit</a> est une bibliothèque permettant de réaliser des diagrammes et des graphiques.</li>
+ <li><a class="link-https" href="https://github.com/jeremyckahn/rekapi">Rekapi</a> est une API d'animation par key-framing pour Canvas.</li>
+ <li><a href="http://senchalabs.github.com/philogl/">PhiloGL</a> est un framework WebGL pour la visualisation de données, pour la programmation créative et pour le developpement de jeux.</li>
+ <li><a href="http://thejit.org/">JavaScript InfoVis Toolkit</a> crée des visualisation de données interactives en 2D avec canvas pour le Web.</li>
+ <li><a href="http://www.createjs.com/easeljs">EaselJS</a> est une bibliothèque gratuite/open-source qui facilite l'utilisation de canvas pour faire des jeux ou de l'art</li>
+ <li><a href="http://scrawl.rikweb.org.uk/">Scrawl-canvas</a> est une autre bibliothèque open-source pour créer et manipuler des éléments 2D dans canvas</li>
+ <li><a href="https://www.patrick-wied.at/static/heatmapjs/">heatmap.js</a> est une bibliothèque open-source pour créer des cartes thermiques basées sur canvas</li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'scripting.html#the-canvas-element', '&lt;canvas&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/WebGL">WebGL</a></li>
+</ul>
diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/advanced_animations/index.html b/files/fr/web/api/canvas_api/tutoriel_canvas/advanced_animations/index.html
new file mode 100644
index 0000000000..fadf515090
--- /dev/null
+++ b/files/fr/web/api/canvas_api/tutoriel_canvas/advanced_animations/index.html
@@ -0,0 +1,376 @@
+---
+title: Animations avancées
+slug: Web/API/Canvas_API/Tutoriel_canvas/Advanced_animations
+translation_of: Web/API/Canvas_API/Tutorial/Advanced_animations
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Animations_basiques", "Tutoriel_canvas/Pixel_manipulation_with_canvas")}}</div>
+
+<div class="summary">
+<p>Dans le dernier chapitre, nous avons réalisé des <a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Animations_basiques">animations basiques</a> et avons appris comment faire en sorte que les éléments se déplacent. Dans cette partie, nous allons regarder de prêt le mouvement lui-même et ajouter un peu de physique afin de réaliser nos animations avancées.</p>
+</div>
+
+<h2 id="Dessinons_une_balle">Dessinons une balle</h2>
+
+<p>Nous allons utiliser une balle pour étudier les animations. Ainsi, Commençons par dessiner notre balle au sein du canevas.</p>
+
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="600" height="300"&gt;&lt;/canvas&gt;
+</pre>
+
+<p>Comme d'habitude, nous avons tout d'abord besoin de dessiner le contexte. Pour dessiner la balle, nous allons créer un objet <code>ball</code> contenant des propriétés et une méthode <code>draw()</code> afin de la placer sur le canevas.</p>
+
+<pre class="brush: js notranslate">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+var ball = {
+  x: 100,
+  y: 100,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+ball.draw();</pre>
+
+<p>Il n'y a rien de spécial ici, la balle est pour le moment un simple cercle qui est dessiné à l'aide de la méthode {{domxref("CanvasRenderingContext2D.arc()", "arc()")}}.</p>
+
+<h2 id="Ajout_de_la_vitesse">Ajout de la vitesse</h2>
+
+<p>Maintenant que nous avons une balle, nous sommes prêts à ajouter une animation simple comme nous avons pu le voir dans le <a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Animations_basiques">dernier chapitre</a> de ce tutoriel. Une fois encore, {{domxref("window.requestAnimationFrame()")}} nous aide à contrôler l'animation. Il est possible de déplacer la balle en ajoutant un vecteur de vitesse à la position. Pour chaque "frame", nous avons aussi {{domxref("CanvasRenderingContext2D.clearRect", "clear", "", 1)}} <em>(nettoyé)</em> les canvas pour supprimer les anciens cercles des "frames" précédents.</p>
+
+<pre class="brush: js; highlight:[8,9,24,25] notranslate">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 2,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function draw() {
+  ctx.clearRect(0,0, canvas.width, canvas.height);
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mouseover', function(e){
+  raf = window.requestAnimationFrame(draw);
+});
+
+canvas.addEventListener("mouseout",function(e){
+  window.cancelAnimationFrame(raf);
+});
+
+ball.draw();
+</pre>
+
+<h2 id="Limites">Limites</h2>
+
+<p>Si aucun test de collision n'est effectué, notre balle sort hors du canevas rapidement. Nous avons ici besoin de vérifier si les positions <code>x</code> et <code>y</code> de la balle sont hors des dimensions du canevas et si c'est le cas, d'inverser la direction des vecteurs de vitesse. Pour faire cela, nous ajoutons les vérifications suivantes à la méthode <code>draw</code> :</p>
+
+<pre class="brush: js notranslate">if (ball.y + ball.vy &gt; canvas.height || ball.y + ball.vy &lt; 0) {
+  ball.vy = -ball.vy;
+}
+if (ball.x + ball.vx &gt; canvas.width || ball.x + ball.vx &lt; 0) {
+  ball.vx = -ball.vx;
+}</pre>
+
+<h3 id="Première_demo">Première demo</h3>
+
+<p>Voyons voir ce que cela donne. Déplacez votre souris dans le canevas pour commencer l'animation :</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" style="border: 1px solid" width="600" height="300"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 2,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function draw() {
+  ctx.clearRect(0,0, canvas.width, canvas.height);
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+
+  if (ball.y + ball.vy &gt; canvas.height ||
+      ball.y + ball.vy &lt; 0) {
+    ball.vy = -ball.vy;
+  }
+  if (ball.x + ball.vx &gt; canvas.width ||
+      ball.x + ball.vx &lt; 0) {
+    ball.vx = -ball.vx;
+  }
+
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mouseover', function(e){
+  raf = window.requestAnimationFrame(draw);
+});
+
+canvas.addEventListener("mouseout",function(e){
+  window.cancelAnimationFrame(raf);
+});
+
+ball.draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("Première_demo", "610", "310")}}</p>
+
+<h2 id="Accélération">Accélération</h2>
+
+<p>Afin d'obtenir un mouvement plus réel, vous pouvez jouer sur la vitesse, par exemple :</p>
+
+<pre class="brush: js notranslate">ball.vy *= .99;
+ball.vy += .25;</pre>
+
+<p>Ceci ralentit la vitesse verticale à chaque rendu d'image de sorte que la balle va rebondir de moins en moins haut.</p>
+
+<div class="hidden">
+<h6 id="Second_demo">Second demo</h6>
+
+<pre class="brush: html notranslate">&lt;canvas id="canvas" style="border: 1px solid" width="600" height="300"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 2,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function draw() {
+  ctx.clearRect(0,0, canvas.width, canvas.height);
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+  ball.vy *= .99;
+  ball.vy += .25;
+
+  if (ball.y + ball.vy &gt; canvas.height ||
+      ball.y + ball.vy &lt; 0) {
+    ball.vy = -ball.vy;
+  }
+  if (ball.x + ball.vx &gt; canvas.width ||
+      ball.x + ball.vx &lt; 0) {
+    ball.vx = -ball.vx;
+  }
+
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mouseover', function(e){
+  raf = window.requestAnimationFrame(draw);
+});
+
+canvas.addEventListener("mouseout",function(e){
+  window.cancelAnimationFrame(raf);
+});
+
+ball.draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("Second_demo", "610", "310")}}</p>
+
+<h2 id="Effet_de_traînée">Effet de traînée</h2>
+
+<p>Jusqu'à maintenant, nous avons utilisé la méthode {{domxref("CanvasRenderingContext2D.clearRect", "clearRect")}} pour effacer les images précédentes. En la remplaçant par la méthode {{domxref("CanvasRenderingContext2D.fillRect", "fillRect")}} et en utilisant un remplissage semi-transparent, on obtient un effet de traînée.</p>
+
+<pre class="brush: js notranslate">ctx.fillStyle = 'rgba(255,255,255,0.3)';
+ctx.fillRect(0,0,canvas.width,canvas.height);</pre>
+
+<div class="hidden">
+<h6 id="Third_demo">Third demo</h6>
+
+<pre class="brush: html notranslate">&lt;canvas id="canvas" style="border: 1px solid" width="600" height="300"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 2,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function draw() {
+  ctx.fillStyle = 'rgba(255,255,255,0.3)';
+  ctx.fillRect(0,0,canvas.width,canvas.height);
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+  ball.vy *= .99;
+  ball.vy += .25;
+
+  if (ball.y + ball.vy &gt; canvas.height ||
+      ball.y + ball.vy &lt; 0) {
+    ball.vy = -ball.vy;
+  }
+  if (ball.x + ball.vx &gt; canvas.width ||
+      ball.x + ball.vx &lt; 0) {
+    ball.vx = -ball.vx;
+  }
+
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mouseover', function(e){
+  raf = window.requestAnimationFrame(draw);
+});
+
+canvas.addEventListener("mouseout",function(e){
+  window.cancelAnimationFrame(raf);
+});
+
+ball.draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("Third_demo", "610", "310")}}</p>
+
+<h2 id="Ajout_dun_contrôle_de_souris">Ajout d'un contrôle de souris</h2>
+
+<p>Afin d'obtenir quelques contrôles sur la balle, nous pouvons faire suivre notre souris en utilisant l'événement <code><a href="/en-US/docs/Web/Reference/Events/mousemove">mousemove</a></code>, par exemple. L'événement <code><a href="/en-US/docs/Web/Events/click">click</a></code> relâche la balle et la laisse rebondir à nouveau.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" style="border: 1px solid" width="600" height="300"&gt;&lt;/canvas&gt;</pre>
+</div>
+
+<pre class="brush: js notranslate">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+var running = false;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 1,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function clear() {
+  ctx.fillStyle = 'rgba(255,255,255,0.3)';
+  ctx.fillRect(0,0,canvas.width,canvas.height);
+}
+
+function draw() {
+  clear();
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+
+  if (ball.y + ball.vy &gt; canvas.height || ball.y + ball.vy &lt; 0) {
+    ball.vy = -ball.vy;
+  }
+  if (ball.x + ball.vx &gt; canvas.width || ball.x + ball.vx &lt; 0) {
+    ball.vx = -ball.vx;
+  }
+
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mousemove', function(e){
+  if (!running) {
+    clear();
+    ball.x = e.clientX;
+    ball.y = e.clientY;
+    ball.draw();
+  }
+});
+
+canvas.addEventListener("click",function(e){
+  if (!running) {
+    raf = window.requestAnimationFrame(draw);
+    running = true;
+  }
+});
+
+canvas.addEventListener("mouseout",function(e){
+  window.cancelAnimationFrame(raf);
+  running = false;
+});
+
+ball.draw();
+</pre>
+
+<p>Déplacez la balle en utilisant votre souris et relâchez-la avec un click.</p>
+
+<p>{{EmbedLiveSample("Ajout_d'un_contrôle_de_souris", "610", "310")}}</p>
+
+<h2 id="Casse-briques">Casse-briques</h2>
+
+<p>Ce petit chapitre explique seulement quelques techniques pour créer des animations avancées. Il en existe bien davantage ! <span id="result_box" lang="fr"><span>Que diriez-vous d'ajouter une raquette, des briques et de transformer cette démo en une partie de casse-briques ?</span> <span>Consultez notre zone de développement de jeux pour plus d'articles liés <a href="https://developer.mozilla.org/fr/docs/Jeux">aux jeux</a>.</span></span></p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("window.requestAnimationFrame()")}}</li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Games/Techniques/Efficient_animation_for_web_games">Animation efficace pour les jeux vidéo</a></li>
+</ul>
+
+<p>{{PreviousNext("Tutoriel_canvas/Animations_basiques", "Tutoriel_canvas/Pixel_manipulation_with_canvas")}}</p>
diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/ajout_de_styles_et_de_couleurs/index.html b/files/fr/web/api/canvas_api/tutoriel_canvas/ajout_de_styles_et_de_couleurs/index.html
new file mode 100644
index 0000000000..15eef37006
--- /dev/null
+++ b/files/fr/web/api/canvas_api/tutoriel_canvas/ajout_de_styles_et_de_couleurs/index.html
@@ -0,0 +1,719 @@
+---
+title: Ajout de styles et de couleurs
+slug: Web/API/Canvas_API/Tutoriel_canvas/Ajout_de_styles_et_de_couleurs
+tags:
+  - Canvas
+  - Couleurs
+  - Formes géométriques
+  - Graphismes
+  - Tutorial
+translation_of: Web/API/Canvas_API/Tutorial/Applying_styles_and_colors
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Formes_géométriques", "Dessin_de_texte_avec_canvas")}}</div>
+
+<div class="summary">
+<p>Dans le chapitre sur <a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Formes_g%C3%A9om%C3%A9triques" title="/fr/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes">les formes géométriques</a>, nous avons utilisé les styles de lignes et de remplissage par défaut. Ici, nous allons explorer les options de canvas à notre disposition pour rendre nos dessins un peu plus attrayants. Vous apprendrez comment ajouter des couleurs différentes, des styles de ligne, des dégradés, des motifs et des ombres à vos dessins.</p>
+</div>
+
+<h2 id="Colors" name="Colors">Les couleurs</h2>
+
+<p>Jusqu'à présent, nous avons seulement vu des méthodes sur le contexte de dessin. Si nous voulons appliquer des couleurs à une forme, il y a deux propriétés importantes que nous pouvons utiliser : <code>fillStyle</code> et <code>strokeStyle</code> .</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle = color")}}</dt>
+ <dd>Définit le style utilisé lors du remplissage de formes.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle = color")}}</dt>
+ <dd>Définit le style pour les contours des formes.</dd>
+</dl>
+
+<p><code>color</code> est une chaîne représentant un CSS {{cssxref("&lt;color&gt;")}}, d'un objet gradient ou d'un objet motif. Nous allons examiner le gradient et la structure des objets plus tard. Par défaut, l'encadrement et la couleur de remplissage sont fixés sur noir (valeur <code>#000000</code> de CSS <code>color</code>).</p>
+
+<div class="note">
+<p><strong>Remarque: </strong> Lorsque vous définissez <code>strokeStyle</code> et <code>fillStyle</code>, la nouvelle valeur devient la valeur par défaut pour toutes les formes en cours d'élaboration à partir de là. Pour chaque forme que vous voulez dans une couleur différente, vous aurez besoin de réaffecter <code>fillStyle</code> ou <code>strokeStyle</code>.</p>
+</div>
+
+<p>Les chaînes pour être valides, doivent être conforme à la spécification CSS {{cssxref("&lt;color&gt;")}}. Chacun des exemples suivants décrit la même couleur.</p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="comment token">// Les valeurs possibles de fillStyle pour "orange"</span>
+
+ctx<span class="punctuation token">.</span>fillStyle <span class="operator token">=</span> <span class="string token">'orange'</span><span class="punctuation token">;</span>
+ctx<span class="punctuation token">.</span>fillStyle <span class="operator token">=</span> <span class="string token">'#FFA500'</span><span class="punctuation token">;</span>
+ctx<span class="punctuation token">.</span>fillStyle <span class="operator token">=</span> <span class="string token">'rgb(255, 165, 0)'</span><span class="punctuation token">;</span>
+ctx<span class="punctuation token">.</span>fillStyle <span class="operator token">=</span> <span class="string token">'rgba(255, 165, 0, 1)'</span><span class="punctuation token">;</span></code></pre>
+
+<h3 id="A_fillStyle_example" name="A_fillStyle_example">Un exemple <code>fillStyle</code></h3>
+
+<p>Dans cet exemple, nous utilisons une nouvelle fois deux boucles <code>for</code> pour dessiner une grille de rectangles, chacun dans une couleur différente. L'image résultante devrait ressembler à la capture d'écran. Il n'y a rien de spectaculaire ici. Nous utilisons les deux variables <code>i</code> et <code>j</code> pour générer une couleur RVB unique pour chaque carré, et seulement modifier les valeurs rouges et vertes. Le canal bleu a une valeur fixe. En modifiant les canaux, vous pouvez générer toutes sortes de palettes. En augmentant les étapes, vous pouvez obtenir quelque chose qui ressemble à des palettes de couleurs que Photoshop utilise.</p>
+
+<pre class="brush: js;highlight[5,6] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  for (var i = 0; i &lt; 6; i++) {
+    for (var j = 0; j &lt; 6; j++) {
+      ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ',' +
+                       Math.floor(255 - 42.5 * j) + ',0)';
+      ctx.fillRect(j * 25, i * 25, 25, 25);
+    }
+  }
+}</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>Le résultat ressemble à ceci:</p>
+
+<p>{{EmbedLiveSample("A_fillStyle_example", 160, 160, "https://mdn.mozillademos.org/files/5417/Canvas_fillstyle.png")}}</p>
+
+<h3 id="A_strokeStyle_example" name="A_strokeStyle_example">Un exemple <code>strokeStyle</code></h3>
+
+<p>Cet exemple est similaire à celui ci-dessus, mais utilise <code>strokeStyle</code> pour changer les couleurs des contours des formes. Nous utilisons la méthode <code>arc()</code> pour dessiner des cercles au lieu de carrés.</p>
+
+<pre class="brush: js;highlight[5,6] line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">var</span> ctx <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token">&lt;</span> <span class="number token">6</span><span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> j <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> j <span class="operator token">&lt;</span> <span class="number token">6</span><span class="punctuation token">;</span> j<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        ctx<span class="punctuation token">.</span>strokeStyle <span class="operator token">=</span> <span class="string token">'rgb(0, '</span> <span class="operator token">+</span> Math<span class="punctuation token">.</span><span class="function token">floor</span><span class="punctuation token">(</span><span class="number token">255</span> <span class="operator token">-</span> <span class="number token">42.5</span> <span class="operator token">*</span> i<span class="punctuation token">)</span> <span class="operator token">+</span> <span class="string token">', '</span> <span class="operator token">+</span>
+                         Math<span class="punctuation token">.</span><span class="function token">floor</span><span class="punctuation token">(</span><span class="number token">255</span> <span class="operator token">-</span> <span class="number token">42.5</span> <span class="operator token">*</span> j<span class="punctuation token">)</span> <span class="operator token">+</span> <span class="string token">')'</span><span class="punctuation token">;</span>
+        ctx<span class="punctuation token">.</span><span class="function token">beginPath</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+        ctx<span class="punctuation token">.</span><span class="function token">arc</span><span class="punctuation token">(</span><span class="number token">12.5</span> <span class="operator token">+</span> j <span class="operator token">*</span> <span class="number token">25</span><span class="punctuation token">,</span> <span class="number token">12.5</span> <span class="operator token">+</span> i <span class="operator token">*</span> <span class="number token">25</span><span class="punctuation token">,</span> <span class="number token">10</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> Math<span class="punctuation token">.</span>PI <span class="operator token">*</span> <span class="number token">2</span><span class="punctuation token">,</span> <span class="keyword token">true</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+        ctx<span class="punctuation token">.</span><span class="function token">stroke</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>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+</div>
+
+<p>Le résultat ressemble à ceci :</p>
+
+<p>{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "https://mdn.mozillademos.org/files/253/Canvas_strokestyle.png")}}</p>
+
+<h2 id="Transparency" name="Transparency">Transparence</h2>
+
+<p>En plus de dessiner des formes opaques sur la toile, nous pouvons également dessiner des formes semi-transparentes (ou translucides). Cela se fait soit par le réglage de <code>globalAlpha</code> ou en attribuant une couleur semi-transparente à <code>strokeStyle</code> et/ou <code>fillStyle</code>.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha = transparencyValue")}}</dt>
+ <dd>Applique la valeur de transparence spécifiée à toutes les formes futures tracées sur le Canvas. La valeur doit être comprise entre 0.0 (complètement transparent) à 1.0 (complètement opaque). Cette valeur est de 1,0 (complètement opaque) par défaut.</dd>
+</dl>
+
+<p>La propriété<code> globalAlpha</code> peut être utile si vous voulez dessiner un grand nombre de formes sur la toile avec la même transparence, mais sinon, il est généralement plus utile de définir la transparence sur les formes individuelles lors de la définition de leurs couleurs.</p>
+
+<p>Parce que <code>strokeStyle</code> et <code>fillStyle</code> acceptent les valeurs de couleur rvba CSS, nous pouvons utiliser la notation suivante pour attribuer une couleur transparente.</p>
+
+<pre class="brush: js notranslate">//Affecter des couleurs transparentes pour dessiner et remplir le style
+
+ctx.strokeStyle = "rgba(255, 0, 0, .5)";
+ctx.fillStyle = "rgba(255, 0, 0, .5)";
+</pre>
+
+<p>La fonction <code>rgba()</code> <em>(rvba)</em> est similaire à la fonction <code>rgb()</code> <em>(rvb)</em> mais il a un paramètre supplémentaire. Le dernier paramètre définit la valeur de la transparence de cette couleur particulière. La plage valide est entre 0,0 (totalement transparent) et 1,0 (totalement opaque).</p>
+
+<h3 id="A_globalAlpha_example" name="A_globalAlpha_example">Un exemple <code>globalAlpha</code></h3>
+
+<p>Dans cet exemple, nous allons dessiner un fond de quatre carrés de couleurs différentes. En plus de ceux-ci, nous allons dessiner un ensemble de cercles semi-transparents. <code>globalAlpha</code> est réglé à <code>0.2</code> et sera utilisé pour toutes les formes. Chaque étape de boucle <code>for</code> dessine un ensemble de cercles avec un rayon croissant. Le résultat final est un gradient radial. En superposant toujours plus de cercles, les uns au-dessus des autres, nous réduisons efficacement la transparence des cercles qui ont déjà été établis. En augmentant le pas et le nombre de cercles, l'arrière-plan devrait complètement disparaître du centre de l'image.</p>
+
+<pre class="brush: js;highlight[15] line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> ctx <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="comment token">// draw background</span>
+  ctx<span class="punctuation token">.</span>fillStyle <span class="operator token">=</span> <span class="string token">'#FD0'</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span><span class="function token">fillRect</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">75</span><span class="punctuation token">,</span> <span class="number token">75</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span>fillStyle <span class="operator token">=</span> <span class="string token">'#6C0'</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span><span class="function token">fillRect</span><span class="punctuation token">(</span><span class="number token">75</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">75</span><span class="punctuation token">,</span> <span class="number token">75</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span>fillStyle <span class="operator token">=</span> <span class="string token">'#09F'</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span><span class="function token">fillRect</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">75</span><span class="punctuation token">,</span> <span class="number token">75</span><span class="punctuation token">,</span> <span class="number token">75</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span>fillStyle <span class="operator token">=</span> <span class="string token">'#F30'</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span><span class="function token">fillRect</span><span class="punctuation token">(</span><span class="number token">75</span><span class="punctuation token">,</span> <span class="number token">75</span><span class="punctuation token">,</span> <span class="number token">75</span><span class="punctuation token">,</span> <span class="number token">75</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span>fillStyle <span class="operator token">=</span> <span class="string token">'#FFF'</span><span class="punctuation token">;</span>
+
+  <span class="comment token">// règle la valeur de transparence</span>
+  ctx<span class="punctuation token">.</span>globalAlpha <span class="operator token">=</span> <span class="number token">0.2</span><span class="punctuation token">;</span>
+
+  <span class="comment token">// Dessine des cercles semi-transparents</span>
+  <span class="keyword token">for</span> <span class="punctuation token">(</span>i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token">&lt;</span> <span class="number token">7</span><span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    ctx<span class="punctuation token">.</span><span class="function token">beginPath</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    ctx<span class="punctuation token">.</span><span class="function token">arc</span><span class="punctuation token">(</span><span class="number token">75</span><span class="punctuation token">,</span> <span class="number token">75</span><span class="punctuation token">,</span> <span class="number token">10</span> <span class="operator token">+</span> <span class="number token">10</span> <span class="operator token">*</span> i<span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> Math<span class="punctuation token">.</span>PI <span class="operator token">*</span> <span class="number token">2</span><span class="punctuation token">,</span> <span class="keyword token">true</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    ctx<span class="punctuation token">.</span><span class="function token">fill</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>
+
+<div class="hidden">
+<pre class="brush: html line-numbers  language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>canvas<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>canvas</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "https://mdn.mozillademos.org/files/232/Canvas_globalalpha.png")}}</p>
+
+<h3 id="An_example_using_rgba" name="An_example_using_rgba()">Un exemple en utilisant <code>rgba()</code></h3>
+
+<p>Dans ce deuxième exemple, nous faisons quelque chose de similaire, mais au lieu de dessiner des cercles, nous dessinons de petits rectangles à l'opacité croissante. L'utilisation de <code>rgba()</code> nous donne un peu plus de contrôle et de flexibilité.</p>
+
+<pre class="brush: js;highlight[16] line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> ctx <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="comment token">// Dessine le fond</span>
+  ctx<span class="punctuation token">.</span>fillStyle <span class="operator token">=</span> <span class="string token">'rgb(255, 221, 0)'</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span><span class="function token">fillRect</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">150</span><span class="punctuation token">,</span> <span class="number token">37.5</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span>fillStyle <span class="operator token">=</span> <span class="string token">'rgb(102, 204, 0)'</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span><span class="function token">fillRect</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">37.5</span><span class="punctuation token">,</span> <span class="number token">150</span><span class="punctuation token">,</span> <span class="number token">37.5</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span>fillStyle <span class="operator token">=</span> <span class="string token">'rgb(0, 153, 255)'</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span><span class="function token">fillRect</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">75</span><span class="punctuation token">,</span> <span class="number token">150</span><span class="punctuation token">,</span> <span class="number token">37.5</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span>fillStyle <span class="operator token">=</span> <span class="string token">'rgb(255, 51, 0)'</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span><span class="function token">fillRect</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">112.5</span><span class="punctuation token">,</span> <span class="number token">150</span><span class="punctuation token">,</span> <span class="number token">37.5</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="comment token">// Dessine des rectangles semi-transparents</span>
+  <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token">&lt;</span> <span class="number token">10</span><span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    ctx<span class="punctuation token">.</span>fillStyle <span class="operator token">=</span> <span class="string token">'rgba(255, 255, 255, '</span> <span class="operator token">+</span> <span class="punctuation token">(</span>i <span class="operator token">+</span> <span class="number token">1</span><span class="punctuation token">)</span> <span class="operator token">/</span> <span class="number token">10</span> <span class="operator token">+</span> <span class="string token">')'</span><span class="punctuation token">;</span>
+    <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> j <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> j <span class="operator token">&lt;</span> <span class="number token">4</span><span class="punctuation token">;</span> j<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      ctx<span class="punctuation token">.</span><span class="function token">fillRect</span><span class="punctuation token">(</span><span class="number token">5</span> <span class="operator token">+</span> i <span class="operator token">*</span> <span class="number token">14</span><span class="punctuation token">,</span> <span class="number token">5</span> <span class="operator token">+</span> j <span class="operator token">*</span> <span class="number token">37.5</span><span class="punctuation token">,</span> <span class="number token">14</span><span class="punctuation token">,</span> <span class="number token">27.5</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>
+
+<div class="hidden">
+<pre class="brush: html line-numbers  language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>canvas<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>canvas</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+</div>
+
+<p>{{EmbedLiveSample("An_example_using_rgba()", "180", "180", "https://mdn.mozillademos.org/files/246/Canvas_rgba.png")}}</p>
+
+<h2 id="Line_styles" name="Line_styles">Le style des lignes</h2>
+
+<p>Il y a plusieurs propriétés qui nous permettent de modifier le style des lignes.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth = value")}}</dt>
+ <dd>Définit la largeur des lignes qui serons tracées.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.lineCap", "lineCap = type")}}</dt>
+ <dd>Définit l'apparence des extrémités des lignes.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin = type")}}</dt>
+ <dd>Définit l'apparence des «coins» où les lignes se rencontrent.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit = value")}}</dt>
+ <dd>Établit une limite lorsque deux lignes se rejoignent en un angle aigu, pour permettre de contrôler l'épaisseur de la jonction.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.getLineDash", "getLineDash()")}}</dt>
+ <dd>Retourne le tableau du modele courant de ligne contenant un nombre pair de nombres positifs.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.setLineDash", "setLineDash(segments)")}}</dt>
+ <dd>Définit le modele de ligne.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset = value")}}</dt>
+ <dd>Indique où commencer un modele sur une ligne.</dd>
+</dl>
+
+<p>Vous aurez une meilleure compréhension de ce qu'ils font en regardant les exemples ci-dessous.</p>
+
+<h3 id="A_lineWidth_example" name="A_lineWidth_example">Un exemple <code>lineWidth</code></h3>
+
+<p>Cette propriété définit l'épaisseur de la ligne actuelle. Les valeurs doivent être des nombres positifs. Par défaut, cette valeur est définie à 1,0.</p>
+
+<p>La largeur de ligne est l'épaisseur centrée sur le tracé. En d'autres termes, la zone qui est dessinée s'étend de part et d'autre du tracé. Parce que les coordonnées ne font pas référence directement aux pixels, une attention particulière doit être prise pour obtenir des lignes horizontales et verticales nettes.</p>
+
+<p>Dans l'exemple ci-dessous, 10 lignes droites sont dessinées avec des largeurs croissantes. La ligne à l'extrême gauche a 1,0 unités de large. Cependant, celle ci et toutes les lignes d'épaisseur impair ne semblent pas nettes, en raison du positionnement du tracé.</p>
+
+<pre class="brush: js;highlight[4] line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> ctx <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token">&lt;</span> <span class="number token">10</span><span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    ctx<span class="punctuation token">.</span>lineWidth <span class="operator token">=</span> <span class="number token">1</span> <span class="operator token">+</span> i<span class="punctuation token">;</span>
+    ctx<span class="punctuation token">.</span><span class="function token">beginPath</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    ctx<span class="punctuation token">.</span><span class="function token">moveTo</span><span class="punctuation token">(</span><span class="number token">5</span> <span class="operator token">+</span> i <span class="operator token">*</span> <span class="number token">14</span><span class="punctuation token">,</span> <span class="number token">5</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    ctx<span class="punctuation token">.</span><span class="function token">lineTo</span><span class="punctuation token">(</span><span class="number token">5</span> <span class="operator token">+</span> i <span class="operator token">*</span> <span class="number token">14</span><span class="punctuation token">,</span> <span class="number token">140</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    ctx<span class="punctuation token">.</span><span class="function token">stroke</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>
+
+<div class="hidden">
+<pre class="brush: html line-numbers  language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>canvas<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>canvas</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+</div>
+
+<p>{{EmbedLiveSample("A_lineWidth_example", "180", "180", "https://mdn.mozillademos.org/files/239/Canvas_linewidth.png")}}</p>
+
+<p>Pour l'obtention de lignes nettes, il faut comprendre comment les lignes sont tracées. Ci-dessous, la grille représente la grille de coordonnées. Les carrés sont des pixels réels de l'écran. Dans la première grille, un rectangle (2,1) à (5,5) est rempli. La zone entière couverte par les lignes (rouge clair) tombe sur les limites des pixels, de sorte que le rectangle rempli résultant aura des bords nets.</p>
+
+<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/201/Canvas-grid.png"></p>
+
+<p>Si vous considérez un tracé de (3,1) à (3,5) avec une épaisseur de ligne de <code>1.0</code>, vous vous retrouvez dans la situation de la deuxième grille. La surface réelle à remplir (bleu foncé) se prolonge seulement à moitié sur les pixels de part et d'autre du chemin. Une approximation de ceci doit être rendue, ce qui signifie que ces pixels sont partiellement ombrés, et le résultat est que toute la zone (le bleu clair et bleu foncé) est remplie avec une couleur moitié moins sombre que la couleur du tracé attendu. C'est ce qui arrive avec la largeur de <code>1.0</code> dans l'exemple précédent.</p>
+
+<p>Pour résoudre ce problème, vous devez être très précis dans la création de votre tracé. Sachant qu'une largeur de <code>1.0</code> s'étendra d'une demi-unité de chaque côté du tracé, créer le tracé de (3.5,1) à (3.5,5) aboutit à l'exemple trois pour une largeur de <code>1.0</code> et au remplissage d'un seul pixel de ligne verticale.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Sachez que dans notre exemple de ligne verticale, la position Y fait toujours référence à une position de grille entière — sinon, vous verrez des pixels à moitié colorés à gauche et à droite (mais notez aussi que ce comportement dépend de l'actuel style <code>lineCap</code>, dont la valeur par défaut est <code>butt</code>. Vous pouvez essayer de tracer des traits consistants avec des coordonnées non-entières pour les lignes et avec une largeur particulière, en définissant le style <code>lineCap</code> à <code>square</code>, pour que le bord extérieur du trait autour du point final soit automatiquement étendu pour couvrir le pixel entier).</p>
+
+<p><span id="result_box" lang="fr"><span>Notez également que seuls les points de début et de fin d'un chemin sont affectés : si un chemin est fermé avec <code>closePath ()</code>, il n'y a pas de point de départ ni de point final ;</span> <span>à la place, tous les points d'extrémité du chemin sont connectés à leurs segments joints précédent et suivant, en utilisant le paramètre courant du style <code>lineJoin</code>, dont la valeur par défaut est <code>miter</code>, avec pour effet d'étendre automatiquement les bordures extérieures des segments connectés à leur point d'intersection.</span> Ainsi,<span> le trait de rendu couvrira exactement les pixels pleins centrés à chaque extrémité si ces segments connectés sont horizontaux et / ou verticaux.</span> <span>Voir les deux sections suivantes pour les démonstrations de ces styles de lignes supplémentaires.</span></span></p>
+</div>
+
+<p><span id="result_box" lang="fr"><span>Pour les lignes de largeur paire, chaque moitié finit par être un nombre entier de pixels, vous voulez donc un chemin entre les pixels (c'est-à-dire (3,1) à (3,5)), au lieu de descendre au milieu des pixels</span> <span>.</span></span></p>
+
+<p>Bien que légèrement ennuyeux quand on travaille avec des graphismes 2D évolutifs, en accordant une attention à la grille de pixels et à la position des tracés, vous vous assurez du comportement correct de vos dessins, et ce, indépendamment de la mise à l'échelle ou d'autres transformations. Une ligne verticale de largeur 1,0 à la bonne position deviendra une ligne de 2 pixels nette à l'échelle 2.</p>
+
+<h3 id="A_lineCap_example" name="A_lineCap_example">Un exemple de <code>lineCap</code></h3>
+
+<p>La propriété <code>lineCap</code> détermine comment les extrêmités de chaque ligne sont dessinées. Il y a trois valeurs possibles pour la propriété : <code>butt</code>, <code>round</code> et <code>square</code>. Par défaut, la propriété est définie à <code>butt</code>.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/236/Canvas_linecap.png" style="float: right; height: 190px; width: 190px;"></p>
+
+<dl>
+ <dt><code>butt </code><em>(bout)</em></dt>
+ <dd>L'extrémité des lignes est en angle droit.</dd>
+ <dt><code>round </code><em>(rond)</em></dt>
+ <dd>Les extrémités sont arrondies.</dd>
+ <dt><code>square </code><em>(carré)</em></dt>
+ <dd>Les extrémités sont en angle droit en ajoutant une extension d'une largeur égale à la ligne et une hauteur égale à la moitié de la largeur de la ligne.</dd>
+</dl>
+
+<p>Dans cet exemple, nous avons tracé trois lignes, chacune avec une valeur différente pour la propriété <code>lineCap</code>. Nous avons par ailleurs ajouté deux guides pour voir exactement les différences entre les trois lignes. Chacune de ces trois lignes est identique entre les deux traits bleus.</p>
+
+<p>La ligne de gauche utilise l'option par défaut <code>butt</code>. Vous pourrez noter qu'elle est entièrement dessinée entre les deux guides. La deuxième utilise l'option <code>round</code>. Elle ajoute un demi-cercle à chaque extrémité d'un rayon valant la moitié de la largeur de la ligne. La ligne de droite utilise l'option <code>square</code>. Elle ajoute une extension avec une largeur égale à la ligne et une hauteur équivalante à la moitié de la largeur de la ligne.</p>
+
+<pre class="brush: js;highlight[18] line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> ctx <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">var</span> lineCap <span class="operator token">=</span> <span class="punctuation token">[</span><span class="string token">'butt'</span><span class="punctuation token">,</span> <span class="string token">'round'</span><span class="punctuation token">,</span> <span class="string token">'square'</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
+
+  <span class="comment token">// Dessiner des guides</span>
+  ctx<span class="punctuation token">.</span>strokeStyle <span class="operator token">=</span> <span class="string token">'#09f'</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span><span class="function token">beginPath</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span><span class="function token">moveTo</span><span class="punctuation token">(</span><span class="number token">10</span><span class="punctuation token">,</span> <span class="number token">10</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span><span class="function token">lineTo</span><span class="punctuation token">(</span><span class="number token">140</span><span class="punctuation token">,</span> <span class="number token">10</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span><span class="function token">moveTo</span><span class="punctuation token">(</span><span class="number token">10</span><span class="punctuation token">,</span> <span class="number token">140</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span><span class="function token">lineTo</span><span class="punctuation token">(</span><span class="number token">140</span><span class="punctuation token">,</span> <span class="number token">140</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span><span class="function token">stroke</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="comment token">// Dessiner des lignes</span>
+  ctx<span class="punctuation token">.</span>strokeStyle <span class="operator token">=</span> <span class="string token">'black'</span><span class="punctuation token">;</span>
+  <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token">&lt;</span> lineCap<span class="punctuation token">.</span>length<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    ctx<span class="punctuation token">.</span>lineWidth <span class="operator token">=</span> <span class="number token">15</span><span class="punctuation token">;</span>
+    ctx<span class="punctuation token">.</span>lineCap <span class="operator token">=</span> lineCap<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">;</span>
+    ctx<span class="punctuation token">.</span><span class="function token">beginPath</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    ctx<span class="punctuation token">.</span><span class="function token">moveTo</span><span class="punctuation token">(</span><span class="number token">25</span> <span class="operator token">+</span> i <span class="operator token">*</span> <span class="number token">50</span><span class="punctuation token">,</span> <span class="number token">10</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    ctx<span class="punctuation token">.</span><span class="function token">lineTo</span><span class="punctuation token">(</span><span class="number token">25</span> <span class="operator token">+</span> i <span class="operator token">*</span> <span class="number token">50</span><span class="punctuation token">,</span> <span class="number token">140</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    ctx<span class="punctuation token">.</span><span class="function token">stroke</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>
+
+<div class="hidden">
+<pre class="brush: html line-numbers  language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>canvas<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>canvas</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+</div>
+
+<p>{{EmbedLiveSample("A_lineCap_example", "180", "180", "https://mdn.mozillademos.org/files/236/Canvas_linecap.png")}}</p>
+
+<h3 id="A_lineJoin_example" name="A_lineJoin_example">Un exemple de <code>lineJoin</code></h3>
+
+<p>La propriété <code>lineJoin</code> détermine comment deux segments (lignes, arcs ou courbes), de largeur non nulle se connectant dans une forme, sont joints ensemble (les segments de longueur nulle, dont les coordonnées de départ et de fin sont exactement les mêmes, sont ignorés).</p>
+
+<p>Il existe trois valeurs possibles pour cette propriété : <code>round</code>, <code>bevel</code> et <code>miter</code>. Par défaut, cette propriété est définie à <code>miter</code>. Notez que le paramètre <code>lineJoin</code> n'a pas d'effet si les deux segments connectés ont la même direction, parce qu'aucune zone de jointure ne sera ajoutée dans ce cas.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/237/Canvas_linejoin.png" style="float: right; height: 190px; width: 190px;"></p>
+
+<dl>
+ <dt><code>round </code><em>(rond)</em></dt>
+ <dd>Arrondit les angles des segments en ajoutant un arc de cercle centré à l'extrémité commune des segments connectés. Le rayon de ces angles arrondis est égal à la moitié de la largeur du trait.</dd>
+ <dt><code>bevel </code><em>(biseau)</em></dt>
+ <dd>Ajoute un triangle à l'extrémité commune des segments connectés.</dd>
+ <dt><code>miter </code><em>(onglet)</em></dt>
+ <dd><span id="result_box" lang="fr"><span>Les segments connectés sont reliés en prolongeant leurs bords extérieurs pour se connecter en un seul point, avec pour effet de remplir une zone supplémentaire en forme de losange.</span> <span>Ce paramètre est effectué par la propriété miterLimit qui est expliquée ci-dessous.</span></span></dd>
+</dl>
+
+<p><span id="result_box" lang="fr"><span>L'exemple ci-dessous dessine trois chemins différents, démontrant chacun de ces trois paramètres de propriété<code> lineJoin</code> ;</span> <span>la sortie est montrée ci-dessus.</span></span></p>
+
+<pre class="brush: js;highlight[6] line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> ctx <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">var</span> lineJoin <span class="operator token">=</span> <span class="punctuation token">[</span><span class="string token">'round'</span><span class="punctuation token">,</span> <span class="string token">'bevel'</span><span class="punctuation token">,</span> <span class="string token">'miter'</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span>lineWidth <span class="operator token">=</span> <span class="number token">10</span><span class="punctuation token">;</span>
+  <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token">&lt;</span> lineJoin<span class="punctuation token">.</span>length<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    ctx<span class="punctuation token">.</span>lineJoin <span class="operator token">=</span> lineJoin<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">;</span>
+    ctx<span class="punctuation token">.</span><span class="function token">beginPath</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    ctx<span class="punctuation token">.</span><span class="function token">moveTo</span><span class="punctuation token">(</span><span class="operator token">-</span><span class="number token">5</span><span class="punctuation token">,</span> <span class="number token">5</span> <span class="operator token">+</span> i <span class="operator token">*</span> <span class="number token">40</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    ctx<span class="punctuation token">.</span><span class="function token">lineTo</span><span class="punctuation token">(</span><span class="number token">35</span><span class="punctuation token">,</span> <span class="number token">45</span> <span class="operator token">+</span> i <span class="operator token">*</span> <span class="number token">40</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    ctx<span class="punctuation token">.</span><span class="function token">lineTo</span><span class="punctuation token">(</span><span class="number token">75</span><span class="punctuation token">,</span> <span class="number token">5</span> <span class="operator token">+</span> i <span class="operator token">*</span> <span class="number token">40</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    ctx<span class="punctuation token">.</span><span class="function token">lineTo</span><span class="punctuation token">(</span><span class="number token">115</span><span class="punctuation token">,</span> <span class="number token">45</span> <span class="operator token">+</span> i <span class="operator token">*</span> <span class="number token">40</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    ctx<span class="punctuation token">.</span><span class="function token">lineTo</span><span class="punctuation token">(</span><span class="number token">155</span><span class="punctuation token">,</span> <span class="number token">5</span> <span class="operator token">+</span> i <span class="operator token">*</span> <span class="number token">40</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    ctx<span class="punctuation token">.</span><span class="function token">stroke</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>
+
+<div class="hidden">
+<pre class="brush: html line-numbers  language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>canvas<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>canvas</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+</div>
+
+<p>{{EmbedLiveSample("A_lineJoin_example", "180", "180", "https://mdn.mozillademos.org/files/237/Canvas_linejoin.png")}}</p>
+
+<h3 id="A_demo_of_the_miterLimit_property" name="A_demo_of_the_miterLimit_property">Une démonstration de la propriété <code>miterLimit</code></h3>
+
+<p><span id="result_box" lang="fr"><span>Comme vous l'avez vu dans l'exemple précédent, lorsque vous joignez deux lignes avec l'option d'onglet, les bords extérieurs des deux lignes d'assemblage sont étendus jusqu'au point où ils se rencontrent.</span> <span>Pour les lignes qui sont à grands angles les unes avec les autres, ce point n'est pas loin du point de connexion interne.</span> <span>Cependant, lorsque les angles entre chaque ligne diminuent, la distance entre ces points augmente exponentiellement.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span>La propriété <code>miterLimit</code> détermine dans quelle mesure le point de connexion externe peut être placé à partir du point de connexion interne.</span> <span>Si deux lignes dépassent cette valeur, une jointure biseau est dessinée à la place.</span> <span>Notez que la longueur ajoutée maximale est le produit de la largeur de ligne mesurée dans le système de coordonnées actuel, par la valeur de cette propriété <code>miterLimit</code> (dont la valeur par défaut est 10.0 dans le HTML </span></span> {{HTMLElement("canvas")}}). <span lang="fr"><code> </code><span><code>miterLimit</code> peut être défini indépendamment de l'échelle d'affichage actuelle ou de toutes les transformations affinées de chemins : il n'influence que la forme des bords de lignes effectivement rendues.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span>Plus précisément, la limite d'onglet est le rapport maximal autorisé de la longueur d'extension (dans le canvas HTML, il est mesuré entre le coin extérieur des bords joints de la ligne et le point d'extrémité commun des segments de connexion spécifiés dans le chemin) à la moitié</span> de la <span>largeur de la ligne.</span> <span>Il peut être défini, de manière équivalente, comme le rapport maximum autorisé de la distance entre les points de jonction intérieur et extérieur des bords et la largeur totale de la ligne.</span> <span>Il est alors égal à la cosécante de la moitié de l'angle interne minimum des segments de connexion, en-dessous de laquelle aucune jointure d'onglet ne sera rendue, mais seulement une jointure en biseau :</span></span></p>
+
+<ul>
+ <li><code>miterLimit</code> = <strong>max</strong> <code>miterLength</code> / <code>lineWidth</code> = 1 / <strong>sin</strong> ( <strong>min</strong> <em>θ</em> / 2 )</li>
+ <li><span id="result_box" lang="fr"><span>La limite d'onglet par défaut de 10.0 supprimera tous les onglets pour les angles vifs inférieurs à environ 11 degrés.</span></span></li>
+ <li><span id="result_box" lang="fr"><span>Une limite d'onglet égale à √2 ≈ 1.4142136 (arrondie au-dessus) enlèvera les onglets pour tous les angles aigus, en conservant les joints d'onglet seulement pour les angles obtus ou droits.</span></span></li>
+ <li><span id="result_box" lang="fr"><span>Une limite d'onglet égale à 1.0 est valide mais désactivera tous les onglets.</span></span></li>
+ <li><span id="result_box" lang="fr"><span>Les valeurs inférieures à 1.0 sont invalides pour la limite d'onglet.</span></span></li>
+</ul>
+
+<p><span id="result_box" lang="fr"><span>Voici une petite démo dans laquelle vous pouvez définir dynamiquement <code>miterLimit</code> et voir comment cela affecte les formes sur le canevas.</span> <span>Les lignes bleues indiquent où se trouvent les points de départ et d'arrivée de chacune des lignes du motif en zig-zag.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span>Si vous spécifiez une valeur <code>miterLimit</code> inférieure à 4.2 dans cette démo, aucun des coins visibles ne se joindra avec une extension onglet, mais seulement avec un petit biseau près des lignes bleues ;</span> <span>avec une limite à onglets au-dessus de 10, la plupart des coins de cette démo devraient se combiner avec un onglet loin des lignes bleues et dont la hauteur diminue entre les coins de gauche à droite, car ils se connectent avec des angles croissants ;</span> <span>avec des valeurs intermédiaires, les coins du côté gauche ne rejoignent qu'un biseau près des lignes bleues et les coins du côté droit avec une extension à onglets (également avec une hauteur décroissante).</span></span></p>
+
+<pre class="brush: js;highlight[18] line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> ctx <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="comment token">// Éffacer canvas</span>
+  ctx<span class="punctuation token">.</span><span class="function token">clearRect</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">150</span><span class="punctuation token">,</span> <span class="number token">150</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="comment token">// Dessiner des guides</span>
+  ctx<span class="punctuation token">.</span>strokeStyle <span class="operator token">=</span> <span class="string token">'#09f'</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span>lineWidth   <span class="operator token">=</span> <span class="number token">2</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span><span class="function token">strokeRect</span><span class="punctuation token">(</span><span class="operator token">-</span><span class="number token">5</span><span class="punctuation token">,</span> <span class="number token">50</span><span class="punctuation token">,</span> <span class="number token">160</span><span class="punctuation token">,</span> <span class="number token">50</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="comment token">// Définir les styles de lignes</span>
+  ctx<span class="punctuation token">.</span>strokeStyle <span class="operator token">=</span> <span class="string token">'#000'</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span>lineWidth <span class="operator token">=</span> <span class="number token">10</span><span class="punctuation token">;</span>
+
+  <span class="comment token">// Vérifier l'entrée <em>(input)</em></span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span>document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'miterLimit'</span><span class="punctuation token">)</span><span class="punctuation token">.</span>value<span class="punctuation token">.</span><span class="function token">match</span><span class="punctuation token">(</span><span class="regex token">/\d+(\.\d+)?/</span><span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    ctx<span class="punctuation token">.</span>miterLimit <span class="operator token">=</span> <span class="function token">parseFloat</span><span class="punctuation token">(</span>document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'miterLimit'</span><span class="punctuation token">)</span><span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
+    <span class="function token">alert</span><span class="punctuation token">(</span><span class="string token">'Value must be a positive number'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+
+  <span class="comment token">// Dessiner des lignes</span>
+  ctx<span class="punctuation token">.</span><span class="function token">beginPath</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span><span class="function token">moveTo</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">100</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">for</span> <span class="punctuation token">(</span>i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token">&lt;</span> <span class="number token">24</span> <span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">var</span> dy <span class="operator token">=</span> i <span class="operator token">%</span> <span class="number token">2</span> <span class="operator token">==</span> <span class="number token">0</span> <span class="operator token">?</span> <span class="number token">25</span> <span class="punctuation token">:</span> <span class="operator token">-</span><span class="number token">25</span><span class="punctuation token">;</span>
+    ctx<span class="punctuation token">.</span><span class="function token">lineTo</span><span class="punctuation token">(</span>Math<span class="punctuation token">.</span><span class="function token">pow</span><span class="punctuation token">(</span>i<span class="punctuation token">,</span> <span class="number token">1.5</span><span class="punctuation token">)</span> <span class="operator token">*</span> <span class="number token">2</span><span class="punctuation token">,</span> <span class="number token">75</span> <span class="operator token">+</span> dy<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+  ctx<span class="punctuation token">.</span><span class="function token">stroke</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">return</span> <span class="keyword token">false</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<div class="hidden">
+<pre class="brush: html line-numbers  language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>table</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>tr</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>td</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>canvas<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>canvas</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>td</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>td</span><span class="punctuation token">&gt;</span></span>Change the <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>code</span><span class="punctuation token">&gt;</span></span>miterLimit<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>code</span><span class="punctuation token">&gt;</span></span> by entering a new value below and clicking the redraw button.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>form</span> <span class="attr-name token">onsubmit</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>return draw();<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>label</span><span class="punctuation token">&gt;</span></span>Miter limit<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</span><span class="punctuation token">&gt;</span></span>
+        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">size</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>3<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>miterLimit<span class="punctuation token">"</span></span><span class="punctuation token">/&gt;</span></span>
+        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>submit<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Redraw<span class="punctuation token">"</span></span><span class="punctuation token">/&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>form</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>td</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>tr</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>table</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js">document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'miterLimit'</span><span class="punctuation token">)</span><span class="punctuation token">.</span>value <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">.</span>miterLimit<span class="punctuation token">;</span>
+<span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+</div>
+
+<p>{{EmbedLiveSample("A_demo_of_the_miterLimit_property", "400", "180", "https://mdn.mozillademos.org/files/240/Canvas_miterlimit.png")}}</p>
+
+<h3 id="Using_line_dashes" name="Using_line_dashes">Utilisation de lignes pointillées</h3>
+
+<p><code>setLineDash</code> et <code>lineDashOffset</code> précisent le modèle de lignes. <code>setLineDash</code> accepte une liste de nombres qui spécifie les distances pour dessiner alternativement une ligne et un espace et <code>lineDashOffset</code> définit un décalage pour commencer le motif.</p>
+
+<p>Dans cet exemple, nous créons un effet de fourmis en marche. C'est une technique d'animation souvent employée dans les <span class="new"> sélections d'outils</span> des programmes graphiques. Cet effet permet à l'utilisateur de distinguer la frontière de l'image de fond de la sélection en animant la frontière. Dans une partie de ce tutoriel, vous pouvez apprendre comment faire cela et d'autres animations de base <a href="/fr/docs/Web/API/Canvas_API/Tutorial/Basic_animations" title="/fr/docs/Web/API/Canvas_API/Tutorial/Basic_animations">animation basiques.</a><a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Animations_basiques">.</a></p>
+
+<div class="hidden">
+<pre class="brush: html line-numbers  language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>canvas<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>110<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>110<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>canvas</span><span class="punctuation token">&gt;</span></span></code></pre>
+</div>
+
+<pre class="brush: js;highlight[6] line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">var</span> ctx <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> offset <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span>
+
+<span class="keyword token">function</span> <span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  ctx<span class="punctuation token">.</span><span class="function token">clearRect</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> canvas<span class="punctuation token">.</span>width<span class="punctuation token">,</span> canvas<span class="punctuation token">.</span>height<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span><span class="function token">setLineDash</span><span class="punctuation token">(</span><span class="punctuation token">[</span><span class="number token">4</span><span class="punctuation token">,</span> <span class="number token">2</span><span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span>lineDashOffset <span class="operator token">=</span> <span class="operator token">-</span>offset<span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span><span class="function token">strokeRect</span><span class="punctuation token">(</span><span class="number token">10</span><span class="punctuation token">,</span> <span class="number token">10</span><span class="punctuation token">,</span> <span class="number token">100</span><span class="punctuation token">,</span> <span class="number token">100</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">march</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  offset<span class="operator token">++</span><span class="punctuation token">;</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span>offset <span class="operator token">&gt;</span> <span class="number token">16</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    offset <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+  <span class="function token">draw</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>march<span class="punctuation token">,</span> <span class="number token">20</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="function token">march</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>{{EmbedLiveSample("Using_line_dashes", "120", "120", "https://mdn.mozillademos.org/files/9853/marching-ants.png")}}</p>
+
+<h2 id="Gradients" name="Gradients">Dégradés</h2>
+
+<p><span id="result_box" lang="fr"><span>Comme n'importe quel programme de dessin normal, nous pouvons remplir et découper des formes à l'aide de dégradés linéaires et radiaux.</span> <span>Nous créons un objet {{domxref ("CanvasGradient")}} en utilisant l'une des méthodes suivantes.</span> <span>Nous pouvons ensuite affecter cet objet aux propriétés <code>fillStyle</code> ou <code>strokeStyle</code>.</span></span></p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.createLinearGradient", "createLinearGradient(x1, y1, x2, y2)")}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Crée un objet dégradé linéaire avec un point de départ (<code>x1</code>, <code>y1</code>) et un point final (<code>x2</code>, <code>y2</code>).</span></span></dd>
+ <dt>{{domxref("CanvasRenderingContext2D.createRadialGradient", "createRadialGradient(x1, y1, r1, x2, y2, r2)")}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Crée un dégradé radial.</span> <span>Les paramètres représentent deux cercles, l'un avec son centre à (<code>x1</code>, <code>y1</code>) et un rayon <code>r1</code>, l'autre avec son centre à (<code>x2</code>, <code>y2</code>) avec un rayon <code>r2</code>.</span></span></dd>
+</dl>
+
+<p>Par exemple:</p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">var</span> lineargradient <span class="operator token">=</span> ctx<span class="punctuation token">.</span><span class="function token">createLinearGradient</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">150</span><span class="punctuation token">,</span> <span class="number token">150</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> radialgradient <span class="operator token">=</span> ctx<span class="punctuation token">.</span><span class="function token">createRadialGradient</span><span class="punctuation token">(</span><span class="number token">75</span><span class="punctuation token">,</span> <span class="number token">75</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">75</span><span class="punctuation token">,</span> <span class="number token">75</span><span class="punctuation token">,</span> <span class="number token">100</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p><span id="result_box" lang="fr"><span>Une fois que nous avons créé un objet <code>CanvasGradient</code>, nous pouvons lui assigner des couleurs en utilisant la méthode <code>addColorStop ()</code>.</span></span></p>
+
+<dl>
+ <dt>{{domxref("CanvasGradient.addColorStop", "gradient.addColorStop(position, color)")}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Crée un nouvel arrêt de couleur sur l'objet <code>gradient</code> <em>(dégradé)</em>.</span> <span>La position est un nombre entre 0.0 et 1.0 et définit la position relative de la couleur dans le dégradé ; et l'argument <code>color</code> doit être une chaîne représentant une CSS {{cssxref ("&lt;color&gt;")}}, indiquant la couleur que le dégradé</span> <span>devrait atteindre.</span></span></dd>
+</dl>
+
+<p><span id="result_box" lang="fr"><span>Vous pouvez ajouter autant d'arrêts de couleur à un dégradé que vous le souhaitez.</span> <span>Ci-dessous figure un dégradé linéaire très simple du blanc au noir.</span></span></p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">var</span> lineargradient <span class="operator token">=</span> ctx<span class="punctuation token">.</span><span class="function token">createLinearGradient</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">150</span><span class="punctuation token">,</span> <span class="number token">150</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+lineargradient<span class="punctuation token">.</span><span class="function token">addColorStop</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="string token">'white'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+lineargradient<span class="punctuation token">.</span><span class="function token">addColorStop</span><span class="punctuation token">(</span><span class="number token">1</span><span class="punctuation token">,</span> <span class="string token">'black'</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h3 id="A_createLinearGradient_example" name="A_createLinearGradient_example">Un exemple de <code>createLinearGradient</code></h3>
+
+<p><span id="result_box" lang="fr"><span>Dans cet exemple, nous allons créer deux dégradés différents.</span> <span>Comme vous pouvez le voir ici, les propriétés <code>strokeStyle</code> et <code>fillStyle</code> peuvent accepter un objet <code>canvasGradient</code> comme entrée valide.</span></span></p>
+
+<pre class="brush: js;highlight[5,11] line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> ctx <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="comment token">// Créer un dégradé</span>
+  <span class="keyword token">var</span> lingrad <span class="operator token">=</span> ctx<span class="punctuation token">.</span><span class="function token">createLinearGradient</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">150</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  lingrad<span class="punctuation token">.</span><span class="function token">addColorStop</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="string token">'#00ABEB'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  lingrad<span class="punctuation token">.</span><span class="function token">addColorStop</span><span class="punctuation token">(</span><span class="number token">0.5</span><span class="punctuation token">,</span> <span class="string token">'#fff'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  lingrad<span class="punctuation token">.</span><span class="function token">addColorStop</span><span class="punctuation token">(</span><span class="number token">0.5</span><span class="punctuation token">,</span> <span class="string token">'#26C000'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  lingrad<span class="punctuation token">.</span><span class="function token">addColorStop</span><span class="punctuation token">(</span><span class="number token">1</span><span class="punctuation token">,</span> <span class="string token">'#fff'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="keyword token">var</span> lingrad2 <span class="operator token">=</span> ctx<span class="punctuation token">.</span><span class="function token">createLinearGradient</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">50</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">95</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  lingrad2<span class="punctuation token">.</span><span class="function token">addColorStop</span><span class="punctuation token">(</span><span class="number token">0.5</span><span class="punctuation token">,</span> <span class="string token">'#000'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  lingrad2<span class="punctuation token">.</span><span class="function token">addColorStop</span><span class="punctuation token">(</span><span class="number token">1</span><span class="punctuation token">,</span> <span class="string token">'rgba(0, 0, 0, 0)'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="comment token">// assigner des dégradés aux styles "fill" et "stroke"</span>
+  ctx<span class="punctuation token">.</span>fillStyle <span class="operator token">=</span> lingrad<span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span>strokeStyle <span class="operator token">=</span> lingrad2<span class="punctuation token">;</span>
+
+  <span class="comment token">// Dessiner des formes</span>
+  ctx<span class="punctuation token">.</span><span class="function token">fillRect</span><span class="punctuation token">(</span><span class="number token">10</span><span class="punctuation token">,</span> <span class="number token">10</span><span class="punctuation token">,</span> <span class="number token">130</span><span class="punctuation token">,</span> <span class="number token">130</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span><span class="function token">strokeRect</span><span class="punctuation token">(</span><span class="number token">50</span><span class="punctuation token">,</span> <span class="number token">50</span><span class="punctuation token">,</span> <span class="number token">50</span><span class="punctuation token">,</span> <span class="number token">50</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="punctuation token">}</span></code></pre>
+
+<div class="hidden">
+<pre class="brush: html line-numbers  language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>canvas<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>canvas</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+</div>
+
+<p><span id="result_box" lang="fr"><span>Le premier est un dégradé d'arrière-plan.</span> <span>Comme vous pouvez le voir, nous avons assigné deux couleurs à la même position.</span> <span>Vous faites cela pour faire des transitions de couleurs très nettes - dans ce cas du blanc au vert.</span> <span>Normalement, peu importe dans quel ordre vous définissez l'arrêt de la couleur, mais dans ce cas particulier, la différence peut être significative.</span> <span>Si vous conservez les affectations dans l'ordre où vous voulez qu'elles apparaissent, cela ne posera aucun problème.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span>Dans le second gradient, nous n'avons pas assigné la couleur de départ (à la position 0.0) puisqu'il n'était pas strictement nécessaire car il prendra automatiquement la valeur de la prochaine couleur.</span> <span>Par conséquent, l'attribution de la couleur noire à la position 0,5 fait automatiquement passer le dégradé, du début à l'arrêt, en noir.</span></span></p>
+
+<p>{{EmbedLiveSample("A_createLinearGradient_example", "180", "180", "https://mdn.mozillademos.org/files/235/Canvas_lineargradient.png")}}</p>
+
+<h3 id="A_createRadialGradient_example" name="A_createRadialGradient_example">Un exemple de <code>createRadialGradient</code></h3>
+
+<p><span id="result_box" lang="fr"><span>Dans cet exemple, nous définirons quatre dégradés radiaux différents.</span> <span>Parce que nous avons le contrôle sur les points de départ et de fermeture du dégradé, nous pouvons obtenir des effets plus complexes que nous aurions normalement dans les dégradés radiaux "classiques" (c'est-à-dire un dégradé avec un seul point central </span><span>où le dégradé se développe vers l'extérieur dans une forme circulaire).</span></span></p>
+
+<pre class="brush: js;highlight[5,10,15,20] line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> ctx <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="comment token">// Créer un dégradé</span>
+  <span class="keyword token">var</span> radgrad <span class="operator token">=</span> ctx<span class="punctuation token">.</span><span class="function token">createRadialGradient</span><span class="punctuation token">(</span><span class="number token">45</span><span class="punctuation token">,</span> <span class="number token">45</span><span class="punctuation token">,</span> <span class="number token">10</span><span class="punctuation token">,</span> <span class="number token">52</span><span class="punctuation token">,</span> <span class="number token">50</span><span class="punctuation token">,</span> <span class="number token">30</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  radgrad<span class="punctuation token">.</span><span class="function token">addColorStop</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="string token">'#A7D30C'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  radgrad<span class="punctuation token">.</span><span class="function token">addColorStop</span><span class="punctuation token">(</span><span class="number token">0.9</span><span class="punctuation token">,</span> <span class="string token">'#019F62'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  radgrad<span class="punctuation token">.</span><span class="function token">addColorStop</span><span class="punctuation token">(</span><span class="number token">1</span><span class="punctuation token">,</span> <span class="string token">'rgba(1, 159, 98, 0)'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="keyword token">var</span> radgrad2 <span class="operator token">=</span> ctx<span class="punctuation token">.</span><span class="function token">createRadialGradient</span><span class="punctuation token">(</span><span class="number token">105</span><span class="punctuation token">,</span> <span class="number token">105</span><span class="punctuation token">,</span> <span class="number token">20</span><span class="punctuation token">,</span> <span class="number token">112</span><span class="punctuation token">,</span> <span class="number token">120</span><span class="punctuation token">,</span> <span class="number token">50</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  radgrad2<span class="punctuation token">.</span><span class="function token">addColorStop</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="string token">'#FF5F98'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  radgrad2<span class="punctuation token">.</span><span class="function token">addColorStop</span><span class="punctuation token">(</span><span class="number token">0.75</span><span class="punctuation token">,</span> <span class="string token">'#FF0188'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  radgrad2<span class="punctuation token">.</span><span class="function token">addColorStop</span><span class="punctuation token">(</span><span class="number token">1</span><span class="punctuation token">,</span> <span class="string token">'rgba(255, 1, 136, 0)'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="keyword token">var</span> radgrad3 <span class="operator token">=</span> ctx<span class="punctuation token">.</span><span class="function token">createRadialGradient</span><span class="punctuation token">(</span><span class="number token">95</span><span class="punctuation token">,</span> <span class="number token">15</span><span class="punctuation token">,</span> <span class="number token">15</span><span class="punctuation token">,</span> <span class="number token">102</span><span class="punctuation token">,</span> <span class="number token">20</span><span class="punctuation token">,</span> <span class="number token">40</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  radgrad3<span class="punctuation token">.</span><span class="function token">addColorStop</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="string token">'#00C9FF'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  radgrad3<span class="punctuation token">.</span><span class="function token">addColorStop</span><span class="punctuation token">(</span><span class="number token">0.8</span><span class="punctuation token">,</span> <span class="string token">'#00B5E2'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  radgrad3<span class="punctuation token">.</span><span class="function token">addColorStop</span><span class="punctuation token">(</span><span class="number token">1</span><span class="punctuation token">,</span> <span class="string token">'rgba(0, 201, 255, 0)'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="keyword token">var</span> radgrad4 <span class="operator token">=</span> ctx<span class="punctuation token">.</span><span class="function token">createRadialGradient</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">150</span><span class="punctuation token">,</span> <span class="number token">50</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">140</span><span class="punctuation token">,</span> <span class="number token">90</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  radgrad4<span class="punctuation token">.</span><span class="function token">addColorStop</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="string token">'#F4F201'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  radgrad4<span class="punctuation token">.</span><span class="function token">addColorStop</span><span class="punctuation token">(</span><span class="number token">0.8</span><span class="punctuation token">,</span> <span class="string token">'#E4C700'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  radgrad4<span class="punctuation token">.</span><span class="function token">addColorStop</span><span class="punctuation token">(</span><span class="number token">1</span><span class="punctuation token">,</span> <span class="string token">'rgba(228, 199, 0, 0)'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="comment token">// dessiner des formes</span>
+  ctx<span class="punctuation token">.</span>fillStyle <span class="operator token">=</span> radgrad4<span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span><span class="function token">fillRect</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">150</span><span class="punctuation token">,</span> <span class="number token">150</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span>fillStyle <span class="operator token">=</span> radgrad3<span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span><span class="function token">fillRect</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">150</span><span class="punctuation token">,</span> <span class="number token">150</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span>fillStyle <span class="operator token">=</span> radgrad2<span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span><span class="function token">fillRect</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">150</span><span class="punctuation token">,</span> <span class="number token">150</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span>fillStyle <span class="operator token">=</span> radgrad<span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span><span class="function token">fillRect</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">150</span><span class="punctuation token">,</span> <span class="number token">150</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<div class="hidden">
+<pre class="brush: html line-numbers  language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>canvas<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>canvas</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+</div>
+
+<p><span id="result_box" lang="fr"><span>Dans ce cas, nous avons légèrement décalé le point de départ du point final pour obtenir un effet 3D sphérique.</span> <span>Il est préférable d'éviter de laisser les cercles intérieurs et extérieurs se chevaucher car cela entraîne des effets étranges, difficiles à prédire.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span>Le dernier arrêt de couleur dans chacun des quatre dégradés utilise une couleur entièrement transparente.</span> <span>Si vous voulez une transition agréable de cette étape à la couleur précédente, les deux couleurs doivent être égales.</span> <span>Ce n'est pas très évident dans le code, car il utilise deux méthodes CSS différentes en démonstration, mais dans le premier dégradé <code># 019F62 = rgba (1,159,98,1)</code>.</span></span></p>
+
+<p>{{EmbedLiveSample("A_createRadialGradient_example", "180", "180", "https://mdn.mozillademos.org/files/244/Canvas_radialgradient.png")}}</p>
+
+<h2 id="Patterns" name="Patterns">Modèles</h2>
+
+<p><span id="result_box" lang="fr"><span>Dans l'un des exemples de la page précédente, nous avons utilisé une série de boucles pour créer un motif d'images.</span> <span>Il existe cependant une méthode beaucoup plus simple : la méthode <code>createPattern ()</code>.</span></span></p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.createPattern", "createPattern(image, type)")}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Crée et renvoie un nouvel objet de canvas.</span> <span><code>image</code> est un {{domxref ("CanvasImageSource")}} (c'est-à-dire un {{domxref ("HTMLImageElement")}} ; un autre élément canvas, </span></span> <code>type</code> <span lang="fr"> <span>est une chaîne indiquant comment utiliser l'image.</span></span></dd>
+</dl>
+
+<p><span id="result_box" lang="fr"><span>Le type spécifie comment utiliser l'image pour créer le motif et doit avoir l'une des valeurs de chaîne suivantes :</span></span></p>
+
+<dl>
+ <dt><code>repeat</code></dt>
+ <dd><span id="result_box" lang="fr"><span>Tapisse la zone en répètant l'image dans les deux sens vertical et horizontal.</span></span></dd>
+ <dt><code>repeat-x</code></dt>
+ <dd>Tapisse la zone en répètant l'image horizontalement mais pas verticalement.</dd>
+ <dt><code>repeat-y</code></dt>
+ <dd>Tapisse la zone en répètant l'image verticalement mais pas horizontalement.</dd>
+ <dt><code>no-repeat</code></dt>
+ <dd>Ne tapisse pas la zone avec l'image, elle est utilisée une seule fois.</dd>
+</dl>
+
+<p><span id="result_box" lang="fr"><span>Nous utilisons cette méthode pour créer un objet {{domxref ("CanvasPattern")}} qui est très similaire aux méthodes de dégradé que nous avons vu ci-dessus.</span> <span>Une fois que nous avons créé un modèle, nous pouvons l'affecter aux propriétés fillStyle ou strokeStyle.</span> <span>Par exemple :</span></span></p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">var</span> img <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Image</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+img<span class="punctuation token">.</span>src <span class="operator token">=</span> <span class="string token">'someimage.png'</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> ptrn <span class="operator token">=</span> ctx<span class="punctuation token">.</span><span class="function token">createPattern</span><span class="punctuation token">(</span>img<span class="punctuation token">,</span> <span class="string token">'repeat'</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<div class="note">
+<p><strong>Note:</strong> <span id="result_box" lang="fr"><span>Comme avec la méthode <code>drawImage ()</code>, vous devez vous assurer que l'image que vous utilisez est chargée avant d'appeler cette méthode, ou le motif pourrait être mal dessiné.</span></span></p>
+</div>
+
+<h3 id="A_createPattern_example" name="A_createPattern_example">Un exemple de <code>createPattern</code></h3>
+
+<p><span id="result_box" lang="fr"><span>Dans ce dernier exemple, nous allons créer un modèle à affecter à la propriété <code>fillStyle</code>.</span> <span>La seule chose à noter, est l'utilisation du gestionnaire <code>onload</code> de l'image.</span> <span>Cela permet de s'assurer que l'image est chargée avant d'être affectée au motif.</span></span></p>
+
+<pre class="brush: js;highlight[10] line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> ctx <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="comment token">// créer un nouvel objet image à utiliser comme modèle</span>
+  <span class="keyword token">var</span> img <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Image</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  img<span class="punctuation token">.</span>src <span class="operator token">=</span> <span class="string token">'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png'</span><span class="punctuation token">;</span>
+  img<span class="punctuation token">.</span>onload <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>
+
+    <span class="comment token">// créer le modèle</span>
+    <span class="keyword token">var</span> ptrn <span class="operator token">=</span> ctx<span class="punctuation token">.</span><span class="function token">createPattern</span><span class="punctuation token">(</span>img<span class="punctuation token">,</span> <span class="string token">'repeat'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    ctx<span class="punctuation token">.</span>fillStyle <span class="operator token">=</span> ptrn<span class="punctuation token">;</span>
+    ctx<span class="punctuation token">.</span><span class="function token">fillRect</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">150</span><span class="punctuation token">,</span> <span class="number token">150</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span></code></pre>
+
+<div class="hidden">
+<pre class="brush: html line-numbers  language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>canvas<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>canvas</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Le résultat ressemble à ceci :</p>
+</div>
+
+<p>{{EmbedLiveSample("A_createPattern_example", "180", "180", "https://mdn.mozillademos.org/files/222/Canvas_createpattern.png")}}</p>
+
+<h2 id="Ombres">Ombres</h2>
+
+<p><span id="result_box" lang="fr"><span>L'utilisation des ombres ne comporte que quatre propriétés :</span></span></p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX = float")}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Indique la distance horizontale sur laquelle l'ombre doit s'étendre à partir de l'objet.</span> <span>Cette valeur n'est pas affectée par la matrice de transformation.</span> <span>La valeur par défaut est 0.</span></span></dd>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY = float")}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Indique la distance verticale sur laquelle l'ombre doit s'étendre à partir de l'objet.</span> <span>Cette valeur n'est pas affectée par la matrice de transformation.</span> <span>La valeur par défaut est 0.</span></span></dd>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur = float")}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Indique la taille de l'effet de floutage ;</span> <span>cette valeur ne correspond pas à un nombre de pixels et n'est pas affectée par la matrice de transformation actuelle.</span> <span>La valeur par défaut est 0.</span></span></dd>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor = color")}}</dt>
+ <dd>Une valeur de couleur CSS standard indiquant la couleur de l'effet d'ombre ; par défaut, il est entièrement noir transparent.</dd>
+</dl>
+
+<p><span id="result_box" lang="fr"><span>Les propriétés <code>shadowOffsetX</code> et <code>shadowOffsetY</code> indiquent sur quelle distance l'ombre doit s'étendre à partir de l'objet dans les directions X et Y;</span> <span>ces valeurs ne sont pas affectées par la matrice de transformation actuelle.</span> <span>Utilisez des valeurs négatives pour faire en sorte que l'ombre s'étende vers le haut ou vers la gauche et des valeurs positives pour que l'ombre s'étende vers le bas ou vers la droite.</span> <span>La valeur par défaut est 0 pour les 2 propriétés.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span>La propriété <code>shadowBlur</code> indique la taille de l'effet de flou ;</span> <span>cette valeur ne correspond pas à un nombre de pixels et n'est pas affectée par la matrice de transformation actuelle.</span> <span>La valeur par défaut est 0.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span>La propriété <code>shadowColor</code> est une valeur de couleur CSS standard indiquant la couleur de l'effet d'ombre ;</span> <span>par défaut, il est entièrement en noir transparent.</span></span></p>
+
+<div class="note">
+<p><strong>Note :</strong> <span id="result_box" lang="fr"><span>Les ombres ne sont dessinées que pour les <a href="https://developer.mozilla.org/fr/docs/Web/API/Canvas_API/Tutorial/Compositing">opérations de composition</a> <code>source-over</code>.</span></span></p>
+</div>
+
+<h3 id="A_shadowed_text_example" name="A_shadowed_text_example">Un exemple de texte ombré</h3>
+
+<p><span id="result_box" lang="fr"><span>Cet exemple dessine une chaîne de texte avec un effet d'ombrage.</span></span></p>
+
+<pre class="brush: js;highlight[4,5,6,7] line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> ctx <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  ctx<span class="punctuation token">.</span>shadowOffsetX <span class="operator token">=</span> <span class="number token">2</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span>shadowOffsetY <span class="operator token">=</span> <span class="number token">2</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span>shadowBlur <span class="operator token">=</span> <span class="number token">2</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span>shadowColor <span class="operator token">=</span> <span class="string token">'rgba(0, 0, 0, 0.5)'</span><span class="punctuation token">;</span>
+
+  ctx<span class="punctuation token">.</span>font <span class="operator token">=</span> <span class="string token">'20px Times New Roman'</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span>fillStyle <span class="operator token">=</span> <span class="string token">'Black'</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span><span class="function token">fillText</span><span class="punctuation token">(</span><span class="string token">'Sample String'</span><span class="punctuation token">,</span> <span class="number token">5</span><span class="punctuation token">,</span> <span class="number token">30</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<div class="hidden">
+<pre class="brush: html line-numbers  language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>canvas<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>80<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>canvas</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+</div>
+
+<p>{{EmbedLiveSample("A_shadowed_text_example", "180", "100", "https://mdn.mozillademos.org/files/2505/shadowed-string.png")}}</p>
+
+<p><span id="result_box" lang="fr"><span>Nous allons regarder la propriété de la </span></span> <code>font</code> <em>(police de caratères)</em><span lang="fr"><span> et la méthode <code>fillText</code> dans le chapitre suivant sur le <a href="https://developer.mozilla.org/fr/docs/Dessin_de_texte_avec_canvas">dessin de texte</a>.</span></span></p>
+
+<h2 id="Canvas_fill_rules" name="Canvas_fill_rules"><span class="short_text" id="result_box" lang="fr"><span>Règles de remplissage Canvas</span></span></h2>
+
+<p><span id="result_box" lang="fr"><span>Lors de l'utilisation de <code>fill</code> (ou {{domxref ("CanvasRenderingContext2D.clip", "clip")}} et </span></span> {{domxref("CanvasRenderingContext2D.isPointInPath", "isPointinPath")}}) , <span lang="fr"> <span>déterminez si un point est à l'intérieur ou à l'extérieur d'un chemin et ainsi, s'il est rempli ou non.</span> <span>Ceci est utile lorsqu'un chemin en croise  un autre ou est imbriqué.</span></span><br>
+ <br>
+ Deux valeurs sont possibles :</p>
+
+<ul>
+ <li><code><strong>"nonzero</strong></code>": la <a class="external external-icon" href="http://en.wikipedia.org/wiki/Nonzero-rule">règle non-zero</a>, qui est la règle par défaut.</li>
+ <li><code><strong>"evenodd"</strong></code>: La <a class="external external-icon" href="http://en.wikipedia.org/wiki/Even%E2%80%93odd_rule">règle even-odd</a>.</li>
+</ul>
+
+<p>Dans cet exemple, nous utilisons la règle <code>evenodd</code> .</p>
+
+<pre class="brush: js;highlight[6] line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> ctx <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span><span class="function token">beginPath</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span><span class="function token">arc</span><span class="punctuation token">(</span><span class="number token">50</span><span class="punctuation token">,</span> <span class="number token">50</span><span class="punctuation token">,</span> <span class="number token">30</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> Math<span class="punctuation token">.</span>PI <span class="operator token">*</span> <span class="number token">2</span><span class="punctuation token">,</span> <span class="keyword token">true</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span><span class="function token">arc</span><span class="punctuation token">(</span><span class="number token">50</span><span class="punctuation token">,</span> <span class="number token">50</span><span class="punctuation token">,</span> <span class="number token">15</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> Math<span class="punctuation token">.</span>PI <span class="operator token">*</span> <span class="number token">2</span><span class="punctuation token">,</span> <span class="keyword token">true</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span><span class="function token">fill</span><span class="punctuation token">(</span><span class="string token">'evenodd'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<div class="hidden">
+<pre class="brush: html line-numbers  language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>canvas<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>canvas</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+</div>
+
+<p>{{EmbedLiveSample("Canvas_fill_rules", "110", "110", "https://mdn.mozillademos.org/files/9855/fill-rule.png")}}</p>
+
+<p>{{PreviousNext("Tutoriel_canvas/Formes_géométriques", "Dessin_de_texte_avec_canvas")}}</p>
diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/animations_basiques/index.html b/files/fr/web/api/canvas_api/tutoriel_canvas/animations_basiques/index.html
new file mode 100644
index 0000000000..f44929e8be
--- /dev/null
+++ b/files/fr/web/api/canvas_api/tutoriel_canvas/animations_basiques/index.html
@@ -0,0 +1,339 @@
+---
+title: Animations basiques
+slug: Web/API/Canvas_API/Tutoriel_canvas/Animations_basiques
+tags:
+  - Canvas
+  - Graphiques
+  - HTML
+  - HTML5
+  - Intermédiaire
+  - Tutoriel
+translation_of: Web/API/Canvas_API/Tutorial/Basic_animations
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Tutoriel_canvas/Advanced_animations")}}</div>
+
+<div class="summary">
+<p>Avec l'utilisation en Javascript du composant {{HTMLElement("canvas")}}, il est très simple de créer des animations (interactives). Ce chapitre décrit comment créer quelques animations basiques.</p>
+</div>
+
+<p>La plus grosse limitation est sans doute qu'une fois qu'une forme est dessinée, elle reste telle quelle. Si on a besoin de la déplacer, il faut la redessiner avec ce qui était dessiné avant. Cela peut prendre beaucoup de temps de redessiner des images complexes et les performances dépendront beaucoup de la vitesse de l'ordinateur qui exécute cet affichage.</p>
+
+<h2 id="Basic_animation_steps" name="Basic_animation_steps">Les étapes d'une animation basique</h2>
+
+<p>Voici les étapes à suivre à chaque image dessinée (frame) :</p>
+
+<ol>
+ <li><strong>Effacer le canevas</strong><br>
+  À moins que les formes que vous voulez dessiner remplissent complètement le canevas (par exemple une image en arrière-plan), vous devrez effacer toutes les formes qui ont été dessinées précédemment. La manière la plus simple de le faire est d'utiliser la méthode {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}.</li>
+ <li><strong>Enregistrer l'état du canevas</strong><br>
+  Si vous changez des configurations qui affectent l'état du canevas (comme le style, les transformations, etc.), et vous voulez vous assurer que c'est l'état original qui est utilisé chaque fois que le canevas est redessiné, alors vous devez enregistrer l'état original.</li>
+ <li><strong>Dessiner les formes animées</strong><br>
+  Vous effectuez toutes les opérations pour afficher l'image.</li>
+ <li><strong>Restaurer l'état du canevas</strong><br>
+  Si l'état du canevas a été sauvegardé, vous  restaurez cet état avant le prochain rendu.</li>
+</ol>
+
+<h2 id="Controlling_an_animation" name="Controlling_an_animation">Contrôle d'une animation</h2>
+
+<p>Les formes sont dessinées en utilisant soit les méthodes du canevas directement soit en appelant des fonctions personnalisées. Dans des conditions normales, on ne voit le résultat des opérations sur le canevas que quand le script a terminé son exécution. Cela signifie qu'il n'est pas possible de créer une animation avec une boucle <code>for</code>.</p>
+
+<p>Il nous faut donc un moyen d'exécuter nos fonctions de dessin sur une période de temps. Il existe à ce jour trois manières de le faire.</p>
+
+<h3 id="Mises_à_jour_planifiées">Mises à jour planifiées</h3>
+
+<p>Les fonctions {{domxref("window.setInterval()")}}, {{domxref("window.setTimeout()")}}, et {{domxref("window.requestAnimationFrame()")}} peuvent être utilisées :</p>
+
+<dl>
+ <dt>{{domxref("WindowTimers.setInterval", "setInterval(function, delay)")}}</dt>
+ <dd>Lance la fonction définie par <code>function</code> chaque <code>delay</code> <em>(délai)</em> millisecondes.</dd>
+ <dt>{{domxref("WindowTimers.setTimeout", "setTimeout(function, delay)")}}</dt>
+ <dd>Exécute la fonction définie par <code>function</code> dans <code>delay</code> millisecondes.</dd>
+ <dt>{{domxref("Window.requestAnimationFrame()", "requestAnimationFrame(callback)")}}</dt>
+ <dd>Dit au navigateur qu'on veut afficher une animation et lui demande d'appeler la fonction <code>callback</code> pour mettre à jour cette animation avant de dessiner la prochaine image.</dd>
+</dl>
+
+<p>Si vous n'avez pas besoin d'interaction utilisateur, vous pouvez utiliser la fonction <code>setInterval()</code>, elle va exécuter périodiquement votre code.</p>
+
+<p>Si vous voulez faire un jeu, et utiliser les événements du clavier et de la souris pour contrôler l'animation, vous pouvez utiliser <code>setTimeout()</code>. En utilisant des {{domxref("EventListener")}}, on peut récupèrer chaque interaction et d'exécuter nos fonctions d'animation.</p>
+
+<p>Dans les exemples suivants, nous utiliserons {{domxref("window.requestAnimationFrame()")}} pour contrôler les animations. Cette technique est plus fluide et plus efficace, elle appelle les opérations de rendu quand le système est prêt à dessiner l'image. Dans des conditions idéales, la fonction est alors lancée 60 fois par seconde, mais la fréquence sera réduite si l'animation se passe dans un onglet non visible.</p>
+
+<div class="note">
+<p>Pour plus d'informations sur la boucle d'animation, plus spécialement pour les jeux, rendez-vous sur l'article <a href="https://developer.mozilla.org/fr/docs/Jeux/Anatomie">L'anatomie d'un jeu vidéo</a> dans notre section <a href="https://developer.mozilla.org/fr/docs/Jeux">Développement de jeux vidéo</a>.</p>
+</div>
+
+<h2 id="Un_système_terrestre_animé">Un système terrestre animé</h2>
+
+<p>Cette exemple anime un petit modèle de notre système terrestre.</p>
+
+<pre class="brush: js notranslate">var sun = new Image();
+var moon = new Image();
+var earth = new Image();
+function init(){
+  sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png';
+  moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png';
+  earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png';
+  window.requestAnimationFrame(draw);
+}
+
+function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.globalCompositeOperation = 'destination-over';
+  ctx.clearRect(0,0,300,300); // effacer le canvas
+
+  ctx.fillStyle = 'rgba(0,0,0,0.4)';
+  ctx.strokeStyle = 'rgba(0,153,255,0.4)';
+  ctx.save();
+  ctx.translate(150,150);
+
+  // Terre
+  var time = new Date();
+  ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() );
+  ctx.translate(105,0);
+  ctx.fillRect(0,-12,50,24); // Ombre
+  ctx.drawImage(earth,-12,-12);
+
+  // Lune
+  ctx.save();
+  ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() );
+  ctx.translate(0,28.5);
+  ctx.drawImage(moon,-3.5,-3.5);
+  ctx.restore();
+
+  ctx.restore();
+
+  ctx.beginPath();
+  ctx.arc(150,150,105,0,Math.PI*2,false); // Orbite terrestre
+  ctx.stroke();
+
+  ctx.drawImage(sun,0,0,300,300);
+
+  window.requestAnimationFrame(draw);
+}
+
+init();
+</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="300" height="300"&gt;&lt;/canvas&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("Un_système_terrestre_animé", "310", "310", "https://mdn.mozillademos.org/files/202/Canvas_animation1.png")}}</p>
+
+<h2 id="Une_horloge_animée">Une horloge animée</h2>
+
+<p>Cette exemple dessine une horloge animée qui affiche l'heure actuelle.</p>
+
+<pre class="brush: js notranslate">function clock(){
+  var now = new Date();
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.save();
+  ctx.clearRect(0,0,150,150);
+  ctx.translate(75,75);
+  ctx.scale(0.4,0.4);
+  ctx.rotate(-Math.PI/2);
+  ctx.strokeStyle = "black";
+  ctx.fillStyle = "white";
+  ctx.lineWidth = 8;
+  ctx.lineCap = "round";
+
+  // Marquage des heures
+  ctx.save();
+  for (var i=0;i&lt;12;i++){
+    ctx.beginPath();
+    ctx.rotate(Math.PI/6);
+    ctx.moveTo(100,0);
+    ctx.lineTo(120,0);
+    ctx.stroke();
+  }
+  ctx.restore();
+
+  // Marquage des minutes
+  ctx.save();
+  ctx.lineWidth = 5;
+  for (i=0;i&lt;60;i++){
+    if (i%5!=0) {
+      ctx.beginPath();
+      ctx.moveTo(117,0);
+      ctx.lineTo(120,0);
+      ctx.stroke();
+    }
+    ctx.rotate(Math.PI/30);
+  }
+  ctx.restore();
+
+  var sec = now.getSeconds();
+  var min = now.getMinutes();
+  var hr  = now.getHours();
+  hr = hr&gt;=12 ? hr-12 : hr;
+
+  ctx.fillStyle = "black";
+
+  // Aiguille des heures
+  ctx.save();
+  ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )
+  ctx.lineWidth = 14;
+  ctx.beginPath();
+  ctx.moveTo(-20,0);
+  ctx.lineTo(80,0);
+  ctx.stroke();
+  ctx.restore();
+
+  // Aiguille des minutes
+  ctx.save();
+  ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )
+  ctx.lineWidth = 10;
+  ctx.beginPath();
+  ctx.moveTo(-28,0);
+  ctx.lineTo(112,0);
+  ctx.stroke();
+  ctx.restore();
+
+  // Aiguille des secondes
+  ctx.save();
+  ctx.rotate(sec * Math.PI/30);
+  ctx.strokeStyle = "#D40000";
+  ctx.fillStyle = "#D40000";
+  ctx.lineWidth = 6;
+  ctx.beginPath();
+  ctx.moveTo(-30,0);
+  ctx.lineTo(83,0);
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.arc(0,0,10,0,Math.PI*2,true);
+  ctx.fill();
+  ctx.beginPath();
+  ctx.arc(95,0,10,0,Math.PI*2,true);
+  ctx.stroke();
+  ctx.fillStyle = "rgba(0,0,0,0)";
+  ctx.arc(0,0,3,0,Math.PI*2,true);
+  ctx.fill();
+  ctx.restore();
+
+  ctx.beginPath();
+  ctx.lineWidth = 14;
+  ctx.strokeStyle = '#325FA2';
+  ctx.arc(0,0,142,0,Math.PI*2,true);
+  ctx.stroke();
+
+  ctx.restore();
+
+  window.requestAnimationFrame(clock);
+}
+
+window.requestAnimationFrame(clock);</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("Une_horloge_animée", "180", "180", "https://mdn.mozillademos.org/files/203/Canvas_animation2.png")}}</p>
+
+<h2 id="Un_panorama_défilant_en_boucle">Un panorama défilant en boucle</h2>
+
+<p>Dans cet exemple, un panorama défile de la gauche vers la droite et recommence. Nous utilisons une <a href="http://commons.wikimedia.org/wiki/File:Capitan_Meadows,_Yosemite_National_Park.jpg" title="http://commons.wikimedia.org/wiki/File:Capitan_Meadows,_Yosemite_National_Park.jpg">image du parc Yosemite National</a> récupérée sur Wikimedia, vous pouvez utiliser une autre image de votre choix qui est plus grande que le canevas.</p>
+
+<pre class="brush: js notranslate">var img = new Image();
+
+// Variables utilisateur - les personnaliser pour changer l'image qui défile, ses
+// directions, et la vitesse.
+
+img.src = 'https://mdn.mozillademos.org/files/4553/Capitan_Meadows,_Yosemite_National_Park.jpg';
+var CanvasXSize = 800;
+var CanvasYSize = 200;
+var speed = 30; // plus elle est basse, plus c'est rapide
+var scale = 1.05;
+var y = -4.5; // décalage vertical
+
+// Programme principal
+
+var dx = 0.75;
+var imgW;
+var imgH;
+var x = 0;
+var clearX;
+var clearY;
+var ctx;
+
+img.onload = function() {
+    imgW = img.width * scale;
+    imgH = img.height * scale;
+
+    if (imgW &gt; CanvasXSize) {
+        // image plus grande que le canvas
+        x = CanvasXSize - imgW;
+    }
+    if (imgW &gt; CanvasXSize) {
+        // largeur de l'image plus grande que le canvas
+        clearX = imgW;
+    } else {
+        clearX = CanvasXSize;
+    }
+    if (imgH &gt; CanvasYSize) {
+        // hauteur de l'image plus grande que le canvas
+        clearY = imgH;
+    } else {
+        clearY = CanvasYSize;
+    }
+
+    // récupérer le contexte du canvas
+    ctx = document.getElementById('canvas').getContext('2d');
+
+    // définir le taux de rafraichissement
+    return setInterval(draw, speed);
+}
+
+function draw() {
+    ctx.clearRect(0, 0, clearX, clearY); // clear the canvas
+
+    // si image est &lt;= taille du canvas
+    if (imgW &lt;= CanvasXSize) {
+        // réinitialise, repart du début
+        if (x &gt; CanvasXSize) {
+            x = -imgW + x;
+        }
+        // dessine image1 supplémentaire
+        if (x &gt; 0) {
+            ctx.drawImage(img, -imgW + x, y, imgW, imgH);
+        }
+        // dessine image2 supplémentaire
+        if (x - imgW &gt; 0) {
+            ctx.drawImage(img, -imgW * 2 + x, y, imgW, imgH);
+        }
+    }
+
+    // image est &gt; taille du canvas
+    else {
+        // réinitialise, repeart du début
+        if (x &gt; (CanvasXSize)) {
+            x = CanvasXSize - imgW;
+        }
+        // dessine image supplémentaire
+        if (x &gt; (CanvasXSize-imgW)) {
+            ctx.drawImage(img, x - imgW + 1, y, imgW, imgH);
+        }
+    }
+    // dessine image
+    ctx.drawImage(img, x, y,imgW, imgH);
+    // quantité à déplacer
+    x += dx;
+}
+</pre>
+
+<p>En dessous, vous trouvez l'élément {{HTMLElement("canvas")}} avec l'image qui défile. Notez que les dimensions de largeur et de hauteur spécifiées doivent correspondre aux valeurs des variables <code>CanvasXZSize</code> et <code>CanvasYSize</code> dans le code JavaScript.</p>
+
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="800" height="200"&gt;&lt;/canvas&gt;</pre>
+
+<p>{{EmbedLiveSample("Un_panorama_défilant_en_boucle", "830", "230")}}</p>
+
+<h2 id="Other_examples" name="Other_examples">Autres exemples</h2>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/fr/docs/Un_raycaster_basique_avec_canvas" title="/en-US/docs/Web/Guide/HTML/A_basic_ray-caster">Un raycaster basique avec canvas</a></dt>
+ <dd>Un bon exemple d'animation contrôlée par le clavier.</dd>
+ <dt><a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Advanced_animations">Animations avancées</a></dt>
+ <dd>Nous nous attarderons sur quelques techniques d'animation et de gestion de physique avancées dans le prochain châpitre.</dd>
+</dl>
+
+<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Tutoriel_canvas/Advanced_animations")}}</p>
diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/composition/example/index.html b/files/fr/web/api/canvas_api/tutoriel_canvas/composition/example/index.html
new file mode 100644
index 0000000000..8fbb3ec79c
--- /dev/null
+++ b/files/fr/web/api/canvas_api/tutoriel_canvas/composition/example/index.html
@@ -0,0 +1,295 @@
+---
+title: Exemple de composition
+slug: Web/API/Canvas_API/Tutoriel_canvas/Composition/Example
+tags:
+  - Canvas
+  - Exemple
+  - Graphisme
+  - HTML
+  - HTML5
+  - Tutoriel
+translation_of: Web/API/Canvas_API/Tutorial/Compositing/Example
+---
+<div>{{CanvasSidebar}}</div>
+
+<p>Cet exemple illustre un certain nombre d'<a href="/fr/docs/Web/API/CanvasRenderingContext2D.globalCompositeOperation">opérations de composition</a>. Le résultat donne ceci:</p>
+
+<p>{{EmbedLiveSample("Exemple_de_composition", "100%", 7250)}}</p>
+
+<h2 id="Exemple_de_composition">Exemple de composition</h2>
+
+<p>Ce code configure les valeurs globales utilisées par le reste du programme.</p>
+
+<pre class="brush: js notranslate">var canvas1 = document.createElement("canvas");
+var canvas2 = document.createElement("canvas");
+var gco = [ 'source-over','source-in','source-out','source-atop',
+            'destination-over','destination-in','destination-out','destination-atop',
+            'lighter', 'copy','xor', 'multiply', 'screen', 'overlay', 'darken',
+            'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light',
+            'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity'
+          ].reverse();
+var gcoText = [
+"C'est la configuration par défaut, elle dessine les nouvelles formes au-dessus du contenu existant sur le canvas.",
+"La nouvelle forme est dessinée uniquement là où il y a déjà du contenu sur le canvas. Tout le reste est rendu transparent.",
+"La nouvelle forme est dessinée uniquement là où il n'y a pas de contenu sur le canvas.",
+"La nouvelle forme est dessinée uniquement là où il y a déjà du contenu sur le canvas. Elle s'ajoute au contenu existant.",
+"Les nouvelles formes sont dessinées derrière le contenu existant du canvas.",
+"Le contenu existant du canvas est conservé là où il chevauche la nouvelle forme. Tout le reste est rendu transparent.",
+"Le contenu existant du canvas est conservé là où il ne chevauche pas la nouvelle forme.",
+"Le contenu existant du canvas est conservé là où il chevauche la nouvelle forme. La nouvelle forme est dessinée derrière le contenu existant.",
+"La nouvelle forme est ajoutée en additionnant ses couleurs à celles du contenu existant.",
+"Seule la nouvelle forme est affichée.",
+"Les formes sont rendues transparentes lorsqu'elles se chevauchent.",
+"Les pixels de la nouvelle forme sont multipliés avec les pixels du contenu existant. Le résultat est une image plus sombre.",
+"Les pixels sont inversés, multipliés, puis inversés de nouveau. Le résultat est une image plus claire (l'inverse de multiply)",
+"Une combinaison de multiply et screen. Les parties sombres du contenu existant deviennent plus sombres, et les parties claires deviennent plus claires.",
+"Retiens les pixels les plus sombres entre les deux.",
+"Retiens les pixels les plus clairs entre les deux.",
+"Divise le layer inférieur par le layer supérieur inversé.",
+"Divise le layer inférieur inversé par le layer supérieur, puis inverse le résultat.",
+"Une combinaison de multiply et screen (comme overlay), mais avec le layer supérieur et inférieur inversés.",
+"Assombrit ou éclaircit les couleurs, en fonction de la couleur de la forme ajoutée.",
+"Soustrait le layer inférieur au layer supérieur ou inversemment pour toujours obtenir une valeur positive.",
+"Comme difference, mais avec un contraste moins élevé.",
+"Préserve la luminance et saturation du layer inférieur, et utilise la teinte du layer supérieur.",
+"Préserve la luminance et teinte du layer inférieur, et utilise la saturation du layer supérieur.",
+"Préserve la luminance du layer inférieur, et utilise la teinte et saturation du layer supérieur.",
+"Préserve la teinte et saturation du layer inférieur, et utilise la luminance du layer supérieur."
+].reverse();
+var width = 320;
+var height = 340;
+</pre>
+
+<h3 id="Programme_principal">Programme principal</h3>
+
+<p>Quand la page se charge, le code suivant s'exécute pour configurer et exécuter l'exemple:</p>
+
+<pre class="brush: js notranslate">window.onload = function() {
+    // lum en sRGB
+    var lum = {
+        r: 0.33,
+        g: 0.33,
+        b: 0.33
+    };
+    // redimensionne le canvas
+    canvas1.width = width;
+    canvas1.height = height;
+    canvas2.width = width;
+    canvas2.height = height;
+    lightMix()
+    colorSphere();
+    runComposite();
+    return;
+};
+</pre>
+
+<p>Et dans le code suivant, <code>runComposite()</code> gère la majeure partie du travail, en s'appuyant sur un certain nombre de fonctions utilitaires pour faire les parties difficiles.</p>
+
+<pre class="brush: js notranslate">function createCanvas() {
+    var canvas = document.createElement("canvas");
+    canvas.style.background = "url("+op_8x8.data+")";
+    canvas.style.border = "1px solid #000";
+    canvas.style.margin = "5px";
+    canvas.width = width/2;
+    canvas.height = height/2;
+    return canvas;
+}
+
+function runComposite() {
+    var dl = document.createElement("dl");
+    document.body.appendChild(dl);
+    while(gco.length) {
+        var pop = gco.pop();
+        var dt = document.createElement("dt");
+        dt.textContent = pop;
+        dl.appendChild(dt);
+        var dd = document.createElement("dd");
+        var p = document.createElement("p");
+        p.textContent = gcoText.pop();
+        dd.appendChild(p);
+
+        var canvasToDrawOn = createCanvas();
+        var canvasToDrawFrom = createCanvas();
+        var canvasToDrawResult = createCanvas();
+
+        var ctx = canvasToDrawResult.getContext('2d');
+        ctx.clearRect(0, 0, width, height)
+        ctx.save();
+        ctx.drawImage(canvas1, 0, 0, width/2, height/2);
+        ctx.globalCompositeOperation = pop;
+        ctx.drawImage(canvas2, 0, 0, width/2, height/2);
+        ctx.globalCompositeOperation = "source-over";
+        ctx.fillStyle = "rgba(0,0,0,0.8)";
+        ctx.fillRect(0, height/2 - 20, width/2, 20);
+        ctx.fillStyle = "#FFF";
+        ctx.font = "14px arial";
+        ctx.fillText(pop, 5, height/2 - 5);
+        ctx.restore();
+
+        var ctx = canvasToDrawOn.getContext('2d');
+        ctx.clearRect(0, 0, width, height)
+        ctx.save();
+        ctx.drawImage(canvas1, 0, 0, width/2, height/2);
+        ctx.fillStyle = "rgba(0,0,0,0.8)";
+        ctx.fillRect(0, height/2 - 20, width/2, 20);
+        ctx.fillStyle = "#FFF";
+        ctx.font = "14px arial";
+        ctx.fillText('existing content', 5, height/2 - 5);
+        ctx.restore();
+
+        var ctx = canvasToDrawFrom.getContext('2d');
+        ctx.clearRect(0, 0, width, height)
+        ctx.save();
+        ctx.drawImage(canvas2, 0, 0, width/2, height/2);
+        ctx.fillStyle = "rgba(0,0,0,0.8)";
+        ctx.fillRect(0, height/2 - 20, width/2, 20);
+        ctx.fillStyle = "#FFF";
+        ctx.font = "14px arial";
+        ctx.fillText('new content', 5, height/2 - 5);
+        ctx.restore();
+
+        dd.appendChild(canvasToDrawOn);
+        dd.appendChild(canvasToDrawFrom);
+        dd.appendChild(canvasToDrawResult);
+
+        dl.appendChild(dd);
+    }
+};
+</pre>
+
+<h3 id="Fonctions_utilitaires">Fonctions utilitaires</h3>
+
+<p>Notre programme repose sur un certain nombbre de fonctions utilitaires:</p>
+
+<pre class="brush: js notranslate">var lightMix = function() {
+    var ctx = canvas2.getContext("2d");
+    ctx.save();
+    ctx.globalCompositeOperation = "lighter";
+    ctx.beginPath();
+    ctx.fillStyle = "rgba(255,0,0,1)";
+    ctx.arc(100, 200, 100, Math.PI*2, 0, false);
+    ctx.fill()
+    ctx.beginPath();
+    ctx.fillStyle = "rgba(0,0,255,1)";
+    ctx.arc(220, 200, 100, Math.PI*2, 0, false);
+    ctx.fill()
+    ctx.beginPath();
+    ctx.fillStyle = "rgba(0,255,0,1)";
+    ctx.arc(160, 100, 100, Math.PI*2, 0, false);
+    ctx.fill();
+    ctx.restore();
+    ctx.beginPath();
+    ctx.fillStyle = "#f00";
+    ctx.fillRect(0,0,30,30)
+    ctx.fill();
+};
+</pre>
+
+<pre class="brush: js notranslate">var colorSphere = function(element) {
+    var ctx = canvas1.getContext("2d");
+    var width = 360;
+    var halfWidth = width / 2;
+    var rotate = (1 / 360) * Math.PI * 2; // per degree
+    var offset = 0; // scrollbar offset
+    var oleft = -20;
+    var otop = -20;
+    for (var n = 0; n &lt;= 359; n ++) {
+        var gradient = ctx.createLinearGradient(oleft + halfWidth, otop, oleft + halfWidth, otop + halfWidth);
+        var color = Color.HSV_RGB({ H: (n + 300) % 360, S: 100, V: 100 });
+        gradient.addColorStop(0, "rgba(0,0,0,0)");
+        gradient.addColorStop(0.7, "rgba("+color.R+","+color.G+","+color.B+",1)");
+        gradient.addColorStop(1, "rgba(255,255,255,1)");
+        ctx.beginPath();
+        ctx.moveTo(oleft + halfWidth, otop);
+        ctx.lineTo(oleft + halfWidth, otop + halfWidth);
+        ctx.lineTo(oleft + halfWidth + 6, otop);
+        ctx.fillStyle = gradient;
+        ctx.fill();
+        ctx.translate(oleft + halfWidth, otop + halfWidth);
+        ctx.rotate(rotate);
+        ctx.translate(-(oleft + halfWidth), -(otop + halfWidth));
+    }
+    ctx.beginPath();
+    ctx.fillStyle = "#00f";
+    ctx.fillRect(15,15,30,30)
+    ctx.fill();
+    return ctx.canvas;
+};
+</pre>
+
+<pre class="brush: js notranslate">// HSV (1978) = H: Hue / S: Saturation / V: Value
+Color = {};
+Color.HSV_RGB = function (o) {
+    var H = o.H / 360,
+        S = o.S / 100,
+        V = o.V / 100,
+        R, G, B;
+    var A, B, C, D;
+    if (S == 0) {
+        R = G = B = Math.round(V * 255);
+    } else {
+        if (H &gt;= 1) H = 0;
+        H = 6 * H;
+        D = H - Math.floor(H);
+        A = Math.round(255 * V * (1 - S));
+        B = Math.round(255 * V * (1 - (S * D)));
+        C = Math.round(255 * V * (1 - (S * (1 - D))));
+        V = Math.round(255 * V);
+        switch (Math.floor(H)) {
+            case 0:
+                R = V;
+                G = C;
+                B = A;
+                break;
+            case 1:
+                R = B;
+                G = V;
+                B = A;
+                break;
+            case 2:
+                R = A;
+                G = V;
+                B = C;
+                break;
+            case 3:
+                R = A;
+                G = B;
+                B = V;
+                break;
+            case 4:
+                R = C;
+                G = A;
+                B = V;
+                break;
+            case 5:
+                R = V;
+                G = A;
+                B = B;
+                break;
+        }
+    }
+    return {
+        R: R,
+        G: G,
+        B: B
+    };
+};
+
+var createInterlace = function (size, color1, color2) {
+    var proto = document.createElement("canvas").getContext("2d");
+    proto.canvas.width = size * 2;
+    proto.canvas.height = size * 2;
+    proto.fillStyle = color1; // top-left
+    proto.fillRect(0, 0, size, size);
+    proto.fillStyle = color2; // top-right
+    proto.fillRect(size, 0, size, size);
+    proto.fillStyle = color2; // bottom-left
+    proto.fillRect(0, size, size, size);
+    proto.fillStyle = color1; // bottom-right
+    proto.fillRect(size, size, size, size);
+    var pattern = proto.createPattern(proto.canvas, "repeat");
+    pattern.data = proto.canvas.toDataURL();
+    return pattern;
+};
+
+var op_8x8 = createInterlace(8, "#FFF", "#eee");</pre>
diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/composition/index.html b/files/fr/web/api/canvas_api/tutoriel_canvas/composition/index.html
new file mode 100644
index 0000000000..cc646762dd
--- /dev/null
+++ b/files/fr/web/api/canvas_api/tutoriel_canvas/composition/index.html
@@ -0,0 +1,110 @@
+---
+title: Composition et découpe
+slug: Web/API/Canvas_API/Tutoriel_canvas/Composition
+tags:
+  - Canvas
+  - Composition
+  - dessin
+translation_of: Web/API/Canvas_API/Tutorial/Compositing
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}}</div>
+
+<div class="summary">
+<p>Dans tous nos <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations">exemples précédents</a>, les formes étaient toutes dessinées les unes au dessus des autres. C'est plus que suffisant pour la plupart des situations, mais cela limite l'ordre dans lequel les formes composées sont construites. Nous pouvons cependant changer ce comportement en définissant la propriété <code>globalCompositeOperation</code>. En complément, la propriété <code>clip</code> nous permet de cacher les parties des formes que nous ne désirons pas.</p>
+</div>
+
+<h2 id="globalCompositeOperation" name="globalCompositeOperation"><code>globalCompositeOperation</code></h2>
+
+<p>Nous pouvons non seulement dessiner de nouvelles formes derrière des formes existantes mais nous pouvons aussi les utiliser pour masquer certaines zones, supprimer des sections du canvas (ce n'est pas limité aux rectangles comme pour la méthode {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}) et davantage.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation = type")}}</dt>
+ <dd>Cela configure le type d'opération de composition à appliquer lorsqu'on dessine de nouvelles formes, où le type correspond à une string qui fait référence à une des douze opérations de composition possibles.</dd>
+</dl>
+
+<p>Reportez-vous aux <a href="/fr/docs/Tutoriel_canvas/Composition/Example">exemples de compositon</a> pour le code des exemples suivants.</p>
+
+<p>{{EmbedLiveSample("Exemple_de_composition", 750, 6750, "" ,"/Tutoriel_canvas/Composition/Example")}}</p>
+
+<h2 id="Clipping_paths" name="Clipping_paths">Détourage</h2>
+
+<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/209/Canvas_clipping_path.png" style="float: right;">Un détourage (<em>clipping path</em> en anglais) est comme une forme de canvas standard, à la différence près qu'elle sert à masquer certaines parties du canvas. Voyez l'image de droite, la forme rouge (en étoile) est un détourage du canvas. Tout ce qui est en dehors du chemin n'est pas dessiné sur le canvas.</p>
+
+<p>Si nous comparons le détourage à la propriété <code>globalCompositeOperation</code> vue précédemment, nous voyons deux modes de composition qui ont plus ou moins les mémes effets qu'avec <code>source-in</code> et <code>source-atop</code>. La différence la plus significative entre les deux est que le détourage n'est jamais dessiné sur le canvas à proprement parler et il n'est jamais affecté par l'ajout de nouvelles formes. Ça le rend idéal pour dessiner plusieurs formes dans une zone restreinte.</p>
+
+<p>Dans le chapitre "<a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes" title="Web/Guide/HTML/Canvas_tutorial/Drawing_shapes#Drawing_paths">dessiner des formes avec le canevas</a>", nous n'avions mentionné que les méthodes <code>stroke()</code> et <code>fill()</code>, mais il y en a une troisième: <code>clip()</code> — elle permet de faire des détourages.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.clip", "clip()")}}</dt>
+ <dd>Transforme le chemin en cours de création en détourage effectif.</dd>
+</dl>
+
+<p>Il faut utiliser <code>clip()</code> plutot que <code>closePath()</code> pour fermer un chemin et enfaire un détourage.</p>
+
+<p>Par défault, l'élément {{HTMLElement("canvas")}} possède un détourage aux mêmes dimensions que le canvas lui-même. Donc, par défaut aucune découpe n'est <span class="ht">apparente</span>.</p>
+
+<h3 id="A_clip_example" name="A_clip_example">Un exemple de <code>clip</code></h3>
+
+<p>Dans cet exemple, nous allons utiliser un détourage circulaire pour restreindre le dessin d'un essemble d'étoiles aléatoires à une zone particulière (et circulaire...).</p>
+
+<pre class="brush: js;highlight[9] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.fillRect(0, 0, 150, 150);
+  ctx.translate(75, 75);
+
+  // Create a circular clipping path
+  ctx.beginPath();
+  ctx.arc(0, 0, 60, 0, Math.PI * 2, true);
+  ctx.clip();
+
+  // draw background
+  var lingrad = ctx.createLinearGradient(0, -75, 0, 75);
+  lingrad.addColorStop(0, '#232256');
+  lingrad.addColorStop(1, '#143778');
+
+  ctx.fillStyle = lingrad;
+  ctx.fillRect(-75, -75, 150, 150);
+
+  // draw stars
+  for (var j = 1; j &lt; 50; j++) {
+    ctx.save();
+    ctx.fillStyle = '#fff';
+    ctx.translate(75 - Math.floor(Math.random() * 150),
+                  75 - Math.floor(Math.random() * 150));
+    drawStar(ctx, Math.floor(Math.random() * 4) + 2);
+    ctx.restore();
+  }
+
+}
+
+function drawStar(ctx, r) {
+  ctx.save();
+  ctx.beginPath();
+  ctx.moveTo(r, 0);
+  for (var i = 0; i &lt; 9; i++) {
+    ctx.rotate(Math.PI / 5);
+    if (i % 2 === 0) {
+      ctx.lineTo((r / 0.525731) * 0.200811, 0);
+    } else {
+      ctx.lineTo(r, 0);
+    }
+  }
+  ctx.closePath();
+  ctx.fill();
+  ctx.restore();
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>Dans les premières lignes de code, nous dessinons un rectangle noir ayant la même taille que le canvas comme toile de fond puis nous déplaçons l'origine au centre de l'image. Ensuite, nous créons le détourage circulaire en dessinant un arc (complet) et en faisant appelle à <code>clip()</code>. Les détourages font aussi partie de l'état de sauvegarde des canvas. Si on voulait garder le détourage d'origine, on pourrait par exemple sauvegarder l'état du canvas au préalable.</p>
+
+<p>Tout ce qui sera dessiné après la création du détourage n'apparaîtra qu'à l'intérieur de ce chemin. Vous pouvez voir ça clairement avec le dégradé linéaire qui est dessiné après. Ensuite, un ensemble de 50 étoiles aléatoires est dessiné, en utilisant la fonction <code>drawStar()</code>. Nous pouvons voir, une fois de plus, que les éléments (ici les étoiles) n'apparaissent qu'à l'intérieur du détourage.</p>
+
+<p>{{EmbedLiveSample("A_clip_example", "180", "180", "https://mdn.mozillademos.org/files/208/Canvas_clip.png")}}</p>
+
+<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}}</p>
diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/dessin_de_texte_avec_canvas/index.html b/files/fr/web/api/canvas_api/tutoriel_canvas/dessin_de_texte_avec_canvas/index.html
new file mode 100644
index 0000000000..761b5baf3d
--- /dev/null
+++ b/files/fr/web/api/canvas_api/tutoriel_canvas/dessin_de_texte_avec_canvas/index.html
@@ -0,0 +1,161 @@
+---
+title: Dessin de texte avec canvas
+slug: Web/API/Canvas_API/Tutoriel_canvas/Dessin_de_texte_avec_canvas
+tags:
+  - Canvas
+  - Graphismes
+  - HTML
+  - Tutoriels
+translation_of: Web/API/Canvas_API/Tutorial/Drawing_text
+---
+<p>{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Ajout_de_styles_et_de_couleurs", "Tutoriel_canvas/Utilisation_d'images")}}</p>
+
+<p class="summary">Après avoir vu comment <a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Ajout_de_styles_et_de_couleurs">appliquer les styles et les couleurs</a> dans le chapitre précédent, nous allons maintenant voir comment dessiner du texte sur canvas.</p>
+
+<h2 id="Dessin_de_texte">Dessin de texte</h2>
+
+<p>  Le contexte de rendu du canevas fournit deux méthodes pour le rendu du texte :</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.fillText", "fillText(text, x, y [, maxWidth])")}}</dt>
+ <dd>Remplit un texte donné à la position (x, y). Facultatif, avec une largeur maximale à dessiner.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.strokeText", "strokeText(text, x, y [, maxWidth])")}}</dt>
+ <dd>Trait d'un texte donné à la position (x, y). Facultatif, avec une largeur maximale à dessiner.</dd>
+</dl>
+
+<h3 id="A_fillText_example" name="A_fillText_example">Un exemple fillText</h3>
+
+<p><span id="result_box" lang="fr"><span>Le texte est rempli en utilisant le <code>fillStyle</code> actuel.</span></span></p>
+
+<pre class="brush: js;highlight[4] line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> ctx <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span>font <span class="operator token">=</span> <span class="string token">'48px serif'</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span><span class="function token">fillText</span><span class="punctuation token">(</span><span class="string token">'Hello world'</span><span class="punctuation token">,</span> <span class="number token">10</span><span class="punctuation token">,</span> <span class="number token">50</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<div class="hidden">
+<pre class="brush: html line-numbers  language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>canvas<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>300<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>canvas</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+</div>
+
+<p>{{EmbedLiveSample("A_fillText_example", 310, 110)}}</p>
+
+<h3 id="A_strokeText_example" name="A_strokeText_example">Un exemple de strokeText</h3>
+
+<p><span id="result_box" lang="fr"><span>Le texte est rempli en utilisant le </span></span> <code>strokeStyle</code><span lang="fr"><span> courant.</span></span></p>
+
+<pre class="brush: js;highlight[4] line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> ctx <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span>font <span class="operator token">=</span> <span class="string token">'48px serif'</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span><span class="function token">strokeText</span><span class="punctuation token">(</span><span class="string token">'Hello world'</span><span class="punctuation token">,</span> <span class="number token">10</span><span class="punctuation token">,</span> <span class="number token">50</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<div class="hidden">
+<pre class="brush: html line-numbers  language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>canvas<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>300<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>canvas</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+</div>
+
+<p>{{EmbedLiveSample("A_strokeText_example", 310, 110)}}</p>
+
+<h2 id="M.C3.A9thodes" name="M.C3.A9thodes">Style de texte</h2>
+
+<p><span id="result_box" lang="fr"><span>Dans les exemples ci-dessus, nous utilisons déjà la propriété de police pour rendre le texte un peu plus grand que la taille par défaut.</span> <span>Il existe d'autres propriétés qui vous permettent d'ajuster la façon dont le texte est affiché sur le canevas :</span></span></p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.font", "font = value")}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Le style de texte actuel utilisé lors du dessin du texte.</span> <span>Cette chaîne utilise la même syntaxe que la propriété CSS {{cssxref ("font")}}.</span> <span>La police par défaut est 10px sans-serif.</span></span></dd>
+ <dt>{{domxref("CanvasRenderingContext2D.textAlign", "textAlign = value")}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Paramètre d'alignement du texte.</span> <span>Valeurs possibles : </span></span> <code>start</code> <em>(</em><span lang="fr"><span><em>début)</em>, </span></span> <code>end</code> <em>(</em><span lang="fr"><span><em>fin)</em>, </span></span> <code>left</code> <em>(</em><span lang="fr"><span><em>gauche)</em>, </span></span> <code>right</code> <em>(</em><span lang="fr"><span><em>droite)</em> ou </span></span> <code>center</code> <em>(</em><span lang="fr"><span><em>centre)</em>.</span> <span>La valeur par défaut est <code>start</code>.</span></span></dd>
+ <dt>{{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline = value")}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Paramètre d'alignement de base.</span> <span>Valeurs possibles : </span></span> <code>top</code> <em>(</em><span lang="fr"><span><em>haut)</em>, </span></span> <code>hanging</code> <em>(</em><span lang="fr"><span><em>suspendu)</em>, </span></span> <code>middle</code> <em>(</em><span lang="fr"><span><em>moyen)</em>, </span></span> <code>alphabetic</code> <em>(</em><span lang="fr"><span><em>alphabétique)</em>, </span></span> <code>ideographic</code> <em>(</em><span lang="fr"><span><em>idéographique)</em>, </span></span> <code>bottom</code> <em>(</em><span lang="fr"><span><em>en bas)</em>.</span> <span>La valeur par défaut est </span></span><code>alphabetic</code><span lang="fr"><span>.</span></span></dd>
+ <dt>{{domxref("CanvasRenderingContext2D.direction", "direction = value")}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Directionnalité.</span> <span>Valeurs possibles: </span></span> <code>ltr</code> <em>(de gauche à droite)</em><span lang="fr"><span>, </span></span> <code>rtl</code> <em>(de droite à gauche)</em><span lang="fr"><span>, <code>inherit</code> <em>(hérité)</em>.</span> <span>La valeur par défaut est <code>inherit</code>.</span></span></dd>
+</dl>
+
+<p><span id="result_box" lang="fr"><span>Ces propriétés peuvent vous être familières si vous avez déjà travaillé avec CSS.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span>Le diagramme suivant du </span></span> <a class="external external-icon" href="http://www.whatwg.org/" title="http://www.whatwg.org/">WHATWG</a> <span lang="fr"><span> illustre les différentes lignes de base prises en charge par la propriété <code>textBaseline.</code></span></span></p>
+
+<p><img alt="The top of the em square is
+roughly at the top of the glyphs in a font, the hanging baseline is
+where some glyphs like आ are anchored, the middle is half-way
+between the top of the em square and the bottom of the em square,
+the alphabetic baseline is where characters like Á, ÿ,
+f, and Ω are anchored, the ideographic baseline is
+where glyphs like 私 and 達 are anchored, and the bottom
+of the em square is roughly at the bottom of the glyphs in a
+font. The top and bottom of the bounding box can be far from these
+baselines, due to glyphs extending far outside the em square." src="http://www.whatwg.org/specs/web-apps/current-work/images/baselines.png"></p>
+
+<h3 id="Un_exemple_de_textBaseline">Un exemple de textBaseline</h3>
+
+<p><span id="result_box" lang="fr"><span>Modifiez le code ci-dessous et visualisez vos mises à jour en direct dans le canevas :</span></span></p>
+
+<pre class="brush: js;highlight[2] line-numbers  language-js notranslate"><code class="language-js">ctx<span class="punctuation token">.</span>font <span class="operator token">=</span> <span class="string token">'48px serif'</span><span class="punctuation token">;</span>
+ctx<span class="punctuation token">.</span>textBaseline <span class="operator token">=</span> <span class="string token">'hanging'</span><span class="punctuation token">;</span>
+ctx<span class="punctuation token">.</span><span class="function token">strokeText</span><span class="punctuation token">(</span><span class="string token">'Hello world'</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">100</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<div class="hidden">
+<h6 id="Playable_code" name="Playable_code">Playable code</h6>
+
+<pre class="brush: html line-numbers  language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>canvas<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>400<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>200<span class="punctuation token">"</span></span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>playable-canvas<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>canvas</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>playable-buttons<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>edit<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Edit<span class="punctuation token">"</span></span> <span class="punctuation token">/&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>reset<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Reset<span class="punctuation token">"</span></span> <span class="punctuation token">/&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>textarea</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>code<span class="punctuation token">"</span></span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>playable-code<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+ctx.font = "48px serif";
+ctx.textBaseline = "hanging";
+ctx.strokeText("Hello world", 0, 100);<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>textarea</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">var</span> canvas <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> ctx <span class="operator token">=</span> canvas<span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> textarea <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'code'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> reset <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'reset'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> edit <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'edit'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> code <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span>
+
+<span class="keyword token">function</span> <span class="function token">drawCanvas</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  ctx<span class="punctuation token">.</span><span class="function token">clearRect</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> canvas<span class="punctuation token">.</span>width<span class="punctuation token">,</span> canvas<span class="punctuation token">.</span>height<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="function token">eval</span><span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+reset<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</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>
+  textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> code<span class="punctuation token">;</span>
+  <span class="function token">drawCanvas</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>
+
+edit<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</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>
+  textarea<span class="punctuation token">.</span><span class="function token">focus</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>
+
+textarea<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'input'</span><span class="punctuation token">,</span> drawCanvas<span class="punctuation token">)</span><span class="punctuation token">;</span>
+window<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'load'</span><span class="punctuation token">,</span> drawCanvas<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="Mesures_de_texte_avancées"><span class="short_text" id="result_box" lang="fr"><span>Mesures de texte avancées</span></span></h2>
+
+<p><span id="result_box" lang="fr"><span>Dans le cas où vous avez besoin d'obtenir plus de détails sur le texte, la méthode suivante vous permet de le mesurer.</span></span></p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.measureText", "measureText()")}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Retourne un objet </span></span> {{domxref("TextMetrics")}} <span lang="fr"><span> contenant la largeur en pixels, sur la base duquel le texte spécifié sera dessiné dans le style de texte actuel.</span></span></dd>
+</dl>
+
+<p><span id="result_box" lang="fr"><span>L'extrait de code suivant montre comment vous pouvez mesurer un texte et obtenir sa largeur.</span></span></p>
+
+<pre class="brush: js;highlight[3] line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> ctx <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">var</span> text <span class="operator token">=</span> ctx<span class="punctuation token">.</span><span class="function token">measureText</span><span class="punctuation token">(</span><span class="string token">'foo'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// objet TextMetrics</span>
+  text<span class="punctuation token">.</span>width<span class="punctuation token">;</span> <span class="comment token">// 16;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h2 id="Notes_spécifiques_à_Gecko"><span class="short_text" id="result_box" lang="fr"><span>Notes spécifiques à Gecko</span></span></h2>
+
+<p><span id="result_box" lang="fr"><span>Dans Gecko (le moteur de rendu de Firefox, Firefox OS et d'autres applications basées sur Mozilla), certaines API préfixées ont été implémentées dans des versions antérieures pour dessiner du texte sur un canevas.</span> <span>Ceux-ci sont maintenant déconseillés et supprimés, et leur fonctionnement n'est pas garanti.</span></span></p>
+
+<p>{{PreviousNext("Tutoriel_canvas/Ajout_de_styles_et_de_couleurs", "Tutoriel_canvas/Utilisation_d'images")}}</p>
diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/formes_géométriques/index.html b/files/fr/web/api/canvas_api/tutoriel_canvas/formes_géométriques/index.html
new file mode 100644
index 0000000000..233d1baeb2
--- /dev/null
+++ b/files/fr/web/api/canvas_api/tutoriel_canvas/formes_géométriques/index.html
@@ -0,0 +1,581 @@
+---
+title: Dessiner des formes avec le canevas
+slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
+tags:
+  - Canvas
+  - Graphisme
+  - Guide
+  - HTML
+  - HTML5
+  - Intermédiaire
+  - Tutoriel
+translation_of: Web/API/Canvas_API/Tutorial/Drawing_shapes
+---
+<p>{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Utilisation_de_base", "Tutoriel_canvas/Ajout_de_styles_et_de_couleurs")}}</p>
+
+<p class="summary">Maintenant que nous avons défini notre <a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Utilisation_de_base">environnement de canevas</a>, nous pouvons entrer dans les détails de la façon de dessiner sur le canevas. A la fin de cet article, vous aurez appris à tracer des rectangles, des triangles, des lignes, des arcs et des courbes, vous rendant ainsi familier avec certaines des formes de base. Le travail avec les trajets est essentiel lors du dessin d'objets sur le canevas, et nous verrons comment cela peut être fait.</p>
+
+<h2 id="La_grille">La grille</h2>
+
+<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/224/Canvas_default_grid.png" style="float: right; height: 220px; width: 220px;">Avant de pouvoir commencer à dessiner, il nous faut parler de la grille ou <strong>système de coordonnées</strong>. Notre schéma HTML de la page précédente avait un élément canevas large de 150 pixels et haut de 150 pixels. À droite, vous voyez ce canevas avec la grille par défaut superposée. Normalement, 1 unité dans la grille correspond à 1 pixel sur le canevas. L'origine de cette grille est positionnée dans le coin <em>supérieur gauche</em> de coordonnées (0, 0). Tous les éléments sont placés relativement à cette origine. Ainsi, le coin supérieur gauche du carré bleu est à <code>x</code> pixels à partir de la gauche et à <code>y</code> pixels à partir du haut, aux coordonnées (x, y). Plus loin dans ce tutoriel, nous verrons comment déplacer l'origine à une position différente, faire pivoter la grille ou même la mettre à l'échelle ; mais pour l'instant, nous nous en tiendrons aux valeurs par défaut.</p>
+
+<h2 id="Dessin_de_rectangles">Dessin de rectangles</h2>
+
+<p>Au contraire de <a href="/fr/docs/Web/SVG" rel="internal" title="en/SVG">SVG</a>, le {{HTMLElement("canvas")}} ne supporte qu'une seule forme primitive : le rectangle. Toute autre forme doit être créée en combinant un ou plusieurs trajets, c'est-à-dire des listes de points reliés par des lignes. Heureusement, nous avons un assortiment de fonctions de dessin de trajets, qui rendent possible la composition de formes très complexes.</p>
+
+<div id="section_3">
+<p>Commençons par le rectangle. Il y a trois fonctions qui dessinent des rectangles sur le canvas :</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.fillRect", "fillRect(x, y, largeur, hauteur)")}}</dt>
+ <dd>Dessine un rectangle rempli.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect(x, y, largeur, hauteur)")}}</dt>
+ <dd>Dessine un contour rectangulaire</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.clearRect", "clearRect(x, y, largeur, hauteur)")}}</dt>
+ <dd>Efface la zone rectangulaire spécifiée, la rendant complètement transparente.</dd>
+</dl>
+
+<p>Chacune de ces trois fonctions a les mêmes paramètres. <code>x</code> et <code>y</code> indiquent la position sur le canevas (par rapport à l'origine) du coin supérieur gauche du rectangle sur le canvas. <code>largeur</code> et <code>hauteur</code> indiquent la taille du rectangle.</p>
+
+<p>Ci-dessous la fonction <code>draw()</code> de la page précédente, mais utilisant maintenant ces trois fonctions.</p>
+
+<h3 id="Exemple_de_forme_rectangulaire">Exemple de forme rectangulaire</h3>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js notranslate">function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    ctx.fillRect(25, 25, 100, 100);
+    ctx.clearRect(45, 45, 60, 60);
+    ctx.strokeRect(50, 50, 50, 50);
+  }
+}</pre>
+
+<p>Le résultat de cet exemple est montré ci-dessous.</p>
+
+<p>{{EmbedLiveSample("Exemple_de_forme_rectangulaire", 160, 160, "https://mdn.mozillademos.org/files/245/Canvas_rect.png")}}</p>
+
+<p>La fonction <code>fillRect()</code> dessine un grand carré noir de 100 pixels de côté. La fonction <code>clearRect()</code> efface ensuite un carré de 60x60 pixels, et finalement, la fonction <code>strokeRect()</code> est appelée pour créer un contour rectangulaire de 50x50 pixels dans l'espace effacé.</p>
+
+<p>Dans les pages qui suivent, nous verrons deux méthodes alternatives pour <code>clearRect()</code>, et nous verrons aussi comment changer la couleur et le style de trait des formes rendues.</p>
+
+<p>A la différence des fonctions de trajet que nous allons voir dans la prochaine section, les trois fonctions de rectangles dessinent immédiatement sur le canvas.</p>
+
+<h2 id="Dessin_de_trajets">Dessin de trajets</h2>
+
+<p>Les seules autres formes primitives sont les <em>trajets</em>. Un trajet est une liste de points, reliés par des segments de lignes qui peuvent être de différentes formes, incurvées ou non, de largeur différente et de couleur différente. Un trajet, ou même un sous-trajet, peut être fermé. La réalisation de formes utilisant des trajets requiert quelques étapes supplémentaires :</p>
+
+<ol>
+ <li>Tout d'abord, vous devez créer le trajet.</li>
+ <li>Ensuite vous devez utiliser des <a href="https://developer.mozilla.org/fr-FR/docs/Web/API/CanvasRenderingContext2D#Paths">instructions de dessin</a> pour dessiner sur le trajet.</li>
+ <li>Finalement, vous devez fermer le trajet.</li>
+ <li>Une fois que le trajet a été créé, vous devez le tracer ou le remplir pour le faire apparaître.</li>
+</ol>
+
+<p>Voici les functions utilisées pour réaliser ces étapes :</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}}</dt>
+ <dd>Crée un nouveau trajet. Une fois créé, les fonctions de dessin ultérieures seront dirigées vers le trajet et utilisées pour le construire.</dd>
+ <dt><a href="https://developer.mozilla.org/fr-FR/docs/Web/API/CanvasRenderingContext2D#Paths">Méthodes de trajet</a></dt>
+ <dd>Méthodes pour définir différents trajets pour les objets.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.closePath", "closePath()")}}</dt>
+ <dd>Ferme le trajet pour que les fonctions de dessin ultérieures soient à nouveau dirigées vers le contexte.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.stroke", "stroke()")}}</dt>
+ <dd>Dessine la forme en traçant son contour.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.fill", "fill()")}}</dt>
+ <dd>Dessine une forme pleine en remplissant la zone de contenu du trajet.</dd>
+</dl>
+
+<p>La première étape pour créer un trajet est d'appeler <code>beginPath()</code>. En interne, les trajets sont stockés comme une liste de sous-trajets (lignes, arcs, etc) qui ensemble réalisent une forme. Chaque fois que cette méthode est appelée, la liste est remise à zéro, et nous pouvons commencer à dessiner de nouvelles formes.</p>
+
+<div class="note"><strong>Note :</strong> lorsque le trajet en cours est vide, par exemple immédiatement après avoir appelé <code>beginPath()</code>, ou sur un canvas nouvellement créé, la première instruction de construction de trajet est toujours traitée comme un <code>moveTo()</code>, indépendamment de ce qu'elle est en réalité. Pour cette raison, il sera pratiquement toujours souhaitable d'indiquer la position de départ après la réinitialisation d'un trajet.</div>
+
+<p>La deuxième étape est d'appeler les méthodes qui indiquent effectivement les sous-trajets à dessiner. Nous verrons ces méthodes bientôt.</p>
+
+<p>La troisième méthode, optionnelle, est l'appel à <code>closePath()</code>. Cette méthode essaye de fermer la forme géométrique en dessinant une ligne droite depuis le point courant jusqu'au début du trajet. Si la forme a déjà été fermée ou s'il n'y a qu'un seul point dans la liste, cette fonction ne fait rien.</p>
+
+<div class="note"><strong>Note :</strong> quand vous appelez <code>fill()</code>, toutes les formes ouvertes sont automatiquement fermées, ainsi vous n'avez pas à appeler <code>closePath()</code>. Ce n'est <strong>pas</strong> le cas quand vous appelez <code>stroke()</code>.</div>
+
+<h3 id="Dessin_dun_triangle">Dessin d'un triangle</h3>
+
+<p>Par exemple, le code pour dessiner un triangle peut ressembler à ce qui suit :</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;html&gt;
+ &lt;body onload="dessiner();"&gt;
+   &lt;canvas id="canevas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js notranslate">function dessiner() {
+  var canevas = document.getElementById('canevas');
+  if (canevas.getContext) {
+    var ctx = canevas.getContext('2d');
+
+    ctx.beginPath();
+    ctx.moveTo(75, 50);
+    ctx.lineTo(100, 75);
+    ctx.lineTo(100, 25);
+    ctx.fill();
+  }
+}
+</pre>
+
+<p>Le résultat ressemble à :</p>
+
+<p>{{EmbedLiveSample("Dessin_d'un_triangle", 110, 110, "https://mdn.mozillademos.org/files/9847/triangle.png")}}</p>
+
+<h3 id="Déplacement_du_stylo">Déplacement du stylo</h3>
+
+<p>Une fonction très utile, qui ne dessine rien mais qui fait tout de même partie de la liste de trajets décrite plus haut, est la fonction <code>moveTo()</code>. La meilleure façon de l'imaginer est le fait de lever un stylo ou un crayon depuis une position sur un papier, et de le placer sur une autre.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.moveTo", "moveTo(x, y)")}}</dt>
+ <dd>Déplace le stylo aux coordonnées <code>x</code> et <code>y</code>.</dd>
+</dl>
+
+<p>Lorsque le canevas est initialisé ou que <code>beginPath()</code> est appelé, vous souhaiterez typiquement utiliser <code>moveTo()</code> pour positionner le point de départ quelque part ailleurs. On pourrait aussi utiliser <code>moveTo()</code> pour dessiner des trajets non reliés. Jetez un coup d'œil à l'émoticon ci-dessous.</p>
+
+<p>Pour essayer par vous-même, vous pouvez utiliser le fragment de code ci-dessous. Collez-le simplement dans la fonction <code>draw()</code> que nous avons vue plus tôt.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js notranslate">function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    ctx.beginPath();
+    ctx.arc(75, 75, 50, 0, Math.PI * 2, true);  // Cercle extérieur
+    ctx.moveTo(110,75);
+    ctx.arc(75, 75, 35, 0, Math.PI, false);  // Bouche (sens horaire)
+    ctx.moveTo(65, 65);
+    ctx.arc(60, 65, 5, 0, Math.PI * 2, true);  // Oeil gauche
+    ctx.moveTo(95, 65);
+    ctx.arc(90, 65, 5, 0, Math.PI * 2, true);  // Oeil droite
+    ctx.stroke();
+  }
+}
+</pre>
+
+<p>Le résultat ressemble à ce qui suit :</p>
+
+<p>{{EmbedLiveSample("Déplacement_du_stylo", 160, 160, "https://mdn.mozillademos.org/files/252/Canvas_smiley.png")}}</p>
+
+<p>Si vous voulez voir les lignes d'interconnexion, vous pouvez enlever les lignes qui appellent <code>moveTo()</code>.</p>
+
+<div class="note">
+<p><strong>Note :</strong> pour en savoir plus sur la fonction <code>arc()</code>, voir la section {{anch("Arcs")}} ci-dessous.</p>
+</div>
+
+<h3 id="Les_lignes">Les lignes</h3>
+
+<p>Pour dessiner des lignes droites, utilisez la méthode <code>lineTo()</code>.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.lineTo", "lineTo(x, y)")}}</dt>
+ <dd>Dessine une ligne depuis la position de dessin courante jusqu'à la position spécifiée par <code>x</code> et <code>y</code>.</dd>
+</dl>
+
+<p>Cette méthode prend deux arguments, <code>x</code> et <code>y</code>, qui sont les coordonnées du point final de la ligne. Le point de départ dépend des trajets précédemment tracés, où le point final du trajet précédent est le point de départ du suivant, etc. Le point de départ peut aussi être changé en utilisant la méthode <code>moveTo()</code>.</p>
+
+<p>L'exemple ci-dessous dessine deux triangles, un rempli et un filaire.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;html&gt;
+ &lt;body onload="dessiner();"&gt;
+   &lt;canvas id="canevas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js notranslate">function dessiner() {
+  var canevas = document.getElementById('canevas');
+  if (canevas.getContext) {
+    var ctx = canevas.getContext('2d');
+
+    // Triangle plein
+    ctx.beginPath();
+    ctx.moveTo(25, 25);
+    ctx.lineTo(105, 25);
+    ctx.lineTo(25, 105);
+    ctx.fill();
+
+    // Triangle filaire
+    ctx.beginPath();
+    ctx.moveTo(125, 125);
+    ctx.lineTo(125, 45);
+    ctx.lineTo(45, 125);
+    ctx.closePath();
+    ctx.stroke();
+  }
+}
+</pre>
+
+<p>Il commence par appeler <code>beginPath()</code> pour démarrer un nouveau trajet de forme. Nous utilisons ensuite la méthode <code>moveTo()</code> pour déplacer le point de départ à la position désirée. En dessous, deux lignes sont dessinées, qui constituent deux côtés du triangle.</p>
+
+<p>{{EmbedLiveSample("Les_lignes", 160, 160, "https://mdn.mozillademos.org/files/238/Canvas_lineTo.png")}}</p>
+
+<p>Vous remarquerez la différence entre le triangle plein et le filaire. Cela, comme mentionné précédemment, vient du fait que les formes sont automatiquement fermées lorsqu'un trajet est rempli, mais pas lorsqu'elles sont dessinées au trait. Si nous avions omis le <code>closePath()</code> pour le triangle filaire, seules deux lignes auraient été tracées, et non pas un triangle complet.</p>
+
+<h3 id="Les_arcs">Les arcs</h3>
+
+<p>Pour dessiner des arcs ou des cercles, on utilise les méthodes <code>arc() ou arcTo()</code>.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.arc", "arc(x, y, rayon, angleInitial, angleFinal, antihoraire)")}}</dt>
+ <dd>Dessine un arc de cercle qui est centré à la position <em>(x, y),</em> de rayon <em>r</em>, commençant à <em>angleInitial</em> et finissant à <em>angleFinal</em> en allant dans le sens indiqué par <em>antihoraire</em> (par défaut, horaire).</dd>
+ <dt><strong>{{domxref("CanvasRenderingContext2D.arcTo", "arcTo(x1, y1, x2, y2, rayon)")}}</strong></dt>
+ <dd>Dessine un arc avec les points de contrôle et l'angle donnés, relié au point précédent par une ligne droite.</dd>
+</dl>
+
+<p>Regardons plus en détail la méthode <code>arc</code>, qui prend six paramètres : <code>x</code> et <code>y</code> sont les coordonnées du centre du cercle sur lequel l'arc doit être tracé. <code>rayon</code> se passe d'explication. Les paramètres <code>angleInitial et</code> <code>angleFinal</code> définissent en radians les points de départ et d'arrivée de l'arc, le long de la courbe du cercle. Ceux-ci sont mesurés à partir de l'axe des x. Le paramètre <code>antihoraire</code> est une valeur booléenne qui, lorsque <code>true</code>, dessine l'arc dans le sens antihoraire, sinon, l'arc est dessiné dans le sens horaire.</p>
+
+<div class="note">
+<p><strong>Note </strong>: les angles dans la fonction <code>arc</code> sont mesurés en radians, et non en degrés. Pour convertir des degrés en radians, vous pouvez utiliser l'expression JavaScript suivante : <code>radians = (Math.PI/180)*degres</code>.</p>
+</div>
+
+<p>L'exemple suivant est un peu plus complexe que ceux que nous avons vus plus haut. Il dessine 12 arcs différents, avec des angles et des remplissages différents.</p>
+
+<p>Les deux <a href="https://developer.mozilla.org/fr-FR/docs/Web/JavaScript/Reference/Statements/for">boucles <code>for</code></a> bouclent sur les lignes et les colonnes des arcs. Pour chaque arc, on commence un nouveau trajet en appelant <code>beginPath()</code>. Dans le code, chacun des paramètres dans l'arc est une variable pour des raisons de clarté, mais en réalité, vous n'avez pas besoin de le faire.</p>
+
+<p>Les coordonnées <code>x</code> et <code>y</code> devraient être claires. <code>rayon</code> et <code>angleInitial</code> sont fixés. L'<code>angleFinal</code> commence à 180 degrés (demi-cercle) dans la première colonne et il est augmenté par pas de 90 degrés, pour finir par un cercle complet dans la dernière colonne.</p>
+
+<p>L'instruction pour le paramètre <code>antihoraire</code> a pour résultat que la première et de la troisième ligne sont dessinées comme des arcs de sens horaire, et que la deuxième et quatrième sont dessinées comme des arcs de sens antihoraire. Enfin, l'instruction <code>if</code> fait des arcs filaires dans la moité supérieure, et des arcs remplis dans la moitié inférieure.</p>
+
+<div class="note">
+<p><strong>Note :</strong> cet exemple requiert canevas légèrement plus large que les autres sur cette page : 150 x 200 pixels.</p>
+</div>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;html&gt;
+ &lt;body onload="dessiner();"&gt;
+   &lt;canvas id="canevas" width="150" height="200"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js notranslate">function dessiner() {
+  var canevas = document.getElementById('canevas');
+  if (canevas.getContext) {
+    var ctx = canevas.getContext('2d');
+
+    for(var i = 0; i &lt; 4; i++) {
+      for(var j = 0; j &lt; 3; j++) {
+        ctx.beginPath();
+        var x = 25 + j * 50; // Coordonnée x
+        var y = 25 + i * 50; // Coordonnée y
+        var rayon = 20; // Rayon de l'arc
+        var angleInitial = 0; // Point de départ sur le cercle
+        var angleFinal = Math.PI + (Math.PI * j) / 2; // Point d'arrivée sur le cercle
+        var antihoraire = i % 2 != 0; // Horaire ou antihoraire
+
+        ctx.arc(x, y, rayon, angleInitial, angleFinal, antihoraire);
+
+        if (i&gt;1) {
+          ctx.fill();
+        } else {
+          ctx.stroke();
+        }
+      }
+    }
+  }
+}
+</pre>
+
+<p>{{EmbedLiveSample("Les_arcs", 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png")}}</p>
+
+<h3 id="Les_courbes_quadratiques_et_de_Bézier">Les courbes quadratiques et de Bézier</h3>
+
+<p>Le type suivant de trajets disponible est la <a href="https://fr.wikipedia.org/wiki/Courbe_de_B%C3%A9zier">courbe de Bézier</a>, disponible en deux variétés, cubique et quadratique. Elles sont généralement utilisées pour dessiner des formes naturelles complexes.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.quadraticCurveTo", "quadraticCurveTo(cp1x, cp1y, x, y)")}}</dt>
+ <dd>Dessine une courbe de Bézier quadratique depuis la position courante du stylo jusqu'au point final spécifié par <code>x</code> et <code>y</code>, en utilisant le point de contrôle spécifié par <code>cp1x</code> et <code>cp1y</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.bezierCurveTo", "bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)")}}</dt>
+ <dd>Dessine une courbe de Bézier cubique depuis la position courante du stylo jusqu'au point spécifié par <code>x</code> et <code>y</code>, en utilisant les points de contrôle (<code>cp1x</code>, <code>cp1y</code>) et (<code>cp2x</code>, <code>cp2y</code>).</dd>
+</dl>
+
+<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/223/Canvas_curves.png" style="float: right; height: 190px; width: 190px;">La différence entre ces deux méthodes est mieux décrite par l'image à droite. Une courbe quadratique de Bézier a un point de départ et un point d'arrivée (points bleus), et seulement un <strong>point de contrôle</strong> (indiqué par le point rouge), tandis qu'une courbe de Bézier cubique utilise deux points de contrôle.</p>
+
+<p>Les paramètres <code>x</code> et <code>y</code> de ces deux méthodes sont les coordonnées du point d'arrivée. <code>cp1x</code> et <code>cp1y</code> sont les coordonnées du premier point de contrôle, et  <code>cp2x</code> et <code>cp2y</code> sont les coordonnées du second point de contrôle.</p>
+
+<p>Utiliser des courbes quadratiques et cubiques de Bézier peut constituer un certain défi, car à la différence d'un logiciel de tracé des vecteurs comme <em>Adobe Illustrator</em>, nous n'avons pas de retour visuel direct concernant ce que nous faisons. Cela rend passablement difficile le dessin de formes complexes. Dans l'exemple suivant, nous allons dessiner quelques formes naturelles simples, mais si vous avez du temps et - surtout - de la patience, des formes bien plus complexes peuvent être créées.</p>
+
+<p>Il n'y a rien de très difficile dans ces exemples. Dans les deux cas, on peut voir une succession de courbes être dessinées qui aboutissent finalement à une forme complète.</p>
+
+<h4 id="Courbes_de_Bézier_quadratiques">Courbes de Bézier quadratiques</h4>
+
+<p>Cet exemple utilise plusieurs courbes quadratiques de Bézier pour rendre une bulle de dialogue.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;html&gt;
+ &lt;body onload="dessiner();"&gt;
+   &lt;canvas id="canevas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js notranslate">function dessiner() {
+  var canevas = document.getElementById('canevas');
+  if (canevas.getContext) {
+    var ctx = canevas.getContext('2d');
+
+    // Exemples de courbes quadratiques
+    ctx.beginPath();
+    ctx.moveTo(75, 25);
+    ctx.quadraticCurveTo(25, 25, 25, 62.5);
+    ctx.quadraticCurveTo(25, 100, 50, 100);
+    ctx.quadraticCurveTo(50, 120, 30, 125);
+    ctx.quadraticCurveTo(60, 120, 65, 100);
+    ctx.quadraticCurveTo(125, 100, 125, 62.5);
+    ctx.quadraticCurveTo(125, 25, 75, 25);
+    ctx.stroke();
+  }
+}
+</pre>
+
+<p>{{EmbedLiveSample("Courbes_de_Bézier_quadratiques", 160, 160, "https://mdn.mozillademos.org/files/243/Canvas_quadratic.png")}}</p>
+
+<h4 id="Les_courbes_de_Bézier_cubiques">Les courbes de Bézier cubiques</h4>
+
+<p>Cet exemple dessine un cœur en utilisant les courbes de Bézier cubiques.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;html&gt;
+ &lt;body onload="dessiner();"&gt;
+   &lt;canvas id="canevas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js notranslate">function dessiner() {
+  var canevas = document.getElementById('canevas');
+  if (canevas.getContext) {
+    var ctx = canevas.getContext('2d');
+
+    // Exemple de courbes cubiques
+    ctx.beginPath();
+    ctx.moveTo(75, 40);
+    ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
+    ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
+    ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
+    ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
+    ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
+    ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
+    ctx.fill();
+  }
+}
+</pre>
+
+<p>{{EmbedLiveSample("Les_courbes_de_Bézier_cubiques", 160, 160, "https://mdn.mozillademos.org/files/207/Canvas_bezier.png")}}</p>
+
+<h3 id="Rectangles">Rectangles</h3>
+
+<p>En plus des trois méthodes que nous avons vues dans {{anch("Dessin de rectangles")}}, qui dessinent des formes rectangulaires directement sur le canevas, il y a la méthode <code>rect()</code>, qui ajoute un trajet rectangulaire à un trajet actuellement ouvert.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.rect", "rect(x, y, largeur, hauteur)")}}</dt>
+ <dd>Dessine un rectangle dont l'angle supérieur gauche est spécifié par (<code>x</code>, <code>y</code>), avec les <code>largeur</code> et <code>hauteur</code> spécifiées.</dd>
+</dl>
+
+<p>Quand cette méthode est exécutée, la méthode <code>moveTo()</code> est automatiquement appelée avec les paramètres (0,0). En d'autres termes, la position en cours du stylo est automatiquement réinitialisée aux coordonnées par défaut.</p>
+
+<h3 id="Combiner_les_possibilités">Combiner les possibilités</h3>
+
+<p>Jusqu'à présent, chaque exemple de cette page a utilisé un seul type de fonction de trajet par forme. Cependant, il n'y a pas de limite au nombre ou aux types de trajets que vous pouvez utiliser pour créer une forme. Ainsi, dans ce dernier exemple, combinons toutes les fonctions de trajet pour faire un ensemble de personnages d'un jeu très célèbre.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;html&gt;
+ &lt;body onload="dessiner();"&gt;
+   &lt;canvas id="canevas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js notranslate">function dessiner() {
+  var canevas = document.getElementById('canevas');
+  if (canevas.getContext) {
+    var ctx = canevas.getContext('2d');
+
+    rectArrondi(ctx, 12, 12, 150, 150, 15);
+    rectArrondi(ctx, 19, 19, 150, 150, 9);
+    rectArrondi(ctx, 53, 53, 49, 33, 10);
+    rectArrondi(ctx, 53, 119, 49, 16, 6);
+    rectArrondi(ctx, 135, 53, 49, 33, 10);
+    rectArrondi(ctx, 135, 119, 25, 49, 10);
+
+    ctx.beginPath();
+    ctx.arc(37, 37, 13, Math.PI/7, -Math.PI/7, false);
+    ctx.lineTo(31, 37);
+    ctx.fill();
+
+    for(var i = 0; i&lt; 8; i++) {
+      ctx.fillRect(51 + i * 16, 35, 4, 4);
+    }
+
+    for(i = 0; i &lt; 6; i++) {
+      ctx.fillRect(115, 51 + i * 16, 4, 4);
+    }
+
+    for(i = 0; i &lt; 8; i++) {
+      ctx.fillRect(51 + i * 16, 99, 4, 4);
+    }
+
+    ctx.beginPath();
+    ctx.moveTo(83, 116);
+    ctx.lineTo(83, 102);
+    ctx.bezierCurveTo(83, 94, 89, 88, 97, 88);
+    ctx.bezierCurveTo(105, 88, 111, 94, 111, 102);
+    ctx.lineTo(111, 116);
+    ctx.lineTo(106.333, 111.333);
+    ctx.lineTo(101.666, 116);
+    ctx.lineTo(97, 111.333);
+    ctx.lineTo(92.333, 116);
+    ctx.lineTo(87.666, 111.333);
+    ctx.lineTo(83, 116);
+    ctx.fill();
+
+    ctx.fillStyle = "white";
+    ctx.beginPath();
+    ctx.moveTo(91, 96);
+    ctx.bezierCurveTo(88, 96, 87, 99, 87, 101);
+    ctx.bezierCurveTo(87, 103, 88, 106, 91, 106);
+    ctx.bezierCurveTo(94, 106, 95, 103, 95, 101);
+    ctx.bezierCurveTo(95, 99, 94, 96, 91, 96);
+    ctx.moveTo(103, 96);
+    ctx.bezierCurveTo(100, 96, 99, 99, 99, 101);
+    ctx.bezierCurveTo(99, 103, 100, 106, 103, 106);
+    ctx.bezierCurveTo(106, 106, 107, 103, 107, 101);
+    ctx.bezierCurveTo(107, 99, 106, 96, 103, 96);
+    ctx.fill();
+
+    ctx.fillStyle = "black";
+    ctx.beginPath();
+    ctx.arc(101, 102, 2, 0, Math.PI * 2, true);
+    ctx.fill();
+
+    ctx.beginPath();
+    ctx.arc(89, 102, 2, 0, Math.PI * 2, true);
+    ctx.fill();
+  }
+}
+
+// Une fonction utilitaire pour tracer des rectangles avec des coins arrondis
+
+function rectArrondi(ctx, x, y, largeur, hauteur, rayon) {
+  ctx.beginPath();
+  ctx.moveTo(x, y + rayon);
+  ctx.lineTo(x, y + hauteur - rayon);
+  ctx.quadraticCurveTo(x, y + hauteur, x + rayon, y + hauteur);
+  ctx.lineTo(x + largeur - rayon, y + hauteur);
+  ctx.quadraticCurveTo(x + largeur, y + hauteur, x + largeur, y + hauteur - rayon);
+  ctx.lineTo(x + largeur, y + rayon);
+  ctx.quadraticCurveTo(x + largeur, y, x + largeur - rayon, y);
+  ctx.lineTo(x + rayon,y);
+  ctx.quadraticCurveTo(x, y, x, y + rayon);
+  ctx.stroke();
+}
+
+</pre>
+
+<p>L'image résultante ressemble à ce qui suit :</p>
+
+<div id="section_18">
+<p>{{EmbedLiveSample("Combiner_les_possibilités", 160, 160)}}</p>
+
+<p>Nous ne l'expliquerons pas plus en détails, du fait que c'est étonnament simple. Les choses les plus importantes à noter sont l'utilisation de la propriété <code>fillStyle</code> sur le contexte du dessin, et l'utilisation d'une fonction utilitaire dans ce cas, rectArrondi<code>())</code>. L'utilisation de fonctions utilitaires pour des éléments de dessin que vous faites souvent peut être très utile, et peut réduire la quantité de code dont vous avez besoin, ainsi que sa complexité.</p>
+
+<p>Nous reviendrons sur <code>fillStyle</code> plus en détail plus loin dans ce tutoriel. Pour l'instant, tout ce que nous faisons est de l'utiliser pour changer en blanc la couleur pour les trajets depuis la couleur noire par défaut, et inversement ensuite.</p>
+</div>
+</div>
+
+<h2 id="Objets_Path2D">Objets Path2D</h2>
+
+<p>Comme nous l'avons vu dans le dernier exemple, il peut y avoir une série de trajets et d'instructions de dessin pour dessiner des objets sur votre canevas. Pour simplifier le code et améliorer les performances, l'objet {{domxref("Path2D")}}, disponible dans les versions récentes des navigateurs, vous permet de mettre en cache ou d'enregistrer ces instrucions de dessin. Vous pourrez alors rejouer vos trajets rapidement.<br>
+ Voyons comment nous pouvons construire un objet <code>Path2D </code>:</p>
+
+<dl>
+ <dt>{{domxref("Path2D.Path2D", "Path2D()")}}</dt>
+ <dd>Le constructor <code><strong>Path2D()</strong></code> retourne un objet <code>Path2D</code> nouvellement instancié, optionellement avec un autre trajet comme argument (crée une copie), ou optionellement avec une chaîne constituée de données de <a href="https://developer.mozilla.org/fr-FR/docs/Web/SVG/Tutorial/Paths">trajet SVG</a>.</dd>
+</dl>
+
+<pre class="notranslate"><code>new Path2D();     // objet trajet vide
+new Path2D(trajet); // copie depuis un autre objet Path2D
+new Path2D(d);    // trajet depuis des données de trajet SVG</code></pre>
+
+<p>Toutes les <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D#Paths">méthodes de trajet</a> telles que <code>moveTo</code>, <code>rect</code>, <code>arc</code> ou <code>quadraticCurveTo</code>, etc., que nous avons appris à connaître ci-dessus, sont disponibles sur les objets <code>Path2D</code>.</p>
+
+<p>L'API <code>Path2D</code> ajoute aussi une manière de combiner des trajets en utilisant la méthode <code>addPath</code>. Cela peut être utile quand vous voulez contruire des objets à partir de plusieurs composants, par exemple.</p>
+
+<dl>
+ <dt>{{domxref("Path2D.addPath", "Path2D.addPath(trajet [, transformation])")}}</dt>
+ <dd>Ajoute un trajet, au trajet en cours, avec une matrice de transformation.</dd>
+</dl>
+
+<h3 id="Exemple_de_Path2D">Exemple de Path2D</h3>
+
+<p>Dans cet exemple, on crée un rectangle et un cercle. Tous deux sont stockés comme des objets <code>Path2D</code>, de sorte qu'ils sont disponibles pour un usage ultérieur. Avec la nouvelle API <code>Path2D</code>, plusieurs méthodes ont été mises à jour pour accepter optionnellement un objet <code>Path2D</code> à utiliser au lieu du trajet en cours. Ici, <code>stroke</code> et <code>fill</code> sont utilisés avec un argument de trajet pour dessiner les deux objets sur le canevas, par exemple.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;html&gt;
+ &lt;body onload="dessiner();"&gt;
+   &lt;canvas id="canvas" width="130" height="100"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js;highlight[6,9] notranslate">function dessiner() {
+  var canevas = document.getElementById('canvas');
+  if (canevas.getContext){
+    var ctx = canevas.getContext('2d');
+
+    var rectangle = new Path2D();
+    rectangle.rect(10, 10, 50, 50);
+
+    var cercle = new Path2D();
+    cercle.moveTo(125, 35);
+    cercle.arc(100, 35, 25, 0, 2 * Math.PI);
+
+    ctx.stroke(rectangle);
+    ctx.fill(cercle);
+  }
+}</pre>
+
+<p>{{EmbedLiveSample("Exemple_de_Path2D", 130, 110, "https://mdn.mozillademos.org/files/9851/path2d.png")}}</p>
+
+<h3 id="Utilisation_de_trajets_SVG">Utilisation de trajets SVG</h3>
+
+<p>Une autre fonctionnalité puissante de la nouvelle API <code>Path2D</code> de canevas est l'utilisation de <a href="https://developer.mozilla.org/fr-FR/docs/Web/SVG/Tutorial/Paths">données de trajet SVG</a> pour initialiser des trajets sur votre canevas. Cela peut vous permettre de faire circuler des données de trajet et les réutiliser, à la fois en SVG et dans un canevas.</p>
+
+<p>Le trajet se déplacera au point (<code>M10 10</code>) et se déplacera alors de 80 points horizontalement vers la droite (<code>h 80</code>), ensuite de 80 points vers le bas (<code>v 80</code>), puis de 80 points vers la gauche (<code>h -80</code>), et reviendra alors au départ (<code>z</code>). Vous pouvez voir cet exemple sur la page du <a href="https://developer.mozilla.org/en-US/docs/Web/API/Path2D.Path2D#Using_SVG_paths">constructeur P<code>ath2D</code></a>.</p>
+
+<pre class="notranslate"><code>var p = new Path2D("M10 10 h 80 v 80 h -80 Z");</code></pre>
+
+<p>{{PreviousNext("Tutoriel_canvas/Utilisation_de_base", "Tutoriel_canvas/Ajout_de_styles_et_de_couleurs")}}</p>
diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/hit_regions_and_accessibility/index.html b/files/fr/web/api/canvas_api/tutoriel_canvas/hit_regions_and_accessibility/index.html
new file mode 100644
index 0000000000..59a4d1ce35
--- /dev/null
+++ b/files/fr/web/api/canvas_api/tutoriel_canvas/hit_regions_and_accessibility/index.html
@@ -0,0 +1,97 @@
+---
+title: Hit regions and accessibility
+slug: Web/API/Canvas_API/Tutoriel_canvas/Hit_regions_and_accessibility
+translation_of: Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility
+---
+<div>{{CanvasSidebar}} {{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }}</div>
+
+<div class="summary">L'élément {{HTMLElement("canvas")}} lui-même est juste un bitmap et ne fourni aucune information sur les objets dessinés. Le contenu des canvas n'est pas sujet aux outils d'accessibility comme l'est la sémantique HTML. En général vous devriez éviter d'utiliser les canvas sur les sites ou les applications accessibles. Le marche à suivre suivante peut vous aider à les rendre plus accessibles.</div>
+
+<h2 id="Moyen_de_repli">Moyen de repli</h2>
+
+<p>Le contenu à l'intérieur d'un tag <code>&lt;canvas&gt; ... &lt;/canvas&gt;</code> peut être utilisé comme moyen de secours pour les navigteurs qui ne supportent pas le rendu de canvas. C'est aussi très utile pour les utilisateurs qui utilisent des technologies adaptées (comme les lecteurs d'écran) qui peuvent lire et interpréter les éléments du DOM. Un bon exemple sur <a href="http://www.html5accessibility.com/tests/canvas.html">html5accessibility.com</a> demontre comment cela peut être fait.</p>
+
+<pre class="brush: html notranslate">&lt;canvas&gt;
+  &lt;h2&gt;Shapes&lt;/h2&gt;
+  &lt;p&gt;A rectangle with a black border.
+   In the background is a pink circle.
+   Partially overlaying the &lt;a href="http://en.wikipedia.org/wiki/Circle" onfocus="drawCircle();" onblur="drawPicture();"&gt;circle&lt;/a&gt;.
+   Partially overlaying the circle is a green
+   &lt;a href="http://en.wikipedia.org/wiki/Square" onfocus="drawSquare();" onblur="drawPicture();"&gt;square&lt;/a&gt;
+   and a purple &lt;a href="http://en.wikipedia.org/wiki/Triangle" onfocus="drawTriangle();" onblur="drawPicture();"&gt;triangle&lt;/a&gt;,
+   both of which are semi-opaque, so the full circle can be seen underneath.&lt;/p&gt;
+&lt;/canvas&gt; </pre>
+
+<p>Jetez un oeil à la <a href="https://www.youtube.com/watch?v=ABeIFlqYiMQ">video comment NVDA lit cet exemple par Steve Faulkner</a> (en anglais).</p>
+
+<h2 id="Les_règles_ARIA">Les règles ARIA</h2>
+
+<p>Accessible Rich Internet Applications <strong>(<a href="/en-US/docs/Web/Accessibility/ARIA">ARIA</a>)</strong> (≈ <a href="https://fr.wikipedia.org/wiki/Accessible_Rich_Internet_Applications">Les applications Internet Accessibles Riches)</a> défini des pistes pour rendre le contenu Web et les applications Web plus accessibles pour les personnes ayant un handicap. Vous pouvez utiliser les attributs ARIA pour decrire le comportement et le but de vos éléments canvas. Allez voir <a href="/en-US/docs/Web/Accessibility/ARIA">ARIA</a> et <a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques">les techniques ARIA</a> pour plus d'informations.</p>
+
+<pre class="brush: html notranslate">&lt;canvas id="button" tabindex="0" role="button" aria-pressed="false" aria-label="Start game"&gt;&lt;/canvas&gt;
+</pre>
+
+<h2 id="Zones_cibles_hit_Region">Zones cibles (hit Region)</h2>
+
+<p>Que les coordonnés de la souris soient dans une zone particulière des canvas, est un problème fréquent à résoudre. L'API de la "hit region" vous permet de definir une zone de votre canvas et offre une autre possibilité pour proposer du contenu interactif dans les canvas a destination des outils d'accessibilité. Il permet de rendre la "hit detection" plus simple easier and vous laisser envoyer des événements aux éléments du DOM. L'API a les trois methodes suivantes (qui sont encore expérimentales dans les navigateurs actuel ; reportez-vous au tableau des comptibilités des navigateurs).</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}</dt>
+ <dd>Ajoute une "hit region" au canvas..</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}</dt>
+ <dd>Supprime la "hit region" avec l'<code>id</code> spécifiée venant du canvas.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}</dt>
+ <dd>Retire toutes les "hit regions" du cnavas.</dd>
+</dl>
+
+<p>Vous pouvez ajouter une "hit region" à votre chemin et vérifier la propriété {{domxref("MouseEvent.region")}} pour tester si votre souris entre dans votre région, par exemple.</p>
+
+<pre class="brush: html notranslate">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+&lt;script&gt;
+var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.arc(70, 80, 10, 0, 2 * Math.PI, false);
+ctx.fill();
+ctx.addHitRegion({id: 'circle'});
+
+canvas.addEventListener('mousemove', function(event) {
+  if (event.region) {
+    alert('hit region: ' + event.region);
+  }
+});
+&lt;/script&gt;</pre>
+
+<p>La méthode <code>addHitRegion()</code> accepte aussi une option de <code>control</code> pour envoyer des événement vers un élément (c'est un enfant des canvas):</p>
+
+<pre class="brush: js notranslate">ctx.addHitRegion({control: element});</pre>
+
+<p>Cela peut être utile pour le routage d'éléments {{HTMLElement("input")}}, par exemple. Regardez aussi <a href="http://codepen.io/adobe/pen/BhcmK">codepen demo</a>.</p>
+
+<h2 id="Focus_rings">Focus rings</h2>
+
+<p>Quand on travaille avec le clavier, focus rings (anneaux de mise au point) sont utilies pour aider dans la navigation sur une page. Pour dessiner des "focus ring" dans un dessin de canvas, la propriété <code>drawFocusIfNeeded</code> peut être utilisée.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}} {{experimental_inline}}</dt>
+ <dd>Si un élément donné est ciblé, cette méthode dessine un anneaud de mise ne valeur autoure du chemin courant.</dd>
+</dl>
+
+<p>De plus, la méthode <code>scrollPathIntoView()</code> peut être utilisée pour rendre visible un élément dans une page s'il est ciblé, par exemple.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}} {{experimental_inline}}</dt>
+ <dd>Affiche le chemin courant ou le chemin donné.</dd>
+</dl>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://www.w3.org/WAI/PF/HTML/wiki/Canvas_Accessibility_Use_Cases">Canvas accessibility use cases</a></li>
+ <li><a href="https://www.w3.org/html/wg/wiki/AddedElementCanvas">Canvas element accessibility issues</a></li>
+ <li><a href="http://www.paciellogroup.com/blog/2012/06/html5-canvas-accessibility-in-firefox-13/">HTML5 Canvas Accessibility in Firefox 13 – by Steve Faulkner</a></li>
+ <li><a href="https://html.spec.whatwg.org/multipage/scripting.html#best-practices">Best practices for interactive canvas elements</a></li>
+</ul>
+
+<div>{{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }}</div>
diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/index.html b/files/fr/web/api/canvas_api/tutoriel_canvas/index.html
new file mode 100644
index 0000000000..a430b361bd
--- /dev/null
+++ b/files/fr/web/api/canvas_api/tutoriel_canvas/index.html
@@ -0,0 +1,52 @@
+---
+title: Tutoriel canvas
+slug: Web/API/Canvas_API/Tutoriel_canvas
+tags:
+  - Canvas
+  - Guide
+  - HTML
+  - Tutoriel_canvas
+  - Tutoriels
+translation_of: Web/API/Canvas_API/Tutorial
+---
+<div>{{CanvasSidebar}}</div>
+
+<p><img alt="" src="/@api/deki/files/1232/=Canvas_tut_examples.jpg" style="float: right;"></p>
+
+<p class="summary"><strong><a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/canvas" title="fr/HTML/Canvas"><code>&lt;canvas&gt;</code></a></strong> est un nouvel élément <a href="https://developer.mozilla.org/fr/docs/Web/HTML" title="fr/HTML">HTML</a> qui peut être utilisé pour dessiner des éléments graphiques à l'aide de scripts (habituellement <a href="https://developer.mozilla.org/fr/docs/Glossaire/JavaScript" title="fr/JavaScript">JavaScript</a>). Il permet par exemple de dessiner des graphiques, de réaliser des compositions de photographies ou des animations simples (voire <a href="https://developer.mozilla.org/fr/docs/Un_raycaster_basique_avec_canvas" title="fr/Un_raycaster_basique">pas si simples</a>). Les images à droite montrent quelques exemples d'implémentations utilisant <code>&lt;canvas&gt;</code> que nous verrons plus tard dans ce tutoriel.</p>
+
+<p><span id="result_box" lang="fr"><span>Ce tutoriel explique comment utiliser l'élément <code>&lt;canvas&gt;</code> pour dessiner des graphiques 2D, en commençant par les bases.</span> <span>Les exemples fournis devraient vous donner des idées claires sur ce que vous pouvez faire avec la toile et fournir des extraits de code qui peuvent vous aider à créer votre propre contenu.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span>D'abord introduit dans WebKit par Apple pour le tableau de bord OS X, <code>&lt;canvas&gt;</code> a depuis été implémenté dans les navigateurs.</span> <span>Aujourd'hui, tous les principaux navigateurs le prennent en charge.</span></span></p>
+
+<h2 id="Avant_de_commencer" name="Avant_de_commencer">Avant de commencer</h2>
+
+<p>L'utilisation de l'élément <code>&lt;canvas&gt;</code> n'a rien de très compliqué, mais nécessite tout de même une compréhension de base de <a href="https://developer.mozilla.org/fr/docs/Web/HTML" title="fr/HTML">HTML</a> et <a href="https://developer.mozilla.org/fr/docs/Glossaire/JavaScript" title="fr/JavaScript">JavaScript</a>. L'élément <code>&lt;canvas&gt;</code> n'est pas reconnu par tous les vieux navigateurs, mais il est supporté par les versions les plus récentes des principaux. <span id="result_box" lang="fr"><span>La taille par défaut de </span></span> canvas <span lang="fr"><span> est 300 px × 150 px (largeur × hauteur).</span> <span>Mais les tailles personnalisées peuvent être définies à l'aide des propriétés <a href="https://developer.mozilla.org/fr/docs/Web/HTML">HTML</a> <code>height</code> et <code>width</code>.</span> <span>Afin de dessiner des graphiques sur </span></span> canvas <span lang="fr"><span>, nous utilisons un objet de contexte JavaScript, qui crée des graphiques à la volée.</span></span></p>
+
+<h2 id="Dans_ce_tutoriel" name="Dans_ce_tutoriel">Dans ce tutoriel</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Utilisation_de_base" title="fr/Tutoriel_canvas/Utilisation_de_base">Utilisation de base</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Formes_g%C3%A9om%C3%A9triques" title="fr/Tutoriel_canvas/Formes_géométriques">Dessin de formes géométriques</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Ajout_de_styles_et_de_couleurs" title="fr/Tutoriel_canvas/Ajout_de_styles_et_de_couleurs">Ajout de styles et de couleurs</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Dessin_de_texte_avec_canvas">Dessin de texte</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Utilisation_d'images" title="fr/Tutoriel_canvas/Utilisation_d'images">Utilisation d'images</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Transformations" title="fr/Tutoriel_canvas/Transformations">Transformations</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Canvas_API/Tutorial/Compositing" title="fr/Tutoriel_canvas/Compositions">Compositions et découpage</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Animations_basiques" title="fr/Tutoriel_canvas/Animations_basiques">Animations basiques</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Advanced_animations">Animations avancées</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Pixel_manipulation_with_canvas">Manipulation des pixels</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">Régions touchées et accessibilité</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Optimizing_canvas" title="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas">Optimisation</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Canvas_API/Tutorial/Finale">Final</a></li>
+</ul>
+
+<h2 id="Voir_aussi" name="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/HTML/Canvas" title="fr/HTML/Canvas">Page du sujet canvas</a></li>
+ <li><a class="external external-icon" href="http://www.html5canvastutorials.com/" title="http://www.html5canvastutorials.com/">HTML5CanvasTutorials</a> (en)</li>
+ <li><a href="/Special:Tags?tag=Exemples_d'utilisation_de_canvas&amp;language=fr" title="Special:Tags?tag=Exemples_d'utilisation_de_canvas&amp;language=fr">Exemples d'utilisation de canvas</a> (en)</li>
+</ul>
+
+<p>{{ Next("Tutoriel_canvas/Utilisation_de_base") }}</p>
diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/optimizing_canvas/index.html b/files/fr/web/api/canvas_api/tutoriel_canvas/optimizing_canvas/index.html
new file mode 100644
index 0000000000..d8e6e8383c
--- /dev/null
+++ b/files/fr/web/api/canvas_api/tutoriel_canvas/optimizing_canvas/index.html
@@ -0,0 +1,112 @@
+---
+title: Optimiser les Canvas
+slug: Web/API/Canvas_API/Tutoriel_canvas/Optimizing_canvas
+translation_of: Web/API/Canvas_API/Tutorial/Optimizing_canvas
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}</div>
+
+<div class="summary">
+<p>L'élément {{HTMLElement("canvas")}} est l'un des standards les plus utilisés pour le rendu graphique 2D sur le web. Il est surtout utilisé dans les jeux et les visualisations complexes. Cependant, les sites et applications web poussent les canvas à leurs limites, et les performances commencent à en pâtir. Cet article propose des suggestions pour optimiser votre utilisation de l'élément canvas, et pour être certain que votre site ou application web fonctionne bien.</p>
+</div>
+
+<h2 id="Conseils_sur_les_performances">Conseils sur les performances</h2>
+
+<p>Ceci est une liste de conseils pour améliorer les performances</p>
+
+<h3 id="Pré-rendre_les_primitifs_similaires_ou_répéter_les_objects_dans_un_canvas_hors-champ">Pré-rendre les primitifs similaires ou répéter les objects dans un canvas hors-champ</h3>
+
+<p>Si vous avez besoin d'ajouter un dessin complexe identique à chaque image rendue, préférez l'utilisation d'un canvas hors-champ, le rendre une fois (ou à chaque fois qu'il change) sur ce canvas, puis dessinez-le sur le canvas principal à chaque image rendue.</p>
+
+<pre class="brush: js notranslate">myEntity.offscreenCanvas = document.createElement("canvas");
+myEntity.offscreenCanvas.width = myEntity.width;
+myEntity.offscreenCanvas.height = myEntity.height;
+myEntity.offscreenContext = myEntity.offscreenCanvas.getContext("2d");
+
+myEntity.render(myEntity.offscreenContext);
+</pre>
+
+<h3 id="Abandonnez_les_coordonnées_décimales_et_utilisez_des_entiers_à_la_place">Abandonnez les coordonnées décimales et utilisez des entiers à la place</h3>
+
+<p>Un rendu de sous-pixel est opéré quand on dessine des objets sur un canvas sans valeur entière.</p>
+
+<pre class="brush: js notranslate">ctx.drawImage(myImage, 0.3, 0.5);
+</pre>
+
+<p>Cela pousse le navigateur à faire des calculs supplémentaires pour créer un effet d'anti-crénelage. Pour empêcher cela, il faut s'assurer d'arrondir les coordonnées utilisées pour {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}}.</p>
+
+<h3 id="Ne_pas_redimensionner_dimages_avec_drawImage">Ne pas redimensionner d'images avec <code>drawImage</code></h3>
+
+<p>Préférez mettre en cache plusieurs dimensions de votre image dans un canvas hors-champ au lieu de les redimensionner constamment avec {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}}.</p>
+
+<h3 id="Utiliser_des_canvas_empilés_pour_les_scènes_complexes">Utiliser des canvas empilés pour les scènes complexes</h3>
+
+<p>Pour des scènes complexes, on peut souvent remarquer que quelques éléments changent souvent tandis que d'autres ne changent jamais. Une optimisation possible dans ce cas consiste à utiliser plusieurs calques sous forme de canvas empilés.</p>
+
+<p>Par exemple, on peut créer un calque UI, dessiné au-dessus de tous les autres uniquement lorsque l'utilisateur accède à un menu. En dessous, un calque <em>jeu</em> où les entités du jeu sont souvent mises à jour. Et, à l'arrière, un calque de fond rarement modifié.</p>
+
+<pre class="brush: html notranslate">&lt;div id="stage"&gt;
+  &lt;canvas id="ui-layer" width="480" height="320"&gt;&lt;/canvas&gt;
+  &lt;canvas id="game-layer" width="480" height="320"&gt;&lt;/canvas&gt;
+  &lt;canvas id="background-layer" width="480" height="320"&gt;&lt;/canvas&gt;
+&lt;/div&gt;
+
+&lt;style&gt;
+  #stage {
+    width: 480px;
+    height: 320px;
+    position: relative;
+    border: 2px solid black
+  }
+  canvas { position: absolute; }
+  #ui-layer { z-index: 3 }
+  #game-layer { z-index: 2 }
+  #background-layer { z-index: 1 }
+&lt;/style&gt;
+</pre>
+
+<h3 id="Du_CSS_pour_les_grandes_images_de_fond">Du CSS pour les grandes images de fond</h3>
+
+<p>Si comme pour la plupart des jeux, vous utilisez une image de fond statique, préférez utiliser un simple {{HTMLElement("div")}} en dessous du canvas avec les propriétés CSS {{cssxref("background")}} appropriées. Cela vous évitera de redessiner une grande image dans le canvas à chaque tick.</p>
+
+<h3 id="Redimensionner_les_canvas_avec_CSS_transform">Redimensionner les canvas avec CSS transform</h3>
+
+<p><a href="/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS">Les transformations CSS</a> sont plus rapides car elles utilisent le GPU. Le mieux est d'utiliser un canvas plus grand et de réduire sa taille. Pour Firefox OS, les dimensions sont de 480 x 320 px.</p>
+
+<pre class="brush: js notranslate">var scaleX = window.innerWidth / canvas.width;
+var scaleY = window.innerHeight / canvas.height;
+
+var scaleToFit = Math.min(scaleX, scaleY);
+var scaleToCover = Math.max(scaleX, scaleY);
+
+stage.style.transformOrigin = "0 0"; //scale from top left
+stage.style.transform = "scale(" + scaleToFit + ")";
+</pre>
+
+<h3 id="Utiliser_lattribut_moz-opaque_Gecko_only">Utiliser l'attribut <code>moz-opaque</code> (Gecko only)</h3>
+
+<p>Si le canvas n'a pas besoin de transparence, ajouter l'attribut <code>moz-opaque</code> dans la balise canvas. Cette information peut être utilisée par le navigateur pour optimiser le rendu.</p>
+
+<pre class="brush: html notranslate">&lt;canvas id="mycanvas" moz-opaque&gt;&lt;/canvas&gt;</pre>
+
+<h3 id="Dautres_conseils">D'autres conseils</h3>
+
+<ul>
+ <li>Regrouper les appels canevas (par exemple, dessiner un chemin de plusieurs lignes plutôt que plusieurs lignes séparées).</li>
+ <li>Éviter de refaire un rendu si ce n'est pas nécessaire.</li>
+ <li>Rendre uniquement les différences, pas tout le canvas.</li>
+ <li>Éviter la propriété {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}} quand c'est possible.</li>
+ <li>Empêcher <a href="/fr/docs/Dessin_de_texte_avec_canvas">le rendu de texte</a> quand c'est possible.</li>
+ <li>Essayer différents moyens d'effacer le canvas : ({{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}} vs. {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} vs. redimensionner le canevas).</li>
+ <li>Avec les animations, utiliser {{domxref("window.requestAnimationFrame()")}} plutôt que {{domxref("window.setInterval()")}}.</li>
+ <li>Faire attention aux bibliothèques physiques lourdes.</li>
+ <li>Tester les performances avec <a href="http://jsperf.com" title="http://jsperf.com">JSPerf</a>.</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="http://www.html5rocks.com/en/tutorials/canvas/performance/#toc-ref">Improving HTML5 Canvas Performance – HTML5 Rocks</a></li>
+ <li><a href="https://hacks.mozilla.org/2013/05/optimizing-your-javascript-game-for-firefox-os/">Optimizing your JavaScript game for Firefox OS – Mozilla Hacks</a></li>
+</ul>
+
+<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}</p>
diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/pixel_manipulation_with_canvas/index.html b/files/fr/web/api/canvas_api/tutoriel_canvas/pixel_manipulation_with_canvas/index.html
new file mode 100644
index 0000000000..a2182f43c1
--- /dev/null
+++ b/files/fr/web/api/canvas_api/tutoriel_canvas/pixel_manipulation_with_canvas/index.html
@@ -0,0 +1,258 @@
+---
+title: Manipulation de pixels avec canvas
+slug: Web/API/Canvas_API/Tutoriel_canvas/Pixel_manipulation_with_canvas
+translation_of: Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Advanced_animations", "Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility")}}</div>
+
+<div class="summary">
+<p>Jusqu'à présent, nous n'avons pas examiné dans le détail les pixels réels de notre canevas. Avec l'objet ImageData, vous pouvez directement lire et écrire dans le tableau de données de l'image, pour manipuler les pixels un par un. Nous verrons également comment le lissage (anticrénelage) de l'image peut être contrôlé et comment sauvegarder des images depuis votre canevas.</p>
+</div>
+
+<h2 id="Lobjet_ImageData">L'objet <code>ImageData</code></h2>
+
+<p>L'objet {{domxref("ImageData")}} représente les données de pixels sous-jacentes à une zone d'un objet canevas. Il contient les attributs (en lecture seule) suivants :</p>
+
+<dl>
+ <dt><code>width</code></dt>
+ <dd>La largeur de l'image en pixels.</dd>
+ <dt><code>height</code></dt>
+ <dd>La hauteur de l'image en pixels.</dd>
+ <dt><code>data</code></dt>
+ <dd>Un {{jsxref("Uint8ClampedArray")}} représentant un tableau monodimensionnel contenant les données dans l'ordre RVBA, ayant des valeurs entières entre 0 et  255 (inclus).</dd>
+</dl>
+
+<p>La propriété <code>data</code> retourne un tableau {{jsxref("Uint8ClampedArray")}} auquel on peut accéder pour voir plus en détail les données brutes des pixels ; chaque pixel est représenté par quatre valeurs sur un octet (rouge, vert, bleu et alpha, dans cet ordre ; c'est-à-dire, le format "RVBA").  Chaque composante de couleur est représentée par un entier entre 0 et 255. Chaque composante reçoit un indice à l'intérieur du tableau, la composante rouge du pixel supérieur gauche étant à l'indice 0 à l'intérieur du tableau. Les pixels continuent ensuite de gauche à droite, puis vers le bas, jusqu'au bout du tableau.</p>
+
+<p>Le {{jsxref("Uint8ClampedArray")}} contient <code>height</code><em>(hauteur)</em> × <code>width</code><em>(largeur)</em>  × 4 octets, dont les valeurs d'indices vont de 0 à (<code>height</code>×<code>width</code>×4)-1.</p>
+
+<p>Par exemple, pour lire la valeur de la composante bleue d'un pixel situé en colonne 200, ligne 50  de l'image, vous pouvez faire ce qui suit :</p>
+
+<pre class="brush: js notranslate">composanteBleue = imageData.data[((50 * (imageData.width * 4)) + (200 * 4)) + 2];</pre>
+
+<p>Vous pouvez accéder à la taille en octets du tableau de pixels en lisant l'attribut <code>Uint8ClampedArray.length</code> :</p>
+
+<pre class="brush: js notranslate">var nbOctets = imageData.data.length;
+</pre>
+
+<h2 id="Création_dun_objet_ImageData">Création d'un objet <code>ImageData</code></h2>
+
+<p>Pour créer un nouvel objet <code>ImageData</code> vierge, vous pouvez utiliser la méthode  {{domxref("CanvasRenderingContext2D.createImageData", "createImageData()")}}. Il existe deux versions de la méthode <code>createImageData() </code>:</p>
+
+<pre class="brush: js notranslate">var monImageData = ctx.createImageData(largeur, hauteur);</pre>
+
+<p>Cela crée un nouvel objet <code>ImageData</code> avec les dimensions spécifiées. Tous les pixels sont prédéfinis comme étant noirs transparents.</p>
+
+<p>Vous pouvez aussi créer un nouvel objet <code>ImageData</code> ayant les mêmes dimensions que celles de l'objet indiqué par <code>autreImageData</code>. Les pixels du nouvel objet sont tous prédéfinis comme étant noirs transparents. <strong>Cela ne copie pas les données d'image !</strong></p>
+
+<pre class="brush: js notranslate">var monImageData = ctx.createImageData(autreImageData);</pre>
+
+<h2 id="Obtention_des_données_pixel_pour_un_contexte">Obtention des données pixel pour un contexte</h2>
+
+<p>Pour obtenir un objet  <code>ImageData</code> contenant une copie des données pixel pour un contexte de canevas, vous pouvez utiliser la méthode <code>getImageData()</code> :</p>
+
+<pre class="brush: js notranslate">var monImageData = ctx.getImageData(gauche, haut, largeur, hauteur);</pre>
+
+<p>Cette méthode retourne un objet <code>ImageData</code> représentant les données pixel pour la zone du canevas dont les coins sont représentés par les points  (<code>left</code>,<code>top</code>) <em><code> (gauche,haut)</code></em>, (<code>left+width</code>, <code>top</code>) <em>(gauche+largeur, haut)</em>, (<code>left</code>, <code>top+height</code>)<em> (gauche, haut+hauteur)</em> et  (<code>left+width</code>, <code>top+height</code>) <em>(gauche+largeur, haut+hauteur)</em>. Les coordonnées sont spécifiées en unités d'espace de coordonnées du canevas.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Tous les pixels en dehors du canevas seront retournés comme noirs transparents dans l'objet <code>ImageData</code> résultant.</p>
+</div>
+
+<p>Cette méthode est aussi présentée dans l'article <a href="https://developer.mozilla.org/fr/docs/HTML/Manipulating_video_using_canvas">Manipulation vidéo utilisant canvas</a>.</p>
+
+<h3 id="Une_pipette_à_couleur">Une pipette à couleur</h3>
+
+<p>Dans cet exemple, nous utilisons la méthode <a href="https://developer.mozilla.org/fr/docs/Web/API/CanvasRenderingContext2D/getImageData">getImageData() </a>pour afficher la couleur en dessous du curseur de la souris. Pour cela, nous avons besoin de la position en cours de la souris donnée par <code>layerX</code> et <code>layerY</code>, nous recherchons ensuite les données pixel à cette position dans le tableau de pixels que <a href="https://developer.mozilla.org/fr/docs/Web/API/CanvasRenderingContext2D/getImageData">getImageData()</a> nous fournit. Finalement, nous utilisons les données du tableau pour définir une couleur d'arrière-plan et un texte dans le <code>&lt;div&gt;</code> pour afficher la couleur.</p>
+
+<div class="hidden">
+<pre class="brush: html; notranslate">&lt;canvas id="canvas" width="300" height="227" style="float:left"&gt;&lt;/canvas&gt;
+&lt;div id="color" style="width:200px;height:50px;float:left"&gt;&lt;/div&gt;
+</pre>
+</div>
+
+<pre class="notranslate"><code>var img = new Image();
+img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
+var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+img.onload = function() {
+  ctx.drawImage(img, 0, 0);
+  img.style.display = 'none';
+};
+var color = document.getElementById('color');
+function pick(event) {
+  var x = event.layerX;
+  var y = event.layerY;
+  var pixel = ctx.getImageData(x, y, 1, 1);
+  var data = pixel.data;
+  var rgba = 'rgba(' + data[0] + ', ' + data[1] +
+             ', ' + data[2] + ', ' + (data[3] / 255) + ')';
+  color.style.background =  rgba;
+  color.textContent = rgba;
+}
+canvas.addEventListener('mousemove', pick);</code></pre>
+
+<p>{{ EmbedLiveSample('A_color_picker', 610, 240) }}</p>
+
+<h2 id="Peinture_des_données_pixel_dans_un_contexte">Peinture des données pixel dans un contexte</h2>
+
+<p>Vous pouvez utiliser la méthode <a href="https://developer.mozilla.org/fr/docs/Web/API/CanvasRenderingContext2D/putImageData">putImageData() </a>pour peindre les données pixel dans un contexte :</p>
+
+<pre class="brush: js notranslate">ctx.putImageData(monImageData, dx, dy);
+</pre>
+
+<p>Les paramètres <code>dx</code> et <code>dy</code> indiquent les coordonnées système dans le contexte du coin supérieur gauche des données pixel qui doivent être peintes.</p>
+
+<p>Par exemple, pour peindre l'image entière représentée par <code>monImageData</code> dans le coin supérieur gauche du contexte, vous pouvez simplement faire ce qui suit :</p>
+
+<pre class="brush: js notranslate">ctx.putImageData(monImageData, 0, 0);
+</pre>
+
+<h3 id="Niveaux_de_gris_et_inversion_de_couleurs">Niveaux de gris et inversion de couleurs</h3>
+
+<p>Dans cet exemple, nous itérons sur tous les pixels pour changer leurs valeurs, puis nous remettons le tableau de pixels modifié sur le canevas à l'aide de <a href="/fr-FR/docs/Web/API/CanvasRenderingContext2D/putImageData">putImageData()</a>. La fonction inversion soustrait simplement chaque couleur de la valeur maximale 255. La fonction  grayscale <em>(niveaux de gris)</em> fait simplement la moyenne du rouge, du vert et du bleu. Vous pouvez également utiliser une moyenne pondérée, donnée par la formule x = 0.299r + 0.587v + 0.114b, par exemple. Voir <a href="https://fr.wikipedia.org/wiki/Niveau_de_gris">Niveaux de gris</a> sur Wikipedia pour plus d'informations.</p>
+
+<div class="hidden">
+<pre class="brush: html; notranslate">&lt;canvas id="canevas" width="300" height="227"&gt;&lt;/canvas&gt;
+&lt;div&gt;
+  &lt;input id="btnniveaudegris" value="Niveau de gris" type="button"&gt;
+  &lt;input id="btninversion" value="Inversion" type="button"&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<pre class="brush: js notranslate">var img = new Image();
+img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
+img.onload = function() {
+  dessiner(this);
+};
+
+function dessiner(img) {
+  var canevas = document.getElementById('canevas');
+  var ctx = canevas.getContext('2d');
+  ctx.drawImage(img, 0, 0);
+  img.style.display = 'none';
+  var imageData = ctx.getImageData(0, 0, canevas.width, canevas.height);
+  var data = imageData.data;
+
+  var inversion = function() {
+    for (var i = 0; i &lt; data.length; i += 4) {
+      data[i]     = 255 - data[i];     // rouge
+      data[i + 1] = 255 - data[i + 1]; // vert
+      data[i + 2] = 255 - data[i + 2]; // bleu
+    }
+    ctx.putImageData(imageData, 0, 0);
+  };
+
+  var niveaudegris = function() {
+    for (var i = 0; i &lt; data.length; i += 4) {
+      var moy = (data[i] + data[i + 1] + data[i + 2]) / 3;
+      data[i]     = moy; // rouge
+      data[i + 1] = moy; // vert
+      data[i + 2] = moy; // bleu
+    }
+    ctx.putImageData(imageData, 0, 0);
+  };
+
+  var btninversion = document.getElementById('btninversion');
+  btninversion.addEventListener('click', inversion);
+  var btnniveaudegris = document.getElementById('btnniveaudegris');
+  btnniveaudegris.addEventListener('click', niveaudegris);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Grayscaling_and_inverting_colors', 330, 270) }}</p>
+
+<h2 id="Zoom_et_anticrénelage">Zoom et anticrénelage</h2>
+
+<p><span id="result_box" lang="fr"><span>A l'aide de la méthode {{domxref ("CanvasRenderingContext2D.drawImage", "drawImage ()")}}, un deuxième canevas, et la propriété </span></span> {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}} , nous pouvons<span lang="fr"><span> zoomer sur notre image et voir les détails.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span>Nous obtenons la position de la souris et recadrons une image de 5 pixels à gauche et au-dessus à 5 pixels à droite et en-dessous.</span> <span>Ensuite, nous copions celle-ci sur un autre canevas et redimensionnons l'image à la taille que nous voulons.</span> <span>Dans la zone de zoom, nous redimensionnons une zone de 10 × 10 pixels du canevas d'origine à 200 × 200.</span></span></p>
+
+<pre class="brush: js notranslate">zoomctx.drawImage(canvas,
+                  Math.abs(x - 5), Math.abs(y - 5),
+                  10, 10, 0, 0, 200, 200);</pre>
+
+<p><span id="result_box" lang="fr"><span>Étant donné que l'anticrénelage est activé par défaut, nous pouvons désactiver le lissage pour voir les pixels clairs.</span> <span>Vous pouvez basculer la case à cocher pour voir l'effet de la propriété <code>imageSmoothingEnabled</code> (qui a besoin de préfixes pour différents navigateurs).</span></span></p>
+
+<h6 class="hidden" id="Zoom_example">Zoom example</h6>
+
+<div class="hidden">
+<pre class="brush: html; notranslate">&lt;canvas id="canvas" width="300" height="227"&gt;&lt;/canvas&gt;
+&lt;canvas id="zoom" width="300" height="227"&gt;&lt;/canvas&gt;
+&lt;div&gt;
+&lt;label for="smoothbtn"&gt;
+  &lt;input type="checkbox" name="smoothbtn" checked="checked" id="smoothbtn"&gt;
+  Enable image smoothing
+&lt;/label&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<pre class="brush: js notranslate">var img = new Image();
+img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
+img.onload = function() {
+  draw(this);
+};
+
+function draw(img) {
+  var canvas = document.getElementById('canvas');
+  var ctx = canvas.getContext('2d');
+  ctx.drawImage(img, 0, 0);
+  img.style.display = 'none';
+  var zoomctx = document.getElementById('zoom').getContext('2d');
+
+  var smoothbtn = document.getElementById('smoothbtn');
+  var toggleSmoothing = function(event) {
+    zoomctx.imageSmoothingEnabled = this.checked;
+    zoomctx.mozImageSmoothingEnabled = this.checked;
+    zoomctx.webkitImageSmoothingEnabled = this.checked;
+    zoomctx.msImageSmoothingEnabled = this.checked;
+  };
+  smoothbtn.addEventListener('change', toggleSmoothing);
+
+  var zoom = function(event) {
+    var x = event.layerX;
+    var y = event.layerY;
+    zoomctx.drawImage(canvas,
+                      Math.abs(x - 5),
+                      Math.abs(y - 5),
+                      10, 10,
+                      0, 0,
+                      200, 200);
+  };
+
+  canvas.addEventListener('mousemove', zoom);
+}</pre>
+
+<p>{{ EmbedLiveSample('Zoom_example', 620, 490) }}</p>
+
+<h2 id="Sauvegarde_des_images">Sauvegarde des images</h2>
+
+<p><span id="result_box" lang="fr"><span>L' {{domxref ("HTMLCanvasElement")}} fournit une méthode <code>toDataURL ()</code>, utile lors de l'enregistrement d'images.</span> <span>Il retourne un <a href="https://developer.mozilla.org/fr/docs/Web/HTTP/Basics_of_HTTP/Data_URIs">URI de données</a> contenant une représentation de l'image dans le format spécifié par le paramètre de <code>type</code> (par défaut en </span></span> <a class="external external-icon" href="https://en.wikipedia.org/wiki/Portable_Network_Graphics">PNG</a> <span lang="fr"><span>).</span> <span>L'image renvoyée est dans une résolution de 96 dpi.</span></span></p>
+
+<dl>
+ <dt>{{domxref("HTMLCanvasElement.toDataURL", "canvas.toDataURL('image/png')")}}</dt>
+ <dd>Par défaut. Crée un image PNG.</dd>
+ <dt>{{domxref("HTMLCanvasElement.toDataURL", "canvas.toDataURL('image/jpeg', quality)")}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Crée une image JPG.</span> <span>En option, vous pouvez fournir une qualité comprise entre 0 et 1, 1 étant de la meilleure qualité et 0 presque non reconnaissable mais de petite taille.</span></span></dd>
+</dl>
+
+<p><span id="result_box" lang="fr"><span>Une fois que vous avez généré un URI de données à partir de votre canevas, vous pouvez l'utiliser comme source de {{HTMLElement ("image")}} ou le mettre dans un lien hypertexte avec un attribut de téléchargement pour l'enregistrer sur le disque par exemple.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span>Vous pouvez également créer un {{domxref ("Blob")}} à partir du canevas.</span></span></p>
+
+<dl>
+ <dt>{{domxref("HTMLCanvasElement.toBlob", "canvas.toBlob(callback, type, encoderOptions)")}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Crée un objet <code>Blob</code> représentant l'image contenue dans le canevas.</span></span></dd>
+</dl>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("ImageData")}}</li>
+ <li><a href="https://developer.mozilla.org/fr/docs/HTML/Manipulating_video_using_canvas">Manipulating video using canvas</a></li>
+ <li><a href="https://codepo8.github.io/canvas-images-and-pixels/">Canevas, images et pixels – par Christian Heilmann (en)</a></li>
+</ul>
+
+<p>{{PreviousNext("Tutoriel_canvas/Advanced_animations", "Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility")}}</p>
diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/transformations/index.html b/files/fr/web/api/canvas_api/tutoriel_canvas/transformations/index.html
new file mode 100644
index 0000000000..bf21fab4c8
--- /dev/null
+++ b/files/fr/web/api/canvas_api/tutoriel_canvas/transformations/index.html
@@ -0,0 +1,276 @@
+---
+title: Transformations
+slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations
+tags:
+  - Canvas
+  - Graphismes
+  - Guide
+  - HTML
+  - Web
+translation_of: Web/API/Canvas_API/Tutorial/Transformations
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Utilisation_d'images", " Web/API/Canvas_API/Tutorial/Compositing ")}}</div>
+
+<div class="summary">Précédemment dans ce tutoriel, nous avons étudié la <a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Formes_g%C3%A9om%C3%A9triques">grille du canevas</a> et le <strong>système de coordonnées</strong>. Jusqu'à maintenant, nous avons uniquement utilisé la grille par défaut et modifié la taille de la globalité du canevas afin de répondre à nos besoins. Les transformations que nous allons aborder dans la suite vont nous permettre, de manière plus puissante, d'effectuer des déplacements et des rotations sur la grille et même d'effectuer des mises à l'échelle.</div>
+
+<h2 id="Sauvegarde_et_restauration_détat">Sauvegarde et restauration d'état</h2>
+
+<p>Avant d'étudier les méthodes de transformations, examinons deux autres méthodes qui vont être indispensables à partir du moment où l'on commence à créer des dessins complexes.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.save", "save()")}}</dt>
+ <dd>Sauvegarde l'état du canevas dans sa globalité.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.restore", "restore()")}}</dt>
+ <dd>Restore le plus récent état sauvegardé du canevas.</dd>
+</dl>
+
+<p>Les états du canevas sont stockés dans une pile. Chaque invocation de la méthode <code>save() </code>ajoute une copie de l'état courant du canevas en haut de la pile. L'état du dessin est constitué de :</p>
+
+<ul>
+ <li>les transformations qui ont été appliquées (exemples : déplacement, rotation, mise à l'échelle).</li>
+ <li>Les valeurs actuelles des attributs suivants : {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}}, {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}}, {{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha")}}, {{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth")}}, {{domxref("CanvasRenderingContext2D.lineCap", "lineCap")}}, {{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin")}}, {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}}, {{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset")}}, {{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX")}}, {{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY")}}, {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}, {{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor")}}, {{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation")}}, {{domxref("CanvasRenderingContext2D.font", "font")}}, {{domxref("CanvasRenderingContext2D.textAlign", "textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline")}}, {{domxref("CanvasRenderingContext2D.direction", "direction")}}, {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}}.</li>
+ <li>Le chemin de découpe (<a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing#Clipping_paths">clipping path</a>) actuel, qu'on abordera plus loin.</li>
+</ul>
+
+<p>La méthode <code>save()</code> peut être invoquée autant de fois que nécessaire. Chaque appel de <code>restore()</code> enlève le dernier état sauvegardé de la pile et tous les paramètres sauvegardés sont restaurés.</p>
+
+<h3 id="Un_exemple_de_sauvegarde_et_de_restauration_de_l_état_du_canevas">Un exemple de sauvegarde et de restauration de l état du canevas</h3>
+
+<p>Cet exemple tente d'illustrer comment fonctionne la pile d'états de dessin en dessinant un ensemble de rectangles consécutifs.</p>
+
+<pre class="brush: js; highlight:[5,10,15,18] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.fillRect(0, 0, 150, 150);   // Dessine un rectangle avec les réglages par défaut
+  ctx.save();                  // Sauvegarde l'état par défaut
+
+  ctx.fillStyle = '#09F';      // Fait des changements de réglages
+  ctx.fillRect(15, 15, 120, 120); // Dessine un rectangle avec les nouveaux réglages
+
+  ctx.save();                  // Sauvegarde l'état actuel
+  ctx.fillStyle = '#FFF';      // Fait des changements de réglages
+  ctx.globalAlpha = 0.5;
+  ctx.fillRect(30, 30, 90, 90);   // Dessine un rectangle avec de nouveaux réglages
+
+  ctx.restore();               // Restaure l'état précédent
+  ctx.fillRect(45, 45, 60, 60);   // Dessine un rectangle avec les réglages restaurés
+
+  ctx.restore();               // Restaure l'état d'origine
+  ctx.fillRect(60, 60, 30, 30);   // Dessine un rectangle avec les réglages restaurés
+}</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>La première étape consiste à dessiner un grand rectangle avec les paramètres par défaut. Ensuite, nous sauvegardons cet état et modifions la couleur de remplissage. Nous dessinons ensuite le deuxième rectangle bleu et mettons l'état de côté. Encore une fois, nous modifions certains paramètres de dessin et dessinons le troisième rectangle blanc semi-transparent.</p>
+
+<p>Jusqu'à présent, cela ressemble beaucoup à ce que nous avons fait dans les sections précédentes. Cependant, une fois que nous appelons la première instruction <code>restore()</code>, l'état de dessin supérieur est supprimé de la pile et les paramètres sont restaurés. Si nous n'avions pas sauvegardé l'état en utilisant <code>save ()</code>, nous devrions modifier manuellement la couleur de remplissage et la transparence afin de revenir à l'état précédent. Cela serait facile pour deux propriétés, mais si nous avons plus que cela, notre code deviendrait très long très rapidement.</p>
+
+<p>Lorsque la deuxième instruction <code>restore()</code> est appelée, l'état d'origine (celui que nous avons configuré avant le premier appel à enregistrer) est restauré et le dernier rectangle est de nouveau tracé en noir.</p>
+
+<p>{{EmbedLiveSample("Un_exemple_de_sauvegarde_et_de_restauration_de_l_état_du_canevas", "180", "180", "https://mdn.mozillademos.org/files/249/Canvas_savestate.png")}}</p>
+
+<h2 id="Déplacement">Déplacement</h2>
+
+<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/234/Canvas_grid_translate.png" style="float: right;"> La première des méthodes de transformation que nous examinerons est <code>translate ()</code>. Cette méthode est utilisée pour déplacer la toile et son origine vers un autre point de la grille.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.translate", "translate(x, y)")}}</dt>
+ <dd>Déplace la toile et son origine sur la grille. <code>x</code> indique la distance horizontale du déplacement, et <code>y</code> indique à quelle distance déplacer la grille verticalement.</dd>
+</dl>
+
+<p>C'est une bonne idée de sauvegarder l'état du canevas avant d'effectuer des transformations. Dans la plupart des cas, il est plus facile d'appeler la méthode <code>restore</code> que d'avoir à effectuer un déplacement inverse pour revenir à l'état d'origine. De même, si vous déplacez à l'intérieur d'une boucle et que vous ne sauvegardez pas et ne restaurez pas l'état du canevas, il se peut qu'une partie de votre dessin soit manquante, car elle a été dessinée en dehors du bord du canevas.</p>
+
+<h3 id="Un_exemple_translate">Un exemple <code>translate</code></h3>
+
+<p>Cet exemple montre certains des avantages du déplacement de l'origine du canevas. Sans la méthode<code> translate ()</code>, tous les rectangles seraient dessinés à la même position (0,0). La méthode <code>translate ()</code> nous donne également la liberté de placer le rectangle n'importe où sur le canevas sans avoir à ajuster manuellement les coordonnées dans la fonction <code>fillRect ()</code>. Cela le rend un peu plus facile à comprendre et à utiliser.</p>
+
+<p>Dans la fonction <code>draw ()</code>, nous appelons la fonction <code>fillRect ()</code> neuf fois en utilisant deux boucles <code>for</code> . Dans chaque boucle, le canevas est déplacé, le rectangle est dessiné et le canevas est retourné à son état d'origine. Notez comment l'appel à <code>fillRect ()</code> utilise les mêmes coordonnées à chaque fois, en s'appuyant sur <code>translate ()</code> pour ajuster la position du dessin.</p>
+
+<pre class="brush: js; highlight:[7] language-js notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  for (var i = 0; i &lt; 3; i++) {
+    for (var j = 0; j &lt; 3; j++) {
+      ctx.save();
+      ctx.fillStyle = 'rgb(' + (51 * i) + ', ' + (255 - 51 * i) + ', 255)';
+      ctx.translate(10 + j * 50, 10 + i * 50);
+      ctx.fillRect(0, 0, 25, 25);
+      ctx.restore();
+    }
+  }
+}</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("Un_exemple_translate", "160", "160", "https://mdn.mozillademos.org/files/9857/translate.png")}}</p>
+
+<h2 id="Rotation">Rotation</h2>
+
+<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/233/Canvas_grid_rotate.png" style="float: right;">La seconde méthode de transformation est <code>rotate()</code>. Nous l'utilisons pour faire pivoter le canevas autour de l'origine actuelle.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.rotate", "rotate(angle)")}}</dt>
+ <dd>Fait pivoter le canevas, dans le sens des aiguilles d'une montre autour de l'origine actuelle, par le nombre de radians de l'angle.</dd>
+</dl>
+
+<p>Le point central de rotation est toujours l'origine de la toile. Pour changer le point central, nous devrons déplacer le canevas en utilisant la méthode <code>translate ()</code>.</p>
+
+<h3 id="Un_exemple_rotate">Un exemple <code>rotate</code></h3>
+
+<p>Dans cet exemple, nous utiliserons la méthode <code>rotate ()</code> pour faire d'abord tourner un rectangle à partir de l'origine du canevas, puis du centre du rectangle lui-même à l'aide de <code>translate ()</code>.</p>
+
+<div class="note">
+<p><strong>Rappel :</strong> Les angles sont en radians, pas en degrés. Pour convertir en degrés, nous utilisons : <code>radians = (Math.PI/180)*degrees</code>.</p>
+</div>
+
+<pre class="brush: js; highlight:[9, 23] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // rectangles de gauche, rotation depuis l'origine du canevas
+  ctx.save();
+  // rectangle bleu
+  ctx.fillStyle = '#0095DD';
+  ctx.fillRect(30, 30, 100, 100);
+  ctx.rotate((Math.PI / 180) * 25);
+  // rectangle gris
+  ctx.fillStyle = '#4D4E53';
+  ctx.fillRect(30, 30, 100, 100);
+  ctx.restore();
+
+  // rectangles de droite, rotation depuis le centre du rectangle
+  // dessine le rectangle bleu
+  ctx.fillStyle = '#0095DD';
+  ctx.fillRect(150, 30, 100, 100);
+
+  ctx.translate(200, 80); // déplace au centre du rectangle
+                          // x = x + 0.5 * width
+                          // y = y + 0.5 * height
+  ctx.rotate((Math.PI / 180) * 25); // rotation
+  ctx.translate(-200, -80); // déplace en arrière
+
+  // dessine le rectangle gris
+  ctx.fillStyle = '#4D4E53';
+  ctx.fillRect(150, 30, 100, 100);
+}</pre>
+
+<p>Pour faire pivoter le rectangle autour de son propre centre, nous déplaçons le canevas au centre du rectangle, puis faisons pivoter le canevas, puis le déplaçons à 0,0, puis dessinons le rectangle.</p>
+
+<div class="hidden">
+<pre class="brush: html line-numbers notranslate">&lt;canvas id="canvas" width="300" height="200"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("Un_exemple_rotate", "310", "210", "https://mdn.mozillademos.org/files/9859/rotate.png")}}</p>
+
+<h2 id="Mise_à_léchelle">Mise à l'échelle</h2>
+
+<p>La méthode de transformation suivante est la mise à l'échelle. Nous l'utilisons pour augmenter ou diminuer les unités de notre grille de canevas. Cela peut être utilisé pour dessiner des formes ou des bitmaps réduits ou agrandis.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.scale", "scale(x, y)")}}</dt>
+ <dd>Met à l'échelle les unités du canevas avec x horizontalement et y verticalement. Les deux paramètres sont des nombres réels. Les valeurs inférieures à 1,0 réduisent la taille de l'unité et les valeurs supérieures à 1,0 augmentent la taille de l'unité. Les valeurs 1.0 laissent les unités à la même taille.</dd>
+</dl>
+
+<p>En utilisant des nombres négatifs, vous pouvez faire une mise en miroir d'axe (par exemple en utilisant <code>translate (0, canvas.height), scale (1, -1)</code>, vous aurez le système de coordonnées cartésien bien connu, avec l'origine dans le coin inférieur gauche).</p>
+
+<p>Par défaut, une unité sur la toile est exactement un pixel. Si nous appliquons, par exemple, un facteur d'échelle de 0,5, l'unité résultante deviendrait 0,5 pixels et ainsi les formes seraient dessinées à la moitié de la taille. De la même façon, si nous définissons le facteur d'échelle sur 2.0, la taille de l'unité augmentera et une unité deviendra deux pixels. Cela donne des formes dessinées deux fois plus grandes.</p>
+
+<h3 id="Un_exemple_scale">Un exemple <code>scale</code></h3>
+
+<p>Dans ce dernier exemple, nous allons dessiner des  formes avec différents facteurs d'échelle.</p>
+
+<pre class="brush: js; highlight:[6,11] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // dessine un rectangle simple, mais le met à l'échelle.
+  ctx.save();
+  ctx.scale(10, 3);
+  ctx.fillRect(1, 10, 10, 10);
+  ctx.restore();
+
+  // mirror horizontally
+  ctx.scale(-1, 1);
+  ctx.font = '48px serif';
+  ctx.fillText('MDN', -135, 120);
+}</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js line-numbers  language-js notranslate">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("Un_exemple_scale", "160", "160", "https://mdn.mozillademos.org/files/9861/scale.png")}}</p>
+
+<h2 id="Transformation">Transformation</h2>
+
+<p>Enfin, les méthodes de transformation suivantes appliquent des modifications directement à la matrice de transformation.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.transform", "transform(a, b, c, d, e, f)")}}</dt>
+ <dd>Multiplie la matrice de transformation actuelle avec la matrice décrite par ses arguments. La matrice de transformation est décrite par : <math><semantics><mrow><mo>[</mo><mtable columnalign="center center center" rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd><mtd><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd><mtd><mi>f</mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>]</mo></mrow><annotation encoding="TeX">\left[ \begin{array}{ccc} a &amp; c &amp; e \\ b &amp; d &amp; f \\ 0 &amp; 0 &amp; 1 \end{array} \right]</annotation></semantics></math></dd>
+</dl>
+
+<dl>
+ <dd>Si l'un des arguments est <code>infini</code>, la matrice de transformation doit être marquée comme infinie, plutôt que d'utiliser la méthode qui lance une exception.</dd>
+</dl>
+
+<p>Les paramètres de cette fonction sont :</p>
+
+<dl>
+ <dt><code>a (m11)</code></dt>
+ <dd>Mise à l'échelle horizontale.</dd>
+ <dt><em><code>b (m12)</code></em></dt>
+ <dd>Inclinaison horizontale.</dd>
+ <dt><code>c (m21)</code></dt>
+ <dd>Inclinaison verticale.</dd>
+ <dt><code>d (m22)</code></dt>
+ <dd>Mise à l'échelle verticale.</dd>
+ <dt><code>e (dx)</code></dt>
+ <dd>Déplacement horizontal.</dd>
+ <dt><code>f (dy)</code></dt>
+ <dd>Déplacement vertical.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.setTransform", "setTransform(a, b, c, d, e, f)")}}</dt>
+ <dd>Réinitialise la transformation en cours dans la matrice d'identité, puis appelle la méthode <code>transform ()</code> avec les mêmes arguments. Cela défait la transformation en cours, puis définit la transformation spécifiée, le tout en une seule étape.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.resetTransform", "resetTransform()")}}</dt>
+ <dd>Réinitialise la transformation en cours à la matrice d'identité. C'est la même chose que d'appeler : <code>ctx.setTransform (1, 0, 0, 1, 0, 0)</code>;</dd>
+</dl>
+
+<h3 id="Exemple_pour_transform_et_setTransform">Exemple pour <code>transform</code> et <code>setTransform</code></h3>
+
+<pre class="brush: js; highlight:[12,15] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  var sin = Math.sin(Math.PI / 6);
+  var cos = Math.cos(Math.PI / 6);
+  ctx.translate(100, 100);
+  var c = 0;
+  for (var i = 0; i &lt;= 12; i++) {
+    c = Math.floor(255 / 12 * i);
+    ctx.fillStyle = 'rgb(' + c + ', ' + c + ', ' + c + ')';
+    ctx.fillRect(0, 0, 100, 10);
+    ctx.transform(cos, sin, -sin, cos, 0, 0);
+  }
+
+  ctx.setTransform(-1, 0, 0, 1, 100, 100);
+  ctx.fillStyle = 'rgba(255, 128, 255, 0.5)';
+  ctx.fillRect(0, 50, 100, 100);
+}</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="200" height="250"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("Exemple_pour_transform_et_setTransform", "230", "280", "https://mdn.mozillademos.org/files/255/Canvas_transform.png")}}</p>
+
+<p>{{PreviousNext("Tutoriel_canvas/Utilisation_d'images", "Tutoriel_canvas/Composition")}}</p>
diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/utilisation_d'images/index.html b/files/fr/web/api/canvas_api/tutoriel_canvas/utilisation_d'images/index.html
new file mode 100644
index 0000000000..50a286e0fa
--- /dev/null
+++ b/files/fr/web/api/canvas_api/tutoriel_canvas/utilisation_d'images/index.html
@@ -0,0 +1,320 @@
+---
+title: Utilisation d'images
+slug: Web/API/Canvas_API/Tutoriel_canvas/Utilisation_d'images
+tags:
+  - Canvas
+  - Graphismes
+  - HTML
+  - Tutoriels
+translation_of: Web/API/Canvas_API/Tutorial/Using_images
+---
+<p>{{CanvasSidebar}} {{PreviousNext("Dessin_de_texte_avec_canvas", "Tutoriel_canvas/Transformations" )}}</p>
+
+<p class="summary">Jusqu'à présent, nous avons créé nos propres <a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Formes_g%C3%A9om%C3%A9triques">formes</a> et <a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Ajout_de_styles_et_de_couleurs">styles appliqués</a>. L'une des fonctionnalités les plus intéressantes de {{HTMLElement ("canvas")}} est la possibilité d'utiliser des images. Celles-ci peuvent être utilisées pour faire de la composition dynamique de photos ou comme décors de graphes, pour des "sprites" dans des jeux, et ainsi de suite. Les images externes peuvent être utilisées dans n'importe quel format pris en charge par le navigateur, comme PNG, GIF ou JPEG. Vous pouvez même utiliser l'image produite par d'autres éléments du canevas sur la même page comme source !</p>
+
+<p>L'importation d'images est un processus en deux étapes :</p>
+
+<ol>
+ <li><span id="result_box" lang="fr"><span>obtenez une référence à un objet {{domxref ("HTMLImageElement")}} ou à un autre élément canvas en tant que source.</span> <span>Il est également possible d'utiliser des images en fournissant une URL.</span></span></li>
+ <li>l'image est dessinée sur le canevas à l'aide de la fonction <code>drawImage()</code> .</li>
+</ol>
+
+<p><span class="short_text" id="result_box" lang="fr"><span>Jetons un oeil à la façon de le faire.</span></span></p>
+
+<h2 id="Obtenir_des_images_à_dessiner"><span class="short_text" id="result_box" lang="fr"><span>Obtenir des images à dessiner</span></span></h2>
+
+<p><span id="result_box" lang="fr"><span>L'API Canvas peut utiliser l'un des types de données suivants comme source d'image :</span></span></p>
+
+<dl>
+ <dt>{{domxref("HTMLImageElement")}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Il s'agit d'images créées à l'aide du constructeur </span></span> <code>Image()</code> <span lang="fr"><span>, ainsi que de tout élément {{HTMLElement ("img")}}.</span></span></dd>
+ <dt>{{domxref("SVGImageElement")}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Ce sont des images incorporées en utilisant l'élément {{SVGElement ("image")}}.</span></span></dd>
+ <dt>{{domxref("HTMLVideoElement")}}</dt>
+ <dd><span id="result_box" lang="fr"><span>L'utilisation d'un élément HTML </span></span> {{HTMLElement("video")}} <span lang="fr"><span> comme source d'image capture l'image actuelle de la vidéo et l'utilise comme une image.</span></span></dd>
+ <dt>{{domxref("HTMLCanvasElement")}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Vous pouvez utiliser un autre élément </span></span> {{HTMLElement("canvas")}} <span lang="fr"><span> comme source d'image.</span></span></dd>
+</dl>
+
+<p><span id="result_box" lang="fr"><span>Ces sources sont collectivement référencées par le type {{domxref ("CanvasImageSource")}}.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span>Il existe plusieurs façons d'obtenir des images pour une utilisation sur une toile.</span></span></p>
+
+<h3 id="Utilisation_d.27images_pr.C3.A9sentes_sur_la_m.C3.AAme_page" name="Utilisation_d.27images_pr.C3.A9sentes_sur_la_m.C3.AAme_page">Utilisation d'images présentes sur la même page</h3>
+
+<p><span id="result_box" lang="fr"><span>Nous pouvons obtenir une référence aux images sur la même page que le canevas en utilisant l'un des éléments suivants :</span></span></p>
+
+<ul>
+ <li>la collection {{domxref("document.images")}} ;</li>
+ <li>la méthode {{domxref("document.getElementsByTagName()")}} ;</li>
+ <li>si vous connaissez l'ID de l'image spécifique que vous souhaitez utiliser, vous pouvez utiliser  {{domxref("document.getElementById()")}} pour retrouver cette image.</li>
+</ul>
+
+<h3 id="Utilisation_dimages_dun_autre_domaine"><span lang="fr"><span>Utilisation d'images d'un autre domaine</span></span></h3>
+
+<p><span id="result_box" lang="fr"><span>En utilisant l'attribut {{htmlattrxref ("crossorigin", "img")}} d'un élément {{HTMLElement ("img")}} (reflété par la propriété </span></span> {{domxref("HTMLImageElement.crossOrigin")}}), vous <span lang="fr"> <span>pouvez demander la permission de charger une image d'un autre domaine pour l'utiliser dans votre appel à <code>drawImage ()</code>.</span> <span>Si le domaine d'hébergement permet un accès interdomaine à l'image, l'image peut être utilisée dans votre canevas sans l'altérer;</span> <span>sinon utiliser l'image va <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Images_avec_le_contr%C3%B4le_d_acc%C3%A8s_HTTP#What_is_a_.22tainted.22_canvas.3F">souiller le canevas</a>.</span></span></p>
+
+<h3 id="Utilisation_d.27autres_.C3.A9l.C3.A9ments_canvas" name="Utilisation_d.27autres_.C3.A9l.C3.A9ments_canvas">Utilisation d'autres éléments canvas</h3>
+
+<p><span id="result_box" lang="fr"><span>Comme pour les images normales, nous accédons aux autres éléments Canvas en utilisant la méthode {{domxref ("document.getElementsByTagName ()")}} ou {{domxref ("document.getElementById ()")}}.</span> <span>Assurez-vous d'avoir dessiné quelque chose sur le canevas source avant de l'utiliser dans votre canevas cible.</span></span></p>
+
+<p>Une des utilisations les plus pratiques de cette fonctionnalité serait d'utiliser un second élément canvas comme aperçu de taille réduite d'un canevas de grande taille.</p>
+
+<h3 id="Cr.C3.A9ation_d.27une_image_.C3.A0_partir_de_rien" name="Cr.C3.A9ation_d.27une_image_.C3.A0_partir_de_rien">Création d'une image à partir de rien</h3>
+
+<p>Une autre option est de créer de nouveaux objets {{domxref("HTMLImageElement")}} dans le script même. Pour ce faire, vous pouvez utiliser le constructeur <code>Image().</code></p>
+
+<pre class="eval notranslate">var img = new Image();   // Crée un nouvel élément Image
+img.src = 'myImage.png'; // Définit le chemin vers sa source
+</pre>
+
+<p>Lorsque ce script est exécuté, l'image commence à être chargée.</p>
+
+<p><span id="result_box" lang="fr"><span>Si vous essayez d'appeler <code>drawImage ()</code> avant le chargement de l'image, il ne fera rien (ou, dans les anciens navigateurs, cela peut même déclencher une exception).</span> <span>Vous devez donc être sûr d'utiliser l'événement <code>load</code> pour ne pas essayer avant que l'image ne soit chargée :</span></span></p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">var</span> img <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Image</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>   <span class="comment token">// Crée un nouvel élément img</span>
+img<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'load'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="comment token">// </span></code> <span class="short_text" id="result_box" lang="fr"><span>exécute les instructions drawImage ici</span></span> <code class="language-js">
+<span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+img<span class="punctuation token">.</span>src <span class="operator token">=</span> <span class="string token">'myImage.png'</span><span class="punctuation token">;</span> <span class="comment token">// définit le chemin de la source</span></code></pre>
+
+<p><span id="result_box" lang="fr"><span>Si vous n'utilisez qu'une image externe, cela peut être une bonne approche, mais une fois que vous avez besoin de suivre plus d'une image, vous devez recourir à quelque chose de plus intelligent.</span> <span>Il est hors de portée de ce tutoriel de regarder les tactiques de préchargement d'images, mais vous devriez garder cela à l'esprit.</span></span></p>
+
+<h4 id="Int.C3.A9gration_d.27une_image_via_une_URL_data" name="Int.C3.A9gration_d.27une_image_via_une_URL_data:">Intégration d'une image via une data: URL</h4>
+
+<p><span id="result_box" lang="fr"><span>Un autre moyen possible d'inclure des images est via les </span></span> <a class="external external-icon" href="https://developer.mozilla.org/en-US/docs/Web/HTTP/data_URIs" rel="external" title="http://en.wikipedia.org/wiki/Data:_URL">data: url.</a><a href="https://developer.mozilla.org/fr/docs/Web/HTTP/Basics_of_HTTP/Data_URIs">.</a> <span lang="fr"><span>.</span> <span>Les URL de données vous permettent de définir complètement une image en tant que chaîne de caractères codée en Base64 directement dans votre code.</span></span></p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">var</span> img <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Image</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>   <span class="comment token">// Crée un nouvel élément img</span>
+img<span class="punctuation token">.</span>src <span class="operator token">=</span> <span class="string token">'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw=='</span><span class="punctuation token">;</span></code></pre>
+
+<p><span id="result_box" lang="fr"><span>L'un des avantages des URL de données est que l'image résultante est disponible immédiatement, sans autre aller-retour au serveur.</span> <span>Un autre avantage potentiel,'il est également possible d'encapsuler dans un fichier tous vos </span></span> <a href="https://developer.mozilla.org/fr/docs/Web/CSS" title="/en-US/docs/Web/CSS">CSS</a>, <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript" title="/en-US/docs/Web/JavaScript">JavaScript</a>, <a href="https://developer.mozilla.org/fr/docs/Web/HTML" title="/en-US/docs/Web/HTML">HTML</a> <span lang="fr"><span> et images, ce qui les rend plus portable vers d'autres endroits.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span>Certains inconvénients de cette méthode sont que votre image n'est pas mise en cache, et pour les grandes images, l'URL encodée peut devenir assez longue.</span></span></p>
+
+<h3 id="drawImage" name="drawImage"><span class="short_text" id="result_box" lang="fr"><span>Utilisation des images d'une vidéo</span></span></h3>
+
+<p><span id="result_box" lang="fr"><span>Vous pouvez également utiliser les images d'une vidéo présentée par un élément </span></span> {{HTMLElement("video")}} <span lang="fr"><span> (même si la vidéo n'est pas visible).</span> <span>Par exemple, si vous avez un élément </span></span> {{HTMLElement("video")}} <span lang="fr"><span> avec l'ID "myvideo", vous pouvez faire :</span></span></p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">getMyVideo</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> canvas <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span>canvas<span class="punctuation token">.</span>getContext<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">var</span> ctx <span class="operator token">=</span> canvas<span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+    <span class="keyword token">return</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'myvideo'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p><span id="result_box" lang="fr"><span>Cela renvoie l'objet {{domxref ("HTMLVideoElement")}} pour la vidéo, qui, comme décrit précédemment, est l'un des objets pouvant être utilisé comme <code>CanvasImageSource</code>.</span></span></p>
+
+<h2 id="drawImage" name="drawImage">Dessin d'images</h2>
+
+<p>Une fois la référence à l'objet image source obtenue, on peut utiliser la méthode <code>drawImage()</code> pour l'afficher sur le canevas. Comme nous le verrons plus tard, la méthode <code>drawImage()</code> est surchargée et possède trois variantes différentes. Dans sa forme la plus basique, elle ressemble à ceci :</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, x, y)")}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Dessine le <code>CanvasImageSource</code> spécifié par le paramètre <code>image</code> aux coordonnées (<code>x</code>, <code>y</code>).</span></span></dd>
+</dl>
+
+<div class="note">
+<p><span id="result_box" lang="fr"><span>Les images SVG doivent spécifier une largeur et une hauteur dans l'élément racine &lt;svg&gt;.</span></span></p>
+</div>
+
+<h4 id="Example_A_simple_line_graph" name="Example_A_simple_line_graph">Exemple: un graphique linéaire simple</h4>
+
+<p>Dans l'exemple suivant, nous utiliserons une image externe comme fond pour un petit graphique linéaire. L'utilisation d'images de fond peut rendre vos scripts considérablement plus légers puisqu'il n'est alors pas nécessaire de dessiner des arrières-plans élaborés. Une seule image est utilisée ici, on utilise donc le gestionnaire d'évènement <code>load</code> de l'objet image pour lancer les instructions de dessin. La méthode <code>drawImage()</code> place l'image de fond aux coordonnées (0,0), soit le coin supérieur gauche du canevas.</p>
+
+<pre class="brush: html line-numbers  language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span><span class="punctuation token">&gt;</span></span>
+ <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span> <span class="attr-name token">onload</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>draw();<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+   <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>canvas<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>180<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>canvas</span><span class="punctuation token">&gt;</span></span>
+ <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<pre class="brush: js;highlight[5] line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> ctx <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">var</span> img <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Image</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  img<span class="punctuation token">.</span>onload <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>
+    ctx<span class="punctuation token">.</span><span class="function token">drawImage</span><span class="punctuation token">(</span>img<span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    ctx<span class="punctuation token">.</span><span class="function token">beginPath</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    ctx<span class="punctuation token">.</span><span class="function token">moveTo</span><span class="punctuation token">(</span><span class="number token">30</span><span class="punctuation token">,</span> <span class="number token">96</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    ctx<span class="punctuation token">.</span><span class="function token">lineTo</span><span class="punctuation token">(</span><span class="number token">70</span><span class="punctuation token">,</span> <span class="number token">66</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    ctx<span class="punctuation token">.</span><span class="function token">lineTo</span><span class="punctuation token">(</span><span class="number token">103</span><span class="punctuation token">,</span> <span class="number token">76</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    ctx<span class="punctuation token">.</span><span class="function token">lineTo</span><span class="punctuation token">(</span><span class="number token">170</span><span class="punctuation token">,</span> <span class="number token">15</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    ctx<span class="punctuation token">.</span><span class="function token">stroke</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>
+  img<span class="punctuation token">.</span>src <span class="operator token">=</span> <span class="string token">'https://mdn.mozillademos.org/files/5395/backdrop.png'</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p><span class="short_text" id="result_box" lang="fr"><span>Le graphique résultant ressemble à ceci :</span></span></p>
+
+<p>{{EmbedLiveSample("Example_A_simple_line_graph", 220, 160, "https://mdn.mozillademos.org/files/206/Canvas_backdrop.png")}}</p>
+
+<h2 id="Mise_.C3.A0_l.27.C3.A9chelle" name="Mise_.C3.A0_l.27.C3.A9chelle">Mise à l'échelle</h2>
+
+<p>La seconde variante de la méthode <code>drawImage()</code> ajoute deux paramètres supplémentaires et permet de placer des images redimensionnées sur le canevas.</p>
+
+<h4 id="Example_Tiling_an_image" name="Example_Tiling_an_image">Exemple: Tapissage d'une image</h4>
+
+<p>Dans cet exemple, nous utiliserons une image comme papier-peint en la répétant plusieurs fois sur le canevas. Cette opération est réalisée simplement en faisant une boucle plaçant plusieurs fois l'image redimensionnée à différentes positions. Dans le code ci-dessous, la première boucle <code>for</code> s'occupe des lignes alors que la seconde gère les colonnes. L'image est redimensionnée à un tiers de sa taille originale, ce qui fait 50×38 pixels.</p>
+
+<div class="note">
+<p><strong>Note</strong> : les images peuvent devenir floues lorsqu'elles sont agrandies ou granuleuses si elles sont réduites. Il vaut mieux ne pas redimensionner une image contenant du texte devant rester lisible.</p>
+</div>
+
+<pre class="brush: html line-numbers  language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span><span class="punctuation token">&gt;</span></span>
+ <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span> <span class="attr-name token">onload</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>draw();<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+   <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>canvas<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>canvas</span><span class="punctuation token">&gt;</span></span>
+ <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> ctx <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">var</span> img <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Image</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  img<span class="punctuation token">.</span>onload <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>
+    <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token">&lt;</span> <span class="number token">4</span><span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> j <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> j <span class="operator token">&lt;</span> <span class="number token">3</span><span class="punctuation token">;</span> j<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        ctx<span class="punctuation token">.</span><span class="function token">drawImage</span><span class="punctuation token">(</span>img<span class="punctuation token">,</span> j <span class="operator token">*</span> <span class="number token">50</span><span class="punctuation token">,</span> i <span class="operator token">*</span> <span class="number token">38</span><span class="punctuation token">,</span> <span class="number token">50</span><span class="punctuation token">,</span> <span class="number token">38</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>
+  img<span class="punctuation token">.</span>src <span class="operator token">=</span> <span class="string token">'https://mdn.mozillademos.org/files/5397/rhino.jpg'</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p><span class="short_text" id="result_box" lang="fr"><span>Le canevas résultant ressemble à ceci :</span></span></p>
+
+<p>{{EmbedLiveSample("Example_Tiling_an_image", 160, 160, "https://mdn.mozillademos.org/files/251/Canvas_scale_image.png")}}</p>
+
+<h2 id="D.C3.A9coupage" name="D.C3.A9coupage">Découpage</h2>
+
+<p>La troisième et dernière variante de la méthode <code>drawImage()</code> possède huit nouveaux paramètres. On peut l'utiliser pour découper des parties d'une image source et les afficher sur le canevas.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)")}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Cette fonction prend la zone de l'<code>image</code> source spécifiée par le rectangle dont le coin en haut à gauche est (<code>sx</code>, <code>sy</code>) et dont la largeur et la hauteur sont <code>sWidth</code> et <code>sHeight</code> et le dessine dans le canevas en le plaçant sur le canevas</span> <span>(<code>dx</code>, <code>dy</code>) et le redimensionner à la taille spécifiée par <code>dWidth</code> et <code>dHeight</code>.</span></span><img alt="" class="internal" src="/@api/deki/files/1203/=Canvas_drawimage.jpg" style="float: right;"></dd>
+</dl>
+
+<p><span id="result_box" lang="fr"><span>Pour vraiment comprendre ce que cela fait, il peut être utile de regarder l'image à droite.</span> <span>Les quatre</span></span><span lang="fr"><span> premiers paramètres définissent l'emplacement et la taille du morceau de l'image source.</span> <span>Les quatre derniers paramètres définissent le rectangle dans lequel dessiner l'image sur le canevas de destination.</span></span></p>
+
+<p>Le découpage peut être un outil utile pour réaliser des compositions. Vous pouvez disposer tous les éléments dans un seul fichier image et utiliser cette méthode pour composer un dessin complet. Par exemple, si vous voulez réaliser un graphique, vous pouvez utiliser une image PNG contenant tout le texte nécessaire dans un seul fichier et, selon vos données, changer l'échelle de votre graphique sans trop de difficultés. Un autre avantage est qu'il n'est pas nécessaire de charger chaque image individuellement.</p>
+
+<h4 id="Example_Framing_an_image" name="Example_Framing_an_image">Exemple : encadrer une image</h4>
+
+<p>Dans cet exemple, nous utiliserons le même rhinocéros que plus haut, mais sa tête sera coupée et composée avec un cadre. L'image du cadre fournit une ombre portée qui a été enregistrée dans une image PNG 24 bits. Comme les images PNG 24 bits comportent un canal alpha complet de 8 bits, contrairement aux images GIF et PNG 8 bits, elle peut être placée sur n'importe quel fond sans avoir à se préoccuper de la couleur de transition.</p>
+
+<pre class="brush: html line-numbers  language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span><span class="punctuation token">&gt;</span></span>
+ <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span> <span class="attr-name token">onload</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>draw();<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+   <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>canvas<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>canvas</span><span class="punctuation token">&gt;</span></span>
+   <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">display</span><span class="punctuation token">:</span>none<span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+     <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>img</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>source<span class="punctuation token">"</span></span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>https://mdn.mozillademos.org/files/5397/rhino.jpg<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>300<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>227<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+     <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>img</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>frame<span class="punctuation token">"</span></span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>132<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+   <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+ <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> canvas <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">var</span> ctx <span class="operator token">=</span> canvas<span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="comment token">// Draw slice</span>
+  ctx<span class="punctuation token">.</span><span class="function token">drawImage</span><span class="punctuation token">(</span>document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'source'</span><span class="punctuation token">)</span><span class="punctuation token">,</span>
+                <span class="number token">33</span><span class="punctuation token">,</span> <span class="number token">71</span><span class="punctuation token">,</span> <span class="number token">104</span><span class="punctuation token">,</span> <span class="number token">124</span><span class="punctuation token">,</span> <span class="number token">21</span><span class="punctuation token">,</span> <span class="number token">20</span><span class="punctuation token">,</span> <span class="number token">87</span><span class="punctuation token">,</span> <span class="number token">104</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="comment token">// Draw frame</span>
+  ctx<span class="punctuation token">.</span><span class="function token">drawImage</span><span class="punctuation token">(</span>document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'frame'</span><span class="punctuation token">)</span><span class="punctuation token">,</span> <span class="number token">0</span><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></code></pre>
+
+<p><span id="result_box" lang="fr"><span>Nous avons pris une approche différente pour charger les images cette fois.</span> <span>Au lieu de les charger en créant de nouveaux objets {{domxref ("HTMLImageElement")}}, nous les avons incluses comme balises </span></span> {{HTMLElement("img")}} <span lang="fr"><span>directement dans notre source HTML et avons récupéré les images depuis ceux-ci.</span> <span>Les images sont masquées à partir de la sortie, en définissant la propriété CSS {{cssxref ("display")}} à aucune.</span></span></p>
+
+<p>{{EmbedLiveSample("Example_Framing_an_image", 160, 160, "https://mdn.mozillademos.org/files/226/Canvas_drawimage2.jpg")}}</p>
+
+<p><span id="result_box" lang="fr"><span>Le script lui-même est très simple.</span> <span>Chaque {{HTMLElement ("img")}} se voit attribuer un attribut ID, ce qui facilite leur sélection en utilisant {{domxref ("document.getElementById ()")}}.</span> <span>Nous utilisons simplement <code>drawImage ()</code> pour découper le rhinocéros de la première image et le mettre à l'échelle sur le canevas, puis dessiner le cadre par le haut en utilisant un deuxième appel <code>drawImage ()</code>.</span></span></p>
+
+<h2 id="Art_gallery_example" name="Art_gallery_example">Exemple d'une galerie d'art</h2>
+
+<p>Dans le dernier exemple de ce chapitre, nous présenterons une petite galerie d'art. Cette galerie est constituée d'un tableau contenant plusieurs images. Lorsque la page est chargée, un élément {{HTMLElement("canvas")}} est inséré pour chaque image et un cadre est dessiné autour.</p>
+
+<p>Dans notre cas, toutes les images ont une largeur et une hauteur fixes, ainsi que le cadre qui sera dessiné autour. Le script pourrait être amélioré afin d'utiliser la largeur et la hauteur de l'image pour que le cadre s'adapte parfaitement à ses dimensions.</p>
+
+<p>Le code ci-dessous devrait s'expliquer de lui-même. <span id="result_box" lang="fr"><span>Nous parcourons le conteneur {{domxref ("document.images")}}</span></span> et nous ajoutons de nouveaux éléments canvas. La seule chose notable est probablement, pour ceux qui ne sont pas familiers avec le DOM, l'utilisation de la méthode {{domxref("Node.insertBefore")}} . <code>insertBefore()</code> est une méthode du nœud parent (une cellule de tableau) de l'élément (l'image) avant lequel on désire insérer le nouveau nœud (l'élément canvas).</p>
+
+<pre class="brush: html notranslate">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+     &lt;table&gt;
+      &lt;tr&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5399/gallery_1.jpg"&gt;&lt;/td&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5401/gallery_2.jpg"&gt;&lt;/td&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5403/gallery_3.jpg"&gt;&lt;/td&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5405/gallery_4.jpg"&gt;&lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;tr&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5407/gallery_5.jpg"&gt;&lt;/td&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5409/gallery_6.jpg"&gt;&lt;/td&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5411/gallery_7.jpg"&gt;&lt;/td&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5413/gallery_8.jpg"&gt;&lt;/td&gt;
+      &lt;/tr&gt;
+     &lt;/table&gt;
+     &lt;img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150"&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p><span id="result_box" lang="fr"><span>Et voici quelques CSS pour rendre les choses agréables :</span></span></p>
+
+<pre class="brush: css notranslate">body {
+  background: 0 -100px repeat-x url(https://mdn.mozillademos.org/files/5415/bg_gallery.png) #4F191A;
+  margin: 10px;
+}
+
+img {
+  display: none;
+}
+
+table {
+  margin: 0 auto;
+}
+
+td {
+  padding: 15px;
+}
+</pre>
+
+<p><span id="result_box" lang="fr"><span>Le lien pour tout cela, c'est le JavaScript pour dessiner les images encadrées :</span></span></p>
+
+<pre class="brush: js notranslate">function draw() {
+
+  // Boucle à travers toutes les images
+  for (var i = 0; i &lt; document.images.length; i++) {
+
+    // N'ajoute pas de canevas pour l'image du cadre
+    if (document.images[i].getAttribute('id') != 'frame') {
+
+      // Crée un élément canvas
+      canvas = document.createElement('canvas');
+      canvas.setAttribute('width', 132);
+      canvas.setAttribute('height', 150);
+
+      // Insère avant l'image
+      document.images[i].parentNode.insertBefore(canvas,document.images[i]);
+
+      ctx = canvas.getContext('2d');
+
+      // Dessine l'image sur canvas
+      ctx.drawImage(document.images[i], 15, 20);
+
+      // Ajoute un cadre
+      ctx.drawImage(document.getElementById('frame'), 0, 0);
+    }
+  }
+}</pre>
+
+<p>{{EmbedLiveSample("Art_gallery_example", 725, 400)}}</p>
+
+<h2 id="Contrôle_du_comportement_de_la_mise_à_léchelle_de_limage"><span id="result_box" lang="fr"><span>Contrôle du comportement de la mise à l'échelle de l'image</span></span></h2>
+
+<p><span id="result_box" lang="fr"><span>Comme mentionné précédemment, la mise à l'échelle des images peut entraîner des objets flous ou granuleux en raison du processus de mise à l'échelle.</span> <span>Vous pouvez utiliser la propriété </span></span> {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}} <span lang="fr"><span> du contexte de dessin pour contrôler l'utilisation des algorithmes de lissage d'image lors de la mise à l'échelle des images dans votre contexte.</span> <span>Par défaut, cela est vrai, ce qui signifie que les images seront lissées lors de la mise à l'échelle.</span> <span>Vous pouvez désactiver cette fonctionnalité comme ceci :</span></span></p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js">ctx<span class="punctuation token">.</span>mozImageSmoothingEnabled <span class="operator token">=</span> <span class="keyword token">false</span><span class="punctuation token">;</span>
+ctx<span class="punctuation token">.</span>webkitImageSmoothingEnabled <span class="operator token">=</span> <span class="keyword token">false</span><span class="punctuation token">;</span>
+ctx<span class="punctuation token">.</span>msImageSmoothingEnabled <span class="operator token">=</span> <span class="keyword token">false</span><span class="punctuation token">;</span>
+ctx<span class="punctuation token">.</span>imageSmoothingEnabled <span class="operator token">=</span> <span class="keyword token">false</span><span class="punctuation token">;</span></code></pre>
+
+<p>{{PreviousNext("Dessin_de_texte_avec_canvas", "Tutoriel_canvas/Transformations" )}}</p>
diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/utilisation_de_base/index.html b/files/fr/web/api/canvas_api/tutoriel_canvas/utilisation_de_base/index.html
new file mode 100644
index 0000000000..6182dee589
--- /dev/null
+++ b/files/fr/web/api/canvas_api/tutoriel_canvas/utilisation_de_base/index.html
@@ -0,0 +1,149 @@
+---
+title: Utilisation de base des canvas
+slug: Web/API/Canvas_API/Tutoriel_canvas/Utilisation_de_base
+tags:
+  - Canvas
+  - Graphismes
+  - HTML
+  - Tutoriel_canvas
+  - Tutoriels
+translation_of: Web/API/Canvas_API/Tutorial/Basic_usage
+---
+<p>{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas", "Tutoriel_canvas/Formes_géométriques")}}</p>
+
+<h2 id="Lélément_&lt;canvas>">L'élément <code>&lt;canvas&gt;</code></h2>
+
+<p>Commençons par regarder l'élément {{HTMLElement("canvas")}} lui-même.</p>
+
+<pre class="brush: html notranslate">&lt;canvas id="tutoriel" width="150" height="150"&gt;&lt;/canvas&gt;
+</pre>
+
+<p>Ceci ressemble beaucoup à l'élément &lt;img&gt;. La seule différence est qu'il n'y a pas les attributs <code>src</code> et <code>alt</code>. L'élément <code>&lt;canvas&gt;</code> a seulement deux attributs : {{htmlattrxref ("width", "canvas")}} et {{htmlattrxref ("height", "canvas")}} (« largeur » et « hauteur »). Ces deux attributs sont optionnels et peuvent aussi être fixés à travers le <a href="/fr/docs/R%C3%A9f%C3%A9rence_du_DOM_Gecko">DOM</a>. Quand les attributs <strong>width</strong> et <strong>height</strong> ne sont pas spécifiés, le canvas sera initialement large de <strong>300 pixels</strong> et haut de <strong>150 pixels</strong>. Les dimensions du canvas peuvent être modifiés par du <a href="/fr/docs/Web/CSS">CSS</a>, mais l'image sera dessinée selon les valeurs <strong>width</strong> et <strong>height</strong> du canvas et ensuite étirée pour afficher dans l'espace donné par le CSS.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Si l'image semble déformée, essayez de spécifier de manière explicite vos attributs <code>width</code> et <code>height</code> dans l'élément <code>&lt;canvas&gt;</code>, et de ne pas utiliser de CSS.</p>
+</div>
+
+<p>L'attribut <code>id</code> n'est pas spécifique à l'élément <code>&lt;canvas&gt;</code>. C'est en fait un des attributs HTML de base qui peut être utilisé par presque tous les éléments HTML. C'est toujours mieux d'assigner une <code>id</code> car ça facilite beaucoup l'identification du <code>canvas</code> dans le code <code>javascript</code>.</p>
+
+<p>L'élément <code>&lt;canvas&gt;</code> peut être stylisé comme n'importe quelle image normale (marges, contours, arrière-plan, etc). Si aucun style n'est donné, le canvas sera par défaut complètement transparent. Il faut noter que peu importe quels styles sont utilisés, le style n'affectera pas l'acte de dessiner sur le canvas. Nous verrons en détail la stylisation des canvas plus tard dans ce tutoriel.</p>
+
+<div id="section_2">
+<h3 id="Contenu_de_repli">Contenu de repli</h3>
+
+<p>Puisque certains plus anciens navigateurs ne supportent pas l'élément {{HTMLElement("canvas")}} (les plus communs étant les versions d'Internet Explorer avant la version 9), il est mieux d'avoir du contenu de repli pour afficher.</p>
+
+<p>Heureusement, c'est très facile : il faut tout simplement mettre le contenu dans l'élément <code>&lt;canvas&gt;</code> lui-même. Les navigateurs qui ne supportent pas <code>&lt;canvas&gt;</code> vont afficher ce contenu de repli, et ceux qui supportent <code>&lt;canvas&gt;</code> vont l'ignorer et dessiner le canvas.</p>
+
+<p>Le contenu de repli pourrait, par exemple, donner une description texte du canvas, ou afficher une image fixe comme aperçu de ce que le canvas dessinerait de façon dynamique.</p>
+
+<pre class="brush: html  notranslate">&lt;canvas id="stockGraph" width="150" height="150"&gt;
+  current stock price: $3.15 + 0.15
+&lt;/canvas&gt;
+
+&lt;canvas id="clock" width="150" height="150"&gt;
+  &lt;img src="images/clock.png" width="150" height="150" alt=""/&gt;
+&lt;/canvas&gt;</pre>
+
+<h2 id="La_nécessité_de_la_balise_&lt;canvas>">La nécessité de la balise <code>&lt;/canvas&gt;</code></h2>
+
+<p>Au contraire de l'élément {{HTMLElement("img")}}, l'élément {{HTMLElement("canvas")}} <strong>requiert</strong> la balise fermante (<code>&lt;/canvas&gt;</code>).</p>
+
+<div class="note">
+<p><strong>Note :</strong> Bien que quelques unes des premières versions du navigateur Safari ne requièrent pas la balise fermante, la spécification HTML indique qu'elle est nécessaire, alors il est mieux de l'inclure pour avoir le plus de compatibilité possible. Ces anciennes versions de Safari (avant la version 2.0) affichent le contenu de repli en plus que le canvas lui-même, sauf si vous utilisez des trucs CSS pour le masquer. Heureusement, il y a très peu d'utilisateurs de ces vieilles versions de Safari de nos jours.</p>
+</div>
+
+<p>Si vous n'avez pas besoin de contenu de repli, un simple <code>&lt;canvas id="foo" ...&gt;&lt;/canvas&gt;</code> est totalement compatible avec tous les navigateurs qui ont pris en charge la fonctionnalité canvas.</p>
+
+<h2 id="Le_contexte_de_rendu">Le contexte de rendu</h2>
+
+<p>L'élément {{HTMLElement("canvas")}} crée une surface pour dessiner à grandeur fixe. Cette surface expose un ou plusieurs <strong>contextes de rendu</strong>, qui sont utilisés pour créer et manipuler le contenu affiché. Ce tutoriel se concentrera sur le contexte de rendu 2D. D'autres contextes permettent d'autres types de rendu, tel que le contexte <a href="/fr/docs/Web/WebGL">WebGL</a>, qui utilise un contexte 3D ("experimental-webgl") inspiré de <a class="external" href="http://www.khronos.org/opengles/" rel="external" title="http://en.wikipedia.org/wiki/OpenGL_ES">OpenGL ES</a>.</p>
+
+<p>Initialement, le canvas est vide. Pour afficher quelque chose,  un script doit commencer par accéder au contexte de rendu pour pouvoir dessiner dessus. L'élément {{HTMLElement("canvas")}} a une <a href="/fr/docs/Web/API/HTMLCanvasElement#M.C3.A9thodes">méthode</a> nommée <code>getContext()</code>, qui peut être utilisée pour obtenir le contexte de rendu et ses fonctions de dessin. <code>getContext()</code> a comme seul paramètre le type de contexte. Pour des graphiques 2D, comme ceux utilisés dans ce tutoriel, il faut spécifier "2d".</p>
+
+<pre class="brush: js notranslate">var canvas = document.getElementById('tutorial');
+var ctx = canvas.getContext('2d');</pre>
+
+<p>La première ligne obtient le {{HTMLElement("canvas")}} dans le DOM en appelant {{domxref("document.getElementById()")}}. Lorsque nous avons l'élément canvas, nous pouvons accéder au contexte de rendu en utilisant sa méthode <code>getContext()</code>.</p>
+
+<div id="section_5">
+<h2 id="Vérification_de_la_prise_en_charge">Vérification de la prise en charge</h2>
+
+<p>Le contenu de repli est affiché dans les navigateurs qui ne prennent pas en charge l'élément {{HTMLElement("canvas")}}. Les scripts peuvent aussi vérifier la prise en charge de manière programmatique en vérifiant la présence de la méthode <code>getContext()</code>. Notre extrait de code ci-dessus se transforme donc en ceci :</p>
+
+<pre class="brush: js notranslate">var canvas = document.getElementById('tutorial');
+
+if (canvas.getContext) {
+  var ctx = canvas.getContext('2d');
+  // code de dessin dans le canvas
+} else {
+  // code pour le cas où canvas ne serait pas supporté
+}</pre>
+</div>
+</div>
+
+<h2 id="Un_modèle_basique">Un modèle basique</h2>
+
+<p>Voici un modèle minimaliste, que nous allons utiliser comme point de départ dans des futurs exemples.</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;Canvas tutorial&lt;/title&gt;
+    &lt;script type="text/javascript"&gt;
+      function draw() {
+        var canvas = document.getElementById('tutorial');
+        if (canvas.getContext) {
+          var ctx = canvas.getContext('2d');
+        }
+      }
+    &lt;/script&gt;
+    &lt;style type="text/css"&gt;
+      canvas { border: 1px solid black; }
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body onload="draw();"&gt;
+    &lt;canvas id="tutorial" width="150" height="150"&gt;&lt;/canvas&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Ce script contient une fonction <code>draw()</code>, qui est exécutée lorsque la page a fini de charger. Ce résultat est obtenu en utilisant l'événement de chargement du document. Cette fonction, ou une fonction similaire, pourrait aussi être appelé en utilisant {{domxref("window.setTimeout()")}}, {{domxref("window.setInterval()")}}, ou n'importe quel autre gestionnaire d'événement, tant que la page est chargée en premier.</p>
+
+<p>Voici à quoi le modèle ressemble :</p>
+
+<p>{{EmbedLiveSample("Un_modèle_basique", 160, 160)}}</p>
+
+<h2 id="Un_exemple_simple">Un exemple simple</h2>
+
+<p>Pour commencer, observons un exemple simple qui dessine deux rectangles qui s'intersectent, un d'entre eux ayant de la transparence alpha. Nous verrons plus en détail comment ça marche dans les exemples suivants.</p>
+
+<pre class="brush: html  notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+ &lt;head&gt;
+  &lt;meta charset="utf-8"/&gt;
+  &lt;script type="application/javascript"&gt;
+    function draw() {
+      var canvas = document.getElementById("canvas");
+      if (canvas.getContext) {
+        var ctx = canvas.getContext("2d");
+
+        ctx.fillStyle = 'rgb(200, 0, 0)';
+        ctx.fillRect(10, 10, 50, 50);
+
+        ctx.fillStyle = 'rgba(0, 0, 200, 0.5)';
+        ctx.fillRect(30, 30, 50, 50);
+      }
+    }
+  &lt;/script&gt;
+ &lt;/head&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Cet exemple ressemble a ceci :</p>
+
+<p>{{EmbedLiveSample("Un_exemple_simple", 160, 160, "https://mdn.mozillademos.org/files/228/canvas_ex1.png")}}</p>
+
+<p>{{PreviousNext("Tutoriel_canvas", "Tutoriel_canvas/Formes_géométriques")}}</p>
diff --git a/files/fr/web/api/canvasgradient/addcolorstop/index.html b/files/fr/web/api/canvasgradient/addcolorstop/index.html
new file mode 100644
index 0000000000..76059cf23b
--- /dev/null
+++ b/files/fr/web/api/canvasgradient/addcolorstop/index.html
@@ -0,0 +1,129 @@
+---
+title: CanvasGradient.addColorStop()
+slug: Web/API/CanvasGradient/addColorStop
+tags:
+  - API
+  - Canvas
+  - CanvasGradient
+  - Méthode
+  - Reference
+translation_of: Web/API/CanvasGradient/addColorStop
+---
+<div>{{APIRef("Canvas API")}}</div>
+
+<p>La méthode CanvasGradient.addColorStop () ajoute un nouvel arrêt, défini par un <code>décalage</code> et une <code>couleur</code>, au dégradé. Si le décalage n'est pas compris entre 0 et 1, une erreur INDEX_SIZE_ERR est générée, si la couleur ne peut pas être analysée en tant que {{cssxref ("&lt;color&gt;")}} CSS, une erreur SYNTAX_ERR est générée.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var><em>gradient</em>.addColorStop(décalage, couleur);</var>
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>décalage</dt>
+ <dd>Un nombre entre 0 et 1. Une erreur INDEX_SIZE_ERR est générée, si le nombre n'est pas dans cette plage.</dd>
+ <dt>couleur</dt>
+ <dd>Une {{cssxref ("&lt;color&gt;")}} CSS. Une erreur SYNTAX_ERR est générée, si la valeur ne peut pas être analysée en tant que valeur &lt;color&gt; CSS.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_la_méthode_addColorStop">Utilisation de la méthode <code>addColorStop</code> </h3>
+
+<p>Il s'agit seulement d'un simple fragment de code qui utilise la méthode <code>addColorStop</code> avec un objet {{domxref("CanvasGradient")}}.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canevas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[5,6]">var canevas = document.getElementById('canevas');
+var ctx = canevas.getContext('2d');
+
+var degrade = ctx.createLinearGradient(0, 0, 200, 0);
+degrade.addColorStop(0, 'green');
+degrade.addColorStop(1, 'white');
+ctx.fillStyle = degrade;
+ctx.fillRect(10, 10, 200, 100);
+</pre>
+
+<p>Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canevas :</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+var gradient = ctx.createLinearGradient(0,0,200,0);
+gradient.addColorStop(0,"green");
+gradient.addColorStop(1,"white");
+ctx.fillStyle = gradient;
+ctx.fillRect(10,10,200,100);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="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', "scripting.html#dom-canvasgradient-addcolorstop", "CanvasGradient.addColorStop")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+
+<p>{{Compat("api.CanvasGradient.addColorStop")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface ladéfinissant, {{domxref("CanvasGradient")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.createLinearGradient()")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.createRadialGradient()")}}</li>
+</ul>
diff --git a/files/fr/web/api/canvasgradient/index.html b/files/fr/web/api/canvasgradient/index.html
new file mode 100644
index 0000000000..bd09515894
--- /dev/null
+++ b/files/fr/web/api/canvasgradient/index.html
@@ -0,0 +1,60 @@
+---
+title: CanvasGradient
+slug: Web/API/CanvasGradient
+tags:
+  - API
+  - Canvas
+  - CanvasGradient
+  - Gradients
+  - Interface
+  - Reference
+translation_of: Web/API/CanvasGradient
+---
+<div>{{APIRef("Canvas API")}}</div>
+
+<p>L'interface <code><strong>CanvasGradient</strong></code>  représente un objet opaque décrivant un dégradé. Il est retourné par les méthodes {{domxref("CanvasRenderingContext2D.createLinearGradient()")}} ou {{domxref("CanvasRenderingContext2D.createRadialGradient()")}}.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Représentant un objet opaque, il n'y a aucune propriété exposée.</em></p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Il n'y a pas de méthode héritée.</em></p>
+
+<dl>
+ <dt>{{domxref("CanvasGradient.addColorStop()")}}</dt>
+ <dd>Ajoute un nouveau point d'arrêt, défini par un <code>décalage</code> et une <code>couleur</code>. Si le décalage n'est pas compris entre 0 et 1, une <code>INDEX_SIZE_ERR</code> est générée ; si la couleur ne peut être analysée comme une {{cssxref("&lt;color&gt;")}} CSS,  une <code>SYNTAX_ERR</code> est générée.</dd>
+</dl>
+
+<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('HTML WHATWG', "the-canvas-element.html#canvasgradient", "CanvasGradient")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.CanvasGradient")}}</p>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>Créateur dans  {{domxref("CanvasRenderingContext2D")}}.</li>
+ <li>L'élément {{HTMLElement("canvas")}} et son interface associée {{domxref("HTMLCanvasElement")}}.</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/arc/index.html b/files/fr/web/api/canvasrenderingcontext2d/arc/index.html
new file mode 100644
index 0000000000..28219272c1
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/arc/index.html
@@ -0,0 +1,174 @@
+---
+title: CanvasRenderingContext2D.arc()
+slug: Web/API/CanvasRenderingContext2D/arc
+tags:
+  - Canvas
+  - CanvasRenderingContext2D
+  - Method
+  - Reference
+translation_of: Web/API/CanvasRenderingContext2D/arc
+---
+<div>{{APIRef}}</div>
+
+<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.arc()</code></strong> de l'API Canvas 2D permet d'ajouter un arc de cercle  au tracé, en le centrant aux positions <em>(x, y)</em> et avec un rayon <em>r</em> qui démarre à <em>angleDépart</em> et qui finit à <em>angleFin</em>, dans la direction de <em>sensAntiHoraire </em>(par défaut en sens horaire).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.arc(x, y, rayon, angleDépart, angleFin, sensAntiHoraire);</var>
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>La position en x du centre de l'arc.</dd>
+ <dt><code>y</code></dt>
+ <dd>La position en y du centre de l'arc.</dd>
+ <dt><code>radius</code><em> (rayon)</em></dt>
+ <dd>Le rayon de l'arc.</dd>
+ <dt><code>startAngle</code> <em>(<font face="Consolas, Liberation Mono, Courier, monospace">angle départ)</font></em></dt>
+ <dd>La valeur de l'angle avec laquelle démarre l'arc de cercle, mesurée dans le sens horaire à partir de l'axe x positif et exprimé en radians.</dd>
+ <dt><code>endAngle</code> <em>(angle fin)</em></dt>
+ <dd>La valeur de l'angle avec laquelle se finit l'arc de cercle, mesurée dans le sens horaire à partir de l'axe x positif et exprimé en radians.</dd>
+ <dt><code>anticlockwise</code><em> (<font face="Consolas, Liberation Mono, Courier, monospace">sens anti-horaire)</font></em> {{optional_inline}}</dt>
+ <dd>Un {{jsxref("Booléen")}} facultatif qui, si à <code>true</code><em>(vrai),</em> indique que l'arc sera dessiné dans le sens inverse des aiguilles d'une montre entre les deux angles. Par défaut, la valeur est le sens des aiguilles d'une montre.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Using_the_arc_method" name="Using_the_arc_method">En utilisant la méthode <code>arc</code> </h3>
+
+<p>Voici un code simple permettant de dessiner un cercle .</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;</code></pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.arc(75, 75, 50, 0, 2 * Math.PI);
+ctx.stroke();</code></pre>
+
+<p>Modifiez le code ci-dessous et voyez les changements en direct sur le canvas :</p>
+
+<div style="display: none;">
+<h6 id="Playable_code" name="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.beginPath();
+ctx.arc(50, 50, 50, 0, 2 * Math.PI, false);
+ctx.stroke();&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h3 id="Different_shapes_demonstrated" name="Different_shapes_demonstrated">Exemple avec différentes formes</h3>
+
+<p>Dans cet exemple, plusieurs formes différentes sont dessinées, afin de montrer les possibilités offertes par <code>arc()</code>.</p>
+
+<div style="display: none;">
+<h6 id="HTML_2">HTML</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="200"&gt;&lt;/canvas&gt;
+</pre>
+
+<h6 id="JavaScript_2">JavaScript</h6>
+</div>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+// Draw shapes
+for (var i = 0; i &lt; 4; i++) {
+  for(var j = 0; j &lt; 3; j++) {
+    ctx.beginPath();
+    var x              = 25 + j * 50;               // x coordinate
+    var y              = 25 + i * 50;               // y coordinate
+    var radius         = 20;                    // Arc radius
+    var startAngle     = 0;                     // Starting point on circle
+    var endAngle       = Math.PI + (Math.PI * j) /2; // End point on circle
+    var anticlockwise  = i % 2 == 1;                // Draw anticlockwise
+
+    ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
+
+    if (i &gt; 1) {
+      ctx.fill();
+    } else {
+      ctx.stroke();
+    }
+  }
+}</code></pre>
+
+<p>{{ EmbedLiveSample('Different_shapes_demonstrated', 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png") }}</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('HTML WHATWG', "scripting.html#dom-context-2d-arc", "CanvasRenderingContext2D.arc")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+
+<p>{{Compat("api.CanvasRenderingContext2D.arc")}}</p>
+<h2 id="Notes_spécifiques_à_Gecko">Notes spécifiques à Gecko</h2>
+
+<p>Avec Gecko 2.0 {{geckoRelease("2.0")}}:</p>
+
+<ul>
+ <li>Le paramètre <code>anticlockwise</code> est optionnel,</li>
+ <li>Une valeur négative pour le rayon lance une erreur de type {{domxref("DOMError", "IndexSizeError")}} ( <span>"L'index ou la taille est négatif ou supérieur à la valeur autorisée" ).</span></li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'Interface JavaScript à laquelle appartient la méthode : {{domxref("CanvasRenderingContext2D")}}</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.html b/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.html
new file mode 100644
index 0000000000..4df338c796
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.html
@@ -0,0 +1,132 @@
+---
+title: CanvasRenderingContext2D.beginPath()
+slug: Web/API/CanvasRenderingContext2D/beginPath
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+translation_of: Web/API/CanvasRenderingContext2D/beginPath
+---
+<div>{{APIRef}}</div>
+
+<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.beginPath()</code></strong> de l'API Canvas 2D permet de commencer un nouveau chemin<em> e</em>n vidant la liste des sous-chemins. Appelez cette méthode quand vous voulez créer un nouveau chemin.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.beginPath();</var>
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_la_méthode_beginPath">Utiliser la méthode <code>beginPath</code></h3>
+
+<p>Ceci est un simple snippet de code qui utilise la méthode <code>beginPath</code>.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[5,12]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+// Premier chemin
+ctx.beginPath();
+ctx.strokeStyle = 'blue';
+ctx.moveTo(20, 20);
+ctx.lineTo(200, 20);
+ctx.stroke();
+
+// Second chemin
+ctx.beginPath();
+ctx.strokeStyle = 'green';
+ctx.moveTo(20, 20);
+ctx.lineTo(120, 120);
+ctx.stroke();
+</pre>
+
+<p>Éditez le code ci-dessous pour voir vos changements directemment apportés au canvas:</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code" style="height:200px"&gt;
+// First path
+ctx.beginPath();
+ctx.strokeStyle = 'blue';
+ctx.moveTo(20,20);
+ctx.lineTo(200,20);
+ctx.stroke();
+
+// Second path
+ctx.beginPath();
+ctx.strokeStyle = 'green';
+ctx.moveTo(20,20);
+ctx.lineTo(120, 120);
+ctx.stroke();&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 460) }}</p>
+
+<h2 id="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>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-beginpath", "CanvasRenderingContext2D.beginPath")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("api.CanvasRenderingContext2D.beginPath")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface qui définit cette méthode, {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.closePath()")}}</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.html b/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.html
new file mode 100644
index 0000000000..392c7360e1
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.html
@@ -0,0 +1,147 @@
+---
+title: CanvasRenderingContext2D.bezierCurveTo()
+slug: Web/API/CanvasRenderingContext2D/bezierCurveTo
+tags:
+  - 2D
+  - API
+  - Bézier
+  - Canevas
+  - Canvas
+  - CanvasRenderingContext2D
+  - Courbe
+  - Courbe cubique
+  - Courbe cubique de Bézier
+  - Courbe de Bézier
+  - Méthode
+  - contexte
+translation_of: Web/API/CanvasRenderingContext2D/bezierCurveTo
+---
+<div>{{APIRef}}</div>
+
+<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.bezierCurveTo()</code></strong> de l'API Canvas 2D ajoute une <a href="https://en.wikipedia.org/wiki/B%C3%A9zier_curve">courbe de Bézier</a> cubique au sous-chemin courant. Elle requiert trois points : les deux premiers sont des points de contrôle et le troisième est le point d'arrivée. Le point de départ est le dernier point dans le chemin courant, qui peut être changé au moyen de la méthode {{domxref("CanvasRenderingContext2D.moveTo", "moveTo()")}} avant de créer une courbe de Bézier.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <em>contexte2D</em>.bezierCurveTo(<em>pointContrôle1X</em>, <em>pointContrôle1Y</em>, <em>pointContrôle2X</em>, <em>pointContrôle2Y</em>, <em>pointArrivéeX</em>, <em>pointArrivéeY</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>pointContrôle1X</code></dt>
+ <dd>La coordonnée en x du premier point de contrôle.</dd>
+ <dt><code>pointContrôle1Y</code></dt>
+ <dd>La coordonnée en y du premier point de contrôle.</dd>
+ <dt><code>pointContrôle2X</code></dt>
+ <dd>La coordonnée en x du second point de contrôle.</dd>
+ <dt><code>pointContrôle2Y</code></dt>
+ <dd>La coordonnée en y du second point de contrôle.</dd>
+ <dt><code>pointArrivéeX</code></dt>
+ <dd>La coordonnée en x du point d'arrivée.</dd>
+ <dt><code>pointArrivéeY</code></dt>
+ <dd>La coordonnée en y du point d'arrivée.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Comment_bezierCurveTo_fonctionne">Comment bezierCurveTo fonctionne</h3>
+
+<p>Cet exemple montre comment une courbe cubique de Bézier est dessinée.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[14]">// Définit le canevas et son contexte 2D
+const canevas = document.getElementById("canvas");
+const contexte2D = canevas.getContext("2d");
+
+// Define the points as {x, y}
+let pDépart    = { x: 50,  y: 20  };
+let pContrôle1 = { x: 230, y: 30  };
+let pContrôle2 = { x: 150, y: 80  };
+let pArrivée   = { x: 250, y: 100 };
+
+// Courbe cubique de Bézier
+contexte2D.beginPath();
+contexte2D.moveTo(start.x, start.y);
+contexte2D.bezierCurveTo(pContrôle1.x, pContrôle1.y, pContrôle2.x, pContrôle2.y, pArrivée.x, pArrivée.y);
+contexte2D.stroke();
+
+// Points de départ et d'arrivée
+contexte2D.fillStyle = 'blue';
+contexte2D.beginPath();
+contexte2D.arc(pDépart.x, pDépart.y, 5, 0, 2 * Math.PI);   // Point de départ
+contexte2D.arc(pArrivée.x, pArrivée.y, 5, 0, 2 * Math.PI); // Point d'arrivée
+contexte2D.fill();
+
+// Points de contrôle
+contexte2D.fillStyle = 'red';
+contexte2D.beginPath();
+contexte2D.arc(pContrôle1.x, pContrôle1.y, 5, 0, 2 * Math.PI);  // Point de contrôle 1
+contexte2D.arc(pContrôle2.x, pContrôle2.y, 5, 0, 2 * Math.PI);  // Point de contrôle 2
+contexte2D.fill();</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>Dans cet exemple, les <span style="color: red;">points de contrôle sont rouges</span> et les <span style="color: blue;">points de départ et d'arrivée sont bleus</span>.</p>
+
+<p>{{ EmbedLiveSample('How_bezierCurveTo_works', 315, 165) }}</p>
+
+<h3 id="Une_simple_courbe_cubique_de_Bézier">Une simple courbe cubique de Bézier</h3>
+
+<p>Cet exemple dessine une simple courbe cubique de Bézier en utilisant <code>bezierCurveTo()</code>.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript_2">JavaScript</h4>
+
+<p>La courbe débute au point spécifiée par <code>moveTo()</code>: (30, 30). Le premier point de contrôle est placé à (120, 160), le second à (180, 10) et le point d'arrivée à (220, 140).</p>
+
+<pre class="brush: js; highlight:[6]">const canevas = document.getElementById("canvas");
+const contexte2D = canevas.getContext("2d");
+
+contexte2D.beginPath();
+contexte2D.moveTo(30, 30);
+contexte2D.bezierCurveTo(120,160, 180,10, 220,140);
+contexte2D.stroke();</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{ EmbedLiveSample('A_simple_Bézier_curve', 700, 180) }}</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('HTML WHATWG', "scripting.html#dom-context-2d-beziercurveto", "CanvasRenderingContext2D.beziercurveto")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.CanvasRenderingContext2D.bezierCurveTo")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface définissant cette méthode : {{domxref("CanvasRenderingContext2D")}}</li>
+ <li><a href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve">L'article Wikipédia sur les courbes de Bézier</a></li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/canvas/index.html b/files/fr/web/api/canvasrenderingcontext2d/canvas/index.html
new file mode 100644
index 0000000000..cb17a790ff
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/canvas/index.html
@@ -0,0 +1,62 @@
+---
+title: CanvasRenderingContext2D.canvas
+slug: Web/API/CanvasRenderingContext2D/canvas
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Propriété
+  - Reference
+translation_of: Web/API/CanvasRenderingContext2D/canvas
+---
+<div>{{APIRef}}</div>
+
+<p>La propriété <code><strong>CanvasRenderingContext2D.canvas</strong></code> est une référence à l'objet {{domxref("HTMLCanvasElement")}} qui est associé au contexte. Il peut être {{jsxref("null")}} s'il n'est pas associé à un élément {{HTMLElement("canvas")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var><em>ctx</em></var>.canvas;</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Soit cet élément {{HTMLElement("canvas")}}:</p>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<p>Vous pouvez obtenir la référence à l'élément <code>canvas</code> grâce à <code>CanvasRenderingContext2D</code> en utilisant la propriété <code>canvas</code> :</p>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+ctx.canvas // HTMLCanvasElement
+</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', "scripting.html#dom-context-2d-canvas", "CanvasRenderingContext2D.canvas")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+
+<p>{{Compat("api.CanvasRenderingContext2D.canvas")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("CanvasRenderingContext2D")}}</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.html b/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.html
new file mode 100644
index 0000000000..78c8ff8104
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.html
@@ -0,0 +1,145 @@
+---
+title: CanvasRenderingContext2D.clearRect()
+slug: Web/API/CanvasRenderingContext2D/clearRect
+tags:
+  - API
+  - Canvas
+  - CanvasRendering2D
+  - Méthode
+  - Reference
+translation_of: Web/API/CanvasRenderingContext2D/clearRect
+---
+<div>{{APIRef}}</div>
+
+<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.clearRect()</code></strong> de l'API 2D des Canvas met en noir transparent tous les pixels dans le rectangle défini par le point de départ de coordonnées <em>(x, y)</em> et par les tailles <em>(largeur, hauteur)</em>, supprimant tout contenu précédemment dessiné.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.clearRect(x, y, largeur, hauteur);</var>
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>La coordonnée sur l'axe des <em>x</em> du point de départ du rectangle.</dd>
+ <dt><code>y</code></dt>
+ <dd>La coordonnée sur l'axe des <em>y</em> du point de départ du rectangle.</dd>
+ <dt><code>largeur</code></dt>
+ <dd>La largeur du rectangle.</dd>
+ <dt><code>hauteur</code></dt>
+ <dd>La hauteur de rectangle.</dd>
+</dl>
+
+<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
+
+<p>Un problème classique avec <code>clearRect</code> est qu'il peut apparaître comme ne fonctionnant pas si l'on n'<a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Formes_g%C3%A9om%C3%A9triques#Drawing_paths">utilise pas les trajets de façon appropriée</a>. N'oubliez pas d'appeler {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} avant de commencer à dessiner une nouvelle image après avoir appelé <code>clearRect</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_la_méthode_clearRect">Utilisation de la méthode <code>clearRect</code></h3>
+
+<p>Ceci est seulement un fragment de code simple qui utilise la méthode <code>clearRect</code>.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[11]">var canevas = document.getElementById("canvas");
+var ctx = canevas.getContext("2d");
+
+ctx.beginPath();
+ctx.moveTo(20,20);
+ctx.lineTo(200,20);
+ctx.lineTo(120,120);
+ctx.closePath(); // dessine la dernière ligne du triangle
+ctx.stroke();
+
+ctx.clearRect(10, 10, 100, 100);
+
+// effacer le canevas entièrement
+// ctx.clearRect(0, 0, canvas.width, canvas.height);
+</pre>
+
+<p>Modifiez le code suivant et voyez vos changements en direct dans le canevas :</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code" style="height:140px;"&gt;
+ctx.beginPath();
+ctx.moveTo(20,20);
+ctx.lineTo(200,20);
+ctx.lineTo(120,120);
+ctx.closePath(); // dessine la dernière ligne du triangle
+ctx.stroke();
+
+ctx.clearRect(10, 10, 100, 100);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 400) }}</p>
+
+<h2 id="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', "scripting.html#dom-context-2d-clearrect", "CanvasRenderingContext2D.clearRect")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("api.CanvasRenderingContext2D.clearRect")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.fillRect()")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/closepath/index.html b/files/fr/web/api/canvasrenderingcontext2d/closepath/index.html
new file mode 100644
index 0000000000..b3748ccbd7
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/closepath/index.html
@@ -0,0 +1,166 @@
+---
+title: CanvasRenderingContext2D.closePath()
+slug: Web/API/CanvasRenderingContext2D/closePath
+tags:
+  - Méthode
+translation_of: Web/API/CanvasRenderingContext2D/closePath
+---
+<div>{{APIRef}}</div>
+
+<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.closePath()</code></strong> de l'API Canvas 2D provoque le retour du stylo au point de départ du sous-traçé courant. Il le fait en ajoutant une ligne droite entre le point courant et le point rejoint. Si la figure a déjà été fermée ou n'est constituée que d'un seul point, cette méthode ne provoque rien.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.closePath();</var>
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_la_méthode_closePath">Utiliser la méthode <code>closePath</code></h3>
+
+<p>Voici un exemple d'utilisation de la méthode closePath.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[8]">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.beginPath();
+ctx.moveTo(20,20);
+ctx.lineTo(200,20);
+ctx.lineTo(120,120);
+ctx.closePath(); // ferme le triangle par une ligne droite
+ctx.stroke();
+</pre>
+
+<p>Editez le code ci-dessous et observez les répercutions dans le canvas:</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code" style="height:140px;"&gt;
+ctx.beginPath();
+ctx.moveTo(20,20);
+ctx.lineTo(200,20);
+ctx.lineTo(120,120);
+ctx.closePath(); // draws last line of the triangle
+ctx.stroke();&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 400) }}</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('HTML WHATWG', "scripting.html#dom-context-2d-closepath", "CanvasRenderingContext2D.closePath")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>The interface defining it, {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.beginPath()")}}</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.html b/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.html
new file mode 100644
index 0000000000..76fb50df9f
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.html
@@ -0,0 +1,150 @@
+---
+title: CanvasRenderingContext2D.createLinearGradient()
+slug: Web/API/CanvasRenderingContext2D/createLinearGradient
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Gradients
+  - Méthode
+  - Reference
+translation_of: Web/API/CanvasRenderingContext2D/createLinearGradient
+---
+<div>{{APIRef}}</div>
+
+<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.createLinearGradient()</code></strong> de l'API Canvas 2D crée un gradient le long de la ligne donnée par les coordonnées représentées par les paramètres.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14681/mdn-canvas-linearGradient.png" style="height: 121px; width: 264px;"></p>
+
+<p>Cette méthode retourne un {{domxref("CanvasGradient")}} linéaire.</p>
+
+<p>NOTE : les coordonnées sont globales, aussi soyez conscient du fait que, lors de l'utilisation "fillRect" (et de ses amis), les coordonnées NE sont PAS relatives aux coordonnées spécifiées dans les arguments de "fillRect".</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">CanvasGradient <var><em>ctx</em>.createLinearGradient(x0, y0, x1, y1);</var>
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>x0</code></dt>
+ <dd>La coordonnée sur l'axe des x du point de début.</dd>
+ <dt><code>y0</code></dt>
+ <dd>La coordonnée sur l'axe des y du point de début.</dd>
+ <dt><code>x1</code></dt>
+ <dd>La coordonnée sur l'axe des x du point de fin.</dd>
+ <dt><code>y1</code></dt>
+ <dd>La coordonnée sur l'axe des y du point de fin.</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<dl>
+ <dt>{{domxref("CanvasGradient")}}</dt>
+ <dd>Un <code>CanvasGradient linéaire</code> initialisé avec la ligne spécifiée.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_la_méthode_createLinearGradient">Utilisation de la méthode <code>createLinearGradient</code></h3>
+
+<p>Ceci est seulement un simple fragment de code qui utilise la méthode <code>createLinearGradient</code> pour créer un {{domxref("CanvasGradient")}} avec les points de début et de fin spécifiés. Une fois créé, vous pouvez utiliser la méthode {{domxref("CanvasGradient.addColorStop()")}} pour définir de nouveaux arrêts sur le gradient, avec des déplacements et des couleurs spécifiés. Le gradient est appliqué si vous le mettez comme {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} courant, et il est dessiné sur le canevas lors de l'utilisation de la méthode {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}}, par exemple.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[4]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+var gradient = ctx.createLinearGradient(0, 0, 200, 0);
+gradient.addColorStop(0, 'green');
+gradient.addColorStop(1, 'white');
+ctx.fillStyle = gradient;
+ctx.fillRect(10, 10, 200, 100);
+</pre>
+
+<p>Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel sur le canevas :</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+var gradient = ctx.createLinearGradient(0,0,200,0);
+gradient.addColorStop(0,"green");
+gradient.addColorStop(1,"white");
+ctx.fillStyle = gradient;
+ctx.fillRect(10,10,200,100);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="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', "scripting.html#dom-context-2d-createlineargradient", "CanvasRenderingContext2D.createLinearGradient")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("api.CanvasRenderingContext2D.createLinearGradient")}}</p>
+<h2 id="Notes_spécifiques_à_Gecko">Notes spécifiques à Gecko</h2>
+
+<ul>
+ <li>A partir de Gecko 2.0 {{geckoRelease("2.0")}}, le fait de spécifier des valeurs non finies  déclenche maintenant <code>NOT_SUPPORTED_ERR</code> au lieu de <code>SYNTAX_ERR</code>.</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.createRadialGradient()")}}</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/direction/index.html b/files/fr/web/api/canvasrenderingcontext2d/direction/index.html
new file mode 100644
index 0000000000..fbd78dccc5
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/direction/index.html
@@ -0,0 +1,129 @@
+---
+title: CanvasRenderingContext2D.direction
+slug: Web/API/CanvasRenderingContext2D/direction
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/API/CanvasRenderingContext2D/direction
+---
+<div>{{APIRef}} {{SeeCompatTable}}</div>
+
+<p>La propriété <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.direction</code></strong> de l'API Canvas 2D indique la direction de texte courante utilisé lors du dessin de texte.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var><em>ctx</em>.direction = "ltr" || "rtl" || "inherit";</var>
+</pre>
+
+<h3 id="Options">Options</h3>
+
+<p>Valeurs possibles :</p>
+
+<dl>
+ <dt>ltr</dt>
+ <dd>La direction du texte est de gauche à droite.</dd>
+ <dt>rtl</dt>
+ <dd>La direction du texte est de droite à gauche.</dd>
+ <dt>inherit</dt>
+ <dd>La direction du texte est héritée de l'élément {{HTMLElement("canvas")}} ou du {{domxref("Document")}} comme approprié.</dd>
+</dl>
+
+<p>La valeur par défaut est <code>inherit</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Using_the_direction_property" name="Using_the_direction_property">Utilisation de la propriété <code>direction</code></h3>
+
+<p>Ceci est seulement un fragment de code simple utilisant la propriété <code>direction</code> pour indiquer un réglage de ligne de base différent.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.font = '48px serif';
+ctx.direction = 'ltr';
+ctx.strokeText('Hello world', 0, 100);
+</pre>
+
+<p>Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :</p>
+
+<div class="hidden">
+<h6 id="Playable_code" name="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.font = '48px serif';
+ctx.direction = 'ltr';
+ctx.strokeText('Hello world', 0, 100);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var edit = document.getElementById('edit');
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener('click', function() {
+  textarea.focus();
+})
+
+textarea.addEventListener('input', drawCanvas);
+window.addEventListener('load', drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="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', "scripting.html#dom-context-2d-direction", "CanvasRenderingContext2D.direction")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("api.CanvasRenderingContext2D.direction")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}.</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.html b/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.html
new file mode 100644
index 0000000000..1d217a65b7
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.html
@@ -0,0 +1,236 @@
+---
+title: CanvasRenderingContext2D.drawImage()
+slug: Web/API/CanvasRenderingContext2D/drawImage
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Méthode
+  - Référence(2)
+translation_of: Web/API/CanvasRenderingContext2D/drawImage
+---
+<div>{{APIRef}}</div>
+
+<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.drawImage()</code></strong> de l'API 2D des Canvas instaure différentes manières de dessiner des images dans les balises canvas.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.drawImage(image, dx, dy);</var>
+void <var><em>ctx</em>.drawImage(image, dx, dy, dLargeur, dHauteur);</var>
+void <var><em>ctx</em>.drawImage(image, sx, sy, sLargeur, sHauteur, dx, dy, dLargeur, dHauteur);</var>
+</pre>
+
+<p><img alt="drawImage" src="https://mdn.mozillademos.org/files/225/Canvas_drawimage.jpg" style="float: right;"></p>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>image</code></dt>
+ <dd>Un élément à dessiner dans le contexte. La spécification autorise toute source d'image canvas ({{domxref("CanvasImageSource")}}), ainsi qu'une {{domxref("HTMLImageElement")}}, une {{domxref("HTMLVideoElement")}}, une {{domxref("HTMLCanvasElement")}} ou une {{domxref("ImageBitmap")}}.</dd>
+ <dt><code>dx</code></dt>
+ <dd>La coordonnée <code>x</code> dans le canvas de destination où placer le coin supérieur gauche de l'<code>image</code> source.</dd>
+ <dt><code>dy</code></dt>
+ <dd>La coordonnée <code>y</code> dans le canvas de destination où placer le coin supérieur gauche de l'<code>image</code> source.</dd>
+ <dt><code>dLargeur</code></dt>
+ <dd>La largeur de l'<code>image</code> dessinée dans le contexte de la balise canvas. Cela permet d'ajuster la taille de l'image. Si cet argument n'est pas spécifié, l'image prendra sa largeur normale.</dd>
+ <dt><font face="Consolas, Liberation Mono, Courier, monospace">dHauteur</font></dt>
+ <dd>La hauteur de l'<code>image</code> dessinée dans le contexte de la balise canvas. Cela permet d'ajuster la taille de l'image. Si cet argument n'est pas spécifié, l'image prendra sa hauteur normale.</dd>
+ <dt><code>sx</code></dt>
+ <dd>La coordonnée <code>x</code> du bord en haut à gauche de la partie de l'<code>image</code> source à dessiner dans le contexte du canvas.</dd>
+ <dt><code>sy</code></dt>
+ <dd>La coordonnée <code>y</code> du bord en haut à gauche de la partie de l'<code>image</code> source à dessiner dans le contexte du canvas.</dd>
+ <dt><code>sLargeur</code></dt>
+ <dd>La largeur de la partie de l'image source à dessiner dans le contexte. Si ce n'est pas spécifié, cet argument prend la valeur de la largeur de l'image moins <code>sx</code>, autrement dit l'image dessinée dans le contexte sera la partie de l'image d'origine à partir du point s de coordonnées (<code>sx</code> ; <code>sy</code>) et jusqu'au bord en bas à droite.</dd>
+ <dt><code>sHauteur</code></dt>
+ <dd>La hauteur de la partie de l'image source à dessiner dans le contexte. De la même manière que pour sLargeur, si aucune valeur n'est donnée cet argument prendra la valeur de la hauteur de l'image moins <code>sy</code>.</dd>
+</dl>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<dl>
+ <dt><code>INDEX_SIZE_ERR</code></dt>
+ <dd>Si la balise canvas ou la largeur ou hauteur du rectangle source vaut zero ou moins.</dd>
+ <dt><code>INVALID_STATE_ERR</code></dt>
+ <dd>L'image reçue n'en est pas une.</dd>
+ <dt><code>TYPE_MISMATCH_ERR</code></dt>
+ <dd>L'image reçue n'est pas supportée.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_la_méthode_drawImage">Utiliser la méthode <code>drawImage</code></h3>
+
+<p>Ceci est un extrait de code utilisant la méthode <code>drawImage</code> :</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+&lt;div style="display:none;"&gt;
+  &lt;img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg"
+       width="300" height="227"&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[5]">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var image = document.getElementById("source");
+
+ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);
+</pre>
+
+<p>Éditez le code suivant pour voir les changements en direct dans la balise canvas:</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div style="display:none;"&gt;
+  &lt;img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227"&gt;
+&lt;/div&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var image = document.getElementById('source');
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<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', "scripting.html#dom-context-2d-drawimage", "CanvasRenderingContext2D.drawImage")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>format ImageBitmap</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(42)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome pour Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>format ImageBitmap</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(42)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Notes_concernant_la_compatibilité">Notes concernant la compatibilité</h2>
+
+<ul>
+ <li>Un support pour l'inversion de l'image pour les valeurs négatives pour <code>sLargeur</code> et <code>sHauteur</code> a été ajouté à Gecko 5.0 {{geckoRelease("5.0")}}.</li>
+ <li>A partir de {{geckoRelease("5.0")}} <code>drawImage()</code> gère les arguments négatifs, conformément à la spécification, en inversant ces valeurs par rapport aux axes.</li>
+ <li>Spécifier une image <code>null</code> ou <code>undefined</code> en appellant <code>drawImage()</code> correctement retournera une exception <code>TYPE_MISMATCH_ERR</code> à partir de {{geckoRelease("5.0")}}.</li>
+ <li>Prior to Gecko 7.0 {{ geckoRelease("7.0") }}, Firefox ajoute une exception si une des coordonnées est nulle ou négative. Selon la spécification, cela ne durera pas.</li>
+ <li>Gecko 9.0 {{ geckoRelease("9.0") }} supporte désormais correctement le CORS pour dessiner des images de domaines étrangers sans <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Images_avec_le_contr%C3%B4le_d_acc%C3%A8s_HTTP" title="en/CORS_Enabled_Image#What_is_a_.22tainted.22_canvas.3F">corrompre le canvas</a>.</li>
+ <li>Gecko 11.0 {{ geckoRelease("11.0") }} permet désormais de dessiner les images SVG dans le canvas sans <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Images_avec_le_contr%C3%B4le_d_acc%C3%A8s_HTTP" title="en/CORS_Enabled_Image#What_is_a_.22tainted.22_canvas.3F">corrompre le canevas</a>.</li>
+</ul>
+
+<h2 id="Notes">Notes</h2>
+
+<ul>
+ <li>drawImage() ne fonctionne correctement avec {{domxref("HTMLVideoElement")}} que si {{domxref("HTMLMediaElement.readyState")}}<strong> est supérieur à 1.</strong> (i.e, Chercher l'événement renvoyé après avoir mis la propriété currentTime)</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface qui la définit, {{domxref("CanvasRenderingContext2D")}}.</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.html b/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.html
new file mode 100644
index 0000000000..61d8e1345d
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.html
@@ -0,0 +1,134 @@
+---
+title: CanvasRenderingContext2D.ellipse()
+slug: Web/API/CanvasRenderingContext2D/ellipse
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Experimental
+  - Méthode
+translation_of: Web/API/CanvasRenderingContext2D/ellipse
+---
+<div>{{APIRef}} {{SeeCompatTable}}</div>
+
+<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.ellipse()</code></strong> de l'API Canvas 2D ajoute une ellipse au trajet, centrée en <em>(x, y),</em> les rayons <em>rayonX</em> et <em>rayonY</em> commençant à <em>angleDeDébut</em> et se terminant à <em>angleDeFin,</em> en allant dans le sens indiqué par <em>antiHoraire</em> (par défaut, horaire).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.ellipse(x, y, rayonX, rayonY, rotation, angleDébut, angleFin, antihoraire);</var>
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>La coordonnée sur l'axe des x du centre de l'ellipse.</dd>
+ <dt><code>y</code></dt>
+ <dd>La coordonnée sur l'axe des y du centre de l'ellipse.</dd>
+ <dt><code>rayon</code>X</dt>
+ <dd>Le rayon du grand axe de l'ellipse.</dd>
+ <dt><code>rayon</code>Y</dt>
+ <dd>Le rayon du petit axe de l'ellipse.</dd>
+ <dt><code>rotation</code></dt>
+ <dd>La rotation pour cette ellipse, exprimée en radians.</dd>
+ <dt><code>angleDébut</code></dt>
+ <dd>L'angle de début, mesuré à partir de l'axe des x, à partir duquel elle sera dessinée, exprimé en radians.</dd>
+ <dt><code>angleFin</code></dt>
+ <dd>L'angle de fin de l'ellipse, jusqu'auquel elle sera dessinée, exprimé in radians.</dd>
+ <dt><code>antihoraire</code> {{optional_inline}}</dt>
+ <dd>Un {{jsxref("Boolean")}} optionnel qui, si <code>true</code>, dessine l'ellipse dans le sens antihoraire, sinon dans le sens horaire.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Using_the_ellipse_method" name="Using_the_ellipse_method">Utilisation de la méthode <code>ellipse</code></h3>
+
+<p>Ceci est seulement un fragment de code simple dessinant une ellipse.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canevas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">var canevas = document.getElementById('canevas');
+var ctx = canevas.getContext('2d');
+
+ctx.beginPath();
+ctx.ellipse(100, 100, 50, 75, 45 * Math.PI/180, 0, 2 * Math.PI);
+ctx.stroke();
+</pre>
+
+<p>Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas (vérifiez le support de votre navigateur dans la table de compatibilité si aucune ellipse n'est tracée) :</p>
+
+<div style="display: none;">
+<h6 id="Playable_code" name="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.beginPath();
+ctx.ellipse(100, 100, 50, 75, 45 * Math.PI/180, 0, 2 * Math.PI);
+ctx.stroke();&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="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', "scripting.html#dom-context-2d-ellipse", "CanvasRenderingContext2D.ellipse")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+
+<p>{{Compat("api.CanvasRenderingContext2D.ellipse")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/fill/index.html b/files/fr/web/api/canvasrenderingcontext2d/fill/index.html
new file mode 100644
index 0000000000..f18e8e0d72
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/fill/index.html
@@ -0,0 +1,203 @@
+---
+title: CanvasRenderingContext2D.fill()
+slug: Web/API/CanvasRenderingContext2D/fill
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+translation_of: Web/API/CanvasRenderingContext2D/fill
+---
+<div>{{APIRef}}</div>
+
+<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.fill()</code></strong> de l'API Canvas 2D remplit le chemin courant ou donné avec la couleur de fond en cours, en utilisant la règle de remplissage extérieur/intérieur non nul ou la règle de remplissage pair/impair.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.fill([fillRule]);</var>
+void <var><em>ctx</em>.fill(path[, fillRule]);</var>
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>fillRule</code></dt>
+ <dd>L'algorithme utilisé pour déterminer si un point est à l'intérieur ou à l'extérieur du chemin.<br>
+ Valeurs possible:
+ <ul>
+  <li><code><strong>"nonzero</strong></code>": La <a href="http://en.wikipedia.org/wiki/Nonzero-rule">règle de remplissage extérieur/intérieur non nul</a>, qui est la règle par défaut.</li>
+  <li><code><strong>"evenodd"</strong></code>: La <a href="http://en.wikipedia.org/wiki/Even%E2%80%93odd_rule">règle de remplissage pair/impair</a>.</li>
+ </ul>
+ </dd>
+ <dt><code>path</code></dt>
+ <dd>Un chemin {{domxref("Path2D")}} à remplir.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_la_méthode_fill">Utiliser la méthode <code>fill</code></h3>
+
+<p>Ceci est un simple snippet de code qui utilise la méthode <code>fill</code> pour remplir un chemin.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[4]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+ctx.rect(10, 10, 100, 100);
+ctx.fill();
+</pre>
+
+<p>Éditez le code ci-dessous pour voir vos changements apportés au canvas en direct:</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.rect(10, 10, 100, 100);
+ctx.fill();&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h3 id="Utiliser_l'option_fillRule">Utiliser l'option <code>fillRule</code></h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt; </pre>
+
+<h4 id="JavaScript_2">JavaScript</h4>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.moveTo(96.50,50.00);
+ctx.bezierCurveTo(96.50,62.84,0.22,99.82,50.74,47.17);
+ctx.bezierCurveTo(100.18,0.58,62.84,96.50,50.00,96.50);
+ctx.bezierCurveTo(24.32,96.50,3.50,75.68,3.50,50.00);
+ctx.bezierCurveTo(3.50,24.32,24.32,3.50,50.00,3.50);
+ctx.bezierCurveTo(75.68,3.50,96.50,24.32,96.50,50.00);
+ctx.closePath();
+
+ctx.fillStyle = "lightblue";
+ctx.lineWidth = 2;
+ctx.fill("nonzero");
+ctx.stroke();</pre>
+
+<p>Éditez le code ci-dessous pour voir vos changements apportés au canvas en direct:</p>
+
+<div class="hidden">
+<h6 id="Playable_code_2">Playable code 2</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.beginPath();
+ctx.moveTo(96.50,50.00);
+ctx.bezierCurveTo(96.50,62.84,0.22,99.82,50.74,47.17);
+ctx.bezierCurveTo(100.18,0.58,62.84,96.50,50.00,96.50);
+ctx.bezierCurveTo(24.32,96.50,3.50,75.68,3.50,50.00);
+ctx.bezierCurveTo(3.50,24.32,24.32,3.50,50.00,3.50);
+ctx.bezierCurveTo(75.68,3.50,96.50,24.32,96.50,50.00);
+ctx.closePath();
+
+ctx.fillStyle = "lightblue";
+ctx.lineWidth = 2;
+ctx.fill("nonzero");
+ctx.stroke();&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('Playable_code_2', 700, 360)}}</p>
+
+<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>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fill", "CanvasRenderingContext2D.fill")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("api.CanvasRenderingContext2D.fill")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface qui définit cette méthode, {{domxref("CanvasRenderingContext2D")}}.</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.html b/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.html
new file mode 100644
index 0000000000..2a5e36e2cb
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.html
@@ -0,0 +1,128 @@
+---
+title: CanvasRenderingContext2D.fillRect()
+slug: Web/API/CanvasRenderingContext2D/fillRect
+tags:
+  - API
+  - Canvas
+  - CanvasRendering2D
+  - Méthode
+translation_of: Web/API/CanvasRenderingContext2D/fillRect
+---
+<div>{{APIRef}}</div>
+
+<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.fillRect()</code></strong> de l'API 2D des Canvas dessine un rectangle plein aux coordonnées <em>(x, y)</em>, aux dimensions déterminées par <em>largeur</em> et <em>hauteur</em> et au style déterminé par l'attribut <code>fillStyle</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.fillRect(x, y, largeur, hauteur);</var>
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>L'ordonnée <em>x</em> des coordonnées du point de départ du rectangle.</dd>
+ <dt><code>y</code></dt>
+ <dd>L'abscisse <em>y</em> des coordonnées du point de départ du rectangle.</dd>
+ <dt><code><font face="Consolas, Liberation Mono, Courier, monospace">largeur</font></code></dt>
+ <dd>La largeur du rectangle.</dd>
+ <dt><code>hauteur</code></dt>
+ <dd>La hauteur de rectangle.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_la_méthode_fillRect">Utilisation de la méthode <code>fillRect</code></h3>
+
+<p>Ceci est juste un extrait de code qui utilise la méthode <code>fillRect</code>.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[4]">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+ctx.fillStyle = "green";
+ctx.fillRect(10, 10, 100, 100);
+
+// remplir la balise entièrement
+// ctx.fillRect(0, 0, canvas.width, canvas.height);
+</pre>
+
+<p>Éditez le code suivant pour voir les changements en direct dans la balise canvas:</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.fillStyle = "green";
+ctx.fillRect(10, 10, 100, 100);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="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', "scripting.html#dom-context-2d-fillrect", "CanvasRenderingContext2D.fillRect")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("api.CanvasRenderingContext2D.fillRect")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface qui le définit, {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.fillStyle")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.clearRect()")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.html b/files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.html
new file mode 100644
index 0000000000..3fab6ac65c
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.html
@@ -0,0 +1,163 @@
+---
+title: CanvasRenderingContext2D.fillStyle
+slug: Web/API/CanvasRenderingContext2D/fillStyle
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Propriété
+  - Reference
+translation_of: Web/API/CanvasRenderingContext2D/fillStyle
+---
+<div>{{APIRef}}</div>
+
+<p>La propriété <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.fillStyle</code></strong> de l'API Canvas 2D spécifie la couleur ou style à utiliser à l'intérieur des formes. La valeur par défaut est <code>#000</code> (black).</p>
+
+<p>Voir également le chapitre <a href="/fr/docs/Tutoriel_canvas/Ajout_de_styles_et_de_couleurs">Ajout de styles et de couleurs</a> dans le <a href="/fr/docs/Tutoriel_canvas">Tutoriel canvas</a>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var><em>ctx</em>.fillStyle = color;
+</var><var><em>ctx</em>.fillStyle = gradient;
+</var><var><em>ctx</em>.fillStyle = pattern;</var>
+</pre>
+
+<h3 id="Options">Options</h3>
+
+<dl>
+ <dt><code>color</code></dt>
+ <dd>Une {{domxref("DOMString")}} analysée comme valeur CSS {{cssxref("&lt;color&gt;")}}.</dd>
+ <dt><code>gradient</code></dt>
+ <dd>Un objet {{domxref("CanvasGradient")}} (un gradient linéaire ou radial).</dd>
+ <dt><code>pattern</code></dt>
+ <dd>Un objet {{domxref("CanvasPattern")}} (une image répétée).</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Using_the_fillStyle_property" name="Using_the_fillStyle_property">Utiliser la propriété <code>fillStyle</code> pour définir une couleur différente</h3>
+
+<p>Ceci est un simple snippet de code utilisant la propriété <code>fillStyle</code> pour définir une couleur différente.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.fillStyle = 'blue';
+ctx.fillRect(10, 10, 100, 100);
+</pre>
+
+<p>Éditez le code ci-dessous pour voir vos changements mettre à jour le canvas directement:</p>
+
+<div class="hidden">
+<h6 id="Playable_code" name="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.fillStyle = 'blue';
+ctx.fillRect(10, 10, 100, 100);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var edit = document.getElementById('edit');
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener('click', function() {
+  textarea.focus();
+})
+
+textarea.addEventListener('input', drawCanvas);
+window.addEventListener('load', drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h3 id="Un_exemple_fillStyle_avec_les_boucles_for">Un exemple <code>fillStyle</code> avec les boucles <code>for</code></h3>
+
+<p>Dans cet exemple, nous allons utiliser deux boucles <code>for</code> pour dessiner une grille de rectangles, chacun avec une couleur différente. L'image qui en résulte devrait ressembler à la capture d'écran. Il n'y a rien de très extraordinaire ici, nous utilisons deux variables <code>i</code> et <code>j</code> pour générer une couleur RGB unique pour chaque carré, en modifiant uniquement les valeurs de rouge et vert; le canal bleu a une valeur fixe. En modifiant les canaux, vous pouvez générer toutes sorte de palettes. En augmentant le nombre, vous pouvez générer quelque chose de ressemblant aux palettes de couleurs utilisées par Photoshop.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+</div>
+
+<pre class="brush: js">var ctx = document.getElementById('canvas').getContext('2d');
+for (var i = 0; i &lt; 6; i++){
+  for (var j = 0; j &lt; 6; j++){
+    ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ',' +
+                     Math.floor(255 - 42.5 * j) + ',0)';
+    ctx.fillRect(j * 25, i * 25, 25, 25);
+  }
+}
+</pre>
+
+<p>Le résultat devrait ressembler à ça:</p>
+
+<p>{{EmbedLiveSample("A_fillStyle_example_with_for_loops", 160, 160, "https://mdn.mozillademos.org/files/5417/Canvas_fillstyle.png")}}</p>
+
+<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>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillstyle", "CanvasRenderingContext2D.fillStyle")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("api.CanvasRenderingContext2D.fillStyle")}}</p>
+
+<h2 id="Notes_spécifiques_à_WebKitBlink">Notes spécifiques à WebKit/Blink</h2>
+
+<ul>
+ <li>Outre <code>ctx.fillStyle</code>, il existe dans les navigateurs basés sur WebKit et Blink une méthode non-standard et dépréciée, <code>ctx.setFillColor()</code>.
+
+  <pre class="brush: js">setFillColor(color, optional alpha);
+setFillColor(grayLevel, optional alpha);
+setFillColor(r, g, b, a);
+setFillColor(c, m, y, k, a);
+</pre>
+ </li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface définissant cette méthode, {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasGradient")}}</li>
+ <li>{{domxref("CanvasPattern")}}</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/filltext/index.html b/files/fr/web/api/canvasrenderingcontext2d/filltext/index.html
new file mode 100644
index 0000000000..666e230f59
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/filltext/index.html
@@ -0,0 +1,180 @@
+---
+title: CanvasRenderingContext2D.fillText()
+slug: Web/API/CanvasRenderingContext2D/fillText
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Méthode
+  - Reference
+translation_of: Web/API/CanvasRenderingContext2D/fillText
+---
+<div>{{APIRef}}</div>
+
+<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.fillText()</code></strong> de l'API Canvas 2D écrit un texte donné à la position <em>(x, y)</em> donnée. Si le quatrième paramètre optionnel donnant une largeur maximum est fourni, le texte sera mis à l'échelle pour s'adapter à cette largeur.</p>
+
+<p>Voir aussi la méthode {{domxref("CanvasRenderingContext2D.strokeText()")}} pour dessiner un texte mis en forme.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.fillText(texte, x, y [, largeurMax]);</var>
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>texte</code></dt>
+ <dd>Le texte à représenter en utilisant les valeurs en cours de {{domxref("CanvasRenderingContext2D.font","font")}}, {{domxref("CanvasRenderingContext2D.textAlign","textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline","textBaseline")}}, et de {{domxref("CanvasRenderingContext2D.direction","direction")}}.</dd>
+</dl>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>La valeur de la coordonnée sur l'axe des x du point de début du texte.</dd>
+ <dt><code>y</code></dt>
+ <dd>La valeur de la coordonnée sur l'axe des y du point de fin du texte.</dd>
+ <dt><code>largeurMax</code> {{optional_inline}}</dt>
+ <dd>La largeur maximum à dessiner. Si spécifiée, et si la longueur calculée de la chaîne est supérieure à cette largeur, la police est ajustée pour utiliser une police plus condensée horizontalement (s'il en existe une ou s'il peut en être synthétisée une raisonnablement lisible en mettant à l'échelle horizontalement la police en cours) ou une plus petite police.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_la_méthode_fillText">Utilisation de la méthode <code>fillText</code></h3>
+
+<p>Ceci est seulement un fragment de code simple utilisant la méthode <code>fillText</code>.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[5]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.font = '48px serif';
+ctx.fillText('Hello world', 50, 100);
+</pre>
+
+<p>Modifiez le code ci-dessous et voyez vos changements être mis à jour en temps réel dans le canevas :</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.font = "48px serif";
+ctx.fillText("Hello world", 50, 100);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="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', "scripting.html#dom-context-2d-filltext", "CanvasRenderingContext2D.fillText")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("1.9.1") }}</td>
+   <td>{{ CompatIE(9) }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome pour 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>Support de base</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("1.9.1") }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.strokeText()")}}</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/font/index.html b/files/fr/web/api/canvasrenderingcontext2d/font/index.html
new file mode 100644
index 0000000000..8f3cba24fe
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/font/index.html
@@ -0,0 +1,140 @@
+---
+title: CanvasRenderingContext2D.font
+slug: Web/API/CanvasRenderingContext2D/font
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Propriété
+  - Reference
+translation_of: Web/API/CanvasRenderingContext2D/font
+---
+<div>{{APIRef}}</div>
+
+<p>La propriété <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.font</code></strong><code> de l'API</code> Canvas 2D API spécifie le style de texte à utiliser pour dessiner du texte. Cette chaîne utilise la même syntaxe que le spécificateur de <a href="/fr-FR/docs/Web/CSS/font" title="fr/CSS/font">police CSS</a>. La police par défaut est 10px sans-serif.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var><em>ctx</em>.font = value;</var>
+</pre>
+
+<h3 id="Options">Options</h3>
+
+<dl>
+ <dt><code>valeur</code></dt>
+ <dd>Une valeur {{domxref("DOMString")}} analysée comme une valeur de {{cssxref("font")}} CSS. La police par défaut est 10px sans-serif.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_la_propriété_font">Utilisation de la propriété <code>font</code></h3>
+
+<p>Ceci est seulement un fragment de code simple utilisant la propriéte font pour indiquer une taille de police et une famille de police différentes.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.font = '48px serif';
+ctx.strokeText('Hello world', 50, 100);
+</pre>
+
+<p>Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.font = '48px serif';
+ctx.strokeText('Hello world', 50, 100);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var edit = document.getElementById('edit');
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener('click', function() {
+  textarea.focus();
+})
+
+textarea.addEventListener('input', drawCanvas);
+window.addEventListener('load', drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h3 id="Chargement_de_polices_avec_l'API_CSS_Font_Loading">Chargement de polices avec l'API CSS Font Loading</h3>
+
+<p>A l'aide de l'API {{domxref("FontFace")}}, vous pouvez explicitement charger des polices avant de les utiliser dans un canevas.</p>
+
+<pre class="brush: js">var f = new FontFace('test', 'url(x)');
+
+f.load().then(function() {
+  // Prêt à utiliser la police dans un contexte de canevas
+});</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', "scripting.html#dom-context-2d-font", "CanvasRenderingContext2D.font")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("api.CanvasRenderingContext2D.font")}}</p>
+
+<h2 id="Notes_spécifiques_à_Gecko">Notes spécifiques à Gecko</h2>
+
+<ul>
+ <li>Dans les navigateurs basés sur Gecko, tels que Firefox, une propriété non standard et désapprouvée <code>ctx.mozTextStyle</code> est implémentée en plus de cette propriété. Ne l'utilisez pas.</li>
+</ul>
+
+<h3 id="Notes_relatives_à_Quantum">Notes relatives à Quantum</h3>
+
+<ul>
+ <li>Un bug ({{bug(1374885)}}) a été corrigé avec Quantum et qui empêchait de récupérer la police d'un contexte lorsqu'une police système était utilisée. Cela a été corrigée avec <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a> qui a été publié avec Firefox 57.</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/getimagedata/index.html b/files/fr/web/api/canvasrenderingcontext2d/getimagedata/index.html
new file mode 100644
index 0000000000..719eb385dc
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/getimagedata/index.html
@@ -0,0 +1,103 @@
+---
+title: CanvasRenderingContext2D.getImageData()
+slug: Web/API/CanvasRenderingContext2D/getImageData
+tags:
+  - API
+  - Canvas
+  - Canvas API
+  - CanvasRenderingContext2D
+  - Image
+  - ImageData
+  - Méthode
+  - Méthodes
+  - References
+  - getImageDate
+translation_of: Web/API/CanvasRenderingContext2D/getImageData
+---
+<div>{{APIRef}}</div>
+
+<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.getImageData()</code></strong> de l'API Canvas 2D retourne un  objet {{domxref("ImageData")}} représentant les données de pixels sous-jacentes pour la zone du canevas désigné par le rectangle qui commence aux positions <em>(sx, sy)</em> et qui possède des attributs : <em>largeur (sw</em>) et <em>hauteur</em> (<em>sh)</em>. Cette méthode n'est pas affectée par la matrice de transformation du canevas.</p>
+
+<p><span id="result_box" lang="fr"><span>Les pixels en dehors de la zone de canevas sont présents sous forme de valeurs noires transparentes dans les données d'image renvoyées.</span></span></p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">ImageData <var><em>ctx</em>.getImageData(sx, sy, sw, sh);</var>
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>sx</code></dt>
+ <dd>La coordonnée x du coin supérieur gauche du rectangle à partir duquel <em>ImageData</em> sera extrait.</dd>
+ <dt><code>sy</code></dt>
+ <dd>La coordonnée y du coin supérieur gauche du rectangle à partir duquel <em>ImageData</em><strong><em> </em></strong> sera extrait.</dd>
+ <dt><code>sw</code></dt>
+ <dd>La largeur du rectangle à partir duquel <em>ImageData<strong> </strong></em>sera extrait.</dd>
+ <dt><code>sh</code></dt>
+ <dd>La hauteur du rectangle à partir duquel <em>ImageData<strong> </strong></em>sera extrait.</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Un objet {{domxref("ImageData")}}  contenant les données de l'image pour le rectangle donné du canevas.</p>
+
+<h3 id="Erreurs_renvoyées">Erreurs renvoyées</h3>
+
+<dl>
+ <dt><code>IndexSizeError</code></dt>
+ <dd>Renvoyé si l'un des arguments de  largeur ou de hauteur est égal à zéro.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_la_méthode_getImageData">Utilisation de la méthode  <code>getImageData</code></h3>
+
+<p>Ceci est juste un petit exemple qui utilise la méthode getImageData. Pour plus d'informations, visitez  <a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Pixel_manipulation_with_canvas">Manipulation de pixels avec canvas</a> et l'objet {{domxref("ImageData")}}.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[6]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+ctx.rect(10, 10, 100, 100);
+ctx.fill();
+
+console.log(ctx.getImageData(50, 50, 100, 100));
+// ImageData { largeur: 100, hauteur: 100, données: Uint8ClampedArray[40000] }
+</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', "scripting.html#dom-context-2d-getimagedata", "CanvasRenderingContext2D.getImageData")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("api.CanvasRenderingContext2D.getImageData")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><span class="short_text" id="result_box" lang="fr"><span>L'interface le définissant</span></span> : {{domxref("CanvasRenderingContext2D")}}.</li>
+ <li>{{domxref("ImageData")}}</li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Pixel_manipulation_with_canvas">Manipulation de pixels avec canvas</a></li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.html b/files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.html
new file mode 100644
index 0000000000..a0cb81d4c8
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.html
@@ -0,0 +1,178 @@
+---
+title: CanvasRenderingContext2D.globalAlpha
+slug: Web/API/CanvasRenderingContext2D/globalAlpha
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Propriété
+  - Reference
+translation_of: Web/API/CanvasRenderingContext2D/globalAlpha
+---
+<div>{{APIRef}}</div>
+
+<div>La propriété <strong>CanvasRenderingContext2D.globalAlpha</strong> de l'API Canvas 2D spécifie la valeur alpha qui sera appliquée aux formes et aux images avant qu'elles ne soient dessinées sur le canevas. La valeur est comprise entre 0,0 (entièrement transparente) et 1,0 (entièrement opaque).</div>
+
+<div> </div>
+
+<p>Voir aussi le chapitre <a href="/fr-FR/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">Ajout de styles et de couleurs</a> dans le <a href="/fr-FR/docs/Web/API/Canvas_API/Tutorial">Tutoriel canvas</a>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>ctx.globalAlpha = valeur;</var>
+</pre>
+
+<h3 id="Options">Options</h3>
+
+<dl>
+ <dt><code>valeur</code></dt>
+ <dd>Un nombre entre 0,0 (entièrement transparente) et 1,0 (entièrement opaque). La valeur par défaut est 1,0. Les valeurs hors de la plage, y compris {{jsxref ("Infinity")}} et {{jsxref ("NaN")}} ne seront pas définies et <code>globalAlpha</code> conservera sa valeur précédente.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Using_the_globalAlpha_property" name="Using_the_globalAlpha_property">Utilisation de la propriété <code>globalAlpha</code></h3>
+
+<p>Il s'agit seulement d'un simple fragment de code utilisant la propriété <code>globalAlpha</code> pour dessiner deux rectangles semi-transparents.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canevas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight[4]">var canevas = document.getElementById('canevas');
+var ctx = canevas.getContext('2d');
+
+ctx.globalAlpha = 0.5;
+
+ctx.fillStyle = "blue";
+ctx.fillRect(10, 10, 100, 100);
+
+ctx.fillStyle = "red";
+ctx.fillRect(50, 50, 100, 100);
+</pre>
+
+<p>Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canevas :</p>
+
+<div class="hidden">
+<h6 id="Playable_code" name="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canevas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="modifier" type="button" value="Modifier" /&gt;
+  &lt;input id="effacement" type="button" value="Effacement" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code" style="height:120px;"&gt;
+ctx.globalAlpha = 0.5;
+
+ctx.fillStyle = 'blue';
+ctx.fillRect(10, 10, 100, 100);
+
+ctx.fillStyle = 'red';
+ctx.fillRect(50, 50, 100, 100);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canevas = document.getElementById('canevas');
+var ctx = canevas.getContext('2d');
+var zoneTexte = document.getElementById('code');
+var effacement = document.getElementById('effacement');
+var modifier = document.getElementById('modifier');
+var code = zoneTexte.value;
+
+function dessinerCanevas() {
+  ctx.clearRect(0, 0, canevas.width, canevas.height);
+  eval(zoneTexte.value);
+}
+
+effacement.addEventListener('click', function() {
+  zoneT.value = code;
+  dessinerCanevas();
+});
+
+modifier.addEventListener('click', function() {
+  zoneTexte.focus();
+})
+
+zoneTexte.addEventListener('input', dessinerCanevas);
+window.addEventListener('load', dessinerCanevas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 380) }}</p>
+
+<h3 id="A_globalAlpha_example" name="A_globalAlpha_example">Un exemple de <code>globalAlpha</code></h3>
+
+<p>Dans cet exemple, un arrière-plan de quatre carrés de différentes couleurs est dessiné. Au dessus, se trouve un ensemble de cercles semi-transparents. La propriété globalAlpha est définie à 0,2, valeur qui sera utilisée pour toutes les formes à partir de ce point. Chaque étape de la boucle <code>for</code> dessine un ensemble de cercles de rayons croissants. Le résultat final est un dégradé radial. En superposant toujours plus de cercles les uns sur les autres, la transparence des cercles déjà dessinés est réduite. En augmentant le nombre d'étapes et, concrètement, en dessinant davantage de cercles, l'arrière-plan disparaitra complètement du centre de l'image.</p>
+
+<pre class="brush: js">var ctx = document.getElementById('canevas').getContext('2d');
+
+// Dessiner l'arrière-plan
+ctx.fillStyle = '#FD0';
+ctx.fillRect(0, 0, 75, 75);
+ctx.fillStyle = '#6C0';
+ctx.fillRect(75, 0, 75, 75);
+ctx.fillStyle = '#09F';
+ctx.fillRect(0, 75, 75, 75);
+ctx.fillStyle = '#F30';
+ctx.fillRect(75, 75, 75, 75);
+ctx.fillStyle = '#FFF';
+
+// Définir la valeur de transparence
+ctx.globalAlpha = 0.2;
+
+// Dessiner les cercles semi-transparents
+for (i = 0; i &lt; 7; i++){
+  ctx.beginPath();
+  ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true);
+  ctx.fill();
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canevas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "https://mdn.mozillademos.org/files/232/Canvas_globalalpha.png")}}</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('HTML WHATWG', "scripting.html#dom-context-2d-globalalpha", "CanvasRenderingContext2D.globalAlpha")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("api.CanvasRenderingContext2D.globalAlpha")}}</p>
+
+<h2 id="Notes_spécifiques_à_Gecko">Notes spécifiques à Gecko</h2>
+
+<ul>
+ <li>À partir de Gecko 5.0, la spécification de valeurs invalides pour globalAlpha ne génère plus une exception SYNTAX_ERR ; celles-ci sont silencieusement et correctement ignorées.</li>
+</ul>
+
+<h2 id="Notes_spécifiques_à_WebKitBlink">Notes spécifiques à WebKit/Blink</h2>
+
+<ul>
+ <li>Dans les navigateurs WebKit et Blink, une méthode non standard et désapprouvée <code>ctx.setAlpha() </code>est implémentée en plus de cette propriété.</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.globalCompositeOperation")}}</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.html b/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.html
new file mode 100644
index 0000000000..2aa8c851b3
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.html
@@ -0,0 +1,97 @@
+---
+title: CanvasRenderingContext2D.globalCompositeOperation
+slug: Web/API/CanvasRenderingContext2D/globalCompositeOperation
+translation_of: Web/API/CanvasRenderingContext2D/globalCompositeOperation
+---
+<div>{{APIRef}}</div>
+
+<p>La propriété <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.globalCompositeOperation</code></strong> de l'API Canvas 2D définit le type d'opération de composition à appliquer lors du tracé de nouvelles formes.</p>
+
+<p>Voir aussi <a href="/fr/docs/Tutoriel_canvas/Composition">Composition et découpe</a> dans le <a href="/fr/docs/Tutoriel_canvas">Tutoriel canvas</a>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>ctx</em>.globalCompositeOperation = <em>type</em>;</pre>
+
+<p><code>type</code> est de type {{jsxref("String")}} et permet de choisir quelle opération de composition ou de mode fondu utiliser.</p>
+
+<h3 id="Types">Types</h3>
+
+<p>{{EmbedLiveSample("Compositing_example", 750, 6900, "" ,"Web/API/Canvas_API/Tutorial/Compositing/Example")}}</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Changer_lopération_de_composition">Changer l'opération de composition</h3>
+
+<p>Cet exemple utilise la propriété <code>globalCompositeOperation</code> pour dessiner deux rectangles qui s'excluent l'un l'autre quand ils se superposent.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight[4]">const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.globalCompositeOperation = 'xor';
+
+ctx.fillStyle = 'blue';
+ctx.fillRect(10, 10, 100, 100);
+
+ctx.fillStyle = 'red';
+ctx.fillRect(50, 50, 100, 100);
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{ EmbedLiveSample('Changing_the_composite_operation', 700, 180) }}</p>
+
+<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('HTML WHATWG', "scripting.html#dom-context-2d-globalcompositeoperation", "CanvasRenderingContext2D.globalCompositeOperation")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Compositing')}}</td>
+   <td>{{Spec2('Compositing')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">La table de compatibilité sur cette page est générée à partir de données structurées. Si vous souhaitez apporter votre contribution, veuillez consulter la page <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull-request.</div>
+
+<p>{{Compat("api.CanvasRenderingContext2D.globalCompositeOperation")}}</p>
+
+<h3 id="Remarques_concernant_WebKitBlink">Remarques concernant WebKit/Blink</h3>
+
+<ul>
+ <li>Dans les navigateurs de type WebKit et Blink, la méthode non-standard et obsolète <code>ctx.setCompositeOperation()</code> est implémentée à la place de cette propriété.</li>
+ <li>Le support de <code>"plus-darker"</code> et<code>"darker"</code> a été abandonné à partir de Chrome 48. Veuillez utiliser <code>"darken"</code> à la place.</li>
+</ul>
+
+<h3 id="Remarques_concernant_Gecko">Remarques concernant Gecko</h3>
+
+<ul>
+ <li>Une version préliminaire de la spécification de Canvas définissait une valeur <code>"darker"</code>. Cependant, Firefox a abandonné le support de <code>"darker"</code> dans sa version 4 ({{bug(571532)}}). Voir aussi <a href="http://dropshado.ws/post/77229081704/firefox-doesnt-support-canvas-composite-darker">cet article de blog</a> qui suggère l'utilisation de <code>"difference"</code> pour parvenir à un effet similaire à <code>"darker"</code>.</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface qui définit cette propriété : {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.globalAlpha")}}</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.html b/files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.html
new file mode 100644
index 0000000000..415300d3a8
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.html
@@ -0,0 +1,136 @@
+---
+title: CanvasRenderingContext2D.imageSmoothingEnabled
+slug: Web/API/CanvasRenderingContext2D/imageSmoothingEnabled
+tags:
+  - API
+  - Canevas
+  - Canvas
+  - CanvasRenderingContext2D
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/API/CanvasRenderingContext2D/imageSmoothingEnabled
+---
+<div>{{APIRef}} {{SeeCompatTable}}</div>
+
+<p>La propriété <code>CanvasRenderingContext2D.imageSmoothingEnabled</code> de l'API Canvas 2D peut être affectée pour changer le fait que les images soient lissées (<code>true</code>, par défaut) ou non (<code>false</code>). Lors de la récupération de la propriété <code>imageSmoothingEnabled</code>, la dernière valeur à laquelle elle a été définie est renvoyée.</p>
+
+<p>Cette propriété est utile pour les jeux à thème pixel-art, lors d'une mise à l'échelle du canvas par exemple. L'algorithme de redimensionnement par défaut peut créer des effets de flou et ruiner les jolis pixels. Mettez cette propriété à <code>false</code> dans ce cas. Voir aussi la propriété CSS {{cssxref("image-rendering")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var><em>ctx</em>.imageSmoothingEnabled = valeur;</var></pre>
+
+<h3 id="Options">Options</h3>
+
+<dl>
+ <dt><code>valeur</code></dt>
+ <dd>Un {{jsxref("Boolean")}} indiquant de lisser les images ou non.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Using_the_globalAlpha_property" name="Using_the_globalAlpha_property">Utilisation de la propriété <code>imageSmoothingEnabled</code></h3>
+
+<p>Ceci est juste un simple fragment de code utilisant la propriété <code>imageSmoothingEnabled</code> sur une image mise à l'échelle.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canevas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight[7-10]">var canevas = document.getElementById('canevas');
+var ctx = canevas.getContext('2d');
+
+var img = new Image();
+img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
+img.onload = function() {
+ ctx.mozImageSmoothingEnabled = false;
+ ctx.webkitImageSmoothingEnabled = false;
+ ctx.msImageSmoothingEnabled = false;
+ ctx.imageSmoothingEnabled = false;
+ ctx.drawImage(img, 0, 0, 400, 200);
+};
+</pre>
+
+<p>Modifiez le code ci-dessous et voyez vos changements mis à jour en direct dans le canevas :</p>
+
+<div class="hidden">
+<h6 id="Playable_code" name="Playable_code">Code jouable</h6>
+
+<pre class="brush: html">&lt;canvas id="canevas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="<code>playable-buttons</code>"&gt;
+  &lt;input id="modifier" type="button" value="Modifier" /&gt;
+  &lt;input id="effacer" type="button" value="Effacer" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="<code>playable-code</code>" style="height:140px;"&gt;
+var img = new Image();
+img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
+img.onload = function() {
+ ctx.mozImageSmoothingEnabled = false;
+ ctx.webkitImageSmoothingEnabled = false;
+ ctx.msImageSmoothingEnabled = false;
+ ctx.imageSmoothingEnabled = false;
+ ctx.drawImage(img, 0, 0, 400, 200);
+};&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canevas = document.getElementById('canevas');
+var ctx = canevas.getContext('2d');
+var textarea = document.getElementById('code');
+var effacer = document.getElementById('effacer');
+var modifier = document.getElementById('modifier');
+var code = textarea.value;
+
+function dessinerCanevas() {
+  ctx.clearRect(0, 0, canevas.width, canevas.height);
+  eval(textarea.value);
+}
+
+effacer.addEventListener('click', function() {
+  textarea.value = code;
+  dessinerCanevas();
+});
+
+modifier.addEventListener('click', function() {
+  textarea.focus();
+})
+
+textarea.addEventListener('input', dessinerCanevas);
+window.addEventListener('load', dessinerCanevas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 400) }}</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('HTML WHATWG', "scripting.html#dom-context-2d-imagesmoothingenabled", "CanvasRenderingContext2D.imageSmoothingEnabled")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("api.CanvasRenderingContext2D.imageSmoothingEnabled")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{cssxref("image-rendering")}}</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/index.html b/files/fr/web/api/canvasrenderingcontext2d/index.html
new file mode 100644
index 0000000000..ead40576bd
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/index.html
@@ -0,0 +1,434 @@
+---
+title: CanvasRenderingContext2D
+slug: Web/API/CanvasRenderingContext2D
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - graphique
+translation_of: Web/API/CanvasRenderingContext2D
+---
+<p>{{APIRef}}</p>
+
+<p>L'interface <strong>CanvasRenderingContext2D</strong> est utilisée pour dessiner des rectangles, du texte, des images et d'autres objets sur l'élément canvas. Il fournit le contexte de rendu 2D pour la surface de dessin d'un élément {{HTMLElement("canvas")}}.</p>
+
+<p>Pour obtenir un objet de cette interface, appelez {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} sur un élément <code>&lt;canvas&gt;</code>, en fournissant "2d" comme argument :</p>
+
+<pre>var canevas = document.getElementById('tutorial'); // dans votre HTML, cet élément apparaît comme &lt;canvas id="monCanevas"&gt;&lt;/canvas&gt;
+var ctx = canevas.getContext('2d');
+</pre>
+
+<p><span style="line-height: 1.5;">Une fois que vous avez le contexte de rendu 2D pour un canevas, vous pouvez dessiner à l'intérieur. Par exemple :</span></p>
+
+<pre>ctx.fillStyle = "rgb(200,0,0)"; // définit la couleur de remplissage du rectangle
+ctx.fillRect(10, 10, 55, 50);   // dessine le rectangle à la position 10, 10 d'une largeur de 55 et d'une hauteur de 50
+</pre>
+
+<p><span style="line-height: 1.5;">Voir les propriétés et les méthodes dans la barre latérale et plus bas. Le </span><a href="https://developer.mozilla.org/fr-FR/docs/Web/API/Canvas_API/Tutorial" title="Canvas tutorial">tutoriel canvas</a><span style="line-height: 1.5;"> a davantage d'informations, d'exemples et de ressources également.</span></p>
+
+<h2 id="Dessin_de_rectangles">Dessin de rectangles</h2>
+
+<p>Il existe trois méthodes qui dessinent immédiatement des rectangles sur la bitmap.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.clearRect()")}}</dt>
+ <dd>Initialise tous les pixels dans le rectangle défini par le point de départ <em>(x, y)</em> et la taille <em>(largeur, hauteur)</em> à noir transparent, en effaçant tout contenu précédemment dessiné.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.fillRect()")}}</dt>
+ <dd>Dessine un rectangle rempli à la position <em>(x, y)</em> dont la taille est déterminée par <em>largeur</em> et <em>hauteur</em>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</dt>
+ <dd>Peint un rectangle ayant un point de départ en <em>(x, y)</em>, une largeur <em>l</em> et une hauteur <em>h</em> sur le canevas, en utilisant le style de trait en cours.</dd>
+</dl>
+
+<h2 id="Dessiner_du_texte">Dessiner du texte</h2>
+
+<p>Les méthodes suivantes permettent de dessiner du texte. Voir aussi l'objet {{domxref("TextMetrics")}} pour les propriétés du texte.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.fillText()")}}</dt>
+ <dd>Dessine (rempli) un texte donné à la position (x,y) donnée.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.strokeText()")}}</dt>
+ <dd>Dessine (contour) un texte donné à la position (x, y) donnée.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.measureText()")}}</dt>
+ <dd>Renvoie un objet {{domxref("TextMetrics")}}.</dd>
+</dl>
+
+<h2 id="Styles_de_ligne">Styles de ligne</h2>
+
+<p>Les méthodes et propriétés suivantes controllent comment les lignes sont dessinées.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.lineWidth")}}</dt>
+ <dd>Largeur des lignes. Défaut <code>1.0</code></dd>
+ <dt>{{domxref("CanvasRenderingContext2D.lineCap")}}</dt>
+ <dd>Type de finission pour la fin de la ligne. Valeurs possible: <code>butt</code> (défaut), <code>round</code>, <code>square</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.lineJoin")}}</dt>
+ <dd>Définit le type de coin quand deux lignes se rejoignent. Valeurs possible: <code>round</code>, <code>bevel</code>, <code>miter</code> (défaut).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.miterLimit")}}</dt>
+ <dd>Le taux limite du miter. Sa valeur par défaut est <code>10</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.getLineDash()")}}</dt>
+ <dd>Retourne le tableau de modèle du trait courant contenant un nombre pair de nombre positifs.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.setLineDash()")}}</dt>
+ <dd>Définit le modèle du trait courant.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.lineDashOffset")}}</dt>
+ <dd>Specifies where to start a dash array on a line.</dd>
+</dl>
+
+<h2 id="Styles_de_texte">Styles de texte</h2>
+
+<p>Les propriétés suivantes contrôlent la manière dont le texte est rendu à l’affichage.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.font")}}</dt>
+ <dd>Paramètre de fonte dont la valeur par défaut est <code>10px sans-serif</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.textAlign")}}</dt>
+ <dd>Paramètre d’alignement horizontal. Ses valeurs possibles sont : <code>start</code> (par défaut), <code>end</code>, <code>left</code>, <code>right</code> et <code>center</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.textBaseline")}}</dt>
+ <dd>Paramètre d’alignement vertical par rapport à la ligne de base du texte. Ses valeurs possibles sont : <code>top</code>, <code>hanging</code>, <code>middle</code>, <code>alphabetic</code> (par défaut), <code>ideographic</code>, <code>bottom</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.direction")}}</dt>
+ <dd>Direction d’affichage. Ses valeurs possibles sont : <code>ltr, rtl</code>, <code>inherit</code> (par défaut).</dd>
+</dl>
+
+<h2 id="Fill_and_stroke_styles">Fill and stroke styles</h2>
+
+<p>Fill styling is used for colors and styles inside shapes and stroke styling is used for the lines around shapes.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.fillStyle")}}</dt>
+ <dd>Color or style to use inside shapes. Default <code>#000</code> (black).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.strokeStyle")}}</dt>
+ <dd>Color or style to use for the lines around shapes. Default <code>#000</code> (black).</dd>
+</dl>
+
+<h2 id="Gradients_and_patterns">Gradients and patterns</h2>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.createLinearGradient()")}}</dt>
+ <dd>Creates a linear gradient along the line given by the coordinates represented by the parameters.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.createRadialGradient()")}}</dt>
+ <dd>Creates a radial gradient given by the coordinates of the two circles represented by the parameters.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.createPattern()")}}</dt>
+ <dd>Creates a pattern using the specified image (a {{domxref("CanvasImageSource")}}). It repeats the source in the directions specified by the repetition argument. This method returns a {{domxref("CanvasPattern")}}.</dd>
+</dl>
+
+<h2 id="Shadows">Shadows</h2>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowBlur")}}</dt>
+ <dd>Specifies the blurring effect. Default <code>0</code></dd>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowColor")}}</dt>
+ <dd>Color of the shadow. Default fully-transparent black.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetX")}}</dt>
+ <dd>Horizontal distance the shadow will be offset. Default 0.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetY")}}</dt>
+ <dd>Vertical distance the shadow will be offset. Default 0.</dd>
+</dl>
+
+<h2 id="Paths">Paths</h2>
+
+<p>The following methods can be used to manipulate paths of objects.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.beginPath()")}}</dt>
+ <dd>Starts a new path by emptying the list of sub-paths. Call this method when you want to create a new path.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.closePath()")}}</dt>
+ <dd>Causes the point of the pen to move back to the start of the current sub-path. It tries to draw a straight line from the current point to the start. If the shape has already been closed or has only one point, this function does nothing.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.moveTo()")}}</dt>
+ <dd>Moves the starting point of a new sub-path to the <strong>(x, y)</strong> coordinates.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.lineTo()")}}</dt>
+ <dd>Connects the last point in the subpath to the <code>x, y</code> coordinates with a straight line.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.bezierCurveTo()")}}</dt>
+ <dd>Adds a cubic Bézier curve to the path. It requires three points. The first two points are control points and the third one is the end point. The starting point is the last point in the current path, which can be changed using <code>moveTo()</code>before creating the Bézier curve.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.quadraticCurveTo()")}}</dt>
+ <dd>Adds a quadratic Bézier curve to the current path.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.arc()")}}</dt>
+ <dd>Adds an arc to the path which is centered at <em>(x, y)</em> position with radius<em> r</em> starting at <em>startAngle</em> and ending at <em>endAngle</em> going in the given direction by <em>anticlockwise</em> (defaulting to clockwise).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.arcTo()")}}</dt>
+ <dd>Adds an arc to the path with the given control points and radius, connected to the previous point by a straight line.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.ellipse()")}} {{experimental_inline}}</dt>
+ <dd>Adds an ellipse to the path which is centered at <em>(x, y)</em> position with the radii <em>radiusX</em> and <em>radiusY</em> starting at <em>startAngle</em> and ending at <em>endAngle</em> going in the given direction by <em>anticlockwise</em> (defaulting to clockwise).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.rect()")}}</dt>
+ <dd>Creates a path for a rectangle at<em> </em>position <em>(x, y)</em> with a size that is determined by <em>width</em> and <em>height</em>.</dd>
+</dl>
+
+<h2 id="Drawing_paths">Drawing paths</h2>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.fill()")}}</dt>
+ <dd>Fills the subpaths with the current fill style.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.stroke()")}}</dt>
+ <dd>Strokes the subpaths with the current stroke style.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}}</dt>
+ <dd>If a given element is focused, this method draws a focus ring around the current path.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}}</dt>
+ <dd>Scrolls the current path or a given path into the view.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.clip()")}}</dt>
+ <dd>Creates a clipping path from the current sub-paths. Everything drawn after <code>clip()</code> is called appears inside the clipping path only. For an example, see <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing" title="Clipping paths">Clipping paths</a> in the Canvas tutorial.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.isPointInPath()")}}</dt>
+ <dd>Reports whether or not the specified point is contained in the current path.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.isPointInStroke()")}}</dt>
+ <dd>Reports whether or not the specified point is inside the area contained by the stroking of a path.</dd>
+</dl>
+
+<h2 id="Transformations">Transformations</h2>
+
+<p>Objects in the <code>CanvasRenderingContext2D</code> rendering context have a current transformation matrix and methods to manipulate it. The transformation matrix is applied when creating the current default path, painting text, shapes and {{domxref("Path2D")}} objects. The methods listed below remain for historical and compatibility reasons as {{domxref("SVGMatrix")}} objects are used in most parts of the API nowadays and will be used in the future instead.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.currentTransform")}}</dt>
+ <dd>Current transformation matrix ({{domxref("SVGMatrix")}} object).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.rotate()")}}</dt>
+ <dd>Adds a rotation to the transformation matrix. The angle argument represents a clockwise rotation angle and is expressed in radians.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.scale()")}}</dt>
+ <dd>Adds a scaling transformation to the canvas units by x horizontally and by y vertically.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.translate()")}}</dt>
+ <dd>Adds a translation transformation by moving the canvas and its origin x horzontally and y vertically on the grid.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.transform()")}}</dt>
+ <dd>Multiplies the current transformation matrix with the matrix described by its arguments.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.setTransform()")}}</dt>
+ <dd>Resets the current transform to the identity matrix, and then invokes the <code>transform()</code> method with the same arguments.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.resetTransform()")}} {{experimental_inline}}</dt>
+ <dd>Resets the current transform by the identity matrix.</dd>
+</dl>
+
+<h2 id="Compositing">Compositing</h2>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.globalAlpha")}}</dt>
+ <dd>Alpha value that is applied to shapes and images before they are composited onto the canvas. Default <code>1.0</code>(opaque).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.globalCompositeOperation")}}</dt>
+ <dd>With <code>globalAlpha</code> applied this sets how shapes and images are drawn onto the existing bitmap.</dd>
+</dl>
+
+<h2 id="Drawing_images">Drawing images</h2>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.drawImage()")}}</dt>
+ <dd>Draws the specified image. This method is available in multiple formats, providing a great deal of flexibility in its use.</dd>
+</dl>
+
+<h2 id="Pixel_manipulation">Pixel manipulation</h2>
+
+<p>See also the {{domxref("ImageData")}} object.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.createImageData()")}}</dt>
+ <dd>Creates a new, blank {{domxref("ImageData")}} object with the specified dimensions. All of the pixels in the new object are transparent black.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.getImageData()")}}</dt>
+ <dd>Returns an {{domxref("ImageData")}} object representing the underlying pixel data for the area of the canvas denoted by the rectangle which starts at <em>(sx, sy)</em> and has an <em>sw</em> width and <em>sh</em> height.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.putImageData()")}}</dt>
+ <dd>Paints data from the given {{domxref("ImageData")}} object onto the bitmap. If a dirty rectangle is provided, only the pixels from that rectangle are painted.</dd>
+</dl>
+
+<h2 id="Image_smoothing">Image smoothing</h2>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} {{experimental_inline}}</dt>
+ <dd>Image smoothing mode; if disabled, images will not be smoothed if scaled.</dd>
+</dl>
+
+<h2 id="The_canvas_state">The canvas state</h2>
+
+<p>The <code>CanvasRenderingContext2D</code> rendering context contains a variety of drawing style states (attributes for line styles, fill styles, shadow styles, text styles). The following methods help you to work with that state:</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.save()")}}</dt>
+ <dd>Saves the current drawing style state using a stack so you can revert any change you make to it using <code>restore()</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.restore()")}}</dt>
+ <dd>Restores the drawing style state to the last element on the 'state stack' saved by <code>save()</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.canvas")}}</dt>
+ <dd>A read-only back-reference to the {{domxref("HTMLCanvasElement")}}. Might be {{jsxref("null")}} if it is not associated with a {{HTMLElement("canvas")}} element.</dd>
+</dl>
+
+<h2 id="Hit_regions">Hit regions</h2>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}</dt>
+ <dd>Adds a hit region to the canvas.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}</dt>
+ <dd>Removes the hit region with the specified <code>id</code> from the canvas.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}</dt>
+ <dd>Removes all hit regions from the canvas.</dd>
+</dl>
+
+<h2 id="Non-standard_APIs">Non-standard APIs</h2>
+
+<h3 id="Blink_and_WebKit">Blink and WebKit</h3>
+
+<p>Most of these APIs are <a href="https://code.google.com/p/chromium/issues/detail?id=363198">deprecated and will be removed in the future</a>.</p>
+
+<dl>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.clearShadow()</code></dt>
+ <dd>Removes all shadow settings like {{domxref("CanvasRenderingContext2D.shadowColor")}} and {{domxref("CanvasRenderingContext2D.shadowBlur")}}.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.drawImageFromRect()</code></dt>
+ <dd>This is redundant with an equivalent overload of <code>drawImage</code>.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setAlpha()</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.globalAlpha")}} instead.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setCompositeOperation()</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.globalCompositeOperation")}} instead.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setLineWidth()</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.lineWidth")}} instead.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setLineJoin()</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.lineJoin")}} instead.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setLineCap()</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.lineCap")}} instead.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setMiterLimit()</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.miterLimit")}} instead.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setStrokeColor()</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.strokeStyle")}} instead.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setFillColor()</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.fillStyle")}} instead.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setShadow()</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.shadowColor")}} and {{domxref("CanvasRenderingContext2D.shadowBlur")}} instead.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitLineDash</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.getLineDash()")}} and {{domxref("CanvasRenderingContext2D.setLineDash()")}} instead.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitLineDashOffset</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.lineDashOffset")}} instead.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitImageSmoothingEnabled</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} instead.</dd>
+</dl>
+
+<h3 id="Blink_only">Blink only</h3>
+
+<dl>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.isContextLost()</code></dt>
+ <dd>Inspired by the same <code>WebGLRenderingContext</code> method it returns <code>true</code> if the Canvas context has been lost, or <code>false</code> if not.</dd>
+</dl>
+
+<h3 id="WebKit_only">WebKit only</h3>
+
+<dl>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitBackingStorePixelRatio</code></dt>
+ <dd>The backing store size in relation to the canvas element. See <a href="http://www.html5rocks.com/en/tutorials/canvas/hidpi/">High DPI Canvas</a>.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitGetImageDataHD</code></dt>
+ <dd>Intended for HD backing stores, but removed from canvas specifications.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitPutImageDataHD</code></dt>
+ <dd>Intended for HD backing stores, but removed from canvas specifications.</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h3 id="Gecko_only">Gecko only</h3>
+
+<dl>
+ <dt>{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.filter")}}</dt>
+ <dd>CSS and SVG filters as Canvas APIs. Likely to be standardized in a new version of the specification.</dd>
+</dl>
+
+<h4 id="Prefixed_APIs">Prefixed APIs</h4>
+
+<dl>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozCurrentTransform</code></dt>
+ <dd>Sets or gets the current transformation matrix, see {{domxref("CanvasRenderingContext2D.currentTransform")}}.  {{ gecko_minversion_inline("7.0") }}</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozCurrentTransformInverse</code></dt>
+ <dd>Sets or gets the current inversed transformation matrix.  {{ gecko_minversion_inline("7.0") }}</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozImageSmoothingEnabled</code></dt>
+ <dd>See {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}}.</dd>
+ <dt>{{non-standard_inline}} {{deprecated_inline}} <code>CanvasRenderingContext2D.mozTextStyle</code></dt>
+ <dd>Introduced in in Gecko 1.9, deprecated in favor of the {{domxref("CanvasRenderingContext2D.font")}} property.</dd>
+ <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozDrawText()</code></dt>
+ <dd>This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.strokeText()")}} or {{domxref("CanvasRenderingContext2D.fillText()")}} instead.</dd>
+ <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozMeasureText()</code></dt>
+ <dd>This method was introduced in Gecko 1.9 and is unimplemented starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.measureText()")}} instead.</dd>
+ <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozPathText()</code></dt>
+ <dd>This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.</dd>
+ <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozTextAlongPath()</code></dt>
+ <dd>This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.</dd>
+</dl>
+
+<h4 id="Internal_APIs_(chrome-context_only)">Internal APIs (chrome-context only)</h4>
+
+<dl>
+ <dt>{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.drawWindow()")}}</dt>
+ <dd>Renders a region of a window into the <code>canvas</code>. The contents of the window's viewport are rendered, ignoring viewport clipping and scrolling.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.demote()</code></dt>
+ <dd>This causes a context that is currently using a hardware-accelerated backend to fallback to a software one. All state should be preserved.</dd>
+</dl>
+
+<h3 id="Internet_Explorer">Internet Explorer</h3>
+
+<dl>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.msFillRule</code></dt>
+ <dd>The <a href="http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t" title="http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t">fill rule</a> to use. This must be one of <code>evenodd</code> or <code>nonzero</code> (default).</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table>
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#2dcontext:canvasrenderingcontext2d", "CanvasRenderingContext2D")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.8")}}</td>
+   <td>{{CompatIE("9")}}</td>
+   <td>{{CompatOpera("9")}}</td>
+   <td>{{CompatSafari("2")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibility_notes">Compatibility notes</h2>
+
+<ul>
+ <li>Starting with Gecko 5.0 {{geckoRelease("5.0")}}, specifying invalid values are now silently ignored for the following methods and properties: <code>translate()</code>, <code>transform()</code>, <code>rotate(), </code><code>scale(),</code> <code>rect()</code>, <code>clearRect()</code>, <code>fillRect()</code>, <code>strokeRect()</code>, <code>lineTo()</code>, <code>moveTo()</code>, <code>quadraticCurveTo()</code>, <code>arc()</code>, <code>shadowOffsetX</code>, <code>shadowOffsetY</code>,  <code>shadowBlur</code>.</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("HTMLCanvasElement")}}</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/linecap/index.html b/files/fr/web/api/canvasrenderingcontext2d/linecap/index.html
new file mode 100644
index 0000000000..1693fc5d50
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/linecap/index.html
@@ -0,0 +1,177 @@
+---
+title: CanvasRenderingContext2D.lineCap
+slug: Web/API/CanvasRenderingContext2D/lineCap
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Propriété
+  - Reference
+translation_of: Web/API/CanvasRenderingContext2D/lineCap
+---
+<div>{{APIRef}}</div>
+
+<p>La propriété <strong>CanvasRenderingContext2D.lineCap</strong> de l'API Canvas 2D détermine la façon dont les extrémités de chaque ligne sont dessinées. Il y a trois valeurs possibles pour cette propriété, qui sont : <code>butt</code>, <code>round</code> et <code>square</code>. Par défaut, cette propriété est définie comme <code>butt</code>.</p>
+
+<p>Voir aussi le chapitre <a href="/fr-FR/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">Ajout de styles et de couleurs</a> dans le <a href="/fr-FR/docs/Web/API/Canvas_API/Tutorial">Tutoriel canvas</a>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var><em>ctx</em>.lineCap = "butt";
+<var><em>ctx</em>.lineCap = "round";
+<var><em>ctx</em>.lineCap = "square";</var></var></var></pre>
+
+<h3 id="Options">Options</h3>
+
+<dl>
+ <dt><code>butt</code></dt>
+ <dd>Les extrémités de ligne sont coupées à angle droit.</dd>
+ <dt><code>round</code></dt>
+ <dd>Les extrémités de ligne sont arrondies.</dd>
+ <dt><code>square</code></dt>
+ <dd>Les extrémités de ligne sont coupées à angle droit en ajoutant un rectangle d'une longueur égale à celle de l'épaisseur de la ligne et de largeur moitié.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Using_the_lineCap_property" name="Using_the_lineCap_property">Utilisation de la propriété <code>lineCap</code></h3>
+
+<p>Il ne s'agit que d'un fragment de code simple utilisant la propriété lineCap pour dessiner des lignes avec des extrémités arrondies.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canevas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight[7]">var canevas = document.getElementById('canevas');
+var ctx = canevas.getContext('2d');
+
+ctx.beginPath();
+ctx.moveTo(0, 0);
+ctx.lineWidth = 15;
+ctx.lineCap = 'round';
+ctx.lineTo(100, 100);
+ctx.stroke();
+</pre>
+
+<p>Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canvas :</p>
+
+<div class="hidden">
+<h6 id="Playable_code" name="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canevas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="modifier" type="button" value="Modifier" /&gt;
+  &lt;input id="effacer" type="button" value="Effacer" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.beginPath();
+ctx.moveTo(0, 0);
+ctx.lineWidth = 15;
+ctx.lineCap = 'round';
+ctx.lineTo(100, 100);
+ctx.stroke();&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canevas = document.getElementById('canevas');
+var ctx = canevas.getContext('2d');
+var zoneTexte = document.getElementById('code');
+var effacer = document.getElementById('effacer');
+var modifier = document.getElementById('modifier');
+var code = zoneTexte.value;
+
+function dessinerCanevas() {
+  ctx.clearRect(0, 0, canevas.width, canevas.height);
+  eval(zoneTexte.value);
+}
+
+effacer.addEventListener('click', function() {
+  zoneTexte.value = code;
+  dessinerCanevas();
+});
+
+modifier.addEventListener('click', function() {
+  zoneTexte.focus();
+})
+
+zoneTexte.addEventListener('input', dessinerCanevas);
+window.addEventListener('load', dessinerCanevas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h3 id="A_lineCap_example" name="A_lineCap_example">Un exemple de <code>lineCap</code></h3>
+
+<p>Dans cet exemple, trois lignes sont dessinées, chacune avec une valeur différente pour la propriété <code>lineCap</code>. Deux guides pour voir les différences exactes entre les trois ont été ajoutés. Chacune de ces lignes commence et se termine exactement sur ces guides.</p>
+
+<p>La ligne à gauche utilise l'option par défaut <code>butt</code>. Elle est dessinée complètement au raz des guides. La seconde est paramétrée pour utiliser l'option <code>round</code>. Cela ajoute à l'extrémité un demi-cercle d'un rayon égal à la moitié de la largeur de la ligne. La ligne de droite utilise l'option <code>square</code>. Cela ajoute un rectangle de longueur égale à l'épaisseur de la ligne et de largeur moitié.</p>
+
+<pre class="brush: js">var ctx = document.getElementById('canevas').getContext('2d');
+var lineCap = ['butt','round','square'];
+
+// Dessiner les guides
+ctx.strokeStyle = '#09f';
+ctx.beginPath();
+ctx.moveTo(10, 10);
+ctx.lineTo(140, 10);
+ctx.moveTo(10, 140);
+ctx.lineTo(140, 140);
+ctx.stroke();
+
+// Dessiner les lignes
+ctx.strokeStyle = 'black';
+for (var i = 0; i &lt; lineCap.length; i++) {
+  ctx.lineWidth = 15;
+  ctx.lineCap = lineCap[i];
+  ctx.beginPath();
+  ctx.moveTo(25 + i * 50, 10);
+  ctx.lineTo(25 + i * 50, 140);
+  ctx.stroke();
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canevas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("A_lineCap_example", "180", "180", "https://mdn.mozillademos.org/files/236/Canvas_linecap.png")}}</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('HTML WHATWG', "scripting.html#dom-context-2d-linecap", "CanvasRenderingContext2D.lineCap")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+
+<p>{{Compat("api.CanvasRenderingContext2D.lineCap")}}</p>
+<h2 id="Notes_spécifiques_à_WebKitBlink">Notes spécifiques à WebKit/Blink</h2>
+
+<ul>
+ <li>Dans les navigateurs basés sur WebKit et Blink, une méthode non-standard et désapprouvée <code>ctx.setLineCap()</code> est implémentée en plus de cette propriété.</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.lineWidth")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.lineJoin")}}</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.html b/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.html
new file mode 100644
index 0000000000..ca4fbd4f4e
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.html
@@ -0,0 +1,135 @@
+---
+title: CanvasRenderingContext2D.lineJoin
+slug: Web/API/CanvasRenderingContext2D/lineJoin
+tags:
+  - API
+  - Canvas
+  - Propriété
+  - arrondit
+  - coin
+  - stroke
+translation_of: Web/API/CanvasRenderingContext2D/lineJoin
+---
+<div>{{APIRef}}</div>
+
+<p>La propriété <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.lineJoin</code></strong> de l'API Canvas 2D détermine la forme à utiliser pour joindre deux segments de ligne à leur intersection.</p>
+
+<p>Cette propriété n'a aucun effet quand deux segments connectés ont la même direction, car aucune zone de jonction ne sera ajoutée dans ce cas. Les segments dégénérés d'une longueur de zéro (c'est à dire avec les extrémités à la même position) seront ignorés.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> Les lignes peuvent être dessinées aves les méthodes  {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}, {{domxref("CanvasRenderingContext2D.strokeRect()", "strokeRect()")}} et {{domxref("CanvasRenderingContext2D.strokeText()", "strokeText()")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>ctx</em>.lineJoin = "bevel" || "round" || "miter";
+</pre>
+
+<h3 id="Options">Options</h3>
+
+<p>Il y a trois valeurs possibles pour cette propriété: <code>"round"</code>, <code>"bevel"</code> et <code>"miter"</code>. Celle par défaut est <code>"miter"</code>.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/237/Canvas_linejoin.png" style="float: right; height: 190px; width: 190px;"></p>
+
+<dl>
+ <dt><code>"round"</code> (rond)</dt>
+ <dd>Arrondit les coins d'une forme en remplissant un zone supplémentaire centré sur le point final commun des segments connectés. Le rayon de ces coins arrondis est égal à la largeur de la ligne .</dd>
+ <dt><code>"bevel"</code> (biseau)</dt>
+ <dd>Remplit une zone triangulaire supplémentaire entre les extrémités des segments connectés.</dd>
+ <dt><code>"miter"</code> (onglet)</dt>
+ <dd>Les segments raccordés  sont reliés entre eux en prolongeant leurs bors extérieurs en un seul point, ce qui a pour effet de remplir uen zone supplémentaire en forme de losange. Ce paramètre est affecté par la proriété {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}}. Valeur par dafaut.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Modifier_les_jointures_d'un_tracé">Modifier les jointures d'un tracé</h3>
+
+<p>Cet exemple applique des jointures arrondies au tracé.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight[5]">const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.lineWidth = 20;
+ctx.lineJoin = 'round';
+ctx.beginPath();
+ctx.moveTo(20, 20);
+ctx.lineTo(190, 100);
+ctx.lineTo(280, 20);
+ctx.lineTo(280, 150);
+ctx.stroke();
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{ EmbedLiveSample('Changing_the_joins_in_a_path', 700, 180) }}</p>
+
+<h3 id="Comparaison_des_jointures_de_lignes">Comparaison des jointures de lignes</h3>
+
+<p>L'exemple dessine 3 tracés différents, illustrant chacune des trois valeurs de <code>lineJoin</code>.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+</div>
+
+<pre class="brush: js">var ctx = document.getElementById('canvas').getContext('2d');
+var lineJoin = ['round', 'bevel', 'miter'];
+ctx.lineWidth = 10;
+
+for (let i = 0; i &lt; lineJoin.length; i++) {
+  ctx.lineJoin = lineJoin[i];
+  ctx.beginPath();
+  ctx.moveTo(-5, 5 + i * 40);
+  ctx.lineTo(35, 45 + i * 40);
+  ctx.lineTo(75, 5 + i * 40);
+  ctx.lineTo(115, 45 + i * 40);
+  ctx.lineTo(155, 5 + i * 40);
+  ctx.stroke();
+}
+</pre>
+
+<p>{{EmbedLiveSample("Comparison_of_line_joins", "180", "180", "https://mdn.mozillademos.org/files/237/Canvas_linejoin.png")}}</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('HTML WHATWG', "scripting.html#dom-context-2d-linejoin", "CanvasRenderingContext2D.lineJoin")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_naviagateurs">Compatibilité des naviagateurs</h2>
+
+
+
+<p>{{Compat("api.CanvasRenderingContext2D.lineJoin")}}</p>
+
+<h3 id="WebKitBlink-notes_particulières">WebKit/Blink-notes particulières</h3>
+
+<ul>
+ <li>Dans les navigateurs basés sur WebKit et Blink, une méthode <code>ctx.setLineJoin()</code> non-standard et obsolète est implémentée en plus de cette propriété.</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface définissant cette propriété: {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.lineCap")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.lineWidth")}}</li>
+ <li><a href="/fr-FR/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">Ajout de styles et de couleurs</a></li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/lineto/index.html b/files/fr/web/api/canvasrenderingcontext2d/lineto/index.html
new file mode 100644
index 0000000000..51359d72fd
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/lineto/index.html
@@ -0,0 +1,126 @@
+---
+title: CanvasRenderingContext2D.lineTo()
+slug: Web/API/CanvasRenderingContext2D/lineTo
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Méthode
+  - Reference
+translation_of: Web/API/CanvasRenderingContext2D/lineTo
+---
+<div>{{APIRef}}</div>
+
+<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.lineTo()</code></strong> de l'API Canvas 2D connecte le dernier point du sous-chemin en cours aux coordonnées <code>x, y</code> spécifiées avec une ligne droite (sans tracer réellement le chemin).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.lineTo(x, y);</var>
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>L'abscisse <em>x</em> du point d'arrivée.</dd>
+ <dt><code>y</code></dt>
+ <dd>L'ordonnée <em>y</em> du point d'arrivée.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_la_méthode_lineTo">Utilisation de la méthode <code>lineTo</code></h3>
+
+<p>Ceci est un extrait de code utilisant la méthode <code>lineTo</code>. Il faut utiliser la méthode {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} pour débuter un dessin, pour ensuite pouvoir dessiner une ligne dessus. On peut déplacer le crayon avec la méthode {{domxref("CanvasRenderingContext2D.moveTo", "moveTo()")}} et utiliser la méthode {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}} pour rendre la ligne visible.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[6]">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.beginPath();
+ctx.moveTo(50,50);
+ctx.lineTo(100, 100);
+ctx.stroke();
+</pre>
+
+<p>Éditez le code suivant pour voir les changements en direct:</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.beginPath();
+ctx.moveTo(50,50);
+ctx.lineTo(100, 100);
+ctx.stroke();&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="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', "scripting.html#dom-context-2d-lineto", "CanvasRenderingContext2D.lineTo")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("api.CanvasRenderingContext2D.lineTo")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>l'interface qui la définit, {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.moveTo()")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.stroke()")}}</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/measuretext/index.html b/files/fr/web/api/canvasrenderingcontext2d/measuretext/index.html
new file mode 100644
index 0000000000..49895d86e8
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/measuretext/index.html
@@ -0,0 +1,125 @@
+---
+title: CanvasRenderingContext2D.measureText()
+slug: Web/API/CanvasRenderingContext2D/measureText
+tags:
+  - API
+  - Canevas
+  - CanvasRenderingContext2D
+  - Méthode
+  - Reference
+translation_of: Web/API/CanvasRenderingContext2D/measureText
+---
+<div>{{APIRef}}</div>
+
+<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.measureText()</code></strong> renvoie un objet {{domxref ("TextMetrics")}} qui contient des informations sur le texte mesuré (telle que sa largeur, par exemple).</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><var><em>ctx</em></var>.measureText(texte);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>texte</dt>
+ <dd>Le texte à mesurer.</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Un objet {{domxref("TextMetrics")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Étant donné cet élément {{HTMLElement("canvas")}} :</p>
+
+<pre class="brush: html">&lt;canvas id="canevas"&gt;&lt;/canvas&gt;
+</pre>
+
+<p>vous pouvez obtenir un objet {{domxref("TextMetrics")}} en utilisant le code suivant :</p>
+
+<pre class="brush: js">var canevas = document.getElementById('canevas');
+var ctx = canevas.getContext('2d');
+
+var texte = ctx.measureText('foo'); // objet TextMetrics
+texte.width; // 16;
+</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', "scripting.html#dom-context-2d-measuretext", "CanvasRenderingContext2D.measureText")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatIE(9)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome pour 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>Support de base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_Also" name="See_Also">Voir aussi</h2>
+
+<ul>
+ <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}.</li>
+ <li>{{domxref("TextMetrics")}}</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/moveto/index.html b/files/fr/web/api/canvasrenderingcontext2d/moveto/index.html
new file mode 100644
index 0000000000..f7890599d4
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/moveto/index.html
@@ -0,0 +1,124 @@
+---
+title: CanvasRenderingContext2D.moveTo()
+slug: Web/API/CanvasRenderingContext2D/moveTo
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+translation_of: Web/API/CanvasRenderingContext2D/moveTo
+---
+<div>{{APIRef}}</div>
+
+<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.moveTo()</code></strong> de l'API Canvas 2D déplace le point de départ d'un nouveau sous-chemin vers les coordonnées <code>(x, y)</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.moveTo(x, y);</var>
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>L'axe des x du point.</dd>
+ <dt><code>y</code></dt>
+ <dd>L'axe des y du point.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_la_méthode_moveTo">Utiliser la méthode <code>moveTo</code></h3>
+
+<p>Ceci est un simple snippet de code qui utilise la méthode <code>moveTo</code> pour déplacer le stylo à une position de départ pour dessiner une ligne.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[5]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.moveTo(50, 50);
+ctx.lineTo(200, 50);
+ctx.stroke();
+</pre>
+
+<p>Éditez le code ci-dessous pour voir vos changements mettre à jour le canvas en direct:</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.beginPath();
+ctx.moveTo(50,50);
+ctx.lineTo(200, 50);
+ctx.stroke()&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="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>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-moveto", "CanvasRenderingContext2D.moveTo")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("api.CanvasRenderingContext2D.moveTo")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface qui définit cette méthode, {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.lineTo()")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.stroke()")}}</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.html b/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.html
new file mode 100644
index 0000000000..4978bdd735
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.html
@@ -0,0 +1,137 @@
+---
+title: CanvasRenderingContext2D.quadraticCurveTo()
+slug: Web/API/CanvasRenderingContext2D/quadraticCurveTo
+tags:
+  - API
+  - Bézier
+  - Canevas
+  - Canvas
+  - CanvasRenderingContext2D
+  - Courbe
+  - Courbe de Bézier
+  - Courbe quadratique
+  - Courbe quadratique de Bézier
+  - Méthode
+  - Quadratique
+  - Reference
+translation_of: Web/API/CanvasRenderingContext2D/quadraticCurveTo
+---
+<div>{{APIRef}}</div>
+
+<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.quadraticCurveTo()</code></strong> de l'API Canvas 2D ajoute une <a href="https://en.wikipedia.org/wiki/B%C3%A9zier_curve">courbe de Bézier</a> quadratique au sous-chemin courant. Elle requiert deux points: le premier est le point de contrôle et le second est le point d'arrivée. Le point de départ est le dernier point du chemin courant, qui peut être changé au moyen de la méthode {{domxref("CanvasRenderingContext2D.moveTo", "moveTo()")}} avant de créer la courbe quadratique de Bézier.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void contexte2D.quadraticCurveTo(<em>pointContrôleX</em>, <em>pointContrôleY</em>, <em>pointArrivéeX</em>, <em>pointArrivéeY</em>);
+</pre>
+
+<h3 id="Paramètress">Paramètress</h3>
+
+<dl>
+ <dt><code>pointContrôleX</code></dt>
+ <dd>La coordonnée en x du point de contrôle.</dd>
+ <dt><code>pointContrôleY</code></dt>
+ <dd>La coordonnée en y du point de contrôle.</dd>
+ <dt><code>pointArrivéeX</code></dt>
+ <dd>La coordonnée en x du point d'arrivée.</dd>
+ <dt><code>pointArrivéeY</code></dt>
+ <dd>La coordonnée en y du point d'arrivée.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Comment_quadraticCurveTo_fonctionne">Comment quadraticCurveTo fonctionne</h3>
+
+<p>Cet exemple montre comment un courbe quadratique de Bézier est dessinée.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[7]">const canevas = document.getElementById("canvas");
+const contexte2D= canevas.getContext("2d");
+
+// courbe quadratique de Bézier
+contexte2D.beginPath();
+contexte2D.moveTo(50, 20);
+contexte2D.quadraticCurveTo(230, 30, 50, 100);
+contexte2D.stroke();
+
+// Points de départ et d'arrivée
+contexte2D.fillStyle = "blue";
+contexte2D.beginPath();
+contexte2D.arc(50, 20, 5, 0, 2 * Math.PI);   // Point de départ
+contexte2D.arc(50, 100, 5, 0, 2 * Math.PI);  // Point d'arrivée
+contexte2D.fill();
+
+// Point de contrôle
+contexte2D.fillStyle = 'red';
+contexte2D.beginPath();
+contexte2D.arc(230, 30, 5, 0, 2 * Math.PI);
+contexte2D.fill();
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>Dans cet exemple, le <span style="color: red;">point de contrôle est rouge</span> et les <span style="color: blue;">points de départ et d'arrivée sont en bleu</span>.</p>
+
+<p>{{EmbedLiveSample('How_quadraticCurveTo_works', 315, 165)}}</p>
+
+<h3 id="Une_courbe_quadratique_simple">Une courbe quadratique simple</h3>
+
+<p>Cet exemple dessine une simple courbe quadratique de Bézier au moyen de la méthode <code>quadraticCurveTo()</code>.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript_2">JavaScript</h4>
+
+<p>La courbe commence au point spécifié par <code>moveTo()</code>: (20, 110). Le point de contrôle est placé à (230, 150). La courbe s'achève en (250, 20).</p>
+
+<pre class="brush: js; highlight:[6]">const canevas = document.getElementById("canvas");
+const contexte2D = canevas.getContext("2d");
+
+contexte2D.beginPath();
+contexte2D.moveTo(20, 110);
+contexte2D.quadraticCurveTo(230, 150, 250, 20);
+contexte2D.stroke();
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample('A_simple_quadratic_curve', 700, 180)}}</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('HTML WHATWG', "scripting.html#dom-context-2d-quadraticcurveto", "CanvasRenderingContext2D.quadraticCurveTo")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.CanvasRenderingContext2D.quadraticCurveTo")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface définissant cette méthode : {{domxref("CanvasRenderingContext2D")}}</li>
+ <li><a href="http://fr.wikipedia.org/wiki/Courbe_de_Bézier">L'article Wikipédia sur les courbes quadratiques de Bézier</a></li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/rect/index.html b/files/fr/web/api/canvasrenderingcontext2d/rect/index.html
new file mode 100644
index 0000000000..f030ad7c92
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/rect/index.html
@@ -0,0 +1,126 @@
+---
+title: CanvasRenderingContext2D.rect()
+slug: Web/API/CanvasRenderingContext2D/rect
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Méthode
+translation_of: Web/API/CanvasRenderingContext2D/rect
+---
+<div>{{APIRef}}</div>
+
+<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.rect()</code></strong> de l'API Canvas 2D crée un chemin de rectangle à la position <em>(x, y)</em> et de dimensions <em>width</em> et <em>height</em>. Ces quatre points sont connectés par des lignes droites et le sous-chemin est directement fermé, vous pouvez donc utiliser <code>fill</code> ou <code>stroke</code> pour dessiner ce rectangle.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.rect(x, y, width, height);</var>
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>La coordonnée x pour le côté gauche du rectangle.</dd>
+ <dt><code>y</code></dt>
+ <dd>La coordonnée y pour le haut du rectangle.</dd>
+ <dt><code>width</code></dt>
+ <dd>La largeur du rectangle.</dd>
+ <dt><code>height</code></dt>
+ <dd>La hauteur du rectangle.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_la_méthode_rect">Utiliser la méthode <code>rect</code></h3>
+
+<p>Ceci est un simple bout de code qui utilise la méthode <code>rect</code> pour dessiner un chemin. Pour réellement dessiner ce chemin sur le canvas, vous devez utiliser la méthode {{domxref("CanvasRenderingContext2D.fill", "fill()")}} ou {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}}. Voir également les méthodes {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} et {{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect()")}}, qui peuvent le faire en une seule étape.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[3]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+ctx.rect(10, 10, 100, 100);
+ctx.fill();
+</pre>
+
+<p>Éditez le code ci-dessous pour voir vos mises à jour apportées au canvas directement:</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.rect(10, 10, 100, 100);
+ctx.fill();&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="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>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-rect", "CanvasRenderingContext2D.rect")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("api.CanvasRenderingContext2D.rect")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface qui définit cette méthode, {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.fillRect")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.fill()")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.stroke()")}}</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/rotate/index.html b/files/fr/web/api/canvasrenderingcontext2d/rotate/index.html
new file mode 100644
index 0000000000..94dabd0201
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/rotate/index.html
@@ -0,0 +1,176 @@
+---
+title: CanvasRenderingContext2D.rotate()
+slug: Web/API/CanvasRenderingContext2D/rotate
+tags:
+  - API
+  - Cancas
+  - CanvasRenderingContext2D
+  - Méthode
+  - Reference
+translation_of: Web/API/CanvasRenderingContext2D/rotate
+---
+<div>{{APIRef}}</div>
+
+<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.rotate()</code></strong><code> de l'API</code> Canvas 2D ajoute une rotation à la matrice de transformation. L'argument angle représente un angle de rotation horaire et il est exprimé en radians.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.rotate(angle);</var>
+</pre>
+
+<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/233/Canvas_grid_rotate.png" style="float: right;"></p>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>angle</code></dt>
+ <dd>L'angle de rotation horaire en radians. Vous pouvez utiliser <code><em>degrés</em> * Math.PI / 180</code> si vous voulez faire la conversion à partir d'une valeur en degrés.</dd>
+</dl>
+
+<p>Le centre de la rotation est toujours l'origine du canevas. Pour changer le centre, il faudra déplacer le canevas en utilisant la méthode {{domxref("CanvasRenderingContext2D.translate", "translate()")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_la_méthode_rotate">Utilisation de la méthode <code>rotate</code></h3>
+
+<p>Ceci est seulement un fragment de code simple qui utilise la méthode <code>rotate</code>.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[4]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.rotate(45 * Math.PI / 180);
+ctx.fillRect(70, 0, 100, 30);
+
+// réinitialise la matrice de transformation courante à la matrice identité
+ctx.setTransform(1, 0, 0, 1, 0, 0);
+</pre>
+
+<p>Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas:</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.rotate(45 * Math.PI / 180);
+ctx.fillRect(70,0,100,30);
+ctx.setTransform(1, 0, 0, 1, 0, 0);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="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', "scripting.html#dom-context-2d-rotate", "CanvasRenderingContext2D.rotate")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</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>Support de base</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome pour 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>Support de base</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/save/index.html b/files/fr/web/api/canvasrenderingcontext2d/save/index.html
new file mode 100644
index 0000000000..b019de39b6
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/save/index.html
@@ -0,0 +1,91 @@
+---
+title: CanvasRenderingContext2D.save()
+slug: Web/API/CanvasRenderingContext2D/save
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Restaurer
+  - Save
+translation_of: Web/API/CanvasRenderingContext2D/save
+---
+<div>{{APIRef}}</div>
+
+<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.save()</code></strong> de l'API Canvas 2D API enregistre l'état complet du canvas en plaçant l'état courant dans une stack.</p>
+
+<h3 id="Létat_du_dessin">L'état du dessin</h3>
+
+<p>L'état du dessin qui est sauvegardé dans une stack se compose de:</p>
+
+<ul>
+ <li>La matrice de transformation actuelle.</li>
+ <li>La région de détourage actuelle.</li>
+ <li>Le tableau pour les tracés en pointillés.</li>
+ <li>Les valeurs des attributs suivant: {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}}, {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}}, {{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha")}}, {{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth")}}, {{domxref("CanvasRenderingContext2D.lineCap", "lineCap")}}, {{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin")}}, {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}}, {{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset")}}, {{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX")}}, {{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY")}}, {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}, {{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor")}}, {{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation")}}, {{domxref("CanvasRenderingContext2D.font", "font")}}, {{domxref("CanvasRenderingContext2D.textAlign", "textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline")}}, {{domxref("CanvasRenderingContext2D.direction", "direction")}}, {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}}.</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <em>ctx</em>.save();</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="Enregistrer_létat_du_dessin">Enregistrer l'état du dessin</h3>
+
+<p>Cet exemple utilise la méthode <code>save()</code> pour enregistrer l'état par défaut et <code>restore()</code>  pour le rétablir plus tard, on pourra ainsi dessiner un rectangle avec l'état de base après.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[5]">const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+// On sauvegarde l'état par défaut
+ctx.save();
+
+ctx.fillStyle = 'green';
+ctx.fillRect(10, 10, 100, 100);
+
+// On restaure l'état par défaut
+ctx.restore();
+
+ctx.fillRect(150, 40, 100, 100);
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{ EmbedLiveSample('Saving_the_drawing_state', 700, 180) }}</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('HTML WHATWG', "scripting.html#dom-context-2d-save", "CanvasRenderingContext2D.save")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.CanvasRenderingContext2D.save")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface définissant cette méthode: {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.restore()")}}</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/scale/index.html b/files/fr/web/api/canvasrenderingcontext2d/scale/index.html
new file mode 100644
index 0000000000..91746be321
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/scale/index.html
@@ -0,0 +1,173 @@
+---
+title: CanvasRenderingContext2D.scale()
+slug: Web/API/CanvasRenderingContext2D/scale
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Méthode
+  - Référence(2)
+translation_of: Web/API/CanvasRenderingContext2D/scale
+---
+<div>{{APIRef}}</div>
+
+<p>La méhode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.scale()</code></strong> de l'API Canvas 2D ajoute une transformation de mise à l'échelle des unités du canevas, de x horizontalement et de y verticalement.</p>
+
+<p>Par défaut, une unité sur le canevas est exactement un pixel. Si on applique, par exemple, un facteur d'échelle de 0,5, l'unité résultante deviendra 0,5 pixel et ainsi, les formes seront dessinées en taille moitié. De façon similaire, mettre le facteur d'échelle à 2,0 augmentera la taille de l'unité et une unité deviendra alors deux pixels. Cela aura pour résultat que les formes seront dessinées deux fois plus grandes.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.scale(x, y);</var>
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Facteur d'échelle dans la direction horizontale.</dd>
+ <dt>y</dt>
+ <dd>Facteur d'échelle dans la direction verticale.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_la_méthode_scale">Utilisation de la méthode <code>scale</code></h3>
+
+<p>Ceci est seulement un fragment de code simple qui utilise la méthode <code>scale</code>.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[4]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.scale(10, 3);
+ctx.fillRect(10, 10, 10, 10);
+
+// remet la matrice de transformation courante à la matrice identité
+ctx.setTransform(1, 0, 0, 1, 0, 0);
+</pre>
+
+<p>Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.scale(10, 3);
+ctx.fillRect(10,10,10,10);
+ctx.setTransform(1, 0, 0, 1, 0, 0);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h3 id="Utilisation_de_scale_pour_un_retournement_horizontal_ou_vertical">Utilisation de <code>scale</code> pour un retournement horizontal ou vertical</h3>
+
+<p>Vous pouvez utiliser <code>ctx.scale(-1, 1)</code> pour retourner le contexte horizontalement et <code>ctx.scale(1, -1) </code>pour le retourner verticalement.</p>
+
+<div style="display: none;">
+<h6 id="Playable_code2">Playable code2</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.scale(-1, 1);
+ctx.font = "48px serif";
+ctx.fillText("Hello world!", -320, 120);
+ctx.setTransform(1, 0, 0, 1, 0, 0);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code2', 700, 360) }}</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('HTML WHATWG', "scripting.html#dom-context-2d-scale", "CanvasRenderingContext2D.scale")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateur">Compatibilité navigateur</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+
+<p>{{Compat("api.CanvasRenderingContext2D.scale")}}</p>
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.html b/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.html
new file mode 100644
index 0000000000..99a57ca4c5
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.html
@@ -0,0 +1,165 @@
+---
+title: CanvasRenderingContext2D.setLineDash()
+slug: Web/API/CanvasRenderingContext2D/setLineDash
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Lignes
+  - Modèle
+  - Méthodes
+  - Pointillés
+  - Reference
+  - patterns
+  - setLineDash
+translation_of: Web/API/CanvasRenderingContext2D/setLineDash
+---
+<div>{{APIRef}}</div>
+
+<p>La méthode <strong><code>setLineDash()</code></strong> de l'interface Canvas 2D API's {{domxref("CanvasRenderingContext2D")}} définit le modèle à utiliser pour les pointillés lors du dessin de la ligne, en utilisant un tableau de valeurs qui spécifie les longueurs des alternances entre pleins et creux.</p>
+
+<div class="note">
+<p>Pour renvoyer une ligne pleine, configurez la liste pour les pointillés avec un tableau vide.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var><em>ctx</em>.setLineDash(segments);</var>
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>segments</code></dt>
+ <dd>Un tableau {{jsxref("Array")}} de nombres qui spécifie les distances qui vont alternativement dessiner pleins et creux (dans l'unité du système de coordonnées). Si le nombre d'éléments du tableau est impair, les éléments du tableau sont recopiés et concaténés. Par exemple, <code>[5, 15, 25]</code> est transformé en <code>[5, 15, 25, 5, 15, 25]</code>. Si le tableau est vide, le pointillé est supprimé, et la ligne devient pleine.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p><code>undefined</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>C'est simplement un fragment de code qui utilise la méthode <code>setLineDash()</code> pour dessiner une ligne pointillée au dessus d'une ligne pleine.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js; highlight:[4]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.setLineDash([5, 15]);
+ctx.moveTo(0, 50);
+ctx.lineTo(400, 50);
+ctx.stroke();
+
+ctx.beginPath();
+ctx.setLineDash([]);
+ctx.moveTo(0, 150);
+ctx.lineTo(400, 150);
+ctx.stroke();
+</pre>
+
+<h3 id="Essayez_le">Essayez le</h3>
+
+<p>Editez le code ci-dessous et observez les changements se produire dans le canvas:</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code" style="height:150px"&gt;
+ctx.beginPath();
+ctx.setLineDash([5, 15]);
+ctx.moveTo(0, 50);
+ctx.lineTo(400, 50);
+ctx.stroke();
+
+ctx.beginPath();
+ctx.setLineDash([]);
+ctx.moveTo(0, 150);
+ctx.lineTo(400, 150);
+ctx.stroke();&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 10, 410) }}</p>
+
+<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>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-setlinedash", "CanvasRenderingContext2D.setLineDash")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navivgateurs">Compatibilité des navivgateurs</h2>
+
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+
+<p>{{Compat("api.CanvasRenderingContext2D.setLineDash")}}</p>
+
+<h2 id="Notes_spécifiques_pour_Gecko">Notes spécifiques pour Gecko</h2>
+
+<ul>
+ <li>Depuis  Gecko 7.0 {{geckoRelease("7.0")}}, la propriété non standard et dépréciée <code>mozDash</code> a été implémentée  comme liste de définition pour les pointillés. Cette propriété sera dépréciée et supprimée dans le futur, voir {{bug(931643)}}. Utilisez <code>setLineDash()</code> à la place.</li>
+</ul>
+
+<h2 id="Notes_spécifiques_pour_WebKit">Notes spécifiques pour WebKit</h2>
+
+<ul>
+ <li>Dans les navigateurs à base de WebKit (e.g. Safari), la propriété non standard et dépréciée <code>webkitLineDash</code> est implémentée en plus de cette méthode. Utilisez <code>setLineDash()</code> à la place.</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface qui la définit, {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.getLineDash()")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.lineDashOffset")}}</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/settransform/index.html b/files/fr/web/api/canvasrenderingcontext2d/settransform/index.html
new file mode 100644
index 0000000000..54a288091b
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/settransform/index.html
@@ -0,0 +1,134 @@
+---
+title: CanvasRenderingContext2D.setTransform()
+slug: Web/API/CanvasRenderingContext2D/setTransform
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Méthode
+  - Reference
+translation_of: Web/API/CanvasRenderingContext2D/setTransform
+---
+<div>{{APIRef}}</div>
+
+<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.setTransform()</code></strong> de l'API Canvas 2D réinitialise (remplace) la transformation en cours à la matrice identité et appelle ensuite la transformation décrite par les arguments de cette méthode.</p>
+
+<p>Voir aussi la méthode {{domxref("CanvasRenderingContext2D.transform()", "transform()")}}, qui ne replace pas la matrice de transformation en cours et la multiplie par celle donnée..</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.setTransform(a, b, c, d, e, f);</var>
+</pre>
+
+<p>La matrice de transformation est décrite par : <math><semantics><mrow><mo>[</mo><mtable columnalign="center center center" rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd><mtd><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd><mtd><mi>f</mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>]</mo></mrow><annotation encoding="TeX">\left[ \begin{array}{ccc} a &amp; c &amp; e \\ b &amp; d &amp; f \\ 0 &amp; 0 &amp; 1 \end{array} \right]</annotation></semantics></math></p>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>a (m11)</code></dt>
+ <dd>Échelle horizontale.</dd>
+ <dt><em><code>b (m12)</code></em></dt>
+ <dd>Inclinaison horizontale.</dd>
+ <dt><code>c (m21)</code></dt>
+ <dd>Inclinaison verticale.</dd>
+ <dt><code>d (m22)</code></dt>
+ <dd>Échelle verticale.</dd>
+ <dt><code>e (dx)</code></dt>
+ <dd>Déplacement horizontal.</dd>
+ <dt><code>f (dy)</code></dt>
+ <dd>Déplacement vertical.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_la_méthode_setTransform">Utilisation de la méthode <code>setTransform</code></h3>
+
+<p>Ceci est seulement un fragment de code simple qui utilise la méthode <code>setTransform</code>.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[4]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.setTransform(1, 1, 0, 1, 0, 0);
+ctx.fillRect(0, 0, 100, 100);
+</pre>
+
+<p>Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.setTransform(1,1,0,1,0,0);
+ctx.fillRect(0,0,100,100);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="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', "scripting.html#dom-context-2d-settransform", "CanvasRenderingContext2D.setTransform")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("api.CanvasRenderingContext2D.setTransform")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.transform()")}}</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/stroke/index.html b/files/fr/web/api/canvasrenderingcontext2d/stroke/index.html
new file mode 100644
index 0000000000..59f9bb5f95
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/stroke/index.html
@@ -0,0 +1,112 @@
+---
+title: CanvasRenderingContext2D.stroke()
+slug: Web/API/CanvasRenderingContext2D/stroke
+translation_of: Web/API/CanvasRenderingContext2D/stroke
+---
+<div>{{APIRef}}</div>
+
+<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.stroke()</code></strong> de l'API Canvas 2D dessine le chemin actuel ou donné avec le style de trait actuel utilisant la règle d'enroulement non nulle.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.stroke();</var>
+void <var><em>ctx</em>.stroke(path);</var>
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>path</code></dt>
+ <dd>Un chemin {{domxref("Path2D")}} à dessiner.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_la_méthode_stroke">Utilisation de la méthode <code>stroke</code></h3>
+
+<p>Il s'agit d'un extrait de code simple utilisant la méthode <code>stroke</code> pour tracer un chemin.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[4]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+ctx.rect(10, 10, 100, 100);
+ctx.stroke();
+</pre>
+
+<p>Editer le code en dessous et voir vos modifications mises à jour en direct dans le canevas :</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.rect(10, 10, 100, 100);
+ctx.stroke();&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="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', "scripting.html#dom-context-2d-stroke", "CanvasRenderingContext2D.stroke")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_avec_les_navigateurs">Compatibilité avec les navigateurs</h2>
+
+<div class="hidden">Le tableau de compatiblité de cette page est généré à partir de données structurées. Si vous voulez contribuer à la récupération des données, s'il vous plaît regardez <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez nous une<em> pull request</em>.</div>
+
+<p>{{Compat("api.CanvasRenderingContext2D.stroke")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface qui le définit, {{domxref("CanvasRenderingContext2D")}}.</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.html b/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.html
new file mode 100644
index 0000000000..e2ac6a0f97
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.html
@@ -0,0 +1,129 @@
+---
+title: CanvasRenderingContext2D.strokeRect()
+slug: Web/API/CanvasRenderingContext2D/strokeRect
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Méthode
+  - Référence(2)
+translation_of: Web/API/CanvasRenderingContext2D/strokeRect
+---
+<div>{{APIRef}}</div>
+
+<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.strokeRect()</code></strong> de l'API 2D des Canvas dessine le contour d'un rectangle aux coordonnées de l'angle haut gauche <em>(x, y)</em> et aux dimensions déterminées par <em>largeur</em> et <em>hauteur</em> dans la balise canvas, et en utilisant l'actuel <code>strokeStyle</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.strokeRect(x, y, largeur, hauteur);</var>
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>L'abcisse <em>x</em> des coordonnées du point de départ du rectangle.</dd>
+ <dt><code>y</code></dt>
+ <dd>L'ordonnée <em>y</em> des coordonnées du point de départ du rectangle.</dd>
+ <dt><font face="Consolas, Liberation Mono, Courier, monospace">largeur</font></dt>
+ <dd>La largeur du rectangle.</dd>
+ <dt><code>hauteur</code></dt>
+ <dd>La hauteur de rectangle.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_la_méthode_strokeRect">Utilisation de la méthode <code>strokeRect</code></h3>
+
+<p>Ceci est juste un extrait de code qui utilise la méthode <code>strokeRect</code>.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[5]">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.strokeStyle = "green";
+ctx.strokeRect(10, 10, 100, 100);
+</pre>
+
+<p>Éditez le code suivant pour voir les changements en direct dans la balise canvas:</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.strokeStyle = "green";
+ctx.strokeRect(10, 10, 100, 100);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="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', "scripting.html#dom-context-2d-strokerect", "CanvasRenderingContext2D.strokeRect")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+
+<p>{{Compat("api.CanvasRenderingContext2D.strokeRect")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>l'interface qui la définit, {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.strokeStyle")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.clearRect()")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.fillRect()")}}</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.html b/files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.html
new file mode 100644
index 0000000000..cf27a65468
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.html
@@ -0,0 +1,160 @@
+---
+title: CanvasRenderingContext2D.strokeStyle
+slug: Web/API/CanvasRenderingContext2D/strokeStyle
+translation_of: Web/API/CanvasRenderingContext2D/strokeStyle
+---
+<div>{{APIRef}}</div>
+
+<p>La propriété <code><strong>CanvasRenderingContext2D.strokeStyle</strong></code> de l'API Canvas 2D spécifie la couleur ou le style à utiliser pour dessiner les lignes autour des formes. La valeur par défaut est <code>#000</code> (black).</p>
+
+<p>Voir également le chapitre <a href="/fr/docs/Tutoriel_canvas/Ajout_de_styles_et_de_couleurs">Ajout de styles et de couleurs</a> dans le <a href="/fr/docs/Tutoriel_canvas">Tutoriel canvas</a>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var><em>ctx</em>.strokeStyle = color;
+</var><var><em>ctx</em>.strokeStyle = gradient;
+</var><var><em>ctx</em>.strokeStyle = pattern;</var>
+</pre>
+
+<h3 id="Options">Options</h3>
+
+<dl>
+ <dt><code>color</code></dt>
+ <dd>Une {{domxref("DOMString")}} analysée comme valeur CSS {{cssxref("&lt;color&gt;")}}.</dd>
+ <dt><code>gradient</code></dt>
+ <dd>Un objet {{domxref("CanvasGradient")}} (un gradient linéaire ou radial).</dd>
+ <dt><code>pattern</code></dt>
+ <dd>Un objet {{domxref("CanvasPattern")}} (une image répétée).</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Using_the_strokeStyle_property" name="Using_the_strokeStyle_property">Utiliser la propriété <code>strokeStyle</code> pour définir une couleur différente</h3>
+
+<p>Ceci est un simple snippet de code utilisant la propriété <code>strokeStyle</code> pour définir une couleur différente.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.strokeStyle = 'blue';
+ctx.strokeRect(10, 10, 100, 100);
+</pre>
+
+<p>Éditez le code ci-dessous pour voir vos changements mettre à jour le canvas en direct:</p>
+
+<div class="hidden">
+<h6 id="Playable_code" name="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.strokeStyle = 'blue';
+ctx.strokeRect(10, 10, 100, 100);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var edit = document.getElementById('edit');
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener('click', function() {
+  textarea.focus();
+})
+
+textarea.addEventListener('input', drawCanvas);
+window.addEventListener('load', drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h3 id="A_strokeStyle_example" name="A_strokeStyle_example">Un exemple <code>strokeStyle</code></h3>
+
+<p>Cet exemple utilise la propriété <code>strokeStyle</code> pour changer les couleurs des contours des formes. Nous utilisons la méthode {{domxref("CanvasRenderingContext2D.arc", "arc()")}} pour dessiner des cercles au lieu de carrés.</p>
+
+<pre class="brush: js">var ctx = document.getElementById('canvas').getContext('2d');
+
+for (var i = 0; i &lt; 6; i++) {
+  for (var j = 0; j &lt; 6; j++) {
+    ctx.strokeStyle = 'rgb(0,' + Math.floor(255 - 42.5 * i) + ',' +
+                      Math.floor(255 - 42.5 * j) + ')';
+    ctx.beginPath();
+    ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true);
+    ctx.stroke();
+  }
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+</div>
+
+<p>Le résultat devrait ressembler à ça:</p>
+
+<p>{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "https://mdn.mozillademos.org/files/253/Canvas_strokestyle.png")}}</p>
+
+<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>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-strokestyle", "CanvasRenderingContext2D.strokeStyle")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("api.CanvasRenderingContext2D.strokeStyle")}}</p>
+
+<h2 id="Notes_spécifiques_à_WebKitBlink">Notes spécifiques à WebKit/Blink</h2>
+
+<ul>
+ <li>Dans les navigateurs basés sur WebKit et Blink, une méthode non standard et dépréciée, <code>ctx.setStrokeColor()</code>, est implémentée en plus de cette propriété.
+
+  <pre class="brush: js">setStrokeColor(color, optional alpha);
+setStrokeColor(grayLevel, optional alpha);
+setStrokeColor(r, g, b, a);
+setStrokeColor(c, m, y, k, a);
+</pre>
+ </li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface qui définit cette propriété, {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasGradient")}}</li>
+ <li>{{domxref("CanvasPattern")}}</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.html b/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.html
new file mode 100644
index 0000000000..379e409679
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.html
@@ -0,0 +1,129 @@
+---
+title: CanvasRenderingContext2D.strokeText()
+slug: Web/API/CanvasRenderingContext2D/strokeText
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Méthode
+  - Reference
+translation_of: Web/API/CanvasRenderingContext2D/strokeText
+---
+<div>{{APIRef}}</div>
+
+<p>La méthode <code><strong>CanvasRenderingContext2D.strokeText()</strong></code> de l'API Canvas 2D trace le texte fourni à la position donnée <em>(x, y)</em>. Si le quatrième paramètre optionnel indiquant une largeur maximale est fourni, le texte sera mis à l'échelle pour tenir dans cette cette largeur.</p>
+
+<p>Voir aussi la méthode {{domxref("CanvasRenderingContext2D.fillText()")}} pour dessiner un texte rempli.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.strokeText(texte, x, y [, largeurMax]);</var>
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>texte</code></dt>
+ <dd>Le texte à tracer en utilisant les valeurs en cours de {{domxref("CanvasRenderingContext2D.font","font")}}, {{domxref("CanvasRenderingContext2D.textAlign","textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline","textBaseline")}}, et {{domxref("CanvasRenderingContext2D.direction","direction")}}.</dd>
+</dl>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>La coordonnée sur l'axe des x du point de départ du texte.</dd>
+ <dt><code>y</code></dt>
+ <dd>La coordonnée sur l'axe des y du point de départ du texte.</dd>
+ <dt><code>largeurMax</code> {{optional_inline}}</dt>
+ <dd>La largeur maximum à dessiner.  Si spécifiée et si la chaîne est calculée comme étant plus large que cette largeur, la police est ajustée pour utiliser une police plus condensée horizontalement (si une est disponible ou si une raisonnablement lisible lisible peut être synthétisée en mettant à l'échelle horizontalement la police courante), ou une police plus petite.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_la_méthode_strokeText">Utilisation de la méthode <code>strokeText</code></h3>
+
+<p>Il ne s'agit que d'un extrait de code simple qui utilise la méthode <code>strokeText</code>.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canevas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[5]">var canevas = document.getElementById('canevas');
+var ctx = canevas.getContext('2d');
+
+ctx.font = '48px serif';
+ctx.strokeText('Hello world', 50, 100);
+</pre>
+
+<p>Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canevas:</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.font = "48px serif";
+ctx.strokeText("Hello world", 50, 100);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="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', "scripting.html#dom-context-2d-stroketext", "CanvasRenderingContext2D.strokeText")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+
+<p>{{Compat("api.CanvasRenderingContext2D.strokeText")}}</p>
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.fillText()")}}</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/textalign/index.html b/files/fr/web/api/canvasrenderingcontext2d/textalign/index.html
new file mode 100644
index 0000000000..33ef00d3ed
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/textalign/index.html
@@ -0,0 +1,130 @@
+---
+title: CanvasRenderingContext2D.textAlign
+slug: Web/API/CanvasRenderingContext2D/textAlign
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Propriété
+  - Reference
+translation_of: Web/API/CanvasRenderingContext2D/textAlign
+---
+<div>{{APIRef}}</div>
+
+<p>La propriété <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.textAlign</code></strong> de l'API Canvas 2D indique l'alignement de texte courant à utiliser lors du dessin de texte. Faites attention au fait que l'alignement a pour base la valeur x de la méthode CanvasRenderingContext2D.<strong>fillText</strong>. Ainsi, si textAlign="center", le texte sera alors dessiné en x-50%*width.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var><em>ctx</em>.textAlign = "left" || "right" || "center" || "start" || "end";</var>
+</pre>
+
+<h3 id="Options">Options</h3>
+
+<p>Valeurs possibles :</p>
+
+<dl>
+ <dt>left</dt>
+ <dd>Le texte est aligné à gauche.</dd>
+ <dt>right</dt>
+ <dd>Le texte est aligné à droite.</dd>
+ <dt>center</dt>
+ <dd>Le texte est centré.</dd>
+ <dt>start</dt>
+ <dd>Le texte est aligné au début normal de la ligne (aligné à gauche pour les systèmes d'écriture de gauche à droite, aligné à droite pour les systèmes d'écriture de droite à gauche).</dd>
+ <dt>end</dt>
+ <dd>Le texte est aligné à la fin normale de la ligne (aligné à droite pour les systèmes d'écriture de gauche à droite, aligné à gauche pour les systèmes d'écriture de droite à gauche).</dd>
+</dl>
+
+<p>La valeur pa défaut est <code>start</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Using_the_textAlign_property" name="Using_the_textAlign_property">Utilisation de la propriété <code>textAlign</code></h3>
+
+<p>Ceci est seulement un fragment de code simple utilisant la propriété <code>textAlign pour indiquer un alignement de texte</code>.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.font = '48px serif';
+ctx.textAlign = 'left';
+ctx.strokeText('Hello world', 0, 100);
+</pre>
+
+<p>Modifier le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :</p>
+
+<div class="hidden">
+<h6 id="Playable_code" name="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.font = '48px serif';
+ctx.textAlign = 'left';
+ctx.strokeText('Hello world', 0, 100);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var edit = document.getElementById('edit');
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener('click', function() {
+  textarea.focus();
+})
+
+textarea.addEventListener('input', drawCanvas);
+window.addEventListener('load', drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="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', "scripting.html#dom-context-2d-textalign", "CanvasRenderingContext2D.textAlign")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("api.CanvasRenderingContext2D.textAlign")}}</p>
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}.</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.html b/files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.html
new file mode 100644
index 0000000000..9c7f8e41ea
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.html
@@ -0,0 +1,184 @@
+---
+title: CanvasRenderingContext2D.textBaseline
+slug: Web/API/CanvasRenderingContext2D/textBaseline
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Propriété
+  - Reference
+translation_of: Web/API/CanvasRenderingContext2D/textBaseline
+---
+<div>{{APIRef}}</div>
+
+<p>La propriété <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.textBaseline</code></strong> de l'API Canvas 2D spécifie la ligne de base de texte à utiliser lors du dessin d'un texte.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var><em>ctx</em>.textBaseline = "top" || "hanging" || "middle" || "alphabetic" || "ideographic" || "bottom";</var>
+</pre>
+
+<h3 id="Options">Options</h3>
+
+<p>Valeurs possibles :</p>
+
+<dl>
+ <dt>top</dt>
+ <dd>La ligne de base du texte est le haut du cadratin.</dd>
+ <dt>hanging</dt>
+ <dd>La ligne de base du texte est la ligne de base supérieure.</dd>
+ <dt>middle</dt>
+ <dd>La ligne de base du texte est le milieu du cadratin.</dd>
+ <dt>alphabetic</dt>
+ <dd>La ligne de base du texte est la ligne de base normale alphabétique.</dd>
+ <dt>ideographic</dt>
+ <dd>La ligne de base du texte est la ligne de base idéographique ; c'est le bas du corps des caractères, si le corps principal des caractères fait saillie en dessous de la ligne de base alphabétique.</dd>
+ <dt>bottom</dt>
+ <dd>La ligne de base du texte est le bas du cadre. Cela diffère de ligne de base idéographique en ce que la ligne de base idéographique ne prend pas en considération les jambages.</dd>
+</dl>
+
+<p>La valeur par défaut est <code>alphabetic</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Using_the_textBaseline_property" name="Using_the_textBaseline_property">Utilisation de la propritété <code>textBaseline</code></h3>
+
+<p>Ceci est seulement un fragment de code simple utilisant la propriété <code>textBaseline</code> pour définir un réglage différent de ligne de base de texte.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.font = '48px serif';
+ctx.textBaseline = 'hanging';
+ctx.strokeText('Hello world', 0, 100);
+</pre>
+
+<p>Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :</p>
+
+<div class="hidden">
+<h6 id="Playable_code" name="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.font = '48px serif';
+ctx.textBaseline = 'hanging';
+ctx.strokeText('Hello world', 0, 100);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var edit = document.getElementById('edit');
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener('click', function() {
+  textarea.focus();
+})
+
+textarea.addEventListener('input', drawCanvas);
+window.addEventListener('load', drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="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', "scripting.html#dom-context-2d-textbaseline", "CanvasRenderingContext2D.textBaseline")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</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>Support de base</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("1.9.1") }}</td>
+   <td>{{ CompatIE(9) }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome pour 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>Support de base</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("1.9.1") }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}.</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/transform/index.html b/files/fr/web/api/canvasrenderingcontext2d/transform/index.html
new file mode 100644
index 0000000000..fa60151b13
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/transform/index.html
@@ -0,0 +1,136 @@
+---
+title: CanvasRenderingContext2D.transform()
+slug: Web/API/CanvasRenderingContext2D/transform
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Méthode
+  - Reference
+translation_of: Web/API/CanvasRenderingContext2D/transform
+---
+<div>{{APIRef}}</div>
+
+<p>La méthode <strong>CanvasRenderingContext2D.transform ()</strong> de l'API Canvas 2D multiplie la matrice de transformation courante par la matrice décrite par les arguments de cette méthode. Vous pouvez mettre à l'échelle, faire pivoter, déplacer et incliner le contexte.</p>
+
+<p>Voir aussi la méthode {{domxref ("CanvasRenderingContext2D.setTransform()", "setTransform()")}} qui réinitialise la transformation courante à la matrice identité puis invoque <code>transform()</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.transform(a, b, c, d, e, f);</var>
+</pre>
+
+<p>La matrice de transformation est décrite par : <math><semantics><mrow><mo>[</mo><mtable columnalign="center center center" rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd><mtd><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd><mtd><mi>f</mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>]</mo></mrow><annotation encoding="TeX">\left[ \begin{array}{ccc} a &amp; c &amp; e \\ b &amp; d &amp; f \\ 0 &amp; 0 &amp; 1 \end{array} \right]</annotation></semantics></math></p>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>a (m11)</code></dt>
+ <dd>Échelle horizontale.</dd>
+ <dt><em><code>b (m12)</code></em></dt>
+ <dd>Inclinaison horizontale.</dd>
+ <dt><code>c (m21)</code></dt>
+ <dd>Inclinaison verticale.</dd>
+ <dt><code>d (m22)</code></dt>
+ <dd>Échelle verticale.</dd>
+ <dt><code>e (dx)</code></dt>
+ <dd>Déplacement horizontal.</dd>
+ <dt><code>f (dy)</code></dt>
+ <dd>Déplacement vertical.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_la_méthode_transform">Utilisation de la méthode <code>transform</code></h3>
+
+<p>Ceci est seulement un fragment de code simple utilisant la méthode <code>transform</code>.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canevas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[4]">var canevas = document.getElementById('canevas');
+var ctx = canevas.getContext('2d');
+
+ctx.transform(1, 1, 0, 1, 0, 0);
+ctx.fillRect(0, 0, 100, 100);
+</pre>
+
+<p>Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canevas :</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.transform(1,1,0,1,0,0);
+ctx.fillRect(0,0,100,100);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  ctx.save();
+  eval(textarea.value);
+  ctx.restore();
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  ctx.setTransform(1, 0, 0, 1, 0, 0);
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="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', "scripting.html#dom-context-2d-transform", "CanvasRenderingContext2D.transform")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("api.CanvasRenderingContext2D.transform")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.setTransform()")}}</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/translate/index.html b/files/fr/web/api/canvasrenderingcontext2d/translate/index.html
new file mode 100644
index 0000000000..6146a88b6c
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/translate/index.html
@@ -0,0 +1,126 @@
+---
+title: CanvasRenderingContext2D.translate()
+slug: Web/API/CanvasRenderingContext2D/translate
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Méthode
+  - Reference
+translation_of: Web/API/CanvasRenderingContext2D/translate
+---
+<div>{{APIRef}}</div>
+
+<p>La méthode <strong>CanvasRenderingContext2D.translate()</strong> de l'API Canvas 2D ajoute une transformation de translation en déplaçant le canevas et son origine x horizontalement et y verticalement sur la grille.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.translate(x, y);</var>
+</pre>
+
+<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/234/Canvas_grid_translate.png" style="float: right;"></p>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Distance de déplacement dans le sens horizontal.</dd>
+ <dt>y</dt>
+ <dd>Distance de déplacement dans le sens vertical.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_la_méthode_translate">Utilisation de la méthode <code>translate</code></h3>
+
+<p>Il s'agit seulement d'un extrait de code simple qui utilise la méthode translate.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canevas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[4]">var canevas = document.getElementById('canevas');
+var ctx = canevas.getContext('2d');
+
+ctx.translate(50, 50);
+ctx.fillRect(0, 0, 100, 100);
+
+// Réinitialise la matrice de transformation en cours à la matrice identité
+ctx.setTransform(1, 0, 0, 1, 0, 0);
+</pre>
+
+<p>Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct sur le canevas :</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.translate(50, 50);
+ctx.fillRect(0,0,100,100);
+ctx.setTransform(1, 0, 0, 1, 0, 0);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="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', "scripting.html#dom-context-2d-translate", "CanvasRenderingContext2D.translate")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("api.CanvasRenderingContext2D.translate")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li>
+</ul>
diff --git a/files/fr/web/api/cdatasection/index.html b/files/fr/web/api/cdatasection/index.html
new file mode 100644
index 0000000000..2f1d631cef
--- /dev/null
+++ b/files/fr/web/api/cdatasection/index.html
@@ -0,0 +1,85 @@
+---
+title: CDATASection
+slug: Web/API/CDATASection
+tags:
+  - API
+  - DOM
+  - Interface
+  - Référence(2)
+  - Section
+translation_of: Web/API/CDATASection
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>L'interface <code><strong>CDATASection</strong></code> représente une section CDATA qui peut être utilisée dans un document XML afin d'inclure des portions de texte qui ne sont pas échappées (les symboles &lt; et &amp; présents dans ces portions n'ont pas besoin d'être échappés comme ils doivent l'être normalement dans un document XML).</p>
+
+<p>En termes de balisage, une section CDATA a la forme suivante :</p>
+
+<pre class="syntaxbox">&lt;![CDATA[  ... ]]&gt;
+</pre>
+
+<p>Par exemple :</p>
+
+<pre class="brush:xml">&lt;toto&gt;
+  Voici une section CDATA :
+  &lt;![CDATA[  &lt; &gt; &amp; ]]&gt; dans laquelle
+  le texte n'est pas échappé.
+&lt;/toto&gt;
+</pre>
+
+<p>La seule séquence qui n'est pas autorisée dans une section CDATA est le délimiteur de fin d'une séquence CDATA lui-même :</p>
+
+<pre class="brush:xml">&lt;![CDATA[  ]]&gt; causera une erreur   ]]&gt;
+</pre>
+
+<p>On notera que les sections ne doivent pas être utilisées dans des documents HTML.</p>
+
+<p>{{InheritanceDiagram(600,120)}}</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Cette interface ne dispose pas de propriétés spécifiques et implémente celles de son parent : {{domxref("Text")}}.</em></p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Cette interface ne dispose pas de méthodes spécifiques et implémente celles de son parent : {{domxref("Text")}}.</em></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Spécification</th>
+   <th>État</th>
+   <th>Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-cdatasection', 'CDATASection')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Rajouté dans le bogue <a href="https://github.com/whatwg/dom/pull/295">#295</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-667469212', 'CDATASection')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Aucune modification depuis {{SpecName('DOM2 Core')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-667469212', 'CDATASection')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Aucune modification depuis {{SpecName('DOM1')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-667469212', 'CDATASection')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.CDATASection")}}</p>
diff --git a/files/fr/web/api/characterdata/index.html b/files/fr/web/api/characterdata/index.html
new file mode 100644
index 0000000000..2357484722
--- /dev/null
+++ b/files/fr/web/api/characterdata/index.html
@@ -0,0 +1,159 @@
+---
+title: CharacterData
+slug: Web/API/CharacterData
+tags:
+  - API
+  - DOM
+translation_of: Web/API/CharacterData
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>L'interface abstraite <code><strong>CharacterData</strong></code> représente un objet {{domxref("Node")}} (<em>noeud</em>) qui contient des caractères. C'est une interface abstraite, ce qui signifie qu'il n'existe aucun objet de type <code>CharacterData</code> : elle est implémentée par d'autres interfaces comme {{domxref("Text")}}, {{domxref("Comment")}} ou {{domxref("ProcessingInstruction")}} qui ne sont pas abstraites.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Hérite des propriétés de son parent {{domxref("Node")}} et implémente les interfaces {{domxref("ChildNode")}} et {{domxref("NonDocumentTypeChildNode")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("CharacterData.data")}}</dt>
+ <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) representant les données textuelles contenues dans cet objet.</dd>
+ <dt>{{domxref("CharacterData.length")}} {{readonlyInline}}</dt>
+ <dd>Retourne un <code>unsigned long</code> représentant la taille de la chaîne de caractères contenue dans <code>CharacterData.data</code>.</dd>
+ <dt>{{domxref("NonDocumentTypeChildNode.nextElementSibling")}} {{readonlyInline}}</dt>
+ <dd>Retourne l'{{domxref("Element")}} immédiatement après celui spécifié dans la liste des enfants de son parent, ou <code>null</code> si l'élément spécifié est le dernier de la liste.</dd>
+ <dt>{{domxref("NonDocumentTypeChildNode.previousElementSibling")}} {{readonlyInline}}</dt>
+ <dd>Retourne l'{{domxref("Element")}} immédiatement avant celui spécifié dans la liste des enfants de son parent, ou <code>null</code> si l'élément spécifié est le premier de la liste.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Méthodes</h2>
+
+<p><em>Hérite des méthodes de son parent {{domxref("Node")}}, et implémente les interfaces {{domxref("ChildNode")}} <em>et {{domxref("NonDocumentTypeChildNode")}}</em>.</em></p>
+
+<dl>
+ <dt>{{domxref("CharacterData.appendData()")}}</dt>
+ <dd>Ajoute la {{domxref("DOMString")}} (<em>chaîne de caractères</em>) donnée à la chaîne <code>CharacterData.data</code> ; dans le retour de la méthode, <code>data</code> contient la {{domxref("DOMString")}} concaténée .</dd>
+ <dt>{{domxref("CharacterData.deleteData()")}}</dt>
+ <dd>Supprime la quantité spécifiée de caractères, en commençant au point désigné, à partir de la chaîne <code>CharacterData.data</code> ; dans le retour de la méthode, <code>data</code> contient le raccourci {{domxref ("DOMString")}}.</dd>
+ <dt>{{domxref("CharacterData.insertData()")}}</dt>
+ <dd>Insère les caractères spécifiés, au point désigné, dans la chaîne <code>CharacterData.data</code> ; dans le retour de cette méthode, <code>data</code> contient la {{domxref ("DOMString")}} (<em>chaîne de caractères</em>) modifiée.</dd>
+ <dt>{{domxref("ChildNode.remove()")}} {{experimental_inline}}</dt>
+ <dd>Supprime l'objet de la liste d'enfants de son parent.</dd>
+ <dt>{{domxref("CharacterData.replaceData()")}}</dt>
+ <dd>Remplace la quantité spécifiée de caractères, en commençant au point désigné, avec la {{domxref ("DOMString")}} (<em>chaîne de caractères</em>) spécifiée ; dans le retour de cette méthode, <code>data</code> contient la {{domxref ("DOMString")}} modifiée.</dd>
+ <dt>{{domxref("CharacterData.substringData()")}}</dt>
+ <dd>Renvoie une {{domxref ("DOMString")}} (<em>chaîne de caractères</em>) contenant la partie de <code>CharacterData.data</code> de la longueur spécifiée et commençant au point désigné.</dd>
+</dl>
+
+<h2 id="Specification" name="Specification">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('DOM WHATWG', '#characterdata', 'CharacterData')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Ajoute une implémention des interfaces {{domxref("ChildNode")}} et{{domxref("NonDocumentTypeChildNode")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-FF21A306', 'CharacterData')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Pas de changement depuis {{SpecName('DOM2 Core')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-FF21A306', 'CharacterData')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Pas de changement depuis {{SpecName('DOM1')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-FF21A306', 'CharacterData')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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.0")}}</td>
+   <td>6</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Implements {{domxref("ChildNode")}} interface.</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("25.0")}} [1]</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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Implements {{domxref("ChildNode")}} interface.</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("25.0")}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Les deux propriétés <code>nextElementSibling</code> et <code>previousElementSibling</code> ont été déplacées vers l'interface {{domxref("NonDocumentTypeChildNode")}}, également implémentée par <code>CharacterData</code>.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model" title="/en-US/docs/DOM/DOM_Reference">Référence du DOM</a>.</li>
+</ul>
diff --git a/files/fr/web/api/childnode/after/index.html b/files/fr/web/api/childnode/after/index.html
new file mode 100644
index 0000000000..60fc5d339d
--- /dev/null
+++ b/files/fr/web/api/childnode/after/index.html
@@ -0,0 +1,184 @@
+---
+title: ChildNode.after()
+slug: Web/API/ChildNode/after
+tags:
+  - API
+  - DOM
+  - Méthode
+  - Noeud
+  - Reference
+translation_of: Web/API/ChildNode/after
+---
+<div>{{APIRef ("DOM")}} {{SeeCompatTable}}</div>
+
+<div>La méthode <code><strong>ChildNode.after ()</strong></code> insère un ensemble d'objets {{domxref ("Node")}} ou {{domxref ("DOMString")}} dans la liste des enfants de ce parent de ChildNode, juste après ce ChildNode. Les objets {{domxref ("DOMString")}} sont insérés comme des noeuds {{domxref ("Text")}} équivalents.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">[Throws, Unscopable]
+void ChildNode.after((Node or DOMString)... nodes);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>nodes</code></dt>
+ <dd>Un ensemble d'objets {{domxref ("Node")}} ou {{domxref ("DOMString")}} à insérer.</dd>
+</dl>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<ul>
+ <li>{{Domxref ("HierarchyRequestError")}} : Le noeud ne peut pas être inséré au point spécifié dans la hiérarchie.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Insertion_d'un_élément">Insertion d'un élément</h3>
+
+<pre class="brush: js">var parent = document.createElement("div");
+var child = document.createElement("p");
+parent.appendChild(child);
+var span = document.createElement("span");
+
+child.after(span);
+
+console.log(parent.outerHTML);
+// "&lt;div&gt;&lt;p&gt;&lt;/p&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;"
+</pre>
+
+<h3 id="Insertion_d'un_texte">Insertion d'un texte</h3>
+
+<pre class="brush: js">var parent = document.createElement("div");
+var child = document.createElement("p");
+parent.appendChild(child);
+
+child.after("Text");
+
+console.log(parent.outerHTML);
+// "&lt;div&gt;&lt;p&gt;&lt;/p&gt;Texte&lt;/div&gt;"</pre>
+
+<h3 id="Insertion_d'un_élément_et_de_texte">Insertion d'un élément et de  texte</h3>
+
+<pre class="brush: js">var parent = document.createElement("div");
+var child = document.createElement("p");
+parent.appendChild(child);
+var span = document.createElement("span");
+
+child.after(span, "Text");
+
+console.log(parent.outerHTML);
+// "&lt;div&gt;&lt;p&gt;&lt;/p&gt;&lt;span&gt;&lt;/span&gt;Texte&lt;/div&gt;"</pre>
+
+<h3 id="ChildNode.after()_n'est_pas_accessible"><code>ChildNode.after()</code> n'est pas accessible</h3>
+
+<p>La méthode <code>after()</code> <span class="short_text" id="result_box" lang="fr"><span>n'est pas compris dans l'instruction </span></span><code>with</code> . Voir {{jsxref("Symbol.unscopables")}} pour plus d'informations.</p>
+
+<pre class="brush: js">with(node) {
+  after("foo");
+}
+// ReferenceError: after n'est pas défini </pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Vous pouvez appliquer la méthode <code>after()</code> dans Internet Explorer 9 et plus haut avec le code suivant :</p>
+
+<pre class="brush: js">//de : https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/after()/after().md
+(function (arr) {
+  arr.forEach(function (item) {
+    if (item.hasOwnProperty('after')) {
+      return;
+    }
+    Object.defineProperty(item, 'after', {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: function after() {
+        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.parentNode.insertBefore(docFrag, this.nextSibling);
+      }
+    });
+  });
+})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);</pre>
+
+<h2 id="_Polyfill_Element.prototype.after" name="_Polyfill_Element.prototype.after"> </h2>
+
+<pre class="brush: js">//https://github.com/FabioVergani/js-Polyfill_Element.prototype.after/blob/master/after.js
+
+(function(x){
+ var o=x.prototype,p='after';
+ if(!o[p]){
+    o[p]=function(){
+     var e, m=arguments, l=m.length, i=0, t=this, p=t.parentNode, n=Node, s=String, d=document;
+     if(p!==null){
+        while(i&lt;l){
+         e=m[i];
+         if(e instanceof n){
+            t=t.nextSibling;
+            if(t!==null){
+                p.insertBefore(e,t);
+            }else{
+                p.appendChild(e);
+            };
+         }else{
+            p.appendChild(d.createTextNode(s(e)));
+         };
+         ++i;
+        };
+     };
+    };
+ };
+})(Element);
+
+
+
+/*
+min:
+
+(function(x){
+ var o=x.prototype;
+ o.after||(o.after=function(){var e,m=arguments,l=m.length,i=0,t=this,p=t.parentNode,n=Node,s=String,d=document;if(p!==null){while(i&lt;l){((e=m[i]) instanceof n)?(((t=t.nextSibling )!==null)?p.insertBefore(e,t):p.appendChild(e)):p.appendChild(d.createTextNode(s(e)));++i;}}});
+}(Element));
+
+*/
+</pre>
+
+<h3 id="sect1"> </h3>
+
+<h2 id="Spécification">Spécification</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('DOM WHATWG', '#dom-childnode-after', 'ChildNode.after()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.ChildNode.after")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("ChildNode")}} et {{domxref("ParentNode")}}</li>
+ <li>{{domxref("ChildNode.before()")}}</li>
+ <li>{{domxref("ParentNode.append()")}}</li>
+ <li>{{domxref("Node.appendChild()")}}</li>
+ <li>{{domxref("NodeList")}}</li>
+</ul>
diff --git a/files/fr/web/api/childnode/before/index.html b/files/fr/web/api/childnode/before/index.html
new file mode 100644
index 0000000000..fb080c7b0c
--- /dev/null
+++ b/files/fr/web/api/childnode/before/index.html
@@ -0,0 +1,141 @@
+---
+title: ChildNode.before()
+slug: Web/API/ChildNode/before
+tags:
+  - API
+  - DOM
+  - Méthodes
+  - Noeuds
+  - References
+translation_of: Web/API/ChildNode/before
+---
+<div>{{APIRef("DOM")}} {{SeeCompatTable}}</div>
+
+<p>La méthode <code><strong>ChildNode.before</strong></code> insère un ensemble d'objets {{domxref("Node")}} (<em>noeud</em>) ou {{domxref("DOMString")}} (<em>chaîne de caractères</em>) dans la liste des enfants du parent du <code>ChildNode</code>, juste avant ce <code>ChildNode</code>. Des objets {{domxref("DOMString")}} sont insérés comme noeuds équivalents à {{domxref("Text")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">[Throws, Unscopable]
+void ChildNode.before((Node or DOMString)... nodes);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>nodes</code></dt>
+ <dd>Un ensemble d'objets {{domxref("Node")}} (<em>noeud</em>) ou {{domxref("DOMString")}} (<em>chaîne de caractères</em>) à insérer.</dd>
+</dl>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<ul>
+ <li>{{domxref("HierarchyRequestError")}} : Le noeud ne peut être inséré au point spécifié dans la hiérarchie.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Insertion_d'un_élément">Insertion d'un élément</h3>
+
+<pre class="brush: js">var parent = document.createElement("div");
+var child = document.createElement("p");
+parent.appendChild(child);
+var span = document.createElement("span");
+
+child.before(span);
+
+console.log(parent.outerHTML);
+// "&lt;div&gt;&lt;span&gt;&lt;/span&gt;&lt;p&gt;&lt;/p&gt;&lt;/div&gt;"
+</pre>
+
+<h3 id="Insertion_de_texte">Insertion de texte</h3>
+
+<pre class="brush: js">var parent = document.createElement("div");
+var child = document.createElement("p");
+parent.appendChild(child);
+
+child.before("Text");
+
+console.log(parent.outerHTML);
+// "&lt;div&gt;Text&lt;p&gt;&lt;/p&gt;&lt;/div&gt;"</pre>
+
+<h3 id="Insertion_d'un_élément_et_de_texte">Insertion d'un élément et de texte</h3>
+
+<pre class="brush: js">var parent = document.createElement("div");
+var child = document.createElement("p");
+parent.appendChild(child);
+var span = document.createElement("span");
+
+child.before(span, "Text");
+
+console.log(parent.outerHTML);
+// "&lt;div&gt;&lt;span&gt;&lt;/span&gt;Text&lt;p&gt;&lt;/p&gt;&lt;/div&gt;"</pre>
+
+<h3 id="ChildNode.before()_est_inaccessible"><code>ChildNode.before()</code> est inaccessible</h3>
+
+<p>La méthode <code>before()</code> n'est pas comprise dans l'instruction <code>with</code>. Voir {{jsxref("Symbol.unscopables")}} pour plus d'informations.</p>
+
+<pre class="brush: js">with(node) {
+  before("foo");
+}
+// ReferenceError: before is not defined (<em>before n'est pas défini</em>)</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Vous pouvez utiliser un polyfill pour la méthode <code>before()</code> dans Internet Explorer 9 et supérieur avec le code suivant :</p>
+
+<pre class="brush: js">// from: https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/before()/before().md
+(function (arr) {
+  arr.forEach(function (item) {
+    if (item.hasOwnProperty('before')) {
+      return;
+    }
+    Object.defineProperty(item, 'before', {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: function before() {
+        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.parentNode.insertBefore(docFrag, this);
+      }
+    });
+  });
+})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);</pre>
+
+<h2 id="Spécification">Spécification</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('DOM WHATWG', '#dom-childnode-before', 'ChildNode.before()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.ChildNode.before")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("ChildNode")}} et {{domxref("ParentNode")}}</li>
+ <li>{{domxref("ChildNode.after()")}}</li>
+ <li>{{domxref("ParentNode.append()")}}</li>
+ <li>{{domxref("Node.appendChild()")}}</li>
+ <li>{{domxref("Node.insertBefore()")}}</li>
+ <li>{{domxref("NodeList")}}</li>
+</ul>
diff --git a/files/fr/web/api/childnode/index.html b/files/fr/web/api/childnode/index.html
new file mode 100644
index 0000000000..4a847879bd
--- /dev/null
+++ b/files/fr/web/api/childnode/index.html
@@ -0,0 +1,75 @@
+---
+title: ChildNode
+slug: Web/API/ChildNode
+tags:
+  - API
+  - DOM
+  - Interface
+  - Noeuds
+translation_of: Web/API/ChildNode
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>L'interface <code><strong>ChildNode</strong></code> contient des méthodes propres aux objets {{domxref("Node")}} pouvant avoir un parent.</p>
+
+<p><code>ChildNode</code> est une interface de flux et aucun objet de ce type ne peut être créé ; elle est implémentée par les objets {{domxref("Element")}}, {{domxref("DocumentType")}} et {{domxref("CharacterData")}}.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Il n'y a pas de propriétés héritées ni spécifiques.</em></p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Il n'y a pas de méthodes héritées.</em></p>
+
+<dl>
+ <dt>{{domxref("ChildNode.remove()")}} {{experimental_inline}}</dt>
+ <dd>supprime ce <code>ChildNode</code> de la liste des enfants du parent.</dd>
+ <dt>{{domxref("ChildNode.before()")}} {{experimental_inline}}</dt>
+ <dd>ajoute un jeu d'objets {{domxref("Node")}} ou {{domxref("DOMString")}} dans la liste des enfants du parent de ce <code>ChildNode</code>, juste avant lui. Les objets {{domxref("DOMString")}} sont ajoutés comme équivalent des noeuds {{domxref("Text")}}.</dd>
+ <dt>{{domxref("ChildNode.after()")}} {{experimental_inline}}</dt>
+ <dd>ajoute un jeu d'objets {{domxref("Node")}} ou {{domxref("DOMString")}} dans la liste des enfants du parent de ce <code>ChildNode</code>, juste après lui. Les objets {{domxref("DOMString")}} sont ajoutés comme équivalent des noeuds {{domxref("Text")}}.</dd>
+ <dt>{{domxref("ChildNode.replace()")}} {{experimental_inline}}</dt>
+ <dd>Remplace ce <code>ChildNode</code> dans la liste des enfants de son parent avec un jeu d'objets {{domxref("Node")}} ou {{domxref("DOMString")}}. Les objets {{domxref("DOMString")}} sont insérés comme équivalent des noeuds {{domxref("Text")}}.</dd>
+</dl>
+
+<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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-childnode', 'ChildNode')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Sépare l'interface <code>ElementTraversal</code> dans {{domxref("ParentNode")}} et <code>ChildNode</code>. Les <code>previousElementSibling</code> et <code>nextElementSibling</code> sont maintenant définis  sur ce dernier.<br>
+    Les {{domxref("CharacterData")}} et {{domxref("DocumentType")}} implémentent les nouvelles interfaces.<br>
+    Ajoute les méthodes <code>remove()</code>, <code>before()</code>, <code>after()</code> et <code>replace()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}</td>
+   <td>{{Spec2('Element Traversal')}}</td>
+   <td>Ajoute la définition initiale de ses propriétés à l'interface pure <code>ElementTraversal</code> et l'utilise sur un {{domxref("Element")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Externe sur github : <a href="https://github.com/seznam/JAK/blob/master/lib/polyfills/childNode.js">childNode.js</a></p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.ChildNode")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface pure {{domxref("ParentNode")}}.</li>
+ <li>
+  <div class="syntaxbox">Les types d'objet implémentant cette pure interface : {{domxref("CharacterData")}}, {{domxref("Element")}} et {{domxref("DocumentType")}}.</div>
+ </li>
+</ul>
diff --git a/files/fr/web/api/childnode/remove/index.html b/files/fr/web/api/childnode/remove/index.html
new file mode 100644
index 0000000000..ad0b5ffa1c
--- /dev/null
+++ b/files/fr/web/api/childnode/remove/index.html
@@ -0,0 +1,91 @@
+---
+title: ChildNode.remove()
+slug: Web/API/ChildNode/remove
+tags:
+  - API
+  - DOM
+  - Méthodes
+  - Noeud Enfant
+translation_of: Web/API/ChildNode/remove
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La méthode <code><strong>ChildNode.remove()</strong></code> retire l'objet de l'arbre auquel il appartient.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>node</em>.remove();
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="Utilisation_de_la_méthode_remove">Utilisation de la méthode <code>remove()</code></h3>
+
+<pre class="brush: html">&lt;div id="div-01"&gt;Here is div-01&lt;/div&gt;
+&lt;div id="div-02"&gt;Here is div-02&lt;/div&gt;
+&lt;div id="div-03"&gt;Here is div-03&lt;/div&gt;
+</pre>
+
+<pre class="brush: js">var el = document.getElementById('div-01');
+el.nextElementSibling.remove(); // Retire l'élément div dont l'id est 'div-02'</pre>
+
+<h3 id="ChildNode.remove_est_unscopable"><code>ChildNode.remove()</code> est <em>unscopable</em></h3>
+
+<p>La méthode <code>remove()</code> n'est pas comprise dans une instruction <code>with</code>. Voir {{jsxref("Symbol.unscopables")}} pour plus d'informations.</p>
+
+<pre class="brush: js">with(node) {
+  remove();
+}
+// ReferenceError: remove is not defined (<em>remove n'est pas défini</em>)</pre>
+
+<h2 id="Prothèse_démulation">Prothèse d'émulation</h2>
+
+<p>Vous pouvez utiliser une prothèse d'émulation pour la méthode <code>remove()</code> dans Internet Explorer 9 et supérieur avec le code suivant :</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="comment token">// from:https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/remove()/remove().md</span>
+<span class="punctuation token">(</span><span class="keyword token">function</span> <span class="punctuation token">(</span>arr<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  arr<span class="punctuation token">.</span><span class="function token">forEach</span><span class="punctuation token">(</span><span class="keyword token">function</span> <span class="punctuation token">(</span>item<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">if</span> <span class="punctuation token">(</span>item<span class="punctuation token">.</span><span class="function token">hasOwnProperty</span><span class="punctuation token">(</span><span class="string token">'remove'</span><span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="keyword token">return</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+    Object<span class="punctuation token">.</span><span class="function token">defineProperty</span><span class="punctuation token">(</span>item<span class="punctuation token">,</span> <span class="string token">'remove'</span><span class="punctuation token">,</span> <span class="punctuation token">{</span>
+      configurable<span class="punctuation token">:</span> <span class="keyword token">true</span><span class="punctuation token">,</span>
+      enumerable<span class="punctuation token">:</span> <span class="keyword token">true</span><span class="punctuation token">,</span>
+      writable<span class="punctuation token">:</span> <span class="keyword token">true</span><span class="punctuation token">,</span>
+      value<span class="punctuation token">:</span> <span class="keyword token">function</span> <span class="function token">remove</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>parentNode <span class="operator token">!==</span> <span class="keyword token">null</span><span class="punctuation token">)</span>
+          <span class="keyword token">this</span><span class="punctuation token">.</span>parentNode<span class="punctuation token">.</span><span class="function token">removeChild</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span>
+    <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span><span class="punctuation token">)</span><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>Element<span class="punctuation token">.</span>prototype<span class="punctuation token">,</span> CharacterData<span class="punctuation token">.</span>prototype<span class="punctuation token">,</span> DocumentType<span class="punctuation token">.</span>prototype<span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span></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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-childnode-remove', 'ChildNode.remove')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{Compat("api.ChildNode.remove")}}</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface simple {{domxref("ChildNode")}}.</li>
+ <li>
+  <div class="syntaxbox">Les types d'objets implémentant cette interface simple : {{domxref("CharacterData")}}, {{domxref("Element")}} et {{domxref("DocumentType")}}.</div>
+ </li>
+</ul>
diff --git a/files/fr/web/api/childnode/replacewith/index.html b/files/fr/web/api/childnode/replacewith/index.html
new file mode 100644
index 0000000000..3239ceae59
--- /dev/null
+++ b/files/fr/web/api/childnode/replacewith/index.html
@@ -0,0 +1,117 @@
+---
+title: ChildNode.replaceWith()
+slug: Web/API/ChildNode/replaceWith
+tags:
+  - API
+  - DOM
+  - Méthodes
+  - Noeuds
+  - Reference
+translation_of: Web/API/ChildNode/replaceWith
+---
+<div>{{APIRef("DOM")}}<br>
+La méthode <code><strong>ChildNode</strong></code><strong><code>.replaceWith()</code></strong> remplace ce <code>ChildNode</code> de la liste des enfants de son parent par un ensemble d'objets {{domxref("Node")}} (<em>noeud</em>) ou {{domxref("DOMString")}} (<em>chaîne de caractères</em>).<br>
+Les objets {{domxref("DOMString")}} sont insérés en tant que noeuds {{domxref("Text")}}.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">[Throws, Unscopable]
+void ChildNode.replaceWith((Node ou DOMString)... nodes);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>nodes</code></dt>
+ <dd>Un ensemble d'objets {{domxref("Node")}} (<em>noeud</em>) ou {{domxref("DOMString")}} (<em>chaîne de caractères</em>) à remplacer.</dd>
+</dl>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<ul>
+ <li>{{domxref("HierarchyRequestError")}} : Le noeud ne peut pas être inséré au point spécifié dans la hiérarchie.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_replaceWith">Utilisation de <code>replaceWith()</code></h3>
+
+<pre class="brush: js">var parent = document.createElement("div");
+var enfant = document.createElement("p");
+parent.appendChild(enfant);
+var span = document.createElement("span");
+
+enfant.replaceWith(span);
+
+console.log(parent.outerHTML);
+// "&lt;div&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;"
+</pre>
+
+<h3 id="ChildNode.replaceWith_nest_pas_accessible"><code>ChildNode.replaceWith()</code> n'est pas accessible</h3>
+
+<p>La méthode <code>replaceWith()</code> n'est pas comprise dans une instruction with. Voir {{jsxref("Symbol.unscopables")}} pour plus d'informations.</p>
+
+<pre class="brush: js">with(node) {
+  replaceWith("foo");
+}
+// ReferenceError: replaceWith n'est pas défini </pre>
+
+<h2 id="Prothèse_démulation">Prothèse d'émulation</h2>
+
+<p>Vous pouvez utiliser une prothèse d'émulation pour la méthode <code>replaceWith()</code> pour Internet Explorer 10 et plus avec le code suivant :</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">ReplaceWith</span><span class="punctuation token">(</span>Ele<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="string token">'use-strict'</span><span class="punctuation token">;</span> <span class="comment token">// For safari, and IE &gt; 10</span>
+  <span class="keyword token">var</span> parent <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">.</span>parentNode<span class="punctuation token">,</span>
+      i <span class="operator token">=</span> arguments<span class="punctuation token">.</span>length<span class="punctuation token">,</span>
+      firstIsNode <span class="operator token">=</span> <span class="operator token">+</span><span class="punctuation token">(</span>parent <span class="operator token">&amp;&amp;</span> <span class="keyword token">typeof</span> Ele <span class="operator token">===</span> <span class="string token">'object'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span>parent<span class="punctuation token">)</span> <span class="keyword token">return</span><span class="punctuation token">;</span>
+
+  <span class="keyword token">while</span> <span class="punctuation token">(</span>i<span class="operator token">--</span> <span class="operator token">&gt;</span> firstIsNode<span class="punctuation token">)</span><span class="punctuation token">{</span>
+    <span class="keyword token">if</span> <span class="punctuation token">(</span>parent <span class="operator token">&amp;&amp;</span> <span class="keyword token">typeof</span> arguments<span class="punctuation token">[</span>i<span class="punctuation token">]</span> <span class="operator token">!==</span> <span class="string token">'object'</span><span class="punctuation token">)</span><span class="punctuation token">{</span>
+      arguments<span class="punctuation token">[</span>i<span class="punctuation token">]</span> <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createTextNode</span><span class="punctuation token">(</span>arguments<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span> <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span>parent <span class="operator token">&amp;&amp;</span> arguments<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>parentNode<span class="punctuation token">)</span><span class="punctuation token">{</span>
+      arguments<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>parentNode<span class="punctuation token">.</span><span class="function token">removeChild</span><span class="punctuation token">(</span>arguments<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="keyword token">continue</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+    parent<span class="punctuation token">.</span><span class="function token">insertBefore</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>previousSibling<span class="punctuation token">,</span> arguments<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span>firstIsNode<span class="punctuation token">)</span> parent<span class="punctuation token">.</span><span class="function token">replaceChild</span><span class="punctuation token">(</span>Ele<span class="punctuation token">,</span> <span class="keyword token">this</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+<span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span>Element<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>replaceWith<span class="punctuation token">)</span>
+    Element<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>replaceWith <span class="operator token">=</span> ReplaceWith<span class="punctuation token">;</span>
+<span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span>CharacterData<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>replaceWith<span class="punctuation token">)</span>
+    CharacterData<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>replaceWith <span class="operator token">=</span> ReplaceWith<span class="punctuation token">;</span>
+<span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span>DocumentType<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>replaceWith<span class="punctuation token">)</span>
+    DocumentType<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>replaceWith <span class="operator token">=</span> ReplaceWith<span class="punctuation token">;</span></code></pre>
+
+<h2 id="Spécification">Spécification</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('DOM WHATWG', '#dom-childnode-replacewith', 'ChildNode.replacewith()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.ChildNode.replaceWith")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("ChildNode")}} et {{domxref("ParentNode")}}</li>
+ <li>{{domxref("Node.replaceChild()")}}</li>
+ <li>{{domxref("NodeList")}}</li>
+</ul>
diff --git a/files/fr/web/api/client/frametype/index.html b/files/fr/web/api/client/frametype/index.html
new file mode 100644
index 0000000000..42fdca1bde
--- /dev/null
+++ b/files/fr/web/api/client/frametype/index.html
@@ -0,0 +1,96 @@
+---
+title: Client.frameType
+slug: Web/API/Client/frameType
+tags:
+  - API
+  - Client
+  - Experimental
+  - Property
+  - Reference
+  - ServiceWorker
+  - frameType
+translation_of: Web/API/Client/frameType
+---
+<p>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</p>
+
+<p>La propriété <code><strong>frameType</strong></code> (accessible en lecture seule) de l'interface {{domxref("Client")}} indique le type de contexte de navigation du {{domxref("Client")}} courant. Cette valeur peut être <code>auxiliary</code>, <code>top-level</code>, <code>nested</code>, ou <code>none</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var myFrameType = Client.frameType;</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">TBD
+</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('Service Workers', '#client-frametype', 'frameType')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatChrome(43.0)}}</td>
+   <td>{{ CompatGeckoDesktop("44.0") }}</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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("44.0") }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fr/web/api/client/id/index.html b/files/fr/web/api/client/id/index.html
new file mode 100644
index 0000000000..8e7cf2701c
--- /dev/null
+++ b/files/fr/web/api/client/id/index.html
@@ -0,0 +1,103 @@
+---
+title: Client.id
+slug: Web/API/Client/id
+tags:
+  - API
+  - Client
+  - Experimental
+  - Propriété
+  - Reference
+  - Service Workers
+  - ServiceWorkers
+  - id
+translation_of: Web/API/Client/id
+---
+<p>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</p>
+
+<p>La propriété <code><strong>id</strong></code> (lecture seule) de l'interface {{domxref("Client")}} retourne l'identifiant universellement unique de l'objet {{domxref("Client")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var clientId = Client.id;</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">TBD
+</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('Service Workers', '#client-id', 'id')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatChrome(45.0)}} [1]</td>
+   <td>{{ CompatGeckoDesktop("44.0") }}</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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("44.0") }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(45.0)}} [1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<ul>
+ <li><strong>[1]:</strong> Avec un flag de Chrome 40 à 44.</li>
+</ul>
diff --git a/files/fr/web/api/client/index.html b/files/fr/web/api/client/index.html
new file mode 100644
index 0000000000..ceb18926b1
--- /dev/null
+++ b/files/fr/web/api/client/index.html
@@ -0,0 +1,92 @@
+---
+title: Client
+slug: Web/API/Client
+tags:
+  - API
+  - Client
+  - Experimental
+  - Interface
+  - Reference
+  - Service Workers
+  - Service worker API
+  - ServiceWorkerClient
+  - ServiceWorkers
+translation_of: Web/API/Client
+---
+<p>{{APIRef("Service Workers API")}}</p>
+
+<p>L'interface <code>Client</code> de l'<a href="/en-US/docs/Web/API/ServiceWorker_API">API ServiceWorker</a> représente la portée d'exécution d'un {{domxref("Worker")}} ou {{domxref("SharedWorker")}}. Les clients {{domxref("Window")}} sont représentés par le plus spécifique {{domxref("WindowClient")}}. Vous pouvez obtenir les objets <code>Client</code>/<code>WindowClient</code> via les méthodes {{domxref("Clients.matchAll","Clients.matchAll()")}} et {{domxref("Clients.get","Clients.get()")}}.</p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("Client.postMessage()")}}</dt>
+ <dd>Permet à un service worker d'envoyer un message au <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerClient" title="The ServiceWorker interface of the ServiceWorker API provides a reference to a service worker. Multiple browsing contexts (e.g. pages, workers, etc.) can be associated with the same service worker, each through a unique ServiceWorker object.">ServiceWorkerClient</a></code>.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("Client.id")}} {{readonlyInline}}</dt>
+ <dd>Retourne l'identifiant universellement unique de l'objet <code>Client</code>.</dd>
+ <dt>{{domxref("Client.type")}} {{readonlyInline}}</dt>
+ <dd>Indique le type de contexte de navigation du client courant. Cette valeur peut être <code>auxiliary</code>, <code>top-level</code>, <code>nested</code>, or <code>none</code>.</dd>
+ <dt>{{domxref("Client.url")}} {{readonlyInline}}</dt>
+ <dd>Retourne l'URL du client service worker courant.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Ce code est basé sur un fragment pris d'un <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/post-message/index.html">exemple d'envoi de message</a> (voir <a href="https://googlechrome.github.io/samples/service-worker/post-message/">l'exemple en ligne</a>.) Ce code envoie une référence de message à laquelle le service worker peut répondre via {{domxref("Client.postMessage()")}}.</p>
+
+<p>Ce message est contenu dans une promesse qui est résolue si la réponse ne contient pas d'erreur et est rejetée avec une erreur.</p>
+
+<pre class="brush: js notranslate">// client service worker (par exemple un document)
+function sendMessage(message) {
+  return new Promise(function(resolve, reject) {
+    // Notez que c'est la version du ServiceWorker.postMessage
+    navigator.serviceWorker.controller.postMessage(message);
+    window.serviceWorker.onMessage = function(e) {
+      resolve(e.data);
+    };
+  });
+}
+
+// Contrôle du service worker
+self.addEventListener("message", function(e) {
+  // e.source est un object client
+  e.source.postMessage("Hello! Your message was: " + e.data);
+});
+</pre>
+
+<h2 id="Spé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('Service Workers', '#client', 'Client')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{Compat("api.Client")}}</div>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Utiliser les Service Workers</a></li>
+ <li><a href="https://github.com/mdn/sw-test">Exemple simple de service workers</a></li>
+ <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Est ce que le ServiceWorker est prêt ?</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promesses</a></li>
+ <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Utilisation performante des web workers</a></li>
+ <li><a href="/en-US/docs/Web/API/Channel_Messaging_API">Channel Messaging API</a></li>
+</ul>
diff --git a/files/fr/web/api/client/postmessage/index.html b/files/fr/web/api/client/postmessage/index.html
new file mode 100644
index 0000000000..1217139212
--- /dev/null
+++ b/files/fr/web/api/client/postmessage/index.html
@@ -0,0 +1,132 @@
+---
+title: Client.postMessage()
+slug: Web/API/Client/postMessage
+tags:
+  - API
+  - Client
+  - Méthode
+  - Reference
+  - Service Worker
+  - ServiceWorker
+  - postMessage
+translation_of: Web/API/Client/postMessage
+---
+<p>{{SeeCompatTable}}{{APIRef("Client")}}</p>
+
+<p>La méthode <code><strong>postMessage() </strong></code>de l'interface {{domxref("Client")}} permet à un service worker client d'envoyer un message à un {{domxref("ServiceWorker")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">Client.postMessage(message[, transfer]);</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Void.</p>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>message</code></dt>
+ <dd>Le message à envoyer au service worker.</dd>
+ <dt><code>transfer {{optional_inline}}</code></dt>
+ <dd>Un objet transferable, comme par exemple une référence à un port.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Ce fragment de code est tiré de l'<a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/post-message/index.html">exemple d'envoi de message du service worker</a> exemple d'envoi de message du service worker (voir <a href="https://googlechrome.github.io/samples/service-worker/post-message/">exemple en ligne</a>). Le code envoi un message et transfert le port vers le service worker qui pourra répondre via {{domxref("Client.postMessage()")}}.</p>
+
+<p>Ce message est contenu dans une promesse qui se résolvera si la réponse ne contient pas d'erreur et qui échouera avec l'erreur.</p>
+
+<pre class="brush: js">function sendMessage(message) {
+  return new Promise(function(resolve, reject) {
+     var messageChannel = new MessageChannel();
+     messageChannel.port1.onmessage = function(event) {
+       if (event.data.error) {
+         reject(event.data.error);
+       } else {
+         resolve(event.data);
+       }
+     };
+    navigator.serviceWorker.controller.postMessage(message, [messageChannel.port2]);
+  });
+}</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('Service Workers', '#client-postmessage-method', 'postMessage()')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatChrome(45.0)}} [1]</td>
+   <td>{{CompatVersionUnknown}}<br>
+    {{ CompatGeckoDesktop("44.0") }}</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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}<br>
+    {{ CompatGeckoMobile("44.0") }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(45.0)}} [1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<ul>
+ <li>[1] Derrière un flag de Chrome 40 à 44.</li>
+</ul>
diff --git a/files/fr/web/api/client/url/index.html b/files/fr/web/api/client/url/index.html
new file mode 100644
index 0000000000..f96661289f
--- /dev/null
+++ b/files/fr/web/api/client/url/index.html
@@ -0,0 +1,118 @@
+---
+title: Client.url
+slug: Web/API/Client/url
+tags:
+  - API
+  - Client
+  - Experimental
+  - Property
+  - Reference
+  - ServiceWorkers
+  - URL
+translation_of: Web/API/Client/url
+---
+<div>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</div>
+
+<div>La propriété <code><strong>url</strong></code> (lecture seule) de l'interface {{domxref("Client")}} retourne l'url du service worker client courant.</div>
+
+<div> </div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var clientUrl = Client.url;</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Valeur de type {{domxref("USVString")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">self.addEventListener('notificationclick', function(event) {
+  console.log('Au click de notification : ', event.notification.tag);
+  event.notification.close();
+
+  // Vérification pour savoir si l'évenement est ouvert et
+  // se focalise dessus si c'est le cas
+  event.waitUntil(clients.matchAll({
+    type: "window"
+  }).then(function(clientList) {
+    for (var i = 0; i &lt; clientList.length; i++) {
+      var client = clientList[i];
+      if (client.url == '/' &amp;&amp; 'focus' in client)
+        return client.focus();
+    }
+    if (clients.openWindow)
+      return clients.openWindow('/');
+  }));
+});</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('Service Workers', '#client-url', 'url')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Défintion initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatChrome(41.0)}}</td>
+   <td>{{ CompatGeckoDesktop("44.0") }}</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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("44.0") }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(41.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fr/web/api/clients/claim/index.html b/files/fr/web/api/clients/claim/index.html
new file mode 100644
index 0000000000..4901f018b7
--- /dev/null
+++ b/files/fr/web/api/clients/claim/index.html
@@ -0,0 +1,125 @@
+---
+title: Clients.claim()
+slug: Web/API/Clients/claim
+tags:
+  - API
+  - Clients
+  - Méthode
+  - Reference
+  - Service Workers
+  - claim
+translation_of: Web/API/Clients/claim
+---
+<p>{{SeeCompatTable}}{{APIRef("Service Worker Clients")}}</p>
+
+<p>La méthode <code><strong>claim()</strong></code> de l'interface {{domxref("Clients")}} permet à un service worker actif de se définir comme service worker actif de la page client quand le worker et la page sont dans le même scope. Ceci déclenche un évènement {{domxref("ServiceWorkerContainer.oncontrollerchange","oncontrollerchange")}} dans toutes les pages dans la portée du service worker.</p>
+
+<p>Cette méthode peut être utilisée avec {{domxref("ServiceWorkerGlobalScope.skipWaiting()")}} pour s'assurer que la mise à jour du service worker sous jacent prend effet immédiatement pour et le client courant et tous les autres clients actifs.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">ServiceWorkerClients.claim().then(function() {
+  // Faire quelque chose
+});
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>None.</p>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" title="The Promise object is used for deferred and asynchronous computations. A Promise is in one of these states:">Promise</a>.</code></p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'exemple suivant utilise <code>claim()</code> dans le gestionnaire d'évènement <code>onActivate</code> d'un service worker. Donc la page client chargée dans la même portée n'a pas besoin d'être rechargée avant de pouvoir utiliser le service worker.</p>
+
+<pre class="brush: js">self.addEventListener('install', function(event) {
+  event.waitUntil(self.skipWaiting());
+});
+self.addEventListener('activate', function(event) {
+  event.waitUntil(self.clients.claim());
+});</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('Service Workers', '#clients', 'Clients')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale. Toujours en cours de développement (voir <a href="https://github.com/slightlyoff/ServiceWorker/issues/414">ticket 414</a> et <a href="https://github.com/slightlyoff/ServiceWorker/issues/423">ticket 423</a>).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_de_navigateurs">Compatibilité de navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatChrome(42.0)}}</td>
+   <td>{{ CompatGeckoDesktop("44.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>24</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoMobile("44.0") }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="À_voir_aussi">À voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Utiliser les Service Workers</a></li>
+ <li><a href="https://github.com/mdn/sw-test">Example simple de service workers</a></li>
+ <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Est-ce que les ServiceWorker sont prêt?</a></li>
+ <li>{{jsxref("Promise")}}</li>
+ <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Utilisation optimisée des web workers</a></li>
+ <li>{{domxref("ServiceWorkerGlobalScope.skipWaiting()")}}</li>
+</ul>
diff --git a/files/fr/web/api/clients/get/index.html b/files/fr/web/api/clients/get/index.html
new file mode 100644
index 0000000000..1b52f54c9c
--- /dev/null
+++ b/files/fr/web/api/clients/get/index.html
@@ -0,0 +1,115 @@
+---
+title: Clients.get()
+slug: Web/API/Clients/get
+tags:
+  - API
+  - Clients
+  - Méthode
+  - Reference
+  - Service Workers
+  - get
+translation_of: Web/API/Clients/get
+---
+<div>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</div>
+
+<div>La méthode <code><strong>get()</strong></code> de l'interface {{domxref("Clients")}} récupère un service worker client correspondant à un id donné et le retourne dans une {{jsxref("Promise")}}.</div>
+
+<div> </div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">self.clients.get(id).then(function(client) {
+  // Faire quelque chose avec le client
+});</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>id</code></dt>
+ <dd>Une {{domxref("DOMString")}} représentant l'id du client que vous souhaitez récuperer.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<dl>
+ <dd>Une <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" title="The Promise object is used for deferred and asynchronous computations. A Promise is in one of the three states:">Promise</a></code> qui se résoud avec un objet {{domxref("Client")}}.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">self.clients.get(options).then(function(client) {
+  self.clients.openWindow(client.url);
+});</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('Service Workers', '#clients-get-method', 'get()')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("45.0") }}</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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("45.0") }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fr/web/api/clients/index.html b/files/fr/web/api/clients/index.html
new file mode 100644
index 0000000000..1e53aade96
--- /dev/null
+++ b/files/fr/web/api/clients/index.html
@@ -0,0 +1,120 @@
+---
+title: Clients
+slug: Web/API/Clients
+tags:
+  - API
+  - Clients
+  - Experimental
+  - Interface
+  - Reference
+  - ServiceWorker
+translation_of: Web/API/Clients
+---
+<p>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</p>
+
+<p>L'interface <code>Clients</code> de l'<a href="/en-US/docs/Web/API/ServiceWorker_API">API de Service Workers</a> repésente un conteneur de liste d'objets {{domxref("Client")}}.</p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("Clients.get()")}}</dt>
+ <dd>Récupère un service worker client correspondant à un id et le retourne dans une {{jsxref("Promise")}}.</dd>
+ <dt>{{domxref("Clients.matchAll()")}}</dt>
+ <dd>Récupèere une liste de service worker clients et les retourne dans une {{jsxref("Promise")}}. On inclut un paramètre <code>option</code> pour retourner tous les services worker clients dont l'origine est la même que le service worker d'origine. Si <code>option</code> n'est pas inclut, la méthode retourne seulement les service worker clients controllés par le service worker.</dd>
+ <dt>{{domxref("Clients.openWindow()")}}</dt>
+ <dd>Ouvre un service worker {{domxref("Client")}} dans une nouvelle fenêtre de navigation.</dd>
+ <dt>{{domxref("Clients.claim()")}}</dt>
+ <dd>Permet à un service worker actif de se définir comme étant le worker actif de la page quand le worker et la page sont dans la même portée.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">clients.matchAll(options).then(function(clients) {
+  for(i = 0 ; i &lt; clients.length ; i++) {
+    if(clients[i] === 'index.html') {
+      clients.openWindow(clients[i]);
+      // ou faire quelque chose qui inclut le client concerné
+    }
+  }
+});</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('Service Workers', '#clients', 'Clients')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{ CompatGeckoDesktop("44.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoMobile("44.0") }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="À_voir_aussi">À voir aussi :</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Utiliser les Service Workers</a></li>
+ <li><a href="https://github.com/mdn/sw-test">Example simple de service workers</a></li>
+ <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Est-ce que les ServiceWorker sont prêt?</a></li>
+ <li>{{jsxref("Promise")}}</li>
+ <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Utilisation optimisée des web workers</a></li>
+</ul>
diff --git a/files/fr/web/api/clients/matchall/index.html b/files/fr/web/api/clients/matchall/index.html
new file mode 100644
index 0000000000..6b17e793b9
--- /dev/null
+++ b/files/fr/web/api/clients/matchall/index.html
@@ -0,0 +1,130 @@
+---
+title: Clients.matchAll()
+slug: Web/API/Clients/matchAll
+tags:
+  - API
+  - Client
+  - Expérimental(2)
+  - Méthode
+  - Référence(2)
+  - Service Workers
+translation_of: Web/API/Clients/matchAll
+---
+<div>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</div>
+
+<div>La méthode <strong><code>matchAll()</code></strong> de l'interface {{domxref("Clients")}} retourne une <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" title="The Promise object is used for deferred and asynchronous computations. A Promise is in one of the three states:">Promesse</a></code> pour une liste de service worker clients. Inclure le paramètre <code>options</code> permet de retourner tous les services worker clients dont l'origine est la même que l'origine du service worker associé. Si <code>options</code> n'est pas inclus, la méthode retourne que le service worker client controllé par le service worker.</div>
+
+<div> </div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">ServiceWorkerClients.matchAll(options).then(function(clients) {
+  // faire quelque chose avec la list de clients
+});</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>options</code></dt>
+ <dd>L'objet <code>option</code> vous permet de définir les options pour l'opération. Les options disponibles sont :
+ <ul>
+  <li><code>includeUncontrolled</code>: Un {{domxref("Boolean")}} — défini à <code>true</code>, l'opération retournera tous les services worker clients qui sont de la même origine que le service worker courant. Sinon, elle ne retournera que le service worker client controllé par le service worker courant. La valeur par défaut est <code>false</code>.</li>
+  <li><code>type</code>: Défini le type de client que vous voulez observer. Les types disponibles sont <code>window</code>, <code>worker</code>, <code>sharedworker</code>, et <code>all</code>. La valeur par défaut est <code>all</code>.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<dl>
+ <dd>Une  <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" title="The Promise object is used for deferred and asynchronous computations. A Promise is in one of the three states:">Promesse</a></code> qui se résout avec un tableau d'objets {{domxref("Client")}}.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">clients.matchAll(options).then(function(clientList) {
+  for(var i = 0 ; i &lt; clients.length ; i++) {
+    if(clientList[i].url === 'index.html') {
+      clients.openWindow(clientList[i]);
+      // ou faire quelque chose avec le client
+    }
+  }
+});</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('Service Workers', '#clients', 'Clients')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatChrome(40.0)}}<sup>[1]</sup></td>
+   <td>{{ CompatGeckoDesktop("44.0") }}<sup>[2]</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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(40.0)}}<sup>[1]</sup></td>
+   <td>{{ CompatGeckoMobile("44.0") }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(40.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<ul>
+ <li><strong>[1]:</strong> L'option <code>includeUncontrolled</code> option n'est pas supportée avant Chrome {{CompatChrome(43.0)}}.</li>
+ <li><strong>[1]:</strong> L'option <code>includeUncontrolled</code> option n'est pas supportée avant Firefox {{CompatGeckoDesktop("45.0")}}.</li>
+</ul>
diff --git a/files/fr/web/api/clients/openwindow/index.html b/files/fr/web/api/clients/openwindow/index.html
new file mode 100644
index 0000000000..906953237a
--- /dev/null
+++ b/files/fr/web/api/clients/openwindow/index.html
@@ -0,0 +1,131 @@
+---
+title: Clients.openWindow()
+slug: Web/API/Clients/openWindow
+translation_of: Web/API/Clients/openWindow
+---
+<p>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</p>
+
+<p>La méthode <strong><code>openWindow()</code></strong> de l'interface {{domxref("Clients")}} crée un nouveau niveau de contexte de navigation et charge une URL donnée. Si le script d'origine n'a pas la permission d'ouvrir une popup,   <strong><code>openWindow()</code></strong> lèvera une InvalidAccessError.</p>
+
+<p>Dans Firefox, une méthode est authorisée d'ouvrir une popup seulement lorsqu'elle est appelée à la suite d'un click sur une notification.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">ServiceWorkerClients.openWindow(url).then(function(WindowClient) {
+  // Faire quelque chose avec le WindowClient
+});</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>url</code></dt>
+ <dd>Une {{domxref("USVString")}} représentant l'URL que le client veut ouvrir dans une nouvelle fenêtre. Généralement, cette valeur doit être une URL de la même  origine que le script d'origine.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<dl>
+ <dd>Une {{jsxref("Promise")}} qui résoud un objet {{domxref("WindowClient")}} si l'URL est de la même origine que le service worker, et {{Glossary("null", "null value")}} sinon.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">// Quand l'utilisateur click sur une notification, focus sur la fenêtre si elle existe,
+// ou ouvre en une autre.
+onotificationclick = function(event) {
+  var found = false;
+  clients.matchAll().then(function(clients) {
+    for (i = 0; i &lt; clients.length; i++) {
+      if (clients[i].url === event.data.url) {
+        // La fenêtre existe, focus dessus.
+        found = true;
+        clients[i].focus();
+        break;
+      }
+    }
+    if (!found) {
+      // Crée une nouvelle fenêtre
+      clients.openWindow(event.data.url).then(function(windowClient) {
+        // Faire quelque chose avec le WindowClient
+      });
+    }
+  });
+};
+</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('Service Workers', '#clients', 'Clients')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatChrome(42.0)}} [1]</td>
+   <td>{{ CompatGeckoDesktop("45.0") }}</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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("45.0") }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(40.0)}} [1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<ul>
+ <li>[1] Avec Chrome 43 et suivant, vous pouvez ouvrir n'importe quelle URL. In Chrome 42 you could only open URLs on the same origin.</li>
+</ul>
diff --git a/files/fr/web/api/clipboard/index.html b/files/fr/web/api/clipboard/index.html
new file mode 100644
index 0000000000..21299dbae3
--- /dev/null
+++ b/files/fr/web/api/clipboard/index.html
@@ -0,0 +1,83 @@
+---
+title: Clipboard
+slug: Web/API/Clipboard
+tags:
+  - API
+  - Clip
+  - Clipboard
+  - Clipboard API
+  - Editing
+  - Interface
+  - Pasteboard
+  - Presse-papiers
+  - Reference
+translation_of: Web/API/Clipboard
+---
+<p>{{APIRef("Clipboard API")}}</p>
+
+<div class="blockIndicator note">
+<p>Le <strong>presse-papiers</strong> est un tampon de données utilisé pour le stockage ou le transfert à court terme de données, éventuellement entre documents ou applications.<br>
+ Il est généralement mis en œuvre sous la forme d’une {{interwiki("wikipedia", "Mémoire_tampon", "mémoire tampon")}} temporaire, parfois appelée « tampon de collage », qui peut être accédé par la plupart ou tous les programmes de l’environnement via des {{interwiki("wikipedia", "Interface_de_programmation", "interfaces de programmation")}} définies.</p>
+
+<p>Une application typique accède aux fonctionnalités du presse-papiers en associant des {{interwiki("wikipedia", "Entr%C3%A9es-sorties", "entrées utilisateur")}} telles que des {{interwiki("wikipedia", "Raccourci_clavier", "raccourcis clavier")}}, des éléments de {{interwiki("wikipedia", "Menu_(informatique)", "menus")}}, etc. à ces interfaces.</p>
+</div>
+
+<p><span class="seoSummary">L’interface <strong><code>Clipboard</code></strong> implémente l’<a href="/en-US/docs/Web/API/Clipboard_API">API clipboard</a>, qui fournit — si l’utilisateur ou l’utilisatrice accorde sa permission — un accès en lecture et en écriture au contenu du presse-papiers du système.</span> L’API clipboard peut être utilisée pour implémenter les fonctionnalités couper, copier et coller dans une application web.</p>
+
+<p>Le presse-papiers du système est exposé via la propriété globale {{domxref("Navigator.clipboard")}}.</p>
+
+<p>Les appels aux méthodes de l’objet <code>Clipboard</code> échoueront si l’utilisateur ou l’utilisatrice n’a pas accordé les permissions requises en utilisant l’<a href="/docs/Web/API/Permissions_API">API permissions</a>, et la permission <code>"clipboard-read"</code> ou <code>"clipboard-write"</code> selon le besoin.</p>
+
+<div class="note">
+<p><strong>Note :</strong> En réalité, actuellement, les prérequis des navigateurs pour accéder au presse-papiers varient significativement. Veuillez consulter la section {{anch("Clipboard availability")}} pour plus de détails.</p>
+</div>
+
+<p>Toutes les méthodes de l’API clipboard fonctionnent de manière asynchrone ; elles renvoient une {{jsxref("Promise")}} qui est résolue une fois que l’accès au presse-papiers a réussi. La promesse est rejetée si l’accès au presse-papiers est refusé.</p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em><code>Clipboard</code> est basé sur l’interface {{domxref("EventTarget")}}, et inclut les méthodes de celle-ci.</em></p>
+
+<dl>
+ <dt>{{domxref("Clipboard.read()","read()")}}</dt>
+ <dd>Demande des données arbitraires (telles que des images) depuis le presse-papiers, et renvoie une {{jsxref("Promise")}}. Quand les données ont été obtenues, la promesse est résolue avec un objet {{domxref("DataTransfer")}} qui fournit les données.</dd>
+ <dt>{{domxref("Clipboard.readText()","readText()")}}</dt>
+ <dd>Demande du texte depuis le presse-papiers du système ; renvoie une <code>Promise</code> qui est résolue avec une {{domxref("DOMString")}} contenant le texte du presse-papiers une fois disponible.</dd>
+ <dt>{{domxref("Clipboard.write()","write()")}}</dt>
+ <dd>Écrit des données arbitraires dans le presse-papiers du système. Cette opération asynchrone signale quand elle a terminé en résolvant la <code>Promise</code> renvoyée.</dd>
+ <dt>{{domxref("Clipboard.writeText()","writeText()")}}</dt>
+ <dd>Écrit du texte dans le presse-papiers du système, renvoyant une <code>Promise</code> qui est résolue une fois que le texte est entièrement copié dans le presse-papiers.</dd>
+</dl>
+
+<h2 id="Disponibilité_du_presse-papiers">Disponibilité du presse-papiers</h2>
+
+<p>L’API clipboard asynchrone est une addition relativement récente, et son processus de mise en œuvre dans les navigateurs n’est pas encore terminé. En raison de questions de sécurité et de complexités techniques, l’intégration de cette API se fait progressivement dans la plupart des navigateurs.</p>
+
+<p>Par exemple, Firefox ne supporte pas encore les permissions <code>"clipboard-read"</code> et <code>"clipboard-write"</code>, et l’accès aux méthodes pour lire et modifier le contenu du presse-papiers sont restreintes d’autres façons.</p>
+
+<p>Pour les WebExtensions, vous pouvez demander les permissions <code>"clipboardRead"</code> et <code>"clipboardWrite"</code> afin de pouvoir utiliser <code>clipboard.readText()</code> et <code>clipboard.writeText()</code>. Les {{Glossary("Content Script", "scripts de contenu")}} appliqués à des sites HTTP n’ont pas accès à l’objet <code>Clipboard</code>. Voir <a class="external" href="https://blog.mozilla.org/addons/2018/08/31/extensions-in-firefox-63/" lang="en-US">extensions in Firefox 63</a>.</p>
+
+<p>De plus, {{domxref("Clipboard.read", "read()")}} et {{domxref("Clipboard.write", "write()")}} sont désactivées par défaut et requièrent de changer une préférence pour les activer. Consultez les tables de compatibilité de chaque méthode avant de les utiliser.</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('Clipboard API','#clipboard-interface','Clipboard')}}</td>
+   <td>{{Spec2('Clipboard API')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">La table de compatibilité sur cette page est générée à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request.</em></div>
+
+<p>{{Compat("api.Clipboard")}}</p>
diff --git a/files/fr/web/api/clipboard/write/index.html b/files/fr/web/api/clipboard/write/index.html
new file mode 100644
index 0000000000..c7b8435565
--- /dev/null
+++ b/files/fr/web/api/clipboard/write/index.html
@@ -0,0 +1,70 @@
+---
+title: Clipboard.write()
+slug: Web/API/Clipboard/write
+translation_of: Web/API/Clipboard/write
+---
+<div>{{APIRef("Clipboard API")}}</div>
+
+<p><span class="seoSummary">La methode <strong><code>write()</code></strong> de {{domxref("Clipboard")}} écrie des données arbitraire, comme des images, vers le presse-papier.</span> Elle peut être utilisé pour implémenter une fonctionalité de copier coller.</p>
+
+<p>Avant de pouvoir écrire dans le presse-papier, vous devez utiliser <a href="/en-US/docs/Web/API/Permissions_API">Permissions API</a> pour avoir l'autorisation <code>"clipboard-write"</code>.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Browser support for the asynchronous clipboard APIs is still in the process of being implemented. Be sure to check the {{anch("Browser compatibility", "compatibility table")}} as well as {{SectionOnPage("/en-US/docs/Web/API/Clipboard", "Clipboard availability")}} for more information.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <em>promise</em> = navigator.clipboard.write(<em>dataTransfer</em>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>dataTransfer</code></dt>
+ <dd>Un objet {{domxref("DataTransfer")}} contenant les données à écrire dans le presse-papier.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>Une {{jsxref("Promise")}} qui sera résolut quand les données seront écrite dans le presse papier. Cette promesse est rejetée si l'accés au presse-papier échoue.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Cette fonction d'exemple remplace l'actuel contenut du presse-papier par le texte spécifié en paramètre.</p>
+
+<pre class="brush: js">function setClipboard(text) {
+  let data = new DataTransfer();
+
+  data.items.add(text, "text/plain");
+  navigator.clipboard.write(data).then(function() {
+    /* success */
+  }, function() {
+    /* failure */
+  });
+}
+</pre>
+
+<p>Le code commence par la creation d'un nouveau objet {{domxref("DataTransfer")}} dans lequel le texte est placé pour être envoyé au presse-papier. {{domxref("DataTransferItemList.add()")}} est appelé pour ajouté le texte à<code>DataTransfer</code>, ensuite <code>write()</code> est appelé, en spécifiant une function d'accomplissement et une fonction d'erreur.</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('Clipboard API','#h-clipboard-write-data','write()')}}</td>
+   <td>{{Spec2('Clipboard API')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Clipboard.write")}}</p>
diff --git a/files/fr/web/api/clipboard/writetext/index.html b/files/fr/web/api/clipboard/writetext/index.html
new file mode 100644
index 0000000000..1237db947b
--- /dev/null
+++ b/files/fr/web/api/clipboard/writetext/index.html
@@ -0,0 +1,61 @@
+---
+title: Clipboard.writeText()
+slug: Web/API/Clipboard/writeText
+translation_of: Web/API/Clipboard/writeText
+---
+<div>{{APIRef("Clipboard API")}}</div>
+
+<p>La méthode <strong><code>writeText()</code></strong> de l’interface {{domxref("Clipboard")}} écrit le texte spécifié dans le presse-papiers du système.</p>
+
+<div class="note">
+<p><strong>Note :</strong> La spécification requiert que l’<a href="/en-US/docs/Web/API/Permissions_API">API Permissions</a> soit utilisée pour obtenir la permission <code>"clipboardWrite"</code> avant d’écrire dans le presse-papiers. Cependant, les prérequis exacts varient de navigateur en navigateur, car c’est une API récente. Consultez la {{anch("Browser compatibility", "table de compatibilité")}} et {{SectionOnPage("/docs/Web/API/Clipboard", "Clipboard availability")}} pour plus de détails.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>promesse</em> = navigator.clipboard.writeText(<em>nouveauTexte</em>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>nouveauTexte</code></dt>
+ <dd>La {{domxref("DOMString")}} devant être écrite dans le presse-papiers.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une {{jsxref("Promise")}} qui sera résolue une fois que le contenu du presse-papiers aura été mis à jour. La promesse est rejetée si le code appelant n’a pas la permission d’écrire dans le presse-papiers.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Cet exemple définit le contenu du presse-papiers comme la chaîne "&lt;presse-papiers vide&gt;".</p>
+
+<pre class="brush: js">navigator.clipboard.writeText("&lt;presse-papiers vide&gt;").then(function() {
+  /* presse-papiers modifié avec succès */
+}, function() {
+  /* échec de l’écriture dans le presse-papiers */
+});
+</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('Clipboard API','#h-clipboard-writetext-data','writeText()')}}</td>
+   <td>{{Spec2('Clipboard API')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">La page de compatibilité sur cette page est générée à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request.</em></div>
+
+<p>{{Compat("api.Clipboard.writeText")}}</p>
diff --git a/files/fr/web/api/closeevent/index.html b/files/fr/web/api/closeevent/index.html
new file mode 100644
index 0000000000..40c525e52b
--- /dev/null
+++ b/files/fr/web/api/closeevent/index.html
@@ -0,0 +1,230 @@
+---
+title: CloseEvent
+slug: Web/API/CloseEvent
+tags:
+  - API
+  - Interface
+  - Reference
+  - Web
+  - WebSocket
+translation_of: Web/API/CloseEvent
+---
+<p>{{APIRef("Websockets API")}}</p>
+
+<p>Un événement CloseEvent est envoyé au client utilisant une <a href="/en-US/docs/Glossary/WebSockets">WebSocket </a>lorsque la connexion est fermée. Cet événement est envoyé au listener indiqué par l'attribut <code>onclose </code>de la WebSocket.</p>
+
+<h2 id="Attributes" name="Attributes">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("CloseEvent.CloseEvent", "CloseEvent()")}}</dt>
+ <dd>Construit un nouvel événement <code>CloseEvent</code>.</dd>
+</dl>
+
+<h2 id="Attributes" name="Attributes">Propriétés</h2>
+
+<p><em>Cette interface hérite également des propriétés de sa mère, {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("CloseEvent.code")}} {{readOnlyInline}}</dt>
+ <dd>Retourne un <code>unsigned short</code> contenant le code de fermeture envoyé par le serveur. Les valeurs possibles sont données ci-dessous.
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td class="header">Status code</td>
+    <td class="header">Nom</td>
+    <td class="header">Description</td>
+   </tr>
+   <tr>
+    <td><code>0</code>–<code>999</code></td>
+    <td> </td>
+    <td><strong>Reservé et inutilisé.</strong></td>
+   </tr>
+   <tr>
+    <td><code>1000</code></td>
+    <td><code>CLOSE_NORMAL</code></td>
+    <td>Fermeture normale ; la connexion s'est terminée normalement.</td>
+   </tr>
+   <tr>
+    <td><code>1001</code></td>
+    <td><code>CLOSE_GOING_AWAY</code></td>
+    <td>
+     <p>Reçu lorsque une erreur est apparue sur le serveur ou le navigateur quitte la page ayant ouvert la connexion.</p>
+    </td>
+   </tr>
+   <tr>
+    <td><code>1002</code></td>
+    <td><code>CLOSE_PROTOCOL_ERROR</code></td>
+    <td>L'autre partie de la connexion terminte la connexion à cause d'une erreur de protocole.</td>
+   </tr>
+   <tr>
+    <td><code>1003</code></td>
+    <td><code>CLOSE_UNSUPPORTED</code></td>
+    <td>La connexion est terminée car le serveur à reçu des données d'un type qu'il ne peut pas accepter (par exemple des données binaire plutôt que du texte).</td>
+   </tr>
+   <tr>
+    <td><code>1004</code></td>
+    <td> </td>
+    <td><strong>Réservé.</strong> Une utilisation pourrait être définie dans le futur.</td>
+   </tr>
+   <tr>
+    <td><code>1005</code></td>
+    <td><code>CLOSE_NO_STATUS</code></td>
+    <td><strong>Réservé.</strong> Indique qu'aucun code n'est donné bien qu'un code était attendu.</td>
+   </tr>
+   <tr>
+    <td><code>1006</code></td>
+    <td><code>CLOSE_ABNORMAL</code></td>
+    <td><strong>Réservé.</strong> Utilisé pour indiquer que la connexion a été terminée anormalement (sans paquet indiquant la fermeture).</td>
+   </tr>
+   <tr>
+    <td><code>1007</code></td>
+    <td> </td>
+    <td>Le serveur termine la connexion car un message contenant des données incohérentes a été reçu (e.g., des données qui ne sont pas au format UTF-8 dans un message texte).</td>
+   </tr>
+   <tr>
+    <td><code>1008</code></td>
+    <td> </td>
+    <td>Le serveur termine la connexion car un message ne respectant pas la politique du serveur est reçu. C'est un code d'état générique qui est utilisé lorsque les codes 1003 et 1009 ne correspondent pas à la situation.</td>
+   </tr>
+   <tr>
+    <td><code>1009</code></td>
+    <td><code>CLOSE_TOO_LARGE</code></td>
+    <td>Le serveur termine la connexion car les données reçues sont trop grosses.</td>
+   </tr>
+   <tr>
+    <td><code>1010</code></td>
+    <td> </td>
+    <td>Le client termine la connexion car il souhaitait négocier une ou plusieurs extensions mais le serveur ne l'a pas fait.</td>
+   </tr>
+   <tr>
+    <td><code>1011</code></td>
+    <td> </td>
+    <td>Le serveur termine la connexion car il a rencontré un problème qui l'empêche de traiter la requête.</td>
+   </tr>
+   <tr>
+    <td>–<code>1014</code></td>
+    <td> </td>
+    <td><strong>Réservé pour une utilisation future par le standard WebSocket.</strong></td>
+   </tr>
+   <tr>
+    <td><code>1015</code></td>
+    <td> </td>
+    <td><strong>Réservé.</strong> Indique que la connexion a été fermée à cause d'une erreur durant le handshake TLS (e.g., le certificat du serveur ne peut pas être vérifié).</td>
+   </tr>
+   <tr>
+    <td><code>1016</code>–<code>1999</code></td>
+    <td> </td>
+    <td><strong>Réservé pour une utilisation future par le standard WebSocket.</strong></td>
+   </tr>
+   <tr>
+    <td><code>2000</code>–<code>2999</code></td>
+    <td> </td>
+    <td><strong>Réservé pour une utilisation future par le standard WebSocket.</strong></td>
+   </tr>
+   <tr>
+    <td><code>3000</code>–<code>3999</code></td>
+    <td> </td>
+    <td>Disponible pour être utilisé par des bibliothèques ou des frameworks. Ces codes <strong>ne doivent pas</strong> être utilisés par des applications.</td>
+   </tr>
+   <tr>
+    <td><code>4000</code>–<code>4999</code></td>
+    <td> </td>
+    <td>Disponible pour être utilisés par des applications.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt>{{domxref("CloseEvent.reason")}} {{readOnlyInline}}</dt>
+ <dd>Retourne un {{ domxref("DOMString") }} qui indique la raison pour laquelle le serveur a fermé la connexion. Ce message est spécifique au serveur et au sous-protocole utilisé.</dd>
+ <dt>{{domxref("CloseEvent.wasClean")}} {{readOnlyInline}}</dt>
+ <dd>Retourne un {{jsxref("Boolean")}} qui indique si la connexion a été correctement fermée ou non.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Cette interface hérite également des propriétés de sa mère, {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("CloseEvent.initCloseEvent()")}} {{Non-standard_inline}} {{Obsolete_inline}}</dt>
+ <dd>Initialise la valeur d'un <code>CloseEvent</code>. Si l'événement a déjà été envoyé, cette méthode ne fait rien.</dd>
+</dl>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</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>Support de base</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("8.0") }} [1][2]</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>initCloseEvent</code><code>()</code> {{Non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("8.0") }}<br>
+    Removed in {{CompatGeckoDesktop("41") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("8.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>initCloseEvent</code><code>()</code> {{Non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("8.0") }}<br>
+    Removed in {{CompatGeckoMobile("41") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Avant Gecko 8.0 {{ geckoRelease("8.0") }}, Gecko envoyait l'événement {{event("close")}} des WebSocket au listener en tant que simple événement. Le support de l'événement <code>CloseEvent</code> a été implémenté dans Gecko 8.0.</p>
+
+<p>[2] Avant Gecko 12.0 {{ geckoRelease("12.0") }}, Gecko envoyait le code de fermeture <code>CLOSE_NORMAL</code> quand la connexion était fermée à cause d'une erreur inconnue, ou si elle était fermée à cause d'une erreur que la spécification ne couvre pas. Maintenant, <code>CLOSE_GOING_AWAY</code> est envoyé à la place.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en/WebSockets/WebSockets_reference/WebSocket" title="en/WebSockets/WebSockets reference/WebSocket"><code>WebSocket</code></a></li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/web/api/comment/comment/index.html b/files/fr/web/api/comment/comment/index.html
new file mode 100644
index 0000000000..3813e32b8e
--- /dev/null
+++ b/files/fr/web/api/comment/comment/index.html
@@ -0,0 +1,53 @@
+---
+title: Comment()
+slug: Web/API/Comment/Comment
+tags:
+  - API
+  - Commentaires
+  - DOM
+translation_of: Web/API/Comment/Comment
+---
+<p>{{ApiRef("DOM")}}{{seeCompatTable}}</p>
+
+<p>Le constructeur <code><strong>Comment()</strong></code> renvoie un objet {{domxref("Comment")}} <em>(Commentaire)</em> nouvellement créé avec le {{domxref ("DOMString")}} donné en paramètre comme contenu textuel.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>comment</em>1 = new Comment(); // Create an empty comment
+<code><em>comment2</em></code> = new Comment("This is a comment");
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js  language-js"><code class="language-js">var comment <span class="operator token">=</span> new Comment<span class="function token"><span class="punctuation token">("Test"</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Specification" name="Specification">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('DOM WHATWG', '#comment', 'Comment.Comment()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Comment.Comment")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/web/api/comment/index.html b/files/fr/web/api/comment/index.html
new file mode 100644
index 0000000000..cc768f6e79
--- /dev/null
+++ b/files/fr/web/api/comment/index.html
@@ -0,0 +1,76 @@
+---
+title: Comment
+slug: Web/API/Comment
+tags:
+  - API
+  - DOM
+translation_of: Web/API/Comment
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p>L'interface <code><strong>Comment</strong></code> représente des annotations textuelles au sein du balisage; même si elles ne sont généralement pas montrées, elles sont disponibles à la lecture dans le code source. Les commentaires sont représentés en HTML et XML avec du contenu entre cette balise '<code>&lt;!--</code>' et celle ci '<code>--&gt;</code>'. Pour XML, la séquence de caractère suivante '<code>--</code>' ne peut être utilisée dans un commentaire.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Cette interface ne possède pas de propriétés spécifiques, mais en hérite de ses parents, {{domxref("CharacterData")}} et indirectement de {{domxref("Node")}}.</em></p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{ domxref("Comment.Comment()", "Comment()") }} {{experimental_inline}}</dt>
+ <dd>Retourne un objet <code>Comment</code> avec son contenu textuel en paramètre.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Cette interface ne possède pas de méthode spécifique, mais en hérite de ses parents, {{domxref("CharacterData")}} et indirectement de {{domxref("Node")}}.</em></p>
+
+<h2 id="Specification" name="Specification">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('DOM WHATWG', '#comment', 'Comment')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Ajoute le constructeur.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-1728279322', 'Comment')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Pas de changement à partir de {{SpecName('DOM2 Core')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-1728279322', 'Comment')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Pas de changement à partir de {{SpecName('DOM1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-1728279322', 'Comment')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p> </p>
+
+<p>{{Compat("api.Comment")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li>
+</ul>
diff --git a/files/fr/web/api/compositionevent/index.html b/files/fr/web/api/compositionevent/index.html
new file mode 100644
index 0000000000..38a29c7202
--- /dev/null
+++ b/files/fr/web/api/compositionevent/index.html
@@ -0,0 +1,79 @@
+---
+title: CompositionEvent
+slug: Web/API/CompositionEvent
+tags:
+  - API
+  - DOM
+  - Evènement
+translation_of: Web/API/CompositionEvent
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p>Le <code>CompositionEvent DOM</code> représente les évènements qui <span id="result_box" lang="fr"><span>se produisent en raison de l'utilisateur entrant indirectement le texte.</span></span></p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("CompositionEvent.CompositionEvent()", "CompositionEvent()")}}</dt>
+ <dd>Crée une nouvelle instance d'objet <code>CompositionEvent</code> .</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Cette interface hérite également des propriétés de son parent, {{domxref("UIEvent")}} et son ancêtre — {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("CompositionEvent.data")}} {{readonlyinline}}</dt>
+ <dd>Renvoie les caractères générés par la méthode d'entrée <span id="result_box" lang="fr"><span>qui a relevé l'événement ;</span> <span>cela varie en fonction du type d'événement ayant généré l'objet <code>CompositionEvent</code>.</span></span></dd>
+ <dt>{{domxref("CompositionEvent.locale")}} {{readonlyinline}} {{deprecated_inline}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Renvoie les paramètres régionaux de la méthode de saisie actuelle (par exemple, les paramètres régionaux de disposition du clavier si la composition est associée à IME).</span></span></dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Cette interface hérite également des méthodes de son parent, {{domxref("UIEvent")}} et son ancêtre — {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("CompositionEvent.initCompositionEvent()")}} {{deprecated_inline}}</dt>
+ <dd>Initialise les attributs d'un objet <code>CompositionEvent.</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">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('UI Events', '#interface-compositionevent', 'CompositionEvent')}}</td>
+   <td>{{Spec2('UI Events')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', '#idl-compositionevent', 'CompositionEvent')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+
+
+<p>{{Compat("api.CompositionEvent")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><code>compositionstart</code></li>
+ <li><code>compositionend</code></li>
+ <li><code>compositionupdate</code></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/UIEvent" title="UIEvent">UIEvent</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Event" title="Event">Event</a></li>
+</ul>
diff --git a/files/fr/web/api/console/assert/index.html b/files/fr/web/api/console/assert/index.html
new file mode 100644
index 0000000000..37fc75d36c
--- /dev/null
+++ b/files/fr/web/api/console/assert/index.html
@@ -0,0 +1,76 @@
+---
+title: Console.assert()
+slug: Web/API/Console/assert
+tags:
+  - API
+  - DOM
+  - Méthodes
+  - débogage
+translation_of: Web/API/console/assert
+---
+<p>{{APIRef("Console API")}}</p>
+
+<p>Affiche un message d'erreur dans la console si l'assertion est fausse. Si l'assertion est vraie, rien ne se produit.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<div class="note">
+<p><strong>Note:</strong> <em>La méthode <code>console.assert()</code> est implémentée différement dans les vieilles version de Node.js que dans celle disponible dans les navigateurs.</em></p>
+
+<p>Plus précisément, dans les navigateurs, appeler <code>console.assert()</code> avec une condition fausse affichera le <code>message</code> dans la console sans interrompre l'éxecution du code suivant. Dans les versions inférieure à la v10 de Node.js, cependant, une assertion fausse lèvera une exception <code>AssertionError</code>. Cette différence de comportement a été corrigée par la v10 de Node et <code>console.assert()</code> se comporte maintenant de la même façon dans Node et dans les navigateurs.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox">console.assert(<em>assertion</em>, <em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]);
+console.assert(<em>assertion</em>, <em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]);
+</pre>
+
+<h3 id="Parameters" name="Parameters">Paramètres</h3>
+
+<dl>
+ <dt><code>assertion</code></dt>
+ <dd>N'importe quelle expression booléenne. Si l'assertion est fausse, le message s'affichera dans la console.</dd>
+ <dt><code>obj1</code> ... <code>objN</code></dt>
+ <dd>Une liste d'objets javascript à afficher. La représentation textuelle de chacun de ces objets est ajoutée à la suite de la précédente dans l'ordre donné et est ensuite affichée.</dd>
+ <dt><code>msg</code></dt>
+ <dd>Une chaîne de caractères javascript contenant zéro ou plus chaîne(s) de caractères de substitution.</dd>
+ <dt><code>subst1</code> ... <code>substN</code></dt>
+ <dd>L'objet javascript avec lequel remplacer les chaînes de substitution dans <code>msg</code>. Ceci vous offre plus de contrôle sur ce qui est affiché.</dd>
+</dl>
+
+<p>Allez voir <a href="https://developer.mozilla.org/fr/docs/Web/API/console#Outputting_text_to_the_console">Afficher du texte dans la console</a> dans la documentation de {{domxref("console")}} pour plus de détails.</p>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#assert", "console.assert()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité entre les navigateurs</h2>
+
+<p>{{Compat("api.Console.assert")}}</p>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://console.spec.whatwg.org/#assert-condition-data">WHATWG Console Standard: console.assert</a></li>
+ <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+ <li><a href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li>
+ <li><a href="https://developer.chrome.com/devtools/docs/console#assertions">Chrome Developer Tools: Using the Console</a></li>
+</ul>
diff --git a/files/fr/web/api/console/clear/index.html b/files/fr/web/api/console/clear/index.html
new file mode 100644
index 0000000000..1cd6244997
--- /dev/null
+++ b/files/fr/web/api/console/clear/index.html
@@ -0,0 +1,116 @@
+---
+title: clear()
+slug: Web/API/Console/clear
+translation_of: Web/API/Console/clear
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p>Vide la console.</p>
+
+<p>Tous les messages de la console seront supprimés et remplacés par un message de confirmation ("Console was cleared").</p>
+
+<p>À noter: sur Google Chrome, <code>console.clear()</code> n'a aucun effet si l'utilisateur a coché "Preserve log upon navigation" dans les <a href="https://developer.chrome.com/devtools/docs/settings#preserve-log%20upon%20navigation">paramètres de l'inspecteur</a>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">console.clear();
+</pre>
+
+<h2 id="Paramètres">Paramètres</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Paramètres</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#clear", "console.clear()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Définition Initial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</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>Support basique</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("48.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("48.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+ <li><a href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li>
+ <li><a href="https://developer.chrome.com/devtools/docs/console#assertions">Chrome Developer Tools: Using the Console</a></li>
+</ul>
diff --git a/files/fr/web/api/console/count/index.html b/files/fr/web/api/console/count/index.html
new file mode 100644
index 0000000000..8364fc83f4
--- /dev/null
+++ b/files/fr/web/api/console/count/index.html
@@ -0,0 +1,110 @@
+---
+title: Console.count()
+slug: Web/API/Console/count
+tags:
+  - API
+  - DOM
+  - Développement
+  - Méthodes
+  - Web
+  - console
+  - débogage
+translation_of: Web/API/Console/count
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p>Affiche dans la console le nombre de fois où la fonction <code>count()</code> a été appelée. Cette fonction accepte l'argument optionnel <code>label</code>.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<p>Si un <code>label</code> est passé en paramètre, la fonction affiche le nombre de fois où la fonction <code>count()</code> a été appelée pour ce <code>label</code> spécifiquempent.</p>
+
+<p>Si aucun <code>label</code> est passé en paramètre, la fonction affiche le nombre de fois où la fonction <code>count()</code> a été appelée jusqu'à présent.</p>
+
+<p>Ci-dessous, un exemple d'utilisation :</p>
+
+<pre class="brush: js">function greet() {
+  console.count();
+  return "hi " + user;
+}
+
+var user = "bob";
+greet();
+user = "alice";
+greet();
+greet();
+console.count();</pre>
+
+<p>La console affichera les lignes suivantes :</p>
+
+<pre class="eval">"&lt;no label&gt;: 1"
+"&lt;no label&gt;: 2"
+"&lt;no label&gt;: 3"
+"&lt;no label&gt;: 1"
+</pre>
+
+<p>A noter, la dernière ligne inscrite dans la console fait référence à l'appel de la fonction <code>count()</code> de la ligne 11 qui est traité comme un événement indépendant.</p>
+
+<p>Si la variable <code>user</code> est passée à la fonction comme paramètre <code>label</code>, le code ci-dessous génèrera un nouveau compteur lorsque la variable <code>user</code> sera modifiée :</p>
+
+<pre class="brush: js">function greet() {
+  console.count(user);
+  return "hi " + user;
+}
+
+var user = "bob";
+greet();
+user = "alice";
+greet();
+greet();
+console.count("alice");</pre>
+
+<p>La console affichera les lignes suivantes :</p>
+
+<pre class="eval">"bob: 1"
+"alice: 1"
+"alice: 2"
+"alice: 3"</pre>
+
+<p>Nous obtenons maintenant deux compteurs distinct basés sur un libellé différent. L'appel de la fonction <code>count()</code> avec "alice" à la ligne 11 n'est pas considéré comme un événement indépendant car le compteur existe déjà.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">console.count([label]);
+</pre>
+
+<h2 id="Paramètres">Paramètres</h2>
+
+<dl>
+ <dt><code>label</code></dt>
+ <dd>Une chaîne de caractères.</dd>
+ <dd>Si ce paramètre est renseigné, <code>count()</code> affiche le nombre de fois que la fonction a été appelée jusqu'à présent avec ce libellé.</dd>
+ <dd>S'il est omis, <code>count()</code> affiche le nombre de fois que la fonction a été appelée sur cette ligne.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#count", "console.count()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Console.count")}}</p>
+
+<div id="compat-desktop"> </div>
+
+<div id="compat-mobile"> </div>
diff --git a/files/fr/web/api/console/countreset/index.html b/files/fr/web/api/console/countreset/index.html
new file mode 100644
index 0000000000..2a5106ebfd
--- /dev/null
+++ b/files/fr/web/api/console/countreset/index.html
@@ -0,0 +1,124 @@
+---
+title: Console.countReset()
+slug: Web/API/Console/countReset
+translation_of: Web/API/Console/countReset
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p>Remet le compteur à zero. Cette fonction prend un argument optionnel <code>label</code></p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">console.countReset(<var>[label]</var>);
+</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>label</code></dt>
+ <dd>Si specifié, <code>countReset()</code> remet à zero le compteur associé à ce label. S'il n'est pas specifié, <code>countReset()</code> remet à zéro le compteur par defaut.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>Si le paramètre label à été spécifié :</p>
+
+<pre> <span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">counter-name: 0</span></span></span></pre>
+
+<p>Si aucun label n'as été specifié</p>
+
+<pre><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">default: 0</span></span></span></pre>
+
+<h3 id="Warnings">Warnings</h3>
+
+<p>Si <code>label</code> est specifié mais n'existe pas <span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><code>countReset()</code> renvoie cet avertissement :</span></span></span></p>
+
+<pre><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><code>Counter "counter-name" doesn’t exist.</code></span></span></span></pre>
+
+<p>Si <code>label</code> n'est pas specifé et que <code>count()</code> n'as pas encore été appellé <code>countReset()</code> renvoie cette avertissement :</p>
+
+<pre><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><code>Counter "default" doesn’t exist.</code></span></span></span></pre>
+
+<h2 id="Examples">Examples</h2>
+
+<p>Par exemple avec un code comme celui ci :</p>
+
+<pre class="brush: js">var user = "";
+
+function greet() {
+  console.count();
+  return "hi " + user;
+}
+
+user = "bob";
+greet();
+user = "alice";
+greet();
+greet();
+console.count();
+console.countReset();</pre>
+
+<p>Le retour de la console ressemblera à ceci :</p>
+
+<pre class="eval">"default: 1"
+"default: 2"
+"default: 3"
+"default: 1"
+"default: 0"
+</pre>
+
+<p>Pour information l'appel à <code>console.counterReset()</code> remet à zero la valeur du compteur par défaut.</p>
+
+<p>S'il on passe la variable <code>user</code> comme argument pour <code>label</code> et que l'on effectue un premier appel de la fonction <code>count()</code>, avec la chaine "bob" puis un second appel avec la chaine "alice" :</p>
+
+<pre class="brush: js">var user = "";
+
+function greet() {
+  console.count(user);
+  return "hi " + user;
+}
+
+user = "bob";
+greet();
+user = "alice";
+greet();
+greet();
+console.countReset("bob");
+console.count("alice");</pre>
+
+<p>On obtiendra ce retour dans la console</p>
+
+<pre class="eval">"bob: 1"
+"alice: 1"
+"alice: 2"
+"bob: 0"
+"alice: 3"</pre>
+
+<p>Remettre à zero le compteur "bob" change uniquement la valeur de celui-ci. La valeur du compteur "alice" reste inchangée.</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("Console API", "#count", "console.countReset()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Console.countReset")}}</p>
diff --git a/files/fr/web/api/console/debug/index.html b/files/fr/web/api/console/debug/index.html
new file mode 100644
index 0000000000..c632444e7f
--- /dev/null
+++ b/files/fr/web/api/console/debug/index.html
@@ -0,0 +1,72 @@
+---
+title: Console.debug()
+slug: Web/API/Console/debug
+tags:
+  - API
+  - Développement
+  - Méthodes
+  - Web
+  - console
+  - débogage
+  - outils de développement
+translation_of: Web/API/Console/debug
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p><span class="seoSummary">Affiche un message dans la console web, avec le niveau de log "debug". Le message est affiché uniquement si la console est configurée pour afficher les messages de type debug.</span></p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">console.debug(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]);
+console.debug(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>obj1</code> ... <code>objN</code></dt>
+ <dd>Une liste d'objets JavaScript à afficher. La représentation, en chaîne de caractères, de chacun de ces objets est affichée dans l'ordre de la liste.</dd>
+ <dt><code>msg</code></dt>
+ <dd>Une chaîne de caractères JavaScript contenant zéro ou plusieurs subdivisions de chaîne de caractères.</dd>
+ <dt><code>subst1</code> ... <code>substN</code></dt>
+ <dd>Une liste d'objets JavaScript qui remplace les chaînes de caractéres de <code>msg</code>. Cela vous donne plus de contrôle sur le format de sortie. Voir {{SectionOnPage("fr/docs/Web/API/Console", "Utiliser les caractères de substitution")}} pour une description du fonctionnement des substitutions.</dd>
+</dl>
+
+<p>Voir <a href="/fr/docs/Web/API/console#Outputting_text_to_the_console">Afficher du texte dans la console</a> dans la documentation de {{domxref("console")}} pour plus de détails.</p>
+
+<h2 id="Spécification">Spécification</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("Console API", "#debug", "console.debug()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">La table de compatibilité sur cette page est générée à partir de données structurées. Si vous souhaitez y contribuer, veuillez faire un checkout de <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer un pull request.</div>
+
+<p>{{Compat("api.Console.debug")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+ <li><a href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li>
+ <li><a href="https://developers.google.com/chrome-developer-tools/docs/console#errors_and_warnings">Chrome Developer Tools: Using the Console</a></li>
+</ul>
diff --git a/files/fr/web/api/console/dir/index.html b/files/fr/web/api/console/dir/index.html
new file mode 100644
index 0000000000..a7582315c6
--- /dev/null
+++ b/files/fr/web/api/console/dir/index.html
@@ -0,0 +1,67 @@
+---
+title: Console.dir()
+slug: Web/API/Console/dir
+tags:
+  - API
+  - DOM
+  - Développement
+  - Méthodes
+  - Web
+  - console
+  - débogage
+translation_of: Web/API/Console/dir
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p>Affiche une liste interactive des propriétés de l'objet Javascript spécifié. La sortie est présenté comme un listing hiérarchique avec des triangles qui permettent l'affichage du contenu des objets-enfants.</p>
+
+<p>En d'autres termes, console.dir est le moyen de voir toutes les propriétés de l'objet JavaScript spécifié dans la console, par lequel le développeur peut facilement obtenir les propriétés de l'objet.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<p><img alt="console-dir.png" class="default internal" src="/@api/deki/files/6081/=console-dir.png"></p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">console.dir(<em>object</em>);
+</pre>
+
+<h2 id="Paramètres">Paramètres</h2>
+
+<dl>
+ <dt><code>object</code></dt>
+ <dd>Un objet Javascript qui contient les propriétés qui doivent être affichées.</dd>
+</dl>
+
+<h2 id="Spécification">Spécification</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("Console API", "#dir", "console.dir()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Console.dir")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li>
+ <li><a href="https://developers.google.com/chrome-developer-tools/docs/console-api#consoledirobject">Chrome Console API reference</a></li>
+</ul>
diff --git a/files/fr/web/api/console/dirxml/index.html b/files/fr/web/api/console/dirxml/index.html
new file mode 100644
index 0000000000..cad694b8a9
--- /dev/null
+++ b/files/fr/web/api/console/dirxml/index.html
@@ -0,0 +1,58 @@
+---
+title: Console.dirxml()
+slug: Web/API/Console/dirxml
+tags:
+  - API
+  - DOM
+  - Développement
+  - Méthodes
+  - console
+  - débogage
+translation_of: Web/API/Console/dirxml
+---
+<div>{{APIRef ("Console API")}}</div>
+
+<div>Affiche un arbre interactif des éléments descendants de l'élément XML / HTML spécifié. S'il n'est pas possible d'afficher en tant qu'élément, la vue Objet JavaScript est affichée à la place. La sortie est présentée sous la forme d'une liste hiérarchique des noeuds extensibles qui vous permettent de voir le contenu des nœuds enfants.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">console.dirxml(<em>object</em>);
+</pre>
+
+<h2 id="Paramètres">Paramètres</h2>
+
+<dl>
+ <dt><code>object</code></dt>
+ <dd>Un objet JavaScript dont les propriétés doivent être sorties.</dd>
+</dl>
+
+<h2 id="Spécification">Spécification</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("Console API", "#dirxml", "console.dirxml()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Console.dirxml")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+</ul>
diff --git a/files/fr/web/api/console/error/index.html b/files/fr/web/api/console/error/index.html
new file mode 100644
index 0000000000..46eef2ccd3
--- /dev/null
+++ b/files/fr/web/api/console/error/index.html
@@ -0,0 +1,74 @@
+---
+title: console.error()
+slug: Web/API/Console/error
+tags:
+  - API
+  - DOM
+  - Développement
+  - Méthodes
+  - Web
+  - console
+  - débogage
+translation_of: Web/API/Console/error
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p>Affiche un message d'erreur dans la console du navigateur.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox">console.error(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]);
+console.error(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]);
+console.exception(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]);
+console.exception(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]);
+</pre>
+
+<div class="note">
+<p><strong>Note:</strong> <code>console.exception()</code> est un alias de <code>console.error()</code>; ils sont fonctionnellement identiques.</p>
+</div>
+
+<h3 id="Parameters" name="Parameters">Paramètres</h3>
+
+<dl>
+ <dt><code>obj1</code> ... <code>objN</code></dt>
+ <dd>Une liste d'objets JavaScript à afficher. La représentation, en chaîne de caractéres, de chacun de ces objets est affichée dans l'ordre de la liste.</dd>
+ <dt><code>msg</code></dt>
+ <dd>Une chaîne de caractères JavaScript contenant zéro ou plusieurs subdivisions de chaîne de caractères.</dd>
+ <dt><code>subst1</code> ... <code>substN</code></dt>
+ <dd>Une liste d'objets JavaScript qui remplace les chaînes de caractéres de <code>msg</code>. Cela vous donne plus de contrôle sur le format de sortie.</dd>
+</dl>
+
+<p>Voir <a href="https://developer.mozilla.org/fr/docs/Web/API/console#Outputting_text_to_the_console">Afficher du texte dans la console</a> dans la documentation de  {{domxref("console")}} pour plus de détails.</p>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#error", "console.error()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+<div>{{Compat("api.Console.error")}}</div>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+ <li><a href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li>
+ <li><a href="https://developers.google.com/chrome-developer-tools/docs/console#errors_and_warnings">Chrome Developer Tools: Using the Console</a></li>
+</ul>
diff --git a/files/fr/web/api/console/group/index.html b/files/fr/web/api/console/group/index.html
new file mode 100644
index 0000000000..5b4a81302d
--- /dev/null
+++ b/files/fr/web/api/console/group/index.html
@@ -0,0 +1,86 @@
+---
+title: Console.group()
+slug: Web/API/Console/group
+tags:
+  - API
+  - DOM
+  - Développement
+  - Méthodes
+  - Web
+  - console
+  - débogage
+translation_of: Web/API/Console/group
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p>Création d'un nouveau groupe en ligne dans la <a href="/en-US/docs/Tools/Web_Console">console Web</a>. Cela indente les messages de console suivants par un niveau supplémentaire, jusqu'à ce que {{domxref("console.groupEnd()")}} soit appelé.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">console.group();
+</pre>
+
+<h2 id="Paramètres">Paramètres</h2>
+
+<dl>
+ <dt><code>label</code></dt>
+ <dd>donne une étiquette au groupe. Facultatif. (Chrome 59 testé). Ne fonctionne pas avec<code> </code> <code>console.groupEnd()</code>.</dd>
+</dl>
+
+<p>{{h3_gecko_minversion("Using groups in the console", "9.0")}}</p>
+
+<p><span id="result_box" lang="fr"><span>Vous pouvez utiliser des groupes imbriqués pour organiser votre sortie en associant visuellement les messages correspondants.</span> <span>Pour créer un nouveau bloc imbriqué, appelez <code>console.group ()</code>.</span> <span>La méthode <code>console.groupCollapsed ()</code> est similaire, mais le nouveau bloc est réduit et nécessite de cliquer sur un bouton de divulgation pour le lire.</span></span></p>
+
+<div class="note">
+<p><strong>Note :</strong> De Gecko 9 jusqu'à Gecko 51, la méthode <code>groupCollapsed()</code> n'était pas identique à <code>group()</code>. Les groupes réduits sont entièrement pris en charge depuis Gecko 52. Voir {{bug("1088360")}}.</p>
+</div>
+
+<p>Pour sortir du groupe courant, appeler <code>console.groupEnd()</code>. Par exemple, étant donné ce code :</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"This is the outer level"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">group</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"Level 2"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">group</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"Level 3"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">warn</span><span class="punctuation token">(</span><span class="string token">"More of level 3"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">groupEnd</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"Back to level 2"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">groupEnd</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"Back to the outer level"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p><span class="short_text" id="result_box" lang="fr"><span>La sortie ressemble à ceci :</span></span></p>
+
+<p><img alt="A screenshot of messages nested in the console output." src="https://developer.mozilla.org/@api/deki/files/6082/=nesting.png"></p>
+
+<p>Pour plus de détail, se reporter à l'article <a href="https://developer.mozilla.org/fr/docs/Web/API/console#Using_groups_in_the_console">Using groups in the console</a> dans la documentation sur la {{domxref("console")}}.</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">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#consolegroupobject-object-", "console.group()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Console.group")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+</ul>
diff --git a/files/fr/web/api/console/groupcollapsed/index.html b/files/fr/web/api/console/groupcollapsed/index.html
new file mode 100644
index 0000000000..11679a50e2
--- /dev/null
+++ b/files/fr/web/api/console/groupcollapsed/index.html
@@ -0,0 +1,64 @@
+---
+title: Console.groupCollapsed()
+slug: Web/API/Console/groupCollapsed
+tags:
+  - API
+  - DOM
+  - Développement
+  - Méthode
+  - Reference
+  - Web
+  - console
+  - débogage
+translation_of: Web/API/Console/groupCollapsed
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p><span id="result_box" lang="fr"><span>Crée un nouveau groupe intégré dans la</span></span> console Web. <span id="result_box" lang="fr"><span>Contrairement à {{domxref ("console.group ()")}}, le nouveau groupe est créé réduit.</span> <span>L'utilisateur devra utiliser le bouton de divulgation à côté pour le développer, en révélant les entrées créées dans le groupe.</span></span></p>
+
+<p><span lang="fr"><span>Appellez </span></span> {{domxref("console.groupEnd()")}} pour revenir au groupe parent.</p>
+
+<p>Voir <a href="https://developer.mozilla.org/fr/docs/Web/API/console#Using_groups_in_the_console">Using groups in the console</a> dans la documentation  de {{domxref("console")}}  pour plus de détails et des exemples.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">console.groupCollapsed([label]);
+</pre>
+
+<h2 id="Paramètres">Paramètres</h2>
+
+<dl>
+ <dt><code>label</code></dt>
+ <dd>Étiquette pour le groupe. Facultatif.</dd>
+</dl>
+
+<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("Console API", "#groupcollapsed", "console.groupCollapsed()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Console.groupCollapsed")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+</ul>
diff --git a/files/fr/web/api/console/groupend/index.html b/files/fr/web/api/console/groupend/index.html
new file mode 100644
index 0000000000..5bd3f19cb9
--- /dev/null
+++ b/files/fr/web/api/console/groupend/index.html
@@ -0,0 +1,55 @@
+---
+title: Console.groupEnd()
+slug: Web/API/Console/groupEnd
+tags:
+  - API
+  - DOM
+  - Développement
+  - Méthode
+  - console
+  - débogage
+translation_of: Web/API/Console/groupEnd
+---
+<p>{{APIRef("Console API")}}</p>
+
+<p>Quitte le groupe en ligne actuel dans la <a href="https://developer.mozilla.org/fr/docs/Outils/Console_Web">console Web</a>. Voir  <a href="https://developer.mozilla.org/fr/docs/Web/API/console#Using_groups_in_the_console">Using groups in the console</a>  dans la documentation {{domxref("console.group()")}} pour plus de détails et des exemples.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">console.groupEnd();
+</pre>
+
+<h2 id="Paramètres">Paramètres</h2>
+
+<p>Aucun.</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">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#groupend", "console.groupEnd()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Console.groupEnd")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+</ul>
diff --git a/files/fr/web/api/console/index.html b/files/fr/web/api/console/index.html
new file mode 100644
index 0000000000..822d90a5da
--- /dev/null
+++ b/files/fr/web/api/console/index.html
@@ -0,0 +1,275 @@
+---
+title: Console
+slug: Web/API/Console
+tags:
+  - API
+  - Interface
+  - Reference
+  - console
+  - débogage
+translation_of: Web/API/Console
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p>L'objet <strong><code>console</code></strong> donne accès à la console de débogage du navigateur (par exemple., la<a href="https://developer.mozilla.org/fr/docs/Outils/Console_Web"> Console Web</a> dans Firefox). Les spécificités de fonctionnement varient d'un navigateur à l'autre, mais il y a tout de même un ensemble de fonctionnalités qui sont fournies de base.</p>
+
+<p>La <code>console</code> est accessible de n'importe quel objet global, {{domxref("Window")}} du cadre de navigation, {{domxref("WorkerGlobalScope")}} et ses variantes spécifiques pour les workers. <span id="result_box" lang="fr"><span>Elle est exposée comme {{domxref ("Window.console")}} et peut être référencée simplement comme console.</span> <span>Par exemple :</span></span></p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"Failed to open the specified link"</span><span class="punctuation token">)</span></code></pre>
+
+<p>Cette page documente les {{anch("Methods", "méthodes")}} disponibles pour l'objet <code>console</code> et donne quelques {{anch("Usage", "exemples d'utilisation")}}.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("Console.assert()")}}</dt>
+ <dd>Affiche un message et une trace d'appels dans la console si l'assertion en argument est à <code>false</code>.</dd>
+ <dt>{{domxref("Console.clear()")}}</dt>
+ <dd>Vide la console.</dd>
+ <dt>{{domxref("Console.count()")}}</dt>
+ <dd>Affiche le nombre de fois que la ligne a été appelée avec un label donné.</dd>
+ <dt>{{domxref("Console.debug()")}}</dt>
+ <dd>Un alias de <code>log().</code></dd>
+</dl>
+
+<div class="note">
+<p><strong>Note :</strong> <span id="result_box" lang="fr"><span>À partir de Chromium 58, cette méthode n'apparaît que dans les consoles de navigateur Chromium lorsque le niveau "Verbose" est sélectionné.</span></span></p>
+</div>
+
+<dl>
+ <dt>{{domxref("Console.dir()")}} {{Non-standard_inline}}</dt>
+ <dd>Affiche une liste interactive des propriétés d'un objet JavaScript donné. Cette liste vous permet d'examiner le contenu des enfants de l'objet en ouvrant les détails (petits triangles).</dd>
+ <dt>{{domxref("Console.dirxml()")}} {{Non-standard_inline}}</dt>
+ <dd>
+ <p>Affiche si possible une représentation d'éléments XML/HTML d'un objet spécifié. Sinon, c'est une vue de l'objet JavaScript.</p>
+ </dd>
+ <dt>{{domxref("Console.error()")}}</dt>
+ <dd>Affiche un message d'erreur. Vous pouvez utiliser les <a href="https://developer.mozilla.org/fr/docs/Web/API/console#Utiliser_les_caractères_de_substitution">caractères de substitution</a> et des arguments supplémentaires avec cette méthode.</dd>
+ <dt>{{domxref("Console._exception()")}} {{Non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Un alias d'<code>error();</code></dd>
+ <dt>{{domxref("Console.group()")}}</dt>
+ <dd>Crée un nouveau <a href="https://developer.mozilla.org/fr/docs/Web/API/console#Using_groups_in_the_console">groupe</a> en ligne, correspondant à un nouveau niveau d'indentation. Contrairement à <code>group()</code>. Pour revenir au niveau précédent, appeler <code>groupEnd()</code>.</dd>
+ <dt>{{domxref("Console.groupCollapsed()")}}</dt>
+ <dd>Crée un nouveau <a href="https://developer.mozilla.org/fr/docs/Web/API/console#Using_groups_in_the_console">groupe</a> en ligne, correspondant à un nouveau niveau d'indentation. Contrairement à <code>group()</code> , <span id="result_box" lang="fr"><span>cela commence avec le groupe en ligne effondré, nécessitant l'utilisation d'un bouton de divulgation pour l'agrandir</span></span>. Pour revenir au niveau précédent, appeler <code>groupEnd()</code>.</dd>
+ <dt>{{domxref("Console.groupEnd()")}}</dt>
+ <dd>Quitte le <a href="https://developer.mozilla.org/fr/docs/Web/API/console#Using_groups_in_the_console">groupe</a> d'indentation courant.</dd>
+ <dt>{{domxref("Console.info()")}}</dt>
+ <dd>Affiche un message d'information. Vous pouvez utiliser les <a href="https://developer.mozilla.org/fr/docs/Web/API/console#Utiliser_les_caractères_de_substitution">caractères de substitution</a> et des arguments supplémentaires avec cette méthode.</dd>
+ <dt>{{domxref("Console.log()")}}</dt>
+ <dd>Permet d'afficher des messages dans la console. Vous pouvez utiliser les <a href="https://developer.mozilla.org/fr/docs/Web/API/console#Utiliser_les_caractères_de_substitution">caractères de substitution</a> et des arguments supplémentaires avec cette méthode.</dd>
+ <dt>{{domxref("Console.profile()")}} {{Non-standard_inline}}</dt>
+ <dd>démarre le profilage du navigateur (par exemple, l'<a href="https://developer.mozilla.org/fr/docs/Outils/Performance">outil performances de Firefox</a>). Vous pouvez spécifier un nom en option pour ce profil.</dd>
+ <dt>{{domxref("Console.profileEnd()")}} {{Non-standard_inline}}</dt>
+ <dd>Arrête le profilage. Vous pouvez voir le résultat de ce dernier dans l'outil « performance » du navigateur (par exemple, l'<a href="https://developer.mozilla.org/fr/docs/Outils/Performance">outil performance Firefox</a>).</dd>
+ <dt>{{domxref("Console.table()")}}</dt>
+ <dd>Affiche des données tabulaires comme un tableau.</dd>
+ <dt>{{domxref("Console.time()")}}</dt>
+ <dd>Démarre un <a href="https://developer.mozilla.org/fr/docs/Web/API/console#Timers">chronomètre</a> que l'on peut nommer en le spécifiant en tant que paramètre. Jusqu'à 10 000 chronomètres simultanés peuvent tourner sur une page.</dd>
+ <dt>{{domxref("Console.timeEnd()")}}</dt>
+ <dd>Arrête le <a href="https://developer.mozilla.org/fr/docs/Web/API/console#Timers">chronomètre</a> spécifié et affiche le temps écoulé en millisecondes depuis son démarrage.</dd>
+ <dt>{{domxref("Console.timeStamp()")}} {{Non-standard_inline}}</dt>
+ <dd>Ajoute un marqueur dans la <a href="https://developer.chrome.com/devtools/docs/timeline">Timeline</a> du navigateur ou l'outil <a href="https://developer.mozilla.org/fr/docs/Outils/Performance/Waterfall">Waterfall</a>.</dd>
+ <dt>{{domxref("Console.trace()")}}</dt>
+ <dd>Affiche une <a href="https://developer.mozilla.org/fr/docs/Web/API/console#Traces_d%27appel">trace d'appels</a>.</dd>
+ <dt>{{domxref("Console.warn()")}}</dt>
+ <dd>Affiche un message d'avertissement. Vous pouvez utiliser les <a href="https://developer.mozilla.org/fr/docs/Web/API/console#Utiliser_les_caractères_de_substitution">caractères de substitution</a> et des arguments supplémentaires avec cette méthode.</dd>
+</dl>
+
+
+<h2 id="Usage" name="Usage">Exemples d'utilisation</h2>
+
+<h3 id="Outputting_text_to_the_console" name="Outputting_text_to_the_console">Afficher du texte dans la console</h3>
+
+<p>La fonction la plus utilisée de la console est d'afficher du texte ou autres données. Il y a quatre sortes d'affichages que vous pouvez générer, en utilisant les méthodes {{domxref("console.log()")}}, {{domxref("console.info()")}}, {{domxref("console.warn()")}}, et {{domxref("console.error()")}}. Chacune de ces méthodes génére un affichage différent dans la console, et vous pouvez utiliser les fonctions de filtrage du navigateur pour voir uniquement les types de sortie qui vous intéressent.</p>
+
+<p>Il y a deux manières d'utiliser chacune de ces méthodes de sortie ; Vous pouvez passer une liste d'objets dont leur représentation sera concaténée dans une seule chaine et s'affichera dans la console, ou vous pouvez passer une chaîne de caractères contenant zéro et plus de caractères de substitution suivis d'une liste d'objets avec lesquels les remplacer.</p>
+
+<h4 id="Afficher_un_seul_objet">Afficher un seul objet</h4>
+
+<p>La manière la plus simple d'utiliser les méthodes de « log » est d'afficher un seul objet :</p>
+
+<pre class="brush: js">var someObject = { str: "Some text", id: 5 };
+console.log(someObject);
+</pre>
+
+<p>L'affichage ressemblera à ceci :</p>
+
+<pre>[09:27:13.475] ({str:"Some text", id:5})</pre>
+
+<h4 id="Afficher_plusieurs_objets">Afficher plusieurs objets</h4>
+
+<p>Vous pouvez aussi afficher plusieurs objets, en les séparant par une virgule, comme ceci :</p>
+
+<pre class="brush: js">var car = "Dodge Charger";
+var someObject = {str:"Some text", id:5};
+console.info("My first car was a", car, ". The object is: ", someObject);</pre>
+
+<p>L'affichage ressemblera à ceci :</p>
+
+<pre>[09:28:22.711] My first car was a Dodge Charger . The object is:  ({str:"Some text", id:5})
+</pre>
+
+<h4 id="Utiliser_les_caractères_de_substitution">Utiliser les caractères de substitution</h4>
+
+<p>Gecko 9.0 {{geckoRelease("9.0")}} a amené le support des caractères de substitution. Lorsque l'on passe en argument une chaîne à l'une des méthodes qui acceptent des chaînes de caractère, on peut utiliser ces caractères de substitution :</p>
+
+<table class="standard-table" style="width: auto;">
+ <tbody>
+  <tr>
+   <td class="header">caractère de substitution</td>
+   <td class="header">description</td>
+  </tr>
+  <tr>
+   <td>%o or %O</td>
+   <td>Affiche un lien hypertexte sur un objet JavaScript. Cliquer le lien ouvre l'inspecteur.</td>
+  </tr>
+  <tr>
+   <td>%d or %i</td>
+   <td>Affiche un entier. <span id="result_box" lang="fr"><span>Le formatage des nombres est supporté, par exemple console.log ("Foo% .2d", 1.1) affichera le nombre sous forme de deux chiffres significatifs avec un 0 : Foo 01</span></span></td>
+  </tr>
+  <tr>
+   <td>%s</td>
+   <td>Affiche une chaîne de caractères.</td>
+  </tr>
+  <tr>
+   <td>%f</td>
+   <td>Affiche un nombre réél. Le formatage est supporté, par exemple, <code>console.log("Foo %.2f", 1.1)</code> affichera un nombre avec 2 décimales : <code>Foo 1.10</code> .</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Chacun de ceux-ci ira chercher l'argument qui suit la chaîne à formater. Par exemple :</p>
+
+<pre>for (var i=0; i&lt;5; i++) {
+  console.log("Hello, %s. You've called me %d times.", "Bob", i+1);
+}
+</pre>
+
+<p>L'affichage ressemblera à ceci :</p>
+
+<pre>[13:14:13.481] Hello, Bob. You've called me 1 times.
+[13:14:13.483] Hello, Bob. You've called me 2 times.
+[13:14:13.485] Hello, Bob. You've called me 3 times.
+[13:14:13.487] Hello, Bob. You've called me 4 times.
+[13:14:13.488] Hello, Bob. You've called me 5 times.
+</pre>
+
+<h4 id="Donner_un_style_à_l'affichage_de_la_console">Donner un style à l'affichage de la console</h4>
+
+<p>Vous pouvez utiliser l'instruction <code>"%c"</code> pour appliquer du style CSS à l'affichage de la console :</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"This is %cMy stylish message"</span><span class="punctuation token">,</span> <span class="string token">"color: yellow; font-style: italic; background-color: blue;padding: 2px"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<div><img alt="" src="https://mdn.mozillademos.org/files/12527/CSS-styling.png" style="display: block; margin: 0 auto;"></div>
+
+<div> </div>
+
+<div class="note">
+<p> <strong>Note :</strong> <span id="result_box" lang="fr"><span>Un certain nombre de propriétés CSS sont supportées par ce style;</span> <span>vous devriez expérimenter et voir lesquels s'avèrent utiles.</span></span></p>
+</div>
+
+<p>{{h3_gecko_minversion("Using groups in the console", "9.0")}}</p>
+
+<p>Vous pouvez utiliser des groupes imbriqués pour vous aider à vous repérer dans l'affichage. Pour créer un nouveau bloc, appelez <code>console.group()</code>. La méthode <code>console.groupCollapsed()</code> est similaire, mais elle crée un bloc qui sera réduit.</p>
+
+<div class="note"><strong>Note  :</strong> "Collapsed groups" ne sont pas supportés pour l'instant dans Gecko; La méthode <code>groupCollapsed()</code> est la même que <code>group()</code> en ce moment.</div>
+
+<p class="note">Pour quitter le groupe dans lequel on est, appeler <code>console.groupEnd()</code>. Par exemple, examinez ce code :</p>
+
+<pre class="brush: js">console.log("This is the outer level");
+console.group();
+console.log("Level 2");
+console.group();
+console.log("Level 3");
+console.warn("More of level 3");
+console.groupEnd();
+console.log("Back to level 2");
+console.groupEnd();
+console.debug("Back to the outer level");
+</pre>
+
+<p>L'affichage ressemblera à ceci :</p>
+
+<p><img alt="nesting.png" class="default internal" src="/@api/deki/files/6082/=nesting.png"></p>
+
+<div>{{h3_gecko_minversion("Timers", "10.0")}}</div>
+
+<p>Pour calculer la durée d'une opération spécifique, Gecko 10 a amené le supports des chronomètres dans l'objet <code>console</code>.  pour démarrer un chronomètre, appelez la méthode <code>console.time</code><code>()</code> en lui donnant un seul paramètre, son nom. Pour arrêter le chronomètre et obtenir le temps écoulé en millisecondes, utilisez la méthode <code>console.timeEnd()</code>, en passant à nouveau le nom du chronomètre comme paramètre. Une seule page peut faire tourner un maximum de 10.000 chronomètres.</p>
+
+<p>Par exemple, voici ce code :</p>
+
+<pre class="brush: js">console.time("answer time");
+alert("Click to continue");
+console.timeEnd("answer time");
+</pre>
+
+<p>affichera le temps pour l'utilisateur dont il a eu besoin pour faire disparaitre la fenêtre d'alerte :</p>
+
+<p><img alt="timerresult.png" class="default internal" src="/@api/deki/files/6084/=timerresult.png"></p>
+
+<p>Notez que le nom du chronomètre est affiché deux fois, à son départ et quand il se termine.</p>
+
+<div class="note"><strong>Note:</strong> Il est important de noter que si vous vous servez de ceci pour enregistrer les durées du traffic réseau, le chronomètre renverra le temps total d'échanges, alors que les durées affichées dans l'onglet network représente seulement la durée à la réception du header. Si vous avez activer l'enregistrement de réponse du body, le temps listé pour la réponse du header et du body devrait correspondre à ce qu'affiche la sortie de la console.</div>
+
+<h3 id="Traces_d'appel">Traces d'appel</h3>
+
+<p>L'objet console supporte aussi l'affichage d'une trace d'appels ; cela montre le chemin pris pour atteindre l'endroit auquel vous avez fait appel à la fonction {{domxref("console.trace()")}}. Ce qui donne avec ce code :</p>
+
+<pre>foo();
+
+function foo() {
+  function bar() {
+    console.trace();
+  }
+  bar();
+}
+</pre>
+
+<p>L'affichage dans la console ressemblera à ceci :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7167/api-trace2.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Console API')}}</td>
+   <td>{{Spec2('Console API')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Notes">Notes</h2>
+
+<ul>
+ <li><span id="result_box" lang="fr"><span>Au moins dans Firefox, si une page définit un objet console, cet objet remplace celui créé dans Firefox.</span></span></li>
+ <li><span id="result_box" lang="fr"><span>Antérieur à {{Gecko ("12.0")}}, les méthodes de l'objet console ne fonctionnent que lorsque la console Web est ouverte.</span> <span>À partir de {{Gecko ("12.0")}}, la sortie est mise en cache jusqu'à ce que la console Web soit ouverte, puis affichée à ce moment-là.</span></span></li>
+ <li><span id="result_box" lang="fr"><span>Il est à noter que l'objet de console intégré de Firefox est compatible avec celui fourni par</span></span> <a class="external" href="http://getfirebug.com/" title="http://getfirebug.com/">Firebug</a>.</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Outils" title="Tools">Outils de développement</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Outils/Console_Web" title="Web Console">Console web</a> - <span id="result_box" lang="fr"><span>comment la console Web de Firefox gère les appels d'API de console</span></span></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Outils/D%C3%A9bogage_distant">Débogage distant</a> - <span id="result_box" lang="fr"><span>comment afficher la sortie de la console lorsque la cible de débogage est un périphérique mobile</span></span></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Archive/B2G_OS/Debugging/Journalisation_console" title="/en-US/docs/Mozilla/Firefox_OS/Debugging/On-device_console_logging">Journalisation console sur l'appareil</a> - <span class="short_text" id="result_box" lang="fr"><span>comment se connecter sur les appareils Firefox OS</span></span></li>
+</ul>
+
+<h3 id="Autres_implémentations">Autres implémentations</h3>
+
+<ul>
+ <li><a href="https://developers.google.com/chrome-developer-tools/docs/console-api">Google Chrome DevTools</a></li>
+ <li><a href="http://getfirebug.com/wiki/index.php/Console_API">Firebug</a></li>
+ <li><a href="http://msdn.microsoft.com/en-us/library/hh772173(v=vs.85).aspx">Internet Explorer</a></li>
+ <li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html">Safari</a></li>
+</ul>
diff --git a/files/fr/web/api/console/info/index.html b/files/fr/web/api/console/info/index.html
new file mode 100644
index 0000000000..b66d16dddb
--- /dev/null
+++ b/files/fr/web/api/console/info/index.html
@@ -0,0 +1,138 @@
+---
+title: Console.info()
+slug: Web/API/Console/info
+tags:
+  - API
+  - Debugging
+  - Method
+  - NeedsBrowserCompatibility
+  - web console
+translation_of: Web/API/Console/info
+---
+<p>{{ APIRef("Console API") }}{{Non-standard_header}}</p>
+
+<h2 id="Summary" name="Summary">Résumé</h2>
+
+<p>Affiche un message informatif dans la console du navigateur. Dans Firefox et Chrome, une petit icône de <em>i </em>s'affiche devant le message.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">console.info(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]);
+console.info(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>obj1</code> ... <code>objN</code></dt>
+ <dd>Une liste d'objets JavaScript à afficher. La représentation, en chaîne de caractéres, de chacun de ces objets est affichée dans l'ordre de la liste.</dd>
+ <dt><code>msg</code></dt>
+ <dd>Une chaîne de caractères JavaScript contenant zéro ou plusieurs subdivisions de chaîne de caractères.</dd>
+ <dt><code>subst1</code> ... <code>substN</code></dt>
+ <dd>Une liste d'objets JavaScript qui remplace les chaînes de caractéres de <code>msg</code>. Cela vous donne plus de contrôle sur le format de sortie.</dd>
+</dl>
+
+<p>Voir <a href="/fr/docs/Web/API/Console#Outputting_text_to_the_console" title="DOM/console#Outputting_text_to_the_console">Afficher du texte sur la console</a> dans la documentation de {{ domxref("console") }} pour plus de détails.</p>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<p><a href="https://github.com/DeveloperToolsWG/console-object/blob/master/api.md#consoleinfoobject--object-">Console Object API</a></p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>8</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Substitution strings</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("9.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Information icon</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td><span style="font-size: 12px; line-height: 18px;">{{ CompatVersionUnknown() }}</span></td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("38.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("2.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Substitution strings</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("9.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("38.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li>
+</ul>
diff --git a/files/fr/web/api/console/log/index.html b/files/fr/web/api/console/log/index.html
new file mode 100644
index 0000000000..e7fb49d849
--- /dev/null
+++ b/files/fr/web/api/console/log/index.html
@@ -0,0 +1,97 @@
+---
+title: console.log()
+slug: Web/API/Console/log
+tags:
+  - API
+  - DOM
+  - Développement
+  - Method
+  - Méthode
+  - Refernece
+  - Web
+  - console
+  - console.dir()
+  - console.log()
+translation_of: Web/API/Console/log
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p>La méthode <strong><code>log()</code></strong> de l'objet {{domxref("Console")}} affiche un message dans la console Web. Le message peut être une simple chaine (avec des valeurs optionnelles de substitution), ou peut être un ou plusieurs objets JavaScript.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">console.log(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]);
+console.log(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>obj1</code> ... <code>objN</code></dt>
+ <dd>une liste d'objets Javascript à afficher. Les représentations textuelles de chacun de ces objets seront affichées à la sortie dans l'ordre indiqué. Notez que si vous consignez des objets dans les dernières versions de Chrome et Firefox, ce que vous avez enregistré sur la console est une référence à l'objet, qui n'est pas nécessairement la «valeur» de l'objet au moment où vous appelez la console.log (), mais est la valeur de l'objet au moment où vous cliquez dessus.</dd>
+ <dt><code>msg</code></dt>
+ <dd>Une chaîne de caractères JavaScript contenant zéro ou plusieurs chaînes de substitution.</dd>
+ <dt><code>subst1</code> ... <code>substN</code></dt>
+ <dd>Objets Javascript qui remplaceront les chaînes de subsitution éventuellement contenues dans <code>msg</code>. Cela offre plus de contrôle sur le format d'affichage.</dd>
+</dl>
+
+<p>Voir <a href="/fr/docs/Web/API/Console#Outputting_text_to_the_console" title="DOM/console#Outputting_text_to_the_console">Afficher du texte sur la console</a> dans la documentation de {{domxref("console")}} pour plus de détails.</p>
+
+<h2 id="Différence_avec_console.dir">Différence avec console.dir()</h2>
+
+<p><span id="result_box" lang="fr"><span>Vous pourriez vous demander quelle est la différence entre {{domxref("</span></span>console.dir()")}} et <code>console.log()</code>.</p>
+
+<p>Une autre différence utile dans Chrome existe lors de l'envoi d'éléments DOM vers la console.</p>
+
+<p><img alt="" src="https://i.imgur.com/DozDcYR.png"></p>
+
+<p>À noter :</p>
+
+<ul>
+ <li><code>console.log</code> affiche les éléments dans un arbre de type HTML,</li>
+ <li><code>console.dir</code> affiche les éléments dans un arbre de type JSON.</li>
+</ul>
+
+<p><span class="short_text" id="result_box" lang="fr"><span>Plus précisément</span></span>, <code>console.log</code> fait un traitement spécial aux éléments DOM, alors que <code>console.dir</code> n'en fait pas. C'est souvent utile pour voir la représentation complète de l'objet JS DOM.</p>
+
+<p>Il y a plus d'informations dans <a href="https://developers.google.com/chrome-developer-tools/docs/console-api#consoledirobject">Chrome Console API reference</a> sur ceci et d'autres fonctions.</p>
+
+<h2 id="Affichage_dobjets">Affichage d'objets</h2>
+
+<p>Évitez d'utiliser <code>console.log(obj)</code> mais préférez <code>console.log(JSON.parse(JSON.stringify(obj)))</code> afin d'être sûr de voir la valeur de l'objet au moment de l'affichage en console. Autrement, de nombreux navigateurs produisent un affichage interactif de l'objet qui se maintient à jour quand les propriétés de l'objet changent. Cela ne pourrait pas être ce que vous voulez et peut porter à confusion.</p>
+
+<h2 id="Specification" name="Specification">Spécification</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("Console API", "#log", "console.log()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Console.log")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li>
+ <li><a href="http://getfirebug.com/wiki/index.php/Console_API" title="http://getfirebug.com/wiki/index.php/Console_API">Firebug wiki: Console API</a> - Firebug supports additional features in its console.log() implementation, such as <a href="http://www.softwareishard.com/blog/firebug/firebug-tip-styled-logging/" title="http://www.softwareishard.com/blog/firebug/firebug-tip-styled-logging/">styled logging</a>.</li>
+ <li><a href="http://nodejs.org/docs/latest/api/console.html#console_console_log_data">NodeJS: Console API</a></li>
+</ul>
diff --git a/files/fr/web/api/console/profile/index.html b/files/fr/web/api/console/profile/index.html
new file mode 100644
index 0000000000..e35031d483
--- /dev/null
+++ b/files/fr/web/api/console/profile/index.html
@@ -0,0 +1,42 @@
+---
+title: Console.profile()
+slug: Web/API/Console/profile
+tags:
+  - API
+  - DOM
+  - Méthodes
+  - Profils
+  - débogage
+translation_of: Web/API/Console/profile
+---
+<p>{{APIRef("Console API")}}{{Non-standard_header}}</p>
+
+<p>Commence l'enregistrement d'un profil de performance (par exemple, l'outil <a href="https://developer.mozilla.org/fr/docs/Outils/Performance">performance de Firefox</a>).</p>
+
+<p>Vous pouvez éventuellement fournir un argument pour nommer le profil, ce qui vous permet d'arrêter uniquement ce profil si plusieurs profils sont enregistrés. Voir {{domxref("Console.profileEnd()")}} pour voir comment cet argument est interprété.</p>
+
+<p>Pour arrêter l'enregistrement, appeler {{domxref("Console.profileEnd()")}}.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">console.profile(<em>profileName</em>);
+</pre>
+
+<h2 id="Paramètres">Paramètres</h2>
+
+<dl>
+ <dt><code>profileName</code></dt>
+ <dd>Le nom à donner au profil. Facultatif.</dd>
+</dl>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Console.profile")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Console.profileEnd()")}}</li>
+</ul>
diff --git a/files/fr/web/api/console/profileend/index.html b/files/fr/web/api/console/profileend/index.html
new file mode 100644
index 0000000000..dc76f8eac9
--- /dev/null
+++ b/files/fr/web/api/console/profileend/index.html
@@ -0,0 +1,49 @@
+---
+title: Console.profileEnd()
+slug: Web/API/Console/profileEnd
+tags:
+  - API
+  - DOM
+  - Méthodes
+  - Profils
+translation_of: Web/API/Console/profileEnd
+---
+<p>{{APIRef("Console API")}}{{Non-standard_header}}</p>
+
+<div class="warning">
+<p>L'appel de cet API immédiatement après <code>console.profile()</code> peut l'empêcher de fonctionner. Pour contourner ce problème, appelez-le par un  <code>setTimeout</code> avec un délai d'au-moins 5 ms. Voir <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1173588">bug #1173588</a>.</p>
+</div>
+
+<p>La méthode <code>profileEnd</code>  arrête l'enregistrement d'un profil lancé précédemment avec {{domxref("Console.profile()")}}.</p>
+
+<p>Vous pouvez éventuellement insérer un argument pour nommer le profil. Cela vous permet d'arrêter uniquement ce profil si vous avez enregistré plusieurs profils.</p>
+
+<ul>
+ <li>Si <code>Console.profileEnd()</code> reçoit un nom de profil qui correspond au nom d'un profil en cours d'enregistrement, ce profil est arrêté.</li>
+ <li>Si <code>Console.profileEnd()</code> reçoit un nom de profil qui ne correspond pas au nom d'un profil en cours d'enregistrement, aucune modification n'est apportée.</li>
+ <li>Si <code>Console.profileEnd()</code> ne reçoit pas un nom de profil, le dernier profil démarré est arrêté.</li>
+</ul>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">console.profileEnd(<em>profileName</em>);
+</pre>
+
+<h2 id="Paramètres">Paramètres</h2>
+
+<dl>
+ <dt><code>profileName</code></dt>
+ <dd>Le nom à donner au profil. Ce paramètre est facultatif.</dd>
+</dl>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Console.profileEnd")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Console.profile()")}}</li>
+</ul>
diff --git a/files/fr/web/api/console/table/index.html b/files/fr/web/api/console/table/index.html
new file mode 100644
index 0000000000..dabdd1fa6d
--- /dev/null
+++ b/files/fr/web/api/console/table/index.html
@@ -0,0 +1,152 @@
+---
+title: Console.table
+slug: Web/API/Console/table
+tags:
+  - API
+  - DOM
+  - Développement
+  - Méthode
+  - console
+  - débogage
+translation_of: Web/API/Console/table
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p><span class="seoSummary">Affiche des données tabulaires sous la forme d'un tableau.</span></p>
+
+<p>Cette fonction prend un argument obligatoire <code>data</code>, qui doit être un tableau (Array) ou un objet, et un argument facultatif <code>columns</code>.</p>
+
+<p>Il affiche <code>data</code> sous la forme d'un tableau. Chaque élément dans le tableau fourni (Array) sera affiché comme une ligne dans le tableau. (ou les propriétés énumérables s'il s'agit d'un objet)</p>
+
+<p>La première colonne dans le tableau sera intitulé <code>(index)</code>. Si <code>data</code> est un tableau (Array), alors les valeurs de cette colonne seront les index du tableau (Array). Si <code>data</code> est un objet, alors ses valeurs seront les noms des propriétés.À noter (dans Firefox) :  <code>console.table</code> est limité à l'affichage de 1000 lignes (la première ligne est l'index étiqueté)</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h3 id="Collections_de_données_primitives">Collections de données primitives</h3>
+
+<p><code>data</code> peut contenir un tableau ou un objet.</p>
+
+<pre class="brush: js">// un tableau de chaînes de caractères
+
+console.table(["apples", "oranges", "bananas"]);</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8567/console-table-array.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<pre class="brush: js">// un objet dont les propriétés sont des chaînes de caractères
+
+function Person(firstName, lastName) {
+  this.firstName = firstName;
+  this.lastName = lastName;
+}
+
+var me = new Person("John", "Smith");
+
+console.table(me);</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8559/console-table-simple-object.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h3 id="Collections_de_données_composées">Collections de données composées</h3>
+
+<p>Si les éléments d'un tableau, ou les propriétés d'un objet, sont eux-mêmes des tableaux ou des objets, alors ces éléments ou propriétés sont énumérés dans chaque ligne, un élément par colonne :</p>
+
+<pre class="brush: js">// un tableau de tableaux
+
+var people = [["John", "Smith"], ["Jane", "Doe"], ["Emily", "Jones"]]
+console.table(people);</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8561/console-table-array-of-array.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<pre class="brush: js">// un tableau d'objets
+
+function Person(firstName, lastName) {
+  this.firstName = firstName;
+  this.lastName = lastName;
+}
+
+var john = new Person("John", "Smith");
+var jane = new Person("Jane", "Doe");
+var emily = new Person("Emily", "Jones");
+
+console.table([john, jane, emily]);</pre>
+
+<p>Notez que si le tableau contient des objets, alors les colonnes seront nommées avec les noms des propriétés.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8563/console-table-array-of-objects.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<pre class="brush: js">// un objet contenant des propriétés qui sont des objets
+
+var family = {};
+
+family.mother = new Person("Jane", "Smith");
+family.father = new Person("John", "Smith");
+family.daughter = new Person("Emily", "Smith");
+
+console.table(family);</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8565/console-table-object-of-objects.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h3 id="Restreindre_les_colonnes_affichées">Restreindre les colonnes affichées</h3>
+
+<p>Par défaut, <code>console.table()</code> liste tous les éléments pour chaque ligne. Vous pouvez utiliser le paramètre facultatif <code>columns</code> pour sélectionner un sous-ensemble de colonnes à afficher :</p>
+
+<pre class="brush: js">// un tableau d'objets, affichant seulement firstName
+
+function Person(firstName, lastName) {
+  this.firstName = firstName;
+  this.lastName = lastName;
+}
+
+var john = new Person("John", "Smith");
+var jane = new Person("Jane", "Doe");
+var emily = new Person("Emily", "Jones");
+
+console.table([john, jane, emily], ["firstName"]);</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8569/console-table-array-of-objects-firstName-only.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h3 id="Ordonner_les_colonnes">Ordonner les colonnes</h3>
+
+<p>Vous pouvez ordonner les colonnes en cliquant sur l'intitulé de la colonne.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">console.table(data [, <em>columns]</em>);
+</pre>
+
+<h3 id="Parameters" name="Parameters">Paramètres</h3>
+
+<dl>
+ <dt><code>data</code></dt>
+ <dd>La donnée à afficher. Doit être un tableau ou un objet.</dd>
+ <dt><code>columns</code></dt>
+ <dd>Un tableau contenant les noms des colonnes à inclure dans la sortie.</dd>
+</dl>
+
+<h2 id="Specification" name="Specification">Spécification</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("Console API", "#table", "console.table()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+<div>{{Compat("api.Console.table")}}</div>
+
+<div id="compat-desktop"> </div>
+
+<div id="compat-mobile">
+<div id="compat-desktop"> </div>
+</div>
diff --git a/files/fr/web/api/console/time/index.html b/files/fr/web/api/console/time/index.html
new file mode 100644
index 0000000000..69c5e481d9
--- /dev/null
+++ b/files/fr/web/api/console/time/index.html
@@ -0,0 +1,60 @@
+---
+title: console.time
+slug: Web/API/Console/time
+tags:
+  - API
+  - DOM
+  - Développement
+  - Méthode
+  - Web
+  - console
+  - débogage
+translation_of: Web/API/Console/time
+---
+<p>{{APIRef("Console API")}}</p>
+
+<p>Chronomètre une opération. Chaque "timer" doit avoir un nom unique. Il peut y avoir jusqu'à 10000 "timers" sur une même page. En appelant {{ domxref("console.timeEnd()") }} avec le même nom, le navigateur affichera le temps d'execution en millisecondes <span style="line-height: inherit;">dans la console.</span></p>
+
+<p>Voir <a href="https://developer.mozilla.org/fr/docs/Web/API/console#Timers" title="en/DOM/console#Timers">Timers</a> dans la documentation de {{ domxref("console") }} pour plus de details et d'exemples.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox">console.time(<em>label</em>);
+</pre>
+
+<h2 id="Paramètres">Paramètres</h2>
+
+<dl>
+ <dt><code>label</code></dt>
+ <dd>Nom qui identifiera le nouveau "timer". Il faut utiliser le même nom pour {{ domxref("console.timeEnd()") }} pour arrêter le "timer" et afficher le temps dans la console.</dd>
+</dl>
+
+<h2 id="Specification" name="Specification">Spécification</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("Console API", "#time", "console.time()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité  des navigateurs</h2>
+
+<p>{{Compat("api.Console.time")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{ domxref("console.timeEnd()") }}</li>
+ <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+</ul>
diff --git a/files/fr/web/api/console/timeend/index.html b/files/fr/web/api/console/timeend/index.html
new file mode 100644
index 0000000000..f4a94062cf
--- /dev/null
+++ b/files/fr/web/api/console/timeend/index.html
@@ -0,0 +1,58 @@
+---
+title: console.timeEnd
+slug: Web/API/Console/timeEnd
+tags:
+  - API
+  - Console Web
+  - DOM
+  - Développement Web
+  - Methode(2)
+  - Méthode
+translation_of: Web/API/Console/timeEnd
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p>Arrête un chronomètre (<em>timer</em>) précédemment démarré par {{domxref("console.time()")}}.</p>
+
+<p>Voir <a href="https://developer.mozilla.org/fr/docs/Web/API/console#Timers" title="DOM/console#Timers">Timers</a> dans la documentation de {{domxref("console")}} pour des détails et des exemples.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox">console.timeEnd(<em>label</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>label</code></dt>
+ <dd>Le nom du <em>timer</em> à stopper. Une fois arrêté, le temps écoulé est automatiquement affiché dans la <a href="https://developer.mozilla.org/fr/docs/Outils/Console_Web">Console Web</a>.</dd>
+</dl>
+
+<h2 id="Spécification" name="Spécification">Spécification</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("Console API", "#timeend", "console.timeEnd()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{Compat("api.Console.timeEnd")}}</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a>.</li>
+</ul>
diff --git a/files/fr/web/api/console/timelog/index.html b/files/fr/web/api/console/timelog/index.html
new file mode 100644
index 0000000000..0b06d664eb
--- /dev/null
+++ b/files/fr/web/api/console/timelog/index.html
@@ -0,0 +1,99 @@
+---
+title: Console.timeLog()
+slug: Web/API/Console/timeLog
+tags:
+  - API
+  - Console Web
+  - DOM
+  - Développement Web
+  - Méthode
+  - console
+  - débogage
+translation_of: Web/API/Console/timeLog
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p>Affiche dans la console la valeur actuelle d'un timer précédemment appelé par {{domxref("console.time()")}}</p>
+
+<p>Voir <a href="/en-US/docs/Web/API/console#Timers">Timers</a> dans la documentation pour des exemples et plus de détails</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">console.timeLog(<em>label</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>label</code></dt>
+ <dd>Le nom du timer à afficher sur la console</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Si aucun label n'est inclus</p>
+
+<pre>default: 1042ms</pre>
+
+<p>Si un <code>label</code> est inclus:</p>
+
+<pre>timer name: 1242ms</pre>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Si aucun timer n'est en cours d'éxecution, <code>timeLog()</code> retourne l'avertissement suivant :</p>
+
+<pre>Timer “default” doesn’t exist.</pre>
+
+<p>Si le paramètre label est spécifé mais aucun timer n'y correspond :</p>
+
+<pre> Timer “timer name” doesn’t exist. </pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre>console.time("answer time");
+alert("Click to continue");
+console.timeLog("answer time");
+alert("Do a bunch of other stuff...");
+console.timeEnd("answer time");</pre>
+
+<p>Le résultat de l'exemple ci-dessus montre le temps qu'a mis l'utilisateur à fermer la première pop-up d'alerte, puis le temps que l'utilisateur a pris pour fermer la seconde :</p>
+
+<p><img alt="timerresult.png" class="default internal" src="https://mdn.mozillademos.org/files/16113/console-timeLog.png" style="border: 1px solid black; height: 102px; margin: 0 auto; width: 318px;"></p>
+
+<p>Notez que le nom du timer est à la fois affiché lorsque la valeur est affichée par <code>timeLog()</code> et lorsque le timer est arrêté</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">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#timelog", "console.timeLog()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+
+
+<p>{{Compat("api.Console.timeLog")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="http://www.opera.com/dragonfly/documentation/console/">Documentation d'Opera Dragonfly: Console</a></li>
+</ul>
diff --git a/files/fr/web/api/console/timestamp/index.html b/files/fr/web/api/console/timestamp/index.html
new file mode 100644
index 0000000000..2bc0f56843
--- /dev/null
+++ b/files/fr/web/api/console/timestamp/index.html
@@ -0,0 +1,42 @@
+---
+title: Console.timeStamp()
+slug: Web/API/Console/timeStamp
+tags:
+  - API
+  - DOM
+  - Développement
+  - Méthodes
+  - console
+translation_of: Web/API/Console/timeStamp
+---
+<div>{{APIRef("Console API")}}{{Non-standard_header}}</div>
+
+<p>Ajoute un seul marqueur à l'outil <a href="https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference">Performance</a> ou <a href="https://developer.mozilla.org/fr/docs/Outils/Performance/Waterfall">Waterfall</a> du navigateur. Cela vous permet de corréler un point de votre code avec les autres événements enregistrés dans la chronologie, tels que les événements de mise en page et de peinture.</p>
+
+<p>Vous pouvez éventuellement fournir un argument pour étiqueter l'horodatage, et cette étiquette sera ensuite affichée à côté du marqueur.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">console.timeStamp(label);
+</pre>
+
+<h2 id="Paramètres">Paramètres</h2>
+
+<dl>
+ <dt><code>label</code></dt>
+ <dd>Étiquette pour l'horodatage. Facultatif.</dd>
+</dl>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Console.timestamp")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Console.time()")}}</li>
+ <li>{{domxref("Console.timeEnd()")}}</li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Outils/Performance/Waterfall#Marqueurs_de_temps">Ajout d'un marqueur de temps pour le Waterfall</a></li>
+</ul>
diff --git a/files/fr/web/api/console/trace/index.html b/files/fr/web/api/console/trace/index.html
new file mode 100644
index 0000000000..35e3cf2838
--- /dev/null
+++ b/files/fr/web/api/console/trace/index.html
@@ -0,0 +1,69 @@
+---
+title: Console.trace()
+slug: Web/API/Console/trace
+tags:
+  - API
+  - DOM
+  - Développement
+  - Méthode
+  - console
+  - débogage
+  - trace
+translation_of: Web/API/Console/trace
+---
+<p>{{ APIRef("Console API") }}</p>
+
+<p>Affiche la <em>stack trace</em> dans la <a href="https://developer.mozilla.org/fr/docs/Outils/Console_Web" title="Web Console">Web Console</a>.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<p>Voir <a href="https://developer.mozilla.org/fr/docs/Web/API/console#Stack_traces" title="en/DOM/console#Stack_traces">Stack traces</a> dans la documentation de {{ domxref("console") }} pour plus de détails et d'exemples.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox">console.trace();
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">foo</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">bar</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    console<span class="punctuation token">.</span><span class="function token">trace</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+  <span class="function token">bar</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="function token">foo</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Dans la console, la trace suivante sera affichée :</p>
+
+<pre class="line-numbers  language-html"><code class="language-html">bar
+foo
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>anonymous</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h2 id="Specification" name="Specification">Spécification</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("Console API", "#trace", "console.trace()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Définition Initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Console.trace")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p><a class="external external-icon" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></p>
diff --git a/files/fr/web/api/console/warn/index.html b/files/fr/web/api/console/warn/index.html
new file mode 100644
index 0000000000..4da87fa1a3
--- /dev/null
+++ b/files/fr/web/api/console/warn/index.html
@@ -0,0 +1,68 @@
+---
+title: Console.warn()
+slug: Web/API/Console/warn
+tags:
+  - API
+  - DOM
+  - Développement
+  - Méthode
+  - console
+  - débogage
+translation_of: Web/API/Console/warn
+---
+<p>{{ APIRef("Console API") }}</p>
+
+<p>Affiche un message d'avertissement dans la console web.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<div class="note"><strong>Note:</strong> Dans Firefox, une icône de point d'exclamation est affichée à côté des messages d'avertissement</div>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox">console.warn(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]);
+console.warn(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]);
+</pre>
+
+<h2 id="Paramétres">Paramétres</h2>
+
+<dl>
+ <dt><code>obj1</code> ... <code>objN</code></dt>
+ <dd>Une liste d'objets JavaScript à afficher. La représentation, en chaîne de caractéres, de chacun de ces objets est affichée dans l'ordre de la liste.</dd>
+ <dt><code>msg</code></dt>
+ <dd>Une chaîne de caractères JavaScript contenant zéro ou plusieurs subdivisions de chaîne de caractères.</dd>
+ <dt><code>subst1</code> ... <code>substN</code></dt>
+ <dd>Une liste d'objets JavaScript qui remplace les chaînes de caractéres de <code>msg</code>. Cela vous donne plus de contrôle sur le format de sortie.</dd>
+</dl>
+
+<p>Voir <a href="https://developer.mozilla.org/fr/docs/Web/API/console#Outputting_text_to_the_console" title="en/DOM/console#Outputting_text_to_the_console">Outputting text to the console</a> dans la documentation de {{ domxref("console") }} pour plus de détails.</p>
+
+<h2 id="Specification" name="Specification">Spécification</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("Console API", "#warn", "console.warn()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Console.warn")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li>
+</ul>
diff --git a/files/fr/web/api/console_api/index.html b/files/fr/web/api/console_api/index.html
new file mode 100644
index 0000000000..2d3255a867
--- /dev/null
+++ b/files/fr/web/api/console_api/index.html
@@ -0,0 +1,76 @@
+---
+title: Console API
+slug: Web/API/Console_API
+tags:
+  - API
+  - Aperçu
+  - Journal
+  - Sortie
+  - console
+  - débogage
+  - test
+translation_of: Web/API/Console_API
+---
+<div>{{DefaultAPISidebar("Console API")}}</div>
+
+<p><span class="seoSummary">L'<strong><code>API Console</code></strong> fournit des fonctionnalités permettant aux développeurs d'effectuer des tâches de débogage, telles que la journalisation des messages ou les valeurs des variables à des points définis dans votre code, ou calculer la durée d'une opération.</span></p>
+
+<h2 id="Concepts_et_utilisation">Concepts et utilisation</h2>
+
+<p>L'<code>API Console</code> a commencé comme une API largement propriétaire, avec différents navigateurs l'implémentant, bien que cela ne soit pas cohérent. <a href="https://console.spec.whatwg.org/">La spécification de l'API Console</a> a été créée pour définir un comportement cohérent, et tous les navigateurs modernes ont finalement décidé d'implémenter ce comportement - bien que certaines implémentations aient toujours leurs propres fonctions propriétaires supplémentaires. Découvrez-les sur:</p>
+
+<ul>
+ <li><a href="https://developers.google.com/chrome-developer-tools/docs/console-api">Implémentation de Google Chrome DevTools</a></li>
+ <li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html">Implémentation de Safari DevTools</a></li>
+</ul>
+
+<p>L'utilisation est très simple - l'objet {{domxref ("console")}} - disponible via {{domxref ("window.console")}}, ou {{domxref ("WorkerGlobalScope.console")}} dans les workers; accessible en utilisant uniquement la <code>console</code> - contient de nombreuses méthodes que vous pouvez appeler pour effectuer des tâches de débogage rudimentaires, généralement axées sur la journalisation de diverses valeurs dans la <a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Web_Console">console Web</a> du navigateur.</p>
+
+<p>La méthode de loin la plus couramment utilisée est {{domxref ("console.log")}}, qui est utilisée pour consigner la valeur en cours contenue dans une variable spécifique.</p>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<dl>
+ <dt>{{domxref("console")}}</dt>
+ <dd>Fournit des fonctionnalités de débogage rudimentaires, y compris la journalisation, les traces de pile, les minuteries et les compteurs.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js notranslate">let myString = 'Hello world'
+
+// Output "Hello world" to the console
+console.log(myString)</pre>
+
+<p>Consultez <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Console#Usage">la page de référence de la console</a> pour plus d'exemples.</p>
+
+<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('Console API')}}</td>
+   <td>{{Spec2('Console API')}}</td>
+   <td>Définition initial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.Console")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Tools" title="Tools">Outils</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Web_Console">Console Web</a> - comment la console Web de Firefox traite les appels de l'<code>API Console</code>.</li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Remote_Debugging">Débogage à distance</a> - comment voir la sortie de la console lorsque la cible de débogage est un appareil mobile.</li>
+</ul>
diff --git a/files/fr/web/api/credential/index.html b/files/fr/web/api/credential/index.html
new file mode 100644
index 0000000000..3c0956f0df
--- /dev/null
+++ b/files/fr/web/api/credential/index.html
@@ -0,0 +1,66 @@
+---
+title: Credential
+slug: Web/API/Credential
+tags:
+  - API
+  - Credential
+  - Credential Management API
+  - Interface
+  - Reference
+translation_of: Web/API/Credential
+---
+<p>{{SeeCompatTable}}{{APIRef("Credential Management API")}}{{securecontext_header}}</p>
+
+<p>L'interface <strong><code>Credential</code></strong>, rattachée à l'<a href="/fr/docs/Web/API/Credential_Management_API">API Credential Management</a>, fournit des informations relatives à une entité qui seront utilisées comme prérequis à l'établissement d'une relation de confiance.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("Credential.id")}} {{readonlyInline}}</dt>
+ <dd>Une chaîne de caractères qui est l'identifiant des informations d'authentification. Cela peut être un GUID, un nom d'utilisateur ou une adresse électronique.</dd>
+ <dt>{{domxref("Credential.type")}} {{readonlyInline}}</dt>
+ <dd>Une chaîne de caractères qui décrit le type d'information d'authentification utilisée. Les valeurs valides sont
+ <ul>
+  <li><code>password</code> (pour {{domxref("PasswordCredential")}})</li>
+  <li><code>federated</code> (pour {{domxref("FederatedCredential")}})</li>
+  <li><code>public-key</code> (pour {{domxref("PublicKeyCredential")}})<span style="display: none;"> </span></li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Gestionnaires_d'évènements">Gestionnaires d'évènements</h3>
+
+<p>Aucun.</p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p>Aucune.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">// TBD</pre>
+
+<h2 id="Specifications">Specifications</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('Credential Management')}}</td>
+   <td>{{Spec2('Credential Management')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Credential")}}</p>
diff --git a/files/fr/web/api/credential_management_api/index.html b/files/fr/web/api/credential_management_api/index.html
new file mode 100644
index 0000000000..2f57393cbc
--- /dev/null
+++ b/files/fr/web/api/credential_management_api/index.html
@@ -0,0 +1,70 @@
+---
+title: Credential Management API
+slug: Web/API/Credential_Management_API
+tags:
+  - API
+  - Credential Management API
+  - Landing
+  - Reference
+  - Web Authentification API
+  - WebAuthn
+translation_of: Web/API/Credential_Management_API
+---
+<div>
+<p>{{APIRef("Credential Management API")}}{{ SeeCompatTable() }}</p>
+
+<p class="summary">L'API <strong>Credential Management</strong> (en français : gestion des informations d'authentification) permet à un site web d'enregistrer et de récupérer des informations d'authentifications pour un utilisateur (qu'elles soient fédérées, utilisent un mot de passe ou une paire de clés asymétrique). Un utilisateur peut ainsi se connecter à un service sans avoir à saisir de mot de passe, de voir le compte fédéré utilisé pour se connecter à un site, de rouvrir une session sans avoir à se reconnecter après une session expirée.</p>
+</div>
+
+<h2 id="Concepts_et_utilisation_de_l'API_Credential_Management">Concepts et utilisation de l'API <em>Credential Management</em></h2>
+
+<p>Cette API permet aux sites web d'interagir avec le système de mots de passe de l'agent utilisateur afin que les sites web puissent gérer de façon uniforme les informations d'authentification. Ainsi, les sites et agents utilisateur peuvent mieux communiquer sur ces aspects.</p>
+
+<p>Ainsi, sans cette API, un agent utilisateur pourra rencontrer certaines difficultés à gérer des fournisseurs d'identité fédérée ou d'autres mécanismes de connexion.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Cette API est restreinte aux contextes de plus haut niveau. Les appels à <code>get()</code> et <code>store()</code> depuis une {{HTMLElement("iframe")}} seront résolus sans aucun effet.</p>
+</div>
+
+<h3 id="Informations_d'authentification_partagées_entre_les_sous-domaines">Informations d'authentification partagées entre les sous-domaines</h3>
+
+<p>Les versions les plus récentes de la spécification permettent de récupérer les informations relatives à un sous-domaine différent. Ainsi, un mot de passe enregistré pour <code>login.example.com</code> pourrait être utilisé pour se connecter à <code>www.example.com</code>. Pour permettre cela, le mot de passe doit explicitement être stocké en appelant {{domxref("CredentialsContainer.store()")}}. Ce comportement est parfois intitulé <em>Public suffix list (PSL) matching</em> (correspondance des listes de suffixes publics). Toutefois, la spécification ne fait que recommander l'utilisation du PSL pour déterminer la portée des informations d'authentification. Formellement, le PSL n'est pas obligatoire. Les navigateurs peuvent donc varier dans leurs implémentations.</p>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<dl>
+ <dt>{{domxref("Credential")}}</dt>
+ <dd>Cette interface fournit des informations relatives à une entité qui seront utilisées comme prérequis à l'établissement d'une relation de confiance.</dd>
+ <dt>{{domxref("CredentialsContainer")}}</dt>
+ <dd>Cette interface expose des méthodes pour récupérer des informations d'authentification et notifier l'agent utilisateur lorsque des évènements pertinents se produisent (connexion ou déconnexion réussies par exemple). Cette interface est accessible via <code>navigator.credentials</code>.</dd>
+ <dt>{{domxref("FederatedCredential")}}</dt>
+ <dd>Cette interface fournit des informations relatives à des informations d'authentifcation provenant d'un fournisseur d'identité fédéré (c'est une entité à laquelle un site web fait confiance pour authentifier un utilisateur et qui fournit une API à cet effet). Le <em>framework</em> <a href="http://openid.net/developers/specs/">OpenID Connect</a> est un exemple d'un tel cas de figure.</dd>
+ <dt>{{domxref("PasswordCredential")}}</dt>
+ <dd>Cette interface fournit des informations à propos d'un couple nom d'utilisateur / mot de passe.</dd>
+ <dt>{{domxref("PublicKeyCredential")}}</dt>
+ <dd>Cette interface fournit des informations d'authentification pour se connecter à l'aide d'une paire de clés asymétrique (permettant d'éviter le hameçonnage et la fuite de données) plutôt qu'avec un mot de passe.</dd>
+</dl>
+
+<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('Credential Management')}}</td>
+   <td>{{Spec2('Credential Management')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebAuthn')}}</td>
+   <td>{{Spec2('WebAuthn')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/api/credentialscontainer/create/index.html b/files/fr/web/api/credentialscontainer/create/index.html
new file mode 100644
index 0000000000..00de2917a1
--- /dev/null
+++ b/files/fr/web/api/credentialscontainer/create/index.html
@@ -0,0 +1,90 @@
+---
+title: CredentialsContainer.create()
+slug: Web/API/CredentialsContainer/create
+tags:
+  - API
+  - Credential Management API
+  - Méthode
+  - Reference
+  - Web Authentication API
+  - WebAuthn
+translation_of: Web/API/CredentialsContainer/create
+---
+<p>{{APIRef("Credential Management")}}{{SeeCompatTable}}</p>
+
+<p>La méthode <strong><code>create()</code></strong>, rattachée à l'interface {{domxref("CredentialsContainer")}}, renvoie une promesse ({{jsxref("Promise")}}) qui est résolue en</p>
+
+<ul>
+ <li>une nouvelle instance {{domxref("Credential")}} construite avec les options fournies</li>
+ <li>{{jsxref("null")}} si aucun objet <code>Credential</code> ne peut être créé.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note :</strong> Cette méthode ne peut être utilisé que pour les contextes de navigation les plus hauts. Les appels lancés depuis une {{HTMLElement("iframe")}} résoudront la promesse sans aucun effet.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var promise = CredentialsContainer.create([options])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>options</code></dt>
+ <dd>Un objet de type {{domxref("CredentialCreationOptions")}} qui contient des options pour le nouvel objet <code>Credentials</code> demandé. Cet objet doit posséder au moins une des propriétés parmi <code>"password"</code>, <code>"federated"</code> ou <code>"publicKey"</code>. Les options sont :
+ <ul>
+  <li><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">password</span></font>: {{optional_inline}} un objet {{domxref("HTMLFormElement")}} ou un objet {{domxref("PasswordCredentialData")}}
+   <ul>
+    <li><code>id</code>: (obligatoire) {{domxref("USVString")}} hérité de {{domxref("CredentialData")}}.</li>
+    <li><code>name</code>: {{optional_inline}} {{domxref("USVString")}}</li>
+    <li><code>iconURL</code>: {{optional_inline}} {{domxref("USVString")}}</li>
+    <li><code>password</code>: (required) {{domxref("USVString")}}</li>
+   </ul>
+  </li>
+  <li><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">federated</span></font> : {{optional_inline}} un objet {{domxref("FederatedCredentialInit")}}. Cet objet contient le nécessaire pour créer/obtenir des informations d'authentification fédérées. Les propriétés disponibles sont :
+   <ul>
+    <li><code>id</code>: (required) {{domxref("USVString")}} hérité de {{domxref("CredentialData")}}.</li>
+    <li><code>name</code>: {{optional_inline}} {{domxref("USVString")}}</li>
+    <li><code>iconURL</code>: {{optional_inline}} {{domxref("USVString")}}</li>
+    <li><code>provider</code>: (required) {{domxref("USVString")}}</li>
+    <li><code>protocol</code>: {{optional_inline}} {{domxref("USVString")}}</li>
+   </ul>
+  </li>
+  <li><code>publicKey</code> : {{optional_inline}} un objet {{domxref("PublicKeyCredentialCreationOptions")}} qui décrit les options pour créer une information d'authentification <a href="/fr/docs/Web/API/Web_Authentication_API">WebAuthn</a>.</li>
+ </ul>
+ </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 {{domxref("Credential")}} telle que {{domxref("PasswordCredential")}}, {{domxref("FederatedCredential")}} ou {{domxref("PublicKeyCredential")}}.</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('Credential Management','#dom-credentialscontainer-get','get()')}}</td>
+   <td>{{Spec2('Credential Management')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebAuthn')}}</td>
+   <td>{{Spec2('WebAuthn')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.CredentialsContainer.create")}}</p>
diff --git a/files/fr/web/api/credentialscontainer/get/index.html b/files/fr/web/api/credentialscontainer/get/index.html
new file mode 100644
index 0000000000..ac86e8223b
--- /dev/null
+++ b/files/fr/web/api/credentialscontainer/get/index.html
@@ -0,0 +1,82 @@
+---
+title: CredentialsContainer.get()
+slug: Web/API/CredentialsContainer/get
+tags:
+  - API
+  - Credential Management API
+  - CredentialsContainer
+  - Méthode
+  - Reference
+  - Web Authentication API
+  - WebAuthn
+translation_of: Web/API/CredentialsContainer/get
+---
+<p>{{APIRef("Credential Management")}}{{SeeCompatTable}}</p>
+
+<p>La méthode <strong><code>get()</code></strong>, rattachée à l'interface {{domxref("CredentialsContainer")}}, renvoie une promesse ({{jsxref("Promise")}}) qui est résolue en une instance de {{domxref("Credential")}} correspondant aux paramètres fournis. Si aucune correspondance n'est trouvée, la promesse sera résolue avec la valeur {{jsxref("null")}}.</p>
+
+<p>Cette méthode collecte l'ensemble des informations d'authentification stockées dans l'objet {{domxref("CredentialsContainer")}} et qui respectent les critères indiqués (définis grâce à l'argument <code><strong>options</strong></code>). À partir de cet ensemble, l'agent utilisateur sélectionne la meilleure information d'authentification. Selon les options fournies, l'agent utilisateur pourra afficher une boîte de dialogue et demander à l'utilisateur de sélectionner la bonne information.</p>
+
+<p>Cette méthode récupère les informations d'authentification en appelant la méthode <code>CollectFromCredentialStore</code> pour chaque type d'authentification permis par l'argument <code><strong>options</strong></code>. Ainsi, si la propriété <code>options.password</code> existe dans l'argument passé,   {{domxref("PasswordCredential")}}<code>.[[CollectFromCredentialStore]]</code> sera appelée.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Cette méthode ne peut être utilisé que pour les contextes de navigation les plus hauts. Les appels lancés depuis une {{HTMLElement("iframe")}} résoudront la promesse sans aucun effet.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var promise = CredentialsContainer.get([options])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>options</code> {{optional_inline}}</dt>
+ <dd>Un objet de type {{domxref("CredentialRequestOptions")}} qui contient les critères de la requête. et les options d'interaction avec l'utilisateur. Cet objet peut contenir les propriétés suivantes :
+ <ul>
+  <li><code>password</code> : un booléen ({{jsxref("Boolean")}}) qui indique que l'instance {{domxref("Credential")}} renvoyée devrait contenir les informations sur l'utilisateur (contrairement aux informations d'authentification fédérées).</li>
+  <li><code>federated</code> : un objet {{domxref("FederatedCredentialRequestOptions")}} qui contient les critères que doivent respecter les informations d'authentification fédérées. Les options disponibles sont :
+   <ul>
+    <li><code>providers</code> : un tableau de chaînes de caractères {{domxref("DOMString")}} listant les fournisseurs d'identité potentiels</li>
+    <li><code>protocols</code> : un tableau de chaînes de caractères {{domxref("DOMString")}} listant les protocoles de fédération à rechercher.</li>
+   </ul>
+  </li>
+  <li><code>publicKey</code> : un objet {{domxref("PublicKeyCredentialRequestOptions")}} contenant les conditions que doivent respecter les informations d'authentification <a href="/fr/docs/Web/API/Web_Authentication_API">WebAuthn</a> qui seront renvoyées.</li>
+  <li><code>mediation</code> : une chaîne de caractères {{jsxref("String")}} qui indique si l'utilisateur devra se reconnecter à chaque visite sur le site. Les valeurs valides sont <code>"silent"</code>, <code>"optional"</code> ou <code>"required"</code>.</li>
+  <li><code>unmediated</code> : {{deprecated_inline()}} un booléen ({{jsxref("Boolean")}}) qui indique que l'instance {{domxref("Credential")}} renvoyée ne devrait pas nécessiter de médiation avec l'utilisateur.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une promesse ({{jsxref("Promise")}}) qui est résolue avec une instance {{domxref("Credential")}} correspondant aux paramètres fournis. S'il n'est pas possible d'obtenir une seule instance sans ambiguïté, la promesse sera résolue avec la valeur {{jsxref("null")}}.</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('Credential Management','#dom-credentialscontainer-get','get()')}}</td>
+   <td>{{Spec2('Credential Management')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebAuthn')}}</td>
+   <td>{{Spec2('WebAuthn')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.CredentialsContainer.get")}}</p>
diff --git a/files/fr/web/api/credentialscontainer/index.html b/files/fr/web/api/credentialscontainer/index.html
new file mode 100644
index 0000000000..e110b4ab03
--- /dev/null
+++ b/files/fr/web/api/credentialscontainer/index.html
@@ -0,0 +1,72 @@
+---
+title: CredentialsContainer
+slug: Web/API/CredentialsContainer
+tags:
+  - API
+  - Credential Management API
+  - Interface
+  - Reference
+  - Web Authentication API
+  - WebAuthn
+translation_of: Web/API/CredentialsContainer
+---
+<p>{{SeeCompatTable}}{{APIRef("Credential Management API")}}{{securecontext_header}}</p>
+
+<p>L'interface <strong><code>CredentialsContainer</code></strong>, rattachée à l'<a href="/en-US/docs/Web/API/Credential_Management_API">API Credential Management</a>, expose des méthodes pour demander l'accès aux informations d'authentification et informer l'agent utilisateur lorsque des évènements pertinents se produisent (connexion et déconnexion réussies par exemple). On peut accéder à cette interface via {{domxref('Navigator.credentials')}}.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p>Aucune.</p>
+
+<h3 id="Gestionnaires_d'évènements">Gestionnaires d'évènements</h3>
+
+<p>Aucun.</p>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("CredentialsContainer.create()")}}{{securecontext_inline}}</dt>
+ <dd>Cette méthode renvoie une promesse ({{jsxref("Promise")}}) qui est résolue avec une nouvelle instance {{domxref("Credential")}} construite selon les options fournies ou <code>null</code> si aucun objet <code>Credential</code> ne peut être créé.</dd>
+ <dt>{{domxref("CredentialsContainer.get()")}}{{securecontext_inline}}</dt>
+ <dd>Cette méthode renvoie une promesse ({{jsxref("Promise")}}) qui est résolue avec l'instance de {{domxref("Credential")}} qui correspond aux paramètres fournis.</dd>
+ <dt>{{domxref("CredentialsContainer.preventSilentAccess()")}}{{securecontext_inline}}</dt>
+ <dd>Cette méthode active un marqueur qui indique si une connexion automatique est autorisée pour les futures visites sur cette origine et renvoie une promesse ({{jsxref("Promise")}}) vide. <br>
+ <br>
+ On pourra par exemple appeler cette méthode après qu'un utilisateur se soit déconnecté d'un site web pour s'assurer qu'il n'est pas reconnecté à la prochaine visite. Dans des versions antérieures de la spécification, cette méthode était intitulée <code>requireUserMediation()</code>. Voir le tableau de compatibilité ci-après pour plus de détails.</dd>
+ <dt>{{domxref("CredentialsContainer.store()")}}{{securecontext_inline}}</dt>
+ <dd>Cette méthode enregistre des informations d'authentification pour un utilisateur à partir d'une instance {{domxref("Credential")}} fournie et renvoie cette instance dans une promesse ({{jsxref("Promise")}}).</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">// TBD</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('Credential Management')}}</td>
+   <td>{{Spec2('Credential Management')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebAuthn')}}</td>
+   <td>{{Spec2('WebAuthn')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.CredentialsContainer")}}</p>
diff --git a/files/fr/web/api/credentialscontainer/preventsilentaccess/index.html b/files/fr/web/api/credentialscontainer/preventsilentaccess/index.html
new file mode 100644
index 0000000000..6e66f28469
--- /dev/null
+++ b/files/fr/web/api/credentialscontainer/preventsilentaccess/index.html
@@ -0,0 +1,55 @@
+---
+title: CredentialsContainer.preventSilentAccess()
+slug: Web/API/CredentialsContainer/preventSilentAccess
+tags:
+  - API
+  - Credential Management API
+  - CredentialsContainer
+  - Méthode
+  - Reference
+translation_of: Web/API/CredentialsContainer/preventSilentAccess
+---
+<p>{{APIRef("")}}{{SeeCompatTable}}</p>
+
+<p>La méthode <strong><code>preventSilentAccess()</code></strong>, rattachée à l'interface  {{domxref("CredentialsContainer")}}, permet de paramétrer une option pour indiquer si les connexions automatiques sont autorisées pour les futures visites à l'origine. Elle renvoie ensuite une promesse ({{jsxref("Promise")}}) vide.</p>
+
+<p>Cette méthode peut, par exemple, être appelée lorsqu'un utilisateur se déconnecte d'un site web afin de s'assurer qu'il n'est pas reconnecté à la prochaine visite. Cette gestion doit être gérée pour chaque origine.</p>
+
+<p>Dans des versions antérieures de la spécification, cette méthode était intitulée <code>requireUserMediation()</code>. Voir le tableau ci-après sur la compatibilité des navigateurs pour plus de détails.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var Promise = CredentialsContainer.preventSilentAccess()</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Aucun.</p>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une promesse ({{jsxref("Promise")}}) vide.</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('Credential Management','#dom-credentialscontainer-preventsilentaccess','preventSilentAccess()')}}</td>
+   <td>{{Spec2('Credential Management')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.CredentialsContainer.preventSilentAccess")}}</p>
diff --git a/files/fr/web/api/credentialscontainer/store/index.html b/files/fr/web/api/credentialscontainer/store/index.html
new file mode 100644
index 0000000000..f293a27e57
--- /dev/null
+++ b/files/fr/web/api/credentialscontainer/store/index.html
@@ -0,0 +1,62 @@
+---
+title: CredentialsContainer.store()
+slug: Web/API/CredentialsContainer/store
+tags:
+  - API
+  - Credential Management API
+  - CredentialsContainer
+  - Méthode
+  - Reference
+translation_of: Web/API/CredentialsContainer/store
+---
+<p>{{APIRef("")}}{{SeeCompatTable}}</p>
+
+<p>La méthode <strong><code>store()</code></strong>, rattachée à l'interface {{domxref("CredentialsContainer")}}, enregistre un ensemble d'informations d'authentification pour l'utilisateur dans une instance {{domxref("Credential")}} et renvoie cette instance au travers d'une promesse ({{domxref("Promise")}}).</p>
+
+<div class="note">
+<p><strong>Note :</strong> Cette méthode ne peut être utilisé que pour les contextes de navigation les plus hauts. Les appels lancés depuis une {{HTMLElement("iframe")}} résoudront la promesse sans aucun effet.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">CredentialsContainer.store(cred).then(function(credRes) { ... } )</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>cred</code></dt>
+ <dd>Une instance valide de {{domxref("Credential")}}.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une promesse ({{domxref("Promise")}}) qui sera résolue avec l'instance de {{domxref("Credential")}} passée en argument.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">// TBD</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('Credential Management')}}</td>
+   <td>{{Spec2('Credential Management')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.CredentialsContainer.store")}}</p>
diff --git a/files/fr/web/api/crypto/index.html b/files/fr/web/api/crypto/index.html
new file mode 100644
index 0000000000..e7cbb32d09
--- /dev/null
+++ b/files/fr/web/api/crypto/index.html
@@ -0,0 +1,56 @@
+---
+title: Crypto
+slug: Web/API/Crypto
+translation_of: Web/API/Crypto
+---
+<p>{{APIRef("Web Crypto API")}}</p>
+
+<p>L'interface <code><strong>Crypto</strong></code> représente les fonctions cryptographiques de base dans notre contexte actuel. Elle permet d'accéder à de solides générateur de nombres aléatoires dédiés à la cryptographie ainsi qu'aux principales primitives cryptographiques.</p>
+
+<p>Un objet avec cette interface est disponible dans le contexte web de la page via la propriété {{domxref("Window.crypto")}}.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Cette interface implémente les propriétés définies dans {{domxref("RandomSource")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("Crypto.subtle")}} {{experimental_inline}}{{readOnlyInline}}</dt>
+ <dd>Retourne un objet {{domxref("SubtleCrypto")}} procurant un accès aux principales primitives cryptographiques, comme le hashage, les signatures, le chiffrement ou le déchiffrement.</dd>
+</dl>
+
+<h2 id="Methodes">Methodes</h2>
+
+<p><em>Cette interface implémente les méthodes définies dans {{domxref("RandomSource")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("RandomSource.getRandomValues()") }}</dt>
+ <dd>Rempli le {{ jsxref("TypedArray") }} passé avec des valeurs aléatoires utilisables pour la cryptographie.</dd>
+ <dt>
+ <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("Web Crypto API", "#crypto-interface", "Crypto")}}</td>
+    <td>{{Spec2("Web Crypto API")}}</td>
+    <td>Definition<br>
+     initiale</td>
+   </tr>
+  </tbody>
+ </table>
+ </dt>
+ <dt>
+ <h2 id="Voir_aussi">Voir aussi</h2>
+
+ <ul>
+  <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
+ </ul>
+ </dt>
+</dl>
diff --git a/files/fr/web/api/crypto/subtle/index.html b/files/fr/web/api/crypto/subtle/index.html
new file mode 100644
index 0000000000..8ba23fad8b
--- /dev/null
+++ b/files/fr/web/api/crypto/subtle/index.html
@@ -0,0 +1,90 @@
+---
+title: Crypto.subtle
+slug: Web/API/Crypto/subtle
+translation_of: Web/API/Crypto/subtle
+---
+<p>{{APIRef("Web Crypto API")}}{{SecureContext_header}} </p>
+
+<p>{{APIRef("Web Crypto API")}}</p>
+
+<p>La propriété <strong><code>Crypto.subtle</code></strong> en mode lecture seule retourne un objet {{domxref("SubtleCrypto")}} permettant de réaliser des opérations cryptographiques.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="notranslate">var <em>crypto</em> = crypto.subtle;</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('Web Crypto API', '#dfn-Crypto', 'Crypto.subtle') }}</td>
+   <td>{{ Spec2('Web Crypto API') }}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateur">Compatibilité navigateur</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(37) }}</td>
+   <td>{{ CompatGeckoDesktop(34) }}</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>37</td>
+   <td>{{ CompatGeckoMobile(34) }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Crypto")}}.</li>
+ <li>{{domxref("SubtleCrypto")}}.</li>
+</ul>
diff --git a/files/fr/web/api/cryptokey/index.html b/files/fr/web/api/cryptokey/index.html
new file mode 100644
index 0000000000..ecd13034a6
--- /dev/null
+++ b/files/fr/web/api/cryptokey/index.html
@@ -0,0 +1,109 @@
+---
+title: CryptoKey
+slug: Web/API/CryptoKey
+tags:
+  - API
+  - Interface
+  - Reference
+  - Web Crypto API
+translation_of: Web/API/CryptoKey
+---
+<p>{{APIRef("Web Crypto API")}}</p>
+
+<p>L'interface <strong><code>CryptoKey</code></strong> représente une {{glossary("clef")}} cryptographique dérivé d'un algorithme de clef spécifique.</p>
+
+<p>Un objet <code>CryptoKey</code> peut être obtenu en utilisant : {{domxref("SubtleCrypto.generateKey()")}}, {{domxref("SubtleCrypto.deriveKey()")}} ou {{domxref("SubtleCrypto.importKey()")}}</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Cette interface n'hérite d'aucune propriété.</em></p>
+
+<dl>
+ <dt>{{domxref("CryptoKey.type")}}</dt>
+ <dd>Retourne  une énumération de valeurs représentant un type de clef, une clef secrète (pour un algorithme symétriques), une clef publique ou privée (pour un algorithme asymétrique)</dd>
+ <dt>{{domxref("CryptoKey.extractable")}}</dt>
+ <dd>Retourne un {{jsxref("booléen")}} indiquant si l'information peut être extraite de l'application ou non.</dd>
+ <dt>{{domxref("CryptoKey.algorithm")}}</dt>
+ <dd>Retourne un objet opaque représentant  un chiffre particulier avec lequel la clé doit être utilisée avec.</dd>
+ <dt>{{domxref("CryptoKey.usages")}}</dt>
+ <dd>Retourne un tableau contenant une énumération de valeurs indiquant quel est la clé qui peut être utilisée.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Cette interface n'hérite et n'implémente aucune méthode.</em></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('Web Crypto API', '#dfn-CryptoKey', 'CryptoKey') }}</td>
+   <td>{{ Spec2('Web Crypto API') }}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateur">Compatibilité navigateur</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{ CompatChrome(37) }}</td>
+   <td>{{ CompatGeckoDesktop(34) }}</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>Fonctionnalité</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>Support Basique</td>
+   <td>37</td>
+   <td>{{ CompatChrome(37) }}</td>
+   <td>{{ CompatGeckoMobile(34) }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Crypto")}} et {{domxref("Crypto.subtle")}}.</li>
+</ul>
diff --git a/files/fr/web/api/css/index.html b/files/fr/web/api/css/index.html
new file mode 100644
index 0000000000..7733aa3665
--- /dev/null
+++ b/files/fr/web/api/css/index.html
@@ -0,0 +1,128 @@
+---
+title: CSS
+slug: Web/API/CSS
+translation_of: Web/API/CSS
+---
+<div>{{APIRef("CSSOM")}}</div>
+
+<p><span id="result_box" lang="fr"><span class="hps">L'interface</span> <span class="hps">CSS</span> possède les <span class="hps">méthodes</span> utiles au CSS<span>.</span> <span class="hps">Aucun objet</span> de <span class="hps">cette interface</span> <span class="hps">ne sont implémentés </span><span>:</span> <span class="hps">il ne contient que</span> <span class="hps">des méthodes statiques</span> <span class="hps">et</span> <span class="hps">est donc une interface</span> <span class="hps">abstraite</span><span>.</span></span></p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><span id="result_box" lang="fr"><span class="hps">L'interface</span> <span class="hps">CSS</span> <span class="hps">est une</span> <span class="hps">interface</span> <span class="hps">et aucun</span> <span class="hps">objet de ce type</span> ne <span class="hps">peut être créé</span><span>:</span> <span class="hps">seules les méthodes</span> <span class="hps">statiques</span> <span class="hps">sont définies</span><span>.</span></span></p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><span id="result_box" lang="fr"><span class="hps">L'interface</span> <span class="hps">CSS</span> <span class="hps">est une</span> <span class="hps">interface</span> <span class="hps">et aucun</span> <span class="hps">objet de ce type</span> ne <span class="hps">peut être créé</span><span>:</span> <span class="hps">seules les méthodes</span> <span class="hps">statiques</span> <span class="hps">sont définies</span><span>.</span></span></p>
+
+<h2 id="Static_methods">Static methods</h2>
+
+<p><em>Aucun héritage de méthode statique</em>.</p>
+
+<dl>
+ <dt>{{domxref("CSS.supports()")}}</dt>
+ <dd>Retourne un {{domxref("Boolean")}} qui indique si la paire <em>propriété/valeur</em>, ou si la condition, passée en paramètre est supportée.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("CSS.escape()")}} {{experimental_inline}}</dt>
+ <dd>Utilisée pour protéger une chaine de caractère qui sera utiliser comme sélecteur CSS.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSSOM', '#the-css.escape%28%29-method', 'CSS')}}</td>
+   <td>{{Spec2('CSSOM')}}</td>
+   <td>Ajoute la méthode statique escape()</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Conditional', '#the-css-interface', 'CSS')}}</td>
+   <td>{{Spec2('CSS3 Conditional')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</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>Support simple</td>
+   <td>28.0</td>
+   <td>{{CompatGeckoDesktop("22.0")}} [1]</td>
+   <td>6.0</td>
+   <td>12.1</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>escape()</code>{{experimental_inline}}</td>
+   <td>46.0</td>
+   <td>{{CompatGeckoDesktop("31.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>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>Support simple</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>12.1</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>escape()</code>{{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("31.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Disponible avec l'option <code>layout.css.supports-rule.enabled</code> depuis Gecko 20.</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
+</ul>
diff --git a/files/fr/web/api/css_object_model/determining_the_dimensions_of_elements/index.html b/files/fr/web/api/css_object_model/determining_the_dimensions_of_elements/index.html
new file mode 100644
index 0000000000..04bb432759
--- /dev/null
+++ b/files/fr/web/api/css_object_model/determining_the_dimensions_of_elements/index.html
@@ -0,0 +1,43 @@
+---
+title: Déterminer les dimensions des éléments
+slug: Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements
+translation_of: Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements
+---
+<p>{{APIRef("CSSOM View")}}</p>
+
+<p>Il y a plusieurs propriétés que vous pouvez regarder dans le but de déterminer la largeur et la hauteur des éléments, et il peut être difficile de déterminer quelle est la bonne pour vos besoins.</p>
+
+<p>Cet article est conçu pour vous aider à prendre cette décision. Notez que toutes ces propriétés sont en lecture seule .</p>
+
+<p>Si vous voulez définir la largeur et la hauteur d'un élément, utilisez <code><a href="https://developer.mozilla.org/fr/docs/Web/CSS/width" title="https://developer.mozilla.org/fr/docs/Web/CSS/width">width</a></code> et <code><a href="https://developer.mozilla.org/fr/docs/Web/CSS/height" title="https://developer.mozilla.org/fr/docs/Web/CSS/height">height</a></code>; ou les propriétés <a href="https://developer.mozilla.org/fr/docs/Web/CSS/min-width" title="https://developer.mozilla.org/fr/docs/Web/CSS/min-width"> <code>min-width</code></a>, <a href="https://developer.mozilla.org/fr/docs/Web/CSS/max-width" title="https://developer.mozilla.org/fr/docs/Web/CSS/max-width"> <code>max-width</code></a>, <a href="https://developer.mozilla.org/fr/docs/Web/CSS/min-height" title="https://developer.mozilla.org/fr/docs/Web/CSS/min-height"> <code>min-height</code></a> et <a href="https://developer.mozilla.org/fr/docs/Web/CSS/max-height" title="https://developer.mozilla.org/fr/docs/Web/CSS/max-height"> <code>max-height</code></a>.</p>
+
+<h2 id="How_much_room_does_it_use_up.3F" name="How_much_room_does_it_use_up.3F">Que faut-il utiliser ?</h2>
+
+<p>Si vous avez besoin de connaître les dimensions totales de l'espace occupé par un élément, y compris la largeur du contenu visible, les barres de défilement (le cas échéant), le rembourrage, et les frontières, vous pouvez utiliser les propriétés <code><a href="/fr/DOM/element.offsetWidth" title="/en/DOM/element.offsetWidth">offsetWidth</a></code> et <code><a href="/fr/DOM/element.offsetHeight" title="/en/DOM/element.offsetHeight">offsetHeight</a></code>.</p>
+
+<p>La plupart du temps ce sont les mêmes que la largeur et la hauteur de <code><a href="/fr/DOM/element.getBoundingClientRect" title="/en/DOM/element.getBoundingClientRect">getBoundingClientRect()</a></code>, quand il n'y a pas de transformations appliquées à l'élément. En cas de transformations, <code>offsetWidth</code> et <code>offsetHeight</code> renvoie la disposition de la largeur et la hauteur de l'élément, tandis que <code>getBoundingClientRect()</code> retourne le rendu de la largeur et de la hauteur.</p>
+
+<p>A titre d'exemple, si l'élément a <code>width: 100px;</code> et <code>transform: scale(0.5);</code> <code>getBoundingClientRect()</code> retournera 50 comme largeur, tandis que <code>offsetWidth</code> retournera 100.</p>
+
+<p><img alt="Image:Dimensions-offset.png" class="internal" src="/@api/deki/files/186/=Dimensions-offset.png"></p>
+
+<h2 id="What.27s_the_size_of_the_displayed_content.3F" name="What.27s_the_size_of_the_displayed_content.3F">Quelle est la taille du contenu affiché ?</h2>
+
+<p>Si vous avez besoin de savoir combien prend d'espace le contenu réel affiché, y compris le rembourrage mais sans les frontières, les marges, ou les barres de défilement, vous pouvez utiliser les propriétés <code><a href="/fr/DOM/element.clientWidth" title="/en/DOM/element.clientWidth">clientWidth</a></code> et  <a href="/fr/DOM/element.clientHeight" title="/en/DOM/element.clientHeight"><code> clientHeight</code></a> :</p>
+
+<p><img alt="Image:Dimensions-client.png" class="internal" src="/@api/deki/files/185/=Dimensions-client.png"></p>
+
+<h2 id="How_big_is_the_content.3F" name="How_big_is_the_content.3F">Grandeur totale</h2>
+
+<p>Si vous avez besoin de connaître la taille réelle d'un élement, peu importe sa visibilité, vous devez utiliser les propriétés <code><a href="/fr/DOM/element.scrollWidth" title="/en/DOM/element.scrollWidth">scrollWidth</a></code> et <code><a href="/fr/docs/Web/API/Element.scrollHeight" title="/fr/docs/Web/API/Element.scrollHeight">scrollHeight</a></code>.</p>
+
+<p>Elles retournent la largeur et la hauteur de l'ensemble du contenu d'un élément, même si seulement une partie de celui-ci est actuellement visible en raison de l'utilisation des barres de défilement.</p>
+
+<p>Par exemple, si un élément de 600x400 pixels est affiché dans une boîte de défilement de 300x300 pixels, <code>scrollWidth</code> retourne 600 tandis que <code>scrollHeight</code> retourne 400.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/cssom-view/">http://www.w3.org/TR/cssom-view/</a></li>
+ <li><a href="https://docs.microsoft.com/en-us/previous-versions//hh781509(v=vs.85)">MSDN: Measuring Element Dimension and Location</a></li>
+</ul>
diff --git a/files/fr/web/api/css_object_model/index.html b/files/fr/web/api/css_object_model/index.html
new file mode 100644
index 0000000000..81547c72c2
--- /dev/null
+++ b/files/fr/web/api/css_object_model/index.html
@@ -0,0 +1,129 @@
+---
+title: CSS Object Model
+slug: Web/API/CSS_Object_Model
+tags:
+  - API
+  - CSSOM
+  - Reference
+translation_of: Web/API/CSS_Object_Model
+---
+<p>{{DefaultAPISidebar('CSSOM')}}</p>
+
+<p>Le <strong>CSS Object Model</strong> est un ensemble d’API permettant de manipuler le CSS depuis JavaScript. C’est l’équivalent des API DOM et HTML, mais pour CSS. Il permet de lire et modifier des styles CSS dynamiquement.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<div class="index">
+<ul>
+ <li>{{domxref("AnimationEvent")}}</li>
+ <li>{{domxref("CaretPosition")}}</li>
+ <li>{{domxref("CSS")}}</li>
+ <li>{{domxref("CSSCharsetRule")}}</li>
+ <li>{{domxref("CSSConditionRule")}}</li>
+ <li>{{domxref("CSSCounterStyleRule")}}</li>
+ <li>{{domxref("CSSFontFaceRule")}}</li>
+ <li>{{domxref("CSSFontFeatureValuesMap")}}</li>
+ <li>{{domxref("CSSFontFeatureValuesRule")}}</li>
+ <li>{{domxref("CSSGroupingRule")}}</li>
+ <li>{{domxref("CSSImportRule")}}</li>
+ <li>{{domxref("CSSKeyframeRule")}}</li>
+ <li>{{domxref("CSSKeyframesRule")}}</li>
+ <li>{{domxref("CSSMarginRule")}}</li>
+ <li>{{domxref("CSSMediaRule")}}</li>
+ <li>{{domxref("CSSNamespaceRule")}}</li>
+ <li>{{domxref("CSSPageRule")}}</li>
+ <li>{{domxref("CSSRule")}}</li>
+ <li>{{domxref("CSSRuleList")}}</li>
+ <li>{{domxref("CSSStylesheet")}}</li>
+ <li>{{domxref("CSSStyleDeclaration")}}</li>
+ <li>{{domxref("CSSSupportsRule")}}</li>
+ <li>{{domxref("CSSVariablesMap")}}</li>
+ <li>{{domxref("CSSViewportRule")}}</li>
+ <li>{{domxref("ElementCSSInlineStyle")}}</li>
+ <li>{{domxref("GeometryUtils")}}</li>
+ <li>{{domxref("GetStyleUtils")}}</li>
+ <li>{{domxref("LinkStyle")}}</li>
+ <li>{{domxref("MediaList")}}</li>
+ <li>{{domxref("MediaQueryList")}}</li>
+ <li>{{domxref("PseudoElement")}}</li>
+ <li>{{domxref("Screen")}}</li>
+ <li>{{domxref("Stylesheet")}}</li>
+ <li>{{domxref("StylesheetList")}}</li>
+ <li>{{domxref("TransitionEvent")}}</li>
+</ul>
+</div>
+
+<p>Quelques autres interfaces sont également étentues par les spécifications relatives au CSSOM : {{domxref("Document")}}, {{domxref("Window")}}, {{domxref("Element")}}, {{domxref("HTMLElement")}}, {{domxref("HTMLImageElement")}}, {{domxref("Range")}}, {{domxref("MouseEvent")}}, et {{domxref("SVGElement")}}.</p>
+
+<h2 id="Tutoriels">Tutoriels</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements">Déterminer les dimensions l’un élément</a> (nécéssite une mise à jour, car datant de l’époque DHTML/Ajax).</li>
+ <li><a href="/fr/docs/Web/API/CSS_Object_Model/Managing_screen_orientation">Gérer l’orientation de l’écran</a></li>
+</ul>
+
+<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("CSSOM")}}</td>
+   <td>{{Spec2("CSSOM")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSSOM View")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Screen Orientation")}}</td>
+   <td>{{Spec2("Screen Orientation")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Fonts")}}</td>
+   <td>{{Spec2("CSS3 Fonts")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Animations")}}</td>
+   <td>{{Spec2("CSS3 Animations")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Transitions")}}</td>
+   <td>{{Spec2("CSS3 Transitions")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Variables")}}</td>
+   <td>{{Spec2("CSS3 Variables")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Conditional")}}</td>
+   <td>{{Spec2("CSS3 Conditional")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Device")}}</td>
+   <td>{{Spec2("CSS3 Device")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Counter Styles")}}</td>
+   <td>{{Spec2("CSS3 Counter Styles")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Notes_sur_la_compatibilité_des_navigateurs">Notes sur la compatibilité des navigateurs</h2>
+
+<p>Toutes ces fonctionnalités ont été ajoutées petit à petit au fil des années dans les différents navigateurs : ce fut un processus assez complexe, impossible à résumer en un simple tableau. Veuillez vous référer aux interfaces spécifiques pour connaître leurs disponibilités.</p>
diff --git a/files/fr/web/api/css_object_model/managing_screen_orientation/index.html b/files/fr/web/api/css_object_model/managing_screen_orientation/index.html
new file mode 100644
index 0000000000..39b279e9d3
--- /dev/null
+++ b/files/fr/web/api/css_object_model/managing_screen_orientation/index.html
@@ -0,0 +1,180 @@
+---
+title: Gérer l'orientation de l'écran
+slug: Web/API/CSS_Object_Model/Managing_screen_orientation
+tags:
+  - Avancé
+  - CSSOM View
+  - Guide
+  - Screen Orientation
+translation_of: Web/API/CSS_Object_Model/Managing_screen_orientation
+---
+<p>{{SeeCompatTable}}{{APIRef}}</p>
+
+<h2 id="Sommaire">Sommaire</h2>
+
+<p>L'orientation de l'écran est quelque chose de légèrement différent de <a href="/fr/docs/WebAPI/Detecting_device_orientation" title="/en-US/docs/WebAPI/Detecting_device_orientation">l'orientation de l'appareil</a>. Même si un appareil n'a pas la capacité de détecter sa propre orientation, un écran en possède toujours une. Et si on est capable de connaître son orientation, il est bon d'avoir la possibilité de contrôler l'orientation de l'écran afin de préserver ou d'adapter l'interface d'une application web.</p>
+
+<p>Il y a plusieurs manières de gérer l'orientation de l'écran, à la fois avec CSS et JavaScript:</p>
+
+<ul>
+ <li>La première est la <a href="/fr/docs/Web/CSS/Requ%C3%AAtes_m%C3%A9dia/Utiliser_les_Media_queries#orientation" title="en-US/CSS/Media queries#orientation">media query orientation</a>. Cela permet au contenu d'ajuster sa mise en forme à l'aide de CSS, selon que la fenêtre soit en mode paysage (c'est à dire que la largeur est plus grande que la hauteur) ou en mode portrait (que sa hauteur est plus grande que sa largeur).</li>
+ <li>La deuxième est l'API JavaScript d'orientation d'écran, qui peut être utilisée pour récupérer l'orientation en cours de l'écran et éventuellement de la verrouiller.</li>
+</ul>
+
+<h2 id="Ajuster_la_mise_en_page_selon_l'orientation">Ajuster la mise en page selon l'orientation</h2>
+
+<p>Un des cas d'utilisation les plus courants pour les changements d'orientation est quand vous souhaitez modifier la mise en page de votre contenu selon l'orientation de l'appareil. Par exemple, peut-être que vous voudriez qu'une barre d'outils s'étende le long de la dimension la plus longue de l'appareil. En utilisant une media query, vous pouvez le faire facilement et automatiquement.</p>
+
+<p>Prenons pour exemple le code HTML suivant:</p>
+
+<pre class="brush: html">&lt;ul id="toolbar"&gt;
+  &lt;li&gt;A&lt;/li&gt;
+  &lt;li&gt;B&lt;/li&gt;
+  &lt;li&gt;C&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia nisi nec sem viverra vitae fringilla nulla ultricies. In ac est dolor, quis tincidunt leo. Cras commodo quam non tortor consectetur eget rutrum dolor ultricies. Ut interdum tristique dapibus. Nullam quis malesuada est.&lt;/p&gt;
+</pre>
+
+<p>Le CSS s'appuie sur une media query <code>orientation</code> pour gérer les styles spécifiques liés à l'orientation de l'écran.</p>
+
+<pre class="brush: css">/* D'abord, on définit les styles communs */
+
+html, body {
+  width : 100%;
+  height: 100%;
+}
+
+body {
+  border: 1px solid black;
+
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+p {
+  font   : 1em sans-serif;
+  margin : 0;
+  padding: .5em;
+}
+
+ul {
+  list-style: none;
+
+  font   : 1em monospace;
+  margin : 0;
+  padding: .5em;
+
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+
+  background: black;
+}
+
+li {
+  display: inline-block;
+  margin : 0;
+  padding: 0.5em;
+  background: white;
+}
+</pre>
+
+<p>Une fois qu'on a définit les styles communs, on peut définir des cas spéciaux selon l'orientation.</p>
+
+<pre class="brush: css">/* En mode portrait, on veut la barre d'outils en haut */
+
+@media screen and (orientation: portrait) {
+  #toolbar {
+    width: 100%;
+  }
+}
+
+/* En mode paysage, on veut la barre d'outils à gauche */
+
+@media screen and (orientation: landscape) {
+  #toolbar {
+    position: fixed;
+    width: 2.65em;
+    height: 100%;
+  }
+
+  p {
+    margin-left: 2em;
+  }
+
+  li + li {
+    margin-top: .5em;
+  }
+}
+</pre>
+
+<p>Et voici le résultat:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Portrait</th>
+   <th scope="col">Landscape</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ EmbedLiveSample("Ajuster_la_mise_en_page_selon_l'orientation", 180, 350) }}</td>
+   <td>{{ EmbedLiveSample("Ajuster_la_mise_en_page_selon_l'orientation", 350, 180) }}</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Note:</strong> La media query orientation s'applique en vérité selon l'orientation de la fenêtre du navigateur (ou iframe) et non l'orientation de l'appareil.</p>
+</div>
+
+<h2 id="Verrouiller_l'orientation_de_l'écran">Verrouiller l'orientation de l'écran</h2>
+
+<div class="warning">
+<p><strong>Attention:</strong> Cette API est expérimentale et est actuellement disponible sur <a href="/en-US/docs/Mozilla/Firefox_OS" title="/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a> et <a href="/en-US/docs/Mozilla/Firefox_for_Android" title="/en-US/docs/Mozilla/Firefox_for_Android">Firefox pour Android</a> avec le préfixe <code>moz</code>, et sur Internet Explorer pour Windows 8.1 et plus avec le préfixe <code>ms</code>.</p>
+</div>
+
+<p>Certains appareils (principalement les appareils mobiles) peuvent changer dynamiquement d'orientation d'écran selon leur propre orientation, garantissant que l'utilisateur sera toujours capable de lire ce qu'il y a sur l'écran. Bien que ce comportement soit parfaitement adapté au contenu texte, certains contenus peuvent être affectés négativement par ce changement. Par exemple, les jeux basés sur l'orientation de l'appareil être gachés par un tel changement.</p>
+
+<p>L'API Screen Orientation (orientation de l'écran) est faite pour empêcher ou gérer un tel changement.</p>
+
+<h3 id="Écouter_les_changements_d'orientation">Écouter les changements d'orientation</h3>
+
+<p>L'événement {{event("orientationchange")}} est déclenché chaque fois que l'appareil change l'orientation de l'écran et l'orientation peut elle-même être lue avec la propriété {{domxref("Screen.orientation")}}.</p>
+
+<pre class="brush: js">screen.addEventListener("orientationchange", function () {
+  console.log("The orientation of the screen is: " + screen.orientation);
+});
+</pre>
+
+<h3 id="Empêcher_le_changement_d'orientation">Empêcher le changement d'orientation</h3>
+
+<p>Toute application web peut verrouiller l'écran dans une orientation pour répondre à ses besoins. L'écran est verrouillé en utilisant la méthode {{domxref("Screen.lockOrientation()")}} et dévérouillé en utilisant {{domxref("Screen.unlockOrientation()")}}.</p>
+
+<p>{{domxref("Screen.lockOrientation()")}} accepte une chaîne de caractères (ou une série de chaînes de caractères) pour définir le type de verrouillage à appliquer. Les valeurs acceptées sont: <code>portrait-primary</code>, <code>portrait-secondary</code>, <code>landscape-primary</code>, <code>landscape-secondary</code>, <code>portrait</code>, <code>landscape</code> (Voir {{domxref("Screen.lockOrientation")}}  pour en savoir plus sur ces valeurs).</p>
+
+<pre class="brush: js">screen.lockOrientation('landscape');</pre>
+
+<div class="note">
+<p><strong>Note:</strong> Un verrouillage d'écran est dépendant de l'application web. Si une a application A est verrouillée à <code>landscape</code> et l'application B est verrouillée à <code>portrait</code>, passer de l'application A à B ou à A ne va pas déclencher un événement {{event("orientationchange")}} parce que les deux applications gardent l'orientation qu'elles avaient.</p>
+
+<p>En revanche, verrouiller l'orientation peut décléncher l'événement {{event("orientationchange")}} si l'orientation a dû être changée pour satisfaire aux critères du verrouillage.</p>
+</div>
+
+<h2 id="Firefox_OS_et_Android_Verrouiller_l'orientation_avec_le_manifeste">Firefox OS et Android: Verrouiller l'orientation avec le manifeste</h2>
+
+<p>Pour Firefox OS et Firefox Android (bientôt pour la version bureau de Firefox également), vous pouvez le champ <a href="/en-US/Apps/Build/Manifest#orientation">orientation</a> dans le fichier manifeste de votre application, par exemple:</p>
+
+<pre class="brush: json">"orientation": "portrait"</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Screen.orientation")}}</li>
+ <li>{{domxref("Screen.lockOrientation()")}}</li>
+ <li>{{domxref("Screen.unlockOrientation()")}}</li>
+ <li>{{domxref("Screen.onorientationchange")}}</li>
+ <li><a href="/fr/docs/Web/CSS/Requ%C3%AAtes_m%C3%A9dia/Utiliser_les_Media_queries#orientation" title="en-US/CSS/Media queries#orientation">Media query orientation</a></li>
+ <li><a class="external" href="http://hacks.mozilla.org/2009/06/media-queries/" title="http://hacks.mozilla.org/2009/06/media-queries/">A short introduction to media queries in Firefox 3.5</a></li>
+</ul>
diff --git a/files/fr/web/api/cssmatrix/index.html b/files/fr/web/api/cssmatrix/index.html
new file mode 100644
index 0000000000..efd0ef8b57
--- /dev/null
+++ b/files/fr/web/api/cssmatrix/index.html
@@ -0,0 +1,75 @@
+---
+title: CSSMatrix
+slug: Web/API/CSSMatrix
+tags:
+  - API
+  - Reference
+translation_of: Web/API/DOMMatrix
+---
+<div>
+<div>{{APIRef("CSSOM")}}{{Non-standard_header}}</div>
+
+<p>Une <code><strong>CSSMatrix</strong></code> représente une matrice homogène 4x4 dans laquelle il est possible d'appliquer des transformations 2D ou 3D. Cette classe faisait à un moment partie du module de transitions CSS (Level 3) mais elle n'a pas été propagée dans le brouillon de travail (<em>Working Draft</em>) actuel. Utilisez plutôt <code><a href="/en-US/docs/Web/API/DOMMatrix">DOMMatrix</a>.</code></p>
+
+<h2 id="Compatibilé_des_navigateurs">Compatibilé des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[2]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>11<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[2]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Internet Explorer a  intégré cette API en tant que <code>MSCSSMatrix</code>. Dans la version 11 l'alias <code>WebKitCSSMatrix</code> a été ajouté.</p>
+
+<p>[2] WebKit a intégré cette API en tant que <code>WebKitCSSMatrix</code>.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://msdn.microsoft.com/en-us/library/ie/hh772390(v=vs.85).aspx">MSDN : <code>Documentation sur MSCSSMatrix</code></a></li>
+ <li><a href="https://developer.apple.com/library/safari/documentation/AudioVideo/Reference/WebKitCSSMatrixClassReference/index.html">Safari Developer Library : Documentation sur WebKitCSSMatrix</a></li>
+ <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=717722">Mozilla : Bug 717722 : Exécution de <code>(WebKit)CSSMatrix()</code></a></li>
+</ul>
+</div>
diff --git a/files/fr/web/api/cssmediarule/index.html b/files/fr/web/api/cssmediarule/index.html
new file mode 100644
index 0000000000..36e57e5af6
--- /dev/null
+++ b/files/fr/web/api/cssmediarule/index.html
@@ -0,0 +1,70 @@
+---
+title: CSSMediaRule
+slug: Web/API/CSSMediaRule
+tags:
+  - API
+  - CSSOM
+  - Interface
+  - Reference
+translation_of: Web/API/CSSMediaRule
+---
+<div>{{APIRef("CSSOM")}}</div>
+
+<p>L'interface <strong><code>CSSMediaRule</code></strong> représente une seule règle CSS {{cssxref("@media")}}. Elle met en œuvre l'interface {{domxref("CSSConditionRule")}}, et donc l'interface {{domxref("CSSGroupingRule")}} et l'interface {{domxref("CSSRule")}} avec une valeur de type <code>4</code> (<code>CSSRule.MEDIA_RULE</code>).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La syntaxe est décrite en utilisant le format <a href="http://dev.w3.org/2006/webapi/WebIDL/">WebIDL</a>.</p>
+
+<pre class="syntaxbox">interface CSSMediaRule : CSSConditionRule {
+    readonly attribute MediaList media;
+}
+</pre>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p>En tant que {{domxref("CSSConditionRule")}}, et donc à la fois {{domxref("CSSGroupingRule")}} et {{domxref("CSSRule")}}, <code>CSSMediaRule</code> implémente également les propriétés de ces interfaces. Elle a la propriété spécifique suivante :</p>
+
+<dl>
+ <dt>{{domxref("CSSMediaRule.media")}} {{readonlyinline}}</dt>
+ <dd>Spécifie un {{domxref("MediaList")}} représentant le support de destination prévu pour les informations de style.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p>En tant que {{domxref("CSSConditionRule") }}, et donc à la fois {{domxref("CSSGroupingRule")}} et {{domxref("CSSRule")}}, <code>CSSMediaRule</code> met également en œuvre les méthodes de cette interface. Elle n'a pas de méthodes spécifiques.</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('CSS3 Conditional', '#the-cssmediarule-interface', 'CSSMediaRule') }}</td>
+   <td>{{ Spec2('CSS3 Conditional')}}</td>
+   <td>Dérivé de la règle  {{domxref("CSSConditionRule")}}.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSSOM', '#the-cssmediarule-interface', 'CSSMediaRule') }}</td>
+   <td>{{ Spec2('CSSOM') }}</td>
+   <td>Aucun changement par rapport à {{SpecName('DOM2 Style')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Style', 'css.html#CSS-CSSMediaRule', 'CSSMediaRule') }}</td>
+   <td>{{ Spec2('DOM2 Style') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous un <em>pull request</em>.</div>
+
+<p>{{Compat("api.CSSMediaRule")}}</p>
diff --git a/files/fr/web/api/cssrulelist/index.html b/files/fr/web/api/cssrulelist/index.html
new file mode 100644
index 0000000000..861b32be7f
--- /dev/null
+++ b/files/fr/web/api/cssrulelist/index.html
@@ -0,0 +1,49 @@
+---
+title: CSSRuleList
+slug: Web/API/CSSRuleList
+tags:
+  - CSSOM
+  - DOM
+translation_of: Web/API/CSSRuleList
+---
+<p>{{ APIRef("CSSOM") }}</p>
+
+<h2 id="Summary" name="Summary">Résumé</h2>
+
+<p>A <code>CSSRuleList</code> est un objet de type tableau contenant une collection ordonnée d'objects <code><a href="/en/DOM/cssRule" title="en/DOM/cssRule">CSSRule</a></code>.</p>
+
+<h2 id="Syntax" name="Syntax">Description</h2>
+
+<p>Chaque règle <code>CSSRule</code> peut être atteinte via <code><var>rules</var>.item(<var>index</var>),</code> ou simplement <code><var>rules</var>[<var>index</var>]</code>, où <code><var>rules</var></code> est un objet implementant l'interface  <code>CSSRuleList</code>, et <code><var>index</var></code> est l'index de la règle (commence à zéro comme les tableaux), dans l'ordre dans lequel elle apparait dans la feuille de style CSS. Le nombre d'objets est <code><var>rules</var>.length</code>.</p>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">// récuperer la première règle de la première feuille de style
+var firstRule = document.styleSheets[0].cssRules[0];
+</pre>
+
+<h2 id="Notes" name="Notes">Voir aussi</h2>
+
+<ul>
+ <li><code><a href="/en/DOM/cssRule" title="en/DOM/CSSRule">CSSRule</a></code></li>
+</ul>
+
+<h3 id="Implémentations_de_CSSRuleList">Implémentations de CSSRuleList</h3>
+
+<p>Il existe plusieurs propriétés dans le CSSOM qui retourne une <code>CSSRuleList</code> :</p>
+
+<ul>
+ <li>{{ domxref("CSSStyleSheet") }} property {{ domxref("CSSStyleSheet/cssRules", "cssRules") }}</li>
+ <li>{{ domxref("CSSMediaRule") }} property {{ domxref("CSSMediaRule/cssRules", "cssRules") }}</li>
+ <li>{{ domxref("CSSKeyframesRule") }} property {{ domxref("CSSKeyframesRule/cssRules", "cssRules") }}</li>
+ <li>{{ domxref("CSSMozDocumentRule") }} property {{ domxref("CSSMozDocumentRule/cssRules", "cssRules") }}</li>
+</ul>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSRuleList" title="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSRuleList">DOM Level 2 Style: <code>CSSRuleList</code> interface</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleSheet-cssRules">DOM Level 2 Style: <code>CSSStyleSheet</code> attribute <code>cssRules</code></a></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSMediaRule-cssRules" title="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSMediaRule-cssRules">DOM Level 2 Style: <code>CSSMediaRule</code> attribute </a><code><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSMediaRule-cssRules" title="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSMediaRule-cssRules">cssRules</a></code></li>
+ <li><a class="external" href="http://dev.w3.org/csswg/css3-animations/#DOM-CSSKeyframesRule" title="http://dev.w3.org/csswg/css3-animations/#DOM-CSSKeyframesRule">CSS Animations: <code>CSSKeyframesRule</code> interface</a></li>
+</ul>
diff --git a/files/fr/web/api/cssstyledeclaration/csstext/index.html b/files/fr/web/api/cssstyledeclaration/csstext/index.html
new file mode 100644
index 0000000000..509fcc5969
--- /dev/null
+++ b/files/fr/web/api/cssstyledeclaration/csstext/index.html
@@ -0,0 +1,35 @@
+---
+title: CSSStyleDeclaration.cssText
+slug: Web/API/CSSStyleDeclaration/cssText
+translation_of: Web/API/CSSStyleDeclaration/cssText
+---
+<p>A ne pas confondre avec la règle de style de feuille de style {{domxref("CSSRule.cssText")}}.</p>
+
+<div>{{APIRef("CSSOM") }}</div>
+
+<h2 id="Summary" name="Summary">Résumé</h2>
+
+<p><strong>cssText</strong> retourne ou définit seulement le texte de la déclaration de style <strong>inline</strong> de l'élément. Pour pouvoir définir dynamiquement une règle d'une <strong>stylesheet</strong>, voir <a href="/fr-FR/docs/DOM/Using_dynamic_styling_information" title="DOM/Using_dynamic_styling_information">Utilisation d'informations de mise en forme dynamiques.</a></p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="brush: js"><em>chaine</em> = elem.style.cssText
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: html"><code>&lt;span id="s1" style="</code>color: red;"<code>&gt;
+Du texte
+&lt;/span&gt;</code>
+
+&lt;script&gt;
+  var elem = document.getElementById("s1");
+  alert(elem.style.cssText); // "color: red;"
+&lt;/script&gt;
+</pre>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration">DOM Level 2 Style CSS - Interface CSSStyleDeclaration (introduced in DOM Level 2)</a></li>
+</ul>
diff --git a/files/fr/web/api/cssstyledeclaration/index.html b/files/fr/web/api/cssstyledeclaration/index.html
new file mode 100644
index 0000000000..a770fe95fc
--- /dev/null
+++ b/files/fr/web/api/cssstyledeclaration/index.html
@@ -0,0 +1,97 @@
+---
+title: CSSStyleDeclaration
+slug: Web/API/CSSStyleDeclaration
+tags:
+  - API
+  - CSSOM
+  - Interface
+  - NeedsCompatTable
+  - NeedsMarkupWork
+  - Reference
+translation_of: Web/API/CSSStyleDeclaration
+---
+<p>{{ APIRef("CSSOM") }}</p>
+
+<h2 id="Summary" name="Summary">Résumé</h2>
+
+<p><code>CSSStyleDeclaration</code> représente une collection de paires propriété/valeur CSS. Elle est utilisée dans quelques API :</p>
+
+<ul>
+ <li>{{domxref("HTMLElement.style")}} - pour manipuler le style d'un seul élément (&lt;elem style="..."&gt;) ;</li>
+ <li>(AFAIRE : à reformuler) est une interface avec le <a href="http://www.w3.org/TR/1998/REC-CSS2-19980512/syndata.html#block">declaration block</a> renvoyé par la propriété <code><a href="/en/DOM/cssRule.style" title="en/DOM/cssRule.style">style</a></code> d'une <code>cssRule</code> dans une <a href="/fr/docs/Web/API/StyleSheet">feuille de style</a>, lorsque la règle est une <a href="/en/DOM/cssRule#CSSStyleRule">CSSStyleRule</a> ;</li>
+ <li><code>CSSStyleDeclaration</code> est également une interface en <strong>lecture seule</strong> pour le résultat de <a href="/fr/docs/Web/API/Window/getComputedStyle">window.getComputedStyle()</a>.</li>
+</ul>
+
+<h2 id="Syntax" name="Syntax">Attributs</h2>
+
+<dl>
+ <dt>{{domxref("CSSStyleDeclaration.cssText")}}</dt>
+ <dd>Représentation textuelle du bloc de déclaration. La définition de cet attribut modifie le style.</dd>
+ <dt>{{domxref("CSSStyleDeclaration.length")}} {{readonlyInline}}</dt>
+ <dd>Le nombre de propriétés. Voir la méthode {{domxref("CSSStyleDeclaration.item",'item()')}} ci-dessous.</dd>
+ <dt>{{domxref("CSSStyleDeclaration.parentRule")}} {{readonlyInline}}</dt>
+ <dd>Le contenant {{domxref("CSSRule")}}.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("CSSStyleDeclaration.getPropertyPriority()")}}</dt>
+ <dd>Retourne la priorité facultative "important".</dd>
+ <dt>{{domxref("CSSStyleDeclaration.getPropertyValue()")}}</dt>
+ <dd>Retourne la valeur de la propriété avec un nom de propriété.</dd>
+ <dt>{{domxref("CSSStyleDeclaration.item()")}}</dt>
+ <dd>Retourne un nom de propriété.</dd>
+ <dt>{{domxref("CSSStyleDeclaration.removeProperty()")}}</dt>
+ <dd>Supprime une propriété du bloc de déclaration CSS.</dd>
+ <dt>{{domxref("CSSStyleDeclaration.setProperty()")}}</dt>
+ <dd>Modifie une propriété CSS existante ou crée une nouvelle propriété CSS dans le bloc de déclaration.</dd>
+ <dt>{{domxref("CSSStyleDeclaration.getPropertyCSSValue()")}} {{obsolete_inline}}</dt>
+ <dd><span style="color: #ff0000;">Uniquement supporté via getComputedStyle dans Firefox.</span> Retourne la valeur de la propriété en tant que {{domxref("CSSPrimitiveValue")}} ou <code>null</code> pour les <a href="/fr/docs/Web/CSS/Propriétés_raccourcies">propriétés raccourcies</a>.</dd>
+</dl>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">var objStyle = document.styleSheets[0].cssRules[0].style;
+console.log(objStyle.cssText);
+
+for (var i = objStyle.length; i--;) {
+  var chaineNom = objStyle[i];
+  objStyle.removeProperty(chaineNom);
+}
+
+console.log(objStyle.cssText);</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Le bloc de déclaration est la partie de la règle de mise en forme qui apparaît dans les accolades et qui fournit les définitions de mise en forme (pour le sélecteur, la partie qui précède les accolades).</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Properties_Reference" title="/en-US/docs/Web/CSS/CSS_Properties_Reference">Référence des propriétés CSS</a></li>
+</ul>
+
+<h2 id="Specification" name="Specification">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('CSSOM', '#the-cssstyledeclaration-interface', 'CSSStyleDeclaration')}}</td>
+   <td>{{Spec2('CSSOM')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Style', 'css.html#CSS-CSSStyleDeclaration', 'CSSPrimitiveValue')}}</td>
+   <td>{{Spec2('DOM2 Style')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/api/cssstylerule/index.html b/files/fr/web/api/cssstylerule/index.html
new file mode 100644
index 0000000000..1ab5e5ace3
--- /dev/null
+++ b/files/fr/web/api/cssstylerule/index.html
@@ -0,0 +1,105 @@
+---
+title: CSSStyleRule
+slug: Web/API/CSSStyleRule
+translation_of: Web/API/CSSStyleRule
+---
+<p>{{ APIRef("CSSOM") }}</p>
+
+<p><span id="noHighlight_0.9203101251653377">CSSStyleRule représente une règle de style CSS unique. Il implémente l'interface {{domxref ("CSSRule")}} avec une valeur de type 1 (CSSRule STYLE_RULE).</span></p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p><span id="noHighlight_0.41769108826443613">La syntaxe est décrite à l'aide du format WebIDL.</span></p>
+
+<pre>interface CSSStyleRule : CSSRule {
+    attribute DOMString selectorText;
+    readonly attribute CSSStyleDeclaration style;
+};</pre>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt id="selectorText">{{domxref("CSSStyleRule.selectorText")}}</dt>
+ <dd><span id="noHighlight_0.5203750065288182">Obtient la représentation textuelle du sélecteur pour cette règle, par exemple "H1, H2".</span></dd>
+ <dt id="style">{{domxref("CSSStyleRule.style")}}</dt>
+ <dd>Retourne l'objet {{domxref("CSSStyleDeclaration")}} pour cette règle.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSSOM', '#the-cssstylerule-interface', 'CSSStyleRule') }}</td>
+   <td>{{ Spec2('CSSOM') }}</td>
+   <td>pas de changement</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('DOM2 Style', 'css.html#CSS-CSSStyleRule', 'CSSRule') }}</td>
+   <td>{{ Spec2('DOM2 Style') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatVersionUnknown() }}<br>
+     </td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fr/web/api/cssvalue/index.html b/files/fr/web/api/cssvalue/index.html
new file mode 100644
index 0000000000..871a2b70ce
--- /dev/null
+++ b/files/fr/web/api/cssvalue/index.html
@@ -0,0 +1,85 @@
+---
+title: CSSValue
+slug: Web/API/CSSValue
+tags:
+  - API
+  - DOM
+  - Interface
+  - Reference
+translation_of: Web/API/CSSValue
+---
+<div>{{APIRef ("DOM")}}</div>
+
+<div>L'interface <strong>CSSValue</strong> représente la valeur calculée actuelle d'une propriété CSS.</div>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("CSSValue.cssText")}}</dt>
+ <dd>
+ <p>Une {{domxref ("DOMString")}} représentant la valeur actuelle.</p>
+ </dd>
+ <dt>{{domxref("CSSValue.cssValueType")}} {{readonlyInline}}</dt>
+ <dd>Un raccourci non signé ( <code>unsigned short</code> ) représentant un code définissant le type de valeur. Les valeurs possibles sont:
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td class="header">Constant</td>
+    <td class="header">Description</td>
+   </tr>
+   <tr>
+    <td><code>CSS_CUSTOM</code></td>
+    <td>
+     <p>La valeur est une valeur personnalisée.</p>
+    </td>
+   </tr>
+   <tr>
+    <td><code>CSS_INHERIT</code></td>
+    <td>La valeur est héritée et cssText contient "inherit".</td>
+   </tr>
+   <tr>
+    <td><code>CSS_PRIMITIVE_VALUE</code></td>
+    <td>La valeur est une valeur primitive et une instance de l'interface {{domxref ("CSSPrimitiveValue")}} peut être obtenue en utilisant des méthodes de casting spécifiques à la liaison sur cette instance de l'interface CSSValue.</td>
+   </tr>
+   <tr>
+    <td><code>CSS_VALUE_LIST</code></td>
+    <td>La valeur est une liste CSSValue et une instance de l'interface {{domxref ("CSSValueList")}} peut être obtenue en utilisant des méthodes de casting spécifiques à la liaison sur cette instance de l'interface CSSValue.</td>
+   </tr>
+  </tbody>
+ </table>
+ </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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Style', 'css.html#CSS-CSSValue', 'CSSValue')}}</td>
+   <td>{{Spec2('DOM2 Style')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div>
+
+
+<p>{{Compat("api.CSSValue")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+</div>
+
+<ul>
+ <li>{{domxref("CSSPrimitiveValue")}}</li>
+ <li>{{domxref("CSSValueList")}}</li>
+</ul>
diff --git a/files/fr/web/api/cssvaluelist/index.html b/files/fr/web/api/cssvaluelist/index.html
new file mode 100644
index 0000000000..cb78129d96
--- /dev/null
+++ b/files/fr/web/api/cssvaluelist/index.html
@@ -0,0 +1,70 @@
+---
+title: CSSValueList
+slug: Web/API/CSSValueList
+tags:
+  - API
+  - CSSValueList
+  - DOM
+  - Interface
+  - Reference
+translation_of: Web/API/CSSValueList
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>L'interface <code><strong>CSSValueList</strong></code> dérive de l'interface {{domxref("CSSValue")}} et fournit l'abstraction d'une collection ordonnée de valeurs CSS.</p>
+
+<p>Certaines propriétés autorisent une liste vide dans leur syntaxe. Dans ce cas, ces propriétés prennent l'identifiant <code>none</code>. Ainsi, une liste vide signifie que la propriété a une valeur <code>none</code> (<em>aucune valeur</em>).</p>
+
+<p>Les éléments dans <code>CSSValueList</code> sont accessibles par un index integral commençant à 0.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Hérite des propriétés de son parent {{domxref("CSSValue")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("CSSValueList.length")}} {{readonlyInline}}</dt>
+ <dd>Un <code>unsigned long</code> représentant le nombre de <code>CSSValues</code> (<em>valeurs CSS</em>) dans la liste.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("CSSValueList.item()")}}</dt>
+ <dd>Cette méthode est utilisée pour  récupérer une {{domxref("CSSValue")}} <em>(valeur CSS</em>) par index ordinal. L'ordre dans cette collection représente l'ordre des valeurs dans la propriété de style CSS. Si index est supérieur ou égal au nombre de valeurs de la liste, elle renvoie <code>null</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">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Style', 'css.html#CSS-CSSValuesList', 'CSSValuesList')}}</td>
+   <td>{{Spec2('DOM2 Style')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div>
+
+
+<p>{{Compat("api.CSSValueList")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+</div>
+
+<ul>
+ <li>{{domxref("CSSPrimitiveValue")}}</li>
+ <li>{{domxref("CSSValue")}}</li>
+</ul>
diff --git a/files/fr/web/api/customevent/detail/index.html b/files/fr/web/api/customevent/detail/index.html
new file mode 100644
index 0000000000..0890ad04bb
--- /dev/null
+++ b/files/fr/web/api/customevent/detail/index.html
@@ -0,0 +1,73 @@
+---
+title: CustomEvent.detail
+slug: Web/API/CustomEvent/detail
+tags:
+  - API
+  - DOM
+  - Propriétés
+  - Évènement personnalisé
+translation_of: Web/API/CustomEvent/detail
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>Le <code><strong>detail</strong></code> de la propriété en lecture seule de l'interface {{domxref("CustomEvent")}} renvoie toutes les données transmises lors de l'initialisation de l'évènement.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"> let myDetail = <em>customEventInstance.detail</em>;</pre>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Toute donnée initialisée avec l'évènement.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">// ajoute un écouteur d'évènement approprié
+obj.addEventListener("cat", function(e) { process(e.detail) });
+
+// crée et distribue l'évènement
+let event = new CustomEvent("cat", {
+  detail: {
+    hazcheeseburger: true
+  }
+});
+obj.dispatchEvent(event);
+
+// Retournera un objet contenant la propriété hazcheeseburger
+let myDetail = <em>event.detail</em>;
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table" style="height: 49px; width: 1000px;">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#dom-customeventinit-detail','detail')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.CustomEvent.detail")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("CustomEvent")}}</li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/web/api/customevent/index.html b/files/fr/web/api/customevent/index.html
new file mode 100644
index 0000000000..d49584c1fb
--- /dev/null
+++ b/files/fr/web/api/customevent/index.html
@@ -0,0 +1,95 @@
+---
+title: CustomEvent
+slug: Web/API/CustomEvent
+tags:
+  - API
+  - DOM
+  - Interface
+  - Reference
+  - évènements
+translation_of: Web/API/CustomEvent
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>Les interfaces <code>CustomEvent</code> DOM sont des évènements initialisés par une application pour n'importe quel usage.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Method_overview" name="Method_overview">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}</dt>
+ <dd>Crée un <code>CustomEvent.</code></dd>
+</dl>
+
+<h2 id="Attributes" name="Attributes">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("CustomEvent.detail")}} {{readonlyinline}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Toute donnée transmise lors de l'initialisation de l'événement.</span></span></dd>
+</dl>
+
+<p>Cette interface hérite des propriétés de son parent {{domxref("Event")}}:</p>
+
+<p>{{Page("/fr/docs/Web/API/Event", "Propriétés")}}</p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("CustomEvent.initCustomEvent()")}} {{deprecated_inline}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Initialise un objet CustomEvent.</span> <span>Si l'événement a déjà été distribué, cette méthode ne fait rien.</span></span></dd>
+</dl>
+
+<p>Cette interface hérite les méthodes de son parent {{domxref("Event")}}:</p>
+
+<p>{{Page("/fr/docs/Web/API/Event", "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">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#interface-customevent','CustomEvent')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.CustomEvent")}}</p>
+
+<div id="compat-desktop">
+<h2 id="Déclenchement_à_partir_de_code_privilégié_vers_du_code_non-privilégié">Déclenchement à partir de code privilégié vers du code non-privilégié</h2>
+</div>
+
+<p>Lors du déclenchement d'un CustomEvent depuis du code privilégié (une extension, par exemple) vers du code non-privilégié (une page web par exemple), vous devez prendre en considération la sécurité. Firefox et les autres applications Gecko empêchent qu'un objet créé dans un contexte soit utilisé dans un autre, ce qui empêchera généralement les failles de sécurité, mais ces restrictions peuvent aussi empêcher votre code de s'executer comme prévu.</p>
+
+<p>Lors de la création d'un objet CustomEvent, vous devez créer l'objet à partir de la même <a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/window">fenêtre</a> que celle où vous déclencherez l'évenement.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="comment token">// doc est une référence au contenu du document</span>
+<span class="keyword token">function</span> <span class="function token">dispatchCustomEvent</span><span class="punctuation token">(</span>doc<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> eventDetail <span class="operator token">=</span> Components<span class="punctuation token">.</span>utils<span class="punctuation token">.</span><span class="function token">cloneInto</span><span class="punctuation token">(</span><span class="punctuation token">{</span>foo<span class="punctuation token">:</span> <span class="string token">'bar'</span><span class="punctuation token">}</span><span class="punctuation token">,</span> doc<span class="punctuation token">.</span>defaultView<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">var</span> myEvent <span class="operator token">=</span> doc<span class="punctuation token">.</span>defaultView<span class="punctuation token">.</span><span class="function token">CustomEvent</span><span class="punctuation token">(</span><span class="string token">"mytype"</span><span class="punctuation token">,</span> eventDetail<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  doc<span class="punctuation token">.</span><span class="function token">dispatchEvent</span><span class="punctuation token">(</span>myEvent<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>Notez qu'exposer une fonction permettra au script de l'exécuter avec les privilèges qu'accorde Chrome ce qui peut ouvrir une faille de sécurité.</p>
+
+<h2 id="Specification" name="Specification">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Extraits_de_code/Interaction_entre_des_pages_%C3%A0_privil%C3%A8ges_et_sans_privil%C3%A8ges" title="/fr/docs/Extraits_de_code/Interaction_entre_des_pages_%C3%A0_privil%C3%A8ges_et_sans_privil%C3%A8ges">Interaction entre pages privilégiées et non-privilégiées</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Window/postMessage" title="/en-US/docs/Web/API/window.postMessage">Window.postMessage</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/Guide/DOM/Events/Creating_and_triggering_events">Création et déclenchement d'événements</a></li>
+</ul>
diff --git a/files/fr/web/api/customevent/initcustomevent/index.html b/files/fr/web/api/customevent/initcustomevent/index.html
new file mode 100644
index 0000000000..4a1896eb5f
--- /dev/null
+++ b/files/fr/web/api/customevent/initcustomevent/index.html
@@ -0,0 +1,70 @@
+---
+title: CustomEvent.initCustomEvent()
+slug: Web/API/CustomEvent/initCustomEvent
+tags:
+  - API
+  - DOM
+  - Méthodes
+translation_of: Web/API/CustomEvent/initCustomEvent
+---
+<p>{{APIRef("DOM")}}{{deprecated_header}}</p>
+
+<p>La méthode <code><strong>CustomEvent.initCustomEvent()</strong></code> initialise un objet <code>CustomEvent</code>. Si l'évènement a déjà été distribué, cette méthode ne change rien.</p>
+
+<p>Les évènements initialisés par ce moyen doivent être créés avec la méthode {{domxref("Document.createEvent()")}}. Cette méthode doit être appelée pour définir l'évènement avant son envoi en utilisant {{domxref("EventTarget.dispatchEvent()") }}. Une fois l'évènement envoyé, la méthode ne fait rien.</p>
+
+<div class="note">
+<p><strong>N'utilisez plus cette méthode car elle est dépréciée.</strong></p>
+
+<p>À la place, utilisez les constructeurs d'évènements spécifiques comme {{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}. La page <a href="https://developer.mozilla.org/fr/docs/Web/Guide/DOM/Events/Creating_and_triggering_events">Création et déclenchement d'évènements</a> donne plus d'informations sur la façon de les utiliser.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>event</em>.initCustomEvent(<em>type</em>, <em>canBubble</em>, <em>cancelable</em>, <em>detail</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code><em>type</em></code></dt>
+ <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) contenant le nom de l'évènement.</dd>
+ <dt><em><code>canBubble</code></em></dt>
+ <dd>est un {{jsxref("Boolean")}} (<em>booléen</em>) indiquant si l'événement passe à travers le DOM ou non.</dd>
+ <dt><code><em>cancelable</em></code></dt>
+ <dd>est un {{jsxref("Boolean")}} indiquant si l'événement est annulable.</dd>
+ <dt><em><code>deta</code></em><em><code>il</code></em></dt>
+ <dd>Les données transmises lors de l'initialisation de l'évènement.</dd>
+</dl>
+
+<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('DOM WHATWG','#dom-customevent-initcustomevent','CustomEvent')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale, mais déjà dépréciée au profit de l'utilisation d'un constructeur,{{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.CustomEvent.initCustomEvent")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("CustomEvent")}}</li>
+ <li>Le constructeur à utiliser à la place de cette méthode obsolète : {{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}.</li>
+</ul>
diff --git a/files/fr/web/api/datatransfer/cleardata/index.html b/files/fr/web/api/datatransfer/cleardata/index.html
new file mode 100644
index 0000000000..c4a9541127
--- /dev/null
+++ b/files/fr/web/api/datatransfer/cleardata/index.html
@@ -0,0 +1,233 @@
+---
+title: DataTransfer.clearData()
+slug: Web/API/DataTransfer/clearData
+tags:
+  - API
+  - HTML DOM
+  - Method
+  - Reference
+  - drag and drop
+translation_of: Web/API/DataTransfer/clearData
+---
+<div>{{APIRef("HTML Drag and Drop API")}}</div>
+
+<p>La méthode DataTransfer.clearData() retire l'opération de {{domxref("DataTransfer","glisser-déposer")}} pour le format donné. Si la donnée pour le format ciblé n'existe pas, cette méthode n'aura aucun effet.</p>
+
+<p class="note">Si cette méthode est appelée sans argument, ou que le format donné est une  {{domxref("DOMString","chaîne de caractères")}}  vide, les données de tous les formats seront retirées.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var>dataTransfer</var>.clearData([format]);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>format{{optional_inline}}</dt>
+ <dd>Une {{domxref("DOMString","chaîne de caractères")}} représentant le format de donnée à retirer.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Void.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Cette exemple illustre l'utilisation des méthodes {{domxref("DataTransfer.getData()","getData()")}}, {{domxref("DataTransfer.setData()","setData()")}} et {{domxref("DataTransfer.clearData()","clearData()")}} de l'objet {{domxref("DataTransfer")}}.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html line-numbers  language-html">&lt;span class="tweaked" id="source" draggable="true"&gt;
+  Sélectionnez cet élément, glissez-le et déposez-le dans la Zone de Dépose pour le déplacer.
+&lt;/span&gt;
+&lt;span class="tweaked" id="target"&gt;Zone de Dépose&lt;/span&gt;
+&lt;div&gt;Status: &lt;span id="status"&gt;Glissez pour démarrer&lt;/span&gt;&lt;/div&gt;
+&lt;div&gt;Data is: &lt;span id="data"&gt;non initialisé&lt;/span&gt;&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css line-numbers  language-css">span.tweaked {
+  display: inline-block;
+  margin: 1em 0;
+  padding: 1em 2em;
+}
+
+#source {
+  color: blue;
+  border: 1px solid black;
+}
+
+#target {
+  border: 1px solid black;
+}
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">window.addEventListener('DOMContentLoaded', function () {
+  // Séléctionner les éléments HTML
+  var draggable = document.getElementById('source')
+  var dropable = document.getElementById('target')
+  var status = document.getElementById('status')
+  var data = document.getElementById('data')
+  var dropped = false
+
+  // Enregistrer les évènements
+  draggable.addEventListener('dragstart', dragStartHandler)
+  draggable.addEventListener('dragend', dragEndHandler)
+  dropable.addEventListener('dragover', dragOverHandler)
+  dropable.addEventListener('dragleave', dragLeaveHandler)
+  dropable.addEventListener('drop', dropHandler)
+
+  function dragStartHandler (event) {
+    status.innerHTML = 'Glisse en cours'
+
+    // Modifier la bordure de l'élément pour indiquer qu'une opération de glisse a démarré
+    event.currentTarget.style.border = '1px dashed blue'
+
+    // Définir le type et la donnée associée à l'opération de glisse (utilise l'ID de la cible de l'évènement pour la donnée)
+    event.dataTransfer.setData('text/plain', event.target.id)
+
+    data.innerHTML = event.dataTransfer.getData('text/plain')
+  }
+
+  function dragEndHandler (event) {
+    if (!dropped) {
+      status.innerHTML = 'Glisse annulée'
+    }
+
+    data.innerHTML = event.dataTransfer.getData('text/plain') || 'vide'
+
+    // Modifier la bordure de l'élément pour indiquer que l'opération de glisse n'est plus en cours
+    event.currentTarget.style.border = '1px solid black'
+
+    if (dropped) {
+      // Retirer tous les évènements enregistrés précédemment
+      draggable.removeEventListener('dragstart', dragStartHandler)
+      draggable.removeEventListener('dragend', dragEndHandler)
+      dropable.removeEventListener('dragover', dragOverHandler)
+      dropable.removeEventListener('dragleave', dragLeaveHandler)
+      dropable.removeEventListener('drop', dropHandler)
+    }
+  }
+
+  function dragOverHandler (event) {
+    status.innerHTML = 'Dépose disponible'
+
+    event.preventDefault()
+  }
+
+  function dragLeaveHandler (event) {
+    status.innerHTML = 'Glisse en cours (la dépose était disponible)'
+
+    event.preventDefault()
+  }
+
+  function dropHandler (event) {
+    dropped = true
+
+    status.innerHTML = 'Dépose effectuée'
+
+    event.preventDefault()
+
+    // Récupérer la donnée liée au type « text/plain »
+    var _data = event.dataTransfer.getData('text/plain')
+    var element = document.getElementById(_data)
+
+    // Insérer l'élément source de l'opération de glisse en tant que dernier enfant de l'élément cible de l'opération de dépose
+    event.target.appendChild(element)
+
+    // Modifier les styles CSS et le texte affiché
+    element.style.cssText = 'border: 1px solid black;display: block; color: red'
+    element.innerHTML = "J'suis dans la Zone de Dépose !"
+
+    // Effacer les données de TOUS les types liés à l'opération de glisse (car on n'a pas donné de paramètre)
+    event.dataTransfer.clearData()
+  }
+})
+</pre>
+
+<p>{{EmbedLiveSample('Exemple', 300, 250)}}</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('HTML WHATWG', 'interaction.html#dom-datatransfer-cleardata','DataTransfer.clearData()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'editing.html#dom-datatransfer-cleardata','DataTransfer.clearData()')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité">Compatibilité</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>4</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>10</td>
+   <td>12</td>
+   <td>3.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatIE("10")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="À_voir_également">À voir également</h2>
+
+<p>{{page("/fr/docs/Web/API/DataTransfer", "See also")}}</p>
diff --git a/files/fr/web/api/datatransfer/files/index.html b/files/fr/web/api/datatransfer/files/index.html
new file mode 100644
index 0000000000..a981e22a13
--- /dev/null
+++ b/files/fr/web/api/datatransfer/files/index.html
@@ -0,0 +1,116 @@
+---
+title: DataTransfer.files
+slug: Web/API/DataTransfer/files
+tags:
+  - API
+  - Glisser Déposer
+  - HTML DOM
+  - Propriété
+  - References
+translation_of: Web/API/DataTransfer/files
+---
+<div>{{APIRef("HTML Drag and Drop API")}}</div>
+
+<p>La propriété <strong><code>DataTransfer.files</code></strong> est une  {{domxref("FileList","liste de fichier")}} issue d'une manipulation de glisser-déposer. Si l'opération n'inclut pas de fichier, alors la liste est vide.</p>
+
+<p>Cette fonctionnalité peut être utilisée pour glisser des fichiers du bureau utilisateur au navigateur.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>dataTransfer</var>.files;
+</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une {{domxref("FileList","liste")}} de fichiers associés au "glisser", un élément de liste pour chaque fichier dans l'opération. Si l'opération de "glisser" ne contient aucun fichier alors la liste est vide.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Voici deux exemples :</p>
+
+<ul>
+ <li>Seulement Firefox : <a class="external" href="http://jsfiddle.net/9C2EF/">http://jsfiddle.net/9C2EF/</a></li>
+ <li>Tous les navigateurs : <a class="external" href="https://jsbin.com/hiqasek/edit?html,js,output">https://jsbin.com/hiqasek/</a></li>
+</ul>
+
+<h2 id="Specifications">Specifications</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("HTML WHATWG", "interaction.html#dom-datatransfer-files", "files")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.1", "editing.html#dom-datatransfer-files", "files")}}</td>
+   <td>{{Spec2("HTML5.1")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support basique</td>
+   <td>4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>3.5</td>
+   <td>10</td>
+   <td>12</td>
+   <td>3.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatIE("10")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fr/web/api/datatransfer/index.html b/files/fr/web/api/datatransfer/index.html
new file mode 100644
index 0000000000..025c439831
--- /dev/null
+++ b/files/fr/web/api/datatransfer/index.html
@@ -0,0 +1,370 @@
+---
+title: DataTransfer
+slug: Web/API/DataTransfer
+tags:
+  - API
+  - Glisser-deposer
+translation_of: Web/API/DataTransfer
+---
+<p><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">L'objet</span> <code><span class="hps" title="Cliquer ici pour voir d'autres traductions">DataTransfer</span></code> contient les <span class="hps" title="Cliquer ici pour voir d'autres traductions">données glissées</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">au cours d'une</span> <span class="atn hps" title="Cliquer ici pour voir d'autres traductions">opération de glisser-</span><span title="Cliquer ici pour voir d'autres traductions">déposer.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Il peut</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">contenir un ou plusieurs</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">éléments</span><span class="atn" title="Cliquer ici pour voir d'autres traductions">, du même type ou de types différents</span><span class="hps" title="Cliquer ici pour voir d'autres traductions">.</span> <span class="atn hps" title="Cliquer ici pour voir d'autres traductions">Pour plus d'</span><span title="Cliquer ici pour voir d'autres traductions">informations sur</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">le glisser-déposer</span><span title="Cliquer ici pour voir d'autres traductions">, voir</span></span> <a class="internal" href="/fr/docs/Glisser_et_d%C3%A9poser" title="En/DragDrop/Drag and Drop">Glisser et déposer</a>.</p>
+
+<p><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Cet objet est</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">disponible depuis la propriété</span> <code>dataTransfer</code> <span class="hps" title="Cliquer ici pour voir d'autres traductions">de tous les événements de</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">glisser</span><span title="Cliquer ici pour voir d'autres traductions">.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Il</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">ne peut pas être</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">créé</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">séparément.</span></span></p>
+
+<h2 id="Properties" name="Properties">Aperçu des proprietés</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Propriété</td>
+   <td class="header">Type</td>
+  </tr>
+  <tr>
+   <td><code><a href="/En/DragDrop/DataTransfer#dropEffect" title="En/DragDrop/DataTransfer#dropEffect">dropEffect</a></code></td>
+   <td><code><a href="/en/String" title="en/String">String</a></code></td>
+  </tr>
+  <tr>
+   <td><code><a href="/En/DragDrop/DataTransfer#effectAllowed" title="En/DragDrop/DataTransfer#effectAllowed">effectAllowed</a></code></td>
+   <td><code><a href="/en/String" title="en/String">String</a></code></td>
+  </tr>
+  <tr>
+   <td><a href="/En/DragDrop/DataTransfer#files" title="En/DragDrop/DataTransfer#files"><code>files</code></a></td>
+   <td>{{ domxref("FileList") }}</td>
+  </tr>
+  <tr>
+   <td><code><a href="/En/DragDrop/DataTransfer#mozCursor" title="En/DragDrop/DataTransfer#mozCursor">mozCursor</a></code> {{ non-standard_inline() }}</td>
+   <td><code><a href="/en/String" title="en/String">String</a></code></td>
+  </tr>
+  <tr>
+   <td><code><a href="/En/DragDrop/DataTransfer#mozItemCount" title="En/DragDrop/DataTransfer#mozItemCount">mozItemCount</a></code> {{ non-standard_inline() }}</td>
+   <td><code>unsigned long</code></td>
+  </tr>
+  <tr>
+   <td><a href="/En/DragDrop/DataTransfer#mozSourceNode" title="En/DragDrop/DataTransfer#mozSourceNode"><code>mozSourceNode</code></a> {{ non-standard_inline() }}</td>
+   <td>{{ domxref("Node") }}</td>
+  </tr>
+  <tr>
+   <td><a href="/En/DragDrop/DataTransfer#mozUserCancelled" title="En/DragDrop/DataTransfer#mozUserCancelled"><code>mozUserCancelled</code></a></td>
+   <td><a href="/en/JavaScript/Reference/Global_Objects/Boolean" title="en/Core JavaScript 1.5 Reference/Global Objects/Boolean"><code>Boolean</code></a></td>
+  </tr>
+  <tr>
+   <td><code><a href="/En/DragDrop/DataTransfer#types" title="En/DragDrop/DataTransfer#types">types</a></code></td>
+   <td><code><a href="/en/DOMStringList" title="en/DOMStringList">StringList</a></code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Method_overview" name="Method_overview">Aperçu des méthodes</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>void <a href="#addElement.28.29">addElement</a>(in <a href="/en/XPCOM_Interface_Reference/nsIDOMElement" title="en/nsIDOMElement">Element</a> image)</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#clearData.28.29">clearData</a>([in <a href="/en/String" title="en/String">String</a> type])</code></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en/String" title="en/String">String</a> <a href="#getData.28.29">getData</a>(in <a href="/en/String" title="en/String">String</a> type)</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#setData.28.29">setData</a>(in <a href="/en/String" title="en/String">String</a> type, in <a href="/en/String" title="en/String">String</a> data)</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#setDragImage.28.29">setDragImage</a>(in <a href="/en/XPCOM_Interface_Reference/nsIDOMElement" title="en/nsIDOMElement">nsIDOMElement</a> image, in long x, in long y)</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#mozClearDataAt.28.29">mozClearDataAt</a>([in <a href="/en/String" title="en/String">String</a> type, in unsigned long index])</code></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en/XPCOM_Interface_Reference/NsIVariant" title="en/nsIVariant">nsIVariant</a> <a href="#mozGetDataAt.28.29">mozGetDataAt</a>(in <a href="/en/String" title="en/String">String</a> type, in unsigned long index)</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#mozSetDataAt.28.29">mozSetDataAt</a>(in <a href="/en/String" title="en/String">String</a> type, in <a href="/en/XPCOM_Interface_Reference/NsIVariant" title="en/nsIVariant">nsIVariant</a> data, in unsigned long index)</code></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en/StringList" title="en/StringList">StringList</a> <a href="#mozTypesAt.28.29">mozTypesAt</a>([in unsigned long index])</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Properties" name="Properties">Propriétés</h2>
+
+<h3 id="dropEffect.28.29" name="dropEffect.28.29">dropEffect</h3>
+
+<p><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">L'effet</span><span class="hps" title="Cliquer ici pour voir d'autres traductions"> utilisé, qui</span><span class="hps" title="Cliquer ici pour voir d'autres traductions"> doit toujours être</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">l'une des</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">valeurs possibles de </span></span><code>effectAllowed</code>.</p>
+
+<p><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Pour</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">les événements</span> <code>d</code><span class="hps" title="Cliquer ici pour voir d'autres traductions"><code>ragenter</code> et</span> <code><span class="hps" title="Cliquer ici pour voir d'autres traductions">dragover</span></code><span title="Cliquer ici pour voir d'autres traductions">, la propriété </span><code><span class="hps" title="Cliquer ici pour voir d'autres traductions">dropEffect</span></code> <span class="hps" title="Cliquer ici pour voir d'autres traductions">est</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">initialisée en fonction des</span> <span class="atn hps" title="Cliquer ici pour voir d'autres traductions">actions initiées par l'</span><span title="Cliquer ici pour voir d'autres traductions">utilisateur</span><span title="Cliquer ici pour voir d'autres traductions">.</span> Ceci<span class="hps" title="Cliquer ici pour voir d'autres traductions"> est</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">spécifique à la plateforme</span><span title="Cliquer ici pour voir d'autres traductions">, mais en général</span><span title="Cliquer ici pour voir d'autres traductions">, l'utilisateur peut</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">appuyer sur</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">les touches de modification</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">pour ajuster</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">l'action </span><span class="hps" title="Cliquer ici pour voir d'autres traductions">souhaitée.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Dans</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">un gestionnaire d'événement</span> <code>d</code><span class="hps" title="Cliquer ici pour voir d'autres traductions"><code>ragenter</code> et</span> <code><span class="hps" title="Cliquer ici pour voir d'autres traductions">dragover</span></code><span title="Cliquer ici pour voir d'autres traductions">, la propriété</span> <code><span class="hps" title="Cliquer ici pour voir d'autres traductions">dropEffect</span></code> peut être modifiée <span class="hps" title="Cliquer ici pour voir d'autres traductions">si l'action</span> <span class="atn hps" title="Cliquer ici pour voir d'autres traductions">de l'</span><span title="Cliquer ici pour voir d'autres traductions">utilisateur demandée</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">n'est pas</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">celle </span><span class="hps" title="Cliquer ici pour voir d'autres traductions">souhaitée.</span></span></p>
+
+<p>Pour les évènements <code>dragstart</code>, <code>drag</code>, and <code>dragleave</code> events, <code>dropEffect</code> est initialisé à "none". Toute valeur peut être assignée à <code>dropEffect</code>, mais elle sera ignorée.</p>
+
+<p>Pour les évènements <code>drop</code> et <code>dragend</code> , <code>dropEffect</code> <span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">est initialisé</span> en fonction de l'action initiée, et correspond à la dernière valeur de <code>dropEffect</code> après le dernier<span class="hps" title="Cliquer ici pour voir d'autres traductions"> événement</span> <code>dragenter</code> ou <code><span class="hps" title="Cliquer ici pour voir d'autres traductions">dragover</span></code><span title="Cliquer ici pour voir d'autres traductions">.</span></span></p>
+
+<p>Valeurs possibles:</p>
+
+<ul>
+ <li><strong>copy</strong>: <span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Une copie de</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">l'élément source</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">est faite</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">au nouvel emplacement</span><span title="Cliquer ici pour voir d'autres traductions">.</span></span></li>
+ <li><strong>move</strong>: <span class="short_text" id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Un</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">élément est déplacé vers</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">un nouvel emplacement.</span></span></li>
+ <li><strong>link</strong>: <span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Un lien est établi</span> depuis<span class="hps" title="Cliquer ici pour voir d'autres traductions"> la source</span> vers le<span class="hps" title="Cliquer ici pour voir d'autres traductions"> nouvel emplacement</span><span title="Cliquer ici pour voir d'autres traductions">.</span></span></li>
+ <li><strong>none</strong>: <span class="short_text" id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">L'élément ne peut</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">pas être déposé</span><span title="Cliquer ici pour voir d'autres traductions">.</span></span></li>
+</ul>
+
+<p><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Attribuer</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">une autre valeur </span><span class="hps" title="Cliquer ici pour voir d'autres traductions">n'a aucun effet et</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">conserve</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">l'ancienne valeur.</span></span></p>
+
+<h3 id="effectAllowed.28.29" name="effectAllowed.28.29">effectAllowed</h3>
+
+<p><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Indique</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">les effets</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">qui sont autorisés</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">pour ce</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">déplacer.</span> Il peut être spécifié<span class="hps" title="Cliquer ici pour voir d'autres traductions"> dans</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">l'évènement <code>dragstart</code></span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">pour définir les effets</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">souhaités</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">pour la source</span><span title="Cliquer ici pour voir d'autres traductions">,</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">et dans</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">les événements</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions"><code>dragenter</code> et</span> <code><span class="hps" title="Cliquer ici pour voir d'autres traductions">dragover</span></code> <span class="hps" title="Cliquer ici pour voir d'autres traductions">pour définir les effets</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">souhaités</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">pour la cible.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">La</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">valeur n'est pas utilisée</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">pour d'autres événements</span><span title="Cliquer ici pour voir d'autres traductions">.</span></span></p>
+
+<p>Valeurs possibles:</p>
+
+<ul>
+ <li><strong>copy</strong>: <span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Une copie de</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">l'élément source</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">peut être faite à</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">son nouvel emplacement.</span></span></li>
+ <li><strong>move</strong>: <span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Un élément</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">peut être déplacé</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">vers un nouvel emplacement</span><span title="Cliquer ici pour voir d'autres traductions">.</span></span></li>
+ <li><strong>link</strong>: <span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Un</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">lien peut être établi</span> vers<span class="hps" title="Cliquer ici pour voir d'autres traductions"> la source</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">depuis le nouvel emplacement</span><span title="Cliquer ici pour voir d'autres traductions">.</span></span></li>
+ <li><strong>copyLink</strong>: <span class="short_text" id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Une opération copy</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">ou link</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">est autorisée.</span></span></li>
+ <li><strong>copyMove</strong>: <span class="short_text" id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Une opération copy ou</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">move est</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">autorisée.</span></span></li>
+ <li><strong>linkMove</strong>: <span class="short_text" id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Une opération link ou move </span><span class="hps" title="Cliquer ici pour voir d'autres traductions">est autorisée.</span></span></li>
+ <li><strong>all</strong>: <span class="short_text" id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Toutes les opérations</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">sont autorisées.</span></span></li>
+ <li><strong>none</strong>: <span class="short_text" id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">l'élément</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">ne peut être</span> déposé<span class="hps" title="Cliquer ici pour voir d'autres traductions">.</span></span></li>
+ <li><strong>uninitialized</strong>: <span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">la valeur par défaut</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">lorsque l'effet</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">n'a pas été spécifié</span><span title="Cliquer ici pour voir d'autres traductions">, ce qui équivaut</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">à all.</span></span></li>
+</ul>
+
+<p><span class="hps" style="line-height: 1.5;" title="Cliquer ici pour voir d'autres traductions">Attribuer</span><span style="line-height: 1.5;"> </span><span class="hps" style="line-height: 1.5;" title="Cliquer ici pour voir d'autres traductions">une autre valeur </span><span class="hps" style="line-height: 1.5;" title="Cliquer ici pour voir d'autres traductions">n'a aucun effet et</span><span style="line-height: 1.5;"> </span><span class="hps" style="line-height: 1.5;" title="Cliquer ici pour voir d'autres traductions">conserve</span><span style="line-height: 1.5;"> </span><span class="hps" style="line-height: 1.5;" title="Cliquer ici pour voir d'autres traductions">l'ancienne valeur</span>.</p>
+
+<h3 id="files.28.29" name="files.28.29">files</h3>
+
+<p><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Contient</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">une liste de tous</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">les fichiers locaux</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">disponibles sur le</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">transfert de données.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Si</span> le<span class="hps" title="Cliquer ici pour voir d'autres traductions"> glisser</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">n'implique pas</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">de fichiers</span><span title="Cliquer ici pour voir d'autres traductions">, cette propriété est</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">une liste vide.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Un</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">accès à un index</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">invalide sur le {{ domxref("FileList") }}</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">spécifié par cette propriété</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">renvoie <code>null</code>.</span></span></p>
+
+<h4 id="Exemple">Exemple</h4>
+
+<p><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Cet exemple</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">retourne la</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">liste des fichiers</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">traînée dans</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">la fenêtre du navigateur</span></span>:  <a class="external external-icon" href="http://jsfiddle.net/9C2EF/" style="white-space: pre-line;" title="http://jsfiddle.net/9C2EF/">http://jsfiddle.net/9C2EF/</a></p>
+
+<h3 id="types.28.29" name="types.28.29">types</h3>
+
+<p><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Contient une</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">liste des types de</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">format des données</span><span class="hps" title="Cliquer ici pour voir d'autres traductions"> stockées</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">pour le premier élément</span><span title="Cliquer ici pour voir d'autres traductions">,</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">dans le même ordre</span> oú <span class="hps" title="Cliquer ici pour voir d'autres traductions">les données ont été</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">ajoutées.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Une liste vide</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">sera</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">retournée si</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">aucune donnée n'a été</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">ajoutée</span><span title="Cliquer ici pour voir d'autres traductions">.</span></span></p>
+
+<p>L'état du curseur au cours d'un glisser. Cette propriété est surtout utilisée pour contrôler le curseur au cours d'un glisser d'onglet.</p>
+
+<div class="note"><strong>Note:</strong> <span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Cette méthode n'est actuellement</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">implémentée</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">que</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">sur Windows</span><span title="Cliquer ici pour voir d'autres traductions">.</span></span></div>
+
+<h4 id="Valeurs_possibles">Valeurs possibles</h4>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Utilise le comportement par défaut du système.</dd>
+ <dt><code>default</code></dt>
+ <dd>Utilise le comportement par défaut de Gecko, qui consiste à utiliser une flèche pour curseur au cours d'un glisser.</dd>
+</dl>
+
+<div class="note"><strong>Note:</strong> <span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Si vous spécifiez</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">une valeur autre que</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">"default"</span><span title="Cliquer ici pour voir d'autres traductions">, "auto"</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">est supposé.</span></span></div>
+
+<h3 id="mozItemCount.28.29" name="mozItemCount.28.29">mozItemCount</h3>
+
+<p><span class="short_text" id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Le nombre d'éléments</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">glissés</span><span title="Cliquer ici pour voir d'autres traductions">.</span></span></p>
+
+<div class="note"><strong>Note:</strong> <span class="short_text" id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Cette propriété est</span> </span><span class="short_text" id="result_box" lang="fr"> <span class="hps" title="Cliquer ici pour voir d'autres traductions">spécifique a</span></span><span class="short_text" id="result_box" lang="fr"> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Gecko</span><span class="hps" title="Cliquer ici pour voir d'autres traductions">.</span></span></div>
+
+<h3 id="mozSourceNode">mozSourceNode</h3>
+
+<p>le {{ domxref("Node") }} <span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">au dessus duquel le</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">curseur de la souris</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">se trouvait lorsque</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">le bouton</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">a été pressé</span> pour<span class="hps" title="Cliquer ici pour voir d'autres traductions"> initialiser le glisser</span><span title="Cliquer ici pour voir d'autres traductions">.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Cette valeur</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">est nulle pour</span> un glisser <span class="hps" title="Cliquer ici pour voir d'autres traductions">externe, ou</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">si l'appelant</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">ne peut pas</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">accéder au</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">nœud.</span></span></p>
+
+<div class="note"><strong>Note:</strong> <span class="short_text" id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Cette propriété est</span> </span><span class="short_text" id="result_box" lang="fr"> <span class="hps" title="Cliquer ici pour voir d'autres traductions">spécifique a</span></span><span class="short_text" id="result_box" lang="fr"> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Gecko</span></span>.</div>
+
+<h3 id="mozItemCount.28.29" name="mozItemCount.28.29">mozUserCancelled</h3>
+
+<p><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Cette propriété s'applique uniquement</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">à l'événement</span> <code><span class="hps" title="Cliquer ici pour voir d'autres traductions">dragend</span></code><span title="Cliquer ici pour voir d'autres traductions">, et est positionnée à <code>true</code></span><span class="hps" title="Cliquer ici pour voir d'autres traductions"> si</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">l'utilisateur a annulé</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">le glisser</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">en appuyant</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">sur la touche échappe.</span> Elle est <span class="hps" title="Cliquer ici pour voir d'autres traductions">positionnée à <code>false</code></span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">dans les autres cas</span><span title="Cliquer ici pour voir d'autres traductions">, y compris</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">si le glisser</span> a <span class="hps" title="Cliquer ici pour voir d'autres traductions">échoué</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">pour toute autre raison</span><span title="Cliquer ici pour voir d'autres traductions">, par exemple</span> <span class="atn hps" title="Cliquer ici pour voir d'autres traductions">en raison d'</span><span title="Cliquer ici pour voir d'autres traductions">un déposer sur</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">un emplacement non valide</span><span title="Cliquer ici pour voir d'autres traductions">.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Cette propriété</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">n'est pas encore implémenté</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">sous Linux.</span></span></p>
+
+<div class="note"><strong>Note:</strong> <span class="short_text" id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Cette propriété est</span> </span><span class="short_text" id="result_box" lang="fr"> <span class="hps" title="Cliquer ici pour voir d'autres traductions">spécifique a</span></span><span class="short_text" id="result_box" lang="fr"> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Gecko</span></span>.</div>
+
+<h2 id="Methods" name="Methods">Methods</h2>
+
+<h3 id="addElement.28.29" name="addElement.28.29">addElement()</h3>
+
+<p><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Spécifie</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">la source du glisser</span><span title="Cliquer ici pour voir d'autres traductions">.</span> Ceci est rarement utilisé, <span class="hps" title="Cliquer ici pour voir d'autres traductions">mais</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">a pour effet de modifier la cible des</span><span class="hps" title="Cliquer ici pour voir d'autres traductions"> événements</span> <code>drag</code> et <code>dragend</code><span title="Cliquer ici pour voir d'autres traductions">.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">La cible par défaut</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">est le nœud qui</span> est<span class="hps" title="Cliquer ici pour voir d'autres traductions"> glissé</span><span title="Cliquer ici pour voir d'autres traductions">.</span></span></p>
+
+<pre class="eval"> void addElement(
+   in Element element
+ );
+</pre>
+
+<h6 id="Parameters_addElement" name="Parameters_addElement">Parametres</h6>
+
+<dl>
+ <dt><code>element </code></dt>
+ <dd>L'élément à ajouter.</dd>
+</dl>
+
+<h3 id="clearData.28.29" name="clearData.28.29">clearData()</h3>
+
+<p><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Supprime</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">les données associées au</span><span class="hps" title="Cliquer ici pour voir d'autres traductions"> type spécifié.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">L'argument type</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">est facultatif.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Si le type</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">est vide ou non</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">spécifié,</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">les données associées à</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">tous les types</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">sont supprimées.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Si les données</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">pour le type spécifié</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">n'existent pas,</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">ou le</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">transfert de données</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">ne contient pas de</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">données,</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">cette méthode</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">n'aura aucun effet</span><span title="Cliquer ici pour voir d'autres traductions">.</span></span></p>
+
+<pre class="eval"> void clearData(
+   [optional] in String type
+ );
+</pre>
+
+<h6 id="Parameters_clearData" name="Parameters_clearData">Parametres</h6>
+
+<dl>
+ <dt><code>type </code></dt>
+ <dd>The type of data to remove.</dd>
+</dl>
+
+<h3 id="getData.28.29" name="getData.28.29">getData()</h3>
+
+<p><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Récupère</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">les données du</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">type spécifié,</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">ou une chaîne vide</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">si les données</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">de ce type</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">n'existe pas ou</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">le transfert de données</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">ne contient aucune donnée</span><span title="Cliquer ici pour voir d'autres traductions">.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Une</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">erreur de sécurité</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">se produira si</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">vous tentez de</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">récupérer des données</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">lors d'un glisser</span><span class="hps" title="Cliquer ici pour voir d'autres traductions"> qui</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">a été spécifié</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">à partir d'un</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">domaine différent </span><span class="hps" title="Cliquer ici pour voir d'autres traductions">ou auquel l'appelant</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">n'a pas</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">accès.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Ces données</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">ne seront disponibles</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">qu'à l'issue du</span> déposer<span class="atn hps" title="Cliquer ici pour voir d'autres traductions"> au cours d'un </span><span title="Cliquer ici pour voir d'autres traductions">événement drop.</span></span></p>
+
+<pre class="eval"> void getData(
+   in String type
+ );
+</pre>
+
+<h6 id="Parameters_getData" name="Parameters_getData">Parametres</h6>
+
+<dl>
+ <dt><code>type </code></dt>
+ <dd>Le type de donnée à récupérer.</dd>
+</dl>
+
+<h3 id="setData.28.29" name="setData.28.29">setData()</h3>
+
+<p><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Définit une donnée</span> pour le<span title="Cliquer ici pour voir d'autres traductions"> type spécifié.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Si des données pour</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">le type</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">n'existe pas,</span> elle<span class="hps" title="Cliquer ici pour voir d'autres traductions"> est</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">ajoutée à la fin</span><span title="Cliquer ici pour voir d'autres traductions">,</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">de telle sorte que</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">le dernier élément</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">dans la liste des</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">types</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">sera</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">le nouveau format.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Si une donnée pour</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">le type</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">existe déjà,</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">la donnée existante est remplacée à</span><span class="hps" title="Cliquer ici pour voir d'autres traductions"> la même position</span><span title="Cliquer ici pour voir d'autres traductions">.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">C'est-à-dire que </span><span class="hps" title="Cliquer ici pour voir d'autres traductions">l'ordre de</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">la liste des</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">types ne change pas </span><span class="hps" title="Cliquer ici pour voir d'autres traductions">lors du remplacement</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">de la donnée</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">d'un même type</span><span title="Cliquer ici pour voir d'autres traductions">.</span></span></p>
+
+<pre class="eval"> void setData(
+   in String type,
+   in String data
+ );
+</pre>
+
+<h6 id="Parameters_setData" name="Parameters_setData">Parametres</h6>
+
+<dl>
+ <dt><code>type </code></dt>
+ <dd>Le type de la donnée à ajouter.</dd>
+ <dt><code>data </code></dt>
+ <dd>La donnée à ajouter.</dd>
+</dl>
+
+<h3 id="setDragImage.28.29" name="setDragImage.28.29">setDragImage()</h3>
+
+<p><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Définit l'image</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">à utiliser pour</span> un <span class="hps" title="Cliquer ici pour voir d'autres traductions">glisser</span><span title="Cliquer ici pour voir d'autres traductions">, si</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">une</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">image personnalisée </span><span class="hps" title="Cliquer ici pour voir d'autres traductions">est souhaitée.</span> Cette méthode est rarement utilisée, dans la mesure oú<span class="hps" title="Cliquer ici pour voir d'autres traductions"> une</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">image par défaut est</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">créée à partir du</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">nœud </span>glissé<span title="Cliquer ici pour voir d'autres traductions">.</span><br>
+ <br>
+ <span class="hps" title="Cliquer ici pour voir d'autres traductions">Si le nœud est</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">un élément HTML</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">img</span><span title="Cliquer ici pour voir d'autres traductions">, un</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">élément canvas</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">HTML ou un</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">élément d'image</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">XUL,</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">la donnée image</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">est utilisée</span><span title="Cliquer ici pour voir d'autres traductions">.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Sinon,</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">l'image</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">doit être</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">un nœud</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">visible et</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">l'image</span> utilisée pendant le glisser est <span class="hps" title="Cliquer ici pour voir d'autres traductions">créée</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">à partir de ce noeud</span><span title="Cliquer ici pour voir d'autres traductions">.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Si</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">l'image</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">est null</span><span title="Cliquer ici pour voir d'autres traductions">, toute image</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">personnalisé est</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">effacée et</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">la valeur par défaut</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">est utilisée</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">à la place.</span><br>
+ <br>
+ <span class="hps" title="Cliquer ici pour voir d'autres traductions">Les coordonnées</span><span class="hps" title="Cliquer ici pour voir d'autres traductions"> spécifient</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">le décalage à l'intérieur de</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">l'image spécifiant la position du</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">curseur de la souris</span><span title="Cliquer ici pour voir d'autres traductions">.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Pour centrer l'image</span><span title="Cliquer ici pour voir d'autres traductions">, par exemple,</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">utiliser des valeurs</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">qui sont</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">la moitié de la</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">largeur et de la hauteur</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">de l'image.</span></span></p>
+
+<pre class="eval"> void setDragImage(
+   in Element image,
+   in long x,
+   in long y
+ );
+</pre>
+
+<h6 id="Parameters_setDragImage" name="Parameters_setDragImage">Parametres</h6>
+
+<dl>
+ <dt><code>image </code></dt>
+ <dd>Un élément à utiliser comme image pendant le glisser</dd>
+ <dt><code>x </code></dt>
+ <dd>Décalage horizontal à l'intérieur de l'image.</dd>
+ <dt><code>y </code></dt>
+ <dd>Décalage vertical à l'intérieur de l'image.</dd>
+</dl>
+
+<h3 id="mozClearDataAt.28.29" name="mozClearDataAt.28.29">mozClearDataAt()</h3>
+
+<p><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Supprime</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">les données</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">associées au format</span><span class="hps" title="Cliquer ici pour voir d'autres traductions"> pour</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">un élément</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">à l'index spécifié</span><span title="Cliquer ici pour voir d'autres traductions">.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">L'index est</span> compris entre<span class="hps" title="Cliquer ici pour voir d'autres traductions"> zéro</span> et le<span class="hps" title="Cliquer ici pour voir d'autres traductions"> nombre</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">d'éléments</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">moins un.</span><br>
+ <br>
+ <span class="hps" title="Cliquer ici pour voir d'autres traductions">Si</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">le dernier format</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">de</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">l'élément est supprimé</span><span title="Cliquer ici pour voir d'autres traductions">,</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">l'élément entier</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">est retiré</span><span title="Cliquer ici pour voir d'autres traductions">, réduisant</span> <code><span class="hps" title="Cliquer ici pour voir d'autres traductions">mozItemCount</span></code> <span class="hps" title="Cliquer ici pour voir d'autres traductions">par un.</span><br>
+ <br>
+ <span class="hps" title="Cliquer ici pour voir d'autres traductions">Si</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">la liste <code>format</code></span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">est vide, alors</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">les données associées à</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">tous les formats</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">sont supprimées.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Si le format</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">n'est pas trouvé,</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">alors cette méthode</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">n'a aucun effet.</span></span><br>
+  </p>
+
+<div class="note"><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Note:</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Cette méthode est</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">spécifique à </span></span><span style="line-height: 1.5;">Gecko</span><span style="line-height: 1.5;">.</span></div>
+
+<pre class="eval"> void mozClearDataAt(
+   [optional] in String type,
+   in unsigned long index
+ );
+</pre>
+
+<h6 id="Parameters_mozClearDataAt" name="Parameters_mozClearDataAt">Parametres</h6>
+
+<dl>
+ <dt><code>type </code></dt>
+ <dd>Le type de la donnée à supprimer.</dd>
+ <dt><code>index </code></dt>
+ <dd>L'index de la donnée à supprimer.</dd>
+</dl>
+
+<h3 id="mozGetDataAt.28.29" name="mozGetDataAt.28.29">mozGetDataAt()</h3>
+
+<p><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Récupère les données</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">associées au format</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">donné pour</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">un élément</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">à l'index spécifié</span><span title="Cliquer ici pour voir d'autres traductions">,</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">ou null si elle</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">n'existe pas.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">L'indice devrait être</span> compris entre<span class="hps" title="Cliquer ici pour voir d'autres traductions"> zéro</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">et le nombre</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">d'éléments</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">moins un.</span></span></p>
+
+<div class="note"><strong>Note:</strong> <span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Cette méthode est</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">spécifique à </span></span><span style="line-height: 1.5;">Gecko</span>.</div>
+
+<pre class="eval"> nsIVariant mozGetDataAt(
+   [optional] in String type,
+   in unsigned long index
+ );
+</pre>
+
+<h6 id="Parameters_mozClearDataAt" name="Parameters_mozClearDataAt">Parametres</h6>
+
+<dl>
+ <dt><code>type </code></dt>
+ <dd>Le type de donnée à récupérer.</dd>
+ <dt><code>index </code></dt>
+ <dd>L'indice de la donnée à récupérer.</dd>
+</dl>
+
+<h3 id="mozSetDataAt.28.29" name="mozSetDataAt.28.29">mozSetDataAt()</h3>
+
+<p><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Un transfert de données</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">peut stocker</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">plusieurs éléments</span><span title="Cliquer ici pour voir d'autres traductions">, chacun</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">à</span> un <span class="hps" title="Cliquer ici pour voir d'autres traductions">index commençant à zéro</span><span title="Cliquer ici pour voir d'autres traductions">.</span> <code><span class="hps" title="Cliquer ici pour voir d'autres traductions">mozSetDataAt</span><span class="atn hps" title="Cliquer ici pour voir d'autres traductions">(</span></code><span title="Cliquer ici pour voir d'autres traductions"><code>)</code> ne peut être</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">appelé</span> qu'<span class="hps" title="Cliquer ici pour voir d'autres traductions">avec un index</span><span class="hps" title="Cliquer ici pour voir d'autres traductions"> inférieur à</span> <code><span class="hps" title="Cliquer ici pour voir d'autres traductions">mozItemCount,</span></code> <span class="hps" title="Cliquer ici pour voir d'autres traductions">auquel cas</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">un élément existant</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">est modifié,</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">ou égal à</span> <code><span class="hps" title="Cliquer ici pour voir d'autres traductions">mozItemCount,</span></code> <span class="hps" title="Cliquer ici pour voir d'autres traductions">auquel cas un</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">nouvel élément est ajouté</span><span title="Cliquer ici pour voir d'autres traductions">,</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">et </span><code><span class="hps" title="Cliquer ici pour voir d'autres traductions">mozItemCount</span></code> <span class="hps" title="Cliquer ici pour voir d'autres traductions">est incrémenté de un</span><span title="Cliquer ici pour voir d'autres traductions">.</span><br>
+ <br>
+ <span class="hps" title="Cliquer ici pour voir d'autres traductions">Les données doivent</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">être ajoutées</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">par ordre de préférence</span><span title="Cliquer ici pour voir d'autres traductions">,</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">avec le format</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">le plus spécifique</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">ajouté en premier</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">et le format</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">moins spécifique</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">ajouté en dernier.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Si la donnée</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">du format</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">spécifié existe</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">déjà, elle est</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">remplacée dans</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">la même position que</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">la donnée précédente</span><span title="Cliquer ici pour voir d'autres traductions">.</span><br>
+ <br>
+ <span class="hps" title="Cliquer ici pour voir d'autres traductions">La donnée doit</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">être une chaîne</span><span title="Cliquer ici pour voir d'autres traductions">,</span> ou <span class="hps" title="Cliquer ici pour voir d'autres traductions">un type primitif</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">booléen,</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">ou un type numérique </span><span class="hps" title="Cliquer ici pour voir d'autres traductions">(qui</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">sera converti en</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">une chaîne</span><span title="Cliquer ici pour voir d'autres traductions">), ou</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">une</span></span> <a href="/fr/docs/XPCOM_Interface_Reference/nsISupports">nsISupports</a>.</p>
+
+<div class="note"><strong>Note:</strong> Cette méthode est spécifique à Gecko.</div>
+
+<pre class="eval"> void mozSetDataAt(
+   [optional] in String type,
+   in nsIVariant data,
+   in unsigned long index
+ );
+</pre>
+
+<h6 id="Parameters_mozSetDataAt" name="Parameters_mozSetDataAt">Parametres</h6>
+
+<dl>
+ <dt><code>type </code></dt>
+ <dd>Le type de donnée à ajouter.</dd>
+ <dt><code>data </code></dt>
+ <dd>La donnée à ajouter.</dd>
+ <dt><code>index </code></dt>
+ <dd>L'index de la donnée à ajouter.</dd>
+</dl>
+
+<h3 id="mozTypesAt.28.29" name="mozTypesAt.28.29">mozTypesAt()</h3>
+
+<p><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Contient une</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">liste des types de</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">format des données</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">qui sont stockées</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">pour un élément</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">à l'index spécifié</span><span title="Cliquer ici pour voir d'autres traductions">.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Si</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">l'index n'est pas</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">dans compris entre</span><span class="hps" title="Cliquer ici pour voir d'autres traductions"> 0</span> <span class="atn hps" title="Cliquer ici pour voir d'autres traductions">et le nombre d'</span><span title="Cliquer ici pour voir d'autres traductions">éléments</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">moins un,</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">une</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">liste de</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">chaîne vide est retournée</span><span title="Cliquer ici pour voir d'autres traductions">.</span></span></p>
+
+<div class="note"><strong>Note:</strong> Cette méthode est spécifique à Gecko.</div>
+
+<pre class="eval"> nsIVariant mozTypesAt(
+   in unsigned long index
+ );
+</pre>
+
+<h6 id="Parameters_mozTypesAt" name="Parameters_mozTypesAt">Parameters</h6>
+
+<dl>
+ <dt><code>index </code></dt>
+ <dd>L'index de la donnée pour laquelle récupérer les types.</dd>
+</dl>
+
+<h2 id="See_also" name="See_also">Voir Aussi</h2>
+
+<p><a class="internal" href="/En/DragDrop/Drag_and_Drop" title="Drag and Drop">Drag and Drop</a></p>
diff --git a/files/fr/web/api/dedicatedworkerglobalscope/close/index.html b/files/fr/web/api/dedicatedworkerglobalscope/close/index.html
new file mode 100644
index 0000000000..c698546a65
--- /dev/null
+++ b/files/fr/web/api/dedicatedworkerglobalscope/close/index.html
@@ -0,0 +1,55 @@
+---
+title: DedicatedWorkerGlobalScope.close()
+slug: Web/API/DedicatedWorkerGlobalScope/close
+tags:
+  - API
+  - Arrêter
+  - DOM
+  - Méthodes
+  - Worker
+translation_of: Web/API/DedicatedWorkerGlobalScope/close
+---
+<p>{{APIRef("Web Workers API")}}</p>
+
+<p>La méthode <code><strong>close()</strong></code> de l'interface {{domxref("DedicatedWorkerGlobalScope")}} ferme toutes les tâches placées dans la boucle de l'évènement <code>DedicatedWorkerGlobalScope</code>, fermant effectivement cette portée particulière.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">self.close();</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Si vous souhaitez fermer votre instance de travail depuis l'intérieur du worker, vous pouvez appeler ce qui suit :</p>
+
+<pre class="brush: js">close();</pre>
+
+<p><code>close()</code> et <code>self.close()</code> sont effectivement équivalents — les deux représentent une instruction <code>close()</code> qui est appelée de l'intérieur de la portée interne du worker.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Il y a une autre façon d'arrêter le worker depuis le fil principal : la méthode {{domxref("Worker.terminate")}}.</p>
+</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('HTML WHATWG', '#dom-dedicatedworkerglobalscope-close', 'close()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.DedicatedWorkerGlobalScope.close")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p>{{domxref("DedicatedWorkerGlobalScope")}}</p>
diff --git a/files/fr/web/api/dedicatedworkerglobalscope/index.html b/files/fr/web/api/dedicatedworkerglobalscope/index.html
new file mode 100644
index 0000000000..02e85acf6d
--- /dev/null
+++ b/files/fr/web/api/dedicatedworkerglobalscope/index.html
@@ -0,0 +1,114 @@
+---
+title: DedicatedWorkerGlobalScope
+slug: Web/API/DedicatedWorkerGlobalScope
+translation_of: Web/API/DedicatedWorkerGlobalScope
+---
+<p>{{APIRef("Web Workers API")}}</p>
+
+<p>L'objet <strong><code>DedicatedWorkerGlobalScope</code></strong> (le contexte global du {{domxref("Worker")}}) est accessible au moyen du mot clé {{domxref("window.self","self")}}. Certaines fonctions globales additionnelles, des espaces de nom d'objets, et des constructeurs, non associés typiquement au contexte global d'un worker, et néanmoins disponibles, sont listés dans la  <a href="/fr/docs/Web/JavaScript/Reference">Référence JavaScript</a>. Consultez aussi : <a href="/fr/docs/Web/Guide/Needs_categorization/Functions_available_to_workers">Fonctions et classes disponibles dans les Web Workers</a>.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Cette interface hérite des propriétés de l'interface {{domxref("WorkerGlobalScope")}}, et de son parent {{domxref("EventTarget")}}, et implémente ainsi les propriétés de {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, et {{domxref("WindowEventHandlers")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("DedicatedWorkerGlobalScope.name")}} {{readOnlyinline}}</dt>
+ <dd>Le nom du {{domxref("Worker")}} optionnellement donné lors de la création du worker avec le constructeur {{domxref("Worker.Worker", "Worker()")}}. Il est souvent utilisé pour du débogage.</dd>
+</dl>
+
+<h3 id="Propriétés_héritées_de_WorkerGlobalScope">Propriétés héritées de WorkerGlobalScope</h3>
+
+<dl>
+ <dt>{{domxref("WorkerGlobalScope.self")}}</dt>
+ <dd>Retourne une référence d'objet à l'objet <code>DedicatedWorkerGlobalScope</code> lui-même.</dd>
+ <dt>{{domxref("WorkerGlobalScope.console")}} {{readOnlyinline}}</dt>
+ <dd>Retourne la {{domxref("Console")}} associée au worker.</dd>
+ <dt>{{domxref("WorkerGlobalScope.location")}} {{readOnlyinline}}</dt>
+ <dd>Retourne la {{domxref("WorkerLocation")}} associée au worker. <code>WorkerLocation</code> est un objet location spécifique, essentiellement un sous-ensemble de {{domxref("Location")}} utilisé dans le contexte d'un navigateur, mais adapté aux workers.</dd>
+ <dt>{{domxref("WorkerGlobalScope.navigator")}} {{readOnlyinline}}</dt>
+ <dd>Retourne le {{domxref("WorkerNavigator")}} associé au worker. <code>WorkerNavigator</code> est un objet navigator spécifique, essentiellement un sous-ensemble de {{domxref("Navigator")}} utilisé dans le contexte d'un navigateur, mais adapté aux workers.</dd>
+ <dt>{{domxref("WorkerGlobalScope.performance")}} {{readOnlyinline}} {{Non-standard_inline}}</dt>
+ <dd>Retourne l'objet {{domxref("Performance")}} associé au worker, qui correspond à l'objet performance normal, avec seulement à disposition un sous-ensemble de ses propriétés et méthodes.</dd>
+</dl>
+
+<h3 id="Gestionnaires_dévénement">Gestionnaires d'événement</h3>
+
+<p><em>Cette interface hérite des gestionnaires d'événement de l'interface {{domxref("WorkerGlobalScope")}}, et de son parent {{domxref("EventTarget")}}, et implémente ainsi les gestionnaires d'événement de {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, et {{domxref("WindowEventHandlers")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("DedicatedWorkerGlobalScope.onmessage")}}</dt>
+ <dd>C'est un {{domxref("EventHandler")}} représentant le code à appeler lorsqu'un événement {{event("message")}} est déclenché. Ces événements sont du type {{domxref("MessageEvent")}} et sont appelés quand le worker reçoit un message du document qui l'a initialisé (i.e. à partir de la méthode {{domxref("Worker.postMessage")}}.)</dd>
+ <dt>{{domxref("DedicatedWorkerGlobalScope.onmessageerror")}}</dt>
+ <dd>C'est un {{domxref("EventHandler")}} représentant le code à appeler lorsqu'un événement {{event("messageerror")}} est déclenché.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Cette interface hérite des méthodes de l'interface {{domxref("WorkerGlobalScope")}}, et de son parent {{domxref("EventTarget")}}, et implémente ainsi les méthodes de {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, et {{domxref("WindowEventHandlers")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("WorkerGlobalScope.close()")}}</dt>
+ <dd>Annule toute tâche en attente dans la boucle d'événement du <code>WorkerGlobalScope</code>, mettant alors fin à ce contexte précis.</dd>
+ <dt>{{domxref("DedicatedWorkerGlobalScope.postMessage")}}</dt>
+ <dd>Envoie un message — qui peut comprendre  <code>n'importe quel</code> objet JavaScript — au document parent qui a préalablement engendré le worker.</dd>
+</dl>
+
+<h3 id="Héritées_de_WorkerGlobalScope">Héritées de WorkerGlobalScope</h3>
+
+<dl>
+ <dt>{{domxref("WorkerGlobalScope.dump()")}} {{non-standard_inline}}</dt>
+ <dd>Écrit un message dans la console.</dd>
+ <dt>{{domxref("WorkerGlobalScope.importScripts()")}}</dt>
+ <dd>Importe un ou plusieurs scripts dans le contexte du worker. Vous pouvez spécifier autant de fichiers que souhaité, en les séparant par des virgules. Par exemple: <code>importScripts('foo.js', 'bar.js');</code></dd>
+</dl>
+
+<h3 id="Implémentées_à_partir_dautres_endroits">Implémentées à partir d'autres endroits</h3>
+
+<dl>
+ <dt>{{domxref("WindowBase64.atob()")}}</dt>
+ <dd>Décode une chaîne de données qui a été encodée en base-64.</dd>
+ <dt>{{domxref("WindowBase64.btoa()")}}</dt>
+ <dd>Crée une chaîne ASCII en base-64 à partir d'une chaîne de données binaires.</dd>
+ <dt>{{domxref("WindowTimers.clearInterval()")}}</dt>
+ <dd>Annule l'exécution répétée initiée par {{domxref("WindowTimers.setInterval()")}}.</dd>
+ <dt>{{domxref("WindowTimers.clearTimeout()")}}</dt>
+ <dd>Annule l'exécution répété initiée par {{domxref("WindowTimers.setTimeout()")}}.</dd>
+ <dt>{{domxref("WindowTimers.setInterval()")}}</dt>
+ <dd>Planifie l'exécution d'une fonction toutes les X millisecondes.</dd>
+ <dt>{{domxref("WindowTimers.setTimeout()")}}</dt>
+ <dd>Fixe un délai pour l'exécution d'une fonction.</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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dedicatedworkerglobalscope', 'DedicatedWorkerGlobalScope')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+
+
+<p>{{Compat("api.DedicatedWorkerGlobalScope")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Worker")}}</li>
+ <li>{{domxref("WorkerGlobalScope")}}</li>
+ <li><a href="/fr/docs/Web/Guide/Performance/Using_web_workers">Utilisation des web workers</a></li>
+ <li><a href="/fr/docs/Web/Guide/Needs_categorization/Functions_available_to_workers">Fonctions et classes disponibles dans les Web Workers</a></li>
+</ul>
diff --git a/files/fr/web/api/dedicatedworkerglobalscope/name/index.html b/files/fr/web/api/dedicatedworkerglobalscope/name/index.html
new file mode 100644
index 0000000000..fb63f1cc74
--- /dev/null
+++ b/files/fr/web/api/dedicatedworkerglobalscope/name/index.html
@@ -0,0 +1,61 @@
+---
+title: DedicatedWorkerGlobalScope.name
+slug: Web/API/DedicatedWorkerGlobalScope/name
+tags:
+  - API
+  - DOM
+  - Nom
+  - Propriétés
+  - Worker
+translation_of: Web/API/DedicatedWorkerGlobalScope/name
+---
+<div>{{APIRef("Web Workers API")}}</div>
+
+<p>La propriété en lecture seule <code><strong>name</strong></code> de l'interface {{domxref("DedicatedWorkerGlobalScope")}} renvoie le nom qui a été (facultativement) donné au  {{domxref("Worker")}} lors de sa création. C'est le nom que le constructeur {{domxref("Worker.Worker", "Worker()")}} peut transmettre pour obtenir une référence à {{domxref("DedicatedWorkerGlobalScope")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var nameObj = self.name;</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>).</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Un worker est créé en utilisant un constructeur avec une option de <code>name</code> :</p>
+
+<pre class="brush: js">var myWorker = new Worker("worker.js", { name : "myWorker" });</pre>
+
+<p>le {{domxref("DedicatedWorkerGlobalScope")}} aura désormais le nom de "myWorker", qui peut être renvoyé pendant l'exécution</p>
+
+<pre class="brush: js">self.name</pre>
+
+<p>à l'intérieur du worker.</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('HTML WHATWG', '#dom-dedicatedworkerglobalscope-name', 'name')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.DedicatedWorkerGlobalScope.name")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("DedicatedWorkerGlobalScope")}}</li>
+</ul>
diff --git a/files/fr/web/api/devicemotionevent/accelerationincludinggravity/index.html b/files/fr/web/api/devicemotionevent/accelerationincludinggravity/index.html
new file mode 100644
index 0000000000..e3b4818e0b
--- /dev/null
+++ b/files/fr/web/api/devicemotionevent/accelerationincludinggravity/index.html
@@ -0,0 +1,121 @@
+---
+title: DeviceMotionEvent.accelerationIncludingGravity
+slug: Web/API/DeviceMotionEvent/accelerationIncludingGravity
+tags:
+  - API
+  - Appareil
+  - Mobile
+  - Mouvement
+  - Orientation
+  - Propriétés
+  - axes
+translation_of: Web/API/DeviceMotionEvent/accelerationIncludingGravity
+---
+<p>{{ ApiRef("Device Orientation Events") }}</p>
+
+<p>La propriété <strong><code>accelerationIncludingGravity</code></strong> renvoie la valeur d'accélération enregistrée par l'appareil, en <a href="https://fr.wikipedia.org/wiki/M%C3%A8tre_par_seconde_carr%C3%A9e" title="https://en.wikipedia.org/wiki/Meter_per_second_squared">mètres par seconde au carré (m/s<sup>2</sup>)</a>. Contrairement à  {{domxref("DeviceMotionEvent.acceleration")}} qui compense pour tenir compte de l'influence de la gravité, sa valeur est la somme de l'accélération <span id="result_box" lang="fr"><span>de l'appareil induite par l'utilisateur et de celle provoquée par la gravité.</span></span></p>
+
+<p>Cette valeur n'est pas  aussi utile que {{domxref("DeviceMotionEvent.acceleration")}}, mais elle peut être la seule disponible, par exemple pour un appareil qui ne peut supprimer la gravité des données d'accélération puisqu'il ne l'utilise pas, comme les périphériques sans gyroscope.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="eval">var acceleration = <em>instanceOfDeviceMotionEvent</em>.accelerationIncludingGravity;
+</pre>
+
+<h2 id="Example" name="Example">Valeur</h2>
+
+<p>La propriété <code>accelerationIncludingGravity</code> est un objet fournissant une information sur l'accélération des 3 axes. Pour chacun d'eux, elle est représentée par leur propre propriété :</p>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Représente l'accélération <span id="result_box" lang="fr"><span>sur l'axe x qui est l'axe est-ouest.</span></span></dd>
+ <dt><code>y</code></dt>
+ <dd>Représente l'accélération <span id="result_box" lang="fr"><span>sur l'axe </span></span> y qui est l'axe nord-sud</dd>
+ <dt><code>z</code></dt>
+ <dd>Représente l'accélération <span id="result_box" lang="fr"><span>sur l'axe</span></span> z qui est l'axe haut-bas</dd>
+</dl>
+
+<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('Device Orientation')}}</td>
+   <td>{{Spec2('Device Orientation')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("6")}}</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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("6")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>4.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{ domxref("DeviceMotionEvent.acceleration") }}</li>
+ <li>{{ event("devicemotion") }}</li>
+ <li>{{ domxref("window.ondevicemotion") }}</li>
+ <li>{{ event("deviceorientation") }}</li>
+ <li>{{ domxref("DeviceOrientationEvent") }}</li>
+ <li><a href="https://developer.mozilla.org/fr/docs/WebAPI/Detecting_device_orientation#Accelerometer_values_explained" title="/en-US/docs/WebAPI/Detecting_device_orientation">Détecter l'orientation de l'appareil</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/Guide/DOM/Events/Les_donn%C3%A9es_d_orientation_et_de_mouvement_expliqu%C3%A9es" title="Orientation and motion data explained">Les données d'orientation et de mouvement expliquées</a></li>
+</ul>
diff --git a/files/fr/web/api/devicemotionevent/devicemotionevent/index.html b/files/fr/web/api/devicemotionevent/devicemotionevent/index.html
new file mode 100644
index 0000000000..7f7d3b73b7
--- /dev/null
+++ b/files/fr/web/api/devicemotionevent/devicemotionevent/index.html
@@ -0,0 +1,107 @@
+---
+title: DeviceMotionEvent.DeviceMotionEvent()
+slug: Web/API/DeviceMotionEvent/DeviceMotionEvent
+tags:
+  - API
+  - Constructeurs
+  - Mobile
+  - Mouvement
+  - Orientation
+  - axes
+translation_of: Web/API/DeviceMotionEvent/DeviceMotionEvent
+---
+<p>{{APIRef("Device Orientation Events")}}{{Non-standard_header}}</p>
+
+<p>Le constructeur <strong><code>DeviceMotionEvent</code></strong> crée un nouveau {{domxref("DeviceMotionEvent")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var deviceMotionEvent = new DeviceMotionEvent(type[, options])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p><em>type</em></p>
+
+<dl>
+ <dd>Doit être <code>"devicemotion"</code>.</dd>
+ <dt><em>options</em> {{optional_inline}}</dt>
+ <dd>Les options sont les suivantes :
+ <ul>
+  <li><code>acceleration</code> : un  objet donnant l'accélération de l'appareil sur les 3 axes X, Y et Z. L'accélération est exprimée en <a href="https://en.wikipedia.org/wiki/Meter_per_second_squared" title="https://en.wikipedia.org/wiki/Meter_per_second_squared">m/s<sup>2</sup></a>.</li>
+  <li><code>accelerationIncludingGravity</code> : un objet donnant l'accélération de l'appareil sur les 3 axes X, Y et Z avec l'effet de la gravité. L'accélération est exprimée en <a href="https://en.wikipedia.org/wiki/Meter_per_second_squared" title="https://en.wikipedia.org/wiki/Meter_per_second_squared">m/s<sup>2</sup></a>.</li>
+  <li><code>rotationRate</code> : un objet donnant la vitesse de rotation du changement d'orientation de l'appareil sur les axes alpha, beta et gamma. La vitesse de rotation est exprimée en degrés par seconde.</li>
+  <li><code>interval</code> : Un nombre représentant l'intervalle de temps, en millisecondes, avant d'obtenir des données à partir de l'appareil.</li>
+ </ul>
+ </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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Device Orientation')}}</td>
+   <td>{{Spec2('Device Orientation')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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(59)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera()}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(59)}}</td>
+   <td>{{CompatChrome(59)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile()}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fr/web/api/devicemotionevent/index.html b/files/fr/web/api/devicemotionevent/index.html
new file mode 100644
index 0000000000..099cc5b630
--- /dev/null
+++ b/files/fr/web/api/devicemotionevent/index.html
@@ -0,0 +1,153 @@
+---
+title: DeviceMotionEvent
+slug: Web/API/DeviceMotionEvent
+tags:
+  - API
+  - Device Orientation
+  - Experimental
+  - Firefox OS
+  - Mobile
+  - Motion
+  - Orientation
+  - TopicStub
+translation_of: Web/API/DeviceMotionEvent
+---
+<p>{{apiref("Device Orientation Events")}}{{SeeCompatTable}}</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p><code>DeviceMotionEvent</code> fournit aux développeurs Web des informations sur la vitesse des changements de position et d'orientation de l'appareil.</p>
+
+<div class="warning">
+<p><strong>Attention:</strong> Actuellement, Firefox et Chrome ne gèrent pas les coordonnées de la même manière. Faites attention à cela lorsque vous les utilisez.</p>
+</div>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("DeviceMotionEvent.DeviceMotionEvent","DeviceMotionEvent.DeviceMotionEvent()")}}</dt>
+ <dd>Crée un nouvel <code>DeviceMotionEvent</code>.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("DeviceMotionEvent.acceleration")}} {{readonlyinline}}</dt>
+ <dd>Un objet donnant l'accélération du dispositif sur les trois axes X, Y et Z. L'accélération est exprimée en <a href="https://en.wikipedia.org/wiki/Meter_per_second_squared" title="https://en.wikipedia.org/wiki/Meter_per_second_squared">m/s<sup>2</sup></a>.</dd>
+ <dt>{{domxref("DeviceMotionEvent.accelerationIncludingGravity")}} {{readonlyinline}}</dt>
+ <dd>Un objet donnant l'accélération de l'appareil sur les trois axes X, Y et Z avec l'effet de la gravité. L'accélération est exprimée en <a href="https://en.wikipedia.org/wiki/Meter_per_second_squared" title="https://en.wikipedia.org/wiki/Meter_per_second_squared">m/s<sup>2</sup></a>.</dd>
+ <dt>{{domxref("DeviceMotionEvent.rotationRate")}} {{readonlyinline}}</dt>
+ <dd><span class="tlid-translation translation" lang="fr"><span title="">Un objet donnant le taux de changement d'orientation de l'appareil sur les trois axes d'orientation alpha, bêta et gamma.</span></span> Le taux de rotation est exprimé en degrés par seconde.</dd>
+ <dt>{{domxref("DeviceMotionEvent.interval")}} {{readonlyinline}}</dt>
+ <dd>Nombre représentant l'intervalle de temps, en millisecondes, auquel les données sont obtenues à partir de l'appareil.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js notranslate">window.addEventListener('devicemotion', function(event) {
+  console.log(event.acceleration.x + ' m/s2');
+});</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('Device Orientation')}}</td>
+   <td>{{Spec2('Device Orientation')}}</td>
+   <td>Spécification initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support de base</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("6")}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Constructeur</td>
+   <td>{{CompatChrome(59)}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android Webview</th>
+   <th>Chrome pour Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("6")}}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>4.2</td>
+  </tr>
+  <tr>
+   <td>Constructeur</td>
+   <td>{{CompatChrome(59)}}</td>
+   <td>{{CompatChrome(59)}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{ event("deviceorientation") }}</li>
+ <li>{{ domxref("DeviceMotionEvent") }}</li>
+ <li>{{ event("devicemotion") }}</li>
+ <li><a href="/en-US/docs/WebAPI/Detecting_device_orientation" title="/en-US/docs/WebAPI/Detecting_device_orientation">Détection de l'orientation de l'appareil</a></li>
+ <li><a href="https://developer.mozilla.org/en/DOM/Orientation_and_motion_data_explained" title="Orientation and motion data explained">Explication des données d'orientation et de mouvement</a></li>
+</ul>
diff --git a/files/fr/web/api/devicemotionevent/interval/index.html b/files/fr/web/api/devicemotionevent/interval/index.html
new file mode 100644
index 0000000000..0a6de296b7
--- /dev/null
+++ b/files/fr/web/api/devicemotionevent/interval/index.html
@@ -0,0 +1,53 @@
+---
+title: DeviceMotionEvent.interval
+slug: Web/API/DeviceMotionEvent/interval
+tags:
+  - API
+  - Propriété
+  - Reference
+translation_of: Web/API/DeviceMotionEvent/interval
+---
+<p>{{apiref("Device Orientation Events")}}</p>
+
+<p>La propriété <strong><code>interval</code></strong> renvoie la granularité temporelle, exprimée en millisecondes, avec laquelle les données relatives aux mouvements sont obtenues du matériel.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var interval = <em>instanceOfDeviceMotionEvent</em>.interval;
+</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('Device Orientation')}}</td>
+   <td>{{Spec2('Device Orientation')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.DeviceMotionEvent.interval")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{ domxref("DeviceMotionEvent") }}</li>
+ <li>{{ event("devicemotion") }}</li>
+ <li>{{ domxref("window.ondevicemotion") }}</li>
+ <li>{{ event("deviceorientation") }}</li>
+ <li>{{ domxref("DeviceOrientationEvent") }}</li>
+ <li><a href="/fr/docs/WebAPI/Detecting_device_orientation">Detecting device orientation</a></li>
+</ul>
diff --git a/files/fr/web/api/devicemotionevent/rotationrate/index.html b/files/fr/web/api/devicemotionevent/rotationrate/index.html
new file mode 100644
index 0000000000..929f04f6fa
--- /dev/null
+++ b/files/fr/web/api/devicemotionevent/rotationrate/index.html
@@ -0,0 +1,70 @@
+---
+title: DeviceMotionEvent.rotationRate
+slug: Web/API/DeviceMotionEvent/rotationRate
+tags:
+  - API
+  - DOM
+  - Mobile
+  - Orientation
+  - Propriété
+  - Vitesse
+translation_of: Web/API/DeviceMotionEvent/rotationRate
+---
+<p>{{ ApiRef("Device Orientation Events") }}</p>
+
+<p>La propriété <code><strong>rotationRate</strong></code> renvoie la vitesse de rotation de l'appareil autour de chacun de ses axes en degrés par seconde.</p>
+
+<div class="note"><strong>Note </strong>: Si le matériel n'est pas capable de fournir cette information, la propriété renvoie <code>null</code>.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var rates = <em>instanceOfDeviceMotionEvent</em>.rotationRate;
+</pre>
+
+<h2 id="Valeurs">Valeurs</h2>
+
+<p>La propriété <code>rotationRates</code> est un objet en lecture seule décrivant la vitesse de rotation d'un appareil autour de chacun de ses axes :</p>
+
+<dl>
+ <dt><code>alpha</code></dt>
+ <dd>La vitesse de rotation de l'appareil sur son axe Z ; c'est-à-dire déplacé autour d'une ligne perpendiculaire à l'écran.</dd>
+ <dt><code>beta</code></dt>
+ <dd>La vitesse de rotation de l'appareil sur son axe X ; c'est-à-dire de l'avant vers l'arrière.</dd>
+ <dt><code>gamma</code></dt>
+ <dd>La vitesse de rotation de l'appareil sur son axe Y ; c'est-à-dire d'un côté à l'autre.</dd>
+</dl>
+
+<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('Device Orientation')}}</td>
+   <td>{{Spec2('Device Orientation')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.DeviceMotionEvent.rotationRate")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{ domxref("DeviceMotionEvent") }}</li>
+ <li>{{ event("devicemotion") }}</li>
+ <li>{{ domxref("window.ondevicemotion") }}</li>
+ <li>{{ event("deviceorientation") }}</li>
+ <li>{{ domxref("DeviceOrientationEvent") }}</li>
+ <li><a href="https://developer.mozilla.org/fr/docs/WebAPI/Detecting_device_orientation" title="/en-US/docs/WebAPI/Detecting_device_orientation">Détecter l'orientation de l'appareil</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/Guide/DOM/Events/Les_donn%C3%A9es_d_orientation_et_de_mouvement_expliqu%C3%A9es" title="Orientation and motion data explained">Les données d'orientation et de mouvement expliquées</a></li>
+</ul>
diff --git a/files/fr/web/api/deviceorientationevent.absolute/index.html b/files/fr/web/api/deviceorientationevent.absolute/index.html
new file mode 100644
index 0000000000..3b1c6f593a
--- /dev/null
+++ b/files/fr/web/api/deviceorientationevent.absolute/index.html
@@ -0,0 +1,56 @@
+---
+title: DeviceOrientationEvent.absolute
+slug: Web/API/DeviceOrientationEvent.absolute
+translation_of: Web/API/DeviceOrientationEvent/absolute
+---
+<p>{{ ApiRef() }}</p>
+
+<h2 id="Summary" name="Summary">Sommaire</h2>
+
+<p>Indique si l'appareil partage des données en référentiel absolut c'est à dire sur avec des cordonnées issu du référentiel terrestre, ou si il partage des données utilisant un référentiel arbitraire déterminé par l'appareil. Voir <a href="/en/DOM/Orientation_and_motion_data_explained" title="Orientation et mouvement expliqué">Orientation et mouvement expliqué</a> pour plus de détails.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="eval">var absolute = <em>instanceOfDeviceOrientationEvent</em>.absolute;
+</pre>
+
+<p><code>DeviceOrientationEvent.absolute</code> retourne un booléen :</p>
+
+<ul>
+ <li><code>true</code> : si les données d'orientation dans <code>instanceOfDeviceOrientationEvent</code> est proposer dans un référentiel terrestre.</li>
+ <li><code>false</code> : si les données d'orientation utilisent un référentiel arbitraire.</li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statuts</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Device Orientation')}}</td>
+   <td>{{Spec2('Device Orientation')}}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_entre_les_navigateurs">Compatibilité entre les navigateurs</h2>
+
+<p>{{ page("/en-US/docs/Web/API/DeviceOrientationEvent","Browser_compatibility") }}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{ domxref("DeviceOrientationEvent") }}</li>
+ <li><a href="/en/Detecting_device_orientation" title="Detecting device orientation">Detecting device orientation</a></li>
+ <li><a href="/en/DOM/Orientation_and_motion_data_explained" title="Orientation and motion data explained">Orientation and motion data explained</a></li>
+ <li>{{ domxref("window.ondeviceorientation") }}</li>
+</ul>
+
+<p>{{ event("deviceorientation") }}</p>
diff --git a/files/fr/web/api/deviceorientationevent/index.html b/files/fr/web/api/deviceorientationevent/index.html
new file mode 100644
index 0000000000..0dfe1510fa
--- /dev/null
+++ b/files/fr/web/api/deviceorientationevent/index.html
@@ -0,0 +1,120 @@
+---
+title: DeviceOrientationEvent
+slug: Web/API/DeviceOrientationEvent
+tags:
+  - B2G
+  - Device Orientation
+  - Experimental
+  - Firefox OS
+  - Mobile
+  - Orientation
+  - WebAPI
+  - events
+  - évènements
+translation_of: Web/API/DeviceOrientationEvent
+---
+<p>{{ApiRef}}{{SeeCompatTable}}</p>
+<h2 id="Sommaire">Sommaire</h2>
+<p>L'évènement <code>DeviceOrientationEvent</code> met à la disposition du développeur des informations sur l'orientation de l'appareil visitant une page Web</p>
+<div class="warning">
+ <p><strong>Attention :</strong> à l'heure actuelle, Firefox et Chrome ne gèrent pas les cordonnées de la même façon. Tenez-en compte lors de l'utilisation de cette API.</p>
+</div>
+<h2 id="Propriétés">Propriétés</h2>
+<dl>
+ <dt>
+  {{domxref("DeviceOrientationEvent.absolute")}} {{readonlyinline}}</dt>
+ <dd>
+  Un booléen, indiquant si l'appareil partage les informations sur son orientation absolue.</dd>
+ <dt>
+  {{domxref("DeviceOrientationEvent.alpha")}} {{readonlyinline}}</dt>
+ <dd>
+  Un nombre, représentant le mouvement de l'appareil sur l'axe « z » exprimé en degrés sur une échelle de 0° à 360°.</dd>
+ <dt>
+  {{domxref("DeviceOrientationEvent.beta")}} {{readonlyinline}}</dt>
+ <dd>
+  Un Nombre représentant le déplacement de l'appareil sur l'axe « x », exprimé en degrés sur une échelle de -180° à 180°.</dd>
+ <dt>
+  {{domxref("DeviceOrientationEvent.gamma")}} {{readonlyinline}}</dt>
+ <dd>
+  Un nombre représentant le déplacement de l'appareil sur l'axe « y », exprimé en degrés sur une échelle de -90° à 90°.</dd>
+</dl>
+<h2 id="Exemple">Exemple</h2>
+<pre class="brush: js">window.addEventListener('deviceorientation', function(event) {
+  console.log("z : " + event.alpha + "\n x : " + event.beta + "\n y : " + event.gamma);
+});</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('Device Orientation')}}</td>
+   <td>{{Spec2('Device Orientation')}}</td>
+   <td>Spécification initiale.</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Compatibilité_entre_les_navigateurs">Compatibilité entre les navigateurs</h2>
+<p>Compatibilité pour DeviceOrientationEvent:</p>
+<p>{{ CompatibilityTable() }}</p>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Technologie</th>
+    <th>Chrome</th>
+    <th>Firefox (Gecko)</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari (WebKit)</th>
+   </tr>
+   <tr>
+    <td>Support de base</td>
+    <td>7.0</td>
+    <td>3.6 (mozOrientation),<br>
+     6</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>Technologie</th>
+    <th>Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Phone</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Support de base</td>
+    <td>3.0</td>
+    <td>3.6 (mozOrientation),<br>
+     6</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>4.2</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h3 id="Notes_spécifiques_à_Gecko">Notes spécifiques à Gecko</h3>
+<p>Firefox 3.6, 4, et 5 supportent <a href="/en-US/DOM/MozOrientation" title="MozOrientation">mozOrientation </a>au lieu de l'interface  standard <code>DeviceOrientationEvent.</code></p>
+<h2 id="Voir_aussi">Voir aussi</h2>
+<ul>
+ <li>{{ event("deviceorientation") }}</li>
+ <li>{{ domxref("DeviceMotionEvent") }}</li>
+ <li>{{ event("devicemotion") }}</li>
+ <li><a href="/en-US/docs/WebAPI/Detecting_device_orientation" title="/en-US/docs/WebAPI/Detecting_device_orientation">Detecting device orientation</a></li>
+ <li><a href="https://developer.mozilla.org/en/DOM/Orientation_and_motion_data_explained" title="Orientation and motion data explained">Orientation and motion data explained</a></li>
+</ul>
diff --git a/files/fr/web/api/devicerotationrate/alpha/index.html b/files/fr/web/api/devicerotationrate/alpha/index.html
new file mode 100644
index 0000000000..c1975c26c8
--- /dev/null
+++ b/files/fr/web/api/devicerotationrate/alpha/index.html
@@ -0,0 +1,102 @@
+---
+title: DeviceRotationRate.alpha
+slug: Web/API/DeviceRotationRate/alpha
+tags:
+  - API
+  - DOM
+  - Mobile
+  - Propriétés
+  - Vitesse
+  - axes
+  - rotation
+  - z
+translation_of: Web/API/DeviceMotionEventRotationRate/alpha
+---
+<p>{{ ApiRef("Device Orientation Events") }}</p>
+
+<p>Cette propriété indique la vitesse de rotation autour de l'axe Z -- en degrés par seconde -- dans un objet {{ domxref("DeviceRotationRate") }}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>alpha</em> = <em>deviceRotationRate</em>.alpha;
+</pre>
+
+<p>Cette propriété est en lecture seule.</p>
+
+<h3 id="Return_Value" name="Return_Value">Valeur retournée</h3>
+
+<dl>
+ <dt><code>alpha</code></dt>
+ <dd>Un <code>double</code> indiquant la vitesse de rotation autour de l'axe Z, en degrés par seconde. Voir <a href="https://developer.mozilla.org/fr/docs/WebAPI/Detecting_device_orientation#Accelerometer_values_explained" title="en/Detecting device orientation#Accelerometer values explained">Détecter l'orientation de l'appareil</a> pour plus de détails.</dd>
+</dl>
+
+<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('Device Orientation')}}</td>
+   <td>{{Spec2('Device Orientation')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fr/web/api/devicerotationrate/beta/index.html b/files/fr/web/api/devicerotationrate/beta/index.html
new file mode 100644
index 0000000000..10ccec2055
--- /dev/null
+++ b/files/fr/web/api/devicerotationrate/beta/index.html
@@ -0,0 +1,104 @@
+---
+title: DeviceRotationRate.beta
+slug: Web/API/DeviceRotationRate/beta
+tags:
+  - API
+  - DOM
+  - Orientation
+  - Propriétés
+  - Vitesse
+  - axes
+  - rotation
+  - x
+translation_of: Web/API/DeviceMotionEventRotationRate/beta
+---
+<p>{{ ApiRef("Device Orientation Events") }}</p>
+
+<p>Cette propriété indique la vitesse de rotation autour de l'axe X -- en degrés par seconde -- dans un objet {{ domxref("DeviceRotationRate") }}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>beta</em> = <em>deviceRotationRate</em>.beta;
+</pre>
+
+<p>Cette propriété est en lecture seule.</p>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<dl>
+ <dt><code>beta</code></dt>
+ <dd>Un <code>double</code> indiquant la vitesse de rotation autour de l'axe X, en degrés par seconde. Voir <a href="https://developer.mozilla.org/fr/docs/WebAPI/Detecting_device_orientation#Accelerometer_values_explained" title="en/Detecting device orientation#Accelerometer values explained">Détecter l'orientation de l'appareil</a> pour plus de détails.</dd>
+</dl>
+
+<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('Device Orientation')}}</td>
+   <td>{{Spec2('Device Orientation')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fr/web/api/devicerotationrate/gamma/index.html b/files/fr/web/api/devicerotationrate/gamma/index.html
new file mode 100644
index 0000000000..4a61ef9f4d
--- /dev/null
+++ b/files/fr/web/api/devicerotationrate/gamma/index.html
@@ -0,0 +1,104 @@
+---
+title: DeviceRotationRate.gamma
+slug: Web/API/DeviceRotationRate/gamma
+tags:
+  - API
+  - DOM
+  - Mobile
+  - Orientation
+  - Propriétés
+  - axes
+  - rotation
+  - 'y'
+translation_of: Web/API/DeviceMotionEventRotationRate/gamma
+---
+<p>{{ ApiRef("Device Orientation Events") }}</p>
+
+<p>Cette propriété indique la vitesse de rotation autour de l'axe Y -- en degrés par seconde -- dans un objet {{ domxref("DeviceRotationRate") }}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>gamma</em> = <em>deviceRotationRate</em>.gamma;
+</pre>
+
+<p>Cette propriété est en lecture seule.</p>
+
+<h3 id="Return_Value" name="Return_Value">Valeur retournée</h3>
+
+<dl>
+ <dt><code>gamma</code></dt>
+ <dd>Un <code>double</code> indiquant la vitesse de rotation autour de l'axe Y, en degrés par seconde. Voir <a href="https://developer.mozilla.org/fr/docs/WebAPI/Detecting_device_orientation#Accelerometer_values_explained" title="en/Detecting device orientation#Accelerometer values explained">Détecter l'orientation d'un appareil</a> pour plus de détails.</dd>
+</dl>
+
+<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('Device Orientation')}}</td>
+   <td>{{Spec2('Device Orientation')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fr/web/api/devicerotationrate/index.html b/files/fr/web/api/devicerotationrate/index.html
new file mode 100644
index 0000000000..e7b54fafd5
--- /dev/null
+++ b/files/fr/web/api/devicerotationrate/index.html
@@ -0,0 +1,99 @@
+---
+title: DeviceRotationRate
+slug: Web/API/DeviceRotationRate
+tags:
+  - API
+  - Coordonnées
+  - DOM
+  - Mobile
+  - Vitesse
+  - rotation
+translation_of: Web/API/DeviceMotionEventRotationRate
+---
+<p>{{ ApiRef("Device Orientation Events") }} {{SeeCompatTable}}</p>
+
+<p>Un objet <code>DeviceRotationRate</code> fournit une information sur la vitesse avec laquelle un appareil est en rotation autour des 3 axes.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{ domxref("DeviceRotationRate.alpha") }} {{readonlyInline}}</dt>
+ <dd>La vitesse de rotation autour de l'axe Z, en degrés par seconde.</dd>
+ <dt>{{ domxref("DeviceRotationRate.beta") }} {{readonlyInline}}</dt>
+ <dd>La vitesse de rotation autour de l'axe X, en degrés par seconde.</dd>
+ <dt>{{ domxref("DeviceRotationRate.gamma") }} {{readonlyInline}}</dt>
+ <dd>La vitesse de rotation autour de l'axe Y, en degrés par seconde.</dd>
+</dl>
+
+<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('Device Orientation')}}</td>
+   <td>{{Spec2('Device Orientation')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fr/web/api/document/activeelement/index.html b/files/fr/web/api/document/activeelement/index.html
new file mode 100644
index 0000000000..9c165337e8
--- /dev/null
+++ b/files/fr/web/api/document/activeelement/index.html
@@ -0,0 +1,24 @@
+---
+title: document.activeElement
+slug: Web/API/Document/activeElement
+tags:
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/DocumentOrShadowRoot/activeElement
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p>Renvoie l'élément qui dispose actuellement du focus.</p>
+<p>{{ Note("Cet attribut fait partie de la spécification HTML 5 encore en développement.") }}</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<pre class="eval">var elemCourant = document.activeElement;
+</pre>
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+<ul>
+ <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#focus-management">Focus management</a> (brouillon de travail HTML 5)</li>
+</ul>
+<p> </p>
+<p> </p>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "en": "en/DOM/document.activeElement", "es": "es/DOM/element.activeElement", "ja": "ja/DOM/document.activeElement", "pl": "pl/DOM/document.activeElement" } ) }}</p>
diff --git a/files/fr/web/api/document/adoptnode/index.html b/files/fr/web/api/document/adoptnode/index.html
new file mode 100644
index 0000000000..959e060387
--- /dev/null
+++ b/files/fr/web/api/document/adoptnode/index.html
@@ -0,0 +1,68 @@
+---
+title: Document.adoptNode()
+slug: Web/API/Document/adoptNode
+tags:
+  - API
+  - DOM
+  - Document
+  - Méthodes
+  - Noeuds
+  - Propriétaire
+translation_of: Web/API/Document/adoptNode
+---
+<div>{{ ApiRef("DOM") }}</div>
+
+<div> </div>
+
+<p><span id="result_box" lang="fr"><span>Adopte un noeud.</span> <span>Le noeud (et son sous-arbre) est supprimé du document dans lequel il se trouve (le cas échéant) et son </span></span> <code><a href="https://developer.mozilla.org/fr/docs/Web/API/Node/ownerDocument" title="DOM/Node.ownerDocument">ownerDocument</a></code> <span lang="fr"><span> (<em>document propriétaire</em>) est remplacé par le document en cours.</span> <span>Le noeud peut ensuite être inséré dans le document en cours.</span></span></p>
+
+<p><strong>Pris en charge depuis Gecko 1.9 (Firefox 3)</strong></p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre><var>node</var> = <em>document</em>.adoptNode(<var>externalNode</var>);
+</pre>
+
+<dl>
+ <dt><code><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span>node</code></dt>
+ <dd>est le noeud adopté  qui a maintenant ce document en tant que son <code><a href="/en-US/docs/DOM/Node.ownerDocument" title="DOM/Node.ownerDocument">ownerDocument</a></code> (<em>document propriétaire</em>). Le <a href="/en-US/docs/DOM/Node.parentNode"><code>parentNode</code></a> du noeud est <code>null</code>, car il n'a pas encore été inséré dans l'arborescence du document.  Notez que <code>node</code> et <code>externalNode</code> sont le même objet après cet appel.<span style="display: none;">  </span><span style="display: none;"> </span></dd>
+ <dt><code>externalNode</code></dt>
+ <dd>est le noeud à adopter existant dans un autre document.</dd>
+</dl>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">var iframe = document.getElementById('my-iframe');
+var iframeImages = iframe.contentDocument.getElementsByTagName('img');
+
+var newParent = document.getElementByTagName('images');
+
+for (var i = 0; i &lt; iframeImages.length; i++) {
+    newParent.appendChild(document.adoptNode(iframeImages[i]));
+}
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>En général l'appel de <code>adoptNode</code> peut échouer en raison du nœud source provenant d'une implémentation différente, mais cela ne devrait pas poser de problème avec les implémentations du navigateur.</p>
+
+<p></p><p>Les nœuds provenant de documents externes doivent être clonés à l'aide de <a href="/fr/docs/Web/API/Document/importNode" title="La méthode Document importNode() crée une nouvelle copie du Node ou DocumentFragment spécifié à partir d'un autre document, afin qu'il puisse être inséré dans le document actuel. Il n'est pas encore inclus dans l'arbre des documents; Pour ce faire, vous devez appeler une méthode telle que appendChild () ou insertBefore ()."><code>document.importNode()</code></a> (ou adoptés avec
+    <a href="/fr/docs/Web/API/Document/adoptNode" title="Adopte un noeud. Le noeud (et son sous-arbre) est supprimé du document dans lequel il se trouve (le cas échéant) et son  ownerDocument  (document propriétaire) est remplacé par le document en cours. Le noeud peut ensuite être inséré dans le document en cours."><code>document.adoptNode()</code></a>) avant de pouvoir être insérés dans le document courant. Pour en savoir plus sur les problèmes
+    de <a href="/fr/docs/Web/API/Node/ownerDocument" title="La propriété en lecture seule Node.ownerDocument renvoie l'objet document de niveau supérieur pour ce nœud."><code>Node.ownerDocument</code></a>, consultez la <a class="external" href="http://www.w3.org/DOM/faq.html#ownerdoc" rel="noopener">FAQ DOM du W3C</a> (en anglais).</p>
+
+    <p>Gecko n'obligeait pas à utiliser <a href="/fr/docs/Web/API/Document/importNode" title="La méthode Document importNode() crée une nouvelle copie du Node ou DocumentFragment spécifié à partir d'un autre document, afin qu'il puisse être inséré dans le document actuel. Il n'est pas encore inclus dans l'arbre des documents; Pour ce faire, vous devez appeler une méthode telle que appendChild () ou insertBefore ()."><code>document.importNode()</code></a> et <a href="/fr/docs/Web/API/Document/adoptNode" title="Adopte un noeud. Le noeud (et son sous-arbre) est supprimé du document dans lequel il se trouve (le cas échéant) et son  ownerDocument  (document propriétaire) est remplacé par le document en cours. Le noeud peut ensuite être inséré dans le document en cours."><code>document.adoptNode()</code></a> avant sa version 1.9. Depuis les versions 1.9
+    alphas, si un nœud n'est pas adopté ou importé avant d'être utilisé dans un autre document, l'exception
+    <code>WRONG_DOCUMENT_ERR</code> est déclenchée (<code>NS_ERROR_DOM_WRONG_DOCUMENT_ERR</code>). implémentation dans le <a class="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=47903" rel="noopener" title="FIXED: WRONG_DOCUMENT_ERR not being thrown">bug 47903</a>.</p><p></p>
+
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Document3-adoptNode">DOM Level 3 Core: Document.adoptNode</a></li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/document.importNode">document.importNode</a></li>
+</ul>
diff --git a/files/fr/web/api/document/alinkcolor/index.html b/files/fr/web/api/document/alinkcolor/index.html
new file mode 100644
index 0000000000..81ca413e65
--- /dev/null
+++ b/files/fr/web/api/document/alinkcolor/index.html
@@ -0,0 +1,38 @@
+---
+title: Document.alinkColor
+slug: Web/API/Document/alinkColor
+tags:
+  - API
+  - HTML DOM
+  - Obsolete
+  - Propriété
+  - Reference
+translation_of: Web/API/Document/alinkColor
+---
+<div>{{APIRef("DOM")}}{{Deprecated_header}}</div>
+
+<p>Retourne ou définit la couleur d'un lien actif dans le corps du document. Un lien hypertexte est actif durant le temps entre les événements <code>mousedown</code> et <code>mouseup</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <var>color</var> = <var>document</var>.alinkColor;
+<var>document</var>.alinkColor = <var>color</var>;
+</pre>
+
+<p><var>color</var> est un echaîne de caractère contenant le nom de la couleur en anglais(exemple., <code>blue</code> pour bleu, <code>darkblue</code> pour bleu foncé, etc.) ou la valeur hexadécimal de la couleur (exemple, <code>#0000FF</code>)</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>La valeur par défaut pour cette propriété est rouge (<code>#ee000</code> en hexadécimal) sur Mozilla Firefox.</p>
+
+<p><code>document.alinkColor</code> est obsolète dans <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268">DOM Level 2 HTML</a> (lien en anglais). Une alternative est le sélecteur CSS {{Cssxref(":active")}}.</p>
+
+<p>Une autre alternative est <code>document.body.aLink</code>, même si elle est <a class="external" href="http://www.w3.org/TR/html401/struct/global.html#adef-alink">obsolète dans HTML 4.01</a> (lien en anglais) en faveur de l'alternative CSS ci-dessus.</p>
+
+<p><a href="/fr/docs/Mozilla/Gecko">Gecko </a>supporte <code>alinkColor</code>/<code>:active</code> et {{Cssxref(":focus")}}. Internet Explorer 6 et 7 supportent <code>alinkColor</code>/<code>:active</code> seulement pour la <a href="/fr/docs/Web/HTML/Element/a">balise HTML des liens (&lt;a&gt;)</a> et le comportement est le même que <code>:focus</code> sur Gecko. Il n'y a pas de support pour <code>:focus</code> sur IE.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité sur cette page est généré depuis des données structurées. Si vous voulez contribuer à améliorer ces données, merci de vérifier la page <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et de nous envoyer une requête de mise à jour. Lien en anglais en revanche.</div>
+
+<p>{{Compat("api.Document.alinkColor")}}</p>
diff --git a/files/fr/web/api/document/applets/index.html b/files/fr/web/api/document/applets/index.html
new file mode 100644
index 0000000000..dfbb22d9b7
--- /dev/null
+++ b/files/fr/web/api/document/applets/index.html
@@ -0,0 +1,17 @@
+---
+title: Document.applets
+slug: Web/API/Document/applets
+translation_of: Web/API/Document/applets
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Summary" name="Summary">Résumé</h3>
+<p><code>applets</code> retourne une liste ordonnée des applets contenus dans un document.</p>
+<h3 id="Syntax" name="Syntax">Syntaxe</h3>
+<pre class="eval"><em>nodeList</em> = document.applets
+</pre>
+<h3 id="Example" name="Example">Exemple</h3>
+<pre class="eval">// ( Si vous savez que le second applet est celui que vous voulez )
+my_java_app = document.applets[1];
+</pre>
+<h3 id="Specification" name="Specification">Spécification</h3>
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-85113862">DOM Level 2 HTML: applets</a></p>
diff --git a/files/fr/web/api/document/bgcolor/index.html b/files/fr/web/api/document/bgcolor/index.html
new file mode 100644
index 0000000000..b379774259
--- /dev/null
+++ b/files/fr/web/api/document/bgcolor/index.html
@@ -0,0 +1,35 @@
+---
+title: Document.bgColor
+slug: Web/API/Document/bgColor
+translation_of: Web/API/Document/bgColor
+---
+<p>{{APIRef("DOM")}} {{ Deprecated_header() }}</p>
+
+<p>La propriété obsolète <code>bgColor</code> renvoie ou déinit la couleur de fond (background-color) du document courant.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>color</em> = document.bgColor
+document.bgColor =<em>color</em>
+</pre>
+
+<h3 id="Parametres">Parametres</h3>
+
+<ul>
+ <li><code>color</code> est une chaîne de caractères représentant la couleur comme un mot (e.g., "red") ou une valeur hexadécimale (e.g., "<code>#ff0000</code>").</li>
+</ul>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="eval">document.bgColor = "darkblue";
+</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>La valeur par défaut pour cette propriété sur Firefox est le blanc (<code>#ffffff</code> en hexadécimal).</p>
+
+<p><code>document.bgColor</code> est obsolète dans le <a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268">DOM Niveau 2 HTML</a>. L'alternative recommandée est l'utilisation du style CSS {{Cssxref("background-color")}} qui peut être accessible via le DOM avec <code>document.body.style.backgroundColor</code>. Une autre alternative est <code>document.body.bgColor</code>, mais c'est aussi obsolète dans HTML 4.01 en faveur de l'alternative CSS.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Document.bgColor")}}</p>
diff --git a/files/fr/web/api/document/body/index.html b/files/fr/web/api/document/body/index.html
new file mode 100644
index 0000000000..65b872d225
--- /dev/null
+++ b/files/fr/web/api/document/body/index.html
@@ -0,0 +1,32 @@
+---
+title: document.body
+slug: Web/API/Document/body
+tags:
+  - DOM
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/Document/body
+---
+<div>
+ {{ApiRef}}</div>
+<h2 id="Summary" name="Summary">Résumé</h2>
+<p>Retourne l'élément <code>&lt;body&gt;</code> ou <code>&lt;frameset&gt;</code> du document courant.</p>
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+<pre class="syntaxbox"><em>var objRef</em> = document.body;
+document.body = <em>objRef;</em></pre>
+<h2 id="Example" name="Example">Exemple</h2>
+<pre class="brush:js">// dans le HTML: &lt;body id="ancienElementBody"&gt;&lt;/body&gt;
+alert(document.body.id); // "ancienElementBody"
+
+var unNouvelElementBody = document.createElement("body");
+
+unNouvelElementBody .id = "nouvelElementBody";
+document.body = unNouvelElementBody ;
+alert(document.body.id); // "nouvelElementBody"
+</pre>
+<h2 id="Notes" name="Notes">Notes</h2>
+<p><code>document.body</code> est l'élément dans lequel le contenu du document est situé. Dans les documents avec un élément <code>&lt;body&gt;</code> celui-ci est retourné, et dans les documents de type frameset l'élément <code>&lt;frameset&gt;</code> le plus extérieur est retourné.</p>
+<p>Même si body est modifiable, lui affecter une nouvelle valeur retire tous les éléments enfants du <code>&lt;body&gt;</code> existant.</p>
+<h2 id="Specification" name="Specification">Spécification</h2>
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-56360201">DOM Level 2 HTML: HTMLDocument.body</a></li>
+</ul>
diff --git a/files/fr/web/api/document/caretrangefrompoint/index.html b/files/fr/web/api/document/caretrangefrompoint/index.html
new file mode 100644
index 0000000000..02ec1616a9
--- /dev/null
+++ b/files/fr/web/api/document/caretrangefrompoint/index.html
@@ -0,0 +1,144 @@
+---
+title: Document.caretRangeFromPoint()
+slug: Web/API/Document/caretRangeFromPoint
+tags:
+  - API
+  - DOM
+  - Document
+  - Insertion
+  - Méthode
+translation_of: Web/API/Document/caretRangeFromPoint
+---
+<p>{{APIRef("DOM")}}{{Non-standard_header}} </p>
+
+<p>La méthode <code><strong>caretRangeFromPoint()</strong></code> de l'interface {{domxref("Document")}} renvoie un objet "Range" (<em>chaîne</em>) pour le fragment de document aux coordonnées spécifiées.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var <em>range</em> = <em>document</em>.caretRangeFromPoint(float <em>x</em>, float <em>y</em>);
+</pre>
+
+<h3 id="Retourne">Retourne</h3>
+
+<p>Une des réponses suivantes :</p>
+
+<ul>
+ <li>Un {{domxref("Range")}}.</li>
+ <li><code>Null</code> si <strong>x</strong> ou <strong>y</strong> sont négatifs, hors de la fenêtre, ou s'il n'y a pas de noeud d'entrée de texte.</li>
+</ul>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>x</dt>
+ <dd>Une position horizontale dans la fenêtre courante.</dd>
+ <dt>y</dt>
+ <dd>Une position verticale <span class="short_text" id="result_box" lang="fr"><span>dans la fenêtre courante.</span></span></dd>
+</dl>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<p>Démonstration de base : lorsque vous cliquez dans un paragraphe, insérez un saut de ligne à la position du curseur :</p>
+
+<h3 id="Contenu_HTML">Contenu HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
+sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
+sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.&lt;/p&gt;</pre>
+
+<h3 id="Contenu_JavaScript">Contenu JavaScript</h3>
+
+<pre class="brush: js">function insertBreakAtPoint(e) {
+
+    var range;
+    var textNode;
+    var offset;
+
+    if (document.caretPositionFromPoint) {
+        range = document.caretPositionFromPoint(e.clientX, e.clientY);
+        textNode = range.offsetNode;
+        offset = range.offset;
+
+    } else if (document.caretRangeFromPoint) {
+        range = document.caretRangeFromPoint(e.clientX, e.clientY);
+        textNode = range.startContainer;
+        offset = range.startOffset;
+    }
+
+    // divise seulement les TEXT_NODE (<em>noeuds texte</em>)
+    if (textNode &amp;&amp; textNode.nodeType == 3) {
+        var replacement = textNode.splitText(offset);
+        var br = document.createElement('br');
+        textNode.parentNode.insertBefore(br, replacement);
+    }
+}
+
+var paragraphs = document.getElementsByTagName("p");
+for (i=0 ; i &lt; paragraphs.length; i++) {
+    paragraphs[i].addEventListener("click", insertBreakAtPoint, false);
+}</pre>
+
+<p>{{ EmbedLiveSample('Example', '', '', '', 'Web/API/Document/caretRangeFromPoint') }}</p>
+
+<p> </p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Edge</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(43.0)}}</td>
+   <td>20+</td>
+   <td>{{CompatNo()}}</td>
+   <td>12</td>
+   <td>15+</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="sect1"> </h2>
diff --git a/files/fr/web/api/document/characterset/index.html b/files/fr/web/api/document/characterset/index.html
new file mode 100644
index 0000000000..ac0462a002
--- /dev/null
+++ b/files/fr/web/api/document/characterset/index.html
@@ -0,0 +1,56 @@
+---
+title: Document.characterSet
+slug: Web/API/Document/characterSet
+tags:
+  - API
+  - DOM
+  - Document
+  - Property
+  - Read-only
+  - Reference
+translation_of: Web/API/Document/characterSet
+---
+<p>{{ApiRef("DOM")}}</p>
+
+<p><code><strong>Document.characterSet</strong></code> <span id="result_box" lang="fr"><span>propriété en lecture seule, renvoie l'encodage du document en cours</span></span>. Un encodage décrit l'ensemble des caractères possibles et la façon de décoder les octets en ces caractères.</p>
+
+<div class="note">
+<p><strong>Note :</strong> La propriété <code>document.charset</code> et <code>document.inputEncoding</code> sont les alias de <code>document.characterSet</code>. Ne plus les utiliser.</p>
+</div>
+
+<p>Les utilisateurs peuvent surcharger l'encodage indiqué pour le document (transmis par l'en-tête {{HTTPHeader("Content-Type")}} ou via le {{HTMLElement("meta")}} : <code>&lt;meta charset="utf-8"&gt;</code>) grâce au menu <kbd>Affichage → Encodage du texte</kbd>. Cela peut notamment permettre de corriger le comportement d'un document dont l'encodage indiqué est incorrect.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>string</em> = document.characterSet</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: html">&lt;button onclick="console.log(document.characterSet);"&gt;
+  Affiche le jeu de caractère
+&lt;/button&gt;
+&lt;!-- logs document's character set, such as "ISO-8859-1" or "UTF-8" --&gt;
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Etat</th>
+   <th>Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-document-characterset', 'characterSet')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Document.characterSet")}}</p>
diff --git a/files/fr/web/api/document/clear/index.html b/files/fr/web/api/document/clear/index.html
new file mode 100644
index 0000000000..a8489b0248
--- /dev/null
+++ b/files/fr/web/api/document/clear/index.html
@@ -0,0 +1,37 @@
+---
+title: Document.clear()
+slug: Web/API/Document/clear
+tags:
+  - API
+  - Deprecated
+  - Document
+  - HTML DOM
+  - Method
+  - NeedsExample
+  - NeedsMarkupWork
+  - NeedsSpecTable
+  - Reference
+translation_of: Web/API/Document/clear
+---
+<p>{{APIRef("DOM")}}{{ Deprecated_header() }}</p>
+
+<p>Cette méthode est utilisée pour effacer entièrement le document visé dans les anciennes versions (pre-1.0) de Mozilla.</p>
+
+<p>Dans les versions récentes des applications basées sur Mozilla ainsi que sur Internet Explorer et Netscape 4, cette méthode ne fait rien.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="eval">document.clear()
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<ul>
+ <li><a class="external" href="http://www.whatwg.org/html/#dom-document-clear" title="http://www.whatwg.org/html/#dom-document-clear">HTML5</a></li>
+</ul>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Document.clear")}}</p>
diff --git a/files/fr/web/api/document/compatmode/index.html b/files/fr/web/api/document/compatmode/index.html
new file mode 100644
index 0000000000..23cd1c1dbd
--- /dev/null
+++ b/files/fr/web/api/document/compatmode/index.html
@@ -0,0 +1,53 @@
+---
+title: document.compatMode
+slug: Web/API/Document/compatMode
+tags:
+  - API
+  - DOM
+  - Propriété
+  - Reference
+translation_of: Web/API/Document/compatMode
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p>Indique si le document est affiché en mode dégradé (<a href="https://developer.mozilla.org/fr/docs/Mode_quirks_de_Mozilla" title="en/Mozilla's Quirks Mode">Quirks mode</a>) ou dans le respect des standards.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="eval"><em>mode</em> = document.compatMode
+</pre>
+
+<h2 id="Valeurs">Valeurs</h2>
+
+<ul>
+ <li><code>"BackCompat"</code> si le document est a<span style="display: none;"> </span>ffiché en mode<span style="display: none;"> </span><span style="display: none;"> </span> "quirks" ;<span style="display: none;"> </span></li>
+</ul>
+
+<dl>
+ <dt>mode</dt>
+ <dd>est une  valeur énumérée qui peut être :</dd>
+</dl>
+
+<ul>
+ <li><code>"CSS1Compat"</code> si le document est affiché en mode "no-quirks" (aussi connu sous le nom de mode "standard") ou "limited-quirks" (mo<span style="display: none;"> </span>de "proche du standard").</li>
+</ul>
+
+<dl>
+</dl>
+
+<div class="note">
+<p><strong>Note :</strong> <span id="result_box" lang="fr"><span>tous ces modes sont maintenant définis dans les normes, de sorte que les anciens «standards» et «presque standards» sont absurdes et ne sont plus utilisés dans les normes.</span></span></p>
+</div>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="eval">if (document.compatMode == "BackCompat") {
+  // en mode Quirks
+}
+</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<ul>
+ <li><a class="external" href="http://dom.spec.whatwg.org/#dom-document-compatmode" title="http://dom.spec.whatwg.org/#dom-document-compatmode">DOM: Document.compatMode</a></li>
+</ul>
diff --git a/files/fr/web/api/document/contenttype/index.html b/files/fr/web/api/document/contenttype/index.html
new file mode 100644
index 0000000000..3301c615c1
--- /dev/null
+++ b/files/fr/web/api/document/contenttype/index.html
@@ -0,0 +1,30 @@
+---
+title: Document.contentType
+slug: Web/API/Document/contentType
+tags:
+  - API
+  - DOM
+  - Document
+  - MIME
+  - Propriétés
+  - Rendu
+translation_of: Web/API/Document/contentType
+---
+<p>{{ ApiRef("DOM") }}{{Non-standard_header}}</p>
+
+<p>Renvoie le type MIME dans lequel le document est rendu. Il peut provenir d'en-têtes HTTP ou d'autres sources d'informations MIME et peut être affecté par les conversions automatiques de type effectuées par le navigateur ou les extensions.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="eval"><var>contentType</var> = <var>document</var>.contentType;
+</pre>
+
+<p><code>contentType</code> est une propriété en lecture seule.</p>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>La  propriété n'est pas affectée par les balises META.</p>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<p>{{SpecName('DOM WHATWG','#dom-document-contenttype','Document.contenttype')}}</p>
diff --git a/files/fr/web/api/document/createattribute/index.html b/files/fr/web/api/document/createattribute/index.html
new file mode 100644
index 0000000000..fa0f93d1e0
--- /dev/null
+++ b/files/fr/web/api/document/createattribute/index.html
@@ -0,0 +1,91 @@
+---
+title: document.createAttribute
+slug: Web/API/Document/createAttribute
+tags:
+  - API
+  - DOM
+  - Méthodes
+  - Reference
+translation_of: Web/API/Document/createAttribute
+---
+<p>{{ApiRef("DOM")}}</p>
+
+<p>La méthode <code><strong>Document.createAttribute()</strong></code> crée un nouveau nœud d'attribut et le renvoie. L'objet a créé un noeud implémentant l'interface {{domxref("Attr")}}. Le DOM   n'impose pas le type d'attribut à ajouter à un élément particulier de cette manière.  </p>
+
+<div class="note">
+<p>  <strong>Note : </strong>La chaîne de caractères donnée dans le paramètre est convertie en minuscules.  </p>
+</div>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="eval"><em>attribut</em> = document.createAttribute(nom)
+</pre>
+
+<h3 id="Param.C3.A8tres" name="Param.C3.A8tres">Paramètres</h3>
+
+<ul>
+ <li><code>nom</code> est une chaîne de caractères contenant le nom de l'attribut.</li>
+</ul>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un nœud {{domxref("Attr")}}.</p>
+
+<h3 id="Exceptions_levées">Exceptions levées</h3>
+
+<ul>
+ <li><code>INVALID_CHARACTER_ERR</code>  si le paramètre contient un caractère invalide pour un attribut XML.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+
+<pre class="brush:js">var node = document.getElementById("div1");
+var a = document.createAttribute("my_attrib");
+a.value = "newVal";
+node.setAttributeNode(a);
+console.log(node.getAttribute("my_attrib")); // "newVal"
+</pre>
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="spectable 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('DOM WHATWG','#dom-document-createattribute','Document.createAttribute()')}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>  Comportement précis avec des caractères majuscules.  </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core','core.html#ID-1084891198','Document.createAttribute()')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Pas de modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core','core.html#ID-1084891198','Document.createAttribute()')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Pas de modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1','level-one-core.html#ID-1084891198','Document.createAttribute()')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Document.createAttribute")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Document.createElement()")}}</li>
+</ul>
diff --git a/files/fr/web/api/document/createcdatasection/index.html b/files/fr/web/api/document/createcdatasection/index.html
new file mode 100644
index 0000000000..ea4fb083ea
--- /dev/null
+++ b/files/fr/web/api/document/createcdatasection/index.html
@@ -0,0 +1,52 @@
+---
+title: Document.createCDATASection()
+slug: Web/API/Document/createCDATASection
+tags:
+  - API
+  - Création
+  - DOM
+  - Document
+  - Méthode
+  - Section
+  - XML
+  - données
+translation_of: Web/API/Document/createCDATASection
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><code>createCDATASection()</code> crée un nouveau noeud de section CDATA et le renvoie.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>CDATASectionNode</var> = document.createCDATASection(data)
+</pre>
+
+<ul>
+ <li><code>CDATASectionNode</code> est un noeud de <a href="https://developer.mozilla.org/fr/docs/Web/API/CDATASection">Section CDATA</a>.</li>
+ <li><code>data</code> est une string (<em>chaîne de caractères</em>) contenant les données à ajouter à la section CDATA.</li>
+</ul>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush:js">var docu = new DOMParser().parseFromString('&lt;xml&gt;&lt;/xml&gt;',  "application/xml")
+
+var cdata = docu.createCDATASection('Some &lt;CDATA&gt; data &amp; then some');
+
+docu.getElementsByTagName('xml')[0].appendChild(cdata);
+
+alert(new XMLSerializer().serializeToString(docu));
+// Affiche : &lt;xml&gt;&lt;![CDATA[Some &lt;CDATA&gt; data &amp; then some]]&gt;&lt;/xml&gt;
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<ul>
+ <li>Cela fonctionnera uniquement avec XML, pas avec les documents HTML (car les documents HTML ne supportent pas les sections CDATA) ; le tenter sur un document HTML va lancer une exception <code>NOT_SUPPORTED_ERR</code>.</li>
+ <li>Va lancer une exception <code>NS_ERROR_DOM_INVALID_CHARACTER_ERR</code> si on essaye de soumettre la séquence CDATA de fermeture ("]]&gt;") en tant que partie des données ; les données fournies par l'utilisateur non échappées, ne peuvent pas être utilisées en toute sécurité sans qu'avec cette méthode on obtienne cette exception (<code><a href="/en-US/docs/DOM/document.createTextNode">createTextNode()</a></code> peut souvent être utilisé à sa place).</li>
+</ul>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-createCDATASection">createCDATASection</a></li>
+</ul>
diff --git a/files/fr/web/api/document/createcomment/index.html b/files/fr/web/api/document/createcomment/index.html
new file mode 100644
index 0000000000..8aaa2be9f3
--- /dev/null
+++ b/files/fr/web/api/document/createcomment/index.html
@@ -0,0 +1,41 @@
+---
+title: document.createComment
+slug: Web/API/Document/createComment
+tags:
+  - API
+  - DOM
+  - Méthodes
+  - Reference
+translation_of: Web/API/Document/createComment
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><code>createComment()</code> crée et retourne un nouveau noeud de type commentaire.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>CommentNode</em> = document.createComment(data)
+</pre>
+
+<h3 id="Parameters" name="Parameters">Paramètres</h3>
+
+<dl>
+ <dt><code>data</code></dt>
+ <dd>Une chaîne de caractères représentant le contenu du commentaire.</dd>
+</dl>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush:js">var docu = new DOMParser().parseFromString('&lt;xml&gt;&lt;/xml&gt;',  "application/xml");
+var comment = docu.createComment('Voici un commentaire pas très bien caché');
+
+docu.getElementsByTagName('xml')[0].appendChild(comment);
+
+alert(new XMLSerializer().serializeToString(docu));
+// Affiche: &lt;xml&gt;&lt;!--Voici un commentaire pas très bien caché--&gt;&lt;/xml&gt;</pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-createComment">createComment</a></li>
+</ul>
diff --git a/files/fr/web/api/document/createdocumentfragment/index.html b/files/fr/web/api/document/createdocumentfragment/index.html
new file mode 100644
index 0000000000..63d8203bb7
--- /dev/null
+++ b/files/fr/web/api/document/createdocumentfragment/index.html
@@ -0,0 +1,140 @@
+---
+title: document.createDocumentFragment
+slug: Web/API/Document/createDocumentFragment
+tags:
+  - API
+  - DOM
+  - Document
+  - HTML
+  - Méthode
+  - Reference
+translation_of: Web/API/Document/createDocumentFragment
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p>Crée un nouvel objet vide de type  {{domxref("DocumentFragment")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox">var <var>fragment</var> = document.createDocumentFragment();
+</pre>
+
+<p><code>fragment</code> est une référence vers un objet vide de type  {{domxref("DocumentFragment")}} .</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Les objets <code>DocumentFragments</code> sont analogues à des nœuds du DOM, mais ne font jamais partie de l'arbre DOM. Le cas d'usage le plus courant consiste à créer un fragment pour y stocker des éléments, puis à ajouter en une seule opération le fragment à l'arbre DOM, ce qui a pour effet de le remplacer par tous ses éléments enfants.</p>
+
+<p>Le principal avantage de cette méthode de mise à jour du DOM vient du fait que le fragment est stocké en mémoire, et pas dans l'arbre DOM lui-même, de sorte que le modifier ne déclenche pas de <a href="http://code.google.com/speed/articles/reflow.html">reflow</a> (le calcul des positions et de la géométrie de chacun des éléments de la page affichée). Par conséquent, l´utilisation de fragments pour effectuer des mises à jour du DOM donne souvent lieu à une <a href="http://ejohn.org/blog/dom-documentfragments/">amélioration des performance</a>s.</p>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<p>Cet exemple crée une liste des principaux navigateurs du web.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>ul</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>ul<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>ul</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> element  <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'ul'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// en supposant qu'ul existe</span>
+<span class="keyword token">var</span> fragment <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createDocumentFragment</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> browsers <span class="operator token">=</span> <span class="punctuation token">[</span><span class="string token">'Firefox'</span><span class="punctuation token">,</span> <span class="string token">'Chrome'</span><span class="punctuation token">,</span> <span class="string token">'Opera'</span><span class="punctuation token">,</span>
+    <span class="string token">'Safari'</span><span class="punctuation token">,</span> <span class="string token">'Internet Explorer'</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
+
+browsers<span class="punctuation token">.</span><span class="function token">forEach</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>browser<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">var</span> li <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'li'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    li<span class="punctuation token">.</span>textContent <span class="operator token">=</span> browser<span class="punctuation token">;</span>
+    fragment<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>li<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>
+
+element<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>fragment<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Example", 600, 140)}}</p>
+
+<h2 id="Spécification">Spécification</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('DOM WHATWG', '#dom-document-createdocumentfragment', 'Document.createDocumentFragment()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale dans la spécification DOM 1.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop"> </div>
+
+<div id="compat-mobile">
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+</div>
+
+<ul>
+ <li>{{domxref("DOMImplementation.createDocument", "document.implementation.createDocument()")}}</li>
+ <li>{{domxref("documentFragment")}}</li>
+</ul>
diff --git a/files/fr/web/api/document/createelement/index.html b/files/fr/web/api/document/createelement/index.html
new file mode 100644
index 0000000000..50f79879d8
--- /dev/null
+++ b/files/fr/web/api/document/createelement/index.html
@@ -0,0 +1,139 @@
+---
+title: document.createElement
+slug: Web/API/Document/createElement
+tags:
+  - API
+  - Création
+  - DOM
+  - Document
+  - Elements
+  - Méthodes
+translation_of: Web/API/Document/createElement
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Dans un document <a href="https://developer.mozilla.org/fr/docs/Web/HTML">HTML</a>, la méthode <strong><code>document.createElement()</code></strong> crée un élément HTML du type spécifié par <code>tagName</code> ou un {{domxref("HTMLUnknownElement")}} si <code>tagName</code> n’est pas reconnu.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var element = document.createElement(tagName[, options]);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>tagName</dt>
+ <dd>Une chaîne de caractères ({{domxref("DOMString")}}) spécifiant le type d’élément à créer. Le {{domxref("Node.nodeName", "nodeName")}} (<em>nom du noeud</em>) de l’élément créé est initialisé avec la valeur de <code>tagName</code>. N’utilisez pas le nom qualifié (comme <code>"html:a"</code>) avec cette méthode. Quand elle est appelée sur un document HTML, <code>createElement()</code> convertit <code>tagName</code> en minuscules avant de créer l’élément. Dans Firefox, Opera et Chrome, <code>createElement(null)</code> fonctionne comme <code>createElement("null")</code>.</dd>
+ <dt>options{{optional_inline}}</dt>
+ <dd>
+ <p>Un objet <code>ElementCreationOptions</code> facultatif contenant une seule propriété nommée <code>is</code> dont la valeur est le nom de balise d’un élément personnalisé précédemment défini avec <code>customElements.define()</code>. Voir {{anch("Web component example")}} pour plus de détails.</p>
+ </dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>L’objet {{domxref("Element")}} créé.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_de_base">Exemple de base</h3>
+
+<p>Ici est créé un nouveau <code>&lt;div&gt;</code> qui est inséré avant l’élément avec l’identifiant <code>"div1"</code>.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;||Working with elements||&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;div id="div1"&gt;The text above has been created dynamically.&lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">document.body.onload = addElement;
+
+function addElement () {
+  // crée un nouvel élément div
+  var newDiv = document.createElement("div");
+  // et lui donne un peu de contenu
+  var newContent = document.createTextNode('Hi there and greetings!');
+  // ajoute le nœud texte au nouveau div créé
+  newDiv.appendChild(newContent);
+
+  // ajoute le nouvel élément créé et son contenu dans le DOM
+  var currentDiv = document.getElementById('div1');
+  document.body.insertBefore(newDiv, currentDiv);
+}</pre>
+
+<p>{{EmbedLiveSample("Basic_example", 500, 50)}}</p>
+
+<h3 id="Exemple_de_composant_web">Exemple de composant web</h3>
+
+<p>L’exemple de fragment suivant est extrait de notre exemple expanding-list-web-component (voir aussi en direct). Dans ce cas, notre élément personnalisé étend la {{domxref("HTMLUListElement")}} qui représente l’élément {{htmlelement("ul")}}.</p>
+
+<pre class="brush: js">// Crée une classe pour l’élément
+class ExpandingList extends HTMLUListElement {
+  constructor() {
+    // Toujours appeler « super » en premier dans le constructeur
+    super();
+
+    // définition du constructeur omise pour la brièveté
+    ...
+  }
+}
+
+// Définit le nouvel élément
+customElements.define('expanding-list', ExpandingList, { extends: 'ul' });</pre>
+
+<p>Si nous cherchons à créer une instance de cet élément par programmation, nous devons utiliser un appel tel que montré dans la ligne suivante :</p>
+
+<pre class="brush: js">let expandingList = document.createElement('ul', { is : 'expanding-list' })</pre>
+
+<p>Le nouvel élément donnera un attribut <code><a href="/docs/Web/HTML/Global_attributes/is">is</a></code> dont la valeur est la balise de nom de l’élément personnalisé.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Pour la rétrocompatibilité avec les versions précédentes de la <a href="https://www.w3.org/TR/custom-elements/">spécification des éléments personnalisés</a>, quelques navigateurs permettent de passer une chaîne de caractères ici, à la place d’un objet, dont la valeur est la balise de nom de l’élément personnalisé.</p>
+</div>
+
+<h2 id="Spécification">Spécification</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('DOM WHATWG', "#dom-document-createelement", "Document.createElement")}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">La table de compatibilité sur cette page est génératée à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request.</em></div>
+
+<p>{{Compat("api.Document.createElement")}}</p>
+
+<h3 id="Notes_CSS_Quantum">Notes CSS Quantum</h3>
+
+<ul>
+ <li>Dans Gecko, quand vous voulez créer un sous-arbre détaché (par exemple, un {{htmlelement("div")}} créé avec <code>createElement()</code> qui n’est pas encore inséré dans le DOM), l’élément racine du sous-arbre est défini comme un élément de niveau bloc. Dans le nouveau moteur CSS parallèle de Firefox (aussi connu comme <a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> ou <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>, prévu pour être publié dans Firefox 57), il est défini comme "inline", ({{bug(1374994)}}) selon la spécification.</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Node.removeChild()")}}</li>
+ <li>{{domxref("Node.replaceChild()")}}</li>
+ <li>{{domxref("Node.appendChild()")}}</li>
+ <li>{{domxref("Node.insertBefore()")}}</li>
+ <li>{{domxref("Node.hasChildNodes()")}}</li>
+ <li>{{domxref("document.createElementNS()")}} — pour spécifier explicitement l’URI de l’espace de noms de l’élément.</li>
+</ul>
diff --git a/files/fr/web/api/document/createelementns/index.html b/files/fr/web/api/document/createelementns/index.html
new file mode 100644
index 0000000000..f882f231b9
--- /dev/null
+++ b/files/fr/web/api/document/createelementns/index.html
@@ -0,0 +1,181 @@
+---
+title: document.createElementNS
+slug: Web/API/Document/createElementNS
+tags:
+  - API
+  - Création
+  - DOM
+  - Document
+  - Elements
+  - Méthodes
+  - URI
+translation_of: Web/API/Document/createElementNS
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p>Crée un élément avec l'URI de l'espace de noms spécifié et un nom qualifié.</p>
+
+<p>Pour créer un élément sans spécifier d'URI d'espace de noms, utilisez la méthode <a href="https://developer.mozilla.org/fr/docs/Web/API/Document/createElement" title="createElement">createElement </a><a href="https://developer.mozilla.org/fr/docs/Web/API/Document/createElement"> </a>.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> element <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElementNS</span><span class="punctuation token">(</span>namespaceURI<span class="punctuation token">,</span> qualifiedName<span class="punctuation token">[</span><span class="punctuation token">,</span> options<span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>namespaceURI</code></dt>
+ <dd>est une chaîne de caractères qui spécifie <a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/glossary.html#dt-namespaceURI">l'URI de l'espace de noms</a> à associer à l'élément. La propriété <a href="https://developer.mozilla.org/fr/docs/Web/API/Node/namespaceURI">namespaceURI</a> de l'élément créé est initialisée avec la valeur de <code>namespaceURI</code>. voir <a href="#URI_d'espaces_de_nom_valides">URI d'espaces de nom valides</a></dd>
+ <dt><code>qualifiedName</code></dt>
+ <dd>est une chaîne de caractères qui spécifie le type de l'élément à créer. La propriété <a href="https://developer.mozilla.org/fr/docs/Web/API/Node/nodeName">nodeName</a> de l'élément créé est initialisée avec la valeur de <code>qualifiedName</code></dd>
+ <dt><code>Options </code><span class="inlineIndicator optional optionalInline">Facultatif</span></dt>
+ <dd>Un objet facultatif <code>ElementCreationOptions</code> contient une propriété unique nommée <code>is</code>, <span id="result_box" lang="fr"><span>dont la valeur est le nom de la balise pour un élément personnalisé défini précédemment à l'aide de </span></span> <code>customElements.define()</code> . Pour la rétro-compatibilité avec les versions précédentes de la <a href="https://www.w3.org/TR/custom-elements/">spécification des éléments personnalisés</a>, quelques navigateurs vous permettront de passer ici une chaîne de caractères à la place d'un objet, pour laquelle la valeur est un nom d'élément personnalisé. Voir  <a class="external external-icon" href="https://developers.google.com/web/fundamentals/primers/customelements/#extendhtml">Extending native HTML elements</a>  pour plus d'informations sur la façon d'utiliser ce paramètre.</dd>
+ <dd><span id="result_box" lang="fr"><span>Le nouvel élément recevra un attribut <code>is</code> dont la valeur est le nom de la balise de l'élément personnalisé.</span> <span>Les éléments personnalisés sont une fonctionnalité expérimentale disponible uniquement dans certains navigateurs.</span></span></dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<dl>
+ <dd>Le nouvel <code><a href="https://developer.mozilla.org/fr/docs/Web/API/Element" title="DOM/element">element</a></code>.</dd>
+</dl>
+
+<h2 id="Example" name="Example"><a id="URI_d'espaces_de_nom_valides" name="URI_d'espaces_de_nom_valides">URI d'espaces de nom valides</a></h2>
+
+<ul>
+ <li>HTML - Utiliser <code>http://www.w3.org/1999/xhtml</code></li>
+ <li>SVG - Utiliser <code>http://www.w3.org/2000/svg</code></li>
+ <li>XBL - Utiliser <code>http://www.mozilla.org/xbl</code></li>
+ <li>XUL - Utiliser <code>http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</code></li>
+</ul>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<p>Cet exemple crée un nouvel élément &lt;div&gt; dans l'espace de noms <a href="https://developer.mozilla.org/fr/docs/XHTML" title="XHTML">XHTML</a> et l'ajoute à l'élément vbox. Bien que ce ne soit pas un document <a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL" title="XUL">XUL</a> très utile, cela montre l'utilisation d'éléments de deux espaces de noms différents au sein d'un même document :</p>
+
+<pre class="brush:xml line-numbers  language-xml"><code class="language-xml"><span class="prolog token">&lt;?xml version="1.0"?&gt;</span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>page</span> <span class="attr-name token">xmlns</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul<span class="punctuation token">"</span></span>
+      <span class="attr-name token"><span class="namespace token">xmlns:</span>html</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.w3.org/1999/xhtml<span class="punctuation token">"</span></span>
+      <span class="attr-name token">title</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>||Working with elements||<span class="punctuation token">"</span></span>
+      <span class="attr-name token">onload</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>init()<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/javascript<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="cdata token">&lt;![CDATA[
+ var container;
+ var newdiv;
+ var txtnode;
+
+ function init(){
+   container = document.getElementById("ContainerBox");
+   newdiv = document.createElementNS("http://www.w3.org/1999/xhtml","div");
+   txtnode = document.createTextNode("This is text that was constructed dynamically with createElementNS and createTextNode then inserted into the document using appendChild.");
+   newdiv.appendChild(txtnode);
+   container.appendChild(newdiv);
+ }
+
+]]&gt;</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
+
+ <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>vbox</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">'</span>ContainerBox<span class="punctuation token">'</span></span> <span class="attr-name token">flex</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">'</span>1<span class="punctuation token">'</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span><span class="namespace token">html:</span>div</span><span class="punctuation token">&gt;</span></span>
+   Le script sur cette page ajoutera du contenu dynamique ci-dessous :
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span><span class="namespace token">html:</span>div</span><span class="punctuation token">&gt;</span></span>
+ <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>vbox</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>page</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<div class="note">
+<p><strong>Note :</strong> Cet exemple utilise un script interne, ce qui n'est pas recommandé dans les documents XHTML. Cet exemple particulier est en fait un document XUL intégrant du XHTML. Cependant, la recommandation s'applique quand même.</p>
+</div>
+
+<h2 id="Specification" name="Specification">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('DOM WHATWG', "#dom-document-createelementns", "Document.createElement")}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>options</code> argument</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(50)}}<sup>[2][3]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Dans les versions précédentes de la spécification, cet argument était juste une chaîne de caractères dont la valeur était un nom d'élément personnalisé. <span id="result_box" lang="fr"><span>Par souci de compatibilité ascendante, Chrome accepte les deux formes</span></span> .</p>
+
+<p>[2] Voir [1] <span id="result_box" lang="fr"><span>ci-dessus : comme Chrome, Firefox accepte une chaîne au lieu d'un objet ici, mais seulement à partir de la version 51 et suivantes.</span> <span>Dans la version 50, les <code>options</code> doivent être un objet.</span></span></p>
+
+<p>[3] <span id="result_box" lang="fr"><span>Pour expérimenter avec des éléments personnalisés dans Firefox, vous devez définir les préférences</span></span> <code>dom.webcomponents.enabled</code> et <code>dom.webcomponents.customelements.enabled</code> à <code>true</code> (<em>vrai</em>).</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="document.createElement">document.createElement</a></li>
+ <li><a href="document.createTextNode">document.createTextNode</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Node/namespaceURI">Node.namespaceURI</a></li>
+ <li><a class="external external-icon" href="http://www.w3.org/TR/1999/REC-xml-names-19990114">Namespaces in XML</a></li>
+</ul>
diff --git a/files/fr/web/api/document/createentityreference/index.html b/files/fr/web/api/document/createentityreference/index.html
new file mode 100644
index 0000000000..c8881dddcb
--- /dev/null
+++ b/files/fr/web/api/document/createentityreference/index.html
@@ -0,0 +1,14 @@
+---
+title: Document.createEntityReference()
+slug: Web/API/Document/createEntityReference
+translation_of: Web/API/Document/createEntityReference
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p>{{ obsolete_header("7.0") }}</p>
+
+<p>Avant {{ gecko("7.0") }} cette méthode apparaissait présente mais en raison du bogue {{bug("9850")}}, elle renvoyait toujours uniquement "null". La seule solution consiste à créer un noeud de texte, une section CDATA, une valeur de noeud d'attribut, etc., qui ont la valeur référencée par l'entité, en utilisant <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Les_caract%C3%A8res_d%27%C3%A9chappement" title="en/Core_JavaScript_1.5_Guide/Unicode#Unicode_escape_sequences">Les caractères d'échappement</a> ou <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/fromCharCode" title="en/Core_JavaScript_1.5_Reference/Global_Objects/String/fromCharCode">fromCharCode()</a> si nécessaire.</p>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-392B75AE" title="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-392B75AE">createEntityReference</a></p>
diff --git a/files/fr/web/api/document/createevent/index.html b/files/fr/web/api/document/createevent/index.html
new file mode 100644
index 0000000000..b07312c314
--- /dev/null
+++ b/files/fr/web/api/document/createevent/index.html
@@ -0,0 +1,90 @@
+---
+title: Document.createEvent()
+slug: Web/API/Document/createEvent
+tags:
+  - API
+  - DOM
+  - Méthode
+  - Reference
+translation_of: Web/API/Document/createEvent
+---
+<div class="warning">
+<p>De nombreuses méthodes utilisées avec <code>createEvent</code>, tels que <code>initCustomEvent</code>, sont obsolètes. Utilisez le <a href="/fr/docs/Web/API/CustomEvent" title="/fr/docs/Web/API/CustomEvent">constructeur d'événement </a><a href="https://developer.mozilla.org/fr/docs/Web/API/CustomEvent"> </a>à la place.</p>
+</div>
+
+<div>{{ ApiRef("DOM") }}</div>
+
+<div> </div>
+
+<p>Crée un <a href="/en-US/docs/DOM/event" title="DOM/event">event</a> du type spécifié. L'objet retourné doit être intialisé et peut être passé ensuite à <a href="/en-US/docs/DOM/element.dispatchEvent" title="DOM/element.dispatchEvent">element.dispatchEvent</a>.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>event</em> = <em>document</em>.createEvent(<em>type</em>);
+</pre>
+
+<ul>
+ <li><code>event</code> est l'objet <a href="/en-US/docs/DOM/event" title="DOM/event">Event</a> créé.</li>
+ <li><code>type</code> est une chaîne de caractères qui représente le type d'événement à créer. Les types possibles d'événement incluent <code>"UIEvents"</code>, <code>"MouseEvents"</code>, <code>"MutationEvents"</code> et <code>"HTMLEvents"</code>. Voir la section {{Anch("Notes")}} pour plus de détails.</li>
+</ul>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre>// Crée l'événement.
+var event = document.createEvent('Event');
+
+// Nomme l'événement 'build'.
+event.initEvent('build', true, true);
+
+//  <span class="short_text" id="result_box" lang="fr"><span>Écoute l'événement</span></span>.
+elem.addEventListener('build', function (e) {
+  // e.target correspond à elem
+}, false);
+
+// target peut être tout Element ou autre EventTarget.
+elem.dispatchEvent(event);
+</pre>
+
+<h3 id="Notes">Notes</h3>
+
+<p><span id="result_box" lang="fr"><span>Les chaînes de type d'événement appropriées pour passer à <code>createEvent ()</code> sont répertoriées dans la norme DOM - voir le tableau à l'étape 2. Gardez à l'esprit que la plupart des objets événement ont maintenant des constructeurs, qui sont la méthode recommandée pour créer des occurrences d'objet événement.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span>Gecko prend en charge certains alias d'objet événement non standard, répertoriés ci-dessous :</span></span></p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th>Event Module</th>
+   <th>Standard event object</th>
+   <th>Gecko also supports</th>
+  </tr>
+  <tr>
+   <td>Text event module</td>
+   <td><code>TextEvent</code></td>
+   <td><code>TextEvents</code></td>
+  </tr>
+  <tr>
+   <td>Keyboard event module</td>
+   <td><code>KeyboardEvent</code></td>
+   <td><code>KeyEvents</code></td>
+  </tr>
+  <tr>
+   <td>Basic events module</td>
+   <td><code>Event</code></td>
+   <td><code>Events</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécification">Spécification</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-DocumentEvent-createEvent">DOM Level 2 Events: createEvent</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#events-Events-DocumentEvent-createEvent" title="http://www.w3.org/TR/DOM-Level-3-Events/#events-Events-DocumentEvent-createEvent">DOM Level 3 Events: createEvent</a></li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/Guide/DOM/Events/Creating_and_triggering_events">Création et déclenchement d'événements</a></li>
+</ul>
diff --git a/files/fr/web/api/document/createexpression/index.html b/files/fr/web/api/document/createexpression/index.html
new file mode 100644
index 0000000000..57bd734923
--- /dev/null
+++ b/files/fr/web/api/document/createexpression/index.html
@@ -0,0 +1,31 @@
+---
+title: Document.createExpression()
+slug: Web/API/Document/createExpression
+tags:
+  - API
+  - DOM
+  - Méthode
+  - XPath
+translation_of: Web/API/Document/createExpression
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p>Cette méthode compile une <code><a href="https://developer.mozilla.org/fr/docs/Web/API/XPathExpression" title="en/XPathExpression">XPathExpression</a></code> qui peut ensuite être utilisée pour des évaluations (répétées).</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="eval"><em>xpathExpr</em> = <em>document</em>.createExpression(<em>xpathText</em>, <em>namespaceURLMapper</em>);
+</pre>
+
+<h3 id="Arguments" name="Arguments">Paramètres</h3>
+
+<ul>
+ <li>String (<em>chaîne de caractères</em>) <code>xpathText</code> (l'expression XPath à compiler)</li>
+ <li>Fonction <code>namespaceURLMapper</code> (mappe un préfixe d'espace de noms à une URL d'espace de noms (ou null si aucun n'est nécessaire)).</li>
+</ul>
+
+<p>{{ Fx_minversion_note(3, "Avant Firefox 3, vous pouviez appeler cette méthode sur des documents autres que celui que vous aviez prévu d'exécuter avec XPath. Sous Firefox 3, vous devez l'appeler sur le même document.") }}</p>
+
+<h3 id="Return" name="Return">Valeur retournée</h3>
+
+<p><a href="https://developer.mozilla.org/fr/docs/Web/API/XPathExpression" title="en/XPathExpression">XPathExpression</a></p>
diff --git a/files/fr/web/api/document/createnodeiterator/index.html b/files/fr/web/api/document/createnodeiterator/index.html
new file mode 100644
index 0000000000..b43b427f36
--- /dev/null
+++ b/files/fr/web/api/document/createnodeiterator/index.html
@@ -0,0 +1,137 @@
+---
+title: Document.createNodeIterator()
+slug: Web/API/Document/createNodeIterator
+tags:
+  - API
+  - DOM
+  - Méthodes
+translation_of: Web/API/Document/createNodeIterator
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>Renvoie un  nouvel objet <a class="internal" href="https://developer.mozilla.org/fr/docs/Web/API/NodeIterator" title="En/DOM/NodeIterator"><code>NodeIterator</code></a>.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="eval script">var nodeIterator = document.createNodeIterator(root, whatToShow, filter);
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>root</code></dt>
+ <dd>Le noeud racine à partir duquel commencer la traversée de {{domxref("NodeIterator")}}.</dd>
+ <dt><code>whatToShow</code> {{ optional_inline() }}</dt>
+ <dd>Est un <code>unsigned long</code> (<em>long non signé</em>) facultatif représentant un masque de bits créé par la combinaison des constantes de la propriété <code><a href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html#Traversal-NodeFilter" title="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html#Traversal-NodeFilter">NodeFilter</a></code>. C'est un moyen pratique de filtrage pour certains types de noeuds. Il est par défaut <code>0xFFFFFFFF</code> représentant la constante <code>SHOW_ALL</code>.
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td class="header">Constante</td>
+    <td class="header">Valeur numérique</td>
+    <td class="header">Description</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_ALL</code></td>
+    <td><code>-1</code> (c'est la valeur numérique maximale du <code>unsigned long</code> (<em>non signé long</em>))</td>
+    <td>Affiche tous les noeuds.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_ATTRIBUTE</code> {{deprecated_inline}}</td>
+    <td><code>2</code></td>
+    <td>Affiche l'attribut {{domxref("Attr")}} des noeuds. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Attr")}} comme racine ; dans ce cas, cela signifie que le nœud d'attribut apparaîtra dans la première position de l'itération ou de la traversée. Comme les attributs ne sont jamais des enfants d'autres nœuds, ils n'apparaissent pas lors de la traversée de l'arbre du document.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_CDATA_SECTION</code> {{deprecated_inline}}</td>
+    <td><code>8</code></td>
+    <td>Affiche les noeuds {{domxref("CDATASection")}}.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_COMMENT</code></td>
+    <td><code>128</code></td>
+    <td>Affiche les noeuds {{domxref("Comment")}}.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_DOCUMENT</code></td>
+    <td><code>256</code></td>
+    <td>Affiche les noeuds {{domxref("Document")}}.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_DOCUMENT_FRAGMENT</code></td>
+    <td><code>1024</code></td>
+    <td>Affiche les noeuds {{domxref("DocumentFragment")}}.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_DOCUMENT_TYPE</code></td>
+    <td><code>512</code></td>
+    <td>Affiche les noeuds {{domxref("DocumentType")}}.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_ELEMENT</code></td>
+    <td><code>1</code></td>
+    <td>Affiche les noeuds {{domxref("Element")}}.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_ENTITY</code> {{deprecated_inline}}</td>
+    <td><code>32</code></td>
+    <td>Affiche les noeuds {{domxref("Entity")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{ domxref("Entity") }} comme racine ; dans ce cas, il signifie que le noeud d'entité {{domxref("Entity") }} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_ENTITY_REFERENCE</code> {{deprecated_inline}}</td>
+    <td><code>16</code></td>
+    <td>Affiche les noeuds {{domxref("EntityReference")}}.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_NOTATION</code> {{deprecated_inline}}</td>
+    <td><code>2048</code></td>
+    <td>Affiche les noeuds {{domxref("Notation")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Notation")}} comme racine ; dans ce cas, il signifie que le noeud {{domxref("Notation")}} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_PROCESSING_INSTRUCTION</code></td>
+    <td><code>64</code></td>
+    <td>Affiche les noeuds {{domxref("ProcessingInstruction")}}.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_TEXT</code></td>
+    <td><code>4</code></td>
+    <td>Affiche les noeuds {{domxref("Text")}}.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt><code>filter</code> {{ optional_inline() }}</dt>
+ <dd>Un objet implémentant l'interface {{ domxref("NodeFilter") }} ; sa méthode <code>acceptNode()</code> sera appelée pour chaque nœud du sous-arbre basé à la racine qui est accepté comme inclus par l'indicateur whatToShow pour déterminer s'il faut ou non l'inclure dans la liste des nœuds iterables (une simple fonction de rappel peut également être utilisée à la place). La méthode devrait retourner l'un des <code>NodeFilter.FILTER_ACCEPT</code>, <code>NodeFilter.FILTER_REJECT</code> ou <code>NodeFilter.FILTER_SKIP</code>. Voir l'{{anch("Exemple")}}.</dd>
+</dl>
+
+<div class="note"><strong>Note :</strong> Avant Gecko 12.0 {{geckoRelease("12.0")}}, cette méthode acceptait un quatrième paramètre facultatif (<code>entityReferenceExpansion</code>). Cela ne faisait pas partie de la spécification DOM4 et a donc été supprimé. Ce paramètre indiquait si les enfants des nœuds de référence d'entité étaient visibles ou non par l'itérateur. Puisque de tels noeuds n'ont jamais été créés dans les navigateurs, ce paramètre n'a eu aucun effet.</div>
+
+<h2 id="Example" name="Example"><a id="Exemple" name="Exemple"></a>Exemple</h2>
+
+<pre class="brush: js">var nodeIterator = document.createNodeIterator(
+    document.body,
+    NodeFilter.SHOW_ELEMENT,
+    function(node) {
+        return node.nodeName.toLowerCase() === 'p' ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
+    }
+);
+var pars = [];
+var currentNode;
+
+while (currentNode = nodeIterator.nextNode()) {
+  pars.push(currentNode);
+}
+
+</pre>
+
+<h3 id="Specification" name="Specification">Compatibilité des navigateurs</h3>
+
+<p>Pris en charge dans FF 3.5+, Chrome 1+, Opera 9+, Safari 3+, IE9+, Edge</p>
+
+<h2 id="Specification" name="Specification">Voir aussi</h2>
+
+<ul>
+ <li><a class="external" href="https://developer.mozilla.org/fr/docs/Web/API/Document/createNodeIterator" title="http://msdn.microsoft.com/en-us/library/ie/ff975301(v=vs.85).aspx">createNodeIterator sur MDN</a></li>
+</ul>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html#Traversal-NodeIterator" title="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html#Traversal-NodeIterator">DOM Level 2 Traversal : NodeIterator</a></p>
diff --git a/files/fr/web/api/document/creatensresolver/index.html b/files/fr/web/api/document/creatensresolver/index.html
new file mode 100644
index 0000000000..d9546328ae
--- /dev/null
+++ b/files/fr/web/api/document/creatensresolver/index.html
@@ -0,0 +1,49 @@
+---
+title: Document.createNSResolver()
+slug: Web/API/Document/createNSResolver
+tags:
+  - API
+  - DOM
+  - Méthodes
+  - XPath
+translation_of: Web/API/Document/createNSResolver
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p>Crée un <code>XPathNSResolver</code> qui résout les espaces de noms en respectant les définitions dans la portée pour un noeud spécifié.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="eval"><em>nsResolver</em> = document.createNSResolver(<em>node</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<ul>
+ <li><code>node</code> est un noeud à utiliser comme contexte pour la résolution de l'espace de noms.</li>
+</ul>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<ul>
+ <li><code>nsResolver</code> est un objet XPathNSResolver.</li>
+</ul>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Adapte n'importe quel noeud DOM pour résoudre les espaces de noms afin qu'une expression <a href="https://developer.mozilla.org/fr/docs/XPath" title="en/XPath">XPath</a> puisse être facilement évaluée par rapport au contexte du nœud et son emplacement dans le document. Cet adaptateur fonctionne comme la méthode  <code>lookupNamespaceURI</code>  du DOM de niveau 3 sur les noeuds lors de la résolution de <code>namespaceURI</code> à partir d'un préfixe donné en utilisant l'information disponible dans la hiérarchie des noeuds au moment de l'appel de <code>lookupNamespaceURI</code>. Résout aussi correctement le préfixe implicite <code>xml</code>.</p>
+
+<p>Notez que XPath définit QNames sans préfixe pour correspondre uniquement aux éléments d'un espace de noms null. XPath n'a aucun moyen de récupérer l'espace de noms par défaut tel qu'il est appliqué à une référence d'élément régulier (par exemple, <code>p[@id='_myid'</code>] pour <code><span class="nowiki">xmlns='http://www.w3.org/1999/xhtml'</span></code>). Pour faire correspondre les éléments par défaut dans un espace de noms non nul, vous devez soit faire référence à un élément particulier en utilisant un format tel que <code>*namespace-uri()=<span class="nowiki">http://www.w3.org/1999/xhtml</span> and name()=p[@id='_myid']</code> (<a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Introduction_%C3%A0_l_utilisation_de_XPath_avec_JavaScript#Using_XPath_functions_to_reference_elements_with_its_default_namespace" title="en/Introduction_to_using_XPath_in_JavaScript#Using_XPath_functions_to_reference_elements_with_its_default_namespace">cette approche</a> fonctionne bien pour les expressions XPath dynamiques dans lesquelles les espaces de noms pourraient ne pas être connus), soit utiliser des tests de noms préfixés et créer un résolveur d'espace de nom mappant le préfixe à l'espace de nom. Pour en savoir plus sur <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Introduction_%C3%A0_l_utilisation_de_XPath_avec_JavaScript#Impl%C3%A9mentation_d%27un_r%C3%A9solveur" title="en/Introduction_to_using_XPath_in_JavaScript#Implementing_a_User_Defined_Namespace_Resolver">comment créer un résolveur d'espace de nom défini par l'utilisateur</a> si vous souhaitez adopter cette dernière approche.</p>
+
+<p><code>createNSResolver</code> a été introduit dans DOM Niveau 3.</p>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en/DOM/document.evaluate" title="en/DOM/document.evaluate">document.evaluate</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Introduction_%C3%A0_l_utilisation_de_XPath_avec_JavaScript" title="en/Introduction_to_using_XPath_in_JavaScript">Introduction à l'utilisation de XPath avec JavaScript</a></li>
+</ul>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-3-XPath/xpath.html#XPathEvaluator-createNSResolver">DOM Level 3 XPath Specification : createNSResolver</a></p>
diff --git a/files/fr/web/api/document/createprocessinginstruction/index.html b/files/fr/web/api/document/createprocessinginstruction/index.html
new file mode 100644
index 0000000000..91c7652457
--- /dev/null
+++ b/files/fr/web/api/document/createprocessinginstruction/index.html
@@ -0,0 +1,55 @@
+---
+title: Document.createProcessingInstruction()
+slug: Web/API/Document/createProcessingInstruction
+tags:
+  - API
+  - Création
+  - DOM
+  - Méthodes
+  - Noeuds
+  - Reference
+  - Traitement
+  - instructions
+translation_of: Web/API/Document/createProcessingInstruction
+---
+<p id="Summary">{{APIRef("DOM")}}</p>
+
+<p><code>createProcessingInstruction()</code> crée un nouveau noeud d'instruction de traitement et le renvoie.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="eval"><em>Processing instruction node</em> = document.createProcessingInstruction(target, data)
+</pre>
+
+<h3 id="Parameters" name="Parameters">Paramètres</h3>
+
+<ul>
+ <li><code>Processing Instruction node</code> est un noeud {{domxref("ProcessingInstruction")}}.</li>
+ <li><code>target</code> fait référence à la partie cible du noeud d'instructions de traitement (par exemple, &lt;?<em>target</em> ... ?&gt;).</li>
+ <li><code>data</code> est une string (<em>chaîne de caractères</em>) contenant les données à ajouter aux données du noeud.</li>
+</ul>
+
+<h3 id="Notes" name="Notes">Exceptions</h3>
+
+<dl>
+ <dt><code>NOT_SUPPORTED_ERR</code></dt>
+ <dd>Lancée si vous tentez de créer un noeud d'instructions de traitement sur un document HTML dans Gecko 9 {{ geckoRelease("9.0") }} ou antérieurs. Dans Gecko 10.0 {{ geckoRelease("10.0") }} et ultérieurs, vous pouvez utiliser cette méthode sur des documents HTML.</dd>
+ <dt><code>DOM_INVALID_CHARACTER</code></dt>
+ <dd>Lancée si vous essayez d'ajouter une cible d'instruction de traitement invalide (ce devrait être le cas avec le nom XML et toutes les combinaisons des lettres "xml"), ou si la séquence d'instructions de traitement de fermeture ("?&gt;") est ajoutée aux données. Les données fournies par l'utilisateur ne peuvent donc pas être utilisées en toute sécurité sans échappement ou autres moyens de faire face à de telles situations.</dd>
+</dl>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre>var docu = new DOMParser().parseFromString('&lt;xml&gt;&lt;/xml&gt;',  "application/xml")
+
+var pi = docu.createProcessingInstruction('xml-stylesheet', 'href="mycss.css" type="text/css"');
+
+docu.insertBefore(pi, docu.firstChild);
+
+alert(new XMLSerializer().serializeToString(docu));
+// Affiche: &lt;?xml-stylesheet href="mycss.css" type="text/css"?&gt;&lt;xml/&gt;
+</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<p><a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-createprocessinginstruction">DOM 4: createProcessingInstruction</a></p>
diff --git a/files/fr/web/api/document/createrange/index.html b/files/fr/web/api/document/createrange/index.html
new file mode 100644
index 0000000000..5a187c5f3a
--- /dev/null
+++ b/files/fr/web/api/document/createrange/index.html
@@ -0,0 +1,38 @@
+---
+title: Document.createRange
+slug: Web/API/Document/createRange
+tags:
+  - API
+  - DOM
+  - Document
+  - Méthodes
+translation_of: Web/API/Document/createRange
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Retourne un objet {{domxref("Range")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox">range = document.createRange();
+</pre>
+
+<p><code>range</code> devient un objet {{domxref("Range")}}.</p>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush:js">var range = document.createRange();
+
+range.setStart(startNode, startOffset);
+range.setEnd(endNode, endOffset);
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Une fois un objet <code>Range</code> créé, il est nécessaire de spécifier les limites de départ et de fin avant de pouvoir utiliser la plupart des méthodes.</p>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<ul>
+ <li><a class="external external-icon" href="https://www.w3.org/TR/2000/REC-DOM-Level-2-Traversal-Range-20001113/ranges.html#Level-2-DocumentRange-idl">DOM Level 2 Range: DocumentRange.createRange</a></li>
+</ul>
diff --git a/files/fr/web/api/document/createtextnode/index.html b/files/fr/web/api/document/createtextnode/index.html
new file mode 100644
index 0000000000..8f16aa0440
--- /dev/null
+++ b/files/fr/web/api/document/createtextnode/index.html
@@ -0,0 +1,128 @@
+---
+title: document.createTextNode
+slug: Web/API/Document/createTextNode
+tags:
+  - API
+  - DOM
+  - Méthodes
+  - Reference
+translation_of: Web/API/Document/createTextNode
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>Crée un nouveau nœud de texte.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>var text</var> = document.createTextNode(<var>données</var>);
+</pre>
+
+<ul>
+ <li><code>texte</code> est un nœud de texte.</li>
+ <li><code>donnees</code> est une chaîne contenant les données à placer dans le nœud de texte.</li>
+</ul>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="doctype token">&lt;!DOCTYPE html&gt;</span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>en<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>title</span><span class="punctuation token">&gt;</span></span>createTextNode example<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>title</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
+<span class="keyword token">function</span> <span class="function token">addTextNode</span><span class="punctuation token">(</span>text<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> newtext <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createTextNode</span><span class="punctuation token">(</span>text<span class="punctuation token">)</span><span class="punctuation token">,</span>
+      p1 <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"p1"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  p1<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>newtext<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</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>addTextNode(<span class="punctuation token">'</span>YES! <span class="punctuation token">'</span>);<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>YES!<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>button</span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>addTextNode(<span class="punctuation token">'</span>NO! <span class="punctuation token">'</span>);<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>NO!<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>button</span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>addTextNode(<span class="punctuation token">'</span>WE CAN! <span class="punctuation token">'</span>);<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>WE CAN!<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>hr</span> <span class="punctuation token">/&gt;</span></span>
+
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>p1<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>First line of paragraph.<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>body</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">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("DOM3 Core", "core.html#ID-1975348127", "Document.createTextNode()")}}</td>
+   <td>{{Spec2("DOM3 Core")}}</td>
+   <td>Pas de changement</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Core", "core.html#ID-1975348127", "Document.createTextNode()")}}</td>
+   <td>{{Spec2("DOM2 Core")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fr/web/api/document/createtreewalker/index.html b/files/fr/web/api/document/createtreewalker/index.html
new file mode 100644
index 0000000000..87dbad7998
--- /dev/null
+++ b/files/fr/web/api/document/createtreewalker/index.html
@@ -0,0 +1,245 @@
+---
+title: Document.createTreeWalker()
+slug: Web/API/Document/createTreeWalker
+tags:
+  - API
+  - Arborescence
+  - DOM
+  - Document
+  - Filtre
+  - Méthodes
+  - Noeuds
+translation_of: Web/API/Document/createTreeWalker
+---
+<div>{{ApiRef("Document")}}</div>
+
+<p>La méthode de création <strong><code>Document.createTreeWalker()</code></strong> renvoie un nouvel objet {{domxref("TreeWalker")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>treeWalker</em> = <em>document</em>.createTreeWalker(<em>root</em>, <em>whatToShow</em>, <em>filter</em>, <em>entityReferenceExpansion</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><em>root </em></dt>
+ <dd>est le {{domxref("Node")}} (<em>noeud</em>) racine du {{domxref("TreeWalker")}} à traverser. Généralement, ce sera un élément appartenant au document.</dd>
+ <dt><em>whatToShow {{optional_inline}}</em></dt>
+ <dd>est un <code>unsigned long</code> (<em>long non signé</em>) facultatif représentant un masque de bits créé par combinaison des propriétés de constante de <code><a href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html#Traversal-NodeFilter">NodeFilter</a></code>. C'est un moyen pratique de filtrage pour certains types de nœuds. Par défaut <code>0xFFFFFFFF</code> représentant la constante <code>SHOW_ALL</code>.
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td class="header">Constante</td>
+    <td class="header">Valeur numérique</td>
+    <td class="header">Description</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_ALL</code></td>
+    <td><code>-1</code> (c'est la valeur numérique maximale du <code>unsigned long</code> (<em>non signé long</em>))</td>
+    <td>Affiche tous les noeuds.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_ATTRIBUTE</code> {{deprecated_inline}}</td>
+    <td><code>2</code></td>
+    <td>Affiche l'attribut {{domxref("Attr")}} des noeuds. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Attr")}} comme racine ; dans ce cas, cela signifie que le nœud d'attribut apparaîtra dans la première position de l'itération ou de la traversée. Comme les attributs ne sont jamais des enfants d'autres nœuds, ils n'apparaissent pas lors de la traversée de l'arbre du document.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_CDATA_SECTION</code> {{deprecated_inline}}</td>
+    <td><code>8</code></td>
+    <td>Affiche les noeuds {{domxref("CDATASection")}}.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_COMMENT</code></td>
+    <td><code>128</code></td>
+    <td>Affiche les noeuds {{domxref("Comment")}}.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_DOCUMENT</code></td>
+    <td><code>256</code></td>
+    <td>Affiche les noeuds {{domxref("Document")}}.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_DOCUMENT_FRAGMENT</code></td>
+    <td><code>1024</code></td>
+    <td>Affiche les noeuds {{domxref("DocumentFragment")}}.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_DOCUMENT_TYPE</code></td>
+    <td><code>512</code></td>
+    <td>Affiche les noeuds {{domxref("DocumentType")}}.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_ELEMENT</code></td>
+    <td><code>1</code></td>
+    <td>Affiche les noeuds {{domxref("Element")}}.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_ENTITY</code> {{deprecated_inline}}</td>
+    <td><code>32</code></td>
+    <td>Affiche les noeuds {{domxref("Entity")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{ domxref("Entity") }} comme racine ; dans ce cas, il signifie que le noeud d'entité {{domxref("Entity") }} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_ENTITY_REFERENCE</code> {{deprecated_inline}}</td>
+    <td><code>16</code></td>
+    <td>Affiche les noeuds {{domxref("EntityReference")}}.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_NOTATION</code> {{deprecated_inline}}</td>
+    <td><code>2048</code></td>
+    <td>Affiche les noeuds {{domxref("Notation")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Notation")}} comme racine ; dans ce cas, il signifie que le noeud {{domxref("Notation")}} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_PROCESSING_INSTRUCTION</code></td>
+    <td><code>64</code></td>
+    <td>Affiche les noeuds {{domxref("ProcessingInstruction")}}.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_TEXT</code></td>
+    <td><code>4</code></td>
+    <td>Affiche les noeuds {{domxref("Text")}}.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt><em>filter <em>{{optional_inline}}</em></em></dt>
+ <dd>est un {{domxref("NodeFilter")}} (<em>filtre de noeud</em>) facultatif, c'est à dire un objet avec une méthode <code>acceptNode</code> appelé par {{domxref("TreeWalker")}} pour déterminer s'il doit accepter ou non un nœud qui a passé le test <code>whatToShow</code>.</dd>
+ <dt><em>entityReferenceExpansion<em> {{optional_inline}}</em></em> <em>{{obsolete_inline}}</em></dt>
+ <dd>est un {{domxref("Boolean")}} (<em>booléen</em>) indiquant si, lors de la suppression d'une {{domxref("EntityReference")}}, son sous-arbre doit être supprimé en même temps.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'exemple suivant passe à travers tous les noeuds du "body" (<em>corps du document</em>), réduit l'ensemble des noeuds aux éléments, passe simplement à travers chaque noeud acceptable (à la place, il pourrait réduire l'ensemble dans la méthode <code>acceptNode()</code>), puis utilise l'itérateur de traversée de l'arbre créé pour avancer à travers les nœuds (maintenant tous les éléments) et les écrire dans un tableau.</p>
+
+<pre class="brush: js">var treeWalker = document.createTreeWalker(
+  document.body,
+  NodeFilter.SHOW_ELEMENT,
+  { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+  false
+);
+
+var nodeList = [];
+
+while(treeWalker.nextNode()) nodeList.push(treeWalker.currentNode);
+</pre>
+
+<h2 id="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('DOM WHATWG', '#dom-document-createtreewalker', 'Document.createTreeWalker')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Suppression du paramètre <code>expandEntityReferences</code>. Les paramètres facultatifs  <code>whatToShow</code> et <code>filter</code> .</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#NodeIteratorFactory-createTreeWalker', 'Document.createTreeWalker')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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.8.1")}}</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>3.0</td>
+  </tr>
+  <tr>
+   <td><code>whatToShow</code> and <code>filter</code> optional</td>
+   <td>1.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("12")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>3.0</td>
+  </tr>
+  <tr>
+   <td><code>expandEntityReferences</code></td>
+   <td>1.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.8.1")}}<br>
+    Removed in {{CompatGeckoDesktop("12")}}</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>3.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.8.1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9.0</td>
+   <td>3.0</td>
+  </tr>
+  <tr>
+   <td><code>whatToShow</code> and <code>filter</code> optional</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("12")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>3.0</td>
+  </tr>
+  <tr>
+   <td><code>expandEntityReferences</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.8.1")}}<br>
+    Removed in {{CompatGeckoDesktop("12")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9.0</td>
+   <td>3.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface de l'objet qu'il crée : {{domxref("TreeWalker")}}.</li>
+</ul>
diff --git a/files/fr/web/api/document/currentscript/index.html b/files/fr/web/api/document/currentscript/index.html
new file mode 100644
index 0000000000..68fd2e0f4b
--- /dev/null
+++ b/files/fr/web/api/document/currentscript/index.html
@@ -0,0 +1,118 @@
+---
+title: Document.currentScript
+slug: Web/API/Document/currentScript
+tags:
+  - API
+  - DOM
+  - Propriété
+  - Reference
+  - Script
+translation_of: Web/API/Document/currentScript
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p>Retourne l'élément {{HTMLElement("script")}} dont le script est en cours de traitement.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <var>curScriptElement</var> = document.currentScript;
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Cet exemple vérifie si le script s'exécute de manière asynchrone :</p>
+
+<pre class="brush:js">if (document.currentScript.async) {
+  console.log("Exécution asynchrone");
+} else {
+  console.log("Exécution synchrone");
+}</pre>
+
+<p><a href="/samples/html/currentScript.html">Voir l'exemple sur une page</a></p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Il est important de noter que l'élément {{HTMLElement("script")}} ne sera pas référencé si le code dans le script est appelé par une fonction de rappel ou par un gestionnaire d'événements ; seul sera référencé l'élément alors qu'il est initialement en cours d'exécution.</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">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "dom.html#dom-document-currentscript", "Document.currentScript")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateur">Compatibilité navigateur</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(29.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16</td>
+   <td>8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTMLElement("script")}}</li>
+ <li>{{domxref("document.onafterscriptexecute")}}</li>
+ <li>{{domxref("document.onbeforescriptexecute")}}</li>
+</ul>
diff --git a/files/fr/web/api/document/defaultview/index.html b/files/fr/web/api/document/defaultview/index.html
new file mode 100644
index 0000000000..e956485e62
--- /dev/null
+++ b/files/fr/web/api/document/defaultview/index.html
@@ -0,0 +1,18 @@
+---
+title: document.defaultView
+slug: Web/API/Document/defaultView
+translation_of: Web/API/Document/defaultView
+---
+<h2 id="Summary" name="Summary">Résumé</h2>
+<p>Dans les navigateurs, cette propriété renvoie l'objet <a href="/en-US/docs/DOM/window" title="DOM/window">window</a> associé au document ou <code>null</code> si non disponible.</p>
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+<pre class="syntaxbox">var win = document.defaultView;</pre>
+<p>Cette propriété est en lecture seule.</p>
+<h2 id="Notes" name="Notes">Notes</h2>
+<p>D'après <a class="external" href="http://www.quirksmode.org/dom/w3c_html.html">quirksmode</a>, <code>defaultView</code> n'est pas supporté dans les versions d'IE inférieures à 9.</p>
+<h2 id="Specification" name="Specification">Spécification</h2>
+<ul>
+  <li><a href="/en-US/docs/HTML/HTML5" title="HTML/HTML5">HTML5: defaultView</a></li>
+  <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Views/views.html#Views-DocumentView-defaultView">DOM Level 2 Views: defaultView</a></li>
+  <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Views/" title="http://www.w3.org/TR/DOM-Level-3-Views/">DOM Level 3 Views</a> (Seulement développé en Working Group Note mais pas implémenté)</li>
+</ul>
diff --git a/files/fr/web/api/document/designmode/index.html b/files/fr/web/api/document/designmode/index.html
new file mode 100644
index 0000000000..f3bac92585
--- /dev/null
+++ b/files/fr/web/api/document/designmode/index.html
@@ -0,0 +1,102 @@
+---
+title: Document.designMode
+slug: Web/API/Document/designMode
+translation_of: Web/API/Document/designMode
+---
+<div>{{ ApiRef() }}</div>
+
+<div> </div>
+
+<h2 id="Summary" name="Summary">Résumé</h2>
+
+<p><span id="result_box" lang="fr"><span class="hps">document.designMode</span> <span class="hps">contrôle si</span> <span class="hps">l'ensemble du document</span> <span class="hps">est modifiable.</span> <span class="hps">Les valeurs valides sont</span> <span class="hps">"on"</span> <span class="hps">et "off"</span><span>.</span> <span class="hps">Conformément à la spécification</span><span>,</span> <span class="hps">cette propriété</span> <span class="hps">est par</span> <span class="hps">défaut</span> <span class="hps">sur "off"</span><span>.</span> <span class="hps">Firefox</span> <span class="hps">suit</span> <span class="hps">cette norme</span><span>.</span> <span class="hps">Les</span> <span class="hps">versions antérieures de</span> <span class="hps">Chrome</span> <span class="hps">et IE</span> <span class="hps">ont par défaut la valeur</span><span class="atn hps"> "</span></span><code>inherit</code><span lang="fr"><span>"</span><span>.</span> Pour les versions entre <span class="hps">IE6-10</span><span>,</span> <span class="hps">la valeur</span> <span class="hps">est en majuscule</span><span>.</span></span></p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var mode = document.designMode;
+document.designMode = "on";
+document.designMode = "off";</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<p>Rendre un document {{HTMLElement("iframe")}} éditable</p>
+
+<pre>iframe_node.contentDocument.designMode = "on";
+</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>{{SpecName('HTML WHATWG', '#making-entire-documents-editable:-the-designmode-idl-attribute', 'designMode')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs" style="font-size: 2.14285714285714rem;">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th style="line-height: 16px;">Feature</th>
+   <th style="line-height: 16px;">Chrome</th>
+   <th style="line-height: 16px;">Firefox (Gecko)</th>
+   <th style="line-height: 16px;">Internet Explorer</th>
+   <th style="line-height: 16px;">Opera</th>
+   <th style="line-height: 16px;">Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th style="line-height: 16px;">Feature</th>
+   <th style="line-height: 16px;">Android</th>
+   <th style="line-height: 16px;">Chrome for Android</th>
+   <th style="line-height: 16px;">Firefox Mobile (Gecko)</th>
+   <th style="line-height: 16px;">IE Mobile</th>
+   <th style="line-height: 16px;">Opera Mobile</th>
+   <th style="line-height: 16px;">Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Rich-Text_Editing_in_Mozilla">Rich-Text Editing in Mozilla</a></li>
+ <li>{{domxref("HTMLElement.contentEditable")}}</li>
+ <li><a href="https://msdn.microsoft.com/en-us/library/ms533720(v=vs.85).aspx">designMode property</a> on MSDN</li>
+</ul>
diff --git a/files/fr/web/api/document/dir/index.html b/files/fr/web/api/document/dir/index.html
new file mode 100644
index 0000000000..9ae15a8559
--- /dev/null
+++ b/files/fr/web/api/document/dir/index.html
@@ -0,0 +1,44 @@
+---
+title: Document.dir
+slug: Web/API/Document/dir
+tags:
+  - API
+  - Document
+  - Propriété
+  - Reference
+translation_of: Web/API/Document/dir
+---
+<p>{{ApiRef("")}}</p>
+
+<p>La propriété <code><strong>Document.dir</strong></code> est une chaîne de caractères {{domxref("DOMString")}} <span class="tlid-translation translation" lang="fr"><span title="">représentant la direction du texte du document : de gauche à droite (par défaut) ou de droite à gauche.</span> <span title="">Les valeurs possibles sont</span></span> <code>'rtl'</code>, droite vers gauche, et <code>'ltr'</code>, gauche vers droite.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>dirStr</em> = <em>document.</em>dir;
+<em>document.dir</em> = <em>dirStr;</em>
+</pre>
+
+<h2 id="Specifications" name="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("HTML WHATWG", "#dom-document-dir", "Document.dir")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Document.dir")}}</p>
diff --git a/files/fr/web/api/document/doctype/index.html b/files/fr/web/api/document/doctype/index.html
new file mode 100644
index 0000000000..980447cc3c
--- /dev/null
+++ b/files/fr/web/api/document/doctype/index.html
@@ -0,0 +1,65 @@
+---
+title: Document.doctype
+slug: Web/API/Document/doctype
+tags:
+  - API
+  - DOM
+  - DTD
+  - Document
+  - Propriétés
+  - Type
+translation_of: Web/API/Document/doctype
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p>Renvoie la "Document Type Declaration (DTD)" (<em>déclaration de type de document</em>) associée avec le document actuel. L'objet renvoyé implémente l'interface {{domxref("DocumentType")}}. Utilisez {{domxref("DOMImplementation.createDocumentType()")}} pour créer un <code>DocumentType</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>doctype</var> = <var>document</var>.doctype;
+</pre>
+
+<ul>
+ <li><code>doctype</code> est une propriété en lecture seule.</li>
+</ul>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush:js">var doctypeObj = document.doctype;
+
+console.log(
+  "doctypeObj.name: "           + doctypeObj.name            + "\n" +
+  "doctypeObj.internalSubset: " + doctypeObj.internalSubset  + "\n" +
+  "doctypeObj.publicId: "       + doctypeObj.publicId        + "\n" +
+  "doctypeObj.systemId: "       + doctypeObj.systemId
+);</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>La propriété renvoie <code>null</code> si aucune DTD n'est associée au document en cours.</p>
+
+<p>DOM level 2 ne prend pas en charge l'édition de la déclaration de type de document (DTD).</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">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM3 Core", "core.html#ID-B63ED1A31", "Document.doctype")}}</td>
+   <td>{{Spec2("DOM3 Core")}}</td>
+   <td>Valeur de retour modifiée pour les documents HTML avec absence d'élément {{HTMLElement("html")}}. Définit que le type de document peut être modifié.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Core", "core.html#ID-B63ED1A31", "Document.doctype")}}</td>
+   <td>{{Spec2("DOM2 Core")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/api/document/document.anchors/index.html b/files/fr/web/api/document/document.anchors/index.html
new file mode 100644
index 0000000000..09fadf1b61
--- /dev/null
+++ b/files/fr/web/api/document/document.anchors/index.html
@@ -0,0 +1,80 @@
+---
+title: Document.anchors
+slug: Web/API/Document/Document.anchors
+translation_of: Web/API/Document/anchors
+---
+<div>{{APIRef("DOM")}} {{deprecated_header()}}</div>
+
+<p><code>anchors</code> retourne une liste de toutes les ancres du document.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>nodeList</var> = document.anchors;
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush:js">if ( document.anchors.length &gt;= 5 ) {
+  dump("Trop d'ancres trouvées !");
+  window.location = "http://www.google.com";
+}
+</pre>
+
+<p>L'exemple suivant remplit un tableau avec chaque ancre présente sur la page :</p>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+&lt;meta charset="UTF-8" /&gt;
+&lt;title&gt;Test&lt;/title&gt;
+&lt;script&gt;
+function init() {
+  var toc = document.getElementById("toc");
+  var i, li, newAnchor;
+  for (i = 0; i &lt; document.anchors.length; i++) {
+    li = document.createElement("li");
+    newAnchor = document.createElement('a');
+    newAnchor.href = "#" + document.anchors[i].name;
+    newAnchor.innerHTML = document.anchors[i].text;
+    li.appendChild(newAnchor);
+    toc.appendChild(li);
+  }
+}
+&lt;/script&gt;
+
+&lt;/head&gt;
+&lt;body onload="init()"&gt;
+
+&lt;h1&gt;Title&lt;/h1&gt;
+&lt;h2&gt;&lt;a name="contents"&gt;Contents&lt;/a&gt;&lt;/h2&gt;
+&lt;ul id="toc"&gt;&lt;/ul&gt;
+
+&lt;h2&gt;&lt;a name="plants"&gt;Plants&lt;/a&gt;&lt;/h2&gt;
+&lt;ol&gt;
+    &lt;li&gt;Apples&lt;/li&gt;
+    &lt;li&gt;Oranges&lt;/li&gt;
+    &lt;li&gt;Pears&lt;/li&gt;
+&lt;/ol&gt;
+
+&lt;h2&gt;&lt;a name="veggies"&gt;Veggies&lt;/a&gt;&lt;/h2&gt;
+&lt;ol&gt;
+    &lt;li&gt;Carrots&lt;/li&gt;
+    &lt;li&gt;Celery&lt;/li&gt;
+    &lt;li&gt;Beats&lt;/li&gt;
+&lt;/ol&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p><a href="https://jsfiddle.net/S4yNp">Voir dans JSFiddle</a></p>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Pour des raisons de rétrocompatibilité, la liste d'ancres retournée contient seulement les ancres créées avec l'attribut <code>name</code>, pas celles créées avec l'attribut <code>id</code>.</p>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-7577272">DOM Level 2 HTML: anchors</a></li>
+</ul>
diff --git a/files/fr/web/api/document/document/index.html b/files/fr/web/api/document/document/index.html
new file mode 100644
index 0000000000..92f2305c02
--- /dev/null
+++ b/files/fr/web/api/document/document/index.html
@@ -0,0 +1,93 @@
+---
+title: Document()
+slug: Web/API/Document/Document
+tags:
+  - API
+  - Constructeur
+  - DOM
+  - Document
+  - Reference
+translation_of: Web/API/Document/Document
+---
+<p>{{APIRef}}</p>
+
+<p>Le constructeur <code><strong>Document</strong></code> crée un nouvel objet de {{domxref("Document")}}, lequel c'est la référence de la page courante dans le navigateur et servant comme point d'entrer aux contenus de la page.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>document</em> = new Document()</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>None.</p>
+
+<p><span style='background-color: #333333; color: #ffffff; font-family: x-locale-heading-primary,zillaslab,Palatino,"Palatino Linotype",x-locale-heading-secondary,serif; font-size: 1.5rem;'>Spécifications</span></p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#interface-document','Document')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_Navigateurs">Compatibilité Navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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(60)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(47)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(60)}}</td>
+   <td>{{CompatChrome(60)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile(47)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fr/web/api/document/documentelement/index.html b/files/fr/web/api/document/documentelement/index.html
new file mode 100644
index 0000000000..e345027b13
--- /dev/null
+++ b/files/fr/web/api/document/documentelement/index.html
@@ -0,0 +1,72 @@
+---
+title: document.documentElement
+slug: Web/API/Document/documentElement
+tags:
+  - API
+  - DOM
+  - Noeud
+  - Propriétés
+  - Racine
+  - Reference
+translation_of: Web/API/Document/documentElement
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p><code><strong>Document.documentElement</strong></code>renvoie l'<code><a href="https://developer.mozilla.org/fr/docs/Web/API/element">Element</a></code> qui est l'élément racine du <a href="https://developer.mozilla.org/fr/docs/Web/API/document">document</a> (par exemple, l'élément <code>&lt;html&gt;</code> pour les documents HTML).</p>
+
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+
+<pre class="eval">var<em> element</em> = document.documentElement;
+</pre>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre class="eval">var racine = document.documentElement;
+var premierNiveau = racine.childNodes;
+// premierNiveau est une NodeList des enfants directs de l'élément racine
+for (var i = 0; i &lt; premierNiveau.length; i++) {
+   // fait quelque chose avec chaque enfant direct de l'élément racine
+   // en tant que premierNiveau[i]
+}
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p><span id="result_box" lang="fr"><span>Pour tout document HTML non vide, <code>document.documentElement</code> sera toujours un élément {{HTMLElement ("html")}}.</span> <span>Pour tout document XML non vide, <code>document.documentElement</code> sera toujours l'élément racine du document.</span></span></p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core','core.html#ID-87CD092','Document.documentElement')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core','core.html#ID-87CD092','Document.documentElement')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM4','#dom-document-documentelement','Document.documentElement')}}</td>
+   <td>{{Spec2('DOM4')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#dom-document-documentelement','Document.documentElement')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Document.documentElement")}}</p>
diff --git a/files/fr/web/api/document/documenturi/index.html b/files/fr/web/api/document/documenturi/index.html
new file mode 100644
index 0000000000..31e15a16be
--- /dev/null
+++ b/files/fr/web/api/document/documenturi/index.html
@@ -0,0 +1,54 @@
+---
+title: Document.documentURI
+slug: Web/API/Document/documentURI
+tags:
+  - API
+  - DOM
+  - Document
+  - Propriétés
+  - URI
+translation_of: Web/API/Document/documentURI
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p>La propriété <code><strong>documentURI</strong></code> de l'interface {{domxref("Document")}} renvoie l'emplacement du document sous forme "string" (<em>chaîne de caractères</em>).</p>
+
+<p>Initialement, la spécification DOM3 définissait cet attribut en lecture/écriture. Dans la norme actuelle DOM, il est en lecture seule.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <var>string</var> = document.documentURI;
+</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Les documents HTML ont une propriété {{domxref("document.URL")}} qui renvoie la même valeur. Contrairement à l'<code>URL</code>, <code>documentURI</code> est disponible pour tous les types de documents.</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('DOM WHATWG', '#dom-document-documenturi','documentURI')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', '#Document3-documentURI', 'documentURI')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+
+<p>{{Compat("api.Document.documentURI")}}</p>
diff --git a/files/fr/web/api/document/documenturiobject/index.html b/files/fr/web/api/document/documenturiobject/index.html
new file mode 100644
index 0000000000..3c9f6fcb6f
--- /dev/null
+++ b/files/fr/web/api/document/documenturiobject/index.html
@@ -0,0 +1,38 @@
+---
+title: document.documentURIObject
+slug: Web/API/Document/documentURIObject
+tags:
+  - API
+  - DOM
+  - Propriétés
+  - Reference
+translation_of: Web/API/Document/documentURIObject
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p>La propriété en lecture seule <code><strong>Document.documentURIObject</strong></code> renvoie un objet {{ Interface("nsIURI") }} représentant l'URI du <a href="https://developer.mozilla.org/fr/docs/Web/API/document">document</a>.</p>
+
+<p>Cette propriété fonctionne uniquement pour les scripts privilégiés (UniversalXPConnect), comme le code des extensions. Pour le contenu Web, elle n'a aucune signification particulière et peut être utilisée comme n'importe quelle propriété personnalisée.</p>
+
+<p>Dans le cas d'un code privilégié, il convient de faire attention à ne pas essayer d'obtenir ou modifier cette propriété sur un objet de contenu non enveloppé (par exemple sur l'objet <code>wrappedJSObject</code> d'un <code><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/Xray_vision">XPCNativeWrapper</a></code>). Consultez les commentaires du {{ Bug(324464) }} pour plus de détails.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="eval line-numbers  language-html"><code class="language-html">var uri = doc.documentURIObject;</code></pre>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre class="eval">// Vérifie que le schéma d'URI pour l'onglet courant dans Firefox est « http »,
+// en supposant que ce code s'exécute dans le contexte de browser.xul
+
+var uriObj = content.document.documentURIObject;
+var uriPort = uriObj.port;
+
+if (uriObj.schemeIs('http')) {
+  ...
+}
+</pre>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h2>
+
+<p>Ne fait partie d'aucune spécification.</p>
diff --git a/files/fr/web/api/document/domain/index.html b/files/fr/web/api/document/domain/index.html
new file mode 100644
index 0000000000..94d4f1775b
--- /dev/null
+++ b/files/fr/web/api/document/domain/index.html
@@ -0,0 +1,61 @@
+---
+title: Document.domain
+slug: Web/API/Document/domain
+tags:
+  - API
+  - Document
+  - HTML DOM
+  - NeedsCompatTable
+  - NeedsMarkupWork
+  - NeedsSpecTable
+  - Propriété
+  - Reference
+translation_of: Web/API/Document/domain
+---
+<div>{{ApiRef}}</div>
+
+<h2 id="Summary" name="Summary">Résumé</h2>
+
+<p>Retourne/définit la partie domaine de l'origine du document courant, telle qu'utilisée par la <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Same_origin_policy_for_JavaScript" title="Same origin policy for JavaScript">politique d'origine identique</a>.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox">var <var>chaineDomaine</var> = document.domain; document.domain = <em>chaine</em>;
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush:js" dir="rtl">// Pour le document www.example.xxx/good.html,
+// ce script ferme la fenêtre
+var mauvaisDomaine = "www.example.xxx";
+
+if (document.domain == mauvaisDomaine )
+   window.close(); // juste un exemple - window.close() n'a parfois aucun effet.</pre>
+
+<pre class="brush:js">// Pour l'URI http://developer.mozilla.org/en-US/docs/Web, ce qui
+// suit définit le domaine comme étant la chaîne "developer.mozilla.org"
+var domaine = document.domain;
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Cette propriété retourne <code>null</code> si le domaine du document ne peut pas être identifié.</p>
+
+<p>Mozilla vous laissera la définir à un superdomaine de la valeur courante, contraint par son <a href="/en-US/docs/XPCOM_Interface_Reference/nsIEffectiveTLDService#getBaseDomain.28.29" title="nsIEffectiveTLDService#getBaseDomain.28.29">domaine de base</a>. Par exemple, sur developer.mozilla.org, il est possible de la définir à "mozilla.org" mais pas à "mozilla.com" ou "org".</p>
+
+<p>Si cette propriété est définie avec succès, la partie "port" de l'origine est également définie à null.</p>
+
+<p>Mozilla fait la distinction entre la propriété d'un <code>document.domain</code> qui n'a jamais été modifiée d'une explicitement définie avec le même domaine que l'URL du document, même si la propriété renvoie la même valeur dans les deux cas. Un document est autorisé à accéder à un autre si il ont tous deux défini <code>document.domain</code> à la même valeur, indiquant leur intention de coopérer, ou si aucun des deux n'a défini <code>document.domain</code> et que les domaines dans les URLs sont les mêmes (<a class="link-https" href="https://mxr.mozilla.org/mozilla-central/source/caps/nsPrincipal.cpp?rev=ecb7068b07a1&amp;mark=199-215#199" title="https://mxr.mozilla.org/mozilla-central/source/caps/src/nsScriptSecurityManager.cpp#1003">implementation</a>). Sans cette politique spéciale, chaque site serait sujet au Cross-Site-Scripting (XSS)  depuis ses sous-domaines (par exemple, <a class="link-https" href="https://bugzilla.mozilla.org" rel="freelink">https://bugzilla.mozilla.org</a> pourrait être attaqué par des pièces jointes de bugs sur <a class="link-https" href="https://bug*.bugzilla.mozilla.org" rel="freelink">https://bug*.bugzilla.mozilla.org</a>).</p>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-2250147">DOM Level 2 HTML: document.domain</a> (le décrit comme étant en lecture-seule)</li>
+ <li><a href="https://html.spec.whatwg.org/multipage/browsers.html#relaxing-the-same-origin-restriction" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/origin-0.html">HTML5: document.domain</a> (décrit un comportement similaire à celui de Mozilla)</li>
+</ul>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Same_origin_policy_for_JavaScript" title="Same origin policy for JavaScript">Politique de même origine pour JavaScriptHTML</a></li>
+</ul>
diff --git a/files/fr/web/api/document/domcontentloaded_event/index.html b/files/fr/web/api/document/domcontentloaded_event/index.html
new file mode 100644
index 0000000000..29c8b67905
--- /dev/null
+++ b/files/fr/web/api/document/domcontentloaded_event/index.html
@@ -0,0 +1,184 @@
+---
+title: 'Document: DOMContentLoaded event'
+slug: Web/API/Document/DOMContentLoaded_event
+translation_of: Web/API/Document/DOMContentLoaded_event
+---
+<div>{{APIRef}}</div>
+
+<p>L'évènement <strong><code>DOMContentLoaded</code></strong> est déclenché quand le document HTML initiale est complètement chargé et analysé, sans attendre la fin du chargement des feuilles de styles, images et sous-document.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Bouillonne</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Annulable</th>
+   <td>Oui (bien que spécifié comme évènement simple non annulable)</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("Event")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Propriété de gestion de l’évènement</th>
+   <td>Aucune</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Un évènement différent, {{domxref("Window/load_event", "load")}} doit être utilisé pour détecter que la page entière est chargée. On utilise couramment à tord <code>load</code> là où <code>DOMContentLoaded</code> serait plus approprié.</p>
+
+<p>Du code JavaScript synchrone va mettre en pause la création du DOM. Si vous voulez charger le DOM le plus rapidement possible, vous pouvez faire votre code <a href="/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests">(en) JavaScript asynchrone</a> et <a href="https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery">(en) optimiser le chargement des feuilles de styles</a>. Si vous chargez comme d'habitude, les feuilles de styles vont ralentir la création du DOM comme si elles étaient chargées en parallèle, en «volant» le trafique du document principale HTML.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Usage_simple">Usage simple</h3>
+
+<pre class="brush: js">document.addEventListener('DOMContentLoaded', (event) =&gt; {
+    console.log('DOM fully loaded and parsed');
+});
+</pre>
+
+<h3 id="Retarde_DOMContentLoaded">Retarde DOMContentLoaded</h3>
+
+<pre class="brush: html">&lt;script&gt;
+  document.addEventListener('DOMContentLoaded', (event) =&gt; {
+    console.log('DOM fully loaded and parsed');
+  });
+
+for( let i = 0; i &lt; 1000000000; i++)
+{} // This synchronous script is going to delay parsing of the DOM,
+   // so the DOMContentLoaded event is going to launch later.
+&lt;/script&gt;
+</pre>
+
+<h3 id="Vérifie_que_le_contenu_si_le_chargement_est_déjà_fini">Vérifie que le contenu si le chargement est déjà fini</h3>
+
+<p>L'évènement <code>DOMContentLoaded</code> peut-être déclenché avant que le script soit exécuté, donc il vaut mieux vérifier avant d'ajouter un écouteur d'évènement.</p>
+
+<pre class="brush: js">function doSomething() {
+  console.info('DOM loaded');
+}
+
+if (document.readyState === 'loading') {  // Loading hasn't finished yet
+  document.addEventListener('DOMContentLoaded', doSomething);
+} else {  // `DOMContentLoaded` has already fired
+  doSomething();
+}
+</pre>
+
+<h3 id="Démonstration">Démonstration</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="controls"&gt;
+  &lt;button id="reload" type="button"&gt;Reload&lt;/button&gt;
+&lt;/div&gt;
+
+&lt;div class="event-log"&gt;
+  &lt;label&gt;Event log:&lt;/label&gt;
+  &lt;textarea readonly class="event-log-contents" rows="8" cols="30"&gt;&lt;/textarea&gt;
+&lt;/div&gt;</pre>
+
+<div class="hidden">
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">body {
+  display: grid;
+  grid-template-areas: "control  log";
+}
+
+.controls {
+  grid-area: control;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.event-log {
+  grid-area: log;
+}
+
+.event-log-contents {
+  resize: none;
+}
+
+label, button {
+  display: block;
+}
+
+#reload {
+  height: 2rem;
+}
+
+</pre>
+</div>
+
+<h4 id="JS">JS</h4>
+
+<pre class="brush: js">const log = document.querySelector('.event-log-contents');
+const reload = document.querySelector('#reload');
+
+reload.addEventListener('click', () =&gt; {
+  log.textContent ='';
+  window.setTimeout(() =&gt; {
+      window.location.reload(true);
+  }, 200);
+});
+
+window.addEventListener('load', (event) =&gt; {
+    log.textContent = log.textContent + 'load\n';
+});
+
+document.addEventListener('readystatechange', (event) =&gt; {
+    log.textContent = log.textContent + `readystate: ${document.readyState}\n`;
+});
+
+document.addEventListener('DOMContentLoaded', (event) =&gt; {
+    log.textContent = log.textContent + `DOMContentLoaded\n`;
+});
+
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{ EmbedLiveSample('Live_example', '100%', '160px') }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'parsing.html#the-end:event-domcontentloaded', 'DOMContentLoaded')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'syntax.html#the-end', 'DOMContentLoaded')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Document.DOMContentLoaded_event")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Évènements similaires: {{domxref("Window/load_event", "load")}}, {{domxref("Document/readystatechange_event", "readystatechange")}}, {{domxref("Window/beforeunload_event", "beforeunload")}} et {{domxref("Window/unload_event", "unload")}}</li>
+ <li>Cet évènement sur la cible {{domxref("Window")}}: {{domxref("Window/DOMContentLoaded_event", "DOMContentLoaded")}}</li>
+</ul>
diff --git a/files/fr/web/api/document/drag_event/index.html b/files/fr/web/api/document/drag_event/index.html
new file mode 100644
index 0000000000..7bd2710641
--- /dev/null
+++ b/files/fr/web/api/document/drag_event/index.html
@@ -0,0 +1,313 @@
+---
+title: drag
+slug: Web/API/Document/drag_event
+translation_of: Web/API/Document/drag_event
+---
+<div>{{APIRef}}</div>
+
+<p>L'événement drag est déclenché lorsqu'un élément ou une section de texte est glissé (toutes les quelques centaines de milisecondes)</p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("DragEvent")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Oui</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Oui</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("Document")}}, {{domxref("Element")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Continuer l'opération drag &amp; drop.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td>
+   <td>The element that was underneath the element being dragged.</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event normally bubbles or not</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event is cancellable or not?</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td>
+   <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>0.</td>
+  </tr>
+  <tr>
+   <td><code>dataTransfer</code></td>
+   <td>DataTransfer</td>
+   <td>The data that underlies a drag-and-drop operation, known as the <a href="/en-US/docs/Web/API/DataTransfer">drag data store</a>. Protected mode.</td>
+  </tr>
+  <tr>
+   <td><code>currentTarget</code> {{readonlyInline}}</td>
+   <td>EventTarget</td>
+   <td>The node that had the event listener attached.</td>
+  </tr>
+  <tr>
+   <td><code>relatedTarget</code> {{readonlyInline}}</td>
+   <td>EventTarget</td>
+   <td>For <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> and <code>mouseleave</code> events: the target of the complementary event (the <code>mouseleave</code> target in the case of a <code>mouseenter</code> event). <code>null</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>screenX</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The X coordinate of the mouse pointer in global (screen) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>screenY</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The Y coordinate of the mouse pointer in global (screen) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>clientX</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The X coordinate of the mouse pointer in local (DOM content) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>clientY</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The Y coordinate of the mouse pointer in local (DOM content) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>button</code> {{readonlyInline}}</td>
+   <td>unsigned short</td>
+   <td>The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.</td>
+  </tr>
+  <tr>
+   <td><code>buttons</code> {{readonlyInline}}</td>
+   <td>unsigned short</td>
+   <td>The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">More info</a>.</td>
+  </tr>
+  <tr>
+   <td><code>mozPressure</code> {{readonlyInline}}</td>
+   <td>float</td>
+   <td>The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).</td>
+  </tr>
+  <tr>
+   <td><code>ctrlKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>shiftKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>altKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>metaKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">&lt;div class="dropzone"&gt;
+  &lt;div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)"&gt;
+    This div is draggable
+  &lt;/div&gt;
+&lt;/div&gt;
+&lt;div class="dropzone"&gt;&lt;/div&gt;
+&lt;div class="dropzone"&gt;&lt;/div&gt;
+&lt;div class="dropzone"&gt;&lt;/div&gt;
+
+&lt;style&gt;
+  #draggable {
+    width: 200px;
+    height: 20px;
+    text-align: center;
+    background: white;
+  }
+
+  .dropzone {
+    width: 200px;
+    height: 20px;
+    background: blueviolet;
+    margin-bottom: 10px;
+    padding: 10px;
+  }
+&lt;/style&gt;
+
+&lt;script&gt;
+  var dragged;
+
+  /* Les événements sont déclenchés sur les objets glissables */
+  document.addEventListener("drag", function( event ) {
+
+  }, false);
+
+  document.addEventListener("dragstart", function( event ) {
+      // Stocke une référence sur l'objet glissable
+      dragged = event.target;
+      // transparence 50%
+      event.target.style.opacity = .5;
+  }, false);
+
+  document.addEventListener("dragend", function( event ) {
+      // reset de la transparence
+      event.target.style.opacity = "";
+  }, false);
+
+  /* Les événements sont déclenchés sur les cibles du drop */
+  document.addEventListener("dragover", function( event ) {
+      // Empêche default d'autoriser le drop
+      event.preventDefault();
+  }, false);
+
+  document.addEventListener("dragenter", function( event ) {
+      // Met en surbrillance la cible de drop potentielle lorsque l'élément glissable y entre
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "purple";
+      }
+
+  }, false);
+
+  document.addEventListener("dragleave", function( event ) {
+      /* reset de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent */
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "";
+      }
+
+  }, false);
+
+  document.addEventListener("drop", function( event ) {
+      // Empêche l'action par défaut (ouvrir<span class="short_text" id="result_box" lang="fr"><span> comme lien pour certains éléments)</span></span>
+      event.preventDefault();
+      // Déplace l'élément traîné vers la cible du drop sélectionnée
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "";
+          dragged.parentNode.removeChild( dragged );
+          event.target.appendChild( dragged );
+      }
+
+  }, false);
+&lt;/script&gt;
+</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>{{SpecName("HTML WHATWG", "interaction.html#dndevents", "drag event")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.1", "editing.html#dndevents", "drag event")}}</td>
+   <td>{{Spec2("HTML5.1")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilités_navigateur">Compatibilités navigateur</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Navigateur</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>4</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>10</td>
+   <td>12</td>
+   <td>3.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Navigateur</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatIE("10")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{event("drag")}}</li>
+ <li>{{event("dragstart")}}</li>
+ <li>{{event("dragend")}}</li>
+ <li>{{event("dragover")}}</li>
+ <li>{{event("dragenter")}}</li>
+ <li>{{event("dragleave")}}</li>
+ <li>{{event("dragexit")}}</li>
+ <li>{{event("drop")}}</li>
+ <li><a href="http://jsfiddle.net/zfnj5rv4/">Demo</a></li>
+</ul>
diff --git a/files/fr/web/api/document/dragend_event/index.html b/files/fr/web/api/document/dragend_event/index.html
new file mode 100644
index 0000000000..74508d8303
--- /dev/null
+++ b/files/fr/web/api/document/dragend_event/index.html
@@ -0,0 +1,316 @@
+---
+title: dragend
+slug: Web/API/Document/dragend_event
+translation_of: Web/API/Document/dragend_event
+---
+<p>L'événement <strong>dragend</strong> est déclenché lorsque une opération de glissement est terminée (en relâchant le bouton de la souris ou en appuyant sur la touche Echap).</p>
+
+<h2 id="Informations_généralesEdit">Informations générales<a class="button section-edit only-icon" href="https://developer.mozilla.org/fr/docs/Web/Events/animationend$edit#Informations_g%C3%A9n%C3%A9rales"><span>Edit</span></a></h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("DragEvent")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Oui</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("Document")}}, {{domxref("Element")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Varie</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td>
+   <td>The element that was underneath the element being dragged.</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event normally bubbles or not</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event is cancellable or not?</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td>
+   <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>0.</td>
+  </tr>
+  <tr>
+   <td><code>dataTransfer</code></td>
+   <td>DataTransfer</td>
+   <td>The data that underlies a drag-and-drop operation, known as the <a href="/en-US/docs/Web/API/DataTransfer">drag data store</a>. Protected mode.</td>
+  </tr>
+  <tr>
+   <td><code>currentTarget</code> {{readonlyInline}}</td>
+   <td>EventTarget</td>
+   <td>The node that had the event listener attached.</td>
+  </tr>
+  <tr>
+   <td><code>relatedTarget</code> {{readonlyInline}}</td>
+   <td>EventTarget</td>
+   <td>For <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> and <code>mouseleave</code> events: the target of the complementary event (the <code>mouseleave</code> target in the case of a <code>mouseenter</code> event). <code>null</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>screenX</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The X coordinate of the mouse pointer in global (screen) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>screenY</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The Y coordinate of the mouse pointer in global (screen) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>clientX</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The X coordinate of the mouse pointer in local (DOM content) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>clientY</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The Y coordinate of the mouse pointer in local (DOM content) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>button</code> {{readonlyInline}}</td>
+   <td>unsigned short</td>
+   <td>The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.</td>
+  </tr>
+  <tr>
+   <td><code>buttons</code> {{readonlyInline}}</td>
+   <td>unsigned short</td>
+   <td>The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">More info</a>.</td>
+  </tr>
+  <tr>
+   <td><code>mozPressure</code> {{readonlyInline}}</td>
+   <td>float</td>
+   <td>The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).</td>
+  </tr>
+  <tr>
+   <td><code>ctrlKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>shiftKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>altKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>metaKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">&lt;div class="dropzone"&gt;
+  &lt;div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)"&gt;
+    This div is draggable
+  &lt;/div&gt;
+&lt;/div&gt;
+&lt;div class="dropzone"&gt;&lt;/div&gt;
+&lt;div class="dropzone"&gt;&lt;/div&gt;
+&lt;div class="dropzone"&gt;&lt;/div&gt;
+
+&lt;style&gt;
+  #draggable {
+    width: 200px;
+    height: 20px;
+    text-align: center;
+    background: white;
+  }
+
+  .dropzone {
+    width: 200px;
+    height: 20px;
+    background: blueviolet;
+    margin-bottom: 10px;
+    padding: 10px;
+  }
+&lt;/style&gt;
+
+&lt;script&gt;
+  <span>var dragged;
+
+  /* </span>Les événements sont déclenchés sur les objets glissables<span> */
+  document.addEventListener("drag", function( event ) {
+
+  }, false);
+
+  document.addEventListener("dragstart", function( event ) {
+      // </span>Stocke une référence sur l'objet glissable<span>
+      dragged = event.target;
+      // </span>transparence 50%<span>
+      event.target.style.opacity = .5;
+  }, false);
+
+  document.addEventListener("dragend", function( event ) {
+      // </span>reset de la transparence<span>
+      event.target.style.opacity = "";
+  }, false);
+
+  /* </span>Les événements sont déclenchés sur les cibles du drop<span> */
+  document.addEventListener("dragover", function( event ) {
+      // </span>Empêche default d'autoriser le drop<span>
+      event.preventDefault();
+  }, false);
+
+  document.addEventListener("dragenter", function( event ) {
+      // </span>Met en surbrillance la cible de drop potentielle lorsque l'élément glissable y entre<span>
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "purple";
+      }
+
+  }, false);
+
+  document.addEventListener("dragleave", function( event ) {
+      // r</span>eset de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent<span>
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "";
+      }
+
+  }, false);
+
+  document.addEventListener("drop", function( event ) {
+      // </span>Empêche l'action par défaut (ouvrir comme lien pour certains éléments)<span>
+      event.preventDefault();
+      // </span>Déplace l'élément traîné vers la cible du drop sélectionnée<span>
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "";
+          dragged.parentNode.removeChild( dragged );
+          event.target.appendChild( dragged );
+      }
+
+  }, false);</span>
+&lt;/script&gt;
+</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", "interaction.html#dndevents", "dragend")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.1", "editing.html#dndevents", "dragend")}}</td>
+   <td>{{Spec2("HTML5.1")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilités_navigateurs">Compatibilités navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Navigateur</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>4</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}<sup>[1]</sup></td>
+   <td>10</td>
+   <td>12</td>
+   <td>3.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Navigateur</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatIE("10")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Avec Gecko, <strong>dragend</strong> n'est pas envoyé si la source du nœud est déplacée ou supprimée durant l'opération de glissement (par ex. durant un événement <strong>drop</strong> ou <strong>dragover</strong>). Voir {{bug("460801")}}.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p> </p>
+
+<ul>
+ <li>{{event("drag")}}</li>
+ <li>{{event("dragstart")}}</li>
+ <li>{{event("dragend")}}</li>
+ <li>{{event("dragover")}}</li>
+ <li>{{event("dragenter")}}</li>
+ <li>{{event("dragleave")}}</li>
+ <li>{{event("dragexit")}}</li>
+ <li>{{event("drop")}}</li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/web/api/document/dragenter_event/index.html b/files/fr/web/api/document/dragenter_event/index.html
new file mode 100644
index 0000000000..50739f9415
--- /dev/null
+++ b/files/fr/web/api/document/dragenter_event/index.html
@@ -0,0 +1,314 @@
+---
+title: dragenter
+slug: Web/API/Document/dragenter_event
+translation_of: Web/API/Document/dragenter_event
+---
+<div>{{APIRef}}</div>
+
+<p>L'événement <strong>dragenter</strong> est déclenché lorsqu'un élément glissé ou une sélection de texte entre dans une cible de drop valide.</p>
+
+<h2 id="Informations_généralesEdit">Informations générales<a class="button section-edit only-icon" href="https://developer.mozilla.org/fr/docs/Web/Events/animationend$edit#Informations_g%C3%A9n%C3%A9rales"><span>Edit</span></a></h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("DragEvent")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Oui</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Oui</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">La sélection immédiate de l'utilisateur (l'élément présentement indiqué par l'utilisateur comme cible pour le drop), ou l'élément {{HTMLElement("body")}}.</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Rejette la sélection immédiate de l'utilisateur comme élément cible potentiel</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td>
+   <td>The element that was underneath the element being dragged.</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event normally bubbles or not</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event is cancellable or not?</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td>
+   <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>0.</td>
+  </tr>
+  <tr>
+   <td><code>dataTransfer</code></td>
+   <td>DataTransfer</td>
+   <td>The data that underlies a drag-and-drop operation, known as the <a href="/en-US/docs/Web/API/DataTransfer">drag data store</a>. Protected mode.</td>
+  </tr>
+  <tr>
+   <td><code>currentTarget</code> {{readonlyInline}}</td>
+   <td>EventTarget</td>
+   <td>The node that had the event listener attached.</td>
+  </tr>
+  <tr>
+   <td><code>relatedTarget</code> {{readonlyInline}}</td>
+   <td>EventTarget</td>
+   <td>For <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> and <code>mouseleave</code> events: the target of the complementary event (the <code>mouseleave</code> target in the case of a <code>mouseenter</code> event). <code>null</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>screenX</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The X coordinate of the mouse pointer in global (screen) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>screenY</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The Y coordinate of the mouse pointer in global (screen) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>clientX</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The X coordinate of the mouse pointer in local (DOM content) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>clientY</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The Y coordinate of the mouse pointer in local (DOM content) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>button</code> {{readonlyInline}}</td>
+   <td>unsigned short</td>
+   <td>The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.</td>
+  </tr>
+  <tr>
+   <td><code>buttons</code> {{readonlyInline}}</td>
+   <td>unsigned short</td>
+   <td>The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">More info</a>.</td>
+  </tr>
+  <tr>
+   <td><code>mozPressure</code> {{readonlyInline}}</td>
+   <td>float</td>
+   <td>The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).</td>
+  </tr>
+  <tr>
+   <td><code>ctrlKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>shiftKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>altKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>metaKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">&lt;div class="dropzone"&gt;
+  &lt;div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)"&gt;
+    This div is draggable
+  &lt;/div&gt;
+&lt;/div&gt;
+&lt;div class="dropzone"&gt;&lt;/div&gt;
+&lt;div class="dropzone"&gt;&lt;/div&gt;
+&lt;div class="dropzone"&gt;&lt;/div&gt;
+
+&lt;style&gt;
+  #draggable {
+    width: 200px;
+    height: 20px;
+    text-align: center;
+    background: white;
+  }
+
+  .dropzone {
+    width: 200px;
+    height: 20px;
+    background: blueviolet;
+    margin-bottom: 10px;
+    padding: 10px;
+  }
+&lt;/style&gt;
+
+&lt;script&gt;
+  <span>var dragged;
+
+  /* </span>Les événements sont déclenchés sur les objets glissables<span> */
+  document.addEventListener("drag", function( event ) {
+
+  }, false);
+
+  document.addEventListener("dragstart", function( event ) {
+      // </span>Stocke une référence sur l'objet glissable<span>
+      dragged = event.target;
+      // </span>transparence 50%<span>
+      event.target.style.opacity = .5;
+  }, false);
+
+  document.addEventListener("dragend", function( event ) {
+      // </span>reset de la transparence<span>
+      event.target.style.opacity = "";
+  }, false);
+
+  /* </span>Les événements sont déclenchés sur les cibles du drop<span> */
+  document.addEventListener("dragover", function( event ) {
+      // </span>Empêche default d'autoriser le drop<span>
+      event.preventDefault();
+  }, false);
+
+  document.addEventListener("dragenter", function( event ) {
+      // </span>Met en surbrillance la cible de drop potentielle lorsque l'élément glissable y entre<span>
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "purple";
+      }
+
+  }, false);
+
+  document.addEventListener("dragleave", function( event ) {
+      // r</span>eset de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent<span> </span><span>
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "";
+      }
+
+  }, false);
+
+  document.addEventListener("drop", function( event ) {
+      // </span>Empêche l'action par défaut (ouvrir comme lien pour certains éléments)<span>
+      event.preventDefault();
+      // </span>Déplace l'élément traîné vers la cible du drop sélectionnée<span>
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "";
+          dragged.parentNode.removeChild( dragged );
+          event.target.appendChild( dragged );
+      }
+
+  }, false);</span>
+&lt;/script&gt;
+</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", "interaction.html#dndevents", "dragenter")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.1", "editing.html#dndevents", "dragenter")}}</td>
+   <td>{{Spec2("HTML5.1")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatiblités_navigateurs">Compatiblités navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Navigateur</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>4</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}<sup>[1]</sup></td>
+   <td>10</td>
+   <td>12</td>
+   <td>3.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Navigateur</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatIE("10")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] <span id="summary_alias_container"><span id="short_desc_nonedit_display">L'événement <strong>dragenter</strong> est déclenché deux fois quand la zone de drop est parente de draggable ou gissable elle même. Voir </span></span>{{bug("804036")}}.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{event("drag")}}</li>
+ <li>{{event("dragstart")}}</li>
+ <li>{{event("dragend")}}</li>
+ <li>{{event("dragover")}}</li>
+ <li>{{event("dragenter")}}</li>
+ <li>{{event("dragleave")}}</li>
+ <li>{{event("dragexit")}}</li>
+ <li>{{event("drop")}}</li>
+</ul>
diff --git a/files/fr/web/api/document/dragleave_event/index.html b/files/fr/web/api/document/dragleave_event/index.html
new file mode 100644
index 0000000000..ef32a3fe75
--- /dev/null
+++ b/files/fr/web/api/document/dragleave_event/index.html
@@ -0,0 +1,310 @@
+---
+title: dragleave
+slug: Web/API/Document/dragleave_event
+translation_of: Web/API/Document/dragleave_event
+---
+<p>L'événement <strong>dragleave </strong>est déclenché lorsqu'un élément glissé ou une sélection de texte quitte une cible de dépôt valide.</p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="new" href="https://developer.mozilla.org/fr/docs/Web/API/DragEvent" title="Cette documentation n'a pas encore été rédigée, vous pouvez aider en contribuant !"><code>DragEvent</code></a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Oui</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("Document")}}, {{domxref("Element")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Aucune</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td>
+   <td>The element that was underneath the element being dragged.</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event normally bubbles or not</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event is cancellable or not?</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td>
+   <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>0.</td>
+  </tr>
+  <tr>
+   <td><code>dataTransfer</code></td>
+   <td>DataTransfer</td>
+   <td>The data that underlies a drag-and-drop operation, known as the <a href="/en-US/docs/Web/API/DataTransfer">drag data store</a>. Protected mode.</td>
+  </tr>
+  <tr>
+   <td><code>currentTarget</code> {{readonlyInline}}</td>
+   <td>EventTarget</td>
+   <td>The node that had the event listener attached.</td>
+  </tr>
+  <tr>
+   <td><code>relatedTarget</code> {{readonlyInline}}</td>
+   <td>EventTarget</td>
+   <td>For <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> and <code>mouseleave</code> events: the target of the complementary event (the <code>mouseleave</code> target in the case of a <code>mouseenter</code> event). <code>null</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>screenX</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The X coordinate of the mouse pointer in global (screen) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>screenY</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The Y coordinate of the mouse pointer in global (screen) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>clientX</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The X coordinate of the mouse pointer in local (DOM content) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>clientY</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The Y coordinate of the mouse pointer in local (DOM content) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>button</code> {{readonlyInline}}</td>
+   <td>unsigned short</td>
+   <td>The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.</td>
+  </tr>
+  <tr>
+   <td><code>buttons</code> {{readonlyInline}}</td>
+   <td>unsigned short</td>
+   <td>The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">More info</a>.</td>
+  </tr>
+  <tr>
+   <td><code>mozPressure</code> {{readonlyInline}}</td>
+   <td>float</td>
+   <td>The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).</td>
+  </tr>
+  <tr>
+   <td><code>ctrlKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>shiftKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>altKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>metaKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">&lt;div class="dropzone"&gt;
+  &lt;div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)"&gt;
+    This div is draggable
+  &lt;/div&gt;
+&lt;/div&gt;
+&lt;div class="dropzone"&gt;&lt;/div&gt;
+&lt;div class="dropzone"&gt;&lt;/div&gt;
+&lt;div class="dropzone"&gt;&lt;/div&gt;
+
+&lt;style&gt;
+  #draggable {
+    width: 200px;
+    height: 20px;
+    text-align: center;
+    background: white;
+  }
+
+  .dropzone {
+    width: 200px;
+    height: 20px;
+    background: blueviolet;
+    margin-bottom: 10px;
+    padding: 10px;
+  }
+&lt;/style&gt;
+
+&lt;script&gt;
+  <span>var dragged;
+
+  /* </span>Les événements sont déclenchés sur les objets glissables <span>*/
+  document.addEventListener("drag", function( event ) {
+
+  }, false);
+
+  document.addEventListener("dragstart", function( event ) {
+      // </span>Stocke une référence sur l'objet glissable<span>
+      dragged = event.target;
+      // </span>transparence 50%<span>
+      event.target.style.opacity = .5;
+  }, false);
+
+  document.addEventListener("dragend", function( event ) {
+      // </span>reset de la transparence<span>
+      event.target.style.opacity = "";
+  }, false);
+
+  /* </span>Les événements sont déclenchés sur les cibles du drop <span>*/
+  document.addEventListener("dragover", function( event ) {
+      // </span>Empêche default d'autoriser le drop<span>
+      event.preventDefault();
+  }, false);
+
+  document.addEventListener("dragenter", function( event ) {
+      // </span>Met en surbrillance la cible de drop potentielle lorsque l'élément glissable y entre<span>
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "purple";
+      }
+
+  }, false);
+
+  document.addEventListener("dragleave", function( event ) {
+      //</span> reset de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent <span>
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "";
+      }
+
+  }, false);
+
+  document.addEventListener("drop", function( event ) {
+      // </span>Empêche l'action par défaut (ouvrir comme lien pour certains éléments)<span>
+      event.preventDefault();
+      // </span>Déplace l'élément traîné vers la cible du drop sélectionnée<span>
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "";
+          dragged.parentNode.removeChild( dragged );
+          event.target.appendChild( dragged );
+      }
+
+  }, false);</span>
+&lt;/script&gt;
+</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", "interaction.html#dndevents", "dragleave")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.1", "editing.html#dndevents", "dragleave")}}</td>
+   <td>{{Spec2("HTML5.1")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilités_navigateur">Compatibilités navigateur</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Navigateur</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>4</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>10</td>
+   <td>12</td>
+   <td>3.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Navigateur</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatIE("10")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{event("drag")}}</li>
+ <li>{{event("dragstart")}}</li>
+ <li>{{event("dragend")}}</li>
+ <li>{{event("dragover")}}</li>
+ <li>{{event("dragenter")}}</li>
+ <li>{{event("dragleave")}}</li>
+ <li>{{event("dragexit")}}</li>
+ <li>{{event("drop")}}</li>
+</ul>
diff --git a/files/fr/web/api/document/dragover_event/index.html b/files/fr/web/api/document/dragover_event/index.html
new file mode 100644
index 0000000000..2efc385956
--- /dev/null
+++ b/files/fr/web/api/document/dragover_event/index.html
@@ -0,0 +1,313 @@
+---
+title: dragover
+slug: Web/API/Document/dragover_event
+translation_of: Web/API/Document/dragover_event
+---
+<div>{{APIRef}}</div>
+
+<p>L'événement <strong>dragover </strong>est déclenché lorsqu'un élément ou une sélection de texte est glissé jusqu'à une cible de dépôt valide (toutes les 100ms)</p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="new" href="https://developer.mozilla.org/fr/docs/Web/API/DragEvent" title="Cette documentation n'a pas encore été rédigée, vous pouvez aider en contribuant !"><code>DragEvent</code></a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Oui</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Oui</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("Document")}}, {{domxref("Element")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Reset l'opération de glissement courante à "none"</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td>
+   <td>The element that was underneath the element being dragged.</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event normally bubbles or not</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event is cancellable or not?</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td>
+   <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>0.</td>
+  </tr>
+  <tr>
+   <td><code>dataTransfer</code></td>
+   <td>DataTransfer</td>
+   <td>The data that underlies a drag-and-drop operation, known as the <a href="/en-US/docs/Web/API/DataTransfer">drag data store</a>. Protected mode.</td>
+  </tr>
+  <tr>
+   <td><code>currentTarget</code> {{readonlyInline}}</td>
+   <td>EventTarget</td>
+   <td>The node that had the event listener attached.</td>
+  </tr>
+  <tr>
+   <td><code>relatedTarget</code> {{readonlyInline}}</td>
+   <td>EventTarget</td>
+   <td>For <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> and <code>mouseleave</code> events: the target of the complementary event (the <code>mouseleave</code> target in the case of a <code>mouseenter</code> event). <code>null</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>screenX</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The X coordinate of the mouse pointer in global (screen) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>screenY</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The Y coordinate of the mouse pointer in global (screen) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>clientX</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The X coordinate of the mouse pointer in local (DOM content) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>clientY</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The Y coordinate of the mouse pointer in local (DOM content) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>button</code> {{readonlyInline}}</td>
+   <td>unsigned short</td>
+   <td>The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.</td>
+  </tr>
+  <tr>
+   <td><code>buttons</code> {{readonlyInline}}</td>
+   <td>unsigned short</td>
+   <td>The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">More info</a>.</td>
+  </tr>
+  <tr>
+   <td><code>mozPressure</code> {{readonlyInline}}</td>
+   <td>float</td>
+   <td>The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).</td>
+  </tr>
+  <tr>
+   <td><code>ctrlKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>shiftKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>altKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>metaKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="operator token">&lt;</span>div <span class="keyword token">class</span><span class="operator token">=</span><span class="string token">"dropzone"</span><span class="operator token">&gt;</span>
+  <span class="operator token">&lt;</span>div id<span class="operator token">=</span><span class="string token">"draggable"</span> draggable<span class="operator token">=</span><span class="string token">"true"</span> ondragstart<span class="operator token">=</span><span class="string token">"event.dataTransfer.setData('text/plain',null)"</span><span class="operator token">&gt;</span>
+    This div is draggable
+  <span class="operator token">&lt;</span><span class="operator token">/</span>div<span class="operator token">&gt;</span>
+<span class="operator token">&lt;</span><span class="operator token">/</span>div<span class="operator token">&gt;</span>
+<span class="operator token">&lt;</span>div <span class="keyword token">class</span><span class="operator token">=</span><span class="string token">"dropzone"</span><span class="operator token">&gt;</span><span class="operator token">&lt;</span><span class="operator token">/</span>div<span class="operator token">&gt;</span>
+<span class="operator token">&lt;</span>div <span class="keyword token">class</span><span class="operator token">=</span><span class="string token">"dropzone"</span><span class="operator token">&gt;</span><span class="operator token">&lt;</span><span class="operator token">/</span>div<span class="operator token">&gt;</span>
+<span class="operator token">&lt;</span>div <span class="keyword token">class</span><span class="operator token">=</span><span class="string token">"dropzone"</span><span class="operator token">&gt;</span><span class="operator token">&lt;</span><span class="operator token">/</span>div<span class="operator token">&gt;</span>
+
+<span class="operator token">&lt;</span>style<span class="operator token">&gt;</span>
+  #draggable <span class="punctuation token">{</span>
+    width<span class="punctuation token">:</span> 200px<span class="punctuation token">;</span>
+    height<span class="punctuation token">:</span> 20px<span class="punctuation token">;</span>
+    text<span class="operator token">-</span>align<span class="punctuation token">:</span> center<span class="punctuation token">;</span>
+    background<span class="punctuation token">:</span> white<span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+
+  <span class="punctuation token">.</span>dropzone <span class="punctuation token">{</span>
+    width<span class="punctuation token">:</span> 200px<span class="punctuation token">;</span>
+    height<span class="punctuation token">:</span> 20px<span class="punctuation token">;</span>
+    background<span class="punctuation token">:</span> blueviolet<span class="punctuation token">;</span>
+    margin<span class="operator token">-</span>bottom<span class="punctuation token">:</span> 10px<span class="punctuation token">;</span>
+    padding<span class="punctuation token">:</span> 10px<span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+<span class="operator token">&lt;</span><span class="operator token">/</span>style<span class="operator token">&gt;</span>
+
+<span class="operator token">&lt;</span>script<span class="operator token">&gt;</span>
+  <span class="keyword token">var</span> dragged<span class="punctuation token">;</span>
+
+  <span class="comment token">/* Les événements sont déclenchés sur les objets glissables */</span>
+  document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"drag"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span> event <span class="punctuation token">)</span> <span class="punctuation token">{</span>
+
+  <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"dragstart"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span> event <span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="comment token">// Stocke une référence sur l'objet glissable</span>
+      dragged <span class="operator token">=</span> event<span class="punctuation token">.</span>target<span class="punctuation token">;</span>
+      <span class="comment token">// transparence 50%</span>
+      event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>style<span class="punctuation token">.</span>opacity <span class="operator token">=</span> <span class="punctuation token">.</span><span class="number token">5</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"dragend"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span> event <span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="comment token">// reset de la transparence</span>
+      event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>style<span class="punctuation token">.</span>opacity <span class="operator token">=</span> <span class="string token">""</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="comment token">/* Les événements sont déclenchés sur les cibles du drop */</span>
+  document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"dragover"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span> event <span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="comment token">// Empêche default d'autoriser le drop</span>
+      event<span class="punctuation token">.</span><span class="function token">preventDefault</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="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"dragenter"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span> event <span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="comment token">// Met en surbrillance la cible de drop potentielle lorsque l'élément glissable y entre</span>
+      <span class="keyword token">if</span> <span class="punctuation token">(</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>className <span class="operator token">==</span> <span class="string token">"dropzone"</span> <span class="punctuation token">)</span> <span class="punctuation token">{</span>
+          event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>style<span class="punctuation token">.</span>background <span class="operator token">=</span> <span class="string token">"purple"</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span>
+
+  <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"dragleave"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span> event <span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="comment token">// reset de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent </span>
+      <span class="keyword token">if</span> <span class="punctuation token">(</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>className <span class="operator token">==</span> <span class="string token">"dropzone"</span> <span class="punctuation token">)</span> <span class="punctuation token">{</span>
+          event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>style<span class="punctuation token">.</span>background <span class="operator token">=</span> <span class="string token">""</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span>
+
+  <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"drop"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span> event <span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="comment token">// Empêche l'action par défaut (ouvrir comme lien pour certains éléments)</span>
+      event<span class="punctuation token">.</span><span class="function token">preventDefault</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="comment token">// Déplace l'élément traîné vers la cible du drop sélectionnée</span>
+      <span class="keyword token">if</span> <span class="punctuation token">(</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>className <span class="operator token">==</span> <span class="string token">"dropzone"</span> <span class="punctuation token">)</span> <span class="punctuation token">{</span>
+          event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>style<span class="punctuation token">.</span>background <span class="operator token">=</span> <span class="string token">""</span><span class="punctuation token">;</span>
+          dragged<span class="punctuation token">.</span>parentNode<span class="punctuation token">.</span><span class="function token">removeChild</span><span class="punctuation token">(</span> dragged <span class="punctuation token">)</span><span class="punctuation token">;</span>
+          event<span class="punctuation token">.</span>target<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span> dragged <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="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="operator token">&lt;</span><span class="operator token">/</span>script<span class="operator token">&gt;</span></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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragover")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.1", "editing.html#dndevents", "dragover")}}</td>
+   <td>{{Spec2("HTML5.1")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilités_navigateur">Compatibilités navigateur</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Navigateur</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>4</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>10</td>
+   <td>12</td>
+   <td>3.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Navigateur</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatIE("10")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{event("drag")}}</li>
+ <li>{{event("dragstart")}}</li>
+ <li>{{event("dragend")}}</li>
+ <li>{{event("dragover")}}</li>
+ <li>{{event("dragenter")}}</li>
+ <li>{{event("dragleave")}}</li>
+ <li>{{event("dragexit")}}</li>
+ <li>{{event("drop")}}</li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/web/api/document/dragstart_event/index.html b/files/fr/web/api/document/dragstart_event/index.html
new file mode 100644
index 0000000000..fb43328e8b
--- /dev/null
+++ b/files/fr/web/api/document/dragstart_event/index.html
@@ -0,0 +1,315 @@
+---
+title: dragstart
+slug: Web/API/Document/dragstart_event
+translation_of: Web/API/Document/dragstart_event
+---
+<p>L'événement <strong>dragstart </strong>est déclenché lorsque l'utilisateur glisse un élément ou une sélection de texte.</p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="new" href="https://developer.mozilla.org/fr/docs/Web/API/DragEvent" title="Cette documentation n'a pas encore été rédigée, vous pouvez aider en contribuant !"><code>DragEvent</code></a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Oui</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Oui</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("Document")}}, {{domxref("Element")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Initie l'opération de glisser-déposer</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td>
+   <td>The element that was underneath the element being dragged.</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event normally bubbles or not</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event is cancellable or not?</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td>
+   <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>0.</td>
+  </tr>
+  <tr>
+   <td><code>dataTransfer</code></td>
+   <td>DataTransfer</td>
+   <td>The data that underlies a drag-and-drop operation, known as the <a href="/en-US/docs/Web/API/DataTransfer">drag data store</a>. Protected mode.</td>
+  </tr>
+  <tr>
+   <td><code>currentTarget</code> {{readonlyInline}}</td>
+   <td>EventTarget</td>
+   <td>The node that had the event listener attached.</td>
+  </tr>
+  <tr>
+   <td><code>relatedTarget</code> {{readonlyInline}}</td>
+   <td>EventTarget</td>
+   <td>For <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> and <code>mouseleave</code> events: the target of the complementary event (the <code>mouseleave</code> target in the case of a <code>mouseenter</code> event). <code>null</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>screenX</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The X coordinate of the mouse pointer in global (screen) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>screenY</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The Y coordinate of the mouse pointer in global (screen) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>clientX</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The X coordinate of the mouse pointer in local (DOM content) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>clientY</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The Y coordinate of the mouse pointer in local (DOM content) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>button</code> {{readonlyInline}}</td>
+   <td>unsigned short</td>
+   <td>The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.</td>
+  </tr>
+  <tr>
+   <td><code>buttons</code> {{readonlyInline}}</td>
+   <td>unsigned short</td>
+   <td>The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">More info</a>.</td>
+  </tr>
+  <tr>
+   <td><code>mozPressure</code> {{readonlyInline}}</td>
+   <td>float</td>
+   <td>The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).</td>
+  </tr>
+  <tr>
+   <td><code>ctrlKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>shiftKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>altKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>metaKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemple：dropzone">Exemple：dropzone</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">&lt;div class="dropzone"&gt;
+  &lt;div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)"&gt;
+    This div is draggable
+  &lt;/div&gt;
+&lt;/div&gt;
+&lt;div class="dropzone"&gt;&lt;/div&gt;
+&lt;div class="dropzone"&gt;&lt;/div&gt;
+&lt;div class="dropzone"&gt;&lt;/div&gt;
+</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">  #draggable {
+    width: 200px;
+    height: 20px;
+    text-align: center;
+    background: white;
+  }
+
+  .dropzone {
+    width: 200px;
+    height: 20px;
+    background: blueviolet;
+    margin-bottom: 10px;
+    padding: 10px;
+  }
+</pre>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js">  var dragged;
+
+  /* Les événements sont déclenchés sur les objets glissables */
+  document.addEventListener("drag", function( event ) {
+
+  }, false);
+
+  document.addEventListener("dragstart", function( event ) {
+      // Stocke une référence sur l'objet glissable
+      dragged = event.target;
+      // transparence 50%
+      event.target.style.opacity = .5;
+  }, false);
+
+  document.addEventListener("dragend", function( event ) {
+      // reset de la transparence
+      event.target.style.opacity = "";
+  }, false);
+
+  /* Les événements sont déclenchés sur les cibles du drop */
+  document.addEventListener("dragover", function( event ) {
+      // Empêche default d'autoriser le drop
+      event.preventDefault();
+  }, false);
+
+  document.addEventListener("dragenter", function( event ) {
+      // Met en surbrillance la cible de drop potentielle lorsque l'élément glissable y entre
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "purple";
+      }
+
+  }, false);
+
+  document.addEventListener("dragleave", function( event ) {
+      // reset de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "";
+      }
+
+  }, false);
+
+  document.addEventListener("drop", function( event ) {
+      // Empêche l'action par défaut (ouvrir comme lien pour certains éléments)
+      event.preventDefault();
+      // Déplace l'élément traîné vers la cible du drop sélectionnée
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "";
+          dragged.parentNode.removeChild( dragged );
+          event.target.appendChild( dragged );
+      }
+
+  }, false);</pre>
+
+<p>{{ EmbedLiveSample('Example：dropzone') }}</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("HTML WHATWG", "interaction.html#dndevents", "dragstart")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.1", "editing.html#dndevents", "dragstart")}}</td>
+   <td>{{Spec2("HTML5.1")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilités_navigateur">Compatibilités navigateur</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Navigateur</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>4</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>10</td>
+   <td>12</td>
+   <td>3.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Navigateur</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatIE("10")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{event("drag")}}</li>
+ <li>{{event("dragstart")}}</li>
+ <li>{{event("dragend")}}</li>
+ <li>{{event("dragover")}}</li>
+ <li>{{event("dragenter")}}</li>
+ <li>{{event("dragleave")}}</li>
+ <li>{{event("dragexit")}}</li>
+ <li>{{event("drop")}}</li>
+</ul>
diff --git a/files/fr/web/api/document/drop_event/index.html b/files/fr/web/api/document/drop_event/index.html
new file mode 100644
index 0000000000..a67eb0684b
--- /dev/null
+++ b/files/fr/web/api/document/drop_event/index.html
@@ -0,0 +1,313 @@
+---
+title: drop
+slug: Web/API/Document/drop_event
+translation_of: Web/API/Document/drop_event
+---
+<div>{{APIRef}}</div>
+
+<p>L'événement <strong>drop </strong>est déclenché lorsqu'un élément ou une sélection de texte est déposé sur une cible de dépôt valide.</p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="new" href="https://developer.mozilla.org/fr/docs/Web/API/DragEvent" title="Cette documentation n'a pas encore été rédigée, vous pouvez aider en contribuant !"><code>DragEvent</code></a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Oui</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Oui</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;"><a href="https://developer.mozilla.org/fr/docs/Web/API/Document" title="Toute page web chargée dans un navigateur web a son propre objet document. Cet objet sert de point d'entrée au contenu de la page et apporte des fonctions générales au document."><code>Document</code></a>, <a href="https://developer.mozilla.org/fr/docs/Web/API/Element" title="Ce chapitre fournit une brève référence des méthodes, propriétés et évènements généraux disponibles pour la plupart des éléments HTML et XML au sein du DOM des navigateurs utilisant Gecko."><code>Element</code></a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Varie</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td>
+   <td>The element that was underneath the element being dragged.</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event normally bubbles or not</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event is cancellable or not?</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td>
+   <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>0.</td>
+  </tr>
+  <tr>
+   <td><code>dataTransfer</code></td>
+   <td>DataTransfer</td>
+   <td>The data that underlies a drag-and-drop operation, known as the <a href="/en-US/docs/Web/API/DataTransfer">drag data store</a>. Protected mode.</td>
+  </tr>
+  <tr>
+   <td><code>currentTarget</code> {{readonlyInline}}</td>
+   <td>EventTarget</td>
+   <td>The node that had the event listener attached.</td>
+  </tr>
+  <tr>
+   <td><code>relatedTarget</code> {{readonlyInline}}</td>
+   <td>EventTarget</td>
+   <td>For <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> and <code>mouseleave</code> events: the target of the complementary event (the <code>mouseleave</code> target in the case of a <code>mouseenter</code> event). <code>null</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>screenX</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The X coordinate of the mouse pointer in global (screen) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>screenY</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The Y coordinate of the mouse pointer in global (screen) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>clientX</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The X coordinate of the mouse pointer in local (DOM content) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>clientY</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The Y coordinate of the mouse pointer in local (DOM content) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>button</code> {{readonlyInline}}</td>
+   <td>unsigned short</td>
+   <td>The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.</td>
+  </tr>
+  <tr>
+   <td><code>buttons</code> {{readonlyInline}}</td>
+   <td>unsigned short</td>
+   <td>The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">More info</a>.</td>
+  </tr>
+  <tr>
+   <td><code>mozPressure</code> {{readonlyInline}}</td>
+   <td>float</td>
+   <td>The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).</td>
+  </tr>
+  <tr>
+   <td><code>ctrlKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>shiftKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>altKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>metaKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="operator token">&lt;</span>div <span class="keyword token">class</span><span class="operator token">=</span><span class="string token">"dropzone"</span><span class="operator token">&gt;</span>
+  <span class="operator token">&lt;</span>div id<span class="operator token">=</span><span class="string token">"draggable"</span> draggable<span class="operator token">=</span><span class="string token">"true"</span> ondragstart<span class="operator token">=</span><span class="string token">"event.dataTransfer.setData('text/plain',null)"</span><span class="operator token">&gt;</span>
+    Cette div peut être glissée
+  <span class="operator token">&lt;</span><span class="operator token">/</span>div<span class="operator token">&gt;</span>
+<span class="operator token">&lt;</span><span class="operator token">/</span>div<span class="operator token">&gt;</span>
+<span class="operator token">&lt;</span>div <span class="keyword token">class</span><span class="operator token">=</span><span class="string token">"dropzone"</span><span class="operator token">&gt;</span><span class="operator token">&lt;</span><span class="operator token">/</span>div<span class="operator token">&gt;</span>
+<span class="operator token">&lt;</span>div <span class="keyword token">class</span><span class="operator token">=</span><span class="string token">"dropzone"</span><span class="operator token">&gt;</span><span class="operator token">&lt;</span><span class="operator token">/</span>div<span class="operator token">&gt;</span>
+<span class="operator token">&lt;</span>div <span class="keyword token">class</span><span class="operator token">=</span><span class="string token">"dropzone"</span><span class="operator token">&gt;</span><span class="operator token">&lt;</span><span class="operator token">/</span>div<span class="operator token">&gt;</span>
+
+<span class="operator token">&lt;</span>style<span class="operator token">&gt;</span>
+  #draggable <span class="punctuation token">{</span>
+    width<span class="punctuation token">:</span> 200px<span class="punctuation token">;</span>
+    height<span class="punctuation token">:</span> 20px<span class="punctuation token">;</span>
+    text<span class="operator token">-</span>align<span class="punctuation token">:</span> center<span class="punctuation token">;</span>
+    background<span class="punctuation token">:</span> white<span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+
+  <span class="punctuation token">.</span>dropzone <span class="punctuation token">{</span>
+    width<span class="punctuation token">:</span> 200px<span class="punctuation token">;</span>
+    height<span class="punctuation token">:</span> 20px<span class="punctuation token">;</span>
+    background<span class="punctuation token">:</span> blueviolet<span class="punctuation token">;</span>
+    margin<span class="operator token">-</span>bottom<span class="punctuation token">:</span> 10px<span class="punctuation token">;</span>
+    padding<span class="punctuation token">:</span> 10px<span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+<span class="operator token">&lt;</span><span class="operator token">/</span>style<span class="operator token">&gt;</span>
+
+<span class="operator token">&lt;</span>script<span class="operator token">&gt;</span>
+  <span class="keyword token">var</span> dragged<span class="punctuation token">;</span>
+
+  <span class="comment token">/* Les événements sont déclenchés sur les objets glissables */</span>
+  document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"drag"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span> event <span class="punctuation token">)</span> <span class="punctuation token">{</span>
+
+  <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"dragstart"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span> event <span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="comment token">// Stocke une référence sur l'objet glissable</span>
+      dragged <span class="operator token">=</span> event<span class="punctuation token">.</span>target<span class="punctuation token">;</span>
+      <span class="comment token">// transparence 50%</span>
+      event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>style<span class="punctuation token">.</span>opacity <span class="operator token">=</span> <span class="punctuation token">.</span><span class="number token">5</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"dragend"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span> event <span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="comment token">// réinitialisation de la transparence</span>
+      event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>style<span class="punctuation token">.</span>opacity <span class="operator token">=</span> <span class="string token">""</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="comment token">/* Les événements sont déclenchés sur les cibles du drop */</span>
+  document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"dragover"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span> event <span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="comment token">// Empêche le comportement par défaut afin d'autoriser le drop</span>
+      event<span class="punctuation token">.</span><span class="function token">preventDefault</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="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"dragenter"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span> event <span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="comment token">// Met en surbrillance la cible de drop potentielle lorsque l'élément glissable y entre</span>
+      <span class="keyword token">if</span> <span class="punctuation token">(</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>className <span class="operator token">==</span> <span class="string token">"dropzone"</span> <span class="punctuation token">)</span> <span class="punctuation token">{</span>
+          event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>style<span class="punctuation token">.</span>background <span class="operator token">=</span> <span class="string token">"purple"</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span>
+
+  <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"dragleave"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span> event <span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="comment token">// réinitialisation de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent </span>
+      <span class="keyword token">if</span> <span class="punctuation token">(</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>className <span class="operator token">==</span> <span class="string token">"dropzone"</span> <span class="punctuation token">)</span> <span class="punctuation token">{</span>
+          event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>style<span class="punctuation token">.</span>background <span class="operator token">=</span> <span class="string token">""</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span>
+
+  <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"drop"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span> event <span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="comment token">// Empêche l'action par défaut (ouvrir comme lien pour certains éléments)</span>
+      event<span class="punctuation token">.</span><span class="function token">preventDefault</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="comment token">// Déplace l'élément traîné vers la cible du drop sélectionnée</span>
+      <span class="keyword token">if</span> <span class="punctuation token">(</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>className <span class="operator token">==</span> <span class="string token">"dropzone"</span> <span class="punctuation token">)</span> <span class="punctuation token">{</span>
+          event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>style<span class="punctuation token">.</span>background <span class="operator token">=</span> <span class="string token">""</span><span class="punctuation token">;</span>
+          dragged<span class="punctuation token">.</span>parentNode<span class="punctuation token">.</span><span class="function token">removeChild</span><span class="punctuation token">(</span> dragged <span class="punctuation token">)</span><span class="punctuation token">;</span>
+          event<span class="punctuation token">.</span>target<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span> dragged <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="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="operator token">&lt;</span><span class="operator token">/</span>script<span class="operator token">&gt;</span></code></pre>
+
+<p> </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("HTML WHATWG", "interaction.html#dndevents", "drop event")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.1", "editing.html#dndevents", "drop event")}}</td>
+   <td>{{Spec2("HTML5.1")}}</td>
+   <td>Première définition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilités_navigateur">Compatibilités navigateur</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Navigateur</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>4</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>10</td>
+   <td>12</td>
+   <td>3.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Navigateur</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatIE("10")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{event("drag")}}</li>
+ <li>{{event("dragstart")}}</li>
+ <li>{{event("dragend")}}</li>
+ <li>{{event("dragover")}}</li>
+ <li>{{event("dragenter")}}</li>
+ <li>{{event("dragleave")}}</li>
+ <li>{{event("dragexit")}}</li>
+ <li>{{event("drop")}}</li>
+</ul>
diff --git a/files/fr/web/api/document/elementfrompoint/index.html b/files/fr/web/api/document/elementfrompoint/index.html
new file mode 100644
index 0000000000..d715bfad7a
--- /dev/null
+++ b/files/fr/web/api/document/elementfrompoint/index.html
@@ -0,0 +1,52 @@
+---
+title: document.elementFromPoint
+slug: Web/API/Document/elementFromPoint
+tags:
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/DocumentOrShadowRoot/elementFromPoint
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p>Renvoie l'élément visible au point donné, spécifié relativement au point supérieur gauche visible dans le document.</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<pre class="eval"><i>element</i> = document.elementFromPoint(<i>x</i>,<i>y</i>);
+</pre>
+<p>where</p>
+<ul>
+ <li><code>element</code> est un objet <a href="fr/DOM/element">element</a>.</li>
+ <li><code>x</code> et <code>y</code> spécifient les coordonnées à vérifier.</li>
+</ul>
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+<pre>&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;Exemple d'utilisation d'elementFromPoint&lt;/title&gt;
+
+&lt;script type="text/javascript"&gt;
+
+function changeColor(newColor)
+{
+ elem = document.elementFromPoint(2, 2);
+ elem.style.color = newColor;
+}
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+&lt;p id="para1"&gt;Un peu de texte ici&lt;/p&gt;
+&lt;button onclick="changeColor('blue');"&gt;bleu&lt;/button&gt;
+&lt;button onclick="changeColor('red');"&gt;rouge&lt;/button&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+<h3 id="Notes" name="Notes">Notes</h3>
+<p>Si l'élément au point spécifié appartient à un autre document (par exemple, les sous-document d'un iframe), l'élément dans le DOM du document appelant (l'iframe lui-même) est renvoyé. Si l'élément au point donné est anonyme ou du contenu généré par XBL, comme la barre de défilement d'une boîte de texte, le premier élément parent non anonyme (par exemple, la boîte de texte) est renvoyé.</p>
+<p>Si le point spécifié est en dehors de la portion visible du document ou que l'une ou l'autre des coordonnées est négative, le résultat est <code>NULL</code>.</p>
+<p>{{ Note("Les appelants qui sont des documents XUL devraient attendre que l\'évènement <code>onload</code> se soit déclenché avant d\'appeler cette méthode.") }}</p>
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+<ul>
+ <li>Spécification préliminaire : <code><a class="external" href="http://dev.w3.org/csswg/cssom/#documentlayout-elementfrompoint">elementFromPoint</a></code></li>
+</ul>
+<p> </p>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "en": "en/DOM/document.elementFromPoint", "es": "es/DOM/document.elementFromPoint", "ja": "ja/DOM/document.elementFromPoint" } ) }}</p>
diff --git a/files/fr/web/api/document/enablestylesheetsforset/index.html b/files/fr/web/api/document/enablestylesheetsforset/index.html
new file mode 100644
index 0000000000..d6fb8bc63f
--- /dev/null
+++ b/files/fr/web/api/document/enablestylesheetsforset/index.html
@@ -0,0 +1,59 @@
+---
+title: Document.enableStyleSheetsForSet()
+slug: Web/API/Document/enableStyleSheetsForSet
+tags:
+  - API
+  - Activation
+  - CSS
+  - DOM
+  - Feuilles de styles
+  - Méthode
+translation_of: Web/API/Document/enableStyleSheetsForSet
+---
+<p>{{ APIRef("DOM") }}{{ gecko_minversion_header("1.9") }}</p>
+
+<p>Active les feuilles de styles correspondant au nom spécifié dans l'ensemble de feuilles de styles en cours et désactive toutes les autres (à l'exception de celles sans titre qui sont toujours activées).</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="eval">document.enableStyleSheetsForSet(<em>name</em>)
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Le nom des feuilles de styles à activer. Toutes les feuilles de styles dont le titre correspond à ce nom seront activées, tandis que toutes celles possédant un autre titre seront désactivées. Spécifiez une chaîne vide dans le paramètre <code>name</code> pour supprimer toutes les feuilles de styles alternatives et préférées (mais pas les feuilles de styles persistantes, c'est-à-dire, celles sans attribut <code>title</code> (<em>titre</em>)).</dd>
+</dl>
+
+<h2 id="Notes">Notes</h2>
+
+<ul>
+ <li>Les correspondances de titre sont sensibles à la casse.</li>
+ <li>L'appel de cette méthode avec un <code>name</code>  <code>null</code> n'a pas d'effet ; si vous voulez désactiver toutes les feuilles de styles alternatives et préférées, vous <strong>devez</strong> utiliser "",  la chaîne vide.</li>
+ <li>Les feuilles de styles qui n'ont pas de titre ne sont jamais affectées par cette méthode.</li>
+ <li>Cette méthode n'affecte jamais les valeurs de {{ domxref("document.lastStyleSheetSet") }} ou {{ domxref("document.preferredStyleSheetSet") }}.</li>
+</ul>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre>document.enableStyleSheetsForSet("Some style sheet set name");
+</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<ul>
+ <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets" title="http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets">HTML5 : Alternate Style Sheets</a></li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{ domxref("Stylesheet") }}</li>
+ <li>{{ domxref("document.styleSheets") }}</li>
+ <li>{{ domxref("document.lastStyleSheetSet") }}</li>
+ <li>{{ domxref("document.preferredStyleSheetSet") }}</li>
+ <li>{{ domxref("document.selectedStyleSheetSet") }}</li>
+ <li>{{ domxref("document.enableStyleSheetsForSet()") }}</li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Archive/Standards_du_Web/Utiliser_des_titres_corrects_avec_des_feuilles_de_styles_externes" title="en/Correctly Using Titles With External Stylesheets">Utiliser des titres corrects avec des feuilles de styles externes</a></li>
+</ul>
diff --git a/files/fr/web/api/document/evaluate/index.html b/files/fr/web/api/document/evaluate/index.html
new file mode 100644
index 0000000000..51130c63be
--- /dev/null
+++ b/files/fr/web/api/document/evaluate/index.html
@@ -0,0 +1,163 @@
+---
+title: document.evaluate
+slug: Web/API/Document/evaluate
+tags:
+  - API
+  - DOM
+  - Méthode
+  - Reference
+  - XPath
+translation_of: Web/API/Document/evaluate
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p>La méthode <code><strong>evaluate()</strong></code> renvoie un {{domxref("XPathResult")}} basé sur une expression <a href="https://developer.mozilla.org/fr/docs/XPath" title="XPath">XPath</a> et d'autres paramètres donnés.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var xpathResult = document.evaluate(
+ xpathExpression,
+ contextNode,
+ namespaceResolver,
+ resultType,
+ result
+);</pre>
+
+<ul>
+ <li><code>xpathExpression</code> est une chaîne de caractères représentant le XPath à évaluer.</li>
+ <li><code>contextNode</code> spécifie le noeud de contexte pour la requête (voir <a class="external external-icon" href="http://www.w3.org/TR/xpath" rel="freelink">XPath specification</a>) . Il est courant de transmettre un document en tant que nœud de contexte.</li>
+ <li><code>namespaceResolver</code> est une fonction qui recevra tous les préfixes d'espace de noms et devrait renvoyer une chaîne représentant l'URI de l'espace de noms associé à ce préfixe. Il sera utilisé pour résoudre les préfixes dans le XPath lui-même, afin qu'ils puissent être mis en correspondance avec le document. <code>null</code> est commun pour les documents HTML ou lorsque aucun préfixe d'espace de noms n'est utilisé.</li>
+ <li><code>resultType</code> est un nombre entier qui correspond au type de résultat <code>XPathResult</code> à retourner. Utilisez des <a href="#Types_de_resultats">propriétés de constantes nommées</a>, comme <code>XPathResult.ANY_TYPE</code>  du constructeur de XPathResult , lequel correspond à un nombre entier compris entre 0 et 9.</li>
+ <li><code>result</code> est un <code>XPathResult</code> existant à utiliser pour les résultats.  <code>null</code> est le plus commun et va créer un nouveau XPathResult</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"> var  headings  =  document .  evaluate  ( " / html / body //h2", document, null, XPathResult.ANY_TYPE, null);
+ /* Cherche le document pour tout élément h2.
+ * Le résultat sera probablement un itérateur de noeuds non ordonné. */
+ var  thisHeading  =  headings .  iterateNext  (  )  ;
+ var  alertText  =   "Level 2 headings in this document are:\n"  ;
+ while   ( thisHeading )   {
+  alertText  +  =  thisHeading . textContent  +   "\n"  ;
+  thisHeading  =  headings .  iterateNext  (  )  ;
+ }
+ alert  ( alertText )  ;   // Alerte le texte de tout élément h2 </code></pre>
+
+<p>Note : dans l'exemple ci-dessus, un XPath plus verbeux est préféré aux raccourcis communs tels que <code>//h2</code>. Généralement, des sélecteurs XPath plus spécifiques, comme dans l'exemple ci-dessus, améliorent de façon significative les performances, en particulier pour les documents très volumineux. C'est parce que l'évaluation de la requête ne perd pas de temps à visiter des noeuds inutiles. L'utilisation de // est généralement lente car elle visite tous les nœuds de la racine et tous les sous-nœuds à la recherche de correspondances possibles.</p>
+
+<p>Une optimisation supplémentaire peut être obtenue en utilisant soigneusement le paramètre de contexte. Par exemple, si vous savez que le contenu que vous recherchez se trouve quelque part dans la balise body, vous pouvez utiliser ceci :</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">document .  evaluate  ( " .  //h2", document.body, null, XPathResult.ANY_TYPE, null); </code></pre>
+
+<p>Remarquez ci-dessus,  <code>document.body</code> a été utilisé comme contexte plutôt que comme document, de sorte que le XPath commence à partir de l'élément body. (Dans cet exemple, le <code>"."</code> est important pour indiquer que l'interrogation doit commencer à partir du noeud contextuel, document.body . Si le "." est omis (en quittant <code>//h2</code>), la requête démarrera à partir du noeud racine ( <code>html</code>) ce qui serait plus inutile.)</p>
+
+<p>Voir <a href="https://developer.mozilla.org/fr/docs/Introduction_%C3%A0_l'utilisation_de_XPath_avec_JavaScript" title="Introduction to using XPath in JavaScript">Introduction à l'utilisation de XPath avec JavaScript</a>  pour plus d'informations.</p>
+
+<h2 id="Notes">Notes</h2>
+
+<ul>
+ <li>Les expressions XPath peuvent être évaluées sur les documents HTML et XML.</li>
+ <li>Lors de l'utilisation de document.evaluate() dans FF2 ; dans FF3, il faut utiliser someXMLDoc.evaluate() si l'on évalue quelque chose d'autre que le document actuel.</li>
+</ul>
+
+<h2 id="Types_de_résultats">Types de résultats</h2>
+
+<p>Ce sont des valeurs prises en charge pour le paramètre <code>resultType</code> de la méthode <code>evaluate</code> :</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Type de résultat</td>
+   <td class="header">Valeur</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>ANY_TYPE</code></td>
+   <td>0</td>
+   <td>Quel que soit le type, résulte naturellement de l'expression donnée.</td>
+  </tr>
+  <tr>
+   <td><code>NUMBER_TYPE</code></td>
+   <td>1</td>
+   <td>Un ensemble de résultats contenant un seul nombre. Utile, par exemple, dans une expression XPath utilisant la fonction count().</td>
+  </tr>
+  <tr>
+   <td><code>STRING_TYPE</code></td>
+   <td>2</td>
+   <td>Un ensemble de résultats contenant une seule chaîne de caractères.</td>
+  </tr>
+  <tr>
+   <td><code>BOOLEAN_TYPE</code></td>
+   <td>3</td>
+   <td>Un ensemble de résultats contenant une seule valeur booléenne. Utile pour, par exemple, une expression XPath utilisant la fonction not().</td>
+  </tr>
+  <tr>
+   <td><code>UNORDERED_NODE_ITERATOR_TYPE</code></td>
+   <td>4</td>
+   <td>Un ensemble de résultats contenant tous les nœuds correspondant à l'expression. Les nœuds de cet ensemble ne sont pas nécessairement dans le même ordre que celui de leur apparition dans le document.</td>
+  </tr>
+  <tr>
+   <td><code>ORDERED_NODE_ITERATOR_TYPE</code></td>
+   <td>5</td>
+   <td>Un ensemble de résultats contenant tous les noeuds correspondant à l'expression. Les nœuds de cet ensemble sont dans le même ordre que celui de leur apparition dans le document .</td>
+  </tr>
+  <tr>
+   <td><code>UNORDERED_NODE_SNAPSHOT_TYPE</code></td>
+   <td>6</td>
+   <td>Un ensemble de résultats contenant des instantanés de tous les nœuds correspondant à l'expression. Les nœuds de cet ensemble ne sont pas nécessairement dans le même ordre que celui de leur apparition dans le document .</td>
+  </tr>
+  <tr>
+   <td><code>ORDERED_NODE_SNAPSHOT_TYPE</code></td>
+   <td>7</td>
+   <td>Un ensemble de résultats contenant des instantanés de tous les nœuds correspondant à l'expression. Les nœuds de cet ensemble sont dans le même ordre que celui de leur apparition dans le document .</td>
+  </tr>
+  <tr>
+   <td><code>ANY_UNORDERED_NODE_TYPE</code></td>
+   <td>8</td>
+   <td>Un ensemble de résultats contenant un seul nœud correspondant à l'expression. Le noeud n'est pas nécessairement le premier noeud du document qui correspond à l'expression.</td>
+  </tr>
+  <tr>
+   <td><code>FIRST_ORDERED_NODE_TYPE</code></td>
+   <td>9</td>
+   <td>Un ensemble de résultats contenant le premier nœud du document qui correspond à l'expression.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Les résultats des types <code>NODE_ITERATOR</code> contiennent des références aux noeuds du document. La modification d'un nœud invalidera l'itérateur. Après avoir modifié un nœud, tenter de parcourir les résultats entraînera une erreur.</p>
+
+<p>Les résultats des types <code>NODE_SNAPSHOT</code> sont des instantanés, qui sont essentiellement des listes de nœuds correspondants. Vous pouvez apporter des modifications au document en modifiant les nœuds de capture instantanée. La modification du document n'invalide pas l'instantané. Toutefois, si le document est modifié, l'instantané peut ne pas correspondre à l'état actuel du document, car les nœuds peuvent avoir été déplacés, modifiés, ajoutés ou supprimés.</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("DOM3 XPath", "xpath.html#XPathEvaluator-evaluate", "Document.evaluate")}}</td>
+   <td>{{Spec2("DOM3 XPath")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Document.evaluate")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document/createExpression" title="DOM/document.createExpression">DOM : document.createExpression</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Add-ons/Code_snippets/XPath" title="Code_snippets/XPath">XPath Code Snippets</a></li>
+ <li><a href="http://codepen.io/johan/full/ckFgn">Vérifier le support du navigateur</a></li>
+</ul>
diff --git a/files/fr/web/api/document/execcommand/index.html b/files/fr/web/api/document/execcommand/index.html
new file mode 100644
index 0000000000..0828ac309b
--- /dev/null
+++ b/files/fr/web/api/document/execcommand/index.html
@@ -0,0 +1,397 @@
+---
+title: document.execCommand
+slug: Web/API/Document/execCommand
+tags:
+  - API
+  - Commandes
+  - DOM
+  - Exécution
+  - Méthodes
+translation_of: Web/API/Document/execCommand
+---
+<p>{{ApiRef("DOM")}}<br>
+ Lorsqu'un document HTML est passé à <code><a href="https://developer.mozilla.org/fr/docs/Web/API/Document/designMode">designMode</a></code>, l'objet document expose la méthode <strong><code>execCommand</code></strong> qui permet d'exécuter des commandes pour manipuler le contenu de la zone modifiable, telle que les éléments <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/input">form inputs</a> ou <code><a href="https://developer.mozilla.org/fr/docs/Web/HTML/Global_attributes/contenteditable">contentEditable</a></code> .</p>
+
+<p>La plupart des commandes affectent la <a href="https://developer.mozilla.org/fr/docs/Web/API/Selection">sélection</a> du document (gras, italique, etc.), tandis que d'autres ajoutent de nouveaux éléments (ajout d'un lien) ou affectent une ligne entière (indentation). Lorsque vous utilisez <code>contentEditable</code>, l'appel <code>execCommand()</code> affectera l'élément modifiable actuellement actif.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre><em>bool</em> = document.execCommand(<em>aCommandName</em>, <em>aShowDefaultUI</em>, <em>aValueArgument</em>)</pre>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Un {{jsxref('Boolean')}} qui est à <code>false</code> <em>(faux)</em> si la commande n'est pas supportée ou désactivée.</p>
+
+<div class="note">
+<p><strong> </strong><span id="result_box" lang="fr"><span><strong>Note :</strong> Ne renvoie <code>true</code> <em>(vrai)</em> que dans le contexte d'une interaction utilisateur. Ne pas utiliser la valeur de retour pour vérifier le support du navigateur avant d'appeler une commande.</span></span></p>
+</div>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p><code><strong>aCommandName</strong></code><br>
+ {{domxref("DOMString")}} spécifie le nom de la commande à exécuter ​​​​​​. Voir {{anch("Commands")}} pour la liste des commandes possibles .</p>
+
+<p><strong><code>aShowDefaultUI</code></strong><br>
+ Un {{jsxref("Boolean")}} indiquant si l'interface utilisateur par défaut doit être affichée. Ceci n'est pas implémenté par Mozilla.</p>
+
+<p><strong><code>aValueArgument</code></strong><br>
+ Pour les commandes qui nécessitent un argument , il s'agit d'une {{domxref ("DOMString")}} <em>(chaîne de caractères)</em> fournissant ces informations. Par exemple, <code>insertImage</code> requière l'URL de l'image à insérer. Spécifiez <code>null </code>si aucun argument n'est nécessaire.</p>
+
+<h3 id="Commandes"><a id="Commands" name="Commands">Commandes</a></h3>
+
+<p><code><strong>backColor</strong></code><br>
+ Change la couleur d'arrière-plan du document. En mode <code>styleWithCss</code>, il affecte plutôt la couleur de fond du bloc contenant. Cela nécessite une chaîne de valeurs {{cssxref ("&lt;color&gt;")}} pour être transmise en tant qu'argument de valeur. Notez que Internet Explorer utilise cette option pour définir la couleur d'arrière-plan du texte.</p>
+
+<p><code><strong>bold</strong></code><br>
+ Ajoute ou enlève l'affichage <code>bold</code> de la sélection ou au point d'insertion. Internet Explorer utilise la balise {{HTMLElement("strong")}} au lieu de {{HTMLElement("b")}}.</p>
+
+<p><strong><code>contentReadOnly</code></strong><br>
+ Rend le  contenu du document en lecture seule ou modifiable. Cela nécessite qu'un booléen <code>true</code> / <code>false</code> soit transmis en tant qu'argument de valeur. (Non pris en charge par Internet Explorer.)</p>
+
+<p><strong><code>copy</code></strong><br>
+ Copie la sélection courante dans le presse papier. Les conditions d'activation de ce comportement varient d'un navigateur à l'autre et ont évolué au fil du temps. Vérifiez la table de compatibilité pour déterminer si vous pouvez l'utiliser dans votre cas.</p>
+
+<p><code><strong>createLink</strong></code><br>
+ Crée un lien d'ancrage à partir de la sélection, uniquement s'il existe une sélection. Cela nécessite que la chaîne URI HREF soit transmise en tant qu'argument de valeur. L'URI doit contenir au moins un caractère unique, qui peut être un espace blanc. (Internet Explorer créera un lien avec une valeur URI <code>null</code>.)</p>
+
+<p><code><strong>cut</strong></code><br>
+ Coupe et copie la sélection courante dans le presse papier. Les conditions d'activation de ce comportement varient d'un navigateur à l'autre et ont évolué au fil du temps. Vérifiez la <a href="#Compatibilité des navigateurs">table de compatibilité</a> pour déterminer si vous pouvez l'utiliser dans votre cas.</p>
+
+<p><code><strong>decreaseFontSize</strong></code><br>
+ Ajoute une balise {{HTMLElement("small")}} autour de la sélection ou du point d'insertion (Non pris en charge par Internet Explorer).</p>
+
+<dl>
+ <dt><code>defaultParagraphSeparator</code></dt>
+ <dd>Change le séparateur de paragraphes utilisé lorsque de nouveaux paragraphes sont créés dans les zones de textes modifiables. Voir <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Contenu_editable#Differences_in_markup_generation">Contenu éditable</a> pour plus de détails.</dd>
+</dl>
+
+<p><code><strong>delete</strong></code><br>
+ Supprime la sélection courante</p>
+
+<p><strong><code>enableInlineTableEditing</code></strong><br>
+ Active ou désactive les commandes d'insertion et de suppression des lignes et des colonnes du tableau. (Non pris en charge par Internet Explorer.)</p>
+
+<p><code><strong>enableObjectResizing</strong></code><br>
+ Active ou désactive les poignées de redimensionnement des images et autres objets redimensionnables. (Non pris en charge par Internet Explorer.)</p>
+
+<p><code><strong>fontName</strong></code><br>
+ Modifie le nom de police de la sélection ou du point d'insertion. Cela nécessite une chaîne de nom de police (tel qu'<code>"Arial"</code>) à transmettre comme argument de valeur.</p>
+
+<p><code><strong>fontSize</strong></code><br>
+ Modifie la taille de police pour la sélection ou au point d'insertion. Cela nécessite que la taille d'une police HTML (<code>1</code>-<code>7</code>) soit transmise en tant qu'argument de valeur.</p>
+
+<p><code><strong>foreColor</strong></code><br>
+ Modifie une couleur de police pour la sélection ou au point d'insertion. Cela nécessite qu'une chaîne de valeurs de couleur soit transmise en tant qu'argument de valeur.</p>
+
+<p><code><strong>formatBlock</strong></code><br>
+ Ajoute une balise HTML style bloc autour de la ligne contenant la sélection en cours, en remplaçant l'élément bloc contenant la ligne si elle existe (dans Firefox, BLOCKQUOTE est l'exception - il enroule tout élément bloc contenant). Nécessite la saisie d'une chaîne de nom d'étiquette comme argument de valeur. Pratiquement toutes les étiquettes de style de bloc peuvent être utilisées (par exemple "{{HTMLElement("h1")}}", "{{HTMLElement("p")}}", "{{HTMLElement("dl")}}", "{{HTMLElement("blockquote")}}"). (Internet Explorer ne prend en charge que les balises de titre <code>H1</code> - <code>H6</code>, <code>ADDRESS</code> et <code>PRE</code>, qui doivent également inclure les délimiteurs de balises &lt;&gt;, tels que <code>"&lt;H1&gt;"</code>.)</p>
+
+<p><code><strong>forwardDelete</strong></code><br>
+ Supprime le caractère avant la position du <a href="http://en.wikipedia.org/wiki/Cursor_%28computers%29">curseur</a>. Il est le même que frapper la touche de suppression.</p>
+
+<p><code><strong>heading</strong></code><br>
+ Ajoute une balise de titre autour d'une ligne de sélection ou d'insertion. Nécessite que la chaîne de nom d'étiquette soit transmise en tant qu'argument de valeur (c'est-à-dire "{{HTMLElement("<code>H1</code>")}}", "{{HTMLElement("<code>H6</code>")}}"). (Non pris en charge par Internet Explorer et Safari.)</p>
+
+<p><code><strong>hiliteColor</strong></code><br>
+ Modifie la couleur d'arrière-plan de la sélection ou du point d'insertion. Nécessite une chaîne de valeurs de couleur à transmettre comme argument de valeur. <code>UseCSS</code> doit être à <code>true</code> (<em>vrai</em>) pour que cela fonctionne. (Non pris en charge par Internet Explorer.)</p>
+
+<p><code><strong>increaseFontSize</strong></code><br>
+ Ajoute une balise {{HTMLElement("big")}} autour de la sélection ou au point d'insertion. (Non pris en charge par Internet Explorer.)</p>
+
+<p><code><strong>indent</strong></code><br>
+ Décale la ligne contenant le point de sélection ou d'insertion. Dans Firefox, si la sélection s'étend sur plusieurs lignes à différents niveaux d'indentation, seules les lignes les moins indentées de la sélection seront indentées.</p>
+
+<p><code><strong>insertBrOnReturn</strong></code><br>
+ Contrôle si la touche Entrée insère une balise br ou divise l'élément de bloc courant en deux. (Non pris en charge par Internet Explorer.)</p>
+
+<p><strong><code>insertHorizontalRule</code></strong><br>
+ Insère une ligne horizontale au point d'insertion. (Supprime la sélection)</p>
+
+<p><code><strong>insertHTML</strong></code><br>
+ Insère une chaîne HTML au point d'insertion (supprime la sélection). Nécessite une chaîne HTML valide à transmettre en tant qu'argument de valeur. (Non pris en charge par Internet Explorer.)</p>
+
+<p><code><strong>insertImage</strong></code><br>
+ Insère une image au point d'insertion (supprime la sélection). Nécessite l'image SRC URI chaîne à passer comme un argument de valeur. L'URI doit contenir au moins un caractère unique, qui peut être un espace blanc. (Internet Explorer créera un lien avec une valeur URI nulle.)</p>
+
+<p><code><strong>insertOrderedList</strong></code><br>
+ Crée une <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/ol">liste ordonnée numérotée</a> pour la sélection ou le point d'insertion.</p>
+
+<p><code><strong>insertUnorderedList</strong></code><br>
+ Crée une <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/ul">liste non triée à puces</a> pour la sélection ou au point d'insertion.</p>
+
+<p><code><strong>insertParagraph</strong></code><br>
+ Insère un <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/p">paragraphe</a> autour de la sélection ou de la ligne en cours. (Internet Explorer insère un paragraphe au point d'insertion et supprime la sélection.)</p>
+
+<p><code><strong>insertText</strong></code><br>
+ Insère le texte brut donné au point d'insertion (supprime la sélection).</p>
+
+<p><code><strong>italic</strong></code><br>
+ Active / désactive l'italique pour la sélection ou le point d'insertion. (Internet Explorer utilise la balise {{HTMLElement("em")}} au lieu de {{HTMLElement("i")}}).</p>
+
+<p><code><strong>justifyCenter</strong></code><br>
+ Centre le point de sélection ou d'insertion.</p>
+
+<p><code><strong>justifyFull</strong></code><br>
+ Justifie le point de sélection ou d'insertion.</p>
+
+<p><code><strong>justifyLeft</strong></code><br>
+ Justifie le point de sélection ou d'insertion à gauche.</p>
+
+<p><code><strong>justifyRight</strong></code><br>
+ Justifie à droite la sélection ou le point d'insertion.</p>
+
+<p><code><strong>outdent</strong></code><br>
+ Augmente la ligne contenant le point de sélection ou d'insertion.</p>
+
+<p><code><strong>paste</strong></code><br>
+ Colle le contenu du Presse-papiers au point d'insertion (remplace la sélection en cours). La fonctionnalité Presse-papiers doit être activée dans le fichier de préférences <em>user.js</em>. Voir [1].</p>
+
+<p><code><strong>redo</strong></code><br>
+ Rétablit la commande d'annulation précédente.</p>
+
+<p><code><strong>removeFormat</strong></code><br>
+ Supprime tout le formatage de la sélection en cours.</p>
+
+<p><code><strong>selectAll</strong></code><br>
+ Sélectionne tout le contenu de la zone modifiable.</p>
+
+<p><code><strong>strikeThrough</strong></code><br>
+ Active ou désactive le barré pour la sélection ou le point d'insertion.</p>
+
+<p><code><strong>subscript</strong></code><br>
+ Active ou désactive l'<a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/sub">élément de souscription</a> sur la sélection ou au point d'insertion.</p>
+
+<p><code><strong>superscript</strong></code><br>
+ Active / désactive l'<a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/sup">élément de mise en exposant</a> pour la sélection ou le point d'insertion.</p>
+
+<p><code><strong>underline</strong></code><br>
+ Active ou désactive l'<a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/u">élément d'annotation non textuelle</a> pour la sélection ou le point d'insertion.</p>
+
+<p><code><strong>undo</strong></code><br>
+ Annule la dernière commande exécutée.</p>
+
+<p><code><strong>unlink</strong></code><br>
+ Supprime l'<a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/a">élément d'ancrage</a> de l'hyperlien sélectionné.</p>
+
+<p><code><strong>useCSS</strong></code><strong> {{Deprecated_inline}}</strong><br>
+ Active / désactive l'utilisation de balises HTML ou CSS pour le balisage généré. Nécessite un argument booléen vrai / faux comme argument de valeur. REMARQUE : Cet argument est logiquement inverse (c.-à-d. utilise <code>false</code> pour utiliser CSS, <code>true</code> pour utiliser HTML). (Non pris en charge par Internet Explorer.) Cela a été obsolète; Utilisez plutôt la commande <code>styleWithCSS</code>.</p>
+
+<p><code><strong>styleWithCSS</strong></code><br>
+ Remplace la commande <code>useCSS</code><em> </em>; argument fonctionne comme prévu, c'est-à-dire <code>true</code> modifie / génère des attributs de <code>style</code> dans le balisage, <code>false</code> génère des éléments de mise en forme.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Un <a href="http://codepen.io/netsi1964/full/QbLLGW/">exemple d'utilisation</a> sur CodePen.</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">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML Editing', '#execcommand()', 'execCommand')}}</td>
+   <td>{{Spec2('HTML Editing')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs"><a id="Compatibilité des navigateurs" name="Compatibilité des navigateurs"></a>Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop" style="display: block;">
+<div id="compat-desktop">
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>insertBrOnReturn</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>copy</code>/<code>cut</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(41)}}</td>
+   <td>9</td>
+   <td>29</td>
+   <td>10</td>
+  </tr>
+  <tr>
+   <td><code>defaultParagraphSeparator</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(55)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>ClearAuthenticationCache</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>6</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>insertBrOnReturn</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>copy</code>/<code>cut</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(41)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>defaultParagraphSeparator</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(55)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>ClearAuthenticationCache</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+    </div>
+     </div>
+
+<div id="compat-mobile" style="display: none;">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>insertBrOnReturn</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>copy</code>/<code>cut</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(43)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(41)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Avant Firefox 41, la capacité du presse-papiers devait être activée dans le fichier de préférences user.js. Voir <a href="https://developer.mozilla.org/fr/docs/Mozilla/Preferences/A_brief_guide_to_Mozilla_preferences">Un bref guide des préférences Mozilla</a> pour plus d'informations. Si la commande n'était pas prise en charge ou activée, <code>execCommand</code> déclenchait une exception au lieu de renvoyer <code>false</code>. Dans Firefox 41 et versions ultérieures, la capacité du presse-papiers est activée par défaut dans n'importe quel gestionnaire d'événements capable de faire apparaître une fenêtre (scripts semi-approuvés), mais aucun contenu web ne peut lire le presse-papier. Les extensions web peuvent <a href="https://developer.mozilla.org/fr/Add-ons/WebExtensions/interagir_avec_le_presse_papier">interagir avec le presse-papier</a>.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("HTMLElement.contentEditable")}}</li>
+ <li>{{domxref("document.designMode")}}</li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Rich-Text_Editing_in_Mozilla">Rich-Text Editing in Mozilla</a></li>
+ <li><a href="https://github.com/guardian/scribe/blob/master/BROWSERINCONSISTENCIES.md">Scribe's "Browser Inconsistencies" documentation</a>  <span class="short_text" id="result_box" lang="fr"><span>avec des bugs liés</span></span> à <code>document.execCommand</code>.{{CompatUnknown}}</li>
+</ul>
diff --git a/files/fr/web/api/document/exitfullscreen/index.html b/files/fr/web/api/document/exitfullscreen/index.html
new file mode 100644
index 0000000000..a5c8172182
--- /dev/null
+++ b/files/fr/web/api/document/exitfullscreen/index.html
@@ -0,0 +1,120 @@
+---
+title: Document.exitFullscreen()
+slug: Web/API/Document/exitFullscreen
+tags:
+  - API
+  - Affichage
+  - DOM
+  - Méthodes
+  - Plein écran
+translation_of: Web/API/Document/exitFullscreen
+---
+<div>{{ApiRef("Fullscreen API")}}</div>
+
+<p>La méthode <code><strong>Document.exitFullscreen()</strong></code> extrait le document du mode plein écran ; elle est utilisée pour inverser les effets d'un appel au mode plein écran réalisé avec la méthode {{domxref("Element.requestFullscreen()")}}.</p>
+
+<div class="note"><strong>Note :</strong> Si un autre élément était précédemment en mode plein écran lorsque l'élément en cours a été placé en mode plein écran, cet élément précédent reprend le mode plein écran. Une "pile" d'éléments en plein écran est maintenue par le navigateur à cette fin.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">document.exitFullscreen();
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">// Click bascule en mode plein écran
+document.onclick = function (event) {
+  if (document.fullscreenElement) {
+    document.exitFullscreen()
+  } else {
+    document.documentElement.requestFullscreen()
+  }
+};</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("Fullscreen", "#dom-document-exitfullscreen", "Document.exitFullscreen()")}}</td>
+   <td>{{Spec2("Fullscreen")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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}}{{property_prefix("-webkit")}}<br>
+    {{CompatChrome(45)}} (unprefixed)</td>
+   <td>{{CompatGeckoDesktop("9.0")}} as <code>mozCancelFullScreen</code><sup>[1]</sup><br>
+    {{CompatGeckoDesktop("47.0")}}<sup>[1]</sup> (behind <code>full-screen-api.unprefix.enabled</code></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>Fonctionnalité</th>
+   <th>Android Webkit</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}}{{property_prefix("-webkit")}}<br>
+    {{CompatChrome(45)}} (unprefixed)</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
+    {{CompatChrome(45)}} (unprefixed)</td>
+   <td>{{CompatGeckoMobile("9.0")}} as <code>mozCancelFullScreen</code><sup>[1]</sup><br>
+    {{CompatGeckoMobile("47.0")}}<sup>[1]</sup> (behind <code>full-screen-api.unprefix.enabled</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] La "pile" du mode plein écran qui permet d'annuler le plein écran pour un élément et de le restaurer pour un élément précédent automatiquement, a été implémentée dans Gecko 11.0 {{geckoRelease("11.0")}}.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/Guide/DOM/Using_full_screen_mode" title="en/DOM/Using full-screen mode">Utiliser le mode plein écran</a></li>
+ <li>{{ domxref("Element.requestFullscreen()") }}</li>
+ <li>{{ domxref("Document.exitFullscreen()") }}</li>
+ <li>{{ domxref("Document.fullscreen") }}</li>
+ <li>{{ domxref("Document.fullscreenElement") }}</li>
+ <li>{{ cssxref(":fullscreen") }}</li>
+ <li>{{ HTMLAttrXRef("allowfullscreen", "iframe") }}</li>
+</ul>
diff --git a/files/fr/web/api/document/exitpointerlock/index.html b/files/fr/web/api/document/exitpointerlock/index.html
new file mode 100644
index 0000000000..3337e00ae7
--- /dev/null
+++ b/files/fr/web/api/document/exitpointerlock/index.html
@@ -0,0 +1,109 @@
+---
+title: Document.exitPointerLock()
+slug: Web/API/Document/exitPointerLock
+tags:
+  - API
+  - DOM
+  - Experimental
+  - Méthode
+  - Reference
+translation_of: Web/API/Document/exitPointerLock
+---
+<div>{{APIRef("DOM")}}{{SeeCompatTable}}</div>
+
+<p>La méthode <strong><code>exitPointerLock()</code></strong> permet de relâcher un pointeur de façon asynchrone lorsque le pointeur était auparavant mobilisé par la méthode {{domxref("Element.requestPointerLock()")}}.</p>
+
+<p>Pour connaître le succès ou l'échec de cette requête, il faut surveiller les évènements {{event("pointerlockchange")}} et {{event("pointerlockerror")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">document.exitPointerLock();
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Lock','l#extensions-to-the-document-interface','Document')}}</td>
+   <td>{{Spec2('Pointer Lock')}}</td>
+   <td>Extension de l'interface <code>Document</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("moz")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Prise en charge sans préfixe</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(50)}}</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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Document.pointerLockElement")}}</li>
+ <li>{{domxref("Element.requestPointerLock()")}}</li>
+ <li><a href="/fr/docs/WebAPI/Pointer_Lock">L'API <em>Pointer Lock</em></a></li>
+</ul>
diff --git a/files/fr/web/api/document/featurepolicy/index.html b/files/fr/web/api/document/featurepolicy/index.html
new file mode 100644
index 0000000000..4c2dbbe9ba
--- /dev/null
+++ b/files/fr/web/api/document/featurepolicy/index.html
@@ -0,0 +1,47 @@
+---
+title: Document.featurePolicy
+slug: Web/API/Document/featurePolicy
+tags:
+  - API
+  - Document
+  - Feature Policy
+  - Feature-Policy
+  - Reference
+translation_of: Web/API/Document/featurePolicy
+---
+<p>{{APIRef("Feature Policy")}}</p>
+
+<p>La propriété en lecture seule <strong><code>featurePolicy</code></strong> de l'interface {{domxref("Document")}} retourne l'interface {{domxref("FeaturePolicy")}}, qui fournit une API permettant de consulter facilement les règles de fonctionnalités appliquées sur un document spécifique.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="notranslate">var <var>policy</var> = <var>iframeElement</var>.featurePolicy</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un objet {{domxref("FeaturePolicy")}} pouvant être utilisé pour consulter les paramètres de Feature Policy appliqués au document.</p>
+
+<h2 id="Spécification">Spécification</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("Feature Policy")}}</td>
+   <td>{{Spec2("Feature Policy")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Document.featurePolicy")}}</p>
diff --git a/files/fr/web/api/document/forms/index.html b/files/fr/web/api/document/forms/index.html
new file mode 100644
index 0000000000..c892b63976
--- /dev/null
+++ b/files/fr/web/api/document/forms/index.html
@@ -0,0 +1,116 @@
+---
+title: Document.forms
+slug: Web/API/Document/forms
+tags:
+  - API
+  - DOM
+  - Document
+  - Formulaires
+  - Propriétés
+translation_of: Web/API/Document/forms
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La propriété <code>forms</code> de {{domxref("Document")}} retourne une collection ({{domxref("HTMLCollection")}}) des éléments {{HTMLElement("form")}} présents dans le document actuel.</p>
+
+<div class="note">
+<p><strong>Note :</strong> De même, vous pouvez accéder à une liste des éléments d'entrée utilisateur d'un formulaire à l'aide de la propriété {{domxref ("HTMLFormElement.elements")}}.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>collection</var> = document.forms;</pre>
+
+<h3 id="Example" name="Example">Valeur</h3>
+
+<p>Un objet {{domxref("HTMLCollection")}} listant tous les formulaires du document. Chaque élément de la collection est un {{domxref("HTMLFormElement")}} représentant un seul élément <code>&lt;form&gt;</code>.</p>
+
+<h2 id="Example" name="Example">Exemples</h2>
+
+<h3 id="Example" name="Example">Récupérer les informations d'un formulaire</h3>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+
+&lt;head&gt;
+&lt;title&gt;document.forms example&lt;/title&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;form id="robby"&gt;
+  &lt;input type="button" onclick="alert(document.forms[0].id);" value="robby's form" /&gt;
+&lt;/form&gt;
+
+&lt;form id="dave"&gt;
+  &lt;input type="button" onclick="alert(document.forms[1].id);" value="dave's form" /&gt;
+&lt;/form&gt;
+
+&lt;form id="paul"&gt;
+  &lt;input type="button" onclick="alert(document.forms[2].id);" value="paul's form" /&gt;
+&lt;/form&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h3 id="Accéder_à_un_élément_contenu_dans_un_formulaire">Accéder à un élément contenu dans un formulaire</h3>
+
+<pre class="brush: js">var selectForm = document.forms[index];
+var selectFormElement = document.forms[index].elements[index];
+</pre>
+
+<h3 id="Specification" name="Specification">Accéder aux formulaires nommés</h3>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="doctype token">&lt;!DOCTYPE html&gt;</span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>en<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>title</span><span class="punctuation token">&gt;</span></span>document.forms example<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>title</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>form</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>login<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>email<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>email<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>password<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>password<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>submit<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Log in<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>form</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
+  <span class="keyword token">var</span> loginForm <span class="operator token">=</span> document<span class="punctuation token">.</span>forms<span class="punctuation token">.</span>login<span class="punctuation token">;</span> <span class="comment token">// Ou document.forms['login']</span>
+  loginForm<span class="punctuation token">.</span>elements<span class="punctuation token">.</span>email<span class="punctuation token">.</span>placeholder <span class="operator token">=</span> <span class="string token">'test@example.com'</span><span class="punctuation token">;</span>
+  loginForm<span class="punctuation token">.</span>elements<span class="punctuation token">.</span>password<span class="punctuation token">.</span>placeholder <span class="operator token">=</span> <span class="string token">'password'</span><span class="punctuation token">;</span>
+</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h2 id="Specification" name="Specification">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('HTML WHATWG', '#dom-document-forms', 'Document.forms')}}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-1689064', 'Document.forms')}}</td>
+   <td>{{ Spec2('DOM2 Events') }}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_Also" name="See_Also">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires">Formulaires HTML</a></li>
+ <li>{{HTMLElement("form")}} et l'interface {{domxref("HTMLFormElement")}}</li>
+</ul>
diff --git a/files/fr/web/api/document/fullscreenchange_event/index.html b/files/fr/web/api/document/fullscreenchange_event/index.html
new file mode 100644
index 0000000000..ca78a615cd
--- /dev/null
+++ b/files/fr/web/api/document/fullscreenchange_event/index.html
@@ -0,0 +1,85 @@
+---
+title: fullscreenchange
+slug: Web/API/Document/fullscreenchange_event
+translation_of: Web/API/Document/fullscreenchange_event
+---
+<p>L'événement <strong><code>onfullscreenchange</code></strong> est déclenché lorsque le navigateur alterne entre le mode fenêtré et plein écran.</p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#api">Fullscreen</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("Event")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Oui</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("Document")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Aucune</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>L'élément recevant l'événement.</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Le type de l'événement.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Indique si l'événement bubble habituellement ou non.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Indique si l'événement est annulable ou non.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush:js;">// Noter que l'API est toujours vendor-prefixed dans les navigateurs l'implémentant
+document.addEventListener("fullscreenchange", function( event ) {
+
+    // L'objet event ne porte pas l'information à propos du mode plein écran
+    // Cependant, il est possible de la trouver à travers l'API fullscreen
+    if ( document.fullscreen ) {
+
+        // La cible de l'événement est toujours le document,
+        // mais il est possible de retrouver l'élément fullscreen à travers l'API
+        document.fullscreenElement;
+    }
+
+});</pre>
+
+<h2 id="Evénements_liés">Evénements liés</h2>
+
+<ul>
+ <li><a href="/fr/docs/Mozilla_event_reference/fullscreenerror"><code>fullscreenerror</code></a></li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/DOM/Using_full-screen_mode">Utilisation du mode plein écran</a></li>
+</ul>
diff --git a/files/fr/web/api/document/fullscreenerror_event/index.html b/files/fr/web/api/document/fullscreenerror_event/index.html
new file mode 100644
index 0000000000..5f88b26992
--- /dev/null
+++ b/files/fr/web/api/document/fullscreenerror_event/index.html
@@ -0,0 +1,69 @@
+---
+title: fullscreenerror
+slug: Web/API/Document/fullscreenerror_event
+translation_of: Web/API/Document/fullscreenerror_event
+---
+<p>L'événement <strong><code>fullscreenerror</code></strong><code> est déclenché lorsque le navigateur ne peut pas entrer en mode plein écran.</code></p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#api">Fullscreen</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("Event")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Oui</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("Document")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Aucune</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Evénements_liés">Evénements liés</h2>
+
+<ul>
+ <li><a href="/fr/docs/Mozilla_event_reference/fullscreenchange"><code>fullscreenchange</code></a></li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/DOM/Using_full-screen_mode">Utilisation du mode plein écran</a></li>
+</ul>
diff --git a/files/fr/web/api/document/getboxobjectfor/index.html b/files/fr/web/api/document/getboxobjectfor/index.html
new file mode 100644
index 0000000000..97b613781e
--- /dev/null
+++ b/files/fr/web/api/document/getboxobjectfor/index.html
@@ -0,0 +1,42 @@
+---
+title: Document.getBoxObjectFor()
+slug: Web/API/Document/getBoxObjectFor
+tags:
+  - API
+  - Boîte
+  - DOM
+  - Méthodes
+  - Objets
+translation_of: Web/API/Document/getBoxObjectFor
+---
+<p>{{ ApiRef("DOM") }} {{obsolete_header}}</p>
+
+<p>Renvoie un <code>boxObject</code> (x, y, largeur, hauteur) pour un élément spécifié.</p>
+
+<div class="note"><strong>Note :</strong> Cette méthode est obsolète. Vous devez utiliser la méthode {{domxref("element.getBoundingClientRect()")}} à la place.</div>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>boxObject</var> = <var>document</var>.getBoxObjectFor(<var>element</var>);
+</pre>
+
+<ul>
+ <li><code>boxObject</code> est un {{interface("nsIBoxObject")}}.</li>
+ <li><code>element</code> est un {{domxref("element","DOMElement")}}</li>
+</ul>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush:js">var myDiv = document.getElementById("myDiv"),
+    boxObj = document.getBoxObjectFor (myDiv);
+
+alert (
+  "x:" + boxObj.x +
+  ", y:" + boxObj.y +
+  ", Width:" + boxObj.width +
+  ", Height:" + boxObj.height
+);</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Spécifié dans <a href="http://mxr.mozilla.org/mozilla-central/source/dom/interfaces/xul/nsIDOMXULDocument.idl" title="http://mxr.mozilla.org/mozilla-central/source/dom/interfaces/xul/nsIDOMXULDocument.idl">nsIXULDocument.idl</a></p>
diff --git a/files/fr/web/api/document/getelementbyid/index.html b/files/fr/web/api/document/getelementbyid/index.html
new file mode 100644
index 0000000000..eb8a78ee99
--- /dev/null
+++ b/files/fr/web/api/document/getelementbyid/index.html
@@ -0,0 +1,148 @@
+---
+title: document.getElementById
+slug: Web/API/Document/getElementById
+tags:
+  - API
+  - DOM
+  - Document
+  - Elements
+  - Identifiant
+  - Méthodes
+translation_of: Web/API/Document/getElementById
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p>La méthode <code><strong>getElementById()</strong></code> de {{domxref("Document")}} renvoie un objet  {{domxref("Element")}} représentant l'élément dont la propriété  {{domxref("Element.id", "id")}} correspond à la chaîne de caractères spécifiée. Étant donné que les ID d'élément doivent être uniques, s'ils sont spécifiés, ils constituent un moyen utile d'accéder rapidement à un élément spécifique.</p>
+
+<p>Si vous avez besoin d'accéder à un élément qui n'a pas d'ID, vous pouvez utiliser {{domxref("Document.querySelector","querySelector()")}} pour trouver l'élément en utilisant un {{Glossary("CSS selector","sélecteur")}}.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js"><em>var element</em> = document.getElementById(<em>id</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>id</code></dt>
+ <dd>L'ID (<em>identifiant)</em> de l'élément à localiser. Il est une chaîne de caractères sensible à la casse qui est unique ; un seul élément peut avoir un ID donné.</dd>
+ <dt>
+ <h3 id="Valeur_de_retour">Valeur de retour</h3>
+ </dt>
+</dl>
+
+<p>Un objet {{domxref("Element")}} décrivant l'objet élément du DOM correspondant à l'ID spécifié ou <code>null</code> si aucun n'a été trouvé dans le document.</p>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<h3 id="Contenu_HTML">Contenu 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>html</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>title</span><span class="punctuation token">&gt;</span></span>getElementById example<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>title</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>para<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Some text here<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>changeColor(<span class="punctuation token">'</span>blue<span class="punctuation token">'</span>);<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>blue<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>button</span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>changeColor(<span class="punctuation token">'</span>red<span class="punctuation token">'</span>);<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>red<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>body</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h3 id="Contenu_JavaScript">Contenu JavaScript</h3>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">changeColor</span><span class="punctuation token">(</span>newColor<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> elem <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'para'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  elem<span class="punctuation token">.</span>style<span class="punctuation token">.</span>color <span class="operator token">=</span> newColor<span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h3 id="Notes" name="Notes">Résultat</h3>
+
+<p>{{ EmbedLiveSample('Example1', 250, 100) }}</p>
+
+<h2 id="Notes" name="Notes">Notes d'utilisation</h2>
+
+<p>L'écriture de la lettre capitale de « Id » dans le nom de cette méthode <em>doit</em> être respectée pour que le code fonctionne ; <code>getElementByID()</code> n'est pas valide et ne fonctionnera <em>pas</em>, même si elle semble naturelle.</p>
+
+<p>Contrairement à d'autres méthodes de recherche d'éléments, comme  {{domxref("Document.querySelector()")}} et {{domxref("Document.querySelectorAll()")}}, <code>getElementById</code> est uniquement disponible comme méthode de l'objet global <code>document</code> et <em>n'est pas</em> disponible sur tous les objets du DOM. Parce que les valeurs d'ID doivent être uniques dans l'ensemble du document, il n'y pas besoin d'avoir une version "locale" de la fonction.</p>
+
+<h2 id="Exemple_2">Exemple</h2>
+
+<pre class="line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>!doctype</span> <span class="attr-name token">html</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>meta</span> <span class="attr-name token">charset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>UTF-8<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>title</span><span class="punctuation token">&gt;</span></span>Document<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>title</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>parent-id<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>hello word1<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="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>test1<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>hello word2<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>hello word3<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>hello word4<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>div</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
+        <span class="keyword token">var</span> parentDOM <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'parent-id'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+        <span class="keyword token">var</span> test1<span class="operator token">=</span>parentDOM<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'test1'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+        <span class="comment token">//</span></span></code><span class="short_text" id="result_box" lang="fr"><span>erreur de lancement</span></span> <code class="language-html"><span class="language-javascript script token">
+        <span class="comment token">//</span></span></code><span id="result_box" lang="fr"><span>TypeError inattendu </span></span><span lang="fr"><span>: parentDOM.getElementById n'est pas une fonction</span></span> <code class="language-html"><span class="language-javascript script token">
+    </span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p>S'il n'y a pas d'élément avec l'<code>id</code> fourni, cette fonction retourne <code>null</code>. A noter que le paramètre <code>id</code> est sensible à la casse, ainsi<code> document.getElementById("Main")</code> retournera <code>null</code> au lieu de l'élément <code>&lt;div id="main"&gt;</code> étant donné que "M" et "m" sont différents pour cette méthode.</p>
+
+<p><strong>Les éléments absents du document</strong> ne sont pas cherchés par <code>getElementById()</code>. Quand vous créez un élément et y assignez un ID, vous devez insérer l'élément dans l'arbre du document avec {{domxref("Node.insertBefore()")}} ou une méthode similaire avant de pouvoir y accéder avec <code>getElementById()</code> :</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> element <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'div'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+element<span class="punctuation token">.</span>id <span class="operator token">=</span> <span class="string token">'testqq'</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> el <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'testqq'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// el vaudra null !</span></code></pre>
+
+<p><strong>Les documents non-HTML.</strong> Les implémentations du DOM doivent avoir une information qui précise quels attributs sont de type ID. Un attribut portant le nom « id » n'est pas de type ID tant qu'il n'a pas été explicitement défini ainsi (dans la DTD du document). L'attribut <code>id</code> est défini comme étant de type ID dans les langages courants comme <a href="/fr/XHTML" title="fr/XHTML">XHTML</a> ou <a href="/fr/XUL" title="fr/XUL">XUL</a>. Les implémentations ne sachant pas déterminer si les attributs sont de type ID ou non sont supposées renvoyer <code>null</code>.</p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</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('DOM1','level-one-html.html#method-getElementById','getElementById')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale de l'interface</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core','core.html#ID-getElBId','getElementById')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Remplace DOM 1</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core','core.html#ID-getElBId','getElementById')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Remplace DOM 2</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#interface-nonelementparentnode','getElementById')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Remplacera DOM 3</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Traduction en français (non normative) : <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2/core/core.html#ID-getElBId">getElementById</a></p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer à ces données, veuillez consulter le site <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer un <em>pull request</em>.</div>
+
+<p>{{Compat("api.Document.getElementById")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Document")}} référence pour d'autres méthodes et propriétés que vous pouvez utiliser pour obtenir la référence vers des éléments du document.</li>
+ <li>{{domxref("Document.querySelector()")}} pour utiliser des sélecteurs avec des requêtes comme <code>'div.myclass'</code></li>
+ <li><a href="/fr/xml/xml:id" title="fr/xml/id">xml:id</a> dispose d'une méthode utilitaire permettant à getElementById d'obtenir les valeur 'xml:id' dans les documents XML (comme ceux qui pourraient être renvoyés par des appels Ajax).</li>
+</ul>
diff --git a/files/fr/web/api/document/getelementsbyclassname/index.html b/files/fr/web/api/document/getelementsbyclassname/index.html
new file mode 100644
index 0000000000..021ce5c742
--- /dev/null
+++ b/files/fr/web/api/document/getelementsbyclassname/index.html
@@ -0,0 +1,92 @@
+---
+title: document.getElementsByClassName
+slug: Web/API/Document/getElementsByClassName
+tags:
+  - API
+  - DOM
+  - Méthodes
+  - Reference
+translation_of: Web/API/Document/getElementsByClassName
+---
+<p>{{ Fx_minversion_header(3) }} {{APIRef("DOM")}}</p>
+
+<p><span id="result_box" lang="fr"><span>Renvoie un objet de type tableau de tous les éléments enfants qui ont tous les noms de classe donnés.</span> <span>Lorsqu'il est appelé sur l'objet document, le document complet est recherché, y compris le nœud racine.</span> <span>Vous pouvez également appeler {{domxref ("Element.getElementsByClassName", "getElementsByClassName ()")}} sur n'importe quel élément;</span> <span>il retournera uniquement les éléments qui sont les descendants de l'élément racine spécifié avec les noms de classes donnés.</span></span></p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>var elements</var> = document.getElementsByClassName(<em>names</em>); // or:
+<var>var elements</var> = rootElement.getElementsByClassName(<em>names</em>);</pre>
+
+<ul>
+ <li><var>elements</var> <span id="result_box" lang="fr"><span>est une {{domxref ("HTMLCollection")}} des éléments trouvés.</span></span></li>
+ <li><var>names</var> est une chaîne représentant le nom de la classe des éléments à trouver.</li>
+ <li><span id="result_box" lang="fr"><span>getElementsByClassName peut être appelé sur n'importe quel élément, pas seulement sur le document.</span> <span>L'élément sur lequel il est appelé sera utilisé comme racine de la recherche.</span></span></li>
+</ul>
+
+<h2 id="Exemples" name="Exemples">Exemples</h2>
+
+<p>Trouve tous les éléments ayant la classe « test » :</p>
+
+<pre class="eval"> document.getElementsByClassName('test')
+</pre>
+
+<p>Trouve tous les éléments ayant les classes « rouge » et « test » :</p>
+
+<pre class="eval"> document.getElementsByClassName('rouge test')
+</pre>
+
+<p>Trouve tous les éléments qui ont la classe « test » à l'intérieur d'un élément ayant l'ID « main » :</p>
+
+<pre class="eval"> document.getElementById('main').getElementsByClassName('test')
+</pre>
+
+<p><span id="result_box" lang="fr"><span>Nous pouvons également utiliser les méthodes de Array.prototype sur toute {{domxref ("HTMLCollection")}} en passant HTMLCollection comme valeur de la méthode.</span> <span>Ici, nous allons trouver tous les éléments div qui ont une classe de 'test':</span></span></p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> testElements <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementsByClassName</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> testDivs <span class="operator token">=</span> Array<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>filter<span class="punctuation token">.</span><span class="function token">call</span><span class="punctuation token">(</span>testElements<span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span>testElement<span class="punctuation token">)</span><span class="punctuation token">{</span>
+    <span class="keyword token">return</span> testElement<span class="punctuation token">.</span>nodeName <span class="operator token">===</span> <span class="string token">'DIV'</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p><span class="comment">XXX writeme == Notes == Une méthode semblable existe pour &lt;code&gt;Element&lt;/code&gt;</span></p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification"><span class="short_text" id="result_box" lang="fr"><span>Obtenir la classe  des éléments test</span></span></h2>
+
+<p><span id="result_box" lang="fr"><span>C'est la méthode d'opération la plus couramment utilisée</span></span>.</p>
+
+<pre class="line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>!doctype</span> <span class="attr-name token">html</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>meta</span> <span class="attr-name token">charset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>UTF-8<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>title</span><span class="punctuation token">&gt;</span></span>Document<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>title</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>parent-id<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>hello word1<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="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>test<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>hello word2<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>hello word3<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>hello word4<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>div</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
+        <span class="keyword token">var</span> parentDOM <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"parent-id"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+        <span class="keyword token">var</span> test<span class="operator token">=</span>parentDOM<span class="punctuation token">.</span><span class="function token">getElementsByClassName</span><span class="punctuation token">(</span><span class="string token">"test"</span><span class="punctuation token">)</span><span class="punctuation token">;</span><span class="comment token">//test is not target element</span>
+        console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>test<span class="punctuation token">)</span><span class="punctuation token">;</span><span class="comment token">//HTMLCollection[1]</span>
+
+        <span class="keyword token">var</span> testTarget<span class="operator token">=</span>parentDOM<span class="punctuation token">.</span><span class="function token">getElementsByClassName</span><span class="punctuation token">(</span><span class="string token">"test"</span><span class="punctuation token">)</span><span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">;</span><span class="comment token">//here , this element is target</span>
+        console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>testTarget<span class="punctuation token">)</span><span class="punctuation token">;</span><span class="comment token">//&lt;p class="test"&gt;hello word2&lt;/p&gt;</span>
+    </span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+<p>{{Compat("api.Document.getElementsByClassName")}}</p>
+
+
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<ul>
+ <li><a href="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-getelementsbyclassname" title="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-getelementsbyclassname"><span class="external external-icon">W3C: getElementsByClassName</span></a></li>
+</ul>
diff --git a/files/fr/web/api/document/getelementsbyname/index.html b/files/fr/web/api/document/getelementsbyname/index.html
new file mode 100644
index 0000000000..c8136c8de7
--- /dev/null
+++ b/files/fr/web/api/document/getelementsbyname/index.html
@@ -0,0 +1,86 @@
+---
+title: document.getElementsByName()
+slug: Web/API/Document/getElementsByName
+tags:
+  - API
+  - DOM
+  - Document
+  - HTML
+  - Méthodes
+translation_of: Web/API/Document/getElementsByName
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p>Renvoie une liste des éléments portant un {{domxref("element.name","name")}} donné dans le document (X)HTML.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="eval"><em>elements</em> = document.getElementsByName(<em>name</em>)
+</pre>
+
+<ul>
+ <li><code>elements</code> est une collection de {{domxref("NodeList")}}</li>
+ <li><code>name</code> est la valeur de l'attribut <code>name</code> des éléments.</li>
+</ul>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre class="brush:html line-numbers  language-html"><code class="language-html"><span class="doctype token">&lt;!DOCTYPE html&gt;</span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>en<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
+ ...
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>form</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>up<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>form</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>down<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
+<span class="keyword token">var</span> up_forms <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementsByName</span><span class="punctuation token">(</span><span class="string token">"up"</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>up_forms<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">.</span>tagName<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// retourne "FORM"</span>
+</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p><span id="result_box" lang="fr"><span>L'attribut <code><a href="https://developer.mozilla.org/fr/docs/Web/API/Element/name">name</a></code> est uniquement applicable aux documents (X) HTML.</span> <span>La méthode renvoie une collection </span></span> {{domxref("NodeList")}} <span lang="fr"><span> en cours qui contient tous les éléments avec une valeur donnée pour l'attribut name, tels que </span></span> {{htmlelement("meta")}} <span lang="fr"><span> ou </span></span> {{htmlelement("object")}} <span lang="fr"><span> ou même si le nom est placé sur des éléments qui ne supportent pas du tout un attribut <code>name</code>.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span>La méthode <strong>getElementsByName</strong> fonctionne différemment dans différents navigateurs.</span> <span>Dans IE &lt;10, la méthode getElementsByName () renvoie également les éléments qui ont un attribut id avec la valeur spécifiée.</span> <span>Vous devriez donc faire attention à ne pas utiliser la même chaîne pour le nom et l'identifiant.</span></span></p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-71555259">DOM Level 2 HTML : getElementsByName</a> — <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-71555259">traduction en français</a> (non normative)</li>
+ <li><a href="http://www.whatwg.org/html/#dom-document-getelementsbyname" title="http://www.whatwg.org/html/">HTML5 : getElementsByName</a></li>
+</ul>
+
+<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', '#dom-document-getelementsbyname', "Document.getElementsByName()")}}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 HTML", "html.html#ID-71555259", "Document.getElementsByName()")}}</td>
+   <td>{{Spec2("DOM2 HTML")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("document.getElementById()")}} pour retourner une référence à un élément par son ID</li>
+ <li>{{domxref("document.getElementsByTagName()")}} pour renvoyer les références sur les éléments avec la balise de nom donnée</li>
+ <li>{{domxref("document.querySelector()")}} pour des sélecteurs par des requêtes comme <code>'div.myclass'</code></li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/web/api/document/getelementsbytagname/index.html b/files/fr/web/api/document/getelementsbytagname/index.html
new file mode 100644
index 0000000000..268a5a6453
--- /dev/null
+++ b/files/fr/web/api/document/getelementsbytagname/index.html
@@ -0,0 +1,113 @@
+---
+title: document.getElementsByTagName
+slug: Web/API/Document/getElementsByTagName
+tags:
+  - API
+  - DOM
+  - Elements
+  - Méthodes
+translation_of: Web/API/Document/getElementsByTagName
+---
+<div>{{ ApiRef("DOM") }}</div>
+
+<div> </div>
+
+<p><span id="result_box" lang="fr"><span>Renvoie une {{domxref ("HTMLCollection")}} des éléments avec le nom de balise donné.</span> <span>Le document complet est recherché, y compris le nœud racine.</span> <span>Le <code>HTMLCollection</code> renvoyée est en direct, ce qui signifie qu'elle se met à jour automatiquement pour rester synchronisée avec l'arborescence DOM sans avoir à rappeler document.getElementsByTagName ().</span></span></p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <var>elements</var> = document.getElementsByTagName(<em>name</em>);</pre>
+
+<ul>
+ <li><code>elements</code> est une liste de nœuds (<code>NodeList</code>) des éléments trouvés dans l'ordre dans lequel ils apparaissent dans l'arbre.</li>
+ <li><code>nom</code> est une chaîne représentant le nom des éléments. La chaîne spéciale <code>"*"</code> représente « tous les éléments ».</li>
+</ul>
+
+<div class="note">
+<p><strong>Note :</strong> <a href="https://dom.spec.whatwg.org/">La dernière spécification W3C</a> dit que  <code>elements</code> est une   <code>HTMLCollection</code> ; cependant cette méthode renvoie une  {{domxref("NodeList")}} dans les navigateurs WebKit. Voir  {{bug(14869)}} pour plus de détails.</p>
+</div>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<p><span id="result_box" lang="fr"><span>Dans l'exemple suivant, <code>getElementsByTagName()</code> commence à partir d'un élément parent particulier et effectue une recherche descendante récursive dans le DOM à partir de cet élément parent, en créant une collection de tous les éléments descendants qui correspondent au paramètre de <code>name</code>.</span> <span>Cela démontre à la fois <code>document.getElementsByTagName()</code> et son homologue {{domxref ("Element.getElementsByTagName ()")}}, qui lance la recherche sur un élément spécifique dans l'arbre DOM.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span>Cliquer sur les boutons utilise <code>getElementsByTagName()</code> pour compter les éléments de paragraphe descendant d'un parent particulier (le document lui-même ou l'un des éléments {{HTMLElement ("div")}} imbriqués).</span></span></p>
+
+<pre class="brush:html line-numbers  language-html"><code class="language-html"><span class="doctype token">&lt;!DOCTYPE html&gt;</span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>en<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>meta</span> <span class="attr-name token">charset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>UTF-8<span class="punctuation token">"</span></span> <span class="punctuation token">/&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>title</span><span class="punctuation token">&gt;</span></span>getElementsByTagName example<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>title</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
+    <span class="keyword token">function</span> <span class="function token">getAllParaElems</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="keyword token">var</span> allParas <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">'p'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="keyword token">var</span> num <span class="operator token">=</span> allParas<span class="punctuation token">.</span>length<span class="punctuation token">;</span>
+      <span class="function token">alert</span><span class="punctuation token">(</span><span class="string token">'There are '</span> <span class="operator token">+</span> num <span class="operator token">+</span> <span class="string token">' paragraph in this document'</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">div1ParaElems</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="keyword token">var</span> div1 <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'div1'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="keyword token">var</span> div1Paras <span class="operator token">=</span> div1<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">'p'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="keyword token">var</span> num <span class="operator token">=</span> div1Paras<span class="punctuation token">.</span>length<span class="punctuation token">;</span>
+      <span class="function token">alert</span><span class="punctuation token">(</span><span class="string token">'There are '</span> <span class="operator token">+</span> num <span class="operator token">+</span> <span class="string token">' paragraph in #div1'</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">div2ParaElems</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="keyword token">var</span> div2 <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'div2'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="keyword token">var</span> div2Paras <span class="operator token">=</span> div2<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">'p'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="keyword token">var</span> num <span class="operator token">=</span> div2Paras<span class="punctuation token">.</span>length<span class="punctuation token">;</span>
+      <span class="function token">alert</span><span class="punctuation token">(</span><span class="string token">'There are '</span> <span class="operator token">+</span> num <span class="operator token">+</span> <span class="string token">' paragraph in #div2'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+  </span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">border</span><span class="punctuation token">:</span> solid green <span class="number token">3</span>px</span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>Some outer text<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>Some outer text<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>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>div1<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">border</span><span class="punctuation token">:</span> solid blue <span class="number token">3</span>px</span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>Some div1 text<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>Some div1 text<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>Some div1 text<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>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>div2<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">border</span><span class="punctuation token">:</span> solid red <span class="number token">3</span>px</span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>Some div2 text<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>Some div2 text<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>div</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>Some outer text<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>Some outer text<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>getAllParaElems();<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+    show all p elements in document<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>br</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>div1ParaElems();<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+    show all p elements in div1 element<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>br</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>div2ParaElems();<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+    show all p elements in div2 element<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>body</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Notes</h2>
+
+<p><span id="result_box" lang="fr"><span>Lorsqu'elle est appelée sur un document HTML, <code>getElementsByTagName()</code> classe son argument avant de continuer.</span> <span>Cela n'est pas souhaitable lorsque vous essayez de faire correspondre des éléments camelCase SVG dans un sous-arbre dans un document HTML.</span> <span>{{Domxref ("document.getElementsByTagNameNS ()")}} est utile dans ce cas.</span> <span>Voir aussi {{Bug (499656)}}.</span><br>
+ <br>
+ <span><code>document.getElementsByTagName()</code> est similaire à {{domxref ("element.getElementsByTagName ()")}}, sauf que sa recherche englobe tout le document.</span></span></p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-A6C9094">DOM Level 2 Core : getElementsByTagName</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2/core/core.html#ID-A6C9094">traduction</a> (non normative)</small></li>
+ <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents">HTML 5: APIs in HTML documents</a></li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Element.getElementsByTagName()")}}</li>
+ <li>{{domxref("document.getElementById()")}} pour renvoyer une référence à un élément par son <code>id</code> (<em>identifiant</em>)</li>
+ <li>{{domxref("document.getElementsByName()")}} pour renvoyer une référence à un élément par son <code>name</code> (<em>nom</em>)</li>
+ <li>{{domxref("document.querySelector()")}} pour les sélecteurs puissants via des requêtes comme <code>'div.myclass'</code></li>
+</ul>
diff --git a/files/fr/web/api/document/getelementsbytagnamens/index.html b/files/fr/web/api/document/getelementsbytagnamens/index.html
new file mode 100644
index 0000000000..537bc24875
--- /dev/null
+++ b/files/fr/web/api/document/getelementsbytagnamens/index.html
@@ -0,0 +1,136 @@
+---
+title: Document.getElementsByTagNameNS()
+slug: Web/API/Document/getElementsByTagNameNS
+tags:
+  - API
+  - DOM
+  - Elements
+  - Méthodes
+  - Nom
+  - XPath
+translation_of: Web/API/Document/getElementsByTagNameNS
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p>{{ fx_minversion_note("3.6","Voir la <a href='\"/en/DOM/element.getElementsByTagNameNS#Notes\"'>section Notes de element.getElementsByTagNameNS</a> pour les changements qui s'appliquent aussi à cet API dans Firefox 3.6.") }}</p>
+
+<p>Renvoie une liste d'éléments avec la balise de nom donnée appartenant à l'espace de noms donné. Le document complet est recherché, y compris le noeud racine.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="eval"><em>elements</em> = document.getElementsByTagNameNS(<em>namespace</em>,<em>name</em>)
+</pre>
+
+<ul>
+ <li><code>elements</code> est une {{domxref("NodeList")}} (<em>liste de noeud</em>) directe (mais voir le note ci-dessous) d'éléments trouvés dans l'ordre de leur apparition dans l'arbre.</li>
+ <li><code>namespace</code> l'URI d'espace de noms des éléments à rechercher (voir <code><a href="/en/DOM/Node.namespaceURI" title="En/DOM/Node.namespaceURI">element.namespaceURI</a></code>).</li>
+ <li><code>name</code> est, soit le nom local des éléments à rechercher, soit la valeur spéciale <code>"*"</code> pour tous les éléments (voir <code><a href="/en/DOM/Node.localName" title="En/DOM/Node.localName">element.localName</a></code>).</li>
+</ul>
+
+<div class="note"><strong>Note :</strong> Tandis que la spécification W3C indique que les <code>elements</code> sont des <code>NodeList</code>, cette méthode renvoie une {{domxref("HTMLCollection")}} dans Gecko et Internet Explorer. Opera retourne une <code>NodeList</code>, mais avec une méthode implémentée <code>namedItem</code>, ce qui la rend similaire à une <code>HTMLCollection</code>. À partir de Janvier 2012, dans les navigateurs WebKit seulement, la valeur retournée est une pure <code>NodeList</code>. Voir <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=14869" title="https://bugzilla.mozilla.org/show_bug.cgi?id=14869">bug 14869</a> pour plus de détails.</div>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<p>Dans l'exemple suivant, <code>getElementsByTagNameNS</code> commence à partir d'un élément parent particulier et cherche dans le DOM récursivement de haut en bas à partir de cet élément parent, les éléments enfants correspondant au paramètre <code>name</code> de la balise.</p>
+
+<p>Notez que lorsque le noeud sur lequel <code>getElementsByTagName</code> est invoqué n'est pas un noeud <code>document</code>, la méthode <a href="https://developer.mozilla.org/fr/docs/Web/API/Element/getElementsByTagNameNS" title="en/DOM/element.getElementsByTagNameNS">element.getElementsByTagNameNS</a> est en fait utilisée.</p>
+
+<p>Pour utiliser l'exemple suivant, il suffit de le copier/coller dans un nouveau fichier enregistré avec l'extension .xhtml.</p>
+
+<pre class="brush: html">&lt;html xmlns="<a class="external" href="http://www.w3.org/1999/xhtml" rel="freelink">http://www.w3.org/1999/xhtml</a>"&gt;
+
+&lt;head&gt;
+&lt;title&gt;getElementsByTagNameNS example&lt;/title&gt;
+
+&lt;script type="text/javascript"&gt;
+
+function getAllParaElems()
+{
+  var allParas = document.getElementsByTagNameNS("<a class="external" href="http://www.w3.org/1999/xhtml" rel="freelink">http://www.w3.org/1999/xhtml</a>", "p");
+
+  var num = allParas.length;
+
+  alert("There are " + num + " &amp;lt;p&amp;gt; elements in this document");
+}
+
+
+function div1ParaElems()
+{
+  var div1 = document.getElementById("div1")
+  var div1Paras = div1.getElementsByTagNameNS("<a class="external" href="http://www.w3.org/1999/xhtml" rel="freelink">http://www.w3.org/1999/xhtml</a>", "p");
+
+  var num = div1Paras.length;
+
+  alert("There are " + num + " &amp;lt;p&amp;gt; elements in div1 element");
+}
+
+
+function div2ParaElems()
+{
+  var div2 = document.getElementById("div2")
+  var div2Paras = div2.getElementsByTagNameNS("<a class="external" href="http://www.w3.org/1999/xhtml" rel="freelink">http://www.w3.org/1999/xhtml</a>", "p");
+
+  var num = div2Paras.length;
+
+  alert("There are " + num + " &amp;lt;p&amp;gt; elements in div2 element");
+}
+
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body style="border: solid green 3px"&gt;
+&lt;p&gt;Some outer text&lt;/p&gt;
+&lt;p&gt;Some outer text&lt;/p&gt;
+
+  &lt;div id="div1" style="border: solid blue 3px"&gt;
+    &lt;p&gt;Some div1 text&lt;/p&gt;
+    &lt;p&gt;Some div1 text&lt;/p&gt;
+    &lt;p&gt;Some div1 text&lt;/p&gt;
+
+    &lt;div id="div2" style="border: solid red 3px"&gt;
+    &lt;p&gt;Some div2 text&lt;/p&gt;
+    &lt;p&gt;Some div2 text&lt;/p&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+
+&lt;p&gt;Some outer text&lt;/p&gt;
+&lt;p&gt;Some outer text&lt;/p&gt;
+
+&lt;button onclick="getAllParaElems();"&gt;
+ show all p elements in document&lt;/button&gt;&lt;br /&gt;
+
+&lt;button onclick="div1ParaElems();"&gt;
+ show all p elements in div1 element&lt;/button&gt;&lt;br /&gt;
+
+&lt;button onclick="div2ParaElems();"&gt;
+ show all p elements in div2 element&lt;/button&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Potential_Workaround_for_other_browsers_which_do_not_support" name="Potential_Workaround_for_other_browsers_which_do_not_support">Solution de contournement potentielle pour les navigateurs qui ne prennent pas en charge XPath</h2>
+
+<p>Si le navigateur souhaité ne supporte pas XPath, une autre approche (comme traverser le DOM à travers tous ses enfants, identifier toutes les instances de @xmlns, etc.) serait nécessaire pour trouver toutes les balises avec le nom local et l'espace de noms, mais XPath est beaucoup plus rapide. (Pour adapter à Explorer, on pourrait appeler un wrapper XPath au lieu du XPath dans la fonction ci-dessous (comme Explorer supporte XPath avec une API différente), comme <a class="external" href="http://www.davidflanagan.com/javascript5/display.php?n=21-10&amp;f=21/10.js">cette classe wrapper</a>.)</p>
+
+<pre class="brush: js">function getElementsByTagNameNSWrapper (ns, elName, doc, context) {
+	if (!doc) {
+		doc = document;
+	}
+	if (!context) {
+		context = doc;
+	}
+
+	var result = doc.evaluate('//*[local-name()="'+elName+'" and namespace-uri() = "'+ns+'"]', context, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
+
+        var a = [];
+        for(var i = 0; i &lt; result.snapshotLength; i++) {
+            a[i] = result.snapshotItem(i);
+        }
+        return a;
+}
+</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-getElBTNNS">DOM Level 2 Core: Document.getElementsByTagNameNS</a></p>
diff --git a/files/fr/web/api/document/getselection/index.html b/files/fr/web/api/document/getselection/index.html
new file mode 100644
index 0000000000..5a0bb35861
--- /dev/null
+++ b/files/fr/web/api/document/getselection/index.html
@@ -0,0 +1,14 @@
+---
+title: document.getSelection
+slug: Web/API/Document/getSelection
+tags:
+  - API
+  - DOM
+  - Méthodes
+  - Reference
+  - Selection
+translation_of: Web/API/DocumentOrShadowRoot/getSelection
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><span id="result_box" lang="fr"><span>Cette méthode fonctionne de manière identique à la méthode {{domxref ("Window.getSelection()")}} ;</span> elle<span> renvoie un objet {{domxref ("Selection")}} représentant le texte actuellement sélectionné dans le document.</span></span></p>
diff --git a/files/fr/web/api/document/hasfocus/index.html b/files/fr/web/api/document/hasfocus/index.html
new file mode 100644
index 0000000000..4b70cdaf0a
--- /dev/null
+++ b/files/fr/web/api/document/hasfocus/index.html
@@ -0,0 +1,151 @@
+---
+title: document.hasFocus
+slug: Web/API/Document/hasFocus
+tags:
+  - API
+  - DOM
+  - Focus
+  - Méthodes
+  - Reference
+translation_of: Web/API/Document/hasFocus
+---
+<p>{{ ApiRef() }}</p>
+
+<p>La méthode <code><strong>Document.hasFocus()</strong></code> retourne une valeur  {{jsxref("Boolean")}} <code>true</code> <em>(vrai)</em> indiquant <span id="result_box" lang="fr"><span>si le document ou tout élément à l'intérieur du document a le focus.</span> <span>Cette méthode peut être utilisée pour déterminer si l'élément actif d'un document a le focus.</span></span></p>
+
+<div class="note">
+<p><strong>Note :</strong> <span id="result_box" lang="fr"><span>Lors de la visualisation d'un document, un élément avec focus est toujours l'élément actif dans le document, mais un élément actif n'a pas nécessairement le focus.</span> <span>Par exemple, un élément actif dans une fenêtre contextuelle qui n'est pas le premier plan n'a pas de focus.</span></span></p>
+</div>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="eval">focused = document.hasFocus();
+</pre>
+
+<h3 id="Exemple" name="Exemple">Valeur retournée</h3>
+
+<p><code>false</code> <em>(faux)</em> si l'élément actif dans le document n'a pas de focus ; <code>true</code><em> (vrai)</em> si l'élément actif dans le document a le focus.</p>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre class="brush:html;highlight:[17] line-numbers  language-html"><code class="language-html"><span class="doctype token">&lt;!DOCTYPE html&gt;</span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>en<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>meta</span> <span class="attr-name token">charset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>UTF-8<span class="punctuation token">"</span></span> <span class="punctuation token">/&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>title</span><span class="punctuation token">&gt;</span></span>TEST<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>title</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>style</span><span class="punctuation token">&gt;</span></span><span class="language-css style token">
+<span class="selector token"><span class="id token">#message</span> </span><span class="punctuation token">{</span> <span class="property token">font-weight</span><span class="punctuation token">:</span> bold<span class="punctuation token">;</span> <span class="punctuation token">}</span>
+</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>style</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
+<span class="function token">setInterval</span><span class="punctuation token">(</span> checkPageFocus<span class="punctuation token">,</span> <span class="number token">200</span> <span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="keyword token">function</span> <span class="function token">checkPageFocus</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> info <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"message"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="keyword token">if</span> <span class="punctuation token">(</span> document<span class="punctuation token">.</span><span class="function token">hasFocus</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    info<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> <span class="string token">"The document has the focus."</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
+    info<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> <span class="string token">"The document doesn't have the focus."</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">openWindow</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  window<span class="punctuation token">.</span>open <span class="punctuation token">(</span>
+    <span class="string token">"http://developer.mozilla.org/"</span><span class="punctuation token">,</span>
+    <span class="string token">"mozdev"</span><span class="punctuation token">,</span>
+    <span class="string token">"width=640,height=300,left=150,top=260"</span>
+  <span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>h1</span><span class="punctuation token">&gt;</span></span>JavaScript hasFocus example<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>h1</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>message<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Waiting for user action<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span><span class="punctuation token">&gt;</span></span><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>openWindow()<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Open a new window<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>div</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</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('HTML WHATWG', 'interaction.html#dom-document-hasfocus', 'Document.hasFocus()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>30</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("1.9") }}</td>
+   <td>6.0</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("1.9") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Page_Visibility_API">Using the Page Visibility API</a></li>
+</ul>
+
+<p> </p>
+
+<div class="noinclude"> </div>
+
+<p> </p>
diff --git a/files/fr/web/api/document/head/index.html b/files/fr/web/api/document/head/index.html
new file mode 100644
index 0000000000..1fa6aa3fa3
--- /dev/null
+++ b/files/fr/web/api/document/head/index.html
@@ -0,0 +1,75 @@
+---
+title: document.head
+slug: Web/API/Document/head
+tags:
+  - DOM
+  - Document
+  - HTML5
+translation_of: Web/API/Document/head
+---
+<h2 id="Summary" name="Summary">Résumé</h2>
+<p>Retourne l'élément {{HTMLElement("head")}} du document courant. S'il y a plus d'un élément &lt;head&gt;, le premier est retourné.</p>
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+<pre class="syntaxbox"><em>var objRef</em> = document.head;
+</pre>
+<h2 id="Example" name="Example">Exemple</h2>
+<pre class="brush: js">// en HTML: &lt;head id="my-document-head"&gt;
+var aHead = document.head;
+
+alert(aHead.id); // "my-document-head";
+
+alert( document.head === document.querySelector("head") ); // true
+</pre>
+<h2 id="Example" name="Example">Notes</h2>
+<p><code>document.head</code> est en lecture seule. Essayer d'assigner une valeur à cettre propriété échouera en silence ou lancera une <code>TypeError</code> si le mode strict d'ECMAScript est activé dans un navigateur Gecko.</p>
+<h2 id="Compatibilité">Compatibilité</h2>
+<div>
+  {{CompatibilityTable}}</div>
+<div id="compat-desktop">
+  <table class="compat-table">
+    <tbody>
+      <tr>
+        <th>Feature</th>
+        <th>Chrome</th>
+        <th>Firefox (Gecko)</th>
+        <th>Internet Explorer</th>
+        <th>Opera</th>
+        <th>Safari</th>
+      </tr>
+      <tr>
+        <td>Basic support</td>
+        <td>4.0</td>
+        <td>{{CompatGeckoDesktop("2")}}</td>
+        <td>9.0</td>
+        <td>11.0</td>
+        <td>5.0</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+<div id="compat-mobile">
+  <table class="compat-table">
+    <tbody>
+      <tr>
+        <th>Feature</th>
+        <th>Android</th>
+        <th>Firefox Mobile (Gecko)</th>
+        <th>IE Mobile</th>
+        <th>Opera Mobile</th>
+        <th>Safari Mobile</th>
+      </tr>
+      <tr>
+        <td>Basic support</td>
+        <td>{{CompatVersionUnknown}}</td>
+        <td>{{CompatGeckoMobile("2")}}</td>
+        <td>9.0</td>
+        <td>{{CompatVersionUnknown}}</td>
+        <td>{{CompatVersionUnknown}}</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+<h2 id="Specification" name="Specification">Spécification</h2>
+<ul>
+  <li><a href="http://www.w3.org/TR/html5/dom.html#dom-tree-accessors" title="http://www.w3.org/TR/html5/dom.html#dom-document-head">HTML5: DOM Tree Accessors</a></li>
+</ul>
diff --git a/files/fr/web/api/document/height/index.html b/files/fr/web/api/document/height/index.html
new file mode 100644
index 0000000000..8f69f2dbbc
--- /dev/null
+++ b/files/fr/web/api/document/height/index.html
@@ -0,0 +1,44 @@
+---
+title: Document.height
+slug: Web/API/Document/height
+translation_of: Web/API/Document/height
+---
+<div>{{APIRef("DOM")}} {{Obsolete_header}}</div>
+
+<div class="note">
+<p><strong>Note:</strong> Apparu avec {{Gecko("6.0")}},<code> document.height n'est plus supporté</code>. Utilisez à la place <code>document.body.clientHeight</code>. Voir {{domxref("element.clientHeight")}}.</p>
+</div>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Retourne la hauteur de l'objet {{domxref("document")}}. Dans la plupart des cas, ceci est égal à l'élément {{HTMLElement("body")}} du document courant.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>height_value</em> = document.height
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">// alert document height
+alert(document.height);
+</pre>
+
+<h2 id="Alternatives">Alternatives</h2>
+
+<pre class="syntaxbox">document.body.clientHeight
+document.documentElement.clientHeight
+document.documentElement.scrollHeight
+</pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<p>HTML5</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("document.width")}}</li>
+ <li>{{domxref("Element.clientHeight")}}</li>
+ <li>{{domxref("Element.scrollHeight")}}</li>
+</ul>
diff --git a/files/fr/web/api/document/hidden/index.html b/files/fr/web/api/document/hidden/index.html
new file mode 100644
index 0000000000..d4b6aaf64b
--- /dev/null
+++ b/files/fr/web/api/document/hidden/index.html
@@ -0,0 +1,43 @@
+---
+title: Document.hidden
+slug: Web/API/Document/hidden
+translation_of: Web/API/Document/hidden
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p>La propriété <code><strong>Document.hidden</strong></code> retourne un Booléen qui indique si la page est considérée cachée ou pas.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>boolean</em> = document.hidden</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:js;">document.addEventListener("visibilitychange", function() {
+  console.log( document.hidden );
+  // Modifier le comportement...
+});
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Page Visibility API','#dom-document-hidden', 'Document.hidden')}}</td>
+   <td>{{Spec2('Page Visibility API')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré par des données structurées. Si vous voulez contribuer, venez jeter un oeil ici <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous votre requête pull.</div>
+
+<p>{{Compat("api.Document.hidden")}}</p>
diff --git a/files/fr/web/api/document/images/index.html b/files/fr/web/api/document/images/index.html
new file mode 100644
index 0000000000..56ae7fba48
--- /dev/null
+++ b/files/fr/web/api/document/images/index.html
@@ -0,0 +1,28 @@
+---
+title: document.images
+slug: Web/API/Document/images
+tags:
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/Document/images
+---
+<p>{{ ApiRef() }}</p>
+<h2 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h2>
+<p><a class="internal" href="/fr/DOM/document.images" title="Fr/DOM/Document.images"><code>document.images</code></a> renvoie une collection des images du document HTML courant.</p>
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+<pre class="eval"><a class="internal" href="/fr/DOM/HTMLCollection" title="fr/DOM/HTMLCollection"><em>HTMLCollection</em></a> = <a class="internal" href="/fr/DOM/document.images" title="Fr/DOM/Document.images">document.images</a>
+</pre>
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+<pre class="eval">var listeimg = document.images;
+for(var i = 0; i &lt; listeimg.length; i++) {
+    if(listeimg[i] == "banner.gif") {
+         // l'image banner a été trouvée
+    }
+}
+</pre>
+<h2 id="Notes" name="Notes">Notes</h2>
+<p><a class="internal" href="/fr/DOM/document.images" title="Fr/DOM/Document.images"><code>document.images</code></a> fait partie du DOM HTML, et fonctionne uniquement pour les document HTML.</p>
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
+<ul>
+ <li>Spécification DOM Level 2 HTML : <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-90379117">HTMLDocument.images</a></li>
+ <li>Traduction en français (non normative) : <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2/html/html.html#ID-90379117">HTMLDocument.images</a></li>
+</ul>
diff --git a/files/fr/web/api/document/implementation/index.html b/files/fr/web/api/document/implementation/index.html
new file mode 100644
index 0000000000..5f7d1a8bff
--- /dev/null
+++ b/files/fr/web/api/document/implementation/index.html
@@ -0,0 +1,47 @@
+---
+title: document.implementation
+slug: Web/API/Document/implementation
+tags:
+  - API
+  - DOM
+  - Propriétés
+  - Reference
+translation_of: Web/API/Document/implementation
+---
+<h2 id="Résumé">Résumé</h2>
+
+<p>Retourne un objet {{domxref("DOMImplementation")}} associé avec le document courant.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>DOMImpObj</var> = document.implementation;
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> modName <span class="operator token">=</span> <span class="string token">"HTML"</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> modVer <span class="operator token">=</span> <span class="string token">"2.0"</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> conformTest <span class="operator token">=</span> document<span class="punctuation token">.</span>implementation<span class="punctuation token">.</span><span class="function token">hasFeature</span><span class="punctuation token">(</span> modName<span class="punctuation token">,</span> modVer <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">"DOM "</span> <span class="operator token">+</span> modName <span class="operator token">+</span> <span class="string token">" "</span> <span class="operator token">+</span> modVer <span class="operator token">+</span> <span class="string token">" supported?: "</span> <span class="operator token">+</span> conformTest <span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// alerte avec : "DOM HTML 2.0 pris en charge ?: true" si le module DOM niveau 2 HTML est pris en charge.</span></code></pre>
+
+<p><span id="result_box" lang="fr"><span>Une liste de noms de modules (par exemple, Core, HTML, XML, etc.) est disponible dans la </span></span> <a href="http://www.w3.org/TR/DOM-Level-2-Core/introduction.html#ID-Conformance-h2">Conformance Section</a> <span lang="fr"><span> DOM niveau 2.</span></span></p>
+
+<h2 id="Notes"><span lang="fr"><span>Notes</span></span></h2>
+
+<p><span id="result_box" lang="fr"><span>La recommandation DOM niveau 1 du W3C ne spécifiait que la méthode <code>hasFeature</code>, qui est un moyen de déterminer si un module DOM est supporté par un navigateur (voir l'exemple ci-dessus et ce que votre agent utilisateur prétend prendre en charge ?).</span> <span>Si disponibles, d'autres méthodes <code>DOMImplementation</code> fournissent des services pour contrôler des choses en dehors d'un document unique.</span> <span>Par exemple, l'interface <code>DOMImplementation</code> inclut une méthode <code>createDocumentType</code> avec laquelle des DTD peuvent être créées pour un ou plusieurs documents gérés par l'implémentation.</span></span></p>
+
+<h2 id="Spécifications"><span lang="fr"><span>Spécifications</span></span></h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-102161490">DOM Level 2 Core: implementation</a></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-102161490">DOM Level 3 Core: implementation</a></li>
+</ul>
+
+<h2 id="Notes_propres_à_Gecko">Notes propres à Gecko</h2>
+
+<ul>
+ <li><span id="result_box" lang="fr"><span>À partir de Gecko 19.0 {{geckoRelease ("19.0")}} la méthode {{domxref ("DOMImplementation.hasFeature", "hasFeature")}} retournera toujours true.</span></span></li>
+</ul>
diff --git a/files/fr/web/api/document/importnode/index.html b/files/fr/web/api/document/importnode/index.html
new file mode 100644
index 0000000000..32bef68f4a
--- /dev/null
+++ b/files/fr/web/api/document/importnode/index.html
@@ -0,0 +1,92 @@
+---
+title: document.importNode
+slug: Web/API/Document/importNode
+tags:
+  - API
+  - Copie
+  - Document
+  - Méthodes
+  - Noeud
+  - Reference
+translation_of: Web/API/Document/importNode
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><span id="result_box" lang="fr"><span>La méthode {{domxref ("Document")}} <code>importNode()</code> crée une nouvelle copie du {{domxref ("Node")}} ou {{domxref ("DocumentFragment")}} spécifié à partir d'un autre document, afin qu'il puisse</span> <span>être inséré dans le document actuel.</span> <span>Il n'est pas encore inclus dans l'arbre des documents;</span> <span>Pour ce faire, vous devez appeler une méthode telle que {{domxref ("Node.appendChild", "appendChild ()")}} ou {{domxref ("Node.insertBefore", "insertBefore ()")}}.</span></span></p>
+
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+
+<pre class="syntaxbox">var <em>node</em> = <em>document</em>.importNode(<em>externalNode</em>, <em>deep</em>);
+</pre>
+
+<dl>
+ <dt><code>externalNode</code></dt>
+ <dd>Le nouveau <code>Node</code> ou <code>DocumentFragment</code> à importer dans le document courant. Après l'importation, le nouveau <code><a href="https://developer.mozilla.org/fr/docs/Web/API/Node/parentNode" title="DOM/Node.parentNode">parentNode</a></code> du noeud est <code>null</code>, <span id="result_box" lang="fr"><span>car il n'a pas encore été inséré dans l'arborescence du document.</span></span></dd>
+ <dt><code>deep</code></dt>
+ <dd>Une valeur booléenne <span id="result_box" lang="fr"><span>qui indique s'il faut ou non importer la totalité de la sous-arborescence DOM provenant de <code>externalNode</code>.</span> <span>Si ce paramètre est <code>true</code> (<em>vrai</em>), alors <code>externalNode</code> et tous ses descendants sont copiés;</span> <span>si <code>false</code> <em>(faux)</em>, seul le nœud unique, <code>externalNode</code>, est importé.</span></span></dd>
+</dl>
+
+<div class="note">
+<p><strong>Note :</strong> Dans la spécification DOM4, <span id="result_box" lang="fr"><span><code>deep</code> est répertorié en tant qu'argument facultatif.</span> <span>S'il est omis, la méthode agit comme si la valeur de <code>deep</code> était <code>true</code>, par défaut, elle utilisait le clonage profond comme comportement par défaut.</span> <span>Pour créer un clone superficiel, la profondeur doit être définie sur <code>false</code>.</span><br>
+ <br>
+ <span>Ce comportement a été modifié dans la dernière spécification, et s'il est omis, la méthode agira comme si la valeur de <code>deep</code> était <code>false</code>.</span> <span>Bien que ce soit toujours facultatif, vous devriez toujours fournir l'argument <code>deep</code> à la fois pour la compatibilité en amont et en aval.</span> <span>Avec Gecko 28.0 {{geckoRelease (28)}}, la console a averti les développeurs de ne pas omettre l'argument.</span> <span>À partir de Gecko 29.0 {{geckoRelease (29)}}), un clone superficiel est défini par défaut au lieu d'un clone profond.</span></span></p>
+</div>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> iframe <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">"iframe"</span><span class="punctuation token">)</span><span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> oldNode <span class="operator token">=</span> iframe<span class="punctuation token">.</span>contentWindow<span class="punctuation token">.</span>document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"myNode"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> newNode <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">importNode</span><span class="punctuation token">(</span>oldNode<span class="punctuation token">,</span> <span class="keyword token">true</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"container"</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>newNode<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p><span id="result_box" lang="fr"><span>Le noeud d'origine n'est pas supprimé du document d'origine.</span> <span>Le noeud importé est un clone de l'original.</span></span></p>
+
+<p> </p>
+
+<p>Les nœuds provenant de documents externes doivent être clonés à l'aide de <a href="/fr/docs/Web/API/Document/importNode" title="La méthode Document importNode() crée une nouvelle copie du Node ou DocumentFragment spécifié à partir d'un autre document, afin qu'il puisse être inséré dans le document actuel. Il n'est pas encore inclus dans l'arbre des documents; Pour ce faire, vous devez appeler une méthode telle que appendChild () ou insertBefore ()."><code>document.importNode()</code></a> (ou adoptés avec <a href="/fr/docs/Web/API/Document/adoptNode" title="Adopte un noeud. Le noeud (et son sous-arbre) est supprimé du document dans lequel il se trouve (le cas échéant) et son  ownerDocument  (document propriétaire) est remplacé par le document en cours. Le noeud peut ensuite être inséré dans le document en cours."><code>document.adoptNode()</code></a>) avant de pouvoir être insérés dans le document courant. Pour en savoir plus sur les problèmes de <a href="/fr/docs/Web/API/Node/ownerDocument" title="La propriété en lecture seule Node.ownerDocument renvoie l'objet document de niveau supérieur pour ce nœud."><code>Node.ownerDocument</code></a>, consultez la <a class="external" href="http://www.w3.org/DOM/faq.html#ownerdoc" rel="noopener">FAQ DOM du W3C</a> (en anglais).</p>
+
+<p>Gecko n'obligeait pas à utiliser <a href="/fr/docs/Web/API/Document/importNode" title="La méthode Document importNode() crée une nouvelle copie du Node ou DocumentFragment spécifié à partir d'un autre document, afin qu'il puisse être inséré dans le document actuel. Il n'est pas encore inclus dans l'arbre des documents; Pour ce faire, vous devez appeler une méthode telle que appendChild () ou insertBefore ()."><code>document.importNode()</code></a> et <a href="/fr/docs/Web/API/Document/adoptNode" title="Adopte un noeud. Le noeud (et son sous-arbre) est supprimé du document dans lequel il se trouve (le cas échéant) et son  ownerDocument  (document propriétaire) est remplacé par le document en cours. Le noeud peut ensuite être inséré dans le document en cours."><code>document.adoptNode()</code></a> avant sa version 1.9. Depuis les versions 1.9 alphas, si un nœud n'est pas adopté ou importé avant d'être utilisé dans un autre document, l'exception <code>WRONG_DOCUMENT_ERR</code> est déclenchée (<code>NS_ERROR_DOM_WRONG_DOCUMENT_ERR</code>). implémentation dans le <a class="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=47903" rel="noopener" title="FIXED: WRONG_DOCUMENT_ERR not being thrown">bug 47903</a>.</p>
+
+<p> </p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">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("DOM WHATWG", "#dom-document-importnode", "document.importNode()")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Core", "core.html#Core-Document-importNode", "document.importNode()")}}</td>
+   <td>{{Spec2("DOM2 Core")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+
+
+<p>{{Compat("api.Document.importNode")}}  </p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("document.adoptNode()")}}</li>
+ <li>{{domxref("Node.appendChild()")}}</li>
+ <li>{{domxref("Node.insertBefore()")}}</li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/web/api/document/index.html b/files/fr/web/api/document/index.html
new file mode 100644
index 0000000000..fa8a1dd365
--- /dev/null
+++ b/files/fr/web/api/document/index.html
@@ -0,0 +1,490 @@
+---
+title: document
+slug: Web/API/Document
+tags:
+  - API
+  - DOM
+  - Document
+  - Interface
+  - Reference
+translation_of: Web/API/Document
+---
+<p>{{ApiRef}}</p>
+
+<p><span id="result_box" lang="fr"><span>L'interface <strong><code>Document</code></strong> représente n'importe quelle page Web chargée dans le navigateur et sert de point d'entrée dans le contenu de la page Web, qui est l'arborescence DOM.</span> <span>L'arborescence DOM inclut des éléments tels que {{HTMLElement ("body")}} <em>(corps)</em> et {{HTMLElement ("table")}} <em>(tableau)</em>, parmi beaucoup d'autres.</span> <span>Il fournit des fonctionnalités globales au document, comme le moyen d'obtenir l'URL de la page et de créer de nouveaux éléments dans le document.</span></span></p>
+
+<p>{{inheritanceDiagram}}</p>
+
+<p><span id="result_box" lang="fr"><span>L'interface Document décrit les propriétés et méthodes communes à tout type de document.</span> <span>En fonction du type de document (HTML, XML, SVG, ...), une API plus grande est disponible : les documents HTML, servis avec le type <code>text/html</code>, implémentent également l'interface {{domxref ("HTMLDocument")}}, alors que</span> l<span>es documents XML et SVG implémentent l'interface {{domxref ("XMLDocument")}}.</span></span></p>
+
+<h2 id="Constructeur"><span lang="fr"><span>Constructeur</span></span></h2>
+
+<dl>
+ <dt>{{domxref("Document.Document","Document()")}}{{non-standard_inline}}</dt>
+ <dd>crée un nouvel objet <code>Document</code> .</dd>
+</dl>
+
+<h2 id="Propri.C3.A9t.C3.A9s" name="Propri.C3.A9t.C3.A9s">Propriétés</h2>
+
+<p><em>Cette interface hérite aussi des interfaces {{domxref("Node")}} et {{domxref("EventTarget")}} .</em></p>
+
+<dl>
+ <dt>{{domxref("Document.all")}} {{Deprecated_inline}} {{non-standard_inline}}</dt>
+ <dd>fournit un accès à tous les éléments du document. <span id="result_box" lang="fr"><span>C'est une interface héritée non standard qui ne doit pas être utilisée.</span></span></dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Document.async")}} {{Deprecated_inline}}</dt>
+ <dd>utilisé avec {{domxref("document.load")}} pour indiquer une requête asynchrone.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Document.characterSet")}} {{readonlyinline}} {{Deprecated_inline}}</dt>
+ <dd>renvoie le jeu de caractères utilisé par le document.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Document.compatMode")}} {{readonlyinline}} {{experimental_inline}}</dt>
+ <dd>indique si le document est rendu en mode <em>Quirks</em> ou <em>Strict</em>.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Document.contentType")}} {{readonlyinline}} {{experimental_inline}}</dt>
+ <dd>Renvoie le type de contenu de l'en-tête MIME du document courant.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Document.doctype")}} {{readonlyinline}}</dt>
+ <dd>Renvoie le DTD (Document Type Definition) du document courant.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Document.documentElement")}} {{readonlyinline}}</dt>
+ <dd>Renvoie l'{{domxref("Element")}} qui est l'enfant direct du document. Pour les documents HTML, il s'agit normalement de l'élément {{HTMLElement("HTML")}}.</dd>
+ <dt>{{domxref("Document.documentURI")}} {{readonlyinline}}</dt>
+ <dd>retroune l'emplacement du document sous la forme d'une chaîne de caractères.</dd>
+ <dt>{{domxref("Document.domConfig")}} {{Deprecated_inline}}</dt>
+ <dd>devrait retourner un objet {{domxref("DOMConfiguration")}} .</dd>
+ <dt>{{domxref("Document.fullscreen")}} {{obsolete_inline}}</dt>
+ <dd><code>true</code> <em>(vrai)</em> quand le document est en {{domxref("Using_full-screen_mode","mode plein écran")}}.</dd>
+ <dt>{{domxref("Document.hidden")}} {{readonlyinline}}</dt>
+ <dd>...</dd>
+ <dt>{{domxref("Document.implementation")}} {{readonlyinline}}</dt>
+ <dd>Renvoie l'implémentation DOM associée au document courant.</dd>
+ <dt>{{domxref("Document.inputEncoding")}} {{readonlyinline}} {{Deprecated_inline}}</dt>
+ <dd>alias de {{domxref("Document.characterSet")}}. Utilisez cette propriété à la place.</dd>
+ <dt>{{domxref("Document.lastStyleSheetSet")}} {{readonlyinline}}</dt>
+ <dd>retourne le nom de l'ensemble de feuilles de style qui a été activé en dernier. <span id="result_box" lang="fr"><span>A la valeur <code>null</code> jusqu'à ce que la feuille de style soit modifiée en définissant la valeur de </span></span> {{domxref("document.selectedStyleSheetSet","selectedStyleSheetSet")}}.</dd>
+ <dt>{{domxref("Document.mozSyntheticDocument")}} {{non-standard_inline}} {{gecko_minversion_inline("8.0")}}</dt>
+ <dd>retourne un {{jsxref("Boolean")}} qui est <code>true</code> <em>(vrai)</em> seulement si le document est synthétique, <span id="result_box" lang="fr"><span>tel qu'une image autonome, une vidéo, un fichier audio ou similaire.</span></span></dd>
+ <dt>{{domxref("Document.mozFullScreenElement")}} {{readonlyinline}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}</dt>
+ <dd>L'élément qui est actuellement affiché en mode plein écran pour ce document.</dd>
+ <dt>{{domxref("Document.mozFullScreenEnabled")}} {{readonlyinline}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}</dt>
+ <dd><code>true</code> <em>(vrai)</em> si l'appel  {{domxref("Element.mozRequestFullscreen()")}}  est réussi dans le document courant.</dd>
+ <dt>{{domxref("Document.pointerLockElement")}} {{readonlyinline}} {{experimental_inline}}</dt>
+ <dd><span id="result_box" lang="fr"><span>renvoie l'ensemble d'éléments en tant que cible pour les événements de la souris lorsque le pointeur est verrouillé.</span> <span><code>null</code> si le verrouillage est en attente, le pointeur est déverrouillé ou la cible se trouve dans un autre document.</span></span></dd>
+ <dt>{{domxref("Document.preferredStyleSheetSet")}} {{readonlyinline}}</dt>
+ <dd>renvoie la page de style préférée spécifiée par l'auteur de la page.</dd>
+ <dt>{{domxref("Document.scrollingElement")}} {{experimental_inline}} {{readonlyinline}}</dt>
+ <dd>retourne une référence à l'{{domxref("Element")}} qui fait défiler le document.</dd>
+ <dt>{{domxref("Document.selectedStyleSheetSet")}}</dt>
+ <dd>renvoie la feuille de style actuellement utilisée.</dd>
+ <dt>{{domxref("Document.styleSheets")}} {{readonlyinline}}</dt>
+ <dd>Renvoie une liste de tous les objets {{domxref("stylesheet")}}<em> (feuilles de styles)</em> du document courant.</dd>
+ <dt>{{domxref("Document.timeline")}} {{readonlyinline}}</dt>
+ <dd>...</dd>
+ <dt>{{domxref("Document.undoManager")}} {{readonlyinline}} {{experimental_inline}}</dt>
+ <dd>...</dd>
+ <dt>{{domxref("Document.visibilityState")}} {{readonlyinline}}</dt>
+ <dd>renvoie une <code>string</code> <em>(chaîne de caractères)</em> <span id="result_box" lang="fr"><span>indiquant l'état de visibilité du document.</span> <span>Les valeurs possibles sont </span></span> <code>visible</code> <span lang="fr"><span>, </span></span> <code>hidden <em>(masqué)</em></code> <span lang="fr"><span>, prerender <em>(pré-rendu)</em> et </span></span> <code>unloaded</code> <em>(</em><span lang="fr"><span><em>déchargées</em>).</span></span></dd>
+ <dt>{{domxref("Document.xmlEncoding")}} {{Deprecated_inline}}</dt>
+ <dd>retourne le codage déterminé par une déclaration XML.</dd>
+ <dt>{{domxref("Document.xmlStandalone")}} {{obsolete_inline("10.0")}}</dt>
+ <dd>renvoie <code>true</code> si la déclaration XML précise que le document doit être autonome (par exemple, une partie externe de la DTD du contenu du document), sinon <code>false</code> <em>(faux)</em>.</dd>
+ <dt>{{domxref("Document.xmlVersion")}} {{obsolete_inline("10.0")}}</dt>
+ <dd>retourne le numéro de la version spécifié dans la déclaration XML ou <code>"1.0"</code> si la déclaration est absente.</dd>
+</dl>
+
+<p>L'interface Document est étendue avec l'interface {{domxref("ParentNode")}} :</p>
+
+<p>{{page("/fr/docs/Web/API/ParentNode","Propriétés")}}</p>
+
+<h3 id="Extensions_du_document_HTML">Extensions du document HTML</h3>
+
+<p>L'interface Document, pour les documents HTML, hérite de l'interface <em>{{domxref("HTMLDocument")}}</em>  ou depuis HTML5, est étendue pour eux.</p>
+
+<dl>
+ <dt>{{domxref("Document.activeElement")}} {{readonlyinline}}</dt>
+ <dd>Renvoie l'élément courant qui a la focus.</dd>
+ <dt>{{domxref("Document.alinkColor")}} {{Deprecated_inline}}</dt>
+ <dd>Renvoie ou définit la couleur des liens actifs du corps du document.</dd>
+ <dt>{{domxref("Document.anchors")}}</dt>
+ <dd>Renvoie une liste de toutes les ancres du document.</dd>
+ <dt>{{domxref("Document.applets")}} {{Deprecated_inline}}</dt>
+ <dd>Renvoie une liste ordonnée des "applets" du document.</dd>
+ <dt>{{domxref("Document.bgColor")}} {{Deprecated_inline}}</dt>
+ <dd><strong>bgColor</strong> renvoie ou définit la couleur d'arrière-plan du document courant.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Document.body")}}</dt>
+ <dd><strong>body</strong> renvoie l'élément  {{HTMLElement("body")}} du document en cours.</dd>
+ <dt>{{domxref("Document.cookie")}}</dt>
+ <dd>Renvoie une liste des cookies du document, séparés par des points virgules, ou définit un cookie.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Document.defaultView")}} {{readonlyinline}}</dt>
+ <dd>Renvoie une référence à l'objet window.</dd>
+ <dt>{{domxref("Document.designMode")}}</dt>
+ <dd>renvoie ou définit les capacités d'édition <span class="short_text" id="result_box" lang="fr"><span>du document entier.</span></span></dd>
+ <dt>{{domxref("Document.dir")}} {{readonlyinline}}</dt>
+ <dd>Assigne / renvoie le sens du texte (rtl/ltr) <em>(de gauche à droite / de droite à gauche)</em> du document.</dd>
+ <dt>{{domxref("Document.domain")}}</dt>
+ <dd>renvoie ou affecte le domaine de l'élément courant.</dd>
+ <dt>{{domxref("Document.embeds")}} {{readonlyinline}}</dt>
+ <dd>renvoie une liste des objets {{HTMLElement('embed')}} inclus dans le document courant.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Document.fgColor")}} {{Deprecated_inline}}</dt>
+ <dd>renvoie ou définit la couleur du texte du document courant.</dd>
+ <dt>{{domxref("Document.forms")}} {{readonlyinline}}</dt>
+ <dd><strong>forms</strong> renvoie une liste des éléments {{HTMLElement("form")}} du document courant</dd>
+ <dt>{{domxref("Document.head")}} {{readonlyinline}}</dt>
+ <dd>Renvoie l'élément {{HTMLElement("head")}} du document.</dd>
+ <dt>{{domxref("Document.height")}} {{non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>renvoie ou définit la hauteur du document courant.</dd>
+ <dt>{{domxref("Document.images")}} {{readonlyinline}}</dt>
+ <dd>renvoie une liste des images du document courant.</dd>
+ <dt>{{domxref("Document.lastModified")}} {{readonlyinline}}</dt>
+ <dd>Renvoie la date de dernière modification du document.</dd>
+ <dt>{{domxref("Document.linkColor")}} {{Deprecated_inline}}</dt>
+ <dd>Renvoie ou définit la couleur des liens du document.</dd>
+ <dt>{{domxref("Document.links")}} {{readonlyinline}}</dt>
+ <dd>Renvoie un tableau de tous les liens du document.</dd>
+ <dt>{{domxref("Document.location")}} {{readonlyinline}}</dt>
+ <dd>Renvoie l'URI (Uniform Ressource Identifier : <em>identifiant uniforme de ressource</em>) du document courant.</dd>
+ <dt>{{domxref("Document.plugins")}} {{readonlyinline}}</dt>
+ <dd>Renvoie une liste des plugins disponibles.</dd>
+ <dt>{{domxref("Document.readyState")}} {{readonlyinline}}  {{gecko_minversion_inline("1.9.2")}}</dt>
+ <dd>retourne l'état du chargement du document.</dd>
+ <dt>{{domxref("Document.referrer")}} {{readonlyinline}}</dt>
+ <dd>Renvoie l'URI de la page qui a amené à cette page.</dd>
+ <dt>{{domxref("Document.scripts")}} {{readonlyinline}}</dt>
+ <dd>renvoie tous les éléments {{HTMLElement("script")}}  sur le document.</dd>
+ <dt>{{domxref("Document.title")}}</dt>
+ <dd>Renvoie le titre du document courant.</dd>
+ <dt>{{domxref("Document.URL")}}  {{readonlyInline}}</dt>
+ <dd>Renvoie une chaîne de caractères contenant l'URL ("Uniform Resource Locator", <em>repère uniforme de ressource</em>) du document courant.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Document.vlinkColor")}} {{Deprecated_inline}}</dt>
+ <dd>Renvoie ou définit la couleur des liens visités du document.</dd>
+ <dt>{{domxref("Document.width")}} {{non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Renvoie la largeur du document courant.</dd>
+</dl>
+
+<h3 id="Gestionnaire_d'évènements">Gestionnaire d'évènements</h3>
+
+<dl>
+ <dt>{{domxref("Document.onafterscriptexecute")}} {{non-standard_inline}}</dt>
+ <dd>représente le code de gestion d'évènements pour l'évènement {{event("afterscriptexecute")}}</dd>
+ <dt>{{domxref("Document.onbeforescriptexecute")}} {{non-standard_inline}}</dt>
+ <dd>retourne le code de gestion d'évènements pour l'évènement {{event("beforescriptexecute")}} .</dd>
+ <dt>{{domxref("Document.oncopy")}} {{non-standard_inline}}</dt>
+ <dd>représente le code de gestion d'évènements pour l'évènement {{event("copy")}} .</dd>
+ <dt>{{domxref("Document.oncut")}} {{non-standard_inline}}</dt>
+ <dd>représente le code de gestion d'évènements pour l'évènement {{event("cut")}} .</dd>
+ <dt>{{domxref("Document.onfullscreenchange")}}</dt>
+ <dd>est un  {{domxref("EventHandler")}} <em>( gestionnaire d'évènements)</em> représentant le code à appeler quand l'élément {{event("fullscreenchange")}} est relevé.</dd>
+ <dt>{{domxref("Document.onfullscreenerror")}}</dt>
+ <dt>{{domxref("Document.onfullscreenchange")}}</dt>
+ <dd>est un  {{domxref("EventHandler")}} <em>( gestionnaire d'évènements)</em> représentant le code à appeler quand l'élément {{event("fullscreenerror")}} est relevé.</dd>
+ <dt>{{domxref("Document.onpaste")}} {{non-standard_inline}}</dt>
+ <dd>représente le code de gestion d'évènements pour l'évènement {{event("paste")}} .</dd>
+ <dt>{{domxref("Document.onpointerlockchange")}} {{experimental_inline}}</dt>
+ <dd>représente le code de gestion d'évènements pour l'évènement {{event("pointerlockchange")}} .</dd>
+ <dt>{{domxref("Document.onpointerlockerror")}} {{experimental_inline}}</dt>
+ <dd>représente le code de gestion d'évènements pour l'évènement {{event("pointerlockerror")}} .</dd>
+ <dt>{{domxref("Document.onreadystatechange")}} {{gecko_minversion_inline("1.9.2")}}</dt>
+ <dd>représente le code de gestion d'évènements pour l'évènement {{event("readystatechange")}} .</dd>
+ <dt>{{domxref("Document.onselectionchange")}} {{experimental_inline}}</dt>
+ <dd>est un  {{domxref("EventHandler")}} <em>( gestionnaire d'évènements)</em> représentant le code à appeler quand l'élément {{event("selectionchange")}} est relevé.</dd>
+ <dt>{{domxref("Document.onvisibilitychange")}}</dt>
+ <dd>est un  {{domxref("EventHandler")}} <em>( gestionnaire d'évènements)</em> représentant le code à appeler quand l'élément {{event("visibilitychange")}} est relevé.</dd>
+ <dt>{{domxref("Document.onwheel")}} {{non-standard_inline}}</dt>
+ <dd>représente le code de gestion d'évènements pour l'évènement {{event("wheel")}} .</dd>
+</dl>
+
+<p>L'interface <code>Document</code> est étendue avec l'interface {{domxref("GlobalEventHandlers")}} :</p>
+
+<p>{{Page("/fr/docs/Web/API/GlobalEventHandlers", "Propriétés")}}</p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em><span id="result_box" lang="fr"><span>Cette interface hérite également des interfaces {{domxref ("Node")}} et {{domxref ("EventTarget")}}.</span></span></em></p>
+
+<dl>
+ <dt>{{domxref("Document.adoptNode()")}}</dt>
+ <dd><span class="short_text" id="result_box" lang="fr"><span>adopte le noeud d'un document externe.</span></span></dd>
+ <dt>{{domxref("Document.captureEvents()")}} {{Deprecated_inline}}</dt>
+ <dd>voir {{domxref("Window.captureEvents")}}.</dd>
+ <dt>{{domxref("Document.caretPositionFromPoint()")}}{{experimental_inline}}</dt>
+ <dd><span id="result_box" lang="fr"><span>obtient le {{domxref ("CaretPosition")}} aux ou près des coordonnées spécifiées.</span></span></dd>
+ <dt>{{domxref("Document.caretRangeFromPoint()")}}{{non-standard_inline}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Obtient un objet {{Domxref ("Range")}} pour le fragment de document sous les coordonnées spécifiées.</span></span></dd>
+ <dt>{{domxref("Document.createAttribute()")}}</dt>
+ <dd>Crée un nouvel objet {{domxref("Attr")}} et le renvoie.</dd>
+ <dt>{{domxref("Document.createAttributeNS()")}}</dt>
+ <dd>Crée un nouveau noeud dans l'espace nom donné et le renvoie.</dd>
+ <dt>{{domxref("Document.createCDATASection()")}}</dt>
+ <dd>Crée un nouveau nœud CDATA et le renvoie.</dd>
+ <dt>{{domxref("Document.createComment()")}}</dt>
+ <dd>Crée un nouveau nœud de commentaire et le renvoie.</dd>
+ <dt>{{domxref("Document.createDocumentFragment()")}}</dt>
+ <dd>Crée un nouveau fragment de document.</dd>
+ <dt>{{domxref("Document.createElement()")}}</dt>
+ <dd>Crée un nouvel élément avec l'étiquette spécifiée.</dd>
+ <dt>{{domxref("Document.createElementNS()")}}</dt>
+ <dd>Crée un nouvel élément du type et avec l'URI d'espace de nom spécifiés.</dd>
+ <dt>{{domxref("Document.createEntityReference()")}} {{obsolete_inline}}</dt>
+ <dd>Crée un nouvel objet de référence à une entité et le renvoie.</dd>
+ <dt>{{domxref("Document.createEvent()")}}</dt>
+ <dd>Crée un nouvel évènement.</dd>
+ <dt>{{domxref("Document.createNodeIterator()")}}</dt>
+ <dd>crée un objet {{domxref("NodeIterator")}} .</dd>
+ <dt>{{domxref("Document.createProcessingInstruction()")}}</dt>
+ <dd>crée un nouvel objet {{domxref("ProcessingInstruction")}} .</dd>
+ <dt>{{domxref("Document.createRange()")}}</dt>
+ <dd>Crée un objet {{domxref("Range")}} .</dd>
+ <dt>{{domxref("Document.createTextNode()")}}</dt>
+ <dd>Crée un nœud de texte.</dd>
+ <dt>{{domxref("Document.createTouch()")}} {{Deprecated_inline}}</dt>
+ <dd>crée un objet {{domxref("Touch")}}</dd>
+ <dt>{{domxref("Document.createTouchList()")}}</dt>
+ <dd>crée un objet {{domxref("TouchList")}}</dd>
+ <dt>{{domxref("Document.createTreeWalker()")}}</dt>
+ <dd>Crée un objet {{domxref("TreeWalker")}} .</dd>
+ <dt>{{domxref("Document.elementFromPoint()")}}{{experimental_inline}}</dt>
+ <dd>Renvoie l'élément visible aux coordonnées spécifiées.</dd>
+ <dt>{{domxref("Document.elementsFromPoint()")}}{{experimental_inline}}</dt>
+ <dd>Renvoie un tableau de tous les éléments aux coordonnées spécifiées.</dd>
+ <dt>{{domxref("Document.enableStyleSheetsForSet()")}}</dt>
+ <dd>active les feuilles de style pour l'ensemble de feuilles de style spécifié.</dd>
+ <dt>{{domxref("Document.exitPointerLock()")}} {{experimental_inline}}</dt>
+ <dd>Supprime le verrou du pointeur.</dd>
+ <dt>{{domxref("Document.getAnimations()")}} {{experimental_inline}}</dt>
+ <dd>retourne un tableau de tous les objets {{domxref("Animation")}} actuels, dont les éléments cibles sont les descendants de ce <code>document</code>.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Document.getElementsByClassName()")}}</dt>
+ <dd>Renvoie une liste des éléments ayant le nom de classe donné.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Document.getElementsByTagName()")}}</dt>
+ <dd>Renvoie une liste des éléments ayant le nom de balise donné.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Document.getElementsByTagNameNS()")}}</dt>
+ <dd>Renvoie une liste des éléments du nom de balise et de l'espace de noms spécifiés.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Document.importNode()")}}</dt>
+ <dd>Renvoie une copie (un clone) d'un élément provenant d'un document externe.</dd>
+ <dt>{{domxref("Document.normalizeDocument()")}} {{obsolete_inline}}</dt>
+ <dd>remplace les entités, normalise les noeuds de texte, etc.</dd>
+ <dt>{{domxref("Document.registerElement()")}} {{experimental_inline}}</dt>
+ <dd><span class="short_text" id="result_box" lang="fr"><span>Enregistre un composant Web.</span></span></dd>
+ <dt>{{domxref("Document.releaseCapture()")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Libère la capture de la souris en cours s'il s'agit d'un élément de ce document.</span></span></dd>
+ <dt>{{domxref("Document.releaseEvents()")}} {{non-standard_inline}} {{Deprecated_inline}}</dt>
+ <dd>voir {{domxref("Window.releaseEvents()")}}.</dd>
+ <dt>{{domxref("Document.routeEvent()")}} {{non-standard_inline}} {{obsolete_inline(24)}}</dt>
+ <dd>Voir {{domxref("Window.routeEvent()")}}.</dd>
+ <dt>{{domxref("Document.mozSetImageElement()")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Vous permet de modifier l'élément utilisé comme image d'arrière-plan pour un ID d'élément spécifié.</span></span></dd>
+</dl>
+
+<p>L'interface <code>Document</code> est étendue avec l'interface {{domxref("ParentNode")}} :</p>
+
+<dl>
+ <dt>{{domxref("document.getElementById","document.getElementById(String id)")}}</dt>
+ <dd>retourne une référence d'objet à l'élément identifié.</dd>
+ <dt>{{domxref("document.querySelector","document.querySelector(String selector)")}} {{gecko_minversion_inline("1.9.1")}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Renvoie le premier noeud <code>Element</code> dans le document, dans l'ordre du document, qui correspond aux sélecteurs spécifiés.</span></span></dd>
+ <dt>{{domxref("document.querySelectorAll","document.querySelectorAll(String selector)")}} {{gecko_minversion_inline("1.9.1")}}</dt>
+ <dd>retourne une liste de tous les noeuds éléments inclus dans le document qui correspondent aux sélecteurs spécifiés.</dd>
+</dl>
+
+<p>L'interface Document est étendue avec l'interface  {{domxref("XPathEvaluator")}} :</p>
+
+<dl>
+ <dt>{{domxref("document.createExpression","document.createExpression(String expression, XPathNSResolver resolver)")}}</dt>
+ <dd>compile une <code><a href="https://developer.mozilla.org/fr/docs/Web/API/XPathExpression" title="XPathExpression">XPathExpression</a></code> qui peut ensuite être utilisée pour des évaluations (répétées).</dd>
+ <dt>{{domxref("document.createNSResolver","document.createNSResolver(Node resolver)")}}</dt>
+ <dd>crée un objet {{domxref("XPathNSResolver")}} .</dd>
+ <dt>{{domxref("document.evaluate","document.evaluate(String expression, Node contextNode, XPathNSResolver resolver, Number type, Object result)")}}</dt>
+ <dd>évalue l'expression XPath .</dd>
+</dl>
+
+<h3 id="Extensions_pour_les_documents_HTML">Extensions pour les documents HTML</h3>
+
+<dl>
+ <dt>{{domxref("document.clear()")}} {{non-standard_inline}} {{Deprecated_inline}}</dt>
+ <dd><span id="result_box" lang="fr"><span>dans la majorité des navigateurs modernes, y compris les versions récentes de Firefox et Internet Explorer, cette méthode ne fait rien.</span></span></dd>
+ <dt>{{domxref("document.close()")}}</dt>
+ <dd><span class="short_text" id="result_box" lang="fr"><span>ferme un flux de document pour l'écriture.</span></span></dd>
+ <dt>{{domxref("document.execCommand","document.execCommand(String command[, Boolean showUI[, String value]])")}}</dt>
+ <dd>Sur un document modifiable, exécute une commande de formatage.</dd>
+ <dt>{{domxref("document.getElementsByName","document.getElementsByName(String name)")}}</dt>
+ <dd>retourne une liste d'éléments ayant le nom donné.</dd>
+ <dt>{{domxref("document.getSelection()")}}</dt>
+ <dd>retourne un objet {{domxref("Selection")}} relatif au texte sélectionné dans le document.</dd>
+ <dt>{{domxref("document.hasFocus()")}}</dt>
+ <dd>retourne <code>true</code> (vrai) si le focus est actuellement localisé n'importe où sur le document spécifié.</dd>
+ <dt>{{domxref("document.open()")}}</dt>
+ <dd>Ouvre un flux pour l'écriture dans le document.</dd>
+ <dt>{{domxref("document.queryCommandEnabled","document.queryCommandEnabled(String command)")}}</dt>
+ <dd>Renvoie <code>true</code> si la commande de formatage peut être exécutée sur la plage courante.</dd>
+ <dt>{{domxref("document.queryCommandIndeterm","document.queryCommandIndeterm(String command)")}}</dt>
+ <dd>Renvoie <code>true</code> si la commande de formatage est dans un état indéterminé sur la plage courante.</dd>
+ <dt>{{domxref("document.queryCommandState","document.queryCommandState(String command)")}}</dt>
+ <dd>Renvoie <code>true</code> si la commande de formatage a été exécutée sur la plage courante.</dd>
+ <dt>{{domxref("document.queryCommandSupported","document.queryCommandSupported(String command)")}}</dt>
+ <dd>retourne <code>true</code> <em>(vrai)</em> si la commande de formatage est supportée sur la plage courante.</dd>
+ <dt>{{domxref("document.queryCommandValue","document.queryCommandValue(String command)")}}</dt>
+ <dd>renvoie la valeur courante de la plage en cours pour une commande de formatage.</dd>
+ <dt>{{domxref("document.write","document.write(String text)")}}</dt>
+ <dd>Écrit du texte dans le document.</dd>
+ <dt>{{domxref("document.writeln","document.writeln(String text)")}}</dt>
+ <dd>Écrit une ligne de texte dans le document.</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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Page Visibility API', '#onvisiblitychange-event-handler', 'onvisibilitychange')}}</td>
+   <td>{{Spec2('Page Visibility API')}}</td>
+   <td>Ajoute <code>onvisibilitychange.</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selection API', '', 'Extend Document and GlobalEventHandlers')}}</td>
+   <td>{{Spec2('Selection API')}}</td>
+   <td>Ajoute <code>onselectstart</code>et <code>onselectionchange</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1','#i-Document','Document')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale pour l'interface</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core','#i-Document','Document')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Remplace DOM 1</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core','#i-Document','Document')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>remplace DOM 2</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#interface-document','Document')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>en vue de remplacer DOM 3</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','dom.html#the-document-object','Document')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Transforme l'interface {{domxref("HTMLDocument")}} en une extension de <code>Document</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 XPath','xpath.html#XPathEvaluator','XPathEvaluator')}}</td>
+   <td>{{Spec2('DOM3 XPath')}}</td>
+   <td>Definit l'interface {{domxref("XPathEvaluator")}} qui étend le document.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Page Visibility API', '#sec-document-interface', 'Document')}}</td>
+   <td>{{Spec2('Page Visibility API')}}</td>
+   <td>Étend l'interface <code>Document</code>  avec les attributs <code>visibilityState</code> et <code>hidden</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML Editing','#dom-document-getselection','Document')}}</td>
+   <td>{{Spec2('HTML Editing')}}</td>
+   <td>Étend l'interface <code>Document</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View','#extensions-to-the-document-interface','Document')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Étend l'interface <code>Document</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM','#extensions-to-the-document-interface','Document')}}</td>
+   <td>{{Spec2('CSSOM')}}</td>
+   <td>Étend l'interface <code>Document</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Lock','#extensions-to-the-document-interface','Document')}}</td>
+   <td>{{Spec2('Pointer Lock')}}</td>
+   <td>Étend l'interface <code>Document</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs_notes">Compatibilité des navigateurs notes</h2>
+
+<h3 id="Notes_concernant_Firefox">Notes concernant Firefox :</h3>
+
+<p>Mozilla définit un ensemble de propriétés non-standard créées seulement pour le contenu XUL :</p>
+
+<dl>
+ <dt>{{domxref("document.currentScript")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>retourne l'élément {{HTMLElement("script")}} qui est en cours d'exécution.</dd>
+ <dt>{{domxref("document.documentURIObject")}} {{gecko_minversion_inline("1.9")}}</dt>
+ <dd>(extensions Mozilla seulement) retourne l'objet  {{Interface("nsIURI")}} représentant l'URI du document. Cette propriété <span id="result_box" lang="fr"><span>a seulement une signification spéciale dans le code JavaScript privilégié (avec les privilèges UniversalXPConnect).</span></span></dd>
+ <dt>{{domxref("document.popupNode")}}</dt>
+ <dd>retourne le noeud ouvert lors de l'appel d'une fenêtre contextuelle.</dd>
+ <dt>{{domxref("document.tooltipNode")}}</dt>
+ <dd>retourne le noeud <span class="short_text" id="result_box" lang="fr"><span>qui est la cible de l'info-bulle actuelle.</span></span></dd>
+</dl>
+
+<p>Mozilla a également défini quelques méthodes non standard :</p>
+
+<dl>
+ <dt>{{domxref("document.execCommandShowHelp")}} {{obsolete_inline("14.0")}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Cette méthode n'a jamais rien fait et a toujours lancé une exception, elle a donc été supprimée dans Gecko 14.0 {{geckoRelease ("14.0")}}.</span></span></dd>
+ <dt>{{domxref("document.getBoxObjectFor")}} {{obsolete_inline}}</dt>
+ <dd>Utiliser la méthode {{domxref("Element.getBoundingClientRect()")}} à la place.</dd>
+ <dt>{{domxref("document.loadOverlay")}} {{Fx_minversion_inline("1.5")}}</dt>
+ <dd>charge dynamiquement un <a href="https://developer.mozilla.org/fr/docs/Overlays_XUL" title="XUL_Overlays">XUL overlay</a> . Celui-ci fonctionne seulement dans les documents XUL.</dd>
+ <dt>{{domxref("document.queryCommandText")}} {{obsolete_inline("14.0")}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Cette méthode n'a jamais rien fait d'autre que de lancer une exception, elle a donc été supprimée dans Gecko 14.0 {{geckoRelease ("14.0")}}.</span></span></dd>
+</dl>
+
+<h3 id="Notes_concernant_Internet_Explorer"><span lang="fr"><span>Notes concernant Internet Explorer</span></span></h3>
+
+<p><span lang="fr"><span>Microsoft a défini quelques propriétés non standard :</span></span></p>
+
+<dl>
+ <dt>{{domxref("document.fileSize")}}* {{non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Retourne la taille en octets du document.</span> <span>À partir d'Internet Explorer 11, cette propriété n'est plus prise en charge.</span> <span>Voir </span></span> <a href="http://msdn.microsoft.com/en-us/library/ms533752%28v=VS.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/ms533752%28v=VS.85%29.aspx">MSDN</a>.</dd>
+</dl>
+
+<p><span id="result_box" lang="fr"><span>Internet Explorer ne prend pas en charge toutes les méthodes de l'interface Node dans l'interface Document :</span></span></p>
+
+<dl>
+ <dt>{{domxref("document.contains")}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Pour contourner le problème, <code>document.body.contains ()</code> peut être utilisé.</span></span></dd>
+</dl>
diff --git a/files/fr/web/api/document/keypress_event/index.html b/files/fr/web/api/document/keypress_event/index.html
new file mode 100644
index 0000000000..e0560ef1df
--- /dev/null
+++ b/files/fr/web/api/document/keypress_event/index.html
@@ -0,0 +1,102 @@
+---
+title: keypress
+slug: Web/API/Document/keypress_event
+tags:
+  - DOM
+  - Déprécié
+  - Evènement
+  - KeyboardEvent
+  - Reference
+translation_of: Web/API/Document/keypress_event
+---
+<div>{{APIRef}} {{deprecated_header}}</div>
+
+<p><span class="seoSummary">L'évènement <strong><code>keypress</code></strong> est déclenché lorsqu'une touche produisant un caractère est pressée.</span> Cela concerne les touches qui produisent des caractères alphabétiques, des caractères numériques et des signes de ponctuations. Les touches <kbd>Alt</kbd>, <kbd>Shift</kbd>, <kbd>Ctrl</kbd> ou <kbd>Meta</kbd> ne sont pas concernées.</p>
+
+<div class="blockIndicator warning">
+<p><strong>Attention !</strong> Cet évènement est déprécié et il faudrait plutôt utiliser <code><a href="/fr/docs/Web/API/HTMLElement/beforeinput_event">beforeinput</a></code> ou <code><a href="/fr/docs/Web/API/Document/keydown_event">keydown</a></code>.</p>
+</div>
+
+<table class="properties">
+ <thead>
+ </thead>
+ <tbody>
+  <tr>
+   <th>Interface</th>
+   <td>{{domxref("KeyboardEvent")}}</td>
+  </tr>
+  <tr>
+   <th>Remonte sur les parents (<em>bubbles</em>)</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th>Annulable</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th>Action par défaut</th>
+   <td>Cela peut varier : évènement <code>keypress</code> ; ouverture du système de composition du texte ; évènements <code><a href="/fr/docs/Web/API/Element/blur_event">blur</a></code> et <code><a href="/fr/docs/Web/API/Element/focus_event">focus</a></code> ; évènement <a href="/fr/docs/Web/API/Element/DOMActivate_event"><code>DOMActivate</code> </a>{{deprecated_inline}}; autre évènement.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Ajout_d'un_addEventListener">Ajout d'un <code>addEventListener</code></h3>
+
+<p>Dans cet exemple, on affiche la valeur de {{domxref("KeyboardEvent.code")}} lorsqu'on appuie sur une touche :</p>
+
+<pre class="brush: html">&lt;p&gt;
+   Cliquez dans l'iframe pour lui passer le focus
+   puis appuyez sur des touches du clavier.
+&lt;/p&gt;
+&lt;p id="log"&gt;&lt;/p&gt;</pre>
+
+<pre class="brush: js">const log = document.getElementById('log');
+
+document.addEventListener('keypress', logKey);
+
+function logKey(e) {
+  log.textContent += ` ${e.code}`;
+}</pre>
+
+<p>{{EmbedLiveSample("addEventListener_keypress_example")}}</p>
+
+<h3 id="Équivalent_onkeypress">Équivalent <code>onkeypress</code></h3>
+
+<pre class="brush: js">document.onkeypress = logKey;</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>{{SpecName('UI Events', '#event-type-keypress')}}</td>
+   <td>{{Spec2('UI Events')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Document.keypress_event")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("GlobalEventHandlers.onkeypress")}}</li>
+ <li>L'interface {{domxref("Element")}} que cet évènement cible</li>
+ <li>Les évènements associés :
+  <ul>
+   <li><code><a href="/fr/docs/Web/API/Document/keydown_event">keydown</a></code></li>
+   <li><code><a href="/fr/docs/Web/API/Document/keyup_event">keyup</a></code></li>
+   <li><code><a href="/fr/docs/Web/API/HTMLElement/beforeinput_event">beforeinput</a></code></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/api/document/lastmodified/index.html b/files/fr/web/api/document/lastmodified/index.html
new file mode 100644
index 0000000000..c9f26ad21b
--- /dev/null
+++ b/files/fr/web/api/document/lastmodified/index.html
@@ -0,0 +1,67 @@
+---
+title: Document.lastModified
+slug: Web/API/Document/lastModified
+translation_of: Web/API/Document/lastModified
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Retourne une chaîne de caractère contenant la date et l'heure à laquelle le présent document a été modifié pour la dernière fois.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>string</var> = document.lastModified;
+</pre>
+
+<h2 id="Example" name="Example">Exemples</h2>
+
+<h3 id="Exemple_1_Utilisation_simple">Exemple #1: Utilisation simple</h3>
+
+<pre class="brush:js">alert(document.lastModified);
+// renvoie: 11/28/2015 16:11:15
+</pre>
+
+<h3 id="Exemple_2_Transformer_lastModified_en_un_objet_de_type_Date">Exemple #2: Transformer <code>lastModified</code> en un objet de type <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Date" title="/en-US/docs/JavaScript/Reference/Global_Objects/Date"><code>Date</code></a></h3>
+
+<pre class="brush:js">var oLastModif = new Date(document.lastModified);
+</pre>
+
+<h3 id="Exemple_3_Transformer_lastModified_en_un_nombre_de_millisecondes_passées_depuis_le_1_Janvier_1970_à_000000_heure_locale.">Exemple #3: Transformer <code>lastModified</code> en un nombre de millisecondes passées depuis le 1 Janvier 1970 à 00:00:00, heure locale.</h3>
+
+<pre class="brush:js">var nLastModif = Date.parse(document.lastModified);
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Veuillez noter qu'en tant que chaîne de caractères, <code>lastModified </code>ne peut être <em>facilement </em>utilisé pour des comparaisons entre les dates modifées des documents. Voici un exemple possible qui montre comment afficher une alerte quand la page change (voir aussi: <a href="/en-US/docs/DOM/document.cookie" title="/en-US/docs/DOM/document.cookie">API des cookies en JavaScript</a>):</p>
+
+<pre class="brush: js">if (Date.parse(document.lastModified) &gt; parseFloat(document.cookie.replace(/(?:(?:^|.*;)\s*last_modif\s*\=\s*([^;]*).*$)|^.*$/, "$1") || "0")) {
+    document.cookie = "last_modif=" + Date.now() + "; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=" + location.pathname;
+    alert("Cette page a changé !");
+}</pre>
+
+<p>… le même exemple, mais en ignorant la première visite:</p>
+
+<pre class="brush: js">var
+
+    nLastVisit = parseFloat(document.cookie.replace(/(?:(?:^|.*;)\s*last_modif\s*\=\s*([^;]*).*$)|^.*$/, "$1")),
+    nLastModif = Date.parse(document.lastModified);
+
+if (isNaN(nLastVisit) || nLastModif &gt; nLastVisit) {
+    document.cookie = "last_modif=" + Date.now() + "; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=" + location.pathname;
+    if (isFinite(nLastVisit)) {
+        alert("Cette page a changé !");
+    }
+}</pre>
+
+<div class="note"><strong>Note:</strong> WebKit renvoie le temps sous forme de chaîne de caractère en UTC; Gecko et Internet Explorer renvoient le temps selon le fuseau horaire local.<br>
+(Voir: <a href="https://bugs.webkit.org/show_bug.cgi?id=4363" title="Bug 4363 – document.lastModified returns date in UTC time, but should return it in local time">Bogue 4363 – document.lastModified renoive la date en UTC, mais devrait la renvoyer selon le fuseau horaire local</a>)</div>
+
+<p>Si vous voulez savoir <strong>si <em>une page externe</em> a changé, </strong>veuillez lire <a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Get_last_modified_date" title="/en-US/docs/Web/API/document.lastModified">ce paragraphe à propos de l'API <code>XMLHttpRequest()</code></a>.</p>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<p>HTML5</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Document.lastModified")}}</p>
diff --git a/files/fr/web/api/document/laststylesheetset/index.html b/files/fr/web/api/document/laststylesheetset/index.html
new file mode 100644
index 0000000000..2f24656c13
--- /dev/null
+++ b/files/fr/web/api/document/laststylesheetset/index.html
@@ -0,0 +1,46 @@
+---
+title: Document.lastStyleSheetSet
+slug: Web/API/Document/lastStyleSheetSet
+tags:
+  - API
+  - DOM
+  - Feuilles de styles
+  - Propriétés
+translation_of: Web/API/Document/lastStyleSheetSet
+---
+<p>{{ APIRef("DOM") }}{{ gecko_minversion_header("1.9") }}</p>
+
+<p>Renvoie le dernier jeu de feuilles de styles activé ; cette valeur de la propriété change chaque fois que la propriété {{ domxref("document.selectedStyleSheetSet") }} est modifiée.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="eval"><em>lastStyleSheetSet</em> = document.lastStyleSheetSet
+</pre>
+
+<p>En retour, <code>lastStyleSheetSet</code> indique le jeu de feuilles de styles qui a été défini le plus récemment. Si le jeu de feuilles de style en cours n'a pas été modifié en définissant {{ domxref("document.selectedStyleSheetSet") }}, la valeur retournée est <code>null</code>.</p>
+
+<div class="note"><strong>Note :</strong> Cette valeur ne doit pas changer lorsque {{ domxref("document.enableStyleSheetsForSet()") }} est appelé.</div>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">var lastSheetSet = document.lastStyleSheetSet;
+if (!lastSheetSet) {
+  lastSheetSet = "Sheet not yet changed";
+}
+console.log("The last sheet set is: " + lastSheetSet);
+</pre>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li>{{ domxref("document.preferredStyleSheetSet") }}</li>
+ <li>{{ domxref("document.selectedStyleSheetSet") }}</li>
+ <li>{{ domxref("document.styleSheetSets") }}</li>
+ <li>{{ domxref("document.enableStyleSheetsForSet()") }}</li>
+</ul>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<ul>
+ <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets" title="http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets">HTML5: Alternate Style Sheets</a></li>
+</ul>
diff --git a/files/fr/web/api/document/location/index.html b/files/fr/web/api/document/location/index.html
new file mode 100644
index 0000000000..afd9341feb
--- /dev/null
+++ b/files/fr/web/api/document/location/index.html
@@ -0,0 +1,111 @@
+---
+title: Document.location
+slug: Web/API/Document/location
+tags:
+  - API
+  - Document
+  - HTML DOM
+  - Propriété
+  - Reference
+  - lecture seule
+translation_of: Web/API/Document/location
+---
+<p><span style="font-size: 14px; line-height: 1.5;">La propriété en lecture seule </span><strong style="font-size: 14px; line-height: 1.5;"><code>Document.location</code></strong><code style="font-size: 14px;"> renvoie un objet</code><span style="font-size: 14px; line-height: 1.5;"> {{domxref("Location")}}, contenant les informations sur l'URL du document et fournit des moyens pour modifier cette URL ou charger une autre URL.</span></p>
+
+<p><span style="font-size: 14px; line-height: 1.5;">Bien que </span><code style="font-size: 14px;">Document.location</code><span style="font-size: 14px; line-height: 1.5;"> soit un objet </span><span style="font-size: 14px; line-height: 1.5;"> </span><code style="font-size: 14px;">Location</code><span style="font-size: 14px; line-height: 1.5;"> en <em>lecture seule</em>, vous pouvez lui assigner un</span><span style="font-size: 14px; line-height: 1.5;"> {{domxref("DOMString")}}. Cela signifie que vous pouvez dans la plupart des cas utiliser document.location comme s'il s'agissait d'une chaîne de caractères: </span><code style="font-size: 14px;">document.location = 'http://www.example.com'</code><span style="font-size: 14px; line-height: 1.5;"> est un synonyme de </span><code style="font-size: 14px;">document.location.href = 'http://www.example.com'</code><span style="font-size: 14px; line-height: 1.5;">.</span></p>
+
+<p><span style="font-size: 14px; line-height: 1.5;">Pour récupérer uniquement l'URL en tant que chaîne de caractères, la propriété </span><span style="font-size: 14px; line-height: 1.5;">{{domxref("document.URL")}} peut également être utilisée.</span></p>
+
+<p><span style="font-size: 14px; line-height: 1.5;">Si le document courant n'est pas un contexte de navigation, la valeur renvoyée est <em>null</em>.</span></p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><em>locationObj</em> = document.location
+document.location = 'http://www.mozilla.org' // équivalent à document.location.href = 'http://www.mozilla.org'
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js notranslate">console.log(document.location);
+// Affiche un string-like
+// "http://www.example.com/juicybits.html" dans la console
+</pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "history.html#the-location-interface", "Document.location")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Pas de changement avec {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "browsers.html#the-location-interface", "Document.location")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonction</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonction</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>L'interface de la valeur renvoyée, {{domxref("Location")}}.</li>
+ <li>Une information similaire mais attachée au contexte de navigation, {{domxref("Window.location")}}</li>
+</ul>
diff --git a/files/fr/web/api/document/mozsetimageelement/index.html b/files/fr/web/api/document/mozsetimageelement/index.html
new file mode 100644
index 0000000000..1c35bcbcc5
--- /dev/null
+++ b/files/fr/web/api/document/mozsetimageelement/index.html
@@ -0,0 +1,81 @@
+---
+title: Document.mozSetImageElement()
+slug: Web/API/Document/mozSetImageElement
+tags:
+  - API
+  - Arrière-plan
+  - CSS
+  - DOM
+  - Image
+  - Méthodes
+translation_of: Web/API/Document/mozSetImageElement
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p>{{ gecko_minversion_header("2.0") }}{{ non-standard_header() }}</p>
+
+<p>Change l'élément utilisé comme arrière-plan CSS par un arrière-plan avec un ID d'élément d'arrière-plan donné.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="eval">document.mozSetImageElement(<em>imageElementId</em>, imageElement);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<ul>
+ <li><code>imageElementId</code> est une chaîne de caractères indiquant le nom d'un élément qui a été spécifié comme une image d'arrière-plan en utilisant la fonction CSS {{ cssxref("-moz-element") }}.</li>
+ <li><code>imageElement</code> est le nouvel élément à utiliser comme arrière-plan correspondant à cette chaîne d'élément image. Spécifiez <code>null</code> pour supprimer l'élément d'arrière-plan.</li>
+</ul>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<p>Cet exemple change l'arrière-plan d'un bloc {{ HTMLElement("div") }} chaque fois que l'utilisateur clique sur le bloc.</p>
+
+<p><a href="/samples/domref/mozSetImageElement.html" title="https://developer.mozilla.org/samples/domref/mozSetImageElement.html">Vue de cet exemple en direct</a>.</p>
+
+<pre class="brush: html">&lt;style type="text/css"&gt;
+  #mybox {
+    background-image: -moz-element(#canvasbg);
+    text-align: center;
+    width: 400px;
+    height: 400px;
+    cursor: pointer;
+  }
+&lt;/style&gt;
+</pre>
+
+<p>Le CSS défini par le bloc {{ HTMLElement("style") }} ci-dessus est utilisé par notre {{ HTMLElement("div") }} pour afficher un élément, ayant l'id "canvasbg", en arrière-plan.</p>
+
+<pre class="brush: js">var c = 0x00;
+function clicked() {
+  var canvas = document.createElement("canvas");
+  canvas.setAttribute("width", 100);
+  canvas.setAttribute("height", 100);
+
+  var ctx = canvas.getContext('2d');
+  ctx.fillStyle = "#" + c.toString(16) + "0000";
+  ctx.fillRect(25, 25, 75, 75);
+
+  c += 0x11;
+  if (c &gt; 0xff) {
+    c = 0x00;
+  }
+
+  document.mozSetImageElement("canvasbg", canvas);
+}
+</pre>
+
+<p>Le code ici est appelé chaque fois que l'utilisateur clique sur l'élément {{ HTMLElement("div") }}. Il crée un nouveau {{ HTMLElement("canvas") }} avec la largeur et la hauteur définies à 100 pixels et le dessine dans un carré de 50 par 50 pixels. Chaque fois que la fonction est appelée, le carré est d'une couleur différente (sa composante rouge est augmentée à chaque fois), donc chaque fois que l'utilisateur clique sur l'élément, le fond est plus lumineux et rempli d'un motif plus lumineux de carreaux rouges.</p>
+
+<p>Une fois le canvas dessiné, <code>document.mozSetImageElement()</code> est appelée pour définir l'arrière-plan de tout CSS en utilisant l'ID "canvasbg" comme ID d'élément d'arrière-plan pour être notre nouveau canvas.</p>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<p>Ne fait partie d'aucune spécification.</p>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li>{{ cssxref("-moz-element") }}</li>
+</ul>
diff --git a/files/fr/web/api/document/mozsyntheticdocument/index.html b/files/fr/web/api/document/mozsyntheticdocument/index.html
new file mode 100644
index 0000000000..443c3ca5e0
--- /dev/null
+++ b/files/fr/web/api/document/mozsyntheticdocument/index.html
@@ -0,0 +1,35 @@
+---
+title: Document.mozSyntheticDocument
+slug: Web/API/Document/mozSyntheticDocument
+tags:
+  - API
+  - DOM
+  - Document
+  - Propriétés
+translation_of: Web/API/Document/mozSyntheticDocument
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p>Indique si le document est synthétique ou non ; c'est-à-dire un document représentant une image autonome, une vidéo, un son ou analogue.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="eval"><em>var isSynthetic</em> = <em>document</em>.mozSyntheticDocument;
+</pre>
+
+<p>En retour, <code>isSynthetic</code> est <code>true</code> (<em>vrai</em>) si le document est synthétique ; sinon, <code>false</code> (<em>faux</em>).</p>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<p>Il peut être utile, si vous avez un élément de menu contextuel que vous souhaitez uniquement afficher pour les documents synthétiques (ou, inversement, pour les documents qui ne sont pas synthétiques).</p>
+
+<pre class="eval">var isSynthetic = document.mozSyntheticDocument;
+
+if (isSynthetic) {
+  /* insert your menu item here */
+}
+</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<p>Ne fait partie d'aucune spécification.</p>
diff --git a/files/fr/web/api/document/onafterscriptexecute/index.html b/files/fr/web/api/document/onafterscriptexecute/index.html
new file mode 100644
index 0000000000..52494ee50e
--- /dev/null
+++ b/files/fr/web/api/document/onafterscriptexecute/index.html
@@ -0,0 +1,48 @@
+---
+title: Document.onafterscriptexecute
+slug: Web/API/Document/onafterscriptexecute
+tags:
+  - API
+  - DOM
+  - Propriétés
+  - scripts
+translation_of: Web/API/Document/onafterscriptexecute
+---
+<div>{{ ApiRef("DOM") }} {{non-standard_header}}</div>
+
+<div> </div>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Lancé lorsqu'un élément {{HTMLElement("script")}} statique achève l'exécution de son script. N'est pas lancé si l'élément est ajouté dynamiquement, par exemple avec appendChild().</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>document.onafterscriptexecute = funcRef;</em>
+</pre>
+
+<p><em>funcRef</em> est une référence de fonction appelée lorsqu'un évènement est lancé. L'attribut de la <code>target</code> (cible) d'évènement est défini sur l'{{domxref("Element")}} script dont l'exécution vient de s'achever.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush:js">function finished(e) {
+  logMessage("Finished script with ID: " + e.target.id);
+}
+
+document.addEventListener("afterscriptexecute", finished, true);
+</pre>
+
+<p><a href="/samples/html/currentScript.html">Voir l'exemple sur une page</a></p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<ul>
+ <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#the-script-element" title="http://www.whatwg.org/specs/web-apps/current-work/#the-script-element">HTML5</a></li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Document.onbeforescriptexecute")}}</li>
+ <li>{{domxref("Document.currentScript")}}</li>
+</ul>
diff --git a/files/fr/web/api/document/onbeforescriptexecute/index.html b/files/fr/web/api/document/onbeforescriptexecute/index.html
new file mode 100644
index 0000000000..f0fc8ee381
--- /dev/null
+++ b/files/fr/web/api/document/onbeforescriptexecute/index.html
@@ -0,0 +1,46 @@
+---
+title: Document.onbeforescriptexecute
+slug: Web/API/Document/onbeforescriptexecute
+tags:
+  - API
+  - DOM
+  - Propriétés
+  - scripts
+translation_of: Web/API/Document/onbeforescriptexecute
+---
+<div>{{ApiRef("DOM")}} {{non-standard_header }}</div>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Lancé lorsque le code dans un élément {{HTMLElement("script")}} déclaré dans un document HTML est sur le point de s'exécuter. N'est pas déclenché si l'élément est ajouté dynamiquement, par exemple avec appendChild().</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>document.onbeforescriptexecute = funcRef;</em>
+</pre>
+
+<p><em>funcRef</em> est une référence de fonction appelée lorsque l'évènement est lancé. L'attribut de la <code>target</code> (<em>cible</em>) d'évènement est défini dans l'{{domxref("Element")}} script qui est sur le point d'être exécuté.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">function starting(e) {
+  logMessage("Starting script with ID: " + e.target.id);
+}
+
+document.addEventListener("beforescriptexecute", starting, true);
+</pre>
+
+<p><a href="/samples/html/currentScript.html">Voir l'exemple sur une page</a></p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<ul>
+ <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#the-script-element" title="http://www.whatwg.org/specs/web-apps/current-work/#the-script-element">HTML5</a></li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Document.onafterscriptexecute")}}</li>
+ <li>{{domxref("Document.currentScript")}}</li>
+</ul>
diff --git a/files/fr/web/api/document/onfullscreenchange/index.html b/files/fr/web/api/document/onfullscreenchange/index.html
new file mode 100644
index 0000000000..2736f848e7
--- /dev/null
+++ b/files/fr/web/api/document/onfullscreenchange/index.html
@@ -0,0 +1,106 @@
+---
+title: Document.onfullscreenchange
+slug: Web/API/Document/onfullscreenchange
+translation_of: Web/API/Document/onfullscreenchange
+---
+<div>{{ApiRef("Fullscreen API")}}</div>
+
+<p>La propriété <code><strong>Document</strong></code><strong><code>.onfullscreenchange</code> </strong>est un gestionnaire d'événement pour l'événement {{event("fullscreenchange")}} qui est lancé lorsque le document entre ou sort du mode plein écran.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>targetDocument</var>.onfullscreenchange = <var>fullscreenChangeHandler</var>;
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">document.onfullscreenchange = function ( event ) {
+  console.log("FULL SCREEN CHANGE")
+};
+document.documentElement.onclick = function () {
+  // requestFullscreen() doit être un gestionnaire d'événement, sinon ça échouera
+  document.documentElement.requestFullscreen();
+}
+</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("Fullscreen", "#handler-document-onfullscreenchange", "onfullscreenchange")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basic</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("47")}}<sup>[1] </sup> (behind <code>full-screen-api.unprefix.enabled</code></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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("47")}}<sup> [1]</sup> (behind <code>full-screen-api.unprefix.enabled</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Depuis Firefox 49, c'était techniquement sur {{domxref("GlobalEventHandlers")}}, mais certains gestionnaires d'événements n'étaient jamais appelés lorsqu'un {{domxref("Element")}} était défini.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{event("fullscreenchange")}}</li>
+ <li>{{domxref("Document.onfullscreenerror")}}</li>
+</ul>
diff --git a/files/fr/web/api/document/onoffline/index.html b/files/fr/web/api/document/onoffline/index.html
new file mode 100644
index 0000000000..c8bfb9026a
--- /dev/null
+++ b/files/fr/web/api/document/onoffline/index.html
@@ -0,0 +1,13 @@
+---
+title: Document.onoffline
+slug: Web/API/Document/onoffline
+tags:
+  - API
+  - DOM
+  - Document
+  - Propriétés
+translation_of: Web/API/Document/onoffline
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>Le gestionnaire d'évènements est appelé lorsqu'un évènement {{event("offline")}} est lancé sur le corps (<em>body</em>) et propagé, quand la propriété <a href="https://developer.mozilla.org/fr/docs/Web/API/NavigatorOnLine/onLine">navigator.onLine</a> change et devient <code>false</code> (<em>fausse</em>).</p>
diff --git a/files/fr/web/api/document/ononline/index.html b/files/fr/web/api/document/ononline/index.html
new file mode 100644
index 0000000000..ba10ffd969
--- /dev/null
+++ b/files/fr/web/api/document/ononline/index.html
@@ -0,0 +1,39 @@
+---
+title: Document.ononline
+slug: Web/API/Document/ononline
+tags:
+  - API
+  - DOM
+  - Document
+  - En ligne
+  - Propriétés
+translation_of: Web/API/Document/ononline
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>Un évènement "<code>online</code>" est lancé sur le <code>&lt;body&gt;</code> (<em>corps</em>) de chaque page quand le navigateur bascule entre les modes online (<em>en ligne</em>) et offline (<em>hors ligne</em>). De plus les évènements se propagent de <code>document.body</code> vers <code>document</code> et finalement sur <code>window</code>. Les deux évènements ne sont pas annulables (vous ne pouvez pas empêcher l'utilisateur de se connecter ou de vous déconnecter).</p>
+
+<p>window.navigator.onLine renvoie un booléen <em>true</em> (<em>vrai</em>) si le navigateur est online et false s'il est définitivement offline (déconnecté du réseau). Les évènements online et offline sont lancés si la valeur de cet attribut change.</p>
+
+<div class="note">
+<p>Il est important de noter que cet événement et cet attribut sont intrinsèquement peu fiables. Un ordinateur peut être connecté à un réseau sans avoir accès à Internet.</p>
+</div>
+
+<p>Vous pouvez enregistrer les écouteurs de ces événements de plusieurs manières habituelles :</p>
+
+<ul>
+ <li>en utilisant <code><a href="https://developer.mozilla.org/en/DOM/element.addEventListener" title="en/DOM/element.addEventListener">addEventListener</a></code> sur <code>window</code>, <code>document</code> ou <code>document.body</code></li>
+ <li>en définissant les propriétés <code>.ononline</code> ou <code>.onoffline</code> sur <code>document</code> ou <code>document.body</code> sur un objet  <code>Function</code> JavaScript. (<strong>Note :</strong> l'utilisation de <code>window.ononline</code> ou <code>window.onoffline</code> ne fonctionnera pas pour des raisons de compatibilité).</li>
+ <li>en spécifiant les attributs <code>ononline="..."</code> ou <code>onoffline="..."</code> sur la balise <code>&lt;body&gt;</code>  dans le balisage HTML.</li>
+</ul>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<p>Il existe  <a class="external link-https external-icon" href="https://bugzilla.mozilla.org/attachment.cgi?id=220609">un cas de test simple</a> que vous pouvez exécuter pour vérifier le fonctionnement des évènements.</p>
+
+<h2 id="Example" name="Example">Références</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/NavigatorOnLine/%C3%89v%C3%A8nements_online_et_offline">Évènements online et offline</a></li>
+ <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#event-online">Spécification</a> <a href="http://www.whatwg.org/specs/web-apps/current-work/#event-online">WHATWG Web App</a> (en)</li>
+</ul>
diff --git a/files/fr/web/api/document/open/index.html b/files/fr/web/api/document/open/index.html
new file mode 100644
index 0000000000..a4b16f90e4
--- /dev/null
+++ b/files/fr/web/api/document/open/index.html
@@ -0,0 +1,118 @@
+---
+title: document.open
+slug: Web/API/Document/open
+tags:
+  - API
+  - DOM
+  - Méthodes
+  - Reference
+translation_of: Web/API/Document/open
+---
+<div>{{APIRef("DOM")}}</div>
+
+<div> </div>
+
+<p>La méthode <strong><code>document.open()</code></strong> ouvre un document pour <a href="https://developer.mozilla.org/fr/docs/Web/API/Document/write">l'écriture</a>.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="eval">document.open();
+</pre>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre>// Dans cet exemple, le contenu du document est
+// écrasé au cours de la réinitialisation avec open()
+document.write("&lt;html&gt;&lt;p&gt;supprimez-moi&lt;/p&gt;&lt;/html&gt;");
+document.open();
+// Le document est vide.
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Si un document existe dans la cible, cette méthode le supprime (voir l'exemple ci-dessus).</p>
+
+<p>Par ailleurs, un appel automatique à <code>document.open()</code> est réalisé lorsque <a href="https://developer.mozilla.org/fr/docs/Web/API/Document/write">document.write()</a> est appelé après que la page ait été chargée, bien que ce ne soit pas défini dans la spécification du W3C. <span class="comment">documenter les paramètres à document.open ne figurant pas dans la spécification</span></p>
+
+<p>Cette méthode ne doit pas être confondue avec <a href="https://developer.mozilla.org/fr/docs/Web/API/Window/open">window.open()</a>. <code>document.open</code> permet d'écrire par dessus le document courant ou d'y ajouter du contenu, alors que <code>window.open</code> fournit une manière d'ouvrir une nouvelle fenêtre laissant le document courant intact. Comme <code>window</code> est l'objet, si on appelle juste <code>open(...)</code>, il sera traité comme un appel à <code>window.open(...)</code>. Le document ouvert peut être fermé à l'aide de <a href="https://developer.mozilla.org/fr/docs/Web/API/Document/close">document.close()</a>.</p>
+
+<p>Voir <a href="https://developer.mozilla.org/fr/docs/Mozilla/Gecko/Script_security#Security_checks" title="en/Security check basics">Security check basics</a>  pour plus d'informations sur les principaux.</p>
+
+<p>Si vous ne voulez pas créer une entrée d'historique, remplacez <code>open()</code> par <code>open("text/html", "replace")</code>.</p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">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("DOM2 HTML", "html.html#ID-72161170", "document.open()")}}</td>
+   <td>{{Spec2("DOM2 HTML")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Notes_propres_à_Gecko">Notes propres à Gecko</h2>
+
+<p><span id="result_box" lang="fr"><span>À partir de Gecko 1.9, cette méthode est soumise à la même règle d'origine que les autres propriétés et ne fonctionne pas si cela change l'origine du document.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span>À partir de Gecko 1.9.2, <code>document.open()</code> utilise le <a href="https://developer.mozilla.org/fr/docs/Mozilla/Gecko/Script_security#Security_checks">principal</a> du document dont il utilise l'URI, au lieu de récupérer le principal hors de la pile.</span> <span>Par conséquent, vous ne pouvez plus appeler {{domxref ("document.write ()")}} dans un document non approuvé à partir de chrome, même en utilisant <code><a href="https://developer.mozilla.org/fr/docs/wrappedJSObject">wrappedJSObject</a></code>.</span></span></p>
diff --git a/files/fr/web/api/document/origin/index.html b/files/fr/web/api/document/origin/index.html
new file mode 100644
index 0000000000..54fed5b8e3
--- /dev/null
+++ b/files/fr/web/api/document/origin/index.html
@@ -0,0 +1,106 @@
+---
+title: Document.origin
+slug: Web/API/Document/origin
+tags:
+  - API
+  - DOM
+  - Document
+  - Propriétés
+  - origine
+translation_of: Web/API/Document/origin
+---
+<div>{{APIRef("DOM")}}{{SeeCompatTable}}</div>
+
+<p>La propriété en lecture seule <strong><code>Document.origin</code></strong> renvoie l'origine du document. Dans la plupart des cas, cette propriété est équivalente à  <code>document.defaultView.location.origin</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var origin = document.origin;
+// Sur cette page, renvoie:'https://developer.mozilla.org'
+
+var origin = document.origin;
+// Sur "about:blank", renvoie :'null'
+
+var origin = document.origin;
+// Sur "data:text/html,&lt;b&gt;foo&lt;/b&gt;", renvoie :'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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-document-origin', 'Document.origin')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#origin:document', 'origin for Document objects')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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(41)}}</td>
+   <td>{{CompatNo}} {{bug(931884)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La propriété {{domxref("URLUtils.origin")}}.</li>
+</ul>
diff --git a/files/fr/web/api/document/popupnode/index.html b/files/fr/web/api/document/popupnode/index.html
new file mode 100644
index 0000000000..8b6af6e137
--- /dev/null
+++ b/files/fr/web/api/document/popupnode/index.html
@@ -0,0 +1,43 @@
+---
+title: Document.popupNode
+slug: Web/API/Document/popupNode
+tags:
+  - API
+  - DOM
+  - Document
+  - Fenêtre contextuelle
+  - Propriétés
+  - XUL
+translation_of: Web/API/Document/popupNode
+---
+<div>{{ApiRef("DOM")}}{{deprecated_header}}</div>
+
+<div class="note"><strong>Note :</strong> À partir de {{Gecko("2.0")}}, les auteurs sont encouragés à utiliser la propriété <a href="/fr/docs/Mozilla/Tech/XUL/menupopup">menupopup </a>triggerNode à la place.</div>
+
+<p>Quand une fenêtre contextuelle attachée via les attributs <code>popup</code> ou <code>context</code> est ouverte, la propriété <code>popupNode</code> du document XUL est définie sur le noeud sur lequel vous avez cliqué. <span id="result_box" lang="fr"><span>Il sera la cible de l'événement de souris qui a activé la fenêtre contextuelle.</span> <span>Si elle a été ouverte avec le clavier, le nœud contextuel peut être défini sur null.</span> <span>En règle générale, cette propriété sera vérifiée au cours de la gestion des événements par popupshowing, un menu contextuel pour initialiser le menu basé sur le contexte.</span></span></p>
+
+<p>Cette propriété est uniquement définie pour les fenêtres contextuelles attachées via les attributs <code>popup</code> ou <code>context</code>. Pour les autres types, la valeur n'est pas modifiée. Dans ces autres cas, par exemple lors de l'appel de la méthode <a href="/fr/docs/Mozilla/Tech/XUL/M%C3%A9thodes/showPopup">showPopup</a> de la fenêtre contextuelle, vous pouvez définir la propriété <code>popupNode</code> directement au préalable.</p>
+
+<p>Cette propriété s'applique seulement aux documents XUL.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <var>node</var> = <var>document</var>.popupNode;
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: xml">&lt;menupopup id="toolbarContextMenu"&gt;
+  ...
+  &lt;menuitem oncommand="mailNewsCore.deleteButton(document.popupNode)"&gt;
+  ...
+&lt;/menupopup&gt;
+</pre>
+
+<p>Voir <a class="external" href="http://www.mozilla.org/xpfe/xptoolkit/popups.html" rel="freelink">http://www.mozilla.org/xpfe/xptoolkit/popups.html</a></p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Défini dans {{Source("dom/public/idl/xul/nsIDOMXULDocument.idl#48", "nsIDOMXULDocument.idl")}}. méthode spécifique XUL. Ne fait partie d'aucune spécification.</li>
+</ul>
diff --git a/files/fr/web/api/document/preferredstylesheetset/index.html b/files/fr/web/api/document/preferredstylesheetset/index.html
new file mode 100644
index 0000000000..969a9b39b0
--- /dev/null
+++ b/files/fr/web/api/document/preferredstylesheetset/index.html
@@ -0,0 +1,48 @@
+---
+title: Document.preferredStyleSheetSet
+slug: Web/API/Document/preferredStyleSheetSet
+tags:
+  - API
+  - CSSOM
+  - Document
+  - Feuilles de style
+  - Propriétés
+  - Reference
+translation_of: Web/API/Document/preferredStyleSheetSet
+---
+<div>{{APIRef("DOM")}}{{gecko_minversion_header("1.9")}}</div>
+
+<p>Retourne la feuille de style préférée, telle que définie par l'auteur de la page.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>preferredStyleSheetSet</var> = document.preferredStyleSheetSet
+</pre>
+
+<p>Au retour, <code>preferredStyleSheetSet</code> indique la feuille de style préférée par l'auteur. Ceci est déterminé par l'ordre des déclarations des feuilles de style et par l'entête HTTP intitulé <code>Default-Style</code>.</p>
+
+<p>En l'absence de feuille de style préférée, une chaine vide ("") est retournée.</p>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">if (document.preferredStyleSheetSet) {
+  console.log("La feuille de style préférée est : " + document.preferredStyleSheetSet);
+} else {
+  console.log("Il n'y a pas de feuille de style préférée.");
+}
+</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<ul>
+ <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets" title="http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets">HTML5: Alternate Style Sheets</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("document.lastStyleSheetSet")}}</li>
+ <li>{{domxref("document.selectedStyleSheetSet")}}</li>
+ <li>{{domxref("document.styleSheetSets")}}</li>
+ <li>{{domxref("document.enableStyleSheetsForSet()")}}</li>
+</ul>
diff --git a/files/fr/web/api/document/querycommandstate/index.html b/files/fr/web/api/document/querycommandstate/index.html
new file mode 100644
index 0000000000..7875db98fb
--- /dev/null
+++ b/files/fr/web/api/document/querycommandstate/index.html
@@ -0,0 +1,101 @@
+---
+title: Document.queryCommandState()
+slug: Web/API/Document/queryCommandState
+tags:
+  - API
+  - DOM
+  - Document
+translation_of: Web/API/Document/queryCommandState
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">queryCommandState(String command)
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>TBD</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('HTML Editing','#execcommand()','execCommand')}}</td>
+   <td>{{Spec2('HTML Editing')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("HTMLElement.contentEditable")}}</li>
+ <li>{{domxref("document.designMode")}}</li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Editable_content/Rich-Text_Editing_in_Mozilla">Rich-Text Editing in Mozilla</a></li>
+ <li>Les bogues du navigateur liés à <code>queryCommandState()</code>: <a href="https://github.com/guardian/scribe/blob/master/BROWSERINCONSISTENCIES.md#documentquerycommandstate">Scribe's "Browser Inconsistencies" documentation</a></li>
+</ul>
diff --git a/files/fr/web/api/document/querycommandsupported/index.html b/files/fr/web/api/document/querycommandsupported/index.html
new file mode 100644
index 0000000000..a46e4374d5
--- /dev/null
+++ b/files/fr/web/api/document/querycommandsupported/index.html
@@ -0,0 +1,125 @@
+---
+title: Document.queryCommandSupported()
+slug: Web/API/Document/queryCommandSupported
+tags:
+  - API
+  - Commandes
+  - DOM
+  - Document
+  - Méthodes
+  - editeur
+translation_of: Web/API/Document/queryCommandSupported
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p>La méthode <code><strong>Document.queryCommandSupported()</strong></code> indique si la commande d'éditeur spécifiée est prise en charge par le navigateur.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>isSupported</var> = document.queryCommandSupported(<var>command</var>);
+</pre>
+
+<dl>
+ <dt>
+ <h3 id="Paramètres">Paramètres</h3>
+ </dt>
+ <dt><code>command</code></dt>
+ <dd>La commande pour laquelle on veut déterminer si elle est prise en charge.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Renvoie un {{jsxref("Boolean")}} qui est <code>true</code> (<em>vrai</em>) si la commande est prise en charge et <code>false</code> (<em>faux</em>) sinon.</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>La commande <code>'paste'</code> (<em>coller</em>) renvoie <code>false</code> (<em>faux</em>), pas seulement si la fonctionnalité n'est pas disponible, mais également si le script l'appelant a des privilèges insuffisants pour réaliser l'action <a href="#note1">[1]</a>.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush:js">var flg = document.queryCommandSupported("SelectAll");
+
+if(flg) {
+  // ...Faire quelque chose
+}
+</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 Editing','#querycommandsupported()','querycommandsupported')}}</td>
+   <td>{{Spec2('HTML Editing')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>17</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("9.0")}}<sup>[1]</sup></td>
+   <td>4.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>6.1.6</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("9.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Avant Firefox 41, pour la commande <code>'paste'</code> (<em>coller</em>), Firefox renvoyait incorrectement <code>true</code> (<em>vrai</em>) quand la fonctionnalité coller était disponible même si le script appelant avait des privilèges insuffisants pour réaliser l'action.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Document.execCommand()")}}</li>
+ <li>{{domxref("Document.queryCommandEnabled()")}}</li>
+</ul>
diff --git a/files/fr/web/api/document/queryselector/index.html b/files/fr/web/api/document/queryselector/index.html
new file mode 100644
index 0000000000..b466aaad25
--- /dev/null
+++ b/files/fr/web/api/document/queryselector/index.html
@@ -0,0 +1,178 @@
+---
+title: document.querySelector
+slug: Web/API/Document/querySelector
+tags:
+  - API
+  - CSS
+  - DOM
+  - Document
+  - JavaScript
+  - Méthodes
+  - Sélecteurs
+  - Échappement
+translation_of: Web/API/Document/querySelector
+---
+<div>{{ ApiRef("DOM") }}</div>
+
+<p>La méthode <code><strong>querySelector()</strong></code> de l'interface {{domxref("Document")}} retourne le premier {{domxref("Element")}} dans le document correspondant au sélecteur - ou groupe de sélecteurs - spécifié(s), ou <code>null</code> si aucune correspondance n'est trouvée.</p>
+
+<div class="note">
+<p><strong>Note :</strong> La correspondance <span id="result_box" lang="fr"><span>est effectuée en utilisant le parcours pré-ordonné profondeur-d'abord des nœuds du document, en partant du premier élément dans le balisage du document et en itérant à travers les nœuds en séquence, par ordre du compte de nœuds enfants.</span></span></p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="brush: js">element = document.querySelector(sélecteurs);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>selectors</code> (sélecteurs)</dt>
+ <dd>une  {{domxref("DOMString")}} (<em>chaîne de caractères</em>) qui contient un ou plusieurs sélecteurs à comparer. La chaîne doit être composée de sélecteurs CSS valides ; sinon une exception <code>SYNTAX_ERR</code> est lancée. Voir <a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Localisation_des_%C3%A9l%C3%A9ments_DOM_avec_les_s%C3%A9lecteurs">Localisation des éléments DOM avec les sélecteurs</a> pour plus d'informations sur les sélecteurs et leur gestion.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note :</strong> les caractères qui n'appartiennent pas à la syntaxe standard CSS doivent être échappés par un antislash ("\"). Puisque JavaScript utilise aussi cette barre pour l'échappement, une attention particulière est nécessaire quand des chaînes comprennent ces caractères. Voir {{anch("Caractère spécial d'échappement")}} pour plus d'informations.</p>
+</div>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Un objet {{domxref("Element")}} représentant le premier élément dans le document qui corresponde au jeu de <a href="https://developer.mozilla.org/fr/docs/Web/CSS/S%C3%A9lecteurs_CSS">sélecteurs CSS</a> spécifié, ou <code>null</code> s'il n'y a pas de correspondances.</p>
+
+<p>Si vous avez besoin d'une liste de tous les éléments correspondant aux sélecteurs spécifiés, vous devez utiliser {{domxref("Document.querySelectorAll", "querySelectorAll()")}} à la place.</p>
+
+<h3 id="Exception">Exception</h3>
+
+<dl>
+ <dt><code>SYNTAX_ERR</code></dt>
+ <dd>La syntaxe des sélecteurs spécifiés est invalide.</dd>
+</dl>
+
+<h2 id="Notes" name="Notes">Notes d'utilisation</h2>
+
+<p>Si le sélecteur correspond à un ID et que cet ID est utilisé de façon erronée plusieurs fois dans le document, le premier élément en correspondance est retourné.</p>
+
+<p>Les <a href="https://developer.mozilla.org/fr/docs/Web/CSS/Pseudo-elements">pseudo-éléments</a> CSS ne retourneront jamais aucun élément, comme spécifié dans l'<a href="http://www.w3.org/TR/selectors-api/#grammar">API des sélecteurs</a> (en).</p>
+
+<h3 id="Caractère_spécial_d'échappement"><a id="Caractère spécial d'échappement" name="Caractère spécial d'échappement"></a>Caractère spécial d'échappement</h3>
+
+<p>Pour faire correspondre un ID (<em>identifiant</em>) ou un sélecteur qui ne respecte pas la syntaxe CSS (en utilisant un point virgule ou un espace par exemple), vous devez échapper le caractère avec un antislash (\). Comme l'antislash est un caractère d'échappement en JavaScript, si vous entrez une chaîne de caractères littérale, vous devez donc l'échapper <em>deux fois</em> (une pour la chaîne de caractères JavaScript et une autre fois pour <code>querySelector</code>) :</p>
+
+<pre class="brush: html">&lt;div id="machin\bidule"&gt;&lt;/div&gt;
+&lt;div id="machin:bidule"&gt;&lt;/div&gt;
+
+&lt;script&gt;
+  console.log('#machin\bidule')               // "#machinidule" <code>(\b est le caractère de contrôle retour arrière)</code>
+  document.querySelector('#machin\bidule')    // ne correspond à rien
+
+  console.log('#machin\\bidule')              // "#machin\bidule"
+  console.log('#machin\\\\bidule')            // "#machin\\bidule"
+  document.querySelector('#machin\\\\bidule') // correspond au premier div
+
+  document.querySelector('#machin:bidule')    // ne correspond à rien
+  document.querySelector('#machin\\:bidule')  // correspond au second div
+&lt;/script&gt;
+</pre>
+
+<h2 id="Exemple" name="Exemple">Exemples</h2>
+
+<h3 id="Trouver_le_premier_élément_correspondant_à_une_classe">Trouver le premier élément correspondant à une classe</h3>
+
+<p>Dans cet exemple, le premier élément dans le document qui contient la classe "<code>maclasse</code>" est retourné :</p>
+
+<pre class="brush: js">var el = document.querySelector(".maclasse");</pre>
+
+<h3 id="Notes" name="Notes">Un sélecteur plus complexe</h3>
+
+<p><span id="result_box" lang="fr"><span>Les <em>sélecteurs</em> peuvent également être réellement puissants comme le montre l'exemple suivant.</span> <span>Ici, le premier élément <code>&lt;input name="identifiant"/&gt;</code> dans un <code>&lt;div class="panneau-utilisateur principal"&gt;</code> dans le document est retourné :</span></span></p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> el <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">"div.panneau-utilisateur.principal input[name='</span></code><span id="result_box" lang="fr"><span><code>identifiant</code></span></span><code class="language-js"><span class="string token">']"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">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("Selectors API Level 2", "#interface-definitions", "document.querySelector()")}}</td>
+   <td>{{Spec2("Selectors API Level 2")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td>
+   <td>{{Spec2("Selectors API Level 1")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable()}}</p>
+
+<div id="compat-desktop">
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support de base</td>
+   <td>1</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>3.5</td>
+   <td>8</td>
+   <td>10</td>
+   <td>3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>machin</td>
+   <td>2.1</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9</td>
+   <td>10.0</td>
+   <td>3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Localisation_des_%C3%A9l%C3%A9ments_DOM_avec_les_s%C3%A9lecteurs">Localisation des éléments DOM avec les sélecteurs</a></li>
+ <li>{{domxref("document.querySelectorAll()")}} ;</li>
+ <li>{{domxref("element.querySelector()")}} ;</li>
+ <li>{{domxref("element.querySelectorAll()")}} ;</li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Archive/Add-ons/Code_snippets/QuerySelector" title="en-US/docs/Code snippets/QuerySelector">Extraits de code pour <code>querySelector</code></a></li>
+</ul>
diff --git a/files/fr/web/api/document/queryselectorall/index.html b/files/fr/web/api/document/queryselectorall/index.html
new file mode 100644
index 0000000000..b9c36f07e7
--- /dev/null
+++ b/files/fr/web/api/document/queryselectorall/index.html
@@ -0,0 +1,232 @@
+---
+title: Document.querySelectorAll()
+slug: Web/API/Document/querySelectorAll
+tags:
+  - API
+  - DOM
+  - Document
+  - Méthodes
+  - Sélecteurs
+translation_of: Web/API/Document/querySelectorAll
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La méthode <code><strong>querySelectorAll()</strong></code>  de {{domxref("Element")}} renvoie une {{domxref("NodeList")}} statique représentant une liste des éléments du document qui correspondent au groupe de sélecteurs spécifiés.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Cette méthode est implémentée à partir de {{domxref("ParentNode")}}, méthode  du mixin {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} .</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="brush: js">elements = document.querySelectorAll(selecteurs);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>selecteurs</code></dt>
+ <dd>une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) qui contient un ou plusieurs <a href="https://developer.mozilla.org/fr/docs/Web/CSS/S%C3%A9lecteurs_CSS">sélecteurs CSS</a> ; s'il n'y en a pas, une exception  <code>SyntaxError</code> est lancée. Voir <a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Localisation_des_%C3%A9l%C3%A9ments_DOM_avec_les_s%C3%A9lecteurs">localisation des éléments DOM avec les sélecteurs</a> pour plus d'informations sur l'utilisation des sélecteurs en vue d'identifier les éléments. Plusieurs sélecteurs peuvent être spécifiés, séparés par une virgule.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note : </strong>Les caractères qui ne font pas partie de la syntaxe CSS standard doivent être échappés à l'aide d'une barre oblique inverse. Puisque JavaScript utilise également l'échappement en retour arrière, un soin particulier doit être pris lors de l'écriture de littéraux de chaîne utilisant ces caractères. Voir {{anch ("Echapper des caractères spéciaux")}} pour plus d'informations.</p>
+</div>
+
+<h3 id="Valeur_renvoyée">Valeur renvoyée</h3>
+
+<p>Une {{domxref("NodeList")}} statique contenant un objet {{domxref("Element")}} pour chaque élément qui correspond à au-moins un des sélecteurs spécifiés ou une {{domxref("NodeList")}} vide si aucune correspondance n'est trouvée .</p>
+
+<div class="note">
+<p><strong>Note : </strong> si les <code><em>selectors</em></code> spécifiés contiennent un <a href="https://developer.mozilla.org/fr/docs/Web/CSS/Pseudo-elements">pseudo-element CSS</a>, la liste retournée sera toujours vide.</p>
+</div>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<dl>
+ <dt><code>SyntaxError</code></dt>
+ <dd>la syntaxe des chaînes <code>selectors</code> spécifiés n'est pas valide.</dd>
+</dl>
+
+<h2 id="Example" name="Example">Exemples</h2>
+
+<p>Pour obtenir une {{domxref("NodeList")}} (<em>liste de noeuds</em>) de tous les éléments {{HTMLElement("p")}}  dans le document :</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> matches <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">"p"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Cet exemple renvoie la liste de tous les éléments <code>div</code> du <code>document</code> dont l'attribut de classe a pour valeur "<code>note</code>" ou "<code>alert</code>" :</p>
+
+<pre class="brush: js">var matches = document.querySelectorAll("div.note, div.alert");
+</pre>
+
+<p>Ici, nous obtenons une liste des éléments <code>&lt;p&gt;</code> dont l'élément parent immédiat est un {{domxref("div")}} avec la classe <code>"highlighted"</code> et qui sont situés dans un conteneur dont l'identifiant est <code>"test"</code>.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> container <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">"#test"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> matches <span class="operator token">=</span> container<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">"div.highlighted &gt; p"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Cet exemple utilise un <a href="https://developer.mozilla.org/fr/docs/Web/CSS/S%C3%A9lecteurs_d_attribut">sélecteur d'attribut</a> pour renvoyer une liste d'éléments {{domxref("iframe")}} dans le document qui contient un attribut nommé <code>"data-src"</code> :</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> matches <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">"iframe[data-src]"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Ici, un sélecteur d'attribut est utilisé pour renvoyer une liste d'éléments de liste contenus dans une liste dont l'identifiant est <code>"userlist"</code> lequel a un attribut <code>"data-active"</code> dont la valeur est <code>"1"</code>:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> container <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">"#userlist"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> matches <span class="operator token">=</span> container<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">"li[data-active=1]"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h3 id="Accès_aux_correspondances">Accès aux correspondances</h3>
+
+<p>Une fois que la {{domxref("NodeList")}} des éléments correspondants est renvoyée, vous pouvez l'examiner comme un tableau (<em>array</em>). Si le tableau est vide (c'est quand sa propriété <code>length</code> est 0), alors aucune correspondance n'a été trouvée.</p>
+
+<p>Sinon, vous pouvez simplement utiliser la notation de tableau standard pour accéder au contenu de la liste. Vous pouvez utiliser n'importe quelle instruction de boucle commune, telle que :</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> highlightedItems <span class="operator token">=</span> userList<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">".highlighted"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+highlightedItems<span class="punctuation token">.</span><span class="function token">forEach</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>userItem<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="function token">deleteUser</span><span class="punctuation token">(</span>userItem<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Notes" name="Notes">Notes d'utilisation</h2>
+
+<p><code>querySelectorAll()</code> se comporte différemment des bibliothèques DOM JavaScript les plus courantes, ce qui peut entraîner des résultats inattendus.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<p>Considérez ce HTML, avec ses trois blocs {{HTMLElement("div")}} imbriqués.</p>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>outer<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>select<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>inner<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</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> select <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.select'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> inner <span class="operator token">=</span> select<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">'.outer .inner'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+inner<span class="punctuation token">.</span>length<span class="punctuation token">;</span> <span class="comment token">// 1, pas 0!</span></code></pre>
+
+<p>Dans cet exemple, lors de la sélection de <code>".outer .inner"</code> dans le contexte, le <code>&lt;div&gt;</code> avec la classe <code>"select"</code>, l'élément avec la classe <code>".inner"</code> est toujours trouvé, même si <code>.outer</code> n'est pas un descendant de l'élément de base sur lequel la recherche <code>(".select")</code> est effectuée. Par défaut, <code>querySelectorAll()</code> vérifie uniquement que le dernier élément du sélecteur se trouve dans la portée de la recherche.</p>
+
+<p>La pseudo-classe {{cssxref (":scope")}} restaure le comportement attendu, ne faisant correspondre les sélecteurs que sur les descendants de l'élément de base :</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> select <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.select'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> inner <span class="operator token">=</span> select<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">':scope .outer .inner'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+inner<span class="punctuation token">.</span>length<span class="punctuation token">;</span> <span class="comment token">// 0</span></code></pre>
+
+<h2 id="Spécification">Spécification</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("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>Norme actuelle</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
+   <td>{{Spec2("Selectors API Level 2")}}</td>
+   <td>Pas de changement</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td>
+   <td>{{Spec2("Selectors API Level 1")}}</td>
+   <td>Définition originale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<div id="compat-desktop">
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>1</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>8</td>
+   <td>10</td>
+   <td>3.2 (525.3)</td>
+  </tr>
+  <tr>
+   <td><code>:scope</code> pseudo-class</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>32</td>
+   <td>{{CompatNo}}</td>
+   <td>15<sup>[1]</sup></td>
+   <td>7.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.9.1")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>:scope</code> pseudo-class</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>32</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>7.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Pris en charge dans Opera 15+ en activant les marques "<strong>Enable &lt;style scoped&gt;</strong>" ou "<strong>Enable experimental Web Platform features</strong>" dans <code>chrome://flags</code>.</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+</div>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Localisation_des_%C3%A9l%C3%A9ments_DOM_avec_les_s%C3%A9lecteurs">Localisation des éléments DOM avec les sélecteurs</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/CSS/S%C3%A9lecteurs_d_attribut">Sélecteurs d'attribut</a> dans le guide CSS</li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors">Sélecteurs d'attribut</a> dans la zone d'apprentissage de MDN</li>
+ <li>{{domxref("Element.querySelectorAll")}} et {{domxref("Element.querySelectorAll()")}}</li>
+ <li>{{domxref("document.querySelector")}}</li>
+ <li>{{domxref("DocumentFragment.querySelector()")}} et {{domxref("DocumentFragment.querySelectorAll()")}}</li>
+ <li>{{domxref("ParentNode.querySelector()")}} et {{domxref("ParentNode.querySelectorAll()")}}</li>
+ <li><a href="/en-US/docs/Code_snippets/QuerySelector">Extraits de code pour <code>querySelector</code></a></li>
+</ul>
diff --git a/files/fr/web/api/document/readystate/index.html b/files/fr/web/api/document/readystate/index.html
new file mode 100644
index 0000000000..57f7b28538
--- /dev/null
+++ b/files/fr/web/api/document/readystate/index.html
@@ -0,0 +1,131 @@
+---
+title: Document.readyState
+slug: Web/API/Document/readyState
+tags:
+  - API
+  - DOM
+  - HTML
+  - Référence(2)
+translation_of: Web/API/Document/readyState
+---
+<div>{{APIRef("DOM")}} {{ gecko_minversion_header("1.9.2") }}</div>
+
+<p>La valeur <strong>Document.readyState</strong> est une propriété de {{ domxref("document") }} qui décrit l'état de chargement du document.</p>
+
+<p>À chaque évolution de la valeur, un évenement {{event("readystatechange")}} est émis dans l'objet {{ domxref("document") }}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">var <var>string</var> = <var>document</var>.readyState;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>La variable <code>readyState</code><strong> </strong>peut valoir :</p>
+
+<dl>
+ <dt><code><strong>loading</strong></code></dt>
+ <dd>Le {{ domxref("document") }} est encore en chargement.</dd>
+ <dt><code><strong>interactive</strong></code></dt>
+ <dd>Le document a été chargé, mais les ressources (images, scripts, css..) sont encore en cours d'acquisition. En revanche la structure DOM est générée, et {{event("DOMContentLoaded")}} a été émis.</dd>
+ <dt><code><strong>complete</strong></code></dt>
+ <dd>Le document et toutes les sous-ressources ont été chargés, et {{event("load")}} a été émis.</dd>
+</dl>
+
+<h2 id="Exemples"><span>Exemples</span></h2>
+
+<h3 id="Différents_états_de_chargement">Différents états de chargement</h3>
+
+<pre class="brush: js notranslate"><span>switch (document.readyState) {
+  case "loading":
+    // Encore en chargement.
+    break;
+  case "interactive":
+    // Le DOM est construit, on peut y accéder.
+    var span = document.createElement("span");
+    span.textContent = "A &lt;span&gt; element.";
+    document.body.appendChild(span);
+    break;
+  case "complete":
+    // La page est pleinement chargée.
+    console.log("The first CSS rule is: " + document.styleSheets[0].cssRules[0].cssText);
+    break;
+}</span>
+</pre>
+
+<h3 id="readystatechange_comme_alternative_à_DOMContentLoaded">readystatechange comme alternative à  DOMContentLoaded</h3>
+
+<pre class="brush:js notranslate">// alternative à DOMContentLoaded
+document.onreadystatechange = function () {
+  if (document.readyState == "interactive") {
+    initApplication();
+  }
+}</pre>
+
+<h3 id="readystatechange_comme_alternative_à_load">readystatechange comme alternative à load</h3>
+
+<pre class="brush: js notranslate">// alternative à load
+document.onreadystatechange = function () {
+  if (document.readyState == "complete") {
+    initApplication();
+  }
+}</pre>
+
+<h3 id="readystatechange_comme_event_listener_pour_insérer_ou_modifier_le_DOM_avant_DOMContentLoaded">readystatechange comme event listener pour insérer ou modifier le DOM avant DOMContentLoaded</h3>
+
+<pre class="brush: js notranslate">// Modification du document &lt;body&gt; dès que possible en utilisant un script externe
+var bootstrap = function(evt){
+  if (evt.target.readyState === "interactive") { initLoader(); }
+  else if (evt.target.readyState === "complete") { initApp(); }
+}
+document.addEventListener('readystatechange', bootstrap, false);
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécifications</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "#current-document-readiness", "Document readiness")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.1", "#current-document-readiness", "Document readiness")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#current-document-readiness", "Document readiness")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Spécification initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<div>{{Compat("api.Document.readyState")}}</div>
+
+<div id="compat-desktop"></div>
+
+<p>[1] Ne supporte que 'complete'. Opera Presto notifie 'complete' seulement après l'événement 'load' (dans un ordre incorrect par rapport à la spécification du standard HTML5).</p>
+
+<p>[2] Internet Explorer 9 et 10 ont des bogues quand l'état 'interactive' <a href="https://bugs.jquery.com/ticket/12282">peut être notifié trop tôt</a> avant que le document soit entièrement analysé.</p>
+
+<p>[3] À l'introduction dans IE 4, la propriété était seulement disponible pour les objets document, embed, img, link, object, script, et style. IE 5 a étendu le support à tous les objets élément HTML.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'événement {{event("readystatechange")}}</li>
+ <li>L'événement {{event("DOMContentLoaded")}}</li>
+ <li>L'événement {{event("load")}}</li>
+</ul>
diff --git a/files/fr/web/api/document/referrer/index.html b/files/fr/web/api/document/referrer/index.html
new file mode 100644
index 0000000000..d8699ada15
--- /dev/null
+++ b/files/fr/web/api/document/referrer/index.html
@@ -0,0 +1,23 @@
+---
+title: Document.referrer
+slug: Web/API/Document/referrer
+tags:
+  - API
+  - HTML DOM
+  - Propriété
+  - Reference
+translation_of: Web/API/Document/referrer
+---
+<div>
+ {{APIRef}}</div>
+<h2 id="Syntax" name="Syntax">Résumé</h2>
+<p>Renvoie l'<a href="http://www.w3.org/Addressing/#background">URI</a> de la page de provenance.</p>
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+<pre class="syntaxbox"><var>string</var> = document.referrer;
+</pre>
+<h2 id="Notes" name="Notes">Notes</h2>
+<p>La valeur est une chaîne de caractères vide si l'utilisateur est arrivé directement sur la page (pas grâce à un lien, mais, par exemple, via un marque-page). Étant donné que cette propriété ne retourne qu'une chaîne, elle ne vous donne pas un accès DOM à la page de provenance.</p>
+<h2 id="Specification" name="Specification">Spécification</h2>
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-95229140">DOM Level 2: referrer</a></li>
+</ul>
diff --git a/files/fr/web/api/document/registerelement/index.html b/files/fr/web/api/document/registerelement/index.html
new file mode 100644
index 0000000000..8f937a8180
--- /dev/null
+++ b/files/fr/web/api/document/registerelement/index.html
@@ -0,0 +1,115 @@
+---
+title: Document.registerElement()
+slug: Web/API/Document/registerElement
+tags:
+  - API
+  - Composants Web
+  - DOM
+  - Expérimental(2)
+  - Méthode
+  - Référence(2)
+translation_of: Web/API/Document/registerElement
+---
+<p>{{APIRef("DOM")}} {{Deprecated_header}}</p>
+
+<div class="warning">
+<p><strong>Warning : </strong>document.registerElement() est déprécié en faveur de <a href="https://developer.mozilla.org/fr/docs/Web/API/CustomElementRegistry/define">customElements.define()</a>.</p>
+</div>
+
+<p>{{draft}}</p>
+
+<p>La méthode <code><strong>Document.registerElement()</strong></code> permet d'enregistrer un nouvel <a href="https://developer.mozilla.org/fr/docs/Web/Web_Components/Custom_Elements">élément personnalisé</a> dans le navigateur, et retourne un constructeur pour ce nouvel élément.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Il s'agit d'une technologie expérimentale. Le navigateur dans lequel vous l'utilisez doit être compatible avec les Composants Web. Voir <a href="https://developer.mozilla.org/fr/docs/Web/Web_Components#Activer_les_Web_Components_dans_Firefox">Activer les Composants Web dans Firefox</a>.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>constructeur</em> = document.registerElement(<em>nom-tag</em>, <em>options</em>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><em>nom-tag</em></dt>
+ <dd>
+ <div class="syntaxbox">Le nom de l'élément personnalisé. Le nom doit contenir un tiret (-), par exemple <code>mon-tag</code>.</div>
+ </dd>
+ <dt><em>options {{optional_inline}}</em></dt>
+ <dd>Un objet définissant le prototype sur lequel se base l'élément personnalisé, ainsi qu'un tag existant à étendre.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Voici un exemple très simple :</p>
+
+<pre class="brush: js">var Montag = document.registerElement('mon-tag');
+</pre>
+
+<p>Le nouveau tag est désormais enregistré dans le navigateur. La variable <code>Montag</code> contient un constructeur que vous pouvez utiliser pour créer des éléments <code>mon-tag</code> dans le document de la façon suivante :</p>
+
+<pre class="brush: js">document.body.appendChild(new Montag());</pre>
+
+<p>Ceci insert un élément <code>mon-tag</code> vide qui sera visible si vous utilisez les outils de développement du navigateur. Il ne sera pas visible si vous utilisez la fonction de visualisation de la source du navigateur. Et il ne sera pas visible dans le navigateur tant que vous n'aurez pas ajouter du contenu au tag. Ce qui suit est un exemple d'ajout de contenu au nouveau tag :</p>
+
+<pre class="brush: js">var montag = document.getElementsByTagName("mon-tag")[0];
+montag.textContent = "Je suis un élément mon-tag.";
+</pre>
+
+<h2 id="Compatibilité_avec_les_navigateurs">Compatibilité avec les navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>35</td>
+   <td>31<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>25</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.4.4</td>
+   <td>31<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>25</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Cette API est implantée mais doit être activée dans les préférences.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/Web_Components/Custom_Elements">Éléments personnalisés</a></li>
+</ul>
diff --git a/files/fr/web/api/document/releasecapture/index.html b/files/fr/web/api/document/releasecapture/index.html
new file mode 100644
index 0000000000..8c2a9d5bc5
--- /dev/null
+++ b/files/fr/web/api/document/releasecapture/index.html
@@ -0,0 +1,38 @@
+---
+title: Document.releaseCapture()
+slug: Web/API/Document/releaseCapture
+tags:
+  - API
+  - Capture
+  - DOM
+  - Document
+  - Méthodes
+  - Souris
+translation_of: Web/API/Document/releaseCapture
+---
+<div>{{ ApiRef("DOM") }} {{gecko_minversion_header("2.0")}}</div>
+
+<div> </div>
+
+<p>Libère la capture de la souris si elle est actuellement activée (<em>bouton gauche enfoncé</em>) sur un élément de ce document. L'activation de la capture de la souris sur un élément se fait en appelant {{domxref("element.setCapture()")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox">document.releaseCapture()
+</pre>
+
+<p>Une fois la capture de la souris relâchée, les événements de souris ne seront plus dirigés vers l'élément sur lequel la capture est activée.</p>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<p>Voir l'<a href="/en-US/docs/Web/API/element.setCapture#Example">exemple</a> pour {{domxref("element.setCapture()")}}.</p>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<p>Basé sur l'implémentation Internet Explorer.</p>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("element.setCapture()")}}</li>
+</ul>
diff --git a/files/fr/web/api/document/scripts/index.html b/files/fr/web/api/document/scripts/index.html
new file mode 100644
index 0000000000..1e7fe75f40
--- /dev/null
+++ b/files/fr/web/api/document/scripts/index.html
@@ -0,0 +1,72 @@
+---
+title: Document.scripts
+slug: Web/API/Document/scripts
+translation_of: Web/API/Document/scripts
+---
+<div>
+ {{ApiRef}}</div>
+<h2 id="Summary" name="Summary"> </h2>
+<p>Retourne une liste des scripts (éléments {{HTMLElement("script")}}) présents dans le document. L'objet retourné est une liste du type {{domxref("HTMLCollection")}}.</p>
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+<pre class="syntaxbox"><code>var <em>scriptList</em></code> = document.scripts;
+</pre>
+<p>La liste <code>scriptList</code> est un objet {{domxref("HTMLCollection")}} qu'on peut utiliser comme un tableau pour accéder aux éléments qu'elle contient.</p>
+<h2 id="Exemple">Exemple</h2>
+<p>Cet exemple détecte la présence d'éléments {{HTMLElement("script")}} dans le document.</p>
+<pre class="brush:js">var scripts = document.scripts;
+
+if (scripts.length) {
+  alert("This page has scripts!");
+}
+</pre>
+<h2 id="Specification" name="Specification">Browser compatibility</h2>
+<div>
+ {{CompatibilityTable}}</div>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Feature</th>
+    <th>Chrome</th>
+    <th>Firefox (Gecko)</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari</th>
+   </tr>
+   <tr>
+    <td>Basic support</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatGeckoDesktop("9.0")}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Feature</th>
+    <th>Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Basic support</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatGeckoMobile("9.0")}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h2 id="Specification" name="Specification">Specification</h2>
+<ul>
+ <li>{{spec("http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#dom-document-scripts", "DOM: document scripts")}}</li>
+</ul>
diff --git a/files/fr/web/api/document/scroll_event/index.html b/files/fr/web/api/document/scroll_event/index.html
new file mode 100644
index 0000000000..8e1a13b3db
--- /dev/null
+++ b/files/fr/web/api/document/scroll_event/index.html
@@ -0,0 +1,147 @@
+---
+title: scroll
+slug: Web/API/Document/scroll_event
+tags:
+  - API
+  - Event Handler
+  - Reference
+  - events
+  - requestAnimationFrame
+translation_of: Web/API/Document/scroll_event
+---
+<p>{{APIRef}}<br>
+ <span class="seoSummary">L’évènement <strong><code>scroll</code></strong> (défilement) est émis lorsque l’on fait défiler le document ou un élément.</span></p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th>Bouillonne</th>
+   <td>Pas sur les éléments, mais bouillonne vers la defaultView si émis sur le document</td>
+  </tr>
+  <tr>
+   <th>Annulable</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th>Interface</th>
+   <td>{{domxref("UIEvent")}}</td>
+  </tr>
+  <tr>
+   <th>Cible</th>
+   <td>DefaultView, {{domxref("Document")}}, {{domxref("Element")}}</td>
+  </tr>
+  <tr>
+   <th>Action par défaut</th>
+   <td>Aucune</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="blockIndicator note">
+<p>Note : Sur iOS UIWebViews, les évènements <code>scroll</code> ne sont pas émis pendant le défilement, mais une fois que celui-ci est terminé. Voir <a href="https://github.com/twbs/bootstrap/issues/16202">Bootstrap issue #16202</a>. Safari et WKWebViews ne sont pas affectés par ce bogue.</p>
+</div>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Propriété</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>La cible de l’évènement (la plus haute dans l’arbre DOM).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Le type d’évènement.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>Si l’évènement bouillonne ou non.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>Si l’évènement est annulable ou non.</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td>{{domxref("WindowProxy")}}</td>
+   <td>{{domxref("Document.defaultView")}} (objet <code>window</code> du document)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>0.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="Temporisation_des_évènements_scroll">Temporisation des évènements scroll</h3>
+
+<p>Comme les évènements <code>scroll</code> peuvent être émis à une fréquence élevée, le gestionnaire d’évènements ne devrait pas effectuer des opérations coûteuses en termes de puissance de calcul, telles que des modification du DOM. À la place, il est recommandé de temporiser l’évènement en utilisant {{domxref("window.requestAnimationFrame()", "requestAnimationFrame()")}}, {{domxref("window.setTimeout()", "setTimeout()")}} ou un {{domxref("CustomEvent")}}, comme suit.</p>
+
+<p>Notez, cependant, que les évènements d’interface utilisateur et les frames d’animation sont émises à peu près à la même fréquence, et ainsi l’optimisation qui suit est souvent superflue. Cet exemple optimise l’évènement <code>scroll</code> avec <code>requestAnimationFrame</code>.</p>
+
+<pre class="brush: js notranslate">// Référence: http://www.html5rocks.com/en/tutorials/speed/animations/
+
+var derniere_position_de_scroll_connue = 0;
+var ticking = false;
+
+function faireQuelqueChose(position_scroll) {
+  // faire quelque chose avec la position du scroll
+}
+
+window.addEventListener('scroll', function(e) {
+  derniere_position_de_scroll_connue = window.scrollY;
+
+  if (!ticking) {
+    window.requestAnimationFrame(function() {
+      faireQuelqueChose(derniere_position_de_scroll_connue);
+      ticking = false;
+    });
+  }
+
+  ticking = true;
+});</pre>
+
+<h3 id="Autres_exemples">Autres exemples</h3>
+
+<p>Pour plus d’exemples similaires, voir l’évènement <a href="/en-US/docs/Web/Events/resize#Example">resize</a>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td>Spécification</td>
+   <td>État</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#scrolling-events')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Document.scroll_event")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("GlobalEventHandlers.onscroll")}}</li>
+</ul>
diff --git a/files/fr/web/api/document/selectedstylesheetset/index.html b/files/fr/web/api/document/selectedstylesheetset/index.html
new file mode 100644
index 0000000000..8c66beecb4
--- /dev/null
+++ b/files/fr/web/api/document/selectedstylesheetset/index.html
@@ -0,0 +1,51 @@
+---
+title: Document.selectedStyleSheetSet
+slug: Web/API/Document/selectedStyleSheetSet
+tags:
+  - API
+  - DOM
+  - Document
+  - Feuilles de styles
+  - Propriétés
+translation_of: Web/API/Document/selectedStyleSheetSet
+---
+<p>{{ APIRef("DOM") }}{{ gecko_minversion_header("1.9") }}</p>
+
+<p>Indique le nom du jeu de feuilles de styles actuellement utilisé.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="eval"><em>currentStyleSheetSet</em> = document.selectedStyleSheetSet
+
+document.selectedStyleSheet = <em>newStyleSheetSet</em>
+</pre>
+
+<p>En retour, <code>currentStyleSheetSet</code> indique le nom du jeu de feuilles de styles en cours d'utilisation. Vous pouvez aussi définir celui-ci en utilisant cette propriété.</p>
+
+<p><span id="result_box" lang="fr"><span>La définition de la valeur de cette propriété équivaut à appeler</span></span> {{ domxref("document.enableStyleSheetsForSet()") }} avec la valeur de <code>currentStyleSheetSet</code>, puis de définir la valeur de <code>lastStyleSheetSet</code> sur cette valeur.</p>
+
+<div class="note"><strong>Note :</strong> Cette valeur d'attribut est directe : <span id="result_box" lang="fr"><span>sa modification affectera la valeur de l'attribut.</span></span></div>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">console.log("Current style sheet set: " + document.selectedStyleSheetSet);
+
+document.selectedStyleSheetSet = "Some other style sheet";
+</pre>
+
+<div class="note"><strong>Note :</strong> Cet exemple vous aidera à comprendre la différence de comportement entre la définition de la valeur de <code>selectedStyleSheetSet</code> et l'appel de {{ domxref("document.enableStyleSheetsForSet()") }}.</div>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li>{{ domxref("document.lastStyleSheetSet") }}</li>
+ <li>{{ domxref("document.preferredStyleSheetSet") }}</li>
+ <li>{{ domxref("document.styleSheetSets") }}</li>
+ <li>{{ domxref("document.enableStyleSheetsForSet()") }}</li>
+</ul>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<ul>
+ <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets" title="http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets">HTML5: Alternate Style Sheets</a></li>
+</ul>
diff --git a/files/fr/web/api/document/stylesheets/index.html b/files/fr/web/api/document/stylesheets/index.html
new file mode 100644
index 0000000000..71a48a5f68
--- /dev/null
+++ b/files/fr/web/api/document/stylesheets/index.html
@@ -0,0 +1,55 @@
+---
+title: Document.styleSheets
+slug: Web/API/Document/styleSheets
+translation_of: Web/API/DocumentOrShadowRoot/styleSheets
+---
+<div>{{APIRef}}</div>
+
+<div>La propriété <strong><code>Document.styleSheets </code></strong>est en lecture seule et retourne une liste {{domxref("StyleSheetList")}} d'objets {{domxref("StyleSheet")}}, qui font référence à l'ensemble des feuilles de style contenues ou embarquées dans le document.</div>
+
+<div> </div>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox">var <var>styleSheetList</var> = <em>document</em>.styleSheets;
+</pre>
+
+<p>L'objet retourné est une liste {{domxref("StyleSheetList")}}.</p>
+
+<p>Il s'agit d'une collection ordonnée d'objets {{domxref("StyleSheet")}}. <code><em>styleSheetList</em>.item(<em>index</em>)</code> ou  <code><em>styleSheetList</em>{{ mediawiki.External('<em>index</em>') }}</code> retourne un seul objet stylesheet par son <code>index </code>(<code>index</code> débute par 0).</p>
+
+<h2 id="Specification" name="Specification">Spécification</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>
+ </tbody>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSSOM', '#dom-document-stylesheets', 'styleSheets')}}</td>
+   <td>{{Spec2('CSSOM')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Style', 'stylesheets.html#StyleSheets-DocumentStyle-styleSheets', 'styleSheets')}}</td>
+   <td>{{Spec2('DOM2 Style')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li>{{Link("/en-US/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information")}}</li>
+</ul>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/stylesheets.html#StyleSheets-DocumentStyle-styleSheets">DOM Level 2 Style: styleSheets</a></li>
+</ul>
diff --git a/files/fr/web/api/document/stylesheetsets/index.html b/files/fr/web/api/document/stylesheetsets/index.html
new file mode 100644
index 0000000000..14adac7a18
--- /dev/null
+++ b/files/fr/web/api/document/stylesheetsets/index.html
@@ -0,0 +1,58 @@
+---
+title: Document.styleSheetSets
+slug: Web/API/Document/styleSheetSets
+tags:
+  - API
+  - DOM
+  - Document
+  - Feuilles de styles
+  - Propriétés
+translation_of: Web/API/Document/styleSheetSets
+---
+<div>{{APIRef("DOM")}}{{gecko_minversion_header("1.9")}}</div>
+
+<p>Renvoie une liste active de tous les jeux de feuilles de styles actuellement disponibles.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>sets</em> = document.styleSheetSets
+</pre>
+
+<p>En retour, <code>sets</code> est une liste de jeux de feuilles de styles disponibles.</p>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<p>Étant donné un élément {{HTMLElement("ul")}} (liste) avec l'ID "sheetList", vous pouvez le remplir avec tous les noms de tous les jeux de feuilles de styles disponibles avec un code comme celui-ci :</p>
+
+<pre class="brush:js">var list = document.getElementById("sheetList");
+var sheets = document.styleSheetSets;
+
+list.innerHTML = "";
+
+for (var i = 0; i &lt; sheets.length; i++) {
+  var item = document.createElement("li");
+
+  item.innerHTML = sheets[i];
+  list.appendChild(item);
+}</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>La liste des jeux de feuilles de styles disponibles est construite par énumération de toutes les feuilles de styles disponibles pour le document, dans l'ordre dans lequel elles sont répertoriées dans l'attribut {{domxref("document.styleSheets")}}, en ajoutant le <code>title</code> (<em>titre</em>) de chacune de celles en ayant un. Les doublons sont supprimés de la liste (en utilisant une comparaison sensible à la casse).</p>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<ul>
+ <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets" title="http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets">HTML5 : Alternate Style Sheets</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Stylesheet")}}</li>
+ <li>{{domxref("document.styleSheets")}}</li>
+ <li>{{domxref("document.lastStyleSheetSet")}}</li>
+ <li>{{domxref("document.preferredStyleSheetSet")}}</li>
+ <li>{{domxref("document.selectedStyleSheetSet")}}</li>
+ <li>{{domxref("document.enableStyleSheetsForSet()")}}</li>
+</ul>
diff --git a/files/fr/web/api/document/title/index.html b/files/fr/web/api/document/title/index.html
new file mode 100644
index 0000000000..98cb79bb34
--- /dev/null
+++ b/files/fr/web/api/document/title/index.html
@@ -0,0 +1,54 @@
+---
+title: Document.title
+slug: Web/API/Document/title
+translation_of: Web/API/Document/title
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Obtient ou défini le titre de la page.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>var docTitle</em> = <em>document</em>.title;
+</pre>
+
+<p><code>title</code> est la chaîne contenant le titre de la page. Si le titre a déjà été modifié par <code>document.title</code>, cela retournera cette valeur. Sinon cela retournera le titre par défaut de la page (voir les {{Anch("Notes")}} ci-dessous).</p>
+
+<pre class="syntaxbox"><em>document</em>.title = <em>newTitle</em>;
+</pre>
+
+<p><code>newTitle</code> sera le nouveau titre de la page. Le changement de titre affectera également la valeur de retour de <code>document.title</code>, le titre de la page dans le navigateur (généralement le nom de l'onglet dans votre navigateur), et affectera également le DOM de la page (le contenu de la balise HTML <code>&lt;title&gt;</code>).</p>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush:js">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;Hello World!&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+
+&lt;script&gt;
+alert(document.title); // Affiche "Hello World!"
+document.title = "Goodbye World!";
+alert(document.title); // Affiche "Goodbye World!"
+&lt;/script&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Cette propriété s'applique à HTML, SVG, XUL, et aux autres documents Gecko.</p>
+
+<p>Pour les documents HTML, la valeur initiale de <code>document.title</code> est le texte de la balise <code>&lt;title&gt;</code>. Pour les documents XUL, c'est la valeur de l'attribut {{XULAttr("title")}} de {{XULElem("window")}} ou d'autres éléments parents de l'élément XUL.</p>
+
+<p>En XUL, accéder à <code>document.title</code> avant que le document soit complètement chargé a des conséquences variables (<code>document.title</code> peut retourner une chaîne vide et définir <code>document.title</code> peut n'avoir aucun effet).</p>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-18446827">DOM Level 2 HTML: document.title</a></li>
+ <li><a class="external" href="http://www.whatwg.org/html/#document.title" title="http://www.whatwg.org/html/#document.title">HTML5</a></li>
+</ul>
diff --git a/files/fr/web/api/document/tooltipnode/index.html b/files/fr/web/api/document/tooltipnode/index.html
new file mode 100644
index 0000000000..681797c298
--- /dev/null
+++ b/files/fr/web/api/document/tooltipnode/index.html
@@ -0,0 +1,25 @@
+---
+title: Document.tooltipNode
+slug: Web/API/Document/tooltipNode
+tags:
+  - API
+  - DOM
+  - Document
+  - Propriétés
+  - XUL
+translation_of: Web/API/Document/tooltipNode
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p>{{draft}}</p>
+
+<p>Renvoie le noeud qui est la cible de l'actuel {{ XULElem("tooltip") }}.</p>
+
+<h2 id="Usage" name="Usage">Syntaxe</h2>
+
+<pre class="eval">document.tooltipNode;
+</pre>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<p>XUL-specific method. Not part of any specification. Defined in {{ Source("dom/public/idl/xul/nsIDOMXULDocument.idl#59", "nsIDOMXULDocument.idl") }}.</p>
diff --git a/files/fr/web/api/document/touchend_event/index.html b/files/fr/web/api/document/touchend_event/index.html
new file mode 100644
index 0000000000..f7067637ab
--- /dev/null
+++ b/files/fr/web/api/document/touchend_event/index.html
@@ -0,0 +1,186 @@
+---
+title: touchend
+slug: Web/API/Document/touchend_event
+tags:
+  - Tactile
+  - TouchEvent
+  - events
+translation_of: Web/API/Document/touchend_event
+---
+<div>{{APIRef}}</div>
+
+<p>L'événement <code>touchend</code> est déclenché quand un point de contact est retiré de la surface.</p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://w3c.github.io/touch-events/#event-touchend">Touch Events</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("TouchEvent")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
+ <dd style="margin: 0 0 0 120px;">Oui</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
+ <dd style="margin: 0 0 0 120px;">Oui</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Target</dt>
+ <dd style="margin: 0 0 0 120px;">Document, Element</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Default Action</dt>
+ <dd style="margin: 0 0 0 120px;">indéfinie</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>EventTarget</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>DOMString</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>Boolean</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>Boolean</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td>WindowProxy</td>
+   <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td>long (float)</td>
+   <td>0.</td>
+  </tr>
+  <tr>
+   <td><code>touches</code> {{readonlyInline}}</td>
+   <td>TouchList</td>
+   <td>A list of <a href="/en/DOM/Touch"><code>Touch</code></a>es for every point of contact currently touching the surface.</td>
+  </tr>
+  <tr>
+   <td><code>targetTouches</code> {{readonlyInline}}</td>
+   <td>TouchList</td>
+   <td>A list of <a href="/en/DOM/Touch"><code>Touch</code></a>es for every point of contact that is touching the surface and started on the element that is the target of the current event.</td>
+  </tr>
+  <tr>
+   <td><code>changedTouches</code> {{readonlyInline}}</td>
+   <td>TouchList</td>
+   <td>A list of <a href="/en-US/docs/DOM/Touch"><code>Touch</code></a>es for every point of contact which contributed to the event.<br>
+    For the touchstart event this must be a list of the touch points that just became active with the current event. For the touchmove event this must be a list of the touch points that have moved since the last event. For the touchend and touchcancel events this must be a list of the touch points that have just been removed from the surface.</td>
+  </tr>
+  <tr>
+   <td><code>ctrlKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>shiftKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>altKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>metaKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Des exemples d'implémentation de cet événement sont disponibles : <a href="https://developer.mozilla.org/en-US/docs/DOM/Touch_events">Touch events</a>.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</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("22.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("18.0")}}<sup>[1]</sup><br>
+    {{CompatGeckoDesktop("52.0")}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("6.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>11</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Les Touch events ont été implémentés dans Gecko 18.0, mais ont été supprimés dans la version 24.0 {{geckoRelease("24.0")}} dans la version bureau en raison de problèmes d'incompatibilités ({{bug(888304)}}).</p>
+
+<p>[2] Depuis 52.0, le support des Touch events a été réparé et réactivé dans les versions bureau de Windows.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{ domxref("GlobalEventHandlers.ontouchleave","ontouchleave")}}</li>
+ <li>{{ domxref("GlobalEventHandlers.ontouchstart","ontouchstart")}}</li>
+ <li>{{ domxref("GlobalEventHandlers.ontouchmove","ontouchmove")}}</li>
+</ul>
diff --git a/files/fr/web/api/document/transitionend_event/index.html b/files/fr/web/api/document/transitionend_event/index.html
new file mode 100644
index 0000000000..ab96cecb4e
--- /dev/null
+++ b/files/fr/web/api/document/transitionend_event/index.html
@@ -0,0 +1,85 @@
+---
+title: 'Document: évènement transitionend'
+slug: Web/API/Document/transitionend_event
+translation_of: Web/API/Document/transitionend_event
+---
+<div>{{APIRef}}</div>
+
+<p>L’évènement <strong><code>transitionend</code></strong> est émis quand une <a href="/fr/docs/Web/CSS/CSS_Transitions/Utiliser_transitions_CSS">transition CSS</a> a terminé. Dans le cas où une transition est supprimée avant d’avoir terminé, comme lorsqu’une {{cssxref("transition-property")}} est supprimée ou lorsque {{cssxref("display")}} reçoit la valeur <code>none</code>, l’évènement n’est pas généré.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th>Bouillonne</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th>Est annulable</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th>Interface</th>
+   <td>{{domxref("TransitionEvent")}}</td>
+  </tr>
+  <tr>
+   <th>Propriété gestionnaire d’évènement</th>
+   <td><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/ontransitionend">ontransitionend</a></code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>L’évènement <code>transitionend</code> est émis dans les deux directions : quand la transition se termine vers l’état modifié, et quand elle est complètement retournée à l’état par défaut ou non modifié. S’il n’y a pas de délai ou de durée de transition, si les deux sont 0 s ou ne sont pas déclarés, il n’y a pas de transition, et aucun évènement de transition n’est émis. Si l’évènement <code>transitioncancel</code> est émis, l’évènement <code>transitionend</code> ne se produira pas.</p>
+
+<p>La cible originale pour cet évènement est l’<code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element">Element</a></code> sur lequel la transition est appliquée. Vous pouvez écouter cet évènement sur l’interface <code>Window</code> pour le gérer durant les phases de capture ou de bouillonnement. Pour plus de détails sur cet évènement, veuillez consulter la page <a href="/fr/docs/Web/Events/transitionend">HTMLElement: transitionend</a>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Le code suivant ajoute un gestionnaire sur l’évènement <code>transitionend</code> :</p>
+
+<pre class="brush: js">document.addEventListener('transitionend', () =&gt; {
+  console.log('Transition terminée');
+});</pre>
+
+<p>La même chose, mais en utilisant la propriété <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/ontransitionend">ontransitionend</a></code> au lieu de <code>addEventListener()</code> :</p>
+
+<pre class="brush: js">document.ontransitionend = () =&gt; {
+  console.log('Transition terminée');
+};</pre>
+
+<p><a href="/en-US/docs/Web/API/HTMLElement/transitionend_event#Live_example" lang="en-US">Voir un exemple en direct sur cet évènement.</a></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">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Transitions", "#transitionend", "transitionend")}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">La table de compatibilité sur cette page est générée à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Document.transitionend_event")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Le gestionnaire d’évènement {{domxref("GlobalEventHandlers.ontransitionend")}}</li>
+ <li>L’interface {{domxref("TransitionEvent")}}</li>
+ <li>Les propriétés CSS : {{cssxref("transition")}}, {{cssxref("transition-delay")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-property")}}, {{cssxref("transition-timing-function")}}</li>
+ <li>Des évènements associés : <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/transitionrun_event">transitionrun</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/transitionstart_event">transitionstart</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/transitioncancel_event">transitioncancel</a></code></li>
+ <li>Cet évènement sur les cibles <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement">HTMLElement</a></code> : <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/transitionend_event">transitionend</a></code></li>
+ <li>Cet évènement sur les cibles <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window">Window</a></code> : <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/transitionend_event">transitionend</a></code></li>
+</ul>
diff --git a/files/fr/web/api/document/url/index.html b/files/fr/web/api/document/url/index.html
new file mode 100644
index 0000000000..32b79c706d
--- /dev/null
+++ b/files/fr/web/api/document/url/index.html
@@ -0,0 +1,24 @@
+---
+title: Document.URL
+slug: Web/API/Document/URL
+translation_of: Web/API/Document/URL
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Retourne l'<code><strong>URL</strong></code> du {{domxref("Document")}} sous forme de string (lecture seule).</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="brush: js">var <em>string</em> = document.URL
+</pre>
+
+<h2 id="Specification" name="Specification">Exemple</h2>
+
+<pre><code>var currentURL = document.URL;
+alert(currentURL);</code></pre>
+
+<h2 id="Specification" name="Specification">Specification</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-46183437">DOM Level 2 HTML: URL</a></li>
+</ul>
diff --git a/files/fr/web/api/document/visibilitystate/index.html b/files/fr/web/api/document/visibilitystate/index.html
new file mode 100644
index 0000000000..4f8c7ec071
--- /dev/null
+++ b/files/fr/web/api/document/visibilitystate/index.html
@@ -0,0 +1,123 @@
+---
+title: Document.visibilityState
+slug: Web/API/Document/visibilityState
+tags:
+  - API
+  - DOM
+  - Document
+  - Propriétés
+  - Visibilité
+translation_of: Web/API/Document/visibilityState
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p>La propriété en lecture seule <code><strong>Document.visibilityState</strong></code> renvoie la visibilité du {{domxref('document')}}, c'est-à-dire informe si l'élément est visible dans son contexte. Il est utile de savoir si le document est en arrière-plan ou sur un onglet invisible ou seulement chargé pour le pré-rendu. Les valeurs possibles sont :</p>
+
+<ul>
+ <li><strong><code>'visible'</code></strong> : le contenu de la page peut être au-moins partiellement visible. Dans la pratique, cela signifie que la page est l'onglet de premier plan d'une fenêtre non réduite.</li>
+ <li><strong><code>'hidden</code>'</strong> (<em>caché</em>) : le contenu de la page n'est pas visible pour l'utilisateur. Dans la  pratique , cela signifie que le document est soit dans un onglet d'arrière-plan ou une  partie d'une fenêtre réduite, soit que le verrouillage de l'écran du système d'exploitation est actif.</li>
+ <li><strong><code>'prerender'</code></strong> (<em>prérendu</em>) : le contenu de la page est prérendu et n'est pas visible par l'utilisateur (considéré caché aux fins de <code><a href="/en-US/docs/Web/API/Document/hidden">document.hidden</a></code>). Le document peut démarrer dans cet état mais ne changera jamais à partir d'une autre valeur. Note : le support du navigateur est facultatif.</li>
+ <li><strong><code>'unloaded</code>'</strong> (<em>déchargé</em>) : la page est en train d'être déchargée de la mémoire. Remarque : le support du navigateur est facultatif.</li>
+</ul>
+
+<p>Lorsque la valeur de cette propriété change, l'évènement {{event('visibilitychange')}} est envoyé au {{domxref("Document")}}.</p>
+
+<p>L'utilisation typique de ceci peut être d'empêcher le téléchargement de certains éléments actifs lorsque le document est uniquement prérendu, ou d'arrêter certaines activités lorsque le document est en arrière-plan ou réduit au minimum.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>string</em> = document.visibilityState</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:js; line-numbers  language-js"><code class="language-js">document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"visibilitychange"</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>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span> document<span class="punctuation token">.</span>visibilityState <span class="punctuation token">)</span><span class="punctuation token">;
+  // Modifier le comportement...</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></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('Page Visibility API','#dom-document-visibilitystate', 'Document.visibilityState')}}</td>
+   <td>{{Spec2('Page Visibility API')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>13 {{property_prefix("webkit")}}<br>
+    33</td>
+   <td>{{CompatGeckoDesktop(18)}} [2]</td>
+   <td>10</td>
+   <td>12.10[1]</td>
+   <td>7</td>
+  </tr>
+  <tr>
+   <td><code>prerender</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(49)}}</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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.4 {{property_prefix("webkit")}}</td>
+   <td>{{CompatGeckoMobile(18)}} [2]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>12.10[1]</td>
+   <td>7</td>
+  </tr>
+  <tr>
+   <td><code>prerender</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(49)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Ne lance pas l'évènement {{event('visibilitychange')}} lorsque la fenêtre du navigateur est réduite, ni si <code>hidden</code> est défini à <code>true</code>.</p>
+
+<p>[2] De Firefox 10 à Firefox 51 inclus, cette propriété peut être utilisée avec le préfixe <code>-moz-</code>.</p>
diff --git a/files/fr/web/api/document/width/index.html b/files/fr/web/api/document/width/index.html
new file mode 100644
index 0000000000..94c91d793d
--- /dev/null
+++ b/files/fr/web/api/document/width/index.html
@@ -0,0 +1,45 @@
+---
+title: Document.width
+slug: Web/API/Document/width
+translation_of: Web/API/Document/width
+---
+<div>{{APIRef("DOM")}} {{Obsolete_header}}</div>
+
+<div class="note">
+<p><strong>Remarque:</strong> À partir de {{Gecko("6.0")}},<code> document.width </code>n'est plus pris en charge. Au lieu de cela, utilisez document.body.clientWidth. Voir {{domxref("element.clientWidth")}}.</p>
+</div>
+
+<p>Renvoie la largeur de l'élément {{HTMLElement("body")}} du document courrent en pixels.</p>
+
+<p>Non pris en charge par Internet Explorer.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>pixels</em> = document.width;
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush:js">function init() {
+    alert("La largeur du document est " + document.width + " pixels.");
+}
+</pre>
+
+<h2 id="Alternatives" name="Alternatives">Alternatives</h2>
+
+<pre class="syntaxbox">document.body.clientWidth              /* largeur de &lt;body&gt; */
+document.documentElement.clientWidth   /* largeur de &lt;html&gt; */
+window.innerWidth                      /* largeur de la fenêtre */
+</pre>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<p>HTML5</p>
+
+<h2 id="See_also" name="See_also">Voir également</h2>
+
+<ul>
+ <li>{{domxref("document.height")}}</li>
+ <li>{{domxref("Element.clientWidth")}}</li>
+ <li>{{domxref("Element.scrollWidth")}}</li>
+</ul>
diff --git a/files/fr/web/api/document/write/index.html b/files/fr/web/api/document/write/index.html
new file mode 100644
index 0000000000..e0aec07be3
--- /dev/null
+++ b/files/fr/web/api/document/write/index.html
@@ -0,0 +1,96 @@
+---
+title: document.write
+slug: Web/API/Document/write
+tags:
+  - API
+  - DOM
+  - Document
+  - Méthodes
+  - Rérérence
+translation_of: Web/API/Document/write
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p>Écrit une chaîne de texte dans un document ouvert par <a href="https://developer.mozilla.org/fr/docs/Web/API/Document/open">document.open()</a>.</p>
+
+<div class="note">
+<p><strong>Note :</strong> comme <code>document.write</code> écrit <span class="short_text" id="result_box" lang="fr"><span>dans le flux de documents,</span></span> appeler <code>document.write</code> <span id="result_box" lang="fr"><span>sur un document fermé (chargé) appelle automatiquement <code>document.open</code>, ce qui efface le document.</span></span></p>
+</div>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="eval">document.write(<em>balisage</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>markup</code></dt>
+ <dd>est une chaîne de caractères contenant le texte à écrire dans le document.</dd>
+</dl>
+
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+
+<pre>&lt;html&gt;
+
+&lt;head&gt;
+&lt;title&gt;Exemple de document.write&lt;/title&gt;
+
+&lt;script type="text/javascript"&gt;
+
+function nouveauContenu()
+{
+alert("chargement du nouveau contenu");
+document.open();
+document.write("&lt;h1&gt;Assez de l'ancien contenu, passons au nouveau !&lt;/h1&gt;");
+document.close();
+}
+
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body onload="nouveauContenu();"&gt;
+&lt;p&gt;Ceci est le contenu original du document.&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Écrire dans un document qui a déjà été chargé sans appeler <a href="https://developer.mozilla.org/fr/docs/Web/API/Document/open">document.open()</a> provoquera un appel automatique à <code>document.open</code>. Une fois l'écriture terminée, il est recommandé d'appeler <a href="https://developer.mozilla.org/fr/docs/Web/API/Document/close">document.close()</a> pour indiquer au navigateur qu'il peut terminer de charger la page. Le texte fourni est analysé et intégré à la structure du modèle de document. Dans l'exemple ci-dessus, l'élément <code>h1</code> devient un nœud dans le document.</p>
+
+<p>Si l'appel à <code>document.write()</code> est intégré directement dans le code HTML, il n'appellera pas <code>document.open()</code>. Par exemple :</p>
+
+<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>script</span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
+  document<span class="punctuation token">.</span><span class="function token">write</span><span class="punctuation token">(</span><span class="string token">"&lt;h1&gt;Main title&lt;/h1&gt;"</span><span class="punctuation token">)</span>
+</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<div class="note">
+<p><strong>Note :</strong> <code>document.write</code> et <code>document.writeln <a href="https://developer.mozilla.org/fr/docs/Archive/Web/Writing_JavaScript_for_HTML">ne fonctionnent pas dans les documents XHTML</a> (vous obtiendrez une erreur </code> "Operation is not supported" [<code>NS_ERROR_DOM_NOT_SUPPORTED_ERR</code>] dans la console d'erreurs). Cela arrive lors de l'ouverture d'un fichier local avec l'extension de fichier  .xhtm ou pour tout document servi avec une  <code>application/xhtml+xml</code> de <a href="https://developer.mozilla.org/fr/docs/Glossaire/Type_MIME">type MIME</a>. Plus d'informations disponibles dans la   <a class="external external-icon" href="http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite">foire aux questions W3C XHTML (en)</a>.</p>
+</div>
+
+<div class="note">
+<p><strong>Note :</strong> <code>document.write</code> dans les scripts <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-defer">deferred (<em>différé</em>)</a> ou <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-async">asynchronous (<em>asynchrone</em>)</a> sera ignoré et vous recevrez un message comme  "A call to <code>document.write()</code> from an asynchronously-loaded external script was ignored" dans la console d'erreurs.</p>
+</div>
+
+<div class="note">
+<p><strong>Note :</strong> Dans Edge seulement, appeler plusieurs fois <code>document.write</code> dans un "iframe" déclenche une erreur "SCRIPT70: Permission denied." <em>(autorisation refusée)</em>.</p>
+</div>
+
+<div class="note">
+<p><strong>Note :</strong> <span id="result_box" lang="fr"><span>À partir de la version 55, Chrome n'exécute pas les éléments <code>&lt;script&gt;</code> injectés via <code>document.write()</code> en cas d'échec de cache HTTP pour les utilisateurs sur une connexion 2G.</span></span></p>
+</div>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
+
+<ul>
+ <li><a class="external external-icon" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-75233634">DOM Level 2 HTML: <code>write()</code> Method</a></li>
+ <li><a class="external external-icon" href="http://www.w3.org/TR/2011/WD-html5-author-20110705/apis-in-html-documents.html#dynamic-markup-insertion">Dynamic markup insertion in HTML</a></li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{ domxref("element.innerHTML") }}</li>
+ <li>{{ domxref("document.createElement()") }}</li>
+</ul>
diff --git a/files/fr/web/api/document/writeln/index.html b/files/fr/web/api/document/writeln/index.html
new file mode 100644
index 0000000000..046c069cbc
--- /dev/null
+++ b/files/fr/web/api/document/writeln/index.html
@@ -0,0 +1,58 @@
+---
+title: Document.writeln()
+slug: Web/API/Document/writeln
+tags:
+  - API
+  - DOM
+  - Method
+  - Reference
+translation_of: Web/API/Document/writeln
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p>Écrit une chaine de caractères suivie d'un retour de ligne.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="eval notranslate">document.writeln(<em>ligne</em>);
+</pre>
+
+<h3 id="Parameters" name="Parameters">Paramètres</h3>
+
+<ul>
+ <li><code>ligne</code> est la chaine de caractère contenant le texte.</li>
+</ul>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="notranslate">document.writeln("&lt;p&gt;Entrez votre mot de passe :&lt;/p&gt;");
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p><strong>document.writeln </strong>est identique à <a href="/en-US/docs/Web/API/Document/write">{{domxref("document.write")}}</a>, mais ajoute une nouvelle ligne.</p>
+
+<div class="note"><strong>Note :</strong> <strong>document.writeln</strong> (comme <strong>document.write</strong>) n'a aucun effet en XHTML documents (vous obtiendrez une erreur "Operation is not supported" (<code>NS_ERROR_DOM_NOT_SUPPORTED_ERR</code>) dans la console). Ceci est le cas si un fichier est ouvert en local avec l'extension .xhtml ou pour tous documents utilisant le type MIME application/xhtml+xml. Pour plus d'informations, visitez <a class="external" href="http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite" title="http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite">W3C XHTML FAQ</a>.</div>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><strong>Spécification</strong></td>
+   <td><strong>État</strong></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "#dom-document-writeln", "document.writeln()")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 HTML", "html.html#ID-35318390", "document.writeln()")}}</td>
+   <td>{{Spec2("DOM2 HTML")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Document.writeln")}}</p>
diff --git a/files/fr/web/api/document/xmlencoding/index.html b/files/fr/web/api/document/xmlencoding/index.html
new file mode 100644
index 0000000000..e3b98135f1
--- /dev/null
+++ b/files/fr/web/api/document/xmlencoding/index.html
@@ -0,0 +1,35 @@
+---
+title: Document.xmlEncoding
+slug: Web/API/Document/xmlEncoding
+tags:
+  - API
+  - DOM
+  - Document
+  - Encodage
+  - Propriétés
+  - XML
+translation_of: Web/API/Document/xmlEncoding
+---
+<p>{{APIRef("DOM")}}{{ obsolete_header("10.0") }}</p>
+
+<p>Renvoie le codage déterminé par la déclaration XML. Devrait être <code>null</code> si non précisé ou inconnu.</p>
+
+<div class="warning"><strong>Warning :</strong> N'utilisez pas cet attribut ; il a été supprimé de la spécification DOM Niveau 4 et n'est plus pris en charge dans Gecko 10.0 {{ geckoRelease("10.0") }}.</div>
+
+<p>Si la déclaration XML indique :</p>
+
+<pre>&lt;?xml version="1.0" encoding="UTF-16"?&gt;
+</pre>
+
+<p>... le résultat doit être "UTF-16".</p>
+
+<p>Cependant, Firefox 3.0 inclut des informations sur l'"endianness" (par exemple, UTF-16BE pour le codage "big endian") et, tandis que cette information supplémentaire est supprimée à partir de Firefox 3.1b3, Firefox 3.1b3 consulte toujours l'encodage du fichier plutôt que la déclaration XML, comme la spécification le prévoit ("Un attribut spécifiant, <u><em>dans le cadre de la déclaration XML</em></u>, l'encodage de ce document.").</p>
+
+<p> </p>
+
+<h3 id="Spécification">Spécification</h3>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Document3-encoding" rel="freelink">http://www.w3.org/TR/DOM-Level-3-Cor...ment3-encoding</a></li>
+ <li>A été supprimé de {{ spec("http://www.w3.org/TR/domcore/","DOM Core Level 4","WD") }}</li>
+</ul>
diff --git a/files/fr/web/api/document/xmlversion/index.html b/files/fr/web/api/document/xmlversion/index.html
new file mode 100644
index 0000000000..ce2a197b51
--- /dev/null
+++ b/files/fr/web/api/document/xmlversion/index.html
@@ -0,0 +1,29 @@
+---
+title: Document.xmlVersion
+slug: Web/API/Document/xmlVersion
+tags:
+  - API
+  - DOM
+  - Document
+  - Propriétés
+  - XML
+  - version
+translation_of: Web/API/Document/xmlVersion
+---
+<p>{{APIRef("DOM")}}{{ obsolete_header("10.0") }}</p>
+
+<p>Renvoie le numéro de version comme spécifié dans la déclaration XML (par exemple, <code>&lt;?xml version="1.0"?&gt;</code>) ou "1.0" si la déclaration est absente.</p>
+
+<p>Cet attribut n'a jamais été réellement utile, parce qu'il a toujours renvoyé 1.0, et a été supprimé dans la spécification DOM Niveau 4. En conséquence, Firefox 10 ne l'implémente plus. Son utilisation principale dans le passé consistait à détecter si le document était rendu en XML plutôt qu'en HTML. Pour ce faire, vous pouvez créer un élément avec son nom en minuscule, puis vérifier s'il est converti en majuscules (auquel cas le document est en mode HTML non XML) :</p>
+
+<pre>if (document.createElement("foo").tagName == "FOO") {
+  /* le document n'est pas XML */
+}
+</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Document3-version" rel="freelink">http://www.w3.org/TR/DOM-Level-3-Cor...ument3-version</a></li>
+ <li>A été supprimée de {{ spec("http://www.w3.org/TR/domcore/","DOM Core Level 4","WD") }}</li>
+</ul>
diff --git a/files/fr/web/api/document_object_model/exemples/index.html b/files/fr/web/api/document_object_model/exemples/index.html
new file mode 100644
index 0000000000..08bd432a1e
--- /dev/null
+++ b/files/fr/web/api/document_object_model/exemples/index.html
@@ -0,0 +1,369 @@
+---
+title: Exemples
+slug: Web/API/Document_Object_Model/Exemples
+tags:
+  - DOM
+  - Exemples
+translation_of: Web/API/Document_Object_Model/Examples
+---
+<p>Cette page présente quelques exemples plus détaillés de développement Web et XML utilisant le DOM. Partout où c'est possible, les exemples utilisent des API courantes, des astuces et des modèles en JavaScript pour manipuler l'objet de document.</p>
+
+<h2 id="Exemple_1_:_height_et_width" name="Exemple_1_:_height_et_width">Exemple 1 : <em>height</em> (hauteur) et width <em>(largeur)</em></h2>
+
+<p>L'exemple qui suit montre l'utilisation des propriétés <code>height</code> et <code>width</code> pour dimensionner des images de diverses tailles :</p>
+
+<pre class="brush:html line-numbers  language-html"><code class="language-html"><span class="doctype token">&lt;!DOCTYPE html&gt;</span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>en<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>title</span><span class="punctuation token">&gt;</span></span>width/height example<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>title</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
+<span class="keyword token">function</span> <span class="function token">init</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> arrImages <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Array</span><span class="punctuation token">(</span><span class="number token">3</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  arrImages<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span> <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"image1"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  arrImages<span class="punctuation token">[</span><span class="number token">1</span><span class="punctuation token">]</span> <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"image2"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  arrImages<span class="punctuation token">[</span><span class="number token">2</span><span class="punctuation token">]</span> <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"image3"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="keyword token">var</span> objOutput <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"output"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">var</span> strHtml <span class="operator token">=</span> <span class="string token">"&lt;ul&gt;"</span><span class="punctuation token">;</span>
+
+  <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token">&lt;</span> arrImages<span class="punctuation token">.</span>length<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    strHtml <span class="operator token">+</span><span class="operator token">=</span> <span class="string token">"&lt;li&gt;image"</span> <span class="operator token">+</span> <span class="punctuation token">(</span>i<span class="operator token">+</span><span class="number token">1</span><span class="punctuation token">)</span> <span class="operator token">+</span>
+            <span class="string token">": height="</span> <span class="operator token">+</span> arrImages<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>height <span class="operator token">+</span>
+            <span class="string token">", width="</span> <span class="operator token">+</span> arrImages<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>width <span class="operator token">+</span>
+            <span class="string token">", style.height="</span> <span class="operator token">+</span> arrImages<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>style<span class="punctuation token">.</span>height <span class="operator token">+</span>
+            <span class="string token">", style.width="</span> <span class="operator token">+</span> arrImages<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>style<span class="punctuation token">.</span>width <span class="operator token">+</span>
+            <span class="string token">"&lt;\/li&gt;"</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+
+  strHtml <span class="operator token">+</span><span class="operator token">=</span> <span class="string token">"&lt;\/ul&gt;"</span><span class="punctuation token">;</span>
+
+  objOutput<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> strHtml<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span> <span class="attr-name token">onload</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>init();<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>Image 1: no height, width, or style
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>img</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>image1<span class="punctuation token">"</span></span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.mozilla.org/images/mozilla-banner.gif<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>Image 2: height="50", width="500", but no style
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>img</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>image2<span class="punctuation token">"</span></span>
+       <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.mozilla.org/images/mozilla-banner.gif<span class="punctuation token">"</span></span>
+       <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>50<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>500<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>Image 3: no height, width, but style="height: 50px; width: 500px;"
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>img</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>image3<span class="punctuation token">"</span></span>
+       <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.mozilla.org/images/mozilla-banner.gif<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token">
+       <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">height</span><span class="punctuation token">:</span> <span class="number token">50</span>px<span class="punctuation token">;</span> <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">500</span>px<span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>output<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span> <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h2 id="Exemple_2_:_attributs_d.27image" name="Exemple_2_:_attributs_d.27image">Exemple 2 : attributs d'image</h2>
+
+<pre class="brush:html line-numbers  language-html"><code class="language-html"><span class="doctype token">&lt;!DOCTYPE html&gt;</span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>en<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>title</span><span class="punctuation token">&gt;</span></span>Modifying an image border<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>title</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
+<span class="keyword token">function</span> <span class="function token">setBorderWidth</span><span class="punctuation token">(</span>width<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"img1"</span><span class="punctuation token">)</span><span class="punctuation token">.</span>style<span class="punctuation token">.</span>borderWidth <span class="operator token">=</span> width <span class="operator token">+</span> <span class="string token">"px"</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</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>img</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>img1<span class="punctuation token">"</span></span>
+       <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>image1.gif<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token">
+       <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">border</span><span class="punctuation token">:</span> <span class="number token">5</span>px solid green<span class="punctuation token">;</span></span><span class="punctuation token">"</span></span>
+       <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100<span class="punctuation token">"</span></span> <span class="attr-name token">alt</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>border test<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>form</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>FormName<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Make border 20px-wide<span class="punctuation token">"</span></span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>setBorderWidth(20);<span class="punctuation token">"</span></span> <span class="punctuation token">/&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Make border 5px-wide<span class="punctuation token">"</span></span>  <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>setBorderWidth(5);<span class="punctuation token">"</span></span> <span class="punctuation token">/&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>form</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h2 id="Exemple_3_:_manipulation_de_styles" name="Exemple_3_:_manipulation_de_styles">Exemple 3 : manipulation de styles</h2>
+
+<p>Dans cet exemple simple, on accède à certaines propriétés basiques de style d'un élément de paragraphe HTML à l'aide de son objet style. L'objet style de l'élément et ses propriétés de style CSS peuvent être récupérés et définis depuis le DOM. Dans ce cas-ci, les styles individuels sont manipulés directement. Dans l'exemple suivant (l'exemple 4), on utilisera les feuilles de style et leurs règles pour changer les styles de documents entiers.</p>
+
+<pre class="brush:html line-numbers  language-html"><code class="language-html"><span class="doctype token">&lt;!DOCTYPE html&gt;</span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>en<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>title</span><span class="punctuation token">&gt;</span></span>Changing color and font-size example<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>title</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
+<span class="keyword token">function</span> <span class="function token">changeText</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> p <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"pid"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  p<span class="punctuation token">.</span>style<span class="punctuation token">.</span>color <span class="operator token">=</span> <span class="string token">"blue"</span>
+  p<span class="punctuation token">.</span>style<span class="punctuation token">.</span>fontSize <span class="operator token">=</span> <span class="string token">"18pt"</span>
+<span class="punctuation token">}</span>
+</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pid<span class="punctuation token">"</span></span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>window.location.href <span class="punctuation token">=</span> <span class="punctuation token">'</span>http://www.cnn.com/<span class="punctuation token">'</span>;<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>linker<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>form</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>input</span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>rec<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>changeText();<span class="punctuation token">"</span></span> <span class="punctuation token">/&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>form</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h2 id="Exemple_4_:_utilisation_de_feuilles_de_style" name="Exemple_4_:_utilisation_de_feuilles_de_style">Exemple 4 : utilisation de feuilles de style</h2>
+
+<p>La propriété <code>styleSheets</code> de l'objet <code>document</code> renvoie une liste des feuilles de style qui ont été chargées pour ce document. On peut accéder à ces feuilles de style et leurs règles individuelles à l'aide des objets <code>stylesheet</code>, <code>style</code> et <code>CSSRule</code>, comme montré dans cet exemple qui affiche tous les sélecteurs de règles de style dans la console.</p>
+
+<pre class="brush:js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> ss <span class="operator token">=</span> document<span class="punctuation token">.</span>styleSheets<span class="punctuation token">;</span>
+
+<span class="keyword token">for</span><span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token">&lt;</span> ss<span class="punctuation token">.</span>length<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">for</span><span class="punctuation token">(</span><span class="keyword token">var</span> j <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> j <span class="operator token">&lt;</span> ss<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>cssRules<span class="punctuation token">.</span>length<span class="punctuation token">;</span> j<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="function token">dump</span><span class="punctuation token">(</span> ss<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>cssRules<span class="punctuation token">[</span>j<span class="punctuation token">]</span><span class="punctuation token">.</span>selectorText <span class="operator token">+</span> <span class="string token">"\n"</span> <span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>Pour un document avec une seule feuille de style dans laquelle les trois règles suivantes sont définies :</p>
+
+<pre class="eval">BODY { background-color: darkblue; }
+P { font-face: Arial; font-size: 10pt; margin-left: .125in; }
+#lumpy { display: none; }
+</pre>
+
+<p>Ce script affiche les lignes suivantes :</p>
+
+<pre class="eval">BODY
+P
+#LUMPY
+</pre>
+
+<h2 id="Exemple_5_:_propagation_d.27.C3.A9v.C3.A8nements" name="Exemple_5_:_propagation_d.27.C3.A9v.C3.A8nements"><a id="Exemple_5_:_propagation_d'évènements" name="Exemple_5_:_propagation_d'évènements"></a>Exemple 5 : propagation d'évènements</h2>
+
+<p>Cet exemple montre comment les évènements se déclenchent et sont gérés dans le DOM d'une manière très simple. Lorsque l'élément BODY de ce document HTML est chargé, un écouteur d'évènement est enregistré sur la ligne supérieure de l'élément TABLE. Celui-ci gère l'évènement en exécutant la fonction <code>stopEvent</code>, qui modifie la valeur de la cellule inférieure du tableau.</p>
+
+<p>Cependant, <code>stopEvent</code> appelle également une méthode d'objet <code>event</code>, {{domxref("event.stopPropagation")}} , qui empêche l'évènement de se propager (bubbling) plus haut dans le DOM. Notez que le tableau lui-même dispose d'un gestionnaire d'évènement {{domxref("element.onclick","onclick")}} qui devrait afficher un message lorsqu'on clique sur le tableau. Mais comme la méthode <code>stopEvent</code> a interrompu la propagation, après que les données du tableau aient été mises à jour, la phase évènementielle est effectivement arrêtée et un message d'alerte est affiché pour le confirmer.</p>
+
+<pre class="brush:html line-numbers  language-html"><code class="language-html"><span class="doctype token">&lt;!DOCTYPE html&gt;</span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>en<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>title</span><span class="punctuation token">&gt;</span></span>Event Propagation<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>title</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>style</span><span class="punctuation token">&gt;</span></span><span class="language-css style token">
+<span class="selector token"><span class="id token">#t-daddy</span> </span><span class="punctuation token">{</span> <span class="property token">border</span><span class="punctuation token">:</span> <span class="number token">1</span>px solid red <span class="punctuation token">}</span>
+<span class="selector token"><span class="id token">#c1</span> </span><span class="punctuation token">{</span> <span class="property token">background-color</span><span class="punctuation token">:</span> pink<span class="punctuation token">;</span> <span class="punctuation token">}</span>
+</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>style</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
+<span class="keyword token">function</span> <span class="function token">stopEvent</span><span class="punctuation token">(</span>ev<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  c2 <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"c2"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  c2<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> <span class="string token">"hello"</span><span class="punctuation token">;</span>
+
+  <span class="comment token">// cela devrait empêcher t-daddy d'obtenir le click.</span>
+  ev<span class="punctuation token">.</span><span class="function token">stopPropagation</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">"event propagation halted."</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">load</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  elem <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"tbl1"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  elem<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"click"</span><span class="punctuation token">,</span> stopEvent<span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span> <span class="attr-name token">onload</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>load();<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>table</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>t-daddy<span class="punctuation token">"</span></span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>alert(<span class="punctuation token">'</span>hi<span class="punctuation token">'</span>);<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>tr</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>tbl1<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>td</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>c1<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>one<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>td</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>tr</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>tr</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>td</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>c2<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>two<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>td</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>tr</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>table</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h2 id="Exemple_6_:_getComputedStyle" name="Exemple_6_:_getComputedStyle">Exemple 6 : getComputedStyle</h2>
+
+<p>Cet exemple montre comment la méthode {{domxref("window.getComputedStyle")}} peut être utilisée pour obtenir les styles d'un élément qui ne sont pas définis dans l'attribut <code>style</code> ou à l'aide de JavaScript (c'est-à-dire, <code>elem.style.backgroundColor="rgb(173, 216, 230)"</code>). Ces derniers types de styles peuvent être récupérés avec la propriété plus directe {{domxref("element.style", "elt.style")}} , dont les propriétés sont listées dans la <a href="https://developer.mozilla.org/fr/docs/Web/CSS/Reference">liste des propriétés DOM CSS</a>.</p>
+
+<p><code>getComputedStyle()</code> renvoie un objet <code>ComputedCSSStyleDeclaration</code>, dont les propriétés de style individuelles peuvent être référencées à l'aide de sa méthode <code>getPropertyValue()</code> comme montré dans l'exemple suivant.</p>
+
+<pre class="brush:html line-numbers  language-html"><code class="language-html"><span class="doctype token">&lt;!DOCTYPE html&gt;</span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>en<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>title</span><span class="punctuation token">&gt;</span></span>getComputedStyle example<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>title</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
+<span class="keyword token">function</span> <span class="function token">cStyles</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> RefDiv <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"d1"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">var</span> txtHeight <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"t1"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">var</span> h_style <span class="operator token">=</span> document<span class="punctuation token">.</span>defaultView<span class="punctuation token">.</span><span class="function token">getComputedStyle</span><span class="punctuation token">(</span>RefDiv<span class="punctuation token">,</span> <span class="keyword token">null</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getPropertyValue</span><span class="punctuation token">(</span><span class="string token">"height"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  txtHeight<span class="punctuation token">.</span>value <span class="operator token">=</span> h_style<span class="punctuation token">;</span>
+
+  <span class="keyword token">var</span> txtWidth <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"t2"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">var</span> w_style <span class="operator token">=</span> document<span class="punctuation token">.</span>defaultView<span class="punctuation token">.</span><span class="function token">getComputedStyle</span><span class="punctuation token">(</span>RefDiv<span class="punctuation token">,</span> <span class="keyword token">null</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getPropertyValue</span><span class="punctuation token">(</span><span class="string token">"width"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  txtWidth<span class="punctuation token">.</span>value <span class="operator token">=</span> w_style<span class="punctuation token">;</span>
+
+  <span class="keyword token">var</span> txtBackgroundColor <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"t3"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">var</span> b_style <span class="operator token">=</span> document<span class="punctuation token">.</span>defaultView<span class="punctuation token">.</span><span class="function token">getComputedStyle</span><span class="punctuation token">(</span>RefDiv<span class="punctuation token">,</span> <span class="keyword token">null</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getPropertyValue</span><span class="punctuation token">(</span><span class="string token">"background-color"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  txtBackgroundColor<span class="punctuation token">.</span>value <span class="operator token">=</span> b_style<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>style</span><span class="punctuation token">&gt;</span></span><span class="language-css style token">
+<span class="selector token"><span class="id token">#d1</span> </span><span class="punctuation token">{</span>
+  <span class="property token">margin-left</span><span class="punctuation token">:</span> <span class="number token">10</span>px<span class="punctuation token">;</span>
+  <span class="property token">background-color</span><span class="punctuation token">:</span> <span class="function token">rgb</span><span class="punctuation token">(</span><span class="number token">173</span>, <span class="number token">216</span>, <span class="number token">230</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="property token">height</span><span class="punctuation token">:</span> <span class="number token">20</span>px<span class="punctuation token">;</span>
+  <span class="property token">max-width</span><span class="punctuation token">:</span> <span class="number token">20</span>px<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>style</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>d1<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="entity token" title=" ">&amp;nbsp;</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>form</span> <span class="attr-name token">action</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>cStyles();<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>getComputedStyle<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span>
+    height<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>t1<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>1<span class="punctuation token">"</span></span> <span class="punctuation token">/&gt;</span></span>
+    max-width<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>t2<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>2<span class="punctuation token">"</span></span> <span class="punctuation token">/&gt;</span></span>
+    bg-color<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>t3<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>3<span class="punctuation token">"</span></span> <span class="punctuation token">/&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>form</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h2 id="Exemple_7_:_affichage_des_propri.C3.A9t.C3.A9s_d.27un_objet_event" name="Exemple_7_:_affichage_des_propri.C3.A9t.C3.A9s_d.27un_objet_event">Exemple 7 : affichage des propriétés d'un objet <code>event</code></h2>
+
+<p>Cet exemple utilise des méthodes DOM pour afficher les propriétés d'un objet {{domxref("window.onload")}} {{domxref("event")}}   et leurs valeurs dans un tableau. Il montre également une technique utile utilisant une boucle <code>for..in</code> pour parcourir les propriétés d'un objet et obtenir leurs valeurs.</p>
+
+<p>Les propriétés des objets <code>event</code> diffèrent sensiblement entre les différents navigateurs, la <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">spécification norme DOM</a> liste les propriétés standard, mais beaucoup de navigateurs ont ajouté un bon nombre de propriétés supplémentaires.</p>
+
+<p>Placez le code qui suit dans une fichier texte vide et chargez-le dans différents navigateurs, vous serez surpris des différences entre le nombre et le nom des propriétés. Vous pouvez également ajouter quelques éléments à la page et appeler cette fonction depuis d'autres gestionnaires d'évènements.</p>
+
+<pre class="brush:html line-numbers  language-html"><code class="language-html"><span class="doctype token">&lt;!DOCTYPE html&gt;</span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>en<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>meta</span> <span class="attr-name token">charset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>utf-8<span class="punctuation token">"</span></span><span class="punctuation token">/&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>title</span><span class="punctuation token">&gt;</span></span>Show Event properties<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>title</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>style</span><span class="punctuation token">&gt;</span></span><span class="language-css style token">
+<span class="selector token">table </span><span class="punctuation token">{</span> <span class="property token">border-collapse</span><span class="punctuation token">:</span> collapse<span class="punctuation token">;</span> <span class="punctuation token">}</span>
+<span class="selector token">thead </span><span class="punctuation token">{</span> <span class="property token">font-weight</span><span class="punctuation token">:</span> bold<span class="punctuation token">;</span> <span class="punctuation token">}</span>
+<span class="selector token">td </span><span class="punctuation token">{</span> <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">2</span>px <span class="number token">10</span>px <span class="number token">2</span>px <span class="number token">10</span>px<span class="punctuation token">;</span> <span class="punctuation token">}</span>
+
+<span class="selector token"><span class="class token">.odd</span> </span><span class="punctuation token">{</span> <span class="property token">background-color</span><span class="punctuation token">:</span> <span class="hexcode token">#efdfef</span><span class="punctuation token">;</span> <span class="punctuation token">}</span>
+<span class="selector token"><span class="class token">.even</span> </span><span class="punctuation token">{</span> <span class="property token">background-color</span><span class="punctuation token">:</span> <span class="hexcode token">#ffffff</span><span class="punctuation token">;</span> <span class="punctuation token">}</span>
+</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>style</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
+
+<span class="keyword token">function</span> <span class="function token">showEventProperties</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">function</span> <span class="function token">addCell</span><span class="punctuation token">(</span>row<span class="punctuation token">,</span> text<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">var</span> cell <span class="operator token">=</span> row<span class="punctuation token">.</span><span class="function token">insertCell</span><span class="punctuation token">(</span><span class="operator token">-</span><span class="number token">1</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    cell<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>document<span class="punctuation token">.</span><span class="function token">createTextNode</span><span class="punctuation token">(</span>text<span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+
+  <span class="keyword token">var</span> e <span class="operator token">=</span> e <span class="operator token">||</span> window<span class="punctuation token">.</span>event<span class="punctuation token">;</span>
+  document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'eventType'</span><span class="punctuation token">)</span><span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> e<span class="punctuation token">.</span>type<span class="punctuation token">;</span>
+
+  <span class="keyword token">var</span> table <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'table'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">var</span> thead <span class="operator token">=</span> table<span class="punctuation token">.</span><span class="function token">createTHead</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">var</span> row <span class="operator token">=</span> thead<span class="punctuation token">.</span><span class="function token">insertRow</span><span class="punctuation token">(</span><span class="operator token">-</span><span class="number token">1</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">var</span> lableList <span class="operator token">=</span> <span class="punctuation token">[</span><span class="string token">'#'</span><span class="punctuation token">,</span> <span class="string token">'Property'</span><span class="punctuation token">,</span> <span class="string token">'Value'</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
+  <span class="keyword token">var</span> len <span class="operator token">=</span> lableList<span class="punctuation token">.</span>length<span class="punctuation token">;</span>
+
+  <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i<span class="operator token">=</span><span class="number token">0</span><span class="punctuation token">;</span> i<span class="operator token">&lt;</span>len<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="function token">addCell</span><span class="punctuation token">(</span>row<span class="punctuation token">,</span> lableList<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+
+  <span class="keyword token">var</span> tbody <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'tbody'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  table<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>tbody<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> p <span class="keyword token">in</span> e<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    row <span class="operator token">=</span> tbody<span class="punctuation token">.</span><span class="function token">insertRow</span><span class="punctuation token">(</span><span class="operator token">-</span><span class="number token">1</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    row<span class="punctuation token">.</span>className <span class="operator token">=</span> <span class="punctuation token">(</span>row<span class="punctuation token">.</span>rowIndex <span class="operator token">%</span> <span class="number token">2</span><span class="punctuation token">)</span><span class="operator token">?</span> <span class="string token">'odd'</span><span class="punctuation token">:</span><span class="string token">'even'</span><span class="punctuation token">;</span>
+    <span class="function token">addCell</span><span class="punctuation token">(</span>row<span class="punctuation token">,</span> row<span class="punctuation token">.</span>rowIndex<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="function token">addCell</span><span class="punctuation token">(</span>row<span class="punctuation token">,</span> p<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="function token">addCell</span><span class="punctuation token">(</span>row<span class="punctuation token">,</span> e<span class="punctuation token">[</span>p<span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+
+  document<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>table<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+window<span class="punctuation token">.</span>onload <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span><span class="punctuation token">{</span>
+  <span class="function token">showEventProperties</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>h1</span><span class="punctuation token">&gt;</span></span>Properties of the DOM <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>span</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>eventType<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>span</span><span class="punctuation token">&gt;</span></span> Event Object<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>h1</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h2 id="Exemple_8_:_utilisation_de_l.27interface_DOM_Table" name="Exemple_8_:_utilisation_de_l.27interface_DOM_Table">Exemple 8 : utilisation de l'interface DOM Table</h2>
+
+<p>L'interface DOM HTMLTableElement fournit certaines méthodes utilitaires permettant de créer et de manipuler des tableaux. Deux méthodes utilisées fréquemment sont {{domxref("HTMLTableElement.insertRow")}} et {{domxref("tableRow.insertCell")}}</p>
+
+<p>Pour ajouter une ligne et quelques cellules à un tableau existant :</p>
+
+<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>table</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>table0<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+ <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>tr</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>td</span><span class="punctuation token">&gt;</span></span>Row 0 Cell 0<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>td</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>td</span><span class="punctuation token">&gt;</span></span>Row 0 Cell 1<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>td</span><span class="punctuation token">&gt;</span></span>
+ <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>tr</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>table</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
+<span class="keyword token">var</span> table <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'table0'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> row <span class="operator token">=</span> table<span class="punctuation token">.</span><span class="function token">insertRow</span><span class="punctuation token">(</span><span class="operator token">-</span><span class="number token">1</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> cell<span class="punctuation token">,</span>
+    text<span class="punctuation token">;</span>
+
+<span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token">&lt;</span> <span class="number token">2</span><span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  cell <span class="operator token">=</span> row<span class="punctuation token">.</span><span class="function token">insertCell</span><span class="punctuation token">(</span><span class="operator token">-</span><span class="number token">1</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  text <span class="operator token">=</span> <span class="string token">'Row '</span> <span class="operator token">+</span> row<span class="punctuation token">.</span>rowIndex <span class="operator token">+</span> <span class="string token">' Cell '</span> <span class="operator token">+</span> i<span class="punctuation token">;</span>
+  cell<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>document<span class="punctuation token">.</span><span class="function token">createTextNode</span><span class="punctuation token">(</span>text<span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h4 id="Notes" name="Notes">Notes</h4>
+
+<ul>
+ <li>N'utilisez jamais la propriété {{domxref("element.innerHTML","innerHTML")}} d'un tableau pour le modifier, même si vous pouvez l'utiliser pour créer un tableau entier ou le contenu d'une cellule.</li>
+ <li>Si vous utilisez les méthodes DOM Core {{domxref("document.createElement")}} et {{domxref("Node.appendChild")}} pour créer des lignes et cellules de tableau, il est nécessaire de les ajouter à un élément <code>tbody</code> dans Internet Explorer, tandis que les autres navigateurs vous permettront de les ajouter à un élément <code>table</code> (les lignes seront ajoutées au dernier élément <code>tbody</code>).</li>
+ <li>Un certain nombre d'autres méthodes utilitaires faisant partie de l'<a href="https://developer.mozilla.org/fr/docs/Web/API/HTMLTableElement#M%C3%A9thodes">interface table</a> peuvent être utilisées pour créer et modifier des tableaux.</li>
+</ul>
+
+<h2 id="Subnav">Subnav</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model">Référence DOM</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Introduction">Introduction à DOM</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Events">Les événements et DOM</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Exemples">Exemples</a></li>
+</ul>
diff --git a/files/fr/web/api/document_object_model/index.html b/files/fr/web/api/document_object_model/index.html
new file mode 100644
index 0000000000..cf44a48c6d
--- /dev/null
+++ b/files/fr/web/api/document_object_model/index.html
@@ -0,0 +1,428 @@
+---
+title: Référence du DOM
+slug: Web/API/Document_Object_Model
+tags:
+  - API
+  - DOM
+  - Intermédiaire
+  - Référence(2)
+translation_of: Web/API/Document_Object_Model
+---
+<div>{{DefaultAPISidebar("DOM")}}</div>
+
+<p>Le <em><strong>Document Object Model</strong></em> ou <strong>DOM</strong> (pour modèle objet de document) est une interface de programmation pour les documents HTML, XML et SVG. Il fournit une représentation structurée du document sous forme d'un arbre et définit la façon dont la structure peut être manipulée par les programmes, en termes de style et de contenu. Le DOM représente le document comme un ensemble de nœuds et d'objets possédant des propriétés et des méthodes. Les nœuds peuvent également avoir des gestionnaires d'événements qui se déclenchent lorsqu'un événement se produit. Cela permet de manipuler des pages web grâce à des scripts et/ou des langages de programmation. <span id="result_box" lang="fr"><span>Les nœuds peuvent être associés à des gestionnaires d'événements.</span> <span>Une fois qu'un événement est déclenché, les gestionnaires d'événements sont exécutés.</span></span></p>
+
+<p>Pour mieux comprendre le fonctionnement du DOM, <a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Introduction">une introduction est disponible</a>.</p>
+
+<h2 id="Interfaces_du_DOM">Interfaces du DOM</h2>
+
+<div class="index">
+<ul>
+ <li>{{domxref("Attr")}}</li>
+ <li>{{domxref("CharacterData")}}</li>
+ <li>{{domxref("ChildNode")}} {{experimental_inline}}</li>
+ <li>{{domxref("Comment")}}</li>
+ <li>{{domxref("CustomEvent")}}</li>
+ <li>{{domxref("Document")}}</li>
+ <li>{{domxref("DocumentFragment")}}</li>
+ <li>{{domxref("DocumentType")}}</li>
+ <li>{{domxref("DOMError")}}  {{deprecated_inline}}</li>
+ <li>{{domxref("DOMException")}}</li>
+ <li>{{domxref("DOMImplementation")}}</li>
+ <li>{{domxref("DOMString")}}</li>
+ <li>{{domxref("DOMTimeStamp")}}</li>
+ <li>{{domxref("DOMSettableTokenList")}}</li>
+ <li>{{domxref("DOMStringList")}}</li>
+ <li>{{domxref("DOMTokenList")}}</li>
+ <li>{{domxref("Element")}}</li>
+ <li>{{domxref("EventTarget")}}</li>
+ <li>{{domxref("HTMLCollection")}}</li>
+ <li>{{domxref("MutationObserver")}}</li>
+ <li>{{domxref("Event")}}</li>
+ <li>{{domxref("MutationRecord")}}</li>
+ <li>{{domxref("NamedNodeMap")}}</li>
+ <li>{{domxref("Node")}}</li>
+ <li>{{domxref("NodeFilter")}}</li>
+ <li>{{domxref("NodeIterator")}}</li>
+ <li>{{domxref("NodeList")}}</li>
+ <li>{{domxref("NonDocumentTypeChildNode")}}</li>
+ <li>{{domxref("ParentNode")}}</li>
+ <li>{{domxref("ProcessingInstruction")}}</li>
+ <li>{{domxref("Selection")}}{{experimental_inline}}</li>
+ <li>{{domxref("Range")}}</li>
+ <li>{{domxref("Text")}}</li>
+ <li>{{domxref("TextDecoder")}} {{experimental_inline}}</li>
+ <li>{{domxref("TextEncoder")}} {{experimental_inline}}</li>
+ <li>{{domxref("TimeRanges")}}</li>
+ <li>{{domxref("TreeWalker")}}</li>
+ <li>{{domxref("URL")}}</li>
+ <li>{{domxref("Window")}}</li>
+ <li>{{domxref("Worker")}}</li>
+ <li>{{domxref("XMLDocument")}} {{experimental_inline}}</li>
+</ul>
+</div>
+
+<h2 id="Interfaces_obsolètes_du_DOM_obsolete_inline">Interfaces obsolètes du DOM {{obsolete_inline}}</h2>
+
+<p>Le DOM a été simplifié au cours du temps. Pour cette raison, les interfaces qui suivent, présentes dans la spécification du DOM de niveau 3 ou des niveaux antérieurs, ont été supprimées. Bien qu'il ne soit pas certain qu'elles ne soient pas réintroduites, elles doivent être considérées comme obsolètes et il faut éviter de les utiliser :</p>
+
+<div class="index">
+<ul>
+ <li>{{domxref("CDATASection")}}</li>
+ <li>{{domxref("DocumentTouch")}}</li>
+ <li>{{domxref("DOMConfiguration")}}</li>
+ <li>{{domxref("DOMErrorHandler")}}</li>
+ <li>{{domxref("DOMImplementationList")}}</li>
+ <li>{{domxref("DOMImplementationRegistry")}}</li>
+ <li>{{domxref("DOMImplementationSource")}}</li>
+ <li>{{domxref("DOMLocator")}}</li>
+ <li>{{domxref("DOMObject")}}</li>
+ <li>{{domxref("DOMUserData")}}</li>
+ <li>{{domxref("ElementTraversal")}}</li>
+ <li>{{domxref("Entity")}}</li>
+ <li>{{domxref("EntityReference")}}</li>
+ <li>{{domxref("NamedNodeMap")}}</li>
+ <li>{{domxref("NameList")}}</li>
+ <li>{{domxref("Notation")}}</li>
+ <li>{{domxref("TypeInfo")}}</li>
+ <li>{{domxref("UserDataHandler")}}</li>
+</ul>
+</div>
+
+<h2 id="Interfaces_HTML">Interfaces HTML</h2>
+
+<p>Un document contenant du HTML est décrit grâce à l'interface {{domxref("HTMLDocument")}}. On notera que la spécification HTML étend également l'interface {{domxref("Document")}}.</p>
+
+<p>Un objet <code>HTMLDocument</code> donne également accès à différentes fonctionnalités liées au navigateur comme l'onglet ou la fenêtre dans laquelle la page est dessinée, notamment grâce à l'interface {{domxref("Window")}}. On peut accéder à la mise en forme de la page via {{domxref("window.style")}} (généralement le CSS associé au document), à l'historique de navigation relatif au contexte via {{domxref("window.history")}} et enfin à la sélection faite dans le document via {{domxref("Selection")}}.</p>
+
+<h3 id="Interfaces_des_éléments_HTML">Interfaces des éléments HTML</h3>
+
+<div class="index">
+<ul>
+ <li>{{domxref("HTMLAnchorElement")}}</li>
+ <li>{{domxref("HTMLAppletElement")}}</li>
+ <li>{{domxref("HTMLAreaElement")}}</li>
+ <li>{{domxref("HTMLAudioElement")}}</li>
+ <li>{{domxref("HTMLBaseElement")}}</li>
+ <li>{{domxref("HTMLBodyElement")}}</li>
+ <li>{{domxref("HTMLBRElement")}}</li>
+ <li>{{domxref("HTMLButtonElement")}}</li>
+ <li>{{domxref("HTMLCanvasElement")}}</li>
+ <li>{{domxref("HTMLDataElement")}}</li>
+ <li>{{domxref("HTMLDataListElement")}}</li>
+ <li>{{domxref("HTMLDialogElement")}}</li>
+ <li>{{domxref("HTMLDirectoryElement")}}</li>
+ <li>{{domxref("HTMLDivElement")}}</li>
+ <li>{{domxref("HTMLDListElement")}}</li>
+ <li>{{domxref("HTMLElement")}}</li>
+ <li>{{domxref("HTMLEmbedElement")}}</li>
+ <li>{{domxref("HTMLFieldSetElement")}}</li>
+ <li>{{domxref("HTMLFontElement")}}</li>
+ <li>{{domxref("HTMLFormElement")}}</li>
+ <li>{{domxref("HTMLFrameElement")}}</li>
+ <li>{{domxref("HTMLFrameSetElement")}}</li>
+ <li>{{domxref("HTMLHeadElement")}}</li>
+ <li>{{domxref("HTMLHeadingElement")}}</li>
+ <li>{{domxref("HTMLHtmlElement")}}</li>
+ <li>{{domxref("HTMLHRElement")}}</li>
+ <li>{{domxref("HTMLIFrameElement")}}</li>
+ <li>{{domxref("HTMLImageElement")}}</li>
+ <li>{{domxref("HTMLInputElement")}}</li>
+ <li>{{domxref("HTMLKeygenElement")}}</li>
+ <li>{{domxref("HTMLLabelElement")}}</li>
+ <li>{{domxref("HTMLLegendElement")}}</li>
+ <li>{{domxref("HTMLLIElement")}}</li>
+ <li>{{domxref("HTMLLinkElement")}}</li>
+ <li>{{domxref("HTMLMapElement")}}</li>
+ <li>{{domxref("HTMLMediaElement")}}</li>
+ <li>{{domxref("HTMLMenuElement")}}</li>
+ <li>{{domxref("HTMLMetaElement")}}</li>
+ <li>{{domxref("HTMLMeterElement")}}</li>
+ <li>{{domxref("HTMLModElement")}}</li>
+ <li>{{domxref("HTMLObjectElement")}}</li>
+ <li>{{domxref("HTMLOListElement")}}</li>
+ <li>{{domxref("HTMLOptGroupElement")}}</li>
+ <li>{{domxref("HTMLOptionElement")}}</li>
+ <li>{{domxref("HTMLOutputElement")}}</li>
+ <li>{{domxref("HTMLParagraphElement")}}</li>
+ <li>{{domxref("HTMLParamElement")}}</li>
+ <li>{{domxref("HTMLPreElement")}}</li>
+ <li>{{domxref("HTMLProgressElement")}}</li>
+ <li>{{domxref("HTMLQuoteElement")}}</li>
+ <li>{{domxref("HTMLScriptElement")}}</li>
+ <li>{{domxref("HTMLSelectElement")}}</li>
+ <li>{{domxref("HTMLSourceElement")}}</li>
+ <li>{{domxref("HTMLSpanElement")}}</li>
+ <li>{{domxref("HTMLStyleElement")}}</li>
+ <li>{{domxref("HTMLTableElement")}}</li>
+ <li>{{domxref("HTMLTableCaptionElement")}}</li>
+ <li>{{domxref("HTMLTableCellElement")}}</li>
+ <li>{{domxref("HTMLTableDataCellElement")}}</li>
+ <li>{{domxref("HTMLTableHeaderCellElement")}}</li>
+ <li>{{domxref("HTMLTableColElement")}}</li>
+ <li>{{domxref("HTMLTableRowElement")}}</li>
+ <li>{{domxref("HTMLTableSectionElement")}}</li>
+ <li>{{domxref("HTMLTextAreaElement")}}</li>
+ <li>{{domxref("HTMLTimeElement")}}</li>
+ <li>{{domxref("HTMLTitleElement")}}</li>
+ <li>{{domxref("HTMLTrackElement")}}</li>
+ <li>{{domxref("HTMLUListElement")}}</li>
+ <li>{{domxref("HTMLUnknownElement")}}</li>
+ <li>{{domxref("HTMLVideoElement")}}</li>
+</ul>
+</div>
+
+<h3 id="Autres_interfaces">Autres interfaces</h3>
+
+<div class="index">
+<ul>
+ <li>{{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasGradient")}}</li>
+ <li>{{domxref("CanvasPattern")}}</li>
+ <li>{{domxref("TextMetrics")}}</li>
+ <li>{{domxref("ImageData")}}</li>
+ <li>{{domxref("CanvasPixelArray")}}</li>
+ <li>{{domxref("NotifyAudioAvailableEvent")}}</li>
+ <li>{{domxref("HTMLAllCollection")}}</li>
+ <li>{{domxref("HTMLFormControlsCollection")}}</li>
+ <li>{{domxref("HTMLOptionsCollection")}}</li>
+ <li>{{domxref("HTMLPropertiesCollection")}}</li>
+ <li>{{domxref("DOMStringMap")}}</li>
+ <li>{{domxref("RadioNodeList")}}</li>
+ <li>{{domxref("MediaError")}}</li>
+</ul>
+</div>
+
+<h3 id="Interfaces_HTML_obsolètes_obsolete_inline">Interfaces HTML obsolètes {{obsolete_inline}}</h3>
+
+<div class="index">
+<ul>
+ <li>{{domxref("HTMLBaseFontElement")}}</li>
+ <li>{{domxref("HTMLIsIndexElement")}}</li>
+</ul>
+</div>
+
+<h2 id="Interfaces_SVG"><a id="SVG_interfaces" name="SVG_interfaces">Interfaces SVG</a></h2>
+
+<h3 id="Interfaces_des_éléments_SVG">Interfaces des éléments SVG</h3>
+
+<div class="index">
+<ul>
+ <li>{{domxref("SVGAElement")}}</li>
+ <li>{{domxref("SVGAltGlyphElement")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGAltGlyphDefElement")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGAltGlyphItemElement")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGAnimationElement")}}</li>
+ <li>{{domxref("SVGAnimateElement")}}</li>
+ <li>{{domxref("SVGAnimateColorElement")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGAnimateMotionElement")}}</li>
+ <li>{{domxref("SVGAnimateTransformElement")}}</li>
+ <li>{{domxref("SVGCircleElement")}}</li>
+ <li>{{domxref("SVGClipPathElement")}}</li>
+ <li>{{domxref("SVGColorProfileElement")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGComponentTransferFunctionElement")}}</li>
+ <li>{{domxref("SVGCursorElement")}}</li>
+ <li>{{domxref("SVGDefsElement")}}</li>
+ <li>{{domxref("SVGDescElement")}}</li>
+ <li>{{domxref("SVGElement")}}</li>
+ <li>{{domxref("SVGEllipseElement")}}</li>
+ <li>{{domxref("SVGFEBlendElement")}}</li>
+ <li>{{domxref("SVGFEColorMatrixElement")}}</li>
+ <li>{{domxref("SVGFEComponentTransferElement")}}</li>
+ <li>{{domxref("SVGFECompositeElement")}}</li>
+ <li>{{domxref("SVGFEConvolveMatrixElement")}}</li>
+ <li>{{domxref("SVGFEDiffuseLightingElement")}}</li>
+ <li>{{domxref("SVGFEDisplacementMapElement")}}</li>
+ <li>{{domxref("SVGFEDistantLightElement")}}</li>
+ <li>{{domxref("SVGFEDropShadowElement")}}</li>
+ <li>{{domxref("SVGFEFloodElement")}}</li>
+ <li>{{domxref("SVGFEFuncAElement")}}</li>
+ <li>{{domxref("SVGFEFuncBElement")}}</li>
+ <li>{{domxref("SVGFEFuncGElement")}}</li>
+ <li>{{domxref("SVGFEFuncRElement")}}</li>
+ <li>{{domxref("SVGFEGaussianBlurElement")}}</li>
+ <li>{{domxref("SVGFEImageElement")}}</li>
+ <li>{{domxref("SVGFEMergeElement")}}</li>
+ <li>{{domxref("SVGFEMergeNodeElement")}}</li>
+ <li>{{domxref("SVGFEMorphologyElement")}}</li>
+ <li>{{domxref("SVGFEOffsetElement")}}</li>
+ <li>{{domxref("SVGFEPointLightElement")}}</li>
+ <li>{{domxref("SVGFESpecularLightingElement")}}</li>
+ <li>{{domxref("SVGFESpotLightElement")}}</li>
+ <li>{{domxref("SVGFETileElement")}}</li>
+ <li>{{domxref("SVGFETurbulenceElement")}}</li>
+ <li>{{domxref("SVGFilterElement")}}</li>
+ <li>{{domxref("SVGFilterPrimitiveStandardAttributes")}}</li>
+ <li>{{domxref("SVGFontElement")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGFontFaceElement")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGFontFaceFormatElement")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGFontFaceNameElement")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGFontFaceSrcElement")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGFontFaceUriElement")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGForeignObjectElement")}}</li>
+ <li>{{domxref("SVGGElement")}}</li>
+ <li>{{domxref("SVGGeometryElement")}}</li>
+ <li>{{domxref("SVGGlyphElement")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGGlyphRefElement")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGGradientElement")}}</li>
+ <li>{{domxref("SVGGraphicsElement")}}</li>
+ <li>{{domxref("SVGHatchElement")}} {{experimental_inline}}</li>
+ <li>{{domxref("SVGHatchpathElement")}} {{experimental_inline}}</li>
+ <li>{{domxref("SVGHKernElement")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGImageElement")}}</li>
+ <li>{{domxref("SVGLinearGradientElement")}}</li>
+ <li>{{domxref("SVGLineElement")}}</li>
+ <li>{{domxref("SVGMarkerElement")}} {{experimental_inline}}</li>
+ <li>{{domxref("SVGMaskElement")}}</li>
+ <li>{{domxref("SVGMeshElement")}} {{experimental_inline}}</li>
+ <li>{{domxref("SVGMeshGradientElement")}} {{experimental_inline}}</li>
+ <li>{{domxref("SVGMeshpatchElement")}} {{experimental_inline}}</li>
+ <li>{{domxref("SVGMeshrowElement")}} {{experimental_inline}}</li>
+ <li>{{domxref("SVGMetadataElement")}}</li>
+ <li>{{domxref("SVGMissingGlyphElement")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGMPathElement")}}</li>
+ <li>{{domxref("SVGPathElement")}}</li>
+ <li>{{domxref("SVGPatternElement")}}</li>
+ <li>{{domxref("SVGPolylineElement")}}</li>
+ <li>{{domxref("SVGPolygonElement")}}</li>
+ <li>{{domxref("SVGRadialGradientElement")}}</li>
+ <li>{{domxref("SVGRectElement")}}</li>
+ <li>{{domxref("SVGScriptElement")}}</li>
+ <li>{{domxref("SVGSetElement")}}</li>
+ <li>{{domxref("SVGSolidcolorElement")}} {{experimental_inline}}</li>
+ <li>{{domxref("SVGStopElement")}}</li>
+ <li>{{domxref("SVGStyleElement")}}</li>
+ <li>{{domxref("SVGSVGElement")}}</li>
+ <li>{{domxref("SVGSwitchElement")}}</li>
+ <li>{{domxref("SVGSymbolElement")}}</li>
+ <li>{{domxref("SVGTextContentElement")}}</li>
+ <li>{{domxref("SVGTextElement")}}</li>
+ <li>{{domxref("SVGTextPathElement")}}</li>
+ <li>{{domxref("SVGTextPositioningElement")}}</li>
+ <li>{{domxref("SVGTitleElement")}}</li>
+ <li>{{domxref("SVGTRefElement")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGTSpanElement")}}</li>
+ <li>{{domxref("SVGUseElement")}}</li>
+ <li>{{domxref("SVGUnknownElement")}} {{experimental_inline}}</li>
+ <li>{{domxref("SVGViewElement")}}</li>
+ <li>{{domxref("SVGVKernElement")}} {{deprecated_inline}}</li>
+</ul>
+</div>
+
+<h3 id="Interfaces_pour_les_types_de_donnée_SVG">Interfaces pour les types de donnée SVG</h3>
+
+<p>Voici l'API du DOM pour les types de donnée utilisés pour les propriétés et attributs SVG.</p>
+
+<div class="note">
+<p><strong>Note :</strong> À partir de {{Gecko("5.0")}}, les interfaces suivantes relatives à SVG et qui représentent des listes d'objets sont indexées et permettent d'y accéder. Elles possèdent en plus une propriété de longueur qui indique le nombre d'éléments dans la liste : {{domxref("SVGLengthList")}}, {{domxref("SVGNumberList")}}, {{domxref("SVGPathSegList")}} et {{domxref("SVGPointList")}}.</p>
+</div>
+
+<h4 id="Interfaces_statiques">Interfaces statiques</h4>
+
+<div class="index">
+<ul>
+ <li>{{domxref("SVGAngle")}}</li>
+ <li>{{domxref("SVGColor")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGICCColor")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGElementInstance")}}</li>
+ <li>{{domxref("SVGElementInstanceList")}}</li>
+ <li>{{domxref("SVGLength")}}</li>
+ <li>{{domxref("SVGLengthList")}}</li>
+ <li>{{domxref("SVGMatrix")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGNameList")}}</li>
+ <li>{{domxref("SVGNumber")}}</li>
+ <li>{{domxref("SVGNumberList")}}</li>
+ <li>{{domxref("SVGPaint")}}</li>
+ <li>{{domxref("SVGPathSeg")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGPathSegClosePath")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGPathSegMovetoAbs")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGPathSegMovetoRel")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGPathSegLinetoAbs")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGPathSegLinetoRel")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGPathSegCurvetoCubicAbs")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGPathSegCurvetoCubicRel")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGPathSegCurvetoQuadraticAbs")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGPathSegCurvetoQuadraticRel")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGPathSegArcAbs")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGPathSegArcRel")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGPathSegLinetoHorizontalAbs")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGPathSegLinetoHorizontalRel")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGPathSegLinetoVerticalAbs")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGPathSegLinetoVerticalRel")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGPathSegCurvetoCubicSmoothAbs")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGPathSegCurvetoCubicSmoothRel")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGPathSegCurvetoQuadraticSmoothAbs")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGPathSegCurvetoQuadraticSmoothRel")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGPathSegList")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGPoint")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGPointList")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGPreserveAspectRatio")}}</li>
+ <li>{{domxref("SVGRect")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGStringList")}}</li>
+ <li>{{domxref("SVGTransform")}}</li>
+ <li>{{domxref("SVGTransformList")}}</li>
+</ul>
+</div>
+
+<h4 id="Interfaces_animées">Interfaces animées</h4>
+
+<div class="index">
+<ul>
+ <li>{{domxref("SVGAnimatedAngle")}}</li>
+ <li>{{domxref("SVGAnimatedBoolean")}}</li>
+ <li>{{domxref("SVGAnimatedEnumeration")}}</li>
+ <li>{{domxref("SVGAnimatedInteger")}}</li>
+ <li>{{domxref("SVGAnimatedLength")}}</li>
+ <li>{{domxref("SVGAnimatedLengthList")}}</li>
+ <li>{{domxref("SVGAnimatedNumber")}}</li>
+ <li>{{domxref("SVGAnimatedNumberList")}}</li>
+ <li>{{domxref("SVGAnimatedPathData")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGAnimatedPoints")}}</li>
+ <li>{{domxref("SVGAnimatedPreserveAspectRatio")}}</li>
+ <li>{{domxref("SVGAnimatedRect")}}</li>
+ <li>{{domxref("SVGAnimatedString")}}</li>
+ <li>{{domxref("SVGAnimatedTransformList")}}</li>
+</ul>
+</div>
+
+<h3 id="Interfaces_relatives_à_SMIL">Interfaces relatives à SMIL</h3>
+
+<div class="index">
+<ul>
+ <li>{{domxref("ElementTimeControl")}}</li>
+ <li>{{domxref("TimeEvent")}}</li>
+</ul>
+</div>
+
+<h3 id="Autres_interfaces_SVG">Autres interfaces SVG</h3>
+
+<div class="index">
+<ul>
+ <li>{{domxref("GetSVGDocument")}}</li>
+ <li>{{domxref("ShadowAnimation")}}</li>
+ <li>{{domxref("SVGColorProfileRule")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGCSSRule")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGDocument")}}</li>
+ <li>{{domxref("SVGException")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGExternalResourcesRequired")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGFitToViewBox")}}</li>
+ <li>{{domxref("SVGLangSpace")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGLocatable")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGRenderingIntent")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGStylable")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGTests")}}</li>
+ <li>{{domxref("SVGTransformable")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGUnitTypes")}}</li>
+ <li>{{domxref("SVGUseElementShadowRoot")}}</li>
+ <li>{{domxref("SVGURIReference")}}</li>
+ <li>{{domxref("SVGViewSpec")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGZoomAndPan")}}</li>
+ <li>{{domxref("SVGZoomEvent")}} {{deprecated_inline}}</li>
+</ul>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Référence_du_DOM_Gecko/Exemples">Exemples appliqués pour le DOM</a></li>
+</ul>
diff --git a/files/fr/web/api/document_object_model/introduction/index.html b/files/fr/web/api/document_object_model/introduction/index.html
new file mode 100644
index 0000000000..49249815ec
--- /dev/null
+++ b/files/fr/web/api/document_object_model/introduction/index.html
@@ -0,0 +1,297 @@
+---
+title: Introduction
+slug: Web/API/Document_Object_Model/Introduction
+tags:
+  - DOM
+  - Guide
+  - Reference
+translation_of: Web/API/Document_Object_Model/Introduction
+---
+<p>Le Modèle Objet de Document (<strong>DOM: Document object Model</strong>) est la representation objet des données qui composent la structure et le contenu d'un document sur le web. Dans ce guide, <span class="tlid-translation translation" lang="fr"><span title="">nous présenterons brièvement le DOM</span></span>. <span class="tlid-translation translation" lang="fr"><span title="">Nous verrons comment le DOM représente un document </span></span> {{Glossary("HTML")}} ou {{Glossary("XML")}} en mémoire et comment vous utilisez les API pour créer du contenu web et des applications.</p>
+
+<p><strong>NDTR:</strong> (Cette section consiste en une brève introduction conceptuelle du <a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model">DOM</a> : elle explique de quoi il s'agit, comment celui-ci fournit une structure pour les documents <a href="https://developer.mozilla.org/fr/docs/Web/HTML">HTML</a> et <a href="https://developer.mozilla.org/fr/docs/Glossaire/XML">XML</a>, la manière d'y accéder, et comment cette API présente les informations de référence et exemples).</p>
+
+<h2 id="Pr.C3.A9sentation_du_DOM" name="Pr.C3.A9sentation_du_DOM"><span class="tlid-translation translation" lang="fr"><span title="">Qu'est-ce que le DOM?</span></span></h2>
+
+<p>Le Document Object Model (DOM) est une interface de programmation pour les documents HTML et XML. Il fournit une page dont des programmes peuvent modifier la structure, son style et son contenu. Cette représentation du document permet de le voir comme un groupe structuré de nœuds et d'objets possédant différentes propriétés et méthodes. Fondamentalement, il relie les pages Web aux scripts ou langages de programmation.</p>
+
+<p>Une page Web est un document. Celui-ci peut être affiché soit dans la fenêtre du navigateur, soit sous la forme de son code source HTML. Mais il s'agit du même document dans les deux cas. Le modèle objet de document proposé par le DOM fournit une autre manière de représenter, stocker et manipuler ce même document. Le DOM est une représentation entièrement orientée objet de la page Web, et peut être manipulé à l'aide d'un langage de script comme JavaScript.</p>
+
+<p>Les normes <a class="external" href="http://www.w3.org/DOM/">DOM du W3C</a> et <a class="external external-icon" href="https://dom.spec.whatwg.org">WHATWG DOM</a> forment la base du DOM implémenté dans la plupart des navigateurs modernes. Beaucoup d'entre-eux fournissent des extensions allant plus loin que le standard, faites donc attention lorsque vous les utilisez sur le Web, où les documents peuvent être consultés par de nombreux navigateurs avec chacun un DOM différent.</p>
+
+<p>Par exemple, DOM du W3C spécifie que la méthode <code>getElementsByTagName</code> dans le code ci-dessous doit renvoyer une liste de tous les éléments <code>&lt;P&gt;</code> présents dans le document :</p>
+
+<pre class="notranslate">paragraphes = document.getElementsByTagName("P");
+// paragraphes[0] est le premier élément &lt;p&gt;
+// paragraphes[1] est le second élément &lt;p&gt;, etc.
+alert(paragraphes[0].nodeName);
+</pre>
+
+<p>Chacune des propriétés et des méthodes et chacun des évènements disponibles permettant la manipulation et la création de pages Web sont organisés dans des objets (par exemple, l'objet <code>document</code> qui représente le document lui-même, l'objet <code>table</code> qui implémente l'interface DOM particulière <code>HTMLTableElement</code> permettant d'accéder aux tables HTML, etc.). Cette documentation fournit une référence, objet par objet, du DOM implémenté dans les navigateurs basés sur Gecko.</p>
+
+<h2 id="DOM_et_JavaScript" name="DOM_et_JavaScript">DOM et JavaScript</h2>
+
+<p>Le court exemple ci-dessus, comme presque tous les exemples de cette référence, est en <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript">JavaScript</a>. C'est-à-dire qu'il est<em> écrit</em> en JavaScript, mais qu'il<em> utilise</em> le DOM pour accéder au document et à ses éléments. Le DOM n'est pas un langage de programmation, mais sans lui le langage JavaScript n'aurait aucun modèle ni aucune notion des pages Web, des documents XML, et des éléments pour lesquels il est généralement utilisé. Chaque élément d'un document, que ce soit le document lui-même, ses en-têtes, les tableaux internes au document, les en-têtes de colonnes et le texte contenu dans les cellules de ces tableaux, fait partie du modèle objet de document (DOM) de ce document. Tous ces éléments sont donc accessibles et peuvent être manipulés à l'aide du DOM et d'un langage de script comme JavaScript.</p>
+
+<p>À l'origine, JavaScript et le DOM étaient fortement liés, mais ils ont fini par évoluer en deux entités distinctes. Le contenu de la page est stocké dans le DOM et on peut y accéder et le manipuler via JavaScript, de la sorte qu'on pourrait écrire cette équation approximative :</p>
+
+<p>API(page Web ou XML) = DOM + JS(langage de script)</p>
+
+<p>Le DOM a été conçu pour être indépendant de tout langage de programmation, ce qui rend la représentation structurelle du document disponible à l'aide d'une API simple et cohérente. Bien que cette documentation de référence se concentre uniquement sur JavaScript, des implémentations du DOM peuvent être construites pour n'importe quel langage, comme le démontre cet exemple en Python :</p>
+
+<pre class="eval notranslate"># Exemple d'utilisation du DOM en Python
+import xml.dom.minidom as m
+doc = m.parse("C:\\Projects\\Py\\chap1.xml");
+doc.nodeName # Propriété DOM de l'objet document;
+p_list = doc.getElementsByTagName("para");
+</pre>
+
+<p>Pour plus d'informations sur ce que ces techniques impliquent dans l'écriture de JavaScript sur le web, voir <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/JavaScript_technologies_overview">Survol des technologies JavaScript</a>.</p>
+
+<h2 id="M.C3.A9thodes_d.27acc.C3.A8s_au_DOM" name="M.C3.A9thodes_d.27acc.C3.A8s_au_DOM">Méthodes d'accès au DOM</h2>
+
+<p>Il n'y a rien de particulier à faire pour commencer à utiliser le DOM. Les différents navigateurs ont différentes implémentations du DOM, et celles-ci présentent des degrés divers de conformité au standard DOM de référence (un sujet que l'on tente d'éviter dans cette documentation), mais chacun d'entre eux utilise un modèle objet de document pour rendre les pages Web accessibles aux scripts.</p>
+
+<p>Lorsque vous créez un script, qu'il figure au sein de la page dans un élément <code>&lt;SCRIPT&gt;</code> ou soit inclus au moyen d'une instruction de chargement de script, vous pouvez immédiatement commencer à utiliser l'API. En accédant aux éléments <code><a href="https://developer.mozilla.org/fr/docs/Web/API/document">document</a></code> ou <code><a href="https://developer.mozilla.org/fr/docs/Web/API/Window">window</a></code>, vous pouvez manipuler le document lui-même ou parcourir les enfants de ces éléments, qui sont les divers éléments de la page Web. Votre programmation DOM peut être très simple, comme l'exemple suivant qui affiche un message d'avertissement à l'aide de la fonction <code><a href="https://developer.mozilla.org/fr/docs/Web/API/Window/alert">alert()</a></code> de l'objet <code><a href="https://developer.mozilla.org/fr/docs/Web/API/Window">window</a></code>, ou peut utiliser des méthodes DOM plus sophistiquées pour créer du nouveau contenu comme dans l'exemple plus bas.</p>
+
+<p>Le code JavaScrip suivant affichera une alerte quand le document est chargé (et quand le DOM entier est disponible à l'utilisation).</p>
+
+<pre class="eval notranslate">&lt;body
+  onload="window.alert('Bienvenue sur ma page Web !');"&gt;
+</pre>
+
+<p>Un autre exemple. Cette fonction crée un nouvel élément H1, y ajoute du texte, et ajoute ensuite cet élément à l'arbre du document :</p>
+
+<pre class="brush: html line-numbers  language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
+       <span class="comment token">//exécute la fonction lorsque le document est chargé</span>
+       window<span class="punctuation token">.</span>onload <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>
+
+         <span class="comment token">// crée </span></span></code> <span id="result_box" lang="fr"><span>un couple d'éléments dans une page HTML autrement vide</span></span><code class="language-html"><span class="language-javascript script token">
+         <span class="keyword token">var</span> heading <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"h1"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+         <span class="keyword token">var</span> heading_text <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createTextNode</span><span class="punctuation token">(</span><span class="string token">"Big Head!"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+         heading<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>heading_text<span class="punctuation token">)</span><span class="punctuation token">;</span>
+         document<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>heading<span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span>
+    </span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h2 id="Types_de_donn.C3.A9es_importants" name="Types_de_donn.C3.A9es_importants"><span class="tlid-translation translation" lang="fr"><span title="">Types de données fondamentaux</span></span></h2>
+
+<p>Cette référence tente de décrire les différents objets et types de la manière la plus simple possible. Mais il y a un certain nombre de types de données utilisées par l'API que vous devez connaître.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Parceque la vaste majorité de codes qui utilisent le DOM gravitent autour de la manipulation de documents HTML, il est courant de toujours se référer aux nœuds du DOM comme éléments, étant donné que dans le document HTML, chaque nœud est un élément. <span class="tlid-translation translation" lang="fr"><span title="">Bien que n'étant pas strictement exact, la documentation que vous trouverez dans MDN </span></span> <span class="tlid-translation translation" lang="fr"><span title="">fera souvent la même chose, à cause de la fréquence de cette hypothèse.</span></span></p>
+</div>
+
+<p><strong>NDTR: </strong>(Pour simplifier, les exemples de syntaxe présentés dans cette référence se réfèreront aux nœuds en les appelant <code>elements</code>, aux tableaux de nœuds en tant que <code>nodeLists</code> (ou même simplement éléments), et aux nœuds d'attributs en tant qu'<code>attributes)</code>.</p>
+
+<p>Le tableau suivant décrit brièvement ces types de données.</p>
+
+<table class="standard-table" dir="ltr" style="height: 234px; width: 852px;">
+ <thead>
+  <tr>
+   <th scope="col">Type de donnée (Interface)</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{domxref("Document")}}</td>
+   <td>Lorsqu'un membre renvoie un objet de type <code>document</code> (par exemple la propriété <strong>ownerDocument</strong> d'un élément, qui retourne le <code>document</code> auquel il appartient), cet objet est l'objet <code>document</code> racine lui-même. Le chapitre <a href="https://developer.mozilla.org/fr/docs/Web/API/document">référence de DOM <code>document</code></a> décrit l'objet <code>document</code> en détail.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("Node")}}</td>
+   <td>Chaque objet  du document est sous une forme ou une autre un noeud. Dans un document HTML, un objet peût être un élément nœud, mais aussi  un nœud text ou nœud attribut.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("Element")}}</td>
+   <td>Le type élément est basé sur le nœud. Il se réfère à un élément ou nœud de type élément renvoyé par un membre de l'API DOM. Plutôt que de dire, par exemple que la méthode <a href="https://developer.mozilla.org/fr/docs/Web/API/Document/createElement">document.createElement()</a> renvoie une réference à un objet de type nœud, nous dirons simplement que cette méthode renvoie l'élément qui vient juste d'être créer dans le DOM. Les objets element implémentent l'interface DOM element, mais aussi l'interface plus basique node, qui sont toutes les deux incluses dans cette réference. dans un document HTML, les éléments sont mis en valeur par l'interface API HTML DOM  {{domxref("HTMLElement")}} aussi bien que par d'autres interfaces <span class="tlid-translation translation" lang="fr"><span title="">décrivant les capacités d'éléments spécifiques</span></span>  ( <span class="tlid-translation translation" lang="fr"><span title="">par exemple</span></span> , {{domxref("HTMLTableElement")}} for {{HTMLElement("table")}} elements).</td>
+  </tr>
+  <tr>
+   <td>{{domxref("NodeList")}}</td>
+   <td>Une <code>nodeList</code> est un tableau d'éléments, comme celui qui est renvoyé par la méthode <a href="https://developer.mozilla.org/fr/docs/Web/API/Document/getElementsByTagName">document.getElementsByTagName()</a>. Les éléments d'une <code>nodeList</code> sont accessibles par un index de deux manières différentes :
+    <ul>
+     <li>list.item(1)</li>
+     <li>list[1]</li>
+    </ul>
+
+    <p>Ces deux lignes sont équivalentes. Dans la première, <strong>item()</strong> est la méthode de l'objet <code>nodeList</code>. La seconde utilise la syntaxe habituelle d'un tableau pour accéder au second élément de la liste.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{domxref("Attribute")}}</td>
+   <td>Lorsqu'un <code>attribute</code> est renvoyé par un membre (par exemple par la méthode <strong>createAttribute()</strong>), il s'agit d'une référence à un objet qui expose une interface particulière (et limitée) aux attributs. Les attributs sont des nœuds dans le DOM tout comme les éléments, mais ils seront rarement utilisés de cette manière.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("NamedNodeMap")}}</td>
+   <td>Une <code>namedNodeMap</code> est comme un tableau, mais où l'on peut accéder aux éléments à la fois par nom ou par index. Cette dernière possibilité est cependant juste là pour faciliter l'énumération, car la liste n'est pas dans un ordre particulier. Une <code>namedNodeMap</code> a une méthode item() pour la même raison, et il est également possible d'ajouter et de retirer des élements d'une <code>namedNodeMap</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Les_interfaces_DOM" name="Les_interfaces_DOM">Les interfaces DOM</h2>
+
+<p>Un des objectifs de ce guide est de ne pas trop parler de l'héritage abstrait d'interfaces, et d'autres détails d'implémentation, et de se concentrer plutôt sur les objets dans le DOM qui sont les<em>choses</em> réelles utilisables pour manipuler la hiérarchie du DOM. Du point de vue du programmeur Web, il est rarement utile de savoir que l'objet représentant l'élément <code>HTML FORM</code> reçoit sa propriété <strong>name</strong> de l'interface <code>HTMLElement</code>. Dans les deux cas, la propriété désirée est simplement l'objet de formulaire.</p>
+
+<p>Cependant, la relation entre les objets et les interfaces qu'ils implémentent dans le DOM peut entrainer une certaine confusion, c'est pourquoi cette section tente de présenter un tant soit peu les interfaces figurant dans la spécification du DOM et la manière dont elles sont rendues disponibles.</p>
+
+<h3 id="Les_interfaces_et_les_objets" name="Les_interfaces_et_les_objets">Les interfaces et les objets</h3>
+
+<p><span class="tlid-translation translation" lang="fr"><span title="">De nombreux objets empruntent à plusieurs interfaces différentes.</span></span> L'objet table par exemple implémente une <a href="https://developer.mozilla.org/fr/docs/Web/API/HTMLTableElement">interface spécialisée de l'élément HTML Table</a>, <span class="tlid-translation translation" lang="fr"><span title="">qui comprend des méthodes telles que</span></span> <code>createCaption</code> et <code>insertRow</code>. Mais comme il s'agit également d'un élément HTML, <code>table</code> implémente aussi l'interface <code>Element</code> décrite dans le chapitre <a href="https://developer.mozilla.org/fr/docs/Web/API/element">Référence de DOM <code>element</code></a>. Enfin, comme un élément HTML est, du point de vue du DOM, un nœud au sein de l'arbre de nœuds qui forment le modèle objet pour une page HTML ou XML, l'objet table implémente aussi l'interface plus basique <code>Node</code>, dont dérive <code>Element</code>.</p>
+
+<p>Lorsque vous obtiendrez une référence à un objet <code>table</code>, comme dans l'exemple suivant, vous utiliserez régulièrement ces trois interfaces de manière interchangeable sur l'objet, peut-être même sans le savoir.</p>
+
+<pre class="notranslate">var table = document.getElementById("table");
+var tableAttrs = table.attributes; // Interface Node/Element
+for(var i = 0; i &lt; tableAttrs.length; i++){
+  // Interface HTMLTableElement : attribut border
+  if(tableAttrs[i].nodeName.toLowerCase() == "border")
+    table.border = "1";
+}
+// Interface HTMLTableElement : attribut summary
+table.summary = "note : bordure plus large";
+</pre>
+
+<h3 id="Interfaces_essentielles_du_DOM" name="Interfaces_essentielles_du_DOM">Interfaces essentielles du DOM</h3>
+
+<p>Cette section liste certaines des interfaces les plus couramment utilisées dans le DOM. L'idée n'est pas ici de décrire ce que font ces API, mais de vous donner une idée des sortes de méthodes et propriétés que vous verrez très souvent en utilisant le DOM. Ces API communes sont utilisées dans les exemples plus longs du chapitre <a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Exemples">Exemples d'utilisation du DOM</a> à la fin de livre.</p>
+
+<p>Les objets <code>document</code> et <code>window</code> sont ceux dont les interfaces sont les plus souvent utilisées dans la programmation DOM. En termes simples, l'objet <code>window</code> représente quelque chose comme le navigateur, et l'objet <code>document</code> est la racine du document lui-même. <code>Element</code> hérite de l'interface générique <code>Node</code>, et ensemble ces deux interfaces fournissent un grand nombre des méthodes et propriétés utilisables sur des éléments individuels. <span class="tlid-translation translation" lang="fr"><span title="">Ces éléments peuvent également avoir des interfaces spécifiques pour traiter le type de données que ces éléments contiennent</span></span>, comme dans l'objet <code>table</code> donné en exemple dans la section précédente.</p>
+
+<p>Ce qui suit est une brève liste des API communes au script de page dans le Web et  XML utilisant le DOM.</p>
+
+<ul>
+ <li><code>{{domxref("document.getElementById", "", "", "1")}}(id)</code></li>
+ <li><code>document.{{domxref("Element.getElementsByTagName", "getElementsByTagName", "", "1")}}(name)</code></li>
+ <li><code>{{domxref("document.createElement", "", "", "1")}}(name)</code></li>
+ <li><code>parentNode.{{domxref("Node.appendChild", "appendChild", "", "1")}}(node)</code></li>
+ <li><code>element.{{domxref("element.innerHTML", "innerHTML", "", "1")}}</code></li>
+ <li><code>element.{{domxref("HTMLElement.style", "style", "", "1")}}.left</code></li>
+ <li><code>element.{{domxref("element.setAttribute", "setAttribute", "", "1")}}()</code></li>
+ <li><code>element.{{domxref("element.getAttribute", "getAttribute", "", "1")}}()</code></li>
+ <li><code>element.{{domxref("EventTarget.addEventListener", "addEventListener", "", "1")}}()</code></li>
+ <li><code>{{domxref("window.content", "", "", "1")}}</code></li>
+ <li><code>{{domxref("window.onload", "", "", "1")}}</code></li>
+ <li><code>{{domxref("console.log", "", "", "1")}}()</code></li>
+ <li><code>{{domxref("window.scrollTo", "", "", "1")}}()</code></li>
+</ul>
+
+
+
+<h2 id="Test_de_l.27API_DOM" name="Test_de_l.27API_DOM">Test de l'API DOM</h2>
+
+<p>Ce document fournit des exemples pour chaque interface utilisable dans le cadre de votre propre développement Web. Dans certains cas, les exemples sont des pages HTML complètes, avec l'accès au DOM dans un élément &lt;script&gt;, l'interface (comme les boutons) nécessaire pour lancer le script dans un formulaire, et les éléments HTML sur lesquels le DOM opère sont listés également. Lorsque c'est le cas, vous pouvez copier et coller l'exemple dans un nouveau document HTML, l'enregistrer et l'exécuter depuis un navigateur.</p>
+
+<p>Il y a cependant certains cas où les exemples sont plus concis. Pour exécuter les exemples qui démontrent seulement la relation basique entre l'interface et les éléments HTML, il peut être utile de mettre en place une page de test dans laquelle les interfaces peuvent être accédées facilement par des scriptes. La page suivante, très simple, fournit un élément &lt;script&gt; dans l'entête dans lequel vous pouvez placer les fonctions qui testent l'interface voulue, quelques éléments HTML avec des attributs que vous pouvez lire, modifier ou manipuler de quelque manière que ce soit, et l'interface utilisateur Web nécessaire pour appeler toutes ces fonctions depuis le navigateur.</p>
+
+<p>Vous pouvez utiliser cette page de test ou en créer une semblable pour tester les interfaces DOM qui vous intéressent et voir comment elles fonctionnent sur la plateforme du navigateur. Vous pouvez mettre à jour le contenu de la fonction <code>test()</code>, créer plus de boutons, ou ajouter d'autres éléments si nécessaire.</p>
+
+<pre class="notranslate">&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;Tests du DOM&lt;/title&gt;
+&lt;script type="application/x-javascript"&gt;
+function setBodyAttr(attr,value){
+  if(document.body) eval('document.body.'+attr+'="'+value+'"');
+  else notSupported();
+}
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&lt;div style="margin: .5in; height="400""&gt;
+&lt;p&gt;&lt;b&gt;&lt;tt&gt;text&lt;/tt&gt; color&lt;/p&gt;
+&lt;form&gt;
+&lt;select onChange="setBodyAttr('text',
+    this.options[this.selectedIndex].value);"&gt;
+&lt;option value="black"&gt;black
+&lt;option value="darkblue"&gt;darkblue
+&lt;/select&gt;
+ &lt;p&gt;&lt;b&gt;&lt;tt&gt;bgColor&lt;/tt&gt;&lt;/p&gt;
+ &lt;select onChange="setBodyAttr('bgColor',
+    this.options[this.selectedIndex].value);"&gt;
+&lt;option value="white"&gt;white
+&lt;option value="lightgrey"&gt;gray
+ &lt;/select&gt;
+&lt;p&gt;&lt;b&gt;&lt;tt&gt;link&lt;/tt&gt;&lt;/p&gt;
+&lt;select onChange="setBodyAttr('link',
+     this.options[this.selectedIndex].value);"&gt;
+&lt;option value="blue"&gt;blue
+&lt;option value="green"&gt;green
+&lt;/select&gt;  &lt;small&gt;
+     &lt;a href="http://www.brownhen.com/dom_api_top.html" id="sample"&gt;
+(exemple de lien)&lt;/a&gt;&lt;/small&gt;&lt;br&gt;
+&lt;/form&gt;
+&lt;form&gt;
+  &lt;input type="button" value="version" onclick="ver()" /&gt;
+&lt;/form&gt;
+&lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>Pour tester un grand nombre d'interfaces dans une seule page, par exemple une « suite » de propriétés affectant les couleurs d'une page Web, vous pouvez créer une page de test semblable avec une console complète de boutons, de champs de texte et d'autres élements HTML. La capture d'écran suivante vous donnera une idée de comment les interfaces peuvent être regroupées à des fins de test.</p>
+
+<p>Figure 0.1 Exemple de page de test du DOM</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/391/DOM_Ref_Introduction_to_the_DOM.gif" style="height: 375px; width: 199px;"></p>
+
+<p>Dans cet exemple, les menus déroulants mettent à jour dynamiquement les aspects de la page web  accessibles au DOM comme sa couleur de fond (<code>bgColor</code>), la couleur des hyperliens (<code>aLink</code>) et la couleur du texte (<code>text</code>). Cependant, lorsque vous concevez vos pages de test, tester les interfaces au fur et à mesure que vous les lisez est une partie importante de l'apprentissage de l'utilisation efficace du DOM.</p>
+
+<h2 id="Subnav">Subnav</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model">Référence du DOM</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Introduction">Introduction au DOM</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Les_%C3%A9v%C3%A8nements_et_le_DOM">Les événements et le DOM</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Exemples">Exemples</a></li>
+</ul>
+
+<article class="approved">
+<div class="boxed translate-rendered text-content">
+<div>{{DefaultAPISidebar("DOM")}}</div>
+</div>
+</article>
+
+<article class="localized">
+<header>
+<h3 id="Traduction_en_Français">Traduction en Français :</h3>
+</header>
+
+<div class="guide-links"><a href="https://wiki.developer.mozilla.org/fr/docs/MDN/Community" rel="noopener">Besoin d'aide ?</a> • <a href="https://wiki.developer.mozilla.org/fr/docs/MDN/Contribute/Editor" rel="noopener">Guide d'édition</a> • <a href="https://wiki.developer.mozilla.org/fr/docs/MDN/Contribute/Content/Style_guide" rel="noopener">Guide stylistique</a></div>
+
+<div class="editor-wrapper" id="editor-wrapper">
+<div class="draft-container">
+<div class="draft-old"></div>
+
+<div class="draft-status"><span id="draft-action">Brouillon enregistré automatiquement : <time class="time-ago" id="draft-time" title="2019-10-19T19:12:47.156Z">19/10/2019 21:12:47</time></span></div>
+</div>
+
+<div class="ckeditor-container editor-container dirty">
+<div class="editor">
+<div class="editor-tools"></div>
+
+<div style="height: 106px;">
+<div style="border: 1px solid rgb(182, 182, 182); width: 894px; position: fixed; top: 0px;"></div>
+</div>
+</div>
+</div>
+</div>
+</article>
+
+<article class="localized">
+<div class="editor-wrapper" id="editor-wrapper">
+<div class="ckeditor-container editor-container dirty">
+<div class="editor">
+<div class="cke" dir="ltr" id="cke_id_content" lang="fr">
+<div>
+<div id="cke_1_contents" style="height: 9993px;"></div>
+</div>
+</div>
+</div>
+</div>
+</div>
+</article>
diff --git a/files/fr/web/api/document_object_model/les_évènements_et_le_dom/index.html b/files/fr/web/api/document_object_model/les_évènements_et_le_dom/index.html
new file mode 100644
index 0000000000..cd96a7446c
--- /dev/null
+++ b/files/fr/web/api/document_object_model/les_évènements_et_le_dom/index.html
@@ -0,0 +1,74 @@
+---
+title: Les évènements et le DOM
+slug: Web/API/Document_Object_Model/Les_évènements_et_le_DOM
+tags:
+  - API
+  - DOM
+  - Guide
+  - évènements
+translation_of: Web/API/Document_Object_Model/Events
+---
+<h2 id="Introduction" name="Introduction">Introduction</h2>
+
+<p>Ce chapitre décrit le modèle d'événement DOM. L'interface <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event">Event</a> elle-même est décrite, ainsi que les interfaces pour l'enregistrement des évènements sur les noeuds dans le DOM, les <a href="https://developer.mozilla.org/fr/docs/Web/API/EventTarget/addEventListener">écouteurs d'évènements</a> et d'autres exemples montrant les relations des différentes interfaces d'évènements entre elles.</p>
+
+<p>Il existe un excellent diagramme qui explique clairement les trois phases du flux d'évènements à travers le DOM dans le <a href="http://www.w3.org/TR/DOM-Level-3-Events/#dom-event-architecture">document sur les évènements DOM Niveau 3</a>.</p>
+
+<p>Voir aussi l'<a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Exemples#Exemple_5_:_propagation_d%27%C3%A9v%C3%A8nements">exemple 5 : Propagation des évènements</a> dans le chapitre "Exemples" pour des exemples détaillés sur le déplacement des évènements à travers le DOM.</p>
+
+<h2 id="DOM_event_handler_List" name="DOM_event_handler_List">Enregistrement des écouteurs d'évènements</h2>
+
+<p>Il y a 3 moyens d'enregistrer les gestionnaires d'évènements pour un élément DOM.</p>
+
+<h3 id="EventTarget.addEventListener" name="EventTarget.addEventListener"><a href="/en-US/docs/Web/API/EventTarget.addEventListener"><code>EventTarget.addEventListener</code></a></h3>
+
+<pre class="brush: js">// Supposons que myButton est un élément de bouton
+myButton.addEventListener('click', function(){alert('Hello world');}, false);
+</pre>
+
+<p>C'est la méthode à utiliser dans les pages web modernes.</p>
+
+<p>Note : Internet Explorer 6-8 ne prend pas en charge cette méthode, il offre une API similaire {{domxref("EventTarget.attachEvent")}} à la place. Pour la compatibilité entre navigateurs, utilisez l'une des nombreuses bibliothèques JavaScript disponibles.</p>
+
+<p>Plus de détails peuvent être trouvés sur la page de référence {{domxref("EventTarget.addEventListener")}}.</p>
+
+<h3 id="HTML_attribute" name="HTML_attribute"><a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/Building_blocks/Events#Inline_event_handlers_%E2%80%94_don%27t_use_these">attribut HTML</a></h3>
+
+<pre class="brush: html">&lt;button onclick="alert('Hello world!')"&gt;
+</pre>
+
+<p>Le code JavaScript de l'attribut est passé à l'objet évènement par le paramètre <code>event</code>. <a href="http://dev.w3.org/html5/spec/webappapis.html#the-event-handler-processing-algorithm">La valeur renvoyée est traitée d'une façon spéciale décrite dans la spécification HTML</a>.</p>
+
+<p>Ce moyen devrait être évité. Cela rend le balisage plus grand et moins lisible. Les aspects de contenu / structure et comportement ne sont pas bien séparés, rendant un bogue plus difficile à trouver.</p>
+
+<h3 id="DOM_element_properties" name="DOM_element_properties">Propriétés d'un élément DOM</h3>
+
+<pre class="brush: js">// Supposons que myButton est un élément de bouton
+myButton.onclick = function(event){alert('Hello world');};
+</pre>
+
+<p>La fonction peut être définie pour prendre un paramètre d'<code>event</code>. <a href="http://dev.w3.org/html5/spec/webappapis.html#the-event-handler-processing-algorithm">La valeur renvoyée est traitée de façon spéciale décrite dans la spécification HTML</a>.</p>
+
+<p>Le problème avec cette méthode est qu'un seul gestionnaire peut être défini par élément et par évènement.</p>
+
+<h2 id="Accès_aux_interfaces_d'évènements">Accès aux interfaces d'évènements</h2>
+
+<p>Les gestionnaires d'évènements peuvent être attachés à divers objets y compris les éléments DOM, le document, l'<a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux">objet fenêtre</a>, etc. Lorsqu'un évènement se produit, un objet évènement est créé et passé séquentiellement aux écouteurs d'évènements.</p>
+
+<p>L'interface {{domxref("Event")}} est accessible à partir de la fonction gestionnaire, via l'objet événement passé en premier argument. L'exemple simple suivant montre comment un objet d'événement est transmis à la fonction de gestionnaire d'événements et peut être utilisé à partir d'une telle fonction.</p>
+
+<pre class="brush: js">function foo(evt) {
+  // le paramètre evt est automatiquement assigné à l'objet évènement
+  alert(evt);
+}
+table_el.onclick = foo;
+</pre>
+
+<h2 id="Subnav">Subnav</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model">Référence du DOM</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Introduction">Introduction au DOM</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Les_%C3%A9v%C3%A8nements_et_le_DOM">Les évènements et le DOM</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Exemples">Exemples</a></li>
+</ul>
diff --git a/files/fr/web/api/document_object_model/localisation_des_éléments_dom_avec_les_sélecteurs/index.html b/files/fr/web/api/document_object_model/localisation_des_éléments_dom_avec_les_sélecteurs/index.html
new file mode 100644
index 0000000000..aae8808be0
--- /dev/null
+++ b/files/fr/web/api/document_object_model/localisation_des_éléments_dom_avec_les_sélecteurs/index.html
@@ -0,0 +1,55 @@
+---
+title: Localisation des éléments DOM avec les sélecteurs
+slug: >-
+  Web/API/Document_Object_Model/Localisation_des_éléments_DOM_avec_les_sélecteurs
+tags:
+  - API
+  - DOM
+  - Débutant
+  - Elements
+  - Sélecteurs
+translation_of: Web/API/Document_object_model/Locating_DOM_elements_using_selectors
+---
+<div>{{ gecko_minversion_header("1.9.1") }}</div>
+
+<p>L'API Selectors fournit des méthodes simples et rapides pour retrouver les noeuds <a class="internal" href="https://developer.mozilla.org/fr/docs/Web/API/element" title="en-US/docs/DOM/Element"><code>Element</code></a> du DOM par correspondance avec un jeu de sélecteurs. C'est beaucoup plus rapide que les techniques passées, pour lesquelles il était nécessaire, par exemple, d'utiliser une boucle en code JavaScript pour localiser l'élément spécifique que l'on devait trouver.</p>
+
+<h2 id="L'interface_NodeSelector">L'interface NodeSelector</h2>
+
+<p>Cette spécification ajoute deux nouvelles méthodes à tous les objets mettant en oeuvre les interfaces <a class="internal" href="https://developer.mozilla.org/fr/docs/Web/API/document" title="en-US/docs/DOM/Document"><code>Document</code></a>, <a class="internal" href="https://developer.mozilla.org/fr/docs/Web/API/DocumentFragment" title="en-US/docs/DOM/DocumentFragment"><code>DocumentFragment</code></a> ou <a class="internal" href="https://developer.mozilla.org/fr/docs/Web/API/element" title="en-US/docs/DOM/Element"><code>Element</code></a> :</p>
+
+<dl>
+ <dt><code>querySelector</code></dt>
+ <dd>Renvoie le premier noeud <a class="internal" href="https://developer.mozilla.org/fr/docs/Web/API/element" title="en-US/docs/DOM/Element"><code>Element</code></a> correspondant dans la sous-arborescence du noeud. Si aucun noeud correspondant n'est trouvé, <code>null</code> est renvoyé.</dd>
+ <dt><code>querySelectorAll</code></dt>
+ <dd>Renvoie une <a class="internal" href="https://developer.mozilla.org/fr/docs/Web/API/NodeList" title="en-US/docs/DOM/NodeList"><code>NodeList</code></a> (<em>liste de noeuds</em>) contenant tous les noeuds <code>Element</code> correspondants dans la sous-arborescence du noeud, ou une <code>NodeList</code> vide si aucune correspondance n'a été trouvée.</dd>
+</dl>
+
+<div class="note"><strong>Note :</strong> La <code><a class="internal" href="https://developer.mozilla.org/fr/docs/Web/API/NodeList" title="en-US/docs/DOM/NodeList">NodeList</a></code> retournée par <code><a class="internal" href="https://developer.mozilla.org/fr/docs/Web/API/Element/querySelectorAll" title="en-US/docs/DOM/Element.querySelectorAll">querySelectorAll()</a></code> n'est pas directe. À la différence des autres méthodes de requêtes DOM qui retournent une liste de noeuds directe.</div>
+
+<p>Vous pouvez trouver des exemples et des détails en lisant la documentation sur les méthodes <a class="internal" href="https://developer.mozilla.org/fr/docs/Web/API/Element/querySelector" title="en-US/docs/DOM/Element.querySelector"><code>querySelector()</code></a> et <a class="internal" href="https://developer.mozilla.org/fr/docs/Web/API/Element/querySelectorAll" title="en-US/docs/DOM/Element.querySelectorAll"><code>querySelectorAll()</code></a>, ainsi que dans l'article <a class="internal" href="https://developer.mozilla.org/fr/docs/Archive/Add-ons/Code_snippets/QuerySelector" title="en-US/docs/Code snippets/QuerySelector">Extraits de code pour querySelector</a>.</p>
+
+<h2 id="Sélecteurs">Sélecteurs</h2>
+
+<p>Les méthodes de Selector acceptent un ou plusieurs sélecteurs séparés par des virgules pour déterminer les éléments à renvoyer. Par exemple, pour sélectionner tous les éléments paragraphe (<code>p</code>) dans le document dont la classe CSS est soit <code>warning</code> soit <code>note</code>, vous pouvez utiliser ce qui suit :</p>
+
+<pre><code>var special = document.querySelectorAll( "p.warning, p.note" );</code></pre>
+
+<p>Vous pouvez aussi interroger par l'ID (<em>identifiant</em>). Par exemple :</p>
+
+<pre><code>var el = document.querySelector( "#main, #basic, #exclamation" );</code></pre>
+
+<p>Après l'exécution du code ci-dessus, <code>el</code> contient le premier élément dans le document dont l'ID est <code>main</code>, <code>basic</code> ou <code>exclamation</code>.</p>
+
+<p>Vous pouvez utiliser tous les sélecteurs CSS avec les méthodes <code>querySelector()</code> et <code>querySelectorAll()</code>.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/selectors-api/" title="http://www.w3.org/TR/selectors-api/">API Selectors</a> (en)</li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Element/querySelector" title="en-US/docs/DOM/Element.querySelector"><code>element.querySelector</code></a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Element/querySelectorAll" title="en-US/docs/DOM/element.querySelectorAll"><code>element.querySelectorAll</code></a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document/querySelector" title="en-US/docs/DOM/document.querySelector"><code>document.querySelector</code></a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document/querySelectorAll" title="en-US/docs/DOM/document.querySelectorAll"><code>document.querySelectorAll</code></a></li>
+ <li><a href="/en-US/docs/Code_snippets/QuerySelector" title="en-US/docs/Code_snippets/QuerySelector">Extraits de code pour querySelector</a></li>
+</ul>
diff --git a/files/fr/web/api/document_object_model/préface/index.html b/files/fr/web/api/document_object_model/préface/index.html
new file mode 100644
index 0000000000..025bc207a0
--- /dev/null
+++ b/files/fr/web/api/document_object_model/préface/index.html
@@ -0,0 +1,53 @@
+---
+title: Préface
+slug: Web/API/Document_Object_Model/Préface
+tags:
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/Document_Object_Model
+---
+<p>{{ ApiRef() }}</p>
+<h3 id=".C3.80_propos_de_cette_r.C3.A9f.C3.A9rence" name=".C3.80_propos_de_cette_r.C3.A9f.C3.A9rence">À propos de cette référence</h3>
+<p>Cette section décrit le guide lui-même : ceux à qui il est destiné, la manière dont sont présentées les informations, et d'utiliser les exemples de la référence dans vos propres développements avec DOM.</p>
+<p>Notez que ce document est en cours de développement, et n'est pas actuellement une liste exhaustive de toutes les méthodes et propriétés DOM implémentées par Gecko. Chaque section individuelle du document (par exemple la <a href="fr/DOM/document">référence de DOM document</a>) est cependant complète pour les objets décrits. Lorsque des informations de référence pour les nombreux membres de cette énorme API deviennent disponibles, elles sont intégrées dans ce document.</p>
+<h3 id=".C3.80_qui_est_destin.C3.A9_ce_guide" name=".C3.80_qui_est_destin.C3.A9_ce_guide">À qui est destiné ce guide</h3>
+<p>Le lecteur de la <a href="fr/R%c3%a9f%c3%a9rence_du_DOM_Gecko">Référence du DOM Gecko</a> est un développeur Web ou utilisateur confirmé qui a une idée de la façon dont les pages Web sont construites. Cette référence évite de présumer des connaissances préalables du lecteur en ce qui concerne le DOM, <a href="fr/XML">XML</a>, les serveurs et standards du Web, et même en ce qui concerne <a href="fr/JavaScript">JavaScript</a>, le langage dans lequel le DOM est rendu accessible. Cependant, il suppose que vous soyez familiers avec <a href="fr/HTML">HTML</a>, avec son balisage, avec la structure basique des pages Web, avec les navigateurs, et avec les feuilles de style.</p>
+<p>Le contenu introductif présenté ici, avec ses nombreux exemples et ses explications détaillées, s'avèrera utile tant pour les développeurs débutants que pour les développeurs expérimentés dans le domaine du Web. Il n'est pas réservé aux « débutants » et l'on peut le considérer comme un manuel de référence évolutif de l'API.</p>
+<h3 id="Pr.C3.A9sentation_de_Gecko" name="Pr.C3.A9sentation_de_Gecko">Présentation de Gecko</h3>
+<p>Mozilla, Firefox, Netscape 6+, et les autres navigateurs basés sur Mozilla bénéficient de la même implémentation du DOM. En effet, ils utilisent tous la même technologie de base. <span class="comment">naturally, it applies only to products based on the same version of Gecko, but it's tricky to explain</span></p>
+<p>Gecko, le composant logiciel de ces navigateurs qui gère l'analyse du HTML, la mise en page, le modèle objet de document, et même le rendu de toute l'interface de l'application est un moteur rapide et respectant les standards. Il implémente les standards DOM du W3C et un modèle objet de navigateur similaire au DOM, mais non standardisé (par exemple <a href="fr/DOM/window"><code>window</code></a> etc.) dans le contexte des pages Web et de l'interface applicative (ou
+ <i>
+  chrome</i>
+ ) du navigateur.</p>
+<p>Bien que l'interface applicative et le contenu affichés par le navigateur diffèrent en de nombreux points, le DOM les expose uniformément sous la forme d'une hiérarchie de nœuds.</p>
+<h3 id="Syntaxe_de_l.27API" name="Syntaxe_de_l.27API">Syntaxe de l'API</h3>
+<p>Chaque description dans la référence de l'API comprend la syntaxe, les paramètres entrants et sortants (lorsque le type de retour est donné), un exemple, éventuellement quelques remarques supplémentaires, et un lien vers la spécification appropriée.</p>
+<p>Typiquement, les propriétés en lecture seule ont une seule ligne de syntaxe, puisqu'on peut uniquement accéder à propriétés et non les modifier. Par exemple, la syntaxe de la propriété en lecture seule <code>availHeight</code> de l'objet <code>screen</code> est présentée de la manière suivante :</p>
+<pre class="eval"><i>screenObj</i> = window.screen.availHeight;
+</pre>
+<p>Cela signifie qu'il est seulement possible d'utiliser la propriété dans le membre de droite d'une opération. Dans le cas des propriétés modifiables, il est possible d'assigner une valeur à la propriété, et la syntaxe est présentée de la manière suivante :</p>
+<pre class="eval"><i>chaine</i> = window.status;
+window.status =<i>chaine</i>;
+</pre>
+<p>En général, l'objet dont le membre est décrit est donné dans la description de syntaxe avec un type simple, comme <code>element</code> pour tous les éléments, <code>document</code> pour l'objet de document racine, <code>table</code> pour un objet de tableau, etc. Consultez <a href="fr/R%c3%a9f%c3%a9rence_du_DOM_Gecko/Introduction#Types_de_donn.C3.A9es_importants">Types de données importants</a> pour plus d'informations à propos des types de données.</p>
+<h3 id="Utilisation_des_exemples" name="Utilisation_des_exemples">Utilisation des exemples</h3>
+<p>Beaucoup des exemples dans cette référence sont des fichiers complets que vous pouvez exécuter en les copiant et collant vers un nouveau fichier, puis en les ouvrant dans votre navigateur. D'autres sont des petits bouts de code. Vous pouvez les exécuter en les plaçant dans des fonctions callback de JavaScript. Par exemple, la propriété <a href="fr/DOM/window.document">window.document</a> peut être testée au sein d'une fonction comme celle-ci, laquelle est appelée par le bouton assorti :</p>
+<pre>&lt;html&gt;
+
+&lt;script&gt;
+function testWinDoc() {
+
+  doc= window.document;
+
+  alert(doc.title);
+
+}
+&lt;/script&gt;
+
+&lt;button onclick="testWinDoc();"&gt;test de la propriété document&lt;/button&gt;
+
+&lt;/html&gt;
+</pre>
+<p>Des pages et fonctions similaires peuvent être créés pour tous les membres qui ne sont pas déjà décrits d'une façon prête à être utilisée. Consultez la section <a href="fr/R%c3%a9f%c3%a9rence_du_DOM_Gecko/Introduction#Test_de_l.27API_DOM">Test de l'API DOM</a> de l'introduction pour un canevas de test que vous pourrez utiliser pour tester plusieurs API à la fois.</p>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "en": "en/Gecko_DOM_Reference/Preface", "es": "es/Referencia_DOM_de_Gecko/Prefacio", "ja": "ja/Gecko_DOM_Reference/Preface", "ko": "ko/Gecko_DOM_Reference/Preface", "pl": "pl/Dokumentacja_Gecko_DOM/Przedmowa", "zh-cn": "cn/Gecko_DOM_\u53c2\u8003/Preface" } ) }}</p>
diff --git a/files/fr/web/api/document_object_model/utilisation_du_dom_level_1_core_du_w3c/exemple/index.html b/files/fr/web/api/document_object_model/utilisation_du_dom_level_1_core_du_w3c/exemple/index.html
new file mode 100644
index 0000000000..a9efdf8cdb
--- /dev/null
+++ b/files/fr/web/api/document_object_model/utilisation_du_dom_level_1_core_du_w3c/exemple/index.html
@@ -0,0 +1,44 @@
+---
+title: Exemple
+slug: Web/API/Document_object_model/Utilisation_du_DOM_Level_1_Core_du_W3C/Exemple
+tags:
+  - API
+  - DOM
+  - Débutant
+  - Exemples
+translation_of: Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core/Example
+---
+<p> </p>
+
+<pre> &lt;html&gt;
+ &lt;head&gt;
+   &lt;title&gt;Mon Document&lt;/title&gt;
+   &lt;script type="text/javascript"&gt;
+   function change() {
+     // document.getElementsByTagName("H1") renvoie une NodeList (<em>liste de noeuds</em>) de h1
+     // les éléments dans le document dont le premier a le numéro 0 :
+     var header = document.getElementsByTagName("H1").item(0);
+     // le firstChild (<em>premier enfant</em>) de l'en-tête est un noeud Texte :
+     header.firstChild.data = "Un document dynamique";
+     // maintenant l'en-tête est "Un document dynamique".
+     var para = document.getElementsByTagName("P").item(0);
+     para.firstChild.data = "C'est le premier paragraphe.";
+     // créer un nouveau noeud Texte pour le second paragraphe
+     var newText = document.createTextNode("Ceci est le second paragraphe.");
+     // créer un nouvel Element devant être le second paragraphe
+     var newElement = document.createElement("P");
+     // placer le texte dans le paragraphe
+     newElement.appendChild(newText);
+     // et placer le paragraphe à la fin du document par son ajout
+     // le BODY (<em>corps</em>) (qui est le parent de para)
+     para.parentNode.appendChild(newElement);
+   }
+   &lt;/script&gt;
+ &lt;/head&gt;
+ &lt;body&gt;
+   &lt;input type="button" value="Modifier ce document." onclick="change()"&gt;
+   &lt;h1&gt;Header&lt;/h1&gt;
+   &lt;p&gt;Paragraph&lt;/p&gt;
+ &lt;/body&gt;
+ &lt;/head&gt;
+</pre>
diff --git a/files/fr/web/api/document_object_model/utilisation_du_dom_level_1_core_du_w3c/index.html b/files/fr/web/api/document_object_model/utilisation_du_dom_level_1_core_du_w3c/index.html
new file mode 100644
index 0000000000..0f140378e6
--- /dev/null
+++ b/files/fr/web/api/document_object_model/utilisation_du_dom_level_1_core_du_w3c/index.html
@@ -0,0 +1,92 @@
+---
+title: Utilisation du DOM Level 1 Core du W3C
+slug: Web/API/Document_object_model/Utilisation_du_DOM_Level_1_Core_du_W3C
+tags:
+  - Arbre
+  - DOM
+  - Noeud
+  - Texte
+translation_of: Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core
+---
+<p>Le DOM Level 1 Core du W3C est un modèle objet puissant permettant de modifier l'arbre de contenu de documents. Il est géré dans Mozilla (sur lequel Firefox et Netscape sont basés) et (pour la plus grande partie) dans Internet Explorer 5 pour Windows. Il s'agit d'une base essentielle du scripting sur le Web dans l'avenir.</p>
+
+<h2 id="D.C3.A9finition_d.27un_arbre_de_contenu" name="D.C3.A9finition_d.27un_arbre_de_contenu">Définition d'un arbre de contenu</h2>
+
+<p>Beaucoup d'auteurs HTML peuvent penser qu'HTML est quelque chose de plat — un gros amas de texte avec quelques balises au milieu. Cependant, c'est aussi beaucoup plus que ça. Tout document HTML (ou, par ailleurs, tout document SGML ou XML) forme une structure arborescente. Par exemple, le document et la structure arborescente qui suivent sont similaires (bien que non identiques — consultez les notes sur <a href="https://developer.mozilla.org/fr/docs/Gestion_des_espaces_dans_le_DOM">les espaces dans le DOM</a>) :</p>
+
+<pre class="eval">&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;Mon document&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;h1&gt;Titre&lt;/h1&gt;
+  &lt;p&gt;Paragraphe&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p><img alt="image:Using_the_W3C_DOM_Level_1_Core-doctree.jpg" class="internal" src="https://developer.mozilla.org/@api/deki/files/415/=Using_the_W3C_DOM_Level_1_Core-doctree.jpg"></p>
+
+<p>Lorsque Mozilla examine un document, un arbre de contenu est construit et ensuite utilisé pour l'affichage.</p>
+
+<p>Les termes utilisés pour décrire des arbres apparaissent souvent dans le DOM Level 1 Core. Chacune des boîtes dessinées dans l'arbre ci-dessus est un nœud dans l'arbre. La ligne au dessus d'un nœud représente une relation parent-enfant : le nœud supérieur est le parent, et le nœud inférieur est l'enfant. Deux enfants du même parent sont par conséquent des frères du même niveau. De même, on peut se référer à des ancêtres et des descendants. (Parler de cousins devient un peu compliqué par contre.)</p>
+
+<h2 id="Ce_que_permet_le_DOM_Level_1_Core" name="Ce_que_permet_le_DOM_Level_1_Core">Ce que permet le DOM Level 1 Core</h2>
+
+<p>Le DOM Level 1 permet de modifier l'arbre du contenu<em>selon vos désirs</em>. Il est suffisamment puissant pour construire n'importe quel document HTML depuis rien. Il permet aux auteurs de modifier quoi que ce soit dans le document, depuis un script, à n'importe quel moment. La manière la plus simple pour les auteurs de pages Web de modifier le DOM dynamiquement est d'utiliser JavaScript. En JavaScript, le document est accessible de la même manière qu'il l'était dans les navigateurs plus anciens : depuis la propriété <code>document</code> de l'objet global. Cet objet <code>document</code> implémente l'<a class="external" href="http://xmlfr.org/w3c/TR/REC-DOM-Level-1/level-one-core.html#i-Document">interface Document</a> de la spécification DOM Level 1 du W3C.</p>
+
+<h2 id="Un_exemple_simple" name="Un_exemple_simple">Un exemple simple</h2>
+
+<p>Supposons que l'auteur désire prendre le document présenté plus haut et changer le contenu du titre, ainsi qu'écrire deux paragraphes plutôt qu'un seul. Le script suivant le permettrait :</p>
+
+<h3 id="Contenu_HTML">Contenu 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>body</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Change this document.<span class="punctuation token">"</span></span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>change()<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>h2</span><span class="punctuation token">&gt;</span></span>Header<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>h2</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>Paragraph<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>body</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h3 id="Contenu_JavaScript">Contenu JavaScript</h3>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">  <span class="keyword token">function</span> <span class="function token">change</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="comment token">// </span></code><span id="result_box" lang="fr"><span>document.getElementsByTagName ("H2") renvoie un NodeList du</span></span><code class="language-js"><span class="comment token"> &lt;h2&gt;</span>
+    <span class="comment token">// éléments dans le document, et le premier est le nombre 0:</span>
+
+    <span class="keyword token">var</span> header <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">"H2"</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">item</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="comment token">// le firstChild de l'en-tête est un noeud texte::</span>
+    header<span class="punctuation token">.</span>firstChild<span class="punctuation token">.</span>data <span class="operator token">=</span> <span class="string token">"A dynamic document"</span><span class="punctuation token">;</span>
+    <span class="comment token">// maintenant l'en-tête est "Un document dynamique".</span>
+
+    <span class="keyword token">var</span> para <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">"P"</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">item</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    para<span class="punctuation token">.</span>firstChild<span class="punctuation token">.</span>data <span class="operator token">=</span> <span class="string token">"This is the first paragraph."</span><span class="punctuation token">;</span>
+
+    <span class="comment token">// crée un nouveau noeud texte pour le second paragraphe</span>
+    <span class="keyword token">var</span> newText <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createTextNode</span><span class="punctuation token">(</span><span class="string token">"This is the second paragraph."</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="comment token">// crée un nouvel Element pour le second paragraphe</span>
+    <span class="keyword token">var</span> newElement <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"P"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="comment token">// pose le texte dans le paragraphe</span>
+    newElement<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>newText<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="comment token">// et pose le paragraphe à la fin du document en l'ajoutant</span>
+    <span class="comment token">// au BODY (qui est le parent de para)</span>
+    para<span class="punctuation token">.</span>parentNode<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>newElement<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span></code></pre>
+
+<p>{{ EmbedLiveSample('A_simple_example', 800, 300) }}</p>
+
+<p>Vous pouvez voir ce script dans <a class="external" href="http://www.mozilla.org/docs/dom/technote/intro/example.html">un exemple complet</a>.</p>
+
+<h3 id="Pour_en_savoir_plus" name="Pour_en_savoir_plus">Pour en apprendre plus</h3>
+
+<p>Maintenant que vous êtes familiarisé avec les concepts basiques du DOM, il existe un document expliquant <a href="https://developer.mozilla.org/fr/docs/Explorer_un_tableau_HTML_avec_des_interfaces_DOM_et_JavaScript">les méthodes fondamentales de DOM Level 1</a>. C'est la suite de ce document.</p>
+
+<p>Consultez également la <a class="external" href="http://xmlfr.org/w3c/TR/REC-DOM-Level-1/level-one-core.html">spécification DOM Level 1 Core</a> du W3C (traduction en français non normative). C'est une spécification relativement claire, même si elle est un peu formelle. Ce qui est surtout intéressant pour les auteurs, c'est la description des différents objets DOM et de toutes leurs propriétés et méthodes. Voyez encore notre <a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model">documentation complète sur le DOM</a>.</p>
+
+<div class="originaldocinfo">
+<p><strong>Informations sur le document original</strong></p>
+
+<ul>
+ <li>Auteur(s) : L. David Baron &lt;dbaron at dbaron dot org&gt;</li>
+ <li>Copyright : © 1998-2005 par des contributeurs individuels à mozilla.org ; le contenu est disponible sous une <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">licence Creative Commons</a></li>
+</ul>
+</div>
diff --git a/files/fr/web/api/document_object_model/whitespace/index.html b/files/fr/web/api/document_object_model/whitespace/index.html
new file mode 100644
index 0000000000..d13a541dc7
--- /dev/null
+++ b/files/fr/web/api/document_object_model/whitespace/index.html
@@ -0,0 +1,232 @@
+---
+title: Gestion des espaces dans le DOM
+slug: Web/API/Document_Object_Model/Whitespace
+tags:
+  - DOM
+translation_of: Web/API/Document_Object_Model/Whitespace
+---
+<h2 id="Le_probl.C3.A8me" name="Le_probl.C3.A8me">Le problème</h2>
+
+<p>La présence d'espaces et de blancs dans le <a href="fr/DOM">DOM</a> peut rendre la manipulation de l'arbre de contenu difficile dans des aspects qu'on ne prévoit pas forcément. Dans Mozilla, tous les espaces et blancs dans le contenu texte du document original sont représentés dans le DOM (cela ne concerne pas les blancs à l'intérieur des balises). (C'est nécessaire en interne afin que l'éditeur puisse conserver le formatage des documents et que l'instruction <code>white-space: pre</code> en <a href="fr/CSS">CSS</a> fonctionne.) Cela signifie que :</p>
+
+<ul>
+ <li>il y aura certains nœuds texte qui ne contiendront que du vide, et</li>
+ <li>certains nœuds texte commenceront ou se termineront par des blancs.</li>
+</ul>
+
+<p>En d'autres termes, l'arbre DOM pour le document qui suit ressemblera à l'image ci-dessous (où « \n » représente un retour à la ligne) :</p>
+
+<pre class="eval">&lt;!-- My document --&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;My Document&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;h1&gt;Header&lt;/h1&gt;
+  &lt;p&gt;
+    Paragraph
+  &lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p><img src="https://mdn.mozillademos.org/files/854/whitespace_tree.png" style="height: 306px; width: 618px;"></p>
+
+<p>Ceci peut rendre les choses un peu plus difficiles pour les utilisateurs du DOM qui aimeraient parcourir le contenu, sans se préoccuper des blancs.</p>
+
+<h2 id="Rendre_les_choses_plus_faciles" name="Rendre_les_choses_plus_faciles">Rendre les choses plus faciles</h2>
+
+<p><span id="result_box" lang="fr"><span>On peut formater leur code comme indiqué ci-dessous pour contourner le problème:</span></span></p>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="comment token">&lt;!-- jolie impression conventionnelle
+     avec des espaces entre les balises:
+ --&gt;</span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span><span class="punctuation token">&gt;</span></span>
+ <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>ul</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>li</span><span class="punctuation token">&gt;</span></span>Position 1<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>li</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>li</span><span class="punctuation token">&gt;</span></span>Position 2<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>li</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>li</span><span class="punctuation token">&gt;</span></span>Position 3<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>li</span><span class="punctuation token">&gt;</span></span>
+ <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>ul</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+
+<span class="comment token">&lt;!-- jolie impression adaptée au problème :
+ --&gt;</span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span>
+ <span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>ul</span>
+  <span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>li</span><span class="punctuation token">&gt;</span></span>Position 1<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>li</span>
+  <span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>li</span><span class="punctuation token">&gt;</span></span>Position 2<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>li</span>
+  <span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>li</span><span class="punctuation token">&gt;</span></span>Position 3<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>li</span>
+ <span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>ul</span>
+<span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p>Le code JavaScript ci-dessous définit plusieurs fonctions facilitant la manipulation d'espaces dans le DOM :</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="comment token">/**
+ * Tout au long, les espaces sont définis comme l'un des caractères
+ *  "\t" TAB \u0009
+ *  "\n" LF  \u000A
+ *  "\r" CR  \u000D
+ *  " "  SPC \u0020
+ *
+ * Ceci n'utilise pas le "\s" de Javascript parce que cela inclut le non-brisement
+ * espaces (et aussi d'autres caractères).
+ */</span>
+
+
+<span class="comment token">/**
+ * Détermine si le contenu du texte d'un nœud est entièrement blanc.
+ *
+ * @param nod  Un nœud implémentant l'interface |CharacterData| (c'est-à-dire,
+ *             un nœud |Text|, |Comment| ou |CDATASection|
+ * @return     True <em>(vrai)</em> Si tout le contenu du texte du |nod| est un espace,
+ *             sinon false <em>(faux)</em>.
+ */</span>
+<span class="keyword token">function</span> <span class="function token">is_all_ws</span><span class="punctuation token">(</span> nod <span class="punctuation token">)</span>
+<span class="punctuation token">{</span>
+  <span class="comment token">// Utilise ECMA-262 Edition 3 chaînes et fonctionnalités RegExp</span>
+  <span class="keyword token">return</span> <span class="operator token">!</span><span class="punctuation token">(</span><span class="regex token">/[^\t\n\r ]/</span><span class="punctuation token">.</span><span class="function token">test</span><span class="punctuation token">(</span>nod<span class="punctuation token">.</span>textContent<span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+
+<span class="comment token">/**
+ * Détermine si le nœud doit être ignoré par les fonctions d'itération.
+ *
+ * @param nod  Un objet implémentant l'interface DOM1 |Node|.
+ * @return     true <em>(vrai)</em> si le nœud est :
+ *                1) un nœud |Text| qui est tout en espace
+ *                2) un nœud |Comment|
+ *             et autrement false <em>(faux)</em>.
+ */</span>
+
+<span class="keyword token">function</span> <span class="function token">is_ignorable</span><span class="punctuation token">(</span> nod <span class="punctuation token">)</span>
+<span class="punctuation token">{</span>
+  <span class="keyword token">return</span> <span class="punctuation token">(</span> nod<span class="punctuation token">.</span>nodeType <span class="operator token">==</span> <span class="number token">8</span><span class="punctuation token">)</span> <span class="operator token">||</span> <span class="comment token">// un nœud commentaire</span>
+         <span class="punctuation token">(</span> <span class="punctuation token">(</span>nod<span class="punctuation token">.</span>nodeType <span class="operator token">==</span> <span class="number token">3</span><span class="punctuation token">)</span> <span class="operator token">&amp;&amp;</span> <span class="function token">is_all_ws</span><span class="punctuation token">(</span>nod<span class="punctuation token">)</span> <span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// un nœud texte, tout espace</span>
+<span class="punctuation token">}</span>
+
+<span class="comment token">/**
+ * Version de |previousSibling| qui ignore les nœuds qui sont entièrement
+ * espace ou commentaire.  (Normalement |previousSibling| est une propriété
+ * de tous les nœuds DOM qui donnent le nœud frère, le nœud qui est
+ * un enfant du même parent, qui se produit immédiatement avant le
+ * nœud référence.)
+ *
+ * @param sib  Le nœud référence .
+ * @return     soit :
+ *               1) le frère précédent le plus proche de |sib| qui ne peut
+ *                  être ignoré du fait de la fonction |is_ignorable|, ou
+ *               2) null si aucun nœud n'existe.
+ */</span>
+<span class="keyword token">function</span> <span class="function token">node_before</span><span class="punctuation token">(</span> sib <span class="punctuation token">)</span>
+<span class="punctuation token">{</span>
+  <span class="keyword token">while</span> <span class="punctuation token">(</span><span class="punctuation token">(</span>sib <span class="operator token">=</span> sib<span class="punctuation token">.</span>previousSibling<span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span><span class="function token">is_ignorable</span><span class="punctuation token">(</span>sib<span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="keyword token">return</span> sib<span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+  <span class="keyword token">return</span> <span class="keyword token">null</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="comment token">/**
+ * Version de |nextSibling| qui ignore les nœuds qui sont entièrement
+ * espace ou commentaire.
+ *
+ * @param sib  Le nœud référence .
+ * @return     soit :
+ *               1) le frère précédent le plus proche de |sib| qui ne peut
+ *                  être ignoré du fait de la fonction |is_ignorable|, ou
+ *               2) null si aucun nœud n'existe.
+ */</span>
+<span class="keyword token">function</span> <span class="function token">node_after</span><span class="punctuation token">(</span> sib <span class="punctuation token">)</span>
+<span class="punctuation token">{</span>
+  <span class="keyword token">while</span> <span class="punctuation token">(</span><span class="punctuation token">(</span>sib <span class="operator token">=</span> sib<span class="punctuation token">.</span>nextSibling<span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span><span class="function token">is_ignorable</span><span class="punctuation token">(</span>sib<span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="keyword token">return</span> sib<span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+  <span class="keyword token">return</span> <span class="keyword token">null</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="comment token">/**
+ * Version de |lastChild| qui ignore les nœuds qui sont entièrement
+ * espace ou commentaire. (Normalement |lastChild| est une propriété
+ * de tous les nœuds DOM qui donnent le dernier des nœuds contenus
+ * directement dans le nœud de référence.)
+ *
+ * @param sib  Le nœud référence.
+ * @return     soit :
+ *               1) Le dernier enfant de |sib| qui ne peut
+ *                  être ignoré du fait de la fonction |is_ignorable|, ou
+ *               2) null si aucun nœud n'existe.
+ */</span>
+<span class="keyword token">function</span> <span class="function token">last_child</span><span class="punctuation token">(</span> par <span class="punctuation token">)</span>
+<span class="punctuation token">{</span>
+  <span class="keyword token">var</span> res<span class="operator token">=</span>par<span class="punctuation token">.</span>lastChild<span class="punctuation token">;</span>
+  <span class="keyword token">while</span> <span class="punctuation token">(</span>res<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span><span class="function token">is_ignorable</span><span class="punctuation token">(</span>res<span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="keyword token">return</span> res<span class="punctuation token">;</span>
+    res <span class="operator token">=</span> res<span class="punctuation token">.</span>previousSibling<span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+  <span class="keyword token">return</span> <span class="keyword token">null</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="comment token">/**
+ * Version de |firstChild| qui ignore les nœuds qui sont entièrement
+ * espace ou commentaire..
+ *
+ * @param sib  le nœud référence.
+ * @return     soit:
+ *               1) le nœud premier enfant de |sib| qui ne peut
+ *                  être ignoré du fait de la fonction |is_ignorable|, ou
+ *               2) null si aucun nœud n'existe.
+ */</span>
+<span class="keyword token">function</span> <span class="function token">first_child</span><span class="punctuation token">(</span> par <span class="punctuation token">)</span>
+<span class="punctuation token">{</span>
+  <span class="keyword token">var</span> res<span class="operator token">=</span>par<span class="punctuation token">.</span>firstChild<span class="punctuation token">;</span>
+  <span class="keyword token">while</span> <span class="punctuation token">(</span>res<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span><span class="function token">is_ignorable</span><span class="punctuation token">(</span>res<span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="keyword token">return</span> res<span class="punctuation token">;</span>
+    res <span class="operator token">=</span> res<span class="punctuation token">.</span>nextSibling<span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+  <span class="keyword token">return</span> <span class="keyword token">null</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="comment token">/**
+ * Version de |data| cela n'inclut pas les espaces au début
+ * et termine et normalise tous les espaces dans un seul espace. (Normalement
+ * |data | est une propriété des nœuds de texte qui donne le texte du nœud.)
+ *
+ * @param txt  Le nœud de texte dont les données doivent être renvoyées
+ * @return     Une chaîne donnant le contenu du nœud de texte avec
+ *             espace blanc s'est effondré.
+ */</span>
+<span class="keyword token">function</span> <span class="function token">data_of</span><span class="punctuation token">(</span> txt <span class="punctuation token">)</span>
+<span class="punctuation token">{</span>
+  <span class="keyword token">var</span> data <span class="operator token">=</span> txt<span class="punctuation token">.</span>textContent<span class="punctuation token">;</span>
+  <span class="comment token">// Utilise ECMA-262 Edition 3 chaînes et fonctionnalités RegExp</span>
+  data <span class="operator token">=</span> data<span class="punctuation token">.</span><span class="function token">replace</span><span class="punctuation token">(</span><span class="regex token">/[\t\n\r ]+/g</span><span class="punctuation token">,</span> <span class="string token">" "</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span>data<span class="punctuation token">.</span><span class="function token">charAt</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">)</span> <span class="operator token">==</span> <span class="string token">" "</span><span class="punctuation token">)</span>
+    data <span class="operator token">=</span> data<span class="punctuation token">.</span><span class="function token">substring</span><span class="punctuation token">(</span><span class="number token">1</span><span class="punctuation token">,</span> data<span class="punctuation token">.</span>length<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span>data<span class="punctuation token">.</span><span class="function token">charAt</span><span class="punctuation token">(</span>data<span class="punctuation token">.</span>length <span class="operator token">-</span> <span class="number token">1</span><span class="punctuation token">)</span> <span class="operator token">==</span> <span class="string token">" "</span><span class="punctuation token">)</span>
+    data <span class="operator token">=</span> data<span class="punctuation token">.</span><span class="function token">substring</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> data<span class="punctuation token">.</span>length <span class="operator token">-</span> <span class="number token">1</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">return</span> data<span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<p>Le code qui suit montre l'utilisation des fonctions présentées plus haut. Il parcourt les enfants d'un élément (dont les enfants sont tous des éléments) pour trouver celui dont le texte est <code>"Ceci est le troisième paragraphe"</code>, et change ensuite l'attribut <code>class</code> et le contenu de ce paragraphe.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> cur <span class="operator token">=</span> <span class="function token">first_child</span><span class="punctuation token">(</span>document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"test"</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">while</span> <span class="punctuation token">(</span>cur<span class="punctuation token">)</span>
+<span class="punctuation token">{</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="function token">data_of</span><span class="punctuation token">(</span>cur<span class="punctuation token">.</span>firstChild<span class="punctuation token">)</span> <span class="operator token">==</span> <span class="string token">"This is the third paragraph."</span><span class="punctuation token">)</span>
+  <span class="punctuation token">{</span>
+      cur<span class="punctuation token">.</span>className <span class="operator token">=</span> <span class="string token">"magic"</span><span class="punctuation token">;</span>
+      cur<span class="punctuation token">.</span>firstChild<span class="punctuation token">.</span>textContent <span class="operator token">=</span> <span class="string token">"This is the magic paragraph."</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+  cur <span class="operator token">=</span> <span class="function token">node_after</span><span class="punctuation token">(</span>cur<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<div class="originaldocinfo">
+<h3 id="Informations_sur_le_document_original" name="Informations_sur_le_document_original">Informations sur le document original</h3>
+
+<ul>
+ <li>Auteur : <a class="external" href="http://dbaron.org">L. David Baron</a></li>
+ <li>Dernière mise à jour : 1er janvier 2003</li>
+ <li>Copyright : © 1998-2005 by individual mozilla.org contributors ; contenu disponible sous <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">licence Creative Commons</a></li>
+</ul>
+</div>
diff --git a/files/fr/web/api/documentfragment/documentfragment/index.html b/files/fr/web/api/documentfragment/documentfragment/index.html
new file mode 100644
index 0000000000..205b036775
--- /dev/null
+++ b/files/fr/web/api/documentfragment/documentfragment/index.html
@@ -0,0 +1,50 @@
+---
+title: DocumentFragment()
+slug: Web/API/DocumentFragment/DocumentFragment
+tags:
+  - API
+  - Constructeur
+  - DOM
+  - Document
+  - Elements
+  - Fragments
+translation_of: Web/API/DocumentFragment/DocumentFragment
+---
+<p>{{ApiRef("DOM")}}{{seeCompatTable}}</p>
+
+<p>Le constructeur <code><strong>DocumentFragment()</strong></code> renvoie un nouvel objet  {{domxref("DocumentFragment")}} créé vide.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>fragment</em> = new DocumentFragment()</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js  language-js"><code class="language-js">fragment <span class="operator token">=</span> new DocumentFragment<span class="function token"><span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Specification" name="Specification">Spécification</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('DOM WHATWG', '#dom-documentfragment', 'DocumentFragment.DocumentFragment()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.DocumentFragment.DocumentFragment")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model" title="/en-US/docs/DOM/DOM_Reference">L'index des interfaces du DOM.</a></li>
+</ul>
diff --git a/files/fr/web/api/documentfragment/index.html b/files/fr/web/api/documentfragment/index.html
new file mode 100644
index 0000000000..eb109de2f1
--- /dev/null
+++ b/files/fr/web/api/documentfragment/index.html
@@ -0,0 +1,105 @@
+---
+title: DocumentFragment
+slug: Web/API/DocumentFragment
+tags:
+  - API
+  - DOM
+  - Document
+  - Fragments
+  - Interface
+  - Noeuds
+translation_of: Web/API/DocumentFragment
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p>L’interface <strong><span class="external"><code>DocumentFragment</code></span></strong> représente un objet document minimal qui n’a pas de parent. Il est utilisé comme une version légère de {{domxref("Document")}} pour stocker un segment de structure de document composé de nœuds, tout comme un document standard. La différence fondamentale est que, comme le fragment de document ne fait pas réellement partie de la structure du DOM, les changements faits au fragment n’affectent pas le document, ne causent pas de {{Glossary("Reflow")}} , et ne provoquent pas les éventuels impacts de performance qui peuvent avoir lieu quand des changements sont faits.</p>
+
+<p>Un usage courant de <code>DocumentFragment</code> est de créer un fragment, assembler un sous-arbre DOM au sein de celui-ci, puis ajouter ou insérer le fragment dans le DOM en utilisant les méthodes de l’interface {{domxref("Node")}} (telles que {{domxref("Node.appendChild", "appendChild()")}} ou {{domxref("Node.insertBefore", "insertBefore()")}}). En faisant ainsi, on place les nœuds du fragment dans le DOM, en laissant derrière un <code>DocumentFragment</code> vide. Comme tous les nœuds sont insérés dans le document en une seule fois, un seul <em>reflow</em> et un seul rendu sont déclenchés, au lieu de potentiellement un pour chaque nœud inséré s’ils avaient été insérés séparément.</p>
+
+<p>Cette interface est également beaucoup utilisée avec les Web components : les éléments {{HTMLElement("template")}} contiennent un <code>DocumentFragment</code> dans leur propriété {{domxref("HTMLTemplateElement.content")}}.</p>
+
+<p>Un <code>DocumentFragment</code> vide peut être créé en utilisant la méthode {{domxref("document.createDocumentFragment()")}} ou le constructeur.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Specification" name="Specification">Propriétés</h2>
+
+<p><em>Cette interface n’a pas de propriétés spécifiques, mais hérite de celles de son parent, </em><em>{{domxref("Node")}}, et implémente celles de l’interface {{domxref("ParentNode")}}.</em></p>
+
+<dl>
+ <dt>{{ domxref("ParentNode.children") }} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Retourne une {{domxref("HTMLCollection")}} dynamique contenant tous les objets de type {{domxref("Element")}} enfants de l’objet <code>DocumentFragment</code>.</dd>
+ <dt>{{ domxref("ParentNode.firstElementChild") }} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Retourne un {{domxref("Element")}} qui est le premier enfant de l’objet <code>DocumentFragment</code>, ou <code>null</code> s’il n’y en a aucun.</dd>
+ <dt>{{ domxref("ParentNode.lastElementChild") }} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Retourne un {{domxref("Element")}} qui est le dernier enfant de l’objet <code>DocumentFragment</code>, ou <code>null</code> s’il n’y en a aucun.</dd>
+ <dt>{{ domxref("ParentNode.childElementCount") }} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Retourne un <code>unsigned long</code> indiquant le nomble d’enfants que le <code>DocumentFragment</code> possède.</dd>
+</dl>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{ domxref("DocumentFragment.DocumentFragment()", "DocumentFragment()") }} {{experimental_inline}}</dt>
+ <dd>Retourne un objet <code>DocumentFragment</code> vide.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Cette interface hérite des méthodes de son parent, {{domxref("Node")}}<em>, et implémente celles de l’interface {{domxref("ParentNode")}}</em></em><em>.</em></p>
+
+<dl>
+ <dt>{{domxref("DocumentFragment.querySelector()")}}</dt>
+ <dd>Retourne le premier nœud {{domxref("Element")}} du <code>DocumentFragment</code>, dans l’ordre du document, correspondant aux sélécteurs spécifiés.</dd>
+ <dt>{{domxref("DocumentFragment.querySelectorAll()")}}</dt>
+ <dd>Retourne une {{domxref("NodeList")}} de tous les nœuds {{domxref("Element")}} du <code>DocumentFragment</code> qui correspondent aux sélecteurs spécifiés.</dd>
+ <dt>{{domxref("DocumentFragment.getElementById()")}}</dt>
+ <dd>Retourne le premier nœud {{domxref("Element")}} du <code style="font-size: 14px;">DocumentFragment</code>, dans l’ordre du document, qui correspond à l’ID spécifié.</dd>
+</dl>
+
+<h2 id="Specifications" name="Specifications">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('DOM WHATWG', '#interface-documentfragment', 'DocumentFragment')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Ajouté le constructeur et l’implémentation de {{domxref("ParentNode")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selectors API Level 1', '#the-apis', 'DocumentFragment')}}</td>
+   <td>{{Spec2('Selectors API Level 1')}}</td>
+   <td>Ajouté les méthodes <code>querySelector()</code> et <code>querySelectorAll()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-B63ED1A3', 'DocumentFragment')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Pas de changement depuis {{SpecName('DOM2 Core')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-B63ED1A3', 'DocumentFragment')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Pas de changement depuis {{SpecName('DOM1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-B63ED1A3', 'DocumentFragment')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.DocumentFragment")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">Index des interfaces DOM</a></li>
+</ul>
diff --git a/files/fr/web/api/documentfragment/queryselector/index.html b/files/fr/web/api/documentfragment/queryselector/index.html
new file mode 100644
index 0000000000..6914d21c4a
--- /dev/null
+++ b/files/fr/web/api/documentfragment/queryselector/index.html
@@ -0,0 +1,85 @@
+---
+title: DocumentFragment.querySelector()
+slug: Web/API/DocumentFragment/querySelector
+tags:
+  - API
+  - DOM
+  - Document
+  - Méthodes
+  - fragment
+translation_of: Web/API/DocumentFragment/querySelector
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p>La méthode <strong><code>DocumentFragment.querySelector()</code></strong> renvoie le premier élément ou <code>null</code> si aucune correspondance n'est trouvée, dans le {{domxref("DocumentFragment")}} (en utilisant la traversée en profondeur des noeuds du document), avec le groupe spécifié de sélecteurs.</p>
+
+<p>Si le sélecteur correspond à un ID (<em>identifiant</em>) et que cet ID est utilisé plusieurs fois par erreur dans le document, il renvoie le premier élément correspondant.</p>
+
+<p>Si les sélecteurs spécifiés dans paramètre sont invalides une {{domxref("DOMException")}} avec une valeur <code>SYNTAX_ERR</code> est lancée.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>element</em> = <em>documentfragment</em>.querySelector(<em>selectors</em>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><em>selectors </em></dt>
+ <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) contenant un ou plusieurs sélecteurs CSS séparés par des virgules.</dd>
+</dl>
+
+<h2 id="Example" name="Example">Exemples</h2>
+
+<h3 id="Exemple_de_base">Exemple de base</h3>
+
+<p>Dans cet exemple de base, le premier élément dans le {{domxref("DocumentFragment")}} avec la classe "<code>myclass</code>" est renvoyé :</p>
+
+<pre class="brush: js">var el = documentfragment.querySelector(".myclass");
+</pre>
+
+<h3 id="Syntaxe_CSS_et_argument_de_la_méthode">Syntaxe CSS et argument de la méthode</h3>
+
+<p>L'argument chaîne transmis à <code>querySelector</code> doit suivre la syntaxe CSS. Pour faire correspondre un identifiant ou des sélecteurs qui ne suivent pas la syntaxe CSS (utilisant un point-virgule ou un espace inappropriés par exemple), il est obligatoire d'échapper les mauvais caractères avec une double barre oblique inverse :</p>
+
+<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;
+document.querySelector('#foo\bar')    // Ne correspond à rien
+document.querySelector('#foo\\\\bar') // Correspond au premier div
+document.querySelector('#foo:bar')     //  Ne correspond à rien
+document.querySelector('#foo\\:bar')   // Correspond au second div
+&lt;/script&gt;
+</pre>
+
+<h2 id="Specification" name="Specification">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('Selectors API Level 2', '#queryselector', 'DocumentFragment.querySelector')}}</td>
+   <td>{{Spec2('Selectors API Level 2')}}</td>
+   <td>Pas de changement de {{SpecName('Selectors API Level 1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selectors API Level 1', '#queryselector', 'DocumentFragment.querySelector')}}</td>
+   <td>{{Spec2('Selectors API Level 1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.DocumentFragment.querySelector")}}</p>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("DocumentFragment")}} à laquelle elle appartient.</li>
+</ul>
diff --git a/files/fr/web/api/documentfragment/queryselectorall/index.html b/files/fr/web/api/documentfragment/queryselectorall/index.html
new file mode 100644
index 0000000000..c5468e6e6a
--- /dev/null
+++ b/files/fr/web/api/documentfragment/queryselectorall/index.html
@@ -0,0 +1,65 @@
+---
+title: DocumentFragment.querySelectorAll()
+slug: Web/API/DocumentFragment/querySelectorAll
+tags:
+  - API
+  - DOM
+  - Document
+  - Méthodes
+  - fragment
+translation_of: Web/API/DocumentFragment/querySelectorAll
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p>La méthode <strong><code>DocumentFragment.querySelectorAll()</code></strong> renvoie une {{domxref("NodeList")}} (<em>liste de noeuds</em>) des éléments du {{domxref("DocumentFragment")}} (en utilisant la traversée en profondeur des noeuds du document), qui correspondent avec le groupe spécifié de sélecteurs.</p>
+
+<p>Si les sélecteurs spécifiés dans paramètre sont invalides une {{domxref("DOMException")}} avec une valeur <code>SYNTAX_ERR</code> est lancée.</p>
+
+<div class="note">
+<p><strong>Note :</strong> La définition de cet API a été déplacé vers l'interface {{domxref("ParentNode")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>elementList</em> = <em>documentframgment</em>.querySelectorAll(<em>selectors</em>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><em>selectors</em></dt>
+ <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) contenant un ou plusieurs sélecteurs CSS séparés par des virgules.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Cet exemple renvoie une liste de tous les éléments <code>div</code> du <code>DocumentFragment</code> avec une classe soit "<code>note</code>" soit "<code>alert</code>" :</p>
+
+<pre class="brush: js">var matches = documentfrag.querySelectorAll("div.note, div.alert");
+</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('Selectors API Level 1', '#queryselector', 'DocumentFragment.querySelectorAll')}}</td>
+   <td>{{Spec2('Selectors API Level 1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.DocumentFragment.querySelectorAll")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("DocumentFragment")}} à laquelle elle appartient.</li>
+</ul>
diff --git a/files/fr/web/api/documentorshadowroot/elementsfrompoint/index.html b/files/fr/web/api/documentorshadowroot/elementsfrompoint/index.html
new file mode 100644
index 0000000000..c3f8c30d22
--- /dev/null
+++ b/files/fr/web/api/documentorshadowroot/elementsfrompoint/index.html
@@ -0,0 +1,104 @@
+---
+title: DocumentOrShadowRoot.elementsFromPoint()
+slug: Web/API/DocumentOrShadowRoot/elementsFromPoint
+tags:
+  - API
+  - Document
+  - DocumentOrShadowRoot
+  - Méthode
+  - Reference
+  - ShadowRoot
+  - elementsFromPoint
+  - elementsFromPoint()
+  - shadow dom
+translation_of: Web/API/DocumentOrShadowRoot/elementsFromPoint
+---
+<div>{{APIRef("DOM")}}{{SeeCompatTable}}</div>
+
+<p><span class="seoSummary">La propriété <strong><code>elementsFromPoint()</code></strong> de l'interface {{domxref("DocumentOrShadowRoot")}}  renvoie un tableau (<em>array</em>) de tous les éléments présents sous le point fourni en paramètre (relatif au <em>viewport</em>).</span></p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var elements = document.elementsFromPoint(x, y);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>x</dt>
+ <dd>L'abscisse du point (coordonnée horizontale).</dd>
+ <dt>y</dt>
+ <dd>L'ordonnée du point (coordonnée verticale).</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un tableau (<em>array</em>) d'objets {{domxref('element')}} représentants les éléments du DOM concernés.</p>
+
+<h2 id="Example" name="Example">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p&gt;Du texte&lt;/p&gt;
+&lt;/div&gt;
+&lt;p&gt;Éléments au point 30, 20:&lt;/p&gt;
+&lt;div id="output"&gt;&lt;/div&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js;highlight[1]">var output = document.getElementById("output");
+if (document.elementsFromPoint) {
+  var elements = document.elementsFromPoint(30, 20);
+  for(var i = 0; i &lt; elements.length; i++) {
+    output.textContent += elements[i].localName;
+    if (i &lt; elements.length - 1) {
+      output.textContent += " &lt; ";
+    }
+  }
+} else {
+  output.innerHTML = "&lt;span style=\"color: red;\"&gt;" +
+     "Votre navigateur ne prend pas en charge &lt;code&gt;document.elementsFromPoint()&lt;/code&gt;" +
+     "&lt;/span&gt;";
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Example', '420', '120')}}</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('Shadow DOM','#extensions-to-the-documentorshadowroot-mixin','DocumentOrShadowRoot')}}</td>
+   <td>{{Spec2('Shadow DOM')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#dom-document-elementsfrompoint', 'Document')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Précise l'ordre selon lequel les éléments sont peints.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.DocumentOrShadowRoot.elementsFromPoint")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{DOMxRef("DocumentOrShadowRoot.elementFromPoint()")}}</li>
+ <li>{{DOMxRef("DocumentOrShadowRoot.msElementsFromRect()")}} {{Non-standard_Inline}}</li>
+</ul>
diff --git a/files/fr/web/api/documentorshadowroot/index.html b/files/fr/web/api/documentorshadowroot/index.html
new file mode 100644
index 0000000000..d8dd814377
--- /dev/null
+++ b/files/fr/web/api/documentorshadowroot/index.html
@@ -0,0 +1,78 @@
+---
+title: DocumentOrShadowRoot
+slug: Web/API/DocumentOrShadowRoot
+tags:
+  - API
+  - Document
+  - DocumentOrShadowRoot
+  - Interface
+  - Reference
+  - ShadowRoot
+  - shadow dom
+translation_of: Web/API/DocumentOrShadowRoot
+---
+<div>{{APIRef("Web Components")}}</div>
+
+<p><span class="seoSummary">Le <strong><code>DocumentOrShadowRoot</code></strong> mélange de l'<a href="/fr/docs/Web/Web_Components/Using_shadow_DOM">API Shadow DOM</a> qui fournit des API qui sont partagées entre les documents et les racines fantômes. Les fonctionnalités suivantes sont incluses dans {{DOMxRef("Document")}} et {{DOMxRef("ShadowRoot")}}.</span></p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{DOMxRef("DocumentOrShadowRoot.activeElement")}}{{ReadOnlyInline}}</dt>
+ <dd>Renvoie l'{{DOMxRef('Element')}} dans l'arbre <code>shadow</code> qui a le focus.</dd>
+ <dt>{{DOMxRef("DocumentOrShadowRoot.fullscreenElement")}}{{ReadOnlyInline}}</dt>
+ <dd>Renvoie l'{{DOMxRef('Element')}} qui est actuellement en mode plein écran pour ce document.</dd>
+ <dt>{{DOMxRef("DocumentOrShadowRoot.pointerLockElement")}} {{Experimental_Inline}}{{ReadOnlyInline}}</dt>
+ <dd>Renvoie l'élément défini comme cible pour les événements de la souris lorsque le pointeur est verrouillé. Il renvoie <code>null</code> si le verrouillage est en cours, si le pointeur est déverrouillé ou si la cible se trouve dans un autre document.</dd>
+ <dt>{{DOMxRef("DocumentOrShadowRoot.styleSheets")}}{{ReadOnlyInline}}</dt>
+ <dd>Renvoie une {{DOMxRef('StyleSheetList')}} d'objets {{DOMxRef('CSSStyleSheet')}} pour les feuilles de style explicitement liées ou intégrées dans un document.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{DOMxRef("DocumentOrShadowRoot.caretPositionFromPoint()")}}</dt>
+ <dd>Renvoie un objet {{DOMxRef('CaretPosition')}} contenant le noeud DOM contenant le signe d'insertion, et le décalage du caractère d'insertion dans ce noeud.</dd>
+ <dt>{{DOMxRef("DocumentOrShadowRoot.elementFromPoint()")}}</dt>
+ <dd>Renvoie l'élément le plus élevé aux coordonnées spécifiées.</dd>
+ <dt>{{DOMxRef("DocumentOrShadowRoot.elementsFromPoint()")}}</dt>
+ <dd>Renvoie un tableau de tous les éléments aux coordonnées spécifiées.</dd>
+ <dt>{{DOMxRef("DocumentOrShadowRoot.getSelection()")}}</dt>
+ <dd>Renvoie un objet {{DOMxRef('Selection')}} représentant la plage de texte sélectionnée par l'utilisateur, ou la position actuelle du curseur.</dd>
+ <dt>{{DOMxRef("DocumentOrShadowRoot.nodeFromPoint()")}} {{non-standard_inline}}</dt>
+ <dd>Renvoie le nœud supérieur aux coordonnées spécifiées.</dd>
+ <dt>{{DOMxRef("DocumentOrShadowRoot.nodesFromPoint()")}} {{non-standard_inline}}</dt>
+ <dd>Renvoie un tableau de tous les nœuds aux coordonnées spécifiées.</dd>
+</dl>
+
+<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('Shadow DOM','#extensions-to-the-documentorshadowroot-mixin','DocumentOrShadowRoot')}}</td>
+   <td>{{Spec2('Shadow DOM')}}</td>
+   <td>Implémentation de Shadow DOM.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#mixin-documentorshadowroot','DocumentOrShadowRoot')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une <em>pull request</em>.</div>
+
+<p>{{Compat("api.DocumentOrShadowRoot")}}</p>
+
+<p>[1] Les fonctionnalités de cette interface sont toujours implémentées sur l'objet {{DOMxRef("Document")}}.</p>
diff --git a/files/fr/web/api/documenttouch/index.html b/files/fr/web/api/documenttouch/index.html
new file mode 100644
index 0000000000..d9deed0227
--- /dev/null
+++ b/files/fr/web/api/documenttouch/index.html
@@ -0,0 +1,37 @@
+---
+title: DocumentTouch
+slug: Web/API/DocumentTouch
+tags:
+  - API
+  - DOM
+  - DocumentTouch
+  - Mobile
+  - Tactile
+  - toucher
+translation_of: Web/API/DocumentTouch
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p>{{ obsolete_header(25) }}</p>
+
+<p>L'interface <code>DocumentTouch</code> était utilisée pour fournir des méthodes pratiques pour la création des objets {{ domxref("Touch") }} et {{ domxref("TouchList") }}, mais elle a été supprimée. Les méthodes sont maintenant présentes dans l'interface {{domxref("Document")}}.</p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{ domxref("DocumentTouch.createTouch()") }}</dt>
+ <dd>Crée un nouvel objet {{ domxref("Touch") }}.</dd>
+ <dt>{{ domxref("DocumentTouch.createTouchList()") }}</dt>
+ <dd>Crée un nouvel objet {{ domxref("TouchList") }}.</dd>
+</dl>
+
+<h2 id="A_voir_aussi">A voir aussi</h2>
+
+<ul>
+ <li><a href="/en/DOM/Touch_events" title="en/DOM/Touch events">Touch events</a></li>
+ <li>{{ domxref("Touch") }}</li>
+ <li>{{ domxref("TouchList") }}</li>
+ <li>{{ domxref("TouchEvent") }}</li>
+ <li>{{ domxref("Document.createTouch") }}</li>
+ <li>{{ domxref("Document.createTouchList") }}</li>
+</ul>
diff --git a/files/fr/web/api/documenttype/index.html b/files/fr/web/api/documenttype/index.html
new file mode 100644
index 0000000000..fd2eeb9675
--- /dev/null
+++ b/files/fr/web/api/documenttype/index.html
@@ -0,0 +1,205 @@
+---
+title: DocumentType
+slug: Web/API/DocumentType
+tags:
+  - API
+  - DOM
+  - DocumentType
+  - Interface
+translation_of: Web/API/DocumentType
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>L'interface <strong><code>DocumentType</code></strong> représente un nœud ({{domxref("Node")}}) contenant un <em>doctype</em>.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Cette interface hérite de propriétés de la part de son parent, {{domxref("Node")}}, et implémente l'interface {{domxref("ChildNode")}}.</em></p>
+
+<dl>
+ <dt>...</dt>
+ <dt>{{domxref("DocumentType.entities")}} {{readonlyInline}} {{obsolete_Inline}}</dt>
+ <dd>Une {{domxref ("NamedNodeMap")}} des entités déclarées dans la DTD. Chaque noeud de cette carte implémente l'interface {{domxref ("Entity")}}.</dd>
+ <dt>{{domxref("DocumentType.internalSubset")}} {{readonlyInline}} {{obsolete_Inline}}</dt>
+ <dd>Un {{domxref ("DOMString")}} du sous-ensemble interne, ou null s'il n'y en a pas. Par exemple "&lt;! ELEMENT foo (bar)"&gt;</dd>
+ <dt>{{domxref("DocumentType.name")}} {{readonlyInline}}</dt>
+ <dd>une {{domxref("DOMString")}}, par exemple, <code>"html"</code> pour <code>&lt;!DOCTYPE HTML&gt;</code>.</dd>
+ <dt>{{domxref("DocumentType.notations")}} {{readonlyInline}} {{obsolete_Inline}}</dt>
+ <dd>une {{domxref ("NamedNodeMap")}} avec les notations déclarées dans la DTD. Chaque nœud de cette carte implémente l'interface {{domxref ("Notation")}}.</dd>
+ <dt>{{domxref("DocumentType.publicId")}} {{readonlyInline}}</dt>
+ <dd>une {{domxref("DOMString")}}, par exemple <code>"-//W3C//DTD HTML 4.01//EN"</code>, chaîne vide pour HTML5.</dd>
+ <dt>{{domxref("DocumentType.systemId")}} {{readonlyInline}}</dt>
+ <dd>une {{domxref("DOMString")}}, par exemple, <code>"http://www.w3.org/TR/html4/strict.dtd"</code>, chaîne vide pour HTML5.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Cette interface hérite de méthodes de la part de son parent, {{domxref("Node")}}, et implémente l'interface {{domxref("ChildNode")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("ChildNode.remove()")}} {{experimental_inline}}</dt>
+ <dd>Cette méthode retire l'objet de la liste des enfants de son élément parent.</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('DOM WHATWG', '#documenttype', 'DocumentType')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Implémente désormais l'interface {{domxref("ChildNode")}}.<br>
+    Retrait des propriétés <code>internalSubset</code>, <code>entities</code> et <code>notation</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-412266927', 'DocumentType')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Aucune modification depuis {{SpecName('DOM2 Core')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-412266927', 'CharacterData')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Ajout des propriétés <code>publicID</code>, <code>systemID</code>  et <code>internalSubset</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-412266927', 'CharacterData')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>entities</code> and <code>notations</code></td>
+   <td>1.0<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}<sup>[3]</sup></td>
+   <td>{{CompatGeckoDesktop("1.0")}}<br>
+    {{CompatNo}}{{CompatGeckoDesktop("6.0")}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[3]</sup></td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>internalSubset</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}} (not anymore in any case)</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Implements {{domxref("ChildNode")}}</td>
+   <td>29.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("25.0")}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>entities</code> and <code>notations</code></td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}<br>
+    {{CompatNo}}{{CompatGeckoMobile("6.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>internalSubset</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Implements {{domxref("ChildNode")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("25.0")}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+</div>
+
+<div id="compat-mobile"></div>
+
+<p>[1] Le projet Chromium prévoit d'abandonner la prise en charge des propriétés <code>internalSubset</code>, <code>entities</code> et <code>notations</code>.</p>
+
+<p>[2] Firefox 25 ajouta également les propriétés <code>previousElementSibling</code> et <code>nextElementSibling</code>. Celles-ci furent retirées à partir de Firefox 28 pour des raisons de compatibilité.</p>
+
+<p>[3] Les propriétés <code>entities</code> et <code>notations</code> existent dans IE et Edge, mais semblent toujours être  <code>null</code>?</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Document_Object_Model">L'index des interfaces du DOM</a></li>
+ <li>{{domxref("Entity")}}</li>
+ <li>{{domxref("Notation")}}</li>
+</ul>
diff --git a/files/fr/web/api/domapplicationsmanager/getall/index.html b/files/fr/web/api/domapplicationsmanager/getall/index.html
new file mode 100644
index 0000000000..df247c4a1c
--- /dev/null
+++ b/files/fr/web/api/domapplicationsmanager/getall/index.html
@@ -0,0 +1,33 @@
+---
+title: Apps.mgmt.getAll
+slug: Web/API/DomApplicationsManager/getAll
+tags:
+  - API Apps
+  - Apps
+translation_of: Archive/Marketplace/API/DOMApplicationsManager/getAll
+---
+<p>{{ ApiRef() }}</p>
+<p>{{ non-standard_header() }}</p>
+<h2 id="Résumé">Résumé</h2>
+<p>Liste toutes les applications installées dans le repertoire de l'utilisateur.</p>
+<h2 id="Syntaxe">Syntaxe</h2>
+<pre>window.navigator.mozApps.mgmt.getAll()
+</pre>
+<h2 id="Paramètres">Paramètres</h2>
+<p>Aucun.</p>
+<h2 id="Renvoie">Renvoie</h2>
+<p><code>getAll()</code> renvoie un objet <code>pendingGetAll</code>. Il est nécessaire de définir des callbacks pour les propriétés <code>onsuccess</code> et <code>onerror</code> de l'objet renvoyé.</p>
+<p><code>pendingGetAll.result</code> sera un tableau d'objet {{ domxref("App") }} qui contient les applications actuellement installées dans le navigateur. <code>pendingGetAll.result</code> sera une liste vide si aucune application n'est installée. <code>onerror</code> sera appelé si un problème grave intervient pendant cette vérification.</p>
+<p>Cet appel a un accès restreint. <code>navigator.mozApps.mgmt</code> sera <code>null</code> si vous n'avez pas l'autorisation de récuperer les applications.</p>
+<h2 id="Erreurs">Erreurs</h2>
+<p>L'erreur suivante peut être renvoyée dans <code>DOMRequest.error</code>.</p>
+<dl>
+</dl>
+<dl>
+ <dt>
+  DENIED</dt>
+ <dd>
+  Autorisation refusée.</dd>
+</dl>
+<h2 id="Sujet_en_relation">Sujet en relation</h2>
+<p><a href="/fr/docs/Applications/API_JavaScript_Apps">API JavaScript Apps</a></p>
diff --git a/files/fr/web/api/domapplicationsmanager/index.html b/files/fr/web/api/domapplicationsmanager/index.html
new file mode 100644
index 0000000000..d30d16fa32
--- /dev/null
+++ b/files/fr/web/api/domapplicationsmanager/index.html
@@ -0,0 +1,82 @@
+---
+title: DOMApplicationsManager
+slug: Web/API/DOMApplicationsManager
+tags:
+  - API
+translation_of: Archive/Marketplace/API/DOMApplicationsManager
+---
+<p>{{ ApiRef("Apps") }}</p>
+
+<p>{{ non-standard_header() }}</p>
+
+<p>Provides support for managing, and Open Web apps in a browser. A manager can be accessed via {{domxref("DOMApplicationsRegistry.mgmt", "Navigator.mozApps.mgmt")}}</p>
+
+<h2 id="Property">Property</h2>
+
+<dl>
+ <dt>{{domxref("DOMApplicationsManager.oninstall")}}</dt>
+ <dd>Is an {{domxref("EventManager")}} call when <code>install</code> event is received.</dd>
+ <dt>{{domxref("DOMApplicationsManager.onuninstall")}}</dt>
+ <dd>Is an {{domxref("EventManager")}} call when <code>uninstall</code> event is received.</dd>
+ <dt>{{domxref("DOMApplicationsManager.onenablestatechange")}}</dt>
+ <dd>Is an {{domxref("EventManager")}} call when <code>enablestatechange</code> event is received.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{ domxref("DOMApplicationsManager.getAll()") }}</dt>
+ <dd>Returns all applications.</dd>
+</dl>
+
+<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>{{ CompatUnknown() }}</td>
+   <td>16.0</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>16.0</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
diff --git a/files/fr/web/api/domerror/index.html b/files/fr/web/api/domerror/index.html
new file mode 100644
index 0000000000..6d608370ed
--- /dev/null
+++ b/files/fr/web/api/domerror/index.html
@@ -0,0 +1,147 @@
+---
+title: DOMError
+slug: Web/API/DOMError
+tags:
+  - API
+  - DOM
+  - Erreurs
+  - Interface
+  - Reference
+translation_of: Web/API/DOMError
+---
+<p>{{ APIRef("DOM") }}{{deprecated_header}}</p>
+
+<p>L'interface <strong><code>DOMError</code></strong>  décrit un objet d'erreur contenant le nom de l'erreur.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("DOMError.name")}} {{readOnlyInline}}</dt>
+ <dd>Retourne une {{ domxref("DOMString") }} <em>(chaîne de caractères)</em> représentant <span id="result_box" lang="fr"><span>l'un des noms de type d'erreur (voir ci-dessous).</span></span></dd>
+ <dt>{{domxref("DOMError.message")}} {{readOnlyInline}}</dt>
+ <dd>Retourne une {{ domxref("DOMString") }} <em>(chaîne de caractères)</em> représentant un message ou une description associée avec le nom de type d'erreur.</dd>
+</dl>
+
+<h2 id="Type_d'erreurs">Type d'erreurs</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Type</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td><code>IndexSizeError</code></td>
+   <td>L'index n'est pas dans l'étendue autorisée (par exemple, déclenché dans un objet {{ domxref("range") }}).</td>
+  </tr>
+  <tr>
+   <td><code>HierarchyRequestError</code></td>
+   <td>La hiérarchie de l'arbre de noeud est incorrecte.</td>
+  </tr>
+  <tr>
+   <td><code>WrongDocumentError</code></td>
+   <td>L'objet est dans le mauvais {{ domxref("document") }}.</td>
+  </tr>
+  <tr>
+   <td><code>InvalidCharacterError</code></td>
+   <td>La chaîne de caractères contient des caractères non valides.</td>
+  </tr>
+  <tr>
+   <td><code>NoModificationAllowedError</code></td>
+   <td>L'objet ne peut pas être modifié.</td>
+  </tr>
+  <tr>
+   <td><code>NotFoundError</code></td>
+   <td>L'objet ne peut pas être trouvé.</td>
+  </tr>
+  <tr>
+   <td><code>NotSupportedError</code></td>
+   <td>Cette opération n'est pas supportée.</td>
+  </tr>
+  <tr>
+   <td><code>InvalidStateError</code></td>
+   <td>L'objet est dans un état non valide.</td>
+  </tr>
+  <tr>
+   <td><code>SyntaxError</code></td>
+   <td>La chaîne de caractère ne correspond pas au motif attendu.</td>
+  </tr>
+  <tr>
+   <td><code>InvalidModificationError</code></td>
+   <td>L'objet ne peut pas être modifié de cette façon.</td>
+  </tr>
+  <tr>
+   <td><code>NamespaceError</code></td>
+   <td>Cette opération n'est pas autorisée par les Namespaces en XML.</td>
+  </tr>
+  <tr>
+   <td><code>InvalidAccessError</code></td>
+   <td>L'objet ne supporte pas cette opération ou cet argument.</td>
+  </tr>
+  <tr>
+   <td><code>TypeMismatchError</code></td>
+   <td>Le type de l'objet ne correspond pas au type attendu.</td>
+  </tr>
+  <tr>
+   <td><code>SecurityError</code></td>
+   <td>L'opération n'est pas sécurisée.</td>
+  </tr>
+  <tr>
+   <td><code>NetworkError</code></td>
+   <td>Une erreur réseau est survenue.</td>
+  </tr>
+  <tr>
+   <td><code>AbortError</code></td>
+   <td>L'opération a été annulée.</td>
+  </tr>
+  <tr>
+   <td><code>URLMismatchError</code></td>
+   <td>L'URL fournie ne correspond pas à une autre URL.</td>
+  </tr>
+  <tr>
+   <td><code>QuotaExceededError</code></td>
+   <td>Le quota a été dépassé.</td>
+  </tr>
+  <tr>
+   <td><code>TimeoutError</code></td>
+   <td>L'opération a dépassé le temps autorisé. (Time Out)</td>
+  </tr>
+  <tr>
+   <td><code>InvalidNodeTypeError</code></td>
+   <td>Le noeud est incorrect ou a un ancêtre incorrect pour cette opération.</td>
+  </tr>
+  <tr>
+   <td><code>DataCloneError</code></td>
+   <td>L'objet n'a pas pu être cloné.</td>
+  </tr>
+ </tbody>
+</table>
+
+<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('DOM4', '#interface-domerror', 'DOMError')}}</td>
+   <td>{{Spec2('DOM4')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.DOMError")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{ domxref("DOMException") }}</li>
+</ul>
diff --git a/files/fr/web/api/domexception/index.html b/files/fr/web/api/domexception/index.html
new file mode 100644
index 0000000000..7c5e4a11e9
--- /dev/null
+++ b/files/fr/web/api/domexception/index.html
@@ -0,0 +1,267 @@
+---
+title: DOMException
+slug: Web/API/DOMException
+tags:
+  - API
+  - DOM
+  - Erreurs
+  - exceptions
+translation_of: Web/API/DOMException
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>L'interface <code><strong>DOMException</strong></code> représente un évènement anormal (appelé <strong>exception</strong>) qui appraît suite à l'appel d'une méthode ou à l'accès à une propriété d'une API web. C'est essentiellement lié à la façon dont les conditions d'erreur sont décrites dans les API web.</p>
+
+<p>Chaque exception a un <strong>nom</strong>, qui est une courte chaîne identifiant l'erreur ou la condition anormale.</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("DOMException.DOMException()", "DOMException()")}} {{experimental_inline}}</dt>
+ <dd>Retourne un objet <code>DOMException</code> avec un message et un nom spécifiés.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("DOMException.code")}} {{deprecated_inline}} {{readOnlyInline}}</dt>
+ <dd>Renvoie un court message qui contient l'un des {{anch ("Noms d'erreur", "constantes de code d'erreur")}} ou 0 si aucun ne correspond. Ce champ est utilisé pour des raisons historiques. Les nouvelles exceptions DOM ne l'utilisent plus : elles mettent cette information dans l'attribut {{domxref("DOMException.name")}}.</dd>
+ <dt>{{domxref("DOMException.message")}} {{readOnlyInline}}</dt>
+ <dd>Returne une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant un message ou une description associé avec le <a href="/en-US/docs/Web/API/DOMException#Error_names">nom d'erreur</a> donné.</dd>
+ <dt>{{domxref("DOMException.name")}} {{readOnlyInline}}</dt>
+ <dd>Retourne une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) qui contient l'une des chaînes associées à un <a href="#Error_names">nom d'erreur</a>.</dd>
+</dl>
+
+<h2 id="Noms_d'erreur"><a id="noms d'erreur" name="noms d'erreur"></a>Noms d'erreur</h2>
+
+<p>Les noms d'erreurs courants sont répertoriés ici. Certaines API définissent leurs propres ensembles de noms, il ne s'agit donc pas ici nécessairement d'une liste complète.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Parce qu'historiquement les erreurs ont été identifiées par une valeur numérique qui correspondait à une variable nommée définie pour avoir cette valeur, certaines des entrées ci-dessous indiquent la valeur de code héritée et le nom de constante qui ont été utilisés dans le passé.</p>
+</div>
+
+<dl>
+ <dt><a id="exception-IndexSizeError"><code>IndexSizeError</code></a></dt>
+ <dd>L'index n'est pas dans la plage autorisée. Par exemple, cela peut être lancé par un objet {{ domxref("Range") }}. (Valeur de code héritée : <code>1</code> et nom de la constante héritée : <code>INDEX_SIZE_ERR</code>)</dd>
+ <dt><code><a id="exception-HierarchyRequestError">HierarchyRequestError</a></code></dt>
+ <dd>La hiérarchie de l'arborescence des nœuds est incorrecte. ( Valeur de code héritée : <code>3</code> et nom de la constante héritée : <code>HIERARCHY_REQUEST_ERR</code>)</dd>
+ <dt><a id="exception-WrongDocumentError"><code>WrongDocumentError</code></a></dt>
+ <dd>L'objet est dans le mauvais {{ domxref("Document") }}. ( Valeur de code héritée : <code>4</code> et nom de la constante héritée : <code>WRONG_DOCUMENT_ERR</code>)</dd>
+ <dt><a id="exception-InvalidCharacterError"><code>InvalidCharacterError</code></a></dt>
+ <dd>La chaîne contient des caractères non valides. (Valeur de code héritée : <code>5</code> et nom de la constante héritée : <code>INVALID_CHARACTER_ERR</code>)</dd>
+ <dt><a id="exception-NoModificationAllowedError"><code>NoModificationAllowedError</code></a></dt>
+ <dd>L'objet ne peut être modifié. (Valeur de code héritée : <code>7</code> et nom de la constante héritée : <code>NO_MODIFICATION_ALLOWED_ERR</code>)</dd>
+ <dt><a id="exception-NotFoundError"><code>NotFoundError</code></a></dt>
+ <dd>L'objet ne peut être trouvé ici. (Valeur de code héritée : <code>8</code> et nom de la constante héritée : <code>NOT_FOUND_ERR</code>)</dd>
+ <dt><a id="exception-NotFoundError"><code>NotSupportedError</code></a></dt>
+ <dd>L'opération n'est pas supportée. (Valeur de code héritée : <code>9</code> et nom de la constante héritée : <code>NOT_SUPPORTED_ERR</code>)</dd>
+ <dt><a id="exception-InvalidStateError"><code>InvalidStateError</code></a></dt>
+ <dd>L'objet est dans un état non valide. (Valeur de code héritée : <code>11</code> et nom de la constante héritée : <code>INVALID_STATE_ERR</code>)</dd>
+ <dt><a id="exception-SyntaxError"><code>SyntaxError</code></a></dt>
+ <dd>La chaîne ne correspond pas au modèle attendu. (Valeur de code héritée : <code>12</code> et nom de la constante héritée : <code>SYNTAX_ERR</code>)</dd>
+ <dt><a id="exception-InvalidModificationError"><code>InvalidModificationError</code></a></dt>
+ <dd>L'objet ne peut pas être modifié de cette manière. (Valeur de code héritée : <code>13</code> et nom de la constante héritée : <code>INVALID_MODIFICATION_ERR</code>)</dd>
+ <dt><a id="exception-NamespaceError"><code>NamespaceError</code></a></dt>
+ <dd>L'opération n'est pas autorisée par Namespaces en XML. (Valeur de code héritée : <code>14</code> et nom de la constante héritée : <code>NAMESPACE_ERR</code>)</dd>
+ <dt><a id="exception-InvalidAccessError"><code>InvalidAccessError</code></a></dt>
+ <dd>L'objet ne prend pas en charge l'opération ou l'argument. (Valeur de code héritée : <code>15</code> et nom de la constante héritée : <code>INVALID_ACCESS_ERR</code>)</dd>
+ <dt><a id="exception-TypeMismatchError"><code>TypeMismatchError</code></a> {{deprecated_inline}}</dt>
+ <dd>Le type de l'objet ne correspond pas au type attendu. (Valeur de code héritée : <code>17</code> et nom de la constante héritée : <code>TYPE_MISMATCH_ERR</code>). Cette valeur est dépéciée, l'exception {{jsxref("TypeError")}} JavaScript est maintenant utilisée à la place d'une <code>DOMException</code> avec cette valeur.</dd>
+ <dt><a id="exception-SecurityError"><code>SecurityError</code></a> {{experimental_inline}}</dt>
+ <dd>L'opération n'est pas sécurisée. (Valeur de code héritée : <code>18</code> et nom de la constante héritée : <code>SECURITY_ERR</code>)</dd>
+ <dt><a id="exception-NetworkError"><code>NetworkError</code></a> {{experimental_inline}}</dt>
+ <dd>Une erreur réseau s'est produite. (Valeur de code héritée : <code>19</code> et nom de la constante héritée : <code>NETWORK_ERR</code>)</dd>
+ <dt><a id="exception-AbortError"><code>AbortError</code></a> {{experimental_inline}}</dt>
+ <dd>L'opération a été annulée (Valeur de code héritée : <code>20</code> et nom de la constante héritée : <code>ABORT_ERR</code>)</dd>
+ <dt><a id="exception-URLMismatchError"><code>URLMismatchError</code></a> {{experimental_inline}}</dt>
+ <dd>L'URL donnée ne correspond pas à une autre URL. (Valeur de code héritée : <code>21</code> et nom de la constante héritée : <code>URL_MISMATCH_ERR</code>)</dd>
+ <dt><a id="exception-QuotaExceededError"><code>QuotaExceededError</code></a> {{experimental_inline}}</dt>
+ <dd>Le quota a été dépassé. (Valeur de code héritée : <code>22</code> et nom de la constante héritée : <code>QUOTA_EXCEEDED_ERR</code>)</dd>
+ <dt><a id="exception-TimeoutError"><code>TimeoutError</code></a> {{experimental_inline}}</dt>
+ <dd>Le temps est dépassé. (Valeur de code héritée : <code>23</code> et nom de la constante héritée : <code>TIMEOUT_ERR</code>)</dd>
+ <dt><a id="exception-InvalidNodeTypeError"><code>InvalidNodeTypeError</code></a> {{experimental_inline}}</dt>
+ <dd>Le noeud est incorrect ou a un ancêtre incorrect pour cette opération. (Valeur de code héritée : <code>24</code> et nom de la constante héritée : <code>INVALID_NODE_TYPE_ERR</code>)</dd>
+ <dt><a id="exception-DataCloneError"><code>DataCloneError</code></a> {{experimental_inline}}</dt>
+ <dd>L'objet ne peut pas être cloné. ( Valeur de code héritée : <code>25</code> et nom de la constante héritée : <code>DATA_CLONE_ERR</code>)</dd>
+ <dt><a id="exception-EncodingError"><code>EncodingError</code></a> {{experimental_inline}}</dt>
+ <dd>L'opération de codage ou de décodage a échoué (Pas de valeur de code ni de nom de constante hérités).</dd>
+ <dt><a id="exception-NotReadableError"><code>NotReadableError</code></a> {{experimental_inline}}</dt>
+ <dd>L'opération de lecture entrée / sortie a échoué (Pas de valeur de code ni de nom de constante hérités).</dd>
+ <dt><a id="exception-UnknownError"><code>UnknownError</code></a> {{experimental_inline}}</dt>
+ <dd>L'opération a échoué pour une raison transitoire inconnue (par exemple dépassement de mémoire) (Pas de valeur de code ni de nom de constante hérités) .</dd>
+ <dt><a id="exception-ConstraintError"><code>ConstraintError</code></a> {{experimental_inline}}</dt>
+ <dd>Une opération de mutation dans une transaction a échoué car une contrainte n'a pas été satisfaite (Pas de valeur de code ni de nom de constante hérités) .</dd>
+ <dt><a id="exception-DataError"><code>DataError</code></a> {{experimental_inline}}</dt>
+ <dd>Provided data is inadequate (No legacy code value and constant name).</dd>
+ <dt><a id="exception-TransactionInactiveError"><code>TransactionInactiveError</code></a> {{experimental_inline}}</dt>
+ <dd>Une demande a été placée contre une transaction qui n'est actuellement pas active ou qui est terminée (Pas de valeur de code ni de nom de constante hérités).</dd>
+ <dt><a id="exception-ReadOnlyError"><code>ReadOnlyError</code></a> {{experimental_inline}}</dt>
+ <dd>L'opération de mutation a été tentée dans une transaction "en lecture seule" (Pas de valeur de code ni de nom de constante hérités).</dd>
+ <dt><a id="exception-VersionError"><code>VersionError</code></a> {{experimental_inline}}</dt>
+ <dd>Une tentative a été faite pour ouvrir une base de données en utilisant une version inférieure à la version existante (Pas de valeur de code ni de nom de constante hérités).</dd>
+ <dt><a id="exception-OperationError"><code>OperationError</code></a> {{experimental_inline}}</dt>
+ <dd>L'opération a échoué pour une raison spécifique à l'opération (Pas de valeur de code ni de nom de constante hérités).</dd>
+ <dt><a id="exception-NotAllowedError"><code>NotAllowedError</code></a> {{experimental_inline}}</dt>
+ <dd>La demande n'est pas autorisée par l'agent utilisateur ou la plateforme dans le contexte actuel, peut-être parce que l'utilisateur a refusé la permission  (Pas de valeur de code ni de nom de constante hérités).</dd>
+</dl>
+
+<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('WebIDL', '#es-DOMException-call', 'constructor')}}</td>
+   <td>{{Spec2('WebIDL')}}</td>
+   <td>Ajout du constructeur pour la classe <code>DOMException</code>. Ajout des valeurs <code>NotReadableError</code>, <code>UnknownError</code>, <code>ConstraintError</code>, <code>DataError</code>, <code>TransactionInactiveError</code>, <code>ReadOnlyError</code>, <code>VersionError</code>, <code>OperationError</code> et <code>NotAllowedError</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM4', '#exception-domexception', 'DOMException')}}</td>
+   <td>{{Spec2('DOM4')}}</td>
+   <td>Ajout des <code>SECURITY_ERR</code>, <code>NETWORK_ERR</code>, <code>ABORT_ERR</code>, <code>URL_MISMATCH_ERR</code>, <code>QUOTA_EXCEEDED_ERR</code>, <code>TIMEOUT_ERR</code>, <code>INVALID_NODE_TYPE_ERR</code>, et <code>DATA_CLONE_ERR</code>. La propriété <code>code</code> a été dépréciée pour les valeurs d'exception. La valeur <code>EncodingError</code> ajoutée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-17189187', 'DOMException')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Ajout de <code>VALIDATION_ERR</code> et <code>TYPE_MISMATCH_ERR</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-17189187', 'DOMException')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Ajout de <code>INVALID_STATE_ERR</code>, <code>SYNTAX_ERR</code>, <code>INVALID_MODIFICATION_ERR</code>, <code>NAMESPACE_ERR</code>, and <code>INVALID_ACCESS_ERR</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-17189187', 'DOMException')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("1.0") }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>DOM Level 4 support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("13.0") }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>DATA_CLONE_ERR</code> constant</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("5.0") }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Constructor</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("1.0") }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>DOM Level 4 support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoMobile("13.0") }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>DATA_CLONE_ERR</code> constant</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("5.0") }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Constructor</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{ domxref("DOMError") }}</li>
+</ul>
diff --git a/files/fr/web/api/domhighrestimestamp/index.html b/files/fr/web/api/domhighrestimestamp/index.html
new file mode 100644
index 0000000000..fc7f2c3274
--- /dev/null
+++ b/files/fr/web/api/domhighrestimestamp/index.html
@@ -0,0 +1,102 @@
+---
+title: DOMHighResTimeStamp
+slug: Web/API/DOMHighResTimeStamp
+translation_of: Web/API/DOMHighResTimeStamp
+---
+<p>{{APIRef("High Resolution Time")}}</p>
+
+<p>Le type <code><strong>DOMHighResTimeStamp</strong></code> est un <code>double</code> et est utilisé pour stocker une valeur temporelle. La valeur peut représenter un point dans le temps ou la différence entre deux points dans le temps.</p>
+
+<p>L'unité est la milliseconde et sa précision est en principe de 5 µs (microsecondes). Cependant, si le navigateur n'est pas capable de fournir une valeur temporelle avec une précision de 5 microsecondes (en raison par exemple de contraintes hardware ou software), le navigateur peut représenter la valeur comme un temps en millisecondes avec une précision d'une milliseconde. Référez-vous également à la section ci-dessous concernant la réduction de précision temporelle contrôlée par les préférences du navigateur pour éviter les attaques de synchronisation et le fingerprinting.</p>
+
+<p>De plus, si l'appareil ou le système d'exploitation sur lequel tourne le navigateur n'est pas doté d'une horloge avec une précision de l'ordre de la microseconde, la précision peut également être de l'ordre de la milliseconde.</p>
+
+<h2 id="Précision_temporelle_réduite">Précision temporelle réduite</h2>
+
+<p>Pour offrir une protection contre les attaques de synchronisation et le fingerprinting, la précision des timestamps peut être arrondie en fonction des préférences du navigateur.<br>
+ Dans Firefox, l'option <code>privacy.reduceTimerPrecision</code> est activée par défaut et vaut 20µs par défaut dans Firefox 59; dans la version 60 cette valeur est portée à 2ms par défaut.</p>
+
+<pre class="brush: js">// précision temporelle réduite (2ms) dans Firefox 60
+event.timeStamp
+// 1519211809934
+// 1519211810362
+// 1519211811670
+// ...
+
+
+// précision temporelle réduite avec `privacy.resistFingerprinting` activé
+event.timeStamp;
+// 1519129853500
+// 1519129858900
+// 1519129864400
+// ...
+</pre>
+
+<p>Dans Firefox, vous pouvez aussi activer <code>privacy.resistFingerprinting</code>, la précision sera alors de 100ms ou la valeur de <code>privacy.resistFingerprinting.reduceTimerPrecision.microseconds</code>, la valeur la plus large étant retenue.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Ce <em>type</em> n'a pas de propriétés. C'est une valeur à virgule flottante double précision.</em></p>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>La valeur d'un <code>DOMHighResTimeStamp</code> est un nombre flottant double précision qui décrit le nombre de millisecondes (avec une précision de 5 microsecondes si l'appareil le supporte) écoulé entre deux points dans le temps. Le temps de départ peut être soit un point spécifique dans le temps déterminé par le script d'un site web ou d'une application, ou l'<strong>origine temporelle</strong>.</p>
+
+<h4 id="L'origine_temporelle">L'origine temporelle</h4>
+
+<p>L'<strong>origine temporelle</strong> est une heure qui est considéré comme l'heure de commencement de la vie du document. Elle est calculée comme suit :</p>
+
+<ul>
+ <li>Si l'{{Glossary("objet global")}} du script est {{domxref("Window")}}, l'origine temporelle est déterminée comme suit :
+  <ul>
+   <li>Si le {{domxref("Document")}} courant est le premier à être chargé dans la fenêtre, l'origine temporelle est l'heure à laquelle le contexte du navigateur a été créé.</li>
+   <li>Si pendant le processus de déchargement du document précédemment chargé dans la fenêtre, un dialogue de confirmation a été affiché pour demander à l'utilisateur de confirmer s'il souhaite quitter la page précédente, l'origine temporelle est l'heure à laquelle l'utilisateur a confirmé que naviguer vers la nouvelle page était acceptable.</li>
+   <li>Si aucun des points ci-dessus ne détermine l'origine temporelle, celle-ci est l'heure à laquelle la navigation responsable de la création du <code>Document</code> courant de la fenêtre a eu lieu.</li>
+  </ul>
+ </li>
+ <li>Si l'objet global du script est un {{domxref("WorkerGlobalScope")}} (si le script tourne comme un <em>web worker</em>), l'origine temporelle est le moment auquel le worker a été créé.</li>
+ <li>Dans tous les autres cas, l'origine temporelle est <code>undefined</code>.</li>
+</ul>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Ce type n'a pas de méthodes.</em></p>
+
+<h2 id="Specifications" name="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('Highres Time Level 2', '#dom-domhighrestimestamp', 'DOMHighResTimeStamp')}}</td>
+   <td>{{Spec2('Highres Time Level 2')}}</td>
+   <td>Définitions plus strictes des interfaces et des types.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Highres Time', '#sec-DOMHighResTimeStamp', 'DOMHighResTimeStamp')}}</td>
+   <td>{{Spec2('Highres Time')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité sur cette page est généré à partir de données structurées. Si vous souhaitez contribuer à ces données, merci de consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et d'envoyer une pull request.</div>
+
+<p>{{Compat("api.DOMHighResTimestamp")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Navigation_timing" title="/en-US/docs/Navigation_timing">Navigation Timing API</a></li>
+ <li><a href="/en-US/docs/Web/API/Performance/now">performance.now()</a></li>
+</ul>
diff --git a/files/fr/web/api/domimplementation/createdocument/index.html b/files/fr/web/api/domimplementation/createdocument/index.html
new file mode 100644
index 0000000000..0f9861d5c2
--- /dev/null
+++ b/files/fr/web/api/domimplementation/createdocument/index.html
@@ -0,0 +1,155 @@
+---
+title: DOMImplementation.createDocument()
+slug: Web/API/DOMImplementation/createDocument
+tags:
+  - API
+  - DOM
+  - Méthode
+  - Reference
+  - implementation
+translation_of: Web/API/DOMImplementation/createDocument
+---
+<p>{{ApiRef("DOM")}}</p>
+
+<p>La méthode <strong><code>DOMImplementation.createDocument()</code></strong> crée et retourne un {{domxref("XMLDocument")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>doc</em> = document.implementation.createDocument(<em>namespaceURI</em>, <em>qualifiedNameStr</em>, <em>documentType</em>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><em>namespaceURI</em></dt>
+ <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> contenant l'URI de l'espace de noms du document à créer, <code>ou null</code> si le document n'appartient à aucun espace de noms.</dd>
+</dl>
+
+<dl>
+ <dt><em>qualifiedNameStr </em></dt>
+ <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères) </em>contenant le nom qualifié, c'est-à-dire optionnellement un préfixe et deux points, plus le nom local de l'élément racine, du document à créer.</dd>
+</dl>
+
+<dl>
+ <dt><em>documentType </em>{{optional_inline}}</dt>
+ <dd>Est le <a class="internal" href="https://developer.mozilla.org/fr/docs/Web/API/DocumentType" title="En/DOM/DocumentType"><code>DocumentType</code></a> du document à créer. Vaut <code>null </code>par défaut.</dd>
+</dl>
+
+<ul>
+</ul>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">var doc = document.implementation.createDocument ('http://www.w3.org/1999/xhtml', 'html', null);
+var body = document.createElementNS('http://www.w3.org/1999/xhtml', 'body');
+body.setAttribute('id', 'abc');
+doc.documentElement.appendChild(body);
+alert(doc.getElementById('abc')); // [objet HTMLBodyElement]
+</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('DOM WHATWG', '#dom-domimplementation-createdocument', 'DOMImplementation.createDocument')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Modification du type retourné par <code>createDocument()</code> de {{domxref("Document")}} à{{domxref("XMLDocument")}}.<br>
+    Le troisième argument de <code>createDocument()</code>, <em>doctype</em>, est maintenant optionnel et vaut <code>null</code> par defaut.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#Level-2-Core-DOM-createDocument', 'DOMImplementation.createDocument')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Pas de changement depuis {{SpecName("DOM2 Core")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#Level-2-Core-DOM-createDocument', 'DOMImplementation.createDocument')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>3rd argument of <code>createDocument()</code> optional</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("26.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>3rd argument of <code>createDocument()</code> optional</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("26.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("DOMImplementation")}} à laquelle la méthode appartient.</li>
+</ul>
diff --git a/files/fr/web/api/domimplementation/createdocumenttype/index.html b/files/fr/web/api/domimplementation/createdocumenttype/index.html
new file mode 100644
index 0000000000..f9b49a7164
--- /dev/null
+++ b/files/fr/web/api/domimplementation/createdocumenttype/index.html
@@ -0,0 +1,131 @@
+---
+title: DOMImplementation.createDocumentType()
+slug: Web/API/DOMImplementation/createDocumentType
+tags:
+  - API
+  - DOM
+  - DOMImplementation
+  - Méthode
+  - Reference
+translation_of: Web/API/DOMImplementation/createDocumentType
+---
+<p>{{ ApiRef("DOM")}}</p>
+
+<p>La méthode <strong><code>DOMImplementation.createDocumentType()</code></strong> renvoie un objet {{domxref("DocumentType")}}  qui peut être utilisé avec {{domxref("DOMImplementation.createDocument")}} lors de la création du document ou peut être intégré au document existant avec des méthodes comme {{domxref("Node.insertBefore()")}} ou {{domxref("Node.replaceChild()")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>doctype</em> = document.implementation.createDocumentType(<em>qualifiedNameStr</em>, <em>publicId</em>, <em>systemId</em>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><em>qualifiedNameStr</em></dt>
+ <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) contenant le nom qualifié comme <code>svg:svg</code>.</dd>
+</dl>
+
+<dl>
+ <dt><em>publicId</em></dt>
+ <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) contenant l'identifiant <code>PUBLIC</code>.</dd>
+</dl>
+
+<dl>
+ <dt><em>systemId</em></dt>
+ <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) contenant les identifiants <code>SYSTEM</code>.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">var dt = document.implementation.createDocumentType('svg:svg', '-//W3C//DTD SVG 1.1//EN', 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd');
+var d = document.implementation.createDocument('http://www.w3.org/2000/svg', 'svg:svg', dt);
+alert(d.doctype.publicId); // -//W3C//DTD SVG 1.1//EN
+</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('DOM WHATWG', '#dom-domimplementation-createdocumenttype', 'DOMImplementation.createDocumentType')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Pas de modification de {{SpecName("DOM3 Core")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#Level-2-Core-DOM-createDocType', 'DOMImplementation.createDocumentType')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Pas de modification de {{SpecName("DOM2 Core")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html##Level-2-Core-DOM-createDocType', 'DOMImplementation.createDocumentType')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}} [1]</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}} [1]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Au départ dans Gecko 9.0, le <code>ownerDocument</code> (<em>propriétaire du document</em>) des noeuds doctype (c'est-à-dire les noeuds pour lesquels {{domxref("Node.nodeType")}} est <code>Node.DOCUMENT_TYPE_NODE</code> ou 10) n'est pas null. Au lieu de cela, <code>ownerDocument</code> est le document sur lequel <code>document.implementation.createDocumentType()</code> a été appelé.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("DOMImplementation")}} à laquelle elle appartient.</li>
+</ul>
diff --git a/files/fr/web/api/domimplementation/createhtmldocument/index.html b/files/fr/web/api/domimplementation/createhtmldocument/index.html
new file mode 100644
index 0000000000..a7ea4e54fc
--- /dev/null
+++ b/files/fr/web/api/domimplementation/createhtmldocument/index.html
@@ -0,0 +1,163 @@
+---
+title: DOMImplementation.createHTMLDocument()
+slug: Web/API/DOMImplementation/createHTMLDocument
+tags:
+  - API
+  - DOM
+  - DOM Référence(2)
+  - DOM implémentation
+  - Expérimental(2)
+  - Méthode
+  - Référence(2)
+translation_of: Web/API/DOMImplementation/createHTMLDocument
+---
+<p>{{ApiRef("DOM")}}{{SeeCompatTable}}</p>
+
+<p>La méthode <strong><code>DOMImplementation.createHTMLDocument()</code></strong>  crée un nouveau {{domxref("Document")}} HTML.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>newDoc</em> = document.implementation.createHTMLDocument(<em>titre</em>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><em>title</em>  {{optional_inline}}  (excepté dans IE)</dt>
+ <dd>C'est une {{domxref("DOMString")}} qui contient le titre à donner au nouveau document HTML.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans cet exemple, on crée un nouveau document HTML que l'on insère dans un {{HTMLElement("iframe")}} dans le document courant.</p>
+
+<p>Ci-dessous, le code HTML pour cet exemple:</p>
+
+<pre class="brush: html">&lt;body&gt;
+  &lt;p&gt;Cliquez &lt;a href="javascript:makeDocument()"&gt;ici&lt;/a&gt; pour créer un nouveau document et l'insérer au dessous.&lt;/p&gt;
+  &lt;iframe id="laFrame" src="about:blank" /&gt;
+&lt;/body&gt;
+</pre>
+
+<p>L'implémentation en JavaScript de la méthode <code>makeDocument()</code>:</p>
+
+<pre class="brush: js">function makeDocument() {
+  var frame = document.getElementById("laFrame");
+
+  var doc = document.implementation.createHTMLDocument("Nouveau Document");
+  var p = doc.createElement("p");
+  p.innerHTML = "Ceci est un nouveau paragraphe.";
+
+  try {
+    doc.body.appendChild(p);
+  } catch(e) {
+    console.log(e);
+  }
+
+  // Copie le nouveau document HTML dans la frame
+
+  var destDocument = frame.contentDocument;
+  var srcNode = doc.documentElement;
+  var newNode = destDocument.importNode(srcNode, true);
+
+  destDocument.replaceChild(newNode, destDocument.documentElement);
+}
+</pre>
+
+<p>Le code des lignes 4 à 12 permet la création du nouveau document HTML et l'insertion de contenu dans ce dernier. La ligne 4 utilise la méthode <code>createHTMLDocument()</code> pour construire le nouveau document HTML et définir son {{ HTMLElement("title") }} comme "Nouveau Document". Dans les lignes 5 et 6, est créé un nouvel élément paragraphe avec un simple contenu, enfin, les lignes 8 à 12 permettent l'insertion de ce nouveau paragraphe dans le nouveau document.</p>
+
+<p>La ligne 16 récupère le <code>contentDocument</code> <em>(contenu du document)</em> du cadre ; c'est le document dans lequel nous allons injecter le nouveau contenu. Les deux lignes suivantes permettent d'importer le contenu du nouveau document dans le nouveau contexte du document. Pour finir, la ligne 20 remplace le contenu du cadre par le contenu du nouveau document.</p>
+
+<p><a href="/samples/domref/createHTMLDocument.html">Voir l'exemple sur une page</a></p>
+
+<p>Le document retourné est préconstruit avec le code HTML suivant :</p>
+
+<pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;titre&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</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('DOM WHATWG', '#dom-domimplementation-createhtmldocument', 'DOMImplementation.createHTMLDocument')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Première définition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}} [1]</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}} [1]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+</div>
+
+<p>[1] Le paramètre <code>title</code> a seulement été créé dans Firefox 23.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("DOMImplementation")}}.</li>
+</ul>
diff --git a/files/fr/web/api/domimplementation/hasfeature/index.html b/files/fr/web/api/domimplementation/hasfeature/index.html
new file mode 100644
index 0000000000..4480cdbbc0
--- /dev/null
+++ b/files/fr/web/api/domimplementation/hasfeature/index.html
@@ -0,0 +1,165 @@
+---
+title: DOMImplementation.hasFeature()
+slug: Web/API/DOMImplementation/hasFeature
+tags:
+  - API
+  - DOM
+  - Méthodes
+translation_of: Web/API/DOMImplementation/hasFeature
+---
+<p>{{ApiRef("DOM")}}</p>
+
+<p>{{deprecated_header()}}</p>
+
+<p>La méthode <strong><code>DOMImplementation.hasFeature()</code></strong> renvoie un {{domxref("Boolean")}} (<em>booléen</em>) indiquant si une fonctionnalité donnée est prise en charge. Cette méthode est dépréciée et les navigateurs modernes renvoient <code>true</code> (<em>vrai</em>) dans tous les cas.</p>
+
+<p>Les différentes implémentations ont été assez divergentes quant au type de caractéristiques signalées. La dernière version de la spécification a décidé de forcer cette méthode à toujours renvoyer <code>true</code>, là où la fonctionnalité était précisée et utilisée.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>flag</em> = document.implementation.hasFeature(<em>feature</em>, <em>version</em>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><em>feature</em></dt>
+ <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant le nom de la fonctionnalité.</dd>
+ <dt><em>version</em></dt>
+ <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant la version de la spécification définissant la fonctionnalité.</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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-domimplementation-hasfeature', 'DOMImplementation.hasFeature')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Modifié pour toujours renvoyer <code>true</code> sauf pour les fonctionnalités SVG.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-5CED94D7', 'DOMImplementation.hasFeature')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Pas de modification de {{SpecName("DOM2 Core")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-5CED94D7', 'DOMImplementation.hasFeature')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Pas de modification de {{SpecName("DOM1")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-5CED94D7', 'DOMImplementation.hasFeature')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Always <code>true</code> for non-SVG features.</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("19.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Always <code>true</code></td>
+   <td>{{CompatChrome(44.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("51.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Always <code>true</code> for non-SVG features.</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("19.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Always <code>true</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(44.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("51.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(44.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("DOMImplementation")}} à laquelle elle est appartient.</li>
+</ul>
diff --git a/files/fr/web/api/domimplementation/index.html b/files/fr/web/api/domimplementation/index.html
new file mode 100644
index 0000000000..544eb44203
--- /dev/null
+++ b/files/fr/web/api/domimplementation/index.html
@@ -0,0 +1,202 @@
+---
+title: DOMImplementation
+slug: Web/API/DOMImplementation
+tags:
+  - API
+  - DOM
+  - Interface
+  - Reference
+translation_of: Web/API/DOMImplementation
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p>L'interface <code><strong>DOMImplementation</strong></code> représente un objet fournissant des méthodes qui ne dépendent pas d'un document particulier. <span class="short_text" id="result_box" lang="fr"><span>Un tel objet est renvoyé par la propriété</span></span> {{domxref("Document.implementation")}}.</p>
+
+<h2 id="Propriété">Propriété</h2>
+
+<p><em>Cette interface n'a pas de propriété spécifique et n'en hérite aucune.</em></p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Pas de méthode héritée.</em></p>
+
+<dl>
+ <dt>{{domxref("DOMImplementation.createDocument()")}}</dt>
+ <dd>Crée et retourne un {{domxref("XMLDocument")}}.</dd>
+ <dt>{{domxref("DOMImplementation.createDocumentType()")}}</dt>
+ <dd>Crée et retourne un {{domxref("DocumentType")}}.</dd>
+ <dt>{{domxref("DOMImplementation.createHTMLDocument()")}}</dt>
+ <dd>Crée et retourne un {{domxref("Document")}} HTML.</dd>
+ <dt>{{domxref("DOMImplementation.hasFeature()")}}</dt>
+ <dd>Retourne un {{domxref("Boolean")}} <span id="result_box" lang="fr"><span>indiquant si une caractéristique donnée est supportée ou non.</span> <span>Cette fonction n'est pas fiable et est conservée uniquement à des fins de compatibilité : à l'exception des requêtes liées au SVG, elle renvoie toujours la valeur <code>true</code> <em>(vrai).</em></span> <span>Les anciens navigateurs sont très incohérents dans leur comportement.</span></span></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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#domimplementation', 'DOMImplementation')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Supprime la méthode <code>getFeature()</code>.<br>
+    Ajoute la méthode <code>createHTMLDocument()</code>.<br>
+    Modifie le type de retour de <code>createDocument()</code> de {{domxref("Document")}} à {{domxref("XMLDocument")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-102161490', 'DOMImplementation')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Ajoute la méthode <code>getFeature()</code> (jamais implémentée par un agent utilisateur).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-102161490', 'DOMImplementation')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Ajoute les méthodes <code>createDocument()</code> et <code>createDocumentType()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-102161490', 'DOMImplementation')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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.0")}}</td>
+   <td>6.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>createHTMLDocument()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>createDocument()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>hasFeature()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}} [1]</td>
+   <td>6.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>createDocumentType()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>createHTMLDocument()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>createDocument()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>hasFeature()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>createDocumentType()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Since Gecko 19, <code>hasFeature()</code> mostly returns <code>true</code>.</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model" title="/en-US/docs/DOM/DOM_Reference">Référence du DOM.</a></li>
+</ul>
diff --git a/files/fr/web/api/domlocator/index.html b/files/fr/web/api/domlocator/index.html
new file mode 100644
index 0000000000..0857edd58b
--- /dev/null
+++ b/files/fr/web/api/domlocator/index.html
@@ -0,0 +1,53 @@
+---
+title: DOMLocator
+slug: Web/API/DOMLocator
+tags:
+  - API
+  - DOM
+translation_of: Web/API/DOMLocator
+---
+<p>{{APIRef("DOM")}}{{obsolete_header}}</p>
+
+<div class="warning">
+<p>NOTE : N'est pas implémenté dans Mozilla</p>
+</div>
+
+<p>Indique un emplacement, par exemple où une erreur s'est produite. Renvoyé par DOMError.location.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("DOMLocator.lineNumber")}} {{ReadOnlyInline}}</dt>
+ <dd>Renvoie un entier positif ou -1.</dd>
+ <dt>{{domxref("DOMLocator.columnNumber")}}  {{ReadOnlyInline}}</dt>
+ <dd>Renvoie un entier positif ou -1.</dd>
+ <dt>{{domxref("DOMLocator.byteOffset")}} {{ReadOnlyInline}}</dt>
+ <dd>Renvoie un entier positif ou -1.</dd>
+ <dt>{{domxref("DOMLocator.utf16Offset")}} {{ReadOnlyInline}}</dt>
+ <dd>Renvoie un entier positif ou -1.</dd>
+ <dt>{{domxref("DOMLocator.relatedNode")}} {{ReadOnlyInline}}</dt>
+ <dd>Renvoie un entier positif ou -1.</dd>
+ <dt>{{domxref("DOMLocator.uri")}} {{ReadOnlyInline}}</dt>
+ <dd>Renvoie un entier positif ou -1.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Cette interface n'implémente ni n'hérite d'aucune méthode.</em></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("DOM3 Core", "core.html#Interfaces-DOMLocator", "DOMLocator")}}</td>
+   <td>{{Spec2("DOM3 Core")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/api/domobject/index.html b/files/fr/web/api/domobject/index.html
new file mode 100644
index 0000000000..b91984316b
--- /dev/null
+++ b/files/fr/web/api/domobject/index.html
@@ -0,0 +1,31 @@
+---
+title: DOMObject
+slug: Web/API/DOMObject
+tags:
+  - API
+  - DOM
+  - Objets
+translation_of: Web/API/DOMObject
+---
+<div>{{APIRef("DOM")}}{{Obsolete_header}}</div>
+
+<p>L'interface obsolète <code><strong>DOMObject</strong></code> était utilisée dans les versions antérieures de la spécification DOM comme classe de base  pour tout type de données. Les spécifications maintenant utilisent simplement le type {{jsxref("Object")}} JavaScript .</p>
+
+<h2 id="Specifications" name="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("DOM3 Core", "core.html#DOMObject", "DOMObject")}}</td>
+   <td>{{Spec2("DOM3 Core")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/api/domparser/index.html b/files/fr/web/api/domparser/index.html
new file mode 100644
index 0000000000..a907066096
--- /dev/null
+++ b/files/fr/web/api/domparser/index.html
@@ -0,0 +1,230 @@
+---
+title: DOMParser
+slug: Web/API/DOMParser
+tags:
+  - API
+  - DOM
+  - HTML
+  - SVG
+  - XML
+translation_of: Web/API/DOMParser
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>L'interface <strong><code>DOMParser</code></strong> permet d'analyser le code source {{Glossary("XML")}} ou {{Glossary("HTML")}}  à partir d'une chaîne dans un {{domxref("Document")}} DOM.</p>
+
+<div class="note">
+<p><strong>Note :</strong>  {{domxref("XMLHttpRequest")}}  prend en charge l'analyse XML et HTML directement à partir des ressources adressables par URL, retournant un  <code>Document</code> dans sa propriété  {{domxref("XMLHttpRequest.reponse", "response")}} .</p>
+</div>
+
+<p>Vous pouvez effectuer l'opération inverse - convertir un arbre DOM en source XML ou HTML - en utilisant l'interface {{domxref("XMLSerializer")}}.</p>
+
+<p>Dans le cas d'un document HTML, vous pouvez également remplacer des parties du DOM par de nouveaux arbres DOM construits à partir de HTML en définissant la valeur de {{domxref("Element.innerHTML")}} et des propriétés {{domxref("Element.outerHTML","outerHTML")}}. Ces propriétés peuvent également être lues pour récupérer des fragments HTML liés à la sous-arborescence DOM correspondante.</p>
+
+<h2 id="Gestion_d.27erreurs" name="Gestion_d.27erreurs">Création d'un DOMParser</h2>
+
+<p>Pour créer un objet <code>DOMParser</code>, utilisez simplement <code>DOMParser()</code>.</p>
+
+<h2 id="Analyse_XML">Analyse XML</h2>
+
+<p>Une fois que vous avez créé un objet d'analyse, <span id="result_box" lang="fr"><span>vous pouvez analyser XML à partir d'une chaîne à l'aide de la méthode </span></span> {{domxref("DOMParser.parseFromString","parseFromString()")}} <span lang="fr"><span> :</span></span></p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> parser <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">DOMParser</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> doc <span class="operator token">=</span> parser<span class="punctuation token">.</span><span class="function token">parseFromString</span><span class="punctuation token">(</span>stringContainingXMLSource<span class="punctuation token">,</span> <span class="string token">"application/xml"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h3 id="Gestion_d.27erreurs" name="Gestion_d.27erreurs">Gestion d'erreurs</h3>
+
+<p>Notez que si le processus de traitement échoue, <code>DOMParser</code> ne génère aucune exception mais retourne à la place un document d'erreur :</p>
+
+<pre class="brush:xml line-numbers  language-xml"><code class="language-xml"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>parsererror</span> <span class="attr-name token">xmlns</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.mozilla.org/newlayout/xml/parsererror.xml<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+(error description)
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>sourcetext</span><span class="punctuation token">&gt;</span></span>(a snippet of the source XML)<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>sourcetext</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>parsererror</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p>Les erreurs d'analyse sont aussi renvoyées à la <a href="https://developer.mozilla.org/fr/docs/Console_d'erreurs">console d'erreur</a>, avec l'URI du document (voir plus bas) comme la source d'erreur.</p>
+
+<h2 id="Analyse_d'un_document_SVG_ou_HTML">Analyse d'un document SVG ou HTML</h2>
+
+<p><span id="result_box" lang="fr"><span>Le <code>DOMParser</code> peut également être utilisé pour analyser un document SVG {{geckoRelease ("10.0")}} ou un document HTML {{geckoRelease ("12.0")}}.</span> <span>Trois résultats différents sont possibles, sélectionnés par le type MIME donné.</span> <span>Si le type MIME est <code>text/xml</code>, l'objet résultant sera un <code>XMLDocument</code>, si le type MIME est <code>image/svg + xml</code>, ce sera un <code>SVGDocument</code> et si le type MIME est <code>text/html</code>, ce sera un <code>HTMLDocument</code>.</span></span></p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> parser <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">DOMParser</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> doc <span class="operator token">=</span> parser<span class="punctuation token">.</span><span class="function token">parseFromString</span><span class="punctuation token">(</span>stringContainingXMLSource<span class="punctuation token">,</span> <span class="string token">"application/xml"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="comment token">// retourne un document, mais pas un SVGDocument ni un HTMLDocument</span>
+
+parser <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">DOMParser</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+doc <span class="operator token">=</span> parser<span class="punctuation token">.</span><span class="function token">parseFromString</span><span class="punctuation token">(</span>stringContainingSVGSource<span class="punctuation token">,</span> <span class="string token">"image/svg+xml"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="comment token">// retourne un SVGDocument, </span></code><code><span class="short_text" id="result_box" lang="fr"><span>qui est aussi un document</span></span></code><code class="language-js"><span class="comment token">.</span>
+
+parser <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">DOMParser</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+doc <span class="operator token">=</span> parser<span class="punctuation token">.</span><span class="function token">parseFromString</span><span class="punctuation token">(</span>stringContainingHTMLSource<span class="punctuation token">,</span> <span class="string token">"text/html"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="comment token">// retourne un HTMLDocument, </span></code><code><span class="short_text" id="result_box" lang="fr"><span>qui est aussi un document</span></span></code><code class="language-js"><span class="comment token">.</span></code></pre>
+
+<h3 id="Extension_HTML_DOMParser_pour_les_autres_navigateurs">Extension HTML DOMParser pour les autres navigateurs</h3>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="comment token">/*
+ * DOMParser HTML extension
+ * 2012-09-04
+ *
+ * By Eli Grey, http://eligrey.com
+ * Public domain.
+ * </span></code><span id="result_box" lang="fr"><span>AUCUNE GARANTIE EXPRESSE OU IMPLICITE.</span> <span>À UTILISER À VOS RISQUES ET PÉRILS.</span></span> <code class="language-js"><span class="comment token">
+ */</span>
+
+<span class="comment token">/*! @source https://gist.github.com/1129031 */</span>
+<span class="comment token">/*global document, DOMParser*/</span>
+
+<span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>DOMParser<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+	<span class="string token">"use strict"</span><span class="punctuation token">;</span>
+
+	<span class="keyword token">var</span> proto <span class="operator token">=</span> DOMParser<span class="punctuation token">.</span>prototype<span class="punctuation token">,</span>
+        nativeParse <span class="operator token">=</span> proto<span class="punctuation token">.</span>parseFromString<span class="punctuation token">;</span>
+
+	<span class="comment token">// Firefox/Opera/IE </span></code><span id="result_box" lang="fr"><span>lancent des erreurs sur les types non pris en charge</span></span> <code class="language-js">
+	<span class="keyword token">try</span> <span class="punctuation token">{</span>
+		<span class="comment token">// </span></code> <span id="result_box" lang="fr"><span>WebKit renvoie null sur les types non pris en charge</span></span> <code class="language-js">
+		<span class="keyword token">if</span> <span class="punctuation token">(</span><span class="punctuation token">(</span><span class="keyword token">new</span> <span class="class-name token">DOMParser</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">parseFromString</span><span class="punctuation token">(</span><span class="string token">""</span><span class="punctuation token">,</span> <span class="string token">"text/html"</span><span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+			<span class="comment token">// text/html </span></code><span class="short_text" id="result_box" lang="fr"><span>l'analyse est supportée nativement</span></span> <code class="language-js">
+			<span class="keyword token">return</span><span class="punctuation token">;</span>
+		<span class="punctuation token">}</span>
+	<span class="punctuation token">}</span> <span class="keyword token">catch</span> <span class="punctuation token">(</span><span class="class-name token">ex</span><span class="punctuation token">)</span> <span class="punctuation token">{</span><span class="punctuation token">}</span>
+
+	proto<span class="punctuation token">.</span>parseFromString <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>markup<span class="punctuation token">,</span> type<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+		<span class="keyword token">if</span> <span class="punctuation token">(</span><span class="regex token">/^\s*text\/html\s*(?:;|$)/i</span><span class="punctuation token">.</span><span class="function token">test</span><span class="punctuation token">(</span>type<span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+			<span class="keyword token">var</span>
+			  doc <span class="operator token">=</span> document<span class="punctuation token">.</span>implementation<span class="punctuation token">.</span><span class="function token">createHTMLDocument</span><span class="punctuation token">(</span><span class="string token">""</span><span class="punctuation token">)</span>
+			<span class="punctuation token">;</span>
+	      		<span class="keyword token">if</span> <span class="punctuation token">(</span>markup<span class="punctuation token">.</span><span class="function token">toLowerCase</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">indexOf</span><span class="punctuation token">(</span><span class="string token">'&lt;!doctype'</span><span class="punctuation token">)</span> <span class="operator token">&gt;</span> <span class="operator token">-</span><span class="number token">1</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        			doc<span class="punctuation token">.</span>documentElement<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> markup<span class="punctuation token">;</span>
+      			<span class="punctuation token">}</span>
+      			<span class="keyword token">else</span> <span class="punctuation token">{</span>
+        			doc<span class="punctuation token">.</span>body<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> markup<span class="punctuation token">;</span>
+      			<span class="punctuation token">}</span>
+			<span class="keyword token">return</span> doc<span class="punctuation token">;</span>
+		<span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
+			<span class="keyword token">return</span> nativeParse<span class="punctuation token">.</span><span class="function token">apply</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">,</span> arguments<span class="punctuation token">)</span><span class="punctuation token">;</span>
+		<span class="punctuation token">}</span>
+	<span class="punctuation token">}</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">(</span>DOMParser<span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span></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">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM Parsing', '#the-domparser-interface', 'DOMParser')}}</td>
+   <td>{{Spec2('DOM Parsing')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi" name="Voir_aussi">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<article class="approved text-content">
+<div class="boxed translate-rendered">
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>XML support</td>
+   <td>{{CompatChrome(1)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1)}}</td>
+   <td>{{CompatIE(9)}}</td>
+   <td>{{CompatOpera(8)}}</td>
+   <td>{{CompatSafari(3.2)}}</td>
+  </tr>
+  <tr>
+   <td>SVG support</td>
+   <td>{{CompatChrome(4)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(10.0)}}</td>
+   <td>{{CompatIE(10)}}</td>
+   <td>{{CompatOpera(15)}}</td>
+   <td>{{CompatSafari(3.2)}}</td>
+  </tr>
+  <tr>
+   <td>HTML support</td>
+   <td>{{CompatChrome(30)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(12.0)}}</td>
+   <td>{{CompatIE(10)}}</td>
+   <td>{{CompatOpera(17)}}</td>
+   <td>{{CompatSafari(7.1)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>XML support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>SVG support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(10.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>HTML support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(12.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/Guide/Parsing_and_serializing_XML" title="Parsing_and_serializing_XML">Analyse et sérialisation du XML</a></li>
+ <li>{{domxref("XMLHttpRequest")}}</li>
+ <li>{{domxref("XMLSerializer")}}</li>
+</ul>
+</div>
+</article>
+
+<article class="localized"> </article>
diff --git a/files/fr/web/api/dompoint/dompoint/index.html b/files/fr/web/api/dompoint/dompoint/index.html
new file mode 100644
index 0000000000..2410a4ca9b
--- /dev/null
+++ b/files/fr/web/api/dompoint/dompoint/index.html
@@ -0,0 +1,123 @@
+---
+title: DOMPoint.DOMPoint()
+slug: Web/API/DOMPoint/DOMPoint
+tags:
+  - API
+  - Constructeurs
+  - DOM
+  - Géométrie
+  - Quadrilatère
+translation_of: Web/API/DOMPoint/DOMPoint
+---
+<p>{{APIRef("DOM")}}{{ SeeCompatTable() }}</p>
+
+<p>Le constructeur <strong><code>DOMPoint()</code></strong> crée un nouvel objet {{domxref("DOMPoint")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var myDOMPoint = new DOMPoint(x, y, z, w);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>x</dt>
+ <dd>La coordonnée <code>x</code> pour le nouveau <code>DOMPoint</code>.</dd>
+ <dt>y</dt>
+ <dd>La coordonnée <code>y</code> pour le nouveau <code>DOMPoint</code>.</dd>
+ <dt>z</dt>
+ <dd>La coordonnée <code>z</code> pour le nouveau <code>DOMPoint</code>.</dd>
+ <dt>w</dt>
+ <dd>La valeur de perspective du nouveau <code>DOMPoint</code>.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Pour créer un nouveau <code>DOMPoint</code>, vous pourriez exécuter une ligne de code comme celle-ci :</p>
+
+<pre class="brush: js">var myDOMPoint = new DOMPoint(0.4, 0.5, -0.5, 1);
+// le lancement de 'myDOMPoint' dans la console devrait renvoyer
+// DOMPoint { x: 0.4, y: 0.5, z: -0.5, w: 1 }
+</pre>
+
+<h2 id="Specification" name="Specification">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('Geometry Interfaces', '#dom-dompoint-dompointx-y-z-w', 'DOMPoint()')}}</td>
+   <td>{{Spec2('Geometry Interfaces')}}</td>
+   <td>La dernière version de la spécification est un ED.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>{{CompatNo}}<br>
+    <br>
+     </td>
+   <td>{{CompatVersionUnknown}}<br>
+     </td>
+   <td>{{ CompatNo }}</td>
+   <td>
+    <p>{{ CompatNo }}</p>
+   </td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("DOMPoint")}}</li>
+ <li>{{domxref("DOMRect")}}</li>
+</ul>
diff --git a/files/fr/web/api/dompoint/index.html b/files/fr/web/api/dompoint/index.html
new file mode 100644
index 0000000000..ffbcea3a5f
--- /dev/null
+++ b/files/fr/web/api/dompoint/index.html
@@ -0,0 +1,158 @@
+---
+title: DOMPoint
+slug: Web/API/DOMPoint
+tags:
+  - API
+  - DOM
+  - Géométrie
+  - Point
+  - Quadrilatère
+translation_of: Web/API/DOMPoint
+---
+<p>{{APIRef("Geometry Interfaces")}}{{ SeeCompatTable() }}</p>
+
+<p>Un <strong><code>DOMPoint</code></strong> représente un point 2D ou 3D dans le système de coordonnées.</p>
+
+<p>En général, un x positif représente une position à droite de l'origine ; un y positif est une position au-dessus de l'origine ; et un z positif est une position vers l'extérieur de l'écran (autrement dit, opposée à la direction de l'utilisateur).</p>
+
+<p>Il hérite de son parent {{domxref("DOMPointReadOnly")}}.</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("DOMPoint.DOMPoint","DOMPoint()")}}</dt>
+ <dd>Crée un nouvel objet <code>DOMPoint</code>.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em><code>DOMPoint</code> hérite des méthodes de son parent {{domxref("DOMPointReadOnly")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("DOMPointReadOnly.fromPoint")}}</dt>
+ <dd>Traduit la position/perspective d'un <code>DOMPoint</code> à une nouvelle position (ne semble pas encore être pris en charge).</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em><code>DOMPoint</code> hérite des propriétés de son parent {{domxref("DOMPointReadOnly")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("DOMPointReadOnly.x")}}</dt>
+ <dd>La coordonnée x du <code>DOMPoint</code>.</dd>
+ <dt>{{domxref("DOMPointReadOnly.y")}}</dt>
+ <dd>La coordonnée y du <code>DOMPoint</code>.</dd>
+ <dt>{{domxref("DOMPointReadOnly.z")}}</dt>
+ <dd>La coordonnée z du <code>DOMPoint</code>.</dd>
+ <dt>{{domxref("DOMPointReadOnly.w")}}</dt>
+ <dd>La valeur de perspective du <code>DOMPoint</code>.</dd>
+</dl>
+
+<h2 id="Specification" name="Specification">Exemples</h2>
+
+<p>Dans l' <a href="https://developer.mozilla.org/fr/docs/Web/API/WebVR_API">API WebVR</a> (<em>VR = réalité virtuelle</em>), les valeurs <code>DOMPoint</code> sont utilisées pour représenter les points dans l'espace de coordonnées <span id="result_box" lang="fr"><span>dans lequel l'affichage monté sur la tête de l'utilisateur existe.</span></span> Dans l'extrait suivant, la position du VR HMD peut être récupérée en saisissant d'abord une référence à l'état actuel du capteur de position avec {{domxref("PositionSensorVRDevice.getState")}}, puis en accédant au résultat de la  {{domxref("VRPositionState.position","position")}} de la propriété {{domxref("VRPositionState")}}, qui renvoie un <code>DOMPoint</code>. Notez ci-dessous l'utilisation de <code>position.x</code>, <code>position.y</code> et <code>position.z</code>.</p>
+
+<pre class="brush: js">function setView() {
+      var posState = gPositionSensor.getState();
+      if(posState.hasPosition) {
+        posPara.textContent = 'Position: x' + roundToTwo(posState.position.x) + " y"
+                                    + roundToTwo(posState.position.y) + " z"
+                                    + roundToTwo(posState.position.z);
+        xPos = -posState.position.x * WIDTH * 2;
+        yPos = posState.position.y * HEIGHT * 2;
+        if(-posState.position.z &gt; 0.01) {
+          zPos = -posState.position.z;
+        } else {
+          zPos = 0.01;
+        }
+      }
+
+  ...
+
+}</pre>
+
+<div class="note">
+<p><strong>Note </strong>: Voir notre <a href="https://github.com/mdn/webvr-tests/blob/gh-pages/positionsensorvrdevice/index.html">positionsensorvrdevice demo</a> pour le code complet.</p>
+</div>
+
+<h2 id="Specification" name="Specification">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('Geometry Interfaces', '#DOMPoint', 'DOMPoint')}}</td>
+   <td>{{Spec2('Geometry Interfaces')}}</td>
+   <td>Dernière version de la spécification est un ED.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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(61)}}<br>
+    <br>
+     </td>
+   <td>{{CompatVersionUnknown}}<br>
+     </td>
+   <td>{{ CompatNo }}</td>
+   <td>
+    <p>{{ CompatNo }}</p>
+   </td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("DOMRect")}}</li>
+</ul>
diff --git a/files/fr/web/api/dompointreadonly/index.html b/files/fr/web/api/dompointreadonly/index.html
new file mode 100644
index 0000000000..d26edef44d
--- /dev/null
+++ b/files/fr/web/api/dompointreadonly/index.html
@@ -0,0 +1,128 @@
+---
+title: DOMPointReadOnly
+slug: Web/API/DOMPointReadOnly
+tags:
+  - API
+  - DOM
+  - Géométrie
+  - Interface
+  - Quadrilatère
+translation_of: Web/API/DOMPointReadOnly
+---
+<p>{{APIRef("Geometry Interfaces")}}{{ SeeCompatTable() }}</p>
+
+<p>L'interface <strong><code>DOMPointReadOnly</code></strong> spécifie les propriétés standard utilisées par {{domxref("DOMPoint")}} pour définir un point 2D ou 3D dans un système de coordonnées.</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("DOMPointReadOnly.DOMPointReadOnly","DOMPointReadOnly()")}}</dt>
+ <dd>Défini pour créer un nouvel objet <code>DOMPointReadOnly</code>, mais notez que ce constructeur ne peut pas être appelé par un JavaScript tiers : ce faisant, il retourne un  typeError "constructeur illégal" .</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("DOMPointReadOnly.fromPoint")}}</dt>
+ <dd>Traduit la position / perspective d'un <code>DOMPoint</code> à une nouvelle position (ne semble pas encore être pris en charge).</dd>
+ <dt>{{domxref("DOMPointReadOnly.matrixTransform")}}</dt>
+ <dd>Applique une transformation matricielle à un objet <code>DOMPointReadOnly</code>  (ne semble pas encore être pris en charge).</dd>
+ <dt>{{domxref("DOMPointReadOnly.toJSON()")}}</dt>
+ <dd>Renvoie une représentation JSON de l'objet <code>DOMPointReadOnly</code>.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("DOMPointReadOnly.x")}} {{readonlyInline}}</dt>
+ <dd>La coordonnée x du <code>DOMPoint</code>.</dd>
+ <dt>{{domxref("DOMPointReadOnly.y")}} {{readonlyInline}}</dt>
+ <dd>La coordonnée y du <code>DOMPoint</code>.</dd>
+ <dt>{{domxref("DOMPointReadOnly.z")}} {{readonlyInline}}</dt>
+ <dd>La coordonnée z du <code>DOMPoint</code>.</dd>
+ <dt>{{domxref("DOMPointReadOnly.w")}} {{readonlyInline}}</dt>
+ <dd>La valeur de perspective du <code>DOMPoint</code>.</dd>
+</dl>
+
+<h2 id="Specification" name="Specification">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('Geometry Interfaces', '#DOMPoint', 'DOMPoint')}}</td>
+   <td>{{Spec2('Geometry Interfaces')}}</td>
+   <td>La dernière version de la spécification est un ED.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>{{CompatNo}}<br>
+    <br>
+     </td>
+   <td>{{CompatVersionUnknown}}<br>
+     </td>
+   <td>{{ CompatNo }}</td>
+   <td>
+    <p>{{ CompatNo }}</p>
+   </td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("DOMPoint")}}</li>
+ <li>{{domxref("DOMRect")}}</li>
+</ul>
diff --git a/files/fr/web/api/dompointreadonly/w/index.html b/files/fr/web/api/dompointreadonly/w/index.html
new file mode 100644
index 0000000000..f05367c9d9
--- /dev/null
+++ b/files/fr/web/api/dompointreadonly/w/index.html
@@ -0,0 +1,106 @@
+---
+title: DOMPoint.w
+slug: Web/API/DOMPointReadOnly/w
+tags:
+  - API
+  - Coordonnées
+  - DOM
+  - Géométrie
+  - Propriétés
+  - Quadrilatère
+  - W
+translation_of: Web/API/DOMPointReadOnly/w
+---
+<p>{{APIRef("DOM")}}{{ SeeCompatTable() }}</p>
+
+<p>La propriété en lecture seule <code><strong>w</strong></code> de l'interface <strong><code>DOMPointReadOnly</code></strong> représente la perspective d'un point.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var perspective = DOMPoint.w;</pre>
+
+<h3 id="Specification" name="Specification">Valeur</h3>
+
+<p>Un double.</p>
+
+<h2 id="Specification" name="Specification">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('Geometry Interfaces', '#dom-dompointreadonly-w', 'w')}}</td>
+   <td>{{Spec2('Geometry Interfaces')}}</td>
+   <td>La dernière version de la spécification est un ED.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>{{CompatNo}}<br>
+    <br>
+     </td>
+   <td>{{CompatVersionUnknown}}<br>
+     </td>
+   <td>{{ CompatNo }}</td>
+   <td>
+    <p>{{ CompatNo }}</p>
+   </td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("DOMPoint")}}</li>
+</ul>
diff --git a/files/fr/web/api/dompointreadonly/x/index.html b/files/fr/web/api/dompointreadonly/x/index.html
new file mode 100644
index 0000000000..c8ca31f4bf
--- /dev/null
+++ b/files/fr/web/api/dompointreadonly/x/index.html
@@ -0,0 +1,108 @@
+---
+title: DOMPoint.x
+slug: Web/API/DOMPointReadOnly/x
+tags:
+  - API
+  - Coordonnées
+  - DOM
+  - Géométrie
+  - Propriétés
+  - Quadrilatère
+  - x
+translation_of: Web/API/DOMPointReadOnly/x
+---
+<p>{{APIRef("DOM")}}{{ SeeCompatTable() }}</p>
+
+<p>La propriété en lecture seule <code><strong>x</strong></code> de l'interface <strong><code>DOMPointReadOnly</code></strong> représente la coordonnée x d'un point.</p>
+
+<p>En général, x positif signifie à droite et négatif à gauche (par rapport à l'origine).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var xPos = DOMPoint.x;</pre>
+
+<h3 id="Specification" name="Specification">Valeur</h3>
+
+<p>Un double.</p>
+
+<h2 id="Specification" name="Specification">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('Geometry Interfaces', '#dom-dompointreadonly-x', 'x')}}</td>
+   <td>{{Spec2('Geometry Interfaces')}}</td>
+   <td>La dernière version de la spécification est un ED.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>{{CompatNo}}<br>
+    <br>
+     </td>
+   <td>{{CompatVersionUnknown}}<br>
+     </td>
+   <td>{{ CompatNo }}</td>
+   <td>
+    <p>{{ CompatNo }}</p>
+   </td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("DOMPoint")}}</li>
+</ul>
diff --git a/files/fr/web/api/dompointreadonly/y/index.html b/files/fr/web/api/dompointreadonly/y/index.html
new file mode 100644
index 0000000000..60c98fd793
--- /dev/null
+++ b/files/fr/web/api/dompointreadonly/y/index.html
@@ -0,0 +1,108 @@
+---
+title: DOMPoint.y
+slug: Web/API/DOMPointReadOnly/y
+tags:
+  - API
+  - Coordonnées
+  - DOM
+  - Géométrie
+  - Propriétés
+  - Quadrilatère
+  - 'y'
+translation_of: Web/API/DOMPointReadOnly/y
+---
+<p>{{APIRef("DOM")}}{{ SeeCompatTable() }}</p>
+
+<p>La propriété en lecture seule <code><strong>y</strong></code> de l'interface <strong><code>DOMPointReadOnly</code></strong> représente la coordonnée y d'un point.</p>
+
+<p>En général, y positif signifie en haut et négatif en bas (par rapport à l'origine).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var yPos = DOMPoint.y;</pre>
+
+<h3 id="Specification" name="Specification">Valeur</h3>
+
+<p>Un double.</p>
+
+<h2 id="Specification" name="Specification">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('Geometry Interfaces', '#dom-dompointreadonly-y', 'y')}}</td>
+   <td>{{Spec2('Geometry Interfaces')}}</td>
+   <td>La dernière version de la spécification est un ED.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>{{CompatNo}}<br>
+    <br>
+     </td>
+   <td>{{CompatVersionUnknown}}<br>
+     </td>
+   <td>{{ CompatNo }}</td>
+   <td>
+    <p>{{ CompatNo }}</p>
+   </td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("DOMPoint")}}</li>
+</ul>
diff --git a/files/fr/web/api/dompointreadonly/z/index.html b/files/fr/web/api/dompointreadonly/z/index.html
new file mode 100644
index 0000000000..d8e6fc96bf
--- /dev/null
+++ b/files/fr/web/api/dompointreadonly/z/index.html
@@ -0,0 +1,109 @@
+---
+title: DOMPoint.z
+slug: Web/API/DOMPointReadOnly/z
+tags:
+  - API
+  - Coordonnées
+  - DOM
+  - Géométrie
+  - Point
+  - Propriétés
+  - Quadrilatère
+  - z
+translation_of: Web/API/DOMPointReadOnly/z
+---
+<p>{{APIRef("DOM")}}{{ SeeCompatTable() }}</p>
+
+<p>La propriété en lecture seule <code><strong>z</strong></code> de l'interface <strong><code>DOMPointReadOnly</code></strong> représente la coordonnée z d'un point.</p>
+
+<p>En général, z positif signifie vers l'extérieur de l'écran (autrement dit, opposée à la direction de l'utilisateur) et négatif vers l'intérieur de l'écran (dans la même direction que l'utilisateur).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var zPos = DOMPoint.z;</pre>
+
+<h3 id="Specification" name="Specification">Valeur</h3>
+
+<p>Un double.</p>
+
+<h2 id="Specification" name="Specification">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('Geometry Interfaces', '#dom-dompointreadonly-z', 'z')}}</td>
+   <td>{{Spec2('Geometry Interfaces')}}</td>
+   <td>La dernière version de la spécification est un ED.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>{{CompatNo}}<br>
+    <br>
+     </td>
+   <td>{{CompatVersionUnknown}}<br>
+     </td>
+   <td>{{ CompatNo }}</td>
+   <td>
+    <p>{{ CompatNo }}</p>
+   </td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("DOMPoint")}}</li>
+</ul>
diff --git a/files/fr/web/api/domquad/index.html b/files/fr/web/api/domquad/index.html
new file mode 100644
index 0000000000..a3a2112a66
--- /dev/null
+++ b/files/fr/web/api/domquad/index.html
@@ -0,0 +1,114 @@
+---
+title: DOMQuad
+slug: Web/API/DOMQuad
+tags:
+  - API
+  - Coordonnées
+  - DOM
+  - Géométrie
+  - Interfaces
+  - Quadrilatère
+  - dimensions
+translation_of: Web/API/DOMQuad
+---
+<p>{{SeeCompatTable}}{{APIRef("Geometry Interfaces")}}</p>
+
+<p>Un <code>DOMQuad</code> est une collection de 4 <code>DOMPoint</code> définissant les coins d'un quadrilatère arbitraire. Renvoyer des <code>DOMQuad</code> permet à <code>getBoxQuads()</code> de retourner des informations précises, même lorsque des transformations 2D ou 3D arbitraires sont présentes. Il possède un attribut <code>bounds</code> pratique qui retourne un <code>DOMRectReadOnly</code> pour les cas où vous voulez juste un rectangle de délimitation aligné sur l'axe.</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("DOMQuad.DOMQuad()")}}</dt>
+ <dd>Crée un nouvel objet <code>DOMQuad</code>.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>p1,p2,p3,p4 {{readonlyinline}}</dt>
+ <dd>sont des objets {{domxref("DOMPoint")}} pour chacun des 4 coins de l'objet<code> DOMQuad</code>.</dd>
+</dl>
+
+<h2 id="Méthode">Méthode</h2>
+
+<dl>
+ <dt>{{domxref("DOMQuad.fromRect()")}}</dt>
+ <dd>Renvoie un nouvel objet <code>DOMQuad</code> basé sur l'ensemble de coordonnées fournit.</dd>
+ <dt>{{domxref("DOMQuad.fromQuad()")}}</dt>
+ <dd>Renvoie un nouvel objet <code>DOMQuad</code> basé sur l'ensemble de coordonnées fournit.</dd>
+ <dt>{{domxref("DOMQuad.getBounds()")}}</dt>
+ <dd>Renvoie un objet {{domxref("DOMRect")}} avec les coordonnées et les dimensions de l'objet <code>DOMQuad</code>.</dd>
+ <dt>{{domxref("DOMQuad.toJSON()")}}</dt>
+ <dd>Renvoie une représentation JSON de l'objet <code>DOMQuad</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">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Geometry Interfaces','#DOMQuad','DOMQuad')}}</td>
+   <td>{{Spec2('Geometry Interfaces')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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(61)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(48)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(61)}}</td>
+   <td>{{CompatChrome(61)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile(48)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fr/web/api/domrect/domrect/index.html b/files/fr/web/api/domrect/domrect/index.html
new file mode 100644
index 0000000000..146bcd6b43
--- /dev/null
+++ b/files/fr/web/api/domrect/domrect/index.html
@@ -0,0 +1,121 @@
+---
+title: DOMRect.DOMRect()
+slug: Web/API/DOMRect/DOMRect
+tags:
+  - API
+  - Constructeurs
+  - DOM
+  - Géométrie
+  - Rectangle
+translation_of: Web/API/DOMRect/DOMRect
+---
+<p>{{APIRef("DOM")}}{{ SeeCompatTable() }}</p>
+
+<p>Le constructeur <strong><code>DOMRect()</code></strong> crée un nouvel objet {{domxref("DOMRect")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var myDOMRect = new DOMRect(x, y, width, height);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>x</dt>
+ <dd>La coordonnée <code>x</code> de l'orginie du <code>DOMRect</code>.</dd>
+ <dt>y</dt>
+ <dd>La coordonnée <code>y</code> de l'origine du <code>DOMRect</code>.</dd>
+ <dt>width</dt>
+ <dd>La largeur du <code>DOMRect</code>.</dd>
+ <dt>height</dt>
+ <dd>La hauteur du <code>DOMRect</code>.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Pour créer un nouveau <code>DOMPoint</code>, vous pouvez exécuter une ligne de code telle que celle-ci :</p>
+
+<pre class="brush: js">myDOMRect = new DOMRect(0,0,100,100);
+// l'exécution de 'myDOMRect' dans la console devrait alors renvoyer
+// DOMRect { x: 0, y: 0, width: 100, height: 100, top: 0, right: 100, bottom: 100, left: 0 }
+</pre>
+
+<h2 id="Specification" name="Specification">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('Geometry Interfaces', '#dom-domrectreadonly-domrectreadonlyx-y-width-height', 'DOMRect()')}}</td>
+   <td>{{Spec2('Geometry Interfaces')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<br>
+     </td>
+   <td>{{ CompatNo }}</td>
+   <td>
+    <p>{{ CompatNo }}</p>
+   </td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android Webview</th>
+   <th>Chrome for Andorid</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("DOMPoint")}}</li>
+ <li>{{domxref("DOMRect")}}</li>
+</ul>
diff --git a/files/fr/web/api/domrect/index.html b/files/fr/web/api/domrect/index.html
new file mode 100644
index 0000000000..4c63c7bc07
--- /dev/null
+++ b/files/fr/web/api/domrect/index.html
@@ -0,0 +1,89 @@
+---
+title: DOMRect
+slug: Web/API/DOMRect
+tags:
+  - API
+  - DOM
+  - Géométrie
+  - Objets
+  - Rectangle
+translation_of: Web/API/DOMRect
+---
+<p>{{draft}}{{APIRef("Geometry Interfaces")}}{{ SeeCompatTable() }}</p>
+
+<p>Un <strong><code>DOMRect</code></strong> représente un rectangle.</p>
+
+<p>Le type de boîte représenté par le <code>DOMRect</code> est spécifié par la méthode ou la propriété qui l'a retourné. Par exemple, {{domxref("VREyeParameters.renderRect")}} de l'API WebVR spécifie la fenêtre d'un élément <a href="https://developer.mozilla.org/fr/docs/Web/API/HTMLCanvasElement">canvas</a> dans laquelle le visuel pour un oeil doit être rendu.</p>
+
+<p>Il hérite de son parent {{domxref("DOMRectReadOnly")}}.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("DOMRect.DOMRect","DOMRect()")}}</dt>
+ <dd>Crée un nouvel objet <code>DOMRect</code>.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+</dl>
+
+<p><em><code>DOMRect</code> hérite des propriétés de son parent {{domxref("DOMRectReadOnly")}}. À une différence près, elles ne sont plus en lecture seule.</em></p>
+
+<dl>
+ <dt>{{domxref("DOMRectReadOnly.x")}}</dt>
+ <dd>La coordonnée x de l'origine du <code>DOMRect</code>.</dd>
+ <dt>{{domxref("DOMRectReadOnly.y")}}</dt>
+ <dd>La coordonnée y de l'origine du <code>DOMRect</code>.</dd>
+ <dt>{{domxref("DOMRectReadOnly.width")}}</dt>
+ <dd>La largeur du <code>DOMRect</code>.</dd>
+ <dt>{{domxref("DOMRectReadOnly.height")}}</dt>
+ <dd>La hauteur du <code>DOMRect</code>.</dd>
+ <dt>{{domxref("DOMRectReadOnly.top")}}</dt>
+ <dd>Renvoie la valeur de la coordonnée supérieure de <code>DOMRect</code> (a la même valeur que <code>y</code>, ou <code>y + height</code> <em>(y + hauteur)</em> si <code>height</code> est négative).</dd>
+ <dt>{{domxref("DOMRectReadOnly.right")}}</dt>
+ <dd>Renvoie la valeur de la coordonnée droite du <code>DOMRect</code> (a la même valeur que  <code>x + width</code> <em>(x + largeur)</em>, ou <code>x</code> si <code>width</code> est négative).</dd>
+ <dt>{{domxref("DOMRectReadOnly.bottom")}}</dt>
+ <dd>Renvoie la valeur de la coordonnée du bas du <code>DOMRect</code> (a la même valeur que  <code>y + height</code> <em>(y + hauteur)</em>, ou <code>y</code> si <code>height</code> est négative).</dd>
+ <dt>{{domxref("DOMRectReadOnly.left")}}</dt>
+ <dd>Renvoie la valeur de la coordonnée de gauche du <code>DOMRect</code> (a la même valeur que <code>x</code>, ou <code>x + width</code> <em>(x + largeur)</em> si <code>width</code> est négative).</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em><code>DOMRect</code> hérite des méthodes de son parent {{domxref("DOMRectReadOnly")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("DOMRectReadOnly.fromRect()")}}</dt>
+ <dd>Crée un nouvel objet <code>DOMRect</code> avec l'emplacement et les dimensions données.</dd>
+</dl>
+
+<h2 id="Specification" name="Specification">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('Geometry Interfaces', '#DOMRect', 'DOMRect')}}</td>
+   <td>{{Spec2('Geometry Interfaces')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.DOMRect")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("DOMPoint")}}</li>
+</ul>
diff --git a/files/fr/web/api/domrectreadonly/bottom/index.html b/files/fr/web/api/domrectreadonly/bottom/index.html
new file mode 100644
index 0000000000..25b0e2baf6
--- /dev/null
+++ b/files/fr/web/api/domrectreadonly/bottom/index.html
@@ -0,0 +1,105 @@
+---
+title: DOMRectReadOnly.bottom
+slug: Web/API/DOMRectReadOnly/bottom
+tags:
+  - API
+  - Bas
+  - DOM
+  - Géométrie
+  - Propriétés
+  - Rectangle
+translation_of: Web/API/DOMRectReadOnly/bottom
+---
+<p>{{APIRef("DOM")}}{{ SeeCompatTable() }}</p>
+
+<p>La propriété en lecture seule <code><strong>bottom</strong></code> d'une interface <strong><code>DOMRectReadOnly</code></strong> renvoie la valeur des coordonnées du pied du <code>DOMRect</code> (a la même valeur que <code>y + height</code> <em>(y + hauteur)</em>, ou <code>y</code> si <code>height</code> est négative).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var recBottom = DOMRect.bottom;</pre>
+
+<h3 id="Specification" name="Specification">Valeur</h3>
+
+<p>Un double.</p>
+
+<h2 id="Specification" name="Specification">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('Geometry Interfaces', '#dom-domrectreadonly-bottom', 'bottom')}}</td>
+   <td>{{Spec2('Geometry Interfaces')}}</td>
+   <td>La dernière version de la spécification est un ED.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>{{CompatNo}}<br>
+    <br>
+     </td>
+   <td>{{CompatVersionUnknown}}<br>
+     </td>
+   <td>{{ CompatNo }}</td>
+   <td>
+    <p>{{ CompatNo }}</p>
+   </td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("DOMRect")}}</li>
+</ul>
diff --git a/files/fr/web/api/domrectreadonly/domrectreadonly/index.html b/files/fr/web/api/domrectreadonly/domrectreadonly/index.html
new file mode 100644
index 0000000000..dbbc58d738
--- /dev/null
+++ b/files/fr/web/api/domrectreadonly/domrectreadonly/index.html
@@ -0,0 +1,122 @@
+---
+title: DOMRectReadOnly()
+slug: Web/API/DOMRectReadOnly/DOMRectReadOnly
+tags:
+  - API
+  - Constructeurs
+  - DOM
+  - Géométrie
+  - Rectangle
+translation_of: Web/API/DOMRectReadOnly/DOMRectReadOnly
+---
+<p>{{APIRef("DOM")}}{{ SeeCompatTable }}</p>
+
+<p>Le constructeur <strong><code>DOMRectReadOnly()</code></strong> crée un nouvel objet {{domxref("DOMRectReadOnly")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var myDOMRectReadOnly = new DOMRectReadOnly(x, y, width, height);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>x</dt>
+ <dd>La coordonnée <code>x</code> de l'origine d'un <code>DOMRectReadOnly</code>.</dd>
+ <dt>y</dt>
+ <dd>La coordonnée <code>y</code> de l'origine d'un <code>DOMRectReadOnly</code>.</dd>
+ <dt>width</dt>
+ <dd>La largeur d'un <code>DOMRectReadOnly</code>.</dd>
+ <dt>height</dt>
+ <dd>La hauteur d'un <code>DOMRectReadOnly</code>.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Pour créer un nouveau <code>DOMPoint</code>, vous pouvez exécuter une ligne de code comme celle-ci :</p>
+
+<pre class="brush: js">myDOMRect = new DOMRectReadOnly(0,0,100,100);
+// l'exécution de 'myDOMRect' dans la console devrait alors renvoyer
+// DOMRect { x: 0, y: 0, width: 100, height: 100, top: 0, right: 100, bottom: 100, left: 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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Geometry Interfaces', '#DOMRect', 'DOMRect()')}}</td>
+   <td>{{Spec2('Geometry Interfaces')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Edge</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(57)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android Webview</th>
+   <th>Chrome for Andorid</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Edge Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(57)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("DOMPoint")}}</li>
+ <li>{{domxref("DOMRect")}}</li>
+</ul>
diff --git a/files/fr/web/api/domrectreadonly/height/index.html b/files/fr/web/api/domrectreadonly/height/index.html
new file mode 100644
index 0000000000..56e8940710
--- /dev/null
+++ b/files/fr/web/api/domrectreadonly/height/index.html
@@ -0,0 +1,105 @@
+---
+title: DOMRectReadOnly.height
+slug: Web/API/DOMRectReadOnly/height
+tags:
+  - API
+  - DOM
+  - Géométrie
+  - Hauteur
+  - Propriétés
+  - Rectangle
+translation_of: Web/API/DOMRectReadOnly/height
+---
+<p>{{APIRef("DOM")}}{{ SeeCompatTable() }}</p>
+
+<p>La propriété en lecture seule <strong><code>height</code></strong> de l'interface of the <strong><code>DOMRectReadOnly</code></strong> représente la hauteur du <code>DOMRect</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var recHeight = DOMRect.height;</pre>
+
+<h3 id="Specification" name="Specification">Valeur</h3>
+
+<p>Un double.</p>
+
+<h2 id="Specification" name="Specification">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('Geometry Interfaces', '#dom-domrectreadonly-height', 'height')}}</td>
+   <td>{{Spec2('Geometry Interfaces')}}</td>
+   <td>La dernière version de la spécification est un ED.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>{{CompatNo}}<br>
+    <br>
+     </td>
+   <td>{{CompatVersionUnknown}}<br>
+     </td>
+   <td>{{ CompatNo }}</td>
+   <td>
+    <p>{{ CompatNo }}</p>
+   </td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("DOMRect")}}</li>
+</ul>
diff --git a/files/fr/web/api/domrectreadonly/index.html b/files/fr/web/api/domrectreadonly/index.html
new file mode 100644
index 0000000000..ca5100b338
--- /dev/null
+++ b/files/fr/web/api/domrectreadonly/index.html
@@ -0,0 +1,84 @@
+---
+title: DOMRectReadOnly
+slug: Web/API/DOMRectReadOnly
+tags:
+  - API
+  - DOM Reference
+  - DOMRectReadOnly
+  - Experimental
+  - Geometry
+  - Rectangle
+  - Reference
+  - TopicStub
+translation_of: Web/API/DOMRectReadOnly
+---
+<p>{{draft}}{{APIRef("Geometry Interfaces")}}{{ SeeCompatTable() }}</p>
+
+<p>L'interface <strong><code>DOMRectReadOnly</code></strong> spécifie les propriétés standard utilisées par {{domxref("DOMRect")}} pour définir un rectangle.</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("DOMRectReadOnly.DOMRectReadOnly","DOMRectReadOnly()")}}</dt>
+ <dd>Défini pour créer un nouvel objet <code>DOMRectReadOnly</code>, mais notez que ce constructeur ne peut pas être appelé par JavaScript tiers: cela renvoie une erreur de type "Constructeur illégal".</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+</dl>
+
+<dl>
+ <dt>{{domxref("DOMRectReadOnly.x")}} {{readonlyInline}}</dt>
+ <dd>La coordonnée x de l'origine du <code>DOMRect</code>.</dd>
+ <dt>{{domxref("DOMRectReadOnly.y")}} {{readonlyInline}}</dt>
+ <dd>La coordonnée y de l'origine du <code>DOMRect</code>.</dd>
+ <dt>{{domxref("DOMRectReadOnly.width")}} {{readonlyInline}}</dt>
+ <dd>La largeur du <code>DOMRect</code>.</dd>
+ <dt>{{domxref("DOMRectReadOnly.height")}} {{readonlyInline}}</dt>
+ <dd>La hauteur du <code>DOMRect</code>.</dd>
+ <dt>{{domxref("DOMRectReadOnly.top")}} {{readonlyInline}}</dt>
+ <dd>Renvoie la valeur de coordonnée supérieur du <code>DOMRect</code> (généralement la même que <code>y</code>).</dd>
+ <dt>{{domxref("DOMRectReadOnly.right")}} {{readonlyInline}}</dt>
+ <dd>Renvoie la valeur de coordonnée droite du <code>DOMRect</code> (généralement identique à <code>x + largeur</code>).</dd>
+ <dt>{{domxref("DOMRectReadOnly.bottom")}} {{readonlyInline}}</dt>
+ <dd>Renvoie la valeur de coordonnée inférieur du <code>DOMRect</code> (généralement la même que <code>y + hauteur</code>).</dd>
+ <dt>{{domxref("DOMRectReadOnly.left")}} {{readonlyInline}}</dt>
+ <dd>Renvoie la valeur de coordonnée gauche du <code>DOMRect</code> (généralement la même que <code>x</code>).</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("DOMRectReadOnly.fromRect()")}}</dt>
+ <dd>Crée un nouvel objet <code>DOMRect</code> avec un emplacement et des dimensions donnés.</dd>
+</dl>
+
+<h2 id="Specification" name="Specification">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('Geometry Interfaces', '#DOMRect', 'DOMRectReadOnly')}}</td>
+   <td>{{Spec2('Geometry Interfaces')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.DOMRectReadOnly")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("DOMPoint")}}</li>
+</ul>
diff --git a/files/fr/web/api/domrectreadonly/left/index.html b/files/fr/web/api/domrectreadonly/left/index.html
new file mode 100644
index 0000000000..f74b8ec46a
--- /dev/null
+++ b/files/fr/web/api/domrectreadonly/left/index.html
@@ -0,0 +1,105 @@
+---
+title: DOMRectReadOnly.left
+slug: Web/API/DOMRectReadOnly/left
+tags:
+  - API
+  - DOM
+  - Gauche
+  - Géométrie
+  - Propriétés
+  - Rectangle
+translation_of: Web/API/DOMRectReadOnly/left
+---
+<p>{{APIRef("DOM")}}{{ SeeCompatTable() }}</p>
+
+<p>La propriété en lecture seule <code><strong>left</strong></code> de l'interface <strong><code>DOMRectReadOnly</code></strong> renvoie la valeur de la coordonnée gauche du <code>DOMRect</code> (a la même valeur que <code>x</code>, ou <code>x + width</code><em> (x + largeur)</em> si <code>width</code> est négative).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var recLeft = DOMRect.left;</pre>
+
+<h3 id="Specification" name="Specification">Valeur</h3>
+
+<p>Un double.</p>
+
+<h2 id="Specification" name="Specification">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('Geometry Interfaces', '#dom-domrectreadonly-left', 'left')}}</td>
+   <td>{{Spec2('Geometry Interfaces')}}</td>
+   <td>La dernière version de la spécification est un ED.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>{{CompatNo}}<br>
+    <br>
+     </td>
+   <td>{{CompatVersionUnknown}}<br>
+     </td>
+   <td>{{ CompatNo }}</td>
+   <td>
+    <p>{{ CompatNo }}</p>
+   </td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("DOMRect")}}</li>
+</ul>
diff --git a/files/fr/web/api/domrectreadonly/right/index.html b/files/fr/web/api/domrectreadonly/right/index.html
new file mode 100644
index 0000000000..b7ca22e5a4
--- /dev/null
+++ b/files/fr/web/api/domrectreadonly/right/index.html
@@ -0,0 +1,105 @@
+---
+title: DOMRectReadOnly.right
+slug: Web/API/DOMRectReadOnly/right
+tags:
+  - API
+  - DOM
+  - Droite
+  - Géométrie
+  - Propriétés
+  - Rectangle
+translation_of: Web/API/DOMRectReadOnly/right
+---
+<p>{{APIRef("DOM")}}{{ SeeCompatTable() }}</p>
+
+<p>La propriété en lecture seule <code><strong>right</strong></code> de l'interface <strong><code>DOMRectReadOnly</code></strong> renvoie la valeur de la coordonnée droite du <code>DOMRect.</code> (a la même valeur que <code>x + width</code> <em>(x + largeur)</em>, ou <code>x</code> si <code>width</code> est négative).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var recRight = DOMRect.right;</pre>
+
+<h3 id="Specification" name="Specification">Valeur</h3>
+
+<p>Un double.</p>
+
+<h2 id="Specification" name="Specification">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('Geometry Interfaces', '#dom-domrectreadonly-right', 'right')}}</td>
+   <td>{{Spec2('Geometry Interfaces')}}</td>
+   <td>La dernière version de la spécification est un ED.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>{{CompatNo}}<br>
+    <br>
+     </td>
+   <td>{{CompatVersionUnknown}}<br>
+     </td>
+   <td>{{ CompatNo }}</td>
+   <td>
+    <p>{{ CompatNo }}</p>
+   </td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("DOMRect")}}</li>
+</ul>
diff --git a/files/fr/web/api/domrectreadonly/top/index.html b/files/fr/web/api/domrectreadonly/top/index.html
new file mode 100644
index 0000000000..d34297d82c
--- /dev/null
+++ b/files/fr/web/api/domrectreadonly/top/index.html
@@ -0,0 +1,105 @@
+---
+title: DOMRectReadOnly.top
+slug: Web/API/DOMRectReadOnly/top
+tags:
+  - API
+  - DOM
+  - Géométrie
+  - Haut
+  - Propriétés
+  - Rectangle
+translation_of: Web/API/DOMRectReadOnly/top
+---
+<p>{{APIRef("DOM")}}{{ SeeCompatTable() }}</p>
+
+<p>La propriété en lecture seule <code><strong>top</strong></code> de l'interface <strong><code>DOMRectReadOnly</code></strong> renvoie la valeur de la coordonnée haute du <code>DOMRect.</code> (A la même valeur que <code>y</code>, ou <code>y + height</code> <em>(y + hauteur)</em> si <code>height</code> est négative.)</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var recTop = DOMRect.top;</pre>
+
+<h3 id="Specification" name="Specification">Valeur</h3>
+
+<p>Un double.</p>
+
+<h2 id="Specification" name="Specification">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('Geometry Interfaces', '#dom-domrectreadonly-top', 'top')}}</td>
+   <td>{{Spec2('Geometry Interfaces')}}</td>
+   <td>La dernière version de la spécification est un ED.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>{{CompatNo}}<br>
+    <br>
+     </td>
+   <td>{{CompatVersionUnknown}}<br>
+     </td>
+   <td>{{ CompatNo }}</td>
+   <td>
+    <p>{{ CompatNo }}</p>
+   </td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("DOMRect")}}</li>
+</ul>
diff --git a/files/fr/web/api/domrectreadonly/width/index.html b/files/fr/web/api/domrectreadonly/width/index.html
new file mode 100644
index 0000000000..9443cf03cf
--- /dev/null
+++ b/files/fr/web/api/domrectreadonly/width/index.html
@@ -0,0 +1,105 @@
+---
+title: DOMRectReadOnly.width
+slug: Web/API/DOMRectReadOnly/width
+tags:
+  - API
+  - DOM
+  - Géométrie
+  - Largeur
+  - Propriétés
+  - Rectangle
+translation_of: Web/API/DOMRectReadOnly/width
+---
+<p>{{APIRef("DOM")}}{{ SeeCompatTable() }}</p>
+
+<p>La propriété en lecture seule <code><strong>width</strong></code> de l'interface <strong><code>DOMRectReadOnly</code></strong> représente la largeur du <code>DOMRect</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var recWidth = DOMRect.width;</pre>
+
+<h3 id="Specification" name="Specification">Valeur</h3>
+
+<p>Un double.</p>
+
+<h2 id="Specification" name="Specification">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>{{SpecName('Geometry Interfaces', '#dom-domrectreadonly-width', 'width')}}</td>
+   <td>{{Spec2('Geometry Interfaces')}}</td>
+   <td>La dernière version de la spécification est un ED.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>{{CompatNo}}<br>
+    <br>
+     </td>
+   <td>{{CompatVersionUnknown}}<br>
+     </td>
+   <td>{{ CompatNo }}</td>
+   <td>
+    <p>{{ CompatNo }}</p>
+   </td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("DOMRect")}}</li>
+</ul>
diff --git a/files/fr/web/api/domrectreadonly/x/index.html b/files/fr/web/api/domrectreadonly/x/index.html
new file mode 100644
index 0000000000..b802488dc6
--- /dev/null
+++ b/files/fr/web/api/domrectreadonly/x/index.html
@@ -0,0 +1,106 @@
+---
+title: DOMRectReadOnly.x
+slug: Web/API/DOMRectReadOnly/x
+tags:
+  - API
+  - Coordonnées
+  - DOM
+  - Géométrie
+  - Propriétés
+  - Rectangle
+  - x
+translation_of: Web/API/DOMRectReadOnly/x
+---
+<p>{{APIRef("DOM")}}{{ SeeCompatTable() }}</p>
+
+<p>La propriété en lecture seule <code><strong>x</strong></code> de l'interface <strong><code>DOMRectReadOnly</code></strong> représente la coordonnée x d' l'origine du <code>DOMRect</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var recX = DOMRect.x;</pre>
+
+<h3 id="Specification" name="Specification">Valeur</h3>
+
+<p>Un double.</p>
+
+<h2 id="Specification" name="Specification">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('Geometry Interfaces', '#dom-domrectreadonly-x', 'x')}}</td>
+   <td>{{Spec2('Geometry Interfaces')}}</td>
+   <td>La dernière version de la spécification est un ED.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>{{CompatNo}}<br>
+    <br>
+     </td>
+   <td>{{CompatVersionUnknown}}<br>
+     </td>
+   <td>{{ CompatNo }}</td>
+   <td>
+    <p>{{ CompatNo }}</p>
+   </td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("DOMRect")}}</li>
+</ul>
diff --git a/files/fr/web/api/domrectreadonly/y/index.html b/files/fr/web/api/domrectreadonly/y/index.html
new file mode 100644
index 0000000000..9aa00ecaf3
--- /dev/null
+++ b/files/fr/web/api/domrectreadonly/y/index.html
@@ -0,0 +1,106 @@
+---
+title: DOMRectReadOnly.y
+slug: Web/API/DOMRectReadOnly/y
+tags:
+  - API
+  - Coordonnées
+  - DOM
+  - Géométrie
+  - Propriétés
+  - Rectangle
+  - 'y'
+translation_of: Web/API/DOMRectReadOnly/y
+---
+<p>{{APIRef("DOM")}}{{ SeeCompatTable() }}</p>
+
+<p>La propriété en lecture seule <code><strong>y</strong></code> de l'interface <strong><code>DOMRectReadOnly</code></strong> représente la coordonnée y de l'origine du <code>DOMRect</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var recY = DOMRect.y;</pre>
+
+<h3 id="Specification" name="Specification">Valeur</h3>
+
+<p>Un double.</p>
+
+<h2 id="Specification" name="Specification">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('Geometry Interfaces', '#dom-domrectreadonly-y', 'y')}}</td>
+   <td>{{Spec2('Geometry Interfaces')}}</td>
+   <td>La dernière version de la spécification est un ED.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>{{CompatNo}}<br>
+    <br>
+     </td>
+   <td>{{CompatVersionUnknown}}<br>
+     </td>
+   <td>{{ CompatNo }}</td>
+   <td>
+    <p>{{ CompatNo }}</p>
+   </td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("DOMRect")}}</li>
+</ul>
diff --git a/files/fr/web/api/domstring/binary/index.html b/files/fr/web/api/domstring/binary/index.html
new file mode 100644
index 0000000000..ecd56243e3
--- /dev/null
+++ b/files/fr/web/api/domstring/binary/index.html
@@ -0,0 +1,31 @@
+---
+title: Chaîne de caractères binaire
+slug: Web/API/DOMString/Binary
+tags:
+  - Chaînes de caractères
+  - JavaScript
+  - binaire
+  - données
+translation_of: Web/API/DOMString/Binary
+---
+<h2 id="Résumé">Résumé</h2>
+
+<div class="summary">
+<p>En termes simples, une chaîne de caractères binaire est une séquence de 1 et de 0. JavaScript est chargé de riches fonctionnalités pour manipuler des données binaires brutes au niveau inférieur. </p>
+</div>
+
+<p>Au fur et à mesure que les applications Web deviennent de plus en plus puissantes, ajoutant des fonctionnalités telles que la manipulation d'audio et de vidéo, l'accès aux données brutes à l'aide de WebSockets, etc., il apparaît clairement parfois que le code JavaScript peut être utile pour manipuler rapidement et facilement des données binaires brutes. Dans le passé, cela devait être simulé en traitant les données brutes <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/String" title="JavaScript/Reference/Global Objects/String">string</a> (<em>chaîne de caractères</em>) et en utilisant la méthode <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/charCodeAt" title="JavaScript/Reference/Global Objects/String/charCodeAt"><code>charCodeAt()</code></a> pour lire les octets à partir des tampons de données.</p>
+
+<p>Cependant, ceci est lent et sujet aux erreurs, en raison du besoin de conversions multiples (en particulier si les données binaires ne sont pas réellement des données au format octet, mais, par exemple, des entiers ou des flottants de 32 bits).</p>
+
+<p><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Tableaux_typ%C3%A9s" title="/en-US/docs/Web/JavaScript/Typed_arrays">Un tableau typé en JavaScript</a> fournit un mécanisme pour accèder aux données brutes binaires beaucoup plus efficacement. Le constructeur <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Tableaux_typ%C3%A9s" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code></a> <span class="inlineIndicator" title="This API is not native.">Non native</span> est un niveau au-dessus des tableaux typés et fournit une interface de type <a class="external" href="https://fr.wikipedia.org/wiki/C_(langage)">C</a> pour les chaînes de caractères.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Tableaux_typ%C3%A9s" title="/en-US/docs/Web/JavaScript/Typed_arrays">Les tableaux typés en JavaScript</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_binaires">Opérateurs binaires </a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/DOMString" title="/en-US/docs/Web/API/DOMString/Binary"><code>DOMString</code></a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/String" title="/en-US/docs/Web/API/DOMString">String</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Archive/Add-ons/Code_snippets/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/String_view"><code>StringView</code></a></li>
+</ul>
diff --git a/files/fr/web/api/domstring/index.html b/files/fr/web/api/domstring/index.html
new file mode 100644
index 0000000000..260cfe1187
--- /dev/null
+++ b/files/fr/web/api/domstring/index.html
@@ -0,0 +1,53 @@
+---
+title: DOMString
+slug: Web/API/DOMString
+tags:
+  - API
+  - Chaîne de caractères
+  - DOM
+  - Reference
+translation_of: Web/API/DOMString
+---
+<p>Une chaîne de caractères UTF-16. Comme JavaScript utilise déjà ce type de chaîne de caractères, <code>DOMString</code> est directement associé à <code><a href="/en/JavaScript/Reference/Global_Objects/String" title="En/JavaScript/Reference/Global_Objects/String">String</a></code>.</p>
+
+<h2 id="Specification" name="Specification">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('WebIDL', '#idl-DOMString', 'DOMString')}}</td>
+   <td>{{Spec2('WebIDL')}}</td>
+   <td>Reformulation de la définition pour éviter quelques cas particuliers bizarres.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#DOMString', 'DOMString')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Aucun changement par rapport à {{SpecName('DOM2 Core')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-C74D1578', 'DOMString')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Aucun changement par rapport à {{SpecName('DOM1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-C74D1578', 'DOMString')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Première définition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/String" title="/en-US/docs/Web/API/DOMString">String</a></li>
+ <li>{{domxref("USVString")}}</li>
+ <li>{{domxref("CSSOMString")}}</li>
+ <li><a href="https://developer.mozilla.org/fr/Add-ons/Code_snippets/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/String_view"><code>StringView</code> – a C-like representation of strings based on typed arrays</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/DOMString/Binary">Binary strings</a></li>
+</ul>
diff --git a/files/fr/web/api/domstringlist/index.html b/files/fr/web/api/domstringlist/index.html
new file mode 100644
index 0000000000..b0d89b14e6
--- /dev/null
+++ b/files/fr/web/api/domstringlist/index.html
@@ -0,0 +1,48 @@
+---
+title: DOMStringList
+slug: Web/API/DOMStringList
+tags:
+  - API
+  - Chaînes de caractères
+  - DOM
+  - Types
+translation_of: Web/API/DOMStringList
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>Un type renvoyé par certaines API contenant une liste de <a class="internal" href="https://developer.mozilla.org/fr/docs/Web/API/DOMString" title="En/DOM/DOMString">DOMString</a> (<em>chaînes de caractères</em>).</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("DOMStringList.length")}} {{ReadOnlyInline}}</dt>
+ <dd>Renvoie la longueur de la liste.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("DOMStringList.item()")}}</dt>
+ <dd>Renvoie une {{domxref("DOMString")}} (<em>chaîne de caractères</em>).</dd>
+ <dt>{{domxref("DOMStringList.contains()")}}</dt>
+ <dd>Renvoie un {{jsxref("Boolean")}} (<em>booléen</em>) indiquant si la chaîne de caractères donnée est dans la liste.</dd>
+</dl>
+
+<h2 id="Specifications" name="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("HTML WHATWG", "common-dom-interfaces.html#the-domstringlist-interface", "DOMStringList")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Définition  initiale.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/api/domtimestamp/index.html b/files/fr/web/api/domtimestamp/index.html
new file mode 100644
index 0000000000..e70c4be3c3
--- /dev/null
+++ b/files/fr/web/api/domtimestamp/index.html
@@ -0,0 +1,80 @@
+---
+title: DOMTimeStamp
+slug: Web/API/DOMTimeStamp
+tags:
+  - API
+  - DOM
+  - Référence DOM
+translation_of: Web/API/DOMTimeStamp
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>Le type <code>DOMTimeStamp</code> représente une quantité de millisecondes, exprimées de manière absolue ou relative, <span id="result_box" lang="fr"><span>en fonction de la spécification dans laquelle il apparaît.</span></span></p>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<ul>
+</ul>
+
+<article class="approved text-content">
+<div class="boxed translate-rendered">
+<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("WebIDL", "#common-DOMTimeStamp", "DOMTimeStamp")}}</td>
+   <td>{{Spec2("WebIDL")}}</td>
+   <td>Initial specification</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+</article>
+
+<article class="localized">
+<header>
+<h3 id="Traduction_en_Français">Traduction en Français :</h3>
+</header>
+
+<div class="guide-links"><a href="https://developer.mozilla.org/fr/docs/MDN/Community">Besoin d'aide ?</a> • <a href="https://developer.mozilla.org/fr/docs/MDN/Contribute/Editor">Guide d'édition</a> • <a href="https://developer.mozilla.org/fr/docs/MDN/Contribute/Content/Style_guide">Guide stylistique</a></div>
+
+<div class="editor-wrapper" id="editor-wrapper">
+<div class="draft-container">
+<div class="draft-old"> </div>
+
+<div class="draft-status"><span id="draft-action">Brouillon enregistré automatiquement : <time class="time-ago" id="draft-time" title="2017-11-03T21:47:27.138Z">03/11/2017 22:47:27</time></span></div>
+</div>
+
+<div class="ckeditor-container editor-container dirty">
+<div class="editor">
+<div class="editor-tools"> </div>
+
+<div style="height: 173px;">
+<div style="border: 1px solid rgb(182, 182, 182); width: 786px;"> </div>
+</div>
+</div>
+</div>
+</div>
+</article>
+
+<div id="content-fields">
+<article class="localized">
+<div class="editor-wrapper" id="editor-wrapper">
+<div class="ckeditor-container editor-container dirty">
+<div class="editor">
+<div class="cke" dir="ltr" id="cke_id_content" lang="fr">
+<div>
+<div id="cke_1_contents" style="height: 260.5px;"> </div>
+</div>
+</div>
+</div>
+</div>
+</div>
+</article>
+</div>
diff --git a/files/fr/web/api/domtokenlist/add/index.html b/files/fr/web/api/domtokenlist/add/index.html
new file mode 100644
index 0000000000..472030ca72
--- /dev/null
+++ b/files/fr/web/api/domtokenlist/add/index.html
@@ -0,0 +1,79 @@
+---
+title: DOMTokenList.add()
+slug: Web/API/DOMTokenList/add
+tags:
+  - API
+  - Ajout
+  - Chaînes de caractères
+  - DOM
+  - Listes
+  - Méthodes
+translation_of: Web/API/DOMTokenList/add
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La méthode <code><strong>add()</strong></code> de l'interface {{domxref("DOMTokenList")}} ajoute  le <em>token</em> (<em>marque</em>) à la liste.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">tokenList.add(token1[, token2[, ...]]);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>token</dt>
+ <dd>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant la marque (<em>token</em>) que vous souhaitez ajouter à la liste.</dd>
+</dl>
+
+<h3 id="Valeur_renvoyée">Valeur renvoyée</h3>
+
+<p>Vide.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, nous récupérons une liste des classes définies sur un élément {{htmlelement("span")}} en tant que <code>DOMTokenList</code>, en utilisant {{domxref("Element.classList")}}. Nous ajoutons alors une nouvelle marque à la  liste et écrivons la liste dans un  {{domxref("Node.textContent")}} du <code>&lt;span&gt;</code>.</p>
+
+<p>Tout d'abord, le code HTML :</p>
+
+<pre class="brush: html">&lt;span class="a b c"&gt;&lt;/span&gt;</pre>
+
+<p>Maintenant, le JavaScript :</p>
+
+<pre class="brush: js">var span = document.querySelector("span");
+var classes = span.classList;
+classes.add("d");
+span.textContent = classes;
+</pre>
+
+<p>La sortie ressemble à ceci :</p>
+
+<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p>
+
+<p>Vous pouvez ajouter plusieurs <em>token</em> :</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">span<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">add</span><span class="punctuation token">(</span><span class="string token">"d"</span><span class="punctuation token">,</span> <span class="string token">"e"</span><span class="punctuation token">,</span> <span class="string token">"f"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#dom-domtokenlist-add','add()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{Compat("api.DOMTokenList.add")}}</div>
+
+<div id="compat-desktop"> </div>
+
+<div id="compat-mobile"> </div>
diff --git a/files/fr/web/api/domtokenlist/contains/index.html b/files/fr/web/api/domtokenlist/contains/index.html
new file mode 100644
index 0000000000..282e4743b2
--- /dev/null
+++ b/files/fr/web/api/domtokenlist/contains/index.html
@@ -0,0 +1,78 @@
+---
+title: DOMTokenList.contains()
+slug: Web/API/DOMTokenList/contains
+tags:
+  - API
+  - Chaînes de caractères
+  - DOM
+  - Listes
+  - Méthodes
+  - Recherche contenu
+translation_of: Web/API/DOMTokenList/contains
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La méthode <code><strong>contains()</strong></code> de l'interface {{domxref("DOMTokenList")}} renvoie un {{domxref("Boolean")}} (<em>booléen</em>) — <code>true</code> (<em>vrai</em>) si la liste sous-jacente contient le symbole donné, sinon <code>false</code> (<em>faux</em>).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">tokenList.contains(token);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>token</dt>
+ <dd>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant la "token" (<em>marque</em>) dont vous voulez vérifier l'existence dans la liste.</dd>
+</dl>
+
+<h3 id="Valeur_renvoyée">Valeur renvoyée</h3>
+
+<p>Un {{domxref("Boolean")}} (<em>booléen</em>)— <code>true</code> (<em>vrai</em>) si la liste sous-jacente contient la marque donnée, sinon <code>false</code> (<em>faux</em>).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, nous récupérons la liste des classes définies sur un élément {{htmlelement("span")}} en tant que <code>DOMTokenList</code> en utilisant {{domxref("Element.classList")}}. Nous testons ensuite l'existence de "c" dans la liste, et écrivons le résultat dans le {{domxref("Node.textContent")}} du <code>&lt;span&gt;</code>.</p>
+
+<p>Tout d'abord, le code HTML :</p>
+
+<pre class="brush: html">&lt;span class="a b c"&gt;&lt;/span&gt;</pre>
+
+<p>Maintenant, le JavaScript :</p>
+
+<pre class="brush: js">var span = document.querySelector("span");
+var classes = span.classList;
+var result = classes.contains("c");
+if(result) {
+  span.textContent = "The classList contains 'c'";
+} else {
+   span.textContent = "The classList does not contain 'c'";
+}</pre>
+
+<p>La sortie ressemble à ceci :</p>
+
+<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</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('DOM WHATWG','#dom-domtokenlist-contains','contains()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{Compat("api.DOMTokenList.contains")}}</div>
+
+<div id="compat-desktop"> </div>
+
+<p> </p>
diff --git a/files/fr/web/api/domtokenlist/entries/index.html b/files/fr/web/api/domtokenlist/entries/index.html
new file mode 100644
index 0000000000..8e8527b904
--- /dev/null
+++ b/files/fr/web/api/domtokenlist/entries/index.html
@@ -0,0 +1,72 @@
+---
+title: DOMTokenList.entries()
+slug: Web/API/DOMTokenList/entries
+tags:
+  - API
+  - Chaînes de caractères
+  - DOM
+  - Itérateurs
+  - Listes
+  - Méthodes
+translation_of: Web/API/DOMTokenList/entries
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La méthode <code><strong>DOMTokenList.entries()</strong></code> renvoie un {{jsxref("Les_protocoles_iteration",'itérateur')}} permettant de parcourir toutes les paires clé / valeur contenues dans cet objet. Les valeurs sont des objets {{domxref("DOMString")}} (<em>chaînes de caractères</em>), chacun représentant une seule marque.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">tokenList.entries();</pre>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, nous récupérons la liste des classes définies sur un élément {{htmlelement("span")}} en tant que <code>DOMTokenList</code> en utilisant {{domxref("Element.classList")}}. Nous récupérons un itérateur contenant les paires clé / valeur en utilisant <code>entries()</code>, puis parcourons chacune d'entre elles en utilisant une boucle <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/for...of">for ... of</a> , et les écrivons dans un  {{domxref("Node.textContent")}}  du <code>&lt;span&gt;</code>.</p>
+
+<p>D'abord le HTML :</p>
+
+<pre class="brush: html">&lt;span class="a b c"&gt;&lt;/span&gt;</pre>
+
+<p>Maintenant le JavaScript :</p>
+
+<pre class="brush: js">var span = document.querySelector("span");
+var classes = span.classList;
+var iterator = classes.entries();
+
+for(var value of iterator) {
+  span.textContent += value + ' ++ ';
+}</pre>
+
+<p>La sortie ressemble à ceci :</p>
+
+<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</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('DOM WHATWG','#interface-domtokenlist','entries() (as iterable&lt;Node&gt;)')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{Compat("api.DOMTokenList.entries")}}</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("DOMSettableTokenList")}} (objet qui étend DOMTokenList avec la propriété définissable<em> .value</em>)</li>
+</ul>
diff --git a/files/fr/web/api/domtokenlist/foreach/index.html b/files/fr/web/api/domtokenlist/foreach/index.html
new file mode 100644
index 0000000000..a472bdc26d
--- /dev/null
+++ b/files/fr/web/api/domtokenlist/foreach/index.html
@@ -0,0 +1,98 @@
+---
+title: DOMTokenList.forEach()
+slug: Web/API/DOMTokenList/forEach
+tags:
+  - API
+  - Boucle
+  - Chaînes de caractères
+  - DOM
+  - Itérateurs
+  - Méthodes
+  - Pour chaque
+translation_of: Web/API/DOMTokenList/forEach
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La méthode <strong><code>forEach()</code></strong> de l'interface {{domxref("DOMTokenList")}} appelle le retour donné en paramètre, un pour chaque paire de valeurs dans la liste, dans l'ordre d'insertion.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>tokenList</var><em>.</em>forEach(<var>callback</var>);
+<em>tokenList.</em>forEach<em>(callback, argument);</em>
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Fonction à exécuter pour chaque élément, prenant éventuellement 3 arguments :
+ <dl>
+  <dt><em><code>currentValue</code></em></dt>
+  <dd>L'élément en cours de traitement dans le tableau.</dd>
+  <dt><code><em>currentIndex</em></code></dt>
+  <dd>L'index de l'élément en cours de traitement dans le tableau.</dd>
+  <dt><em><code>listObj</code></em></dt>
+  <dd>Le tableau que <code>forEach()</code> est en train d'appliquer.</dd>
+ </dl>
+ </dd>
+ <dt><em><code>argument</code></em><code> {{Optional_inline}}</code></dt>
+ <dd>Valeur à utiliser comme {{jsxref("this")}} lors de l'exécution du <code>callback</code> (<em>rappel</em>).</dd>
+</dl>
+
+<h3 id="Valeur_renvoyée">Valeur renvoyée</h3>
+
+<p>{{jsxref('undefined')}} (<em>indéfinie</em>).</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément {{htmlelement("span")}} en tant que <code>DOMTokenList</code> en utilisant {{domxref("Element.classList")}}. Nous récupérons un itérateur contenant les valeurs avec <code>forEach()</code> et écrivons chacune d'elles dans le  {{domxref("Node.textContent")}} du <code>&lt;span&gt;</code> pendant l'exécution de la fonction interne <code>forEach()</code>.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;span class="a b c"&gt;&lt;/span&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var span = document.querySelector("span");
+var classes = span.classList;
+var iterator = classes.values();
+
+classes.forEach(
+  function(value, key, listObj) {
+    span.textContent += value + ' ' + key + "/" + this + '  ++  ';
+  },
+  "arg"
+);</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{ EmbedLiveSample('Example', '100%', 60) }}</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('DOM WHATWG','#interface-domtokenlist','forEach() (as iterable&lt;Node&gt;)')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{Compat("api.DOMTokenList.forEach")}}</div>
+
+<div id="compat-desktop"> </div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("DOMSettableTokenList")}} (objet qui étend DOMTokenList avec la propriété définissable <em>.value</em>)</li>
+</ul>
diff --git a/files/fr/web/api/domtokenlist/index.html b/files/fr/web/api/domtokenlist/index.html
new file mode 100644
index 0000000000..0784f5b071
--- /dev/null
+++ b/files/fr/web/api/domtokenlist/index.html
@@ -0,0 +1,117 @@
+---
+title: DOMTokenList
+slug: Web/API/DOMTokenList
+tags:
+  - API
+  - Chaînes de caractères
+  - DOM
+  - Interface
+  - Listes
+  - Marques
+translation_of: Web/API/DOMTokenList
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>L'interface <code><strong>DOMTokenList</strong></code> représente un ensemble de "token" (<em>marques</em>) séparées par un espace. On obtient un tel ensemble grâce aux propriétés {{domxref("Element.classList")}}, {{domxref("HTMLLinkElement.relList")}}, {{domxref("HTMLAnchorElement.relList")}} ou {{domxref("HTMLAreaElement.relList")}}. Les positions de cette liste sont numérotées à partir de 0.<code> DOMTokenList</code> est toujours sensible à la casse.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("DOMTokenList.length")}} {{ReadOnlyInline}}</dt>
+ <dd>Un entier qui représente le nombre d'objets qui sont stockés dans l'objet.</dd>
+ <dt>{{domxref("DOMTokenList.value")}} {{ReadOnlyInline}}</dt>
+ <dd>retourne la valeur de la liste comme une {{domxref("DOMString")}}  <em>(chaîne de caractères).</em></dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("DOMTokenList.item()")}}</dt>
+ <dd>renvoie un élément de la liste à partir de son index (ou {{jsxref("undefined")}} lorsque le nombre passé est supérieur ou égal à la longueur de la liste).</dd>
+ <dt>{{domxref("DOMTokenList.contains()")}}</dt>
+ <dd>renvoie <code>true</code> <em>(vrai)</em> si la chaîne de caractères contient la marque <em>(token)</em> passée en argument, <code>false</code> <em>(faux)</em> sinon.</dd>
+ <dt>{{domxref("DOMTokenList.add()")}}</dt>
+ <dd>ajoute une marque à la chaîne sous-jacente.</dd>
+ <dt>{{domxref("DOMTokenList.remove()")}}</dt>
+ <dd>retire une marque de la chaîne sous-jacente.</dd>
+ <dt>{{domxref("DOMTokenList.replace()")}}</dt>
+ <dd>remplace une marque existant par une nouvelle.</dd>
+ <dt>{{domxref("DOMTokenList.supports()")}}</dt>
+ <dd>renvoie <code>true</code> <em>(vrai)</em> si une marque passée en argument appartient bien aux marques prises en charge pour l'attribut correspondant.</dd>
+ <dt>{{domxref("DOMTokenList.toggle()")}}</dt>
+ <dd>retire une marque de la chaîne de caractères sous-jacente et renvoie <code>false</code>. Si la marque n'existe pas, elle est ajoutée et la méthode renvoie <code>true</code>.</dd>
+ <dt>{{domxref("DOMTokenList.entries()")}}</dt>
+ <dd>renvoie un {{jsxref("Iteration_protocols","itérateur","",1)}} qui permet de parcourir l'ensemble des clés/valeurs contenues dans cet objet.</dd>
+ <dt>{{domxref("DOMTokenList.forEach()")}}</dt>
+ <dd>exécute une fonction pour chaque élément de la <code>DOMTokenList</code>.</dd>
+ <dt>{{domxref("DOMTokenList.keys()")}}</dt>
+ <dd>renvoie un {{jsxref("Iteration_protocols", "itérateur","",1)}} qui permet de parcourir l'ensemble des clés contenues dans cet objet.</dd>
+ <dt>{{domxref("DOMTokenList.values()")}}</dt>
+ <dd>renvoie un {{jsxref("Iteration_protocols", "itérateur","",1)}} qui permet de parcourir l'ensemble des valeurs contenues dans cet objet.</dd>
+ <dt>
+ <h2 id="Exemples">Exemples</h2>
+ </dt>
+</dl>
+
+<p>Dans l'exemple suivant, nous récupérons la liste d'un ensemble de classes définies sur un élément {{htmlelement("p")}} en tant que <code>DOMTokenList</code> en<code> </code>utilisant  {{domxref("Element.classList")}}, ajoutons une classe en utilisant  {{domxref("DOMTokenList.add()")}}, puis mettons à jour le {{domxref("Node.textContent")}} du <code>&lt;p&gt;</code> pour qu'il soit égal à la  <code>DOMTokenList</code>.</p>
+
+<p>D'abord HTML :</p>
+
+<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="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>a b c<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p>Puis Javascript :</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> para <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">"p"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> classes <span class="operator token">=</span> para<span class="punctuation token">.</span>classList<span class="punctuation token">;</span>
+para<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">add</span><span class="punctuation token">(</span><span class="string token">"d"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+para<span class="punctuation token">.</span>textContent <span class="operator token">=</span> <span class="string token">'paragraph classList is "'</span> <span class="operator token">+</span> classes <span class="operator token">+</span> <span class="string token">'"'</span><span class="punctuation token">;</span></code></pre>
+
+<p>La sortie ressemble à ceci :</p>
+
+<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p>
+
+<h2 id="Découpage_des_espaces_et_suppression_des_doublons">Découpage des espaces et suppression des doublons</h2>
+
+<p>Les méthodes qui modifient la <code>DOMTokenList</code> (comme {{domxref("DOMTokenList.add()")}}) <span id="result_box" lang="fr"><span>suppriment automatiquement les espaces en excès et les valeurs en double de la liste.</span> <span>Par exemple :</span></span></p>
+
+<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>span</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>    d   d e f<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>span</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> span <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">"span"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> classes <span class="operator token">=</span> span<span class="punctuation token">.</span>classList<span class="punctuation token">;</span>
+span<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">add</span><span class="punctuation token">(</span><span class="string token">"x"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+span<span class="punctuation token">.</span>textContent <span class="operator token">=</span> <span class="string token">'span classList is "'</span> <span class="operator token">+</span> classes <span class="operator token">+</span> <span class="string token">'"'</span><span class="punctuation token">;</span></code></pre>
+
+<p>La sortie ressemble à ceci :</p>
+
+<p>{{ EmbedLiveSample('Trimming_of_whitespace_and_removal_of_duplicates', '100%', 60) }}</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">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#interface-domtokenlist", "DOMTokenList")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{Compat("api.DOMTokenList")}}</div>
+
+<div id="compat-mobile">
+<h2 id="Voir_aussi">Voir aussi</h2>
+</div>
+
+<ul>
+ <li>{{domxref("DOMSettableTokenList")}} : un objet qui étend <code>DOMTokenList</code> avec une propriété <em>.value</em> modifiable</li>
+</ul>
diff --git a/files/fr/web/api/domtokenlist/item/index.html b/files/fr/web/api/domtokenlist/item/index.html
new file mode 100644
index 0000000000..1591d5c9fc
--- /dev/null
+++ b/files/fr/web/api/domtokenlist/item/index.html
@@ -0,0 +1,73 @@
+---
+title: DOMTokenList.item()
+slug: Web/API/DOMTokenList/item
+tags:
+  - API
+  - Chaînes de caractères
+  - DOM
+  - Listes
+  - Méthodes
+translation_of: Web/API/DOMTokenList/item
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La méthode <code><strong>item()</strong></code> de l'interface {{domxref("DOMTokenList")}} renvoie un élément de la liste par son index.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">tokenList.item(index);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>index</dt>
+ <dd>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant l'index de l'élément dont on veut le retour.</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant l'élément renvoyé. Le retour est <code>undefined</code> (<em>indéfini</em>) si le nombre est plus grand que ou égal à la longueur de la liste.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément {{htmlelement("span")}} en tant que <code>DOMTokenList</code> en utilisant {{domxref("Element.classList")}}. Nous récupérons le dernier élément dans la liste en utilisant <em>item(length-1)</em> et l'écrivons dans le {{domxref("Node.textContent")}} du <code>&lt;span&gt;</code>.</p>
+
+<p>D'abord le code HTML :</p>
+
+<pre class="brush: html">&lt;span class="a b c"&gt;&lt;/span&gt;</pre>
+
+<p>Maintenant le JavaScript :</p>
+
+<pre class="brush: js">var span = document.querySelector("span");
+var classes = span.classList;
+var item = classes.item(classes.length-1);
+span.textContent = item;</pre>
+
+<p>La sortie ressemble à ceci :</p>
+
+<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</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('DOM WHATWG','#dom-domtokenlist-item','item()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{Compat("api.DOMTokenList.item")}}</div>
+
+<div id="compat-desktop"> </div>
+
+<p> </p>
diff --git a/files/fr/web/api/domtokenlist/keys/index.html b/files/fr/web/api/domtokenlist/keys/index.html
new file mode 100644
index 0000000000..85855c60c6
--- /dev/null
+++ b/files/fr/web/api/domtokenlist/keys/index.html
@@ -0,0 +1,76 @@
+---
+title: DOMTokenList.keys()
+slug: Web/API/DOMTokenList/keys
+tags:
+  - API
+  - Boucle
+  - Clés
+  - DOM
+  - Itérateur
+  - Listes
+  - Méthodes
+  - for of
+translation_of: Web/API/DOMTokenList/keys
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La méthode <code><strong>keys()</strong></code> de l'interface {{domxref("DOMTokenList")}} renvoie un {{jsxref("Les_protocoles_iteration",'itérateur')}} permettant de parcourir toutes les clés contenues dans cet objet. Les clés sont de type <code>unsigned integer</code> <em>(entier non signé)</em>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">tokenList.keys();</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Aucun.</p>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément {{htmlelement("span")}} en tant que <code>DOMTokenList</code> en utilisant {{domxref("Element.classList")}}. Ensuite nous récupérons un itérateur contenant les clés en utilisant <code>values()</code>, alors, nous itérons ces clés avec une boucle <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for ... of</a> et écrivons chacune dans le {{domxref("Node.textContent")}} du <code>&lt;span&gt;</code>.</p>
+
+<p>D'abord, le HTML :</p>
+
+<pre class="brush: html">&lt;span class="a b c"&gt;&lt;/span&gt;</pre>
+
+<p>Maintenant le JavaScript:</p>
+
+<pre class="brush: js">var span = document.querySelector("span");
+var classes = span.classList;
+var iterator = classes.keys();
+
+for(var value of iterator) {
+  span.textContent += value + ' ++ ';
+}</pre>
+
+<p>La sortie ressemble à ceci :</p>
+
+<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</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('DOM WHATWG','#interface-domtokenList','keys() (as iterable&lt;Node&gt;)')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{Compat("api.DOMTokenList.keys")}}</div>
+
+<div id="compat-desktop"> </div>
+
+<div id="compat-mobile"> </div>
diff --git a/files/fr/web/api/domtokenlist/length/index.html b/files/fr/web/api/domtokenlist/length/index.html
new file mode 100644
index 0000000000..020d7bd7f6
--- /dev/null
+++ b/files/fr/web/api/domtokenlist/length/index.html
@@ -0,0 +1,68 @@
+---
+title: DOMTokenList.length
+slug: Web/API/DOMTokenList/length
+tags:
+  - API
+  - DOM
+  - Listes
+  - Longueur
+  - Propriétés
+translation_of: Web/API/DOMTokenList/length
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La propriété en lecture seule <code><strong>length</strong></code> (<em>longueur</em>) de l'interface {{domxref("DOMTokenList")}} est un <code>integer</code> (<em>entier</em>) représentant le nombre d'objets stockés dans la liste.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">tokenList.length;</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>Un <code>integer</code> (<em>entier</em>).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément {{htmlelement("span")}} en tant que <code>DOMTokenList</code> en utilisant {{domxref("Element.classList")}}, puis écrivons la longueur (<em>length</em>) de la liste dans le {{domxref("Node.textContent")}} du <code>&lt;span&gt;</code>.</p>
+
+<p>D'abord le HTML:</p>
+
+<pre class="brush: html">&lt;span class="a b c"&gt;&lt;/span&gt;</pre>
+
+<p>Maintenant le JavaScript:</p>
+
+<pre class="brush: js">var span = document.querySelector("span");
+var classes = span.classList;
+var length = classes.length;
+
+span.textContent = 'classList length = ' + length;
+</pre>
+
+<p>La sortie ressemble à ceci :</p>
+
+<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</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('DOM WHATWG','#dom-domtokenlist-length','length')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{Compat("api.DOMTokenList.length")}}</div>
+
+<div id="compat-desktop"> </div>
+
+<div id="compat-mobile"> </div>
diff --git a/files/fr/web/api/domtokenlist/remove/index.html b/files/fr/web/api/domtokenlist/remove/index.html
new file mode 100644
index 0000000000..b3721f931c
--- /dev/null
+++ b/files/fr/web/api/domtokenlist/remove/index.html
@@ -0,0 +1,85 @@
+---
+title: DOMTokenList.remove()
+slug: Web/API/DOMTokenList/remove
+tags:
+  - API
+  - DOM
+  - Listes
+  - Méthodes
+  - Suppression
+translation_of: Web/API/DOMTokenList/remove
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La méthode <code><strong>remove()</strong></code> de l'interface {{domxref("DOMTokenList")}} supprime sur la liste la marque (<em>token)</em> spécifiée.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">tokenList.remove(token1[, token2[, ...]]);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>tokenN...</dt>
+ <dd>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant la marque que vous voulez supprimer sur la liste. Si la chaîne de caractères n'existe pas sur la liste, aucune erreur n'est levée et rien ne se passe.</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Vide.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, nous récupérons la liste des classes définies dans l'élément {{htmlelement("span")}} en tant que <code>DOMTokenList</code> en utilisant {{domxref("Element.classList")}}. Nous retirons ensuite une marque sur la liste et écrivons la liste dans le {{domxref("Node.textContent")}} du <code>&lt;span&gt;</code>.</p>
+
+<p>D'abord, le HTML :</p>
+
+<pre class="brush: html">&lt;span class="a b c"&gt;&lt;/span&gt;</pre>
+
+<p>Maintenant le JavaScript :</p>
+
+<pre class="brush: js">var span = document.querySelector("span");
+var classes = span.classList;
+classes.remove("c");
+span.textContent = classes;
+</pre>
+
+<p>La sortie ressemble à ceci :</p>
+
+<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p>
+
+<p>Pour supprimer plusieurs classes à la fois, vous pouvez utiliser un tableau (<em>array</em>) avec la <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateur_de_d%C3%A9composition">syntaxe de décomposition</a>. L'ordre des classes n'a pas d'importance :</p>
+
+<pre class="brush: js">let span = document.getElementsByTagName("span")[0],
+  classes = span.classList;
+
+classes.remove(...['c', 'b']);
+span.textContent = classes;
+</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('DOM WHATWG','#dom-domtokenlist-remove','remove()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{Compat("api.DOMTokenList.remove")}}</div>
+
+<div id="compat-desktop"> </div>
+
+<div id="compat-mobile"> </div>
+
+<p> </p>
diff --git a/files/fr/web/api/domtokenlist/replace/index.html b/files/fr/web/api/domtokenlist/replace/index.html
new file mode 100644
index 0000000000..64de0066fd
--- /dev/null
+++ b/files/fr/web/api/domtokenlist/replace/index.html
@@ -0,0 +1,80 @@
+---
+title: DOMTokenList.replace()
+slug: Web/API/DOMTokenList/replace
+tags:
+  - API
+  - DOM
+  - Listes
+  - Méthodes
+  - Remplacement
+translation_of: Web/API/DOMTokenList/replace
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La méthode <code><strong>replace()</strong></code> de l'interface {{domxref("DOMTokenList")}} remplace une marque <em>(token)</em> existante par une nouvelle marque.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">tokenList.replace(oldToken,newToken);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>oldToken</dt>
+ <dd>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant la marque que vous voulez remplacer.</dd>
+ <dt>newToken</dt>
+ <dd>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant la marque avec laquelle vous voulez remplacer l'ancienne.</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Vide.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément {{htmlelement("span")}} en tant que <code>DOMTokenList</code> en utilisant {{domxref("Element.classList")}}. Nous remplaçons alors la marque dans la liste et écrivons la liste dans le {{domxref("Node.textContent")}} du <code>&lt;span&gt;</code>.</p>
+
+<p>D'abord, le HTML :</p>
+
+<pre class="brush: html">&lt;span class="a b c"&gt;&lt;/span&gt;</pre>
+
+<p>Maintenant le JavaScript :</p>
+
+<pre class="brush: js">var span = document.querySelector("span");
+var classes = span.classList;
+try {
+  classes.replace("c", "z");
+  span.textContent = classes;
+} catch(e) {
+  span.textContent = e;
+}
+</pre>
+
+<p>La sortie ressemble à ceci :</p>
+
+<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</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('DOM WHATWG','#dom-domtokenlist-replace','replace()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{Compat("api.DOMTokenList.replace")}}</div>
+
+<div id="compat-desktop"> </div>
+
+<div id="compat-mobile"> </div>
diff --git a/files/fr/web/api/domtokenlist/supports/index.html b/files/fr/web/api/domtokenlist/supports/index.html
new file mode 100644
index 0000000000..b536c5f40c
--- /dev/null
+++ b/files/fr/web/api/domtokenlist/supports/index.html
@@ -0,0 +1,66 @@
+---
+title: DOMTokenList.supports()
+slug: Web/API/DOMTokenList/supports
+tags:
+  - API
+  - DOM
+  - Méthodes
+translation_of: Web/API/DOMTokenList/supports
+---
+<p>{{APIRef("DOM")}}{{SeeCompatTable}}</p>
+
+<p>La méthode <strong><code>supports()</code></strong> de l'interface {{domxref("DOMTokenList")}} renvoie <code>true</code> (<em>vrai</em>) si une marque (<em>token)</em> donnée se trouve parmi les marques prises en charge dans l'attribut associé. Cette méthode est destinée à la détection des fonctionnalités.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>boolean</em> = element.supports(<em>token</em>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><em><code>token</code></em></dt>
+ <dd>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) contenant la marque à interroger.</dd>
+</dl>
+
+<h3 id="Renvoie">Renvoie</h3>
+
+<p>un {{jsxref("Boolean")}} (<em>booléen</em>) indiquant si la marque a été trouvée.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js"><code>var iframe = document.getElementById('display');
+if (iframe.sandbox.supports('an-upcoming-feature')) {
+  // code de support pour la future et mystérieuse fonctionnalité
+} else {
+  // code de secours
+}
+
+if (iframe.sandbox.supports('allow-scripts')) {
+  // instruction cadre de l'exécution de JavaScript
+   // NOTE: ceci fonctionne bien mais est juste un exemple!
+}</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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Credential Management')}}</td>
+   <td>{{Spec2('Credential Management')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{Compat("api.DOMTokenList.supports")}}</div>
+
+<div id="compat-desktop"> </div>
+
+<div id="compat-mobile"> </div>
diff --git a/files/fr/web/api/domtokenlist/toggle/index.html b/files/fr/web/api/domtokenlist/toggle/index.html
new file mode 100644
index 0000000000..5dcf5826cf
--- /dev/null
+++ b/files/fr/web/api/domtokenlist/toggle/index.html
@@ -0,0 +1,82 @@
+---
+title: DOMTokenList.toggle()
+slug: Web/API/DOMTokenList/toggle
+tags:
+  - API
+  - Basculement
+  - DOM
+  - Listes
+  - Méthodes
+translation_of: Web/API/DOMTokenList/toggle
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La méthode <code><strong>toggle()</strong></code> (<em>bascule</em>) de l'interface {{domxref("DOMTokenList")}} supprime une marque (<em>token)</em> donnée de la liste et renvoie <code>false</code> (<em>faux</em>). Si <em>token</em> n'existe pas, il est ajouté et la fonction renvoie <code>true</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">tokenList.toggle(token, force);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>token</dt>
+ <dd>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant la marque que l'on veut activer.</dd>
+ <dt>force {{optional_inline}}</dt>
+ <dd>Un {{domxref("Boolean")}} (<em>booléen</em>) qui, si inclus, transforme la bascule (toggle) en opération unique. Si elle est définie <code>false</code> (<em>faux</em>), la marque sera seulement supprimée et aucun ajout ne suivra. Si elle est définie <code>true</code> (<em>vrai</em>), la marque sera seulement ajoutée et pas supprimée après.</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Un {{domxref("Boolean")}} (<em>booléen</em>) — <code>false</code> (<em>faux</em>) si la marque n'est pas dans la liste après l'appel ou <code>true</code> (<em>vrai</em>) si elle y est.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément {{htmlelement("span")}} en tant que <code>DOMTokenList</code> en utilisant {{domxref("Element.classList")}}. Nous remplaçons alors une marque dans la liste et écrivons la liste dans le {{domxref("Node.textContent")}} du <code>&lt;span&gt;</code>.</p>
+
+<p>D'abord, le HTML :</p>
+
+<pre class="brush: html">&lt;span class="a b"&gt;classList is 'a b'&lt;/span&gt;</pre>
+
+<p>Maintenant le JavaScript :</p>
+
+<pre class="brush: js">var span = document.querySelector("span");
+var classes = span.classList;
+span.onclick = function() {
+  var result = classes.toggle("c");
+  if(result) {
+    span.textContent = "'c' added; classList is now '" + classes + "'.";
+  } else {
+    span.textContent = "'c' removed; classList is now '" + classes + "'.";
+  }
+}
+</pre>
+
+<p>La sortie ressemble à ceci :</p>
+
+<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</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('DOM WHATWG','#dom-domtokenlist-toggle','toggle()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{Compat("api.DOMTokenList.toggle")}}</div>
+
+<div id="compat-desktop"> </div>
+
+<div id="compat-mobile"> </div>
diff --git a/files/fr/web/api/domtokenlist/value/index.html b/files/fr/web/api/domtokenlist/value/index.html
new file mode 100644
index 0000000000..179b6dc852
--- /dev/null
+++ b/files/fr/web/api/domtokenlist/value/index.html
@@ -0,0 +1,65 @@
+---
+title: DOMTokenList.value
+slug: Web/API/DOMTokenList/value
+tags:
+  - API
+  - DOM
+  - Méthodes
+  - Valeur
+translation_of: Web/API/DOMTokenList/value
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La propriété <code><strong>value</strong></code> (<em>valeur</em>) de l'interface {{domxref("DOMTokenList")}} renvoie la valeur de la liste en tant que {{domxref("DOMString")}} (chaîne de caractères), ou efface et définit la liste à la valeur donnée.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">tokenList.value;</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, nous récupérons la liste des classes définies sur un élément {{htmlelement("span")}} en tant que <code>DOMTokenList</code> en utilisant {{domxref("Element.classList")}}, puis écrivons alors la valeur de la liste dans le {{domxref("Node.textContent")}} du <code>&lt;span&gt;</code>.</p>
+
+<p>D'abord le HTML :</p>
+
+<pre class="brush: html">&lt;span class="a b c"&gt;&lt;/span&gt;</pre>
+
+<p>Maintenant le JavaScript :</p>
+
+<pre class="brush: js">var span = document.querySelector("span");
+var classes = span.classList;
+span.textContent = classes.value;
+</pre>
+
+<p>La sortie ressemble à ceci :</p>
+
+<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</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('DOM WHATWG','#dom-domtokenlist-value','value')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{Compat("api.DOMTokenList.value")}}</div>
+
+<div id="compat-desktop"> </div>
+
+<div id="compat-mobile"> </div>
diff --git a/files/fr/web/api/domtokenlist/values/index.html b/files/fr/web/api/domtokenlist/values/index.html
new file mode 100644
index 0000000000..2abea40a04
--- /dev/null
+++ b/files/fr/web/api/domtokenlist/values/index.html
@@ -0,0 +1,74 @@
+---
+title: DOMTokenList.values()
+slug: Web/API/DOMTokenList/values
+tags:
+  - API
+  - DOM
+  - Itérateurs
+  - Listes
+  - Méthodes
+  - Valeurs
+translation_of: Web/API/DOMTokenList/values
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La méthode <code><strong>values()</strong></code> (<em>valeurs</em>) de l'interface {{domxref("DOMTokenList")}} renvoie un {{jsxref("Les_protocoles_iteration",'itérateur')}} permettant aux développeurs de passer en revue toutes les valeurs contenues dans la <code>DOMTokenList</code>. Individuellement, les valeurs sont des objets {{domxref("DOMString")}} (<em>chaînes de caractères</em>).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">tokenList.values();</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Aucun.</p>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément {{htmlelement("span")}} en tant que <code>DOMTokenList</code> en utilisant {{domxref("Element.classList")}}. Si nous récupérons un itérateur contenant les valeurs en utilisant <code>values()</code>, nous les itérons alors en utilisant une boucle <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for ... of</a> et écrivons chacune dans le {{domxref("Node.textContent")}} du <code>&lt;span&gt;</code>.</p>
+
+<p>D'abord, le HTML :</p>
+
+<pre class="brush: html">&lt;span class="a b c"&gt;&lt;/span&gt;</pre>
+
+<p>Maintenant le JavaScript :</p>
+
+<pre class="brush: js">var span = document.querySelector("span");
+var classes = span.classList;
+var iterator = classes.values();
+
+for(var value of iterator) {
+  span.textContent += value + ' ++ ';
+}</pre>
+
+<p>La sortie ressemble à ceci :</p>
+
+<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</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('DOM WHATWG','#interface-domtokenList','values() (as iterable&lt;Node&gt;)')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{Compat("api.DOMTokenList.values")}}</div>
+
+<div id="compat-desktop"> </div>
+
+<div id="compat-mobile"> </div>
diff --git a/files/fr/web/api/domuserdata/index.html b/files/fr/web/api/domuserdata/index.html
new file mode 100644
index 0000000000..6a78b4cd94
--- /dev/null
+++ b/files/fr/web/api/domuserdata/index.html
@@ -0,0 +1,44 @@
+---
+title: DOMUserData
+slug: Web/API/DOMUserData
+tags:
+  - API
+  - DOM
+  - Données utilisateur
+  - Interface
+translation_of: Web/API/DOMUserData
+---
+<p>{{ ApiRef("DOM") }}{{Obsolete_header}}</p>
+
+<p><code>DOMUserData</code> (<em>données utilisateur</em>) fait référence à une donnée d'application. En JavaScript, elle correspond directement à l'<code><a href="/en/JavaScript/Reference/Global_Objects/Object" title="en/Core_JavaScript_1.5_Reference/Global_Objects/Object">Object</a></code>. Elle est renvoyée ou utilisée comme argument par <code><a class="internal" href="/En/DOM/Node.setUserData" title="En/DOM/Node.setUserData">Node.setUserData</a>()</code>, <code><a class="internal" href="/En/DOM/Node.getUserData" title="En/DOM/Node.getUserData">Node.getUserData</a>()</code>, comme troisième argument de <code>handle()</code> pour <a class="internal" href="/En/DOM/UserDataHandler" title="En/DOM/UserDataHandler"><code>UserDataHandler</code></a> et par diverses méthodes de <a class="internal" href="/En/DOM/DOMConfiguration" title="En/DOM/DOMConfiguration"><code>DOMConfiguration</code></a>.</p>
+
+<p>Notez que bien qu'il puisse s'agir d'un objet, dans Mozilla, elle peut être renvoyée comme chaîne de caractères ou un autre type, si elle a été définie ainsi (par exemple, <code><a href="/En/DOM/Node.setUserData" title="En/DOM/Node.setUserData">Node.setUserData</a>()</code> et <code><a href="/En/DOM/Node.getUserData" title="En/DOM/Node.getUserData">Node.getUserData</a>()</code>).</p>
+
+<p><code>DOMUserData</code> n'est pas persistante ni sérialisée et ne peut être présente après un redémarrage de l'application ou un plantage. Si vous êtes intéressé par la persistance des données, vous devriez plutôt utiliser {{interface("nsISessionStore")}}.</p>
+
+<h2 id="Specifications" name="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("DOM3 Core", "core.html#DOMUserData", "DOMUserData")}}</td>
+   <td>{{Spec2("DOM3 Core")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Autres API obsolètes pour userData : <a href="/En/DOM/UserDataHandler" title="En/DOM/UserDataHandler"><code>UserDataHandler</code></a>, <a href="/En/DOM/Node.getUserData" title="En/DOM/Node.getUserData"><code>node.getUserData</code></a>, <a href="/En/DOM/Node.setUserData" title="En/DOM/Node.setUserData"><code>node.setUserData</code></a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Comment/Utiliser_attributs_donnes">Utiliser les attributs de données</a>  est l'alternative moderne (voir attributs {{htmlattrxref("data-*")}}, {{domxref("HTMLElement.dataset")}})</li>
+ <li>{{ interface("nsISessionStore") }}</li>
+</ul>
diff --git a/files/fr/web/api/doublerange/index.html b/files/fr/web/api/doublerange/index.html
new file mode 100644
index 0000000000..1315c02d39
--- /dev/null
+++ b/files/fr/web/api/doublerange/index.html
@@ -0,0 +1,66 @@
+---
+title: DoubleRange
+slug: Web/API/DoubleRange
+tags:
+  - API
+  - API Media Streams
+  - API de capture multimédia et de flux
+  - Contraintes
+  - Dictionnaire
+  - DoubleRange
+  - Interface
+  - Media
+  - Reference
+  - WebRTC
+translation_of: Web/API/DoubleRange
+---
+<div>{{APIRef("Media Capture and Streams")}}</div>
+
+<p>Le dictionnaire <strong><code>DoubleRange</code></strong> est utilisé pour définir une plage de valeurs à virgule flottante double précision autorisées pour une propriété, avec l'une ou les deux valeurs maximale et minimale spécifiées. Le dictionnaire {{domxref("ConstrainDouble")}} est basé sur cela, en l'augmentant pour prendre également en charge les valeurs exactes et idéales.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt><code>max</code></dt>
+ <dd>Une valeur à virgule flottante spécifiant la plus grande valeur autorisée de la propriété qu'elle décrit.</dd>
+ <dt><code>min</code></dt>
+ <dd>Une valeur à virgule flottante spécifiant la plus petit valeur autorisée de la propriété qu'elle décrit.</dd>
+</dl>
+
+<p>Les valeurs <code>min</code> et/ou <code>max</code> spécifiées sont obligatoires. Si aucune correspondance ne peut être trouvée dans la plage donnée, une erreur se produit.</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('Media Capture', '#dom-doublerange', 'DoubleRange')}}</td>
+   <td>{{Spec2('Media Capture')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez nous une une pull request.</div>
+
+<p>{{Compat("api.DoubleRange")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Media_Streams_API">API de capture multimédia et de flux</a></li>
+ <li><a href="/en-US/docs/Web/API/Media_Streams_API/Constraints">Capacités, contraintes et paramètres</a></li>
+ <li>{{domxref("ConstrainDoubleRange")}}</li>
+ <li>{{domxref("MediaTrackConstraints")}}</li>
+ <li>{{domxref("MediaTrackCapabilities")}}</li>
+ <li>{{domxref("MediaTrackSupportedConstraints")}}</li>
+</ul>
diff --git a/files/fr/web/api/element.blur/index.html b/files/fr/web/api/element.blur/index.html
new file mode 100644
index 0000000000..6c5f12166c
--- /dev/null
+++ b/files/fr/web/api/element.blur/index.html
@@ -0,0 +1,88 @@
+---
+title: HTMLElement.blur()
+slug: Web/API/Element.blur
+tags:
+  - API
+  - DOM
+  - HTMLElement
+  - Method
+  - Reference
+translation_of: Web/API/HTMLOrForeignElement/blur
+---
+<div>
+<div>{{ APIRef("HTML DOM") }}</div>
+</div>
+
+<p>La méthode <code><strong>HTMLElement.blur()</strong></code> retire le focus de l'élément courant.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>elt</em>.blur()</pre>
+
+<h2 id="Specification" name="Specification">Exemples</h2>
+
+<h3 id="Remove_focus_from_a_text_area" name="Remove_focus_from_a_text_area">Retirer le focus d'un champ texte</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<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>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>myText<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"Champ texte</span><span class="punctuation token">."</span></span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span><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">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>focusMethod()<span class="punctuation token">"</span></span><span class="punctuation token">&gt;Cliquez-moi pour donner le focus</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>button</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>blurMethod()<span class="punctuation token">"</span></span><span class="punctuation token">&gt;Cliquez-moi pour retirer le focus</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></code></pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">focusMethod <span class="operator token">=</span> <span class="keyword token">function</span> <span class="function token">getFocus</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"myText"</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">focus</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+blurMethod <span class="operator token">=</span> <span class="keyword token">function</span> <span class="function token">getBlur</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"myText"</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">blur</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{ EmbedLiveSample('Remove_focus_from_a_text_area') }}</p>
+
+<h2 id="Specification" name="Specification">Spécification</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', 'editing.html#dom-blur', 'blur')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'editing.html#blur()-0', 'blur')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'editing.html#dom-blur', 'blur')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-28216144', 'blur')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité navigateur</h2>
+
+
+<p>{{Compat("api.HTMLElement.blur")}}</p>
+<p>Dans IE9-10, il y a un bug où appeler <code>blur()</code> sur le {{HTMLElement("body")}} change la fenêtre active du navigateur vers une autre application.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p>La méthode DOM {{domxref("HTMLElement.focus()")}}</p>
diff --git a/files/fr/web/api/element/accesskey/index.html b/files/fr/web/api/element/accesskey/index.html
new file mode 100644
index 0000000000..35a7d777cb
--- /dev/null
+++ b/files/fr/web/api/element/accesskey/index.html
@@ -0,0 +1,21 @@
+---
+title: Element.accessKey
+slug: Web/API/Element/accessKey
+tags:
+  - API
+  - DOM
+  - Element
+  - Propriété
+  - Raccourcis clavier
+  - Reference
+translation_of: Web/API/HTMLElement/accessKey
+---
+<div>{{APIRef("DOM")}}</div>
+
+<div> </div>
+
+<p>La propriété <font face="Consolas, Monaco, Andale Mono, monospace"><strong>Element.accessKey</strong></font> définit la touche sur laquelle l'utilisateur doit appuyer pour accéder à l'élément.</p>
+
+<div class="note">
+<p><strong>Note :</strong> La propriété <code>Element.accessKey</code><strong> </strong>est rarement utilisée en raison de ses multiples conflits avec des raccourcis clavier déjà présents dans les navigateurs. Pour contourner ce problème, les navigateurs appliquent le comportement attendu de "accesskey" lorsqu'une autre touche est pressée simultanément (comme <kbd>Alt</kbd> + accesskey).</p>
+</div>
diff --git a/files/fr/web/api/element/animate/index.html b/files/fr/web/api/element/animate/index.html
new file mode 100644
index 0000000000..5d547f1e5e
--- /dev/null
+++ b/files/fr/web/api/element/animate/index.html
@@ -0,0 +1,205 @@
+---
+title: Element.animate()
+slug: Web/API/Element/animate
+tags:
+  - API
+translation_of: Web/API/Element/animate
+---
+<p>{{APIRef('Web Animations')}} {{SeeCompatTable}}</p>
+
+<p>La méthode <strong><code>Element.animate()</code></strong> est un raccourci permettant de créer et jouer une animation sur un élément. Elle retourne l'instance de type {{domxref("Animation")}} alors créée.</p>
+
+<div class="note">
+<p>Les éléments peuvent avoir plusieurs animations. Vous pouvez obtenir une liste des animations qui affectent un élément en appelant {{domxref("Element.getAnimations()")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<div class="syntaxbox">
+<pre class="brush: js"><var>element</var>.animate(<var>keyframes</var>, <var>options</var>); </pre>
+</div>
+
+<h3 id="Paramèters">Paramèters</h3>
+
+<dl>
+ <dt><code>keyframes</code></dt>
+ <dd>
+ <p>Un <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats">objet formatté représentant un ensemble de keyframes</a>.</p>
+ </dd>
+ <dt><code>options</code></dt>
+ <dd>Un nombre entier (<em>Integer</em>) <strong>représentant la durée de l'animation</strong> (en millisecondes), ou un objet (<em>Object</em>) <strong>contenant une ou plusieurs propriétés de timing</strong>: </dd>
+ <dd>
+ <dl>
+  <dt><code>id {{optional_inline}}</code></dt>
+  <dd>Une propriété unique pour <code>animate()</code>: une <a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a> qui permet de référencer l'animation.</dd>
+ </dl>
+ {{Page("/en-US/docs/Web/API/Web_Animations_API/Animation_timing_properties", "Properties")}}</dd>
+</dl>
+
+<h4 id="Options_à_venir">Options à venir</h4>
+
+<p>Les options suivantes n'ont pas encore été implémentées, mais seront ajoutées dans un futur proche.</p>
+
+<dl>
+ <dt><code>composite {{optional_inline}}</code></dt>
+ <dd>Détermine comment sont combinées les valeurs de cette animation avec d'autres animations qui ne spécifient pas leur propre opération composite. La valeur par défaut est <code>replace</code>.
+ <ul>
+  <li><code>add</code> induit un effet d'ajout, dans lequel chaque itération successive se construit sur la précédente. Par exemple pour <code>transform</code>, une valeur <code>translateX(-200px)</code> n'annulerait pas une précédente valeur <code>rotate(20deg)</code> mais s'y ajouterait, pour donner <code>translateX(-200px) rotate(20deg)</code>.</li>
+  <li><code>accumulate</code> est similaire mais un peu plus intéressant: <code>blur(2)</code> et <code>blur(5)</code> deviennent <code>blur(7) et non</code> <code>blur(2) blur(5)</code>.</li>
+  <li><code>replace</code>, quand à elle, remplace la précédente valeur par la nouvelle. </li>
+ </ul>
+ </dd>
+ <dt><code>iterationComposite {{optional_inline}}</code></dt>
+ <dd>Détermine comment les valeurs se construisent, d'itération en itération, <strong>dans une même animation</strong>. Peut être définie par <code>accumulate</code> ou <code>replace</code> (voir ci-dessus). La valeur par défaut est <code>replace</code>.</dd>
+ <dt><code>spacing {{optional_inline}}</code></dt>
+ <dd>Détermine comment les keyframes sans offset temporel devraient être réparties sur la durée de l'animation. La valeur par défaut est <code>distribute</code>.
+ <ul>
+  <li><code>distribute</code> positionne les keyframes de façon à ce que les différences entre deux offsets de keyframes successifs soient égaux, c'est-à-dire que, sans aucun offset, les keyframes seront distribuées régulièrement / également sur toute la durée de l'animation.</li>
+  <li><code>paced</code> positionne les keyframes de façon à ce que les distances entre deux valeurs successives d'une propriété spécifiée par "paced" soient égales, c'est-à-dire que plus la différence entre les valeurs de ces propriétés successives est grande, plus les keyframes seront éloignées les unes des autres.</li>
+ </ul>
+
+ <p><img alt="" src="https://w3c.github.io/web-animations/img/spacing-distribute.svg" style="height: 210px; width: 200px;"> <img alt=" " src="https://w3c.github.io/web-animations/img/spacing-paced.svg" style="height: 210px; width: 200px;"></p>
+ </dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Retourne un objet de type {{domxref("Animation")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans la démo <a href="https://codepen.io/rachelnabors/pen/rxpmJL/?editors=0010">Down the Rabbit Hole (with the Web Animation API)</a>, la méthode <code>animate()</code> est utilisée pour immédiatement créer et jouer une animation sur l'élément <code>#tunnel,</code> pour le faire défiler vers le haut, indéfiniment. Remarquez le tableau d'objets définissant les keyframes et le bloc contenant les options de timing de l'animation.</p>
+
+<pre class="brush: js">document.getElementById("tunnel").animate([
+  // keyframes
+  { transform: 'translateY(0px)' },
+  { transform: 'translateY(-300px)' }
+], {
+  // timing options
+  duration: 1000,
+  iterations: Infinity
+});
+</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('Web Animations', '#the-animatable-interface', 'animate()' )}}</td>
+   <td>{{Spec2('Web Animations')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</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("36")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("48.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>id</code> option</td>
+   <td>{{CompatChrome(50.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("48.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>composite</code>, <code>iterationComposite</code>, and <code>spacing</code> options</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(39.0)}}</td>
+   <td>{{CompatChrome(39.0)}}</td>
+   <td>{{ CompatGeckoMobile("48.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>id</code> option</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(50.0)}}</td>
+   <td>{{CompatChrome(50.0)}}</td>
+   <td>{{ CompatGeckoMobile("48.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>composite</code>, <code>iterationComposite</code>, and <code>spacing</code> options</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+ <li>{{domxref("Element.getAnimations()")}}</li>
+ <li>{{domxref("Animation")}}</li>
+</ul>
diff --git a/files/fr/web/api/element/attachshadow/index.html b/files/fr/web/api/element/attachshadow/index.html
new file mode 100644
index 0000000000..97ac7f7019
--- /dev/null
+++ b/files/fr/web/api/element/attachshadow/index.html
@@ -0,0 +1,54 @@
+---
+title: Element.attachShadow()
+slug: Web/API/Element/attachShadow
+translation_of: Web/API/Element/attachShadow
+---
+<p>{{APIRef('Shadow DOM')}} {{SeeCompatTable}}</p>
+
+<p>La méthode <strong><code>Element.attachShadow()</code></strong> attache un arbre Shadow DOM à un élément spécifié et retourne une référence à son <a href="https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot" title="Use Element.attachShadow to create an instance of shadow DOM. When shadow DOM is created, it is always attached to an existing element. After the shadow DOM is created, the element that it is attached to is called the shadow root."><code>ShadowRoot</code></a>.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">var <em>shadowroot =</em><em> element</em>.attachShadow(<em>shadowRootInit</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>shadowRootInit</code></dt>
+ <dd>Un dictionnaire <code>ShadowRootInit</code>, avec les propriétés suivantes :
+ <ul>
+  <li><code>mode </code>: une chaîne de caractères spécifiant le <em>mode d'encapsulation</em> de l'arbre du Shadow DOM, parmi les options suivantes :
+   <ul>
+    <li><code>open : </code>spécifie une encapsulation ouverte.</li>
+    <li><code>closed</code> : spécifie une encapsulation fermée.</li>
+   </ul>
+  </li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Retour">Retour</h3>
+
+<p>Retourne un {{domxref("ShadowRoot")}}.</p>
+
+<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>{{SpecName('Shadow DOM', '#widl-Element-attachShadow-ShadowRoot-ShadowRootInit-shadowRootInitDict', 'attachShadow()')}}</td>
+   <td>{{Spec2('Shadow DOM')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("api.Element.attachShadow")}}</p>
diff --git a/files/fr/web/api/element/attributes/index.html b/files/fr/web/api/element/attributes/index.html
new file mode 100644
index 0000000000..7ddf8438c3
--- /dev/null
+++ b/files/fr/web/api/element/attributes/index.html
@@ -0,0 +1,120 @@
+---
+title: element.attributes
+slug: Web/API/Element/attributes
+tags:
+  - API
+  - DOM
+  - Element
+  - Propriété
+  - Reference
+translation_of: Web/API/Element/attributes
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>La propriété <strong><code>Element.attributes</code></strong> renvoie une collection des noeuds d'attribut enregistrés dans le noeud spécifié. Il est une {{domxref("NamedNodeMap")}}, pas un tableau (<em>Array</em>), aussi il n'a pas de méthodes  {{jsxref("Array")}} et l'index de noeud {{domxref("Attr")}} peuvent différer entre les navigateurs. <span id="result_box" lang="fr"><span>Pour être plus précis, les <code>attributs</code> sont une paire clé / valeur de chaînes représentant toutes les informations concernant cet attribut.</span></span></p>
+
+<h2 id="Syntaxe_et_valeurs" name="Syntaxe_et_valeurs">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>attr</em> =<em> element</em>.attributes;
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="Exemples_basiques">Exemples basiques</h3>
+
+<pre>// récupère le premier élément &lt;p&gt; du document
+var para = document.getElementsByTagName("p")[0];
+var attr = para.attributes;
+</pre>
+
+<h3 id="Énumération_des_attributs_d'éléments">Énumération des attributs d'éléments</h3>
+
+<p><span id="result_box" lang="fr"><span>L'indexation numérique est utile pour parcourir tous les attributs d'un élément.</span><br>
+ <span>L'exemple suivant parcourt les nœuds d'attribut de l'élément du document avec l'ID "paragraph" et imprime la valeur de chaque attribut.</span></span></p>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="doctype token">&lt;!DOCTYPE html&gt;</span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span><span class="punctuation token">&gt;</span></span>
+
+ <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>title</span><span class="punctuation token">&gt;Exemple d'attributs</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>title</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/javascript<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
+   <span class="keyword token">function</span> <span class="function token">listAttributes</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+     <span class="keyword token">var</span> paragraph <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"paragraph"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+     <span class="keyword token">var</span> result <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"result"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+     <span class="comment token">// D'abord, vérifier que le "paragraph" a quelques attributs    </span>
+     <span class="keyword token">if</span> <span class="punctuation token">(</span>paragraph<span class="punctuation token">.</span><span class="function token">hasAttributes</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+       <span class="keyword token">var</span> attrs <span class="operator token">=</span> paragraph<span class="punctuation token">.</span>attributes<span class="punctuation token">;</span>
+       <span class="keyword token">var</span> output <span class="operator token">=</span> <span class="string token">""</span><span class="punctuation token">;</span>
+       <span class="keyword token">for</span><span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> attrs<span class="punctuation token">.</span>length <span class="operator token">-</span> <span class="number token">1</span><span class="punctuation token">;</span> i <span class="operator token">&gt;=</span> <span class="number token">0</span><span class="punctuation token">;</span> i<span class="operator token">--</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+         output <span class="operator token">+</span><span class="operator token">=</span> attrs<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>name <span class="operator token">+</span> <span class="string token">"-&gt;"</span> <span class="operator token">+</span> attrs<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>value<span class="punctuation token">;</span>
+       <span class="punctuation token">}</span>
+       result<span class="punctuation token">.</span>value <span class="operator token">=</span> output<span class="punctuation token">;</span>
+     <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
+       result<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">"No attributes to show"</span><span class="punctuation token">;</span>
+     <span class="punctuation token">}</span>
+   <span class="punctuation token">}</span>
+  </span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
+ <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span><span class="punctuation token">&gt;</span></span>
+ <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>paragraph<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">color</span><span class="punctuation token">:</span> green<span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Sample Paragraph<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>form</span> <span class="attr-name token">action</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Show first attribute name and value<span class="punctuation token">"</span></span>
+      <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>listAttributes();<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>result<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+ <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>form</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p> </p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">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('DOM WHATWG', '#dom-element-attributes', 'Element.attributes')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>De {{SpecName('DOM3 Core')}}, déplacé de {{domxref("Node")}} à {{domxref("Element")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-84CF096', 'Element.attributes')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Pas de changement de {{SpecName('DOM2 Core')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-84CF096', 'Element.attributes')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Pas de changement de {{SpecName('DOM1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-84CF096', 'Element.attributes')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Element.attributes")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("NamedNodeMap")}}, l'interface de l'objet retourné</li>
+ <li><span id="result_box" lang="fr"><span>Considérations de compatibilité entre navigateurs : sur</span></span> <a class="external external-icon" href="http://www.quirksmode.org/dom/w3c_core.html#attributes" title="http://www.quirksmode.org/dom/w3c_core.html#attributes">quirksmode</a> (en)</li>
+</ul>
diff --git a/files/fr/web/api/element/classlist/index.html b/files/fr/web/api/element/classlist/index.html
new file mode 100644
index 0000000000..b14bd520a8
--- /dev/null
+++ b/files/fr/web/api/element/classlist/index.html
@@ -0,0 +1,286 @@
+---
+title: element.classList
+slug: Web/API/Element/classList
+tags:
+  - API
+  - Classe
+  - DOM
+  - Element
+  - Liste
+  - Propriétés
+translation_of: Web/API/Element/classList
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La propriété en lecture seule<strong> </strong> <code><strong>Element.classList</strong></code> retourne une collection directe  {{domxref("DOMTokenList")}} des attributs de classe de l'élément.</p>
+
+<p>L'utilisation de <code>classList</code> est une alternative à la propriété {{domxref("element.className")}} qui renvoie une chaine composée de la liste des classes, séparées par des espaces.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox">const <var>elementClasses</var> = elementNodeReference.classList;
+</pre>
+
+<p><em>elementClasses</em> est une <a href="/en-US/docs/DOM/DOMTokenList" title="DOM/DOMTokenList">DOMTokenList</a> représentant l'attribut class de <em>elementNodeReference</em>. Si l'attribut class n'a pas été défini ou est vide <em>elementClasses.length</em> retourne 0. <code>element.classList</code> est en lecture seule. Pour la modifier il convient d'utiliser les méthodes <code>add()</code> et <code>remove()</code>.</p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>add( String [, String] )</dt>
+ <dd>Ajoute les classes spécifiées. Si une classe est déjà assignée en attribut de cet élément, elle est ignorée.</dd>
+ <dt>remove( String [, String] )</dt>
+ <dd>Supprime les classes spécifiées.<br>
+ <strong>Note:</strong> Supprimer une classe qui n'existe pas NE génère PAS d'erreurs.</dd>
+ <dt><strong>item</strong>( Number )</dt>
+ <dd>Renvoie la position d'une classe dans une collection.</dd>
+ <dt><strong>toggle</strong>( String [, force] )</dt>
+ <dd>Si un seul argument est présent : change la présence d'une classe dans la liste. Si la classe existe, alors la <u>supprime</u> et renvoie <code>false</code>, dans le cas inverse, <u>ajoute</u> cette classe et retourne <code>true</code>.<br>
+ Si le second argument est présent : Si l'argument <code>force</code> est à <code>true</code>, ajoute cette classe, si l'argument est à <code>false</code>, la supprime.</dd>
+ <dt>contains( String )</dt>
+ <dd>Vérifie si la classe spécifiée est présente dans la liste des classes attribuées à cet élément.</dd>
+ <dt>replace( oldClass, newClass )</dt>
+ <dd>Remplace une classe par une autre.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">const</span> div <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'div'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+div<span class="punctuation token">.</span>className <span class="operator token">=</span> <span class="string token">'foo'</span><span class="punctuation token">;</span>
+
+<span class="comment token">// notre point de départ: &lt;div class="foo"&gt;&lt;/div&gt;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>div<span class="punctuation token">.</span>outerHTML<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// utiliser l'API classList pour supprimer et ajouter des classes</span>
+div<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">remove</span><span class="punctuation token">(</span><span class="string token">"foo"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+div<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">add</span><span class="punctuation token">(</span><span class="string token">"anotherclass"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// &lt;div class="anotherclass"&gt;&lt;/div&gt;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>div<span class="punctuation token">.</span>outerHTML<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// si "visible" est défini, le supprimer, sinon, l'ajouter</span>
+div<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">toggle</span><span class="punctuation token">(</span><span class="string token">"visible"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// ajouter/supprimer "visible", en fonction d'un test conditionnel, pour i inférieur à 10</span>
+div<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">toggle</span><span class="punctuation token">(</span><span class="string token">"visible"</span><span class="punctuation token">,</span> i <span class="operator token">&lt;</span> <span class="number token">10</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>div<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">contains</span><span class="punctuation token">(</span><span class="string token">"foo"</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// ajouter ou supprimer plusieurs classes</span>
+div<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">add</span><span class="punctuation token">(</span><span class="string token">"foo"</span><span class="punctuation token">,</span> <span class="string token">"bar"</span><span class="punctuation token">,</span> <span class="string token">"baz"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+div<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">remove</span><span class="punctuation token">(</span><span class="string token">"foo"</span><span class="punctuation token">,</span> <span class="string token">"bar"</span><span class="punctuation token">,</span> <span class="string token">"baz"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// ajouter ou supprimer plusieurs classes en utilisant la syntaxe de propagation</span>
+<span class="keyword token">const</span> cls <span class="operator token">=</span> <span class="punctuation token">[</span><span class="string token">"foo"</span><span class="punctuation token">,</span> <span class="string token">"bar"</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
+div<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">add</span><span class="punctuation token">(</span><span class="punctuation token">.</span><span class="punctuation token">.</span><span class="punctuation token">.</span>cls<span class="punctuation token">)</span><span class="punctuation token">;</span>
+div<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">remove</span><span class="punctuation token">(</span><span class="punctuation token">.</span><span class="punctuation token">.</span><span class="punctuation token">.</span>cls<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// remplacer la classe "foo" par la classe "bar"</span>
+div<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">replace</span><span class="punctuation token">(</span><span class="string token">"foo"</span><span class="punctuation token">,</span> <span class="string token">"bar"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<div class="note">
+<p class="brush: js">Les versions de Firefox antérieures à la 26 n'implémentent pas l'utilisation de plusieurs arguments dans les méthodes add/remove/toggle. Voir <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=814014">https://bugzilla.mozilla.org/show_bug.cgi?id=814014</a></p>
+</div>
+
+<h2 id="Prothèse_démulation">Prothèse d'émulation</h2>
+
+<p>L'ancien événement <code><a href="https://msdn.microsoft.com/en-us/windows/ms536956(v=vs.71)">onpropertychange</a></code> peut être utilisé pour créer une maquette <code>classList</code> vivante grâce à une propriété <code>Element.prototype.className</code> qui déclenche l'événement spécifié une fois qu'il est modifié.</p>
+
+<p>La polyfill suivante pour <code>classList</code> et <code>DOMTokenList</code> garantit une conformité <strong>totale</strong> (couverture) pour toutes les méthodes et propriétés standard de <code>Element.prototype.classList</code> pour les navigateurs <strong>IE10-IE11</strong> ainsi qu'un comportement quasi conforme pour <strong>IE 6-9</strong>. Consultez ce qui suit :</p>
+
+<pre class="brush: js">// 1. String.prototype.trim polyfill
+if (!"".trim) String.prototype.trim = function(){ return this.replace(/^[\s]+|[\s]+$/g, ''); };
+(function(window){"use strict"; // prevent global namespace pollution
+if(!window.DOMException) (DOMException = function(reason){this.message = reason}).prototype = new Error;
+var wsRE = /[\11\12\14\15\40]/, wsIndex = 0, checkIfValidClassListEntry = function(O, V) {
+  if (V === "") throw new DOMException(
+    "Failed to execute '" + O + "' on 'DOMTokenList': The token provided must not be empty." );
+  if((wsIndex=V.search(wsRE))!==-1) throw new DOMException("Failed to execute '"+O+"' on 'DOMTokenList': " +
+    "The token provided ('"+V[wsIndex]+"') contains HTML space characters, which are not valid in tokens.");
+}
+// 2. Implement the barebones DOMTokenList livelyness polyfill
+if (typeof DOMTokenList !== "function") (function(window){
+    var document = window.document, Object = window.Object, hasOwnProp = Object.prototype.hasOwnProperty;
+    var defineProperty = Object.defineProperty, allowTokenListConstruction = 0, skipPropChange = 0;
+    function DOMTokenList(){
+        if (!allowTokenListConstruction) throw TypeError("Illegal constructor"); // internally let it through
+    }
+    DOMTokenList.prototype.toString = DOMTokenList.prototype.toLocaleString = function(){return this.value};
+    DOMTokenList.prototype.add = function(){
+        a: for(var v=0, argLen=arguments.length,val="",ele=this[" uCL"],proto=ele[" uCLp"]; v!==argLen; ++v) {
+            val = arguments[v] + "", checkIfValidClassListEntry("add", val);
+            for (var i=0, Len=proto.length, resStr=val; i !== Len; ++i)
+                if (this[i] === val) continue a; else resStr += " " + this[i];
+            this[Len] = val, proto.length += 1, proto.value = resStr;
+        }
+        skipPropChange = 1, ele.className = proto.value, skipPropChange = 0;
+    };
+    DOMTokenList.prototype.remove = function(){
+        for (var v=0, argLen=arguments.length,val="",ele=this[" uCL"],proto=ele[" uCLp"]; v !== argLen; ++v) {
+            val = arguments[v] + "", checkIfValidClassListEntry("remove", val);
+            for (var i=0, Len=proto.length, resStr="", is=0; i !== Len; ++i)
+                if(is){ this[i-1]=this[i] }else{ if(this[i] !== val){ resStr+=this[i]+" "; }else{ is=1; } }
+            if (!is) continue;
+            delete this[Len], proto.length -= 1, proto.value = resStr;
+        }
+        skipPropChange = 1, ele.className = proto.value, skipPropChange = 0;
+    };
+    window.DOMTokenList = DOMTokenList;
+    function whenPropChanges(){
+        var evt = window.event, prop = evt.propertyName;
+        if ( !skipPropChange &amp;&amp; (prop==="className" || (prop==="classList" &amp;&amp; !defineProperty)) ) {
+            var target = evt.srcElement, protoObjProto = target[" uCLp"], strval = "" + target[prop];
+            var tokens=strval.trim().split(wsRE), resTokenList=target[prop==="classList"?" uCL":"classList"];
+            var oldLen = protoObjProto.length;
+            a: for(var cI = 0, cLen = protoObjProto.length = tokens.length, sub = 0; cI !== cLen; ++cI){
+                for(var innerI=0; innerI!==cI; ++innerI) if(tokens[innerI]===tokens[cI]) {sub++; continue a;}
+                resTokenList[cI-sub] = tokens[cI];
+            }
+            for (var i=cLen-sub; i &lt; oldLen; ++i) delete resTokenList[i]; //remove trailing indexs
+            if(prop !== "classList") return;
+            skipPropChange = 1, target.classList = resTokenList, target.className = strval;
+            skipPropChange = 0, resTokenList.length = tokens.length - sub;
+        }
+    }
+    function polyfillClassList(ele){
+        if (!ele || !("innerHTML" in ele)) throw TypeError("Illegal invocation");
+        ele.detachEvent( "onpropertychange", whenPropChanges ); // prevent duplicate handler infinite loop
+        allowTokenListConstruction = 1;
+        try{ function protoObj(){} protoObj.prototype = new DOMTokenList(); }
+        finally { allowTokenListConstruction = 0 }
+        var protoObjProto = protoObj.prototype, resTokenList = new protoObj();
+        a: for(var toks=ele.className.trim().split(wsRE), cI=0, cLen=toks.length, sub=0; cI !== cLen; ++cI){
+            for (var innerI=0; innerI !== cI; ++innerI) if (toks[innerI] === toks[cI]) { sub++; continue a; }
+            this[cI-sub] = toks[cI];
+        }
+        protoObjProto.length = cLen-sub, protoObjProto.value = ele.className, protoObjProto[" uCL"] = ele;
+        if (defineProperty) { defineProperty(ele, "classList", { // IE8 &amp; IE9 allow defineProperty on the DOM
+            enumerable:   1, get: function(){return resTokenList},
+            configurable: 0, set: function(newVal){
+                skipPropChange = 1, ele.className = protoObjProto.value = (newVal += ""), skipPropChange = 0;
+                var toks = newVal.trim().split(wsRE), oldLen = protoObjProto.length;
+                a: for(var cI = 0, cLen = protoObjProto.length = toks.length, sub = 0; cI !== cLen; ++cI){
+                    for(var innerI=0; innerI!==cI; ++innerI) if(toks[innerI]===toks[cI]) {sub++; continue a;}
+                    resTokenList[cI-sub] = toks[cI];
+                }
+                for (var i=cLen-sub; i &lt; oldLen; ++i) delete resTokenList[i]; //remove trailing indexs
+            }
+        }); defineProperty(ele, " uCLp", { // for accessing the hidden prototype
+            enumerable: 0, configurable: 0, writeable: 0, value: protoObj.prototype
+        }); defineProperty(protoObjProto, " uCL", {
+            enumerable: 0, configurable: 0, writeable: 0, value: ele
+        }); } else { ele.classList=resTokenList, ele[" uCL"]=resTokenList, ele[" uCLp"]=protoObj.prototype; }
+        ele.attachEvent( "onpropertychange", whenPropChanges );
+    }
+    try { // Much faster &amp; cleaner version for IE8 &amp; IE9:
+        // Should work in IE8 because Element.prototype instanceof Node is true according to the specs
+        window.Object.defineProperty(window.Element.prototype, "classList", {
+            enumerable: 1,   get: function(val){
+                                 if (!hasOwnProp.call(this, "classList")) polyfillClassList(this);
+                                 return this.classList;
+                             },
+            configurable: 0, set: function(val){this.className = val}
+        });
+    } catch(e) { // Less performant fallback for older browsers (IE 6-8):
+        window[" uCL"] = polyfillClassList;
+        // the below code ensures polyfillClassList is applied to all current and future elements in the doc.
+        document.documentElement.firstChild.appendChild(document.createElement('style')).styleSheet.cssText=(
+            '_*{x-uCLp:expression(!this.hasOwnProperty("classList")&amp;&amp;window[" uCL"](this))}' + //  IE6
+            '[class]{x-uCLp/**/:expression(!this.hasOwnProperty("classList")&amp;&amp;window[" uCL"](this))}' //IE7-8
+        );
+    }
+})(window);
+// 3. Patch in unsupported methods in DOMTokenList
+(function(DOMTokenListProto, testClass){
+    if (!DOMTokenListProto.item) DOMTokenListProto.item = function(i){
+        function NullCheck(n) {return n===void 0 ? null : n} return NullCheck(this[i]);
+    };
+    if (!DOMTokenListProto.toggle || testClass.toggle("a",0)!==false) DOMTokenListProto.toggle=function(val){
+        if (arguments.length &gt; 1) return (this[arguments[1] ? "add" : "remove"](val), !!arguments[1]);
+        var oldValue = this.value;
+        return (this.remove(oldValue), oldValue === this.value &amp;&amp; (this.add(val), true) /*|| false*/);
+    };
+    if (!DOMTokenListProto.replace || typeof testClass.replace("a", "b") !== "boolean")
+        DOMTokenListProto.replace = function(oldToken, newToken){
+            checkIfValidClassListEntry("replace", oldToken), checkIfValidClassListEntry("replace", newToken);
+            var oldValue = this.value;
+            return (this.remove(oldToken), this.value !== oldValue &amp;&amp; (this.add(newToken), true));
+        };
+    if (!DOMTokenListProto.contains) DOMTokenListProto.contains = function(value){
+        for (var i=0,Len=this.length; i !== Len; ++i) if (this[i] === value) return true;
+        return false;
+    };
+    if (!DOMTokenListProto.forEach) DOMTokenListProto.forEach = function(f){
+        if (arguments.length === 1) for (var i = 0, Len = this.length; i !== Len; ++i) f( this[i], i, this);
+        else for (var i=0,Len=this.length,tArg=arguments[1]; i !== Len; ++i) f.call(tArg, this[i], i, this);
+    };
+    if (!DOMTokenListProto.entries) DOMTokenListProto.entries = function(){
+        var nextIndex = 0, that = this;
+        return {next: function() {
+            return nextIndex&lt;that.length ? {value: [nextIndex, that[nextIndex++]], done: false} : {done: true};
+        }};
+    };
+    if (!DOMTokenListProto.values) DOMTokenListProto.values = function(){
+        var nextIndex = 0, that = this;
+        return {next: function() {
+            return nextIndex&lt;that.length ? {value: that[nextIndex++], done: false} : {done: true};
+        }};
+    };
+    if (!DOMTokenListProto.keys) DOMTokenListProto.keys = function(){
+        var nextIndex = 0, that = this;
+        return {next: function() {
+            return nextIndex&lt;that.length ? {value: nextIndex++, done: false} : {done: true};
+        }};
+    };
+})(window.DOMTokenList.prototype, window.document.createElement("div").classList);
+})(window);
+</pre>
+
+<h3 id="Mise_en_garde">Mise en garde</h3>
+
+<p>La prothèse d'émulation est limitée dans sa fonctionnalité. Elle est actuellement incapable de traiter les éléments hors document (par exemple, les éléments créés par <code>document.createElement</code> avant d'être ajoutés à un nœud parent) dans IE6-7.</p>
+
+<p>Cependant, elle devrait très bien fonctionner dans IE9. Une différence majeure entre la version prothésée de <code>classList</code> et les spécifications du W3 est que pour IE6-8, il n'y a pas moyen de créer un objet immuable (un objet dont les propriétés ne peuvent pas être directement modifiées). Dans IE9, en revanche, c'est possible en étendant le prototype, en gelant l'objet visible et en écrasant les méthodes de propriétés natives. Cependant, de telles actions ne fonctionneraient pas dans IE6-IE8 et, dans IE9, elles ralentiraient la performance de la page web entière au point de la faire ramper, rendant ces modifications complètement impraticables pour cette prothèse d'émulation.</p>
+
+<p>Une note mineure est que dans IE6-7, cette prothèse utilise la propriété <code>window[" uCL"]</code> de l'objet window pour communiquer avec les expressions CSS, la propriété css <code>x-uCLp</code> sur tous les éléments, et la propriété <code>element[" uCL"]</code> sur tous les éléments pour permettre la collecte des déchets et augmenter les performances. Dans tous les navigateurs prothésés (IE6-9), une propriété <code>element[" uCLp"]</code> supplémentaire est ajoutée à l'élément pour garantir un prototypage conforme aux normes, et une propriété <code>DOMTokenList[" uCL"]</code> est ajoutée à chaque objet <code>element["classList"]</code> pour garantir que la <code>DOMTokenList</code> est liée à son propre élément.</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">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "dom.html#dom-classlist", "Element.classList")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Note dans la spécification HTML relative à l'attribut {{htmlattrxref("class")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-element-classlist", "Element.classList")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-element-classlist", "Element.classList")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité sur cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Element.classList")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("element.className")}}</li>
+ <li>{{domxref("DOMTokenList")}}</li>
+</ul>
diff --git a/files/fr/web/api/element/classname/index.html b/files/fr/web/api/element/classname/index.html
new file mode 100644
index 0000000000..b5f2930e5e
--- /dev/null
+++ b/files/fr/web/api/element/classname/index.html
@@ -0,0 +1,81 @@
+---
+title: element.className
+slug: Web/API/Element/className
+tags:
+  - API
+  - Classe
+  - DOM
+  - Element
+  - Propriétés
+translation_of: Web/API/Element/className
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><span class="seoSummary">La propriété <strong>className</strong> de l'interface {{domxref("Element")}} récupère et définit la valeur de l'<a href="/fr/docs/Web/HTML/Attributs_universels/class">attribut <code>class</code></a> de l'élément spécifié</span></p>
+
+<h2 id="Syntaxe_et_valeurs" name="Syntaxe_et_valeurs">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>var cName</var> = <var>elementNodeReference</var>.className;
+<var>elementNodeReference</var>.className = <var>cName</var>;</pre>
+
+<ul>
+ <li><em><var>cName</var> est une String (chaîne de caractères) représentant la classe (ou les classes séparées par des espaces) de l'élément courant.</em></li>
+</ul>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">let</span> elm <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'item'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="keyword token">if</span><span class="punctuation token">(</span>elm<span class="punctuation token">.</span>className <span class="operator token">===</span> <span class="string token">'active'</span><span class="punctuation token">)</span><span class="punctuation token">{</span>
+    elm<span class="punctuation token">.</span>className <span class="operator token">=</span> <span class="string token">'inactive'</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
+    elm<span class="punctuation token">.</span>className <span class="operator token">=</span> <span class="string token">'active'</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Le nom <code>className</code> est utilisé pour cette propriété au lieu de <code>class</code> à cause de conflits éventuels avec le mot-clé « class » dans beaucoup de langages utilisés pour manipuler le DOM.</p>
+
+<p><code>className</code> peut être une instance de {{domxref("SVGAnimatedString")}} si l'<code>element</code> est un {{domxref("SVGElement")}}. Dans ce cas là, l'usage de <code>className</code> ne fonctionnera pas, il sera donc préférable d'utiliser {{domxref("Element.getAttribute")}} et {{domxref("Element.setAttribute")}} si vous utilisez des élements SVG. </p>
+
+<pre class="brush: js"><code>elm.setAttribute('class', elm.getAttribute('class'))</code>
+</pre>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">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("DOM WHATWG", "#dom-element-classname", "element.className")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-element-classname", "element.className")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 HTML", "html.html#ID-95362176", "element.className")}}</td>
+   <td>{{Spec2("DOM2 HTML")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité sur cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Element.className")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("element.classList")}}</li>
+</ul>
diff --git a/files/fr/web/api/element/click_event/index.html b/files/fr/web/api/element/click_event/index.html
new file mode 100644
index 0000000000..c290291e10
--- /dev/null
+++ b/files/fr/web/api/element/click_event/index.html
@@ -0,0 +1,155 @@
+---
+title: 'Element : évènement click'
+slug: Web/API/Element/click_event
+tags:
+  - API
+  - DOM
+  - Element
+  - Reference
+  - click
+translation_of: Web/API/Element/click_event
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary">L'évènement <code><strong>click</strong></code> est déclenché à partir d'un élément lorsqu'un bouton d'un dispositif de pointage (comme celui d'une souris par exemple) est pressé puis relaché lorsque le pointeur est sur l'élément.</span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th>Se propage/remonte dans le DOM</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th>Annulable</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th>Interface</th>
+   <td>{{domxref("MouseEvent")}}</td>
+  </tr>
+  <tr>
+   <th>Propriété pour la gestion d'évènement</th>
+   <td>{{domxref("GlobalEventHandlers.onclick", "onclick")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Si le bouton est pressé sur un élément et que le pointeur est déplacé sur un autre élément, l'évènement sera déclenché sur l'ancêtre le plus près qui contient les deux éléments.</p>
+
+<p><code>click</code> est déclenché après que les évènements {{event("mousedown")}} et {{event("mouseup")}} aient été déclenchés.</p>
+
+<h2 id="Notes_dutilisation">Notes d'utilisation</h2>
+
+<p>L'objet {{domxref("MouseEvent")}}, passé au gestionnaire d'évènement (lorsque l'évènement est <code>click</code>) possède une propriété {{domxref("Event.detail", "detail")}} qui indique le nombre de fois où la cible ({{domxref("Event.target", "target")}}) a été cliquée. Autrement dit, <code>detail</code> vaudra 2 pour un double-clic, 3 pour un triple-clic et ainsi de suite. Le compteur est remis à zéro après un court intervalle (dont la durée spécifique peut varier entre les navigateurs, les plateformes et les préférences de l'utilisateur dont notamment les options d'accessibilité).</p>
+
+<h3 id="Internet_Explorer">Internet Explorer</h3>
+
+<p>Internet Explorer 8 &amp; 9 souffrent d'un bug où les élméents avec une {{cssxref("background-color")}} calculée qui vaut <a href="/fr/docs/Web/CSS/color_value#transparent_keyword"><code>transparent</code></a> qui recouvrent d'autres éléments ne recevront pas d'évènements <code>click</code>. Les évènements <code>click</code> toucheront les éléments en dessous à la place.</p>
+
+<p>Quelques méthodes de contournement pour ce bug :</p>
+
+<ul>
+ <li>Pour IE9 :
+  <ul>
+   <li>Utiliser {{cssxref("background-color")}}<code>: <a href="/en-US/docs/Web/CSS/color_value#rgba()">rgba</a>(0,0,0,0)</code></li>
+   <li>Appliquer {{cssxref("opacity")}}<code>: 0</code> et une valeur explicite pour {{cssxref("background-color")}} qui ne soit pas <a href="/fr/docs/Web/CSS/color_value#transparent_keyword"><code>transparent</code></a></li>
+  </ul>
+ </li>
+ <li>Pour IE8 et IE9 : appliquer <code><a href="http://msdn.microsoft.com/en-us/library/ms532847(v=vs.85).aspx">filter</a>: alpha(opacity=0);</code> et une valeur explicite pour {{cssxref("background-color")}} qui ne soit pas <a href="/fr/docs/Web/CSS/color_value#transparent_keyword"><code>transparent</code></a></li>
+</ul>
+
+<h3 id="Safari_Mobile">Safari Mobile</h3>
+
+<p>Safari Mobile 7.0+ (et antérieures) <a href="https://bugs.webkit.org/show_bug.cgi?id=153887">souffre d'un bug</a> indiquant que les évènements <code>click</code> ne sont pas déclenchés sur les éléments qui ne sont généralement pas interactifs (ex. {{HTMLElement("div")}}) et qui n'ont pas de gestionnaire d'évènement directement attaché (on utilise la délégation d'évènement). Voir <a href="https://developer.apple.com/library/safari/documentation/appleapplications/reference/safariwebcontent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW6">la documentation de Safari sur le fait de rendre les éléments cliquables</a> et <a href="https://developer.apple.com/library/safari/documentation/appleapplications/reference/safariwebcontent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW7">la définition d'un élément cliquable</a>.</p>
+
+<p>Méthodes de contournement connues :</p>
+
+<ul>
+ <li>Ajouter {{cssxref("cursor")}}<code>: pointer;</code> sur l'élément ou l'un des ancêtres.</li>
+ <li>Ajouter un attribut <code>onclick="void(0)"</code> à l'élément ou à l'un des ancêtres (tant que ce n'est pas {{HTMLElement("body")}}).</li>
+ <li>Utiliser un élément interactif (ex. {{HTMLElement("a")}}) plutôt qu'un élément généralement non-interactif (ex. {{HTMLElement("div")}}).</li>
+ <li>Ne pas utiliser la délégation d'évènement pour <code>click</code>.</li>
+</ul>
+
+<p>Safari Mobile considère que les éléments suivants sont interactifs (et ne souffrent donc pas de ce bug) :</p>
+
+<ul>
+ <li>{{HTMLElement("a")}} (tant qu'il a un attribut <code>href</code>)</li>
+ <li>{{HTMLElement("area")}} (tant qu'il a un attribut <code>href</code>)</li>
+ <li>{{HTMLElement("button")}}</li>
+ <li>{{HTMLElement("img")}}</li>
+ <li>{{HTMLElement("input")}}</li>
+ <li>{{HTMLElement("label")}} (tant qu'il est associé à un formulaire)</li>
+ <li>{{HTMLElement("textarea")}}</li>
+ <li><em>Liste à compléter.</em></li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, on affiche le nombre de clics consécutifs sur un bouton HTML ({{HTMLElement("button")}}).</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;button&gt;Cliquer ici&lt;/button&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">const button = document.querySelector('button');
+
+button.addEventListener('click', event =&gt; {
+  button.innerHTML = `Nombre de clics : ${event.detail}`;
+});</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>Essayez de cliquer rapidement sur le bouton pour augmenter le nombre de clic. Après une pause, le compteur sera remis à zéro.</p>
+
+<p>{{EmbedLiveSample("Exemples")}}</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>{{SpecName('UI Events', '#event-type-click')}}</td>
+   <td>{{Spec2('UI Events')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', '#event-type-click', 'click')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events', '#Events-eventgroupings-mouseevents-h3', 'click')}}</td>
+   <td>{{Spec2('DOM2 Events')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Element.click_event")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements">Une introduction aux évènements</a></li>
+ <li>D'autres évènements connexes
+  <ul>
+   <li><a href="/fr/docs/Web/API/Element/mouseup_event"><code>mouseup</code></a></li>
+   <li><code><a href="/fr/docs/Web/API/Element/mousedown_event">mousedown</a></code></li>
+   <li><a href="/fr/docs/Web/API/Element/mousemove_event"><code>mousemove</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/dblclick_event"><code>dblclick</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseout_event"><code>mouseout</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseover_event"><code>mouseover</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseenter_event"><code>mouseenter</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseleave_event"><code>mouseleave</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/contextmenu_event"><code>contextmenu</code></a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/api/element/clientheight/index.html b/files/fr/web/api/element/clientheight/index.html
new file mode 100644
index 0000000000..820b06e770
--- /dev/null
+++ b/files/fr/web/api/element/clientheight/index.html
@@ -0,0 +1,93 @@
+---
+title: element.clientHeight
+slug: Web/API/Element/clientHeight
+tags:
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/Element/clientHeight
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p>Renvoie la hauteur intérieure d'un élément en pixels. Celle-ci comprend les marges intérieures éventuelles (padding), mais ni la barre de défilement horizontale, ni les bordures ,ni les marges extérieures (margin).</p>
+<p><code>clientHeight</code> peut être calculée comme la propriété CSS <code>height</code> + la propriété CSS <code>padding</code> - la hauteur de la barre de défilement horizontale (si présente).</p>
+<h3 id="Syntaxe_et_valeurs" name="Syntaxe_et_valeurs">Syntaxe et valeurs</h3>
+<pre class="eval">var <var>h</var> = <var>element</var>.clientHeight;
+</pre>
+<p><var>h</var> est un entier représentant la valeur <code>clientHeight</code> de l'élément <var>element</var> en pixels. <code>clientHeight</code> est une propriété en lecture seule.</p>
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+<div id="offsetContainer" style="margin: 26px 0px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: absolute; left: 260px;">
+ <div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
+  <p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p>
+  <p>LA CHOUETTE<br>
+   <br>
+   Tel un fantôme dans la nuit<br>
+   Elle s'envole sans un bruit<br>
+   C'est la silhouette de la chouette<br>
+   Qui régurgite des boulettes<br>
+   Son cri terrifie les petits<br>
+   Qui se blottissent dans leur lit<br>
+   <br>
+   <br>
+   LE RENARD<br>
+   <br>
+   Animal nocturne et rusé<br>
+   Il a un beau manteau de feu<br>
+   C'est un canidé très futé<br>
+   S'approcher de lui on ne peut<br>
+   Avec sa queue immaculée<br>
+   Des passants il flatte les yeux<br>
+   <br>
+   <br>
+   LA CHAUVE-SOURIS<br>
+   <br>
+   C'est très dur de la voir<br>
+   Puisqu'elle vit dans le noir<br>
+   Elle aime du sang boire<br>
+   Et elle sort le soir<br>
+   <br>
+   <br>
+   LA GRENOUILLE<br>
+   <br>
+   Qu'est-c'qui saute et qui mouille<br>
+   Qui plonge et qui farfouille<br>
+   Qui nage et qui patouille<br>
+   C'est bien sûr la grenouille<br>
+   <br>
+   <br>
+   LE LION<br>
+   <br>
+   Le lion est carnivore<br>
+   Il a un beau pelage<br>
+   Il est souvent en cage<br>
+   Et ce soir il est mort<br>
+   <br>
+   <br>
+   L'ELEPHANT<br>
+   <br>
+   Descendant du mammouth<br>
+   Il est très imposant<br>
+   c'est bien sûr l'éléphant<br>
+   attendez j'ai un doute<br>
+   <br>
+   <br>
+   LE CHAT<br>
+   <br>
+   Talentueux chasseur<br>
+   Le chat est un joueur-né<br>
+   Il cherche avec son nez<br>
+   Et vit dans sa demeure</p>
+  <p>poèmes venant du <a class="external" href="http://membres.lycos.fr/peter2000/">site de peter2000</a></p>
+  <p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p>
+ </div>
+ <span style="position: absolute; left: -32px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Left</span><span style="position: absolute; left: 170px; top: -24px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Top</span><span style="position: absolute; left: 370px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Right</span><span style="position: absolute; left: 164px; top: 203px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Bottom</span><span style="position: absolute; left: 143px; top: 5px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-top</span><span style="position: absolute; left: 138px; top: 175px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-bottom</span><span style="position: absolute; left: 143px; top: 27px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-top</span><span style="position: absolute; left: 138px; top: 153px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-bottom</span><span class="comment">{{ mediawiki.external('if IE') }}&gt;&lt;span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;margin-left&lt;/span&gt;&lt;span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;border-left&lt;/span&gt;&lt;span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;padding-left&lt;/span&gt;&lt;span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;"&gt;padding-right&lt;/span&gt;&lt;span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;border-right&lt;/span&gt;&lt;span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;margin-right&lt;/span&gt;&lt;!{{ mediawiki.external('endif') }}</span></div>
+<p style="margin-top: 270px;"><img alt="Image:clientHeight_fr.png"></p>
+<h3 id="Sp.C3.A9cifications" name="Sp.C3.A9cifications">Spécifications</h3>
+<p><code>clientHeight</code> ne fait partie d'aucune spécification du W3C.</p>
+<h3 id="Notes" name="Notes">Notes</h3>
+<p><code>clientHeight</code> est une propriété non standard, qui a été introduite dans le modèle objet d'Internet Explorer.</p>
+<h3 id="R.C3.A9f.C3.A9rences" name="R.C3.A9f.C3.A9rences">Références</h3>
+<ul>
+ <li><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/clientheight.asp">Définition de clientHeight sur MSDN (en anglais)</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/workshop/author/om/measuring.asp">Mesure des dimensions et de la position d'un élément sur MSDN (en anglais)</a></li>
+ <li><a class="external" href="http://www.mozilla.org/docs/dom/domref/clientHeight.html">Référence du DOM Gecko sur clientHeight (en anglais)</a></li>
+</ul>
+<p>{{ languages( { "en": "en/DOM/element.clientHeight", "ja": "ja/DOM/element.clientHeight", "pl": "pl/DOM/element.clientHeight", "zh-cn": "cn/DOM/element.clientHeight" } ) }}</p>
diff --git a/files/fr/web/api/element/clientleft/index.html b/files/fr/web/api/element/clientleft/index.html
new file mode 100644
index 0000000000..ce24f4ea3c
--- /dev/null
+++ b/files/fr/web/api/element/clientleft/index.html
@@ -0,0 +1,53 @@
+---
+title: element.clientLeft
+slug: Web/API/Element/clientLeft
+tags:
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/Element/clientLeft
+---
+<p>{{ Fx_minversion_header(3) }} {{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p>La largeur de la bordure gauche d'un élément en pixels. Celle-ci comprend la largeur de la barre de défilement verticale si la direction de l'élément est de droite à gauche et si un débordement provoque l'apparition d'une barre de défilement vertical sur la gauche. Les marges et le remplissage gauche (padding) ne font pas partie de <code>clientLeft</code>. Cette propriété est en lecture seule.</p>
+<p>Les applications basées sur <a href="fr/Gecko">Gecko</a> gèrent <code>clientLeft</code> à partir de Gecko 1.9 (<a href="fr/Firefox_3">Firefox 3</a>, implémentation dans le {{ Bug(111207) }}). Cette propriété n'est pas disponible dans Firefox 2 et les versions précédentes.</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<pre class="eval">var <var>gauche</var> = <var>element</var>.clientLeft;
+</pre>
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+<div id="offsetContainer" style="margin: 26px 0px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: absolute; left: 260px;">
+ <div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
+  <p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p>
+  <p>Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.</p>
+  <p><span style="float: right;"><img alt="Image:BirmanCat.jpg"></span>All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.</p>
+  <p>Cat image and text coming from <a class="external" href="http://www.best-cat-art.com/">www.best-cat-art.com</a></p>
+  <p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p>
+ </div>
+ <span style="position: absolute; left: -32px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Left</span><span style="position: absolute; left: 170px; top: -24px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Top</span><span style="position: absolute; left: 370px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Right</span><span style="position: absolute; left: 164px; top: 203px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Bottom</span><span style="position: absolute; left: 143px; top: 5px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-top</span><span style="position: absolute; left: 138px; top: 175px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-bottom</span><span style="position: absolute; left: 143px; top: 27px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-top</span><span style="position: absolute; left: 138px; top: 153px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-bottom</span><span class="comment">{{ mediawiki.external('if IE') }}&gt;&lt;span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;margin-left&lt;/span&gt;&lt;span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;border-left&lt;/span&gt;&lt;span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;padding-left&lt;/span&gt;&lt;span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;"&gt;padding-right&lt;/span&gt;&lt;span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;border-right&lt;/span&gt;&lt;span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;margin-right&lt;/span&gt;&lt;!{{ mediawiki.external('endif') }}</span></div>
+<p style="margin-top: 270px;"><img alt="Image:clientLeft.png"></p>
+<p><img alt="Position de la barre de défilement verticale lorsque la propriété layout.scrollbar.side est à 1 ou 3"></p>
+<p>Lorsque la préférence <a class="external" href="http://kb.mozillazine.org/Layout.scrollbar.side">
+ <i>
+  layout.scrollbar.side</i>
+ </a> est à 1 ou 3 et que la direction du texte est de droite à gauche (RTL), <b>la barre de défilement vertical sera placée à gauche</b> et cela influencera la manière dont <code>clientLeft</code> est calculée.</p>
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+<p>Ne fait partie d'aucune spécification du W3C.</p>
+<h3 id="Notes" name="Notes">Notes</h3>
+<p><code>clientLeft</code> faisait au départ partie du modèle objet DHTML de Microsoft Internet Explorer.</p>
+<p>La position de la barre de défilement vertical lorsque la direction du texte sur l'élément est de droite à gauche dépendra de la préférence <a class="external" href="http://kb.mozillazine.org/Layout.scrollbar.side">
+ <i>
+  layout.scrollbar.side</i>
+ </a>.</p>
+<h3 id="R.C3.A9f.C3.A9rences" name="R.C3.A9f.C3.A9rences">Références</h3>
+<ul>
+ <li><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/clientleft.asp?frame=true">
+  <i>
+   clientLeft definition</i>
+  sur MSDN</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/workshop/author/om/measuring.asp">
+  <i>
+   Measuring Element Dimension and Location</i>
+  sur MSDN</a></li>
+</ul>
+<p> </p>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "en": "en/DOM/element.clientLeft", "es": "es/DOM/element.clientLeft", "ja": "ja/DOM/element.clientLeft", "pl": "pl/DOM/element.clientLeft" } ) }}</p>
diff --git a/files/fr/web/api/element/clientwidth/index.html b/files/fr/web/api/element/clientwidth/index.html
new file mode 100644
index 0000000000..6510d9fab8
--- /dev/null
+++ b/files/fr/web/api/element/clientwidth/index.html
@@ -0,0 +1,66 @@
+---
+title: element.clientWidth
+slug: Web/API/Element/clientWidth
+tags:
+  - API
+  - CSSOM View
+  - Propriété
+  - Reference
+translation_of: Web/API/Element/clientWidth
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La propriété <code><strong>Element.clientWidth</strong></code> vaut zéro pour les éléments en ligne (<em>inline</em>) et pour les éléments sans CSS. Dans les autres cas, sa valeur correspond à la largeur intérieure d'un élément, exprimée en pixel. Cette largeur inclue le rembourrage (<em>padding</em>) mais exclut les bordures, les marges et les éventuelles barres de défilement verticales.</p>
+
+<p>Lorsque <code>clientWidth</code> est utilisée sur l'élément racine (l'élément <code>&lt;html&gt;</code> par défaut ou <code>&lt;body&gt;</code> si le document utilise le mode <em>quirks</em>), c'est la largeur de la zone d'affichage (<em>viewport</em>) à l'exception des barres de défilement qui est renvoyée. <a href="https://www.w3.org/TR/2016/WD-cssom-view-1-20160317/#dom-element-clientwidth">Il s'agit d'un cas au limite pour <code>clientWidth</code></a>.</p>
+
+<div class="note">
+<p><strong>Note :</strong> La valeur de cette propriété sera arondie en un entier. Si vous devez utiliser une valeur décimale, privilégiez {{domxref("element.getBoundingClientRect()")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">var <var>intElemClientWidth</var> = <var>element</var>.clientWidth;</pre>
+
+<p><code><var>intElemClientWidth</var></code> est un entier correspondant à la largeur d'<code><var>element</var></code>, en pixels. La propriété <code>clientWidth</code> est uniquement accessible en lecture-seule.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p><img alt="Image:Dimensions-client.png" class="internal" src="/@api/deki/files/185/=Dimensions-client.png"></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('CSSOM View', '#dom-element-clientwidth', 'clientWidth')}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Notes">Notes</h3>
+
+<p><code>clientWidth</code> fut d'abord introduit avec le modèle objet DHTML de Microsoft Internet Explorer.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Element.clientWidth")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("HTMLElement.offsetWidth")}}</li>
+ <li>{{domxref("Element.scrollWidth")}}</li>
+ <li><a href="/fr/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements">Déterminer les dimensions des éléments</a></li>
+</ul>
diff --git a/files/fr/web/api/element/closest/index.html b/files/fr/web/api/element/closest/index.html
new file mode 100644
index 0000000000..7159cfcd51
--- /dev/null
+++ b/files/fr/web/api/element/closest/index.html
@@ -0,0 +1,148 @@
+---
+title: Element.closest()
+slug: Web/API/Element/closest
+tags:
+  - API
+  - DOM
+  - Element
+  - Méthodes
+translation_of: Web/API/Element/closest
+---
+<p>{{APIRef('Shadow DOM')}}</p>
+
+<p>La méthode <code><strong>Element.closest()</strong></code> renvoie l'ancêtre le plus proche de l'élément courant (ou l'élément courant) qui correspond aux sélecteurs passés comme paramètres. S'il n'existe pas de tel ancêtre, la méthode renvoie <code>null</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>elt =</em><em> element</em>.closest(<em>selecteurs</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>selecteurs</code></dt>
+ <dd>Une chaîne {{domxref("DOMString")}} qui contient une liste de sélecteurs tels que <code>"p:hover, .toto + q"</code></dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>L'élément ({{domxref("Element")}}) qui est le plus proche ancêtre de l'élément courant et qui correspond aux sélecteurs décrits dans le paramètres ou {{jsxref("null")}} s'il n'y en a aucun.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<ul>
+ <li>{{exception("SyntaxError")}} sera levée si <code>selecteurs</code> n'est pas une liste de sélecteurs valide.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;article&gt;
+  &lt;div id="div-01"&gt;Here is div-01
+    &lt;div id="div-02"&gt;Here is div-02
+      &lt;div id="div-03"&gt;Here is div-03&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/article&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var el = document.getElementById('div-03');
+
+var r1 = el.closest("#div-02");
+// Renvoie l'élément avec l'identifiant id=div-02
+
+var r2 = el.closest("div div");
+// Renvoie le plus proche ancêtre qui est un div
+// dans un div. Ici, c'est div-03 lui-même.
+
+var r3 = el.closest("article &gt; div");
+// Renvoie le plus proche ancêtre qui est un div
+// et dont l'élément parent est article. Ici c'est
+// div-01.
+
+var r4 = el.closest(":not(div)");
+// Renvoie le plus proche ancêtre qui n'est pas un
+// div. Dans ce cas, c'est l'élément article.</pre>
+
+<h2 id="Polyfill" name="Polyfill">Polyfill</h2>
+
+<p>Pour les navigateurs qui ne prennent pas en charge <code>Element.closest()</code> mais qui permettent d'utiliser <code>element.matches()</code> (ou un équivalent préfixé, à partir d'IE9+), on peut utiliser le polyfill suivant :</p>
+
+<pre class="brush: js">if (!Element.prototype.matches)
+    Element.prototype.matches = Element.prototype.msMatchesSelector ||
+                                Element.prototype.webkitMatchesSelector;
+
+if (!Element.prototype.closest)
+    Element.prototype.closest = function(s) {
+        var el = this;
+        if (!document.documentElement.contains(el)) return null;
+        do {
+            if (el.matches(s)) return el;
+            el = el.parentElement || el.parentNode;
+        } while (el !== null &amp;&amp; el.nodeType == 1);
+        return null;
+    };</pre>
+
+<p>Cependant, si vous avez besoin de supporter IE 8, vous pouvez utiliser la prothèse suivante qui marchera, mais beaucoup plus lentement. Elle ne supporte que les sélecteurs CSS 2.1 dans IE 8, et peut causer de gros pics de latence dans les sites web :</p>
+
+<pre class="brush: js">if (window.Element &amp;&amp; !Element.prototype.closest) {
+  Element.prototype.closest =
+  function(s) {
+    var matches = (this.document || this.ownerDocument).querySelectorAll(s),
+        i,
+        el = this;
+    do {
+      i = matches.length;
+      while (--i &gt;= 0 &amp;&amp; matches.item(i) !== el) {};
+    } while ((i &lt; 0) &amp;&amp; (el = el.parentElement));
+    return el;
+  };
+}
+</pre>
+
+<h2 id="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('DOM WHATWG', '#dom-element-closest', 'Element.closest()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">
+<p>La table de compatibilité sur cette page est générée à partir de données structurées. Si vous souhaitez contribuer à ces données, veuillez récupérer le répository <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et faire une pull request.</p>
+</div>
+
+<p>{{Compat("api.Element.closest")}}</p>
+
+
+
+<h3 id="Notes_de_compatibilité">Notes de compatibilité</h3>
+
+<ul>
+ <li>Dans Edge <code>document.createElement(tagName).closest(tagName)</code> retournera <code>null</code> si l'élément n'est pas attaché au DOM au préalable.</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("Element")}}</li>
+ <li>
+  <div class="syntaxbox"><a href="/fr/Apprendre/CSS/Les_bases/Les_sélecteurs">La syntaxe pour les sélecteurs</a></div>
+ </li>
+ <li>
+  <div class="syntaxbox">Autres méthodes utilisant des sélecteurs: {{domxref("element.querySelector()")}} et {{domxref("element.matches()")}}.</div>
+ </li>
+</ul>
diff --git a/files/fr/web/api/element/contextmenu_event/index.html b/files/fr/web/api/element/contextmenu_event/index.html
new file mode 100644
index 0000000000..dc47f428bb
--- /dev/null
+++ b/files/fr/web/api/element/contextmenu_event/index.html
@@ -0,0 +1,102 @@
+---
+title: 'Element : évènement contextmenu'
+slug: Web/API/Element/contextmenu_event
+tags:
+  - API
+  - DOM
+  - Element
+  - Event
+  - Reference
+  - contextemenu
+translation_of: Web/API/Element/contextmenu_event
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary">L'évènement <strong><code>contextmenu</code></strong> est délenché à partir d'un élément lorsque l'utilisateur tente d'ouvrir un menu contextuel. Cet évènement est généralement déclenché par un clic-droit ou en utilisant la touche du menu contextuel.</span> Dans ce cas, le menu contextuel est affiché dans le coin inférieur gauche de l'élément qui a le focus sauf si l'élément est un arbre, auquel cas le menu est affiché en bas à gauche de la ligne courante.</p>
+
+<p>Tout évènement de clic-droit qui n'est pas désactivé (via {{domxref("Event.preventDefault", "preventDefault()")}}) entraînera le déclenchement d'un évènement <code>contextmenu</code> sur l'élément cible.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th>Se propage/remonte dans le DOM</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th>Annulable</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th>Interface</th>
+   <td>{{DOMxRef("MouseEvent")}}</td>
+  </tr>
+  <tr>
+   <th>Propriété pour la gestion d'évènement</th>
+   <td>{{domxref("GlobalEventHandlers.oncontextmenu", "oncontextmenu")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, on annule l'action par défaut de l'évènement <code>contextmenu</code> avec <code>preventDefault()</code> lorsque l'évènement est déclenché depuis le premier paragraphe. Ainsi, rien ne se produira lorsqu'on utilisera un clic-droit sur le premier paragraphe tandis que le menu contextuel habituel s'affichera bien pour le second paragraphe.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p id="noContextMenu"&gt;Le menu contextuel a été désactivé sur ce paragraphe.&lt;/p&gt;
+&lt;p&gt;Mais pas sur celui-ci.&lt;/p&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">noContext = document.getElementById('noContextMenu');
+
+noContext.addEventListener('contextmenu', e =&gt; {
+  e.preventDefault();
+});
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("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('HTML WHATWG', 'indices.html#event-contextmenu', 'contextmenu')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Element.contextmenu_event")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements">Une introduction aux évènements</a></li>
+ <li>D'autres évènements connexes
+  <ul>
+   <li><a href="/fr/docs/Web/API/Element/mousedown_event"><code>mousedown</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseup_event"><code>mouseup</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mousemove_event"><code>mousemove</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseover_event"><code>mouseover</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/click_event"><code>click</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/dblclick_event"><code>dblclick</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseout_event"><code>mouseout</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseenter_event"><code>mouseenter</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseleave_event"><code>mouseleave</code></a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/api/element/currentstyle/index.html b/files/fr/web/api/element/currentstyle/index.html
new file mode 100644
index 0000000000..09a7425ce9
--- /dev/null
+++ b/files/fr/web/api/element/currentstyle/index.html
@@ -0,0 +1,76 @@
+---
+title: Element.currentStyle
+slug: Web/API/Element/currentStyle
+translation_of: Web/API/Element/currentStyle
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>{{ Non-standard_header() }}</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p><strong><code>Element.currentStyle</code></strong> is a property which is a proprietary similar to the standardized {{domxref("window.getComputedStyle")}} method. It is available in old versions of Microsoft Internet Explorer. However, it returns the units set in CSS while window.getComputedStyle returns the values in pixels.</p>
+
+<h2 id="Specification">Specification</h2>
+
+<p>Ne fait partie d'aucune spécification.</p>
+
+<p>Microsoft <a href="https://msdn.microsoft.com/en-us/library/ms535231(v=vs.85).aspx">a une description MSDN</a>.</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Microsoft Edge</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>6</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Element.runtimeStyle")}}</li>
+</ul>
diff --git a/files/fr/web/api/element/dblclick_event/index.html b/files/fr/web/api/element/dblclick_event/index.html
new file mode 100644
index 0000000000..431a961e5f
--- /dev/null
+++ b/files/fr/web/api/element/dblclick_event/index.html
@@ -0,0 +1,119 @@
+---
+title: 'Element : évènement dblclick'
+slug: Web/API/Element/dblclick_event
+tags:
+  - API
+  - DOM
+  - Event
+  - Interface
+  - Reference
+  - dblclick
+translation_of: Web/API/Element/dblclick_event
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary">L'évènement <strong><code>dblclick</code></strong> se déclenche à partir d'un élément lorsqu'un bouton d'un dispositif de pointage est double-cliqué (c'est-à-dire qu'on clique deux fois sur le méme élément dans un temps très court).</span></p>
+
+<p><code>dblclick</code> se déclenche après deux évènements {{domxref("Element/click_event", "click")}} (et, par extension, après deux paires d'évènements {{domxref("Element.mousedown_event", "mousedown")}} et {{domxref("Element.mouseup_event", "mouseup")}}).</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Se propage/remonte dans le DOM</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Annulable</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("MouseEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Propriété pour la gestion d'évènements</th>
+   <td>{{domxref("GlobalEventHandlers.ondblclick", "ondblclick")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, on modifie la taille d'une tuile lorsqu'on double-clique dessus.</p>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">const card = document.querySelector('aside');
+
+card.addEventListener('dblclick', function (e) {
+  card.classList.toggle('large');
+});</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;aside&gt;
+  &lt;h3&gt;Une tuile&lt;/h3&gt;
+  &lt;p&gt;Double-cliquer pour redimensionner cet objet.&lt;/p&gt;
+&lt;/aside&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">aside {
+  background: #fe9;
+  border-radius: 1em;
+  display: inline-block;
+  padding: 1em;
+  transform: scale(.9);
+  transform-origin: 0 0;
+  transition: transform .6s;
+}
+
+.large {
+  transform: scale(1.3);
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 700, 200)}}</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>{{SpecName('UI Events', '#event-type-dblclick', 'dblclick')}}</td>
+   <td>{{Spec2('UI Events')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', '#event-type-dblclick', 'dblclick')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Element.dblclick_event")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements">Une introduction aux évènements</a></li>
+ <li>D'autres évènements connexes
+  <ul>
+   <li><a href="/fr/docs/Web/API/Element/mousedown_event"><code>mousedown</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseup_event"><code>mouseup</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mousemove_event"><code>mousemove</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseover_event">mouseover</a></li>
+   <li><a href="/fr/docs/Web/API/Element/click_event"><code>click</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseout_event"><code>mouseout</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseenter_event"><code>mouseenter</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseleave_event"><code>mouseleave</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/contextmenu_event"><code>contextmenu</code></a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/api/element/getattribute/index.html b/files/fr/web/api/element/getattribute/index.html
new file mode 100644
index 0000000000..5c50b4cd64
--- /dev/null
+++ b/files/fr/web/api/element/getattribute/index.html
@@ -0,0 +1,85 @@
+---
+title: element.getAttribute
+slug: Web/API/Element/getAttribute
+tags:
+  - API
+  - DOM
+  - Element
+  - Method
+  - Méthode
+  - Reference
+translation_of: Web/API/Element/getAttribute
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><code>getAttribute</code> renvoie la valeur d'un attribut donné de l'élément spécifié. Si l'attribut n'existe pas, la valeur renvoyée sera soit <code>null</code> soit <code>""</code> (une chaine vide) ; voir {{ Anch("Notes") }} pour plus de détails.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="eval notranslate"><em>let attribut</em> = element.getAttribute(<em>nom_attribut</em>)
+</pre>
+
+<p>où</p>
+
+<ul>
+ <li><code><em>attribut</em></code> est une chaine contenant la valeur de l'attribut <code><em>nom_attribut</em></code>.</li>
+ <li><code><em>nom_attribut</em></code> est le nom de l'attribut dont on désire connaitre la valeur.</li>
+</ul>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<p>Soit l'HTML :</p>
+
+<pre class="notranslate">const div1 = document.getElementById("div1");</pre>
+
+<p>Exemple de JavaScript :</p>
+
+<pre class="eval notranslate">const div1 = document.getElementById("div1");
+//=&gt; &lt;div id="div1"&gt;Hi Champ!&lt;/div&gt;
+
+const attributID = div1.getAttribute("id");
+//=&gt; "div1"
+
+cont alignement = div1.getAttribute("align");
+//=&gt; null
+</pre>
+
+<h2 id="Notes" name="Notes">Description</h2>
+
+<h3 id="Sensibilité_à_la_casse">Sensibilité à la casse</h3>
+
+<p>Le paramètre <code>nom_attribut</code> est généralement sensible à la casse, mais ne l'est pas lorsqu'il est utilisé sur des éléments HTML.</p>
+
+<h3 id="Attributs_inexistants">Attributs inexistants</h3>
+
+<p>À peu près tous les navigateurs (Firefox, Internet Explorer, Opera, Safari, Konqueror et iCab, sans que cette liste soit exhaustive) renvoient <code>null</code> lorsque l'attribut demandé n'existe pas sur l'élément spécifié. La spécification DOM indique cependant que la valeur de retour correcte dans ce cas est en fait la chaine vide <code>""</code>, et certaines implémentation DOM auront ce comportement. Par conséquent, vous devriez utiliser {{domxref("element.hasAttribute()")}} pour vérifier l'existence d'un attribut avant d'appeler <code>getAttribute()</code> s'il est possible que l'attribut n'existe pas sur l'élément spécifié.</p>
+
+<h3 id="Récupération_de_nonces">Récupération de nonces</h3>
+
+<p>Pour des raisons de sécurité, les <em>nonces</em> <a href="/fr/docs/Web/HTTP/CSP">CSP</a> des sources autres que des scripts, telles que les feuilles de style CSS, et les appels <code>.getAttribute("nonce")</code> sont interdits.</p>
+
+<pre class="brush: js example-bad notranslate">let nonce = script.getAttribute("nonce");
+// renvoie une chaine vide</pre>
+
+<p>Plutôt que de tenter de lire le <em>nonce</em> via l’attribut, utilisez la propriété {{domxref("HTMLOrForeignElement/nonce", "nonce")}} :</p>
+
+<pre class="brush: js notranslate">let nonce = script.nonce;</pre>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><strong>Spécification</strong></td>
+   <td><strong>État</strong></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#dom-element-getattribute','getAttribute()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Compatibilité des navigateurs</h2>
+
+<div>{{Compat("api.Element.getAttribute")}}</div>
diff --git a/files/fr/web/api/element/getattributenames/index.html b/files/fr/web/api/element/getattributenames/index.html
new file mode 100644
index 0000000000..8aa41d44ad
--- /dev/null
+++ b/files/fr/web/api/element/getattributenames/index.html
@@ -0,0 +1,116 @@
+---
+title: Element.getAttributeNames()
+slug: Web/API/Element/getAttributeNames
+tags:
+  - API
+  - Attributs
+  - DOM
+  - Element
+  - Méthodes
+translation_of: Web/API/Element/getAttributeNames
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><code>Element.getAttributeNames()</code> renvoie les noms des attributs de l'élément sous la forme d'un {{jsxref("Array")}} (<em>tableau</em>) de chaînes de caractères. Si l'élément n'a pas d'attributs, il retourne un tableau vide.</p>
+
+<p>L'utilisation de <code>getAttributeNames()</code> complété par {{domxref("Element.getAttribute","getAttribute()")}}, est une alternative efficiente et performante pour l'accès à {{domxref("Element.attributes")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>let attributeNames</em> = element.getAttributeNames();
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush:js">// Itérer sur les attributs de l'élément
+for(let name of element.getAttributeNames())
+{
+	let value = element.getAttribute(name);
+	console.log(name, value);
+}
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<pre class="line-numbers  language-html"><code class="language-html">if (Element.prototype.getAttributeNames == undefined) {
+  Element.prototype.getAttributeNames = function () {
+    var attributes = this.attributes;
+    var length = attributes.length;
+    var result = new Array(length);
+    for (var i = 0; i &lt; length; i++) {
+      result[i] = attributes[i].name;
+    }
+    return result;
+  };
+}</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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-element-getattributenames", "Element.getAttributeNames")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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(61)}}</td>
+   <td>{{CompatGeckoDesktop(45)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(48)}}</td>
+   <td>{{CompatSafari(9)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(61)}}</td>
+   <td>{{CompatChrome(61)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile(48)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fr/web/api/element/getattributenode/index.html b/files/fr/web/api/element/getattributenode/index.html
new file mode 100644
index 0000000000..efe33f1fa1
--- /dev/null
+++ b/files/fr/web/api/element/getattributenode/index.html
@@ -0,0 +1,53 @@
+---
+title: element.getAttributeNode
+slug: Web/API/Element/getAttributeNode
+tags:
+  - API
+  - Attributs
+  - DOM
+  - Element
+  - Méthodes
+  - Noeud
+translation_of: Web/API/Element/getAttributeNode
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<h2 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h2>
+
+<p>Renvoie le nœud d'attribut spécifié pour l'élément courant, en tant que noeud <code>Attr</code>.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="eval line-numbers  language-html"><code class="language-html">var attrNode = element.getAttributeNode(attrName);</code></pre>
+
+<ul>
+ <li><code>attrNode</code> est un nœud <code>Attr</code> pour l'attribut demandé.</li>
+ <li><code>attrName</code> est une chaîne de caractères qui contient le nom de l'attribut.</li>
+</ul>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre>// html: &lt;div id="top" /&gt;
+var t = document.getElementById("top");
+var idAttr = t.getAttributeNode("id");
+alert(idAttr.value == "top")
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Lorsqu'elle est appelée sur un élément HTML dans un DOM marqué comme un document HTML, <code>getAttributeNode</code> passe en minuscules son argument avant de continuer.</p>
+
+<p>Les nœuds <code>Attr</code> héritent de <code>Node</code>, mais ne sont pas considérés comme faisant partie de l'arbre du document. Les attributs habituels des nœuds comme <a href="fr/DOM/element.parentNode">parentNode</a>, <a href="fr/DOM/element.previousSibling">previousSibling</a>, et <a href="fr/DOM/element.nextSibling">nextSibling</a> sont <code>null</code> pour un nœud <code>Attr</code>. Vous pouvez cependant accéder à l'élément auquel cet attribut appartient grâce à la propriété <code>ownerElement</code>.</p>
+
+<p><a href="fr/DOM/element.getAttribute">getAttribute</a> est habituellement utilisé à la place de <code>getAttributeNode</code> pour obtenir la valeur d'un attribut d'un élément.</p>
+
+<p>{{ DOMAttributeMethods() }}</p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-217A91B8">DOM Level 2 Core : getAttributeNode</a> — <small><a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-217A91B8">traduction en français</a> (non normative)</small></li>
+ <li><a class="external external-icon" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents">HTML 5: APIs in HTML documents</a></li>
+</ul>
+
+<div class="noinclude"> </div>
diff --git a/files/fr/web/api/element/getattributenodens/index.html b/files/fr/web/api/element/getattributenodens/index.html
new file mode 100644
index 0000000000..f7d11eaaee
--- /dev/null
+++ b/files/fr/web/api/element/getattributenodens/index.html
@@ -0,0 +1,44 @@
+---
+title: element.getAttributeNodeNS
+slug: Web/API/Element/getAttributeNodeNS
+translation_of: Web/API/Element/getAttributeNodeNS
+---
+<p>{{ ApiRef() }}</p>
+
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+
+<p>Renvoie le nœud <code>Attr</code> pour l'attribut avec l'espace de noms et le nom donnés.</p>
+
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+
+<pre class="eval"><em>attributeNode</em> = element.getAttributeNodeNS(<em>namespace</em>,<em>nodeName</em>)
+</pre>
+
+<h3 id="Param.C3.A8tres" name="Param.C3.A8tres">Paramètres</h3>
+
+<dl>
+ <dt><code>attributeNode</code></dt>
+ <dd>Le nœud pour l'attribut spécifié.</dd>
+ <dt><code>namespace</code></dt>
+ <dd>Une chaîne spécifiant l'espace de noms de l'attribut.</dd>
+ <dt><code>nodeName</code></dt>
+ <dd>Une chaîne spécifiant le nom de l'attribut.</dd>
+</dl>
+
+<p><span class="comment">== Example == TBD The example needs to be fixed // html: &lt;div id="top" /&gt; t = document.getElementById("top"); specialNode = t.getAttributeNodeNS( "<a class="external" href="http://www.mozilla.org/ns/specialspace" rel="freelink">http://www.mozilla.org/ns/specialspace</a>", "id"); // iNode.value = "full-top"</span></p>
+
+<h3 id="Notes" name="Notes">Notes</h3>
+
+<p><code>getAttributeNodeNS</code> est plus spécifique que {{ domxref("Element.getAttributeNode") }} en ce qu'il permet de spécifier les attributs faisant partis d'un espace de noms particulier. La méthode de réglage correspondante est {{ domxref("Element.setAttributeNodeNS") }}.</p>
+
+<p>{{ DOMAttributeMethods() }}</p>
+
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElGetAtNodeNS">DOM Level 2 Core: getAttributeNodeNS (en)</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-ElGetAtNodeNS">traduction en français</a> (non normative)</small></li>
+</ul>
+
+<div class="noinclude"> </div>
+
+<p>{{ languages( { "en": "en/DOM/element.getAttributeNodeNS", "ja": "ja/DOM/element.getAttributeNodeNS", "pl": "pl/DOM/element.getAttributeNodeNS" } ) }}</p>
diff --git a/files/fr/web/api/element/getattributens/index.html b/files/fr/web/api/element/getattributens/index.html
new file mode 100644
index 0000000000..1a256de5fa
--- /dev/null
+++ b/files/fr/web/api/element/getattributens/index.html
@@ -0,0 +1,126 @@
+---
+title: element.getAttributeNS
+slug: Web/API/Element/getAttributeNS
+tags:
+  - API
+  - DOM
+  - Méthode
+  - Reference
+translation_of: Web/API/Element/getAttributeNS
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><strong><code>getAttributeNS()</code></strong> est une méthode de l'interface {{domxref("Element")}} qui renvoie la valeur chaîne de l'attribut avec l'espace de noms et le nom donnés. Si l'attribut nommé n'existe pas, cette valeur sera soit <code>null</code>, soit <code>""</code> (une chaîne vide) ; voir {{ Anch("Notes") }} pour plus de détails.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="eval"><em>attrVal</em> =<em>element</em>.getAttributeNS(<em>namespace</em>,<em>name</em>)
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>namespace </code></dt>
+ <dd><span id="result_box" lang="fr"><span>L'espace de noms dans lequel rechercher l'attribut spécifié.</span></span></dd>
+ <dt><code>name </code></dt>
+ <dd>Le nom de l'attribut à chercher.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>La valeur de chaîne de caractères de l'attribut spécifié. Si  l'attribut n'existe pas, le résultat est <code>null</code>.</p>
+
+<div class="note">
+<p>Note : <span id="result_box" lang="fr"><span>Les versions antérieures de la spécification DOM avaient cette méthode décrite comme renvoyant une chaîne vide pour des attributs inexistants, mais elle n'était généralement pas implémentée de cette façon, car null a plus de sens.</span> <span>La spécification DOM4 indique maintenant que cette méthode devrait retourner null pour les attributs inexistants.</span></span></p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Le document SVG suivantu utilise une valeur d'attribut <code>foo</code> d'un espace de nom spécifique :</p>
+
+<pre class="brush: xml">&lt;svg xmlns="http://www.w3.org/2000/svg"
+    xmlns:test="http://www.example.com/2014/test" width="40" height="40"&gt;
+
+  &lt;circle id="target" cx="12" cy="12" r="10" stroke="#444"
+      stroke-width="2" fill="none" test:foo="Hello namespaced attribute!"/&gt;
+
+  &lt;script type="text/javascript"&gt;
+    var ns = 'http://www.example.com/2014/test';
+    var circle = document.getElementById( 'target' );
+
+    console.log( 'attribute test:foo: "' + circle.getAttributeNS( ns, 'foo' ) + '"' );
+  &lt;/script&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>Dans un document HTML5, il faut utiliser <code>test:foo</code> pour accéder à l'attribut car les espaces de noms ne sont pas pris en charge.</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;body&gt;
+
+&lt;svg xmlns="http://www.w3.org/2000/svg"
+    xmlns:test="http://www.example.com/2014/test" width="40" height="40"&gt;
+  &lt;circle id="target" cx="12" cy="12" r="10" stroke="#444" stroke-width="2"
+      fill="none" test:foo="Foo value"/&gt;
+&lt;/svg&gt;
+
+&lt;script type="text/javascript"&gt;
+  var ns = 'http://www.example.com/2014/test';
+  var circle = document.getElementById( 'target' );
+  console.log('Attribute value: ' + circle.getAttribute('test:foo'));
+&lt;/script&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Les espaces de noms sont uniquement pris en charge dans les documents XML, Les documents HTML5 doivent utiliser à la place <code>getAttribute()</code> .</p>
+
+<p>La méthode <code>getAttributeNS</code> diffère de {{domxref("element.getAttribute()", "getAttribute()")}} en ce qu'elle permet de spécifier les attributs faisant partie d'un espace de noms particulier, comme dans l'exemple précédent, où l'attribut fait partie d'un espace de noms fictif « specialspace » de mozilla.</p>
+
+<p><span id="result_box" lang="fr"><span>Avant la spécification DOM4, cette méthode était spécifiée pour renvoyer une chaîne vide plutôt que null pour les attributs inexistants.</span> <span>Cependant, la plupart des navigateurs ont renvoyé null.</span> <span>À partir de DOM4, la spécification dit maintenant de retourner null.</span> <span>Cependant, certains navigateurs plus anciens renvoient une chaîne vide.</span> <span>Pour cette raison, vous devez utiliser {{domxref("element.hasAttributeNS ()","hasAttributeNS ()")}} pour vérifier l'existence d'un attribut avant d'appeler <code>getAttributeNS()</code> s'il est possible que l'attribut demandé n'existe pas</span> <span>sur l'élément spécifié.</span></span></p>
+
+<p>{{ DOMAttributeMethods() }}</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("DOM WHATWG", "#dom-element-getattributens", "Element.getAttributeNS()")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM3 Core", "#ID-ElGetAttrNS", "Element.getAttributeNS()")}}</td>
+   <td>{{Spec2("DOM3 Core")}}</td>
+   <td>Specifie qu'une exception <code>NOT_SUPPORTED_ERR</code>  <span class="short_text" id="result_box" lang="fr"><span>est levée si l'agent utilisateur ne supporte pas la fonctionnalité</span></span> <code>"XML"</code>. <span id="result_box" lang="fr"><span>Spécifie également que <code>null</code> doit être passé pour n'avoir aucun espace de noms.</span></span></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Core", "#ID-ElGetAttrNS", "Element.getAttributeNS()")}}</td>
+   <td>{{Spec2("DOM2 Core")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Element.getAttributeNS")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/Add-ons/Code_snippets/getAttributeNS">Code snippets:getAttributeNS</a></li>
+</ul>
diff --git a/files/fr/web/api/element/getboundingclientrect/index.html b/files/fr/web/api/element/getboundingclientrect/index.html
new file mode 100644
index 0000000000..ba2e4c2a85
--- /dev/null
+++ b/files/fr/web/api/element/getboundingclientrect/index.html
@@ -0,0 +1,119 @@
+---
+title: element.getBoundingClientRect
+slug: Web/API/Element/getBoundingClientRect
+tags:
+  - API
+  - CSSOM
+  - Méthode
+  - Référence(2)
+translation_of: Web/API/Element/getBoundingClientRect
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La méthode <code><strong>Element.getBoundingClientRect()</strong></code> retourne un objet {{domxref("DOMRect")}} fournissant des informations sur la taille d'un élément et sa position relative par rapport à la <a href="/fr/docs/Glossaire/Viewport">zone d'affichage</a>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><var>objetRect</var> = <var>object</var>.getBoundingClientRect();
+</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>La valeur de retour est un objet <code><a href="/fr/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDOMClientRect">DOMRect</a></code> qui est le plus petit rectangle contenant l'élément en entier, incluant sa zone de remplissage et la largeur de sa bordure. Les propriétés <code>left</code>, <code>top</code>, <code>right</code>, <code>bottom</code>, <code>x</code>, <code>y</code>, <code>width</code>, et <code>height</code>, décrivent la position et la taille du rectangle en pixels. Les propriétés autres que <code>width</code> et <code>height</code> sont relatives au coin en haut à gauche de la zone d'affichage.<img alt="Schéma d'un élément dans sa zone de remplissage, décrivant les propriétés retournées par la méthode." src="https://mdn.mozillademos.org/files/17155/element-box-diagram.png" style="height: 1099px; width: 1466px;"></p>
+
+<p>Les propriétés <code>width</code> et <code>height</code> de l'objet {{domxref("DOMRect")}} retourné par la méthode incluent le <code>padding</code> et <code>border-width</code>, et non pas seulement la largeur/hauteur du contenu. Avec le modèle standard de boîte, cela correspondrait à la propriété <code>width</code> ou <code>height</code> de l'élément + <code>padding</code> + <code>border-width</code>. Mais si <code><a href="/fr/docs/Web/CSS/box-sizing">box-sizing: border-box</a></code> est définit pour l'élément, cela correpondrait seulement <code>width</code> ou <code>height</code>.</p>
+
+<p>La valeur retournée peut être conceptualisée comme l'union des rectangles retournés par {{domxref("Element.getClientRects", "getClientRects()")}} pour l'élément, i.e. les boîtes de bordure CSS associées à l'élément.</p>
+
+<p>Les boîtes de bordure vides sont complètement ignorées. Si toutes les boîtes de bordure associées à l'élément sont vides, la méthode renvoie alors un rectangle pour lequel <code>width</code> et <code>height</code> valent 0 et où <code>top</code> et <code>left</code> correspondent au coin en haut à gauche de la première boîte de bordure (dans l'ordre du contenu) de l'élément.</p>
+
+<p>La distance de défilement qui a été parcourue dans la zone d'affichage (ou n'importe quel élément que l'on peut faire défiler) est prise en compte pour calculer le rectangle de délimitation. Cela signifie que les côtés du rectangle de délimitation (<code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>) change ses valeurs à chaque fois que la position de défilement change (parce que les valeurs sont relatives à la zone d'affichage et ne sont pas absolues).</p>
+
+<p>Si vous avez besoin d'un rectangle de délimitation relatif au coin supérieur gauche du document, ajoutez simplement la position actuelle de défilement aux propriétés <code>top</code> et <code>left</code> (elles peuvent être obtenues en utilisant {{domxref("window.scrollX")}} et {{domxref("window.scrollY")}}) pour avoir un rectangle de délimitation indépendant de la position de défilement actuelle.</p>
+
+<h3 id="Solution_de_prise_en_charge_multi-navigateurs">Solution de prise en charge multi-navigateurs</h3>
+
+<p>Les scripts qui doivent avoir une haute compatibilité pour l'ensemble des navigateurs peuvent utiliser <code>window.pageXOffset</code> et <code>window.pageYOffset</code> plutôt que <code>window.scrollX</code> et <code>window.scrollY.</code> Les scripts qui ne peuvent pas utiliser <code>window.pageXOffset</code>, <code>window.pageYOffset</code>, <code>window.scrollX</code> ou <code>window.scrollY</code> pourront utiliser cette méthode :</p>
+
+<pre class="brush:js notranslate">// Pour scrollX
+(((t = document.documentElement) || (t = document.body.parentNode))
+  &amp;&amp; typeof t.ScrollLeft == 'number' ? t : document.body).ScrollLeft
+// Pour scrollY
+(((t = document.documentElement) || (t = document.body.parentNode))
+  &amp;&amp; typeof t.ScrollTop == 'number' ? t : document.body).ScrollTop
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Ce simple exemple récupère l'objet <code>DOMRect</code> représentant le rectangle de délimitation dans le client d'un simple élément div, et affiche ses propriétés dessous.</p>
+
+<pre class="brush:html notranslate">&lt;div&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush:css notranslate">div {
+  width: 400px;
+  height: 200px;
+  padding: 20px;
+  margin: 50px auto;
+  background: purple;
+}</pre>
+
+<pre class="brush:js notranslate">let elem = document.querySelector('div');
+let rect = elem.getBoundingClientRect();
+for (var key in rect) {
+  if(typeof rect[key] !== 'function') {
+    let para = document.createElement('p');
+    para.textContent  = `${ key } : ${ rect[key] }`;
+    document.body.appendChild(para);
+  }
+}</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("CSSOM View", "#dom-element-getboundingclientrect", "Element.getBoundingClientRect()")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Notes">Notes</h3>
+
+<p>L'objet <code>DOMRect</code> retourné peut être modifié dans les navigateurs modernes. Cela n'était pas le cas avec ceux plus anciens qui retournaient effectivement <code>DOMRectReadOnly</code>. Dans IE et Edge, ne pas pouvoir ajouter les propriétés manquantes à l'objet <a href="https://msdn.microsoft.com/en-us/library/hh826029(VS.85).aspx">ClientRect </a>qu'ils retournent empêche d'ajouter le support de <code>x</code> et <code>y</code>.</p>
+
+<p>En raison de problèmes de comptabilité (voir ci-dessous), il est plus sûr de se limiter aux propriétés <code>top</code>, <code>left</code>, <code>right</code>, et <code>bottom</code>.</p>
+
+<p>Les propriétés dans l'objet <code>DOMRect</code> retourné ne sont pas possèdées pas ce dernier. Tandis que les opérateurs <code>in</code> et <code>for...in</code> vont trouver les propriétés retournées, les autres APIs comme Object.keys échoueront. De plus, et de façon inattendue, les fonctionnalités ES2015 et plus récentes telles que <code>Object.assign()</code> et les paramètres du reste / la décomposition d'un objet, ne réussiront pas à copier les propriétés retournées.</p>
+
+<pre class="brush:js notranslate">rect = elt.getBoundingClientRect()
+// The result in emptyObj is {}
+emptyObj = Object.assign({}, rect)
+emptyObj = { ...rect }
+{ width, ...emptyObj } = rect</pre>
+
+<p>Les propriétés <code>top</code>, <code>left</code>, <code>right</code>, et <code>bottom</code> de <code>DOMRect</code> sont calculées en utilisant les valeurs des autres propriétés de l'objet.</p>
+
+<ul>
+</ul>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{Compat("api.Element.getBoundingClientRect")}}</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Element.getClientRects", "getClientRects()")}}</li>
+ <li><a href="https://msdn.microsoft.com/en-us/library/ms536433(VS.85).aspx">MSDN: <code>getBoundingClientRect</code></a></li>
+ <li><a href="https://msdn.microsoft.com/en-us/library/hh826029(VS.85).aspx">MSDN: <code>ClientRect</code></a>, une version plus ancienne de <code>DOMRect</code></li>
+</ul>
diff --git a/files/fr/web/api/element/getelementsbyclassname/index.html b/files/fr/web/api/element/getelementsbyclassname/index.html
new file mode 100644
index 0000000000..6db517f757
--- /dev/null
+++ b/files/fr/web/api/element/getelementsbyclassname/index.html
@@ -0,0 +1,71 @@
+---
+title: Element.getElementsByClassName()
+slug: Web/API/Element/getElementsByClassName
+tags:
+  - API
+  - Classes
+  - Element
+  - Method
+  - Reference
+  - getElementByClassName
+translation_of: Web/API/Element/getElementsByClassName
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La méthode <strong><code>Element.getElementsByClassName()</code></strong> retourne une {{domxref("HTMLCollection")}} contenant une référence sur tous les éléments ayant les noms de classes passés en paramètre. Quand la méthode est appelée sur l'objet document, la recherche s'effectue dans le document complet, noeud racine compris.</p>
+
+<p>À l'instar de la méthode {{domxref("Document.getElementsByClassName", "Document.getElementsByClassName()")}} qui agit sur le document entier ; elle va retourner les descendants de l'élément spécifié comme document root qui auront les noms de classes passés en paramètre.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>var <em>elements</em></var> = <em>element</em>.getElementsByClassName(<em>names</em>);</pre>
+
+<ul>
+ <li><em><var>elements</var></em> est une {{ domxref("HTMLCollection") }} de référence vers les élements trouvés.</li>
+ <li><em><var>names</var></em> est une chaine représentant la liste des noms de classes à trouver; les noms de classes sont séparés par un espace.</li>
+ <li><em>element</em> est n'importe quel {{domxref("Element")}} du document.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Obtient tous les élements ayant une classe <code>test</code>:</p>
+
+<pre class="brush: js">element.getElementsByClassName('test');</pre>
+
+<p>Obtient tous les élements ayant à la fois la classe <code>red</code> et la classe <code>test</code>:</p>
+
+<pre class="brush: js">element.getElementsByClassName('red test');</pre>
+
+<p>Obtient tous les élements qui ont une classe <code>test</code>, à l'intérieur d'un élement qui a pour id <code>main</code>:</p>
+
+<pre class="brush: js">document.getElementById('main').getElementsByClassName('test');</pre>
+
+<p>On peut aussi utiliser les méthodes de {{jsxref("Array.prototype")}} sur chaque {{ domxref("HTMLCollection") }} en passant la <code><var>HTMLCollection</var></code> comme valeur <var>this</var> de la méthode. Ci-dessous on trouvera tous les {{HTMLElement("div")}} avec une classe <code>test</code>:</p>
+
+<pre class="brush: js">var testElements = document.getElementsByClassName('test');
+var testDivs = Array.prototype.filter.call(testElements, function(testElement){
+    return testElement.nodeName === 'div';
+});</pre>
+
+<h2 id="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('DOM WHATWG', '#dom-element-getelementsbyclassname', 'Element.getElementsByClassName()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer à ces données, veuillez consulter le site <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.Element.getElementsByClassName")}}</p>
diff --git a/files/fr/web/api/element/getelementsbytagname/index.html b/files/fr/web/api/element/getelementsbytagname/index.html
new file mode 100644
index 0000000000..db034104c0
--- /dev/null
+++ b/files/fr/web/api/element/getelementsbytagname/index.html
@@ -0,0 +1,143 @@
+---
+title: element.getElementsByTagName
+slug: Web/API/Element/getElementsByTagName
+tags:
+  - API
+  - DOM
+  - Element
+  - Méthode
+  - Reference
+translation_of: Web/API/Element/getElementsByTagName
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La méthode <code><strong>Element.getElementsByTagName()</strong></code> retourne une liste des éléments portant le <a href="https://developer.mozilla.org/fr/docs/Web/API/Element/tagName" title="fr/DOM/element.tagName">nom de balise</a> donné. La recherche porte sur le sous-arbre de l'élément spécifié, à l'exception de cet élément lui-même. La liste retournée est <em>live</em>, c'est à dire qu'elle se met à jour automatiquement à chaque changement de l'arbre DOM. Par conséquent, il n'est pas nécessaire d'appeller plusieurs fois  <code>Element.getElementsByTagName()</code>  avec le même élément et les mêmes arguments.</p>
+
+<p>Quand elle est appelée sur un élément HTML dans un document HTML, <code>getElementsByTagName </code><span id="result_box" lang="fr"><span>place son argument en minuscule avant de continuer.</span> <span>Cela n'est pas souhaitable lorsque vous tentez de faire correspondre des éléments SVG "</span></span> camel-cased" <span lang="fr"><span> dans une sous-arborescence dans un document HTML.</span> <span>{{domxref("Element.getElementsByTagNameNS()")}} fonctionne dans ce cas.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span><code>Element.getElementsByTagName</code> est similaire à {{domxref("Document.getElementsByTagName()")}}, à part que sa recherche est limitée aux éléments qui sont des descendants de l'élément spécifié.</span></span></p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><code><em>elements</em> = <em>element</em>.getElementsByTagName(<em>tagName</em>)</code></pre>
+
+<ul>
+ <li><code>elements</code>  est une {{domxref("HTMLCollection")}} contenant les éléments trouvés, dans l'ordre dans lequel ils apparaissent dans le sous-arbre. Si aucun élément n'a été trouvé, la <code>HTMLCollection</code> est vide.</li>
+ <li><code>element</code> est l'élément depuis lequel la recherche doit commencer. Notez que seuls les descendants de cet élément feront partie des résultats, mais pas l'élément lui-même.</li>
+ <li><code>tagName</code>  est le nom qualifié à rechercher. La chaîne spéciale <code>"*"</code> représente tous les éléments possibles. Pour la compatibilité avec XHTML, les minuscules doivent être utilisées.</li>
+</ul>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="comment token">// vérifie l'alignement sur un nombre de cellules dans un tableau. </span>
+<span class="keyword token">var</span> table <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"forecast-table"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> cells <span class="operator token">=</span> table<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">"td"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token">&lt;</span> cells<span class="punctuation token">.</span>length<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">var</span> status <span class="operator token">=</span> cells<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span><span class="function token">getAttribute</span><span class="punctuation token">(</span><span class="string token">"data-status"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">if</span> <span class="punctuation token">(</span> status <span class="operator token">==</span> <span class="string token">"open"</span> <span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        <span class="comment token">// saisit les données </span>
+    <span class="punctuation token">}</span>
+<span class="punctuation token">}</span></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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-element-getelementsbytagname', 'Element.getElementsByTagName()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Change la valeur de retour de {{domxref("NodeList")}} à{{domxref("HTMLCollection")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-1938918D', 'Element.getElementsByTagName()')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Pas de changement par rapport à {{SpecName('DOM2 Core')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-1938918D', 'Element.getElementsByTagName()')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Pas de changement par rapport à {{SpecName('DOM1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-1938918D', 'Element.getElementsByTagName()')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0 [2]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatVersionUnknown() }} [1]</td>
+   <td>5.5</td>
+   <td>{{ CompatVersionUnknown() }} [2]</td>
+   <td>{{ CompatVersionUnknown() }} [2]</td>
+  </tr>
+  <tr>
+   <td>getElementsByTagName("*")</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>6.0</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatVersionUnknown() }} [1]</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] <span class="short_text" id="result_box" lang="fr"><span>Avant Firefox 19, cette méthode retournait une</span></span> {{domxref("NodeList")}} ; <span id="result_box" lang="fr"><span>il a ensuite été modifié pour refléter le changement de spécification.</span></span></p>
+
+<p>[2] Initiallement, la méthode retournait une {{domxref("NodeList")}} ; <span id="result_box" lang="fr"><span>il a ensuite été modifié pour refléter le changement de spécification.</span></span></p>
+</div>
+
+<p> </p>
diff --git a/files/fr/web/api/element/getelementsbytagnamens/index.html b/files/fr/web/api/element/getelementsbytagnamens/index.html
new file mode 100644
index 0000000000..9348f8eb5a
--- /dev/null
+++ b/files/fr/web/api/element/getelementsbytagnamens/index.html
@@ -0,0 +1,77 @@
+---
+title: Element.getElementsByTagNameNS()
+slug: Web/API/Element/getElementsByTagNameNS
+tags:
+  - API
+  - DOM
+  - Element
+  - Méthode
+  - Reference
+translation_of: Web/API/Element/getElementsByTagNameNS
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La méthode <code><strong>Element.getElementsByTagNameNS()</strong></code> renvoie un objet {{domxref("HTMLCollection")}} <span id="result_box" lang="fr"><span>avec le nom de balise donné appartenant à l'espace de noms donné. Elle est semblable à la méthode</span></span> {{Domxref("Document.getElementsByTagNameNS")}} mais cette dernière recherche sur l'ensemble du document tandis que <code>getElementsByTagNameNS()</code> recherche parmi les descendants de l'élément courant.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="eval"><em>elements</em> =<em> element</em>.getElementsByTagNameNS(<em>namespaceURI</em>,<em>localName</em>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>namespaceURI</code></dt>
+ <dd>L'URI de l'espace de noms des éléments à rechercher (cf. <code><a href="/fr/docs/Web/API/Element/namespaceURI">namespaceURI</a></code>). Par exemple, si vous recherchez des éléments XHTML, utilisez l'URI d'espace de noms XHTML, <code><span class="nowiki">http://www.w3.org/1999/xhtml</span></code>.</dd>
+ <dt><code>localName</code></dt>
+ <dd>Le nom local des éléments à rechercher ou la valeur spéciale <code>"*"</code> (correspondant à tous les éléments). Voir {{domxref("Node.localName")}}.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une collection {{domxref("HTMLCollection")}} des éléments trouvés, dans l'ordre d'apparition dans l'arbre du DOM.</p>
+
+<h2 id="Exemple" name="Exemple">Exemples</h2>
+
+<pre class="brush: js">// vérifie l'alignement d'une série de cellules d'un tableau dans un document XHTML.
+var table = document.getElementById("forecast-table");
+var cells = table.getElementsByTagNameNS("<span class="plain">http://www.w3.org/1999/xhtml</span>", "td");
+for (var i = 0; i &lt; cells.length; i++) {
+  var axis = cells[i].getAttribute("axis");
+  if (axis == "year") {
+    // saisit les données
+  }
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-element-getelementsbytagnamens', 'Element.getElementsByTagNameNS()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Modification du type de la valeur de retour : passage de {{domxref("NodeList")}} à {{domxref("HTMLCollection")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-A6C90942', 'Element.getElementsByTagNameNS()')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Aucune modification depuis {{SpecName('DOM2 Core')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-A6C90942', 'Element.getElementsByTagNameNS()')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Element.getElementsByTagNameNS")}}</p>
diff --git a/files/fr/web/api/element/hasattribute/index.html b/files/fr/web/api/element/hasattribute/index.html
new file mode 100644
index 0000000000..2f1ab2a913
--- /dev/null
+++ b/files/fr/web/api/element/hasattribute/index.html
@@ -0,0 +1,127 @@
+---
+title: element.hasAttribute
+slug: Web/API/Element/hasAttribute
+tags:
+  - API
+  - DOM
+  - Element
+  - Méthode
+  - Reference
+translation_of: Web/API/Element/hasAttribute
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La méthode  <strong><code>Element.hasAttribute()</code></strong>  renvoie une <strong>valeur booléenne</strong> indiquant si l'élément courant possède l'attribut spécifié ou non.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>var <em>result</em></var> = <em><var>element</var></em>.hasAttribute(<em><var>name</var></em>);
+</pre>
+
+<dl>
+ <dt><code>result</code></dt>
+ <dd>récupère la valeur de retour <code>true</code> ou <code>false</code>.</dd>
+ <dt><code>name</code></dt>
+ <dd>est une chaine de caractères représentant le nom de l'attribut.</dd>
+</dl>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre class="brush:js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> foo <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"foo"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">if</span> <span class="punctuation token">(</span>foo<span class="punctuation token">.</span><span class="function token">hasAttribute</span><span class="punctuation token">(</span><span class="string token">"bar"</span><span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="comment token">// faire quelque chose</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h2 id="Notes" name="Notes">Polyfill</h2>
+
+<pre class="brush:js line-numbers  language-js"><code class="language-js"><span class="punctuation token">;</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>prototype<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    prototype<span class="punctuation token">.</span>hasAttribute <span class="operator token">=</span> prototype<span class="punctuation token">.</span>hasAttribute <span class="operator token">||</span> <span class="keyword token">function</span><span class="punctuation token">(</span>name<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        <span class="keyword token">return</span> <span class="operator token">!</span><span class="operator token">!</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>attributes<span class="punctuation token">[</span>name<span class="punctuation token">]</span> <span class="operator token">&amp;&amp;</span>
+                  <span class="keyword token">this</span><span class="punctuation token">.</span>attributes<span class="punctuation token">[</span>name<span class="punctuation token">]</span><span class="punctuation token">.</span>specified<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>Element<span class="punctuation token">.</span>prototype<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>{{DOMAttributeMethods}}</p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</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('DOM WHATWG', '#dom-element-hasattribute', 'Element.hasAttribute()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Dans {{SpecName('DOM3 Core')}}, déplacé de {{domxref("Node")}} à {{domxref("Element")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-ElHasAttr', 'Element.hasAttribute()')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Pas de changement par rapport à {{SpecName('DOM2 Core')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-ElHasAttr', 'Element.hasAttribute()')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Définition initiale.</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>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>8.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fr/web/api/element/hasattributens/index.html b/files/fr/web/api/element/hasattributens/index.html
new file mode 100644
index 0000000000..d927bbc3c3
--- /dev/null
+++ b/files/fr/web/api/element/hasattributens/index.html
@@ -0,0 +1,54 @@
+---
+title: element.hasAttributeNS
+slug: Web/API/Element/hasAttributeNS
+tags:
+  - API
+  - Attributs
+  - DOM
+  - Element
+  - Méthodes
+translation_of: Web/API/Element/hasAttributeNS
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<h2 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h2>
+
+<p><code>hasAttributeNS</code> renvoie une valeur booléenne indiquant si l'élément courant possède ou non l'attribut spécifié.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="eval line-numbers  language-html"><code class="language-html">result =
+element.hasAttributeNS(
+namespace,
+localName)</code></pre>
+
+<dl>
+ <dt><code>result</code></dt>
+ <dd>Une valeur booléenne <code>true</code> ou <code>false</code>.</dd>
+ <dt><code>namespace</code></dt>
+ <dd>Une chaîne spécifiant l'espace de noms de l'attribut.</dd>
+ <dt><code>localName</code></dt>
+ <dd>Le nom de l'attribut.</dd>
+</dl>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre class="eval">// Vérifie que l'attribut existe
+// avant de définir une valeur
+var d = document.getElementById("div1");
+if (d.hasAttributeNS(
+        <span class="nowiki">"http://www.mozilla.org/ns/specialspace/"</span>,
+        "special-align")) {
+   d.setAttribute("align", "center");
+}
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>{{ DOMAttributeMethods() }}</p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElHasAttrNS">DOM Level 2 Core: hasAttributeNS (en)</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-ElHasAttrNS">traduction en français</a> (non normative)</small></li>
+</ul>
diff --git a/files/fr/web/api/element/hasattributes/index.html b/files/fr/web/api/element/hasattributes/index.html
new file mode 100644
index 0000000000..1699e0d651
--- /dev/null
+++ b/files/fr/web/api/element/hasattributes/index.html
@@ -0,0 +1,81 @@
+---
+title: element.hasAttributes
+slug: Web/API/Element/hasAttributes
+tags:
+  - API
+  - DOM
+  - Element
+  - Méthode
+  - Reference
+  - polyfill
+translation_of: Web/API/Element/hasAttributes
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p>La méthode <strong><code>hasAttributes()</code></strong>, rattachée à l'interface {{domxref("Element")}}, renvoie une valeur booléenne indiquant si le nœud courant a au moins un attribut ou non.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:js">var result = element.hasAttributes();</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<dl>
+ <dt><code>result</code></dt>
+ <dd>contient la valeur de retour <code>true</code> ou <code>false</code>.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush:js ">var foo = document.getElementById("foo");
+if (foo.hasAttributes()) {
+    // faire quelque chose avec 'foo.attributes'
+}</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<pre class="brush:js ">;(function(prototype) {
+    prototype.hasAttributes = prototype.hasAttributes || function() {
+        return (this.attributes.length &gt; 0);
+    }
+})(Element.prototype);</pre>
+
+<h2 id="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("DOM WHATWG", "#dom-element-hasattributes", "Element.hasAttributes()")}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Déplacé de l'interface {{domxref("Node")}} vers l'interface plus spécialisée {{domxref("Element")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core','#ID-NodeHasAttrs','hasAttributes()')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Pas de changement par rapport à {{SpecName("DOM2 Core")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core','#ID-NodeHasAttrs','hasAttributes()')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Définition initiale, sur l'interface {{domxref("Node")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Element.hasAttributes")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Element.attributes")}}</li>
+ <li>{{domxref("Element.hasAttribute()")}}</li>
+</ul>
diff --git a/files/fr/web/api/element/id/index.html b/files/fr/web/api/element/id/index.html
new file mode 100644
index 0000000000..2dd8fedbfb
--- /dev/null
+++ b/files/fr/web/api/element/id/index.html
@@ -0,0 +1,122 @@
+---
+title: element.id
+slug: Web/API/Element/id
+tags:
+  - API
+  - DOM
+  - Element
+  - Propriété
+  - Reference
+translation_of: Web/API/Element/id
+---
+<p>{{ApiRef("DOM")}}</p>
+
+<p>La propriété  <strong><code>Element.id</code></strong> représente l'identifiant de l'élément, reflétant l' <strong><a href="https://developer.mozilla.org/fr/docs/Web/HTML/Attributs_universels/id">id</a></strong> global de l'attribut.</p>
+
+<p><span id="result_box" lang="fr"><span>Il doit être unique dans un document et est souvent utilisé pour extraire l'élément en utilisant {{domxref("document.getElementById","getElementById")}}.</span> <span>Les autres utilisations courantes de <code>id</code> comprennent l'utilisation de l'<a href="https://developer.mozilla.org/fr/docs/Web/CSS/S%C3%A9lecteurs_d_ID">ID de l'élément en tant que sélecteur</a> lors de la mise en forme du document avec <a href="https://developer.mozilla.org/fr/docs/Web/CSS">CSS</a>.</span></span></p>
+
+<div class="note">
+<p><strong><span lang="fr"><span>Note : </span></span></strong> <span id="result_box" lang="fr"><span>Les identifiants sont sensibles à la casse, mais vous devez éviter de créer des ID qui ne diffèrent que par la casse (voir <a href="https://developer.mozilla.org/fr/docs/Archive/Case_Sensitivity_in_class_and_id_Names">Sensibilité à la casse dans les noms de classe et d'identifiant</a>).</span></span></p>
+</div>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>idStr</em> = <em>elt</em>.id; // Obtenez l'identifiant
+<em>elt</em>.id = <em>idStr; // Définir l'identifiant</em></pre>
+
+<ul>
+ <li><code>idStr</code> est l'identifiant de l'élément.</li>
+</ul>
+
+<h2 id="Spécification">Spécification</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('DOM WHATWG', '#dom-element-id', 'id')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Pas de changement par rapport à {{SpecName('DOM2 HTML')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-63534901', 'id')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>Pas de changement par rapport à {{SpecName('DOM1')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-63534901', 'id')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'attribut global <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Attributs_universels/id"><strong>id</strong></a> de DOM.</li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/web/api/element/index.html b/files/fr/web/api/element/index.html
new file mode 100644
index 0000000000..aa58fc3ea5
--- /dev/null
+++ b/files/fr/web/api/element/index.html
@@ -0,0 +1,812 @@
+---
+title: element
+slug: Web/API/Element
+tags:
+  - API
+  - DOM
+  - Elements
+  - Interface
+  - Reference
+  - Web API
+translation_of: Web/API/Element
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><strong><code>Element</code></strong> est la classe de base la plus générale à partir de laquelle tous les objets d'un {{domxref("Document")}} héritent. <span>Il n'a que des méthodes et des propriétés communes à tous les types d'éléments.</span> <span>Les classes plus spécifiques héritent d'<code>Element</code>.</span> <span>Par exemple, l'interface {{domxref("HTMLElement")}} est l'interface de base pour les éléments HTML, tandis que l'interface {{domxref ("SVGElement")}} est la base de tous les éléments SVG.</span> <span>La plupart des fonctionnalités sont spécifiées plus bas dans la hiérarchie des classes.</span></p>
+
+<p>Les langages en dehors du domaine de la plate-forme Web, comme XUL via l'interface <code>XULElement</code>, implémentent également <code>Element</code>.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em><span>Hérite des propriétés de son interface parent {{domxref("Node")}} et, par extension, du parent de cette interface {{domxref("EventTarget")}}.</span> <span>Il implémente les propriétés de {{domxref("ParentNode")}}, </span></em> <em>{{domxref("ChildNode")}},</em> <em><span> {{domxref("NonDocumentTypeChildNode")}} et {{domxref("Animatable")}}.</span></em></p>
+
+<dl>
+ <dt>{{domxref("Element.attributes")}} {{readOnlyInline}}</dt>
+ <dd>Retourne un objet {{domxref("NamedNodeMap")}} contenant les attributs assignés de l'élément HTML correspondant.</dd>
+ <dt>{{domxref("Element.classList")}} {{readOnlyInline}}</dt>
+ <dd>Retourne une {{domxref("DOMTokenList")}} contenant la liste des attributs de classe.</dd>
+ <dt>{{domxref("Element.className")}}</dt>
+ <dd>est une {{domxref("DOMString")}} représentant la classe de l'élément.</dd>
+ <dt>{{domxref("Element.clientHeight")}} {{experimental_inline}} {{readOnlyInline}}</dt>
+ <dd>Retourne un {{jsxref("Number")}}  représentant la hauteur intérieure de l'élément.</dd>
+ <dt>{{domxref("Element.clientLeft")}} {{readOnlyInline}}</dt>
+ <dd>Retourne un {{jsxref("Number")}}  représentant la largeur de la bordure gauche de l'élément.</dd>
+ <dt>{{domxref("Element.clientTop")}} {{readOnlyInline}}</dt>
+ <dd>Retourne un {{jsxref("Number")}} représentant la largeur de la bordure haut de l'élément.</dd>
+ <dt>{{domxref("Element.clientWidth")}} {{readOnlyInline}}</dt>
+ <dd>Retourne un {{jsxref("Number")}} représentant la largeur intérieure de l'élément.</dd>
+ <dt>{{domxref("Element.computedName")}} {{readOnlyInline}}</dt>
+ <dd>Retourne une {{domxref("DOMString")}}  contenant l'étiquette affichée pour l'accessibilité.</dd>
+ <dt>{{domxref("Element.computedRole")}} {{readOnlyInline}}</dt>
+ <dd>Retourne une {{domxref("DOMString")}} contenant le rôle ARIA qui a été appliqué à un élément particulier.</dd>
+ <dt>{{domxref("Element.id")}}</dt>
+ <dd>est une {{domxref("DOMString")}} représentant l'id <em>(identifiant)</em> de l'élément.</dd>
+ <dt>{{domxref("Element.innerHTML")}}</dt>
+ <dd>Est une {{domxref("DOMString")}} représentant la partie locale du nom qualifié de l'élément.</dd>
+ <dt>{{ domxref("Element.localName") }} {{readOnlyInline}}</dt>
+ <dd>une {{domxref("DOMString")}} représentant la partie locale du nom qualifié de l'élément.</dd>
+ <dt>{{domxref("Element.namespaceURI")}} {{readonlyInline}}</dt>
+ <dd>L'URI d'espace de noms de l'élément, ou <code>null</code> s'il n'est pas un espace de noms.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note :</strong> Dans Firefox 3.5 et versions antérieures, les éléments HTML ne sont pas dans un espace de noms. <span>Dans les versions ultérieures, les éléments HTML se trouvent dans l'espace de noms <code><a class="linkification-ext external external-icon" href="http://www.w3.org/1999/xhtml" title="Linkification: http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a></code> <span lang="fr"><span> dans les arborescences HTML et XML. </span></span> {{gecko_minversion_inline("1.9.2")}}</span></p>
+</div>
+
+<dl>
+ <dt>{{domxref("NonDocumentTypeChildNode.nextElementSibling")}} {{readOnlyInline}}</dt>
+ <dd>est un {{domxref("Element")}} suivant immédiatement dans l'arbre celui donné, ou <code>null</code> s'il n'y a pas de noeud frère.</dd>
+ <dt>{{domxref("Element.outerHTML")}}</dt>
+ <dd>Est une {{domxref("DOMString")}} représentant le balisage de l'élément, y compris son contenu. <span>Lorsqu'il est utilisé en tant qu'initiateur, remplace l'élément par des nœuds analysés à partir de la chaîne donnée.</span></dd>
+ <dt>{{DOMxRef("Element.part")}}</dt>
+ <dd>Représente le ou les identifiants <code>part</code> de l'élément (c'est-à-dire définis en utilisant l'attribut <code>part</code>), retournés dans un {{domxref("DOMTokenList")}}.</dd>
+ <dt>{{domxref("Element.prefix")}} {{readOnlyInline}}</dt>
+ <dd>Une {{domxref("DOMString")}} représentant le préfixe de l'espace de noms de l'élément, ou <code>null</code> si aucun préfixe n'est spécifié.</dd>
+ <dt>{{domxref("NonDocumentTypeChildNode.previousElementSibling")}} {{readOnlyInline}}</dt>
+ <dd>Est un {{domxref("Element")}}, celui précédant immédiatement dans l'arbre l'élément donné, ou <code>null</code> s'il n'y a pas d'élément frère.</dd>
+ <dt>{{domxref("Element.scrollHeight")}} {{readOnlyInline}}</dt>
+ <dd>Retourne un {{jsxref("Number")}} représentant <span class="short_text" id="result_box" lang="fr"><span>la hauteur de vue de défilement d'un élément.</span></span></dd>
+ <dt>{{domxref("Element.scrollLeft")}}</dt>
+ <dd>Est un {{jsxref("Number")}} représentant <span class="short_text" id="result_box" lang="fr"><span>le décalage de défilement gauche de l'élément.</span></span></dd>
+ <dt>{{domxref("Element.scrollLeftMax")}} {{non-standard_inline}} {{readOnlyInline}}</dt>
+ <dd>Retourne un {{jsxref("Number")}}  représentant le décalage maximum de défilement gauche possible pour l'élément.</dd>
+ <dt>{{domxref("Element.scrollTop")}}</dt>
+ <dd>Est un {{jsxref("Number")}} représentant le décalage de défilement haut de l'élément.</dd>
+ <dt>{{domxref("Element.scrollTopMax")}} {{non-standard_inline}} {{readOnlyInline}}</dt>
+ <dd>Retourne un {{jsxref("Number")}} représentant le décalage maximum de défilement haut possible pour l'élément.</dd>
+ <dt>{{domxref("Element.scrollWidth")}} {{readOnlyInline}}</dt>
+ <dd>Retourne un {{jsxref("Number")}} représentant la largeur de vue de défilement de l'élément.</dd>
+ <dt>{{domxref("Element.shadowRoot")}} {{readOnlyInline}}</dt>
+ <dd>Renvoie la racine shadow la plus jeune hébergée par l'élément.</dd>
+ <dt>{{DOMxRef("Element.openOrClosedShadowRoot")}} {{Non-standard_Inline}}{{readOnlyInline}}</dt>
+ <dd>Retourne la racine fantôme qui a l'élément pour hôte, qu'elle soit ouverte ou fermée. <strong>Disponible seulement pour les <a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a>.</strong></dd>
+ <dt>{{domxref("Element.slot")}} {{experimental_inline}}</dt>
+ <dd>Renvoie le nom de l'emplacement du DOM shadow attaché à l'élément. <span>Un emplacement (<em>slot</em>) est un espace réservé dans un composant web que les utilisateurs peuvent remplir avec leur propre balisage.</span></dd>
+ <dt>{{domxref("Element.tabStop")}} {{non-standard_inline}}</dt>
+ <dd>Est un {{jsxref("Boolean")}} indiquant si l'élément peut recevoir un focus d'entrée via la touche de tabulation.</dd>
+ <dt>{{domxref("Element.tagName")}} {{readOnlyInline}}</dt>
+ <dd>Retourne une {{domxref("String")}} avec le nom de la balise pour l'élément donné.</dd>
+ <dt>{{domxref("Element.undoManager")}} {{experimental_inline}} {{readOnlyInline}}</dt>
+ <dd>Retourne le {{domxref("UndoManager")}} associé à l'élément.</dd>
+ <dt>{{domxref("Element.undoScope")}} {{experimental_inline}}</dt>
+ <dd>Est un {{jsxref("Boolean")}} indiquant si l'élément <span class="short_text" id="result_box" lang="fr"><span>est un hôte de portée d'annulation, ou non.</span></span></dd>
+</dl>
+
+<div class="note">
+<p><strong>Note :</strong>  DOM niveau 3 définit <code>namespaceURI</code>, <code>localName</code> et <code>prefix </code>sur l'interface {{domxref("Node")}}. Dans DOM4, ils ont été déplacés dans <code>Element</code>.</p>
+
+<p>Ce changement est implémenté dans Chrome depuis la version 46.0 et Firefox à partir de la version 48.0.</p>
+</div>
+
+<h3 id="Propriété_inclue_dans_Slotable">Propriété inclue dans "Slotable"</h3>
+
+<p><em>L'interface <code>Element</code> inclut la propriété suivante, définie sur le "mixin" </em> <em>{{domxref("Slotable")}}. </em></p>
+
+<dl>
+ <dt>{{domxref("Slotable.assignedSlot")}}{{readonlyInline}}</dt>
+ <dd>renvoie un {{domxref("HTMLSlotElement")}} représentant le {{htmlelement("slot")}} sur lequel le noeud est inséré.</dd>
+</dl>
+
+<h2 id="M.C3.A9thodes" name="M.C3.A9thodes">Méthodes</h2>
+
+<p><em>Hérite des méthodes de son parent {{domxref ("Node")}} et de son propre parent {{domxref ("EventTarget")}}, et implémente celles de {{domxref("ParentNode")}}, </em> <em><em>{{domxref("ChildNode")}}</em></em> <em><span lang="fr">, {{domxref("NonDocumentTypeChildNode")}} et {{domxref("Animatable")}}.</span></em></p>
+
+<dl>
+ <dt>{{domxref("EventTarget.addEventListener()")}}</dt>
+ <dd>enregistre sur l'élément un gestionnaire d'évènements propre à un type d'évènements.</dd>
+ <dt>{{domxref("Element.attachShadow()")}}</dt>
+ <dd>Attache un arbre DOM shadow à l'élément spécifié et renvoie une référence à sa {{domxref("ShadowRoot")}} (<em>racine</em>).</dd>
+ <dt>{{domxref("Element.animate()")}} {{experimental_inline}}</dt>
+ <dd>Une méthode raccourcie pour créer et exécuter une animation sur un élément. <span class="short_text" id="result_box" lang="fr"><span>Renvoie l'instance d'objet Animation créée.</span></span></dd>
+ <dt>{{domxref("Element.closest()")}}</dt>
+ <dd>Retourne l'{{domxref("Element")}} qui est l'ancêtre le plus proche de l'élément courant (ou l'élément courant lui-même) qui correspond aux sélecteurs donnés dans le paramètre.</dd>
+ <dt>{{domxref("Element.createShadowRoot()")}} {{experimental_inline}} {{deprecated_inline()}}</dt>
+ <dd>Crée un <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM">shadow DOM</a> sur l'élément, <span class="short_text" id="result_box" lang="fr"><span>le transforme en un hôte fantôme.</span> <span>Renvoie un </span></span> {{domxref("ShadowRoot")}}.</dd>
+ <dt>{{DOMxRef("Element.computedStyleMap()")}} {{Experimental_Inline}}</dt>
+ <dd>Retourne une interface {{DOMxRef("StylePropertyMapReadOnly")}} fournissant une représentation en lecture seule d'un bloc de déclaration de règles CSS. Il s'agit d'une alternative à {{DOMxRef("CSSStyleDeclaration")}}.</dd>
+ <dt>{{domxref("EventTarget.dispatchEvent()")}}</dt>
+ <dd>Répartit un évènement sur ce noeud dans le DOM et renvoie un {{jsxref("Boolean")}} qui indique qu'au-moins un gestionnaire ne l'a pas annulé.</dd>
+ <dt>{{domxref("Element.getAnimations()")}} {{experimental_inline}}</dt>
+ <dd>Renvoie un tableau d'objets Animation actuellement actifs sur l'élément.</dd>
+ <dt>{{domxref("Element.getAttribute()")}}</dt>
+ <dd>Retrouve la valeur de l'attribut nommé depuis le noeud courant et le retourne comme un {{jsxref("Object")}}.</dd>
+ <dt>{{domxref("Element.getAttributeNames()")}}</dt>
+ <dd>Retourne un tableau des noms d'attribut de l'élément courant.</dd>
+ <dt>{{domxref("Element.getAttributeNS()")}}</dt>
+ <dd>Retrouve la valeur de l'attribut avec le nom spécifié et l'espace de noms, depuis le noeud courant, et le retourne comme un {{jsxref("Object")}}.</dd>
+ <dt>{{domxref("Element.getBoundingClientRect()")}}</dt>
+ <dd>Retourne la taille d'un élément et ses positions relatives au "viewport".</dd>
+ <dt>{{domxref("Element.getClientRects()")}}</dt>
+ <dd>Retourne une collection de rectangles qui indiquent les rectangles de délimitation pour chaque ligne de texte dans un client.</dd>
+ <dt>{{domxref("Element.getElementsByClassName()")}}</dt>
+ <dd>Retourne une {{domxref("HTMLCollection")}} qui contient tous les descendants de l'élément courant qui possèdent la liste des classes donnée dans le paramètre.</dd>
+ <dt>{{domxref("Element.getElementsByTagName()")}}</dt>
+ <dd>Renvoie une {{domxref ("HTMLCollection")}} contenant tous les éléments descendants, d'un nom de tag particulier, de l'élément en cours.</dd>
+ <dt>{{domxref("Element.getElementsByTagNameNS()")}}</dt>
+ <dd>Renvoie une {{domxref ("HTMLCollection")}} contenant tous les éléments descendants, d'un nom de balise particulier et d'un espace de nom, de l'élément en cours.</dd>
+ <dt>{{domxref("Element.hasAttribute()")}}</dt>
+ <dd>Retourne un {{jsxref("Boolean")}} indiquant si l'élément a un attribut spécifié ou non.</dd>
+ <dt>{{domxref("Element.hasAttributeNS()")}}</dt>
+ <dd>Retourne un {{jsxref("Boolean")}} indiquant si l'élément a un attribut spécifié, dans l'espace de noms spécifié, ou non.</dd>
+ <dt>{{domxref("Element.hasAttributes()")}}</dt>
+ <dd>Retourne un {{jsxref("Boolean")}} indiquant si l'élément a un ou plusieurs attributs HTML présents.</dd>
+ <dt>{{DOMxRef("Element.hasPointerCapture()")}}</dt>
+ <dd>Indique si l'élément sur lequel la méthode est invoquée a  une capture de pointeur pour le pointeur spécifié par son identifiant.</dd>
+ <dt>{{domxref("Element.insertAdjacentElement")}}</dt>
+ <dd>Insère un noeud d'élément donné à la position donnée par rapport à l'élément sur lequel il a été invoqué.</dd>
+ <dt>{{domxref("Element.insertAdjacentHTML")}}</dt>
+ <dd>Analyse le texte au format HTML ou XML et insère les nœuds résultants dans l'arborescence dans la position indiquée.</dd>
+ <dt>{{domxref("Element.insertAdjacentText")}}</dt>
+ <dd>Insère un noeud de texte donné à la position donnée par rapport à l'élément qui l'invoque.</dd>
+ <dt>{{domxref("Element.matches()")}}</dt>
+ <dd>Retourne un {{jsxref("Boolean")}} indiquant si l'élément serait sélectionné ou non par la chaîne de sélection spécifiée.</dd>
+ <dt>{{DOMxRef("Element.pseudo()")}} {{Experimental_Inline}}</dt>
+ <dd>Retourne un {{DOMxRef("CSSPseudoElement")}} représentant les pseudo-élément enfants correspondant au sélecteur de pseudo-élément fourni.</dd>
+ <dt>{{domxref("Element.querySelector()")}}</dt>
+ <dd>Retourne le premier {{domxref("Node")}} correspondant à la chaîne du sélecteur spécifiée par rapport à l'élément.</dd>
+ <dt>{{domxref("Element.querySelectorAll")}}</dt>
+ <dd>Retourne une {{domxref("NodeList")}} des noeuds qui correspondent à la chaîne du sélecteur par rapport à l'élément.</dd>
+ <dt>{{domxref("Element.releasePointerCapture")}}</dt>
+ <dd>Relâche (arrête) la capture de pointeur précédemment définie pour un {{domxref("PointerEvent","évènement pointeur")}} spécifique.</dd>
+ <dt>{{domxref("ChildNode.remove()")}} {{experimental_inline}}</dt>
+ <dd>Supprime l'élément de la liste des enfants de son parent.</dd>
+ <dt>{{domxref("Element.removeAttribute()")}}</dt>
+ <dd>Supprime l'attribut nommé du noeud courant.</dd>
+ <dt>{{domxref("Element.removeAttributeNS()")}}</dt>
+ <dd>Supprime l'attribut avec le nom et l'espace de nom spécifiés du noeud actuel.</dd>
+ <dt>{{domxref("EventTarget.removeEventListener()")}}</dt>
+ <dd>Supprime un écouteur d'évènement de l'élément.</dd>
+ <dt>{{domxref("Element.requestFullscreen()")}} {{experimental_inline}}</dt>
+ <dd>Demande de manière asynchrone au navigateur de mettre l'élément en plein écran.</dd>
+ <dt>{{domxref("Element.requestPointerLock()")}} {{experimental_inline}}</dt>
+ <dd>Permet de demander de manière asynchrone que le pointeur soit verrouillé sur l'élément donné.</dd>
+ <dt>{{domxref("Element.scroll()")}}</dt>
+ <dd>Défile vers les coordonnées fournises au sein d'un élément.</dd>
+ <dt>{{domxref("Element.scrollBy()")}}</dt>
+ <dd>Défile au sein d'un élément d'autant de pixels que demandé.</dd>
+ <dt>{{domxref("Element.scrollIntoView()")}} {{experimental_inline}}</dt>
+ <dd>Fait défiler la page jusqu'à ce que l'élément entre dans la vue.</dd>
+ <dt>{{domxref("Element.scrollTo()")}}</dt>
+ <dd>Défile vers les coordonnées fournises au sein d'un élément.</dd>
+ <dt>{{domxref("Element.setAttribute()")}}</dt>
+ <dd>Définit la valeur d'un attribut nommé du nœud actuel.</dd>
+ <dt>{{domxref("Element.setAttributeNS()")}}</dt>
+ <dd>Définit la valeur de l'attribut avec le nom et l'espace de noms spécifiés, à partir du nœud actuel.</dd>
+ <dt>{{domxref("Element.setCapture()")}} {{non-standard_inline}}</dt>
+ <dd>Configure la capture d'évènements de souris, en redirigeant tous les évènements de la souris vers cet élément.</dd>
+ <dt>{{domxref("Element.setPointerCapture()")}}</dt>
+ <dd>Désigne un élément spécifique en tant que cible de capture des futurs <a href="https://developer.mozilla.org/fr/docs/Web/API/Pointer_events">évènements de pointeur</a>.</dd>
+ <dt>{{DOMxRef("Element.toggleAttribute()")}}</dt>
+ <dd>Alterne un attribut booléen sur l'élément spécifié, le supprimant s'il est présent et l'ajoutant s'il est absent.</dd>
+ <dt>
+ <h3 id="Méthodes_obsolètes"><span lang="fr"><span>Méthodes obsolètes</span></span></h3>
+ </dt>
+ <dt>{{domxref("Element.getAttributeNode()")}}{{obsolete_inline}}</dt>
+ <dd>Retrouve la représentation du noeud de l'attribut nommé depuis le noeud courant et le retourne comme un {{domxref("Attr")}}.</dd>
+ <dt>{{domxref("Element.getAttributeNodeNS()")}}{{obsolete_inline}}</dt>
+ <dd>Retrouve la représentation du noeud de l'attibut avec le nom spécifié et l'espace de noms, depuis le noeud courant, et le retourne comme un {{domxref("Attr")}}.</dd>
+ <dt>{{domxref("Element.removeAttributeNode()")}} {{obsolete_inline}}</dt>
+ <dd>Supprime la représentation du noeud de l'attibut nommé du noeud actuel.</dd>
+ <dt>{{domxref("Element.setAttributeNode()")}} {{obsolete_inline}}</dt>
+ <dd>Définit la représentation de noeud de l'attribut nommé à partir du noeud actuel.</dd>
+ <dt>{{domxref("Element.setAttributeNodeNS()")}} {{obsolete_inline}}</dt>
+ <dd>Synchronise la représentation du nœud de l'attribut avec le nom et l'espace de noms spécifiés, à partir du nœud actuel.</dd>
+</dl>
+
+<h2 id="Évènements">Évènements</h2>
+
+<p><span class="tlid-translation translation" lang="fr"><span title="">Ecoute ces évènements en utilisant</span></span> <code>addEventListener()</code> ou en assignant un <span class="tlid-translation translation" lang="fr"><span title="">écouteur d'évènement</span></span> (event listener) au <code>on<em>eventname</em></code> propriété de cette interface.</p>
+
+<dl>
+ <dt>{{domxref("Element/cancel_event", "cancel")}}</dt>
+ <dd>Déclenche sur {{HTMLElement("dialog")}} lorsque l'utilisateur indique au navigateur qu'il souhaite fermer la boîte de dialogue en cours. Pour exemple, le navigateur peut déclencher cet évènement lorsque l'utilisateur appuie sur la touche <kbd>Esc</kbd> ou clique sur le bouton "Ferme le dialogue" <span class="tlid-translation translation" lang="fr"><span title="">qui fait partie de l'interface utilisateur du navigateur</span></span> .<br>
+ Aussi disponible via la propriété {{domxref("GlobalEventHandlers/oncancel", "oncancel")}}.</dd>
+ <dt>{{domxref("Element/error_event", "error")}}</dt>
+ <dd>Déclenché quand le chargement d'une ressource échoue, ou qu'elle ne peut pas être utilisée. Par exemple, il sera déclenché si un script contient une erreur d'exécution ou une image ne peut être trouvée ou est invalide.<br>
+ Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onerror", "onerror")}}.</dd>
+ <dt>{{domxref("Element/scroll_event", "scroll")}}</dt>
+ <dd>Déclenché quand la vue du document un élément a été défilé.<br>
+ Il est aussi disponible via la propriété {{DOMxRef("GlobalEventHandlers.onscroll", "onscroll")}}.</dd>
+ <dt>{{domxref("Element/select_event", "select")}}</dt>
+ <dd>Déclenché quand une portion de texte a été sélectionnée.<br>
+ Il est aussi disponible via la propriété {{DOMxRef("GlobalEventHandlers.onselect", "onselect")}}.</dd>
+ <dt>{{domxref("Element/show_event", "show")}}</dt>
+ <dd>Déclenché quand un évènement {{domxref("Element/contextmenu_event", "contextmenu")}} est lui-même déclenché et bouillonne jusqu'à un élément ayant un attribut <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/html/Global_attributes/contextmenu">contextmenu</a></code>. {{deprecated_inline}}<br>
+ Il est aussi disponible via la propriété {{DOMxRef("GlobalEventHandlers.onshow", "onshow")}}.</dd>
+ <dt>{{domxref("Element/wheel_event","wheel")}}</dt>
+ <dd>Déclenché quand l'utilisateur tourne une molette sur un appareil avec pointeur (typiquement, une souris).<br>
+ Il est aussi disponible via la propriété {{DOMxRef("GlobalEventHandlers.onwheel", "onwheel")}}.</dd>
+ <dt>
+ <h3 id="Évènements_du_presse-papiers">Évènements du presse-papiers</h3>
+ </dt>
+ <dt>{{domxref("Element/copy_event", "copy")}}</dt>
+ <dd><span class="tlid-translation translation" lang="fr"><span title="">Déclenché lorsque l'utilisateur lance une action de copie via l'interface utilisateur du navigateur.</span></span><br>
+ Aussi disponible via la propiété {{domxref("HTMLElement/oncopy", "oncopy")}}.</dd>
+ <dt>{{domxref("Element/cut_event", "cut")}}</dt>
+ <dd><span class="tlid-translation translation" lang="fr"><span title="">Déclenché lorsque l'utilisateur lance une action de couper via l'interface utilisateur du navigateur.</span></span><br>
+ Aussi disponible via la propriété {{domxref("HTMLElement/oncut", "oncut")}}.</dd>
+ <dt>{{domxref("Element/paste_event", "paste")}}</dt>
+ <dd><span class="tlid-translation translation" lang="fr"><span title="">Déclenché lorsque l'utilisateur lance une action de coller via l'interface utilisateur du navigateur.</span></span><br>
+ Aussi disponible via la propriété {{domxref("HTMLElement/onpaste", "onpaste")}}.</dd>
+ <dt>
+ <h3 id="Évènements_de_composition">Évènements de composition</h3>
+ </dt>
+ <dt>{{domxref("Element/compositionend_event", "compositionend")}}</dt>
+ <dd><span class="tlid-translation translation" lang="fr"><span title="">Déclenché quand un système de composition de </span></span>texte tel qu'un {{glossary("input method editor")}} complète ou annule la session actuelle de composition.</dd>
+ <dt>{{domxref("Element/compositionstart_event", "compositionstart")}}</dt>
+ <dd><span class="tlid-translation translation" lang="fr"><span title="">Déclenché quand un système de composition de </span></span>texte tel qu'un {{glossary("input method editor")}} démarre une nouvelle session de composition.</dd>
+ <dt>{{domxref("Element/compositionupdate_event", "compositionupdate")}}</dt>
+ <dd>Déclenché quand un nouveau caractère est reçu dans le contexte d'une session de composition de texte contrôlée par un système de composition de texte tel qu'un {{glossary("input method editor")}}.</dd>
+ <dt>
+ <h3 id="Évènements_de_focale">Évènements de focale</h3>
+ </dt>
+ <dt>{{domxref("Element/blur_event", "blur")}}</dt>
+ <dd>Déclenché quand un élément a perdu la focale.<br>
+ Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onblur", "onblur")}}.</dd>
+ <dt>{{domxref("Element/focus_event", "focus")}}</dt>
+ <dd>Déclenché quand un élément a obtenu la focale.<br>
+ Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onfocus", "onfocus")}}.</dd>
+ <dt>{{domxref("Element/focusin_event", "focusin")}}</dt>
+ <dd>Déclenché quand un élément est sur le point d'obtenir la focale.</dd>
+ <dt>{{domxref("Element/focusout_event", "focusout")}}</dt>
+ <dd>Déclenché quand un élément est sur le point de perdre la focale.</dd>
+ <dt>
+ <h3 id="Évènements_de_plein_écran">Évènements de plein écran</h3>
+ </dt>
+ <dt>{{domxref("Element/fullscreenchange_event", "fullscreenchange")}}</dt>
+ <dd>Envoyé à un {{domxref("Element")}} quand il transite vers ou depuis un état de <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API/Guide">plein écran</a>.<br>
+ Il est aussi disponible via la propriété {{domxref("Element.onfullscreenchange", "onfullscreenchange")}}.</dd>
+ <dt>{{domxref("Element/fullscreenerror_event", "fullscreenerror")}}</dt>
+ <dd>Envoyé à un <code>Element</code> si une erreur survient en tentant de passer vers ou de quitter le <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API/Guide">plein écran</a>.<br>
+ Il est aussi disponible via la propriété {{domxref("Element.onfullscreenerror", "onfullscreenerror")}}.</dd>
+ <dt>
+ <h3 id="Évènements_de_clavier">Évènements de clavier</h3>
+ </dt>
+ <dt><code>{{domxref("Element/keydown_event", "keydown")}}</code></dt>
+ <dd>Déclenché quand une touche est pressée.<br>
+ Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onkeydown", "onkeydown")}}.</dd>
+ <dt><code>{{domxref("Element/keypress_event", "keypress")}}</code></dt>
+ <dd>Déclenché quand une touche produit un caractère est pressée. {{deprecated_inline}}<br>
+ Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onkeypress", "onkeypress")}}.</dd>
+ <dt><code>{{domxref("Element/keyup_event", "keyup")}}</code></dt>
+ <dd>Déclenché quand une touche est relâchée.<br>
+ Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onkeyup", "onkeyup")}}.</dd>
+ <dt>
+ <h3 id="Évènements_de_souris">Évènements de souris</h3>
+ </dt>
+ <dt>{{domxref("Element/auxclick_event", "auxclick")}}</dt>
+ <dd>Déclenché quand un bouton secondaire d'un appareil de pointage (par exemple, tout bouton d'une souris autre que le gauche) est pressé et relâché sur le même élément.<br>
+ Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onauxclick", "onauxclick")}}.</dd>
+ <dt>{{domxref("Element/click_event", "click")}}</dt>
+ <dd>Déclenché quand un bouton d'un appareil de pointage (par exemple, le clic gauche d'une souris) est pressé et relâché sur le même élément.<br>
+ Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onclick", "onclick")}}.</dd>
+ <dt>{{domxref("Element/contextmenu_event", "contextmenu")}}</dt>
+ <dd>Déclenché quand l'utilisateur tente d'ouvrir un menu contextuel.<br>
+ Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/oncontextmenu", "oncontextmenu")}}.</dd>
+ <dt>{{domxref("Element/dblclick_event", "dblclick")}}</dt>
+ <dd>Déclenché quand un bouton d'un appareil de pointage (par exemple, le clic gauche d'une souris) est cliqué deux fois sur le même élément.<br>
+ Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/ondblclick", "ondblclick")}}.</dd>
+ <dt>{{domxref("Element/DOMActivate_event", "DOMActivate")}} {{Deprecated_Inline}}</dt>
+ <dd>Déclenché quand un élément est activé, par exemple, par le biais d'un clic de souris ou d'une pression de touche sur un clavier.</dd>
+ <dt>{{domxref("Element/mousedown_event", "mousedown")}}</dt>
+ <dd>Déclenché quand un bouton d'un appareil de pointage est pressé sur un élément.<br>
+ Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onmousedown", "onmousedown")}}.</dd>
+ <dt>{{domxref("Element/mouseenter_event", "mouseenter")}}</dt>
+ <dd>Déclenché quand un appareil de pointage (généralement une souris) est déplacé à l'intérieur de l'élément sur lequel l'écouteur est attaché.<br>
+ Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onmouseenter", "onmouseenter")}}.</dd>
+ <dt>{{domxref("Element/mouseleave_event", "mouseleave")}}</dt>
+ <dd>Déclenché quand un appareil de pointage est déplacé à l'extérieur de l'élément sur lequel l'écouteur est attaché.<br>
+ Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onmouseleave", "onmouseleave")}}.</dd>
+ <dt>{{domxref("Element/mousemove_event", "mousemove")}}</dt>
+ <dd>Déclenché quand un appareil de pointage est déplacé au sein de l'élément sur lequel l'écouteur est attaché.<br>
+ Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onmousemove", "onmousemove")}}.</dd>
+ <dt>{{domxref("Element/mouseout_event", "mouseout")}}</dt>
+ <dd>Déclenché quand un appareil de pointage est déplacé à l'extérieur de l'élément sur lequel l'écouteur est attaché ou sur un de ses enfants.<br>
+ Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onmouseout", "onmouseout")}}.</dd>
+ <dt>{{domxref("Element/mouseover_event", "mouseover")}}</dt>
+ <dd>Déclenché quand un appareil de pointage est déplacé au sein de l'élément sur lequel l'écouteur est attaché ou sur un de ses enfants.<br>
+ Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onmouseover", "onmouseover")}}.</dd>
+ <dt>{{domxref("Element/mouseup_event", "mouseup")}}</dt>
+ <dd>Déclenché quand un bouton d'un appareil de pointage est relâché sur un élément.<br>
+ Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onmouseup", "onmouseup")}}.</dd>
+ <dt>{{domxref("Element/webkitmouseforcechanged_event", "webkitmouseforcechanged")}}</dt>
+ <dd>Déclenché à chaque fois que le niveau de pression sur un écran tactile change.</dd>
+ <dt>{{domxref("Element/webkitmouseforcedown_event", "webkitmouseforcedown")}}</dt>
+ <dd>Déclenché après l'évènement de pression de bouton d'un appareil de pointage à la condition qu'une pression suffisante ait été produite pour la qualifier de "clic forcé".</dd>
+ <dt>{{domxref("Element/webkitmouseforcewillbegin_event", "webkitmouseforcewillbegin")}}</dt>
+ <dd>Déclenché avant l'évènement {{domxref("Element/mousedown_event", "mousedown")}}.</dd>
+ <dt>{{domxref("Element/webkitmouseforceup_event", "webkitmouseforceup")}}</dt>
+ <dd>Déclenché après l'évènement {{domxref("Element/webkitmouseforcedown_event", "webkitmouseforcedown")}} à la condition qu'une pression suffisamment en baisse ait été observée pour mettre fin au "clic forcé".</dd>
+ <dt>
+ <h3 id="Évènements_de_toucher">Évènements de toucher</h3>
+ </dt>
+ <dt>{{domxref("Element/touchcancel_event", "touchcancel")}}</dt>
+ <dd>Déclenché quand un ou plusieurs points de toucher ont été altérés d'une manière relative à l'implantation (par exemple, trop de points de contacts ont été créés).<br>
+ Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/ontouchcancel", "ontouchcancel")}}.</dd>
+ <dt>{{domxref("Element/touchend_event", "touchend")}}</dt>
+ <dd>Déclenché quand un ou plusieurs points de toucher sont retirés de la surface tactile.<br>
+ Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/ontouchend", "ontouchend")}}</dd>
+ <dt>{{domxref("Element/touchmove_event", "touchmove")}}</dt>
+ <dd>Déclenché quand un ou plusieurs points de toucher sont déplacés sur la surface tactile.<br>
+ Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/ontouchmove", "ontouchmove")}}</dd>
+ <dt>{{domxref("Element/touchstart_event", "touchstart")}}</dt>
+ <dd>Déclenché quand un plusieurs points de toucher sont placés sur la surface tactile.<br>
+ Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/ontouchstart", "ontouchstart")}}.</dd>
+</dl>
+
+<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("Web Animations", '', '')}}</td>
+   <td>{{Spec2("Web Animations")}}</td>
+   <td>Ajoute la méthode <code>getAnimations()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Undo Manager', '', 'Element')}}</td>
+   <td>{{Spec2('Undo Manager')}}</td>
+   <td>Ajoute les propriétés <code>undoScope</code> et <code>undoManager</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Events 2', '#extensions-to-the-element-interface', 'Element')}}</td>
+   <td>{{Spec2('Pointer Events 2')}}</td>
+   <td>Ajoute les gestionnaires d'évènements suivants : <code>ongotpointercapture</code> et<code>onlostpointercapture</code>.<br>
+    Ajoute les méthodes suivantes : <code>setPointerCapture()</code> et <code>releasePointerCapture()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Events', '#extensions-to-the-element-interface', 'Element')}}</td>
+   <td>{{Spec2('Pointer Events')}}</td>
+   <td>Ajoute les gestionnaires d'évènements suivants : <code>ongotpointercapture</code> et <code>onlostpointercapture</code>.<br>
+    Ajoute les méthodes suivantes : <code>setPointerCapture()</code> et <code>releasePointerCapture()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selectors API Level 1', '#interface-definitions', 'Element')}}</td>
+   <td>{{Spec2('Selectors API Level 1')}}</td>
+   <td>Ajoute les méthodes suivantes : <code>querySelector()</code> et <code>querySelectorAll()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Lock', 'index.html#element-interface', 'Element')}}</td>
+   <td>{{Spec2('Pointer Lock')}}</td>
+   <td>Ajoute la méthode<code>requestPointerLock()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fullscreen', '#api', 'Element')}}</td>
+   <td>{{Spec2('Fullscreen')}}</td>
+   <td>Ajoute la méthode <code>requestFullscreen().</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM Parsing', '#extensions-to-the-element-interface', 'Element')}}</td>
+   <td>{{Spec2('DOM Parsing')}}</td>
+   <td>Ajoute les propriétés suivantes : <code>innerHTML</code> et <code>outerHTML</code>.<br>
+    Ajoute les méthodes suivantes : <code>insertAdjacentHTML()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#extensions-to-the-element-interface', 'Element')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Ajoute les propriétés suivantes : <code>scrollTop</code>, <code>scrollLeft</code>, <code>scrollWidth</code>, <code>scrollHeight</code>, <code>clientTop</code>, <code>clientLeft</code>, <code>clientWidth</code> et <code>clientHeight</code>.<br>
+    Ajoute les méthodes suivantes : <code>getClientRects()</code>, <code>getBoundingClientRect()</code> et <code>scrollIntoView()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Element Traversal', '#ecmascript-bindings', 'Element')}}</td>
+   <td>{{Spec2('Element Traversal')}}</td>
+   <td>Ajoute l'héritage de l'interface {{domxref("ElementTraversal")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-element', 'Element')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Supprime les méthodes suivantes : <code>closest()</code>, <code>setIdAttribute()</code>, <code>setIdAttributeNS()</code>, et <code>setIdAttributeNode()</code>.<br>
+    Supprime la propriété <code>schemaTypeInfo</code>.<br>
+    Modifie la valeur retournée de <code>getElementsByTag()</code> et <code>getElementsByTagNS()</code>.<br>
+    Déplace <code>hasAttributes()</code> de l'interface <code>Node</code> ici.<br>
+    Insère<code>insertAdjacentElement()</code> et <code>insertAdjacentText()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-745549614', 'Element')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Ajoute les méthodes suivantes : <code>setIdAttribute()</code>, <code>setIdAttributeNS()</code> et <code>setIdAttributeNode()</code>. Ces méthodes n'ont jamais été implémentées et ont été supprimées dans des spécifications ultérieures.<br>
+    Ajoute la propriété <code>schemaTypeInfo</code>. Cette propriété n'a jamais été implémentée et a été supprimée dans des spécificationq ultérieures.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-745549614', 'Element')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>La méthode <code>normalize()</code> a été déplacée vers {{domxref("Node")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-745549614', 'Element')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td><code>children</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>7.0 with a significant bug [1]<br>
+    9.0 according to the spec</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>childElementCount</code>, <code>nextElementSibling</code>, <code>previousElementSibling</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>firstElementChild</code>, <code>lastElementChild</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>classList</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
+   <td></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>outerHTML</code> {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("11")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>clientLeft</code>, <code>clientTop</code> {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>getBoundingClientRect()</code>, <code>getClientRects()</code> {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>querySelector()</code>, <code>querySelectorAll()</code></td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>8.0</td>
+   <td>10.0</td>
+   <td>3.2 (525.3)</td>
+  </tr>
+  <tr>
+   <td><code>insertAdjacentHTML()</code> {{experimental_inline}}</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("8")}}</td>
+   <td>4.0</td>
+   <td>7.0</td>
+   <td>4.0 (527)</td>
+  </tr>
+  <tr>
+   <td><code>setCapture() </code>{{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("2")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>oncopy</code>, <code>oncut</code>, <code>onpaste</code> {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td></td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>onwheel</code> {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("17")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>ongotpointercapture</code>, <code>onlostpointercapture</code>, <code>setPointerCapture()</code>, and <code>releasePointerCapture()</code></td>
+   <td>{{CompatChrome(52.0)}} [4]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}} <sup>[3]</sup></td>
+   <td>10.0</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>matches()</code> {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}} with the non-standard name <code>webkitMatchesSelector</code></td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("webkit")}} {{property_prefix("ms")}}</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}} with the non-standard name <code>mozMatchesSelector</code><br>
+    {{CompatGeckoDesktop("34")}} with the standard name</td>
+   <td>9.0 with the non-standard name <code>msMatchesSelector</code></td>
+   <td>11.5 with the non-standard name <code>oMatchesSelector</code><br>
+    15.0 with the non-standard name <code>webkitMatchesSelector</code></td>
+   <td>5.0 with the non-standard name <code>webkitMatchesSelector</code></td>
+  </tr>
+  <tr>
+   <td><code>requestPointerLock()</code></td>
+   <td>16.0 {{property_prefix("webkit")}}, behind an about:flags<br>
+    22.0 {{property_prefix("webkit")}} (with special cases, progressively lifted see [2])</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("14")}}{{property_prefix("moz")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>requestFullscreen()</code></td>
+   <td>14.0 {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("10")}} {{property_prefix("moz")}}</td>
+   <td>11.0 {{property_prefix("ms")}}</td>
+   <td>12.10<br>
+    15.0 {{property_prefix("webkit")}}</td>
+   <td>5.1 {{property_prefix("webkit")}}</td>
+  </tr>
+  <tr>
+   <td><code>undoManager</code> and <code>undoScope</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}} (behind the <code>dom.undo_manager.enabled</code> pref)</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>attributes</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("22")}}<br>
+    Before this it was available via the {{domxref("Node")}} interface that any <code>element</code> inherits.</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>scrollTopMax()</code> and <code>scrollLeftMax()</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("16")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>closest()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("35")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>hasAttributes()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}} (on the {{domxref("Node")}} interface)<br>
+    {{CompatGeckoDesktop("35")}} (on this interface</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>insertAdjacentElement()</code>, <code>insertAdjacentText()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("48.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>assignedSlot</code>, <code>attatchShadow</code>, <code>shadowRoot</code>, and <code>slot</code></td>
+   <td>{{CompatChrome(53)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>computedRole</code> and <code>computedName</code></td>
+   <td>{{CompatChrome(41)}}[4]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>28[4]</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>1.0</td>
+   <td></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>1.0</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>scrollTopMax()</code> and <code>scrollLeftMax()</code></td>
+   <td>{{CompatNo}}</td>
+   <td></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("16")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>closest()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("35")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>hasAttributes()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("1.0")}} (on the {{domxref("Node")}} interface)<br>
+    {{CompatGeckoMobile("35")}} (on this interface</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>insertAdjacentElement()</code>, <code>insertAdjacentText()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("48.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>assignedSlot</code>, <code>attatchShadow</code>, <code>shadowRoot</code>, and <code>slot</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(53.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(53)}}</td>
+  </tr>
+  <tr>
+   <td><code>computedRole</code> and <code>computedName</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>28[4]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Internet Explorer 7 et 8 retourne incorrectement les commentaires dans le cadre des enfants d'un élément. <span>Ceci est corrigé dans Internet Explorer 9 et versions ultérieures.</span></p>
+
+<p>[2] Chrome 16 permet <code>webkitRequestPointerLock()</code> uniquement en plein écran ; Chrome 21 pour un site web de confiance (permission demandée) ; Chrome 22 autorise par défaut pour tous les documents de même origine ; Chrome 23 autorise dans le bac à sable {{HTMLElement("iframe")}} si la valeur non-standard <code>webkit-allow-pointer-lock</code> est définie dans l'attribut {{htmlattrxref("sandbox", "iframe")}}.</p>
+
+<p>[3] Implémentation <span class="short_text" id="result_box" lang="fr"><span>retiré.</span></span> Voir {{Bug("1166347")}}.</p>
+
+<p>[4] <span class="short_text" id="result_box" lang="fr"><span>Derrière une balise (flag).</span></span></p>
+
+<dl>
+ <dd></dd>
+</dl>
+
+<p><span class="comment">Devrait figurer sur une page traitant de NodeList  ; <a href="/fr/DOM/element.item">item</a>: Retrouve un nœud dans une &lt;code&gt;NodeList&lt;/code&gt; par son indice. (DOM Core, ne fait pas partie de l'interface &lt;code&gt;Element&lt;/code&gt;)</span> <span class="comment">?? ; <a href="/fr/DOM/element.supports">supports</a>: Teste si cette implémentation du DOM gère une fonctionnalité particulière. (DOM Core)</span></p>
diff --git a/files/fr/web/api/element/innerthtml/index.html b/files/fr/web/api/element/innerthtml/index.html
new file mode 100644
index 0000000000..6addb7d54e
--- /dev/null
+++ b/files/fr/web/api/element/innerthtml/index.html
@@ -0,0 +1,203 @@
+---
+title: element.innerHTML
+slug: Web/API/Element/innertHTML
+tags:
+  - API
+  - DOM
+  - Elements
+  - HTML
+  - Propriétés
+translation_of: Web/API/Element/innerHTML
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La propriété <strong><code>Element.innerHTML</code></strong> de {{domxref("Element")}} récupère ou définit la syntaxe HTML décrivant les descendants de l'élément.</p>
+
+<div class="note"><strong>Note: </strong>Si un nœud {{HTMLElement("div")}}, {{HTMLElement("span")}}, ou {{HTMLElement("noembed")}} a un sous-nœud de type texte contenant les caractères <code>(&amp;), (&lt;),</code> ou <code>(&gt;)</code>, <code>innerHTML</code> renverra à la place les chaînes suivantes : <code>"&amp;amp;"</code>, <code>"&amp;lt;"</code> et <code>"&amp;gt;"</code> respectivement. Utilisez {{domxref("Node.textContent")}} pour obtenir une copie exacte du contenu de ces nœuds.</div>
+
+<p>Pour insérer le HTML dans le document, plutôt que de remplacer le contenu d'un élément, utilisez la méthode {{domxref("Element.insertAdjacentHTML", "insertAdjacentHTML()")}}.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">const <em>content</em> = <em>element</em>.innerHTML;
+
+<em>element</em>.innerHTML = <em>htmlString</em>;
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une  {{domxref("DOMString")}} contenant la sérialisation HTML des descendants de l'élément. Définir la valeur de <code>innerHTML</code> supprime tous les descendants et les remplace par les noeuds construits en analysant le HTML donné dans la chaîne <code>htmlString</code>.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<dl>
+ <dt><code>SyntaxError</code></dt>
+ <dd>Une tentative a été faite de définir la valeur de <code>innerHTML</code> en utilisant une chaîne qui n'est pas correctement formée HTML.</dd>
+ <dt><code>NoModificationAllowedError</code></dt>
+ <dd>Une tentative a été faite d'insérer le code HTML dans un noeud dont le parent est un {{domxref("Document")}}.</dd>
+</dl>
+
+<h2 id="Notes_dutilisation">Notes d'utilisation</h2>
+
+<p>La propriété <code>innerHTML</code> peut être utilisée pour examiner la source HTML actuelle de la page, y compris tous les changements réalisés depuis son chargement initial.</p>
+
+<h3 id="Lecture_du_contenu_HTML_dun_élément">Lecture du contenu HTML d'un élément</h3>
+
+<p>La lecture de <code>innerHTML</code> amène l'agent utilisateur à sérialiser le fragment HTML ou XML composé des descendants de l'élément. La chaîne résultante est renvoyée.</p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">let</span> contents <span class="operator token">=</span> myElement<span class="punctuation token">.</span>innerHTML<span class="punctuation token">;</span></code></pre>
+
+<p>Cela vous permet de regarder le balisage HTML des nœuds de contenu de l'élément.</p>
+
+<div class="note">
+<p><span id="result_box" lang="fr"><span><strong>Note :</strong> Le fragment HTML ou XML renvoyé est généré en fonction du contenu actuel de l'élément. Il est donc probable que le balisage et la mise en forme du fragment renvoyé ne correspondent pas au balisage de la page d'origine.</span></span></p>
+</div>
+
+<h3 id="Remplacement_du_contenu_dun_élément">Remplacement du contenu d'un élément</h3>
+
+<p>Définir la valeur de <code>innerHTML</code> vous permet de remplacer aisément le contenu existant d'un élément par un nouveau contenu.</p>
+
+<p>Par exemple, vous pouvez effacer le contenu entier du document en effaçant le contenu de l'attribut {{domxref("Document.body", "body")}} du document.</p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js">document<span class="punctuation token">.</span>body<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> <span class="string token">""</span><span class="punctuation token">;</span></code></pre>
+
+<p>Cet exemple récupère le balisage HTML actuel du document et remplace les caractères <code>"&lt;"</code> par l'entité HTML <code>"&amp; lt;"</code>, convertissant ainsi essentiellement le code HTML en texte brut. Ceci est ensuite inclus dans un élément {{HTMLElement ("pre")}}. Puis, la valeur de <code>innerHTML</code> est modifiée dans cette nouvelle chaîne. Par conséquent, le contenu du document est remplacé par un affichage du code source entier de la page.</p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js">document<span class="punctuation token">.</span>documentElement<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> <span class="string token">"&lt;pre&gt;"</span> <span class="operator token">+</span>
+         document<span class="punctuation token">.</span>documentElement<span class="punctuation token">.</span>innerHTML<span class="punctuation token">.</span><span class="function token">replace</span><span class="punctuation token">(</span><span class="regex token">/&lt;/g</span><span class="punctuation token">,</span><span class="string token">"&amp;lt;"</span><span class="punctuation token">)</span> <span class="operator token">+</span>
+            <span class="string token">"&lt;/pre&gt;"</span><span class="punctuation token">;</span></code></pre>
+
+<h4 id="Détails_opérationnels">Détails opérationnels</h4>
+
+<p>Qu'arrive-t-il exactement quand vous définissez la valeur de <code>innerHTML</code> ?  Cela entraîne l'agent utilisateur à suivre ces étapes :</p>
+
+<ol>
+ <li>La valeur spécifiée est analysée en HTML ou XML (en fonction du type de document), ce qui donne un objet {{domxref ("DocumentFragment")}} représentant le nouvel ensemble de nœuds DOM pour les nouveaux éléments.</li>
+ <li>Si l'élément dont le contenu est remplacé est un élément {{HTMLElement ("template")}}, l'attribut {{domxref ("HTMLTemplateElement.content", "content")}} de l'élément <code>&lt;template&gt;</code> est remplacé par le nouveau <code>DocumentFragment</code> créé à l'étape 1.</li>
+ <li>Pour tous les autres éléments, le contenu de l'élément est remplacé par les noeuds du nouveau <code>DocumentFragment</code>.</li>
+</ol>
+
+<h3 id="Considérations_de_sécurité">Considérations de sécurité</h3>
+
+<p>Il n'est pas rare de voir <code>innerHTML</code> utilisé pour insérer du texte dans une page Web. Il est possible que ceci devienne un vecteur d'attaque sur un site, ce qui crée potentiellement un risque de sécurité.</p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">const</span> name <span class="operator token">=</span> <span class="string token">"John"</span><span class="punctuation token">;</span>
+<span class="comment token">// en supposant que 'el' est un élément de document HTML</span>
+el<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> name<span class="punctuation token">;</span> <span class="comment token">// inoffensif dans ce cas</span>
+
+<span class="comment token">// ...</span>
+
+name <span class="operator token">=</span> <span class="string token">"&lt;script&gt;alert('I am John in an annoying alert!')&lt;/script&gt;"</span><span class="punctuation token">;</span>
+el<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> name<span class="punctuation token">;</span> <span class="comment token">// inoffensif dans ce cas</span></code></pre>
+
+<p>Bien que cela puisse ressembler à une attaque {{interwiki ("wikipedia", "cross-site_scripting","cross-site scripting")}}, le résultat est inoffensif. HTML5 spécifie qu'une balise {{HTMLElement ("script")}} insérée avec <code>innerHTML</code> <a href="https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0">ne doit pas s'exécuter</a>.</p>
+
+<p>Cependant, il existe des moyens d'exécuter JavaScript sans utiliser les éléments {{HTMLElement ("script")}}, donc il existe toujours un risque de sécurité chaque fois que vous utilisez <code>innerHTML</code> pour définir des chaînes sur lesquelles vous n'avez aucun contrôle. Par exemple :</p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">const</span> name <span class="operator token">=</span> <span class="string token">"&lt;img src='x' onerror='alert(1)'&gt;"</span><span class="punctuation token">;</span>
+el<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> name<span class="punctuation token">;</span> <span class="comment token">// affiche l'alerte</span></code></pre>
+
+<p>Pour cette raison, il est recommandé de ne pas utiliser <code>innerHTML</code> pour insérer du texte brut ; à la place, utilisez {{domxref("Node.textContent")}}. Cela n'analyse pas le contenu passé en HTML, mais l'insère à la place en tant que texte brut.</p>
+
+<div class="warning">
+<p><strong>Attention :</strong> <span id="result_box" lang="fr"><span>Si votre projet est soumis à une vérification de sécurité, l'utilisation de <code>innerHTML</code> entraînera probablement le rejet de votre code.</span> <span>Par exemple, si vous utilisez <code>innerHTML</code> dans une extension de navigateur et soumettez l'extension à addons.mozilla.org, elle ne passera pas le processus de révision automatique.</span></span></p>
+</div>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<p>Cet exemple utilise <code>innerHTML</code> pour créer un mécanisme pour consigner des messages dans une boîte sur une page Web.</p>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">log</span><span class="punctuation token">(</span>msg<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> logElem <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">".log"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="keyword token">var</span> time <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Date</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">var</span> timeStr <span class="operator token">=</span> time<span class="punctuation token">.</span><span class="function token">toLocaleTimeString</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  logElem<span class="punctuation token">.</span>innerHTML <span class="operator token">+</span><span class="operator token">=</span> timeStr <span class="operator token">+</span> <span class="string token">": "</span> <span class="operator token">+</span> msg <span class="operator token">+</span> <span class="string token">"&lt;br/&gt;"</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"Logging mouse events inside this container..."</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>La fonction <code>log()</code> crée la sortie du journal en récupérant l'heure actuelle à partir d'un objet {{jsxref ("Date")}} en utilisant {{jsxref ("Date.toLocaleTimeString", "toLocaleTimeString ()")}} et en créant une chaîne avec l'horodatage et le texte du message. Ensuite, le message est ajouté à la boîte avec la classe <code>"log"</code>.</p>
+
+<p>Nous ajoutons une seconde méthode qui enregistre des informations sur les événements basés sur {{domxref ("MouseEvent")}} (tels que {{event ("mousedown")}}, {{event ("click")}} et {{event ("mouseenter") }}) :</p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">logEvent</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> msg <span class="operator token">=</span> <span class="string token">"Event &lt;strong&gt;"</span> <span class="operator token">+</span> event<span class="punctuation token">.</span>type <span class="operator token">+</span> <span class="string token">"&lt;/strong&gt; at &lt;em&gt;"</span> <span class="operator token">+</span>
+            event<span class="punctuation token">.</span>clientX <span class="operator token">+</span> <span class="string token">", "</span> <span class="operator token">+</span> event<span class="punctuation token">.</span>clientY <span class="operator token">+</span> <span class="string token">"&lt;/em&gt;"</span><span class="punctuation token">;</span>
+  <span class="function token">log</span><span class="punctuation token">(</span>msg<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>Alors, nous utilisons ceci comme un gestionnaire d'évènements pour un certain nombre d'évènements de souris sur la boîte qui contient notre journal.</p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">var</span> boxElem <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">".box"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+boxElem<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"mousedown"</span><span class="punctuation token">,</span> logEvent<span class="punctuation token">)</span><span class="punctuation token">;</span>
+boxElem<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"mouseup"</span><span class="punctuation token">,</span> logEvent<span class="punctuation token">)</span><span class="punctuation token">;</span>
+boxElem<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"click"</span><span class="punctuation token">,</span> logEvent<span class="punctuation token">)</span><span class="punctuation token">;</span>
+boxElem<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"mouseenter"</span><span class="punctuation token">,</span> logEvent<span class="punctuation token">)</span><span class="punctuation token">;</span>
+boxElem<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"mouseleave"</span><span class="punctuation token">,</span> logEvent<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h3 id="HTML">HTML</h3>
+
+<p>Le HTML est assez simple pour notre exemple.</p>
+
+<pre class="brush: html line-numbers  language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>box<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>strong</span><span class="punctuation token">&gt;</span></span>Log:<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>strong</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>log<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p><span id="result_box" lang="fr"><span>Le {{HTMLElement ("div")}} avec la classe <code>"box"</code> est juste un conteneur pour la mise en page, présentant le contenu avec une boîte autour de lui.</span> <span>Le <code>&lt;div&gt;</code> dont la classe est <code>"log"</code> est le conteneur pour le texte du journal lui-même.</span></span></p>
+
+<h3 id="Notes" name="Notes">CSS</h3>
+
+<p>Les styles CSS suivants pour notre exemple de contenu.</p>
+
+<pre class="brush: css line-numbers  language-css notranslate"><code class="language-css"><span class="selector token"><span class="class token">.box</span> </span><span class="punctuation token">{</span>
+  <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">600</span>px<span class="punctuation token">;</span>
+  <span class="property token">height</span><span class="punctuation token">:</span> <span class="number token">300</span>px<span class="punctuation token">;</span>
+  <span class="property token">border</span><span class="punctuation token">:</span> <span class="number token">1</span>px solid black<span class="punctuation token">;</span>
+  <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">2</span>px <span class="number token">4</span>px<span class="punctuation token">;</span>
+  <span class="property token">overflow-y</span><span class="punctuation token">:</span> scroll<span class="punctuation token">;</span>
+  <span class="property token">overflow-x</span><span class="punctuation token">:</span> auto<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token"><span class="class token">.log</span> </span><span class="punctuation token">{</span>
+  <span class="property token">margin-top</span><span class="punctuation token">:</span> <span class="number token">8</span>px<span class="punctuation token">;</span>
+  <span class="property token">font-family</span><span class="punctuation token">:</span> monospace<span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>Le contenu résultant ressemble à ceci. Vous pouvez voir la sortie dans le journal en déplaçant la souris dans et hors de la boîte, en cliquant dedans, et ainsi de suite.</p>
+
+<p>{{EmbedLiveSample("Exemple", 640, 350)}}</p>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr style="background-color: rgb(255, 204, 255);">
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM Parsing', '#innerhtml', 'Element.innerHTML')}}</td>
+   <td>{{ Spec2('DOM Parsing') }}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="References" name="References">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Node.textContent")}} and {{domxref("Node.innerText")}}</li>
+ <li>{{domxref("Element.insertAdjacentHTML")}}</li>
+ <li>Analyse HTML dans une arborescence DOM : {{domxref("DOMParser")}}</li>
+ <li>Sérialisation XML ou HTML dans une arborescence DOM : {{domxref("XMLSerializer")}}</li>
+</ul>
diff --git a/files/fr/web/api/element/insertadjacentelement/index.html b/files/fr/web/api/element/insertadjacentelement/index.html
new file mode 100644
index 0000000000..2597358d00
--- /dev/null
+++ b/files/fr/web/api/element/insertadjacentelement/index.html
@@ -0,0 +1,127 @@
+---
+title: Element.insertAdjacentElement()
+slug: Web/API/Element/insertAdjacentElement
+tags:
+  - API
+  - DOM
+  - Element
+  - Insertion
+  - Méthodes
+translation_of: Web/API/Element/insertAdjacentElement
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La méthode <code>insertAdjacentElement()</code> insère un noeud d'élément donné à une position donnée<span id="result_box" lang="fr"><span> par rapport à l'élément sur lequel il est appelé.</span></span></p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre><em>targetElement</em>.insertAdjacentElement(<em>position</em>, <em>element</em>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>position</dt>
+ <dd>Un objet {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant la position par rapport à <code>targetElement</code> ; cela doit correspondre ( sans prendre en compte la casse ) à une des chaînes suivantes :
+ <ul>
+  <li><code style="color: red;">'beforebegin'</code> : Avant <code>targetElement</code> lui-même.</li>
+  <li><code style="color: green;">'afterbegin'</code> : A l'intérieur de <code>targetElement</code>, avant son premier enfant.</li>
+  <li><code style="color: blue;">'beforeend'</code> : A l'intérieur de <code>targetElement</code>, après son dernier enfant.</li>
+  <li><code style="color: magenta;">'afterend'</code> : Après <code>targetElement</code> lui-même.</li>
+ </ul>
+ </dd>
+ <dt>element</dt>
+ <dd>L'élément à insérer dans l'arbre.</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>L'élément inséré ou <code>null</code> si l'insertion a échouée.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Exception</th>
+   <th scope="col">Explications</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>SyntaxError</code></td>
+   <td>La <code>position</code> donnée n'est pas une valeur reconnue.</td>
+  </tr>
+  <tr>
+   <td><code>TypeError</code></td>
+   <td>L'<code>element</code> spécifié n'est pas un élément valide.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Visualisation_des_positionnements">Visualisation des positionnements</h3>
+
+<pre>&lt;!-- <strong><code style="color: red;">beforebegin</code></strong> --&gt;
+<code style="font-weight: bold;">&lt;p&gt;</code>
+&lt;!-- <strong><code style="color: green;">afterbegin</code></strong> --&gt;
+foo
+&lt;!-- <strong><code style="color: blue;">beforeend</code></strong> --&gt;
+<code style="font-weight: bold;">&lt;/p&gt;</code>
+&lt;!-- <strong><code style="color: magenta;">afterend</code></strong> --&gt;</pre>
+
+<div class="note"><strong>Note :</strong> Les positions <code>beforebegin</code> et <code>afterend</code> ne fonctionnent que si le noeud est dans l'arbre et s'il possède un élément parent.</div>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">beforeBtn.addEventListener('click', function() {
+  var tempDiv = document.createElement('div');
+  tempDiv.style.backgroundColor = randomColor();
+  if (activeElem) {
+    activeElem.insertAdjacentElement('beforebegin',tempDiv);
+  }
+  setListener(tempDiv);
+});
+
+afterBtn.addEventListener('click', function() {
+  var tempDiv = document.createElement('div');
+  tempDiv.style.backgroundColor = randomColor();
+  if (activeElem) {
+    activeElem.insertAdjacentElement('afterend',tempDiv);
+  }
+  setListener(tempDiv);
+});</pre>
+
+<p>Une démo de notre <a href="https://mdn.github.io/dom-examples/insert-adjacent/insertAdjacentElement.html">insertAdjacentElement.html</a> est disponible sur Github ( avec le <a href="https://github.com/mdn/dom-examples/blob/master/insert-adjacent/insertAdjacentElement.html">code source</a> ). Nous avons un ensemble d'éléments {{htmlelement("div")}} dans un conteneur. Quand un élément reçoit un clic, il est sélectionné et vous pouvez appuyer sur les boutons <em>Insert before</em> (<em>insérer avant</em>) et <em>Insert after</em> (<em>insérer après</em>) pour insérer de nouveaux divs avant ou après l'élement sélectionné en utilisant <code>insertAdjacentElement()</code>.</p>
+
+<h2 id="Specification" name="Specification">Spécification</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('DOM WHATWG', '#dom-element-insertadjacentelement', 'insertAdjacentElement()')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">La table de compatibilité sur cette page est génératée à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request.</em></div>
+
+<p>{{Compat("api.Element.insertAdjacentElement")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Element.insertAdjacentHTML()")}}</li>
+ <li>{{domxref("Element.insertAdjacentText()")}}</li>
+ <li>{{domxref("Node.insertBefore()")}}</li>
+ <li>{{domxref("Node.appendChild()")}} ( même effet que <code>beforeend</code> )</li>
+</ul>
diff --git a/files/fr/web/api/element/insertadjacenthtml/index.html b/files/fr/web/api/element/insertadjacenthtml/index.html
new file mode 100644
index 0000000000..cbf56853b6
--- /dev/null
+++ b/files/fr/web/api/element/insertadjacenthtml/index.html
@@ -0,0 +1,102 @@
+---
+title: element.insertAdjacentHTML
+slug: Web/API/Element/insertAdjacentHTML
+tags:
+  - API
+  - DOM
+  - Méthode
+  - Reference
+translation_of: Web/API/Element/insertAdjacentHTML
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><code>insertAdjacentHTML()</code> analyse le texte spécifié en tant que HTML ou XML et insère les noeuds résultants dans le DOM à la position spécifiée. L'élement qui est utilisé n'est pas  réanalysé et les élements qu'il contient ne sont donc pas corrompus. Ceci, et le fait d'éviter la sérialisation supplémentaire, rend la fonction plus rapide et directe que <strong><span style="font-family: courier new,andale mono,monospace;">innerHTML</span>.</strong></p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="line-numbers  language-html"><code class="language-html">element.insertAdjacentHTML(position, text);</code></pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>position</code> </dt>
+ <dd>une {{domxref("DOMString")}}  représentant la position relative à l'<code>element</code>, et doit être une des chaînes de caractères suivantes :</dd>
+</dl>
+
+<ul>
+ <li><code style="color: red;">'beforebegin'</code> : Avant l'<code>element</code>  lui-même.</li>
+ <li><code style="color: green;">'afterbegin'</code> : Juste à l'intérieur de l'<code>element</code> , avant son premier enfant.</li>
+ <li><code style="color: blue;">'beforeend'</code> : Juste à l'intérieur de l'<code>element</code> , après son dernier enfant.</li>
+ <li><code style="color: magenta;">'afterend'</code> : Après <code>element</code> lui-même.</li>
+</ul>
+
+<dl>
+ <dt><code>text</code></dt>
+ <dd> est la chaîne de caractères qui doit être analysée en tant qu'HTML ou XML et insérée dans l'arbre du DOM.</dd>
+</dl>
+
+<h3 id="Visualisation_des_noms_de_position">Visualisation des noms de position</h3>
+
+<div class="wp_syntax">
+<div class="code">
+<pre>&lt;!-- <strong><code style="color: red;">beforebegin</code></strong> --&gt;
+<code style="font-weight: bold;">&lt;p&gt;</code>
+  &lt;!-- <strong><code style="color: green;">afterbegin</code></strong> --&gt;
+  foo
+  &lt;!-- <strong><code style="color: blue;">beforeend</code></strong> --&gt;
+<code style="font-weight: bold;">&lt;/p&gt;</code>
+&lt;!-- <strong><code style="color: magenta;">afterend</code></strong> --&gt;</pre>
+</div>
+</div>
+
+<div class="note"><strong>Note :</strong> Les positions <code>beforebegin</code> et <code>afterend</code> ne fonctionnent que si le noeud est un arbre et a un élément parent.</div>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">// &lt;div id="one"&gt;one&lt;/div&gt;
+var d1 = document.getElementById('one');
+d1.insertAdjacentHTML('afterend', '&lt;div id="two"&gt;two&lt;/div&gt;');
+
+// Ici la nouvelle structure est :
+// &lt;div id="one"&gt;one&lt;/div&gt;&lt;div id="two"&gt;two&lt;/div&gt;</pre>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Notes</h2>
+
+<h3 id="Considérations_de_sécurité">Considérations de sécurité</h3>
+
+<p><span id="result_box" lang="fr"><span>Lorsque vous insérez du code HTML dans une page en utilisant insertAdjacentHTML, veillez à ne pas utiliser d'entrée utilisateur qui n'a pas été échappée.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span>Il est recommandé de ne pas utiliser <code>insertAdjacentHTML</code> lors de l'insertion de texte brut;</span> <span>à la place, utilisez la propriété <code>node.textContent</code> ou la méthode <code>node.insertAdjacentText()</code>.</span> <span>Cela n'interprète pas le contenu transmis au format HTML, mais l'insère à la place sous forme de texte brut.</span></span></p>
+
+<h2 id="Spécification">Spécification</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('DOM Parsing', '#widl-Element-insertAdjacentHTML-void-DOMString-position-DOMString-text', 'Element.insertAdjacentHTML()')}}</td>
+   <td>{{ Spec2('DOM Parsing') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">La table de compatibilité sur cette page est génératée à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request.</em></div>
+
+<p>{{Compat("api.Element.insertAdjacentHTML")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Element.insertAdjacentElement()")}}</li>
+ <li>{{domxref("Element.insertAdjacentText()")}}</li>
+ <li><a class="external external-icon" href="https://hacks.mozilla.org/2011/11/insertadjacenthtml-enables-faster-html-snippet-injection/">hacks.mozilla.org guest post</a><span class="external external-icon"> par Henri Sivonen </span> <span id="result_box" lang="fr"><span>y compris le benchmark montrant que insertAdjacentHTML peut être beaucoup plus rapide dans certains cas.</span></span></li>
+</ul>
diff --git a/files/fr/web/api/element/insertadjacenttext/index.html b/files/fr/web/api/element/insertadjacenttext/index.html
new file mode 100644
index 0000000000..5482756415
--- /dev/null
+++ b/files/fr/web/api/element/insertadjacenttext/index.html
@@ -0,0 +1,127 @@
+---
+title: Element.insertAdjacentText()
+slug: Web/API/Element/insertAdjacentText
+tags:
+  - API
+  - DOM
+  - Element
+  - Insertion
+  - Méthodes
+  - Texte
+translation_of: Web/API/Element/insertAdjacentText
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La méthode <code>insertAdjacentText()</code> insère un noeud texte donné à une position donnée par rapport à l'élément sur lequel elle est appelé.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre><em>element</em>.insertAdjacentText(<em>position</em>, <em>element</em>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>position</dt>
+ <dd>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant la position par rapport à l'<code>element</code> ; elle doit être l'une des chaînes suivantes :
+ <ul>
+  <li><code style="color: red;">'beforebegin'</code> : avant l'<code>element</code> lui-même ;</li>
+  <li><code style="color: green;">'afterbegin'</code><code style="color: green;"> </code>: à l'intérieur de l'<code>element</code>, avant son premier enfant ;</li>
+  <li><code style="color: blue;">'beforeend'</code> : à l'intérieur de l'<code>element</code>, avant son dernier enfant ;</li>
+  <li><code style="color: magenta;">'afterend'</code> : après l'<code>element</code> lui-même.</li>
+ </ul>
+ </dd>
+ <dt>element</dt>
+ <dd>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant le texte à insérer dans l'arbre.</dd>
+</dl>
+
+<h3 id="Valeur_renvoyée">Valeur renvoyée</h3>
+
+<p>Vide.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Exception</th>
+   <th scope="col">Explication</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>SyntaxError</code></td>
+   <td>La <code>position</code> indiquée n'est pas une valeur reconnue.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Visualisation_des_noms_de_position">Visualisation des noms de position</h3>
+
+<pre>&lt;!-- <strong><code style="color: red;">beforebegin</code></strong> --&gt;
+<code style="font-weight: bold;">&lt;p&gt;</code>
+&lt;!-- <strong><code style="color: green;">afterbegin</code></strong> --&gt;
+machin
+&lt;!-- <strong><code style="color: blue;">beforeend</code></strong> --&gt;
+<code style="font-weight: bold;">&lt;/p&gt;</code>
+&lt;!-- <strong><code style="color: magenta;">afterend</code></strong> --&gt;</pre>
+
+<div class="note"><strong>Note :</strong> Les positions <code>beforebegin</code> et <code>afterend</code> ne fonctionnent que si le noeud est dans l'arbre et possède un élément parent.</div>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">beforeBtn.addEventListener('click', function() {
+  para.insertAdjacentText('afterbegin',textInput.value);
+});
+
+afterBtn.addEventListener('click', function() {
+  para.insertAdjacentText('beforeend',textInput.value);
+});</pre>
+
+<p>Jetez un œil à notre démo <a href="https://mdn.github.io/dom-examples/insert-adjacent/insertAdjacentText.html">insertAdjacentText.html</a> sur GitHub (voir le <a href="https://github.com/mdn/dom-examples/blob/master/insert-adjacent/insertAdjacentText.html">code source</a> aussi). Ici, nous avons un simple paragraphe. Vous pouvez entrer du texte dans l'élément de formulaire, puis presser les boutons <em>Insert before</em> (<em>insère avant</em>) et <em>Insert after</em> (<em>insère après</em>) pour l'insérer avant ou après le texte de paragraphe existant en utilisant <code>insertAdjacentText()</code>. Notez que le nœud texte existant n'y est pas ajouté — d'autres nœuds de texte sont créés contenant le nouvel ajout.</p>
+
+<h2 id="Émulation">Émulation</h2>
+
+<p>Vous pouvez utiliser une émulation de la méthode <code>insertAdjacentText()</code> dans Internet Explorer 5.5 (et peut-être antérieur) et supérieur avec le code suivant :</p>
+
+<pre>if (!Element.prototype.insertAdjacentText)
+  Element.prototype.insertAdjacentText = function(type, txt){
+    this.insertAdjacentHTML(
+      type,
+      (txt+'') // convertir en chaîne de caractères
+        .replace(/&amp;/g, '&amp;amp;') // intégrer des symboles d'esperluette
+        .replace(/&lt;/g, '&amp;lt;') // intégrer les symboles "plus petit que"
+    )
+  }
+</pre>
+
+<h2 id="Specification" name="Specification">Spécification</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('DOM WHATWG', '#dom-element-insertadjacenttext', 'insertAdjacentText()')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">La table de compatibilité sur cette page est génératée à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request.</em></div>
+
+<p>{{Compat("api.Element.insertAdjacentText")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Element.insertAdjacentElement()")}}</li>
+ <li>{{domxref("Element.insertAdjacentHTML()")}}</li>
+</ul>
diff --git a/files/fr/web/api/element/localname/index.html b/files/fr/web/api/element/localname/index.html
new file mode 100644
index 0000000000..da09a1887e
--- /dev/null
+++ b/files/fr/web/api/element/localname/index.html
@@ -0,0 +1,154 @@
+---
+title: Element.localName
+slug: Web/API/Element/localName
+tags:
+  - API
+  - DOM
+  - Element
+  - Nom
+  - Propriétés
+  - XML
+  - local
+translation_of: Web/API/Element/localName
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La propriété en lecture seule <code><strong>Element.localName</strong></code> renvoie la partie locale du nom qualifié d'un élément.</p>
+
+<div class="note">
+<p>Dans les versions précédentes de la spécification DOM, cet API était défini dans l'interface {{domxref("Node")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>name</var> = <var>element</var>.localName
+</pre>
+
+<h3 id="Valeur_renvoyée">Valeur renvoyée</h3>
+
+<p>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant la partie locale du nom qualifié de l'élément.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>(Doit être servi avec un type de contenu XML, tel que <code>text/xml</code> ou <code>application/xhtml+xml</code>.)</p>
+
+<pre class="brush:xml">&lt;html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:svg="http://www.w3.org/2000/svg"&gt;
+&lt;head&gt;
+  &lt;script type="application/javascript"&gt;&lt;![CDATA[
+  function test() {
+    var text = document.getElementById('text');
+    var circle = document.getElementById('circle');
+
+    text.value = "&lt;svg:circle&gt; has:\n" +
+                 "localName = '" + circle.localName + "'\n" +
+                 "namespaceURI = '" + circle.namespaceURI + "'";
+  }
+  ]]&gt;&lt;/script&gt;
+&lt;/head&gt;
+&lt;body onload="test()"&gt;
+  &lt;svg:svg version="1.1"
+    width="100px" height="100px"
+    viewBox="0 0 100 100"&gt;
+    &lt;svg:circle cx="50" cy="50" r="30" style="fill:#aaa" id="circle"/&gt;
+  &lt;/svg:svg&gt;
+  &lt;textarea id="text" rows="4" cols="55"/&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Le nom local d'un noeud est la partie du nom qualifié du noeud qui arrive après le signe deux points. Les noms qualifiés sont typiquement utilisés dans XML comme partie de l'espace de noms des documents particuliers XML. Par exemple, dans le nom qualifié <code>ecomm:partners</code>, <code>partners</code> est le nom local et <code>ecomm</code> est le préfixe :</p>
+
+<pre class="brush:xml">&lt;ecomm:business id="soda_shop" type="brick_n_mortar" xmlns:ecomm="http://example.com/ecomm"&gt;
+  &lt;ecomm:partners&gt;
+    &lt;ecomm:partner id="1001"&gt;Tony's Syrup Warehouse
+    &lt;/ecomm:partner&gt;
+  &lt;/ecomm:partner&gt;
+&lt;/ecomm:business&gt;
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Dans {{Gecko("1.9.2")}} et antérieurs, la propriété renvoie la version majuscule du nom local pour les éléments HTML dans les DOM HTML (par opposition aux éléments XHTML dans les DOM XML). Dans les versions plus tardives, en conformité avec HTML5, la propriété renvoie dans la cas du stockage interne du DOM, en minuscule pour les éléments HTML dans les DOM HTML et les éléments XHTML dans les DOM XML. La propriété {{domxref("element.tagName","tagName")}} continue à renvoyer la casse majuscule pour les éléments HTML dans les DOM HTML.</p>
+</div>
+
+<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('DOM WHATWG', '#dom-element-localname', 'Element.localName')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>46.0<sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop("48.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("48.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Cet API était précédemment disponiblie sur l'API {{domxref("Node")}}.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Element.namespaceURI")}}</li>
+ <li>{{domxref("Element.prefix")}}</li>
+ <li>{{domxref("Attr.localName")}}</li>
+ <li>{{domxref("Node.localName")}}</li>
+</ul>
diff --git a/files/fr/web/api/element/matches/index.html b/files/fr/web/api/element/matches/index.html
new file mode 100644
index 0000000000..00ae129138
--- /dev/null
+++ b/files/fr/web/api/element/matches/index.html
@@ -0,0 +1,108 @@
+---
+title: Element.matches()
+slug: Web/API/Element/matches
+tags:
+  - API
+  - DOM
+  - Selector
+translation_of: Web/API/Element/matches
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p><code>La méthode<strong> </strong></code><strong><code>element.matches()</code></strong> renvoie <code>true</code> lorsque l'élément peut être sélectionné par le sélecteur défini par la chaîne passée en paramêtre; sinon, elle renvoie <code>false</code>.</p>
+
+<div class="warning">
+<p>Certains navigateurs implémentent cette méthode sous le nom <code>matchesSelector()</code> non-standardisé et préfixé.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>var result</em> = <em>element</em>.matches(selectorString);
+</pre>
+
+<ul>
+ <li><code>result</code> contient la valeur retournée <code>true</code> ou <code>false</code>.</li>
+ <li><code>selectorString</code> est une chaîne définissant le sélecteur à tester sur l'élément.</li>
+</ul>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>ul</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>birds<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>li</span><span class="punctuation token">&gt;</span></span>perroquet amazone<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>li</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>li</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>endangered<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>aigle des Philippines<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>li</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>li</span><span class="punctuation token">&gt;</span></span>pélican<span class="tag token"><span class="tag token"><span class="punctuation token"> blanc&lt;/</span>li</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>ul</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/javascript<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
+  <span class="keyword token">var</span> birds <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">'li'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token">&lt;</span> birds<span class="punctuation token">.</span>length<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">if</span> <span class="punctuation token">(</span>birds<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span><span class="function token">matches</span><span class="punctuation token">(</span><span class="string token">'.endangered'</span><span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'Le - '</span> <span class="operator token">+</span> birds<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>textContent <span class="operator token">+</span> <span class="string token">'- est en voie de disparition !'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+  <span class="punctuation token">}</span>
+</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p>Ce code affichera l'alerte "Le - aigle des Philippines - est en voie de disparition !" sur la console, puisque l'élèment possède l'attribut<code> class </code>de valeur <code>endangered</code>.</p>
+
+<h2 id="Exceptions">Exceptions</h2>
+
+<dl>
+ <dt><code>SYNTAX_ERR</code></dt>
+ <dd>Lorsque la chaîne passée en paramêtre défini sélecteur invalide.</dd>
+</dl>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Pour les navigateurs qui ne supportent pas <code>Element.matches()</code> ou <code>Element.matchesSelector()</code>, mais fournissent le support de<code> document.querySelectorAll()</code>, il existe un <em>polyfill</em> :</p>
+
+<pre>if (!Element.prototype.matches) {
+    Element.prototype.matches =
+        Element.prototype.matchesSelector ||
+        Element.prototype.mozMatchesSelector ||
+        Element.prototype.msMatchesSelector ||
+        Element.prototype.oMatchesSelector ||
+        Element.prototype.webkitMatchesSelector ||
+        function(s) {
+            var matches = (this.document || this.ownerDocument).querySelectorAll(s),
+                i = matches.length;
+            while (--i &gt;= 0 &amp;&amp; matches.item(i) !== this) {}
+            return i &gt; -1;
+        };
+}</pre>
+
+<p>Cependant, étant donné la possibilité de prendre en charge les anciens navigateurs, les éléments suivants devraient suffire pour la plupart (sinon tous) des cas pratiques (c'est-à-dire le support IE9 +).</p>
+
+<pre class="line-numbers  language-html"><code class="language-html">if (!Element.prototype.matches) {
+    Element.prototype.matches = Element.prototype.msMatchesSelector;
+}</code></pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Status</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-element-matches', 'Element.prototype.matches')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Element.matches")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs">La syntaxe des sélecteurs</a></li>
+ <li>autres méthodes qui utilisent les sélecteurs : {{domxref("element.querySelector()")}} et {{domxref("element.closest()")}}.</li>
+</ul>
diff --git a/files/fr/web/api/element/mousedown_event/index.html b/files/fr/web/api/element/mousedown_event/index.html
new file mode 100644
index 0000000000..8569c6878b
--- /dev/null
+++ b/files/fr/web/api/element/mousedown_event/index.html
@@ -0,0 +1,88 @@
+---
+title: 'Element : évènement mousedown'
+slug: Web/API/Element/mousedown_event
+tags:
+  - API
+  - DOM
+  - Interface
+  - Reference
+  - events
+  - mousedown
+translation_of: Web/API/Element/mousedown_event
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary">L'évènement <strong><code>mousedown</code></strong> est déclenché à partir d'un {{domxref("Element")}} lorsqu'on appuie sur le bouton d'un dispositif de pointage (une souris par exemple) pendant que le curseur est sur l'élément.</span></p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Cet évènement est différent de {{domxref("Element/click_event", "click")}}. <code>click</code> est déclenché après qu'un clic "entier" ait eu lieu (c'est-à-dire quand le bouton a été pressé puis relaché tandis que le pointeur était sur le même élément). <code>mousedown</code> est déclenché dès qu'on appuie sur le bouton.</p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Se propage/remonte dans le DOM</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Annulable</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("MouseEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Propriété pour la gestion d'évènement</th>
+   <td>{{domxref("GlobalEventHandlers.onmousedown", "onmousedown")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>{{page("/fr/docs/Web/API/Element/mousemove_event", "Exemples")}}</p>
+
+<h2 class="brush: css" 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>
+ <thead>
+  <tr>
+   <td>{{SpecName('UI Events', '#event-type-mousedown', 'mousedown')}}</td>
+   <td>{{Spec2('UI Events')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', '#event-type-mousedown', 'mousedown')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+  </tr>
+ </thead>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Element.mousedown_event")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements">Une introduction aux évènements</a></li>
+ <li>D'autres évènements connexes
+  <ul>
+   <li><a href="/fr/docs/Web/API/Element/mouseup_event"><code>mouseup</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mousemove_event"><code>mousemove</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/click_event"><code>click</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/dblclick_event"><code>dblclick</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseout_event"><code>mouseout</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseover_event"><code>mouseover</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseenter_event"><code>mouseenter</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseleave_event"><code>mouseleave</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/contextmenu_event"><code>contextmenu</code></a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/api/element/mouseenter_event/index.html b/files/fr/web/api/element/mouseenter_event/index.html
new file mode 100644
index 0000000000..02fcb024bd
--- /dev/null
+++ b/files/fr/web/api/element/mouseenter_event/index.html
@@ -0,0 +1,157 @@
+---
+title: 'Element : évènement mouseenter'
+slug: Web/API/Element/mouseenter_event
+tags:
+  - API
+  - DOM
+  - Element
+  - Interface
+  - Reference
+  - mouseenter
+translation_of: Web/API/Element/mouseenter_event
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary">L'évènement <strong><code>mouseenter</code></strong> est déclenché à partir d'un élément {{domxref("Element")}} lorsqu'un dispositif de pointage est déplacé et que son curseur entre sur l'élément.</span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Se propage/remonte dans le DOM</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">Annulable</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("MouseEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Propriété pour la gestion d'évènement</th>
+   <td>{{domxref("GlobalEventHandlers.onmouseenter", "onmouseenter")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Notes_dutilisation">Notes d'utilisation</h2>
+
+<p>Bien que {{domxref("Element/mouseover_event", "mouseover")}} soit similaire, <code>mouseenter</code> est différent et ne remonte pas dans le DOM et qu'il n'est pas envoyé aux descendants lorsque le pointeur passe d'un descendant à l'élément.</p>
+
+<div style="column-width: 455px; border: 1px solid; padding: 5px; margin-bottom: 10px;">
+<div style="text-align: center;"><img alt="mouseenter.png" class="default internal" src="/@api/deki/files/5908/=mouseenter.png"></div>
+<code>mouseenter</code> est envoyé à chaque élément de la hiérarchie lorsqu'on rentre sur eux. Voici comment 4 évènements sont envoyés aux éléments lorsque le pointeur atteint le texte.
+
+<div style="text-align: center;"><img alt="mouseover.png" class="default internal" src="/@api/deki/files/5909/=mouseover.png"></div>
+Un seul évènement <code>mouseover</code> est envoyé depuis l'élément le plus profond du DOM puis remonte le DOM jusqu'à être annulé ou à atteindre la racine.</div>
+
+<p>Avec des hiérarchies profondes, le nombre d'évènements <code>mouseenter</code> envoyé peut être important et entraîner des problèmes de performances. Dans ce cas, mieux vaut écouter les évènements <code>mouseover</code>.</p>
+
+<p>Avec la combinaison de <code>mouseenter</code> et <code>mouseleave</code> (déclenché quand le pointeur quitte la zone de l'élément), on a un effet fortement semblable à la pseudo-classe CSS {{cssxref(':hover')}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>La documentation <a href="/fr/docs/Web/API/Element/mouseover_event#Exemples"><code>mouseover</code></a> illustre la différence entre <code>mouseover</code> et <code>mouseenter</code>.</p>
+
+<p>Ici, on utilise <code>mouseenter</code> pour modifier la bordure d'un <code>div</code> lorsque la souris rentre sur cet espace. On ajoute alors un élément à la liste avec le nombre d'évènements <code>mouseenter</code> ouor <code>mouseleave</code> event.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id='mouseTarget'&gt;
+ &lt;ul id="unorderedList"&gt;
+  &lt;li&gt;No events yet!&lt;/li&gt;
+ &lt;/ul&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<p>On met en forme le <code>div</code> pour le rendre plus visible.</p>
+
+<pre class="brush: css">#mouseTarget {
+  box-sizing: border-box;
+  width:15rem;
+  border:1px solid #333;
+}</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var enterEventCount = 0;
+var leaveEventCount = 0;
+const mouseTarget = document.getElementById('mouseTarget');
+const unorderedList = document.getElementById('unorderedList');
+
+mouseTarget.addEventListener('mouseenter', e =&gt; {
+  mouseTarget.style.border = '5px dotted orange';
+  enterEventCount++;
+  addListItem("C'est le " + enterEventCount + "ème mouseenter.");
+});
+
+mouseTarget.addEventListener('mouseleave', e =&gt; {
+  mouseTarget.style.border = '1px solid #333';
+  leaveEventCount++;
+  addListItem("C'est le " + leaveEventCount + "ème mouseleave.");
+});
+
+function addListItem(text) {
+  // On crée un nouveau noeud text avec le texte fourni
+  var newTextNode = document.createTextNode(text);
+
+  // On crée un élément li
+  var newListItem = document.createElement("li");
+
+  // On ajoute le noeud texte à l'élément li
+  newListItem.appendChild(newTextNode);
+
+  // On ajoute l'élément de liste à la liste
+  unorderedList.appendChild(newListItem);
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("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>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('UI Events', '#event-type-mouseenter', 'mouseenter')}}</td>
+   <td>{{Spec2('UI Events')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', '#event-type-mouseenter', 'mouseenter')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Element.mouseenter_event")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements">Une introduction aux évènements</a></li>
+ <li>D'autres évènements connexes
+  <ul>
+   <li><a href="/fr/docs/Web/API/Element/mousedown_event"><code>mousedown</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseup_event"><code>mouseup</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mousemove_event"><code>mousemove</code></a></li>
+   <li><code><a href="/fr/docs/Web/API/Element/mouseover_event">mouseover</a></code></li>
+   <li><a href="/fr/docs/Web/API/Element/click_event"><code>click</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/dblclick_event"><code>dblclick</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseout_event"><code>mouseout</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseenter_event"><code>mouseenter</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseleave_event"><code>mouseleave</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/contextmenu_event"><code>contextmenu</code></a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/api/element/mouseleave_event/index.html b/files/fr/web/api/element/mouseleave_event/index.html
new file mode 100644
index 0000000000..48425a84f8
--- /dev/null
+++ b/files/fr/web/api/element/mouseleave_event/index.html
@@ -0,0 +1,148 @@
+---
+title: 'Element : évènement mouseleave'
+slug: Web/API/Element/mouseleave_event
+tags:
+  - API
+  - DOM
+  - Element
+  - Event
+  - Reference
+  - mouseleave
+translation_of: Web/API/Element/mouseleave_event
+---
+<p>{{APIRef}}</p>
+
+<p><span class="seoSummary">L'évènement <strong><code>mouseleave</code></strong> est déclenché à partir d'un {{domxref("Element")}} lorsque le curseur d'un dispositif de pointage (ex. une souris) se déplace en dehors de cet élément.</span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Se propage/remonte dans le DOM</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">Annulable</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("MouseEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Propriété pour la gestion d'évènement</th>
+   <td>{{domxref("GlobalEventHandlers.onmouseleave", "onmouseleave")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><code>mouseleave</code> et {{event('mouseout')}} se ressemblent mais <code>mouseleave</code> ne remonte pas dans le DOM tandis que <code>mouseout</code> remonte. <code>mouseleave</code> est donc déclenché lorsque le pointeur a quitté l'élément et tout ses descendants tandis que <code>mouseout</code> est déclenché lorsque le pointeur quitte l'élément ou l'un des descendants (quand bien même il serait toujours sur le parent).</p>
+
+<div style="column-width: 455px; border: 1px solid; padding: 5px; margin-bottom: 10px;">
+<div style="text-align: center;"><img alt="mouseenter.png" class="default internal" src="/@api/deki/files/5910/=mouseleave.png"></div>
+Un évènement <code>mouseleave</code> est envoyé à chaque élément de la hiérarchie lorsqu'on les quitte. Les quatre évènements sont envoyés chacun aux quatre élément de la hiérarchie lorsque le pointeur se déplace du texte à une zone en dehors du <code>&lt;div&gt;</code> le plus haut dans la hiérarchie.
+
+<div style="text-align: center;"><img alt="mouseover.png" class="default internal" src="/@api/deki/files/5911/=mouseout.png"></div>
+Un seul évènement <code>mouseout</code> est envoyé à l'élément le plus profond du DOM puis remonte le long de la hiérarchie tant qu'il n'est pas annulé ou qu'il n'a pas atteint la racine.</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Voir la documentation de <a href="/fr/docs/Web/API/Element/mouseout_event"><code>mouseout</code></a> pour un exemple sur les différences entre <code>mouseout</code> et <code>mouseleave</code>.</p>
+
+<p>Ici, on utilise l'évènement <code>mouseenter</code> pour modifier la bordure d'un élément <code>div</code> lorsque la souris rentre sur cet espace. Ensuite, on ajoute un élément à la liste avec le nombre d'évènements <code>mouseenter</code> et <code>mouseleave</code>.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id='mouseTarget'&gt;
+ &lt;ul id="unorderedList"&gt;
+  &lt;li&gt;Pas encore d'évènement !&lt;/li&gt;
+ &lt;/ul&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<p>On met le <code>div</code> en forme afin de le rendre plus visible.</p>
+
+<pre class="brush: css">#mouseTarget {
+  box-sizing: border-box;
+  width:15rem;
+  border:1px solid #333;
+}</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var enterEventCount = 0;
+var leaveEventCount = 0;
+const mouseTarget = document.getElementById('mouseTarget');
+const unorderedList = document.getElementById('unorderedList');
+
+mouseTarget.addEventListener('mouseenter', e =&gt; {
+  mouseTarget.style.border = '5px dotted orange';
+  enterEventCount++;
+  addListItem("Voici le nombre d'évènements mouseenter : " + enterEventCount + ".");
+});
+
+mouseTarget.addEventListener('mouseleave', e =&gt; {
+  mouseTarget.style.border = '1px solid #333';
+  leaveEventCount++;
+  addListItem("Voici le nombre d'évènements mouseleave : " + leaveEventCount + ".");
+});
+
+function addListItem(text) {
+  //  On crée un noeud texte avec le texte passé en argument
+  var newTextNode = document.createTextNode(text);
+
+  // On crée un nouvel élément li
+  var newListItem = document.createElement("li");
+
+  // On ajoute le noeud texte à l'élément li
+  newListItem.appendChild(newTextNode);
+
+  // On ajoute le nouvel élément à la liste
+  unorderedList.appendChild(newListItem);
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</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>{{SpecName('UI Events', '#event-type-mouseleave', 'mouseleave')}}</td>
+   <td>{{Spec2('UI Events')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', '#event-type-mouseleave', 'mouseleave')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Element.mouseleave_event")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements">Une introduction aux évènements</a></li>
+ <li>D'autres évènements connexes
+  <ul>
+   <li><a href="/fr/docs/Web/API/Element/mousedown_event"><code>mousedown</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseup_event"><code>mouseup</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mousemove_event"><code>mousemove</code></a></li>
+   <li><code><a href="/fr/docs/Web/API/Element/mouseover_event">mouseover</a></code></li>
+   <li><a href="/fr/docs/Web/API/Element/click_event"><code>click</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/dblclick_event"><code>dblclick</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseout_event"><code>mouseout</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseenter_event"><code>mouseenter</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/contextmenu_event"><code>contextmenu</code></a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/api/element/mousemove_event/index.html b/files/fr/web/api/element/mousemove_event/index.html
new file mode 100644
index 0000000000..3130ac80aa
--- /dev/null
+++ b/files/fr/web/api/element/mousemove_event/index.html
@@ -0,0 +1,161 @@
+---
+title: 'Element : évènement mousemove'
+slug: Web/API/Element/mousemove_event
+tags:
+  - API
+  - DOM
+  - Event
+  - Interface
+  - Reference
+  - events
+  - mousemove
+translation_of: Web/API/Element/mousemove_event
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary">L'évènement <code>mousemove</code> est déclenché à partir d'un élément lorsqu'un dispositif de pointage (ex. une souris) est déplacé lorsque le curseur est à l'intérieur de l'élément.</span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Se propage/remonte dans le DOM</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Annulable</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("MouseEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Propriété pour la gestion d'évènement</th>
+   <td>{{domxref("GlobalEventHandlers.onmousemove", "onmousemove")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, on utilise les évènements <code><a href="/fr/docs/Web/API/Element/mousedown_event">mousedown</a></code>, <code><a href="/fr/docs/Web/API/Element/mousemove_event">mousemove</a></code> et <code><a href="/fr/docs/Web/API/Element/mouseup_event">mouseup</a></code> pour permettre à l'utilisateur de dessiner sur un <a href="/fr/docs/Web/API/Canvas_API">canevas</a> HTML (le dessin est simple : une ligne dont l'épaisseur vaut 1 et dont la couleur est toujours noire).</p>
+
+<p>Lors du chargement de la page, les constantes <code>myPics</code> et <code>context</code> sont créées comme références au canevas et au contexte 2D qui seront utilisés pour le dessin. Enfin, la constante <code>rect</code> permet de stocker les coordonnées relatives du canevas par rapport à la page.</p>
+
+<p>Le dessin commence quand l'évènement <code>mousedown</code> est déclenché. On stocke les coordonnées du pointeur dans les variables <code>x</code> et <code>y</code> puis on passe la variable <code>isDrawing</code> à <code>true</code> pour indiquer qu'un dessin est en cours.</p>
+
+<p>Lorsque le pointeur se déplace sur la page, l'évènement <code>mousemove</code> est déclenché. Si <code>isDrawing</code> vaut <code>true</code>, le gestionnaire d'évènement appelle la fonction <code>drawLine()</code> afin de dessiner une ligne entre le point de coordonnées <code>x</code> et <code>y</code> (stockées dans ces variables) et la position actuelle (N.B. les coordonnées <code>x</code> et <code>y</code> sont "corrigées" avec la constante <code>rect</code> pour tenir compte du décalage entre le canevas et la page).</p>
+
+<p>Lorsque la fonction <code>drawLine()</code> a fini son exécution, on ajuste les coordonnées courante en les stockant dans <code>x</code> et <code>y</code>.</p>
+
+<p>Lorsque l'évènement <code>mouseup</code> est déclenché, on dessine le segment final du dessin en cours, on passe <code>x</code> et <code>y</code> à <code>0</code> puis on arrête le dessin en passant <code>isDrawing</code> à <code>false</code>.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;h1&gt;Dessiner grâce aux évènements de souris&lt;/h1&gt;
+&lt;canvas id="myPics" width="560" height="360"&gt;&lt;/canvas&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">canvas {
+  border: 1px solid black;
+  width: 560px;
+  height: 360px;
+}</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">// Un booléen qui, lorsqu'il est vrai, indique que le déplacement de
+// la souris entraîne un dessin sur le canevas
+let isDrawing = false;
+let x = 0;
+let y = 0;
+
+const myPics = document.getElementById('myPics');
+const context = myPics.getContext('2d');
+
+// On récupère le décalage du canevas en x et y par rapport aux bords
+// de la page
+const rect = myPics.getBoundingClientRect();
+
+// On ajoute les gestionnaires d'évènements pour mousedown, mousemove
+// et mouseup
+myPics.addEventListener('mousedown', e =&gt; {
+  x = e.clientX - rect.left;
+  y = e.clientY - rect.top;
+  isDrawing = true;
+});
+
+myPics.addEventListener('mousemove', e =&gt; {
+  if (isDrawing === true) {
+    drawLine(context, x, y, e.clientX - rect.left, e.clientY - rect.top);
+    x = e.clientX - rect.left;
+    y = e.clientY - rect.top;
+  }
+});
+
+window.addEventListener('mouseup', e =&gt; {
+  if (isDrawing === true) {
+    drawLine(context, x, y, e.clientX - rect.left, e.clientY - rect.top);
+    x = 0;
+    y = 0;
+    isDrawing = false;
+  }
+});
+
+function drawLine(context, x1, y1, x2, y2) {
+  context.beginPath();
+  context.strokeStyle = 'black';
+  context.lineWidth = 1;
+  context.moveTo(x1, y1);
+  context.lineTo(x2, y2);
+  context.stroke();
+  context.closePath();
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 640, 450)}}</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>{{SpecName('UI Events', '#event-type-mousemove', 'mousemove')}}</td>
+   <td>{{Spec2('UI Events')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', '#event-type-mousemove', 'mousemove')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Element.mousemove_event")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements">Une introduction aux évènements</a></li>
+ <li>D'autres évènements connexes
+  <ul>
+   <li><a href="/fr/docs/Web/API/Element/mouseup_event"><code>mouseup</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mousedown_event"><code>mousedown</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/click_event"><code>click</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/dblclick_event"><code>dblclick</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseout_event"><code>mouseout</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseover_event"><code>mouseover</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseenter_event"><code>mouseenter</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseleave_event"><code>mouseleave</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/contextmenu_event"><code>contextmenu</code></a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/api/element/mouseout_event/index.html b/files/fr/web/api/element/mouseout_event/index.html
new file mode 100644
index 0000000000..ee0921b941
--- /dev/null
+++ b/files/fr/web/api/element/mouseout_event/index.html
@@ -0,0 +1,125 @@
+---
+title: 'Element : évènement mouseout'
+slug: Web/API/Element/mouseout_event
+tags:
+  - API
+  - DOM
+  - Event
+  - Interface
+  - Reference
+  - mouseout
+translation_of: Web/API/Element/mouseout_event
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary">L'évènement <strong><code>mouseout</code></strong> est déclenché à partir d'un {{domxref("Element")}} lorsqu'un dispositif de pointage (ex. une souris) déplace le curseur en dehors de l'élément ou de l'un de ses fils.</span> <code>mouseout</code> est également apporté à un élément si le curseur se déplace dans un élément fils car l'élément fils peut masquer la zone visible de l'élément.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Se propage/remonte dans le DOM</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Annulable</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("MouseEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Propriété pour la gestion d'évènements</th>
+   <td>{{domxref("GlobalEventHandlers.onmouseout", "onmouseout")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, on illustre la différence entre <code>mouseout</code> et <a href="/fr/docs/Web/API/Element/mouseleave_event" title="/en/Mozilla_event_reference/mouseleave"><code>mouseleave</code></a>. Ce dernier est ajouté à {{HTMLElement("ul")}} pour colorer la liste en violet lorsque la souris quitte <code>&lt;ul&gt;</code>. <code>mouseout</code> est ajouté à la liste pour colorer l'élément ciblé en orange lorsque la souris le quitte.</p>
+
+<p>En essayant cet exemple, vous pourrez voir que <code>mouseout</code> est envoyé aux éléments individuels de la liste tandis que <code>mouseleave</code> est géré sur la liste entière. Cela provient de la hiérarchie des éléments et du fait que les éléments de la liste "masquent" la liste sous-jacente.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul id="test"&gt;
+  &lt;li&gt;élément 1&lt;/li&gt;
+  &lt;li&gt;élément 2&lt;/li&gt;
+  &lt;li&gt;élément 3&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">let test = document.getElementById("test");
+
+// On affiche la liste en violet lorsque le curseur quitte
+// l'élément &lt;ul&gt;
+test.addEventListener("mouseleave", function( event ) {
+  // on cible la cible de mouseleave
+  event.target.style.color = "purple";
+
+  // on réinitialise la couleur après quelques instants
+  setTimeout(function() {
+    event.target.style.color = "";
+  }, 1000);
+}, false);
+
+// On affiche les éléments &lt;li&gt; en orange lorsque la souris
+// les quitte
+test.addEventListener("mouseout", function( event ) {
+  // on cible la cible de mouseout
+  event.target.style.color = "orange";
+
+ // on réinitialise la couleur après quelques instants
+  setTimeout(function() {
+    event.target.style.color = "";
+  }, 500);
+}, false);</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 640, 200)}}</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>{{SpecName('UI Events', '#event-type-mouseout', 'mouseout')}}</td>
+   <td>{{Spec2('UI Events')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', '#event-type-mouseout', 'mouseout')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Element.mouseout_event")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements">Une introduction aux évènements</a></li>
+ <li>D'autres évènements connexes
+  <ul>
+   <li><a href="/fr/docs/Web/API/Element/mousedown_event"><code>mousedown</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseup_event"><code>mouseup</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mousemove_event"><code>mousemove</code></a></li>
+   <li><code><a href="/fr/docs/Web/API/Element/mouseover_event">mouseover</a></code></li>
+   <li><a href="/fr/docs/Web/API/Element/click_event"><code>click</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/dblclick_event"><code>dblclick</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseenter_event"><code>mouseenter</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseleave_event"><code>mouseleave</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/contextmenu_event"><code>contextmenu</code></a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/api/element/mouseover_event/index.html b/files/fr/web/api/element/mouseover_event/index.html
new file mode 100644
index 0000000000..9cfdbc5ba0
--- /dev/null
+++ b/files/fr/web/api/element/mouseover_event/index.html
@@ -0,0 +1,123 @@
+---
+title: 'Element : évènement mouseover'
+slug: Web/API/Element/mouseover_event
+tags:
+  - API
+  - DOM
+  - Event
+  - Interface
+  - Reference
+  - mouseover
+translation_of: Web/API/Element/mouseover_event
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary">L'évènement <strong><code>mouseover</code></strong> est déclenché à partir d'un {{domxref("Element")}} lorsqu'un dispositif de pointage (une souris par exemple) déplace le curseur sur l'élément ou sur l'un de ses éléments fils.</span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Se propage/remonte dans le DOM</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Annulable</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("MouseEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Propriété pour la gestion d'évènement</th>
+   <td>{{domxref("GlobalEventHandlers.onmouseover", "onmouseover")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>L'exemple suivant illustre la différence entre les évènements <code>mouseover</code> et <a href="/fr/docs/Web/Events/mouseenter" title="/en/Mozilla_event_reference/mouseenter"><code>mouseenter</code></a>.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul id="test"&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;/ul&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">let test = document.getElementById("test");
+
+// Ce gestionnaire ne sera exécuté qu'une fois
+// lorsque le curseur se déplace sur la liste
+test.addEventListener("mouseenter", function( event ) {
+  // on met l'accent sur la cible de mouseenter
+  event.target.style.color = "purple";
+
+  // on réinitialise la couleur après quelques instants
+  setTimeout(function() {
+    event.target.style.color = "";
+  }, 500);
+}, false);
+
+// Ce gestionnaire sera exécuté à chaque fois que le curseur
+// se déplacera sur un autre élément de la liste
+test.addEventListener("mouseover", function( event ) {
+  // on met l'accent sur la cible de mouseover
+  event.target.style.color = "orange";
+
+  // on réinitialise la couleur après quelques instants
+  setTimeout(function() {
+    event.target.style.color = "";
+  }, 500);
+}, false);</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</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>{{SpecName('UI Events', '#event-type-mouseover', 'mouseover')}}</td>
+   <td>{{Spec2('UI Events')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', '#event-type-mouseover', 'mouseover')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Element.mouseover_event")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements">Une introduction aux évènements</a></li>
+ <li>D'autres évènements connexes
+  <ul>
+   <li><a href="/fr/docs/Web/API/Element/mousedown_event"><code>mousedown</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseup_event"><code>mouseup</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mousemove_event"><code>mousemove</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/click_event"><code>click</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/dblclick_event"><code>dblclick</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseout_event"><code>mouseout</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseenter_event"><code>mouseenter</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseleave_event"><code>mouseleave</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/contextmenu_event"><code>contextmenu</code></a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/api/element/mouseup_event/index.html b/files/fr/web/api/element/mouseup_event/index.html
new file mode 100644
index 0000000000..1faf2195d2
--- /dev/null
+++ b/files/fr/web/api/element/mouseup_event/index.html
@@ -0,0 +1,83 @@
+---
+title: 'Element : évènement mouseup'
+slug: Web/API/Element/mouseup_event
+tags:
+  - API
+  - DOM
+  - Event
+  - Interface
+  - Reference
+  - events
+  - mouseup
+translation_of: Web/API/Element/mouseup_event
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary">L'évènement <strong><code>mouseup</code></strong> est déclenché à partir d'un {{domxref("Element")}} lorsqu'un bouton d'un dispositif de pointage (une souris ou un pavé tactile par exemple) est relaché lorsque le pointeur est sur cet élément.</span> Les évènements <code>mouseup</code> peuvent être comparés aux évènements {{domxref("Element.mousedown_event", "mousedown")}} qui se produisent lorsqu'on <em>appuie</em> sur un bouton.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Se propage/remonte dans le DOM</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Annulable</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("MouseEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Propriété pour la gestion d'évènement</th>
+   <td>{{domxref("GlobalEventHandlers.onmouseup", "onmouseup")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>{{page("/fr/docs/Web/API/Element/mousemove_event", "Exemples")}}</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>{{SpecName('UI Events', '#event-type-mouseup', 'mouseup')}}</td>
+   <td>{{Spec2('UI Events')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', '#event-type-mouseup', 'mouseup')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Element.mouseup_event")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements">Une introduction aux évènements</a></li>
+ <li>D'autres évènements connexes
+  <ul>
+   <li><a href="/fr/docs/Web/API/Element/mousedown_event"><code>mousedown</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mousemove_event"><code>mousemove</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/click_event"><code>click</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/dblclick_event"><code>dblclick</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseout_event"><code>mouseout</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseover_event"><code>mouseover</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseenter_event"><code>mouseenter</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseleave_event"><code>mouseleave</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/contextmenu_event"><code>contextmenu</code></a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/api/element/name/index.html b/files/fr/web/api/element/name/index.html
new file mode 100644
index 0000000000..3d79a2089e
--- /dev/null
+++ b/files/fr/web/api/element/name/index.html
@@ -0,0 +1,76 @@
+---
+title: element.name
+slug: Web/API/Element/name
+tags:
+  - API
+  - DOM
+  - Element
+  - Nom
+  - Propriétés
+translation_of: Web/API
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p><code><strong>name</strong></code> obtient ou définit la propriété <code>name</code> (<em>nom</em>) d'un élément dans le DOM. Il s'applique uniquement aux éléments suivants : {{ HTMLelement("a") }}, {{ HTMLelement("applet") }}, {{ HTMLelement("button") }}, {{ HTMLelement("form") }}, {{ HTMLelement("frame") }}, {{ HTMLelement("iframe") }}, {{ HTMLelement("img") }}, {{ HTMLelement("input") }}, {{ HTMLelement("map") }}, {{ HTMLelement("meta") }}, {{ HTMLelement("object") }}, {{ HTMLelement("param") }}, {{ HTMLelement("select") }} et {{ HTMLelement("textarea") }}.</p>
+
+<div class="note">
+<p><strong>Note :</strong> La propriété <code>name</code> n'existe pas pour d'autres éléments ; contrairement à <a href="https://developer.mozilla.org/en/DOM/Element.tagName" title="en/DOM/element.tagName"><code>tagName</code></a> et <a href="https://developer.mozilla.org/en/DOM/Node.nodeName" title="en/DOM/Node.nodeName"><code>nodeName</code></a>, ce n'est pas une propriété des interfaces {{domxref("Node")}}, {{domxref("Element")}} ou {{domxref("HTMLElement")}}.</p>
+</div>
+
+<p>Le <code>name</code> peut être utilisé avec la méthode {{ domxref("document.getElementsByName()") }}, dans un <a href="https://developer.mozilla.org/fr/docs/Web/API/HTMLFormElement" title="fr/DOM/form">formulaire</a> et dans la collection <a href="https://developer.mozilla.org/fr/docs/Web/API/HTMLFormElement/elements" title="fr/DOM/form.elements"><code>elements</code></a> d'un formulaire. Lorsqu'il est utilisé avec un formulaire ou les collections d'éléments, il peut renvoyer un seul élément ou une collection d'éléments.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="eval"><em>HTMLElement</em>.name = <em>string</em>;
+var elName = <em>HTMLElement</em>.name;
+
+var fControl = <em>HTMLFormElement</em>.<em>elementName</em>;
+var controlCollection = <em>HTMLFormElement</em>.elements.<em>elementName</em>;
+</pre>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre class="eval">&lt;form action="" name="formA"&gt;
+  &lt;input type="text" value="foo"&gt;
+&lt;/form&gt;
+
+&lt;script type="text/javascript"&gt;
+
+  // Obtient une référence au premier élément du formulaire
+  var formElement = document.forms['formA'].elements[0];
+
+  // Lui donne un nom
+  formElement.name = 'inputA';
+
+  // Affiche la valeur du champ
+  alert(document.forms['formA'].elements['inputA'].value);
+
+&lt;/script&gt;
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Dans Internet Explorer, la propriété <code>name</code> des objets DOM créés à l'aide de <code><a href="/fr/DOM/document.createElement" title="fr/DOM/document.createElement">createElement</a></code> ne peut être définie ou modifiée.</p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
+
+<p>Spécification DOM 2 HTML du W3C :</p>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-32783304">Anchor</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-32783304">traduction</a></small></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-39843695">Applet</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-39843695">traduction</a></small></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-22051454">Form</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-22051454">traduction</a></small></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-91128709">Frame</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-91128709">traduction</a></small></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-96819659">iFrame</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-96819659">traduction</a></small></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-47534097">Image</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-47534097">traduction</a></small></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-89658498">Input</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-89658498">traduction</a></small></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-52696514">Map</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-52696514">traduction</a></small></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-31037081">Meta</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-31037081">traduction</a></small></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-20110362">Object</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-20110362">traduction</a></small></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-89658498">Option</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-89658498">traduction</a></small></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-59871447">Param</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-59871447">traduction</a></small></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-41636323">Select</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-41636323">traduction</a></small></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-70715578">Textarea</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-70715578">traduction</a></small></li>
+</ul>
+
+<p><small>Les traductions ne sont pas normatives.</small></p>
diff --git a/files/fr/web/api/element/namespaceuri/index.html b/files/fr/web/api/element/namespaceuri/index.html
new file mode 100644
index 0000000000..8bce63b22a
--- /dev/null
+++ b/files/fr/web/api/element/namespaceuri/index.html
@@ -0,0 +1,122 @@
+---
+title: Element.namespaceURI
+slug: Web/API/Element/namespaceURI
+tags:
+  - API
+  - DOM
+  - Element
+  - Espace de noms
+  - Propriétés
+  - URI
+translation_of: Web/API/Element/namespaceURI
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La propriété en lecture seule <code><strong>Element.namespaceURI</strong></code> renvoie l'URI d'espace de noms de l'élément ou <code>null</code> si l'élément n'est pas dans un espace de nom.</p>
+
+<div class="note">
+<p>Avant DOM4, cet API était définie dans l'interface {{domxref("Node")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>namespace</var> = <var>element</var>.namespaceURI</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans cet extrait, un élément est examiné pour son {{domxref("localName")}} et son <code>namespaceURI</code>. Si le <code>namespaceURI</code> renvoie l'espace de noms XUL et le <code>localName</code> retourne "browser" (<em>navigateur</em>), alors le noeud est compris comme étant un <code>&lt;browser/&gt;</code> XUL.</p>
+
+<pre class="brush:js">if (element.localName == "browser" &amp;&amp;
+    element.namespaceURI == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") {
+  // c'est un navigateur XUL
+}</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Ce n'est pas une valeur calculée qui est le résultat d'une recherche d'espace de noms basée sur un examen des déclarations d'espace de noms dans la portée. L'URI de l'espace de noms d'un nœud est fixé au moment de la création du nœud.</p>
+
+<p>Dans Firefox 3.5 et antérieurs, l'URI d'espace de noms pour les éléments HTML dans un document HTML est <code>null</code>. Dans les versions postérieures, en conformité avec HTML5, c'est <code><a class="external" href="http://www.w3.org/1999/xhtml" rel="freelink">http://www.w3.org/1999/xhtml</a></code> comme dans XHTML. {{gecko_minversion_inline("1.9.2")}}</p>
+
+<p>Vous pouvez créer un élément avec l'<code>namespaceURI</code> spécifié en utilisant la méthode DOM niveau 2 <a href="https://developer.mozilla.org/fr/docs/Web/API/Document/createElementNS" title="Document.createElementNS">document.createElementNS</a>.</p>
+
+<p>Le DOM ne gère pas ou n'applique pas la validation de l'espace de noms en soi. Il appartient à l'application DOM de faire toute validation nécessaire. Notez également que le préfixe d'espace de noms, une fois associé à un élément particulier, ne peut pas être modifié.</p>
+
+<h2 id="Spécification">Spécification</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("DOM4", "#dom-element-namespaceuri", "Element.namespaceuri")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>46.0<sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop("48.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("48.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Cet API était précédemment disponible sur l'API {{domxref("Node")}}.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Element.localName")}}</li>
+ <li>{{domxref("Element.prefix")}}</li>
+ <li>{{domxref("Attr.namespaceURI")}}</li>
+ <li>{{domxref("Node.namespaceURI")}}</li>
+</ul>
diff --git a/files/fr/web/api/element/onwheel/index.html b/files/fr/web/api/element/onwheel/index.html
new file mode 100644
index 0000000000..837fda2ba2
--- /dev/null
+++ b/files/fr/web/api/element/onwheel/index.html
@@ -0,0 +1,93 @@
+---
+title: Element.onwheel
+slug: Web/API/Element/onwheel
+tags:
+  - API
+  - DOM
+  - Gestionnaires d'évènements
+  - Propriété
+  - évènements
+translation_of: Web/API/GlobalEventHandlers/onwheel
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p>La propriété <code>onwheel</code> renvoie le code du gestionnaire d'évènements <code>onwheel</code> de l'élément courrant.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="eval line-numbers  language-html"><code class="language-html">element.onwheel = function() { .. }</code></pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="spectable 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','webappapis.html#handler-onwheel','onwheel')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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(61)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatOpera(48)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(61)}}</td>
+   <td>{{CompatChrome(61)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatOperaMobile(48)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Notes">Notes</h3>
+
+<p>L'évènement <code>wheel</code> est déclenché lorsque l'utilisateur fait défiler le contenu de l'élément.</p>
diff --git a/files/fr/web/api/element/outerhtml/index.html b/files/fr/web/api/element/outerhtml/index.html
new file mode 100644
index 0000000000..3c9b834604
--- /dev/null
+++ b/files/fr/web/api/element/outerhtml/index.html
@@ -0,0 +1,157 @@
+---
+title: Element.outerHTML
+slug: Web/API/Element/outerHTML
+tags:
+  - API
+  - DOM
+  - Privacy
+  - Propriétés
+translation_of: Web/API/Element/outerHTML
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>L'attribut <code>outerHTML</code> de l'interface DOM {{domxref("element")}} récupère le fragment HTML sérialisé décrivant l'élément ainsi que ses descendants. Il peut aussi être utilisé pour remplacer l'élément avec les noeuds générés de la chaîne fournie.</p>
+
+<p>Pour obtenir uniquement la représentation HTML du contenu d'un élément ou pour remplacer le contenu d'un élément, utilisez plutôt la propriété {{domxref ("Element.innerHTML", "innerHTML")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="eval line-numbers  language-html"><code class="language-html">var content = element.outerHTML;
+
+element.outerHTML = htmlString;</code></pre>
+
+<h3 class="highlight-spanned" id="Valeur"><span class="highlight-span">Valeur</span></h3>
+
+<p>La lecture de la valeur de <code>outerHTML</code> renvoie une  {{domxref("DOMString")}} contenant la sérialisation HTML des descendants de l'élément. Définir la valeur de <code>innerHTML</code> supprime tous les descendants et les remplace par les noeuds construits en analysant le HTML donné dans la chaîne <code>htmlString</code>.</p>
+
+<h3 class="highlight-spanned" id="Exceptions"><span class="highlight-span">Exceptions</span></h3>
+
+<dl>
+ <dt><code>SyntaxError</code></dt>
+ <dd>Une tentative a été faite de définir la valeur de <code>outerHTML</code> en utilisant une chaîne qui n'est pas correctement formée HTML.</dd>
+ <dt><code>NoModificationAllowedError</code></dt>
+ <dd>Une tentative a été faite de définir  <code>outerHTML</code>  sur un élément qui est enfant direct du {{domxref("Document")}}, tel que {{domxref("Document.documentElement")}}.</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">Exemples</h2>
+
+<p>Récupérer la valeur de la propriété <code>outerHTML</code> d'un élément :</p>
+
+<pre class="brush: js">// HTML:
+// &lt;div id="d"&gt;&lt;p&gt;Contenu&lt;/p&gt;&lt;p&gt;Plus Complexe&lt;/p&gt;&lt;/div&gt;
+
+d = document.getElementById("d");
+dump(d.outerHTML);
+
+// la chaîne '&lt;div id="d"&gt;&lt;p&gt;Contenu&lt;/p&gt;&lt;p&gt;Plus Complexe&lt;/p&gt;&lt;/div&gt;'
+// est affichée dans la fenêtre console
+</pre>
+
+<p>Remplacer un noeud en modifiant la propriété <code>outerHTML</code> :</p>
+
+<pre class="brush: js">// HTML:
+// &lt;div id="container"&gt;&lt;div id="d"&gt;Ceci est un div.&lt;/div&gt;&lt;/div&gt;
+
+container = document.getElementById("container");
+d = document.getElementById("d");
+console.log(container.firstChild.nodeName); // affiche "DIV"
+
+d.outerHTML = "&lt;p&gt;Ce paragraphe remplace le div original.&lt;/p&gt;";
+console.log(container.firstChild.nodeName); // affiche "P"
+
+// Le div #d ne fait plus partie de l'arbre décrivant le document,
+// le nouveau paragraphe l'ayant remplacé.
+</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Si un élément n'a pas de noeud parent, définir sa propriété <code>outerHTML</code> ne le modifiera pas, ni ses descendants. De nombreux navigateurs déclencheront aussi une exception. Par exemple :</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> div <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"div"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+div<span class="punctuation token">.</span>outerHTML <span class="operator token">=</span> <span class="string token">"&lt;div class=\"test\"&gt;test&lt;/div&gt;"</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>div<span class="punctuation token">.</span>outerHTML<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// output: "&lt;div&gt;&lt;/div&gt;"</span></code></pre>
+
+<p>Aussi, lorsqu'un élément va être remplacé dans le document, la variable dont la propriété <code>outerHTML</code> a été modifiée contiendra toujours une référence à l'élément initial :</p>
+
+<pre class="brush: js">var p = document.getElementsByTagName("p")[0];
+console.log(p.nodeName); // affiche: "P"
+p.outerHTML = "&lt;div&gt;Ce div remplace un paragraph.&lt;/div&gt;";
+console.log(p.nodeName); // toujours "P";
+</pre>
+
+<h2 id="Specification" name="Specification">Spécification</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('DOM Parsing', '#outerhtml', 'Element.outerHTML')}}</td>
+   <td>{{ Spec2('DOM Parsing') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatGeckoDesktop("11") }}</td>
+   <td>0.2</td>
+   <td>4.0</td>
+   <td>7</td>
+   <td>1.3</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("11") }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Sérialisation de l'arborescence DOM en XML ou HTML : {{domxref("XMLSerializer")}}</li>
+ <li>Analyse XML ou HTML dans l'arborescence DOM : {{domxref("DOMParser")}}</li>
+ <li>{{domxref("HTMLElement.outerText")}}</li>
+</ul>
diff --git a/files/fr/web/api/element/prefix/index.html b/files/fr/web/api/element/prefix/index.html
new file mode 100644
index 0000000000..f82ba6bf2d
--- /dev/null
+++ b/files/fr/web/api/element/prefix/index.html
@@ -0,0 +1,118 @@
+---
+title: Element.prefix
+slug: Web/API/Element/prefix
+tags:
+  - API
+  - DOM
+  - Element
+  - Propriétés
+  - Préfixe
+translation_of: Web/API/Element/prefix
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La propriété en lecture seule <code><strong>Element.prefix</strong></code> renvoie le préfixe d'espace de noms de l'élément spécifié ou <code>null</code> si aucun préfixe n'est précisé.</p>
+
+<div class="note">
+<p>Avant DOM4 cet API était défini dans l'interface {{domxref("Node")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>string</var> = <var>element</var>.prefix
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Les logs "x" suivants à la console.</p>
+
+<pre class="brush:xml">&lt;x:div onclick="console.log(this.prefix)"/&gt;
+</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Cela fonctionnera uniquement lorsqu'un analyseur connaissant l'espace de noms est utilisé, c'est-à-dire lorsqu'un document est servi avec un type XML MIME. Cela ne fonctionnera pas pour les documents HTML.</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">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-element-prefix", "Element.prefix")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>46.0<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("48.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("48.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Cet API était précédemment disponible sur l'API {{domxref("Node")}}.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Element.namespaceURI")}}</li>
+ <li>{{domxref("Element.localName")}}</li>
+ <li>{{domxref("Attr.prefix")}}</li>
+ <li>{{domxref("Node.prefix")}}</li>
+</ul>
diff --git a/files/fr/web/api/element/queryselector/index.html b/files/fr/web/api/element/queryselector/index.html
new file mode 100644
index 0000000000..1d3af7beeb
--- /dev/null
+++ b/files/fr/web/api/element/queryselector/index.html
@@ -0,0 +1,184 @@
+---
+title: Element.querySelector()
+slug: Web/API/Element/querySelector
+tags:
+  - API
+  - CSS
+  - DOM
+  - Element
+  - Méthode
+  - Reference
+  - Sélecteurs
+translation_of: Web/API/Element/querySelector
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Retourne le premier élement parmi les descendant de l'élement sur lequel on l'invoque qui correspond au groupe de sélecteurs spécifiés.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>element</var> = baseElement.querySelector(<em>selector</em>s);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>selectors</code></dt>
+ <dd>est un groupe de <a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs">sélecteurs</a> à <span id="result_box" lang="fr"><span>faire correspondre aux éléments descendants du {{domxref("Element")}} <code>baseElement</code> ;</span> <span>cette syntaxe CSS doit être valide ou une exception SyntaxError se produit.</span> <span>Le premier élément trouvé correspondant à ce groupe de sélecteurs est renvoyé.</span></span></dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p><span id="result_box" lang="fr"><span>Le premier élément descendant de <code>baseElement</code> qui correspond au groupe de <code>sélectors</code> spécifié.</span> <span>La hiérarchie entière des éléments est considérée lors de la mise en correspondance, y compris ceux qui sont en dehors de l'ensemble des éléments, y compris <code>baseElement</code> et ses descendants;</span> <span>En d'autres termes, les sélecteurs sont d'abord appliqués au document entier, et non à l'élément de base, pour générer une liste initiale d'éléments potentiels.</span> <span>Les éléments résultants sont ensuite examinés pour voir s'ils sont des descendants de <code>baseElement</code>.</span> <span>La première correspondance de ces éléments restants est renvoyée par la méthode <code>querySelector()</code>.</span></span></p>
+
+<p><span lang="fr"><span>Si aucune correspondance n'est trouvée, la valeur retournée est <code>null</code>.</span></span></p>
+
+<h3 id="Exceptions"><span lang="fr"><span>Exceptions</span></span></h3>
+
+<dl>
+ <dt>SyntaxError</dt>
+ <dd>Les <code>selectors</code> spécifiés sont invalides.</dd>
+</dl>
+
+<h2 id="Example" name="Example">Exemples</h2>
+
+<p>Dans ce premier exemple, est retourné le premier élement {{HTMLElement("style")}} dans le corps du document HTML qui, soit n'a pas de type, soit a le type <code>text/css</code>:</p>
+
+<pre class="brush:js">var el = document.body.querySelector("style[type='text/css'], style:not([type])");
+</pre>
+
+<h3 id="Notes" name="Notes">La hiérarchie entière compte</h3>
+
+<p><span id="result_box" lang="fr"><span>Cet exemple montre que la hiérarchie du document entier est prise en compte lors de l'application des <code>selectors</code>, de sorte que les niveaux en dehors du </span></span> <code>baseElement</code> <span lang="fr"><span> spécifié sont toujours pris en compte lors de la recherche des correspondances.</span></span></p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>h5</span><span class="punctuation token">&gt;</span></span>Original content<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>h5</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>
+    inside paragraph
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>span</span><span class="punctuation token">&gt;</span></span>inside span<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>span</span><span class="punctuation token">&gt;</span></span>
+    inside paragraph
+  <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>div</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>h5</span><span class="punctuation token">&gt;</span></span>Output<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>h5</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>output<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> baseElement <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">"p"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"output"</span><span class="punctuation token">)</span><span class="punctuation token">.</span>innerHTML <span class="operator token">=</span>
+         <span class="punctuation token">(</span>baseElement<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">"div span"</span><span class="punctuation token">)</span><span class="punctuation token">.</span>innerHTML<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>Le résultat ressemble à ceci :</p>
+
+<p>{{EmbedLiveSample('The_entire_hierarchy_counts', 600, 160)}}</p>
+
+<h3 id="Notes" name="Notes">Plus d'exemples</h3>
+
+<p>Voir {{domxref("Document.querySelector()")}} pour des exemples supplémentaires du format approprié pour les sélecteurs.</p>
+
+<h2 id="Notes" name="Notes">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('DOM WHATWG','#dom-parentnode-queryselectorall','querySelector()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selectors API Level 2','#queryselectorall','querySelectorAll()')}}</td>
+   <td>{{Spec2('Selectors API Level 2')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selectors API Level 1','#queryselectorall','querySelectorAll()')}}</td>
+   <td>{{Spec2('Selectors API Level 1')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(1)}}</td>
+   <td>12</td>
+   <td>{{CompatGeckoDesktop(1.9.1)}}</td>
+   <td>9<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] <code>querySelector()</code> est pris en charge dans IE 8, mais uniquement pour les sélecteurs CSS 2.1.</p>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Localisation_des_%C3%A9l%C3%A9ments_DOM_avec_les_s%C3%A9lecteurs">Localisation des éléments DOM avec les sélecteurs</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/CSS/S%C3%A9lecteurs_d_attribut">Sélecteurs d'attribut</a> dans le guide CSS</li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors">Sélecteurs d'attribut</a> dans la zone d'apprentissage MDN</li>
+ <li>{{domxref("element.querySelectorAll()")}}</li>
+ <li>{{domxref("document.querySelector()")}} et {{domxref("Document.querySelectorAll()")}}</li>
+ <li>{{domxref("DocumentFragment.querySelector()")}} et {{domxref("DocumentFragment.querySelectorAll()")}}</li>
+ <li>{{domxref("ParentNode.querySelector()")}} et {{domxref("ParentNode.querySelectorAll()")}}</li>
+ <li><a href="/en-US/docs/Code_snippets/QuerySelector">Exemples de code pour querySelector</a></li>
+ <li>autres méthodes qui prennent des sélecteurs : {{domxref("element.closest()")}} et {{domxref("element.matches()")}}.</li>
+</ul>
diff --git a/files/fr/web/api/element/queryselectorall/index.html b/files/fr/web/api/element/queryselectorall/index.html
new file mode 100644
index 0000000000..08c0e64631
--- /dev/null
+++ b/files/fr/web/api/element/queryselectorall/index.html
@@ -0,0 +1,231 @@
+---
+title: Element.querySelectorAll()
+slug: Web/API/Element/querySelectorAll
+tags:
+  - API
+  - DOM
+  - Element
+  - Méthode
+  - Reference
+translation_of: Web/API/Element/querySelectorAll
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La méthode  <code><strong>querySelectorAll()</strong></code> de {{domxref("Element")}} retourne une  {{domxref("NodeList")}} non-directe des éléments correspondants au groupe de selecteurs CSS spécifiés qui sont des descendants de l'élément sur lequel la méthode a été appelée.</p>
+
+<div class="note">
+<p><strong>Note :</strong> La définition de cet API a été déplacée vers l'interface {{domxref("ParentNode")}} .</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>elementList</em> = baseElement.querySelectorAll(<em>selectors</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>selectors</code> </dt>
+ <dd>une {{domxref("DOMString")}} contenant un ou plusieurs sélecteurs à comparer. Cette chaîne doit être valide pour les <a href="https://developer.mozilla.org/fr/docs/Web/CSS/S%C3%A9lecteurs_CSS">sélecteurs CSS</a> ; si ce n'est pas le cas, une exception <code>SyntaxError</code> est levée. Voir <a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Localisation_des_%C3%A9l%C3%A9ments_DOM_avec_les_s%C3%A9lecteurs">Localisation des éléments DOM avec les sélecteurs</a> pour plus d'informations sur l'utilisation des sélecteurs pour identifier les éléments. Plusieurs sélecteurs peuvent être spécifiés en les séparant par une virgule.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note :</strong> Les caractères qui ne font pas partie de la syntaxe CSS standard doivent être échappés à l'aide d'une barre oblique inverse. Puisque JavaScript utilise également l'échappement en retour arrière, un soin particulier doit être pris lors de l'écriture de littéraux de chaîne utilisant ces caractères.</p>
+</div>
+
+<h3 id="Example" name="Example">Valeur retournée</h3>
+
+<p>Une {{domxref ("NodeList")}} contenant un objet {{domxref ("Element")}} pour chaque noeud descendant qui correspond à au moins un des sélecteurs spécifiés.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Si le <code>selectors</code> spécifié inclus un <a href="https://developer.mozilla.org/fr/docs/Web/CSS/Pseudo-elements">pseudo-element CSS</a>, la liste renvoyée est toujours vide.</p>
+</div>
+
+<h3 id="Example" name="Example">Exception</h3>
+
+<dl>
+ <dt><code>SyntaxError</code></dt>
+ <dd>La syntaxe de la chaîne du <code>selectors</code> spécifié n'est pas correcte.</dd>
+</dl>
+
+<h2 id="Example" name="Example">Exemples</h2>
+
+<h3 id="Obtention_d'une_liste_de_correspondances">Obtention d'une liste de correspondances</h3>
+
+<p>Pour obtenir une {{domxref("NodeList")}} de tous les éléments {{HTMLElement("p")}} contenus dans l'élément <code>"myBox"</code> :</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> matches <span class="operator token">=</span> myBox<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">"p"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Cet exemple renvoie une liste de tous les éléments {{HTMLElement("div")}} dans <code>"myBox"</code>  avec une classe  "<code>note</code>" ou  "<code>alert</code>" :</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> matches <span class="operator token">=</span> myBox<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">"div.note, div.alert"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Ici, nous obtenons une liste d'éléments <code>p</code> du document, dont le parent immédiat est un {{domxref("div")}}  qui a la classe <code>'highlighted'</code> et qui sont inclus dans un conteneur dont l'ID est <code>"test"</code> :</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> container <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">"#test"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> matches <span class="operator token">=</span> container<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">"div.highlighted &gt; p"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Cet exemple utilise un <a href="https://developer.mozilla.org/fr/docs/Web/CSS/S%C3%A9lecteurs_d_attribut">sélecteur d'attribut</a> pour renvoyer une liste d'éléments {{domxref("iframe")}} du document lesquels contiennent un attribut nommé <code>'data-src'</code>:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> matches <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">"iframe[data-src]"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Ici, un sélecteur d'attribut est utilisé pour renvoyer une liste des éléments de la liste contenus dans une liste dont l'ID est <code>"userlist"</code> et qui ont un attribut <code>"data-active"</code> dont la valeur est <code>"1"</code>:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> container <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">"#userlist"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> matches <span class="operator token">=</span> container<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">"li[data-active=1]"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h3 id="Accès_aux_correspondances">Accès aux correspondances</h3>
+
+<p>Une fois que la {{domxref("NodeList")}} des éléments correspondants est retournée, vous pouvez l'examiner pour n'importe quel tableau (<em>array</em>). Si le tableau est vide (sa propriété <code>length</code> est 0), alors aucune correspondance n'a été trouvée.</p>
+
+<p>Sinon, vous pouvez simplement utiliser la notation de tableau standard pour accéder au contenu de la liste. Vous pouvez utiliser n'importe quelle instruction de boucle commune, telle que :</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> highlightedItems <span class="operator token">=</span> userList<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">".highlighted"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+highlightedItems<span class="punctuation token">.</span><span class="function token">forEach</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>userItem<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="function token">deleteUser</span><span class="punctuation token">(</span>userItem<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Notes" name="Notes">Notes d'utilisation</h2>
+
+<p><code>queryselectorAll</code> se comporte différemment des bibliothèques DOM JavaScript les plus courantes, ce qui peut entraîner des résultats inattendus.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<p>Considérons ce code HTML, avec ses trois blocs {{HTMLElement ("div")}} imbriqués.</p>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>outer<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>select<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>inner<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</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> select <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.select'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> inner <span class="operator token">=</span> select<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">'.outer .inner'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+inner<span class="punctuation token">.</span>length<span class="punctuation token">;</span> <span class="comment token">// 1, pas 0!</span></code></pre>
+
+<p>Dans cet exemple, en sélectionnant <code>".outer .inner"</code> dans le contexte <code>&lt;div&gt; </code>avec la classe <code>"select"</code>, l'élément avec la classe <code>".inner"</code> est toujours trouvé, même si <code>.outer</code> n'est pas un descendant de l'élément sur lequel la recherche est effectuée <code>(".select")</code>. Par défaut, <code>querySelectorAll()</code> vérifie uniquement que le dernier élément du sélecteur se trouve dans la portée de la recherche.</p>
+
+<p><span lang="fr"><span>La pseudo-classe {{cssxref (": scope")}} restaure le comportement attendu, ne faisant correspondre les sélecteurs que sur les descendants de l'élément de base :</span></span></p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> select <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.select'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> inner <span class="operator token">=</span> select<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">':scope .outer .inner'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+inner<span class="punctuation token">.</span>length<span class="punctuation token">;</span> <span class="comment token">// 0</span></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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>norme actuelle</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
+   <td>{{Spec2("Selectors API Level 2")}}</td>
+   <td>Pas de changement</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td>
+   <td>{{Spec2("Selectors API Level 1")}}</td>
+   <td>Définition originale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>1</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>8</td>
+   <td>10</td>
+   <td>3.2 (525.3)</td>
+  </tr>
+  <tr>
+   <td><code>:scope</code> pseudo-class</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>32</td>
+   <td>{{CompatNo}}</td>
+   <td>15<sup>[1]</sup></td>
+   <td>7.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.9.1")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>:scope</code> pseudo-class</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>32</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>7.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Pris en charge dans Opera 15+ en activant les balises "<strong>Enable &lt;style scoped&gt;</strong>" ou "<strong>Enable experimental Web Platform features</strong>" dans <code>chrome://flags</code>.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+</div>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Localisation_des_%C3%A9l%C3%A9ments_DOM_avec_les_s%C3%A9lecteurs">Localisation des éléments DOM avec les sélecteurs</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/CSS/S%C3%A9lecteurs_d_attribut">Sélecteurs d'attribut</a> dans le guide CSS</li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors">Sélecteurs d'attribut</a> dans la zone d'apprentissage de MDN</li>
+ <li>{{domxref("element.querySelector()")}}</li>
+ <li>{{domxref("Document.querySelector()")}} et {{domxref("Document.querySelectorAll()")}}</li>
+ <li>{{domxref("DocumentFragment.querySelector()")}} et {{domxref("DocumentFragment.querySelectorAll()")}}</li>
+ <li>{{domxref("document.querySelector()")}} et {{domxref("ParentNode.querySelectorAll()")}}</li>
+ <li><a href="https://developer.mozilla.org/fr/Add-ons/Code_snippets/QuerySelector" title="Code_snippets/QuerySelector">Extraits de code pour <code>querySelector</code></a></li>
+</ul>
diff --git a/files/fr/web/api/element/releasepointercapture/index.html b/files/fr/web/api/element/releasepointercapture/index.html
new file mode 100644
index 0000000000..be7f127da3
--- /dev/null
+++ b/files/fr/web/api/element/releasepointercapture/index.html
@@ -0,0 +1,148 @@
+---
+title: Element.releasePointerCapture()
+slug: Web/API/Element/releasePointerCapture
+tags:
+  - API
+  - DOM
+  - Element
+  - Méthodes
+  - Pointeur
+translation_of: Web/API/Element/releasePointerCapture
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>Relâche (arrête) la capture de pointeur précédemment définie pour un <em>pointer</em> ({{domxref("PointerEvent")}}) spécifique.</p>
+
+<p>Voir la méthode <strong>{{domxref("Element.setPointerCapture","Element.setPointerCapture()")}}</strong> pour une description de <em>pointer capture </em>et la façon de le définir pour un élément particulier.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">targetElement.<em>releasePointerCapture</em>(pointerId);
+</pre>
+
+<h3 id="Arguments">Arguments</h3>
+
+<dl>
+ <dt><em>pointerId</em></dt>
+ <dd>L'{{domxref("PointerEvent.pointerId","identifiant")}} pour un {{domxref("PointerEvent","pointer event")}}.</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Si <code>pointerId</code> ne correspond à aucun pointeur actif, cette méthode renvoie <code>void</code> (<em>vide</em>) et déclenche une {{domxref("DOMException")}} avec le nom <code>InvalidPointerId</code>.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">&lt;html&gt;
+&lt;script&gt;
+function downHandler(ev) {
+ var el=document.getElementById("target");
+ // L'élément "target" va recevoir/capturer d'autres évènements
+ el.setPointerCapture(ev.pointerId);
+}
+function cancelHandler(ev) {
+ var el=document.getElementById("target");
+ // Relâche la capture du pointeur
+ el.releasePointerCapture(ev.pointerId);
+}
+function init() {
+ var el=document.getElementById("target");
+ // Enregistre les gestionnaires du pointeur
+ el.onpointerdown = downHandler;
+ el.onpointercancel = cancelHandler;
+}
+&lt;/script&gt;
+&lt;body onload="init();"&gt;
+&lt;div id="target"&gt; Touch me ... &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="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('Pointer Events 2','#widl-Element-releasePointerCapture-void-long-pointerId', 'releasePointerCapture')}}</td>
+   <td>{{Spec2('Pointer Events 2')}}</td>
+   <td>Version non stable.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Events', '#widl-Element-releasePointerCapture-void-long-pointerId', 'releasePointerCapture')}}</td>
+   <td>{{Spec2('Pointer Events')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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("35")}}<sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop(59)}}</td>
+   <td>10 {{property_prefix("-ms")}}<br>
+    11</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome("35")}}<sup>[1]</sup></td>
+   <td>{{CompatGeckoMobile("29")}}<sup>[2]</sup></td>
+   <td>10 {{property_prefix("-ms")}}<br>
+    11</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] A été pris en charge dans <a href="http://crbug.com/248918">bug 248918</a>.</p>
+
+<p>[2] Supporté avec la préférence <code>dom.w3c_pointer_events.enabled</code> par défaut à <code>false</code> (<em>faux</em>).</p>
+
+<p> </p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{ domxref("Element.setPointerCapture","Element.setPointerCapture()") }}</li>
+ <li>{{ domxref("Pointer_events","Pointer Events") }}</li>
+</ul>
diff --git a/files/fr/web/api/element/removeattribute/index.html b/files/fr/web/api/element/removeattribute/index.html
new file mode 100644
index 0000000000..1a1d2fde8f
--- /dev/null
+++ b/files/fr/web/api/element/removeattribute/index.html
@@ -0,0 +1,51 @@
+---
+title: element.removeAttribute
+slug: Web/API/Element/removeAttribute
+tags:
+  - API
+  - Attributs
+  - DOM
+  - Element
+  - Méthodes
+  - Suppression
+translation_of: Web/API/Element/removeAttribute
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p><code>removeAttribute</code> supprime un attribut de l'élément spécifié.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="eval"><em>element</em>.removeAttribute(<em>nomAttribut</em>);
+</pre>
+
+<ul>
+ <li><code>nomAttribut</code> est une chaîne de caractères représentant le nom de l'attribut à enlever de l'<em>element</em> .</li>
+</ul>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre>// avant : &lt;div id="div1" align="left" width="200"&gt;
+document.getElementById("div1").removeAttribute("align");
+// maintenant : &lt;div id="div1" width="200"&gt;
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Il vaut mieux utiliser <code>removeAttribute</code> plutôt que de définir la valeur de l'attribut à <code>null</code> avec <a href="fr/DOM/element.setAttribute">setAttribute</a>.</p>
+
+<p>Tenter d'effacer un attribut que l'élément ne possède pas ne provoque aucune exception.</p>
+
+<p><code>removeAttribute</code> ne renvoie rien, donc vous ne pouvez supprimer plusieurs attributs par enchaînement de cette méthode.</p>
+
+<p>{{ DOMAttributeMethods() }}</p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-6D6AC0F9">DOM Level 2 Core : removeAttribute</a> — <small><a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-6D6AC0F9">traduction en français</a> (non normative)</small></li>
+</ul>
+
+<p><span class="comment">Interwiki Language Links</span></p>
+
+<div class="noinclude"> </div>
diff --git a/files/fr/web/api/element/removeattributenode/index.html b/files/fr/web/api/element/removeattributenode/index.html
new file mode 100644
index 0000000000..ebee4f2e03
--- /dev/null
+++ b/files/fr/web/api/element/removeattributenode/index.html
@@ -0,0 +1,45 @@
+---
+title: element.removeAttributeNode
+slug: Web/API/Element/removeAttributeNode
+tags:
+  - API
+  - DOM
+  - Element
+  - Méthodes
+translation_of: Web/API/Element/removeAttributeNode
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p><code>removeAttributeNode</code> enlève l'attribut spécifié de l'élément courant.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="eval"><em>removedAttr</em> =<em>element</em>.removeAttributeNode(<em>attributeNode</em>)
+</pre>
+
+<ul>
+ <li><code>attributeNode</code> est le nœud <code>Attr</code> à enlever.</li>
+ <li><code>removedAttr</code> est le nœud <code>Attr</code> qui vient d'être enlevé.</li>
+</ul>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre class="line-numbers  language-html"><code class="language-html">// <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>top<span class="punctuation token">"</span></span> <span class="attr-name token">align</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>center<span class="punctuation token">"</span></span> <span class="punctuation token">/&gt;</span></span>
+var d = document.getElementById("top");
+var d_align = d.getAttributeNode("align");
+d.removeAttributeNode(d_align);
+// align est maintenant supprimé : <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>top<span class="punctuation token">"</span></span> <span class="punctuation token">/&gt;</span></span></code></pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Si l'attribut enlevé a une valeur par défaut, celle-ci remplace immédiatement l'ancienne. Lorsque c'est possible, l'attribut de remplacement conserve la même URI d'espace de noms et le même nom local, ainsi que le préfixe original.</p>
+
+<p>Il n'y a pas de <code>removeAttributeNodeNS</code> (contrairement à la paire <code>setAttributeNode</code> et <code>setAttributeNodeNS</code> pour lesquels il est nécessaire de savoir quel attribut remplacer (le cas échéant),  <code>removeAttributeNode</code> n'a pas cette exigence.  <code>removeAttributeNode</code> peut supprimer des attributs, qu'ils soient d'espace de noms ou pas.</p>
+
+<p>{{ DOMAttributeMethods() }}</p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-D589198">DOM Level 2 Core : removeAttributeNode</a> — <small><a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-D589198">traduction en français</a> (non normative)</small></li>
+</ul>
diff --git a/files/fr/web/api/element/removeattributens/index.html b/files/fr/web/api/element/removeattributens/index.html
new file mode 100644
index 0000000000..d7ef80e848
--- /dev/null
+++ b/files/fr/web/api/element/removeattributens/index.html
@@ -0,0 +1,44 @@
+---
+title: element.removeAttributeNS
+slug: Web/API/Element/removeAttributeNS
+tags:
+  - API
+  - DOM
+  - Element
+  - Méthodes
+translation_of: Web/API/Element/removeAttributeNS
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p><code>removeAttributeNS</code> supprime l'attribut spécifié d'un élément.</p>
+
+<p>{{ Fx_minversion_inline(3) }} Dans Firefox 3 et postérieurs, cette méthode réinitialise les valeurs DOM à leur valeur par défaut.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="eval"><em>element</em>.removeAttributeNS(<em>namespace</em>,<em>attrName</em>);
+</pre>
+
+<ul>
+ <li><code>namespace</code> est une chaîne qui contient l'espace de noms de l'attribut.</li>
+ <li><code>attrName</code> est une chaîne qui nomme l'attribut à supprimer du noeud en cours.</li>
+</ul>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre>// &lt;div id="div1" xmlns:special="http://www.mozilla.org/ns/specialspace"
+//      special:specialAlign="utterleft" width="200px" /&gt;
+d = document.getElementById("div1");
+d.removeAttributeNS("http://www.mozilla.org/ns/specialspace", "specialAlign");
+// l'élément est devenu : &lt;div id="div1" width="200px" /&gt;
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>{{ DOMAttributeMethods() }}</p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElRemAtNS">DOM Level 2 Core: removeAttributeNS (en)</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-ElRemAtNS">traduction en français</a> (non normative)</small></li>
+</ul>
diff --git a/files/fr/web/api/element/requestfullscreen/index.html b/files/fr/web/api/element/requestfullscreen/index.html
new file mode 100644
index 0000000000..500c27e029
--- /dev/null
+++ b/files/fr/web/api/element/requestfullscreen/index.html
@@ -0,0 +1,123 @@
+---
+title: Element.requestFullscreen()
+slug: Web/API/Element/requestFullScreen
+tags:
+  - Méthode
+  - Plein écran
+translation_of: Web/API/Element/requestFullScreen
+---
+<div>{{APIRef("Fullscreen API")}}</div>
+
+<p>La méthode <code><strong>Element.requestFullscreen()</strong></code> envoie une requête asynchrone pour que l'élément soit affiché en plein écran.</p>
+
+<p>Il n'y a aucune garantie que l'élément passera effectivement en mode plein écran. Si la permission d'entrer en plein écran est acquise, le document recevra un événement {{event("fullscreenchange")}} pour l'informer qu'il est désormais en mode plein écran. Si la permission est refusée, le document recevra un événement {{event('fullscreenerror')}} à la place.</p>
+
+<p>Cette méthode doit être invoquée par l'interaction d'un utilisateur ou un changement d'orientation du périphérique, sinon elle échouera.</p>
+
+<div class="note">
+<p>Seuls les éléments présents dans l'espace de noms (namespace) HTML (c'est à dire, les éléments qui font partie du standard HTML), ainsi que les éléments {{HTMLElement("svg")}} et {{HTMLElement("math")}}, qui se trouvent dans le plus haut niveau du document ou dans une {{HTMLElement('iframe')}} avec l'attribut {{htmlattrxref("allowfullscreen", "iframe")}} peuvent être affichés en plein écran. Cela signifie que les éléments se trouvant dans une {{HTMLElement('frame')}} ou un {{HTMLElement('object')}} ne le peuvent pas.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>Element</em>.requestFullscreen();
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Avant d'appeler <code>requestFullScreen()</code>, mettez en place des gestionnaires (handlers) pour les évenements  {{event("fullscreenchange")}} et {{event("fullscreenerror")}}, pour savoir lorsque vous avez réussi à passer en mode plein écran (ou lorsque la permission de le faire a été refusée).</p>
+
+<p>tbd</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">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Fullscreen", "#dom-element-requestfullscreen", "Element.requestFullScreen()")}}</td>
+   <td>{{Spec2("Fullscreen")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox</th>
+   <th>Internet Explorer</th>
+   <th>Edge</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("webkit")}}<sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop("9.0")}} as <code>mozRequestFullScreen</code><sup>[2]</sup><br>
+    {{CompatGeckoDesktop("47.0")}} (behind full-screen-api.unprefix.enabled</td>
+   <td>11{{property_prefix("ms")}}<sup>[3]</sup></td>
+   <td>{{CompatVersionUnknown}}<sup>[3]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome 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>Support basique</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("webkit")}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("9.0")}} as <code>mozRequestFullScreen</code><sup>[2]</sup><br>
+    {{CompatGeckoMobile("47.0")}} (behind full-screen-api.unprefix.enabled</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Également implémenté en tant que <code>webkitRequestFullScreen</code>.</p>
+
+<p>[2] Implémenté en tant que <code>mozRequestFullScreen</code> (remarquez le S majuscule pour <em>Screen</em>). Avant Firefox 44, Gecko autorisait incorrectement les éléments présents dans une  {{HTMLElement('frame')}} ou un {{HTMLElement('object')}} de demander, et d'obtenir, le mode plein écran. Dans les versions 44 et supérieures de Firefox, ceci a été corrigé : seuls les éléments dans le plus haut niveau du document ou dans une {{HTMLElement('iframe')}} avec l'attribut {{htmlattrxref("allowfullscreen", "iframe")}} peuvent être affichés en plein écran.</p>
+
+<p>[3] Voir la <a href="https://msdn.microsoft.com/en-us/library/dn254939%28v=vs.85%29.aspx">documentation sur MSDN</a>.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Fullscreen_API">Full-screen API</a></li>
+ <li>{{ domxref("Element.requestFullscreen()") }}</li>
+ <li>{{ domxref("Document.exitFullscreen()") }}</li>
+ <li>{{ domxref("Document.fullscreen") }}</li>
+ <li>{{ domxref("Document.fullscreenElement") }}</li>
+ <li>{{ cssxref(":fullscreen") }}</li>
+ <li>{{ HTMLAttrXRef("allowfullscreen", "iframe") }}</li>
+</ul>
diff --git a/files/fr/web/api/element/scrollheight/index.html b/files/fr/web/api/element/scrollheight/index.html
new file mode 100644
index 0000000000..64aa93f7ae
--- /dev/null
+++ b/files/fr/web/api/element/scrollheight/index.html
@@ -0,0 +1,118 @@
+---
+title: Element.scrollHeight
+slug: Web/API/Element/scrollHeight
+translation_of: Web/API/Element/scrollHeight
+---
+<p>{{ ApiRef() }}</p>
+
+<p>L'attribut en lecture seule <strong><code>element.scrollHeight</code></strong> est une mesure de la hauteur du contenu d'un élément qui inclut le contenu débordant et non visible à l'écran. La valeur <code>scrollHeight</code> est égale à la hauteur minimum dont l'élément aurait besoin pour que le contenu rentre dans le viewpoint sans utiliser de barre de défilement. Cela inclut les marges internes mais pas les marges externes.</p>
+
+<div class="note">
+<p>Cette propriété arrondit la valeur à l'entier le plus proche. Si vous avez besoin d'une valeur précise, utilisez <a href="/fr/docs/DOM/element.getBoundingClientRect">element.getBoundingClientRect()</a>.</p>
+</div>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="eval">var intElemScrollHeight = document.getElementById(id_attribute_value).scrollHeight;
+</pre>
+
+<p><code>intElemScrollHeight</code> est une variable contenant un entier correspondant à la valeur en pixels de la hauteur défilable de l'élément. <code>scrollHeight</code> est une propriété en lecture seule.</p>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<div id="offsetContainer" style="margin: 26px 0px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: absolute; left: 260px;">
+<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
+<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p>
+
+<p>Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.</p>
+
+<p>All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.</p>
+
+<p>Cat image and text coming from <a class="external" href="http://www.best-cat-art.com/">www.best-cat-art.com</a></p>
+
+<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p>
+</div>
+<strong style="">Left</strong><strong style="">Top</strong><strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong><strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong><em>margin-top</em><em>margin-bottom</em><em>border-top</em><em>border-bottom</em><span class="comment">{{ mediawiki.external('if IE') }}&gt;&lt;span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;margin-left&lt;/span&gt;&lt;span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;border-left&lt;/span&gt;&lt;span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;padding-left&lt;/span&gt;&lt;span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;"&gt;padding-right&lt;/span&gt;&lt;span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;border-right&lt;/span&gt;&lt;span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;margin-right&lt;/span&gt;&lt;!{{ mediawiki.external('endif') }}</span></div>
+
+<p style="margin-top: 270px;"><img alt="Image:scrollHeight.png" src="/@api/deki/files/840/=ScrollHeight.png"></p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Problèmes et solutions</h2>
+
+<h3 id="Déterminer_si_un_élément_a_complètement_été_défilé">Déterminer si un élément a complètement été défilé</h3>
+
+<p>L'expression suivante renvoie <code>true</code> si l'élément est à la fin du défilement, <code>false</code> si ça ne l'est pas.</p>
+
+<pre class="brush: js">element.scrollHeight - element.scrollTop === element.clientHeight</pre>
+
+<p>Associée à l'événement <a href="/fr/docs/DOM/element.onscroll">element.onscroll</a>, l'expression peut être utile pour déterminer si un utilisateur a lu un texte ou non (voir aussi les propriétés <a href="/fr/docs/DOM/element.scrollTop">element.scrollTop</a> et <a href="/fr/docs/DOM/element.clientHeight">element.clientHeight</a>. Par exemple :</p>
+
+<pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
+&lt;title&gt;MDN Example&lt;/title&gt;
+&lt;script type="text/javascript"&gt;
+function checkReading () {
+  if (checkReading.read) { return; }
+  checkReading.read = this.scrollHeight - this.scrollTop === this.clientHeight;
+  document.registration.accept.disabled = document.getElementById("nextstep").disabled = !checkReading.read;
+  checkReading.noticeBox.innerHTML = checkReading.read ?
+    "Merci." :
+    "Veuillez faire défiler la page et lire le texte qui suit.";
+}
+
+onload = function () {
+  var oToBeRead = document.getElementById("rules");
+  checkReading.noticeBox = document.createElement("span");
+  document.registration.accept.checked = false;
+  checkReading.noticeBox.id = "notice";
+  oToBeRead.parentNode.insertBefore(checkReading.noticeBox, oToBeRead);
+  oToBeRead.parentNode.insertBefore(document.createElement("br"), oToBeRead);
+  oToBeRead.onscroll = checkReading;
+  checkReading.call(oToBeRead);
+}</pre>
+
+<p><a href="https://developer.mozilla.org/files/4589/readme-example.html">Voir l'exemple en action</a></p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
+
+<p><code>scrollHeight</code> fait partie du modèle objet <abbr title="Dynamic HyperText Markup Language">DHTML</abbr> de Microsoft Internet Explorer. Elle fait partie de la spécification : {{ SpecName("CSSOM View") }}.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Navigateur</th>
+   <th scope="col">Version</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Internet Explorer</td>
+   <td><strong>8.0</strong></td>
+  </tr>
+  <tr>
+   <td>Firefox (Gecko)</td>
+   <td><strong>3.0</strong> (1.9)</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>?</td>
+  </tr>
+  <tr>
+   <td>Safari | Chrome | Webkit</td>
+   <td><strong>4.0</strong> | <strong>4.0</strong> | ?</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><strong>Dans les versions inférieures à Firefox 21 :</strong> quand le contenu d'un élément ne génère pas de barre de défilement verticale, alors sa propriété <code>scrollHeight</code> est égale à sa propriété <code>clientHeight</code>. Cela signifie soit que le contenu est trop court pour avoir besoin d'une barre de défilement, soit que la propriété CSS<code> {{ cssxref("overflow") }}</code> de l'élément a pour valeur <code>visible</code>.</p>
+
+<h2 id="Voir_aussi" name="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://docs.microsoft.com/en-us/previous-versions//hh781509(v=vs.85)">MSDN: Measuring Element Dimension and Location with CSSOM in Windows Internet Explorer 9</a></li>
+ <li><a href="/fr/docs/DOM/element.clientHeight">element.clientHeight</a></li>
+ <li><a href="/fr/docs/DOM/element.offsetHeight">element.offsetHeight</a></li>
+</ul>
diff --git a/files/fr/web/api/element/scrollintoview/index.html b/files/fr/web/api/element/scrollintoview/index.html
new file mode 100644
index 0000000000..bdf1b8d8e5
--- /dev/null
+++ b/files/fr/web/api/element/scrollintoview/index.html
@@ -0,0 +1,86 @@
+---
+title: element.scrollIntoView
+slug: Web/API/Element/scrollIntoView
+tags:
+  - API
+  - DOM
+  - Element
+  - Méthodes
+translation_of: Web/API/Element/scrollIntoView
+---
+<div>{{ APIRef("DOM")}}{{SeeCompatTable}}</div>
+
+<p>La méthode <code><strong>Element.scrollIntoView()</strong></code> fait défiler la page de manière à rendre l'élément visible.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">element.scrollIntoView();
+element.scrollIntoView(<var>alignToTop</var>); // Paramètre booléen
+element.scrollIntoView(<var>scrollIntoViewOptions</var>); // Paramètre d'objet
+</pre>
+
+<dl>
+ <dt>
+ <h3 id="Paramètres">Paramètres</h3>
+ </dt>
+ <dt><code>alignToTop</code> {{ optional_inline() }}</dt>
+ <dd>
+ <p>est une valeur {{jsxref("Boolean")}} optionnelle qui :</p>
+
+ <ul>
+  <li>si elle vaut <code>true</code> (<em>vrai</em>), aligne l'élément avec le haut de la zone visible de l'ancêtre défilable. Correspond à <code>scrollIntoViewOptions: {block: "start", inline: "nearest"}</code>. C'est la valeur par défaut.</li>
+  <li>Si elle vaut <code>false</code> (<em>faux</em>), celui-ci sera aligné en bas de la zone visible de l'ancêtre défilable. Correspond à <code>scrollIntoViewOptions: {block: "end", inline: "nearest"}</code>.</li>
+ </ul>
+ </dd>
+ <dt><code>scrollIntoViewOptions</code> {{optional_inline}} {{experimental_inline}}</dt>
+ <dd>Est un objet qui a les propriétés suivantes :</dd>
+ <dt><code>behavior</code> {{optional_inline}}</dt>
+ <dd>Définit l'animation de transition qui peut être <code>"auto"</code>, <code>"instant"</code> ou <code>"smooth"</code>. Par défaut : <code>"auto"</code>.</dd>
+ <dt><code>block</code> {{optional_inline}}</dt>
+ <dd>L'une des options  <code>"start"</code>, <code>"center"</code>, <code>"end"</code> ou<code>"nearest"</code>. Par défaut : <code>"center"</code>.</dd>
+ <dt><code>inline</code> {{optional_inline}}</dt>
+ <dd>L'une des options <code>"start"</code>, <code>"center"</code>, <code>"end"</code> ou <code>"nearest"</code>. Par défaut : <code>"nearest"</code>.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">var element = document.getElementById("box");
+
+element.scrollIntoView();
+element.scrollIntoView(false);
+element.scrollIntoView({block: "end"});
+element.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>L'élément peut ne pas être aligné complètement avec le haut ou le bas, selon la disposition des autres éléments.</p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Spécification</th>
+   <th>Statut</th>
+   <th>Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSSOM View", "#dom-element-scrollintoview", "Element.scrollIntoView()")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Element.scrollIntoView")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Element.scrollIntoViewIfNeeded()")}}<a href="/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded"> </a>{{non-standard_inline}}</li>
+</ul>
diff --git a/files/fr/web/api/element/scrollintoviewifneeded/index.html b/files/fr/web/api/element/scrollintoviewifneeded/index.html
new file mode 100644
index 0000000000..2524b1cf9a
--- /dev/null
+++ b/files/fr/web/api/element/scrollintoviewifneeded/index.html
@@ -0,0 +1,97 @@
+---
+title: Element.scrollIntoViewIfNeeded()
+slug: Web/API/Element/scrollIntoViewIfNeeded
+tags:
+  - API
+  - DOM
+  - Element
+  - Méthodes
+translation_of: Web/API/Element/scrollIntoViewIfNeeded
+---
+<div>{{APIRef("DOM")}}{{Non-standard_header}}</div>
+
+<p>La méthode <code><strong>Element.scrollIntoViewIfNeeded()</strong></code> fait défiler l'élément en cours dans la zone visible de la fenêtre du navigateur s'il n'y est pas déjà. Si l'élément est déjà dans la zone visible de la fenêtre du navigateur, aucun défilement n'a lieu. Cette méthode est une variante propriétaire de la méthode standard <a href="/en-US/docs/Web/API/Element/scrollIntoView"><code>Element.scrollIntoView()</code></a>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>À faire.</p>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><em><code>opt_center</code></em></dt>
+ <dd>Est une valeur {{jsxref("Boolean")}} facultative avec la valeur <code>true</code> par défaut :
+ <ul>
+  <li>Si <code>true</code> (<em>vrai</em>), l'élément sera aligné sur le centre de la zone visible de l'ancêtre défilable.</li>
+  <li>Si <code>false</code> (<em>faux</em>), l'élément sera aligné sur le bord le plus proche de la zone visible de l'ancêtre défilable. Selon le bord de la zone visible le plus proche de l'élément, soit le haut de l'élément sera aligné sur le bord supérieur de la zone visible, soit le bord inférieur de l'élément sera aligné sur le bord inférieur de la zone visible .</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>À faire</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ne fait partie d'aucune spécification. C'est une méthode propriétaire propre à WebKit.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Microsoft Edge</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] {{bug(403510)}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=17152">W3C CSSOM bug 17152 : Support centrant un élément lors du défilement dans la vue.</a> (<span class="short_text" id="result_box" lang="fr"><span>demande de fonctionnalité pour un équivalent standardisé à</span></span> <code>scrollIntoViewIfNeeded</code>)</li>
+</ul>
diff --git a/files/fr/web/api/element/scrollleft/index.html b/files/fr/web/api/element/scrollleft/index.html
new file mode 100644
index 0000000000..da44c622ff
--- /dev/null
+++ b/files/fr/web/api/element/scrollleft/index.html
@@ -0,0 +1,71 @@
+---
+title: element.scrollLeft
+slug: Web/API/Element/scrollLeft
+tags:
+  - DOM
+  - DOM_0
+translation_of: Web/API/Element/scrollLeft
+---
+<p>{{ ApiRef() }}</p>
+
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+
+<p>Définit ou obtient le nombre de pixels dont le contenu est défilé vers la gauche.</p>
+
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+
+<pre class="eval">// Obtient le nombre de pixels défilés
+var <var>sLeft</var> = <var>element</var>.scrollLeft;
+</pre>
+
+<p><var>sLeft</var> est un entier représentant le nombre de pixels dont <var>element</var> a été défilé vers la gauche.</p>
+
+<pre class="eval">// Définit le nombre de pixels défilés
+<var>element</var>.scrollLeft = 10;
+</pre>
+
+<p><strong>scrollLeft</strong> peut être n'importe quelle valeur entière, cependant :</p>
+
+<ul>
+ <li>Si l'élément ne peut pas défiler (par exemple parce qu'il ne déborde pas), <code>scrollLeft</code> est mis à 0.</li>
+ <li>S'il reçoit une valeur inférieure à 0, <code>scrollLeft</code> est mis à 0.</li>
+ <li>S'il reçoit une valeur plus grande que le maximum dont le contenu peut défiler, <code>scrollLeft</code> est mis au maximum.</li>
+</ul>
+
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+
+<pre>&lt;script type="text/javascript"&gt;
+
+function doScrollLeft(el, p)
+{
+  el.scrollLeft = p;
+}
+
+&lt;/script&gt;
+
+&lt;div id="aDiv"
+     style="width: 100px; height: 200px; overflow: auto;"
+&gt;
+&lt;script type="text/javascript"&gt;
+for (var i=0; i&lt;100; ++i){
+  document.write(i + '-FooBar-FooBar-FooBar&lt;br&gt;');
+}
+&lt;/script&gt;
+&lt;/div&gt;
+&lt;br&gt;
+&lt;input type="button" value="Défile de 50 pixels"
+       onclick="doScrollLeft(document.getElementById('aDiv'), 50);"
+&gt;
+</pre>
+
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+
+<p>{{ DOM0() }}</p>
+
+<h3 id="R.C3.A9f.C3.A9rences" name="R.C3.A9f.C3.A9rences">Références</h3>
+
+<ul>
+ <li><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/scrollleft.asp"><em>scrollLeft</em> sur MSDN</a></li>
+</ul>
+
+<p>{{ languages( { "en": "en/DOM/element.scrollLeft", "pl": "pl/DOM/element.scrollLeft" } ) }}</p>
diff --git a/files/fr/web/api/element/scrollleftmax/index.html b/files/fr/web/api/element/scrollleftmax/index.html
new file mode 100644
index 0000000000..29c1026e81
--- /dev/null
+++ b/files/fr/web/api/element/scrollleftmax/index.html
@@ -0,0 +1,76 @@
+---
+title: Element.scrollLeftMax
+slug: Web/API/Element/scrollLeftMax
+translation_of: Web/API/Element/scrollLeftMax
+---
+<p>{{APIRef("DOM")}}{{Non-standard_header}}</p>
+
+<p>La propriété non modifiable  <code><strong>Element.scrollLeftMax</strong></code> renvoie un  {{jsxref("Number")}} représentant la distance restante de défilement vers la gauche de l'élément.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre>var <em>pxl</em> = <em>elt</em>.scrollLeftMax;</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p><em>Cette propriété ne fait partie d'aucune spécification.</em></p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Compatibilité</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoDesktop(16) }}</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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Compatibilité</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoMobile(16) }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Element.scrollTopMax")}} renvoie la distance restante de défilement vers le haut de l'élément.</li>
+</ul>
diff --git a/files/fr/web/api/element/scrollto/index.html b/files/fr/web/api/element/scrollto/index.html
new file mode 100644
index 0000000000..916beabbcb
--- /dev/null
+++ b/files/fr/web/api/element/scrollto/index.html
@@ -0,0 +1,80 @@
+---
+title: Element.scrollTo()
+slug: Web/API/Element/scrollTo
+tags:
+  - API
+  - Element
+  - Méthode
+  - Reference
+  - scrollTo
+translation_of: Web/API/Element/scrollTo
+---
+<div>{{ APIRef }}</div>
+
+<p>La méthode <code><strong>scrollTo()</strong></code><strong> </strong>de l'interface {{domxref("Element")}} permet de faire défiler le document jusqu'à un jeu de coordonnées particulier.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox">element.scrollTo(<em>x-coord</em>, <em>y-coord</em>)
+element.scrollTo(<em>options</em>)
+</pre>
+
+<h3 id="Parameters" name="Parameters">Paramètres</h3>
+
+<ul>
+ <li><code>x-coord</code> est le pixel le long de l'axe horizontal du document qui doit être affiché en haut à gauche.</li>
+ <li><code>y-coord</code> est le pixel le long de l'axe vertical du document qui doit être affiché en haut à gauche.</li>
+</ul>
+
+<p>- ou -</p>
+
+<ul>
+ <li><code>options</code> est un dictionnaire de type {{domxref("ScrollToOptions")}}.</li>
+</ul>
+
+<h2 id="Example" name="Example">Exemples</h2>
+
+<p>En utilisant des coordonnées :</p>
+
+<pre class="brush:js">element.scrollTo(0, 1000);
+</pre>
+
+<p>Ou en utilisant <code>options</code> :</p>
+
+<pre class="brush: js">element.scrollTo({
+  top: 100,
+  left: 100,
+  behavior: 'smooth'
+});</pre>
+
+<h2 id="Specifications" name="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('CSSOM View', '#dom-element-scrollto-options-options', 'element.scrollTo()') }}</td>
+   <td>{{ Spec2('CSSOM View') }}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité">Compatibilité</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer à ces données, veuillez consulter le site https://github.com/mdn/browser-compat-data et nous envoyer une demande d'extraction.</div>
+
+<p>{{Compat("api.Element.scrollTo")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Element.scrollTop")}}, {{domxref("Element.scrollLeft")}}</li>
+ <li>{{domxref("Window.scrollTo()")}}</li>
+</ul>
diff --git a/files/fr/web/api/element/scrolltop/index.html b/files/fr/web/api/element/scrolltop/index.html
new file mode 100644
index 0000000000..dfd5c0f31a
--- /dev/null
+++ b/files/fr/web/api/element/scrolltop/index.html
@@ -0,0 +1,55 @@
+---
+title: element.scrollTop
+slug: Web/API/Element/scrollTop
+tags:
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/Element/scrollTop
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p>Définit ou obtient le nombre de pixels dont le contenu de l'élément a défilé vers le haut.</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<pre class="eval"><span style="color: rgb(153, 153, 153);">// Obtient le nombre de pixels défilés</span>
+<span style="color: rgb(128, 0, 128);">var</span> <var> intElemScrollTop</var> = <var>element</var>.scrollTop;
+</pre>
+<p><var>intElemScrollTop</var> est un entier correspondant au nombre de pixels dont le contenu d'<var>element</var> a défilé vers le haut.</p>
+<pre class="eval"><span style="color: rgb(153, 153, 153);">// Définit le nombre de pixels défilés</span>
+<var>element</var>.scrollTop = <var>intValue</var>;
+</pre>
+<p><strong>scrollTop</strong> peut avoir n'importe quelle valeur entière, cependant :</p>
+<ul>
+ <li>Si l'élément ne peut pas défiler (par exemple parce qu'il ne déborde pas), <code>scrollTop</code> est mis à 0.</li>
+ <li>S'il est défini à une valeur inférieure à 0, <code>scrollTop</code> est mis à 0.</li>
+ <li>S'il est défini à une valeur plus grande que le maximum dont le contenu peut défiler, <code>scrollTop</code> est mis au maximum.</li>
+</ul>
+<h3 id="Description" name="Description">Description</h3>
+<p>L'attribut <b>scrollTop</b> d'un élément est la mesure de la distance entre le haut de cet élément et le point le plus haut de son contenu visible.</p>
+<p>Lorsqu'un élément ne génère pas de barre de défilement vertical, sa valeur <code>scrollTop</code> vaut 0.</p>
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+<div id="offsetContainer" style="margin: 26px 0px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: absolute; left: 260px;">
+ <div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
+  <p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p>
+  <p>Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.</p>
+  <p><span style="float: right;"><img alt="Image:BirmanCat.jpg"></span>All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.</p>
+  <p>Cat image and text coming from <a class="external" href="http://www.best-cat-art.com/">www.best-cat-art.com</a></p>
+  <p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p>
+ </div>
+ <span style="position: absolute; left: -32px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Left</span><span style="position: absolute; left: 170px; top: -24px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Top</span><span style="position: absolute; left: 370px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Right</span><span style="position: absolute; left: 164px; top: 203px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Bottom</span><span style="position: absolute; left: 143px; top: 5px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-top</span><span style="position: absolute; left: 138px; top: 175px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-bottom</span><span style="position: absolute; left: 143px; top: 27px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-top</span><span style="position: absolute; left: 138px; top: 153px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-bottom</span><span class="comment">{{ mediawiki.external('if IE') }}&gt;&lt;span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;margin-left&lt;/span&gt;&lt;span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;border-left&lt;/span&gt;&lt;span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;padding-left&lt;/span&gt;&lt;span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;"&gt;padding-right&lt;/span&gt;&lt;span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;border-right&lt;/span&gt;&lt;span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;margin-right&lt;/span&gt;&lt;!{{ mediawiki.external('endif') }}</span></div>
+<p style="margin-top: 270px;"><img alt="Image:scrollTop.png"></p>
+<p>Il n'est pas possible d'avoir une démonstration interactive dans cette référence.</p>
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+<p><code>scrollTop</code> fait partie du modèle objet <abbr title="Dynamic HyperText Markup Language">DHTML</abbr> de Microsoft Internet Explorer. Elle ne fait partie d'aucune spécification ou recommandation technique du W3C.</p>
+<h3 id="Notes" name="Notes">Notes</h3>
+<p><code>scrollTop</code> est une propriété du modèle objet <abbr title="Dynamic HyperText Markup Language">DHTML</abbr> provenant de Microsoft Internet Explorer. On l'appelle la distance entre le haut physique d'un élément et son affichage défilant.</p>
+<h3 id="R.C3.A9f.C3.A9rences" name="R.C3.A9f.C3.A9rences">Références</h3>
+<ul>
+ <li><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/scrolltop.asp?frame=true">
+  <i>
+   scrollTop definition</i>
+  sur MSDN</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/workshop/author/om/measuring.asp">
+  <i>
+   Measuring Element Dimension and Location</i>
+  sur MSDN</a></li>
+</ul>
+<p>{{ languages( { "en": "en/DOM/element.scrollTop", "pl": "pl/DOM/element.scrollTop" } ) }}</p>
diff --git a/files/fr/web/api/element/scrollwidth/index.html b/files/fr/web/api/element/scrollwidth/index.html
new file mode 100644
index 0000000000..92fbdc41e1
--- /dev/null
+++ b/files/fr/web/api/element/scrollwidth/index.html
@@ -0,0 +1,33 @@
+---
+title: element.scrollWidth
+slug: Web/API/Element/scrollWidth
+tags:
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/Element/scrollWidth
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p><b>scrollWidth</b> est une propriété en lecture seule qui renvoie, parmi la largeur en pixels du contenu d'un élément, et la largeur de l'élément, celle qui est la plus grande.</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<pre class="eval">var <var>xScrollWidth</var> = <var>element</var>.scrollWidth;
+</pre>
+<p><var>xScrollWidth</var> est la largeur du contenu d'<var>element</var> en pixels.</p>
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+<pre>&lt;div id="aDiv"
+     style="width: 100px; height: 200px; overflow: auto;"
+&gt;-FooBar-FooBar-FooBar&lt;/div&gt;
+&lt;br&gt;
+&lt;input type="button" value="Show scrollWidth"
+       onclick="alert(document.getElementById('aDiv').scrollWidth);"&gt;
+</pre>
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+<p>Il n'y a pas de spécification du W3C pour <b>scrollWidth</b>.</p>
+<p>Un brouillon de l'éditeur existe cependant : <a class="external" href="http://dev.w3.org/cvsweb/~checkout~/csswg/cssom/Overview.src.html">Cascading Style Sheets Object Model (CSSOM)</a></p>
+<h3 id="R.C3.A9f.C3.A9rences" name="R.C3.A9f.C3.A9rences">Références</h3>
+<ul>
+ <li><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/scrollwidth.asp">
+  <i>
+   scrollWidth</i>
+  sur MSDN</a></li>
+</ul>
+<p>{{ languages( { "en": "en/DOM/element.scrollWidth", "pl": "pl/DOM/element.scrollWidth" } ) }}</p>
diff --git a/files/fr/web/api/element/select_event/index.html b/files/fr/web/api/element/select_event/index.html
new file mode 100644
index 0000000000..b816f249bc
--- /dev/null
+++ b/files/fr/web/api/element/select_event/index.html
@@ -0,0 +1,77 @@
+---
+title: select
+slug: Web/API/Element/select_event
+translation_of: Web/API/Element/select_event
+---
+<p>L'évènement <code>select</code> est déclenché quand du texte est sélectionné. L'évènement peut ne pas être disponible pour tous les éléments dans tous les langages. Par exemple, en [<cite><a class="informative" href="http://www.w3.org/TR/DOM-Level-3-Events/#references-HTML5">HTML5</a></cite>], les évènements select ne peuvent être envoyés que sur des éléments <code>input</code> de formulaire et <code>textarea</code>.</p>
+
+<h2 id="Info_générale">Info générale</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-select">DOM L3</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">UIEvent si généré depuis une interface utilisateur, Event sinon.</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Remonte</dt>
+ <dd style="margin: 0 0 0 120px;">Oui</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">Élément</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par Défault</dt>
+ <dd style="margin: 0 0 0 120px;">Aucune</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td>
+   <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>0.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">&lt;input id="test" type="text" value="Sélectionnez-moi !" /&gt;
+&lt;script&gt;
+  var elem = document.getElementById('test');
+  elem.addEventListener('select', function() {
+    alert('La sélection a changé !');
+  }, false);
+&lt;/script&gt;</pre>
diff --git a/files/fr/web/api/element/setattribute/index.html b/files/fr/web/api/element/setattribute/index.html
new file mode 100644
index 0000000000..9ba4ac1759
--- /dev/null
+++ b/files/fr/web/api/element/setattribute/index.html
@@ -0,0 +1,84 @@
+---
+title: Element.setAttribute()
+slug: Web/API/Element/setAttribute
+tags:
+  - API
+  - Attributs
+  - DOM
+  - Element
+  - Méthode
+translation_of: Web/API/Element/setAttribute
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>Ajoute un nouvel attribut ou change la valeur d'un attribut existant pour l'élément spécifié. Si l'attribut existe déjà, la valeur est mise à jour ; sinon, un nouvel attribut est ajouté avec le nom et la valeur spécifiés.</p>
+
+<p>Pour obtenir la valeur actuelle d'un attribut, utilisez {{domxref("Element.getAttribute", "getAttribute()")}} ; pour supprimer un attribut, appelez {{domxref("Element.removeAttribute", "removeAttribute()")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>Element</em>.setAttribute(<em>name</em>, <em>value</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) spécifiant le nom de l'attribut pour lequel la valeur doit être définie. L'attribut name est automatiquement converti en minuscules quand <code>setAttribute()</code> est appelé sur un élément HTML dans document HTML.</dd>
+ <dt><code>value</code></dt>
+ <dd>une {{domxref("DOMString")}} contenant la valeur à affecter à l'attribut. Toute valeur spécifiée qui n'est pas une chaîne de caractères, est convertie automatiquement en chaîne.</dd>
+</dl>
+
+<p>Les attributs booléens sont considérés être <code>true</code> (<em>vrai</em>) s'ils sont présents sur l'élément, quelle que soit leur valeur réelle ; en règle générale, vous devez spécifier la chaîne vide (<code>""</code>) dans <code>value</code> (certains utilisent le nom de l'attribut, mais ce fonctionnement n'est pas standard). Voir l' {{anch("Exemple", "exemple")}} ce-dessous pour une démonstration pratique.</p>
+
+<p>Puisque la valeur spécifiée est convertie en chaîne, spécifier <code>null</code> ne fait pas nécessairement ce que vous attendez. Au lieu de supprimer l'attribut ou de définir sa valeur comme {{jsxref("null")}} , il définit à la place la valeur de l'attribut avec la chaîne "null". Si vous souhaitez supprimer un attribut, appelez {{domxref("Element.removeAttribute","removeAttribute()")}}.</p>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<dl>
+ <dt><code>InvalidCharacterError</code></dt>
+ <dd>Le nom d'attribut spécifié contient un ou plusieurs caractères qui ne sont pas valides dans les noms d'attribut.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans l'exemple suivant, <code>setAttribute()</code> est utilisé pour définir des attributs sur un {{HTMLElement("button")}} (<em>bouton</em>).</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;button&gt;Hello World&lt;/button&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush:js">var b = document.querySelector("button");
+
+b.setAttribute("name", "helloButton");
+b.setAttribute("disabled", "");</pre>
+
+<p>Ceci démontre 2 choses :</p>
+
+<ul>
+ <li>le premier appel de <code>setAttribute()</code> ci-dessus montre la modification de la valeur de l'attribut <code>name</code> en "helloButton". Vous pouvez le voir en utilisant l'inspecteur de page de votre navigateur (<a href="https://developers.google.com/web/tools/chrome-devtools/inspect-styles">Chrome</a>, <a href="https://docs.microsoft.com/en-us/microsoft-edge/f12-devtools-guide/dom-explorer">Edge</a>, <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector">Firefox</a>, <a href="https://developer.apple.com/library/content/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Introduction/Introduction.html">Safari</a>).</li>
+ <li>Pour définir la valeur d'un attribut booléen, tel que <code>disabled</code>, vous pouvez spécifier n'importe quelle valeur. Une chaîne vide ou le nom de l'attribut sont des valeurs recommandées. Tout ce qui compte est que si l'attribut est présent, quelle que soit sa valeur réelle, sa valeur est considérée comme <code>true</code> (<em>vraie</em>). L'absence de l'attribut signifie que sa valeur est <code>false</code> (<em>fausse</em>). En définissant la valeur de l'attribut <code>disabled</code> sur la chaîne vide (""), nous définissons <code>disabled</code> sur <code>true</code>, ce qui entraîne la désactivation du bouton.</li>
+</ul>
+
+<p>{{ EmbedLiveSample('Example', '300', '50') }}</p>
+
+<p>{{DOMAttributeMethods}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68F082">DOM Level 2 Core : setAttribute</a> — <small><a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2/core/core.html#ID-F68F082">traduction en français</a> (non normative)</small></li>
+ <li><a class="external external-icon" href="http://www.whatwg.org/specs/web-apps/current-work/#apis-in-html-documents" title="http://www.whatwg.org/specs/web-apps/current-work/#apis-in-html-documents">HTML5 : API dans les documents HTML</a></li>
+</ul>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<h3 id="Gecko_notes">Gecko notes</h3>
+
+<p>L'utilisation de <code>setAttribute()</code> pour modifier certains attributs, en particulier la valeur dans XUL, fonctionne de façon incohérente, car l'attribut spécifie la valeur par défaut. Pour accéder ou modifier la valeur courante, vous devez utiliser les propriétés. Par exemple, utilisez <code>Element.value</code> à la place de <code>Element.setAttribute()</code>.</p>
diff --git a/files/fr/web/api/element/setattributenode/index.html b/files/fr/web/api/element/setattributenode/index.html
new file mode 100644
index 0000000000..efee5a67fe
--- /dev/null
+++ b/files/fr/web/api/element/setattributenode/index.html
@@ -0,0 +1,49 @@
+---
+title: element.setAttributeNode
+slug: Web/API/Element/setAttributeNode
+tags:
+  - API
+  - DOM
+  - Element
+  - Méthode
+  - Reference
+translation_of: Web/API/Element/setAttributeNode
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p><code>setAttributeNode</code><code>()</code>  ajoute un nouveau nœud <code>Attr</code> à l'élément courant.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="eval line-numbers  language-html"><code class="language-html">var replacedAttr = element.setAttributeNode(attribute);</code></pre>
+
+<ul>
+ <li><code>attribute</code> est le nœud <code>Attr</code> à définir sur l'élément.</li>
+ <li><code>replacedAttr</code> est le nœud d'attribut remplacé, renvoyé par la fonction, s'il y en avait un.</li>
+</ul>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre>// &lt;div id="one" align="left"&gt;one&lt;/div&gt;
+// &lt;div id="two"&gt;two&lt;/div&gt;
+var d1 = document.getElementById("one");
+var d2 = document.getElementById("two");
+var a = d1.getAttributeNode("align");
+d2.setAttributeNode(a);
+alert(d2.attributes[1].value)
+// retourne: `left'
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Si l'attribut nommé existe déjà sur l'élément, cet attribut est remplacé par le nouveau et le nœud remplacé est renvoyé.</p>
+
+<p>Cette méthode est peu utilisée. On lui préfère souvent  {{domxref("Element.setAttribute()")}}  pour modifier la valeur d'un attribut d'élément.</p>
+
+<p>{{DOMAttributeMethods()}}</p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-887236154">DOM Level 2 Core : setAttributeNode</a> — <small><a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-887236154">traduction en français</a> (non normative</small> (Introduit dans <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-setAttributeNode">DOM Level 1 Core</a>)</li>
+</ul>
diff --git a/files/fr/web/api/element/setattributenodens/index.html b/files/fr/web/api/element/setattributenodens/index.html
new file mode 100644
index 0000000000..6e62b29873
--- /dev/null
+++ b/files/fr/web/api/element/setattributenodens/index.html
@@ -0,0 +1,53 @@
+---
+title: element.setAttributeNodeNS
+slug: Web/API/Element/setAttributeNodeNS
+tags:
+  - API
+  - DOM
+  - Element
+  - Méthodes
+translation_of: Web/API/Element/setAttributeNodeNS
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p><code>setAttributeNodeNS</code> ajoute un nouveau nœud attribut avec l'espace de noms et le nom spécifiés.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="eval"><em>replacedAttr</em> = element.setAttributeNodeNS(<em>attributeNode</em>)
+</pre>
+
+<dl>
+ <dt><code>replacedAttr</code></dt>
+ <dd>Le nœud attribut remplacé, si applicable, renvoyé par cette fonction.</dd>
+ <dt><code>attributeNode</code></dt>
+ <dd>Un nœud <code>Attr</code>.</dd>
+</dl>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre>// &lt;div id="one" special-align="utterleft"&gt;one&lt;/div&gt;
+// &lt;div id="two"&gt;two&lt;/div&gt;
+
+var myns = "http://www.mozilla.org/ns/specialspace";
+var d1 = document.getElementById("one");
+var d2 = document.getElementById("two");
+var a = d1.getAttributeNodeNS(myns, "special-align");
+d2.setAttributeNodeNS(a);
+
+alert(d2.attributes[1].value) // renvoie : "utterleft"
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Si l'attribut spécifié existe déjà sur l'élément, cet attribut est remplacé par le nouveau et l'ancien est renvoyé.</p>
+
+<p><span id="result_box" lang="fr"><span>Notez que si vous essayez de définir sans cloner le noeud, Mozilla donne une erreur "Attribut déjà utilisé" NS_ERROR_DOM_INUSE_ATTRIBUTE_ERR, car le DOM nécessite que le clonage d'<code>Attr</code> soit réutilisé (contrairement aux autres Noeuds qui peuvent être déplacés).</span></span></p>
+
+<p>{{ DOMAttributeMethods() }}</p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElSetAtNodeNS">DOM Level 2 Core: setAttributeNodeNS (en)</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-ElSetAtNodeNS">traduction en français</a> (non normative)</small></li>
+</ul>
diff --git a/files/fr/web/api/element/setattributens/index.html b/files/fr/web/api/element/setattributens/index.html
new file mode 100644
index 0000000000..d5b1699a1b
--- /dev/null
+++ b/files/fr/web/api/element/setattributens/index.html
@@ -0,0 +1,45 @@
+---
+title: element.setAttributeNS
+slug: Web/API/Element/setAttributeNS
+tags:
+  - API
+  - DOM
+  - Element
+  - Méthodes
+translation_of: Web/API/Element/setAttributeNS
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p><code>setAttributeNS</code> ajoute un nouvel attribut ou modifie la valeur d'un attribut avec un espace de noms et un nom donnés.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="eval line-numbers  language-html"><code class="language-html">element.setAttributeNS(
+namespace,
+name,
+value)</code></pre>
+
+<ul>
+ <li><code>namespace</code> est une chaîne spécifiant l'espace de noms de l'attribut.</li>
+ <li><code>name</code> est une chaîne identifiant l'attribut par son nom qualifié ; <span id="result_box" lang="fr"><span>c'est-à-dire un préfixe d'espace de noms suivi d'un deux-points suivi d'un nom local.</span></span></li>
+ <li><code>value</code> est la valeur chaîne désirée pour le nouvel attribut.</li>
+</ul>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre class="eval">var d = document.getElementById("d1");
+d.setAttributeNS("<span class="nowiki">http://www.mozilla.org/ns/specialspace</span>", "align", "center");
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>{{ DOMAttributeMethods() }}</p>
+
+<p><code>setAttributeNS</code>  <span id="result_box" lang="fr"><span>est la seule méthode pour les attributs d'espace nom qui attend le nom qualifié complet, c'est-à-dire</span></span> <code>"namespace:localname"</code>.</p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElSetAttrNS">DOM Level 2 Core: setAttributeNS (en)</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-ElSetAttrNS">traduction en français</a> (non normative)</small></li>
+ <li><a href="https://www.w3.org/TR/DOM-Level-2-Core/glossary.html#dt-qualifiedname">DOM-Level-2-Core: glossary qualified name</a></li>
+</ul>
diff --git a/files/fr/web/api/element/setcapture/index.html b/files/fr/web/api/element/setcapture/index.html
new file mode 100644
index 0000000000..28c60fdf20
--- /dev/null
+++ b/files/fr/web/api/element/setcapture/index.html
@@ -0,0 +1,87 @@
+---
+title: Element.setCapture()
+slug: Web/API/Element/setCapture
+tags:
+  - API
+  - Capture
+  - DOM
+  - Elements
+  - Méthodes
+  - Souris
+translation_of: Web/API/Element/setCapture
+---
+<p>{{ APIRef("DOM") }}{{ gecko_minversion_header("2.0") }}</p>
+
+<p>Appelez cette méthode pendant la gestion d'un évènement de la souris pour recibler tous les évènements de la souris sur cet élément jusqu'à ce que le bouton de la souris soit relâché ou que soit appelée {{ domxref("document.releaseCapture()") }}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">element.setCapture(<em>retargetToElement</em>);
+</pre>
+
+<dl>
+ <dt><code>retargetToElement</code></dt>
+ <dd>Si la valeur est <code>true</code> (<em>vrai</em>), tous les évènements sont ciblés directement vers cet élément ; si elle est <code>false</code> (<em>faux</em>), les évènements peuvent aussi être déclenchés sur les descendants de cet élément.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans cet exemple, les coordonnées en cours de la souris sont dessinées pendant que vous passez la souris après un clic et un appui sur un élément.</p>
+
+<pre class="brush: html">&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;Mouse Capture Example&lt;/title&gt;
+  &lt;style type="text/css"&gt;
+    #myButton {
+      border: solid black 1px;
+      color: black;
+      padding: 2px;
+      box-shadow: black 2px 2px;
+    }
+  &lt;/style&gt;
+
+  &lt;script type="text/javascript"&gt;
+    function init() {
+      var btn = document.getElementById("myButton");
+      btn.addEventListener("mousedown", mouseDown, false);
+      btn.addEventListener("mouseup", mouseUp, false);
+    }
+
+    function mouseDown(e) {
+      //e.target.setCapture(); // cette méthode doit être définie
+      e.target.addEventListener("mousemove", mouseMoved, false);
+    }
+
+    function mouseUp(e) {
+      e.target.removeEventListener("mousemove", mouseMoved, false);
+    }
+
+    function mouseMoved(e) {
+      var output = document.getElementById("output");
+      output.innerHTML = "Position: " + e.clientX + ", " + e.clientY;
+    }
+  &lt;/script&gt;
+&lt;/head&gt;
+&lt;body onload="init()"&gt;
+  &lt;p&gt;This is an example of how to use mouse capture on elements in Gecko 2.0.&lt;/p&gt;
+  &lt;p&gt;&lt;a id="myButton" href="#"&gt;Test Me&lt;/a&gt;&lt;/p&gt;
+  &lt;div id="output"&gt;No events yet&lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p><a href="/samples/domref/mousecapture.html">Voir l'exemple sur une page</a></p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>L'élément ne peut pas être entièrement déplacé vers le haut ou vers le bas, selon la disposition des autres éléments.</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<p>Basé sur l'implémentation Internet Explorer.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{ domxref("document.releaseCapture()") }}</li>
+</ul>
diff --git a/files/fr/web/api/element/setpointercapture/index.html b/files/fr/web/api/element/setpointercapture/index.html
new file mode 100644
index 0000000000..76626ad6a4
--- /dev/null
+++ b/files/fr/web/api/element/setpointercapture/index.html
@@ -0,0 +1,144 @@
+---
+title: Element.setPointerCapture()
+slug: Web/API/Element/setPointerCapture
+tags:
+  - API
+  - Capture
+  - DOM
+  - Element
+  - Méthodes
+  - Pointeur
+translation_of: Web/API/Element/setPointerCapture
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La <em>Pointer capture</em> (<em>capture de pointeur</em>) permet de re-cibler des événements pour un événement de pointeur particulier ({{domxref ("PointerEvent")}}) vers un élément particulier au lieu de la cible normale à l'emplacement d'un pointeur. Cela peut être utilisé pour garantir qu'un élément continue à recevoir des événements de pointeur même si le contact du périphérique de pointeur se déplace hors de l'élément (par exemple en faisant défiler).</p>
+
+<p><strong><code>setPointerCapture()</code></strong> est la méthode de l'interface {{domxref("Element")}} utilisée pour désigner un élément spécifique comme <em>cible de capture</em> de{{domxref("PointerEvent", "évènements de pointeur")}} futurs. Les évènements subséquents du pointeur seront reciblés sur l'élément jusqu'à la libération de la capture (via {{domxref("Element.releasePointerCapture")}}).</p>
+
+<div class="note">Lorque la capture du pointeur est définie, les évènements {{domxref("PointerEvent.pointerover","pointerover")}}, {{domxref("PointerEvent.pointerout","pointerout")}} {{domxref("PointerEvent.pointerenter","pointerenter")}} et {{domxref("PointerEvent.pointerleave","pointerleave")}} sont uniquement générés lors du franchissement de la limite de l'élément dont la capture est définie, car les autres éléments ne peuvent plus être ciblés par le pointeur. Cela a pour effet de supprimer ces événements sur tous les autres éléments.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">targetElement.<em>setPointerCapture</em>(pointerId);
+</pre>
+
+<h3 id="Arguments">Arguments</h3>
+
+<dl>
+ <dt><em>pointerId</em></dt>
+ <dd>L'{{domxref("PointerEvent.pointerId","identifiant")}} pour un {{domxref("PointerEvent","évènement de pointeur")}}.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Cette méthode renvoie <code>void</code> et lance une {{domxref("DOMException")}} nommée <code>InvalidPointerId</code> si <code>pointerId</code> ne correspond à aucun des pointeurs actifs.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">&lt;html&gt;
+&lt;script&gt;
+function downHandler(ev) {
+ var el=document.getElementById("target");
+ //L'élément cible  ('target') recevra/capturera d'autres évènements
+ el.setPointerCapture(ev.pointerId);
+}
+function init() {
+ var el=document.getElementById("target");
+ el.onpointerdown = downHandler;
+}
+&lt;/script&gt;
+&lt;body onload="init();"&gt;
+&lt;div id="target"&gt; Touch me ... &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<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('Pointer Events 2','#widl-Element-setPointerCapture-void-long-pointerId', 'setPointerCapture')}}</td>
+   <td>{{Spec2('Pointer Events 2')}}</td>
+   <td>Version non stable.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Events', '#widl-Element-setPointerCapture-void-long-pointerId', 'setPointerCapture')}}</td>
+   <td>{{Spec2('Pointer Events')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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("35")}}<sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop(59)}}</td>
+   <td>10 {{property_prefix("-ms")}}<br>
+    11</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome("35")}}<sup>[1]</sup></td>
+   <td>{{CompatGeckoMobile("29")}}<sup>[2]</sup></td>
+   <td>10 {{property_prefix("-ms")}}<br>
+    11</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Pris en charge dans <a href="http://crbug.com/248918">bug 248918</a>.</p>
+
+<p>[2] Supporté avec la préférence <code>dom.w3c_pointer_events.enabled</code> par  défaut à <code>false</code> (<em>faux</em>).</p>
+
+<p> </p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{ domxref("Element.releasePointerCapture")}}</li>
+ <li>{{ domxref("Pointer_events","Pointer Events") }}</li>
+</ul>
diff --git a/files/fr/web/api/element/tabstop/index.html b/files/fr/web/api/element/tabstop/index.html
new file mode 100644
index 0000000000..95951748e6
--- /dev/null
+++ b/files/fr/web/api/element/tabstop/index.html
@@ -0,0 +1,80 @@
+---
+title: Element.tabStop
+slug: Web/API/Element/tabStop
+tags:
+  - API
+  - DOM
+  - Element
+  - Propriétés
+  - touche tabulation
+translation_of: Web/API/Element/tabStop
+---
+<p>{{APIRef("DOM")}}{{non-standard_header}}{{obsolete_header}}</p>
+
+<p>La propriété <strong><code>tabStop</code></strong> de l'interface {{domxref("Element")}} renvoie un {{jsxref("Boolean")}} indiquant si l'élément peut recevoir le focus d'entrée via la touche de tabulation. Si l'élément spécifié est un onglet shadow, la navigation est déléguée à ses enfants.</p>
+
+<p>La propriété a été proposée pour ajouter une fonctionnalité de tabulation aux éléments personnalisés. Alors qu'avec la propriété {{domxref("HTMLElement.tabIndex", "tabIndex")}} existante, il est nécessaire de spécifier un ordre pour que la touche tabulation soit utilisable sur un élément. La propriété <code>tabStop</code> devait découpler la propriété d'utilisation de la tabulation de l'index. Après les retours d'expérience, cette propriété a été supprimée de <a href="https://docs.google.com/document/d/1k93Ez6yNSyWQDtGjdJJqTBPmljk9l2WS3JTe5OHHB50/edit">documentation de conception</a> (en) et remplacée par {{domxref("ShadowRoot.delegatesFocus")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var isTabStop = element.tabStop;
+element.tabStop = (true|false);
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">// TBD</pre>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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(43.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fr/web/api/element/tagname/index.html b/files/fr/web/api/element/tagname/index.html
new file mode 100644
index 0000000000..80be64da69
--- /dev/null
+++ b/files/fr/web/api/element/tagname/index.html
@@ -0,0 +1,121 @@
+---
+title: element.tagName
+slug: Web/API/Element/tagName
+tags:
+  - API
+  - DOM
+  - Element
+  - Nom
+  - Propriétés
+translation_of: Web/API/Element/tagName
+---
+<p>{{ApiRef("DOM")}}</p>
+
+<p>Renvoie le nom de l'étiquette de l'élément sur lequel elle est appelée. Si l'élément est une {{HTMLElement("img")}}, sa propriété <code>tagName</code> est <code>"IMG"</code> (pour les documents HTML, elle peut être différente pour les documents XML et XHTML).</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>elementName</em> = element.tagName;
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une chaîne indiquant le nom de l'étiquette de l'élément. Cette chaîne comporte des majuscules selon le type de document :</p>
+
+<ul>
+ <li>Pour l'arbre DOM qui représente un document HTML, le nom renvoyé est toujours en forme majuscule canonique. Par exemple, <code>tagName</code> appelé sur un élément {{HTMLElement("div")}} renvoie <code>"DIV"</code>.</li>
+ <li>Les noms des éléments dans un arbre DOM XML, sont retournés dans la même casse que celle utilisée dans le fichier XML d'origine. Si un document XML inclut une étiquette <code>"&lt;SomeTag&gt;"</code>, alors la valeur de la propriété <code>tagName</code> est <code>"SomeTag"</code>.</li>
+ <li>Pour les objets {{domxref("Element")}} , la valeur de l'étiquette de nom est la même que la valeur de la propriété {{domxref("Node.nodeName", "nodeName")}} héritée de {{domxref("Node")}}.</li>
+</ul>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="Contenu_HTML">Contenu HTML</h3>
+
+<pre class="eval">&lt;span id="naissance"&gt;Lorsque je suis né…&lt;/span&gt;
+</pre>
+
+<h3 id="Contenu_JavaScript">Contenu JavaScript</h3>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> span <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"naissance"</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<span class="punctuation token">.</span>tagName<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>En XHTML (ou tout autre format XML), <span id="result_box" lang="fr"><span>la casse d'origine sera conservée, de sorte que <code>"span"</code> sera affiché dans le cas où le nom de l'étiquette d'origine a été créé en minuscules.</span> <span>En HTML, <code>"SPAN"</code> serait affiché à la place quelle que soit la casse utilisée lors de la création du document original.</span></span></p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Spécification</th>
+   <th>Statut</th>
+   <th>Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM3 Core", "core.html#ID-104682815", "Element.tagName")}}</td>
+   <td>{{Spec2("DOM3 Core")}}</td>
+   <td>Pas de changement</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Core", "core.html#ID-104682815", "Element.tagName")}}</td>
+   <td>{{Spec2("DOM2 Core")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
diff --git a/files/fr/web/api/elementtraversal/index.html b/files/fr/web/api/elementtraversal/index.html
new file mode 100644
index 0000000000..3e6ae156ff
--- /dev/null
+++ b/files/fr/web/api/elementtraversal/index.html
@@ -0,0 +1,41 @@
+---
+title: ElementTraversal
+slug: Web/API/ElementTraversal
+tags:
+  - API
+  - Arborescence
+  - DOM
+  - Element
+  - Interface
+  - Noeuds
+translation_of: Web/API/ElementTraversal
+---
+<div>{{APIRef("DOM")}}{{obsolete_header}}</div>
+
+<p>L'interface <strong><code>ElementTraversal</code></strong> définissait des méthodes permettant d'accèder depuis un {{domxref("Node")}} (<em>noeud</em>) à un autre dans l'arbre du document.</p>
+
+<p>Elle s'est avérée inutile, car très peu de types de {{domxref("Node")}} ont pu implémenter toutes ses méthodes et propriétés. Elle a été scindée en deux interfaces, {{domxref ("ChildNode")}} et {{domxref ("ParentNode")}} contenant les méthodes et propriétés utiles pour chacun des types de noeud.</p>
+
+<p>Comme c'était une pure interface, sans aucun objet de ce type, ce changement n'a eu aucun effet sur le web.</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('DOM WHATWG', '#interface-childnode', 'ChildNode')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>L'interface <code>ElementTraversal</code> divisée en interfaces {{domxref("ParentNode")}} et {{domxref("ChildNode")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}</td>
+   <td>{{Spec2('Element Traversal')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/api/encoding_api/index.html b/files/fr/web/api/encoding_api/index.html
new file mode 100644
index 0000000000..4870b3a93c
--- /dev/null
+++ b/files/fr/web/api/encoding_api/index.html
@@ -0,0 +1,62 @@
+---
+title: Encoding API
+slug: Web/API/Encoding_API
+tags:
+  - API
+  - Encoding
+  - Overview
+  - Reference
+translation_of: Web/API/Encoding_API
+---
+<p>{{DefaultAPISidebar("Encoding API")}}{{SeeCompatTable}}</p>
+
+<p>L'<code>API Encoding</code> fournit un mecanisme de traitement de texte dans plusieurs {{Glossary("character encoding", "character encodings")}}, incluant les encodings non-{{Glossary("UTF-8")}}.</p>
+
+<p>L'API fournit quatres interfaces: {{domxref("TextDecoder")}}, {{domxref("TextEncoder")}}, {{domxref("TextDecoderStream")}} et {{domxref("TextEncoderStream")}}.</p>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<div class="index">
+<ul>
+ <li>{{DOMxRef("TextDecoder")}}</li>
+ <li>{{DOMxRef("TextEncoder")}}</li>
+ <li>{{DOMxRef("TextDecoderStream")}}</li>
+ <li>{{DOMxRef("TextEncoderStream")}}</li>
+</ul>
+</div>
+
+<h2 id="Tutoriels_Outils">Tutoriels &amp; Outils</h2>
+
+<ul>
+ <li>Un <a href="http://code.google.com/p/stringencoding/">shim</a> permettant d'utiliser cette interface dans les navigateurs ne le supportant pas.</li>
+ <li><a href="/en-US/Add-ons/Code_snippets/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code></a> – une représentation de type C des chaînes basée sur des tableaux typés.</li>
+</ul>
+
+<h2 id="Caracteristiques">Caracteristiques</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Caracteristiques</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Encoding")}}</td>
+   <td>{{Spec2("Encoding")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité">Compatibilité</h2>
+
+
+
+<h3 id="TextDecoder"><code>TextDecoder</code></h3>
+
+<p>{{Compat("api.TextDecoder")}}</p>
+
+<h3 id="TextEncoder"><code>TextEncoder</code></h3>
+
+<p>{{Compat("api.TextEncoder")}}</p>
diff --git a/files/fr/web/api/entity/index.html b/files/fr/web/api/entity/index.html
new file mode 100644
index 0000000000..2c160ead13
--- /dev/null
+++ b/files/fr/web/api/entity/index.html
@@ -0,0 +1,114 @@
+---
+title: Entity
+slug: Web/API/Entity
+tags:
+  - API
+  - DOM
+  - Entités
+  - Interface
+  - Noeuds
+translation_of: Web/API/Entity
+---
+<p>{{APIRef("DOM")}}{{obsolete_header}}</p>
+
+<p>Référence en lecture seule à une entité DTD (<em>définition de type de document</em>). Hérite également des méthodes et propriétés de {{domxref("Node")}}.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("Entity.publicId")}} {{ReadOnlyInline}}</dt>
+ <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>).</dd>
+ <dt>{{domxref("Entity.systemId")}} {{ReadOnlyInline}}</dt>
+ <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>).</dd>
+ <dt>{{domxref("Entity.notationName")}}{{ReadOnlyInline}}</dt>
+ <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>).</dd>
+ <dt>{{domxref("Entity.inputEncoding")}}{{ReadOnlyInline}}</dt>
+ <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>).</dd>
+ <dt>{{domxref("Entity.xmlEncoding")}}{{ReadOnlyInline}}</dt>
+ <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>).</dd>
+ <dt>{{domxref("Entity.xmlVersion")}}{{ReadOnlyInline}}</dt>
+ <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>).</dd>
+</dl>
+
+<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("DOM3 Core", "core.html#ID-527DCFF2", "Entity")}}</td>
+   <td>{{Spec2("DOM3 Core")}}</td>
+   <td>Ajout de <code>inputEncoding</code>, <code>xmlEncoding</code> et <code>xmlVersion</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Core", "core.html#ID-527DCFF2", "Entity")}}</td>
+   <td>{{Spec2("DOM2 Core")}}</td>
+   <td>Pas de changement.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-527DCFF2', 'Entity')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fr/web/api/entityreference/index.html b/files/fr/web/api/entityreference/index.html
new file mode 100644
index 0000000000..ee21b2b83f
--- /dev/null
+++ b/files/fr/web/api/entityreference/index.html
@@ -0,0 +1,93 @@
+---
+title: EntityReference
+slug: Web/API/EntityReference
+tags:
+  - API
+  - Arborescence
+  - DOM
+  - Entité
+  - Interface
+  - Noeuds
+  - Reference
+translation_of: Web/API/EntityReference
+---
+<p>{{APIRef("DOM")}}{{Obsolete_header}}</p>
+
+<div class="warning">
+<p>NOTE : Ceci n'est pas implémenté dans Mozilla</p>
+</div>
+
+<p>Référence en lecture seule à une référence d'entité dans l'arborescence DOM. N'a pas de propriétés ou méthodes propres mais hérite de {{domxref("Node")}}.</p>
+
+<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("DOM3 Core", "core.html#ID-11C98490", "EntityReference")}}</td>
+   <td>{{Spec2("DOM3 Core")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fr/web/api/errorevent/index.html b/files/fr/web/api/errorevent/index.html
new file mode 100644
index 0000000000..faa0d46a29
--- /dev/null
+++ b/files/fr/web/api/errorevent/index.html
@@ -0,0 +1,76 @@
+---
+title: ErrorEvent
+slug: Web/API/ErrorEvent
+tags:
+  - API
+  - Evènement
+  - Worker API
+translation_of: Web/API/ErrorEvent
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p>L'interface <strong><code>ErrorEvent</code></strong> représente un événement donnant des informations relatives aux erreurs dans les scripts ou dans les fichiers.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Hérite également des propriétés de son parent {{domxref("Event")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("ErrorEvent.message")}} {{readonlyInline}}</dt>
+ <dd>Un {{domxref("DOMString")}} contenant un message d'erreur lisible décrivant le problème.</dd>
+ <dt>{{domxref("ErrorEvent.filename")}} {{readonlyInline}}</dt>
+ <dd>Un {{domxref("DOMString")}} contenant le nom du fichier de script dans lequel l'erreur est survenue.</dd>
+ <dt>{{domxref("ErrorEvent.lineno")}} {{readonlyInline}}</dt>
+ <dd>Un <code>integer</code> contenant le numéro de ligne du fichier de script dans lequel l'erreur est survenue.</dd>
+ <dt>{{domxref("ErrorEvent.colno")}} {{readonlyInline}}</dt>
+ <dd>Un <code>integer</code> contenant le numéro de colonne du fichier de script dans lequel l'erreur est survenue.</dd>
+ <dt>{{domxref("ErrorEvent.error")}} {{readonlyInline}} {{experimental_inline}}</dt>
+ <dd>Un <code>Object</code> JavaScript qui est concerné par l'événement.</dd>
+</dl>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("ErrorEvent.ErrorEvent", "ErrorEvent()")}}</dt>
+ <dd>Crée un événement <code>ErrorEvent</code> avec les paramètres fournis.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Hérite des méthodes de son parent {{domxref("Event")}}</em>.</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">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('HTML WHATWG', 'webappapis.html#the-errorevent-interface', 'ErrorEvent') }}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td>Ajout de la propriété <code>error</code> et du 5ème paramètre du constructeur.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML5 W3C', 'webappapis.html#the-errorevent-interface', 'ErrorEvent') }}</td>
+   <td>{{ Spec2('HTML5 W3C') }}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.ErrorEvent")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Web_Workers_API/Utilisation_des_web_workers" title="/en-US/docs/Web/Guide/Performance/Using_web_workers">Utilisation des web workers</a>, notamment les objets susceptibles de déclencher un tel événement.</li>
+</ul>
diff --git a/files/fr/web/api/event/bubbles/index.html b/files/fr/web/api/event/bubbles/index.html
new file mode 100644
index 0000000000..0c59b8b0f6
--- /dev/null
+++ b/files/fr/web/api/event/bubbles/index.html
@@ -0,0 +1,83 @@
+---
+title: Event.bubbles
+slug: Web/API/Event/bubbles
+tags:
+  - API
+  - DOM
+  - Propagation
+  - Propriétés
+  - évènements
+translation_of: Web/API/Event/bubbles
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p>Indique si l'événement donné se propage à travers le DOM ou non.</p>
+
+<div class="note">
+<p>Note : Voir <a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture">Propagation et capture des évènements</a> pour plus d'informations sur la propagation.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre>event.bubbles</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Retourne un booléen dont la valeur est <code>true</code> (<em>vraie</em>) si l'événement se propage à travers le DOM.</p>
+
+<h2 id="Syntax" name="Syntax">Exemple</h2>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">goInput</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="comment token">// vérifie la propagation et</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span>e<span class="punctuation token">.</span>bubbles<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+     <span class="comment token">// la lance si elle ne l'a pas été</span>
+     <span class="function token">passItOn</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+  <span class="comment token">// déjà propagé</span>
+  <span class="function token">doOutput</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span>
+<span class="punctuation token">}</span></code></pre>
+
+<div class="note">
+<p><strong>Note </strong>: Certains évènements seulement peuvent se propager. Ceux dont cette propriété est définie à  <code>true</code>. Vous pouvez utiliser cette propriété pour vérifier si un évènement est autorisé à se propager ou non.</p>
+</div>
+
+<h2 id="Specifications" name="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('DOM WHATWG', '#dom-event-bubbles', 'Event.bubbles')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM4', '#dom-event-bubbles', 'Event.bubbles')}}</td>
+   <td>{{ Spec2('DOM4') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events', '#Events-Event-canBubble', 'Event.bubbles')}}</td>
+   <td>{{ Spec2('DOM2 Events') }}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Event.bubbles")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation">stopPropagation</a> pour empêcher la propagation</li>
+</ul>
diff --git a/files/fr/web/api/event/cancelable/index.html b/files/fr/web/api/event/cancelable/index.html
new file mode 100644
index 0000000000..0d17c1107e
--- /dev/null
+++ b/files/fr/web/api/event/cancelable/index.html
@@ -0,0 +1,90 @@
+---
+title: Event.cancelable
+slug: Web/API/Event/cancelable
+tags:
+  - API
+  - Annulable
+  - DOM
+  - Propriétés
+  - évènements
+translation_of: Web/API/Event/cancelable
+---
+<div>{{ ApiRef("DOM") }}</div>
+
+<h2 id="Summary" name="Summary">Résumé</h2>
+
+<p>La propriété  <dfn><code>cancelable</code></dfn> (<em>annulable</em>) de "Event" Indique si l'événement peut être annulé et donc empêché, comme si l'événement ne s'était jamais produit. Si l'événement n'est pas annulable, alors sa propriété <code>cancelable</code> est à <code>false</code> (<em>faux</em>) et l'écouteur d'événement ne peut pas l'arrêter.</p>
+
+<p>L'appel de {{domxref("event.preventDefault", "preventDefault()")}} sur un évènement qui ne peut être annulé produit une erreur, aussi les écouteurs d'évènement qui gèrent de nombreux types d'évènements peuvent être vérifiés avec <code>cancelable</code> avant d'appeler leurs méthodes <code>preventDefault()</code>.</p>
+
+<p><span id="result_box" lang="fr"><span>La plupart des événements natifs du navigateur qui peuvent être annulés sont ceux qui résultent de l'interaction de l'utilisateur avec la page.</span> <span>L'annulation des événements <a href="https://developer.mozilla.org/fr/docs/Web/Events/click">click</a>, <a href="https://developer.mozilla.org/fr/docs/Web/Events/scroll">scroll</a> ou <a href="https://developer.mozilla.org/fr/docs/Web/Events/beforeunload">beforeunload</a> empêcherait l'utilisateur de cliquer sur un élément, de faire défiler la page ou de la quitter, respectivement.</span></span></p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>bool</var> = <em>event</em>.cancelable
+</pre>
+
+<ul>
+ <li>Le résultat est un <code>booléen</code> qui est <code>true</code> (<em>vrai</em>) si l'événement peut être annulé.</li>
+</ul>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<p>Par exemple, les vendeurs de navigateurs proposent que l'<a href="https://developer.mozilla.org/fr/docs/Web/Events/wheel">évènement wheel </a>puisse être annulable seulement  <a href="https://github.com/WICG/interventions/issues/33" rel="external">la première fois que l'écouteur est appelé</a> (en) ; les évènements  <code>wheel</code> suivants ne peuvent être annulés.</p>
+
+<pre class="brush:js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">preventScrollWheel</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="keyword token">typeof</span> event<span class="punctuation token">.</span>cancelable <span class="operator token">!==</span> <span class="string token">'boolean'</span> <span class="operator token">||</span> event<span class="punctuation token">.</span>cancelable<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="comment token">// L'événement peut être annulé, alors nous le faisons.</span>
+    event<span class="punctuation token">.</span><span class="function token">preventDefault</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
+    <span class="comment token">// L'évènement ne peut pas être annulé, il n'est donc pas sûr</span>
+    <span class="comment token">// d'appeler preventDefault() sur lui.</span>
+    console<span class="punctuation token">.</span><span class="function token">warn</span><span class="punctuation token">(</span><span class="template-string token"><span class="string token">`The following event couldn't be canceled:`</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    console<span class="punctuation token">.</span><span class="function token">dir</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span>
+
+document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'wheel'</span><span class="punctuation token">,</span> preventCancelableEvents<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p> </p>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Si l'événement peut être annulé, ou non, est déterminé au moment de l'initialisation de celui-ci.</p>
+
+<p>Pour annuler un événement, utiliser la méthode {{domxref("event.preventDefault", "preventDefault()")}} sur celui-ci. Cela permet d'empêcher l'action par défaut associée à l'événement de s'exécuter.</p>
+
+<h2 id="Specifications" name="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('DOM WHATWG', '#dom-event-cancelable', 'Event.cancelable')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM4', '#dom-event-cancelable', 'Event.cancelable')}}</td>
+   <td>{{ Spec2('DOM4') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events', '#Events-Event-canCancel', 'Event.cancelable')}}</td>
+   <td>{{ Spec2('DOM2 Events') }}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Event.cancelable")}}</p>
diff --git a/files/fr/web/api/event/cancelbubble/index.html b/files/fr/web/api/event/cancelbubble/index.html
new file mode 100644
index 0000000000..fad1a2ca95
--- /dev/null
+++ b/files/fr/web/api/event/cancelbubble/index.html
@@ -0,0 +1,53 @@
+---
+title: Event.cancelBubble
+slug: Web/API/Event/cancelBubble
+tags:
+  - API
+  - Annulation
+  - DOM
+  - Evènement
+  - Propagation
+  - Propriétés
+translation_of: Web/API/Event/cancelBubble
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p>La propriété <code><strong>Event.cancelBubble</strong></code> est un alias historique de {{domxref("Event.stopPropagation()")}}. Définir sa valeur à <code>true</code> (vrai) avant le renvoi à partir d'un gestionnaire d'évènements empêche la propagation de l'évènement. Dans les implémentations les plus tardives, cette définition à false (<em>faux</em>) ne fait rien. Voir {{anch("Compatibilité des navigateurs")}} pour plus de détails. </p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox">event.cancelBubble = <em>bool;</em>
+<em>var bool</em> = event.cancelBubble;
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre>elem.onclick = function(e) {
+ // fais des choses sympas ici
+  e.cancelBubble = 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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-event-cancelbubble', 'cancelBubble')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs"><a id="Compatibilité des navigateurs" name="Compatibilité des navigateurs"></a>Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Event.cancelBubble")}}</p>
+
+<div id="compat-desktop"> </div>
diff --git a/files/fr/web/api/event/comparaison_des_cibles_d_évènements/index.html b/files/fr/web/api/event/comparaison_des_cibles_d_évènements/index.html
new file mode 100644
index 0000000000..f938d0cff5
--- /dev/null
+++ b/files/fr/web/api/event/comparaison_des_cibles_d_évènements/index.html
@@ -0,0 +1,168 @@
+---
+title: Comparaison des cibles d'évènements
+slug: Web/API/Event/Comparaison_des_cibles_d_évènements
+tags:
+  - Cibles
+  - DOM
+  - évènements
+translation_of: Web/API/Event/Comparison_of_Event_Targets
+---
+<p>{{ ApiRef() }}</p>
+
+<h3 id="Event_targets" name="Event_targets">Cibles d'évènements</h3>
+
+<p>Il est facile de s'interroger sur la cible à examiner lors de l'écriture d'un gestionnaire d'événements. Cet article devrait clarifier l'utilisation des propriétés de la cible.</p>
+
+<p>Il y a 5 cibles à considérer :</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Propriété</th>
+   <th>Définie dans</th>
+   <th>Objectif</th>
+  </tr>
+  <tr>
+   <td><a href="/en/DOM/event.target" title="en/DOM/event.target">event.target</a></td>
+   <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2/events.html#Events-interface">DOM Event Interface</a></td>
+   <td>
+    <p>L'élément DOM sur le côté gauche de l'appel qui a déclenché cet événement, par exemple :</p>
+
+    <pre class="eval">
+<em>element</em>.dispatchEvent(<em>event</em>)
+</pre>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="/en/DOM/event.currentTarget" title="en/DOM/event.currentTarget">event.currentTarget</a></td>
+   <td><a class="external" href="https://www.w3.org/TR/DOM-Level-2/events.html#Events-interface">DOM Event Interface</a></td>
+   <td>La <a class="external" href="http://www.w3.org/TR/DOM-Level-2/events.html#Events-EventTarget"><code>EventTarget</code></a> (<em>cible d'évènement</em>) que les <a class="external" href="http://www.w3.org/TR/DOM-Level-2/events.html#Events-EventListener"><code>EventListeners</code></a> traitent actuellement. Au fur et à mesure de la capture et de la diffusion des évènements, cette valeur change.</td>
+  </tr>
+  <tr>
+   <td><a href="/en/DOM/event.relatedTarget" title="en/DOM/event.relatedTarget">event.relatedTarget</a></td>
+   <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2/events.html#Events-MouseEvent">DOM MouseEvent Interface</a></td>
+   <td>Identifie une cible secondaire pour l'évènement.</td>
+  </tr>
+  <tr>
+   <td><a href="/en/DOM/event.explicitOriginalTarget" title="en/DOM/event.explicitOriginalTarget">event.explicitOriginalTarget</a></td>
+   <td>{{ Source("/dom/public/idl/events/nsIDOMNSEvent.idl", "nsIDOMNSEvent.idl") }}</td>
+   <td>{{ Non-standard_inline() }} Si l'évènement a été reciblé pour quelque raison autre que  un passage de limite anonyme, il sera défini sur la cible avant le reciblage. Par exemple, les évènements de souris sont reciblés vers leur noeud parent quand ils surviennent sur des noeuds de texte ({{ Bug("185889") }}), et, dans ce cas, <code>.target</code> affichera le parent <code>.explicitOriginalTarget</code> et le noeud de texte.<br>
+    Contrairement à <code>.originalTarget</code>, <code>.explicitOriginalTarget</code> n'aura jamais de contenu anonyme.</td>
+  </tr>
+  <tr>
+   <td><a href="/en/DOM/event.originalTarget" title="en/DOM/event.originalTarget">event.originalTarget</a></td>
+   <td>{{ Source("/dom/public/idl/events/nsIDOMNSEvent.idl", "nsIDOMNSEvent.idl") }}</td>
+   <td>{{ Non-standard_inline() }} La cible originale de l'évènement, avant tout reciblage. Voir <a href="/en-US/docs/XBL/XBL_1.0_Reference/Anonymous_Content#Event_Flow_and_Targeting" title="en/XBL/XBL_1.0_Reference/Anonymous_Content#Event_Flow_and_Targeting">Anonymous Content#Event_Flow_and_Targeting</a> pour plus de détails.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Use_of_explicitOriginalTarget_and_originalTarget" name="Use_of_explicitOriginalTarget_and_originalTarget">Utilisation de <code>explicitOriginalTarget</code> et <code>originalTarget</code></h3>
+
+<p>Problème : Seulement disponible dans un navigateur basé sur Mozilla ? Problème : Convient uniquement aux développeurs d'extensions ?</p>
+
+<h3 id="Examples" name="Examples">Exemples</h3>
+
+<pre>&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
+    &lt;title&gt;Comparison of Event Targets&lt;/title&gt;
+    &lt;style&gt;
+        table {
+            border-collapse: collapse;
+            height: 150px;
+            width: 100%;
+        }
+        td {
+            border: 1px solid #ccc;
+            font-weight: bold;
+            padding: 5px;
+            min-height: 30px;
+        }
+        .standard {
+            background-color: #99ff99;
+        }
+        .non-standard {
+            background-color: #902D37;
+        }
+    &lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+    &lt;table&gt;
+    &lt;thead&gt;
+        &lt;tr&gt;
+            &lt;td class="standard"&gt;Original target dispatching the event &lt;small&gt;event.target&lt;/small&gt;&lt;/td&gt;
+            &lt;td class="standard"&gt;Target who's event listener is being processed &lt;small&gt;event.currentTarget&lt;/small&gt;&lt;/td&gt;
+            &lt;td class="standard"&gt;Identify other element (if any) involved in the event &lt;small&gt;event.relatedTarget&lt;/small&gt;&lt;/td&gt;
+            &lt;td class="non-standard"&gt;If there was a retargetting of the event for some reason &lt;small&gt; event.explicitOriginalTarget&lt;/small&gt; contains the target before retargetting (never contains anonymous targets)&lt;/td&gt;
+            &lt;td class="non-standard"&gt;If there was a retargetting of the event for some reason &lt;small&gt; event.originalTarget&lt;/small&gt; contains the target before retargetting (may contain anonymous targets)&lt;/td&gt;
+        &lt;/tr&gt;
+    &lt;/thead&gt;
+    &lt;tr&gt;
+        &lt;td id="target"&gt;&lt;/td&gt;
+        &lt;td id="currentTarget"&gt;&lt;/td&gt;
+        &lt;td id="relatedTarget"&gt;&lt;/td&gt;
+        &lt;td id="explicitOriginalTarget"&gt;&lt;/td&gt;
+        &lt;td id="originalTarget"&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+&lt;/table&gt;
+&lt;p&gt;Clicking on the text will show the difference between explicitOriginalTarget, originalTarget and target&lt;/p&gt;
+&lt;script&gt;
+    function handleClicks(e) {
+        document.getElementById('target').innerHTML = e.target;
+        document.getElementById('currentTarget').innerHTML = e.currentTarget;
+        document.getElementById('relatedTarget').innerHTML = e.relatedTarget;
+        document.getElementById('explicitOriginalTarget').innerHTML = e.explicitOriginalTarget;
+        document.getElementById('originalTarget').innerHTML = e.originalTarget;
+    }
+
+    function handleMouseover(e) {
+        document.getElementById('target').innerHTML = e.target;
+        document.getElementById('relatedTarget').innerHTML = e.relatedTarget;
+    }
+
+    document.addEventListener('click', handleClicks, false);
+    document.addEventListener('mouseover', handleMouseover, false);
+&lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h3 id="Use_of_target_and_relatedTarget" name="Use_of_target_and_relatedTarget">Utilisation de <code>target</code> et <code>relatedTarget</code></h3>
+
+<p>La propriété <code>relatedTarget</code> (<em>cible associée</em>) pour l'évènement <code>mouseover</code>  détient le noeud que la souris avait précédemment atteint. Pour l'évènement <code>mouseout</code>, il détient le noeud que la souris a déplacé à.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Type d'évènement</th>
+   <th><a href="/en/DOM/event.target" title="en/DOM/event.target">event.target</a></th>
+   <th><a href="/en/DOM/event.relatedTarget" title="en/DOM/event.relatedTarget">event.relatedTarget</a></th>
+  </tr>
+  <tr>
+   <td><code>mouseover</code></td>
+   <td>La EventTarget (<em>cible d'évènement</em>) entré par le périphérique de pointage.</td>
+   <td>La EventTarget (<em>cible d'évènement</em>) dont le périphérique de pointage est sorti.</td>
+  </tr>
+  <tr>
+   <td><code>mouseout</code></td>
+   <td>La EventTarget (<em>cible d'évènement</em>) dont le périphérique de pointage est sorti.</td>
+   <td>the EventTarget (<em>cible d'évènement</em>) entré par le périphérique de pointage.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Problème : A également besoin de descriptions sur les évènements <code>dragenter</code> et <code>dragexit</code>.</p>
+
+<h4 id="Example" name="Example">Exemple</h4>
+
+<pre class="eval">&lt;hbox id="outer"&gt;
+  &lt;hbox id="inner"
+        onmouseover="dump('mouseover ' + event.relatedTarget.id + ' &gt; ' + event.target.id + '\n');"
+        onmouseout="dump('mouseout  ' + event.target.id + ' &gt; ' + event.relatedTarget.id + '\n');"
+        style="margin: 100px; border: 10px solid black; width: 100px; height: 100px;" /&gt;
+&lt;/hbox&gt;
+</pre>
+
+<p> </p>
diff --git a/files/fr/web/api/event/createevent/index.html b/files/fr/web/api/event/createevent/index.html
new file mode 100644
index 0000000000..21d1c7adca
--- /dev/null
+++ b/files/fr/web/api/event/createevent/index.html
@@ -0,0 +1,40 @@
+---
+title: Event.createEvent()
+slug: Web/API/Event/createEvent
+tags:
+  - API
+  - DOM
+  - Evènement
+  - Méthodes
+translation_of: Web/API/Document/createEvent
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>Crée un nouvel évènement, qui doit alors être initialisé en appelant sa méthode <code>initEvent()</code> .</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre><code>document.createEvent(type) </code></pre>
+
+<dl>
+ <dt><code>type</code></dt>
+ <dd>Une chaîne de caractère indiquant le type de l'évènement à créer.</dd>
+</dl>
+
+<p>Cette méthode renvoie un nouvel objet DOM {{ domxref("Event") }} du type spécifié, qui doit être initialisé avant utilisation.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre>var newEvent = document.createEvent("UIEvents");</pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-document" title="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-document">DOM Level 2 Events</a></li>
+</ul>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Event.createEvent")}}</p>
diff --git a/files/fr/web/api/event/currenttarget/index.html b/files/fr/web/api/event/currenttarget/index.html
new file mode 100644
index 0000000000..e62854942c
--- /dev/null
+++ b/files/fr/web/api/event/currenttarget/index.html
@@ -0,0 +1,94 @@
+---
+title: Event.currentTarget
+slug: Web/API/Event/currentTarget
+tags:
+  - API
+  - Cible
+  - DOM
+  - Evènement
+  - Propriété
+translation_of: Web/API/Event/currentTarget
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La propriété <code><strong>currentTarget</strong></code>, accessible en lecture seule et rattachée à l'interface {{domxref("Event")}}, identifie la cible courante pour l'évènement lorsque celui-ci traverse le DOM. Elle fait toujours référence à l'élément sur lequel le gestionnaire d'évènement a été attaché tandis que {{domxref("Event.target")}} identifie l'élément à partir duquel l'évènement s'est produit (<code>event.target</code> peut donc être un descendant de <code>event.currentTarget</code>).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">var <em>currentEventTarget</em> = <em>event</em>.currentTarget;</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>{{domxref("EventTarget")}}</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p><code>Event.currentTarget</code> peut s'avérer utile lorsqu'on attache le même gestionnaire d'évènement à plusieurs éléments.</p>
+
+<pre class="brush: js notranslate">// Cette fonction masque la cible courante de l'évènement
+// et l'affiche dans la console.
+function hide(e){
+  e.currentTarget.style.visibility = 'hidden';
+  console.log(e.currentTarget);
+  // Lorsque cette fonction est utilisée en gestionnaire d'évènement
+  // on aura this === e.currentTarget
+}
+
+var ps = document.getElementsByTagName('p');
+
+for(var i = 0; i &lt; ps.length; i++){
+  // On affiche l'élément &lt;p&gt; qui a été cliqué dans la console
+  ps[i].addEventListener('click', hide, false);
+}
+// On affiche l'élément &lt;body&gt; dans la console
+document.body.addEventListener('click', hide, false);
+
+</pre>
+
+<div class="note">
+<p><strong>Note : </strong>La valeur de <code>event.currentTarget</code> est <strong>uniquement</strong> disponible lorsque l'évènement est géré. Ainsi, on ne pourra pas observer la valeur de <code>currentTarget</code> <em>a posteriori</em> (ex. si on a stocké la valeur d'<code>event</code> dans une variable lors de la gestion de l'évènement puis qu'on utilise celle-ci plus tard, <code>event.currentTarget</code> aura la valeur <code>null</code>).</p>
+</div>
+
+<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("DOM WHATWG", "#dom-event-currenttarget", "Event.currentTarget")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-event-currenttarget", "Event.currentTarget")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM3 Events", "#dfn-current-event-target", "current event target")}}</td>
+   <td>{{Spec2("DOM3 Events")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Events", "#Events-Event-currentTarget", "Event.currentTarget")}}</td>
+   <td>{{Spec2("DOM2 Events")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Event.currentTarget")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Event/Comparaison_des_cibles_d_évènements">Comparaison des différentes cibles pour les évènements</a></li>
+</ul>
diff --git a/files/fr/web/api/event/defaultprevented/index.html b/files/fr/web/api/event/defaultprevented/index.html
new file mode 100644
index 0000000000..395c353226
--- /dev/null
+++ b/files/fr/web/api/event/defaultprevented/index.html
@@ -0,0 +1,56 @@
+---
+title: event.defaultPrevented
+slug: Web/API/Event/defaultPrevented
+tags:
+  - API
+  - DOM
+  - Evènement
+  - Propriété
+translation_of: Web/API/Event/defaultPrevented
+---
+<p>{{APIRef("DOM")}}</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Retourne un booléen indiquant si {{domxref("event.preventDefault()")}} a été appelée sur l'évènement ou non.</p>
+
+<div class="note"><strong>Note :</strong> Cette propriété doit etre utilisée au lieu de la méthode <code>getPreventDefault()</code> qui n'est pas standard et est désormais dépréciée (voir {{bug(691151)}}).</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="eval">bool = event.defaultPrevented </pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre> if (e.defaultPrevented) {
+   /* Le comportement par défaut a été inhibé */
+ }
+</pre>
+
+<h2 id="Spécification">Spécification</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('DOM WHATWG', '#dom-event-defaultprevented', 'Event.defaultPrevented()')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Event.defaultPrevented")}}</p>
+
+<ul>
+</ul>
diff --git a/files/fr/web/api/event/event/index.html b/files/fr/web/api/event/event/index.html
new file mode 100644
index 0000000000..aeb96638d8
--- /dev/null
+++ b/files/fr/web/api/event/event/index.html
@@ -0,0 +1,77 @@
+---
+title: Event()
+slug: Web/API/Event/Event
+tags:
+  - API
+  - Constructeur
+  - DOM
+  - évènements
+translation_of: Web/API/Event/Event
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>Le constructeur <code><strong>Event()</strong></code> crée un nouvel {{domxref("Event")}} (<em>évènement</em>).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"> <em>event</em> = new Event(<em>typeArg</em>, <em>eventInit</em>);</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><em>typeArg</em></dt>
+ <dd>C'est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant le nom de l'évènement.</dd>
+ <dt><em>eventInit </em>{{optional_inline}}</dt>
+</dl>
+
+<dl>
+ <dd>C'est un dictionnaire <code>EventInit</code> ayant les champs suivants :
+
+ <ul>
+  <li><code>bubbles</code>: (facultatif) un {{jsxref("Boolean")}} indiquant si les événements sont propagés . Par défaut est <code>false</code> (<em>faux</em>).</li>
+  <li><code>cancelable</code>: (facultatif) un {{jsxref("Boolean")}} indiquant si l'évènement peut être annulé. Par défaut est <code>false</code> (<em>faux</em>) .</li>
+  <li><code>composed</code>: ( facultatif ) un {{jsxref("Boolean")}} indiquant si l'évènement déclenchera les écouteurs en dehors d'une racine shadow (voir {{domxref("Event.composed")}} pour plus de détails). Par défaut est <code>false</code> (<em>faux</em>) .<span style="display: none;"> </span></li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">// crée un évènement "look" qui est diffusé et ne peut être annulé
+var evt = new Event("look", {"bubbles":true, "cancelable":false});
+document.dispatchEvent(evt);
+
+// l'événement peut être envoyé à partir de n'importe quel élément, pas seulement le document
+myDiv.dispatchEvent(evt);
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table" style="height: 49px; width: 1000px;">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#interface-event','Event()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Event.Event")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Event")}}</li>
+</ul>
diff --git a/files/fr/web/api/event/eventphase/index.html b/files/fr/web/api/event/eventphase/index.html
new file mode 100644
index 0000000000..439f769f0a
--- /dev/null
+++ b/files/fr/web/api/event/eventphase/index.html
@@ -0,0 +1,196 @@
+---
+title: Event.eventPhase
+slug: Web/API/Event/eventPhase
+tags:
+  - API
+  - DOM
+  - Evènement
+  - Flux
+  - Phase
+  - Propriétés
+translation_of: Web/API/Event/eventPhase
+---
+<p>{{ApiRef("DOM")}}</p>
+
+<p>Indique quelle phase du flux d'événements est actuellement évaluée.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js"><em>var phase</em> = event.eventPhase;
+</pre>
+
+<p>Retourne un entier qui spécifie la phase courante d'évaluation du flux d'événements. Les valeurs possibles sont listées dans {{anch("Constantes de phase d'événement")}}.</p>
+
+<h2 id="Constantes">Constantes</h2>
+
+<h3 id="Constantes_de_phase_d'événement"><a id="Constantes de phase d'événement" name="Constantes de phase d'événement"></a>Constantes de phase d'événement</h3>
+
+<p>Ces valeurs décrivent quelle est la phase du flux d'événements actuellement évalué.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Constant</th>
+   <th scope="col">Value</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>Event.NONE</code></td>
+   <td>0</td>
+   <td>
+    <p>Aucun événement n'est actuellement traité.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>Event.CAPTURING_PHASE</code></td>
+   <td>1</td>
+   <td>
+    <p>L'événement se propage à travers les objets ancêtres de la cible. Ce processus commence avec {{domxref("Window")}}, puis {{domxref("Document")}}, ensuite {{domxref("HTMLHtmlElement")}} et ainsi de suite à travers les éléments jusqu'à ce que le parent de la cible soit atteint. {{domxref("EventListener", "Event listeners", "", 1)}} sont enregistrés pour le mode capture lorsque {{domxref("EventTarget.addEventListener()")}} est appelé durant cette phase.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>Event.AT_TARGET</code></td>
+   <td>2</td>
+   <td>L'événement est arrivé à {{domxref("EventTarget", "the event's target", "", 1)}}. Les écouteurs d'événements  enregistrés pour cette phase sont appelés à ce moment. Si {{domxref("Event.bubbles")}} vaut <code>false</code> (<em>faux</em>), le traitement de l'événement est terminé une fois la phase complète.</td>
+  </tr>
+  <tr>
+   <td><code>Event.BUBBLING_PHASE</code></td>
+   <td>3</td>
+   <td>L'événement se propage à rebours à travers les ancêtres de la cible dans l'ordre inverse, commençant avec le parent, et atteignant finalement le contenant {{domxref("Window")}}. Ceci est connu comme propagation et arrive seulement si {{domxref("Event.bubbles")}} vaut <code>true</code> (<em>vrai</em>). Les {{domxref("EventListener", "Event listeners", "", 1)}} enregistrés pour cette phase sont déclenchés durant ce traitement.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Pour plus de détails, voir <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow">section 3.1, Event dispatch and DOM event flow</a> (en) de la spécification du DOM niveau 3 sur les évènements .</p>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;h4&gt;Event Propagation Chain&lt;/h4&gt;
+&lt;ul&gt;
+  &lt;li&gt;Click 'd1'&lt;/li&gt;
+  &lt;li&gt;Analyse event propagation chain&lt;/li&gt;
+  &lt;li&gt;Click next div and repeat the experience&lt;/li&gt;
+  &lt;li&gt;Change Capturing mode&lt;/li&gt;
+  &lt;li&gt;Repeat the experience&lt;/li&gt;
+&lt;/ul&gt;
+&lt;input type="checkbox" id="chCapture" /&gt;
+&lt;label for="chCapture"&gt;Use Capturing&lt;/label&gt;
+ &lt;div id="d1"&gt;d1
+  &lt;div id="d2"&gt;d2
+      &lt;div id="d3"&gt;d3
+          &lt;div id="d4"&gt;d4&lt;/div&gt;
+      &lt;/div&gt;
+  &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;div id="divInfo"&gt;&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  margin: 20px;
+  padding: 4px;
+  border: thin black solid;
+}
+
+#divInfo {
+  margin: 18px;
+  padding: 8px;
+  background-color:white;
+  font-size:80%;
+}</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> clear <span class="operator token">=</span> <span class="keyword token">false</span><span class="punctuation token">,</span> divInfo <span class="operator token">=</span> <span class="keyword token">null</span><span class="punctuation token">,</span> divs <span class="operator token">=</span> <span class="keyword token">null</span><span class="punctuation token">,</span> useCapture <span class="operator token">=</span> <span class="keyword token">false</span><span class="punctuation token">;</span>
+window<span class="punctuation token">.</span>onload <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>
+  divInfo <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"divInfo"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  divs <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">'div'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  chCapture <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"chCapture"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  chCapture<span class="punctuation token">.</span>onclick <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>
+    <span class="function token">RemoveListeners</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="function token">AddListeners</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+  <span class="function token">Clear</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="function token">AddListeners</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="keyword token">function</span> <span class="function token">RemoveListeners</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token">&lt;</span> divs<span class="punctuation token">.</span>length<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">var</span> d <span class="operator token">=</span> divs<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">;</span>
+    <span class="keyword token">if</span> <span class="punctuation token">(</span>d<span class="punctuation token">.</span>id <span class="operator token">!=</span> <span class="string token">"divInfo"</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      d<span class="punctuation token">.</span><span class="function token">removeEventListener</span><span class="punctuation token">(</span><span class="string token">"click"</span><span class="punctuation token">,</span> OnDivClick<span class="punctuation token">,</span> <span class="keyword token">true</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      d<span class="punctuation token">.</span><span class="function token">removeEventListener</span><span class="punctuation token">(</span><span class="string token">"click"</span><span class="punctuation token">,</span> OnDivClick<span class="punctuation token">,</span> <span class="keyword token">false</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="keyword token">function</span> <span class="function token">AddListeners</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token">&lt;</span> divs<span class="punctuation token">.</span>length<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">var</span> d <span class="operator token">=</span> divs<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">;</span>
+    <span class="keyword token">if</span> <span class="punctuation token">(</span>d<span class="punctuation token">.</span>id <span class="operator token">!=</span> <span class="string token">"divInfo"</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="keyword token">if</span> <span class="punctuation token">(</span>chCapture<span class="punctuation token">.</span>checked<span class="punctuation token">)</span>
+        d<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"click"</span><span class="punctuation token">,</span> OnDivClick<span class="punctuation token">,</span> <span class="keyword token">true</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="keyword token">else</span>
+        d<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"click"</span><span class="punctuation token">,</span> OnDivClick<span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      d<span class="punctuation token">.</span>onmousemove <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> clear <span class="operator token">=</span> <span class="keyword token">true</span><span class="punctuation token">;</span> <span class="punctuation token">}</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span>
+
+<span class="keyword token">function</span> <span class="function token">OnDivClick</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span>clear<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="function token">Clear</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> clear <span class="operator token">=</span> <span class="keyword token">false</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>eventPhase <span class="operator token">==</span> <span class="number token">2</span><span class="punctuation token">)</span>
+    e<span class="punctuation token">.</span>currentTarget<span class="punctuation token">.</span>style<span class="punctuation token">.</span>backgroundColor <span class="operator token">=</span> <span class="string token">'red'</span><span class="punctuation token">;</span>
+  <span class="keyword token">var</span> level <span class="operator token">=</span> e<span class="punctuation token">.</span>eventPhase <span class="operator token">==</span> <span class="number token">0</span> <span class="operator token">?</span> <span class="string token">"none"</span> <span class="punctuation token">:</span> e<span class="punctuation token">.</span>eventPhase <span class="operator token">==</span> <span class="number token">1</span> <span class="operator token">?</span> <span class="string token">"capturing"</span> <span class="punctuation token">:</span> e<span class="punctuation token">.</span>eventPhase <span class="operator token">==</span> <span class="number token">2</span> <span class="operator token">?</span> <span class="string token">"target"</span> <span class="punctuation token">:</span> e<span class="punctuation token">.</span>eventPhase <span class="operator token">==</span> <span class="number token">3</span> <span class="operator token">?</span> <span class="string token">"bubbling"</span> <span class="punctuation token">:</span> <span class="string token">"error"</span><span class="punctuation token">;</span>
+  divInfo<span class="punctuation token">.</span>innerHTML <span class="operator token">+</span><span class="operator token">=</span> e<span class="punctuation token">.</span>currentTarget<span class="punctuation token">.</span>id <span class="operator token">+</span> <span class="string token">"; eventPhase: "</span> <span class="operator token">+</span> level <span class="operator token">+</span> <span class="string token">"&lt;br/&gt;"</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="keyword token">function</span> <span class="function token">Clear</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token">&lt;</span> divs<span class="punctuation token">.</span>length<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">if</span> <span class="punctuation token">(</span>divs<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>id <span class="operator token">!=</span> <span class="string token">"divInfo"</span><span class="punctuation token">)</span>
+      divs<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>style<span class="punctuation token">.</span>backgroundColor <span class="operator token">=</span> <span class="punctuation token">(</span>i <span class="operator token">&amp;</span> <span class="number token">1</span><span class="punctuation token">)</span> <span class="operator token">?</span> <span class="string token">"#f6eedb"</span> <span class="punctuation token">:</span> <span class="string token">"#cceeff"</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+  divInfo<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> <span class="string token">''</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>{{ EmbedLiveSample('Example', '', '700', '', 'Web/API/Event/eventPhase') }}</p>
+
+<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("DOM WHATWG", "#dom-event-eventphase", "Event.eventPhase")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-event-eventphase", "Event.eventPhase")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Events", "#Events-Event-eventPhase", "Event.eventPhase")}}</td>
+   <td>{{Spec2("DOM2 Events")}}</td>
+   <td>Première définition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Event.eventPhase")}}</p>
diff --git a/files/fr/web/api/event/explicitoriginaltarget/index.html b/files/fr/web/api/event/explicitoriginaltarget/index.html
new file mode 100644
index 0000000000..9844a934bf
--- /dev/null
+++ b/files/fr/web/api/event/explicitoriginaltarget/index.html
@@ -0,0 +1,49 @@
+---
+title: Event.explicitOriginalTarget
+slug: Web/API/Event/explicitOriginalTarget
+tags:
+  - API
+  - DOM
+  - Gecko
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/API/Event/explicitOriginalTarget
+---
+<div>{{ApiRef("DOM")}}{{Non-standard_header}}</div>
+
+<p>Cette propriété représente la cible originale de l'évènement. Elle est spécifique à Mozilla.</p>
+
+<p>Si l'évènement a été déporté pour une autre raison qu'une traverséee de frontière anonyme, cette propriété correspondra à la cible avant la déportation de l'évènement. Par exemples, les évènements de la souris sont déportés vers leur nœud parent lorsqu'ils se produisent sur des nœuds texte (cf. {{Bug(185889)}}). Dans ce cas <code><a href="/fr/docs/Web/API/Event/currentTarget">currentTarget</a></code> pointera vers le parent et <code>explicitOriginalTarget</code> vers le nœud texte.</p>
+
+<p>À la différence de <code><a href="/fr/docs/Web/API/Event/originalTarget">originalTarget</a></code>, <code>explicitOriginalTarget</code> ne contiendra jamais de contenu anonyme.</p>
+
+<p>Voir aussi une <a href="/fr/docs/DOM/event/Comparison_of_Event_Targets">comparaison des cibles pour les évènements</a>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Cette propriété peut être utiliséee avec <code>&lt;command&gt;</code> afin d'obtenir les détails de l'évènement de l'objet qui a invoqué la commande.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;command id="my-cmd-anAction"
+         oncommand="myCommand(event);"/&gt;
+&lt;menulist&gt;
+  &lt;menupopup&gt;
+    &lt;menuitem label="Get my element name!"
+              command="my-cmd-anAction"/&gt;
+  &lt;/menupopup&gt;
+&lt;/menulist&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">function myCommand(ev) {
+  console.log(ev.explicitOriginalTarget.nodeName);
+  // affichera 'menuitem'
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est spécifique à Mozilla. Elle est définie dans l'IDL {{Source("/dom/public/idl/events/nsIDOMNSEvent.idl")}}</p>
+
+<p>Cette propriété <strong>n'est pas définie</strong> dans la spécification <a href="https://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM Level 2 Events</a></p>
diff --git a/files/fr/web/api/event/index.html b/files/fr/web/api/event/index.html
new file mode 100644
index 0000000000..bf5ecf5351
--- /dev/null
+++ b/files/fr/web/api/event/index.html
@@ -0,0 +1,183 @@
+---
+title: Event
+slug: Web/API/Event
+tags:
+  - API
+  - DOM
+  - Evènement
+  - Interface
+  - Reference
+  - interface utilisateur
+translation_of: Web/API/Event
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>L'interface <code><strong>Event</strong></code> <span id="result_box" lang="fr"><span>représente tout événement qui a lieu dans le DOM ;</span> <span>certains sont générés par l'utilisateur (tels que des événements de souris ou de clavier), tandis que d'autres sont générés par des API (par exemple, des événements indiquant qu'une animation est terminée, qu'une vidéo a été suspendue, etc.).</span> <span>Il existe plusieurs types d'événements, dont certains utilisent d'autres interfaces basées sur l'interface principale <code>Event</code>.</span> <code>Event</code><span> elle-même contient les propriétés et méthodes communes à tous les événements.</span></span></p>
+
+<h2 id="Interfaces_basées_sur_Event"><span lang="fr"><span>Interfaces basées sur <code>Event</code></span></span></h2>
+
+<p> <span id="result_box" lang="fr"><span>Voici une liste d'interfaces basées sur l'interface principale </span></span> <code>Event</code> <span lang="fr"><span>, avec des liens vers leur documentation respective dans la référence de l'API MDN.</span> <span>Notez que toutes les interfaces d'événements ont des noms qui se terminent par "Event".</span></span></p>
+
+<div class="index">
+<ul>
+ <li>{{domxref("AnimationEvent")}}</li>
+ <li>{{domxref("AudioProcessingEvent")}}</li>
+ <li>{{domxref("BeforeInputEvent")}}</li>
+ <li>{{domxref("BeforeUnloadEvent")}}</li>
+ <li>{{domxref("BlobEvent")}}</li>
+ <li>{{domxref("ClipboardEvent")}}</li>
+ <li>{{domxref("CloseEvent")}}</li>
+ <li>{{domxref("CompositionEvent")}}</li>
+ <li>{{domxref("CSSFontFaceLoadEvent")}}</li>
+ <li>{{domxref("CustomEvent")}}</li>
+ <li>{{domxref("DeviceLightEvent")}}</li>
+ <li>{{domxref("DeviceMotionEvent")}}</li>
+ <li>{{domxref("DeviceOrientationEvent")}}</li>
+ <li>{{domxref("DeviceProximityEvent")}}</li>
+ <li>{{domxref("DOMTransactionEvent")}}</li>
+ <li>{{domxref("DragEvent")}}</li>
+ <li>{{domxref("EditingBeforeInputEvent")}}</li>
+ <li>{{domxref("ErrorEvent")}}</li>
+ <li>{{domxref("FetchEvent")}}</li>
+ <li>{{domxref("FocusEvent")}}</li>
+ <li>{{domxref("GamepadEvent")}}</li>
+ <li>{{domxref("HashChangeEvent")}}</li>
+ <li>{{domxref("IDBVersionChangeEvent")}}</li>
+ <li>{{domxref("InputEvent")}}</li>
+ <li>{{domxref("KeyboardEvent")}}</li>
+ <li>{{domxref("MediaStreamEvent")}}</li>
+ <li>{{domxref("MessageEvent")}}</li>
+ <li>{{domxref("MouseEvent")}}</li>
+ <li>{{domxref("MutationEvent")}}</li>
+ <li>{{domxref("OfflineAudioCompletionEvent")}}</li>
+ <li>{{domxref("PageTransitionEvent")}}</li>
+ <li>{{domxref("PointerEvent")}}</li>
+ <li>{{domxref("PopStateEvent")}}</li>
+ <li>{{domxref("ProgressEvent")}}</li>
+ <li>{{domxref("RelatedEvent")}}</li>
+ <li>{{domxref("RTCDataChannelEvent")}}</li>
+ <li>{{domxref("RTCIdentityErrorEvent")}}</li>
+ <li>{{domxref("RTCIdentityEvent")}}</li>
+ <li>{{domxref("RTCPeerConnectionIceEvent")}}</li>
+ <li>{{domxref("SensorEvent")}}</li>
+ <li>{{domxref("StorageEvent")}}</li>
+ <li>{{domxref("SVGEvent")}}</li>
+ <li>{{domxref("SVGZoomEvent")}}</li>
+ <li>{{domxref("TimeEvent")}}</li>
+ <li>{{domxref("TouchEvent")}}</li>
+ <li>{{domxref("TrackEvent")}}</li>
+ <li>{{domxref("TransitionEvent")}}</li>
+ <li>{{domxref("UIEvent")}}</li>
+ <li>{{domxref("UserProximityEvent")}}</li>
+ <li>{{domxref("WebGLContextEvent")}}</li>
+ <li>{{domxref("WheelEvent")}}</li>
+</ul>
+</div>
+
+<h2 id="L.27interface_DOM_Event" name="L.27interface_DOM_Event">Constructeur</h2>
+
+<p><span class="comment">L'interface DOM &lt;code&gt;event&lt;/code&gt; est exposée dans les objets &lt;code&gt;event&lt;/code&gt; qui sont passés aux gestionnaires d'évènements sur divers éléments du DOM.</span></p>
+
+<dl>
+ <dt>{{domxref("Event.Event", "Event()")}}</dt>
+ <dd>Crée un objet Event le retournant à l'appelant.</dd>
+</dl>
+
+<h2 id="Propri.C3.A9t.C3.A9s" name="Propri.C3.A9t.C3.A9s">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("Event.bubbles")}} {{readonlyinline}}</dt>
+ <dd>un booléen indiquant si l'évènement se propage vers le haut dans le DOM ou non.</dd>
+ <dt>{{domxref("Event.cancelBubble")}}</dt>
+ <dd>u<span id="result_box" lang="fr"><span>n alias historique de {{domxref ("Event.stopPropagation ()")}}.</span> <span>Définir sa valeur sur <code>true,</code> avant qu'elle revienne d'un gestionnaire d'événements, empêche la propagation de l'événement.</span></span></dd>
+ <dt>{{domxref("Event.cancelable")}} {{readonlyinline}}</dt>
+ <dd>Un booléen indiquant si l'évènement est annulable.</dd>
+ <dt>{{domxref("Event.composed")}} {{ReadOnlyInline}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Un booléen indiquant si l'événement peut ou non traverser la frontière entre le DOM shadow et le DOM normal.</span></span></dd>
+ <dt>{{domxref("Event.currentTarget")}} {{readonlyinline}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Une référence à la cible actuellement enregistrée pour l'événement.</span> <span>C'est l'objet auquel l'événement doit actuellement être envoyé ;</span> <span>il est possible que cela ait été modifié au cours du reciblage.</span></span></dd>
+ <dt>{{domxref("Event.deepPath")}} {{non-standard_inline}}</dt>
+ <dd>Un {{jsxref("Array")}} (<em>tableau</em>) de {{domxref("Node")}}  DOM à travers lesquels l'event a été propagé.</dd>
+ <dt>{{domxref("Event.defaultPrevented")}} {{readonlyinline}}</dt>
+ <dd>indique si {{domxref("event.preventDefault()")}} a été appelé ou non dans l'événement.</dd>
+ <dt>{{domxref("Event.eventPhase")}} {{readonlyinline}}</dt>
+ <dd>indique dans quelle phase de l'évènement on se trouve actuellement.</dd>
+ <dt>{{domxref("Event.explicitOriginalTarget")}} {{non-standard_inline}} {{readonlyinline}}</dt>
+ <dd>La cible explicite originale de l'évènement (spécifique à Mozilla).</dd>
+ <dt>{{domxref("Event.originalTarget")}} {{non-standard_inline}} {{readonlyinline}}</dt>
+ <dd>La cible originale de l'évènement, avant toute modification de celle-ci (spécifique à Mozilla).</dd>
+ <dt>{{domxref("Event.returnValue")}} {{non-standard_inline}}</dt>
+ <dd>une alternative non standard (de versions anciennes de MS IE) de {{domxref("Event.preventDefault()")}} et {{domxref("Event.defaultPrevented")}}.</dd>
+ <dt>{{domxref("Event.srcElement")}} {{non-standard_inline}}</dt>
+ <dd>Un alias non standard (d'anciennes versions de MS IE) pour {{domxref("Event.target")}}.</dd>
+ <dt>{{domxref("Event.target")}} {{readonlyinline}}</dt>
+ <dd>une référence à la cible vers laquelle l'évènement était originellement destiné.</dd>
+ <dt>{{domxref("Event.timeStamp")}} {{readonlyinline}}</dt>
+ <dd>Le moment de création de l'évènement, en millisecondes. <span id="result_box" lang="fr"><span>Par spécification, cette valeur est le temps écoulé depuis le moment, mais en réalité les définitions des navigateurs varient ;</span> <span>en outre, le travail est en cours pour le changer en </span></span> {{domxref("DOMHighResTimeStamp")}}.</dd>
+ <dt>{{domxref("Event.type")}} {{readonlyinline}}</dt>
+ <dd>Le nom de l'évènement (insensible à la casse).</dd>
+ <dt>{{domxref("Event.isTrusted")}} {{readonlyinline}}</dt>
+ <dd>indique si l'évènement est initié par le navigateur ou non (après un click d'utilisateur ou par un script utilisant une méthode de création d'évènement comme <a href="https://developer.mozilla.org/fr/docs/Web/API/Event/initEvent">event.initEvent</a>)</dd>
+</dl>
+
+<h3 id="Propriétés_obsolètes">Propriétés obsolètes</h3>
+
+<dl>
+ <dt>{{domxref("Event.scoped")}} {{readonlyinline}} {{obsolete_inline}}</dt>
+ <dd>un {{jsxref("Boolean")}} indiquant si l'événement donné peut être propagé à travers la racine shadow dans le DOM standard. Cette propriété a été renommée {{domxref("Event.composed", "composed")}}.</dd>
+</dl>
+
+<h2 id="M.C3.A9thodes" name="M.C3.A9thodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("Event.createEvent()")}} </dt>
+ <dd>Crée un nouvel <code>Event</code> (<em>évènement</em>) qui doit alors être initialisé par l'appel à la méthode <code>initEvent()</code>.</dd>
+ <dt>{{domxref("Event.composedPath()")}}</dt>
+ <dd>Renvoie le chemin de l'événement (objets sur lesquels les écouteurs seront appelés). Cela n'inclut pas les noeuds dans les arbres shadow si la racine shadow a été créée avec son {{domxref("ShadowRoot.mode")}} fermé.</dd>
+ <dt>{{domxref("Event.initEvent()")}} {{deprecated_inline}}</dt>
+ <dd>initialise la valeur d'un évènement créé. Si l'évènement a déjà été propagé, la méthode ne produit rien.</dd>
+ <dt>{{domxref("Event.preventDefault()")}}</dt>
+ <dd>Annule l'évènement (s'il est annulable).</dd>
+ <dt>{{domxref("Event.stopImmediatePropagation()")}}</dt>
+ <dd>Pour cet évènement particulier, aucun autre écouteur ne peut être appelé.  <span id="result_box" lang="fr"><span>Ni ceux attachés au même élément, ni ceux attachés aux éléments qui seront traversés plus tard (en phase de capture, par exemple)</span></span></dd>
+ <dt>{{domxref("Event.stopPropagation()")}}</dt>
+ <dd>Arrête la propagation ultérieure d'évènements dans le DOM.</dd>
+</dl>
+
+<h3 id="Méthodes_obsolètes">Méthodes obsolètes</h3>
+
+<dl>
+ <dt>{{domxref("Event.preventBubble()")}} {{non-standard_inline}} {{Obsolete_inline(24)}}</dt>
+ <dd>Empêche l'évènement de se propager. Obsolète, utilisez la méthode {{domxref("event.stopPropagation")}} à la place.</dd>
+ <dt>{{domxref("Event.preventCapture()")}} {{non-standard_inline}} {{Obsolete_inline(24)}}</dt>
+ <dd>Obsolète, utilisez la méthode {{domxref("event.stopPropagation")}} à la place.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Event.getPreventDefault()")}} {{non-standard_inline}}</dt>
+ <dd>Non standard. Retourne la valeur de {{domxref("Event.defaultPrevented")}}. Utilisez à la place {{domxref("Event.defaultPrevented")}} .</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Spécification Statut Commentaire {{SpecName('DOM WHATWG', '#interface-event', 'Event')}} {{Spec2('DOM WHATWG')}}  </p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Event")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Types d'évènements disponibles : <a href="https://developer.mozilla.org/fr/docs/Web/Events">Référence Event</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Event/Comparison_of_Event_Targets">Comparaison des cibles d'Event</a> (<span id="result_box" lang="fr"><span>target vs currentTarget vs relatedTarget vs originalTarget</span></span> )</li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/Guide/DOM/Events/Creating_and_triggering_events">Création et déclenchement d'évènements personnalisés</a></li>
+ <li><span class="short_text" id="result_box" lang="fr"><span>Pour les développeurs de Firefox :</span></span>
+  <ul>
+   <li><a href="https://developer.mozilla.org/fr/docs/Listening_to_events_in_Firefox_extensions">Écouter des évènements dans les extensions Firefox</a></li>
+   <li><a href="https://developer.mozilla.org/fr/docs/Listening_to_events_on_all_tabs">Écouter des événements sur tous les onglets</a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/api/event/initevent/index.html b/files/fr/web/api/event/initevent/index.html
new file mode 100644
index 0000000000..ae5a5fabce
--- /dev/null
+++ b/files/fr/web/api/event/initevent/index.html
@@ -0,0 +1,93 @@
+---
+title: event.initEvent
+slug: Web/API/Event/initEvent
+tags:
+  - API
+  - DOM
+  - Evènement
+  - Méthode
+  - Reference
+translation_of: Web/API/Event/initEvent
+---
+<p>{{ApiRef("DOM")}}{{deprecated_header}}</p>
+
+<p>La méthode <strong><code>Event.initEvent()</code></strong> est utilisée pour initialiser la valeur d'un objet {{domxref("event")}} créé à l'aide de {{domxref("Document.createEvent()")}}.</p>
+
+<p>Les évènements initialisés par ce moyen ont été créés par la méthode {{domxref("Document.createEvent()")}}. Celle-ci doit être appelée à définir l'évènement avant qu'il ne soit distribué, en utilisant {{domxref("EventTarget.dispatchEvent()")}}. <span class="short_text" id="result_box" lang="fr"><span>Une fois l'évènement transmis, la méthode ne fait plus rien.</span></span></p>
+
+<div class="note">
+<p><strong><span class="short_text" lang="fr"><span>Note : Ne pas utiliser cette méthode qui est dépréciée</span></span></strong></p>
+
+<p>À la place, utilisez un constructeur d'évènements spécifique comme {{domxref("Event.Event", "Event()")}} . La page <a href="https://developer.mozilla.org/fr/docs/Web/Guide/DOM/Events/Creating_and_triggering_events">Création et déclenchement d'évènements</a> vous donne plus d'informations sur la manière de les utiliser.</p>
+</div>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="eval"><em>event</em>.initEvent(<em>type</em>, <em>bubbles</em>, <em>cancelable</em>)
+</pre>
+
+<dl>
+ <dt><code>type</code></dt>
+ <dd>est une {{domxref("DOMString")}}  qui définit le type d'évènement.</dd>
+ <dt><code>bubbles</code></dt>
+ <dd>est un {{jsxref("Boolean")}} indiquant si l'évènement doit se propager vers le haut dans la chaîne des évènements ou non. Une fois déterminé, la propriété en lecture seule  {{domxref("Event.bubbles")}} donnera sa valeur.</dd>
+ <dt><code>cancelable</code></dt>
+ <dd>Une valeur booléenne définissant si l'évènement peut être annulé. Une fois déterminé, la propriété en lecture seule  {{ domxref("Event.cancelable") }}  donnera sa valeur.</dd>
+</dl>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre><code>// Crée un évènement.
+var event = document.createEvent('Event');
+</code>
+// Crée un évènement click qui doit se propager vers le haut
+// et ne peut être annulé<code>
+event.initEvent('click', true, false);
+
+// Écoute les évènements.
+elem.addEventListener('click', function (e) {
+  // e.target matches elem
+}, false);
+
+elem.dispatchEvent(event);</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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-event-initevent','Event.initEvent()')}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>Depuis {{SpecName('DOM2 Events')}}, dépréciée, <span class="short_text" id="result_box" lang="fr"><span>remplacée par les constructeurs d'événements.</span></span></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events','##Events-Event-initEvent','Event.initEvent()')}}</td>
+   <td>{{Spec2('DOM2 Events')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+
+
+<p>{{Compat("api.Event.initEvent")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Le constructeur à utiliser à la place de cette méthode dépréciée : {{domxref("Event.Event","Event()")}}. <span id="result_box" lang="fr"><span>Des constructeurs plus spécifiques peuvent aussi être utilisés</span></span> .</li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/web/api/event/istrusted/index.html b/files/fr/web/api/event/istrusted/index.html
new file mode 100644
index 0000000000..59ffc29342
--- /dev/null
+++ b/files/fr/web/api/event/istrusted/index.html
@@ -0,0 +1,117 @@
+---
+title: Event.isTrusted
+slug: Web/API/Event/isTrusted
+tags:
+  - API
+  - Event
+  - Property
+  - Read-only
+  - Référence(2)
+translation_of: Web/API/Event/isTrusted
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La propriété en lecture seule isTrusted, de l'interface {{domxref("Event")}}, est un booléen qui vaut true lorsque l'événement est généré par une action de l'utilisateur, et false, quand l'événement est créé ou modifié par un script ou envoyé par dispatchEvent.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox">var bool = event.isTrusted;
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre> if (e.isTrusted) {
+     /* The event is trusted. */
+ } else {
+     /* The event is not trusted. */
+ }
+</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('DOM WHATWG', '#dom-event-istrusted', 'Event.isTrusted')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', '#trusted-events', 'Trusted events')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>
+    <p>Ajoute des conditions à propos des événement trusted et untrusted. Cependant, cela ne défini pas la propriété isTrusted.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM4', '#dom-event-istrusted', 'Event.isTrusted')}}</td>
+   <td>{{Spec2('DOM4')}}</td>
+   <td>Première définition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(46.0)}} [1]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}} [2]</td>
+   <td>{{CompatOpera(33)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(46.0)}} [1]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile(33)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(46.0)}} [1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Commence avec Chrome 53, les événements untrusted n'invoquent pas l'action par défaut. </p>
+
+<p>[2] Avec Internet Explorer, tous les événements sont trusted, excepté ceux créés avec la méthode <code>createEvent().</code></p>
diff --git a/files/fr/web/api/event/originaltarget/index.html b/files/fr/web/api/event/originaltarget/index.html
new file mode 100644
index 0000000000..ad65cdc914
--- /dev/null
+++ b/files/fr/web/api/event/originaltarget/index.html
@@ -0,0 +1,41 @@
+---
+title: Event.originalTarget
+slug: Web/API/Event/originalTarget
+tags:
+  - API
+  - Cible
+  - DOM
+  - Evènement
+  - Propriétés
+  - origine
+translation_of: Web/API/Event/originalTarget
+---
+<div>{{ ApiRef("DOM") }} {{Non-standard_header}}</div>
+
+<div> </div>
+
+<h2 id="Summary" name="Summary">Résumé</h2>
+
+<p>La cible d'origine de l'évènement avant tout reciblage. (spécifique à Mozilla)</p>
+
+<p>En présence de contenu anonyme <a href="https://developer.mozilla.org/fr/docs/XBL" title="XBL">XBL</a>, ce sera le nœud anonyme sur lequel l'événement a été déclenché à l'origine. Voir <a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XBL/XBL_1.0_Reference/Anonymous_Content#Event_Flow_and_Targeting" title="XBL/XBL_1.0_Reference/Anonymous_Content#Event_Flow_and_Targeting">Anonymous Content#Event_Flow_and_Targeting</a> pour plus de détails.</p>
+
+<p><strong>Note :</strong> <code>originalTarget</code> peut aussi être un contenu anonyme natif  (voir {{Bug("208427")}}), dans ce cas, il est inutile pour le code non privilégié.</p>
+
+<p>Voir aussi <a href="https://developer.mozilla.org/fr/docs/Web/API/Event/Comparaison_des_cibles_d_%C3%A9v%C3%A8nements" title="DOM/event/Comparison_of_Event_Targets">Comparaison des cibles d'évènements.</a></p>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<p><em>Besoin d'un exemple qui ait du sens ici. ^^</em></p>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<p>C'est une propriété propre à Mozilla. Définie dans {{Source("/dom/public/idl/events/nsIDOMNSEvent.idl")}}</p>
+
+<p>Cette propriété d'évènements <strong>n'est pas définie</strong> dans la spécification <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">W3.org DOM niveau 2 Events</a></p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Event.originalTarget")}}</p>
diff --git a/files/fr/web/api/event/preventdefault/index.html b/files/fr/web/api/event/preventdefault/index.html
new file mode 100644
index 0000000000..0290a49d70
--- /dev/null
+++ b/files/fr/web/api/event/preventdefault/index.html
@@ -0,0 +1,180 @@
+---
+title: event.preventDefault
+slug: Web/API/Event/preventDefault
+tags:
+  - API
+  - DOM
+  - Evènement
+  - Gecko
+  - Méthodes
+translation_of: Web/API/Event/preventDefault
+---
+<div>{{ ApiRef("DOM") }}</div>
+
+<div> </div>
+
+<p>La méthode  <strong><code>preventDefault()</code></strong> de l 'interface {{domxref("Event")}} <span id="result_box" lang="fr"><span>indique à l'{{Glossary("user agent","agent utilisateur")}} que si l'événement n'est pas traité explicitement, son action par défaut ne doit pas être prise en compte comme elle le serait normalement.</span> <span>L'événement continue à se propager comme d'habitude, sauf si l'un de ses écouteurs appelle </span></span> {{domxref("Event.stopPropagation", "stopPropagation()")}} <span lang="fr"><span> ou </span></span> {{domxref("Event.stopImmediatePropagation", "stopImmediatePropagation()")}} <span lang="fr"><span>, dont l'un ou l'autre termine la propagation.</span></span></p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>Event</em>.preventDefault();</pre>
+
+<h3 id="Example" name="Example">Paramètres</h3>
+
+<p>None (<em>aucun</em>)</p>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p><code>undefined</code>.</p>
+
+<h2 id="Example" name="Example">Exemples</h2>
+
+<h3 id="Bloquer_la_gestion_des_clics_par_défaut"><span class="short_text" id="result_box" lang="fr"><span>Bloquer la gestion des clics par défaut</span></span></h3>
+
+<p>L'action par défaut du clic sur une case à cocher est le changement de son état. Cet exemple montre comment annuler cette action :</p>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">"#id-checkbox"</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"click"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+         document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"output-box"</span><span class="punctuation token">)</span><span class="punctuation token">.</span>innerHTML <span class="operator token">+</span><span class="operator token">=</span> <span class="string token">"Sorry! &lt;code&gt;preventDefault()&lt;/code&gt; won't let you check this!&lt;br&gt;"</span><span class="punctuation token">;</span>
+         event<span class="punctuation token">.</span><span class="function token">preventDefault</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="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h4 id="HTML">HTML</h4>
+
+<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>Please click on the checkbox control.<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>form</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>id-checkbox<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Checkbox:<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>checkbox<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>id-checkbox<span class="punctuation token">"</span></span><span class="punctuation token">/&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>form</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>output-box<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>Vous pouvez voir <code>preventDefault</code> en action ici (anglais) :</p>
+
+<p>{{EmbedLiveSample("Blocking_default_click_handling")}}</p>
+
+<h3 id="Arrêter_les_frappes_de_touches_pour_atteindre_un_champ_d'édition"><span id="result_box" lang="fr"><span>Arrêter les frappes de touches pour atteindre un champ d'édition</span></span></h3>
+
+<p>L'exemple suivant montre comment bloquer la saisie de texte invalide dans un champ input avec <code>preventDefault()</code>. <span id="result_box" lang="fr"><span>Actuellement, vous devriez normalement utiliser la validation de forme HTML native à la place.</span></span></p>
+
+<h4 id="HTML_2"><span lang="fr"><span>HTML</span></span></h4>
+
+<p><span lang="fr"><span>Ici le formulaire :</span></span></p>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>container<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>Please enter your name using lowercase letters only.<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>form</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>my-textbox<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>form</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h4 id="CSS">CSS</h4>
+
+<p><span id="result_box" lang="fr"><span>Nous utilisons un peu de CSS pour la boîte d'avertissement qui sera dessinée lorsque l'utilisateur appuie sur une touche non valide :</span></span></p>
+
+<pre class="brush: css line-numbers  language-css"><code class="language-css"><span class="selector token"><span class="class token">.warning</span> </span><span class="punctuation token">{</span>
+  <span class="property token">border</span><span class="punctuation token">:</span> <span class="number token">2</span>px solid <span class="hexcode token">#f39389</span><span class="punctuation token">;</span>
+  <span class="property token">border-radius</span><span class="punctuation token">:</span> <span class="number token">2</span>px<span class="punctuation token">;</span>
+  <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">10</span>px<span class="punctuation token">;</span>
+  <span class="property token">position</span><span class="punctuation token">:</span> absolute<span class="punctuation token">;</span>
+  <span class="property token">background-color</span><span class="punctuation token">:</span> <span class="hexcode token">#fbd8d4</span><span class="punctuation token">;</span>
+  <span class="property token">color</span><span class="punctuation token">:</span> <span class="hexcode token">#3b3c40</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h4 id="JavaScript_2">JavaScript</h4>
+
+<p><span id="result_box" lang="fr"><span>Et voici le code JavaScript qui fait le travail.</span> <span>Tout d'abord, écoutez les événements {{event("keypress")}}:</span></span></p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> myTextbox <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'my-textbox'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+myTextbox<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'keypress'</span><span class="punctuation token">,</span> checkName<span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>La fonction <code>checkName()</code>, <span id="result_box" lang="fr"><span>qui regarde la touche enfoncée et décide de l'autoriser :</span></span></p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">checkName</span><span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> charCode <span class="operator token">=</span> evt<span class="punctuation token">.</span>charCode<span class="punctuation token">;</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span>charCode <span class="operator token">!=</span> <span class="number token">0</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">if</span> <span class="punctuation token">(</span>charCode <span class="operator token">&lt;</span> <span class="number token">97</span> <span class="operator token">||</span> charCode <span class="operator token">&gt;</span> <span class="number token">122</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      evt<span class="punctuation token">.</span><span class="function token">preventDefault</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="function token">displayWarning</span><span class="punctuation token">(</span>
+        <span class="string token">"Please use lowercase letters only."</span>
+        <span class="operator token">+</span> <span class="string token">"\n"</span> <span class="operator token">+</span> <span class="string token">"charCode: "</span> <span class="operator token">+</span> charCode <span class="operator token">+</span> <span class="string token">"\n"</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>La fonction <code>displayWarning()</code>  <span id="result_box" lang="fr"><span>présente une notification d'un problème.</span> <span>Ce n'est pas une fonction élégante mais elle fait le travail nécessaire à cet exemple :</span></span></p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> warningTimeout<span class="punctuation token">;</span>
+<span class="keyword token">var</span> warningBox<span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"div"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+warningBox<span class="punctuation token">.</span>className <span class="operator token">=</span> <span class="string token">"warning"</span><span class="punctuation token">;</span>
+
+<span class="keyword token">function</span> <span class="function token">displayWarning</span><span class="punctuation token">(</span>msg<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  warningBox<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> msg<span class="punctuation token">;</span>
+
+  <span class="keyword token">if</span> <span class="punctuation token">(</span>warningBox<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>warningTimeout<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
+    myTextbox<span class="punctuation token">.</span>parentNode<span class="punctuation token">.</span><span class="function token">insertBefore</span><span class="punctuation token">(</span>warningBox<span class="punctuation token">,</span> myTextbox<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+
+  warningTimeout <span class="operator token">=</span> window<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><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      warningBox<span class="punctuation token">.</span>parentNode<span class="punctuation token">.</span><span class="function token">removeChild</span><span class="punctuation token">(</span>warningBox<span class="punctuation token">)</span><span class="punctuation token">;</span>
+      warningTimeout <span class="operator token">=</span> <span class="operator token">-</span><span class="number token">1</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span><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></code></pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>Ici le résultat du code précédent :</p>
+
+<p>{{ EmbedLiveSample('Stopping_keystrokes_from_reaching_an_edit_field', 600, 200) }}</p>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p><code>Appeler preventDefault</code> pendant chaque étape de la propagation de l'évènement annule celui-ci, ce qui signifie que chaque action par défaut se produisant normalement ne se produira pas.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Depuis {{Gecko("6.0")}}, appeler <code>preventDefault()</code> passe la valeur de la propriété {{domxref("event.defaultPrevented")}} à <code>true</code>.</p>
+</div>
+
+<p>Vous pouvez utiliser {{domxref("Event.cancelable")}} pour vérifier que l'évènement peut être annulé. Appeler <code>preventDefault</code> sur un évènement qui ne peut pas être annulé n'a aucun effet.</p>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<article class="approved text-content">
+<div class="boxed translate-rendered">
+<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('DOM WHATWG', '#dom-event-preventdefault', 'Event.preventDefault()')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events', '#Events-Event-preventDefault', 'Event.preventDefault()')}}</td>
+   <td>{{ Spec2('DOM2 Events') }}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+</article>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Event.preventDefault")}}</p>
diff --git a/files/fr/web/api/event/returnvalue/index.html b/files/fr/web/api/event/returnvalue/index.html
new file mode 100644
index 0000000000..98863439b0
--- /dev/null
+++ b/files/fr/web/api/event/returnvalue/index.html
@@ -0,0 +1,36 @@
+---
+title: Event.returnValue
+slug: Web/API/Event/returnValue
+tags:
+  - API
+  - DOM
+  - Propriétés
+  - action
+  - évènements
+translation_of: Web/API/Event/returnValue
+---
+<p>{{APIRef("DOM Events")}}{{Non-standard_header}}{{ Deprecated_header() }}</p>
+
+<p>La propriété <code><strong>Event.returnValue</strong></code> indique si l'action par défaut pour cet évènement a été empêchée ou non. Elle est définie à <code>true</code> (<em>vrai</em>) par défaut, permettant à l'action par défaut de se produire. La définition de cette propriété à <code>false</code> (<em>faux</em>) empêche le déclenchement de l'action par défaut.</p>
+
+<div class="note">
+<p>Utilisez {{domxref("Event.preventDefault()")}} à la place de cette méthode non standard.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox">event.returnValue = <em>bool;</em>
+<em>var bool</em> = event.returnValue;
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Bien qu'elle ait été inclue <a href="https://www.w3.org/TR/1999/WD-DOM-Level-2-19990304/events.html#attribute-returnValue">dans l'ancien brouillon de travail de W3C DOM niveau 2</a><em>, cette propriété ne fait partie d'aucune spécification.</em></p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Event.returnValue")}}</p>
+
+<div id="compat-mobile"> </div>
diff --git a/files/fr/web/api/event/srcelement/index.html b/files/fr/web/api/event/srcelement/index.html
new file mode 100644
index 0000000000..94328eecf1
--- /dev/null
+++ b/files/fr/web/api/event/srcelement/index.html
@@ -0,0 +1,32 @@
+---
+title: Event.srcElement
+slug: Web/API/Event/srcElement
+tags:
+  - API
+  - DOM
+  - Evènement
+  - Propriétés
+  - Éléments SRC
+translation_of: Web/API/Event/srcElement
+---
+<p>{{ApiRef("DOM")}}</p>
+
+<p>{{ Non-standard_header() }}</p>
+
+<p><strong><code>Event.srcElement</code></strong> est un alias propriétaire (implémenté dans Internet Explorer) pour la propriété standard {{domxref("Event.target")}} <span id="result_box" lang="fr"><span>qui commence à être pris en charge dans d'autres navigateurs à des fins de compatibilité Web.</span></span></p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<p>Ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Event.srcElement")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Window.event")}}</li>
+</ul>
diff --git a/files/fr/web/api/event/stopimmediatepropagation/index.html b/files/fr/web/api/event/stopimmediatepropagation/index.html
new file mode 100644
index 0000000000..e360493937
--- /dev/null
+++ b/files/fr/web/api/event/stopimmediatepropagation/index.html
@@ -0,0 +1,44 @@
+---
+title: Event.stopImmediatePropagation()
+slug: Web/API/Event/stopImmediatePropagation
+tags:
+  - API
+  - Event
+  - Méthode
+  - Reference
+translation_of: Web/API/Event/stopImmediatePropagation
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La méthode <code><strong>stopImmediatePropagation()</strong></code>, rattachée à l'interface {{domxref("Event")}}, empêche les gestionnaires d'évènement, associés à ce même évènement, d'être appelés.</p>
+
+<p>Si plusieurs gestionnaires d'évènement sont attachés à un élément pour le même type d'évènement, ils sont appelés dans l'ordre dans lequel ils ont été ajoutés. Si <code>stopImmediatePropagation()</code> est appelé pendant un de ces appels, les gestionnaires restants ne sont pas invoqués.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>event</em>.stopImmediatePropagation();</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('DOM WHATWG', '#dom-event-stopimmediatepropagation', 'Event.stopImmediatePropagation()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Event.stopImmediatePropagation")}}</p>
diff --git a/files/fr/web/api/event/stoppropagation/index.html b/files/fr/web/api/event/stoppropagation/index.html
new file mode 100644
index 0000000000..5956fc1e5b
--- /dev/null
+++ b/files/fr/web/api/event/stoppropagation/index.html
@@ -0,0 +1,65 @@
+---
+title: Event.stopPropagation()
+slug: Web/API/Event/stopPropagation
+tags:
+  - API
+  - DOM
+  - Evènement
+  - Méthode
+  - Reference
+translation_of: Web/API/Event/stopPropagation
+---
+<p id="Summary">{{APIRef("DOM")}}</p>
+
+<p>Évite que l'évènement courant ne se propage plus loin dans les phases de capture et de déploiement.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>event</em>.stopPropagation();</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<p>Voir la section Exemple 5 : <a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Exemples#Exemple_5_:_propagation_d%27%C3%A9v%C3%A8nements" title="https://developer.mozilla.org/en-US/docs/Gecko_DOM_Reference/Examples#Example_5.3A_Event_Propagation">Propagation d'évènements</a> dans le chapitre Exemples pour un exemple plus détaillé de cette méthode et de la propagation d'évènements dans le DOM.</p>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Voir <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow-capture">DOM specification</a> (en)  pour une explication du flux d'évènements. (Une illustration est disponible dans le brouillon <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow" title="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow">DOM Level 3 Event draft</a> (en)).</p>
+
+<p><a href="/fr/docs/Web/API/Event/preventDefault" title="DOM/event.preventDefault">preventDefault</a> est une méthode complémentaire qui peut être utilisée pour empêcher l'action par défaut de l'évènement.</p>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Spécification</th>
+   <th>Statut</th>
+   <th>Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-event-stoppropagation", "Event.stopPropagation()")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-event-stoppropagation", "Event.stopPropagation()")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Events", "#Events-Event-stopPropagation", "Event.stopPropagation()")}}</td>
+   <td>{{Spec2("DOM2 Events")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Event.stopPropagation")}}</p>
+
+<div id="compat-desktop">
+<div id="compat-mobile"> </div>
+</div>
diff --git a/files/fr/web/api/event/target/index.html b/files/fr/web/api/event/target/index.html
new file mode 100644
index 0000000000..b624041ab6
--- /dev/null
+++ b/files/fr/web/api/event/target/index.html
@@ -0,0 +1,89 @@
+---
+title: Event.target
+slug: Web/API/Event/target
+tags:
+  - API
+  - Cible
+  - DOM
+  - Evènement
+  - Propriétés
+translation_of: Web/API/Event/target
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p>C'est une référence à l'objet qui a envoyé l'événement. C'est une propriété différente de {{domxref("event.currentTarget")}} lorsque le gestionnaire d'événements est appelé au cours de la phase de propagation ou de la phase de capture de l'événement.</p>
+
+<h2 id="Example" name="Example">Syntaxe</h2>
+
+<pre><code><code>laCible = event.target</code></code></pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<p>La propriété <code>event.target</code> peut être utilisée pour implémenter la <strong>délégation d'événements</strong>.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="comment token">// Produit une liste</span>
+<span class="keyword token">var</span> ul <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'ul'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+document<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>ul<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="keyword token">var</span> li1 <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'li'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> li2 <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'li'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+ul<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>li1<span class="punctuation token">)</span><span class="punctuation token">;</span>
+ul<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>li2<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="keyword token">function</span> <span class="function token">hide</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span><span class="punctuation token">{</span>
+  <span class="comment token">// e.target se réfère à l'élément &lt;li&gt; cliqué</span>
+  <span class="comment token">// C'est différent de e.currentTarget qui doit faire référence au parent &lt;ul&gt; dans ce contexte</span>
+  e<span class="punctuation token">.</span>target<span class="punctuation token">.</span>style<span class="punctuation token">.</span>visibility <span class="operator token">=</span> <span class="string token">'hidden'</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="comment token">// Attache l'écouteur à la liste</span>
+<span class="comment token">// Il se déclenche pour chaque &lt;li&gt; clické</span>
+ul<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> hide<span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></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("DOM WHATWG", "#dom-event-target", "Event.target")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-event-target", "Event.target")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Events", "#Events-Event-target", "Event.target")}}</td>
+   <td>{{Spec2("DOM2 Events")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Event.target")}}</p>
+
+<h2 id="Notes_concernant_la_compatibilité">Notes concernant la compatibilité</h2>
+
+<p>Sur IE6-8, le modèle d'événement est différent. Les écouteurs sont attachés avec la méthode non standard <code>{{domxref('EventTarget.attachEvent')}}</code> . Dans ce modèle, l'objet événement a une propriété  <code>{{domxref('Event.srcElement')}}</code>, à la place de la propriété <code>target</code>, avec la même sémantique que<span style="line-height: 1.5;"> </span><code style="font-style: normal; line-height: 1.5;">event.target</code><span style="line-height: 1.5;">.</span></p>
+
+<pre class="brush: js" style="font-size: 14px;">function hide(e) {
+  // Support IE6-8
+  var target = e.target || e.srcElement;
+  target.style.visibility = 'hidden';
+}
+</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p><a href="https://developer.mozilla.org/fr/docs/Web/API/Event/Comparaison_des_cibles_d_%C3%A9v%C3%A8nements" title="en/DOM/event/Comparison_of_Event_Targets">Comparaison des cibles d'évènements</a></p>
diff --git a/files/fr/web/api/event/timestamp/index.html b/files/fr/web/api/event/timestamp/index.html
new file mode 100644
index 0000000000..b3e2333120
--- /dev/null
+++ b/files/fr/web/api/event/timestamp/index.html
@@ -0,0 +1,108 @@
+---
+title: Event.timeStamp
+slug: Web/API/Event/timeStamp
+tags:
+  - API
+  - DOM
+  - Evènement
+  - Propriétés
+  - temps
+translation_of: Web/API/Event/timeStamp
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p>Retourne le temps (en millisecondes) à partir duquel l'événement a été créé.</p>
+
+<div class="note">
+<p>Note : Cette propriété fonctionne seulement si le système d'évènements le prend en charge pour des évènements particuliers.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox">event.timeStamp
+</pre>
+
+<h3 id="Examples" name="Examples">Valeur</h3>
+
+<p>Cette valeur est un nombre de millisecondes écoulées depuis le début du temps de vie du document courant jusqu'à la création de l'évènement.</p>
+
+<p>Dans les nouvelles implémentations, la valeur est un {{domxref("DOMHighResTimeStamp")}} dont la précision est de 5 microsecondes (0,005 ms). Dans les implémentations plus anciennes, la valeur est un {{domxref("DOMTimeStamp")}} de précision d'une milliseconde.</p>
+
+<h2 id="Examples" name="Examples">Exemple</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>
+  Focus this iframe and press any key to get the
+  current timestamp for the keypress event.
+<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>timeStamp: <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>span</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>time<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>span</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">getTime</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> time <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"time"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  time<span class="punctuation token">.</span>firstChild<span class="punctuation token">.</span>nodeValue <span class="operator token">=</span> event<span class="punctuation token">.</span>timeStamp<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+document<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"keypress"</span><span class="punctuation token">,</span> getTime<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Example", "100%", 100)}}</p>
+
+<h2 id="Notes" name="Notes">Précision du temps réduite</h2>
+
+<p>Pour offrir une protection contre les attaques de synchronisation et les empreintes digitales, la précision de <code>event.timeStamp</code> peut être arrondie en fonction des paramètres du navigateur.<br>
+ Dans Firefox, la préférence <code>privacy.reduceTimerPrecision</code> est activée et à 20 us par défaut dans Firefox 59 ; en version 60 ce sera 2 ms.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="comment token">// Précision du temps réduite (2ms) dans Firefox 60</span>
+event<span class="punctuation token">.</span>timeStamp<span class="punctuation token">;</span>
+<span class="comment token">// 1519211809934</span>
+<span class="comment token">// 1519211810362</span>
+<span class="comment token">// 1519211811670</span>
+<span class="comment token">// ...</span>
+
+
+<span class="comment token">// Précision du temps réduite avec `privacy.resistFingerprinting` activé</span>
+event<span class="punctuation token">.</span>timeStamp<span class="punctuation token">;</span>
+<span class="comment token">// 1519129853500</span>
+<span class="comment token">// 1519129858900</span>
+<span class="comment token">// 1519129864400</span>
+<span class="comment token">// ...</span></code></pre>
+
+<p>Dans Firefox, vous pouvez aussi activer <code>privacy.resistFingerprinting</code>, la précision sera de 100 ms ou la valeur de <code>privacy.resistFingerprinting.reduceTimerPrecision.microseconds</code>, selon la valeur la plus grande.</p>
+
+<h2 id="Specifications" name="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('DOM WHATWG', '#dom-event-timestamp', 'Event.timeStamp')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM4', '#dom-event-timestamp', 'Event.timeStamp')}}</td>
+   <td>{{ Spec2('DOM4') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events', '#Events-Event-timeStamp', 'Event.timeStamp')}}</td>
+   <td>{{ Spec2('DOM2 Events') }}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Event.timeStamp")}}</p>
diff --git a/files/fr/web/api/event/type/index.html b/files/fr/web/api/event/type/index.html
new file mode 100644
index 0000000000..c50dcb0fea
--- /dev/null
+++ b/files/fr/web/api/event/type/index.html
@@ -0,0 +1,102 @@
+---
+title: Event.type
+slug: Web/API/Event/type
+tags:
+  - API
+  - DOM
+  - Evènement
+  - Propriétés
+  - Type
+translation_of: Web/API/Event/type
+---
+<p>{{APIRef}}</p>
+
+<p>La propriété en lecture seule<strong> Event.type </strong>retourne une chaîne de caractères (<em>string</em>) contenant le type de l'événement. Le type est défini lors de la construction de l'événement et est le nom d'usage pour se référer à celui-ci, tel que  <code>click</code>, <code>load</code> ou <code>error</code>.</p>
+
+<p>L'argument <code><em>event</em></code> de {{ domxref("EventTarget.addEventListener()") }} et {{ domxref("EventTarget.removeEventListener()") }} n'est pas sensible à la casse.</p>
+
+<p>Pour une liste des types d'événements disponibles, aller voir la page <a href="https://developer.mozilla.org/fr/docs/Web/Events">Référence des évènements</a>.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox">event.type
+</pre>
+
+<h2 id="Example" name="Example">Exemples</h2>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="doctype token">&lt;!DOCTYPE html&gt;</span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>en<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>meta</span> <span class="attr-name token">charset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>utf-8<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>title</span><span class="punctuation token">&gt;</span></span>Event.type Example<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>title</span><span class="punctuation token">&gt;</span></span>
+
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
+        <span class="keyword token">var</span> currEvent<span class="punctuation token">;</span>
+        <span class="keyword token">function</span> <span class="function token">getEvtType</span><span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+            console<span class="punctuation token">.</span><span class="function token">group</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+            currEvent <span class="operator token">=</span> evt<span class="punctuation token">.</span>type<span class="punctuation token">;</span>
+            console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>currEvent<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+            document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"Etype"</span><span class="punctuation token">)</span><span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> currEvent<span class="punctuation token">;</span>
+
+            console<span class="punctuation token">.</span><span class="function token">groupEnd</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+        <span class="punctuation token">}</span>
+
+        <span class="comment token">//Évènements du clavier</span>
+        document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"keypress"</span><span class="punctuation token">,</span> getEvtType<span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">//[second]  </span>
+
+        document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"keydown"</span><span class="punctuation token">,</span> getEvtType<span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">//premier</span>
+        document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"keyup"</span><span class="punctuation token">,</span> getEvtType<span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">//troisième</span>
+
+        <span class="comment token">//Évènements de la souris</span>
+        document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"click"</span><span class="punctuation token">,</span> getEvtType<span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// troisième</span>
+
+        document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"mousedown"</span><span class="punctuation token">,</span> getEvtType<span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">//premier</span>
+        document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"mouseup"</span><span class="punctuation token">,</span> getEvtType<span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">//second</span>
+
+    </span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</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>Press any key or click the mouse to get the event type.<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>Event type: <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>span</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Etype<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">color</span><span class="punctuation token">:</span>red</span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>span</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h3 id="Specifications" name="Specifications">Résultat</h3>
+
+<p>{{EmbedLiveSample('Example')}}</p>
+
+<h2 id="Specifications" name="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('DOM WHATWG', '#dom-event-type', 'Event.type')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events', '#Events-Event-type', 'Event.type')}}</td>
+   <td>{{ Spec2('DOM2 Events') }}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Event.type")}}</p>
diff --git a/files/fr/web/api/eventlistener/index.html b/files/fr/web/api/eventlistener/index.html
new file mode 100644
index 0000000000..ed7d3a3dd6
--- /dev/null
+++ b/files/fr/web/api/eventlistener/index.html
@@ -0,0 +1,86 @@
+---
+title: EventListener
+slug: Web/API/EventListener
+tags:
+  - API
+  - DOM
+  - Evènement
+  - Interface
+  - Écouteurs
+translation_of: Web/API/EventListener
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p>L'interface <strong><code>EventListener</code></strong> représente un objet qui peut gérer un évènement distribué par un objet {{domxref("EventTarget")}}.</p>
+
+<div class="note">
+<p><strong>Note :</strong> En raison du besoin de compatibilité avec le contenu existant, <code>EventListener</code> accepte à la fois une fonction et un objet avec une fonction de propriété <code>handleEvent</code>. Ceci est illustré dans l'exemple ci-dessous.</p>
+</div>
+
+<h2 id="Method_overview" name="Method_overview">Propriétés</h2>
+
+<p><em>Cette interface n'implémente ni n'hérite d'aucune propriété.</em></p>
+
+<h2 id="Methods" name="Methods">Méthodes</h2>
+
+<p><em>Cette interface n'hérite d'aucune méthode.</em></p>
+
+<dl>
+ <dt>{{domxref("EventListener.handleEvent()")}}</dt>
+ <dd>une fonction qui est appelée lorsque se produit un événement du type spécifié.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</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>button</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>btn<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Click here!<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>
+
+<p> </p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">const</span> buttonElement <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'btn'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// Ajoute un gestionnaire pour l'évènement 'click' qui fournit une fonction de rappel.</span>
+<span class="comment token">// Chaque fois que l'élément est cliqué, une fenêtre contextuelle avec "Élément clické!"</span>
+<span class="comment token">// apparaîtra.</span>
+buttonElement<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="function token">alert</span><span class="punctuation token">(</span><span class="string token">'Element clicked through function!'</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="comment token">// Pour la compatibilité, un objet qui n'est pas une fonction avec une propriété `handleEvent` (<em>gestion d'évènement</em>)</span>
+<span class="comment token">// sera traitée exactement comme la fonction elle-même.</span>
+buttonElement<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> <span class="punctuation token">{</span>
+  handleEvent<span class="punctuation token">:</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="function token">alert</span><span class="punctuation token">(</span><span class="string token">'Element clicked through handleEvent property!'</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>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Example')}}</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">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#callbackdef-eventlistener', 'EventListener')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Pas de changement.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events', '#Events-EventListener', 'EventListener')}}</td>
+   <td>{{Spec2('DOM2 Events')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/api/eventsource/close/index.html b/files/fr/web/api/eventsource/close/index.html
new file mode 100644
index 0000000000..eb65e1817a
--- /dev/null
+++ b/files/fr/web/api/eventsource/close/index.html
@@ -0,0 +1,145 @@
+---
+title: EventSource.close()
+slug: Web/API/EventSource/close
+tags:
+  - API
+  - EventSource
+  - Evénement serveur
+  - Fonction
+  - Méthode
+  - Reference
+  - Server-sent events
+  - close
+translation_of: Web/API/EventSource/close
+---
+<div>{{APIRef('WebSockets API')}}</div>
+
+<p>La fonction <code><strong>close()</strong></code> de l'interface {{domxref("EventSource")}} coupe la connection, si existante, et affecte à la variable {{domxref("EventSource.readyState")}} la valeur <code>2</code> (closed).</p>
+
+<div class="note">
+<p><strong>Note</strong>: Si la connexion est déjà fermé, la fonction n'agit pas.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">eventSource.close();</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Aucun.</p>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Nulle.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var bouton = document.querySelector('button');
+var evtSource = new EventSource('sse.php');
+
+bouton.onclick = function() {
+  console.log('Connection fermée');
+  evtSource.close();
+}
+</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Vous pouvez trouver un exemple complet sur GitHub — voir <a href="https://github.com/mdn/dom-examples/tree/master/server-sent-events">Demo simple de SSE utilisant PHP.</a></p>
+</div>
+
+<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>{{SpecName('HTML WHATWG', "comms.html#dom-eventsource-close", "close()")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<ul>
+</ul>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>EventSource support</td>
+   <td>6</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("6.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>5</td>
+  </tr>
+  <tr>
+   <td>Disponible en workers dédiés et partagés<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("53.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>EventSource support</td>
+   <td>4.4</td>
+   <td>45</td>
+   <td>{{CompatNo}}</td>
+   <td>12</td>
+   <td>4.1</td>
+  </tr>
+  <tr>
+   <td>Disponible en workers dédiés et partagés<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("53.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] But <a href="https://github.com/w3c/ServiceWorker/issues/947">not service workers as yet</a>.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("EventSource")}}</li>
+</ul>
diff --git a/files/fr/web/api/eventsource/index.html b/files/fr/web/api/eventsource/index.html
new file mode 100644
index 0000000000..4a80f6f528
--- /dev/null
+++ b/files/fr/web/api/eventsource/index.html
@@ -0,0 +1,162 @@
+---
+title: EventSource
+slug: Web/API/EventSource
+tags:
+  - API
+  - Interface
+  - Reference
+translation_of: Web/API/EventSource
+---
+<div>{{APIRef("Websockets API")}}</div>
+
+<p>L'interface <strong><code>EventSource</code></strong> est utilisée afin de recevoir des évènements envoyés par le serveur. Elle se connecte à un serveur via HTTP et reçoit des évènements au format <code>text/event-stream</code> avant de clôturer la connexion.</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("EventSource.EventSource", "EventSource()")}}</dt>
+ <dd>Cette méthode crée un nouvel objet <code>EventSource</code> à partir de l'objet {{domxref("USVString")}} fourni.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Cette interface hérite également des propriétés fournies par l'objet parent : {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("EventSource.readyState")}} {{readonlyinline}}</dt>
+ <dd>Un nombre qui représente l'état de la connexion. Les valeurs possibles sont <code>CONNECTING</code> (<code>0</code>) (connexion en cours), <code>OPEN</code> (<code>1</code>) (connexion ouverte), ou <code>CLOSED</code> (<code>2</code>) (connexion fermée).</dd>
+ <dt>{{domxref("EventSource.url")}} {{readonlyinline}}</dt>
+ <dd>Un objet {{domxref("DOMString")}} qui représente l'URL de la source.</dd>
+ <dt>{{domxref("EventSource.withCredentials")}} {{readonlyinline}}</dt>
+ <dd>Un booléen qui indique si l'objet <code>EventSource</code> a été instancié avec les paramètres d'authentification CORS (<code>true</code>) ou non (<code>false</code>, la valeur par défaut).</dd>
+</dl>
+
+<h3 id="Gestionnaires_dévènement">Gestionnaires d'évènement</h3>
+
+<dl>
+ <dt>{{domxref("EventSource.onerror")}}</dt>
+ <dd>Un objet {{domxref("EventHandler")}} qui est appelé lorsqu'une erreur se produit et que l'évènement {{event("error")}} est envoyé à l'objet <code>EventSource</code>.</dd>
+ <dt>{{domxref("EventSource.onmessage")}}</dt>
+ <dd>Un objet {{domxref("EventHandler")}} qui est appelé lorsqu'un évènement {{event("message")}} est reçu (ce qui signifie qu'on a reçu un message de la source).</dd>
+ <dt>{{domxref("EventSource.onopen")}}</dt>
+ <dd>Un objet {{domxref("EventHandler")}} qui est appelé lorsqu'un évènement {{event("open")}} est reçu, ce qui indique que la connexion vient d'être ouverte.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Cette interface hérite également de méthodes grâce à son objet parent : {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("EventSource.close()")}}</dt>
+ <dd>Cette méthode ferme la connexion s'il y en a une en cours et change la valeur de l'attribut <code>readyState</code> en <code>CLOSED</code>. Si la connexion est déjà fermée, la méthode ne fait rien.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js notranslate">var evtSource = new EventSource('sse.php');
+var eventList = document.querySelector('ul');
+
+evtSource.onmessage = function(e) {
+  var newElement = document.createElement("li");
+
+  newElement.textContent = "message: " + e.data;
+  eventList.appendChild(newElement);
+}</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Un exemple complet est disponible sur GitHub, <a href="https://github.com/mdn/dom-examples/tree/master/server-sent-events">voir la démonstration SSE avec PHP</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('HTML WHATWG', "comms.html#the-eventsource-interface", "EventSource")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>6</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("6.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>5</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>workers</em> dédiés et partagés<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("53.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>45</td>
+   <td>{{CompatNo}}</td>
+   <td>12</td>
+   <td>4.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>workers</em> dédiés et partagés<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("53.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] <a href="https://github.com/w3c/ServiceWorker/issues/947">Pas encore disponible pour les <em>service workers</em></a>.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Server-sent_events/Using_server-sent_events" title="en/Server-sent events/Using server-sent events">Utiliser les évènements générés par le serveur</a></li>
+</ul>
diff --git a/files/fr/web/api/eventsource/onopen/index.html b/files/fr/web/api/eventsource/onopen/index.html
new file mode 100644
index 0000000000..2753fb2197
--- /dev/null
+++ b/files/fr/web/api/eventsource/onopen/index.html
@@ -0,0 +1,62 @@
+---
+title: EventSource.onopen
+slug: Web/API/EventSource/onopen
+tags:
+  - API
+  - Event Handler
+  - EventSource
+  - Propriété
+  - Reference
+translation_of: Web/API/EventSource/onopen
+---
+<div>{{APIRef('Server Sent Events')}}</div>
+
+<p>La propriété <code><strong>onopen</strong></code> de l'interface {{domxref("EventSource")}} est un {{domxref("EventHandler")}} qui est appelé lorsqu'un est évènement {{event("open")}} est reçu, indiquant que la connexion vient d'être établie.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">eventSource.onopen = function</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">evtSource.onopen = function() {
+  console.log("Connexion au serveur établie.");
+};</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Vous pouvez trouver un exemple complet sur GitHub — voir <a href="https://github.com/mdn/dom-examples/tree/master/server-sent-events">Simple SSE demo using PHP.</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">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "comms.html#handler-eventsource-onopen", "onopen")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<ul>
+</ul>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité sur cette page est généré à partir de données structurées. Si vous souhaitez éditer ces données, consultez la page <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.EventSource.onopen")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("EventSource")}}</li>
+</ul>
diff --git a/files/fr/web/api/eventtarget/addeventlistener/index.html b/files/fr/web/api/eventtarget/addeventlistener/index.html
new file mode 100644
index 0000000000..6d8e092656
--- /dev/null
+++ b/files/fr/web/api/eventtarget/addeventlistener/index.html
@@ -0,0 +1,775 @@
+---
+title: EventTarget.addEventListener()
+slug: Web/API/EventTarget/addEventListener
+tags:
+  - API
+  - Cible
+  - DOM
+  - Evènement
+  - Gestionnaires d'évènements
+  - JavaScript
+  - Méthode
+  - Méthodes
+  - Reference
+  - Réception d'Évènements
+  - attachEvent
+  - Écouteurs
+  - Écouteurs d'Évènements
+translation_of: Web/API/EventTarget/addEventListener
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p>La méthode <code><strong>addEventListener()</strong></code> d'{{domxref("EventTarget")}} installe une fonction à appeler chaque fois que l'événement spécifié est envoyé à la cible. Les cibles courantes sont un {{domxref("Element")}}, le {{domxref("Document")}} lui-même et une {{domxref("Window")}}, mais elle peut être tout objet prenant en charge les évènements (comme <code><a href="https://developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code>).</p>
+
+<p><code>addEventListener()</code> fonctionne en ajoutant une fonction, ou un objet implémentant {{domxref("EventListener")}}, à la liste des écouteurs d'évènements du type d'évènement spécifié dans la {{domxref("EventTarget")}} dans laquelle il est appelé.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><em>target</em>.addEventListener(<em>type</em>, <em>écouteur [, </em><em>options</em>]);
+<em>target</em>.addEventListener(<em>type</em>, <em>écouteur [, utiliserCapture</em>]);
+<em>target</em>.addEventListener(<em>type</em>, <em>écouteur [, utiliserCapture</em>, <em>veutNonFiables </em>{{Non-standard_inline}}]); // Gecko/Mozilla seulement</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><em><code>type</code></em> </dt>
+ <dd>Une chaîne sensible à la casse représentant le <a href="https://developer.mozilla.org/fr/docs/Web/Events">type d'évènement</a> à écouter.</dd>
+ <dt><code><var>écouteur</var></code></dt>
+ <dd>L'objet qui recevra une notification (un objet qui implémente l'interface {{domxref("Event")}}) lorsqu'un évènement du type spécifié se produit. Cela doit être un objet implémentant l'interface {{domxref("EventListener")}} ou une <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Fonctions" title="fr/Référence_de_JavaScript_1.5_Core/Fonctions">fonction</a> JavaScript. Voir {{anch("The event listener callback")}} pour des détails sur le rappel lui-même.</dd>
+ <dt><code><var>options</var></code> {{optional_inline}}</dt>
+ <dd>Un objet options spécifie les caractéristiques de l'écouteur d'évènements. Les options disponibles sont :
+ <dl>
+  <dt><code>capture</code></dt>
+  <dd>Un {{jsxref("Boolean")}} indiquant que les évènements de ce type seront distribués à l'<code><var>écouteur</var></code> enregistré avant d'être distribués à tout <code>EventTarget</code> située en-dessous dans l'arborescence DOM.</dd>
+  <dt><code>once</code></dt>
+  <dd>Un {{jsxref("Boolean")}} indiquant que l'<em><code>écouteur</code></em> doit être invoqué au plus une fois après avoir été ajouté. Si <code>true</code> (<em>vrai</em>), l'<em><code>écouteur</code></em> sera automatiquement supprimé après son appel.</dd>
+  <dt><code>passive</code></dt>
+  <dd>Un {{jsxref("Boolean")}} qui, si <code>true</code>, indique que la fonction spécifiée par l'<em><code>écouteur</code></em> n'appellera jamais {{domxref("Event.preventDefault", "preventDefault()")}}. Si un écouteur passif appelle <code>preventDefault()</code>, l'agent utilisateur ne fera rien d'autre que de générer un avertissement sur la console. Voir {{anch("Amélioration des performances de défilement avec les écouteurs passifs")}} pour en apprendre davantage.</dd>
+  <dt>{{non-standard_inline}} <code>mozSystemGroup</code></dt>
+  <dd>Un {{jsxref("Boolean")}} indiquant que l'écouteur doit être ajouté au groupe système. Disponible seulement pour le code s'exécutant dans XBL ou dans le {{glossary("chrome")}} du navigateur Firefox.</dd>
+ </dl>
+ </dd>
+ <dt><code><var>utiliserCapture</var></code> {{optional_inline}}</dt>
+ <dd>Un  {{jsxref("Boolean")}} indiquant si les événements de ce type seront distribués à l'<em><code>écouteur</code></em> enregistré <em>avant</em> d'être distribués à toute <code>EventTarget</code> (cible d'évènement) située en-dessous dans l'arborescence DOM. Les événements qui se propagent vers le haut dans l'arborescence ne déclencheront pas un écouteur indiqué comme utilisant la capture. La propagation et la capture d'événements sont deux manières de propager des événements qui se produisent dans un élément imbriqué dans un autre, lorsque les deux éléments ont enregistré un gestionnaire pour cet événement. Le mode de propagation de l'évènement détermine l'ordre dans lequel les éléments reçoivent l'événement. Voir les <a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow">DOM Level 3 Events</a> et <a href="http://www.quirksmode.org/js/events_order.html#link4">JavaScript Event order</a> pour une explication détaillée. Si non spécifié, <em><code>useCapture</code></em> a <code>false</code> pour valeur par défaut.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note : </strong>pour les écouteurs attachés à la cible d'évènement, l'évènement se trouve dans la phase cible, plutôt que dans les phases de propagation et de capture. Les évènements dans la phase cible déclencheront tous les écouteurs d'un élément dans l'ordre où ils ont été enregistrés, indépendamment du paramètre <em><code>useCapture</code></em>.</p>
+</div>
+
+<div class="note">
+<p><strong>Note :</strong> <em><code>useCapture</code></em> n'est pas toujours facultatif. Idéalement, vous devriez l'inclure pour une compatibilité de navigateurs la plus large possible.</p>
+</div>
+
+<dl>
+ <dt><em><code>veutNonFiables</code></em> {{Non-standard_inline}}</dt>
+ <dd>Un paramètre spécifique à Firefox (Gecko). Si <code>true</code>, l'écouteur reçoit les événements synthétiques distribués par le contenu web (le défaut est <code>false</code> pour le {{glossary("chrome")}} du navigateur et <code>true</code> pour les pages web ordinaires). Ce paramètre est utile pour le code qui se trouve dans les compléments, ainsi que pour le navigateur lui-même.</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p><code>undefined</code></p>
+
+<h2 id="Notes_dutilisation">Notes d'utilisation</h2>
+
+<h3 id="Le_rappel_de_lécouteur_dévènement">Le rappel de l'écouteur d'évènement</h3>
+
+<p>L'écouteur d'évènement peut être spécifié, soit comme une fonction de rappel, soit comme un objet qui implémente {{domxref ("EventListener")}}, dont la méthode {{domxref ("EventListener.handleEvent", "handleEvent ()")}} sert de fonction de rappel.</p>
+
+<p>La fonction de rappel a elle-même les mêmes paramètres et la même valeur de retour que la méthode <code>handleEvent()</code> ; c'est-à-dire que le rappel accepte un seul paramètre : un objet basé sur {{domxref ("Event")}} décrivant l'événement qui s'est produit, et il ne retourne rien.</p>
+
+<p>Par exemple, un rappel de gestionnaire d'événements pouvant être utilisé pour gérer à la fois {{domxref("Element/fullscreenchange_event", "fullscreenchange")}} et {{domxref("Element/fullscreenerror_event", "fullscreenerror")}} peut ressembler à ceci :</p>
+
+<pre class="brush: js line-numbers  language-js notranslate">function gestionnaireDEvenement(evenement) {
+  if (evenement.type == fullscreenchange) {
+    /* gérer un passage en plein écran */
+  } else /* fullscreenerror */ {
+    /* gérer une erreur de passage en plein écran */
+  }
+}</pre>
+
+<h3 id="Détection_de_la_prise_en_charge_des_options_en_toute_sécurité">Détection de la prise en charge des options en toute sécurité</h3>
+
+<p>Dans les anciennes versions de la spécification DOM, le troisième paramètre de <code>addEventListener()</code> était une valeur booléenne indiquant s'il fallait ou non utiliser la capture. Au fil du temps, il est devenu clair que davantage d'options étaient nécessaires. Plutôt que d'ajouter davantage de paramètres à la fonction (ce qui complique énormément les choses lors du traitement des valeurs optionnelles), le troisième paramètre a été changé en un objet pouvant contenir diverses propriétés définissant les valeurs des options pour configurer le processus de suppression de l'écouteur d'événement.</p>
+
+<p>Du fait que les navigateurs anciens (ainsi que certains navigateurs "pas si vieux") supposent toujours que le troisième paramètre est un Boolean, vous devez construire votre code de façon à gérer ce scénario intelligemment. Vous pouvez le faire en utilisant la détection de fonctionnalité pour chacune des options qui vous intéresse.</p>
+
+<p>Par exemple, si vous voulez vérifier l'option <code>passive</code> :</p>
+
+<pre class="brush: js line-numbers  language-js notranslate">var passiveSupportee = false;
+
+try {
+  var options = Object.defineProperty({}, "passive", {
+    get: function() {
+      passiveSupportee = true;
+    }
+  });
+
+  window.addEventListener("test", options, options);
+  window.removeEventListener("test", options, options);
+} catch(err) {
+  passiveSupportee = false;
+}</pre>
+
+<p>Cela crée un objet <em><code>options</code></em> avec une fonction accesseur pour la propriété <code>passive</code> ; l'accesseur initialise un indicateur, <code>passiveSupportee</code>, à <code>true</code> si elle est appelée. Cela signifie que si le navigateur vérifie la valeur de la propriété <code>passive</code> dans l'objet <em><code>options</code></em>, <code>passiveSupportee</code> sera initialisé à <code>true</code> ; sinon, il restera <code>false</code>. Nous appelons alors <code>addEventListener()</code> pour installer un faux gestionnaire d'événements, en spécifiant ces options, se sorte qu'elles soient vérifiées si le navigateur reconnaît un objet comme troisième paramètre. Ensuite, nous appelons <code>removeEventListener()</code> pour faire le ménage après notre passage. (Notez que <code>handleEvent()</code> est ignoré dans les écouteurs d'événements qui ne sont pas appelés).</p>
+
+<p>Vous pouvez vérifier de cette façon si une option quelconque est supportée. Ajoutez simplement un accesseur pour cette option en utilisant un code similaire à celui montré ci-dessus.</p>
+
+<p>Ensuite, lorsque vous voulez créer un écouteur d'événements réel qui utilise les options en question, vous pouvez faire quelque chose comme ce qui suit :</p>
+
+<pre class="brush: js line-numbers  language-js notranslate">unElement.addEventListener("mouseup", gererMouseUp, passiveSupportee
+                               ? { passive: true } : false);</pre>
+
+<p>Ici, nous ajoutons un écouteur pour l'événement {{domxref("Element/mouseup_event", "mouseup")}} dans l'élément <em><code>unElement</code></em>. Pour le troisième paramètre, si <em><code>passiveSupportee</code></em> est <code>true</code>, nous spécifions un objet <em><code>options</code></em> avec <code>passive</code> initialisée à <code>true</code> ; sinon, nous savons que nous devons passer un Boolean, et nous passons <code>false</code> comme valeur du paramètre <em><code>useCapture</code></em>.</p>
+
+<p>Si vous préférez, vous pouvez utiliser une bibliothèque tierce comme <a href="https://modernizr.com/docs">Modernizr</a> ou <a href="https://github.com/rafrex/detect-it">Detect It</a> pour faire ce test pour vous.</p>
+
+<p>Vous pouvez en apprendre davantage dans l'article à propos des <code><a href="https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md#feature-detection">EventListenerOptions</a></code>  du <a href="https://wicg.github.io/admin/charter.html">Groupe Web Incubator Community</a>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Ajouter_un_écouteur_simple">Ajouter un écouteur simple</h3>
+
+<p>Cet exemple montre comment utiliser <code>addEventListener()</code> pour surveiller les clics de souris sur un élément.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html line-numbers  language-html notranslate">&lt;table id="aLExterieur"&gt;
+    &lt;tr&gt;&lt;td id="t1"&gt;un&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td id="t2"&gt;deux&lt;/td&gt;&lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js line-numbers  language-js notranslate">// Fonction pour changer le contenu de t2
+function modifierTexte() {
+  var t2 = document.getElementById("t2");
+  if (t2.firstChild.nodeValue == "trois") {
+    t2.firstChild.nodeValue = "deux";
+  } else {
+    t2.firstChild.nodeValue = "trois";
+  }
+}
+
+// Ajouter un écouteur d'évènements à la table
+var el = document.getElementById("aLExterieur");
+el.addEventListener("click", modifierTexte, false);</pre>
+
+<p>Dans ce code, <code>modifierTexte()</code> est un écouteur pour les évènements <code>click</code> enregistré en utilisant <code>addEventListener()</code>. Un clic n'importe où sur la table se propagera jusqu'au gestionnaire et exécutera <code>modifierTexte()</code>.</p>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Add_a_simple_listener')}}</p>
+
+<h3 id="Écouteur_dévènement_avec_une_fonction_anonyme">Écouteur d'évènement avec une fonction anonyme</h3>
+
+<p>Ici, nous allons voir comment utiliser une fonction anonyme pour passer des paramètres à l'écouteur d'événements.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html line-numbers  language-html notranslate">&lt;table id="aLExterieur"&gt;
+    &lt;tr&gt;&lt;td id="t1"&gt;un&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td id="t2"&gt;deux&lt;/td&gt;&lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h4 id="JavaScript_2">JavaScript</h4>
+
+<pre class="brush: js line-numbers  language-js notranslate">// Fonction pour changer le contenu de t2
+function modifierTexte(nouveau_texte) {
+  var t2 = document.getElementById("t2");
+  t2.firstChild.nodeValue = nouveau_texte;
+}
+
+// Fonction pour ajouter un écouteur d'évènement à la table
+var el = document.getElementById("aLExterieur");
+el.addEventListener("click", function(){modifierTexte("quatre")}, false);</pre>
+
+<p>Notez que l'écouteur est une fonction anonyme encapsulant le code qui peut à son tour envoyer des paramètres à la fonction <code>modifierTexte()</code>, qui est responsable de la réponse effective à l'événement.</p>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample('Event_listener_with_anonymous_function')}}</p>
+
+<h3 id="Écouteur_dévènement_avec_une_fonction_fléchée">Écouteur d'évènement avec une fonction fléchée</h3>
+
+<p>Cet exemple montre un écouteur d'événement simple implémenté en utilisant la notation de fonction fléchée.</p>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html line-numbers  language-html notranslate">&lt;table id="aLExterieur"&gt;
+    &lt;tr&gt;&lt;td id="t1"&gt;un&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td id="t2"&gt;deux&lt;/td&gt;&lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h4 id="JavaScript_3">JavaScript</h4>
+
+<pre class="brush: js line-numbers  language-js notranslate">// Fonction pour changer le contenu de t2
+function modifierTexte(nouveau_texte) {
+  var t2 = document.getElementById("t2");
+  t2.firstChild.nodeValue = nouveau_texte;
+}
+
+// Ajouter un écouteur d'évènements à la table avec une fonction fléchée
+var el = document.getElementById("aLExterieur");
+el.addEventListener("click", () =&gt; { modifierTexte("quatre"); }, false);</pre>
+
+<h4 id="Résultat_3">Résultat</h4>
+
+<p>{{EmbedLiveSample('Event_listener_with_an_arrow_function')}}</p>
+
+<p>Notez que si les fonctions anonymes et fléchées sont similaires, elles ont des liaisons <code>this</code> différentes. Alors que les fonctions anonymes (et toutes les fonctions JavaScript traditionnelles) créent leurs propres liaisons <code>this</code>, les fonctions fléchées héritent la liaison<code> this</code> de la fonction contenante.</p>
+
+<p>Cela signifie que les variables et constantes disponibles pour la fonction contenante sont aussi disponibles pour le gestionnaire d'évènements lors de l'utilisation d'une fonction fléchée.</p>
+
+<h3 id="Exemple_dutilisation_des_options">Exemple d'utilisation des options</h3>
+
+<h4 id="HTML_4">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div class="exterieur"&gt;
+  extérieur, once &amp; none-once
+  &lt;div class="milieu" target="_blank"&gt;
+    milieu, capture &amp; none-capture
+    &lt;a class="interieur1" href="https://www.mozilla.org" target="_blank"&gt;
+      intérieur1, passive &amp; preventDefault (ce qui n'est pas autorisé)
+    &lt;/a&gt;
+    &lt;a class="interieur2" href="https://developer.mozilla.org/" target="_blank"&gt;
+      intérieur2, none-passive &amp; preventDefault (nouvelle page non ouverte)
+    &lt;/a&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">.exterieur, .milieu, .interieur1, .interieur2 {
+  display: block;
+  width:   520px;
+  padding: 15px;
+  margin:  15px;
+  text-decoration: none;
+}
+.exterieur {
+  border: 1px solid red;
+  color:  red;
+}
+.milieu {
+  border: 1px solid green;
+  color:  green;
+  width:  460px;
+}
+.interieur1, .interieur2 {
+  border: 1px solid purple;
+  color:  purple;
+  width:  400px;
+}
+</pre>
+
+<h4 id="JavaScript_4">JavaScript</h4>
+
+<pre class="brush: js notranslate">const exterieur  = document.querySelector('.exterieur');
+const milieu     = document.querySelector('.milieu');
+const interieur1 = document.querySelector('.interieur1');
+const interieur2 = document.querySelector('.interieur2');
+
+const capture = {
+  capture : true
+};
+const noneCapture = {
+  capture : false
+};
+const once = {
+  once : true
+};
+const noneOnce = {
+  once : false
+};
+const passive = {
+  passive : true
+};
+const nonePassive = {
+  passive : false
+};
+
+exterieur .addEventListener('click', onceHandler, once);
+exterieur .addEventListener('click', noneOnceHandler, noneOnce);
+milieu    .addEventListener('click', captureHandler, capture);
+milieu    .addEventListener('click', noneCaptureHandler, noneCapture);
+interieur1.addEventListener('click', passiveHandler, passive);
+interieur2.addEventListener('click', nonePassiveHandler, nonePassive);
+
+function onceHandler(evenement) {
+  alert('exterieur, once');
+}
+function noneOnceHandler(evenement) {
+  alert('exterieur, none-once, default');
+}
+function captureHandler(evenement) {
+  //evenement.stopImmediatePropagation();
+  alert('milieu, capture');
+}
+function noneCaptureHandler(evenement) {
+  alert('milieu, none-capture, default');
+}
+function passiveHandler(evenement) {
+  // Impossible d'utiliser preventDefault à l'intérieur de l'invocation d'un écouteur d'évènements passif.
+  evenement.preventDefault();
+  alert('interieur1, passive, nouvelle page ouverte');
+}
+function nonePassiveHandler(evenement) {
+  evenement.preventDefault();
+  //evenement.stopPropagation();
+  alert('interieur2, none-passive, défaut, nouvelle page non ouverte');
+}
+</pre>
+
+<h4 id="Résultat_4">Résultat</h4>
+
+<p>Cliquer les conteneurs extérieur, milieu, intérieurs respectivement pour voir comment les options fonctionnent.</p>
+
+<p>{{ EmbedLiveSample('Example_of_options_usage', 600, 310, '', 'Web/API/EventTarget/addEventListener') }}</p>
+
+<p>Avant d'utiliser une valeur particulière dans l'objet <code><var>options</var></code>, c'est une bonne idée que de s'assurer que le navigateur de l'utilisateur la prend en charge, du fait qu'elles sont un ajout que tous les navigateurs n'ont pas pris en charge historiquement. Voir {{anch("Safely detecting option support")}} pour les détails.</p>
+
+<h2 id="Autres_notes">Autres notes</h2>
+
+<h3 id="Pourquoi_utiliser_addEventListener">Pourquoi utiliser addEventListener() ?</h3>
+
+<p><code>addEventListener</code> est la manière d'enregistrer un écouteur d'évènements telle que spécifiée dans le DOM du W3C. Ses avantages sont les suivants :</p>
+
+<ul>
+ <li>Elle permet d'ajouter plus d'un seul gestionnaire pour un évènement. Cela peut s'avérer particulièrement utile pour les bibliothèques {{Glossary("AJAX")}}, les modules JavaScript ou tout autre sorte de code qui a besoin de fonctionner correctement avec d'autres bibliothèques/extensions.</li>
+ <li>Elle donne un contrôle plus fin sur la phase d'activation de l'écouteur (capture contre propagation)</li>
+ <li>Elle fonctionne avec tout élément DOM, pas seulement avec les éléments HTML.</li>
+</ul>
+
+<p>L'<a href="https://wiki.developer.mozilla.org/fr/docs/Web/API/EventTarget/addEventListener$edit#Older_way_to_register_event_listeners">ancienne manière alternative</a> d'enregistrer des évènements est décrite ci-dessous.</p>
+
+<h3 id="Ajout_dun_écouteur_pendant_la_distribution_dun_évènement">Ajout d'un écouteur pendant la distribution d'un évènement</h3>
+
+<p>Si un {{domxref("EventListener")}} est ajouté à une {{domxref("EventTarget")}} pendant qu'elle traite un évènement, cet évènement ne déclenchera l'écouteur. Cependant, le même écouteur pourra être déclenché à une étape ultérieure du flux d'évènements, telle que la phase de propagation.</p>
+
+<h3 id="Écouteurs_dévènements_identiques_multiples">Écouteurs d'évènements identiques multiples</h3>
+
+<p>Si des <code>EventListener</code>s identiques multiples sont enregistrés sur la même <code>EventTarget</code> avec les mêmes paramètres, les instances dupliquées sont supprimées. Elles ne provoqueront pas un appel en double de l'<code>EventListener</code>, et elles n'ont pas besoin d'être enlevées avec la méthode {{domxref("EventTarget.removeEventListener()", "removeEventListener()")}}.</p>
+
+<p>Notez toutefois que lors de l'utilisation d'une fonction anonyme comme gestionnaire, de tels écouteurs ne seront PAS identiques, du fait que les fonctions anonymes ne sont pas identiques, même si définies en utilisant le MÊME code source inchangé, simplement appelé répétitivement, même dans une boucle.</p>
+
+<p>Cependant, le fait de définir répétitivement la même fonction nommée dans de tels cas peut être davantage problématique. (Voir <a href="https://wiki.developer.mozilla.org/fr/docs/Web/API/EventTarget/addEventListener$edit#Memory_issues">Problèmes de mémoire</a> ci-dessous.)</p>
+
+<h3 id="La_valeur_de_this_à_lintérieur_du_gestionnaire">La valeur de "this" à l'intérieur du gestionnaire</h3>
+
+<p>Il est souvent souhaitable de référencer l'élément sur lequel le gestionnaire d'évènements a été déclenché, comme lors de l'utilisation d'un gestionnaire générique pour un ensemble d'éléments similaires.</p>
+
+<p>Lorsqu'une fonction gestionnaire est attachée à un élément en utilisant <code>addEventListener()</code>, la valeur de {{jsxref("Operators/this","this")}} à l'intérieur du gestionnaire est une référence à l'élément. C'est la même valeur que celle de la propriété <code>currentTarget</code> de l'argument évènement qui est passé au gestionnaire.</p>
+
+<pre class="brush: js notranslate">mon_element.addEventListener('click', function (e) {
+  console.log(this.className)           // journalise le className de mon_element
+  console.log(e.currentTarget === this) // journalise `true`
+})
+</pre>
+
+<p>Pour mémoire, les <a href="https://wiki.developer.mozilla.org/fr-FR/docs/Web/JavaScript/Reference/Functions/Arrow_functions#No_separate_this">fonctions fléchées n'ont pas leur propre contexte <code>this</code></a>.</p>
+
+<pre class="brush: js notranslate">mon_element.addEventListener('click', (e) =&gt; {
+  console.log(this.className)           // ATTENTION : `this` n'est pas `mon_element`
+  console.log(e.currentTarget === this) // journalise `false`
+})</pre>
+
+<p>Si un attribut d'évènement (par exemple, {{domxref("GlobalEventHandlers.onclick", "onclick")}}) est spécifié dans un élément dans le source HTML, le code JavaScript dans la valeur de l'attribut est effectivement encapsulé dans une fonction gestionnaire qui lie la valeur de <code>this</code> d'une manière cohérente avec l'<code>addEventListener()</code> ; une occurrence de <code>this</code> dans le code représente une référence à l'élément.</p>
+
+<pre class="brush: html notranslate">&lt;table id="ma_table" onclick="console.log(this.id);"&gt;&lt;!-- `this` fait référence à la table ; journalise 'ma_table' --&gt;
+  ...
+&lt;/table&gt;</pre>
+
+<p>Notez que la valeur de <code>this</code> à l'intérieur d'une fonction, <em>appelée</em> par le code dans la valeur de l'attribut, se comporte selon les <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this">règles standard</a>. Ceci est illustré dans l'exemple suivant :</p>
+
+<pre class="brush: html notranslate">&lt;script&gt;
+  function journaliserID() { console.log(this.id); }
+&lt;/script&gt;
+&lt;table id="ma_table" onclick="journaliserID();"&gt;&lt;!-- lorsqu'appelée, `this` fera référence à l'objet global --&gt;
+  ...
+&lt;/table&gt;</pre>
+
+<p>La valeur de <code>this</code> à l'intérieur de <code>journaliserID</code> est une référence à l'objet global {{domxref("Window")}} (ou <code>undefined</code> dans le cas du <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a>).</p>
+
+<h4 id="Spécification_de_this_en_utilisant_bind">Spécification de "this" en utilisant bind()</h4>
+
+<p>La méthode {{jsxref("Function.prototype.bind()")}} vous permet de spécifier la valeur qui doit être utilisée comme <code>this</code> pour tous les appels à une fonction donnée. Cette méthode vous permet de contourner facilement les problèmes dans lesquels ce que <code>this</code> sera n'est pas clair, en fonction du contexte depuis lequel votre fonction a été appelée. Notez toutefois que vous aurez besoin de conserver quelque part une référence à l'écouteur, de façon à pouvoir le supprimer ultérieurement.</p>
+
+<p>Ceci est un exemple avec et sans <code>bind()</code> :</p>
+
+<pre class="brush: js line-numbers  language-js notranslate">var QuelqueChose = function(element) {
+  // |this| est un objet nouvellement créé
+  this.name = 'Quelque Chose de Bon';
+  this.onclick1 = function(evenement) {
+    console.log(this.name); // undefined, du fait que |this| est l'élément
+  };
+  this.onclick2 = function(evenement) {
+    console.log(this.name); // 'Quelque Chose de Bon', du fait que |this| est lié à l'objet nouvellement créé
+  };
+  element.addEventListener('click', this.onclick1, false);
+  element.addEventListener('click', this.onclick2.bind(this), false); // Astuce
+}
+var q = new QuelqueChose(document.body);</pre>
+
+<p>Une autre solution consiste à utiliser une fonction spéciale appelée <code>handleEvent()</code> to intercepter tous les évènements :</p>
+
+<pre class="brush: js notranslate">const QuelqueChose = function(element) {
+  // |this| est un objet nouvellement créé
+  this.name = 'Quelque Chose de Bon';
+  this.<code>handleEvent</code> = function(evenement) {
+    console.log(this.name); // 'Quelque Chose de Bon', du fait que this est lié à l'objet nouvellement créé
+    switch(evenement.type) {
+      case 'click':
+        // un peu de code ici...
+        break;
+      case 'dblclick':
+        // un peu de code ici...
+        break;
+    }
+  };
+
+  // Notez que les écouteurs dans ce cas sont |this|, pas this.<code>handleEvent</code>
+  element.addEventListener('click', this, false);
+  element.addEventListener('dblclick', this, false);
+
+  // Vous pouvez enlever correctement les écouteurs
+  element.removeEventListener('click', this, false);
+  element.removeEventListener('dblclick', this, false);
+}
+const q = new QuelqueChose(document.body);
+</pre>
+
+<p>Une autre manière de gérer la référence à <em>this</em> est de passer à l'<code>EventListener</code> une fonction qui appelle la méthode de l'objet qui contient les champs auxquels on a besoin d'accéder :</p>
+
+<pre class="brush: js notranslate">class UneClasse {
+
+  constructor() {
+    this.name = 'Quelque Chose de Bon';
+  }
+
+  enregistrer() {
+    const cela = this;
+    window.addEventListener('keydown', function(e) { cela.uneMethode(e); });
+  }
+
+  uneMethode(e) {
+    console.log(this.name);
+    switch(e.keyCode) {
+      case 5:
+        // un peu de code ici...
+        break;
+      case 6:
+        // un peu de code ici...
+        break;
+    }
+  }
+
+}
+
+const monObjet = new UneClass();
+monObjet.enregistrer();</pre>
+
+<h3 id="Passer_des_données_à_et_depuis_un_écouteur_dévènements">Passer des données à et depuis un écouteur d'évènements</h3>
+
+<p>On peut avoir l'impression que les écouteurs d'évènements sont comme des îles et qu'il est extrêmement difficile de leur passer des données quelconques, encore moins d'en récupérer après qu'ils ont été exécutés. Les écouteurs d'évènements ne prennent qu'un seul argument, l'<a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_objects">Event Object</a>, qui est passé automatiquement à l'écouteur, et la valeur retournée est ignorée. Donc à nouveau, comment pouvons-nous leur passer des données et en récupérer ? Il y a certain nombre de bonnes méthodes pour ce faire.</p>
+
+<h4 id="Passer_des_données_à_un_écouteur_dévènement_en_utilisant_this">Passer des données à un écouteur d'évènement en utilisant "this"</h4>
+
+<p>Comme mentionné <a href="https://wiki.developer.mozilla.org/fr/docs/Web/API/EventTarget/addEventListener$edit#Specifying_this_using_bind">ci-dessus</a>, vous pouvez utiliser <code>Function.prototype.bind()</code> pour passer une valeur à un écouteur d'évènements via la variable de référence <code>this</code>.</p>
+
+<pre class="brush: js notranslate">const monBouton = document.getElementById('id-de-mon-bouton');
+const uneChaine = 'Données';
+
+monButton.addEventListener('click', function () {
+  console.log(this);  // Valeur Attendue : 'Données'
+}.bind(uneChaine));
+</pre>
+
+<p>Cette méthode est appropriée quand vous n'avez pas besoin de savoir sur quel élément HTML l'écouteur d'évènement a été déclenché par programme depuis l'intérieur de l'écouteur d'évènements. Le principal avantage de cette façon de faire est que l'écouteur d'évènements reçoit les données sensiblement de la même manière qu'il le ferait si vous les lui passiez au moyen de sa liste d'arguments.</p>
+
+<h4 id="Passer_des_données_à_un_écouteur_dévènements_en_utilisant_une_propriété_de_portée_externe">Passer des données à un écouteur d'évènements en utilisant une propriété de portée externe</h4>
+
+<p>Quand une portée externe contient une déclaration de variable (avec <code>const</code>, <code>let</code>), toutes les fonctions internes déclarées dans cette portée ont accès à cette variable (voir <a href="https://wiki.developer.mozilla.org/fr-FR/docs/Glossary/Function#Different_types_of_functions">ici</a> pour des informations sur les fonctions externes/internes, et <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var#Implicit_globals_and_outer_function_scope">ici</a> pour des informations sur la portée des variables). Par conséquent, une des façons les plus simples pour accéder à des données depuis l'extérieur d'un écouteur d'évènements est de le rendre accessible dans la portée dans laquelle l'écouteur d'évènement est déclaré.</p>
+
+<pre class="brush: js notranslate">const monButton = document.getElementById('id-de-mon-bouton');
+const uneChaine = 'Données';
+
+monButton.addEventListener('click', function() {
+  console.log(uneChaine);  // Valeur Attendue : 'Données'
+
+  uneChaine = 'Encore des Données';
+});
+
+console.log(uneChaine);  // Valeur Attendue : 'Données' (ne produira jamais 'Encore des Données')
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Bien que les portées internes aient accès aux variables <code>const</code> et <code>let</code> depuis les portées externes, vous ne pouvez pas vous attendre à ce que des changements quelconques de ces variables soient accessibles après la définition de l'écouteur d'évènements, à l'intérieur de la même portée externe. Pourquoi ? Simplement parce qu'au moment où l'écouteur d'évènements s'exécutera, la portée dans laquelle il a été défini pourra avoir déjà fini de s'exécuter.</p>
+</div>
+
+<h4 id="Passer_des_données_à_et_depuis_un_écouteur_dévènements_en_utilisant_des_objets">Passer des données à et depuis un écouteur d'évènements en utilisant des objets</h4>
+
+<p>A l'inverse de la plupart des fonctions en JavaScript, les objets sont conservés en mémoire aussi longtemps qu'une variable les référençant existe en mémoire. Ceci, et le fait que les objets peuvent avoir des propriétés, et qu'ils peuvent être passés alentour par référence, en fait des candidats plausibles pour partager des données entre les portées. Explorons cela.</p>
+
+<div class="note">
+<p><strong>Note :</strong> les fonctions en JavaScript sont en fait des objets. (Par conséquent, elles aussi peuvent avoir des propriétés, et seront conservées en mémoire même après qu'elles ont fini de s'exécuter, si elles ont été affectées à une variable qui persiste en mémoire.)</p>
+</div>
+
+<p>Du fait que les propriétés d'un objet peuvent être utilisées pour stocker des données en mémoire aussi longtemps qu'une variable référençant l'objet existe en mémoire, vous pouvez en fait les utiliser pour passer des données dans un écouteur d'évènements, et retourner tous les changements aux données après que l'écouteur d'évènements s'est exécuté. Considérez cet exemple :</p>
+
+<pre class="brush: js notranslate">const monBouton = document.getElementById('id-de-mon-bouton');
+const unObjet = {unePropriete: 'Données'};
+
+monButton.addEventListener('click', function() {
+  console.log(unObjet.unePropriete);  // Valeur Attendue : 'Données'
+
+  unObjet.unePropriete = 'Encore des Données';  // Changer la valeur
+});
+
+window.setInterval(function() {
+  if (unObjet.unePropriete === 'Encore des Données') {
+    console.log('Encore des Données: Vrai');
+    unObjet.unePropriete = 'Données';  // Réinitialiser la valeur pour attendre la prochaine exécution de l'évènement
+  }
+}, 5000);
+</pre>
+
+<p>Dans cet exemple, même si la portée dans laquelle à la fois l'écouteur d'évènements et la fonction d'intervalle ont été définis a fini de s'exécuter avant que la valeur originale de <code>unObjet.unePropriete</code> ait changé, du fait que <code>someObject</code> persiste en mémoire (par <em>référence</em>) à la fois dans l'écouteur d'évènements et dans la fonction d'intervalle, tous deux ont accès aux mêmes données (i.e. quand l'un change les données, l'autre peut répondre aux changements).</p>
+
+<div class="note">
+<p><strong>Note :</strong> les objets sont stockés dans les variables par référence, ce qui signifie que seul l'emplacement en mémoire des données elles-mêmes est stocké dans la variable. Entre autres choses, cela signifie que les variables qui "stockent" des objets peuvent en fait affecter d'autres variables qui se voient affecter ("stocker") la même référence d'objet. Quand deux variables référencent le même objet (par ex., <code>let a = b = {unePropriete: 'Ouais'};</code>), le fait de changer les données dans l'une ou l'autre des variables affectera l'autre.</p>
+</div>
+
+<div class="note">
+<p><strong>Note :</strong> du fait que les objets sont stockés dans les variables par référence, vous pouvez retourner un objet depuis une fonction pour le maintenir en vie (le conserver en mémoire, de sorte que vous n'en perdiez pas les données) après que cette fonction a fini de s'exécuter.</p>
+</div>
+
+<h3 id="Héritage_Internet_Explorer_et_attachEvent">  Héritage Internet Explorer et attachEvent</h3>
+
+<p>Dans les versions Internet Explorer versions avant IE 9, vous deviez utiliser {{domxref("EventTarget.attachEvent", "attachEvent()")}}, plutôt que la méthode standard <code>addEventListener</code>. Pour IE, nous modifions l'exemple précédent en :</p>
+
+<pre class="brush: js line-numbers  language-js notranslate">if (el.addEventListener) {
+  el.addEventListener('click', modifierTexte, false);
+} else if (el.attachEvent)  {
+  el.attachEvent('onclick', modifierTexte);
+}</pre>
+
+<p>Il y a un inconvénient avec <code>attachEvent</code> : la valeur de <code>this</code> sera une référence à l'objet <code>window</code>, au lieu de l'élément sur lequel il a été déclenché.</p>
+
+<p>La méthode <code>attachEvent()</code> peut être couplée avec l'évènement <code>onresize</code> pour détecter que certains éléments dans une page web ont été redimensionnés. L'évènement propriétaire <code>mselementresize</code>, lorsqu'il est couplé avec la méthode <code>addEventListener</code> d'enregistrement des gestionnaires d'évènements, fournit une fonctionnalité similaire à celle de <code>onresize</code>, se déclenchant quand certains éléments HTML sont redimensionnés.</p>
+
+<h3 id="Émulation">Émulation</h3>
+
+<p>Vous pouvez contourner le fait que <code>addEventListener()</code>, <code>removeEventListener()</code>, {{domxref("Event.preventDefault()")}} et {{domxref("Event.stopPropagation()")}} ne sont pas pris en charge par IE 8 en utilisant le code suivant au début de votre script. Le code prend en charge l'utilisation de <code>handleEvent()</code>, et aussi l'évènement {{event("DOMContentLoaded")}}.</p>
+
+<div class="note">
+<p><strong>Note : </strong><code>useCapture</code> n'est pas pris en charge, du fait qu'IE 8 n'a aucune méthode alternative. Le code suivant ajoute seulement la prise en charge d'IE 8. Cette émulation pour IE 8 fonctionne uniquement en mode standard : une déclaration <code>doctype</code> est requise.</p>
+</div>
+
+<pre class="brush: js line-numbers  language-js notranslate">(function() {
+  if (!Event.prototype.preventDefault) {
+    Event.prototype.preventDefault=function() {
+      this.returnValue=false;
+    };
+  }
+  if (!Event.prototype.stopPropagation) {
+    Event.prototype.stopPropagation=function() {
+      this.cancelBubble=true;
+    };
+  }
+  if (!Element.prototype.addEventListener) {
+    var eventListeners=[];
+
+    var addEventListener=function(type,listener /*, useCapture (sera ignoré) */) {
+      var self=this;
+      var wrapper=function(e) {
+        e.target=e.srcElement;
+        e.currentTarget=self;
+        if (typeof listener.handleEvent != 'undefined') {
+          listener.handleEvent(e);
+        } else {
+          listener.call(self,e);
+        }
+      };
+      if (type=="DOMContentLoaded") {
+        var wrapper2=function(e) {
+          if (document.readyState=="complete") {
+            wrapper(e);
+          }
+        };
+        document.attachEvent("onreadystatechange",wrapper2);
+        eventListeners.push({object:this,type:type,listener:listener,wrapper:wrapper2});
+
+        if (document.readyState=="complete") {
+          var e=new Event();
+          e.srcElement=window;
+          wrapper2(e);
+        }
+      } else {
+        this.attachEvent("on"+type,wrapper);
+        eventListeners.push({object:this,type:type,listener:listener,wrapper:wrapper});
+      }
+    };
+    var removeEventListener=function(type,listener /*, useCapture (sera ignoré) */) {
+      var counter=0;
+      while (counter&lt;eventListeners.length) {
+        var eventListener=eventListeners[counter];
+        if (eventListener.object==this &amp;&amp; eventListener.type==type &amp;&amp; eventListener.listener==listener) {
+          if (type=="DOMContentLoaded") {
+            this.detachEvent("onreadystatechange",eventListener.wrapper);
+          } else {
+            this.detachEvent("on"+type,eventListener.wrapper);
+          }
+          eventListeners.splice(counter, 1);
+          break;
+        }
+        ++counter;
+      }
+    };
+    Element.prototype.addEventListener=addEventListener;
+    Element.prototype.removeEventListener=removeEventListener;
+    if (HTMLDocument) {
+      HTMLDocument.prototype.addEventListener=addEventListener;
+      HTMLDocument.prototype.removeEventListener=removeEventListener;
+    }
+    if (Window) {
+      Window.prototype.addEventListener=addEventListener;
+      Window.prototype.removeEventListener=removeEventListener;
+    }
+  }
+})();</pre>
+
+<h3 id="Ancienne_manière_denregistrer_les_écouteurs_dévènements">Ancienne manière d'enregistrer les écouteurs d'évènements</h3>
+
+<p>La méthode <code>addEventListener()</code> a été ajoutée dans la spécification DOM 2 <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events">Events</a>. Avant cela, les écouteurs d'évènements étaient enregistrés de la manière suivante :</p>
+
+<pre class="notranslate">// Passage d'une référence à une fonction — ne pas ajouter de '()' après, cela appelerait la fonction !
+el.onclick = modifierTexte;
+
+// Utilisation d'une fonction directe
+element.onclick = function() {
+  ...logique de la fonction...
+};
+</pre>
+
+<p>Cette méthode remplace l'(les)écouteur(s) d'évènements <code>click</code> existant(s) de l'élément s'il y en a. D'autres évènements et leurs gestionnaires d'évènements associés comme <code>blur</code> (<code>onblur</code>), et  <code>keypress</code> ( <code>onkeypress</code>) se comportent de façon similaire.</p>
+
+<p>Comme elle faisait partie de façon fondamentale du DOM 0, cette méthode est très largement prise en charge et ne nécessite aucun code multi-navigateur. C'est pourquoi elle est souvent utilisée pour enregistrer des évènements dynamiquement quand de très anciens navigateurs (comme IE &lt;=8) doivent être pris en charge ; voir la table plus bas pour les détails de la prise en charge par les navigateurs pour <code>addEventListener</code>.</p>
+
+<h3 id="Problèmes_de_mémoire">Problèmes de mémoire</h3>
+
+<pre class="brush: js line-numbers  language-js notranslate">var i;
+var els = document.getElementsByTagName('*');
+
+// Cas 1
+for(i=0 ; i&lt;els.length ; i++){
+  els[i].addEventListener("click", function(e){/*faire quelque chose*/}, false);
+}
+
+// Cas 2
+function traiterEvenement(e){
+  /* faire quelque chose */
+}
+
+for(i=0 ; i&lt;els.length ; i++){
+  els[i].addEventListener("click", traiterEvenement, false);
+}</pre>
+
+<p>Dans le premier cas ci-dessus, une nouvelle fonction gestionnaire (anonyme) est créée à chaque itération de la boucle. Dans le second cas, la même fonction déclarée préalablement est utilisée comme gestionnaire d'évènements. Cela entraîne une consommation de mémoire réduite. De plus, dans le premier cas, il n'est pas possible d'appeler {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} du fait qu'aucune référence à la fonction anonyme n'est conservée (ou ici, n'est conservée aucune des multiples fonctions anonymes que la boucle peut créer). Dans le second cas, il est possible de faire <code>monElement.removeEventListener("click", traiterEvenement, false)</code> du fait que <code>traiterEvenement</code> est la référence à la fonction.</p>
+
+<p>En fait, en ce qui concerne la consommation de mémoire, l'absence de conservation d'une référence à la fonction n'est pas le problème réel ; c'est plutôt l'absence de conservation d'une référence STATIQUE à la fonction. Dans les deux cas à problème ci-dessous, une référence à la fonction est conservée, mais du fait qu'elle est redéfinie à chaque itération, elle n'est pas statique. Dans le troisème cas, la référence à la fonction anonyme est réaffectée à chaque itération. Dans le quatrième cas, la définition entière de la fonction est inchangée, mais elle est néanmoins répétitivement définie comme si elle était nouvelle (à moins qu'elle n'ait été [[promue]] par le compilateur), et elle n'est donc pas statique. Par conséquent, bien qu'il ne semble y avoir simplement que des [[Multiple identical event listeners]], dans les deux cas, chaque itération créera à la place un nouvel écouteur avec sa propre unique référence à la fonction gestionnaire. Cependant, du fait que la définition de la fonction elle-même ne change pas, la MÊME fonction peut toujours être appelée pour chaque écouteur dupliqué (spécialement si le code est optimisé.)</p>
+
+<p>Également dans les deux cas, du fait que la référence à la fonction e été conservée mais est répétitivement redéfinie par chaque ajout, l'instruction 'remove' ci-dessus peut toujours supprimer un écouteur, mais seulement le dernier ajouté.</p>
+
+<pre class="brush: js notranslate">// Pour illustration seulement : notez la "FAUTE" de [j] au lieu de [i] entrainant ainsi que les évènements voulus sont tous enregistrés pour le MÊME élément
+
+// Cas 3
+for(let i=0, j=0 ; i&lt;els.length ; i++){
+  /* faire des tas de choses avec j */
+  els[j].addEventListener("click", traiterEvenement = function(e){/*faire quelque chose*/}, false);
+}
+
+// Cas 4
+for(let i=0, j=0 ; i&lt;els.length ; i++){
+  /* faire des tas de choses avec  j */
+  function traiterEvenement(e){/*faire quelque chose*/};
+  els[j].addEventListener("click", traiterEvenement, false);
+}</pre>
+
+<h3 id="Amélioration_des_performances_de_défilement_avec_les_écouteurs_passifs">Amélioration des performances de défilement avec les écouteurs passifs</h3>
+
+<p>D'après la spécification, la valeur par défaut pour l'option <code>passive</code> est toujours <code>false</code> (<em>faux</em>). Toutefois, cela introduit la possibilité que des écouteurs d'évènements gérant certains évènements tactiles (parmi d'autres) bloquent le fil d'exécution principal du navigateur pendant qu'il essaye de gérer le défilement, avec pour résultat une possiblement énorme réduction de performance pendant la gestion du défilement.</p>
+
+<p>Pour prévenir ce problème, certains navigateurs (spécifiquement, Chrome et Firefox) ont changé la valeur par défault de l'option <code>passive</code> à <code>true</code> pour les évènements {{event("touchstart")}} et {{event("touchmove")}} dans les nœuds de niveau document {{domxref("Window")}}, {{domxref("Document")}}, et {{domxref("Document.body")}}. Cela empêche que l'écouteur d'évènement ne soit appelé, de sorte qu'il ne peut pas bloquer le rendu de la page pendant que l'utilisateur fait un défilement.</p>
+
+<div class="note">
+<p><strong>Note :</strong> voir la table de compatibilité ci-dessous si vous avez besoin de savoir quels navigateurs (et/ou quelles versions de ces navigateurs) implémentent ce comportement modifié.</p>
+</div>
+
+<p>Vous pouvez passer outre ce comportement en initialisant explicitement la valeur de <code>passive</code> à <code>false</code>, comme montré ci-dessous :</p>
+
+<pre class="brush: js notranslate">/* Détection de fonctionnalité */
+let passiveSiSupportee = false;
+
+try {
+  window.addEventListener("test", null,
+    Object.defineProperty(
+      {},
+      "passive",
+      {
+        get: function() { passiveSiSupportee = { passive: false }; }
+      }
+    )
+  );
+} catch(err) {}
+
+window.addEventListener('scroll', function(evenement) {
+  /* faire quelque chose */
+  // pas possible d'utiliser evenement.preventDefault();
+}, passiveSiSupportee );</pre>
+
+<p>Dans les navigateurs anciens qui ne prennent pas en charge le paramètre <code>options</code> d'<code>addEventListener()</code>, le fait d'essayer de l'utiliser empêche l'utilisation de l'argument <code>useCapture</code> sans utilisation appropriée de la <a href="https://wiki.developer.mozilla.org/fr/docs/Web/API/EventTarget/addEventListener$edit#Safely_detecting_option_support">détection de fonctionnalité</a>.</p>
+
+<p>Vous n'avez pas besoin de vous inquiéter de la valeur de <code>passive</code> pour l'évènement {{event("scroll")}} de base. Du fait qu'il ne peut pas être annulé, les écouteurs d'évènements ne peuvant pas bloquer le rendu de la page de toute façon.</p>
+
+<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("DOM WHATWG", "#dom-eventtarget-addeventlistener", "EventTarget.addEventListener()")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-eventtarget-addeventlistener", "EventTarget.addEventListener()")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Events", "#Events-EventTarget-addEventListener", "EventTarget.addEventListener()")}}</td>
+   <td>{{Spec2("DOM2 Events")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">La table de compatibilité de cette page est générée à partir de données structurées. Si vous souhaitez contribuer aux données, visitez <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez nous une "pull request".</div>
+
+<p>{{Compat("api.EventTarget.addEventListener", 3)}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("EventTarget.removeEventListener()")}}</li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/Guide/DOM/Events/Creating_and_triggering_events">Création et déclenchement d'évènements personnalisés</a></li>
+ <li><a href="http://www.quirksmode.org/js/this.html">Plus de détails sur l'utilisation de <code>this</code> dans les gestionnaires d'évènements</a></li>
+</ul>
diff --git a/files/fr/web/api/eventtarget/dispatchevent/index.html b/files/fr/web/api/eventtarget/dispatchevent/index.html
new file mode 100644
index 0000000000..10389d111d
--- /dev/null
+++ b/files/fr/web/api/eventtarget/dispatchevent/index.html
@@ -0,0 +1,71 @@
+---
+title: element.dispatchEvent
+slug: Web/API/EventTarget/dispatchEvent
+tags:
+  - API
+  - DOM
+  - Méthodes
+  - Traitement
+  - évènements
+translation_of: Web/API/EventTarget/dispatchEvent
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p>Envoie un {{domxref("Event")}} (<em>évènement</em>) à la {{domxref("EventTarget")}} (<em>cible</em>) spécifiée (synchrone) en appelant les {{domxref("EventListener")}} (<em>écouteurs</em>)  dans l'ordre approprié. Le processus normal de traitement de l'évènement (y compris les phases de capture et l'éventuelle propagation) s'applique aussi aux évènements diffusés manuellement avec <code>dispatchEvent()</code>.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>cancelled</em> = !<em>target</em>.dispatchEvent(<em>event</em>)
+</pre>
+
+<h3 id="Param.C3.A8tres" name="Param.C3.A8tres">Paramètres</h3>
+
+<ul>
+ <li><code>event</code> est un objet {{domxref("Event")}} à envoyer.</li>
+ <li><code>target</code> (<em>cible</em>) est utilisée pour initialiser la {{domxref("Event", "", "target")}} et déterminer quels écouteurs d'évènements doivent être invoqués.</li>
+</ul>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<ul>
+ <li>La valeur de retour est  <code>false</code> (<em>faux</em>) si l'évènement est annulable et au moins l'un des gestionnaires d'événements qui ont géré cet événement appelé {{domxref ("Event.preventDefault ()")}}. Sinon, elle est <code>true</code> (<em>vrai</em>).</li>
+</ul>
+
+<p>La méthode <code>dispatchEvent</code> lance une exception <code>UNSPECIFIED_EVENT_TYPE_ERR</code> si le type de l'évènement n'a pas été spécifié par son initialisation avant l'appel de la méthode ou s'il est <code>null</code> ou une chaîne vide. Les exceptions lancées par les gestionnaires d'évènements sont signalées comme exceptions non interceptées ; les gestionnaires d'événements s'exécutent sur une pile d'appels imbriquée : ils bloquent l'appelant jusqu'à ce qu'ils se terminent, mais les exceptions ne se propagent pas à l'appelant.</p>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Contrairement aux événements "natifs", qui sont déclenchés par le DOM et invoquent les gestionnaires d'événements de manière asynchrone via la <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Concurrence_et_boucle_des_%C3%A9v%C3%A9nements">boucle des événements</a>, <code>dispatchEvent</code> appelle les gestionnaires d'événements de manière synchrone. Tous les gestionnaires d'événements applicables s'exécuteront et retourneront avant que le code ne continue après l'appel à <code>dispatchEvent</code>.</p>
+
+<p>Comme montré dans l'exemple qui précède, <code>dispatchEvent</code> est la dernière étape du processus création-initialisation-envoi, qui est utilisé pour envoyer des évènements dans le modèle de l'implémentation des évènements. Ceux-ci peuvent être créés en utilisant le <a href="https://developer.mozilla.org/fr/docs/Web/API/Event/Event">constructeur d'évènements</a>.</p>
+
+<p>Voir aussi <a href="https://developer.mozilla.org/fr/docs/Web/API/Event" title="DOM/event">Objet Event référence</a>.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Voir <a href="https://developer.mozilla.org/fr/docs/Web/Guide/DOM/Events/Creating_and_triggering_events">Création et déclenchement d'évènements</a>.</p>
+
+<h2 id="Spécification">Spécification</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('DOM WHATWG', '#dom-eventtarget-dispatchevent', 'EventTarget.dispatchEvent()')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td>Définition initiale dans la spécification DOM 2 Events (<em>évènements</em>)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_.C3.A9galement" name="Voir_.C3.A9galement">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.EventTarget.dispatchEvent")}}</p>
diff --git a/files/fr/web/api/eventtarget/eventtarget/index.html b/files/fr/web/api/eventtarget/eventtarget/index.html
new file mode 100644
index 0000000000..522466de4b
--- /dev/null
+++ b/files/fr/web/api/eventtarget/eventtarget/index.html
@@ -0,0 +1,80 @@
+---
+title: EventTarget()
+slug: Web/API/EventTarget/EventTarget
+tags:
+  - API
+  - Cible
+  - Constructeur
+  - DOM
+  - évènements
+translation_of: Web/API/EventTarget/EventTarget
+---
+<div>{{APIRef("DOM Events")}}</div>
+
+<p>Le constructeur <code><strong>EventTarget()</strong></code> crée une nouvelle instance d'objet {{domxref("EventTarget")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <var>myEventTarget</var> = new EventTarget();</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Aucun.</p>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Une instance d'objet {{domxref("EventTarget")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js" id="ct-20">class MyEventTarget extends EventTarget {
+  constructor(mySecret) {
+    super();
+    this._secret = mySecret;
+  }
+
+  get secret() { return this._secret; }
+};
+
+let myEventTarget = new MyEventTarget(5);
+let value = myEventTarget.secret;  // == 5
+myEventTarget.addEventListener("foo", function(e) {
+  this._secret = e.detail;
+});
+
+let event = new CustomEvent("foo", { detail: 7 });
+myEventTarget.dispatchEvent(event);
+let newValue = myEventTarget.secret; // == 7</pre>
+
+<h2 id="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('DOM WHATWG', '#dom-eventtarget-eventtarget', 'EventTarget() constructor')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+
+
+<p>{{Compat("api.EventTarget.EventTarget")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("EventTarget")}}</li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/web/api/eventtarget/index.html b/files/fr/web/api/eventtarget/index.html
new file mode 100644
index 0000000000..cfef429c5f
--- /dev/null
+++ b/files/fr/web/api/eventtarget/index.html
@@ -0,0 +1,138 @@
+---
+title: EventTarget
+slug: Web/API/EventTarget
+tags:
+  - API
+  - Cible de l'événement
+  - DOM
+  - DOM Events
+  - EventTarget
+  - Interface
+  - Événements DOM
+translation_of: Web/API/EventTarget
+---
+<nav>{{ApiRef("DOM Events")}}</nav>
+
+<p><span class="seoSummary"><code>EventTarget</code> est une interface DOM implémentée par des objets qui peuvent recevoir des événements et peuvent avoir des écouteurs pour eux.</span></p>
+
+<p>{{domxref ("Element")}}, {{domxref ("Document")}} et {{domxref ("Window")}} sont les cibles d'événements les plus fréquentes, mais d'autres objets peuvent également être des cibles d'événements. Par exemple {{domxref ("XMLHttpRequest")}}, {{domxref ("AudioNode")}}, {{domxref ("AudioContext")}} et autres.</p>
+
+<p>De nombreuses cibles d'événements (y compris des éléments, des documents et des fenêtres) supporte également la définition de <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Guide/DOM/Events/Event_handlers">gestionnaires d'événements</a> via les propriétés et attributs <code>onevent</code>.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("EventTarget.EventTarget()", "EventTarget()")}}</dt>
+ <dd>Crée une nouvelle instance d'objet <code>EventTarget</code>.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("EventTarget.addEventListener()", "<var>EventTarget</var>.addEventListener()")}}</dt>
+ <dd>Enregistre un gestionnaire d'événements d'un type d'événement spécifique sur <code>EventTarget</code>.</dd>
+ <dt>{{domxref("EventTarget.removeEventListener()", "<var>EventTarget</var>.removeEventListener()")}}</dt>
+ <dd>Supprime un écouteur d'événement de <code>EventTarget</code>.</dd>
+ <dt>{{domxref("EventTarget.dispatchEvent()", "<var>EventTarget</var>.dispatchEvent()")}}</dt>
+ <dd>Envoie un événement à cet <code>EventTarget</code>.</dd>
+</dl>
+
+<h3 id="Méthodes_supplémentaires_dans_la_base_de_code_Chrome_de_Mozilla">Méthodes supplémentaires dans la base de code Chrome de Mozilla</h3>
+
+<p>Mozilla inclut quelques extensions à utiliser par les cibles d'événements implémentées par JS pour implémenter les propriétés <code>onevent</code>.</p>
+
+<p>Voir aussi <a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/WebIDL_bindings">liaisons WebIDL</a>.</p>
+
+<ul>
+ <li><code>void <strong>setEventHandler</strong>(DOMString <var>type</var>, EventHandler <var>handler</var>)</code> {{non-standard_inline}}</li>
+ <li><code>EventHandler <strong>getEventHandler</strong>(DOMString <var>type</var>)</code> {{non-standard_inline}}</li>
+</ul>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="Implémentation_simple_dEventTarget">Implémentation simple d'EventTarget</h3>
+
+<pre class="brush: js notranslate">const EventTarget = function () {
+  this.listeners = {}
+}
+
+EventTarget.prototype.listeners = null
+EventTarget.prototype.addEventListener = function (type, callback) {
+  if (!(type in this.listeners)) {
+    this.listeners[type] = []
+  }
+  this.listeners[type].push(callback)
+}
+
+EventTarget.prototype.removeEventListener = function (type, callback) {
+  if (!(type in this.listeners)) {
+    return
+  }
+  const stack = this.listeners[type]
+  for (let i = 0, l = stack.length; i &lt; l; i++) {
+    if (stack[i] === callback) {
+      stack.splice(i, 1)
+      return
+    }
+  }
+}
+
+EventTarget.prototype.dispatchEvent = function (event) {
+  if (!(event.type in this.listeners)) {
+    return true
+  }
+  const stack = this.listeners[event.type].slice()
+
+  for (let i = 0, l = stack.length; i &lt; l; i++) {
+    stack[i].call(this, event)
+  }
+  return !event.defaultPrevented
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-eventtarget', 'EventTarget')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Pas de changement.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', 'DOM3-Events.html#interface-EventTarget', 'EventTarget')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>Quelques paramètres sont désormais optionnels (<code>listener</code>), ou acceptent la valeur nulle (<code>useCapture</code>).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events', 'events.html#Events-EventTarget', 'EventTarget')}}</td>
+   <td>{{Spec2('DOM2 Events')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.EventTarget")}}</p>
+</div>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Reference/Events">Référence d'événement</a> - les événements disponibles sur la plateforme.</li>
+ <li> <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Guide/DOM/Events">Guide du développeur d'événements</a></li>
+ <li>{{domxref("Event")}} interface</li>
+</ul>
diff --git a/files/fr/web/api/eventtarget/removeeventlistener/index.html b/files/fr/web/api/eventtarget/removeeventlistener/index.html
new file mode 100644
index 0000000000..2003b72949
--- /dev/null
+++ b/files/fr/web/api/eventtarget/removeeventlistener/index.html
@@ -0,0 +1,222 @@
+---
+title: element.removeEventListener
+slug: Web/API/EventTarget/removeEventListener
+tags:
+  - API
+  - Cible
+  - DOM
+  - Evènement
+  - Méthode
+  - Reference
+  - Suppression
+  - Écouteurs
+translation_of: Web/API/EventTarget/removeEventListener
+---
+<div>{{APIRef("DOM Events")}}</div>
+
+<p>La méthode <strong><code>EventTarget.removeEventListener()</code></strong> supprime d'une {{domxref("EventTarget")}} (<em>cible</em>) un écouteur d'évènements précédemment enregistré avec {{domxref("EventTarget.addEventListener()")}}. L'écouteur d'évènements à supprimer est identifié en utilisant la combinaison du type d'évènement, la fonction "event listener" elle-même et diverses options factultatives qui peuvent affecter le processus de correspondance ; voir la section <em>Correspondance utilisée pour la suppression d'écouteurs d'événements</em> ci-après.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><code><em>target</em>.removeEventListener(<em>type</em>, <em>listener</em>[, <em>options</em>]);
+</code><em>target</em>.removeEventListener(<em>type</em>, <em>listener</em>[, <em>useCapture</em>]);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>type</code></dt>
+ <dd>Une chaîne représentant le type d'événement pour lequel supprimer un écouteur d'évènements.</dd>
+ <dt><code>listener</code></dt>
+ <dd>La fonction  {{domxref("EventListener")}}  du gestionnaire d'évènements à retirer de la cible d'évènements.</dd>
+ <dt><code>options</code> {{optional_inline}}</dt>
+ <dd>
+ <p>Un objet d'options qui spécifie les caractéristiques de l'écouteur d'évènements. Les options disponibles sont :</p>
+
+ <ul>
+  <li><code>capture</code> : un {{jsxref("Boolean")}} indiquant que les évènements de ce type seront envoyés au <code>listener</code> enregistré avant d'être distribués à tout <code>EventTarget</code> en-dessous dans l'arborescence du DOM.</li>
+  <li><code>passive</code> : un {{jsxref("Boolean")}} qui indique que le <code>listener</code> n'appellera jamais <code>preventDefault()</code>. S'il doit le faire, l'agent utilisateur l'ignorera et génèrera un avertissement dans la console.</li>
+  <li>{{non-standard_inline}} <code>mozSystemGroup</code> : Disponible seulement pour le code exécuté dans XBL ou dans le chrome de Firefox, c'est un {{jsxref("Boolean")}} indiquant que l'écouteur a été ajouté au groupe système.</li>
+ </ul>
+ </dd>
+ <dt><code>useCapture</code> {{optional_inline}}</dt>
+ <dd>Indique si l'{{domxref("EventListener")}} à retirer a été enregistré comme un<code> </code>écouteur capturant, ou non. Si le paramètre est absent, la valeur par défaut est <code>false</code> (<em>faux</em>).</dd>
+</dl>
+
+<p>Si un écouteur est enregistré deux fois, un avec capture et un sans, supprimez chacun séparément. La suppression d'un écouteur de capture n'affecte pas une version non capturante du même écouteur, et vice versa.</p>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p><code>undefined</code>. (<em>indéfini</em>)</p>
+
+<h3 id="Correspondance_utilisée_pour_la_suppression_d'écouteurs_d'événements">Correspondance utilisée pour la suppression d'écouteurs d'événements</h3>
+
+<p>Étant donné qu'un écouteur d'événements a déjà été ajouté en appelant {{domxref("EventTarget.addEventListener","addEventListener()")}}, vous pouvez éventuellement arriver à un point auquel vous devez le supprimer. Vous devez alors spécifier le même <code>type</code> et les mêmes paramètres <code>listener</code> pour <code>removeEventListener()</code>, mais qu'en est-il des paramètres <code>options</code> ou <code>useCapture</code> ?</p>
+
+<p>Alors que <code>addEventListener()</code> vous permet d'ajouter le même écouteur plus d'une fois pour le même type si les options sont différentes, la seule option que <code>removeEventListener()</code> vérifie est l'indicateur <code>capture</code> / <code>useCapture</code>. Sa valeur doit correspondre pour que <code>removeEventListener()</code> corresponde, mais pas les autres valeurs.</p>
+
+<p>Par exemple, considérons l'appel de <code>addEventListener()</code> :</p>
+
+<pre class="brush: js">element.addEventListener("mousedown", handleMouseDown, true);</pre>
+
+<p>Maintenant, voyons chacun des deux appels de <code>removeEventListener()</code> :</p>
+
+<pre class="brush: js">element.removeEventListener("mousedown", handleMouseDown, false);     // Fails
+element.removeEventListener("mousedown", handleMouseDown, true);</pre>
+
+<p>Le premier appel échoue parce que la valeur de <code>useCapture</code> ne correspond pas. Le second réussit puisqu'il correspond pour <code>useCapture</code>.</p>
+
+<p>Maintenant, observez ceci :</p>
+
+<pre class="brush: js">element.addEventListener("mousedown", handleMouseDown, { passive: true });</pre>
+
+<p>Ici, nous spécifions un objet <code>options</code> dans lequel <code>passive</code> est défini à <code>true</code>, tandis que les autres options sont laissées à la valeur par défaut de <code>false</code>.</p>
+
+<p>Maintenant, regardez chacun de ces appels successifs à <code>removeEventListener()</code>. N'importe lequel d'entre eux dans lequel <code>capture</code> ou <code>useCapture</code> est <code>true</code> (<em>vrai</em>) échoue ; tous les autres réussissent. Seul le paramètre de <code>capture</code> est important pour <code>removeEventListener()</code>.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">element.removeEventListener("mousedown", handleMouseDown, { passive: true });     // Réussit
+element.removeEventListener("mousedown", handleMouseDown, { capture: false });    // Réussit
+element.removeEventListener("mousedown", handleMouseDown, { capture: true });     // Échoue
+element.removeEventListener("mousedown", handleMouseDown, { passive: false });    // Réussit
+element.removeEventListener("mousedown", handleMouseDown, false);                 // Réussit
+element.removeEventListener("mousedown", handleMouseDown, true);                  // Échoue</code>
+</pre>
+
+<p>Il est à noter que certaines versions du navigateur ont été incohérentes à ce sujet, et sauf si vous avez des raisons spécifiques, il est probablement sage d'utiliser les mêmes valeurs que pour l'appel à <code>addEventListener()</code> lors de l'appel de <code>removeEventListener()</code>.</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Si un {{domxref("EventListener")}} est retiré d'un {{domxref("EventTarget")}} alors qu'il est en train de traiter un événement, il ne sera pas déclenché par les actions courantes. Les {{domxref("EventListener")}} ne peuvent jamais être invoqués après avoir été retirés.</p>
+
+<p>L'appel de <code>removeEventListener()</code> avec des paramètres n'identifiant aucun {{domxref("EventListener")}} actuellement enregistré sur l'<code>EventTarget</code> n'a aucun effet.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Cet exemple montre comment ajouter un écouteur d'évènements basé sur <code>click</code> et supprimer un écouteur d'évènements basé sur <code>mouseover</code>.</p>
+
+<pre class="brush: js">var body = document.querySelector('body'),
+    clickTarget = document.getElementById('click-target'),
+    mouseOverTarget = document.getElementById('mouse-over-target'),
+    toggle = false;
+
+function makeBackgroundYellow() {
+    'use strict';
+
+    if (toggle) {
+        body.style.backgroundColor = 'white';
+    } else {
+        body.style.backgroundColor = 'yellow';
+    }
+
+    toggle = !toggle;
+}
+
+clickTarget.addEventListener('click',
+    makeBackgroundYellow,
+    false
+);
+
+mouseOverTarget.addEventListener('mouseover', function () {
+    'use strict';
+
+    clickTarget.removeEventListener('click',
+        makeBackgroundYellow,
+        false
+    );
+});</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Spécification</th>
+   <th>État</th>
+   <th>Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-eventtarget-removeeventlistener", "EventTarget.removeEventListener()")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-eventtarget-removeeventlistener", "EventTarget.removeEventListener()")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Events", "#Events-EventTarget-removeEventListener", "EventTarget.removeEventListener()")}}</td>
+   <td>{{Spec2("DOM2 Events")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.EventTarget.removeEventListener", 3)}}</p>
+
+<h2 id="Prothèse_(polyfill)_pour_la_prise_en_charge_des_navigateurs_anciens">Prothèse (<em>polyfill</em>) pour la prise en charge des navigateurs anciens</h2>
+
+<p><code>addEventListener()</code> et <code>removeEventListener()</code> ne sont pas présents dans les anciens navigateurs. Vous pouvez contourner ce problème en insérant le code suivant au début de vos scripts, permettant l'utilisation de <code>addEventListener()</code> et <code>removeEventListener()</code> dans les implémentations qui ne le supportent pas nativement. Toutefois, cette méthode ne fonctionnera pas sur Internet Explorer 7 ou version antérieure, car l'extension du fichier Element.prototype n'a pas été prise en charge jusqu'à Internet Explorer 8.</p>
+
+<pre class="brush: js">if (!Element.prototype.addEventListener) {
+  var oListeners = {};
+  function runListeners(oEvent) {
+    if (!oEvent) { oEvent = window.event; }
+    for (var iLstId = 0, iElId = 0, oEvtListeners = oListeners[oEvent.type]; iElId &lt; oEvtListeners.aEls.length; iElId++) {
+      if (oEvtListeners.aEls[iElId] === this) {
+        for (iLstId; iLstId &lt; oEvtListeners.aEvts[iElId].length; iLstId++) { oEvtListeners.aEvts[iElId][iLstId].call(this, oEvent); }
+        break;
+      }
+    }
+  }
+  Element.prototype.addEventListener = function (sEventType, fListener /*, useCapture (will be ignored!) */) {
+    if (oListeners.hasOwnProperty(sEventType)) {
+      var oEvtListeners = oListeners[sEventType];
+      for (var nElIdx = -1, iElId = 0; iElId &lt; oEvtListeners.aEls.length; iElId++) {
+        if (oEvtListeners.aEls[iElId] === this) { nElIdx = iElId; break; }
+      }
+      if (nElIdx === -1) {
+        oEvtListeners.aEls.push(this);
+        oEvtListeners.aEvts.push([fListener]);
+        this["on" + sEventType] = runListeners;
+      } else {
+        var aElListeners = oEvtListeners.aEvts[nElIdx];
+        if (this["on" + sEventType] !== runListeners) {
+          aElListeners.splice(0);
+          this["on" + sEventType] = runListeners;
+        }
+        for (var iLstId = 0; iLstId &lt; aElListeners.length; iLstId++) {
+          if (aElListeners[iLstId] === fListener) { return; }
+        }
+        aElListeners.push(fListener);
+      }
+    } else {
+      oListeners[sEventType] = { aEls: [this], aEvts: [ [fListener] ] };
+      this["on" + sEventType] = runListeners;
+    }
+  };
+  Element.prototype.removeEventListener = function (sEventType, fListener /*, useCapture (will be ignored!) */) {
+    if (!oListeners.hasOwnProperty(sEventType)) { return; }
+    var oEvtListeners = oListeners[sEventType];
+    for (var nElIdx = -1, iElId = 0; iElId &lt; oEvtListeners.aEls.length; iElId++) {
+      if (oEvtListeners.aEls[iElId] === this) { nElIdx = iElId; break; }
+    }
+    if (nElIdx === -1) { return; }
+    for (var iLstId = 0, aElListeners = oEvtListeners.aEvts[nElIdx]; iLstId &lt; aElListeners.length; iLstId++) {
+      if (aElListeners[iLstId] === fListener) { aElListeners.splice(iLstId, 1); }
+    }
+  };
+}</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("EventTarget.addEventListener")}}</li>
+ <li>{{non-standard_inline}}{{domxref("EventTarget.detachEvent()")}}.</li>
+</ul>
diff --git a/files/fr/web/api/extendableevent/extendableevent/index.html b/files/fr/web/api/extendableevent/extendableevent/index.html
new file mode 100644
index 0000000000..913fc0079c
--- /dev/null
+++ b/files/fr/web/api/extendableevent/extendableevent/index.html
@@ -0,0 +1,109 @@
+---
+title: ExtendableEvent.ExtendableEvent()
+slug: Web/API/ExtendableEvent/ExtendableEvent
+tags:
+  - API
+  - Experimental
+  - ExtendableEvent
+  - Reference
+  - Service Workers
+  - ServiceWorker
+translation_of: Web/API/ExtendableEvent/ExtendableEvent
+---
+<p>{{APIRef("Service Workers API")}}{{ SeeCompatTable() }}</p>
+
+<p>Le contructeur <code><strong>ExtendableEvent()</strong></code> crée un nouvel objet {{domxref("ExtendableEvent")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var myExtendableEvent = new ExtendableEvent(type, init);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><em>type</em></dt>
+ <dd>Le type de l'ExtendableEvent, par exemple {{Event("install")}}, {{Event("activate")}}.</dd>
+ <dt><em>init</em> {{optional_inline}}</dt>
+ <dd>Un objet d'options contenant n'importe quelle configuration personnalisée que vous voulez appeler à un objet d'évènement. Pour le moment, il n'existe pas d'option dans la spécification, mais il a été défini pour une compatibilité future pour les différents évènements dérivés.</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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#extendable-event', 'ExtendableEvent')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilités_des_navigateurs">Compatibilités des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{ CompatGeckoDesktop("44.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>24</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoMobile("44.0") }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Utilisation des Service Workers</a></li>
+ <li><a class="external external-icon" href="https://github.com/mdn/sw-test">Exemple simple de service workers</a></li>
+ <li><a class="external external-icon" href="https://jakearchibald.github.io/isserviceworkerready/">Les  ServiceWorker sont-ils prêts?</a></li>
+ <li>{{jsxref("Promise")}}</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Performance/Using_web_workers">Utilisation performante des web workers</a></li>
+</ul>
diff --git a/files/fr/web/api/extendableevent/index.html b/files/fr/web/api/extendableevent/index.html
new file mode 100644
index 0000000000..02967eaa8a
--- /dev/null
+++ b/files/fr/web/api/extendableevent/index.html
@@ -0,0 +1,169 @@
+---
+title: ExtendableEvent
+slug: Web/API/ExtendableEvent
+tags:
+  - API
+  - Experimental
+  - ExtendableEvent
+  - Interface
+  - Reference
+  - Services Workers
+translation_of: Web/API/ExtendableEvent
+---
+<div>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</div>
+
+<p>L'interface <strong><code>ExtendableEvent</code></strong> étend la durée de vie des évènemets {{event("install")}} et {{event("activate")}} envoyés dans la portée global dans le cycle de vie du service worker. Elle s'assure que les évènements fonctionnels (comme {{domxref("FetchEvent")}}) ne sont pas distribués avant de mettre à jour les shémas de la base de données et de vider l'ancien cache.</p>
+
+<p>Si {{domxref("ExtendableEvent.waitUntil","waitUntil()")}} est appelé en dehors du gestionnaire <code>ExtendableEvent</code>, le navigateur doit lever <code>InvalidStateError</code>; notez que plusieurs appels vont s'empiler, et que les promesses de résultat seront ajoutées à la liste des <a href="https://slightlyoff.github.io/ServiceWorker/spec/service_worker/index.html#dfn-extend-lifetime-promises">promesses à vie étendue</a>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Le comportement décrit dans le paragraphe précédent a été corrigé dans Firefox 43 (voir {{bug(1180274)}}).</p>
+</div>
+
+<p>Cette interface hérite de l'interface {{domxref("Event")}}.</p>
+
+<p>{{InheritanceDiagram(700, 60, 20)}}</p>
+
+<div class="note">
+<p><strong>Note</strong>: Cette interface est disponnible seulement quand la portée globale est {{domxref("ServiceWorkerGlobalScope")}}. Elle n'est pas disponible quand c'est une {{domxref("Window")}}, ou le scope d'un autre genre de worker.</p>
+</div>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("ExtendableEvent.ExtendableEvent()", "ExtendableEvent()")}}</dt>
+ <dd>Crée un nouvel object <code>ExtendableEvent</code>.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p>N'implémente pas de propriétés spécifiques, mais hérite celles de sont parent, <em>{{domxref("Event")}}.</em></p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p>Hérite des méthodes de son parent <em>{{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("ExtendableEvent.waitUntil", "ExtendableEvent.waitUntil()")}}</dt>
+ <dd>Étend la durée de vie de l'évènement. Cette méthode doit être appelée dans {{event("install")}}{{domxref("EventHandler")}} pour le worker {{domxref("ServiceWorkerRegistration.installing", "installing")}} et dans {{event("active")}} {{domxref("EventHandler")}} pour le worker {{domxref("ServiceWorkerRegistration.active", "active")}}. </dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Ce fragment de code est tiré de <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/prefetch/service-worker.js">l'exemple de lecture du service worker</a> (voir <a href="https://googlechrome.github.io/samples/service-worker/prefetch/">l'exemple en live</a>). Ce code appelle {{domxref("ExtendableEvent.waitUntil()")}} dans {{domxref("ServiceWorkerGlobalScope.oninstall")}}, retartant le traitement du worker {{domxref("ServiceWorkerRegistration.installing")}} après l'installation jusqu'à ce que la promesse se résolve. La promesse se résoud quand toutes les ressources ont été récupérés et mises en cache, ou quand une exception est lévée.</p>
+
+<p>Ce fragent de code montre aussi une bonne pratique pour construire des versions de cache utilisé par le service worker. Même s'il n'y a qu'un cache dans cet exemple, la même approche peut être utilisée pour plusieurs caches. Il lie un identifiant court pour un cache avec un nom de cache spécifique et versionné. </p>
+
+<div class="note">
+<p><strong>Note</strong>: Dans Chrome, les messages de logging sont visible dans l'interface "Inspect" pour le service worker concerné, accessible via chrome://serviceworker-internals.</p>
+</div>
+
+<pre class="brush: js">var CACHE_VERSION = 1;
+var CURRENT_CACHES = {
+  prefetch: 'prefetch-cache-v' + CACHE_VERSION
+};
+
+self.addEventListener('install', function(event) {
+  var urlsToPrefetch = [
+    './static/pre_fetched.txt',
+    './static/pre_fetched.html',
+    'https://www.chromium.org/_/rsrc/1302286216006/config/customLogo.gif'
+  ];
+
+  console.log('Installation en cours. Ressources à pré-charger :', urlsToPrefetch);
+
+  event.waitUntil(
+    caches.open(CURRENT_CACHES['prefetch']).then(function(cache) {
+      cache.addAll(urlsToPrefetch.map(function(urlToPrefetch) {
+        return new Request(urlToPrefetch, {mode: 'no-cors'});
+      })).then(function() {
+        console.log('Toutes les ressources ont été chargées et mises en cache.');
+      });
+    }).catch(function(error) {
+      console.error('Erreur de pré-chargement :', error);
+    })
+  );
+});</pre>
+
+<div class="note"><strong>Important</strong>: Au moment du chargement des ressources, il est très important d'utiliser <code>{mode: 'no-cors'}</code> s'il y a une chance que la ressource soit servie depuis un serveur qui ne supporte pas le <a href="http://en.wikipedia.org/wiki/Cross-origin_resource_sharing">CORS</a>. Dans cet exemple, <a href="http://www.chromium.org">www.chromium.org</a> ne support pas le CORS.</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('Service Workers', '#extendable-event', 'ExtendableEvent')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{ CompatGeckoDesktop("44.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>24</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoMobile("44.0") }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Utiliser les Service Workers</a></li>
+ <li><a class="external external-icon" href="https://github.com/mdn/sw-test">Code de base d'un service workers</a></li>
+ <li><a class="external external-icon" href="https://jakearchibald.github.io/isserviceworkerready/">Est-ce que les ServiceWorker sont prêt ?</a></li>
+ <li>{{jsxref("Promise")}}</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Performance/Using_web_workers">Utilisation performate des web workers</a></li>
+</ul>
diff --git a/files/fr/web/api/extendablemessageevent/data/index.html b/files/fr/web/api/extendablemessageevent/data/index.html
new file mode 100644
index 0000000000..c4c6f6c3c2
--- /dev/null
+++ b/files/fr/web/api/extendablemessageevent/data/index.html
@@ -0,0 +1,128 @@
+---
+title: ExtendableMessageEvent.data
+slug: Web/API/ExtendableMessageEvent/data
+tags:
+  - API
+  - Experimental
+  - Propriété
+  - Reference
+  - Service Workers
+translation_of: Web/API/ExtendableMessageEvent/data
+---
+<div>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</div>
+
+<p>La propriété <code><strong>data</strong></code> est une propriété en lecture seule rattachée à l'interface {{domxref("ExtendableMessageEvent")}} et qui permet d'accéder aux données de l'évènement. Il peut s'agir de n'importe quel type de donnée.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var mesDonnees = ExtendableMessageEventInstance.data;</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>N'importe quel type de donnée.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Quand le code suivant est utilisé dans un service worker pour répondre à un message <em>push</em> en envoyant les données reçues par {{domxref("PushMessageData")}} au contexte principal via un <a href="/fr/docs/Web/API/Channel_Messaging_API">message</a>, l'objet de l'évènement <code>onmessage</code> sera un <code>ExtendableMessageEvent</code>.</p>
+
+<pre class="brush: js">var port;
+
+self.addEventListener('push', function(e) {
+  var obj = e.data.json();
+
+  if(obj.action === 'subscribe' || obj.action === 'unsubscribe') {
+    port.postMessage(obj);
+  } else if(obj.action === 'init' || obj.action === 'chatMsg') {
+    port.postMessage(obj);
+  }
+});
+
+self.onmessage = function(e) {
+  console.log(e.data);
+  port = e.ports[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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#extendablemessage-event-data-attribute', 'ExtendableMessageEvent.data')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("45.0")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Les <em>service workers</em> (ainsi que les notifications <em><a href="/fr/docs/Web/API/Push_API">push</a></em>) ont été désactivées pour les <a href="https://www.mozilla.org/en-US/firefox/organizations/">éditions ESR de Firefox 45 et Firefox 52</a>.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les <em>Service Workers</em></a></li>
+ <li><a href="https://github.com/mdn/sw-test">Exemple simple utilisant les <em>service workers</em></a></li>
+ <li><a href="https://jakearchibald.github.io/isserviceworkerready/">État d'avancement de l'implémentation pour <em>ServiceWorker</em> dans les navigateurs</a></li>
+ <li><a href="/fr/docs/Web/API/Channel_Messaging_API">Échange de messages entre les canaux</a></li>
+</ul>
diff --git a/files/fr/web/api/extendablemessageevent/extendablemessageevent/index.html b/files/fr/web/api/extendablemessageevent/extendablemessageevent/index.html
new file mode 100644
index 0000000000..5ec94ab660
--- /dev/null
+++ b/files/fr/web/api/extendablemessageevent/extendablemessageevent/index.html
@@ -0,0 +1,129 @@
+---
+title: ExtendableMessageEvent.ExtendableMessageEvent()
+slug: Web/API/ExtendableMessageEvent/ExtendableMessageEvent
+tags:
+  - API
+  - Constructor
+  - Experimental
+  - Reference
+  - Service Workers
+translation_of: Web/API/ExtendableMessageEvent/ExtendableMessageEvent
+---
+<p>{{APIRef("Service Workers API")}}{{ SeeCompatTable() }}</p>
+
+<p>Le constructeur <code><strong>Extendable</strong></code><strong><code>MessageEvent()</code></strong>crée une nouvelle instance d'un {{domxref("ExtendableMessageEvent")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var myEME = new ExtendableMessageEvent(type, init);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>type</dt>
+ <dd>Un {{domxref("DOMString")}} qui définie le type de message créé.</dd>
+ <dt>init {{optional_inline}}</dt>
+ <dd>Un objet d'initialisation, qui doit contenir les paramètres suivant:
+ <ul>
+  <li><code>data</code>: Les données de l'évènement — peut être de n'importe quel type.</li>
+  <li><code>origin</code>: Une {{domxref("DOMString")}} qui définie l'origine de l'environnement du service worker correspondant.</li>
+  <li><code>lastEventId</code>: Une {{domxref("DOMString")}} qui définie le dernier l'id du dernier évènement de l'évènement source.</li>
+  <li><code>source</code>: Le {{domxref("Client")}}, {{domxref("ServiceWorker")}} ou {{domxref("MessagePort")}} qui a envoyé un message.</li>
+  <li><code>ports</code>: Un tableau contenant les objets  {{domxref("MessagePort")}} connectés au canal d'envoie des messages.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var init = {
+             data : 'Message de bienvenue',
+             source : MessagePortReference,
+             ports : MessagePortListReference
+           }
+
+var myEME = new ExtendableMessageEvent('message', init);</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('Service Workers', '#extendablemessage-event-interface', 'ExtendableMessageEvent')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilités_des_navigateurs">Compatibilités des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("45.0")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Les services workers (et <a href="/en-US/docs/Web/API/Push_API">Push</a>) on été désactivés dans la <a href="https://www.mozilla.org/en-US/firefox/organizations/">Sortie du support étendu de Firefox 45</a> (ESR.)</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Utiliser les Service Workers</a></li>
+ <li><a class="external external-icon" href="https://github.com/mdn/sw-test">Exemple simple de service workers</a></li>
+ <li><a class="external external-icon" href="https://jakearchibald.github.io/isserviceworkerready/">Les Services Workers sont-ils prêts ?</a></li>
+ <li><a href="/en-US/docs/Web/API/Channel_Messaging_API">Canal de messages</a></li>
+</ul>
diff --git a/files/fr/web/api/extendablemessageevent/index.html b/files/fr/web/api/extendablemessageevent/index.html
new file mode 100644
index 0000000000..518622d6cc
--- /dev/null
+++ b/files/fr/web/api/extendablemessageevent/index.html
@@ -0,0 +1,151 @@
+---
+title: ExtendableMessageEvent
+slug: Web/API/ExtendableMessageEvent
+tags:
+  - API
+  - Experimental
+  - ExtendableMessageEvent
+  - Interface
+  - Reference
+  - Service Workers
+translation_of: Web/API/ExtendableMessageEvent
+---
+<div>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</div>
+
+<div> </div>
+
+<p>L'interface <strong><code>ExtendableMessageEvent</code></strong> de {{domxref("ServiceWorker_API", "ServiceWorker API")}} représentes un objet d'évenement qu'un évènement {{event("message_(ServiceWorker)","message")}} lance pour un service worker (quand un canal de message est reçu sur le {{domxref("ServiceWorkerGlobalScope")}} depuis un autre context) — étends la durée de vie de ces évènements.</p>
+
+<p>Cette interface hérite de l'interface {{domxref("ExtendableEvent")}}.</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("ExtendableMessageEvent.ExtendableMessageEvent()")}}</dt>
+ <dd>Crée une nouvelle instance de l'objet <code>ExtendableMessageEvent</code>.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Hérite des propriétés de son parent, </em><em>{{domxref("ExtendableEvent")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("ExtendableMessageEvent.data")}} {{readonlyinline}}</dt>
+ <dd>Retourne les données de l'évenements. Il peut être de n'importe quel type.</dd>
+ <dt>{{domxref("ExtendableMessageEvent.origin")}} {{readonlyinline}}</dt>
+ <dd>Retourne l'origine du {{domxref("ServiceWorkerClient")}} qui envoie le message.</dd>
+ <dt>{{domxref("ExtendableMessageEvent.lastEventId")}} {{readonlyinline}}</dt>
+ <dd>Représente, dans un <a href="en-US/docs/Server-sent_events/Using_server-sent_events">server-sent events</a>, le dernier ID de l'évenement source.</dd>
+ <dt>{{domxref("ExtendableMessageEvent.source")}} {{readonlyinline}}</dt>
+ <dd>Retourne une référence vers le service worker qui envoie le message.</dd>
+ <dt>{{domxref("ExtendableMessageEvent.ports")}} {{readonlyinline}}</dt>
+ <dd>Retourne un tableau contenant l'objet {{domxref("MessagePort")}} représentant les ports associés au canal de messagerie.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Hérite des méthodesde son parent, {{domxref("ExtendableEvent")}}</em>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Le code suivant est utilisé dans un service worker pour répondre à un message push en envoyant les données reçues via  {{domxref("PushMessageData")}} au contexte principale via un <a href="/en-US/docs/Web/API/Channel_Messaging_API">channel message</a>, l'objet d'évènement du <code>onmessage</code> sera un <code>ExtendableMessageEvent</code>.</p>
+
+<pre class="brush: js">var port;
+
+self.addEventListener('push', function(e) {
+  var obj = e.data.json();
+
+  if(obj.action === 'subscribe' || obj.action === 'unsubscribe') {
+    port.postMessage(obj);
+  } else if(obj.action === 'init' || obj.action === 'chatMsg') {
+    port.postMessage(obj);
+  }
+});
+
+self.onmessage = function(e) {
+  console.log(e);
+  port = e.ports[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">Commentaireaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#extendablemessage-event-interface', 'ExtendableMessageEvent')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilités_des_navigateurs">Compatibilités des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("45.0")}}</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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Utiliser les Service Workers</a></li>
+ <li><a class="external external-icon" href="https://github.com/mdn/sw-test">Exemple simple de service workers</a></li>
+ <li><a class="external external-icon" href="https://jakearchibald.github.io/isserviceworkerready/">Les serviceWorker sont-ils prêts?</a></li>
+ <li><a href="/en-US/docs/Web/API/Channel_Messaging_API">Cannal de Messagerie</a></li>
+</ul>
diff --git a/files/fr/web/api/extendablemessageevent/lasteventid/index.html b/files/fr/web/api/extendablemessageevent/lasteventid/index.html
new file mode 100644
index 0000000000..a44b88c854
--- /dev/null
+++ b/files/fr/web/api/extendablemessageevent/lasteventid/index.html
@@ -0,0 +1,130 @@
+---
+title: ExtendableMessageEvent.lastEventId
+slug: Web/API/ExtendableMessageEvent/lastEventId
+tags:
+  - API
+  - Experimental
+  - ExtendableMessageEvent
+  - Property
+  - Reference
+  - Service Workers
+  - lastEventID
+translation_of: Web/API/ExtendableMessageEvent/lastEventId
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<p>La propriété en lecture seule <strong><code>lastEventID</code></strong> de l'interface {{domxref("ExtendableMessageEvent")}} représente, dans <a href="https://developer.mozilla.org/en-US/docs/Web/API/en-US/docs/Server-sent_events/Using_server-sent_events">les évenements envoyés par lle serveur</a>, le dernier ID de l'évenement source.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var myLastEventId = ExtendableMessageEventInstance.lastEventId;</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>Une {{domxref("DOMString")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Le code suivant est utilisé, dans un service worker, pour répondre à un message push en envoyant les données reçues par le  {{domxref("PushMessageData")}} au contexte principale, via le <a href="/en-US/docs/Web/API/Channel_Messaging_API">canal de messages</a>. L'objet événement de <code>onmessage</code> sera un <code>ExtendableMessageEvent.</code></p>
+
+<pre class="brush: js">var port;
+
+self.addEventListener('push', function(e) {
+  var obj = e.data.json();
+
+  if(obj.action === 'subscribe' || obj.action === 'unsubscribe') {
+    port.postMessage(obj);
+  } else if(obj.action === 'init' || obj.action === 'chatMsg') {
+    port.postMessage(obj);
+  }
+});
+
+self.onmessage = function(e) {
+  console.log(e.lastEventId);
+  port = e.ports[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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#extendablemessage-event-lasteventid-attribute', 'ExtendableMessageEvent.lastEventId')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilités_des_navigateurs">Compatibilités des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("45.0")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Service workers (and <a href="/en-US/docs/Web/API/Push_API">Push</a>) have been disabled in the <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 Extended Support Release</a> (ESR.)</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Utilisation des Service Workers</a></li>
+ <li><a class="external external-icon" href="https://github.com/mdn/sw-test">Exemple simple des service workers</a></li>
+ <li><a class="external external-icon" href="https://jakearchibald.github.io/isserviceworkerready/">Est-ce que les service workers sont prêts ?</a></li>
+ <li><a href="/en-US/docs/Web/API/Channel_Messaging_API">Canal de messages</a></li>
+</ul>
diff --git a/files/fr/web/api/extendablemessageevent/origin/index.html b/files/fr/web/api/extendablemessageevent/origin/index.html
new file mode 100644
index 0000000000..ffb8f070f3
--- /dev/null
+++ b/files/fr/web/api/extendablemessageevent/origin/index.html
@@ -0,0 +1,134 @@
+---
+title: ExtendableMessageEvent.origin
+slug: Web/API/ExtendableMessageEvent/origin
+tags:
+  - API
+  - Experimental
+  - ExtendableMessageEvent
+  - Property
+  - Reference
+  - Service Workers
+  - origin
+translation_of: Web/API/ExtendableMessageEvent/origin
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<p>La propriété en lecture seule <font face="Consolas, Liberation Mono, Courier, monospace"><strong>origin</strong></font> de l'interface {{domxref("ExtendableMessageEvent")}} retourne l'origine du  {{domxref("ServiceWorkerClient")}} qui a envoyé le message.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var myOrigin = ExtendableMessageEventInstance.origin;</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>Une {{domxref("DOMString")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Le code suivant est utilisé, dans un service worker, pour répondre à un message push en envoyant les données reçues par le  <a href="https://developer.mozilla.org/fr/docs/Web/API/PushMessageData" title="Cette documentation n'a pas encore été rédigée, vous pouvez aider en contribuant !"><code>PushMessageData</code></a> au contexte principale, via le <a href="https://developer.mozilla.org/en-US/docs/Web/API/Channel_Messaging_API">canal de messages</a>. L'objet événement de <code>onmessage</code> sera un <code>ExtendableMessageEvent.</code></p>
+
+<pre class="brush: js">var port;
+
+self.addEventListener('push', function(e) {
+  var obj = e.data.json();
+
+  if(obj.action === 'subscribe' || obj.action === 'unsubscribe') {
+    port.postMessage(obj);
+  } else if(obj.action === 'init' || obj.action === 'chatMsg') {
+    port.postMessage(obj);
+  }
+});
+
+self.onmessage = function(e) {
+  console.log(e.origin);
+  port = e.ports[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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#extendablemessage-event-origin-attribute', 'ExtendableMessageEvent.origin')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilités_des_navigateurs">Compatibilités des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("45.0")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Les service workers (et le <a href="/en-US/docs/Web/API/Push_API">Push</a>) ont été désactivés de <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 Extended Support Release</a> (ESR.)</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers" style="font-size: 14px; font-weight: normal; line-height: 1.5;">Utilisation des Service Workers</a></li>
+ <li><a href="https://github.com/mdn/sw-test" style="line-height: 1.5;">Exemple simple des service workers</a></li>
+ <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Est-ce que les service workers sont prêts ?</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Channel_Messaging_API">Canal de messages</a></li>
+</ul>
+
+<article id="wikiArticle"> </article>
+
+<p> </p>
diff --git a/files/fr/web/api/extendablemessageevent/ports/index.html b/files/fr/web/api/extendablemessageevent/ports/index.html
new file mode 100644
index 0000000000..3a27d3f199
--- /dev/null
+++ b/files/fr/web/api/extendablemessageevent/ports/index.html
@@ -0,0 +1,129 @@
+---
+title: ExtendableMessageEvent.ports
+slug: Web/API/ExtendableMessageEvent/ports
+tags:
+  - API
+  - Experimental
+  - ExtendableMessageEvent
+  - Property
+  - Reference
+  - Service Workers
+  - ports
+translation_of: Web/API/ExtendableMessageEvent/ports
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<p>La propriété en lecture seule <font face="Consolas, Liberation Mono, Courier, monospace"><strong>ports</strong></font> de l'interface {{domxref("ExtendableMessageEvent")}} retourne un tableau contenant les objects {{domxref("MessagePort")}} représentants les ports associés aux canaux de messages associés (le canal du message est envoyé).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var myPorts = ExtendableMessageEventInstance.ports;</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>Un tableau de {{domxref("MessagePort")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Le code suivant est utilisé, dans un service worker, pour répondre à un message push en envoyant les données reçues par le  <a href="https://developer.mozilla.org/fr/docs/Web/API/PushMessageData" title="Cette documentation n'a pas encore été rédigée, vous pouvez aider en contribuant !"><code>PushMessageData</code></a> au contexte principale, via le <a href="https://developer.mozilla.org/en-US/docs/Web/API/Channel_Messaging_API">canal de messages</a>. L'objet événement de <code>onmessage</code> sera un <code>ExtendableMessageEvent.</code></p>
+
+<pre class="brush: js">var port;
+
+self.addEventListener('push', function(e) {
+  var obj = e.data.json();
+
+  if(obj.action === 'subscribe' || obj.action === 'unsubscribe') {
+    port.postMessage(obj);
+  } else if(obj.action === 'init' || obj.action === 'chatMsg') {
+    port.postMessage(obj);
+  }
+});
+
+self.onmessage = function(e) {
+  port = e.ports[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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#extendablemessage-event-ports-attribute', 'ExtendableMessageEvent.ports')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilités_des_navigateurs">Compatibilités des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("45.0")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Les service workers (et <a href="/en-US/docs/Web/API/Push_API">Push</a>) on été désactivés dans <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 Extended Support Release</a> (ESR.)</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Utilisation des Service Workers</a></li>
+ <li><a href="https://github.com/mdn/sw-test">Exemple simple des service workers</a></li>
+ <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Est-ce que les service workers sont prêts ?</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Channel_Messaging_API">Canal de messages</a></li>
+</ul>
diff --git a/files/fr/web/api/featurepolicy/allowedfeatures/index.html b/files/fr/web/api/featurepolicy/allowedfeatures/index.html
new file mode 100644
index 0000000000..d4f42561b8
--- /dev/null
+++ b/files/fr/web/api/featurepolicy/allowedfeatures/index.html
@@ -0,0 +1,64 @@
+---
+title: FeaturePolicy.allowedFeatures()
+slug: Web/API/FeaturePolicy/allowedFeatures
+tags:
+  - API
+  - Directive
+  - Feature Policy
+  - Feature-Policy
+  - Reference
+translation_of: Web/API/FeaturePolicy/allowedFeatures
+---
+<p>{{APIRef("Feature Policy API")}}{{SeeCompatTable}}</p>
+
+<p><span class="seoSummary">La méthode <strong><code>allowedFeatures()</code></strong> de l'interface {{DOMxRef("FeaturePolicy")}} retourne la liste des noms des directives de fonctionnalités permises par ce Feature Policy. Elle permet l'introspection de directives spécifiques du Feature Policy sur lequel la méthode est appelée. Ainsi, la méthode <code>allowedFeatures()</code> retourne un sous-ensemble de la liste des noms de directives retournée par {{DOMxRef("FeaturePolicy.features", "features()")}}.</span></p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">const permissions = <em>FeaturePolicy</em>.allowedFeatures()
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p id="Feature_name">Aucun.</p>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un tableau de chaines de caractères représentant les noms des directives Feature Policy dont l'utilisation de la fonctionnalité associée est permise par le Feature Policy sur laquel est appelée cette méthode.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'exemple suivant affiche toutes les directives permises pour le présent document. Notez que ces fonctionnalités pourraient être restreintes par l'API Permissions, si l'utilisateur n'a pas encore accordé les droits correspondants.</p>
+
+<pre class="brush: js notranslate">// D'abord, récupère l'objet Feature Policy
+const featurePolicy = document.featurePolicy
+
+// Puis demande la liste des foncitonnalités permises
+const permissions = featurePolicy.allowedFeatures()
+
+for (const directive of permissions)
+  console.log(directive)
+</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("Feature Policy","","allowsFeature")}}</td>
+   <td>{{Spec2("Feature Policy")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.FeaturePolicy.allowedFeatures")}}</p>
diff --git a/files/fr/web/api/featurepolicy/allowsfeature/index.html b/files/fr/web/api/featurepolicy/allowsfeature/index.html
new file mode 100644
index 0000000000..508e15dbb8
--- /dev/null
+++ b/files/fr/web/api/featurepolicy/allowsfeature/index.html
@@ -0,0 +1,76 @@
+---
+title: FeaturePolicy.allowsFeature()
+slug: Web/API/FeaturePolicy/allowsFeature
+tags:
+  - API
+  - Feature Policy
+  - Feature-Policy
+  - Reference
+translation_of: Web/API/FeaturePolicy/allowsFeature
+---
+<div>{{APIRef("Feature Policy API")}}{{SeeCompatTable}}</div>
+
+<p><span class="seoSummary">La méthode <strong><code>allowsFeature()</code></strong> de l'interface {{DOMxRef("FeaturePolicy")}} permet l'introspection de directives du Feature Policy sur lequel la méthode est appelée. Elle retourne un {{JSxRef("Boolean")}} valant <code>true</code> si et seulement si la fonctionnalité dont le nom de directive est fourni est permise dans le contexte spécifié (ou le contexte par défaut si aucun contexte n'est spécifié).</span></p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">const listePermissions = <em>FeaturePolicy</em>.allowsFeature(&lt;nomDirective&gt;)
+</pre>
+
+<p>ou</p>
+
+<pre class="syntaxbox notranslate">const listePermissions = <em>FeaturePolicy</em>.allowsFeature(&lt;nomDirective&gt;, &lt;origine&gt;)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<h4 id="Nom_de_directive"><code>Nom de directive</code></h4>
+
+<p>Le nom de la directive associée à une fonctionnalité.</p>
+
+<h4 id="Origine_Optional_inline"><code>Origine</code> {{Optional_inline}}</h4>
+
+<p>Une URL d'origine sur lequel vérifier la disponibilité de la fonctionnalité. Si omise, sa valeur par défaut est utilisée.</p>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un {{JSxRef("Boolean")}} valant <code>true</code> si et seulement si la fonctionnalité est permise.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Cet exemple demande au document s'il lui est permis par Feature Policy d'utiliser l'API Camera (appareil photo). Notez que l'API Camera pourrait être restreinte par l'API Permissions si l'utilisateur n'a pas encore accordé la permission.</p>
+
+<pre class="brush: js notranslate">// D'abord, récupère le Feature Policy
+const featurePolicy = document.featurePolicy
+
+// Demande si la fonctionnalité est disponible
+const estPermise = featurePolicy.allowsFeature("camera")
+
+if (estPermise)
+  console.log("FP autorise l'appareil photo.")
+
+else
+  console.log("FP n'autorise pas l'appareil photo.")
+</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("Feature Policy","","allowsFeature")}}</td>
+   <td>{{Spec2("Feature Policy")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.FeaturePolicy.allowsFeature")}}</p>
diff --git a/files/fr/web/api/featurepolicy/features/index.html b/files/fr/web/api/featurepolicy/features/index.html
new file mode 100644
index 0000000000..c4061ce3a5
--- /dev/null
+++ b/files/fr/web/api/featurepolicy/features/index.html
@@ -0,0 +1,64 @@
+---
+title: FeaturePolicy.features()
+slug: Web/API/FeaturePolicy/features
+tags:
+  - API
+  - Feature Policy
+  - Feature-Policy
+  - Reference
+translation_of: Web/API/FeaturePolicy/features
+---
+<div>{{APIRef("Feature Policy API")}}{{SeeCompatTable}}</div>
+
+<p><span class="seoSummary">La méthode <strong><code>features()</code></strong> de l'interface {{DOMxRef("FeaturePolicy")}} retourne la liste des noms de directives de fonctionnalités supportées par l'agent utilisateur. Une fonctionnalité dont le nom apparait dans la liste pourrait n'être pas autorisée par le Feature Policy du contexte courant d'exécution ou n'être pas accessible à cause des permissions de l'utilisateur.</span></p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">const fonctionnalitésSupportées = <em>FeaturePolicy</em>.features()
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Aucun.</p>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un tableau de chaines de caractères représentant les noms des directives Feature Policy dont la fonctionnalité associée est supportée par l'agent utilisateur.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Cet exemple affiche dans la console toutes les directives supportées par votre agent utilisateur :</p>
+
+<pre class="brush: js notranslate">// Récupère l'objet Feature Policy
+const featurePolicy = document.featurePolicy
+
+// Récupère la liste des noms de directives de Feature Policy dont les fonctionnalités sont supportées
+const fonctionnalitésSupportées = featurePolicy.features()
+
+// Affiche chaque directive dans la console
+for (const directive of fonctionnalitésSupportées)
+  console.log(directive)
+</pre>
+
+<h2 id="Spécification">Spécification</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("Feature Policy","","features")}}</td>
+   <td>{{Spec2("Feature Policy")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.FeaturePolicy.features")}}</p>
diff --git a/files/fr/web/api/featurepolicy/getallowlistforfeature/index.html b/files/fr/web/api/featurepolicy/getallowlistforfeature/index.html
new file mode 100644
index 0000000000..2134dfc1ae
--- /dev/null
+++ b/files/fr/web/api/featurepolicy/getallowlistforfeature/index.html
@@ -0,0 +1,69 @@
+---
+title: FeaturePolicy.getAllowlistForFeature()
+slug: Web/API/FeaturePolicy/getAllowlistForFeature
+tags:
+  - API
+  - Feature Policy
+  - Feature-Policy
+  - Reference
+translation_of: Web/API/FeaturePolicy/getAllowlistForFeature
+---
+<div>{{APIRef("Feature Policy API")}}{{SeeCompatTable}}</div>
+
+<p><span class="seoSummary">La méthode <strong><code>getAllowlistForFeature()</code></strong> de {{DOMxRef("FeaturePolicy")}} permet d'obtenir la liste des permissions associée à une fonctionnalité pour ce Feature Policy.</span></p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">const listePermissions = <em>FeaturePolicy</em>.getAllowlistForFeature(&lt;fonctionnalité&gt;)
+</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<h4 id="Nom_de_fonctionnalité">Nom de fonctionnalité</h4>
+
+<p>Un nom de fonctionnalité doit être fourni.</p>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une <a href="fr/Web/HTTP/Feature_Policy/Using_Feature_Policy">liste de permissions</a> pour la fonctionnalité demandée est retournée.</p>
+
+<h2 id="Erreurs">Erreurs</h2>
+
+<p>La fonction jettera un avertissement si la directive de Feature Policy demandée est inconnue. Toutefois, elle retournera aussi un tableau vide, indiquant que l'utilisation de cette fonctionnalité n'est permise pour aucune origine.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Cet exemple affiche toutes les origines à qui la directive Feature Policy permet d'utiliser l'API Camera (appareil photo). Notez que l'API Camera pourrait être restreinte par l'API Permissions si l'utilisateur n'a pas encore accordé la permission.</p>
+
+<pre class="brush: js notranslate">// D'abord, récupère l'objet Feature Policy
+const featurePolicy = document.featurePolicy
+
+// Puis demande la liste pour la fonctionnalité "camera"
+const listePermissions = featurePolicy.getAllowlistForFeature("camera")
+
+for (const origine of listePermissions)
+  console.log(origine)
+</pre>
+
+<h2 id="Spécification">Spécification</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("Feature Policy","","getAllowlistForFeature")}}</td>
+   <td>{{Spec2("Feature Policy")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.FeaturePolicy.getAllowlistForFeature")}}</p>
diff --git a/files/fr/web/api/featurepolicy/index.html b/files/fr/web/api/featurepolicy/index.html
new file mode 100644
index 0000000000..e63c2d60af
--- /dev/null
+++ b/files/fr/web/api/featurepolicy/index.html
@@ -0,0 +1,68 @@
+---
+title: FeaturePolicy
+slug: Web/API/FeaturePolicy
+tags:
+  - API
+  - Feature Policy
+  - Feature-Policy
+  - FeaturePolicy
+  - Interface
+  - Permissions
+  - Privileges
+  - Reference
+  - access
+  - accès
+  - delegation
+translation_of: Web/API/FeaturePolicy
+---
+<p>{{APIRef("Feature Policy")}}</p>
+
+<p>L'interface <code>FeaturePolicy</code> de l'<a href="/en-US/docs/Web/HTTP/Feature_Policy">API Feature Policy</a> représente l'ensemble des règles appliquées au contexte d'exécution courant.</p>
+
+<h2 id="Méthodes_de_FeaturePolicy">Méthodes de FeaturePolicy</h2>
+
+<dl>
+ <dt>{{DOMxRef("FeaturePolicy.allowsFeature")}}</dt>
+ <dd>Retourne un Boolean indiquant si une fonctionnalité particulière est activée ou non dans le contexte spécifié.</dd>
+ <dt>{{DOMxRef("FeaturePolicy.features")}}</dt>
+ <dd>Retourne une liste des noms de toutes les fonctionnalités supportées par l'agent utilisateur. Une fonctionnalité dont le nom est dans la liste pourrait ne pas être autorisée par le Feature Policy du contexte courant d'exécution ou n'être pas accessible à cause des permissions de l'utilisateur.</dd>
+ <dt>{{DOMxRef("FeaturePolicy.allowedFeatures")}}</dt>
+ <dd>Retourne une liste des noms des fonctionnalités supportées par l'agent utilisateur et autorisées par le Feature Policy. Notee que les fonctionnaltiés dont le nom est dans la liste pourraient toujours être bloquées par l'absence de permission de l'utilisateur.</dd>
+</dl>
+
+<dl>
+ <dt>{{DOMxRef("FeaturePolicy.getAllowlistForFeature")}}</dt>
+ <dd>Retourne la liste de permissions pour la fonctionnalité spécifiée.</dd>
+</dl>
+
+<h2 id="Spécification">Spécification</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("Feature Policy")}}</td>
+   <td>{{Spec2("Feature Policy")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.FeaturePolicy")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPHeader("Feature-Policy")}}</li>
+ <li><a href="/en-US/docs/Web/Privacy">Anonymat et vie privée, permissions et informations sur la sécurité</a></li>
+</ul>
diff --git a/files/fr/web/api/federatedcredential/federatedcredential/index.html b/files/fr/web/api/federatedcredential/federatedcredential/index.html
new file mode 100644
index 0000000000..a1d4f0a357
--- /dev/null
+++ b/files/fr/web/api/federatedcredential/federatedcredential/index.html
@@ -0,0 +1,56 @@
+---
+title: FederatedCredential
+slug: Web/API/FederatedCredential/FederatedCredential
+tags:
+  - API
+  - Constructeur
+  - Credential Management API
+  - FederatedCredential
+  - Reference
+translation_of: Web/API/FederatedCredential/FederatedCredential
+---
+<p>{{APIRef("")}}{{Non-standard_header}}</p>
+
+<p>Le constructeur <strong><code>FederatedCredential</code></strong> permet de créer un nouvel objet {{domxref("FederatedCredential")}}.</p>
+
+<p>Pour les navigateurs qui le prennent en charge, une instance de cette classe pourra être passée comme propriété <code>credential</code> pour l'objet <code>init</code> utilisé comme argument pour {{domxref('fetch')}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var mesCredentials = new FederatedCredential(init)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>init</code></dt>
+ <dd>Les propriétés de cet objet sont :
+ <ul>
+  <li><code>provider</code> : une chaîne de caractères {{domxref("USVString")}} identifiant le fournisseur d'information d'authentification.</li>
+ </ul>
+ </dd>
+</dl>
+
+<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('Credential Management')}}</td>
+   <td>{{Spec2('Credential Management')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.FederatedCredential.FederatedCredential")}}</p>
diff --git a/files/fr/web/api/federatedcredential/index.html b/files/fr/web/api/federatedcredential/index.html
new file mode 100644
index 0000000000..af7878b9c1
--- /dev/null
+++ b/files/fr/web/api/federatedcredential/index.html
@@ -0,0 +1,79 @@
+---
+title: FederatedCredential
+slug: Web/API/FederatedCredential
+tags:
+  - API
+  - Credential Management API
+  - Interface
+  - Reference
+translation_of: Web/API/FederatedCredential
+---
+<p>{{SeeCompatTable}}{{APIRef("Credential Management API")}}</p>
+
+<p>L'interface <strong><code>FederatedCredential</code></strong>, rattachée à l'<a href="/en-US/docs/Web/API/Credential_Management_API">API Credential Management</a>, donne des détails quant aux informations d'authentification fournies par un fournisseur d'identité fédéré. Un fournisseur d'identité fédéré est une entité en laquelle un site web à confiance pour authentifier un utilisateur et qui fournit une API à cet effet. <a href="http://openid.net/developers/specs/">OpenID Connect</a> est un exemple de <em>framework</em> pour construire un fournisseur d'identité fédéré.</p>
+
+<p>Pour les navigateurs qui le prennent en charge, une instance de cette interface pourra être passée comme propriété <code>credential</code> de l'objet <code>init</code> pour la méthode globale {{domxref('fetch')}}.</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("FederatedCredential.FederatedCredential()","FederatedCredential()")}}</dt>
+ <dd>Crée un nouvel objet <code>FederatedCredential</code>.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Hérite des propriétés de l'interface parente : {{domxref("Credential")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("FederatedCredential.provider")}} {{readonlyInline}}</dt>
+ <dd>Une chaîne de caractères {{domxref("USVString")}} qui contient l'information sur le fournisseur d'authentification fédéré.</dd>
+</dl>
+
+<h3 id="Gestionnaires_d'évènements">Gestionnaires d'évènements</h3>
+
+<p>Aucun.</p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p>Aucun.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var cred = new FederatedCredential({
+  id: id,
+  name: name,
+  provider: 'https://account.google.com',
+  iconURL: iconUrl
+});
+
+// Enregistrer les informations d'authentification
+navigator.credentials.store(cred)
+  .then(function() {
+  // Faire quelque chose
+});</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('Credential Management')}}</td>
+   <td>{{Spec2('Credential Management')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.FederatedCredential")}}</p>
diff --git a/files/fr/web/api/federatedcredential/provider/index.html b/files/fr/web/api/federatedcredential/provider/index.html
new file mode 100644
index 0000000000..7eaaa61e81
--- /dev/null
+++ b/files/fr/web/api/federatedcredential/provider/index.html
@@ -0,0 +1,51 @@
+---
+title: FederatedCredential.provider
+slug: Web/API/FederatedCredential/provider
+tags:
+  - API
+  - Credential Management API
+  - FederatedCredential
+  - Propriété
+  - Reference
+translation_of: Web/API/FederatedCredential/provider
+---
+<p>{{SeeCompatTable}}{{APIRef("")}}</p>
+
+<p>La propriété <strong><code>provider</code></strong>, rattachée à l'interface {{domxref("FederatedCredential")}}, fournit une chaîne de caractères {{domxref("USVString")}} qui décrit un fournisseur d'identité fédéré.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var provider = FederatedCredential.provider</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une chaîne de caractères {{domxref("USVString")}} identifiant un fournisseur d'identité fédéré.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">// TBD</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('Credential Management')}}</td>
+   <td>{{Spec2('Credential Management')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.FederatedCredential.provider")}}</p>
diff --git a/files/fr/web/api/fetch_api/basic_concepts/index.html b/files/fr/web/api/fetch_api/basic_concepts/index.html
new file mode 100644
index 0000000000..9d87d1cc6e
--- /dev/null
+++ b/files/fr/web/api/fetch_api/basic_concepts/index.html
@@ -0,0 +1,66 @@
+---
+title: 'Fetch : concepts de départ'
+slug: Web/API/Fetch_API/Basic_concepts
+translation_of: Web/API/Fetch_API/Basic_concepts
+---
+<p>{{DefaultAPISidebar("Fetch API")}}{{draft}}</p>
+
+<div class="summary">
+<p>L'API <a href="/en-US/docs/Web/API/Fetch_API">Fetch </a>fournit une interface pour récupérer des ressources (y compris depuis le réseau). Elle paraîtra familière à quiconque aura déjà utilisé {{domxref("XMLHttpRequest")}}, mais elle fournit un jeu de fonctionnalités plus puissantes et plus souples. Cet article explique quelques uns des principes de base de l'API Fetch.</p>
+</div>
+
+<div class="note">
+<p>This article will be added to over time. If you find a Fetch concept that you feel needs explaining better, let someone know on the <a href="https://discourse.mozilla-community.org/c/mdn">MDN discussion forum</a>, or <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a> (#mdn room.)</p>
+</div>
+
+<h2 id="In_a_nutshell">In a nutshell</h2>
+
+<p>At the heart of Fetch are the Interface abstractions of HTTP {{domxref("Request")}}s, {{domxref("Response")}}s, {{domxref("Headers")}}, and {{domxref("Body")}} payloads, along with a {{domxref("GlobalFetch.fetch","global fetch")}} method for initiating asynchronous resource requests. Because the main components of HTTP are abstracted as JavaScript objects, it is easy for other APIs to make use of such functionality.</p>
+
+<p><a href="/en-US/docs/Web/API/ServiceWorker_API">Service Workers</a> is an example of an API that makes heavy use of Fetch.</p>
+
+<p>Fetch takes the asynchronous nature of such requests one step further. The API is completely {{jsxref("Promise")}}-based.</p>
+
+<h2 id="Guard">Guard</h2>
+
+<p>Guard is a feature of {{domxref("Headers")}} objects, with possible values of <code>immutable</code>, <code>request</code>, <code>request-no-cors</code>, <code>response</code>, or <code>none</code>, depending on where the header is used.</p>
+
+<p>When a new {{domxref("Headers")}} object is created using the {{domxref("Headers.Headers","Headers()")}} {{glossary("constructor")}}, its guard is set to <code>none</code> (the default). When a {{domxref("Request")}} or {{domxref("Response")}} object is created, it has an associated {{domxref("Headers")}} object whose guard is set as summarized below:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row">new object's type</th>
+   <th scope="col">creating constructor</th>
+   <th scope="col">guard setting of associated {{domxref("Headers")}} object</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td rowspan="2">{{domxref("Request")}}</td>
+   <td>{{domxref("Request.Request","Request()")}}</td>
+   <td><code>request</code></td>
+  </tr>
+  <tr>
+   <td>{{domxref("Request.Request","Request()")}} with {{domxref("Request.mode","mode")}} of <code>no-cors</code></td>
+   <td><code>request-no-cors</code></td>
+  </tr>
+  <tr>
+   <td rowspan="2">{{domxref("Response")}}</td>
+   <td>{{domxref("Response.Response","Response()")}}</td>
+   <td><code>response</code></td>
+  </tr>
+  <tr>
+   <td>{{domxref("Response.error","error()")}} or {{domxref("Response.redirect","redirect()")}} methods</td>
+   <td><code>immutable</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>A header's guard affects the {{domxref("Headers.set","set()")}}, {{domxref("Headers.delete","delete()")}}, and {{domxref("Headers.append","append()")}} methods which change the header's contents. A <code>TypeError</code> is thrown if you try to modify a {{domxref("Headers")}} object whose guard is <code>immutable</code>. However, the operation will work if</p>
+
+<ul>
+ <li>guard is <code title="">request</code> and the header <var>name</var> isn't a {{Glossary("forbidden header name")}} .</li>
+ <li>guard is <code title="">request-no-cors</code> and the header <var>name</var>/<var>value</var> is a {{Glossary("simple header")}} .</li>
+ <li>guard is <code title="">response</code> and the header <var>name</var> isn't a {{Glossary("forbidden response header name")}} .</li>
+</ul>
diff --git a/files/fr/web/api/fetch_api/index.html b/files/fr/web/api/fetch_api/index.html
new file mode 100644
index 0000000000..1c5a2370e7
--- /dev/null
+++ b/files/fr/web/api/fetch_api/index.html
@@ -0,0 +1,81 @@
+---
+title: API Fetch
+slug: Web/API/Fetch_API
+translation_of: Web/API/Fetch_API
+---
+<p>{{DefaultAPISidebar("Fetch API")}}</p>
+
+<p>L'API Fetch fournit une interface pour la récupération de ressources (e.g., à travers le réseau.) Elle paraîtra familière à tout utilisateur de {{domxref("XMLHttpRequest")}}, mais cette nouvelle API propose néanmoins un ensemble de fonctionnalités plus souples et plus puissantes.</p>
+
+<h2 id="Concepts_et_usage">Concepts et usage</h2>
+
+<p>Fetch fournit une définition générique des objets {{domxref("Request")}} et {{domxref("Response")}} (et d'autres choses impliquées par les requêtes réseau). Ainsi il sera possible de les utiliser dès que nécessaire à l'avenir, même si c'est dans le cadre de <em lang="en">service workers</em>, de l'API Cache ou d'autres mécanismes similaires qui manipulent ou modifient des requêtes et des réponses, ou n'importe quelle situation qui pourrait requérir que vous génériez vos propres réponses au moyen d'un programme.</p>
+
+<p>Elle fournit également une définition pour des concepts associés tels que CORS et la sémantique de l'en-tête HTTP <em lang="en">origin</em>, supplantant les définitions précédemment proposées ailleurs.</p>
+
+<p>Pour effectuer une requête et obtenir une ressource, utilisez la méthode {{domxref("GlobalFetch.fetch")}}. Elle est implémentée dans de multiples interfaces, et en particulier dans {{domxref("Window")}} et {{domxref("WorkerGlobalScope")}}. Ce qui la rend disponible de la même manière dans tout contexte où vous souhaiteriez récupérer des ressources.</p>
+
+<p>La méthode <code>fetch()</code> prend un argument obligatoire, le chemin vers la ressource souhaitée. Elle retourne une promesse qui résout la {{domxref("Response")}} de cette requête, qu'elle soit couronnée de succès ou non. Vous pouvez aussi optionnellement lui passer un objet d'options <code>init</code> comme second argument (voir {{domxref("Request")}}.)</p>
+
+<p>Une fois que la {{domxref("Response")}} a été retournée, il y a un ensemble de méthodes disponibles pour déterminer ce que doit être le contenu du corps et comment il doit être manipulé (voir {{domxref("Body")}}.)</p>
+
+<p>Vous pourriez créer une requête et une réponse directement en utilisant les constructeurs {{domxref("Request.Request","Request()")}} et {{domxref("Response.Response","Response()")}}, même s'il est improbable que vous procédiez ainsi. Il est plus probable cependant que leur création résulte des actions d'une autre API (par exemple, {{domxref("FetchEvent.respondWith")}} des <em lang="en">service workers</em>).</p>
+
+<div class="note">
+<p><strong>Remarque </strong>: pour en savoir plus sur l'utilisation des fonctionnalités de l'API Fetch et en approfondir les concepts, consulter respectivement <a href="/en-US/docs/Web/API/Fetch_API/Using_Fetch">Utiliser Fetch</a> et <a href="/en-US/docs/Web/API/Fetch_API/Basic_concepts">Fetch, les concepts de base</a>.</p>
+</div>
+
+<h3 id="Interrompre_un_fetch">Interrompre un fetch</h3>
+
+<p>Les navigateurs ont commencé à ajouter le support expérimental des interfaces {{DOMxRef("AbortController")}} et {{DOMxRef("AbortSignal")}} (connue aussi sous le nom d'API d'interruption), qui autorisent les opérations telles que Fetch et XHR à être interrompue si elles ne sont pas encore achevées. Voir les pages des interfaces pour plus de détails.</p>
+
+<h2 id="Les_interfaces_de_Fetch">Les interfaces de Fetch</h2>
+
+<dl>
+ <dt>{{domxref("GlobalFetch")}}</dt>
+ <dd>La méthode <code>fetch()</code> est utilisée pour récuperer une ressource.</dd>
+ <dt>{{domxref("Headers")}}</dt>
+ <dd>Représente les en-têtes de requête et de réponse, vous permettant de les consulter et de prendre différentes décisions en fonction du résultat.</dd>
+ <dt>{{domxref("Request")}}</dt>
+ <dd>Représente la requête d'une ressource.</dd>
+ <dt>{{domxref("Response")}}</dt>
+ <dd>Représente la réponse à une requête.</dd>
+</dl>
+
+<h2 id="Mixin_de_Fetch">Mixin de Fetch</h2>
+
+<dl>
+ <dt>{{domxref("Body")}}</dt>
+ <dd>Fournit les méthodes relatives au corps de la requête/réponse, vous permettant  de déclarer quel est son type de contenu et comment il doit être manipulé.</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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_Navigateurs">Compatibilité Navigateurs</h2>
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+ <li><a href="https://github.com/github/fetch">Fetch polyfill</a></li>
+ <li><a href="/en-US/docs/Web/API/Fetch_API/Basic_concepts">Fetch basic concepts</a></li>
+</ul>
diff --git a/files/fr/web/api/fetch_api/using_fetch/index.html b/files/fr/web/api/fetch_api/using_fetch/index.html
new file mode 100644
index 0000000000..9282e3c392
--- /dev/null
+++ b/files/fr/web/api/fetch_api/using_fetch/index.html
@@ -0,0 +1,314 @@
+---
+title: Utiliser Fetch
+slug: Web/API/Fetch_API/Using_Fetch
+tags:
+  - API
+  - BODY
+  - Expérimental(2)
+  - Fetch
+  - Guide
+  - Promesse
+  - Promise
+  - Response
+  - request
+translation_of: Web/API/Fetch_API/Using_Fetch
+---
+<p>{{DefaultAPISidebar("Fetch API")}}</p>
+
+<div class="summary">
+<p>L'<a href="/fr/docs/Web/API/Fetch_API">API Fetch</a> fournit une interface JavaScript pour l'accès et la manipulation des parties de la pipeline HTTP, comme les requêtes et les réponses. Cela fournit aussi une méthode globale {{domxref("GlobalFetch.fetch","fetch()")}} qui procure un moyen facile et logique de récupérer des ressources à travers le réseau de manière asynchrone.</p>
+</div>
+
+<p>Ce genre de fonctionnalité était auparavant réalisé avec {{domxref("XMLHttpRequest")}}. Fetch fournit une meilleure alternative qui peut être utilisée facilement par d’autres technologies comme {{domxref("ServiceWorker_API", "Service Workers")}}. Fetch fournit aussi un endroit unique et logique pour la définition d'autres concepts liés à HTTP comme CORS et les extensions d'HTTP.</p>
+
+<h2 id="Létat_actuel_du_support_par_les_navigateurs">L'état actuel du support par les navigateurs</h2>
+
+<p>Le support de Fetch est à ses débuts, mais les choses progressent. Il a été activé par défaut sur Firefox 39 et supérieur, et sur Chrome 42 et supérieur.</p>
+
+<p>Si vous souhaitez l'utiliser maintenant, il y a un <a class="external" href="https://github.com/github/fetch">polyfill Fetch</a> disponible qui recrée la fonctionnalité pour les navigateurs qui ne le supportent pas. Gardez à l'esprit qu'il est au stade expérimental et pas encore complètement fonctionnel.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Certaines préoccupations ont été soulevées sur le fait que la <a class="external" href="https://fetch.spec.whatwg.org/">spécification de Fetch</a> est en contradition avec la <a class="external" href="https://streams.spec.whatwg.org/">spécification de Streams</a>; cependant, les prévisions montrent une intention d'intégrer Streams avec Fetch: pour plus d'informations reportez vous à <a class="external" href="https://github.com/yutakahirano/fetch-with-streams/">Fetch API integrated with Streams</a>.</p>
+</div>
+
+<h2 id="Détection_de_la_fonctionnalité">Détection de la fonctionnalité</h2>
+
+<p>Le support de l'API Fetch peut être détecté en vérifiant l'existence de {{domxref("Headers")}}, {{domxref("Request")}}, {{domxref("Response")}} ou {{domxref("GlobalFetch.fetch","fetch()")}} sur la portée de {{domxref("Window")}} ou de {{domxref("Worker")}}. Par exemple, vous pouvez faire cela dans votre script :</p>
+
+<pre class="brush: js">if (window.fetch) {
+    // exécuter ma requête fetch ici
+} else {
+    // Faire quelque chose avec XMLHttpRequest?
+}</pre>
+
+<h2 id="Créer_une_requête_fetch">Créer une requête fetch</h2>
+
+<p>Une requête fetch basique est vraiment simple à initier. Jetez un coup d'œil au code suivant :</p>
+
+<pre class="brush: js">const myImage = document.querySelector('img');
+
+fetch('flowers.jpg')
+.then(function(response) {
+  return response.blob();
+})
+.then(function(myBlob) {
+  const objectURL = URL.createObjectURL(myBlob);
+  myImage.src = objectURL;
+});
+
+</pre>
+
+<p>Ici nous récupérons une image à travers le réseau et l'insérons dans un élément {{htmlelement("img")}}. L'utilisation la plus simple de <code>fetch()</code> prend un argument — le chemin de la ressource que nous souhaitons récupérer — et retourne une promesse (promise) contenant, en réponse, un objet (de type {{domxref("Response")}}).</p>
+
+<p>Bien sûr, il s'agit seulement d'une réponse HTTP, pas exactement de l'image. Pour extraire le contenu de l'image de la réponse, nous utilisons la méthode {{domxref("Body.blob","blob()")}} (définie sur le mixin {{domxref("Body")}}, qui est implémenté autant par les objets {{domxref("Request")}} que par les objets {{domxref("Response")}}).</p>
+
+<div class="note">
+<p><strong>Note </strong>: Le mixin Body a aussi des méthodes similaires pour extraire d'autres types contenu ; pour plus d'informations regardez la section {{anch("Corps")}}.</p>
+</div>
+
+<p>Un objet <code>objectURL</code> est ensuite créé à partir du {{domxref("Blob")}} extrait, puis est inseré dans {{domxref("img")}}.</p>
+
+<p>Les requêtes Fetch sont controllées par la directive <code>connect-src</code> du <a href="/fr/docs/Security/CSP/CSP_policy_directives">Content Security Policy</a> plutôt que par la directive de la ressource dont il s’agit de la récupération.</p>
+
+<h3 id="Fournir_des_options_à_la_requête">Fournir des options à la requête</h3>
+
+<p>La méthode <code>fetch()</code> accepte un second paramètre, optionnel ; un objet <code>init</code> qui vous permet de contrôler un certain nombre de réglages :</p>
+
+<pre class="brush: js">var myHeaders = new Headers();
+
+var myInit = { method: 'GET',
+               headers: myHeaders,
+               mode: 'cors',
+               cache: 'default' };
+
+fetch('flowers.jpg',myInit)
+.then(function(response) {
+  return response.blob();
+})
+.then(function(myBlob) {
+  var objectURL = URL.createObjectURL(myBlob);
+  myImage.src = objectURL;
+});
+
+</pre>
+
+<p>Reportez-vous à {{domxref("GlobalFetch.fetch","fetch()")}} pour la liste complète des options disponibles, et plus de détails.</p>
+
+<h3 id="Vérifier_que_la_récupération_a_réussi">Vérifier que la récupération a réussi</h3>
+
+<p>Une promesse {{domxref("GlobalFetch.fetch","fetch()")}} va retourner une {{jsxref("TypeError")}} quand un problème réseau s'est produit. Cependant, il peut aussi s'agir d'un problème de permission ou quelque chose de similaire — un code HTTP 404 ne constitue pas une erreur réseau, par exemple. Un bon test de la réussite de <code>fetch()</code> devrait inclure la vérification que la promesse soit résolue, puis vérifier que la propriété {{domxref("Response.ok")}} ait la valeur <em>true</em>. Le code devrait ressembler à ce qui suit:</p>
+
+<pre class="brush: js">fetch('flowers.jpg').then(function(response) {
+  if(response.ok) {
+    response.blob().then(function(myBlob) {
+      var objectURL = URL.createObjectURL(myBlob);
+      myImage.src = objectURL;
+    });
+  } else {
+    console.log('Mauvaise réponse du réseau');
+  }
+})
+.catch(function(error) {
+  console.log('Il y a eu un problème avec l\'opération fetch: ' + error.message);
+});</pre>
+
+<h3 id="Fournir_votre_propre_objet_requête">Fournir votre propre objet requête</h3>
+
+<p>Plutôt que de transmettre le chemin de la ressource que vous souhaitez récupérer avec l'appel <code>fetch()</code>, vous pouvez créer un objet de requête en utilisant le constructeur {{domxref("Request.Request","Request()")}}, et le transmettre à la méthode <code>fetch()</code> en tant qu’argument:</p>
+
+<pre class="brush: js">var myHeaders = new Headers();
+
+var myInit = { method: 'GET',
+               headers: myHeaders,
+               mode: 'cors',
+               cache: 'default' };
+
+var myRequest = new Request('flowers.jpg',myInit);
+
+fetch(myRequest,myInit)
+.then(function(response) {
+  return response.blob();
+})
+.then(function(myBlob) {
+  var objectURL = URL.createObjectURL(myBlob);
+  myImage.src = objectURL;
+});</pre>
+
+<p><code>Request()</code> accepte exactement les mêmes paramètres que la méthode <code>fetch()</code>. Vous pouvez même lui transmettre un objet Request existant pour en créer une copie :</p>
+
+<pre class="brush: js">var anotherRequest = new Request(myRequest,myInit);</pre>
+
+<p>C'est très pratique, si le corps de la requête et de la réponse ne sont utilisés qu'une fois seulement. Cette manière de faire une copie permet de ré-utiliser la requête/réponse, en changeant juste les options du <code>init</code> si nécessaire.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Il y a aussi une méthode {{domxref("Request.clone","clone()")}} qui créer une copie. <span id="result_box" lang="fr"><span>Cela a</span> <span>une sémantique légèrement différente</span> <span>à l'autre</span> <span>méthode de copie</span></span>— La première va échouer si l'ancien corps de la requête a déjà été lu (même pour copier une réponse), alors qu'avec <code>clone()</code> non.</p>
+</div>
+
+<h2 id="En-têtes_Headers">En-têtes (Headers)</h2>
+
+<p>L'interface {{domxref("Headers")}} vous permet de créer vos propres objets d'en-têtes via le constructeur {{domxref("Headers.Headers","Headers()")}}. Un objet en-tête est un simple ensemble de plusieurs clé-valeurs:</p>
+
+<pre class="brush: js">var content = "Hello World";
+var myHeaders = new Headers();
+myHeaders.append("Content-Type", "text/plain");
+myHeaders.append("Content-Length", content.length.toString());
+myHeaders.append("X-Custom-Header", "ProcessThisImmediately");</pre>
+
+<p>On peut atteindre le même résultat en transmettant un tableau de tableaux ou un objet littéral au constructeur:</p>
+
+<pre class="brush: js">myHeaders = new Headers({
+  "Content-Type": "text/plain",
+  "Content-Length": content.length.toString(),
+  "X-Custom-Header": "ProcessThisImmediately",
+});</pre>
+
+<p>Le contenu peut être interrogé et récupéré:</p>
+
+<pre class="brush: js">console.log(myHeaders.has("Content-Type")); // true
+console.log(myHeaders.has("Set-Cookie")); // false
+myHeaders.set("Content-Type", "text/html");
+myHeaders.append("X-Custom-Header", "AnotherValue");
+
+console.log(myHeaders.get("Content-Length")); // 11
+console.log(myHeaders.getAll("X-Custom-Header")); // ["ProcessThisImmediately", "AnotherValue"]
+
+myHeaders.delete("X-Custom-Header");
+console.log(myHeaders.getAll("X-Custom-Header")); // [ ]</pre>
+
+<p>Certaines de ces opérations sont seulement utiles dans {{domxref("ServiceWorker_API","ServiceWorkers")}}, mais elles fournissent une bien meilleur API pour la manipulation des en-têtes.</p>
+
+<p>Toutes les méthodes d'en-tête provoquent une erreur TypeError si un nom d’en-tête utilisé n'est pas un nom d’en-tête HTTP valide. Les opérations de mutation vont provoquer une erreur TypeError si il y a une protection immutable (voir ci-dessous). Sinon elles vont échouer en silence. Par exemple :</p>
+
+<pre class="brush: js">var myResponse = Response.error();
+try {
+  myResponse.headers.set("Origin", "http://mybank.com");
+} catch(e) {
+  console.log("Ne peut pas prétendre être une banque!");
+}</pre>
+
+<p>Un bon cas d'utilisation des en-têtes est de vérifier que le type de contenu récupéré est correct avant de poursuivre le traitement. Par exemple:</p>
+
+<pre class="brush: js">fetch(myRequest).then(function(response) {
+  var contentType = response.headers.get("content-type");
+  if(contentType &amp;&amp; contentType.indexOf("application/json") !== -1) {
+    return response.json().then(function(json) {
+      // traitement du JSON
+    });
+  } else {
+    console.log("Oops, nous n'avons pas du JSON!");
+  }
+});</pre>
+
+<h3 id="Protection_Guard">Protection (Guard)</h3>
+
+<p>Puisque les en-têtes peuvent être envoyés dans les requêtes et reçus dans les réponses, et ont diverses limitations sur quelles informations peuvent et doivent être mutables, les objets en-tête ont une propriété <em>guard</em>. Ce n'est pas exposé au Web, mais cela définit quelle opération de mutation est autorisée sur l'objet en-tête.</p>
+
+<p>Les valeurs possibles de la propriété <em>guard</em> sont:</p>
+
+<ul>
+ <li><code>none</code>: défaut.</li>
+ <li><code>request</code>: guard pour l’en-tête obtenu d'une requête ({{domxref("Request.headers")}}).</li>
+ <li><code>request-no-cors</code>: guard pour l'en-tête obtenu d'une requête créé avec {{domxref("Request.mode")}} <code>no-cors</code>.</li>
+ <li><code>response</code>: guard pour l'en-tête obtenu d'une réponse ({{domxref("Response.headers")}}).</li>
+ <li><code>immutable</code>: majoritairement utilisé pour les ServiceWorkers; retourne un objet en-tête en lecture seule.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: Vous ne pouvez pas ajouter ou définir sur une requête protegée une en-tête <code>Content-Length</code>. De manière similaire, ajouter <code>Set-Cookie</code> dans l'en-tête de réponse n'est pas autorisé: les ServiceWorkers ne sont pas autorisés à gérer des cookies via des réponses synthétisées.</p>
+</div>
+
+<h2 id="Réponses">Réponses</h2>
+
+<p>Comme vous l'avez vu ci-dessus, des instances de {{domxref("Response")}} sont retournées quand la promesse de <code>fetch()</code> est résolue.</p>
+
+<p>Elles peuvent aussi être programmées dans le code via JavaScript, mais c'est seulement utile concernant les {{domxref("ServiceWorker_API", "ServiceWorkers")}}, quand vous retournez, pour une requête reçue, une réponse personnalisée en utilisant la méthode {{domxref("FetchEvent.respondWith","respondWith()")}}:</p>
+
+<pre class="brush: js">var myBody = new Blob();
+
+addEventListener('fetch', function(event) {
+  event.respondWith(new Response(myBody, {
+    headers: { "Content-Type" : "text/plain" }
+  });
+)});</pre>
+
+<p>Le constructeur {{domxref("Response.Response","Response()")}} prend deux arguments optionnels —le corps de la réponse, et un objet d'options (similaire à l'objet que {{domxref("Request.Request","Request()")}} accepte).</p>
+
+<p>Les propriétés de réponse les plus communes que vous allez utiliser sont:</p>
+
+<ul>
+ <li>{{domxref("Response.status")}} —Un entier (valeur par défaut 200) contenant le code de statut de la réponse.</li>
+ <li>{{domxref("Response.statusText")}} — Une chaine de caractères (valeur par défaut "OK"), qui correspond au message du statut HTTP.</li>
+ <li>{{domxref("Response.ok")}} —vu précedemment, c'est un raccourci pour vérifier que le code de statut et bien compris entre 200 et 299 inclus. Retourne un {{domxref("Boolean")}}.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: La méthode statique {{domxref("Response.error","error()")}} retourne simplement une réponse d'erreur. De manière similaire, {{domxref("Response.redirect","redirect()")}} retourne une réponse de redirection vers une URL spécifique. Elles sont aussi pertinentes pour les Service Workers.</p>
+</div>
+
+<h2 id="Corps">Corps</h2>
+
+<p>Autant une requête qu'une réponse peut contenir un corps avec des données. Un corps est une instance de n'importe lequel des types suivants:</p>
+
+<ul>
+ <li>{{domxref("ArrayBuffer")}}</li>
+ <li>{{domxref("ArrayBufferView")}} (Uint8Array et ses proches)</li>
+ <li>{{domxref("Blob")}}/Fichier</li>
+ <li>chaine de caractères</li>
+ <li>{{domxref("URLSearchParams")}}</li>
+ <li>{{domxref("FormData")}}</li>
+</ul>
+
+<p>Le mixin {{domxref("Body")}} définit les méthodes suivantes pour extraire le corps (implémenté autant par la {{domxref("Request")}} que par la {{domxref("Response")}}). Elles retournent toutes une promesse qui sera éventuellement résolue avec le contenu actuel.</p>
+
+<ul>
+ <li>{{domxref("Body.arrayBuffer","arrayBuffer()")}}</li>
+ <li>{{domxref("Body.blob","blob()")}}</li>
+ <li>{{domxref("Body.json","json()")}}</li>
+ <li>{{domxref("Body.text","text()")}}</li>
+ <li>{{domxref("Body.formData","formData()")}}</li>
+</ul>
+
+<p>Ceci rend l'usage de données non textuelles plus facile qu’avec XHR.</p>
+
+<p>Le corps des requêtes peut être défini en passant les paramètres du corps:</p>
+
+<pre class="brush: js">var form = new FormData(document.getElementById('login-form'));
+fetch("/login", {
+  method: "POST",
+  body: form
+})</pre>
+
+<p>Les Requêtes et Réponses (et par extension la fonction <code>fetch()</code>), vont tenter de déterminer le type de contenu. Une requête va automatiquement définir un en-tête <code>Content-Type</code>  si rien n'est défini dans le dictionnaire [NDLT: configuration d'initialisation].</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('Fetch')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateur">Compatibilité navigateur</h2>
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}</p>
+
+<div id="compat-mobile"></div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/ServiceWorker_API">API ServiceWorker</a></li>
+ <li><a href="/fr/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/fr/docs/Web/HTTP">HTTP</a></li>
+ <li><a class="external" href="https://github.com/github/fetch">Polyfill pour Fetch</a></li>
+ <li><a class="external" href="https://github.com/mdn/fetch-examples/">Exemples de Fetch sur Github</a></li>
+</ul>
diff --git a/files/fr/web/api/fetchevent/index.html b/files/fr/web/api/fetchevent/index.html
new file mode 100644
index 0000000000..ae50977073
--- /dev/null
+++ b/files/fr/web/api/fetchevent/index.html
@@ -0,0 +1,159 @@
+---
+title: FetchEvent
+slug: Web/API/FetchEvent
+translation_of: Web/API/FetchEvent
+---
+<p>{{APIRef("Service Workers API")}}{{ SeeCompatTable() }}</p>
+
+<p>Le paramètre passé au gestionnaire {{domxref("ServiceWorkerGlobalScope.onfetch")}}, <code>FetchEvent</code> représente une action de récupération qui est délivrée sur la {{domxref("ServiceWorkerGlobalScope")}} d'un {{domxref("ServiceWorker")}}. Il contient des informations relatives à la requête et la réponse associée, et fourni la méthode {{domxref("FetchEvent.respondWith", "FetchEvent.respondWith()")}} , qui permet de renvoyer une réponse arbitraire à la page controlée.</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("FetchEvent.FetchEvent()")}}</dt>
+ <dd>Crée un nouvel objet <code>FetchEvent</code>.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Hérite de son ancêtre, {{domxref("Event")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("FetchEvent.isReload")}} {{readonlyInline}}</dt>
+ <dd>Retourne un {{jsxref("Boolean")}} qui est à <code>true</code> si l'évènement a été délivré avec l'intention de recharger la page, ou <code>false</code> sinon. Par exemple, cliquer sur le bouton recharger du navigateur est considéré comme une intention de recharger la page, tandis que cliquer sur un lien ou sur le bouton précédent du navigateur n'est pas considéré comme tel.</dd>
+ <dt>{{domxref("FetchEvent.request")}} {{readonlyInline}}</dt>
+ <dd>Retourne la {{domxref("Request")}} qui a déclenché l'évènement.</dd>
+ <dt>{{domxref("FetchEvent.clientId")}} {{readonlyInline}}</dt>
+ <dd>Retourne l'id du {{domxref("Client")}} controlé par le service worker en cours.</dd>
+</dl>
+
+<h3 id="Propriétés_dépréciées">Propriétés dépréciées</h3>
+
+<dl>
+ <dt>{{domxref("FetchEvent.client")}} {{readonlyInline}}</dt>
+ <dd>Retourne le {{domxref("Client")}} controlé par le service worker en cours.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Hérite de son parent, </em><em>{{domxref("ExtendableEvent")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("FetchEvent.respondWith()")}}</dt>
+ <dd>Promesse qui est résolue en retournant une {{domxref("Response")}} ou une <a href="http://fetch.spec.whatwg.org/#concept-network-error">erreur réseau</a>  à <code style="font-style: normal;"><a href="http://fetch.spec.whatwg.org/#concept-fetch">Fetch</a></code>.</dd>
+ <dt>{{domxref("ExtendableEvent.waitUntil", "ExtendableEvent.waitUntil()")}}</dt>
+ <dd>
+ <p>Etend la durée de vie de l'évènement. Cette méthode est destinée à être appelée dans l'{{domxref("EventHandler")}} {{event("install")}} pour le worker {{domxref("ServiceWorkerRegistration.installing", "installing")}}, et dans l'{{domxref("EventHandler")}} {{event("active")}} pour le worker {{domxref("ServiceWorkerRegistration.active", "active")}}.</p>
+ </dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Ce extrait de code provient de l'exemple <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/prefetch/service-worker.js">Service Worker Fetch</a> (<a href="https://googlechrome.github.io/samples/service-worker/prefetch/">lancer l'exemple dans le navigateur</a>). Dans une partie antérieure du code,  un {{domxref("InstallEvent")}} contrôle la mise en cache de plusieurs ressources. Le gestionnaire {{domxref("ServiceWorkerGlobalScope.onfetch")}} attends ensuite l'évènement {{event("fetch")}} . Une fois déclenché, {{domxref("FetchEvent.respondWith()")}} retourne une promesse à la page contrôlée. Cette promesse est résolue avec comme valeur de retour la première requête d'URL qui correspond dans l'objet {{domxref("Cache")}}. Si aucune correspondance n'est trouvée (i.e. la ressource n'a pas été mise en cache pendant la phase d'installation), le code va récupérer une réponse depuis le réseau.</p>
+
+<p>Le code gère aussi les exceptions émises depuis l'opération {{domxref("ServiceWorkerGlobalScope.fetch()")}}. A noter que qu'une réponse d'erreur HTTP (e.g., 404) ne déclenche pas d'exception. Elle retourne un objet de réponse normal avec le code d'erreur approprié.</p>
+
+<pre class="brush: js">self.addEventListener('fetch', function(event) {
+  console.log('Gestion de l\'évènement de fetch pour', event.request.url);
+
+  event.respondWith(
+    caches.match(event.request).then(function(response) {
+      if (response) {
+        console.log('Réponse trouvée en cache:', response);
+
+        return response;
+      }
+      console.log('Pas de réponse trouvée en cache. Sur le point de la récupérer via le réseau...');
+
+      return fetch(event.request).then(function(response) {
+        console.log('La réponse du réseau est:', response);
+
+        return response;
+      }).catch(function(error) {
+        console.error('Récupération échouée:', error);
+
+        throw error;
+      });
+    })
+  );
+});</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('Service Workers', '#fetch-event-section', 'FetchEvent')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{ CompatGeckoDesktop("44.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>24</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoMobile("44.0") }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(44.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+ <li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a></li>
+</ul>
diff --git a/files/fr/web/api/file/filename/index.html b/files/fr/web/api/file/filename/index.html
new file mode 100644
index 0000000000..50942c002b
--- /dev/null
+++ b/files/fr/web/api/file/filename/index.html
@@ -0,0 +1,38 @@
+---
+title: File.fileName
+slug: Web/API/File/fileName
+tags:
+  - API
+  - DOM
+  - Fichier
+  - Nom
+  - Propriétés
+translation_of: Web/API/File/fileName
+---
+<p>{{APIRef("File API")}}{{non-standard_header}}</p>
+
+<p>{{obsolete_header(7.0)}}</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Renvoie le nom du fichier. Pour des raisons de sécurité, le chemin est exclu de la propriété.</p>
+
+<div class="note">Cette propriété est dépréciée. Utilisez {{domxref("File.name")}} à la place.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre>var name = instanceOfFile.fileName</pre>
+
+<h2 id="Valeur">Valeur</h2>
+
+<p>Une chaîne de caractères.</p>
+
+<h2 id="Specification" name="Specification">Specification</h2>
+
+<p>Ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("File.name")}}</li>
+</ul>
diff --git a/files/fr/web/api/file/filesize/index.html b/files/fr/web/api/file/filesize/index.html
new file mode 100644
index 0000000000..b7d03c1e7d
--- /dev/null
+++ b/files/fr/web/api/file/filesize/index.html
@@ -0,0 +1,37 @@
+---
+title: File.fileSize
+slug: Web/API/File/fileSize
+tags:
+  - API
+  - DOM
+  - Fichier
+  - Propriétés
+translation_of: Web/API/File/fileSize
+---
+<p>{{APIRef("File API") }}{{non-standard_header}}</p>
+
+<p>{{obsolete_header(7.0)}}</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Renvoie la taille du fichier en octets.</p>
+
+<div class="note">Cette propriété est dépréciée. Utilisez {{domxref("Blob.size")}} à la place.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre>var size = <em>instanceOfFile</em>.fileSize</pre>
+
+<h2 id="Valeur">Valeur</h2>
+
+<p>Un nombre.</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<p>Ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Blob.size")}}</li>
+</ul>
diff --git a/files/fr/web/api/file/index.html b/files/fr/web/api/file/index.html
new file mode 100644
index 0000000000..ef512c1156
--- /dev/null
+++ b/files/fr/web/api/file/index.html
@@ -0,0 +1,119 @@
+---
+title: File
+slug: Web/API/File
+tags:
+  - DOM
+  - File
+translation_of: Web/API/File
+---
+<div>{{APIRef}}</div>
+
+<p>L’interface <strong><code>File</code></strong> fournit des informations sur des fichiers et permet au code JavaScript d’une une page web d’accéder à leurs contenus.</p>
+
+<p>Les objets <code>File</code> sont généralements obtenus à partir de :</p>
+
+<ul>
+ <li>l’objet {{domxref("FileList")}} retourné lorsque qu’un utilisateur ou une utilisatrice sélectionne des fichiers grâce à un élément {{HTMLElement("input")}} ;</li>
+ <li>l’objet {{domxref("DataTransfer")}} d’une opération de glisser-déposer ;</li>
+ <li>l’API <code>mozGetAsFile()</code> de l’élément {{domxref("HTMLCanvasElement")}}.</li>
+</ul>
+
+<p>Dans Gecko, le code privilégié peut créer des objets <code>File</code> représentant tout fichier local sans nécessiter une interaction de l’utilisateur ou de l’utilisatrice (voir {{anch("Notes d’implémentation")}} pour plus d’informations.)</p>
+
+<p>Un objet <code>File</code> est un genre spécifique de {{domxref("Blob")}}, et peut être utilisé dans tout contexte où un blob peut l’être. En particulier, {{domxref("FileReader")}}, {{domxref("URL.createObjectURL()")}}, {{domxref("ImageBitmapFactories.createImageBitmap()", "createImageBitmap()")}}, et {{domxref("XMLHttpRequest", "", "send()")}} acceptent indifféremment des <code>Blob</code>s et des <code>File</code>s.</p>
+
+<p>Voir <a href="/fr/docs/Web/API/File/Using_files_from_web_applications">Utiliser des fichiers à partir d'applications web</a> pour plus d’informations et des exemples.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("File.File", "File()")}}</dt>
+ <dd>Renvoie un <code>File</code> nouvellement construit.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("File.lastModified")}} {{readonlyinline}}</dt>
+ <dd>Renvoie le temps de dernière modification du fichier, exprimé en millisecondes écoulées depuis l’ère UNIX (1er janvier 1970 à minuit).</dd>
+ <dt>{{domxref("File.lastModifiedDate")}} {{readonlyinline}} {{deprecated_inline}} {{gecko_minversion_inline("15.0")}}</dt>
+ <dd>Renvoie la {{jsxref("Date")}} de dernière modification du fichier.</dd>
+ <dt>{{domxref("File.name")}} {{readonlyinline}}</dt>
+ <dd>Renvoie le nom du fichier.</dd>
+ <dt>{{domxref("File.webkitRelativePath")}} {{readonlyinline}} {{non-standard_inline}}</dt>
+ <dd>Renvoie le chemin auquel l’URL du {{domxref("File")}} est relative.</dd>
+</dl>
+
+<p><code>File</code> implémente {{domxref("Blob")}}, et ainsi possède les propriétés suivantes :</p>
+
+<dl>
+ <dt>{{domxref("File.size")}} {{readonlyinline}}</dt>
+ <dd>Renvoie la taille du fichier en octets.</dd>
+ <dt>{{domxref("File.type")}} {{readonlyinline}}</dt>
+ <dd>Renvoie le type <a href="/fr/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types">MIME</a>du fichier.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>L’interface <code>File</code> ne définit aucune méthode, mais hérite des méthodes de l’interface {{domxref("Blob")}} :</em></p>
+
+<dl>
+ <dt>{{domxref("Blob.slice()", "Blob.slice([start[, end[, contentType]]])")}}</dt>
+ <dd>Renvoie un nouvel objet <code>Blob</code> contenant les données du blob source comprises dans l’intervalle d’octets spécifié.</dd>
+ <dt>{{domxref("Blob.stream()", "Blob.stream()")}}</dt>
+ <dd>Transforme le <code>File</code> en un {{domxref("ReadableStream")}} pouvant être utilisé pour lire le contenu du <code>File</code>.</dd>
+ <dt>{{domxref("Blob.text()", "Blob.text()")}}</dt>
+ <dd>Transforme le <code>File</code> en un flux (<em>stream</em>) et le lit en entier. Renvoie une {{jsxref("promise", "promesse")}} qui se résoud en une {{domxref("USVString")}} (texte).</dd>
+ <dt>{{domxref("Blob.arrayBuffer()", "Blob.arrayBuffer()")}}</dt>
+ <dd>Transforme le <code>File</code> en un flux (<em>stream</em>) et le lit en entier. Retourne une {{jsxref("promise", "promesse")}} qui se résoud en un {{domxref("ArrayBuffer")}}.</dd>
+</dl>
+
+<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('File API')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">La table de compatibilité sur cette page est générée à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request.</em></div>
+
+<p>{{Compat("api.File")}}</p>
+
+<h3 id="Notes_d’implémentation">Notes d’implémentation</h3>
+
+<ul>
+ <li>Dans Gecko, vous pouvez utiliser API depuis du code chrome. Voir <a href="/en-US/docs/Extensions/Using_the_DOM_File_API_in_chrome_code">Using the DOM File API in chrome code</a> pour plus de détails. Pour l’utiliser depuis du code chrome, JSM, ou portée Bootstrap, vous devez l’importer en utilisant <code><a href="/en-US/docs/Components.utils.importGlobalProperties">Cu.importGlobalProperties</a>(['File']);</code></li>
+ <li>À partir de Gecko 6.0 {{geckoRelease("6.0")}}, le code privilégié (par exemple au sein d’une extension) peut passer un objet {{interface("nsIFile")}} au constructeur DOM <code>File</code> pour spécifier le fichier à référencer.</li>
+ <li>À partir de Gecko 8.0 {{geckoRelease("8.0")}}, vous pouvez utiliser <code>new File</code> pour créer des objets <code>File</code> depuis des composants XPCOM au lieu de devoir instancier les objets {{interface("nsIDOMFile")}} directement. Contrairement à {{domxref("Blob")}}, le constructeur prend le nom de fichier comme second argument. Le nom de fichier peut être une chaîne quelconque.
+  <pre class="syntaxbox">new File(
+  Array parts,
+  String filename,
+  BlobPropertyBag properties
+);</pre>
+ </li>
+ <li>Les propriétés et méthodes non standard suivantes ont été retirées de Gecko 7 {{geckoRelease("7.0")}} : {{domxref("File.fileName")}}, {{domxref("File.fileSize")}}, {{domxref("File.getAsBinary()")}}, {{domxref("File.getAsDataURL()")}}, {{domxref("File.getAsText()","File.getAsText(string encoding)")}} ({{bug("661876")}}). Les propriétés standard {{domxref("File.name")}}, {{domxref("Blob.size")}}, et les méthodes de {{domxref("FileReader")}} devraient être utilisées à la place.</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/File/Using_files_from_web_applications">Utiliser des fichiers à partir d'applications web</a></li>
+ <li>{{domxref("FileReader")}}</li>
+ <li><a href="/en-US/docs/Extensions/Using_the_DOM_File_API_in_chrome_code">Using the DOM File API in chrome code</a> (pour du code privilégié s’exécutant dans Gecko, tel que des extensions de Firefox)</li>
+</ul>
diff --git a/files/fr/web/api/file/using_files_from_web_applications/index.html b/files/fr/web/api/file/using_files_from_web_applications/index.html
new file mode 100644
index 0000000000..f477f8f651
--- /dev/null
+++ b/files/fr/web/api/file/using_files_from_web_applications/index.html
@@ -0,0 +1,494 @@
+---
+title: Utiliser des fichiers à partir d'applications web
+slug: Web/API/File/Using_files_from_web_applications
+tags:
+  - Files
+  - HTML5
+  - Téléchargement
+  - ajax upload
+translation_of: Web/API/File/Using_files_from_web_applications
+---
+<p>{{APIRef("File API")}}{{draft}}</p>
+
+<p>Grâce à l'API File ajoutée au DOM avec HTML5, il est maintenant possible depuis une page web de proposer à l'utilisateur de sélectionner des fichiers locaux, puis d'en lire le contenu. Cette sélection est possible en utilisant un élément HTML {{ HTMLElement("input") }} ou par glisser-déposer.</p>
+
+<p>Vous pouvez utiliser si vous le souhaitez l'API DOM File depuis du code chrome d'extensions ou d'un autre navigateur ; notez cependant qu'il existe des fonctionnalités additionnelles auxquelles il vous faudra être attentif. Reportez-vous à <a href="/en/Extensions/Using_the_DOM_File_API_in_chrome_code" title="en/Extensions/Using the DOM File API in chrome code">Using the DOM File API in chrome code</a> pour plus de détails.</p>
+
+<h2 id="Accéder_au(x)_fichier(s)_sélectionné(s)">Accéder au(x) fichier(s) sélectionné(s)</h2>
+
+<p>Examinez ce code HTML :</p>
+
+<pre class="brush: html">&lt;input type="file" id="input"&gt;</pre>
+
+<p>L'API File permet d'accèder à la {{ domxref("FileList") }} contenant les objets {{ domxref("File") }} qui correspondent aux fichiers selectionnés par l'utilisateur.</p>
+
+<p>Si l'utilisateur ne sélectionne qu'un seul fichier, on ne prendra en compte que le premier élément de la {{ domxref("FileList") }}.</p>
+
+<p>Pour accéder à un fichier sélectionné en utilisant un sélecteur DOM classique :</p>
+
+<pre class="brush: js">var fichierSelectionne = document.getElementById('input').files[0];</pre>
+
+<p>Pour accèder à un fichier sélectionné en utilisant un sélecteur <a href="http://jquery.com/" title="http://jquery.com/">jQuery</a> :</p>
+
+<pre class="brush: js"><code>var </code>fichierSelectionne <code>= $('#input').get(0).files[0];
+
+var </code>fichierSelectionne <code>= $('#input')[0].files[0];</code></pre>
+
+<div class="note">
+<p>Si vous rencontrez une erreur "<code>files is undefined</code>" : vous n'avez pas sélectionné le bon élément HTML, en oubliant qu'un sélecteur jQuery renvoie une liste d'éléments DOM correspondants. Récupérez l'élément DOM pour appeler sa méthode "<code>files</code>".</p>
+</div>
+
+<h2 id="Accéder_au(x)_fichier(s)_sélectionné(s)_sur_un_événement_change">Accéder au(x) fichier(s) sélectionné(s) sur un événement <em>change</em></h2>
+
+<p>Il est en outre possible (mais pas obligatoire) d'accéder à la {{ domxref("FileList") }} via l'événement <code>change</code> :</p>
+
+<pre class="brush: html">&lt;input type="file" id="input" onchange="handleFiles(this.files)"&gt;</pre>
+
+<p>La fonction <code>handleFiles()</code> est appelée avec un objet {{ domxref("FileList") }} contenant des objets {{ domxref("File") }} représentant les fichiers sélectionnés par l'utilisateur.</p>
+
+<p>Si vous souhaitez permettre à l'utilisateur de sélectionner plusieurs fichiers simmultanément, utilisez simplement l'attribut <code>multiple</code> de l'élément <code>input</code> :</p>
+
+<pre class="brush: html">&lt;input type="file" id="input" <strong>multiple</strong> onchange="handleFiles(this.files)"&gt;</pre>
+
+<p>La liste de fichiers passée à la fonction <code>handleFiles()</code> contient dans ce cas un seul objet {{ domxref("File") }} pour chaque fichier sélectionné par l'utilisateur.</p>
+
+<h3 id="Ajouter_dynamiquement_un_gestionnaire_d'événement_change">Ajouter dynamiquement un gestionnaire d'événement <em>change</em></h3>
+
+<p>Dans le cas où votre champ input a été créé à l'aide d'une bibliothèque JavaScript comme <a class="external" href="http://www.jquery.com/" title="http://www.jquery.com/">jQuery</a>, il vous faudra utiliser la méthode {{ domxref("EventTarget.addEventListener()") }} pour ajouter le gestionnaire d'événement <code>change</code>, comme cela :</p>
+
+<pre class="brush: js">var inputElement = document.getElementById("inputField");
+inputElement.addEventListener("change", handleFiles, false);
+function handleFiles() {
+  var fileList = this.files; /* Vous pouvez maintenant manipuler la liste de fichiers */
+}</pre>
+
+<p>Notez que dans ce cas la fonction <code>handleFiles()</code> est elle-même le gestionnaire d'événement, contrairement à l'exemple précédent où un gestionnaire d'événement l'appelle en lui passant un paramètre.</p>
+
+<h2 id="Obtenir_des_informations_sur_le(s)_fichier(s)_sélectionné(s)">Obtenir des informations sur le(s) fichier(s) sélectionné(s)</h2>
+
+<p>L'objet {{ domxref("FileList") }} exposé par le DOM fournit la liste de tous les fichiers sélectionnés par l'utilisateur, chaque fichier étant identifié par un objet {{ domxref("File") }}. Vous pouvez en déterminer le nombre en récupérant la valeur de l'attribut <code>length</code> de la liste de fichiers :</p>
+
+<pre class="brush: js"><code>var numFiles = files.length;</code></pre>
+
+<p>Chaque objet {{ domxref("File") }} peut être simplement récupéré en accédant à la liste comme vous le feriez pour un tableau :</p>
+
+<pre class="brush: js">for (var i = 0, numFiles = files.length; i &lt; numFiles; i++) {
+  var file = files[i];
+  ..
+}
+</pre>
+
+<p>La boucle parcourt l'ensemble des fichiers de la liste.</p>
+
+<p>L'objet {{ domxref("File") }} expose trois attributs accessibles en lecture seulement et contenant des informations utiles sur le fichier.</p>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Une chaîne de caractères contenant le nom du fichier uniquement, sans aucune information relative au chemin d'accès.</dd>
+ <dt><code>size</code></dt>
+ <dd>La taille du fichier exprimée en octets, sous la forme d'un entier de 64 bits.</dd>
+ <dt><code>type</code></dt>
+ <dd>Le type MIME du fichier sous la forme d'une chaîne de caractères, ou bien une chaîne vide <code>""</code> si le type ne peut pas être déterminé.</dd>
+</dl>
+
+<h3 id="Exemple_Afficher_la_taille_d'un_ou_plusieurs_fichiers">Exemple : Afficher la taille d'un ou plusieurs fichiers</h3>
+
+<p>L'exemple suivant montre une utilisation possible de la propriété <code>size</code> :</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta charset="UTF-8"&gt;
+&lt;title&gt;File(s) size&lt;/title&gt;
+&lt;script&gt;
+function updateSize() {
+  var nBytes = 0,
+      oFiles = document.getElementById("uploadInput").files,
+      nFiles = oFiles.length;
+  for (var nFileId = 0; nFileId &lt; nFiles; nFileId++) {
+    nBytes += oFiles[nFileId].size;
+  }
+  var sOutput = nBytes + " bytes";
+  // partie de code facultative pour l'approximation des multiples
+  for (var aMultiples = ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"], nMultiple = 0, nApprox = nBytes / 1024; nApprox &gt; 1; nApprox /= 1024, nMultiple++) {
+    sOutput = nApprox.toFixed(3) + " " + aMultiples[nMultiple] + " (" + nBytes + " bytes)";
+  }
+  // fin de la partie de code facultative
+  document.getElementById("fileNum").innerHTML = nFiles;
+  document.getElementById("fileSize").innerHTML = sOutput;
+}
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body onload="updateSize();"&gt;
+&lt;form name="uploadForm"&gt;
+&lt;p&gt;&lt;input id="uploadInput" type="file" name="myFiles" onchange="updateSize();" multiple&gt; selected files: &lt;span id="fileNum"&gt;0&lt;/span&gt;; total size: &lt;span id="fileSize"&gt;0&lt;/span&gt;&lt;/p&gt;
+&lt;p&gt;&lt;input type="submit" value="Send file"&gt;&lt;/p&gt;
+&lt;/form&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Utiliser_des_éléments_input_masqués_de_type_file_avec_l'événement_click">Utiliser des éléments <em>input </em>masqués de type <em>file </em>avec l'événement <code>click</code></h2>
+
+<p>Il est possible depuis Gecko 2.0 {{ geckoRelease("2.0") }} de masquer l'élément {{ HTMLElement("input") }} de type file, généralement considéré comme laid, et de présenter votre propre interface pour l'ouverture du sélecteur de fichiers et l'affichage du ou des fichiers sélectionnés par l'utilisateur. Vous devez pour cela attribuer à votre élément <code>input</code> un style incluant <code>display:none</code> et gérer l'événement <code>click</code> sur votre élément {{ HTMLElement("input") }}.</p>
+
+<p>Examinez cet extrait de code HTML :</p>
+
+<pre class="brush: html">&lt;input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)"&gt;
+&lt;a href="#" id="fileSelect"&gt;Select some files&lt;/a&gt;</pre>
+
+<p>Le code gérant l'événement <code>click</code> peut être écrit de cette façon :</p>
+
+<pre class="brush: js">var fileSelect = document.getElementById("fileSelect"),
+  fileElem = document.getElementById("fileElem");
+
+fileSelect.addEventListener("click", function (e) {
+  if (fileElem) {
+    fileElem.click();
+  }
+  e.preventDefault(); // empêche la navigation vers "#"
+}, false);
+</pre>
+
+<p>Vous pouvez bien sûr appliquer le style de votre choix au nouveau bouton d'ouverture du sélecteur de fichiers.</p>
+
+<h2 id="Utiliser_un_élément_label_pour_activer_un_élément_input_masqué_de_type_file">Utiliser un élément <em>label </em>pour activer un élément <em>input </em>masqué de type <em>file</em></h2>
+
+<p>Un élément {{ HTMLElement("label") }} peut être utilisé pour ouvrir le sélecteur de fichiers sans l'aide de JavaScript (méthode <code>click()</code>).</p>
+
+<p>Examinez ce morceau de code HTML :</p>
+
+<pre class="brush: html">&lt;input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)"&gt; &lt;label for="fileElem"&gt;Select some files&lt;/label&gt;</pre>
+
+<p>Il n'y a pas besoin d'ajouter du code JavaScript pour l'appel à <code>fileElem.click()</code>. Vous pouvez dans ce cas aussi appliquer le style de votre choix à l'élément <code>label</code>.</p>
+
+<h2 id="Sélectionner_des_fichiers_en_utilisant_drag_and_drop">Sélectionner des fichiers en utilisant <em>drag and drop</em></h2>
+
+<p>Vous pouvez aussi autoriser l'utilisateur à glisser-déposer (<em>drag and drop</em>) des fichiers dans votre application web.</p>
+
+<p>La première étape consiste définir une zone de dépôt. La délimitation exacte de la partie de votre page qui acceptera des dépôts dépend de la conception de votre application, mais il est facile d'autoriser un élément à capter des événements <code>drop</code> :</p>
+
+<pre class="brush: js">var dropbox;
+
+dropbox = document.getElementById("dropbox");
+dropbox.addEventListener("dragenter", dragenter, false);
+dropbox.addEventListener("dragover", dragover, false);
+dropbox.addEventListener("drop", drop, false);
+</pre>
+
+<p>Dans cet exemple, l'élément portant l'ID <code>dropbox</code> devient notre zone de dépôt en y ajoutant les gestionnaires d'écoute des événements {{event('dragenter')}}, {{event('dragover')}}, et {{event('drop')}}.</p>
+
+<p>Nous n'avons pas vraiment besoin dans notre cas de gérer les événements <code>dragenter</code> et <code>dragover</code>. Les deux fonctions associées restent donc assez simples, elle ne servent qu'à stopper la propagation de l'événement et empêcher le déclenchement de l'action par défaut :</p>
+
+<pre class="brush: js">function dragenter(e) {
+  e.stopPropagation();
+  e.preventDefault();
+}
+
+function dragover(e) {
+  e.stopPropagation();
+  e.preventDefault();
+}
+</pre>
+
+<p>La vraie magie est dans la fonction <code>drop()</code> :</p>
+
+<pre class="brush: js">function drop(e) {
+  e.stopPropagation();
+  e.preventDefault();
+
+  var dt = e.dataTransfer;
+  var files = dt.files;
+
+  handleFiles(files);
+}</pre>
+
+<p>Nous récupérons ici le champ <code>dataTransfer</code> de l'événement puis nous en extrayons la liste des fichiers que nous passons à <code>handleFiles()</code>. À partir de ce point les fichiers se manipulent de la même façon, que l'utilisateur ait employé l'élément <code>input</code> ou le glisser-déposer.</p>
+
+<h2 id="Exemple_Afficher_les_miniatures_d'images_sélectionnées_par_l'utilisateur">Exemple : Afficher les miniatures d'images sélectionnées par l'utilisateur</h2>
+
+<p>Admettons que vous développiez actuellement le prochain site génial de partage de photos, et que vous souhaitiez utiliser HTML5 pour afficher une prévisualisation miniature des images avant que l'utilisateur ne les télécharge vraiment sur le serveur. Vous pouvez définir votre élément <code>input</code> ou votre zone de dépôt comme étudié précédemment et les faire appeler une fonction telle que la fonction <code>handleFiles()</code> montrée ci-dessous :</p>
+
+<pre class="brush: js">function handleFiles(files) {
+  for (var i = 0; i &lt; files.length; i++) {
+    var file = files[i];
+    var imageType = /^image\//;
+
+    if (!imageType.test(file.type)) {
+      continue;
+    }
+
+    var img = document.createElement("img");
+    img.classList.add("obj");
+    img.file = file;
+    preview.appendChild(img); // En admettant que "preview" est l'élément div qui contiendra le contenu affiché.
+
+    var reader = new FileReader();
+    reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
+    reader.readAsDataURL(file);
+  }
+}
+</pre>
+
+<p>La boucle qui manipule dans notre cas les fichiers sélectionnés par l'utilisateur examine l'attribut type de chaque fichier et contrôle qu'il s'agit bien d'une image (en utilisant une expression régulière pour vérifier la correspondance du type MIME avec la chaîne "<code>image/*</code>"). Nous créons un nouvel élément img pour chaque fichier image. Vous pouvez utiliser du CSS pour définir d'agréables bordures ou effets d'ombres ou encore pour préciser la taille de l'image [de l'élément <code>img</code>, NDT], même si cela n'est pas nécessaire ici.</p>
+
+<p>La classe CSS ob<code>j</code> est ajoutée à chaque élément image afin de faciliter sa recherche dans l'arbre du DOM, ainsi qu'un attribut <code>file</code> spécifiant le {{ domxref("File") }} correspondant et qui nous permettra de récupérer les fichiers images lors du téléchargement effectif vers le serveur. Nous utilisons {{ domxref("Node.appendChild()") }} pour ajouter la nouvelle miniature à la zone de prévisualisation de notre document.</p>
+
+<p>Nous définissons ensuite le {{ domxref("FileReader") }} qui gérera le chargement asynchrone de l'image et son lien à l'élément <code>img</code>. Après avoir créé le nouvel objet <code>FileReader</code>, nous définissons sa fonction <code>onload</code> pouis nous appelons <code>readAsDataURL()</code> pour démarrer l'opération de lecture en tâche de fond. Lorsque le chargement du fichier image est complètement terminé, son contenu est converti en <code>data</code> : c'est l'URL transmise à la fonction de rappel <code>onload</code>. Notre implémentation de cette procédure définit l'image chargée comme valeur de l'attribut <code>src</code> de l'élement <code>img</code>, faisant ainsi apparaître l'image dans la miniature à l'écran.</p>
+
+<h2 id="Utiliser_un_objet_URLs">Utiliser un objet URLs</h2>
+
+<p>Gecko 2.0 {{ geckoRelease("2.0") }} introduit la prise en charge des méthodes du DOM {{ domxref("window.URL.createObjectURL()") }} et {{ domxref("window.URL.revokeObjectURL()") }}. Elles vous permettent de créer des chaînes d'URL simples qui peuvent être utilisées pour repérer n'importe quelle donnée pouvant être référencée à l'aide d'un objet DOM {{ domxref("File") }}, y compris des fichiers locaux sur l'ordinateur de l'utilisateur.</p>
+
+<p>Vous pouvez procéder ainsi pour créer un objet URL lorsque vous souhaitez référencer un objet {{ domxref("File") }} par URL depuis HTML :</p>
+
+<pre class="brush: js"><code>var objectURL = window.URL.createObjectURL(fileObj);</code></pre>
+
+<p>L'objet URL est une chaîne identifiant l'objet {{ domxref("File") }}. Un objet URL unique est créé à chaque fois que vous appelez {{ domxref("window.URL.createObjectURL()") }}, même si vous avez déjà créé un objet URL pour ce fichier. Chacun d'eux doit être libéré ; bien qu'ils soient automatiquement libérés lorsque le document est déchargé, vous devez explicitement les libérer en appelant {{ domxref("window.URL.revokeObjectURL()") }}  si votre page les utilise de manière dynamique :</p>
+
+<pre class="brush: js"><code>window.URL.revokeObjectURL(objectURL);</code></pre>
+
+<h2 id="Exemple_Utilisation_de_l'objet_URLs_pour_afficher_des_images">Exemple : Utilisation de l'objet URLs pour afficher des images</h2>
+
+<p>Cet exemple utilise des objets URLs pour afficher des vignettes d'image. Il affiche en outre d'autres informations, dont leurs noms et leurs tailles.</p>
+
+<p>Le code HTML qui présente l'interface ressemble à ceci:</p>
+
+<pre class="brush: html"><code>&lt;input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)"&gt;
+&lt;a href="#" id="fileSelect"&gt;Sélectionnez des fichiers&lt;/a&gt;
+&lt;div id="fileList"&gt;
+  &lt;p&gt;Aucun fichier sélectionné !&lt;/p&gt;
+&lt;/div&gt;</code></pre>
+
+<p>Ce code définit notre élément fichier {{ HTMLElement("input") }}, ainsi qu'un lien qui appelle le sélecteur de fichiers (l'élément <code>input</code> étant masqué pour éviter l'affichage de la si peu séduisante interface utilisateur). Vous pouvez vous reporter à la section {{ anch("Using hidden file input elements using the click() method") }} pour des explications détaillées sur cette partie de code ainsi que sur la méthode appelant le sélecteur de fichiers.</p>
+
+<p>Voici la méthode <code>handleFiles()</code> :</p>
+
+<pre class="brush: js"><code>window.URL = window.URL || window.webkitURL;
+
+var fileSelect = document.getElementById("fileSelect"),
+    fileElem = document.getElementById("fileElem"),
+    fileList = document.getElementById("fileList");
+
+fileSelect.addEventListener("click", function (e) {
+  if (fileElem) {
+    fileElem.click();
+  }
+  e.preventDefault(); // empêche la navigation vers "#"
+}, false);
+
+function handleFiles(files) {
+  if (!files.length) {
+    fileList.innerHTML = "&lt;p&gt;Aucun fichier sélectionné !&lt;/p&gt;";
+  } else {
+    fileList.innerHTML = "";
+    var list = document.createElement("ul");
+    fileList.appendChild(list);
+    for (var i = 0; i &lt; files.length; i++) {
+      var li = document.createElement("li");
+      list.appendChild(li);
+
+      var img = document.createElement("img");
+      img.src = window.URL.createObjectURL(files[i]);
+      img.height = 60;
+      img.onload = function() {
+        window.URL.revokeObjectURL(this.src);
+      }
+      li.appendChild(img);
+      var info = document.createElement("span");
+      info.innerHTML = files[i].name + ": " + files[i].size + " bytes";
+      li.appendChild(info);
+    }
+  }
+}</code></pre>
+
+<p>Nous commençons par la recherche de l'URL du {{ HTMLElement("div") }} dont l'ID est <code>fileList</code>, qui est le bloc dans lequel nous inérerons notre liste de fichiers, ainsi que les miniatures..</p>
+
+<p>Si l'objet {{ domxref("FileList") }} passé à <code>handleFiles()</code> est <code>null</code>, nous définissons simplement le contenu HTML du bloc pour pour afficher "Aucun fichier sélectionné ! ". Nous commençons dans le cas contraire à construire notre liste de fichiers, comme ceci :</p>
+
+<ol>
+ <li>Une nouvelle liste non ordonnée ({{ HTMLElement("ul") }}) est créée.</li>
+ <li>L'élement de la liste nouvellement créée est ajoutée dans le bloc {{ HTMLElement("div") }} en appelant sa méthode {{ domxref("Node.appendChild()") }}.</li>
+ <li>Pour chaque {{ domxref("File") }} dans le {{ domxref("FileList") }} représenté par <code>files</code> :
+  <ol>
+   <li>Création et ajout à la liste d'un nouvel élément de liste {{ HTMLElement("li") }}.</li>
+   <li>Création d'un nouvel élément image {{ HTMLElement("img") }}.</li>
+   <li>Définition d'un nouvel objet URL représentant le fichier comme source de l'image, en utilisant {{ domxref("window.URL.createObjectURL()") }} pour la création de l'URL du Blob.</li>
+   <li>Définition de la hauteur de l'image à 60 pixels.</li>
+   <li>Définition du gestionnaire pour l'événement <code>load</code> de l'image afin de libérer l'objet URL, devenu inutile une fois l'image chargée. La libération est effectuée en appelant la méthode {{ domxref("window.URL.revokeObjectURL()") }} avec en paramètre la chaîne de l'objet URL de l'attribut <code>img.src</code>.</li>
+   <li>Ajout du nouvel élément à la liste.</li>
+  </ol>
+ </li>
+</ol>
+
+<h2 id="Exemple_Télécharger_sur_le_serveur_un_fichier_sélectionné_par_l'utilisateur">Exemple : Télécharger sur le serveur un fichier sélectionné par l'utilisateur</h2>
+
+<p>Vous pourriez en outre vouloir autoriser l'utilisateur à télécharger sur un serveur (<em>upload</em>) un ou plusieurs fichiers sélectionnés (tels que les images sélectionnées en suivant l'exemple précedent). Cette opération peut être très facilement effectuée de manière asynchrone.</p>
+
+<h3 id="Créer_les_tâches_de_téléchargement">Créer les tâches de téléchargement</h3>
+
+<p>En poursuivant avec le code générant des miniatures de l'exemple précédent, rappelez-vous que chaque image de miniature s'est vue ajouter la classe CSS <code>obj</code>, ainsi que le {{ domxref("File") }} correspondant stocké dans l'attribut <code>file</code>. Cela nous permet de sélectionner très facilement toutes les images choisies par l'utilisateur pour le téléchargement à l'aide de {{ domxref("Document.querySelectorAll()") }}, comme cela :</p>
+
+<pre class="brush: js">function sendFiles() {
+  var imgs = document.querySelectorAll(".obj");
+
+  for (var i = 0; i &lt; imgs.length; i++) {
+    new FileUpload(imgs[i], imgs[i].file);
+  }
+}
+</pre>
+
+<p>La ligne 2 crée un tableau, nommé <code>imgs</code>, de tous les éléments de la classe CSS <code>obj</code> dans le document ; s'agit dans notre cas de toutes les miniatures d'images. Une fois la liste établie, c'est un jeu d'enfant de la parcourir et de créer une nouvelle instance de <code>FileUpload</code> pour chacun de ses éléments. Chacune de ces instances gère le téléchargement du fichier correspondant vers le serveur.</p>
+
+<h3 id="Manipuler_le_processus_de_téléchargement_pour_un_fichier">Manipuler le processus de téléchargement pour un fichier</h3>
+
+<p>La fonction <code>FileUpload</code> accepte deux arguments : un élement image et un fichier à partir duquel les données de l'image sont lues.</p>
+
+<pre class="brush: js">function FileUpload(img, file) {
+  var reader = new FileReader();
+  this.ctrl = createThrobber(img);
+  var xhr = new XMLHttpRequest();
+  this.xhr = xhr;
+
+  var self = this;
+  this.xhr.upload.addEventListener("progress", function(e) {
+        if (e.lengthComputable) {
+          var percentage = Math.round((e.loaded * 100) / e.total);
+          self.ctrl.update(percentage);
+        }
+      }, false);
+
+  xhr.upload.addEventListener("load", function(e){
+          self.ctrl.update(100);
+          var canvas = self.ctrl.ctx.canvas;
+          canvas.parentNode.removeChild(canvas);
+      }, false);
+  xhr.open("POST", "http://demos.hacks.mozilla.org/paul/demos/resources/webservices/devnull.php");
+  xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');
+  reader.onload = function(evt) {
+    xhr.sendAsBinary(evt.target.result);
+  };
+  reader.readAsBinaryString(file);
+}
+</pre>
+
+<p>La fonction <code>FileUpload()</code> montrée ci-dessus crée un indicateur d'activité (<em>throbber</em>) pour l'affichage de la progression, ainsi qu'un {{ domxref("XMLHttpRequest") }} pour gérer le téléchargement des données.</p>
+
+<p>Il est nécessaire de prévoir quelques étapes préparatoires avant le téléchargement effectif des données :</p>
+
+<ol>
+ <li>Le processus d'écoute de l'événement <code>progress</code> du XMLHttpRequest est écrit de telle façon que l'indicateur d'activité affiche l'information de progression du téléchargement la plus récente. </li>
+ <li>Le gestionnaire de l'événement <code>load</code> du XMLHttpRequest est écrit pour que l'indicateur d'activité affiche 100% afin d'être sûr atteigne effectivement les 100%, même en cas granularité anormale lors du processus. Le gestionnaire supprime ensuite l'indicateur devenu inutile, entraînant sa disparition à la fin normale du téléchargement.</li>
+ <li>La requête de téléchargement de l'image est ouverte par l'appel à la méthode <code>open()</code> du XMLHttpRequest, démarrant la création d'une requête POST.</li>
+ <li>Le type MIME pour le téléchargement est défini en appelant la fonction <code>overrideMimeType()</code> du <code>XMLHttpRequest</code>. Nous utilisons ici un type MIME générique ; vous pouvez selon les cas définir ou ne définir aucun type MIME.</li>
+ <li>L'objet <code>FileReader</code> est utilisé pour la conversion du fichier en chaîne binaire.</li>
+ <li>La fonction <code>send()</code> du  XMLHttpRequest est appelée en dernier pour télécharger le contenu du fichier complètement chargé.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note :</strong> la méthode non standard <code>sendAsBinary</code> utilisée dans l'exemple ci-dessus est obsolète depuis Gecko 31 {{ geckoRelease(31) }} ; utilisez plutôt la méthode standard <code>send(Blob data)</code>. </p>
+</div>
+
+<h3 id="Gérer_le_processus_de_téléchargement_d'un_fichier_de_manière_asynchrone">Gérer le processus de téléchargement d'un fichier de manière asynchrone</h3>
+
+<pre class="brush: html">&lt;?php
+if (isset($_FILES['myFile'])) {
+    // Exemple:
+    move_uploaded_file($_FILES['myFile']['tmp_name'], "uploads/" . $_FILES['myFile']['name']);
+    exit;
+}
+?&gt;
+&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+    &lt;title&gt;dnd binary upload&lt;/title&gt;
+    &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
+    &lt;script type="text/javascript"&gt;
+        function sendFile(file) {
+            var uri = "/index.php";
+            var xhr = new XMLHttpRequest();
+            var fd = new FormData();
+
+            xhr.open("POST", uri, true);
+            xhr.onreadystatechange = function() {
+                if (xhr.readyState == 4 &amp;&amp; xhr.status == 200) {
+                    // Handle response.
+                    alert(xhr.responseText); // handle response.
+                }
+            };
+            fd.append('myFile', file);
+            // Initiate a multipart/form-data upload
+            xhr.send(fd);
+        }
+
+        window.onload = function() {
+            var dropzone = document.getElementById("dropzone");
+            dropzone.ondragover = dropzone.ondragenter = function(event) {
+                event.stopPropagation();
+                event.preventDefault();
+            }
+
+            dropzone.ondrop = function(event) {
+                event.stopPropagation();
+                event.preventDefault();
+
+                var filesArray = event.dataTransfer.files;
+                for (var i=0; i&lt;filesArray.length; i++) {
+                    sendFile(filesArray[i]);
+                }
+            }
+         }
+    &lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+    &lt;div&gt;
+        &lt;div id="dropzone" style="margin:30px; width:500px; height:300px; border:1px dotted grey;"&gt;Drag &amp; drop your file here...&lt;/div&gt;
+    &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Exemple_Utiliser_un_objet_URLs_pour_afficher_un_PDF">Exemple : Utiliser un objet URLs pour afficher un PDF</h2>
+
+<p>Vous pouvez utiliser un objet URLs pour d'autres choses que les images ! Ils peuvent être utilisés pour afficher des fichiers PDF incorporés ou toutes autres ressources affichables par le navigateur.</p>
+
+<p>Sous Firefox, la constante de configuration <code>pdfjs.disabled</code> doit être définie à <code>false</code> {{non-standard_inline()}} pour afficher les PDF encapsulés dans dans un {{ HTMLElement("iframe") }} plutôt que de s'en voir proposer le téléchargement sur le PC local.</p>
+
+<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>iframe</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>viewer<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p>Et voici comment modifier la valeur de l'attribut <code>src</code> :</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> obj_url <span class="operator token">=</span> window<span class="punctuation token">.</span>URL<span class="punctuation token">.</span><span class="function token">createObjectURL</span><span class="punctuation token">(</span>blob<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> iframe <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'viewer'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+iframe<span class="punctuation token">.</span><span class="function token">setAttribute</span><span class="punctuation token">(</span><span class="string token">'src'</span><span class="punctuation token">,</span> obj_url<span class="punctuation token">)</span><span class="punctuation token">;</span>
+window<span class="punctuation token">.</span>URL<span class="punctuation token">.</span><span class="function token">revokeObjectURL</span><span class="punctuation token">(</span>obj_url<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Exemple_Utiliser_un_objet_URLs_avec_d'autres_types_de_fichiers">Exemple : Utiliser un objet URLs avec d'autres types de fichiers</h2>
+
+<p>Vous pouvez manipuler de la même façon des fichiers d'autres formats. Voici comment prévisualiser une vidéo téléchargée sur le serveur :</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> video <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'video'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> obj_url <span class="operator token">=</span> window<span class="punctuation token">.</span>URL<span class="punctuation token">.</span><span class="function token">createObjectURL</span><span class="punctuation token">(</span>blob<span class="punctuation token">)</span><span class="punctuation token">;</span>
+video<span class="punctuation token">.</span>src <span class="operator token">=</span> obj_url<span class="punctuation token">;</span>
+video<span class="punctuation token">.</span><span class="function token">play</span><span class="punctuation token">(</span><span class="punctuation token">)</span>
+window<span class="punctuation token">.</span>URL<span class="punctuation token">.</span><span class="function token">revokeObjectURL</span><span class="punctuation token">(</span>obj_url<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<ul>
+ <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#file-upload-state-%28type=file%29" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/number-state.html#concept-input-type-file-selected">File upload state</a> (HTML 5 working draft)</li>
+ <li><a href="http://www.w3.org/TR/FileAPI/" title="http://www.w3.org/TR/FileAPI/">File API</a></li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{ domxref("File") }}</li>
+ <li>{{ domxref("FileList") }}</li>
+ <li>{{ domxref("FileReader") }}</li>
+ <li><a href="/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest">Utiliser XMLHttpRequest</a></li>
+ <li><a href="/en/Extensions/Using_the_DOM_File_API_in_chrome_code" title="en/Extensions/Using the DOM File API in chrome code">Using the DOM File API in chrome code</a></li>
+ <li>{{ domxref("XMLHttpRequest") }}</li>
+ <li><a class="external" href="http://www.jquery.com/" title="http://www.jquery.com/">jQuery</a> JavaScript library</li>
+</ul>
diff --git a/files/fr/web/api/filelist/index.html b/files/fr/web/api/filelist/index.html
new file mode 100644
index 0000000000..286acf16bc
--- /dev/null
+++ b/files/fr/web/api/filelist/index.html
@@ -0,0 +1,152 @@
+---
+title: FileList
+slug: Web/API/FileList
+tags:
+  - API
+  - File API
+  - Files
+translation_of: Web/API/FileList
+---
+<div>{{APIRef("File API")}}{{gecko_minversion_header("1.9")}}</div>
+
+<p>Un objet <strong><code>FileList</code></strong> est renvoyé par la propriété <code>files</code> d'un élément HTML {{HTMLElement("input")}}. Il permet d'accéder à la liste des fichiers sélectionnés via l'élément <code>&lt;input type="file"&gt;</code>. Cet objet peut également être utilisé pour les fichiers glissés-déposés dans du contenu web via l'<a href="/fr/docs/Web/API/API_HTML_Drag_and_Drop">API Drag &amp; Drop</a> (voir l'objet <a href="/fr/docs/Web/API/DataTransfer" title="DragDrop/DataTransfer"><code>DataTransfer</code></a> pour plus de détails).</p>
+
+<h2 id="Utiliser_une_liste_de_fichiers">Utiliser une liste de fichiers</h2>
+
+<p>Tous les éléments <code>&lt;input&gt;</code> possèdent un attribut <code>files</code> de type <code>FileList</code> qui permet d'accéder aux éléments de cette liste. Ainsi, si le code HTML utilisé est :</p>
+
+<pre>&lt;input id="fileItem" type="file"&gt;
+</pre>
+
+<p>On pourra utiliser la ligne suivant pour récupérer le premier fichier de la liste sous la forme d'un objet <a href="/fr/docs/Web/API/File" title="DOM/File"><code>File</code></a> :</p>
+
+<pre class="brush: js">var file = document.getElementById('fileItem').files[0]</pre>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Attribut</td>
+   <td class="header">Type</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>length</code></td>
+   <td><code>integer</code></td>
+   <td>Une valeur en lecture seule qui indique le nombre de fichier dans la liste.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<h3 id="item()"><code>item()</code></h3>
+
+<p>Cette méthode renvoie un objet <a href="/fr/docs/Web/API/File" title="DOM/File"><code>File</code></a> qui représente le fichier à l'indice fourni.</p>
+
+<pre> File item(
+   index
+ );
+</pre>
+
+<h4 id="Paramètres">Paramètres</h4>
+
+<dl>
+ <dt><code>index</code></dt>
+ <dd>Un indice (commençant à partir de zéro) indiquant le fichier qu'on souhaite récupérer de la liste.</dd>
+</dl>
+
+<h4 id="Valeur_de_retour">Valeur de retour</h4>
+
+<p>L'objet <a href="/fr/docs/Web/API/File" title="DOM/File"><code>File</code></a> qui représente le fichier demandé.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, on parcourt l'ensemble des fichiers sélectionnés par l'utilisateur via un élément {{HTMLElement("input")}} :</p>
+
+<pre class="brush:js">// fileInput est un élément HTML input : &lt;input type="file" id="myfileinput" multiple&gt;
+var fileInput = document.getElementById("myfileinput");
+
+// files est un objet FileList (semblable à NodeList)
+var files = fileInput.files;
+var file;
+
+// on parcourt les fichiers
+for (var i = 0; i &lt; files.length; i++) {
+    // on récupère le i-ème fichier
+    file = files.item(i);
+    // ou encore
+    file = files[i];
+    console.log(file.name);
+}
+</pre>
+
+<h3 id="Exemple_complet">Exemple complet</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;input id="myfiles" multiple type="file"&gt;</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">var recupererFichiers = function() {
+  var fichiersInput = document.querySelector("#myFiles");
+  var fichiers = fichiersInput.files;
+
+  var nbFichiers = fichiers.length;
+  var i = 0;
+  while(i &lt; nbFichiers){
+    var fichier = fichiers[i];
+    console.log(fichier.name);
+    i++;
+  }
+}
+
+// On invoque cette fonction pour chaque modification apportée à l'élément
+// input
+document.querySelector("#myFiles").onchange = recupererFichiers;</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Exemple_complet")}}</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('File API', '#filelist-section', 'FileList')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#concept-input-type-file-selected', 'selected files')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.FileList")}}</p>
+
+
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/File/Using_files_from_web_applications" title="Using files from web applications">Utiliser des fichiers dans des applications web</a></li>
+ <li><code><a href="/fr/docs/Web/API/File" title="DOM/File">File</a></code></li>
+ <li><code><a href="/fr/docs/Web/API/FileReader" title="DOM/FileReader">FileReader</a></code></li>
+</ul>
diff --git a/files/fr/web/api/filereader/filereader/index.html b/files/fr/web/api/filereader/filereader/index.html
new file mode 100644
index 0000000000..53c3cedb1e
--- /dev/null
+++ b/files/fr/web/api/filereader/filereader/index.html
@@ -0,0 +1,59 @@
+---
+title: FileReader()
+slug: Web/API/FileReader/FileReader
+tags:
+  - API
+  - Constructeur
+  - FileReader
+  - Reference
+translation_of: Web/API/FileReader/FileReader
+---
+<p><strong><code>FileReader()</code></strong>  est un constructeur qui permet de créer un nouvel objet FileReader.</p>
+
+<p>Pour plus de details à propos de <code>FileReader</code>, visiter <a href="/en-US/docs/Web/API/File/Using_files_from_web_applications">Using files from web applications</a>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var reader = new FileReader();</pre>
+
+<h3 id="Paramèteres">Paramèteres</h3>
+
+<p>Aucun.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'extrait de code ci-dessous montre la création d'un objet <code><a href="/en-US/docs/Web/API/FileReader">FileReader</a></code> en utilisant le constructeur <code>FileReader()</code>  ainsi qu'une utilisation subséquente de cet objet:</p>
+
+<pre class="brush: js">function printFile(file) {
+  var reader = new FileReader();
+  reader.onload = function(evt) {
+    console.log(evt.target.result);
+  };
+  reader.readAsText(file);
+}
+</pre>
+
+<h2 id="Caractéristiques">Caractéristiques</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Caractéristique</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('File API')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Définition Initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/File/Using_files_from_web_applications">Using files from web applications</a></li>
+</ul>
diff --git a/files/fr/web/api/filereader/index.html b/files/fr/web/api/filereader/index.html
new file mode 100644
index 0000000000..15696cfe7a
--- /dev/null
+++ b/files/fr/web/api/filereader/index.html
@@ -0,0 +1,196 @@
+---
+title: FileReader
+slug: Web/API/FileReader
+tags:
+  - API
+  - File
+  - Interface
+  - Référence(2)
+translation_of: Web/API/FileReader
+---
+<div>{{APIRef("File API")}}</div>
+
+<p>L'objet <strong><code>FileReader</code></strong> permet à des applications web de lire le contenu de fichiers (ou de tampons de mémoire brute) de façon asynchrone. On peut ainsi lire le contenu des objets {{domxref("File")}} ou {{domxref("Blob")}} (qui représentent respectivement un fichier ou des données).</p>
+
+<p>Les objets qui sont des fichiers peuvent être obtenus à partir d'un objet {{domxref("FileList")}}, renvoyé lorsque l'utilisateur sélectionne des fichiers grâce à un élément {{HTMLElement("input")}}, via un glisser-déposer avec un objet <a href="/fr/docs/Web/API/DataTransfer"><code>DataTransfer</code></a> ou grâce à l'API <code>mozGetAsFile()</code> API de {{domxref("HTMLCanvasElement")}}.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("FileReader.FileReader", "FileReader()")}}</dt>
+ <dd>Ce constructeur renvoie un nouvel objet <code>FileReader</code>.</dd>
+</dl>
+
+<p>Pour plus d'informations et d'exemples, consulter <a href="/fr/docs/Using_files_from_web_applications">utiliser des fichiers depuis des applications web</a>.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("FileReader.error")}} {{readonlyinline}}</dt>
+ <dd>Un objet {{domxref("DOMError")}} qui représente l'erreur qui s'est produite lors de la lecture du fichier.</dd>
+ <dt>{{domxref("FileReader.readyState")}} {{readonlyinline}}</dt>
+ <dd>Un nombre qui indique l'état du <code>FileReader</code>. Cette valeur est l'une des suivantes :
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td><code>EMPTY</code></td>
+    <td><code>0</code></td>
+    <td>Aucune donnée n'a encore été chargée.</td>
+   </tr>
+   <tr>
+    <td><code>LOADING</code></td>
+    <td><code>1</code></td>
+    <td>Des données sont en cours de chargement.</td>
+   </tr>
+   <tr>
+    <td><code>DONE</code></td>
+    <td><code>2</code></td>
+    <td>La demande de lecture est complètement terminée.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt>{{domxref("FileReader.result")}} {{readonlyinline}}</dt>
+ <dd>Le contenu du fichier. Cette propriété est uniquement valide lorsque l'opération de lecture est terminée et le format des données dépend de la méthode utilisée pour l'opération de lecture.</dd>
+</dl>
+
+<h3 id="Gestionnaire_d'évènements">Gestionnaire d'évènements</h3>
+
+<dl>
+ <dt>{{domxref("FileReader.onabort")}}</dt>
+ <dd>Un gestionnaire pour l'évènement {{event("abort")}}. Cet évènement est déclenché à chaque fois que l'opération de lecture est interrompue.</dd>
+ <dt>{{domxref("FileReader.onerror")}}</dt>
+ <dd>Un gestionnaire pour l'évènement {{event("error")}}. Cet évènement est déclenché à chaque fois qu'il y a une erreur pendant l'opération de lecture.</dd>
+ <dt>{{domxref("FileReader.onload")}}</dt>
+ <dd>Un gestionnaire pour l'évènement {{event("load")}}. Cet évènement est déclenché à chaque fois qu'une opération de lecture est menée à bien.</dd>
+ <dt>{{domxref("FileReader.onloadstart")}}</dt>
+ <dd>Un gestionnaire pour l'évènement {{event("loadstart")}}. Cet évènement est déclenché chaque fois qu'une opération de lecture commence.</dd>
+ <dt>{{domxref("FileReader.onloadend")}}</dt>
+ <dd>Un gestionnaire pour l'évènement {{event("loadend")}}. Cet évènement est déclenché chaque fois qu'une opération de lecture est terminée (que ce soit un succès ou un échec).</dd>
+ <dt>{{domxref("FileReader.onprogress")}}</dt>
+ <dd>Un gestionnaire pour l'évènement {{event("progress")}}. Cet évènement est déclenché lorsque la lecture du {{domxref("Blob")}} est en cours.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note :</strong> <code>FileReader</code> hérite de l'interface {{domxref("EventTarget")}} et tout ces évènements peuvent donc être « écoutés » grâce à la méthode {{domxref("EventTarget.addEventListener()","addEventListener")}}.</p>
+</div>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("FileReader.abort()")}}</dt>
+ <dd>Cette méthode interrompt l'opération de lecture. Après avoir renvoyé une valeur, l'état <code>readyState</code> aura la valeur <code>DONE</code>.</dd>
+ <dt>{{domxref("FileReader.readAsArrayBuffer()")}} {{gecko_minversion_inline("7.0")}}</dt>
+ <dd>Cette méthode démarre la lecture du contenu pour le blob indiqué. Une fois que la lecture est terminée, l'attribut <code>result</code> contient un objet {{domxref("ArrayBuffer")}} représentant les données du fichier.</dd>
+ <dt>{{domxref("FileReader.readAsBinaryString()")}} {{non-standard_inline}}</dt>
+ <dd>Cette méthode démarre la lecture du contenu pour le blob indiqué. Une fois que la lecture est terminée, l'attribut <code>result</code> contient les données binaires brutes sous la forme d'une chaîne de caractères.</dd>
+ <dt>{{domxref("FileReader.readAsDataURL()")}}</dt>
+ <dd>Cette méthode démarre la lecture du contenu pour le blob indiqué. Une fois que la lecture est terminée, l'attribut <code>result</code> contient une URL de données qui représente les données du fichier.</dd>
+ <dt>{{domxref("FileReader.readAsText()")}}</dt>
+ <dd>Cette méthode démarre la lecture du contenu pour le blob indiqué. Une fois la lecture terminée, l'attribut <code>result</code> contient les données du fichier sous la forme d'une chaîne de caractères.</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("File API", "#dfn-filereader", "FileReader")}}</td>
+   <td>{{Spec2("File API")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}<sup>[1]</sup></td>
+   <td>7</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10<sup>[2]</sup></td>
+   <td>12.02<sup>[3]</sup></td>
+   <td>6.0</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatGeckoDesktop(46)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>32</td>
+   <td>3</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10</td>
+   <td>11.5</td>
+   <td>6.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatGeckoDesktop(46)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Avant Gecko 2.0 beta 7 (Firefox 4.0 beta 7), tous les paramètres {{domxref("Blob")}} étaient considérés comme des paramètres {{domxref("File")}}. Cela a été mis à jour afin de correspondre à la spécification. Avant Gecko 13.0 {{geckoRelease("13.0")}}, la propriété <code>FileReader.error</code> était un objet {{domxref("FileError")}}. Cette interface a été supprimée et <code>FileReader.error</code> correspond désormais à un objet {{domxref("DOMError")}} tel que défini dans le dernier brouillon de spécification de l'API <code>FileAPI</code>.</p>
+
+<p>[2] IE9 dispose d'un <a href="https://html5labs.interoperabilitybridges.com/prototypes/fileapi/fileapi/info">Lab File API</a>.</p>
+
+<p>[3] Opera <a href="https://www.opera.com/docs/specs/presto28/file/">implémente partiellement cette fonctionnalité</a> dans la version 11.1.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Using_files_from_web_applications">Manipuler des fichiers depuis des applications web</a></li>
+ <li>{{domxref("File")}}</li>
+ <li>{{domxref("Blob")}}</li>
+</ul>
diff --git a/files/fr/web/api/filereader/readasarraybuffer/index.html b/files/fr/web/api/filereader/readasarraybuffer/index.html
new file mode 100644
index 0000000000..6746cc3594
--- /dev/null
+++ b/files/fr/web/api/filereader/readasarraybuffer/index.html
@@ -0,0 +1,58 @@
+---
+title: FileReader.readAsArrayBuffer()
+slug: Web/API/FileReader/readAsArrayBuffer
+tags:
+  - API
+  - DOM
+  - Fichier
+  - Méthodes
+translation_of: Web/API/FileReader/readAsArrayBuffer
+---
+<p>{{APIRef("File API")}}</p>
+
+<p>La méthode <strong><code>readAsArrayBuffer()</code></strong> de l'interface {{domxref("FileReader")}} permet de lire un {{domxref("Blob")}} ou un {{domxref("File")}} (<em>fichier</em>). Quand l'opération est finie, l'attribut {{domxref("FileReader.readyState","readyState")}} prend la valeur <code>"DONE"</code> (<em>terminé</em>) à savoir <code>2</code>, et l'événement {{event("loadend")}} est levé. L'attribut {{domxref("FileReader.result","résultat")}} contient alors les données lues sous la forme d'un objet {{domxref("ArrayBuffer")}}.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nouvelle API disponible</strong><br>
+ La méthode {{domxref("Blob.arrayBuffer()")}} est une nouvelle API basée sur les promesses permettant de lire un fichier.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>instanceOfFileReader</em>.readAsArrayBuffer(<em>blob</em>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>blob</code></dt>
+ <dd>Le {{domxref("Blob")}} ou le {{domxref("File")}} (<em>fichier</em>) devant être lu.</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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("File API", "#readAsArrayBuffer", "FileReader.readAsArrayBuffer")}}</td>
+   <td>{{Spec2("File API")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.FileReader.readAsArrayBuffer")}}.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("FileReader")}}</li>
+</ul>
diff --git a/files/fr/web/api/filereader/readasbinarystring/index.html b/files/fr/web/api/filereader/readasbinarystring/index.html
new file mode 100644
index 0000000000..0cd282ac6b
--- /dev/null
+++ b/files/fr/web/api/filereader/readasbinarystring/index.html
@@ -0,0 +1,82 @@
+---
+title: FileReader.readAsBinaryString()
+slug: Web/API/FileReader/readAsBinaryString
+translation_of: Web/API/FileReader/readAsBinaryString
+---
+<div>{{APIRef("File API")}}</div>
+
+<p>La méthode <code>readAsArrayBuffer()</code> de l'interface {{domxref("FileReader")}} permet de lire un {{domxref("Blob")}} ou un {{domxref("File")}} (<em>fichier</em>). Quand l'opération est finie, l'attribut {{domxref("FileReader.readyState","readyState")}} prend la valeur <code>"DONE"</code> (<em>terminé</em>), et l'événement {{event("loadend")}} est levé.</p>
+
+<p>L'attribut {{domxref("FileReader.result","result")}} contient alors les données binaires brutes lues.</p>
+
+<p>Notez que cette méthode fût enlevée de l'API, mais réintroduite pour des raison de compatibilité ascendante.</p>
+
+<p>L'utilisation de {{domxref("FileReader.readAsArrayBuffer()")}} est recomandée.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>instanceOfFileReader</em>.readAsBinaryString(blob);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>blob</code></dt>
+ <dd>Le {{domxref("Blob")}} or {{domxref("File")}} devant être lu.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">var canvas = document.createElement('canvas');
+var height = 200;
+var width  = 200;
+
+canvas.width  = width;
+canvas.height = height;
+
+var ctx = canvas.getContext('2d');
+
+ctx.strokeStyle = '#090';
+ctx.beginPath();
+ctx.arc(width/2, height/2, width/2 - width/10, 0, Math.PI*2);
+ctx.stroke();
+
+canvas.toBlob(function (blob) {
+  var reader = new FileReader();
+
+  reader.onload = function () {
+    console.log(reader.result);
+  }
+
+  reader.readAsBinaryString(blob);
+});</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="spectable standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('File API','#readAsBinaryString','readAsBinaryString')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.FileReader.readAsBinaryString")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("FileReader")}}</li>
+</ul>
diff --git a/files/fr/web/api/filereader/readasdataurl/index.html b/files/fr/web/api/filereader/readasdataurl/index.html
new file mode 100644
index 0000000000..6da9a22250
--- /dev/null
+++ b/files/fr/web/api/filereader/readasdataurl/index.html
@@ -0,0 +1,179 @@
+---
+title: FileReader.readAsDataURL()
+slug: Web/API/FileReader/readAsDataURL
+tags:
+  - API
+  - API File
+  - Fichiers
+  - Méthode
+  - Reference
+translation_of: Web/API/FileReader/readAsDataURL
+---
+<div>{{APIRef("API File")}}</div>
+
+<p>La méthode <code>readAsDataURL</code> permet de lire le contenu de l’objet  {{domxref("Blob")}} ou {{domxref("File")}} spécifié. À la fin de l’opération de lecture, la propriété {{domxref("FileReader.readyState","readyState")}} renvoie l’état <code>DONE</code>, et l’évènement {{event("loadend")}} se déclenche. À ce moment-là, l’attribut {{domxref("FileReader.result","result")}} contient les données dans une URL représentant les données du fichier sous forme de chaîne encodée en base64.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>instanceOfFileReader</em>.readAsDataURL(blob);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>blob</code></dt>
+ <dd>L’argument {{domxref("Blob")}} ou {{domxref("File")}} à partir duquel exécuter la lecture.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input type="file" onchange="previewFile()"&gt;&lt;br&gt;
+&lt;img src="" height="200" alt="Aperçu de l’image..."&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">function previewFile() {
+  var preview = document.querySelector('img');
+  var file    = document.querySelector('input[type=file]').files[0];
+  var reader  = new FileReader();
+
+  reader.addEventListener("load", function () {
+    preview.src = reader.result;
+  }, false);
+
+  if (file) {
+    reader.readAsDataURL(file);
+  }
+}</pre>
+
+<h3 id="Résultat_en_direct">Résultat en direct</h3>
+
+<p>{{EmbedLiveSample("Example", "100%", 240)}}</p>
+
+<p> </p>
+
+<h2 id="Exemple_de_lecture_de_plusieurs_fichiers">Exemple de lecture de plusieurs fichiers</h2>
+
+<h3 id="HTML_2">HTML</h3>
+
+<pre class="brush: html">&lt;input id="browse" type="file" onchange="previewFiles()" multiple&gt;
+&lt;div id="preview"&gt;&lt;/div&gt;</pre>
+
+<h3 id="JavaScript_2">JavaScript</h3>
+
+<pre class="brush: js">function previewFiles() {
+
+  var preview = document.querySelector('#preview');
+  var files   = document.querySelector('input[type=file]').files;
+
+  function readAndPreview(file) {
+
+    // Veillez à ce que `file.name` corresponde à nos critères d’extension
+    if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) {
+      var reader = new FileReader();
+
+      reader.addEventListener("load", function () {
+        var image = new Image();
+        image.height = 100;
+        image.title = file.name;
+        image.src = this.result;
+        preview.appendChild( image );
+      }, false);
+
+      reader.readAsDataURL(file);
+    }
+
+  }
+
+  if (files) {
+    [].forEach.call(files, readAndPreview);
+  }
+
+}
+</pre>
+
+<div class="note"><strong>Remarque :</strong> le constructeur <a href="/en-US/docs/Web/API/FileReader"><code>FileReader()</code></a> n’est pas pris en charge dans les versions IE antérieures à Internet Explorer 10. Pour un code compatible avec tous les navigateurs, accédez à notre <a class="internal" href="https://mdn.mozillademos.org/files/3699/crossbrowser_image_preview.html" title="crossbrowser_image_preview.html">solution d’aperçu d’image multinavigateur</a>. Examinez également cette <a href="https://mdn.mozillademos.org/files/3698/image_upload_preview.html">alternative plus puissante</a>.</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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("API File", "#FileReader-interface", "FileReader")}}</td>
+   <td>{{Spec2("API File")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_avec_les_navigateurs">Compatibilité avec les navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}<sup>[1]</sup></td>
+   <td>7</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10<sup>[2]</sup></td>
+   <td>12.02<sup>[3]</sup></td>
+   <td>6.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>32</td>
+   <td>3</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10</td>
+   <td>11.5</td>
+   <td>6.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Avant la version Gecko 2.0 beta 7 (Firefox 4.0 beta 7), tous les paramètres {{domxref("Blob")}} ci-dessous étaient des paramètres {{domxref("File")}}. Depuis, une mise à jour a été effectuée pour la prise en charge correcte de cette spécification. Avant la version Gecko 13.0 {{geckoRelease("13.0")}} la propriété <code>FileReader.error</code> renvoyait un objet {{domxref("FileError")}}. Cette interface a été supprimée et le paramètre <code>FileReader.error</code> renvoie désormais l’objet {{domxref("DOMError")}} tel que défini dans la version API File la plus récente.</p>
+
+<p>[2] IE9 intègre un <a href="http://html5labs.interoperabilitybridges.com/prototypes/fileapi/fileapi/info">File API Lab</a>.</p>
+
+<p>[3] Opera inclut un <a href="http://www.opera.com/docs/specs/presto28/file/">support partiel</a> dans la version 11.1.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("FileReader")}}</li>
+</ul>
diff --git a/files/fr/web/api/filereader/readastext/index.html b/files/fr/web/api/filereader/readastext/index.html
new file mode 100644
index 0000000000..bbf8372844
--- /dev/null
+++ b/files/fr/web/api/filereader/readastext/index.html
@@ -0,0 +1,118 @@
+---
+title: FileReader.readAsText()
+slug: Web/API/FileReader/readAsText
+tags:
+  - API
+  - File API
+  - Files
+  - Method
+  - Reference
+translation_of: Web/API/FileReader/readAsText
+---
+<div>{{APIRef("File API")}}</div>
+
+<p>La méthode <code>readAsText</code> est utilisée pour lire le contenu du {{domxref("Blob")}} ou {{domxref("File")}} spécifié en paramètre. Lorsque la lecture est terminée, l'état {{domxref("FileReader.readyState","readyState")}} passe à <code>DONE</code>, l'événement {{event("loadend")}} est lancé, et l'attribut {{domxref("FileReader.result","result")}} contient le contenu du fichier sous forme de chaîne de caractères.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>instanceOfFileReader</em>.readAsText(blob[, encoding]);</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>blob</code></dt>
+ <dd>Le {{domxref("Blob")}} ou {{domxref("File")}} qui doit être lu.</dd>
+ <dt>encoding {{optional_inline}}</dt>
+ <dd>Une chaîne de caractères spécifiant l'encodage utilisé dans les données de retour. Par défaut, UTF-8 est utilisé lorsque le paramètre n'est pas spécifié.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var selectedFile = document.getElementById('input').files[0];
+var content = document.getElementById('content');
+var reader = new FileReader();
+reader.onload = function(event) { content.innerHTML = reader.result; };
+reader.readAsText(selectedFile);</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("File API", "#FileReader-interface", "FileReader")}}</td>
+   <td>{{Spec2("File API")}}</td>
+   <td>Définition initale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}<sup>[1]</sup></td>
+   <td>7</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10<sup>[2]</sup></td>
+   <td>12.02<sup>[3]</sup></td>
+   <td>6.0.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>32</td>
+   <td>3</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10</td>
+   <td>11.5</td>
+   <td>6.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Avant Gecko 2.0 beta 7 (Firefox 4.0 beta 7), tous les paramètres {{domxref("Blob")}} ci-dessous étaient des paramètres {{domxref("File")}} ; ceci a depuis été mis à jour pour être conforme à la spécification. Avant Gecko 13.0 {{geckoRelease("13.0")}}, la propriété <code>FileReader.error</code> renvoyait un objet {{domxref("FileError")}}. Cette interface a été supprimée et <code>FileReader.error</code> renvoie maintenant l'objet {{domxref("DOMError")}} tel que défini dans le dernier brouillon FileAPI.</p>
+
+<p>[2] IE9 intègre un <a href="http://html5labs.interoperabilitybridges.com/prototypes/fileapi/fileapi/info">File API Lab</a>.</p>
+
+<p>[3] Opera inclut un <a href="http://www.opera.com/docs/specs/presto28/file/">support partiel</a> dans la version 11.1.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("FileReader")}}</li>
+</ul>
diff --git a/files/fr/web/api/filerequest/index.html b/files/fr/web/api/filerequest/index.html
new file mode 100644
index 0000000000..b735675817
--- /dev/null
+++ b/files/fr/web/api/filerequest/index.html
@@ -0,0 +1,54 @@
+---
+title: FileRequest
+slug: Web/API/FileRequest
+tags:
+  - API
+  - DOM
+  - Fichier
+  - Interface
+translation_of: Web/API/FileRequest
+---
+<p>{{APIRef("File System API")}} {{non-standard_header}}</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>L'interface <code>FileRequest</code> étend l'interface {{domxref("DOMRequest")}} pour fournir des propriétés supplémentaires nécessaires aux objets {{domxref("LockedFile")}}.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("FileRequest.lockedFile")}} {{readonlyinline}}</dt>
+ <dd>L'objet {{domxref("LockedFile")}} à partir duquel la demande a été lancée.</dd>
+ <dt>{{domxref("FileRequest.onprogress")}}</dt>
+ <dd>Un gestionnaire de rappel appelé à plusieurs reprises alors que l'opération représentée par la <code>FileRequest</code> est en cours.</dd>
+</dl>
+
+<p>L'interface <code>FileRequest</code> hérite également de l'interface {{domxref("DOMRequest")}}.</p>
+
+<h2 id="Method_overview" name="Method_overview">Méthodes</h2>
+
+<p>Aucune.</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('FileSystem')}}</td>
+   <td>{{Spec2('FileSystem')}}</td>
+   <td>Brouillon proposé.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("FileHandle")}}</li>
+ <li>{{domxref("LockedFile")}}</li>
+</ul>
diff --git a/files/fr/web/api/filerequest/lockedfile/index.html b/files/fr/web/api/filerequest/lockedfile/index.html
new file mode 100644
index 0000000000..18a3138b9c
--- /dev/null
+++ b/files/fr/web/api/filerequest/lockedfile/index.html
@@ -0,0 +1,48 @@
+---
+title: FileRequest.lockedFile
+slug: Web/API/FileRequest/lockedFile
+tags:
+  - API
+  - DOM
+  - Fichier
+  - Propriétés
+translation_of: Web/API/FileRequest/lockedFile
+---
+<p>{{APIRef("File System API")}} {{non-standard_header}}</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>La propriété <code>lockedFile</code> représente l'objet {{domxref("LockedFile")}} à partir duquel la requête a été lancée.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var lockedFile = <em>instanceOfFileRequest</em>.lockedFile
+</pre>
+
+<h2 id="Valeur">Valeur</h2>
+
+<p>Un objet {{domxref("LockedFile")}}.</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('FileSystem')}}</td>
+   <td>{{Spec2('FileSystem')}}</td>
+   <td>Brouillon proposé.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("FileRequest")}}</li>
+ <li>{{domxref("LockedFile")}}</li>
+</ul>
diff --git a/files/fr/web/api/filerequest/onprogress/index.html b/files/fr/web/api/filerequest/onprogress/index.html
new file mode 100644
index 0000000000..6677356045
--- /dev/null
+++ b/files/fr/web/api/filerequest/onprogress/index.html
@@ -0,0 +1,54 @@
+---
+title: FileRequest.onprogress
+slug: Web/API/FileRequest/onprogress
+tags:
+  - API
+  - DOM
+  - Fichier
+  - Propriétés
+translation_of: Web/API/FileRequest/onprogress
+---
+<p>{{APIRef("File System API")}} {{non-standard_header}}</p>
+
+<h2 id="Summary" name="Summary">Résumé</h2>
+
+<p>Cette propriété spécifie une fonction de rappel devant être exécutée de façon répétée pendant que l'opération représentée par un objet  {{ domxref("FileRequest") }} est en cours.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="eval"><em>instanceOfFileRequest</em>.onprogress = <em>function</em>;
+</pre>
+
+<p>Où <code><em>instanceOfFileRequest</em></code> est un objet {{ domxref("FileRequest") }} et <code><em>function</em></code> est la fonction JavaScript à exécuter.</p>
+
+<p>Chaque fois que la fonction callback est appelée, elle obtient un objet en tant que premier paramètre. Ces objets contiennent deux propriétés :</p>
+
+<dl>
+ <dt><code>loaded</code></dt>
+ <dd>Un nombre représentant la quantité actuelle d'octets traités par l'opération.</dd>
+ <dt><code>total</code></dt>
+ <dd>Un nombre représentant le nombre total d'octets qui seront traités par l'opération.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">// Supposons 'request' qui est un objet FileRequest
+
+request.onprogress = function (status) {
+  var progress = document.querySelector('progress');
+
+  progress.value = status.loaded;
+  progress.max   = status.total;
+}
+</pre>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<p>Ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{ domxref("DOMRequest") }}</li>
+ <li>{{ domxref("LockedFile") }}</li>
+</ul>
diff --git a/files/fr/web/api/focusevent/index.html b/files/fr/web/api/focusevent/index.html
new file mode 100644
index 0000000000..b3ca995846
--- /dev/null
+++ b/files/fr/web/api/focusevent/index.html
@@ -0,0 +1,63 @@
+---
+title: FocusEvent
+slug: Web/API/FocusEvent
+tags:
+  - API
+  - DOM
+  - Evènement
+  - Focus
+  - Interface
+translation_of: Web/API/FocusEvent
+---
+<p>{{APIRef("DOM Events")}}{{SeeCompatTable}}</p>
+
+<p>L'interface <strong><code>FocusEvent</code> </strong>représente les événements liés au focus tels que<code> </code>{{event("focus")}}, {{event("blur")}}, {{event("focusin")}} ou {{event("focusout")}}.</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("FocusEvent.FocusEvent", "FocusEvent()")}}</dt>
+ <dd>crée un événement <strong>FocusEvent </strong>avec les paramètres donnés<strong>.</strong></dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Hértite des propriétés de son parent domxref("UIEvent")}} et indirectement de {{domxref("Event")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("FocusEvent.relatedTarget")}} {{readonlyInline}}</dt>
+ <dd>est un {{domxref("EventTarget")}} représentant une cible secondaire pour cet événement. Car dans certain cas (comme quand vous tabulez dans ou hors de la page), cette propriété peut être définie comme étant nulle pour des raisons de sécurité.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Aucune méthode spécifique ; Hérite des propriétés de son parent<em> {{domxref("UIEvent")}} </em>et indirectement de {{domxref("Event")}}</em>.</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('DOM3 Events', '#interface-FocusEvent', 'FocusEvent')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>Première définition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.FocusEvent")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface de base {{domxref("Event")}}</li>
+</ul>
diff --git a/files/fr/web/api/force_touch_events/index.html b/files/fr/web/api/force_touch_events/index.html
new file mode 100644
index 0000000000..ac64c8bb46
--- /dev/null
+++ b/files/fr/web/api/force_touch_events/index.html
@@ -0,0 +1,52 @@
+---
+title: Force Touch events
+slug: Web/API/Force_Touch_events
+tags:
+  - API
+  - DOM
+  - Evènement
+  - Mobile
+translation_of: Web/API/Force_Touch_events
+---
+<p>{{DefaultAPISidebar("Force Touch events")}}</p>
+
+<p>{{Non-standard_header()}}</p>
+
+<p><strong>Force Touch events</strong> est une fonctionnalité propriétaire propre à Apple et qui rend possibles (si supporté par le matériel d'entrée) de nouvelles interactions basées sur le fait que l'utilisateur clique ou appuie sur l'écran tactile ou sur le trackpad.</p>
+
+<h2 id="Évènements">Évènements</h2>
+
+<dl>
+ <dt>{{event("webkitmouseforcewillbegin")}} {{non-standard_inline}}</dt>
+ <dd>Cet évènement est lancé avant l'évènement {{event("mousedown")}}. Son utilisation principale est de permettre {{domxref("Event.preventDefault()")}}.</dd>
+ <dt>{{event("webkitmouseforcedown")}} {{non-standard_inline}}</dt>
+ <dd>Cet évènement est lancé après l'évènement {{event("mousedown")}} dès qu'une pression suffisante a été appliquée pour qu'il puisse être qualifié de "clic de force".</dd>
+ <dt>{{event("webkitmouseforceup")}} {{non-standard_inline}}</dt>
+ <dd>Cet évènement est lancé après l'évènement {{event("webkitmouseforcedown")}} dès que la pression a été suffisamment réduite pour terminer le "clic de force".</dd>
+ <dt>{{event("webkitmouseforcechanged")}} {{non-standard_inline}}</dt>
+ <dd>Cet évènement est lancé chaque fois que la quantité de pression change. <span id="result_box" lang="fr"><span>Il se déclenche d'abord après l'événement {{event ("mousedown")}} et s'arrête avant l'événement {{event ("mouseup")}}.</span></span></dd>
+</dl>
+
+<h2 id="Propriété_des_évènements">Propriété des évènements</h2>
+
+<p>La propriété suivante est connue pour être disponible sur les objets évènement {{event("webkitmouseforcewillbegin")}}, {{event("mousedown")}}, {{event("webkitmouseforcechanged")}}, {{event("webkitmouseforcedown")}}, {{event("webkitmouseforceup")}}, {{event("mousemove")}} et {{event("mouseup")}}:</p>
+
+<dl>
+ <dt>{{domxref("MouseEvent.webkitForce")}} {{non-standard_inline()}} {{readonlyinline}}</dt>
+ <dd>La quantité de pression actuellement appliquée sur le trackpad / écran tactile.</dd>
+</dl>
+
+<h2 id="Constantes">Constantes</h2>
+
+<p>Ces constantes sont utiles pour déterminer l'intensité relative de la pression indiquée par {{domxref ("MouseEvent.webkitForce")}} :</p>
+
+<dl>
+ <dt>{{domxref("MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN")}} {{non-standard_inline}}{{readonlyinline}}</dt>
+ <dd>Force minimum nécessaire pour un click normal.</dd>
+ <dt>{{domxref("MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN")}} {{non-standard_inline}}{{readonlyinline}}</dt>
+ <dd>Force minimum nécessaire pour un click de force.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p><em>Ne fait partie d'aucune spécification.</em> Apple a <a href="https://developer.apple.com/library/prerelease/mac/documentation/AppleApplications/Conceptual/SafariJSProgTopics/RespondingtoForceTouchEventsfromJavaScript.html">une description dans la bibilitothèque Mac Developer</a>.</p>
diff --git a/files/fr/web/api/formdata/append/index.html b/files/fr/web/api/formdata/append/index.html
new file mode 100644
index 0000000000..f7c1e40a75
--- /dev/null
+++ b/files/fr/web/api/formdata/append/index.html
@@ -0,0 +1,98 @@
+---
+title: FormData.append()
+slug: Web/API/FormData/append
+tags:
+  - API
+  - Append
+  - FormData
+  - Méthode
+  - Reference
+  - XHR
+  - XMLHttpRequest
+translation_of: Web/API/FormData/append
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p>La méthode <code><strong>append()</strong></code> de l'interface {{domxref("FormData")}} ajoute une nouvelle valeur à une clé existante dans un objet <code>FormData</code>, ou rajoute cette clé et cette valeur quand elle n'existe pas.</p>
+
+<p>La différence entre {{domxref("FormData.set")}} et <code>append()</code> est que, quand la clé existe, {{domxref("FormData.set")}} va remplacer les valeurs existantes avec la nouvelle alors qu' <code>append()</code> va rajouter celle-ci à la fin de l'ensemble des valeurs existantes.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Cette méthode est disponible dans les <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Il y a deux versions de cette méthode : avec deux ou trois paramètres</p>
+
+<pre class="brush: js">formData.append(name, value);
+formData.append(name, value, filename);</pre>
+
+<h3 id="append_Parameters" name="append()_Parameters">Paramètres</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Le nom de la clé dont les données sont contenues dans <code>value</code>.</dd>
+ <dt><code>value</code></dt>
+ <dd>La valeur du champ clé. Elle peut être une {{domxref("USVString")}} ou un {{domxref("Blob")}} (incluant les sous-classes comme {{domxref("File")}}).</dd>
+ <dt><code>filename </code>{{optional_inline}}</dt>
+ <dd>Le nom du fichier envoyé au serveur (a {{domxref("USVString")}}), quand un {{domxref("Blob")}} ou un {{domxref("File")}} est passé en second paramètre. Le nom du fichier par défaut pour des objets {{domxref("Blob")}} est "blob". Le nom du fichier par défaut pour des objets {{domxref("File")}} est le nom du fichier de l'objet.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note:</strong> Si vous spécifiez un  {{domxref("Blob")}} comme donnée rattachée à un objet de type <code>FormData</code>, le nom de fichier envoyé au serveur sera dans l'entête "Content-Disposition" mais peut varier selon le navigateur.</p>
+</div>
+
+<h3 id="Retours">Retours</h3>
+
+<p>Void.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>La ligne suivante crée un objet <code>FormData</code> vide :</p>
+
+<pre class="brush: js">var formData = new FormData(); // Actuellement vide</pre>
+
+<p>Vous pouvez rajouter des paires clé/valeur en utilisant {{domxref("FormData.append")}}:</p>
+
+<pre class="brush: js">formData.append('username', 'Chris');
+formData.append('userpic', myFileInput.files[0], 'chris.jpg');</pre>
+
+<p>Comme pour un formulaire classique, vous pouvez ajouter plusieurs valeurs pour la même clé. Par exemple ( et pour être en accord avec les conventions de nommage PHP, on ajoute [] au nom de la clé):</p>
+
+<pre class="brush: js">formData.append('userpic[]', myFileInput.files[0], 'chris1.jpg');
+formData.append('userpic[]', myFileInput.files[1], 'chris2.jpg');</pre>
+
+<p>Cette technique permet de simplement gérer l'envoi de plusieurs fichiers avec l'envoi d'une structure facilement itérable.</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('XMLHttpRequest','#dom-formdata-append','append()')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.FormData.append")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li><a href="/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest" title="Using XMLHttpRequest">Utiliser XMLHttpRequest</a></li>
+ <li><a href="/fr/docs/Web/API/FormData/Utilisation_objets_FormData" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Utiliser les objets FormData</a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
diff --git a/files/fr/web/api/formdata/delete/index.html b/files/fr/web/api/formdata/delete/index.html
new file mode 100644
index 0000000000..3540d9d9e0
--- /dev/null
+++ b/files/fr/web/api/formdata/delete/index.html
@@ -0,0 +1,78 @@
+---
+title: FormData.delete()
+slug: Web/API/FormData/delete
+tags:
+  - API
+  - FormData
+  - Méthode
+  - Reference
+  - XHR
+  - XMLHttpRequest
+  - delete
+translation_of: Web/API/FormData/delete
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p>La méthode <code><strong>delete()</strong></code> de l'interface {{domxref("FormData")}} supprime une clé et sa (ses) valeur(s) d'un objet <code>FormData</code>.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Cette méthode est disponible dans les <a href="/fr/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">formData.delete(name);</pre>
+
+<h3 id="append_Parameters" name="append()_Parameters">Paramètres</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Le nom de la clé que vous voulez supprimer.</dd>
+</dl>
+
+<h3 id="Retours">Retours</h3>
+
+<p>Void.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>La ligne suivante crée un objet <code>FormData</code> vide et le pré-remplit avec les paires clé/valeur d'un formulaire :</p>
+
+<pre class="brush: js">var formData = new FormData(myForm);</pre>
+
+<p>Vous pouvez supprimer les clés et leurs valeurs en utilisant <code>delete()</code>:</p>
+
+<pre class="brush: js">formData.delete('username');
+</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('XMLHttpRequest','#dom-formdata-delete','delete()')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.FormData.delete")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li><a href="/fr/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Utiliser XMLHttpRequest</a></li>
+ <li><a href="/fr/docs/Web/API/FormData/Utilisation_objets_FormData" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Utiliser les objets FormData</a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
diff --git a/files/fr/web/api/formdata/entries/index.html b/files/fr/web/api/formdata/entries/index.html
new file mode 100644
index 0000000000..d8996c1183
--- /dev/null
+++ b/files/fr/web/api/formdata/entries/index.html
@@ -0,0 +1,81 @@
+---
+title: FormData.entries()
+slug: Web/API/FormData/entries
+tags:
+  - API
+  - Entries
+  - FormData
+  - Méthode
+  - Reference
+  - XHR
+  - XMLHttpRequest
+translation_of: Web/API/FormData/entries
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p>La methode <strong>FormData.entries()</strong> retourne un {{jsxref("Les_protocoles_iteration",'iterateur')}} permettant d'accéder aux paires clefs/valeurs contenues dans cet objet.<br>
+ La clef de chaque paire est une {{domxref("USVString")}}. De la même manière, la valeur peut être une {{domxref("USVString")}} ou un {{domxref("Blob")}}.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Cette methode est disponible dans les <a href="/fr/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">formData.entries();</pre>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Retourne un {{jsxref("Les_protocoles_iteration","iterateur")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js;highlight:[7]">// Creation d'un objet FormData
+var formData = new FormData();
+formData.append('key1', 'value1');
+formData.append('key2', 'value2');
+
+// Affichage des paires clefs/valeurs
+for(var pair of formData.entries()) {
+   console.log(pair[0]+ ', '+ pair[1]);
+}
+</pre>
+
+<p>Le resultat est:</p>
+
+<pre>key1, value1
+key2, value2</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('XMLHttpRequest','#dom-formdata','entries() (as iterator&lt;&gt;)')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div>
+
+
+<p>{{Compat("api.FormData.entries")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li><a href="/fr/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Utiliser XMLHttpRequest</a></li>
+ <li><a href="/fr/docs/Web/API/FormData/Utilisation_objets_FormData" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Utiliser les objets FormData</a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
diff --git a/files/fr/web/api/formdata/formdata/index.html b/files/fr/web/api/formdata/formdata/index.html
new file mode 100644
index 0000000000..faf5b1cf68
--- /dev/null
+++ b/files/fr/web/api/formdata/formdata/index.html
@@ -0,0 +1,101 @@
+---
+title: FormData()
+slug: Web/API/FormData/FormData
+tags:
+  - API
+  - Constructeur
+  - FormData
+  - Reference
+  - XHR
+  - XMLHttpRequest
+translation_of: Web/API/FormData/FormData
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p>Le constructeur <code><strong>FormData()</strong></code> crée un nouvel objet {{domxref("FormData")}}.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Cette fonctionnalité est disponible dans <a href="/fr/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js"><code>var formData = new FormData(</code><code>form</code><code>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Paramètres</h3>
+
+<dl>
+ <dt><code>form </code>{{optional_inline}}</dt>
+ <dd>Un element HTML {{HTMLElement("form")}} — quand il est spécifié, l'objet {{domxref("FormData")}} sera rempli avec les clés/valeurs du formulaire en utilisant les noms de propriétés de chaque élément pour clé et les valeurs soumises. Cela encodera aussi le contenu des fichiers.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>La ligne suivante crée un objet <code>FormData</code> vide:</p>
+
+<pre class="brush: js">var formData = new FormData(); // Formulaire vide à cet instant</pre>
+
+<p>Vous pouvez ajouter un couple clé/valeur en utilisant {{domxref("FormData.append")}} :</p>
+
+<pre class="brush: js">formData.append('username', 'Chris');
+</pre>
+
+<p>Ou vous pouvez spécifier l'argument optionnel <code><em>form</em></code> à la création de l'objet <code>FormData</code> pour le pré-remplir avec les valeurs issues du formulaire spécifié :</p>
+
+<pre class="brush: html">&lt;form id="myForm" name="myForm"&gt;
+  &lt;div&gt;
+    &lt;label for="username"&gt;Enter name:&lt;/label&gt;
+    &lt;input type="text" id="username" name="username"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="useracc"&gt;Enter account number:&lt;/label&gt;
+    &lt;input type="text" id="useracc" name="useracc"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="userfile"&gt;Upload file:&lt;/label&gt;
+    &lt;input type="file" id="userfile" name="userfile"&gt;
+  &lt;/div&gt;
+&lt;input type="submit" value="Submit!"&gt;
+&lt;/form&gt;
+</pre>
+
+<div class="note">
+<p><strong>Note </strong>: Seuls les champs de formulaires valides sont inclus dans un objet FormData, c'est-à-dire ceux qui portent un nom (attribut <code>name</code>), qui ne sont pas désactivés et qui sont cochés (boutons radio et cases à cocher) ou sélectionnés (une ou plusieurs options dans une sélection).</p>
+</div>
+
+<pre class="brush: js">var myForm = document.getElementById('myForm');
+formData = new FormData(myForm);</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('XMLHttpRequest','#dom-formdata','FormData()')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.FormData.FormData")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li><a href="/fr/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest">Manipuler <code>XMLHttpRequest</code></a></li>
+ <li><a href="/fr/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects">Utiliser les objets <code>FormData</code></a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
diff --git a/files/fr/web/api/formdata/get/index.html b/files/fr/web/api/formdata/get/index.html
new file mode 100644
index 0000000000..72267b3a68
--- /dev/null
+++ b/files/fr/web/api/formdata/get/index.html
@@ -0,0 +1,82 @@
+---
+title: FormData.get()
+slug: Web/API/FormData/get
+tags:
+  - API
+  - FormData
+  - Méthode
+  - Reference
+  - XHR
+  - XMLHttpRequest
+  - get
+translation_of: Web/API/FormData/get
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p>La méthode <code>get()</code> de l'interface {{domxref("FormData")}} renvoie la première valeur associée à une clé donnée dans un objet <code>FormData</code>. Si vous attendez plusieurs valeurs et que vous les voulez toutes, utilisez plutôt la méthode {{domxref("FormData.getAll()", "getAll()")}}.</p>
+
+<div class="note">
+<p><strong>Note</strong> : Cette méthode est disponible dans les <a href="/fr/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">formData.get(name);</pre>
+
+<h3 id="append_Parameters" name="append()_Parameters">Paramètres</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Un {{domxref("USVString")}} représentant le nom de la clé que vous souhaitez retrouver.</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Un {{domxref("FormDataEntryValue")}} contenant la valeur. Si la clé n'existe pas, la méthode renvoie zéro.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>La ligne suivante crée un objet <code>FormData</code> vide :</p>
+
+<pre class="brush: js">var formData = new FormData();</pre>
+
+<p>Si nous ajoutons deux valeurs <code>username</code> en utilisant {{domxref("FormData.append")}}:</p>
+
+<pre class="brush: js">formData.append('username', 'Chris');
+formData.append('username', 'Bob');</pre>
+
+<p>La fonction suivante <code>get()</code> peut uniquement retrouner la première valeur <code>username</code> annexée :</p>
+
+<pre class="brush: js">formData.get('username'); // Returns "Chris"</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('XMLHttpRequest','#dom-formdata-get','get()')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.FormData.get")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li><a href="/fr/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Utiliser XMLHttpRequest</a></li>
+ <li><a href="/fr/docs/Web/API/FormData/Utilisation_objets_FormData" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Utiliser les objets FormData</a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
diff --git a/files/fr/web/api/formdata/getall/index.html b/files/fr/web/api/formdata/getall/index.html
new file mode 100644
index 0000000000..4faddd8bd8
--- /dev/null
+++ b/files/fr/web/api/formdata/getall/index.html
@@ -0,0 +1,82 @@
+---
+title: FormData.getAll()
+slug: Web/API/FormData/getAll
+tags:
+  - API
+  - FormData
+  - Méthode
+  - Reference
+  - XHR
+  - XMLHttpRequest
+  - getAll
+translation_of: Web/API/FormData/getAll
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p>La méthode <code><strong>getAll()</strong></code> de l'interface {{domxref("FormData")}} renvoie toutes les valeurs associées à une clé donnée à partir d'un objet <code>FormData</code>.</p>
+
+<div class="note">
+<p><strong>Note</strong> : Cette méthode est disponible dans les <a href="/fr/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">formData.getAll(name);</pre>
+
+<h3 id="append_Parameters" name="append()_Parameters">Paramètres</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Un {{domxref("USVString")}} représentant le nom de la clé que vous voulez récupérer.</dd>
+</dl>
+
+<h3 id="Retours">Retours</h3>
+
+<p>Un tableau de {{domxref("FormDataEntryValue")}} dont la clé correspond à la valeur passée dans le paramètre <code>name</code>. Si la clé n'existe pas, la méthode renvoie une liste vide.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>La ligne suivante crée un objet <code>FormData</code> vide :</p>
+
+<pre class="brush: js">var formData = new FormData();</pre>
+
+<p>Si nous ajoutons deux valeurs <code>username</code> en utilisant {{domxref("FormData.append")}} :</p>
+
+<pre class="brush: js">formData.append('username', 'Chris');
+formData.append('username', 'Bob');</pre>
+
+<p>La fonction <code>getAll()</code> suivante va retourner chaque valeurs de <code>username</code> dans un tableau :</p>
+
+<pre class="brush: js">formData.getAll('username'); // Returns ["Chris", "Bob"]</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('XMLHttpRequest','#dom-formdata-getall','getAll()')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.FormData.getAll")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li><a href="/fr/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Utiliser XMLHttpRequest</a></li>
+ <li><a href="/fr/docs/Web/API/FormData/Utilisation_objets_FormData" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Utiliser les objets FormData</a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
diff --git a/files/fr/web/api/formdata/has/index.html b/files/fr/web/api/formdata/has/index.html
new file mode 100644
index 0000000000..82ad7bb947
--- /dev/null
+++ b/files/fr/web/api/formdata/has/index.html
@@ -0,0 +1,80 @@
+---
+title: FormData.has()
+slug: Web/API/FormData/has
+tags:
+  - API
+  - FormData
+  - Méthode
+  - Reference
+  - XHR
+  - XMLHttpRequest
+  - has
+translation_of: Web/API/FormData/has
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p>La méthode <code><strong>has()</strong></code> de l'interface {{domxref("FormData")}} renvoie un booléen indiquant si un objet <code>FormData</code> contient une certaine clé.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Cette méthode est disponible dans les <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">formData.has(name);</pre>
+
+<h3 id="append_Parameters" name="append()_Parameters">Paramètres</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Un {{domxref("USVString")}} représentant le nom de la clé que vous voulez tester.</dd>
+</dl>
+
+<h3 id="Retours">Retours</h3>
+
+<p>Un {{domxref("Boolean")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>La ligne suivante crée un objet <code>FormData</code> vide :</p>
+
+<pre class="brush: js">var formData = new FormData();</pre>
+
+<p>L'extrait suivant montre les résultats des tests effectués pour vérifier l'existence d'un <code>username</code> dans l'objet FormData, avant et après avoir ajouté une valeur <code>username</code> avec {{domxref("FormData.append")}} :</p>
+
+<pre class="brush: js">formData.has('username'); // Retourne false
+formData.append('username', 'Chris');
+formData.has('username'); // Retourne 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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest','#dom-formdata-has','has()')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.FormData.has")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li><a href="https://wiki.developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest" title="En/Using XMLHttpRequest">Utilisation de XMLHttpRequest</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/fr/docs/Web/API/FormData/Utilisation_objets_FormData" title="en/DOM/XMLHttpRequest/FormData/Using_FormData_objects">Utilisation des objects FormData </a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
diff --git a/files/fr/web/api/formdata/index.html b/files/fr/web/api/formdata/index.html
new file mode 100644
index 0000000000..2c16e20d2a
--- /dev/null
+++ b/files/fr/web/api/formdata/index.html
@@ -0,0 +1,87 @@
+---
+title: FormData
+slug: Web/API/FormData
+tags:
+  - API
+  - FormData
+  - Interface
+  - Reference
+  - XMLHttpRequest
+translation_of: Web/API/FormData
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p>L'interface <code>FormData</code> permet de construire facilement un ensemble de paires clé/valeur représentant les champs du formulaire et leurs valeurs, qui peuvent ensuite être facilement envoyées en utilisant la méthode {{domxref("XMLHttpRequest.send()")}} de l'objet XMLHttpRequest. Il utilise le même format qu'utilise un formulaire si le type d'encodage est mis à <code>"multipart/form-data"</code>.</p>
+
+<p>Vous pouvez également le passer directement au constructeur {{domxref("URLSearchParams")}} si vous souhaitez générer des paramètres de requête de la même manière qu'un {{HTMLElement("form")}} le ferait s'il utilisait une simple soumission <code>GET</code>.</p>
+
+<p>Un objet implémentant <code>FormData</code> peut être utilisé directement dans une structure {{jsxref("Statements/for...of", "for...of")}}, au lieu de {{domxref('FormData.entries()', 'entries()')}} : <code>for (var p of myFormData)</code> est équivalent à <code>for (var p of myFormData.entries())</code>.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Cette fonctionnalité est disponible dans les <a href="/fr/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
+</div>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("FormData.FormData","FormData()")}}</dt>
+ <dd>Crée un nouvel objet <code>FormData</code>.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("FormData.append()")}}</dt>
+ <dd>Ajoute une nouvelle valeur à une clé existante dans un objet <code>FormData</code>, ou ajoute la clé si elle n'existe pas encore.</dd>
+ <dt>{{domxref("FormData.delete()")}}</dt>
+ <dd>Supprime une paire clé/valeur d'un objet <code>FormData</code>.</dd>
+ <dt>{{domxref("FormData.entries()")}}</dt>
+ <dd>Retourne une {{jsxref("Les_protocoles_iteration", "itération")}} permettant de passer en revue toutes les paires clé/valeur contenues dans cet objet.</dd>
+ <dt>{{domxref("FormData.get()")}}</dt>
+ <dd>Renvoie la première valeur associée à une clé donnée à partir d'un objet <code>FormData</code>.</dd>
+ <dt>{{domxref("FormData.getAll()")}}</dt>
+ <dd>Retourne un tableau de toutes les valeurs associées à une clé donnée à partir d'un <code>FormData</code>.</dd>
+ <dt>{{domxref("FormData.has()")}}</dt>
+ <dd>Renvoie un booléen indiquant si un objet <code>FormData</code> contient une certaine clé.</dd>
+ <dt>{{domxref("FormData.keys()")}}</dt>
+ <dd>Retourne une {{jsxref("Les_protocoles_iteration", "itération")}} permettant de parcourir toutes les clés des paires clé/valeur contenues dans cet objet.</dd>
+ <dt>{{domxref("FormData.set()")}}</dt>
+ <dd>Définit une nouvelle valeur pour une clé existante dans un objet <code>FormData</code>, ou ajoute la clé/valeur si elle n'existe pas encore.</dd>
+ <dt>{{domxref("FormData.values()")}}</dt>
+ <dd>Retourne une {{jsxref("Les_protocoles_iteration", "itération")}} permettant de parcourir toutes les clés des paires clé/valeur contenues dans cet 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">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest','#interface-formdata','FormData')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>FormData définit dans les specs XHR</td>
+  </tr>
+ </tbody>
+</table>
+
+<ul>
+</ul>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.FormData")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li><a href="/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest" title="En/Using XMLHttpRequest">Utilisation de XMLHttpRequest</a></li>
+ <li><a href="/fr/docs/Web/API/FormData/Utilisation_objets_FormData" title="en/DOM/XMLHttpRequest/FormData/Using_FormData_objects">Utilisation des objects FormData </a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
diff --git a/files/fr/web/api/formdata/keys/index.html b/files/fr/web/api/formdata/keys/index.html
new file mode 100644
index 0000000000..2aa0122f78
--- /dev/null
+++ b/files/fr/web/api/formdata/keys/index.html
@@ -0,0 +1,79 @@
+---
+title: FormData.keys()
+slug: Web/API/FormData/keys
+tags:
+  - API
+  - FormData
+  - Iteration
+  - Méthode
+  - Reference
+  - XHR
+  - XMLHttpRequestAPI
+  - keys
+translation_of: Web/API/FormData/keys
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p>La méthode <code>FormData.keys()</code> renvoie une {{jsxref("Les_protocoles_iteration", "itération")}} permettant de parcourir toutes les clés contenues dans cet objet. Les clés sont des objets {{domxref("USVString")}}.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Cette méthode est disponible dans les <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">formData.keys();</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Retourne une {{jsxref("Les_protocoles_iteration", "itération")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js;highlight:[7]">// Créer un object FormData test
+var formData = new FormData();
+formData.append('cle1', 'valeur1');
+formData.append('cle2', 'valeur2');
+
+// Affiche les clés
+for (var key of formData.keys()) {
+   console.log(key);
+}
+</pre>
+
+<p>Le résultat est :</p>
+
+<pre>cle1
+cle2</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('XMLHttpRequest','#dom-formdata','keys() (as iterator&lt;&gt;)')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.FormData.keys")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li><a href="https://wiki.developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest" title="Using XMLHttpRequest">Utiliser XMLHttpRequest</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/fr/docs/Web/API/FormData/Utilisation_objets_FormData" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Utiliser les objets FormData</a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
diff --git a/files/fr/web/api/formdata/set/index.html b/files/fr/web/api/formdata/set/index.html
new file mode 100644
index 0000000000..08531cf865
--- /dev/null
+++ b/files/fr/web/api/formdata/set/index.html
@@ -0,0 +1,92 @@
+---
+title: FormData.set()
+slug: Web/API/FormData/set
+tags:
+  - API
+  - FormData
+  - Méthode
+  - Reference
+  - XHR
+  - XMLHttpRequest
+  - set
+translation_of: Web/API/FormData/set
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p>La méthode <code>set()</code> de l'interface {{domxref("FormData")}} définit une nouvelle valeur pour une clé existante dans un objet <code>FormData</code>, ou ajoute la clé/valeur si elle n'existe pas encore.</p>
+
+<p>La différence entre <code>set()</code> et {{domxref("FormData.append")}} est que si la clé spécifiée existe déjà, <code>set()</code> écrasera toutes les valeurs existantes avec la nouvelle, tandis que {{domxref("FormData.append")}} ajoutera la nouvelle valeur à la fin de l'ensemble de valeurs existant.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Cette méthode est disponible dans les <a href="/fr/docs/Web/API/Web_Workers_API" rel="noopener">Web Workers</a>.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Il existe deux versions de cette méthode : une version à deux et une version à trois paramètres :</p>
+
+<pre class="brush: js">formData.set(name, value);
+formData.set(name, value, filename);</pre>
+
+<h4 id="append_Parameters" name="append()_Parameters">Paramètres</h4>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Le nom du champ dont les données sont contenues en valeur (<code>value</code>).</dd>
+ <dt><code>value</code></dt>
+ <dd>La valeur du champ. Il peut s'agir d'un {{domxref("USVString")}} ou d'un {{domxref("Blob")}} (y compris les sous-classes telles que {{domxref("File")}}). Si aucune de ces sous-classes n'est spécifiée, la valeur est convertie en une chaîne de caractères.</dd>
+ <dt><code>filename </code>{{optional_inline}}</dt>
+ <dd>Le nom de fichier communiqué au serveur (un {{domxref("USVString")}}), lorsqu'un {{domxref("Blob")}} ou un {{domxref("File")}} est passée comme deuxième paramètre. Le nom de fichier par défaut pour les objets {{domxref("Blob")}} est "blob". Le nom de fichier par défaut pour les objets {{domxref("File")}} est le nom du fichier.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note :</strong> Si vous spécifiez un {{domxref("Blob")}} comme donnée à ajouter à l'objet FormData, le nom du fichier qui sera rapporté au serveur dans l'en-tête "Content-Disposition" utilisé pour varier d'un navigateur à l'autre.</p>
+</div>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>La ligne suivante crée un objet <code>FormData</code> vide:</p>
+
+<pre class="brush: js">var formData = new FormData(); // Actuellement vide</pre>
+
+<p>Vous pouvez définir des paires clé/valeur à ce sujet en utilisant {{domxref("FormData.set")}} :</p>
+
+<pre class="brush: js">formData.set('username', 'Chris');
+formData.set('userpic', myFileInput.files[0], 'chris.jpg');</pre>
+
+<p>Si la valeur envoyée est différente de String ou Blob, elle sera automatiquement convertie en <code>String</code> :</p>
+
+<pre class="brush: js">formData.set('name', 72);
+formData.get('name'); // "72"</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('XMLHttpRequest','#dom-formdata-set','set()')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.FormData.set")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li><a href="/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest" title="Using XMLHttpRequest">Utiliser XMLHttpRequest</a></li>
+ <li><a href="/fr/docs/Web/Guide/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Utiliser les objets FormData</a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
diff --git a/files/fr/web/api/formdata/utilisation_objets_formdata/index.html b/files/fr/web/api/formdata/utilisation_objets_formdata/index.html
new file mode 100644
index 0000000000..a64c8be0d0
--- /dev/null
+++ b/files/fr/web/api/formdata/utilisation_objets_formdata/index.html
@@ -0,0 +1,145 @@
+---
+title: Utilisation des objets FormData
+slug: Web/API/FormData/Utilisation_objets_FormData
+tags:
+  - AJAX
+  - Blob
+  - File
+  - FormData
+  - Formulaires
+  - XHR
+  - XMLHttpRequest
+translation_of: Web/API/FormData/Using_FormData_Objects
+---
+<p class="summary">L’objet <code><a href="/en-US/docs/Web/API/FormData">FormData</a></code> vous permet de compiler un ensemble de paires clé/valeur à envoyer à l’aide de l’API <code><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code>. Il est principalement destiné à l’envoi de données de formulaire, mais il peut également être utilisé indépendamment des formulaires pour transmettre des données indexées. Le format des données transmises est le même que celui qu’utiliserait la méthode {{domxref("HTMLFormElement.submit","submit()")}} du formulaire pour envoyer les données si l’encodage de ce dernier était défini sur <code>multipart/form-data</code>.</p>
+
+<h2 id="Création_intégrale_d’un_objet_FormData">Création intégrale d’un objet FormData</h2>
+
+<p>Vous pouvez construire un objet <code>FormData</code> vous-même, en créer une instance, puis y ajouter des champs en appelant la méthode {{domxref("FormData.append","append()")}}, comme suit :</p>
+
+<pre class="brush: js">var formData = new FormData();
+
+formData.append("username", "Groucho");
+formData.append("accountnum", 123456); // le numéro 123456 est converti immédiatement en chaîne "123456"
+
+// fichier HTML choisi par l'utilisateur
+formData.append("userfile", fileInputElement.files[0]);
+
+// objet JavaScript de type fichier
+var content = '&lt;a id="a"&gt;&lt;b id="b"&gt;hey!&lt;/b&gt;&lt;/a&gt;'; // the body of the new file...
+var blob = new Blob([content], { type: "text/xml"});
+
+formData.append("webmasterfile", blob);
+
+var request = new XMLHttpRequest();
+request.open("POST", "http://foo.com/submitform.php");
+request.send(formData);
+</pre>
+
+<div class="note"><strong>Remarque :</strong> les champs « userfile » et « webmasterfile » contiennent tous deux un fichier. Le numéro attribué au champ « accountnum » est immédiatement converti en chaîne par la méthode <a href="/en/DOM/XMLHttpRequest/FormData#append()" title="en/XMLHttpRequest/FormData#append()"><code>FormData.append()</code></a> (la valeur du champ peut être un objet {{ domxref("Blob") }}, {{ domxref("File") }} ou une chaîne : <strong>s’il ne s’agit ni d’un objet Blob, ni d’un objet File, la valeur est convertie en chaîne</strong>).</div>
+
+<p>Dans cet exemple, une instance <code>FormData</code> contenant les valeurs des champs « username », « accountnum », « userfile » et « webmasterfile » est créée, puis la méthode <code>XMLHttpRequest</code> <a href="/en/DOM/XMLHttpRequest#send()" title="en/XMLHttpRequest#send()"><code>send()</code></a> est utilisée pour envoyer les données du formulaire. Le champ « webmasterfile » est un objet {{domxref("Blob")}}. Un objet <code>Blob</code> représente un objet-fichier de données brutes immuables. Les Blobs représentent des données qui ne sont pas nécessairement dans un format JavaScript natif. L’interface {{ domxref("File") }} se base sur l’objet <code>Blob</code>, elle en hérite les fonctionnalités et les étend pour prendre en charge les fichiers du système de l’utilisateur. Pour construire un <code>Blob</code>, vous pouvez invoquer le {{domxref("Blob.Blob","constructeur Blob()")}}.</p>
+
+<h2 id="Récupération_d’un_objet_FormData_dans_un_formulaire_HTML">Récupération d’un objet FormData dans un formulaire HTML</h2>
+
+<p>Pour construire un objet <code>FormData</code> contenant les données d’un élément HTML {{ HTMLElement("form") }} existant, spécifiez cet élément lors de la création de l’objet<code> </code>:</p>
+
+<pre class="brush: js">var formData = new FormData(someFormElement);
+</pre>
+
+<p>Par exemple :</p>
+
+<pre class="brush: js">var formElement = document.querySelector("form");
+var request = new XMLHttpRequest();
+request.open("POST", "submitform.php");
+request.send(new FormData(formElement));
+</pre>
+
+<p>Vous pouvez également ajouter des données supplémentaires à l’objet <code>FormData</code> entre sa récupération dans un formulaire et son envoi, comme suit :</p>
+
+<pre class="brush: js">var formElement = document.querySelector("form");
+var formData = new FormData(formElement);
+var request = new XMLHttpRequest();
+request.open("POST", "submitform.php");
+formData.append("serialnumber", serialNumber++);
+request.send(formData);</pre>
+
+<p>Vous pouvez ainsi ajouter des données au formulaire avant de l’envoyer, pour y inclure des informations supplémentaires que les utilisateurs ne peuvent pas nécessairement modifier.</p>
+
+<h2 id="Envoi_de_fichiers_via_un_objet_FormData">Envoi de fichiers via un objet FormData</h2>
+
+<p>L’objet <code>FormData</code> vous permet également d’envoyer des fichiers. Il vous suffit d’inclure un élément HTML {{ HTMLElement("input") }} de type <code>file</code> dans votre élément {{htmlelement("form")}} :</p>
+
+<pre class="brush: html">&lt;form enctype="multipart/form-data" method="post" name="fileinfo"&gt;
+  &lt;label&gt;Votre adresse électronique :&lt;/label&gt;
+  &lt;input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /&gt;&lt;br /&gt;
+  &lt;label&gt;Étiquette du fichier personnalisé :&lt;/label&gt;
+  &lt;input type="text" name="filelabel" size="12" maxlength="32" /&gt;&lt;br /&gt;
+  &lt;label&gt;Fichier à mettre de côté :&lt;/label&gt;
+  &lt;input type="file" name="file" required /&gt;
+  &lt;input type="submit" value="Mettez le fichier de côté." /&gt;
+&lt;/form&gt;
+&lt;div&gt;&lt;/div&gt;
+</pre>
+
+<p>Vous pouvez ensuite l’envoyer à l’aide du code suivant :</p>
+
+<pre class="brush: js">var form = document.forms.namedItem("fileinfo");
+form.addEventListener('submit', function(ev) {
+
+  var oOutput = document.querySelector("div"),
+      oData = new FormData(form);
+
+  oData.append("CustomField", "Données supplémentaires");
+
+  var oReq = new XMLHttpRequest();
+  oReq.open("POST", "stash.php", true);
+  oReq.onload = function(oEvent) {
+    if (oReq.status == 200) {
+      oOutput.innerHTML = "Envoyé !";
+    } else {
+      oOutput.innerHTML = "Erreur " + oReq.status + " lors de la tentative d’envoi du fichier.&lt;br \/&gt;";
+    }
+  };
+
+  oReq.send(oData);
+  ev.preventDefault();
+}, false);
+</pre>
+
+<div class="note">
+<p><strong>Remarque </strong>: si vous passez une référence dans le formulaire, la méthode spécifiée dans ce dernier sera utilisée au lieu de celle définie dans l’appel de la méthode open().</p>
+</div>
+
+<p>Vous pouvez également ajouter un objet {{ domxref("File") }} ou {{ domxref("Blob") }} directement dans l’objet {{ domxref("FormData") }} :</p>
+
+<pre class="brush: js">data.append("myfile", myBlob, "filename.txt");
+</pre>
+
+<p>Avec la méthode {{domxref("FormData.append","append()")}}, vous pouvez utiliser le troisième paramètre facultatif pour passer un nom de fichier dans l’en-tête <code>Content-Disposition</code> envoyé au serveur. Si aucun nom de fichier n’est spécifié (ou si le paramètre n’est pas pris en charge), le nom « blob » est utilisé.</p>
+
+<p>Vous pouvez utiliser l’objet <code>FormData</code> avec jQuery si vous définissez les options appropriées :</p>
+
+<pre class="brush: js">var fd = new FormData(document.querySelector("form"));
+fd.append("CustomField", "Données supplémentaires");
+$.ajax({
+  url: "stash.php",
+  type: "POST",
+  data: fd,
+  processData: false,  // dire à jQuery de ne pas traiter les données
+  contentType: false   // dire à jQuery de ne pas définir le contentType
+});
+</pre>
+
+<h2 id="Envoi_de_formulaires_et_de_fichiers_via_AJAX_sans_objet_FormData">Envoi de formulaires et de fichiers via AJAX <em>sans</em> objet <code>FormData</code></h2>
+
+<p>Si vous voulez en savoir plus sur la sérialisation des données  et l’envoi d’un formulaire via <a href="/en-US/docs/AJAX" title="/en-US/docs/AJAX">AJAX</a> <em>sans</em> utiliser d’objets FormData, consultez <a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files" title="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files">ce paragraph</a>e.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Utiliser XMLHttpRequest</a></li>
+ <li>{{domxref("HTMLFormElement")}}</li>
+ <li>{{domxref("Blob")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays">Tableaux typés</a></li>
+</ul>
diff --git a/files/fr/web/api/formdata/values/index.html b/files/fr/web/api/formdata/values/index.html
new file mode 100644
index 0000000000..e9ea371f97
--- /dev/null
+++ b/files/fr/web/api/formdata/values/index.html
@@ -0,0 +1,79 @@
+---
+title: FormData.values()
+slug: Web/API/FormData/values
+tags:
+  - API
+  - FormData
+  - Iteration
+  - Méthode
+  - Reference
+  - XHR
+  - XMLHttpRequestAPI
+  - values
+translation_of: Web/API/FormData/values
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p>La méthode <code><strong>FormData.values()</strong></code> renvoie une {{jsxref("Les_protocoles_iteration", "itération")}} permettant de passer en revue toutes les valeurs contenues dans cet objet. Les valeurs sont des objets {{domxref("USVString")}} ou {{domxref("Blob")}}.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Cette méthode est disponible dans les <a href="/fr/docs/Web/API/Web_Workers_API" rel="noopener">Web Workers</a>.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">formData.values();</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Retourne une {{jsxref("Les_protocoles_iteration", "itération")}} .</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js;highlight:[7]">// Créer un objet FormData test
+var formData = new FormData();
+formData.append('cle1', 'valeur1');
+formData.append('cle2', 'valeur2');
+
+// Affiche les valeurs
+for (var value of formData.values()) {
+   console.log(value);
+}
+</pre>
+
+<p>Le résultat est :</p>
+
+<pre>valeur1
+valeur2</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('XMLHttpRequest','#dom-formdata','values() (as iterator&lt;&gt;)')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.FormData.values")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li><a href="/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest" title="Using XMLHttpRequest">Utiliser XMLHttpRequest</a></li>
+ <li><a href="/fr/docs/Web/Guide/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Utiliser les objets FormData</a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
diff --git a/files/fr/web/api/gainnode/index.html b/files/fr/web/api/gainnode/index.html
new file mode 100644
index 0000000000..1da72965df
--- /dev/null
+++ b/files/fr/web/api/gainnode/index.html
@@ -0,0 +1,171 @@
+---
+title: GainNode
+slug: Web/API/GainNode
+tags:
+  - API
+  - Experimental
+  - Reference
+  - Web Audio API
+translation_of: Web/API/GainNode
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<p>L'interface <strong><code>GainNode</code></strong> représente une variation de volume. Il s'agit d'un {{domxref("AudioNode")}}, c'est un module de traitement audio, qui provoque un gain donné à appliquer à des données d'entrée avant sa propagation à la sortie. Un <code>GainNode</code> a toujours exactement une entrée et une sortie, avec la même quantité de canaux.</p>
+
+<p>Le gain est une valeur sans unité, qui change éventuellement avec le temps, qui est multiplié à chaque échantillon correspondant de tous les canaux entrées. En cas de modification, le nouveau gain est appliqué à l'aide d'un algorithme d'effilochage afin d'éviter aux «clics» inesthétiques d'apparaître dans l'audio résultant.</p>
+
+<p><img alt="The GainNode is increasing the gain of the output." src="https://mdn.mozillademos.org/files/5085/WebAudioGainNode.png" style="height: 116px; width: 774px;"></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><dfn>Nombre d'entrées</dfn></th>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Nombre de sorties</dfn></th>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Mode de comptage des canaux</dfn></th>
+   <td><code>"max"</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Nombre de canaux</dfn></th>
+   <td><code>2</code> (inutilisés dans le mode de comptage par défaut)</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Interprétation des canaux</dfn></th>
+   <td><code>"speakers"</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("GainNode.GainNode", "GainNode()")}}</dt>
+ <dd>Crée une nouvelle instance d'un objet <code>GainNode</code>. Il ne faut pas créer un noeud de gain manuellement, mais plutôt utiliser la méthode {{domxref("AudioContext.createGain()")}}.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Hérite des propritétés de son parent, </em><em>{{domxref("AudioNode")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("GainNode.gain")}}</dt>
+ <dd>Est un <a href="/fr/docs/Web/API/AudioParam#a-rate">a-rate</a> {{domxref ("AudioParam")}} représentant le montant du gain à appliquer. (Bien que le <code>AudioParam</code> retournée est en lecture seule, la valeur qu'il représente ne l'est pas).</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p>Aucune méthode spécifique; hérite des méthodes de son parent, {{domxref("AudioNode")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>{{page("/en-US/docs/Web/API/AudioContext.createGain","Example")}}</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statuts</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#GainNode-section', 'GainNode')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support basique</td>
+   <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(25.0)}} </td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(15)}}{{property_prefix("webkit")}}<br>
+    {{CompatOpera(22)}}</td>
+   <td>6.0{{property_prefix("webkit")}}</td>
+  </tr>
+  <tr>
+   <td>constructeur</td>
+   <td>{{CompatChrome(55.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(42)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>26.0</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(33.0)}}</td>
+  </tr>
+  <tr>
+   <td>constructeur</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(55.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(42)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(55.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser l'API Web Audio</a></li>
+</ul>
diff --git a/files/fr/web/api/gamepad/index.html b/files/fr/web/api/gamepad/index.html
new file mode 100644
index 0000000000..6b9b9334e6
--- /dev/null
+++ b/files/fr/web/api/gamepad/index.html
@@ -0,0 +1,99 @@
+---
+title: Gamepad
+slug: Web/API/Gamepad
+translation_of: Web/API/Gamepad
+---
+<p>{{APIRef("Gamepad API")}}</p>
+
+<p>L'interface <strong><code>Gamepad</code></strong> de l'<a href="/fr/docs/Web/API/Gamepad_API">API Gamepad</a> définit une manette individuelle ou un autre contrôleur, autorisant l'accès à des informations telles que les boutons pressés, la position des axes et l'identifiant.</p>
+
+<p>Un objet <code>Gamepad</code> peut être retourné de deux manières :</p>
+
+<ul>
+ <li>Via la propriété <code>gamepad</code> des événements {{event("gamepadconnected")}} et {{event("gamepaddisconnected")}}.</li>
+ <li>Ou en prenant n'importe quelle position dans le tableau retourné par la méthode {{domxref("Navigator.getGamepads()")}}.</li>
+</ul>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("Gamepad.axes")}} {{readonlyInline}}</dt>
+ <dd>Un tableau représentant les contrôles avec les axes présents sur le dispositif (par exemple : les joysticks analogiques).</dd>
+ <dt>{{domxref("Gamepad.buttons")}} {{readonlyInline}}</dt>
+ <dd>Un tableau d'objets {{domxref("gamepadButton")}} représentant les boutons présents sur le dispositif.</dd>
+ <dt>{{domxref("Gamepad.connected")}} {{readonlyInline}}</dt>
+ <dd>Un booléen indiquant si la manette est toujours connectée au système.</dd>
+ <dt>{{domxref("Gamepad.displayId")}} {{readonlyInline}}</dt>
+ <dd>Retourne <dfn>{{domxref("VRDisplay.displayId")}} associé à {{domxref("VRDisplay")}} — Le VRDisplay</dfn><dfn> </dfn>dont la manette contrôle la scène affichée.</dd>
+ <dt>{{domxref("Gamepad.id")}} {{readonlyInline}}</dt>
+ <dd>Un {{domxref("DOMString")}} contenant l'information d'identification de la manette.</dd>
+ <dt>{{domxref("Gamepad.index")}} {{readonlyInline}}</dt>
+ <dd>Un entier qui s'auto-incrémente pour être unique à chaque dispositif actuellement connecté au système.</dd>
+ <dt>{{domxref("Gamepad.mapping")}} {{readonlyInline}}</dt>
+ <dd>Une chaîne de caractères indiquant si le navigateur a remappé les contrôles du dispositif à un layout connu.</dd>
+ <dt>{{domxref("Gamepad.timestamp")}} {{readonlyInline}}</dt>
+ <dd>Un {{domxref("DOMHighResTimeStamp")}} représentant la dernière fois que les données pour cette manette a été mise à jour. <em>Noter que cette propriété n'est pas supportée partout.</em></dd>
+</dl>
+
+<h3 id="Extensions_expérimentales_apportées_à_Gamepad">Extensions expérimentales apportées à <code>Gamepad</code></h3>
+
+<p>Les interfaces suivantes sont définies dans la spécification {{SpecName("GamepadExtensions")}} et fournissent un accès à des fonctionnalités expérimentales tels que les retours haptiques et informations de position des contrôleurs WebVR.</p>
+
+<dl>
+ <dt>{{domxref("Gamepad.hand")}} {{readonlyinline}}</dt>
+ <dd>Une énumération qui définit dans quelle main le contrôleur est tenue (ou dans laquelle il est probablement tenue).</dd>
+ <dt>{{domxref("Gamepad.hapticActuators")}} {{readonlyinline}}</dt>
+ <dd>Un tableau contenant des objets {{domxref("GamepadHapticActuator")}} dont chacun représente un matériel disponible pour le contrôleur pour les retours haptiques.</dd>
+ <dt>{{domxref("Gamepad.pose")}} {{readonlyinline}}</dt>
+ <dd>Un objet {{domxref("GamepadPose")}} qui représente la position et l'orientation d'un contrôleur WebVR dans l'espace en trois dimensions.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">window.addEventListener("gamepadconnected", function(event) {
+  console.log("Contrôleur connecté à %d: %s. %d boutons, %d axes.",
+  event.gamepad.index, event.gamepad.id,
+  event.gamepad.buttons.length, event.gamepad.axes.length);
+});</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("Gamepad", "#gamepad-interface", "Gamepad")}}</td>
+   <td>{{Spec2("Gamepad")}}</td>
+   <td>Première définition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebVR', '#gamepad-getvrdisplays-attribute', 'displayId')}}</td>
+   <td>{{Spec2("WebVR")}}</td>
+   <td>
+    <p>Définit la propriété {{domxref("Gamepad.displayId")}}.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("GamepadExtensions", "#partial-gamepad-interface", "Gamepad extensions")}}</td>
+   <td>{{Spec2("GamepadExtensions")}}</td>
+   <td>Définit les extensions expérimentales</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilités_des_navigateurs">Compatibilités des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Gamepad")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/Guide/API/Gamepad">Utilisation de l'API Gamepad</a></li>
+ <li><a href="/fr/docs/Web/API/Gamepad_API">API Gamepad</a></li>
+</ul>
diff --git a/files/fr/web/api/gamepad_api/index.html b/files/fr/web/api/gamepad_api/index.html
new file mode 100644
index 0000000000..33c6a7f458
--- /dev/null
+++ b/files/fr/web/api/gamepad_api/index.html
@@ -0,0 +1,90 @@
+---
+title: Gamepad API
+slug: Web/API/Gamepad_API
+translation_of: Web/API/Gamepad_API
+---
+<div>{{DefaultAPISidebar("Gamepad API")}}</div>
+
+<p>L'<strong>API Gamepad</strong> <span class="tlid-translation translation" lang="fr"><span title="">est un moyen</span></span> pour les <span class="tlid-translation translation" lang="fr"><span title="">développeurs d'accéder aux signaux provenant des manettes des jeu et des autres unités</span> <span title="">de commande du jeu d'y répondre de manière simple et systématiq</span></span>. <span class="tlid-translation translation" lang="fr"><span title="">Il contient trois interfaces, deux événements et une fonction spécialisée, pour répondre aux manettes connectées et déconnectées, et pour accéder à d'autres informations sur les manettes elles-mêmes, ainsi que sur les boutons et autres commandes sur lesquels vous appuyez actuellement.</span></span></p>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/Gamepad" title="The Gamepad interface of the Gamepad API defines an individual gamepad or other controller, allowing access to information such as button presses, axis positions, and id."><code>Gamepad</code></a></dt>
+ <dd><span class="tlid-translation translation" lang="fr"><span title="">Représente une manette de jeu / unités</span> <span title="">de commande du jeu connecté à l'ordinateur.</span></span></dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/GamepadButton" title="The GamepadButton interface defines an individual button of a gamepad or other controller, allowing access to the current state of different types of buttons available on the control device."><code>GamepadButton</code></a></dt>
+ <dd>Représente un bouton sur un gamepad connecté.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/GamepadEvent" title="The GamepadEvent interface of the Gamepad API contains references to gamepads connected to the system, which is what the gamepad events Window.gamepadconnected and Window.gamepaddisconnected are fired in response to."><code>GamepadEvent</code></a></dt>
+ <dd>L'objet d'événement qui déclenche des événements sur la manette de jeu contiguë de manière représentative.</dd>
+</dl>
+
+<h3 id="Extensions_de_manette_du_jeu_expérimentales">Extensions de manette du jeu expérimentales</h3>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/GamepadHapticActuator" title="The GamepadHapticActuator interface of the Gamepad API represents hardware in the controller designed to provide haptic feedback to the user (if available), most commonly vibration hardware."><code>GamepadHapticActuator</code></a></dt>
+ <dd>Represents hardware in the controller designed to provide haptic feedback to the user (if available), most commonly vibration hardware.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/GamepadPose" title="The GamepadPose interface of the Gamepad API represents the pose of a WebVR controller at a given timestamp (which includes orientation, position, velocity, and acceleration information.)"><code>GamepadPose</code></a></dt>
+ <dd>Represents the pose of a controller (e.g. position and orientation in 3D space) in the case of a <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API">WebVR</a>controller.</dd>
+</dl>
+
+<p>See also the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Gamepad#Experimental_extensions_to_Gamepad">extensions to the Gamepad interface</a>, for features that allow you to access the above information.</p>
+
+<h3 id="Extensions_à_d'autres_interfaces">Extensions à d'autres interfaces</h3>
+
+<h4 id="Navigator">Navigator</h4>
+
+<dl>
+ <dt>{{domxref("Navigator.getGamepads()")}}</dt>
+ <dd>An extension to the {{domxref("Navigator")}} object that returns an array of {{domxref("Gamepad")}} objects, one for each connected gamepad.</dd>
+</dl>
+
+<h4 id="Window_events">Window events</h4>
+
+<dl>
+ <dt>{{domxref("Window.ongamepadconnected")}}</dt>
+ <dd>Represents an event handler that will run when a gamepad is connected (when the {{event('gamepadconnected')}} event fires).</dd>
+ <dt>{{domxref("Window.ongamepaddisconnected")}}</dt>
+ <dd>Represents an event handler that will run when a gamepad is disconnected (when the {{event('gamepaddisconnected')}} event fires).</dd>
+</dl>
+
+<h2 id="Tutoriels_et_guides">Tutoriels et guides</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API/Using_the_Gamepad_API">Using the Gamepad API</a></li>
+ <li><a href="/en-US/docs/Games/Techniques/Controls_Gamepad_API">Implementing controls using the Gamepad API</a></li>
+</ul>
+
+<h2 id="Caractéristiques">Caractéristiques</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("GamepadExtensions")}}</td>
+   <td>{{Spec2("GamepadExtensions")}}</td>
+   <td>Defines the {{anch("Experimental Gamepad extensions")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Gamepad", "", "The Gamepad API specification")}}</td>
+   <td>{{Spec2("Gamepad")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_du_navigateur">Compatibilité du navigateur</h2>
+
+
+
+<p>{{Compat("api.Gamepad")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a class="external text" href="https://hacks.mozilla.org/2013/12/the-gamepad-api/" rel="nofollow">The Gamepad API</a> by Ted Mielczarek and Robert Nyman</li>
+ <li><a href="http://luser.github.io/gamepadtest/">Simple API demo page</a> (<a href="https://github.com/luser/gamepadtest">source</a>)</li>
+</ul>
diff --git a/files/fr/web/api/geolocation/clearwatch/index.html b/files/fr/web/api/geolocation/clearwatch/index.html
new file mode 100644
index 0000000000..b60b0df663
--- /dev/null
+++ b/files/fr/web/api/geolocation/clearwatch/index.html
@@ -0,0 +1,143 @@
+---
+title: Geolocation.clearWatch()
+slug: Web/API/Geolocation/clearWatch
+tags:
+  - API
+  - Besoin d'exemple
+  - Géolocalisation
+  - Géolocalisation API
+  - Méthode
+  - Reference
+translation_of: Web/API/Geolocation/clearWatch
+---
+<p>{{ APIref("Geolocation API") }}</p>
+
+<p>La méthode <strong><code>Geolocation.clearWatch()</code></strong> est utilisée pour libérer les ressources de localisation/erreur créées antérieurement en utilisant {{domxref("Geolocation.watchPosition()")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">navigator.geolocation.clearWatch(<em>id</em>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><em>id</em></dt>
+ <dd>Le nombre ID est donné par la méthode qui permet la localisation : {{domxref("Geolocation.watchPosition()")}} ; ressource que vous désirez supprimer.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">var id, target, option;
+
+function success(pos) {
+  var crd = pos.coords;
+
+  if (target.latitude === crd.latitude &amp;&amp; target.longitude === crd.longitude) {
+    console.log('Congratulation, you reach the target');
+    navigator.geolocation.clearWatch(id);
+  }
+};
+
+function error(err) {
+  console.warn('ERROR(' + err.code + '): ' + err.message);
+};
+
+target = {
+  latitude : 0,
+  longitude: 0,
+}
+
+options = {
+  enableHighAccuracy: false,
+  timeout: 5000,
+  maximumAge: 0
+};
+
+id = navigator.geolocation.watchPosition(success, error, options);
+</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('Geolocation')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Spécification initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caractéristique</th>
+   <th>Chrome</th>
+   <th>Limite</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>5</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>10.60<br>
+    Supprimé en 15.0<br>
+    Réintroduite en 16.0</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caractéristique</th>
+   <th>Android</th>
+   <th>Chrome pour Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("4")}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>10.60</td>
+   <td>{{CompatUnknown()}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Using_geolocation" title="/en-US/docs/WebAPI/Using_geolocation">Using geolocation</a></li>
+ <li>{{domxref("Geolocation")}}</li>
+ <li>{{domxref("Geolocation.watchPosition()")}}</li>
+ <li>{{domxref("Geolocation.getCurrentPosition()")}}</li>
+</ul>
diff --git a/files/fr/web/api/geolocation/getcurrentposition/index.html b/files/fr/web/api/geolocation/getcurrentposition/index.html
new file mode 100644
index 0000000000..25c0c9d97c
--- /dev/null
+++ b/files/fr/web/api/geolocation/getcurrentposition/index.html
@@ -0,0 +1,90 @@
+---
+title: Geolocation.getCurrentPosition()
+slug: Web/API/Geolocation/getCurrentPosition
+tags:
+  - API
+  - Geolocation
+  - Méthode
+  - Reference
+translation_of: Web/API/Geolocation/getCurrentPosition
+---
+<div>{{securecontext_header}}{{APIRef("Geolocation API")}}</div>
+
+<p>La méthode <strong><code>Geolocation.getCurrentPosition()</code></strong> fournit la position actuelle de l'appareil.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">navigator.geolocation.getCurrentPosition(<em>success[</em>, <em>error[</em>, <em>[options]]</em>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>success</code></dt>
+ <dd>Une fonction de rappel qui prend un objet {{domxref("Position")}} comme argument.</dd>
+ <dt><code>error</code> {{optional_inline}}</dt>
+ <dd>Une fonction de rappel qui prend un objet {{domxref("PositionError")}} comme argument.</dd>
+ <dt><code>options</code> {{optional_inline}}</dt>
+ <dd>Un objet {{domxref("PositionOptions")}} optionnel. Les options décrites par cet objet sont :
+ <ul>
+  <li><code>maximumAge</code> : un entier qui exprime une durée en millisecondes ou l'infini pour indiquer la durée maximale pendant laquelle mettre en cache la position.</li>
+  <li><code>timeout</code> : un entier qui exprime la durée, en millisecondes, avant que la fonction de rappel <code>error</code> soit appelé. Si cette propriété vaut <code>0</code>, la fonction d'erreur ne sera jamais appelée.</li>
+  <li><code>enableHighAccuracy</code> : un booléen qui indique si une précision élevée est requise.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var options = {
+  enableHighAccuracy: true,
+  timeout: 5000,
+  maximumAge: 0
+};
+
+function success(pos) {
+  var crd = pos.coords;
+
+  console.log('Votre position actuelle est :');
+  console.log(`Latitude : ${crd.latitude}`);
+  console.log(`Longitude : ${crd.longitude}`);
+  console.log(`La précision est de ${crd.accuracy} mètres.`);
+}
+
+function error(err) {
+  console.warn(`ERREUR (${err.code}): ${err.message}`);
+}
+
+navigator.geolocation.getCurrentPosition(success, error, options);
+</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('Geolocation')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Spécification initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Geolocation.getCurrentPosition")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Using_geolocation" title="/en-US/docs/WebAPI/Using_geolocation">Utiliser la géolocalisation</a></li>
+ <li>{{domxref("Navigator.geolocation")}}</li>
+</ul>
diff --git a/files/fr/web/api/geolocation/index.html b/files/fr/web/api/geolocation/index.html
new file mode 100644
index 0000000000..0dd4b6917a
--- /dev/null
+++ b/files/fr/web/api/geolocation/index.html
@@ -0,0 +1,120 @@
+---
+title: Geolocation
+slug: Web/API/Geolocation
+tags:
+  - API
+  - Avancé
+  - Géolocalisation API
+  - Interface
+  - Reference
+translation_of: Web/API/Geolocation
+---
+<div>{{APIRef("Geolocation API")}}</div>
+
+<p>En intégrant l'interface <code><strong>Geolocation</strong></code>, on peut obtenir la position d'un ordinateur, d'un téléphone ou d'une tablette, ce qui permet aux contenus Web d'accéder à leur localisation. Un site internet ou une application mobile peut alors offrir divers services liés à la localisation de l'utilisateur.</p>
+
+<p>On obtient un objet par le biais de cette interface avec la propriété {{domxref("NavigatorGeolocation.geolocation")}} proposée par l'objet {{domxref("Navigator")}} .</p>
+
+<div class="note">
+<p><strong>Note:</strong> Pour des raisons de sécurité, quand une page web tente d'accéder aux données de localisation, l'utilisateur est prévenu, et son accord lui est demandé. Sachez que chaque navigateur a ses propres méthodes et politiques pour gérer les autorisations.</p>
+</div>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>L'interface de géolocalisation n'utilise ou n'hérite d'aucune propriété.</em></p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>L'interface de géolocalisation n'hérite d'aucune méthode.</em></p>
+
+<dl>
+ <dt>{{domxref("Geolocation.getCurrentPosition()")}}</dt>
+ <dd>Determine la position actuelle de l'appareil et donne en retour l'objet {{domxref("Position")}} avec sa valeur.</dd>
+ <dt>{{domxref("Geolocation.watchPosition()")}}</dt>
+ <dd>Retourne une valeur <code>long</code> représentant la nouvelle fonction callback, créée pour être utilisée à chaque fois que la position de l'appareil change.</dd>
+ <dt>{{domxref("Geolocation.clearWatch()")}}</dt>
+ <dd>Supprime le lien créé par la précédente utilisation de <code>watchPosition()</code>.</dd>
+</dl>
+
+<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('Geolocation')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Spécification initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caractéristique</th>
+   <th>Chrome</th>
+   <th>Limite</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>5</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>10.60<br>
+    Removed in 15.0<br>
+    Reintroduced in 16.0</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caractéristique</th>
+   <th>Android</th>
+   <th>Chrome pour Android</th>
+   <th>Limite</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("4")}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>10.60</td>
+   <td>{{CompatUnknown()}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Using_geolocation" title="/en-US/docs/WebAPI/Using_geolocation">Using geolocation</a></li>
+</ul>
diff --git a/files/fr/web/api/geolocation/watchposition/index.html b/files/fr/web/api/geolocation/watchposition/index.html
new file mode 100644
index 0000000000..00b5d17796
--- /dev/null
+++ b/files/fr/web/api/geolocation/watchposition/index.html
@@ -0,0 +1,155 @@
+---
+title: Geolocation.watchPosition()
+slug: Web/API/Geolocation/watchPosition
+tags:
+  - API
+  - Exemple
+  - Géolocalisation
+  - Géolocalisation API
+  - Méthode
+  - Reference
+translation_of: Web/API/Geolocation/watchPosition
+---
+<p>{{ APIref("Geolocation API") }}</p>
+
+<p>La méthode <strong><code>Geolocation.watchPosition()</code></strong> permet de manipuler une fonction appelée automatiquement à chaque fois que la position de l'appareil change. Vous pouvez de même, en option, manipuler une autre fonction appelée automatiquement pour gérer les erreurs.</p>
+
+<p>Cette méthode retourne une valeur ID de veille qui permet de libérer les fonctions déclarées automatiquement, évoquées précédemment, à l'aide de la méthode {{domxref("Geolocation.clearWatch()")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>id</em> = navigator.geolocation.watchPosition(<em>success[</em>, <em>error[</em>, <em>options]]</em>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><em>success</em></dt>
+ <dd>Nom d'une fonction appelée qui a pour paramètre l'objet {{domxref("Position")}}.</dd>
+ <dt><em>error</em> {{optional_inline}}</dt>
+ <dd>Nom d'une fonction optionnelle qui a pour paramètre l'objet {{domxref("PositionError")}}.</dd>
+ <dt><em>options</em> {{optional_inline}}</dt>
+ <dd>Un objet optionnel {{domxref("PositionOptions")}}.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">var id, target, options;
+
+function success(pos) {
+  var crd = pos.coords;
+
+  if (target.latitude === crd.latitude &amp;&amp; target.longitude === crd.longitude) {
+    console.log('Bravo, vous avez atteint la cible');
+    navigator.geolocation.clearWatch(id);
+  }
+}
+
+function error(err) {
+  console.warn('ERROR(' + err.code + '): ' + err.message);
+}
+
+target = {
+  latitude : 0,
+  longitude: 0
+};
+
+options = {
+  enableHighAccuracy: false,
+  timeout: 5000,
+  maximumAge: 0
+};
+
+id = navigator.geolocation.watchPosition(success, error, options);
+</pre>
+
+<div class="note"><strong>Note : </strong>Si votre application fonctionne sous Firefox OS, veillez à la <a href="/en-US/docs/Web/API/Geolocation/navigator.requestWakeLock()">geolocation wake lock</a> pour que votre application continue à recevoir les changements de positions si votre application tourne en tâche de fond, ou si votre écran est éteint.
+
+<p> </p>
+</div>
+
+<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('Geolocation', '#watch-position', 'Geolocation.watchPosition()')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Specification initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Navigateurs_compatibles">Navigateurs compatibles</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caractère</th>
+   <th>Chrome</th>
+   <th>Limite</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>5</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>10.60<br>
+    Supprimé de 15.0<br>
+    Réintroduit en 16.0</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caractère</th>
+   <th>Android</th>
+   <th>Chrome pour Android</th>
+   <th>Limite</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("4")}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>10.60</td>
+   <td>{{CompatUnknown()}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Geolocation/navigator.requestWakeLock()">geolocation wake lock</a></li>
+ <li><a href="/en-US/docs/WebAPI/Using_geolocation" title="/en-US/docs/WebAPI/Using_geolocation">Using geolocation</a></li>
+ <li>L'interface qui lui est réservée, {{domxref("Geolocation")}}, et la façon d'y accéder {{domxref("NavigatorGeolocation.geolocation")}}.</li>
+ <li>L'opération inverse : {{domxref("Geolocation.clearWatch()")}}</li>
+ <li>Une méthode similaire : {{domxref("Geolocation.getCurrentPosition()")}}</li>
+</ul>
diff --git a/files/fr/web/api/geolocation_api/index.html b/files/fr/web/api/geolocation_api/index.html
new file mode 100644
index 0000000000..330ac12430
--- /dev/null
+++ b/files/fr/web/api/geolocation_api/index.html
@@ -0,0 +1,246 @@
+---
+title: Geolocation API (API de géolocalisation)
+slug: Web/API/Geolocation_API
+tags:
+  - API
+  - GPS
+  - Geolocation
+  - Géolocalisation
+translation_of: Web/API/Geolocation_API
+---
+<div>{{securecontext_header}}{{DefaultAPISidebar("Geolocation API")}}</div>
+
+<p>L'API <strong>Geolocation </strong>(pour géolocalisation) permet à un utilisateur d'indiquer sa localisation à une application web s'il le souhaite. Pour des raisons de vie privée, l'application doit demander la permission à l'utilisateur de manipuler ces informations.</p>
+
+<h2 id="Lobjet_geolocation">L'objet <code>geolocation</code></h2>
+
+<p>L'API <a href="/fr/docs/Web/API/Geolocation">Geolocation</a> est publiée via l'objet {{domxref("navigator.geolocation")}}.</p>
+
+<p>Si l'objet existe, les services de géolocalisation sont disponibles. On peut donc tester la présence de ces fonctionnalités de cette façon :</p>
+
+<pre class="brush: js">if ("geolocation" in navigator) {
+  /* la géolocalisation est disponible */
+} else {
+  /* la géolocalisation n'est pas disponible */
+}
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Pour Firefox 24 et les versions antérieures, <code>"geolocation" in navigator</code> renvoyait toujours <code>true</code> même si l'API était désactivée. Cela a été corrigé à partir de <a href="/en-US/docs/Mozilla/Firefox/Releases/25/Site_Compatibility">Firefox 25</a> afin de respecter la spécification ({{bug(884921)}}).</p>
+</div>
+
+<h3 id="Obtenir_la_position_actuelle">Obtenir la position actuelle</h3>
+
+<p>Afin d'obtenir la position actuelle de l'utilisateur, on peut appeler la méthode {{domxref("geolocation.getCurrentPosition()","getCurrentPosition()")}}. Cela initie une requête asynchrone pour détecter la position de l'utilisateur en demandant au composant matériel une position à jour. Lorsque la position est déterminée, la fonction de <em>callback</em> est appelée. Il est possible de fournir un deuxième <em>callback</em> afin de gérer les erreurs. Le troisième paramètre de la fonction, optionnel, est un objet d'options qui indique l'âge maximal pour la position, le temps à attendre l'exécution de la requête et si on souhaite obtenir une précision élevée pour la position.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Par défaut {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} tente de répondre aussi rapidement que possible quitte à ce que le résultat soit peu précis. Cela permet de répondre rapidement (potentiellement avec des données peu précises comme l'IP ou le WiFi) plutôt que d'attendre une ou plusieurs minutes le calibrage du GPS.</p>
+</div>
+
+<pre class="brush: js">navigator.geolocation.getCurrentPosition(function(position) {
+  faireQqc(position.coords.latitude, position.coords.longitude);
+});</pre>
+
+<p>Dans l'exemple ci-avant, la fonction <code>faireQqc()</code> sera exécutée quand la localisation sera obtenue.</p>
+
+<h3 id="Suivre_lévolution_de_la_position">Suivre l'évolution de la position</h3>
+
+<p>Si les données de position changent (que l'appareil ait bougé ou que des informations de géolocalisation plus précises soient disponibles), on peut définir une fonction de <em>callback</em> qui sera appelée avec les informations mises à jour</p>
+
+<p>Pour cela, on utilise la fonction {{domxref("Geolocation.watchPosition()","watchPosition()")}} qui utilise les mêmes paramètres d'entrée que {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}. Ce <em>callback</em> est appelé plusieurs fois, permettant au navigateur de mettre à jour la position lorsqu'on se déplace ou lorsque des données plus précises sont fournies. La fonction de rappel pour la gestion des erreurs (optionnelle) peut aussi être appelée de façon répétée.</p>
+
+<div class="note">
+<p><strong>Note :</strong> On peut utiliser {{domxref("Geolocation.watchPosition()","watchPosition()")}} sans avoir d'abord appelé {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}.</p>
+</div>
+
+<pre class="brush: js">var watchID = navigator.geolocation.watchPosition(function(position) {
+  faireQqc(position.coords.latitude, position.coords.longitude);
+});</pre>
+
+<p>La méthode {{domxref("Geolocation.watchPosition()","watchPosition()")}} renvoie un identifiant qui peut être utilisé afin de redemander la position. Cet identifiant peut également être passé à la méthode {{domxref("Geolocation.clearWatch()","clearWatch()")}} afin d'arrêter le suivi de la position.</p>
+
+<pre class="brush: js">navigator.geolocation.clearWatch(watchID);
+</pre>
+
+<h3 id="Paramétrer_la_réponse">Paramétrer la réponse</h3>
+
+<p>{{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} et {{domxref("Geolocation.watchPosition()","watchPosition()")}} prennent en argument un <em>callback</em> appelé en cas de succès, un deuxième <em>callback</em> (optionnel) appelé en cas d'erreur et un troisième argument (optionnel) qui est un objet <code><a href="/fr/docs/Web/API/PositionOptions">PositionOptions</a></code>.</p>
+
+<p>Un appel à {{domxref("Geolocation.watchPosition()","watchPosition")}} peut donc ressembler à :</p>
+
+<pre class="brush: js">function geo_success(position) {
+  do_something(position.coords.latitude, position.coords.longitude);
+}
+
+function geo_error() {
+  alert("Sorry, no position available.");
+}
+
+var geo_options = {
+  enableHighAccuracy: true,
+  maximumAge        : 30000,
+  timeout           : 27000
+};
+
+var wpid = navigator.geolocation.watchPosition(geo_success, geo_error, geo_options);</pre>
+
+<h2 id="Décrire_une_position">Décrire une position</h2>
+
+<p>La position de l'utilisateur est décrite par un objet {{domxref("Position")}} qui fait référence à un objet {{domxref("Coordinates")}} via la propriété <code>coords</code>.</p>
+
+<p>{{page("/fr/docs/Web/API/Position")}}</p>
+
+<p>{{page("/fr/docs/Web/API/Position/coords","Coordinates")}}</p>
+
+<h2 id="Gérer_les_erreurs">Gérer les erreurs</h2>
+
+<p>Le <em>callback</em> de gestion des erreurs (s'il est passé à <code>getCurrentPosition()</code> ou <code>watchPosition()</code>) s'attend à recevoir un objet <code><a href="/fr/docs/Web/API/PositionError">PositionError</a></code> comme premier paramètre.</p>
+
+<pre class="brush: js">function errorCallback(error) {
+  alert('ERROR(' + error.code + '): ' + error.message);
+};
+</pre>
+
+<h2 id="Exemple_interactif">Exemple interactif</h2>
+
+<div class="hidden">
+<pre class="brush: css">body {
+  padding: 20px;
+  background-color:#ffffc9
+}
+
+button {
+  margin: .5rem 0;
+}
+</pre>
+</div>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html;">&lt;button id = "find-me"&gt;Montrer ma localisation&lt;/button&gt;&lt;br/&gt;
+&lt;p id = "status"&gt;&lt;/p&gt;
+&lt;a id = "map-link" target="_blank"&gt;&lt;/a&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">function geoFindMe() {
+
+  const status = document.querySelector('#status');
+  const mapLink = document.querySelector('#map-link');
+
+  mapLink.href = '';
+  mapLink.textContent = '';
+
+  function success(position) {
+    const latitude  = position.coords.latitude;
+    const longitude = position.coords.longitude;
+
+    status.textContent = '';
+    mapLink.href = `https://www.openstreetmap.org/#map=18/${latitude}/${longitude}`;
+    mapLink.textContent = `Latitude: ${latitude} °, Longitude: ${longitude} °`;
+  }
+
+  function error() {
+    status.textContent = 'Unable to retrieve your location';
+  }
+
+  if (!navigator.geolocation) {
+    status.textContent = 'Geolocation is not supported by your browser';
+  } else {
+    status.textContent = 'Locating…';
+    navigator.geolocation.getCurrentPosition(success, error);
+  }
+
+}
+
+document.querySelector('#find-me').addEventListener('click', geoFindMe);
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemple_interactif', 350, 150, "", "", "", "geolocation")}}</p>
+
+<h2 id="Demander_la_permission">Demander la permission</h2>
+
+<p>Pour une extension, toute utilisation des données de géolocalisation ne peut se faire qu'après avoir obtenu la permission. La fonction qui suit permet de demander la permission de façon semblable au rendu des pages web. La réponse de l'utilisateur est enregistrée dans la préférence indiquée par le paramètre <code>pref</code>. La fonction fournie dans le paramètre de <code>callback</code> sera appelée avec une valeur booléenne qui indique la réponse de l'utilisateur. Lorsque cette dernière vaut <code>true</code>, le module complémentaire pourra accéder aux données de géolocalisation.</p>
+
+<pre class="brush: js">function prompt(window, pref, message, callback) {
+    let branch = Components.classes["@mozilla.org/preferences-service;1"]
+                           .getService(Components.interfaces.nsIPrefBranch);
+
+    if (branch.getPrefType(pref) === branch.PREF_STRING) {
+        switch (branch.getCharPref(pref)) {
+        case "always":
+            return callback(true);
+        case "never":
+            return callback(false);
+        }
+    }
+
+    let done = false;
+
+    function remember(value, result) {
+        return function() {
+            done = true;
+            branch.setCharPref(pref, value);
+            callback(result);
+        }
+    }
+
+    let self = window.PopupNotifications.show(
+        window.gBrowser.selectedBrowser,
+        "geolocation",
+        message,
+        "geo-notification-icon",
+        {
+            label: "Share Location",
+            accessKey: "S",
+            callback: function(notification) {
+                done = true;
+                callback(true);
+            }
+        }, [
+            {
+                label: "Always Share",
+                accessKey: "A",
+                callback: remember("always", true)
+            },
+            {
+                label: "Never Share",
+                accessKey: "N",
+                callback: remember("never", false)
+            }
+        ], {
+            eventCallback: function(event) {
+                if (event === "dismissed") {
+                    if (!done) callback(false);
+                    done = true;
+                    window.PopupNotifications.remove(self);
+                }
+            },
+            persistWhileVisible: true
+        });
+}
+
+prompt(window,
+       "extensions.foo-addon.allowGeolocation",
+       "Foo Add-on wants to know your location.",
+       function callback(allowed) { alert(allowed); });
+</pre>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Geolocation")}}</p>
+
+<h3 id="Disponibilité">Disponibilité</h3>
+
+<p>La localisation basée sur le WiFi étant généralement obtenue via un service Google, l'API de géolocalisation peut être indisponible en Chine. Vous pouvez utiliser des fournisseurs tiers tels que <a href="http://lbsyun.baidu.com/index.php?title=jspopular/guide/geolocation">Baidu</a>, <a href="https://lbs.amap.com/api/javascript-api/guide/services/geolocation#geolocation">Autonavi</a> ou <a href="http://lbs.qq.com/tool/component-geolocation.html">Tencent</a>. Ces services se basent sur l'adresse IP de l'utilisateur ou sur une application locale afin de fournir un positionnement amélioré.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("navigator.geolocation")}}</li>
+ <li><a href="https://www.w3.org/TR/geolocation-API/" rel="external">L'API Geolocation sur w3.org</a></li>
+ <li><a href="https://hacks.mozilla.org/2013/10/who-moved-my-geolocation/">Qui a déplacé ma géolocalisation ? sur le blog Hacks</a></li>
+</ul>
diff --git a/files/fr/web/api/geolocationcoordinates/index.html b/files/fr/web/api/geolocationcoordinates/index.html
new file mode 100644
index 0000000000..fb3143479f
--- /dev/null
+++ b/files/fr/web/api/geolocationcoordinates/index.html
@@ -0,0 +1,140 @@
+---
+title: Coordinates
+slug: Web/API/GeolocationCoordinates
+translation_of: Web/API/GeolocationCoordinates
+---
+<div>{{securecontext_header}}{{APIRef("Geolocation API")}}</div>
+
+<div>L'interface <strong><code>Coordinates</code></strong> représente la position et l'altitude du périphérique sur Terre, ainsi que la précision avec lesquels ces propriétés sont calculées.</div>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>L'interface <code>Coordinates</code> n'hérite d'aucune propriété.</em></p>
+
+<dl>
+ <dt>{{domxref("Coordinates.latitude")}} {{readonlyInline}} {{securecontext_inline}}</dt>
+ <dd>Renvoie un <code>double</code> représentant la latitude en degrés décimaux.</dd>
+ <dt>{{domxref("Coordinates.longitude")}} {{readonlyInline}} {{securecontext_inline}}</dt>
+ <dd>Renvoie un <code>double</code> représentant la longitude en degrés décimaux.</dd>
+ <dt>{{domxref("Coordinates.altitude")}} {{readonlyInline}} {{securecontext_inline}}</dt>
+ <dd>Renvoie un <code>double</code> représentant l'altitude en mètres, relatif au niveau de la mer. Cette valeur peut être <code>null</code> si l'implémentation ne peut pas fournir de données.</dd>
+ <dt>{{domxref("Coordinates.accuracy")}} {{readonlyInline}} {{securecontext_inline}}</dt>
+ <dd>Renvoie un <code>double</code> représentant la précision des propriétés <code>latitude</code> et <code>longitude</code> , exprimé en mètres.</dd>
+ <dt>{{domxref("Coordinates.altitudeAccuracy")}} {{readonlyInline}} {{securecontext_inline}}</dt>
+ <dd>Renvoie un <code>double</code> représentant la précision de l'<code>altitude</code> . Cette valeur peut être <code>null</code>.</dd>
+ <dt>{{domxref("Coordinates.heading")}} {{readonlyInline}} {{securecontext_inline}}</dt>
+ <dd>Renvoie un <code>double</code> représentant la direction dans laquelle le périphérique se déplace. Cette valeur, spécifiée en degrés, indique la distance à laquelle le périphérique se trouve par rapport au Vrai Nord. <code>0</code> degrés représente le Vrai Nord, la direction est déterminé suivant le sens horaire des aiguilles d'une montre (ce qui veut dire que l'Est se trouve à <code>90</code> degrés et l'Ouest à <code>270</code> degrés). Si <code>speed</code> est à <code>0</code>, <code>heading</code> est alors <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/NaN" title="/en-US/docs/JavaScript/Reference/Global_Objects/NaN">NaN</a></code>. Si le périphérique est incapable de fournir des informations relatives à l'endroit où il se déplace (<code>heading</code>), cette valeur est alors <code>null</code>.</dd>
+ <dt>{{domxref("Coordinates.speed")}} {{readonlyInline}} {{securecontext_inline}}</dt>
+ <dd>Renvoie un <code>double</code> représentant la vélocité du périphérique en mètres par seconde. Cette valeur peut être <code>null</code>.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em><em><em>L'interface </em><code>Coordinates</code> <em>n'implémente et n'hérite d'aucune méthode.</em></em></em></p>
+
+<p> </p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p> </p>
+
+<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('Geolocation', '#coordinates', 'Coordinates')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Spécification initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</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>5</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>10.60<br>
+    Removed in 15.0<br>
+    Reintroduced in 16.0</td>
+   <td>5</td>
+  </tr>
+  <tr>
+   <td>Secure context-only</td>
+   <td>47</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatGeckoDesktop("55")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("4")}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>10.60</td>
+   <td>{{CompatUnknown()}}</td>
+  </tr>
+  <tr>
+   <td>Secure context-only</td>
+   <td>{{CompatNo}}</td>
+   <td>47</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatGeckoDesktop("55")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/WebAPI/Using_geolocation" title="/fr/docs/WebAPI/Using_geolocation">Using geolocation</a></li>
+ <li>The {{domxref("Geolocation")}} interface that uses it.</li>
+</ul>
diff --git a/files/fr/web/api/geolocationposition/index.html b/files/fr/web/api/geolocationposition/index.html
new file mode 100644
index 0000000000..a0fae10cc7
--- /dev/null
+++ b/files/fr/web/api/geolocationposition/index.html
@@ -0,0 +1,62 @@
+---
+title: GeolocationPosition
+slug: Web/API/GeolocationPosition
+tags:
+  - API
+  - Geolocation API
+  - GeolocationPosition
+  - Interface
+  - Secure context
+  - TopicStub
+translation_of: Web/API/GeolocationPosition
+---
+<div>{{securecontext_header}}{{APIRef("Geolocation API")}}</div>
+
+<p>L'interface <strong><code>GeolocationPosition</code></strong> représente la position de l'appareil concerné à un instant donné. La position, représentée par un objet {{domxref("GeolocationCoordinates")}}, comprend la position 2D de l'appareil, sur un sphéroïde représentant la Terre, mais aussi son altitude et sa vitesse.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>L'interface <code>GeolocationPosition</code> n'hérite d'aucune propriété.</em></p>
+
+<dl>
+ <dt>{{domxref("GeolocationPosition.coords")}} {{readonlyInline}} {{securecontext_inline}}</dt>
+ <dd>Renvoie un objet {{domxref("GeolocationCoordinates")}} définissant l'emplacement actuel.</dd>
+ <dt>{{domxref("GeolocationPosition.timestamp")}} {{readonlyInline}} {{securecontext_inline}}</dt>
+ <dd>Renvoie un {{domxref("DOMTimeStamp")}} représentant l'heure à laquelle l'emplacement a été récupéré.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em><em>L'interface </em><code>GeolocationPosition</code><em> n'implémente ni n'hérite d'aucune méthode.</em></em></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">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation', '#position_interface', 'GeolocationPosition')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Spécification initale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.GeolocationPosition")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Geolocation_API/Using">Utilisation de l'API de Géolocalisation</a></li>
+ <li>{{domxref("Geolocation")}}</li>
+</ul>
diff --git a/files/fr/web/api/geolocationposition/timestamp/index.html b/files/fr/web/api/geolocationposition/timestamp/index.html
new file mode 100644
index 0000000000..460fb29213
--- /dev/null
+++ b/files/fr/web/api/geolocationposition/timestamp/index.html
@@ -0,0 +1,49 @@
+---
+title: GeolocationPosition.timestamp
+slug: Web/API/GeolocationPosition/timestamp
+translation_of: Web/API/GeolocationPosition/timestamp
+---
+<div>{{securecontext_header}}{{APIRef("Geolocation API")}}</div>
+
+<p>La propriété en lecture seule <code><strong>GeolocationPosition.timestamp</strong></code> retourne un objet {{domxref("DOMTimeStamp")}} représentant la date et l'heure de la création de l'objet {{domxref("GeolocationPosition")}} auquel il appartient. La précision est de l'ordre de la milliseconde.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre>var timestamp = geolocationPositionInstance.timestamp
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un objet {{domxref("DOMTimeStamp")}}.</p>
+
+<h2 id="Spécification">Spécification</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('Geolocation', '#dom-geolocationposition-timestamp', 'GeolocationPosition.timestamp')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.GeolocationPosition.timestamp")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Geolocation_API/Using">Utiliser l'API de Geolocation</a></li>
+ <li>{{domxref("GeolocationPosition")}}</li>
+</ul>
diff --git a/files/fr/web/api/geolocationpositionerror/index.html b/files/fr/web/api/geolocationpositionerror/index.html
new file mode 100644
index 0000000000..541799629c
--- /dev/null
+++ b/files/fr/web/api/geolocationpositionerror/index.html
@@ -0,0 +1,80 @@
+---
+title: GeolocationPositionError
+slug: Web/API/GeolocationPositionError
+translation_of: Web/API/GeolocationPositionError
+---
+<div>{{securecontext_header}}{{APIRef("Geolocation API")}}</div>
+
+<p>L'interface <strong><code>GeolocationPositionError</code></strong> représente la raison de l'erreur apparue lorsque l'on utilise la géolocalisation de l'appareil.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>L'interface <code>GeolocationPositionError</code> n'hérite d'aucune propriété.</em></p>
+
+<dl>
+ <dt>{{domxref("GeolocationPositionError.code")}} {{readonlyInline}} {{securecontext_inline}}</dt>
+ <dd>Retourne un <code>unsigned short</code> représentant un code d'erreur. Les valeurs possibles sont:
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <th scope="col">Valeur</th>
+    <th scope="col"><span class="tlid-translation translation" lang="fr"><span title="">Constante associée</span></span></th>
+    <th scope="col">Description</th>
+   </tr>
+   <tr>
+    <td><code>1</code></td>
+    <td><code>PERMISSION_DENIED</code></td>
+    <td>L’acquisition de la position échoue car la page n'a pas l'autorisation de le faire.</td>
+   </tr>
+   <tr>
+    <td><code>2</code></td>
+    <td><code>POSITION_UNAVAILABLE</code></td>
+    <td>L’acquisition de la localisation échoue car au moins une source donnant la position a retourné une erreur interne.</td>
+   </tr>
+   <tr>
+    <td><code>3</code></td>
+    <td><code>TIMEOUT</code></td>
+    <td>Le temps alloué pour obtenir la position défini par {{domxref("PositionOptions.timeout")}} est écoulé avant que l'information soit obtenu.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt>{{domxref("GeolocationPositionError.message")}} {{readonlyInline}} {{securecontext_inline}}</dt>
+ <dd>Retourne une {{domxref("DOMString")}} compréhensible par un humain décrivant les détails de l'erreur. Les spécifications indiquent que cela sert au débogage et ne doit pas être directement affiché à l'utilisateur.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em><em>L'interface </em><code>GeolocationPositionError</code><em> n'implémente et n'hérite d'aucune méthode.</em></em></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('Geolocation', '#position_error_interface', 'GeolocationPositionError')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.GeolocationPositionError")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Geolocation_API/Using">Utiliser l'API de géolocalisation</a></li>
+ <li>{{domxref("Geolocation")}}</li>
+</ul>
diff --git a/files/fr/web/api/gestureevent/index.html b/files/fr/web/api/gestureevent/index.html
new file mode 100644
index 0000000000..43540e9826
--- /dev/null
+++ b/files/fr/web/api/gestureevent/index.html
@@ -0,0 +1,120 @@
+---
+title: GestureEvent
+slug: Web/API/GestureEvent
+tags:
+  - API
+  - DOM
+  - Evènement
+  - Interface
+translation_of: Web/API/GestureEvent
+---
+<p id="Summary">{{APIRef("DOM Events")}}</p>
+
+<p>{{Non-standard_header()}}</p>
+
+<p>L'interface propriétaire <code><strong>GestureEvent</strong></code> propre à WebKitdonne des informations sur les gestes multi-touches. Les événements utilisant cette interface incluent {{event("gesturestart")}}, {{event("gesturechange")}} et {{event("gestureend")}}.</p>
+
+<p><code>GestureEvent</code> dérive de {{domxref("UIEvent")}} qui elle-même dérive de {{domxref("Event")}}.</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("GestureEvent.GestureEvent", "GestureEvent()")}}</dt>
+ <dd>Crée un nouvel objet <code>GestureEvent</code>.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Cette interface hérite aussi des propriétés de ses parents {{domxref("UIEvent")}} et {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("GestureEvent.rotation")}} {{readonlyinline}}</dt>
+ <dd>Changement de rotation (en degrés) depuis le début de l'événement. Les valeurs positives indiquent une rotation dans le sens des aiguilles d'une montre ; les valeurs négatives indiquent une rotation dans le sens inverse des aiguilles d'une montre. Valeur initiale : <code>0.0</code></dd>
+ <dt>{{domxref("GestureEvent.scale")}} {{readonlyinline}}</dt>
+ <dd>Distance entre deux chiffres depuis le début de l'événement. Exprimé en tant que multiple à virgule flottante de la distance initiale entre les chiffres au début du geste. Les valeurs inférieures à 1,0 indiquent une poussée vers l'intérieur (zoom arrière). Les valeurs supérieures à 1.0 indiquent un relachement vers l'extérieur (zoom avant). Valeur initiale: <code>1.0</code></dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Cette interface hérite aussi des méthodes de ses parents {{domxref("UIEvent")}} et {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("GestureEvent.initGestureEvent()")}}</dt>
+ <dd>Initialise la valeur d'un <code>GestureEvent</code>. Si l'évènement a déjà été distribué, cette méthode ne fait rien.</dd>
+</dl>
+
+<h2 id="Types_d'événement_gestuel">Types d'événement gestuel</h2>
+
+<ul>
+ <li>{{event("gesturestart")}}</li>
+ <li>{{event("gesturechange")}}</li>
+ <li>{{event("gestureend")}}</li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p><em>Ne fait partie d'aucune spécification.</em> Apple a une<a href="https://developer.apple.com/library/iad/documentation/UserExperience/Reference/GestureEventClassReference/index.html"> description dans la bibliothèque Safari Developer</a>.</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Microsoft Edge</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatSafari(9.1) }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>2.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("MSGestureEvent")}}</li>
+ <li>{{event("MSGestureStart")}}</li>
+ <li>{{event("MSGestureEnd")}}</li>
+ <li>{{event("MSGestureTap")}}</li>
+ <li>{{event("MSGestureHold")}}</li>
+ <li>{{event("MSGestureChange")}}</li>
+ <li>{{event("MSInertiaStart")}}</li>
+</ul>
diff --git a/files/fr/web/api/globaleventhandlers/index.html b/files/fr/web/api/globaleventhandlers/index.html
new file mode 100644
index 0000000000..4e6c027469
--- /dev/null
+++ b/files/fr/web/api/globaleventhandlers/index.html
@@ -0,0 +1,703 @@
+---
+title: GlobalEventHandlers
+slug: Web/API/GlobalEventHandlers
+tags:
+  - API
+  - DOM
+  - Gestionnaires d'évènements
+  - évènements
+translation_of: Web/API/GlobalEventHandlers
+---
+<div>
+<div>{{ ApiRef("HTML DOM") }}</div>
+</div>
+
+<p>L'interface <strong><code>GlobalEventHandlers</code></strong> décrit les gestionnaires d'évènements usuels de nombreuses interfaces comme {{domxref("HTMLElement")}}, {{domxref("Document")}}, {{domxref("Window")}} ou {{domxref("WorkerGlobalScope")}} pour les Web Workers. Chacune de ces interfaces peut implémenter plus de gestionnaires d'évènements.</p>
+
+<p><code>GlobalEventHandlers</code> est une interface brute et aucun objet de ce type ne peut être créé.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p>Les propriétés des évènements, de la forme <code>onXYZ</code>, sont définies sur {{domxref("GlobalEventHandlers")}} et implémentées par {{domxref("HTMLElement")}}, {{domxref("Document")}}, {{domxref("Window")}} et {{domxref("WorkerGlobalScope")}} pour les Web Workers.</p>
+
+<dl>
+ <dt>{{domxref("GlobalEventHandlers.onabort")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event ("abort")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onanimationcancel")}} {{Non-standard_inline}}</dt>
+ <dd>un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) appelé lorsqu'un évènement {{event("animationcancel")}} est envoyé, indiquant que l'exécution de l'<a href="https://developer.mozilla.org/fr/docs/Web/CSS/Animations_CSS">animation CSS</a> a été abandonnée.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onanimationend")}} {{Non-standard_inline}}</dt>
+ <dd>un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) appelé lorsqu'un évènement {{event("animationend")}} est envoyé, indiquant que l'exécution de l'<a href="https://developer.mozilla.org/fr/docs/Web/CSS/Animations_CSS">animation CSS</a> a été abandonnée.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onanimationiteration")}} {{Non-standard_inline}}</dt>
+ <dd>un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) appelé lorsqu'un évènement {{event("animationiteration")}} est envoyé , indiquant qu'une <a href="https://developer.mozilla.org/fr/docs/Web/CSS/Animations_CSS">animation CSS</a> a commencé à jouer une nouvelle itération de la séquence d'animation.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onanimationstart")}} {{Non-standard_inline}}</dt>
+ <dd>un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) appelé lorsqu'un évènement {{event("animationstart")}} est envoyé , indiquant qu'une <a href="https://developer.mozilla.org/fr/docs/Web/CSS/Animations_CSS">animation CSS</a> a commencé.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onauxclick")}} {{Non-standard_inline}}</dt>
+ <dd>un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) appelé lorsqu'un évènement {{event("auxclick")}} est envoyé , indiquant qu'un bouton non primaire a été enfoncé sur le périphérique d'entrée (par exemple, un bouton du milieu de la souris).</dd>
+ <dt>{{domxref("GlobalEventHandlers.onblur")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("blur")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onerror")}}</dt>
+ <dd>est un {{domxref("OnErrorEventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsqu'un événement {{event("error")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onfocus")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} représentant le code à appeler lorsque l'évènement {{event("focus")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.oncancel")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsqu'un événement {{event("cancel")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.oncanplay")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsqu'un événement {{event("canplay")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.oncanplaythrough")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsqu'un événement {{event("canplaythrough")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onchange")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsqu'un événement {{event("change")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onclick")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsqu'un événement {{event("click")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onclose")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsqu'un événement {{event("close")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.oncontextmenu")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsqu'un événement {{event("contextmenu")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.oncuechange")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsqu'un événement {{event("cuechange")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondblclick")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsqu'un événement {{event("dblclick")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondrag")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsqu'un événement {{event("drag")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondragend")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsqu'un événement {{event("dragend")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondragenter")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsqu'un événement {{event("dragenter")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondragexit")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsqu'un événement {{event("dragexit")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondragleave")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsqu'un événement {{event("dragleave")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondragover")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsqu'un événement {{event("dragover")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondragstart")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsqu'un événement {{event("dragstart")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondrop")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsqu'un événement {{event("drop")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondurationchange")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsqu'un événement {{event("durationchange")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onemptied")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsqu'un événement {{event("emptied")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onended")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsqu'un événement {{event("ended")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ongotpointercapture")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque le type d'événement {{event("gotpointercapture")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.oninput")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("input")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.oninvalid")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("invalid")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onkeydown")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("keydown")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onkeypress")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("keypress")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onkeyup")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("keyup")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onload")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("load")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onloadeddata")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("loadeddata")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onloadedmetadata")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("loadedmetadata")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onloadend")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("loadend")}} est déclenché (lorsque la progression s'est arrêtée sur le chargement d'une ressource).</dd>
+ <dt>{{domxref("GlobalEventHandlers.onloadstart")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("loadstart")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onlostpointercapture")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque le type d'événement {{event("lostpointercapture")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmousedown")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("mousedown")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseenter")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("mouseenter")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseleave")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("mouseleave")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmousemove")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("mousemove")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseout")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("mouseout")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseover")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("mouseover")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseup")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("mouseup")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmousewheel")}} {{Non-standard_inline}} {{Deprecated_inline}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("mousewheel")}} est déclenché. Déprécié. Utiliser  <code>onwheel</code> à la place.</dd>
+ <dt>{{ domxref("GlobalEventHandlers.onwheel") }}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("wheel")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpause")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("pause")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onplay")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("play")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onplaying")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("playing")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerdown")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("pointerdown")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointermove")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("pointermove")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerup")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("pointerup")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointercancel")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("pointercancel")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerover")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("pointerover")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerout")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("pointerout")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerenter")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("pointerevent")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerleave")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("pointerleave")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerlockchange")}} {{experimental_inline}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("pointerlockchange")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerlockerror")}} {{experimental_inline}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("pointerlockerror")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onprogress")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("progress")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onratechange")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("ratechange")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onreset")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("reset")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onscroll")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("scroll")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onseeked")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("seeked")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onseeking")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("seeking")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onselect")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("select")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onselectstart")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("selectionchange")}} est déclenché, par exemple, quand l'utilisateur commence une nouvelle sélection de texte sur une page web.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onselectionchange")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("selectionchange")}} est déclenché, par exemple, quand le texte sélectionné sur une page web change.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onshow")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("show")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onsort")}} {{experimental_inline}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("sort")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onstalled")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("stalled")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onsubmit")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("submit")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onsuspend")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("suspend")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ontimeupdate")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("timeupdate")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onvolumechange")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("volumechange")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ontouchcancel")}} {{Non-standard_inline}} {{Experimental_inline}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("touchcancel")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ontouchend")}} {{Non-standard_inline}} {{Experimental_inline}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("touchend")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ontouchmove")}} {{Non-standard_inline}} {{Experimental_inline}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("touchmove")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ontouchstart")}} {{Non-standard_inline}} {{Experimental_inline}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("touchstart")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ontransitioncancel")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) appelé lorsqu'un évènement {{event("transitioncancel")}} est envoyé, indiquant qu'une <a href="https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Transitions">transition CSS</a> a été abandonnée.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ontransitionend")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) appelé lorsqu'un évènement {{event("transitionend")}} est envoyé, indiquant qu'une <a href="https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Transitions">transition CSS</a> est terminée.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onwaiting")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("waiting")}} est déclenché.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Cette interface ne définit aucune méthode.</em></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">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Selection API",'', 'Extension to GlobalEventHandlers')}}</td>
+   <td>{{Spec2('Selection API')}}</td>
+   <td>Ajoute <code>onselectionchange.</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Lock', '#extensions-to-the-document-interface', 'Extension of Document')}}</td>
+   <td>{{Spec2('Pointer Lock')}}</td>
+   <td>Ajoute<code>onpointerlockchange</code> et <code>onpointerlockerror</code> sur{{domxref("Document")}}. Est implémenté expérimentalement <code>GlobalEventHandlers</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#globaleventhandlers', 'GlobalEventHandlers')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Pas de changement depuis le précédent {{SpecName("HTML5.1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#globaleventhandlers', 'GlobalEventHandlers')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Instantané de {{SpecName("HTML WHATWG")}}. <code>onsort</code> ajouté depuis {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#globaleventhandlers", "GlobalEventHandlers")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Instantané de {{SpecName("HTML WHATWG")}}. Création de <code>GlobalEventHandlers</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>oncanplay</code>, <code>oncanplaythrough</code>, <code>ondurationchange</code>, <code>onemptied</code>, <code>onended</code>, <code>onloadeddata</code>, <code>onloadedmetadata</code>, <code>onloadstart</code>, <code>onpause</code>, <code>onplay</code>, <code>onplaying</code>, <code>onprogress</code>, <code>onratechange</code>, <code>onseeked</code>, <code>onseeking</code>, <code>onstalled</code>, <code>ontimeupdate</code>, <code>onvolumechange</code>, <code>onwaiting</code></td>
+   <td>{{CompatGeckoDesktop(1.9.1)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onsuspend</code></td>
+   <td>{{CompatGeckoDesktop(1.9.2)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>ondrag</code>, <code>ondragend</code>, <code>ondragenter</code>, <code>ondragleave</code>, <code>ondragover</code>, <code>ondragstart</code>, <code>ondrop</code></td>
+   <td>{{CompatGeckoDesktop(1.9.1)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onmouseenter</code>, <code>onmouseleave</code></td>
+   <td>{{CompatGeckoDesktop(10)}}</td>
+   <td>{{CompatChrome(30.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>5.5</td>
+   <td>17</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>ondragexit</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>oncancel</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onclose</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>oncuechange</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onmousewheel</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onsort</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onmozfullscreenchange</code>, <code>onmozfullscreenerror</code> {{non-standard_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br>
+    {{CompatVersionUnknown}} (unprefixed)</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>onpointerlockchange</code>, <code>onpointerlockerror</code></td>
+   <td>{{CompatGeckoDesktop(10)}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}<sup>[2] </sup>{{property_prefix("-webkit")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onpointercancel</code>, <code>onpointerdown</code>, <code>onpointerup</code>, <code>onpointermove</code>, <code>onpointerout</code>, <code>onpointerover</code>, <code>onpointerenter</code>, <code>onpointerleave</code></td>
+   <td>{{CompatVersionUnknown}}<sup>[3]</sup></td>
+   <td>{{CompatChrome(55.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onselectionchange</code></td>
+   <td>{{CompatGeckoDesktop(43)}}<sup>[4]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>ontouchend</code>, <code>ontouchcancel</code>, <code>ontouchmove</code>, <code>ontouchstart</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>animationstart</code>, <code>animationend</code>, <code>animationcancel</code>, <code>animationiteration</code></td>
+   <td>{{CompatGeckoDesktop(51)}}</td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br>
+    {{CompatVersionUnknown}} (unprefixed)</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>ongotpointercapture</code>, <code>onlostpointercapture</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(57.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(44)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onauxclick</code></td>
+   <td>{{CompatGeckoDesktop(53)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>onwheel</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>ondrag</code>, <code>ondragend</code>, <code>ondragenter</code>, <code>ondragleave</code>, <code>ondragover</code>, <code>ondragstart</code>, <code>ondrop</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.9.1)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>oncanplay</code>, <code>oncanplaythrough</code>, <code>ondurationchange</code>, <code>onemptied</code>, <code>onended</code>, <code>onloadeddata</code>, <code>onloadedmetadata</code>, <code>onloadstart</code>, <code>onpause</code>, <code>onplay</code>, <code>onplaying</code>, <code>onprogress</code>, <code>onratechange</code>, <code>onseeked</code>, <code>onseeking</code>, <code>onstalled</code>, <code>ontimeupdate</code>, <code>onvolumechange</code>, <code>onwaiting</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.9.1)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onmouseenter</code>, <code>onmouseleave</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(10)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onsuspend</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.9.2)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>ondragexit</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>oncancel</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onclose</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>oncuechange</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onmousewheel</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onsort</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>onmozfullscreenchange</code>, <code>onmozfullscreenerror</code> {{non-standard_inline}}</td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br>
+    {{CompatVersionUnknown}} (unprefixed)</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br>
+    {{CompatVersionUnknown}} (unprefixed)</td>
+  </tr>
+  <tr>
+   <td><code>onpointerlockchange</code>, <code>onpointerlockerror</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(10)}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>onpointercancel</code>, <code>onpointerdown</code>, <code>onpointerup</code>, <code>onpointermove</code>, <code>onpointerout</code>, <code>onpointerover</code>, <code>onpointerenter</code>, <code>onpointerleave</code></td>
+   <td>{{CompatChrome(55.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[3]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>10</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(55.0)}}</td>
+  </tr>
+  <tr>
+   <td><code>onselectionchange</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(43)}}<sup>[4]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>ontouchend</code>, <code>ontouchcancel</code>, <code>ontouchmove</code>, <code>ontouchstart</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>animationstart</code>, <code>animationend</code>, <code>animationcancel</code>, <code>animationiteration</code></td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br>
+    {{CompatVersionUnknown}} (unprefixed)</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(51)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br>
+    {{CompatVersionUnknown}} (unprefixed)</td>
+  </tr>
+  <tr>
+   <td><code>ongotpointercapture</code>, <code>onlostpointercapture</code></td>
+   <td>{{CompatChrome(57.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile(44)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(57.0)}}</td>
+  </tr>
+  <tr>
+   <td><code>onauxclick</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(53)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onwheel</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Dans Gecko c'est implémenté comme <code>onmozpointerlockchange</code>, <code>onmozpointerlockerror</code>.</p>
+
+<p>[2] Dans Blink c'est implémenté comme <code>onwebkitpointerlockchange</code>, <code>onwebkitpointerlockerror</code>.</p>
+
+<p>[3] C'est implémenté après la préférence <code>dom.w3c_pointer_events.enabled</code>, par défaut à <code>false</code> (<em>faux</em>).</p>
+
+<p>[4] C'est implémenté après la préférence <code>dom.select_events.enabled</code> par défaut à <code>false</code> (<em>faux</em>), sauf sur Nightly.</p>
+</div>
+
+<div id="compat-mobile"> </div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Element")}}</li>
+ <li>{{domxref("EventHandler")}}</li>
+ <li>{{domxref("Event")}}</li>
+</ul>
diff --git a/files/fr/web/api/globaleventhandlers/onabort/index.html b/files/fr/web/api/globaleventhandlers/onabort/index.html
new file mode 100644
index 0000000000..159cd2afff
--- /dev/null
+++ b/files/fr/web/api/globaleventhandlers/onabort/index.html
@@ -0,0 +1,112 @@
+---
+title: GlobalEventHandlers.onabort
+slug: Web/API/GlobalEventHandlers/onabort
+tags:
+  - API
+  - NeedContent
+  - Property
+  - Reference
+  - Window
+translation_of: Web/API/GlobalEventHandlers/onabort
+---
+<div>{{ ApiRef("HTML DOM") }}</div>
+
+<h2 id="Summary" name="Summary">Sommaire</h2>
+
+<p>Un gestionnaire d'évènement pour interrompre les événements envoyés à la fenêtre. (non disponible sur Firefox 2 ou Safari).</p>
+
+<p>Bien que le <a href="https://html.spec.whatwg.org/multipage/browsing-the-web.html#abort-a-document">standard pour l'abandon d'un chargement de document</a> soit défini, le problème HTML N° 3525 suggère que les navigateurs ne déclenchent pas pour l'instant l'événement "abort" sur une <code>window</code> qui déclencherait un appel à <code>onabort</code>.</p>
+
+<p>À FAIRE : définir ce qu'est "interrompre" : fermer la fenêtre via le gestionnaire de fenêtre ? Arrêter le chargement de la page ? Par quels moyens et pour quelles raisons (utilisateur, réseau/serveur) ? À quelle étape cela devrait-il se déclencher / être capturé ? Pour IE, onabort est seulement disponible pour les balises <code>img</code>.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox">window.onabort =<em> refFonc</em>
+</pre>
+
+<ul>
+ <li><code>refFonc</code> : référence à une fonction</li>
+</ul>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush:js">window.onabort = function() {
+  alert("Chargement interrompu.");
+}</pre>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<table class="spectable 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','webappapis.html#handler-onabort','onabort')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<article class="approved">
+<div class="boxed translate-rendered text-content">
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+</div>
+</article>
diff --git a/files/fr/web/api/globaleventhandlers/onauxclick/index.html b/files/fr/web/api/globaleventhandlers/onauxclick/index.html
new file mode 100644
index 0000000000..b341d8d415
--- /dev/null
+++ b/files/fr/web/api/globaleventhandlers/onauxclick/index.html
@@ -0,0 +1,90 @@
+---
+title: GlobalEventHandlers.onauxclick
+slug: Web/API/GlobalEventHandlers/onauxclick
+tags:
+  - API
+  - Expérimentale
+  - Propriété
+  - Reference
+translation_of: Web/API/GlobalEventHandlers/onauxclick
+---
+<div>{{ApiRef("HTML DOM")}} {{SeeCompatTable}}</div>
+
+<p>La propriété <code><strong>onauxclick</strong></code> du mixin {{domxref("GlobalEventHandlers")}} est un {{domxref("EventHandler")}} pour le traitement des événements {{event("auxclick")}}.</p>
+
+<p>L'événement <code>auxclick</code> est déclenché lorsqu'un bouton non principal a été enfoncé sur un périphérique d'entrée (par exemple, la molette de la souris). Il se déclenche après les événements {{event("mousedown")}} et {{event("mouseup")}}, dans cet ordre.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> Les fournisseurs de navigateurs implémentent cette propriété dans le cadre d'un plan visant à améliorer la compatibilité en ce qui concerne le comportement des boutons. Plus précisément, le comportement des événements est mis à jour afin que {{Event ("click")}} ne se déclenche que pour les clics sur le bouton principal (par exemple, le bouton gauche de la souris), tandis que {{Event ("auxclick")}} se déclenche pour le bouton non principal. Historiquement, {{Event("click")}} s'est généralement déclenché pour le clic de n'importe quel bouton d'entrée de périphérique, bien que le comportement du navigateur soit quelque peu incohérent.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><var>target</var>.onauxclick = <var>functionRe<em>f</em></var>;
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p><code>functionRef</code> est un nom de fonction ou une <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">function expression</a>. La fonction reçoit un objet {{domxref("MouseEvent")}} comme seul argument. Dans la fonction, <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code> sera l'élément sur lequel l'événement a été déclenché.</p>
+
+<p>Un seul gestionnaire <code>onauxclick</code> peut être affecté à un objet à la fois. Vous pouvez préférer utiliser la méthode {{domxref("EventTarget.addEventListener()")}} à la place, car elle est plus flexible.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans cet exemple, nous définissons des fonctions pour deux gestionnaires d'événements — {{domxref("GlobalEventHandlers.onclick", "onclick")}} et <code>onauxclick</code>. Le premier modifie la couleur de l'arrière-plan du bouton, tandis que le second modifie la couleur de premier plan (texte) du bouton. Vous pouvez voir les deux fonctions en action en essayant la démo avec une souris à plusieurs boutons (<a href="https://mdn.github.io/dom-examples/auxclick/">voir en direct sur GitHub</a>; également <a href="https://github.com/mdn/dom-examples/blob/master/auxclick/index.html">voir le code source</a>).</p>
+
+<pre class="brush: js notranslate">var button = document.querySelector('button');
+var html = document.querySelector('html');
+
+function random(number) {
+  return Math.floor(Math.random() * number);
+}
+
+button.onclick = function() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  button.style.backgroundColor = rndCol;
+};
+
+button.onauxclick = function() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  button.style.color = rndCol;
+}</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Si vous utilisez une souris à trois boutons, vous remarquerez que le gestionnaire<code> onauxclick</code> est exécuté lorsque l'un des boutons non gauche de la souris est cliqué.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('UI Events','#event-type-auxclick','onauxclick')}}</td>
+   <td>{{Spec2('UI Events')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.GlobalEventHandlers.onauxclick")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>{{event("auxclick")}} event</li>
+ <li>Related event handlers
+  <ul>
+   <li>{{domxref("GlobalEventHandlers.onclick")}}</li>
+   <li>{{domxref("GlobalEventHandlers.ondblclick")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/api/globaleventhandlers/onblur/index.html b/files/fr/web/api/globaleventhandlers/onblur/index.html
new file mode 100644
index 0000000000..c4d87d1e82
--- /dev/null
+++ b/files/fr/web/api/globaleventhandlers/onblur/index.html
@@ -0,0 +1,62 @@
+---
+title: element.onblur
+slug: Web/API/GlobalEventHandlers/onblur
+tags:
+  - DOM
+  - DOM_0
+translation_of: Web/API/GlobalEventHandlers/onblur
+---
+<p>{{ ApiRef() }}</p>
+
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+
+<p>La propriété <strong>onblur</strong> renvoie le gestionnaire de l'évènement <code>blur</code> (perte de focus) pour l'élément courant.</p>
+
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+
+<pre class="eval">element.onblur = nomFonctionUtilisateur;
+</pre>
+
+<ul>
+ <li><code>nomFonctionUtilisateur</code> est le nom de la fonction utilisateur préalablement définie, sans les parenthèses ni aucun argument. Il est également possible de déclarer une « fonction anonyme », comme :</li>
+</ul>
+
+<pre class="eval">element.onblur = function() {
+    alert("Évènement onblur détecté");
+};
+</pre>
+
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+
+<p>Lorsqu'une zone de saisie n'est plus active suite à une perte du « focus », une boîte de message (alert) est affichée.</p>
+
+<pre>&lt;form&gt;
+	&lt;input type="text" id="foo" value="Allo!" /&gt;
+&lt;/form&gt;
+
+&lt;script type="text/javascript"&gt;
+
+var elem = document.getElementById("foo");
+
+// Attention : afficherMessage(); ou afficherMessage(param); ne fonctionneront pas ici,
+// il doit s'agir d'une référence au nom d'une fonction et non d'un appel de cette fonction
+
+elem.onblur = afficherMessage;
+
+function afficherMessage() {
+	alert("Évènement onblur detecté!");
+}
+&lt;/script&gt;
+</pre>
+
+<h3 id="Notes" name="Notes">Notes</h3>
+
+<p>L'évènement <code>blur</code> se déclenche lors de la perte de focus d'un élément.</p>
+
+<p>Microsoft Internet Explorer déclenche l'évènement <code>blur</code> sur presque tous les éléments, contrairement aux navigateurs Gecko (dont Firefox) qui ne le déclencheront que sur un nombre limité d'éléments.</p>
+
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+
+<p>{{ DOM0() }}</p>
+
+<p>{{ languages( { "en": "en/DOM/element.onblur" } ) }}</p>
diff --git a/files/fr/web/api/globaleventhandlers/onchange/index.html b/files/fr/web/api/globaleventhandlers/onchange/index.html
new file mode 100644
index 0000000000..e0e4aadf81
--- /dev/null
+++ b/files/fr/web/api/globaleventhandlers/onchange/index.html
@@ -0,0 +1,36 @@
+---
+title: element.onchange
+slug: Web/API/GlobalEventHandlers/onchange
+tags:
+  - DOM
+  - DOM_0
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/GlobalEventHandlers/onchange
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p>La propriété <code>onchange</code> définit et renvoie le gestionnaire d'évènement <code>onChange</code> (modification) pour l'élément courant.</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<pre class="eval">element.onchange = code de gestion de l'évènement
+</pre>
+<h3 id="Notes" name="Notes">Notes</h3>
+<p>Le pseudo code suivant illustre la manière dont le gestionnaire d'évènement <code>change</code> est implémenté dans Mozilla :</p>
+<pre>  control.onfocus = focus;
+  control.onblur = blur;
+  function focus () {
+      original_value = control.value;
+  }
+
+  function blur () {
+      if (control.value != original_value)
+        control.onchange();
+  }
+</pre>
+<p>Par conséquent, vous pouvez rencontrer des comportements inattendus dans l'évènement <code>change</code> si vous modifiez la valeur du contrôle dans vos propres gestionnaires d'évènements <code>focus</code> ou <code>blur</code>. De plus, l'évènement <code>change</code> se déclenche avant l'évènement <code>blur</code>. Ce comportement n'est pas le même que celui d'Internet Explorer.</p>
+<h3 id="Specification" name="Specification">Specification</h3>
+<p>{{ DOM0() }}</p>
+<h3 id="Voir_aussi" name="Voir_aussi">Voir aussi</h3>
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-htmlevents">DOM Level 2: HTML event types</a> <small>— traduction en français (non normative) : <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-events/events.html#Events-eventgroupings-htmlevents">DOM Niveau 2 Events : Les types d'événements HTML</a></small></li>
+</ul>
+<p>{{ languages( { "en": "en/DOM/element.onchange" } ) }}</p>
diff --git a/files/fr/web/api/globaleventhandlers/onclick/index.html b/files/fr/web/api/globaleventhandlers/onclick/index.html
new file mode 100644
index 0000000000..3d2ffb0150
--- /dev/null
+++ b/files/fr/web/api/globaleventhandlers/onclick/index.html
@@ -0,0 +1,68 @@
+---
+title: element.onclick
+slug: Web/API/GlobalEventHandlers/onclick
+translation_of: Web/API/GlobalEventHandlers/onclick
+---
+<p>{{ ApiRef() }}</p>
+
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+
+<p>La propriété <strong>onclick</strong> représente le gestionnaire d'évènement onClick de l'élément courant.</p>
+
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+
+<p><code><em>element</em>.onclick = <em>functionRef</em></code></p>
+
+<p id="Exemple">où <em>functionRef</em> est une fonction ou une expression de type <em>function. </em>Consulter la <a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope" title="/en-US/docs/JavaScript/Reference/Functions_and_function_scope">référence des fonctions</a> pour plus de détails.</p>
+
+<p>Le paramètre fourni au gestionnaire d'évènement <em>functionRef</em> lors du déclenchement de l'évènement est un objet qui représente l'évènement de click, de type {{ domxref("MouseEvent") }}.</p>
+
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+
+<pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;onclick event example&lt;/title&gt;
+&lt;script type="text/javascript"&gt;
+function initElement()
+{
+  var p = document.getElementById("foo");
+  // NOTE: showAlert(); ou showAlert(param); NE fonctionne PAS ici.
+  // Il faut fournir une valeur de type <em><strong>function</strong></em> (nom de fonction déclaré ailleurs ou declaration en ligne de fonction).
+  p.onclick = showAlert;
+};
+
+function showAlert()
+{
+  alert("Evènement de click détecté");
+}
+&lt;/script&gt;
+&lt;style type="text/css"&gt;
+#foo {
+border: solid blue 2px;
+}
+&lt;/style&gt;
+&lt;/head&gt;
+&lt;body onload="initElement();"&gt;
+&lt;span id="foo"&gt;Mon Span à cliquer&lt;/span&gt;
+&lt;p&gt;Cliquez sur l'élément ci-dessus.&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Vous pouvez aussi utiliser la syntaxe des fonctions déclarées en ligne, anonymes ou non.</p>
+
+<pre class="brush: js">// affectation de fonction anonyme declarée en ligne
+p.onclick = function() { alert("moot!"); };
+</pre>
+
+<h3 id="Notes" name="Notes">Notes</h3>
+
+<p>L'évènement <code>click</code> est déclenché lorsque l'utilisateur clique sur un élément.</p>
+
+<p>Avec cette syntaxe un seul gestionnaire d'évènement click peut être assigné à un élement . Pour gérer plusieurs fonctions gestionnaires d'évènements click sur un même élément, utilisez {{ domxref("EventTarget.addEventListener()") }} qui fait partie de la spécification DOM Events.</p>
+
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+
+<p>Defini en <a class="external" href="http://w3c.github.io/html/webappapis.html#dom-globaleventhandlers-onclick">HTML</a>.</p>
+
+<p>{{ languages( { "en": "en/DOM/element.onclick", "pl": "pl/DOM/element.onclick" } ) }}</p>
diff --git a/files/fr/web/api/globaleventhandlers/onclose/index.html b/files/fr/web/api/globaleventhandlers/onclose/index.html
new file mode 100644
index 0000000000..e7234b295e
--- /dev/null
+++ b/files/fr/web/api/globaleventhandlers/onclose/index.html
@@ -0,0 +1,47 @@
+---
+title: GlobalEventHandlers.onclose
+slug: Web/API/GlobalEventHandlers/onclose
+tags:
+  - API
+  - DOM
+  - HTML
+  - Property
+  - Reference
+translation_of: Web/API/GlobalEventHandlers/onclose
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<p>Un gestionnaire d'évènement utilisé lorsque des évènements de fermeture sont envoyés à la fenêtre (non disponible dans Firefox 2 ou Safari).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">window.onclose = funcRef;
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<ul>
+ <li><code>funcRef</code> est une fonction.</li>
+</ul>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">window.onclose = resetThatServerThing;
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="spectable 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#handler-onclose','onclose')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/api/globaleventhandlers/ondblclick/index.html b/files/fr/web/api/globaleventhandlers/ondblclick/index.html
new file mode 100644
index 0000000000..005a6e7264
--- /dev/null
+++ b/files/fr/web/api/globaleventhandlers/ondblclick/index.html
@@ -0,0 +1,60 @@
+---
+title: element.ondblclick
+slug: Web/API/GlobalEventHandlers/ondblclick
+tags:
+  - DOM
+  - DOM_0
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/GlobalEventHandlers/ondblclick
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p>La propriété <b>ondblclick</b> renvoie le gestionnaire d'évènement <code>dblclick</code> de l'élément courant.</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<pre class="eval">element.ondblclick = nomDeFonction;
+</pre>
+<ul>
+ <li><code>nomDeFonction</code> est le nom d'une fonction définie par l'utilisateur, sans les parenthèses ni aucun paramètre. Il peut également s'agir d'une déclaration de fonction anonyme, comme :</li>
+</ul>
+<pre class="eval">element.ondblclick = function() { alert("Évènement dblclick détecté"); };
+</pre>
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+<pre>&lt;html&gt;
+
+&lt;head&gt;
+&lt;title&gt;ondblclick event example&lt;/title&gt;
+
+&lt;script type="text/javascript"&gt;
+
+function initElement() {
+ var p = document.getElementById("foo");
+ // Attention : showAlert(); ou showAlert(param); ne fonctionneront pas ici,
+ // il doit s'agir d'une référence à un nom de fonction, pas un appel de fonction.
+ p.ondblclick = showAlert;
+};
+
+function showAlert() {
+ alert("Évènement dblclick détecté")
+}
+&lt;/script&gt;
+
+&lt;style type="text/css"&gt;
+&lt;!--
+#foo {
+border: solid blue 2px;
+}
+--&gt;
+&lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body onload="initElement()";&gt;
+&lt;span id="foo"&gt;Mon élément&lt;/span&gt;
+&lt;p&gt;Double-cliquez sur l'élément ci-dessus.&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+<h3 id="Notes" name="Notes">Notes</h3>
+<p>L'évènement <code>dblclick</code> est déclenché lorsque l'utilisateur double-clique sur un élément.</p>
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+<p>{{ DOM0() }}</p>
+<p>{{ languages( { "en": "en/DOM/element.ondblclick" } ) }}</p>
diff --git a/files/fr/web/api/globaleventhandlers/onerror/index.html b/files/fr/web/api/globaleventhandlers/onerror/index.html
new file mode 100644
index 0000000000..18d4b02aab
--- /dev/null
+++ b/files/fr/web/api/globaleventhandlers/onerror/index.html
@@ -0,0 +1,152 @@
+---
+title: GlobalEventHandlers.onerror
+slug: Web/API/GlobalEventHandlers/onerror
+tags:
+  - API
+  - HTML DOM
+  - Propriété
+  - Reference
+translation_of: Web/API/GlobalEventHandlers/onerror
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<p>Un <a href="/en-US/docs/Web/Guide/Events/Event_handlers">gestionnaire d'événement</a> pour l'événement <code><a href="/en-US/docs/Web/Events/error">error</a></code>. Des événements d'erreur sont déclenchés vers diverses cibles et pour différents types d'erreurs:</p>
+
+<ul>
+ <li>Lorsqu'une <strong>erreur de runtime JavaScript</strong> se produit (erreurs de syntaxe comprises), un évènement <code><a href="/en-US/docs/Web/Events/error">error</a></code> utilisant l'interface {{domxref("ErrorEvent")}} est envoyé à {{domxref("window")}}, et <code>window.onerror()</code> est appelé.</li>
+ <li>Lorsque le <strong>chargement d'une ressource</strong> (telle que {{HTMLElement("img")}} ou {{HTMLElement("script")}}) <strong>échoue</strong>, un événement <code><a href="/en-US/docs/Web/Events/error">error</a></code> utilisant l'interface {{domxref("Event")}} est déclenché sur l'élément qui a initié le chargement, et le gestionnaire <code>onerror()</code> de l'élément est invoqué. Ces évènements d'erreur ne remontent pas à window, mais (au moins dans FireFox) ils peuvent être gérés par une unique capture {{domxref("window.addEventListener")}}.</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Pour des raisons historiques, des arguments différents sont passés aux gestionnaires <code>window.onerror</code> et <code>element.onerror</code>.</p>
+
+<h3 id="window.onerror">window.onerror</h3>
+
+<pre><code>window.onerror = function(messageOrEvent, source, noligne, nocolonne, erreur) { ... }</code></pre>
+
+<p>Paramètres de la fonction :</p>
+
+<ul>
+ <li><code>message </code>: message d'erreur (chaîne ou objet évènement). Disponible comme <code>event</code> (sic !) dans le gestionnaire de HTML <code>onerror=""</code> et aussi comme objet évènement lors de l'envoi d'un <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event">Event</a> à <code>window,</code> auquel cas les autres arguments ne seront pas fournis (au contraire de <a href="https://developer.mozilla.org/en-US/docs/Web/API/ErrorEvent">ErrorEvent</a>, qui amène le passage de l'ensemble complet des arguments à <code>window.onerror</code>, tandis que seul l'objet d'évènement d'erreur est  passé aux gestionnaires de<code> window.addEventListener('error'))</code></li>
+ <li>source : l'URL du script où l'erreur a été déclenchée (chaîne)</li>
+ <li>noligne : le numéro de ligne où l'erreur a été déclenchée (nombre)</li>
+ <li>nocolonne : le numéro de colonne où l'erreur a été déclenchée (nombre)</li>
+ <li>erreur : un <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error">Error Object</a> (objet) {{gecko_minversion_inline("31.0")}}</li>
+</ul>
+
+<h3 id="element.onerror_(et_window.addEventListener('error'))">element.onerror (et <code>window.addEventListener('error')</code>)</h3>
+
+<pre><code>element.onerror = function(event) { ... }</code></pre>
+
+<p><code>element.onerror</code> accepte une fonction avec un argument unique de type {{domxref("Event")}}.</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Quand une erreur de syntaxe<strong>(?)</strong> se produit dans un script chargé à partir d'une <a href="/en-US/docs/Web/Security/Same-origin_policy">origine différente</a>, les détails de l'erreur de syntaxe ne sont pas rapportés, afin de prévenir la fuite d'information (voir {{bug("363897")}}). A la place, l'erreur est simplement reportée en tant que <code><strong>"Script error"</strong></code>. Ce comportement peut être surchargé par certains navigateurs en utilisant l'attribut <code>{{htmlattrxref("crossorigin","script")}}</code> de {{HTMLElement("script")}} et en faisant en sorte que le serveur envoie les entêtes de réponse <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS">CORS</a> HTTP appropriés. Un contournement consiste à isoler "Script error" et à la gérer en sachant que les détails de l'erreur ne sont visibles que la console du navigateur et non accessibles en JavaScript.</p>
+
+<pre><code>window.onerror = function (msg, url, noLigne, noColonne, erreur) {
+    var chaine = msg.toLowerCase();
+    var souschaine = "script error";
+    if (chaine.indexOf(souschaine) &gt; -1){
+        alert('Script Error : voir la Console du Navigateur pour les Détails');
+    } else {
+        var message = [
+            'Message : ' + msg,
+            'URL : ' + url,
+            'Ligne : ' + noLigne,
+            'Colonne : ' + noColonne,
+            'Objet Error : ' + JSON.stringify(erreur)
+        ].join(' - ');
+
+        alert(message);
+    }
+
+    return false;
+};</code></pre>
+
+<p>Lors de l'utilisation du balisage html intégré (&lt;body onerror="alert('une erreur est survenue')&gt;...), la spécification HTML requiert que les arguments passés à <code>onerror</code> soient nommés <code>event</code>, <code>source</code>, <code>lineno</code>, <code>colno</code>, <code>error</code>. Dans les navigteurs qui n'ont pas implémenté cette obligation, ils peuvent toujours être obtenus via <code>arguments[0]</code> à <code>arguments[2]</code>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="spectable 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','webappapis.html#handler-onerror','onerror')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Avant Firefox 14, quand le chargement d'un {{HTMLElement("script")}} échouait, <code>window.onerror</code> était invoqué avec le message <strong>"Error loading script"</strong>. Ce bug a été corrigé dans {{bug("737087")}}. A présent, <code>scriptElement.onerror</code> est invoqué à la place dans de tels cas.</p>
+
+<p>Depuis Firefox 31, les 2 derniers arguments (<code>colno</code> et <code>error</code>) ont été ajoutés, ce qui signifie que vous pouvez accéder à la trace de la pile d'une erreur de script via l'objet <code>Error</code> fourni({{bug("355430")}}).</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="http://blog.getsentry.com/2016/01/04/client-javascript-reporting-window-onerror.html">Capture and report JavaScript errors with window.onerror (blog.getsentry.com, 2016)</a></li>
+ <li><a href="https://danlimerick.wordpress.com/2014/01/18/how-to-catch-javascript-errors-with-window-onerror-even-on-chrome-and-firefox/">How to catch JavaScript Errors with window.onerror (even on Chrome and Firefox) (danlimerick.wordpress.com, 2014)</a></li>
+</ul>
+
+<h2 id="Compatibilité_des_navigateurs_2">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<article>
+<table>
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome pour Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</article>
diff --git a/files/fr/web/api/globaleventhandlers/onfocus/index.html b/files/fr/web/api/globaleventhandlers/onfocus/index.html
new file mode 100644
index 0000000000..98485a92d9
--- /dev/null
+++ b/files/fr/web/api/globaleventhandlers/onfocus/index.html
@@ -0,0 +1,21 @@
+---
+title: element.onfocus
+slug: Web/API/GlobalEventHandlers/onfocus
+tags:
+  - DOM
+  - DOM_0
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/GlobalEventHandlers/onfocus
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p>La propriété <b>onfocus</b> renvoie le gestionnaire de l'évènement <code>focus</code> pour l'élément courant.</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<pre class="eval">code de gestion de l'évènement = element.onfocus
+</pre>
+<h3 id="Notes" name="Notes">Notes</h3>
+<p>L'évènement focus se déclenche lorsque l'utilisateur donne le focus clavier à l'élément donné.</p>
+<p>Contrairement à Microsoft Internet Explorer, dans lequel presque toutes les sortes d'éléments peuvent recevoir l'évènement focus, presqu'aucune sorte d'élément ne reçoit cet évènement dans les navigateurs utilisant Gecko.</p>
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+<p>{{ DOM0() }}</p>
+<p>{{ languages( { "en": "en/DOM/element.onfocus" } ) }}</p>
diff --git a/files/fr/web/api/globaleventhandlers/ongotpointercapture/index.html b/files/fr/web/api/globaleventhandlers/ongotpointercapture/index.html
new file mode 100644
index 0000000000..3ea384d7b1
--- /dev/null
+++ b/files/fr/web/api/globaleventhandlers/ongotpointercapture/index.html
@@ -0,0 +1,59 @@
+---
+title: GlobalEventHandlers.ongotpointercapture
+slug: Web/API/GlobalEventHandlers/ongotpointercapture
+translation_of: Web/API/GlobalEventHandlers/ongotpointercapture
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<div>La propriété <strong><code>ongotpointercapture</code></strong> du mixin {{domxref("GlobalEventHandlers")}} est un {{domxref("EventHandler")}} qui traite les évènements de type {{event("gotpointercapture")}}.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>target</em>.ongotpointercapture = <em>functionRef</em>;</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p><code>functionRef</code> est un nom de fonction ou une <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">expression fonction</a>. La fonction accepte un objet {{domxref("FocusEvent")}} en tant qu'unique argument.</p>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js">function overHandler(event) {
+  // Obtient le gestionnaire de type "gotpointercapture" de la cible de l'événement
+  let gotCaptureHandler = event.target.ongotpointercapture;
+}
+
+function init() {
+  let el = document.getElementById('target');
+  el.ongotpointercapture = overHandler;
+}</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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Events 2', '#the-gotpointercapture-event', 'onlostpointercapture')}}</td>
+   <td>{{Spec2('Pointer Events 2')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.GlobalEventHandlers.ongotpointercapture")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'évènement <code><a href="/en-US/docs/Web/API/Document/gotpointercapture_event">Document: gotpointercapture</a></code></li>
+ <li>L'évènement <code><a href="/en-US/docs/Web/API/Element/gotpointercapture_event">Element: gotpointercapture</a></code></li>
+ <li>{{domxref("Element.setPointerCapture()")}}</li>
+</ul>
diff --git a/files/fr/web/api/globaleventhandlers/onkeydown/index.html b/files/fr/web/api/globaleventhandlers/onkeydown/index.html
new file mode 100644
index 0000000000..3753a32bae
--- /dev/null
+++ b/files/fr/web/api/globaleventhandlers/onkeydown/index.html
@@ -0,0 +1,23 @@
+---
+title: element.onkeydown
+slug: Web/API/GlobalEventHandlers/onkeydown
+tags:
+  - DOM
+  - DOM_0
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/GlobalEventHandlers/onkeydown
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p>La propriété <strong>onkeydown</strong> définit et renvoie le gestionnaire d'évènement <code>keydown</code> de l'élément courant.</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<pre class="eval">code de gestion de l'évènement = element.onkeydown
+</pre>
+<h3 id="Notes" name="Notes">Notes</h3>
+<p>L'évènement <code>keydown</code> se déclenche lorsque qu'une touche du clavier est enfoncée.</p>
+<p>À différencier de <a href="/fr/DOM/element.onkeypress" title="fr/DOM/element.onkeypress">onkeypress</a> qui se déclenche lorsque qu'une touche du clavier est pressée. (La nuance se situe dans le fait que <code>onkeydown</code> se produit avant <code>onkeypress</code> même s'ils se produisent quasiment au même instant)</p>
+<h3 id="Notes" name="Notes">Voir aussi</h3>
+<p><a href="/fr/DOM/element.onkeypress" title="fr/DOM/element.onkeypress">onkeypress</a> <a href="/fr/DOM/element.onkeyup" title="fr/DOM/element.onkeyup">onkeyup</a></p>
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+<p>{{ DOM0() }}</p>
+<p>{{ languages( { "en": "en/DOM/element.onkeydown", "pl": "pl/DOM/element.onkeydown" } ) }}</p>
diff --git a/files/fr/web/api/globaleventhandlers/onkeypress/index.html b/files/fr/web/api/globaleventhandlers/onkeypress/index.html
new file mode 100644
index 0000000000..83c4c911bc
--- /dev/null
+++ b/files/fr/web/api/globaleventhandlers/onkeypress/index.html
@@ -0,0 +1,23 @@
+---
+title: element.onkeypress
+slug: Web/API/GlobalEventHandlers/onkeypress
+tags:
+  - DOM
+  - DOM_0
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/GlobalEventHandlers/onkeypress
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p>La propriété <strong>onkeypress</strong> définit et renvoie le gestionnaire d'évènement <code>keypress</code> de l'élément courant.</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<pre class="eval">element.onkeypress = code de gestion de l'évènement
+</pre>
+<h3 id="Notes" name="Notes">Notes</h3>
+<p>L'évènement <code>keypress</code> se déclenche lorsque qu'une touche du clavier est pressée.</p>
+<p>À différencier de <a href="/fr/DOM/element.onkeydown" title="fr/DOM/element.onkeydown">onkeydown</a> qui se déclenche lorsque qu'une touche du clavier est enfoncée. (La nuance se situe dans le fait que <code>onkeydown</code> se produit avant <code>onkeypress</code>, même s'il se produisent quasiment au même instant)</p>
+<h3 id="Notes" name="Notes">Voir aussi</h3>
+<p><a href="/fr/DOM/element.onkeydown" title="fr/DOM/element.onkeydown">onkeydown</a> <a href="/fr/DOM/element.onkeyup" title="fr/DOM/element.onkeyup">onkeyup</a></p>
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+<p>{{ DOM0() }}</p>
+<p>{{ languages( { "en": "en/DOM/element.onkeypress" } ) }}</p>
diff --git a/files/fr/web/api/globaleventhandlers/onkeyup/index.html b/files/fr/web/api/globaleventhandlers/onkeyup/index.html
new file mode 100644
index 0000000000..6c27a7cc02
--- /dev/null
+++ b/files/fr/web/api/globaleventhandlers/onkeyup/index.html
@@ -0,0 +1,23 @@
+---
+title: element.onkeyup
+slug: Web/API/GlobalEventHandlers/onkeyup
+tags:
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/GlobalEventHandlers/onkeyup
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p>La propriété <strong>onkeyup</strong> renvoi le gestionnaire d'évènements onKeyUp de l'élément courant.</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<p>code de gestion de l'évènement = element.onkeyup</p>
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+<pre class="eval"> &lt;input type="text" onKeyUp="cleRelachee(event)"&gt;
+ &lt;script&gt;function cleRelachee(evt){ alert(evt.keyCode) }&lt;/script&gt;
+</pre>
+<h3 id="Notes" name="Notes">Notes</h3>
+<p>L'évènement <code>keyup</code> se déclenche lorsque qu'une touche du clavier qui a été pressée est relâchée.</p>
+<h3 id="Notes" name="Notes">Voir aussi</h3>
+<p><a href="/fr/DOM/element.onkeypress" title="fr/DOM/element.onkeypress">onkeypress</a> <a href="/fr/DOM/element.onkeydown" title="fr/DOM/element.onkeydown">onkeydown</a></p>
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+<p>Ne fait partie d'aucune spécification.</p>
+<p>{{ languages( { "en": "en/DOM/element.onkeyup", "pl": "pl/DOM/element.onkeyup" } ) }}</p>
diff --git a/files/fr/web/api/globaleventhandlers/onload/index.html b/files/fr/web/api/globaleventhandlers/onload/index.html
new file mode 100644
index 0000000000..d8a5227c92
--- /dev/null
+++ b/files/fr/web/api/globaleventhandlers/onload/index.html
@@ -0,0 +1,27 @@
+---
+title: window.onload
+slug: Web/API/GlobalEventHandlers/onload
+tags:
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/GlobalEventHandlers/onload
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p>Un gestionnaire d'évènement pour l'évènement <code>load</code> (chargement) de la fenêtre.</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<pre>window.onload = refFct;
+</pre>
+<h3 id="Param.C3.A8tres" name="Param.C3.A8tres">Paramètres</h3>
+<ul>
+ <li><code>refFct</code> est une référence à une fonction.</li>
+</ul>
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+<pre>window.onload = init;
+</pre>
+<h3 id="Notes" name="Notes">Notes</h3>
+<p>L'évènement <code>load</code> se déclenche à la fin du processus de chargement du document. À ce moment, tous les objets du document sont dans le DOM.</p>
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+<p>Ne fait partie d'aucune spécification.</p>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "en": "en/DOM/window.onload", "pl": "pl/DOM/window.onload" } ) }}</p>
diff --git a/files/fr/web/api/globaleventhandlers/onloadend/index.html b/files/fr/web/api/globaleventhandlers/onloadend/index.html
new file mode 100644
index 0000000000..00e16cf29a
--- /dev/null
+++ b/files/fr/web/api/globaleventhandlers/onloadend/index.html
@@ -0,0 +1,122 @@
+---
+title: GlobalEventHandlers.onloadend
+slug: Web/API/GlobalEventHandlers/onloadend
+tags:
+  - API
+  - DOM
+  - Gestionnaires d'évènements
+  - Propriétés
+  - évènements
+translation_of: Web/API/GlobalEventHandlers/onloadend
+---
+<div>{{ApiRef}}</div>
+
+<p>La propriété <strong><code>onloadend</code></strong> du "mixin" {{domxref("GlobalEventHandlers")}} est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'évènement {{event("loadend")}} est déclenché (quand la progression est arrêtée sur le chargement d'une ressource).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>img</var>.onloadend = <var>funcRef</var>;
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p><code>funcRef</code> est la fonction du gestionnaire à appeler quand l'évènement <code>loadend </code>de la ressource est déclenché.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Contenu_HTML">Contenu HTML</h3>
+
+<pre class="brush: html">&lt;img src="myImage.jpg"&gt;</pre>
+
+<h3 id="Contenu_JavaScript">Contenu JavaScript</h3>
+
+<pre class="brush: js">// 'loadstart' est le premier lancé, puis 'load', puis 'loadend'
+
+image.addEventListener('load', function(e) {
+  console.log('Image loaded');
+});
+
+image.addEventListener('loadstart', function(e) {
+  console.log('Image load started');
+});
+
+image.addEventListener('loadend', function(e) {
+  console.log('Image load finished');
+});</pre>
+
+<h2 id="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("HTML WHATWG", "webappapis.html#handler-onloadend", "onloadend")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("52")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("52")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] À partir de Firefox 52, l'évènement <code>loadend</code> est déclenché sur les éléments {{htmlelement("img")}}.</p>
diff --git a/files/fr/web/api/globaleventhandlers/onloadstart/index.html b/files/fr/web/api/globaleventhandlers/onloadstart/index.html
new file mode 100644
index 0000000000..fe09f4e6aa
--- /dev/null
+++ b/files/fr/web/api/globaleventhandlers/onloadstart/index.html
@@ -0,0 +1,74 @@
+---
+title: GlobalEventHandlers.onloadstart
+slug: Web/API/GlobalEventHandlers/onloadstart
+tags:
+  - API
+  - DOM
+  - Gestionnaires d'évènements
+  - Propriétés
+  - évènements
+translation_of: Web/API/GlobalEventHandlers/onloadstart
+---
+<div>{{ApiRef}}</div>
+
+<p>La propriété <strong><code>onloadstart</code></strong> du "mixin" {{domxref("GlobalEventHandlers")}} est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'évènement {{event("loadstart")}} est déclenché (quand la progression est commencée sur le chargement d'une ressource).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>img</var>.onloadstart = <var>funcRef</var>;
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p><code>funcRef</code> est la fonction du gestionnaire à appeler lorsque l'évènement <code>loadstart</code> de la ressource est déclenché.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Contenu_HTML">Contenu HTML</h3>
+
+<pre class="brush: html">&lt;img src="myImage.jpg"&gt;</pre>
+
+<h3 id="Contenu_JavaScript">Contenu JavaScript</h3>
+
+<pre class="brush: js">// 'loadstart' est lancé le premier, puis 'load', puis 'loadend'
+
+image.addEventListener('load', function(e) {
+  console.log('Image loaded');
+});
+
+image.addEventListener('loadstart', function(e) {
+  console.log('Image load started');
+});
+
+image.addEventListener('loadend', function(e) {
+  console.log('Image load finished');
+});</pre>
+
+<h2 id="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("HTML WHATWG", "webappapis.html#handler-onloadstart", "onloadstart")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div>
+
+
+<p>{{Compat("api.GlobalEventHandlers.onloadstart")}}</p>
+</div>
+</div>
diff --git a/files/fr/web/api/globaleventhandlers/onmousedown/index.html b/files/fr/web/api/globaleventhandlers/onmousedown/index.html
new file mode 100644
index 0000000000..8da0125fb7
--- /dev/null
+++ b/files/fr/web/api/globaleventhandlers/onmousedown/index.html
@@ -0,0 +1,20 @@
+---
+title: element.onmousedown
+slug: Web/API/GlobalEventHandlers/onmousedown
+tags:
+  - DOM
+  - DOM_0
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/GlobalEventHandlers/onmousedown
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p>La propriété <b>onmousedown</b> renvoie le gestionnaire de l'évènement <code>mousedown</code> (bouton de la souris enfoncé) pour l'élément courant.</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<pre class="eval">code de gestion de l'évènement = element.onMouseDown
+</pre>
+<h3 id="Notes" name="Notes">Notes</h3>
+<p>L'évènement <code>mousedown</code> se déclenche lorsque l'utilisateur appuie sur le bouton gauche de la souris.</p>
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+<p>{{ DOM0() }}</p>
+<p>{{ languages( { "en": "en/DOM/element.onmousedown", "pl": "pl/DOM/element.onmousedown" } ) }}</p>
diff --git a/files/fr/web/api/globaleventhandlers/onmousemove/index.html b/files/fr/web/api/globaleventhandlers/onmousemove/index.html
new file mode 100644
index 0000000000..b89d701db6
--- /dev/null
+++ b/files/fr/web/api/globaleventhandlers/onmousemove/index.html
@@ -0,0 +1,41 @@
+---
+title: element.onmousemove
+slug: Web/API/GlobalEventHandlers/onmousemove
+tags:
+  - DOM
+  - DOM_0
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/GlobalEventHandlers/onmousemove
+---
+<p>{{ ApiRef() }}</p>
+
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+
+<p>La propriété <strong>onmousemove</strong> renvoie le code de gestion de l'évènement <code>mousemove</code> pour l'élément courant.</p>
+
+<h3 id="Syntax" name="Syntax">Syntax</h3>
+
+<p><code><em>element</em>.onmousemove = <em>functionRef</em></code></p>
+
+<p id="Exemple">où <em>functionRef</em> est une fonction ou une expression de type <em>function. </em>Consulter la <a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope" title="/en-US/docs/JavaScript/Reference/Functions_and_function_scope">référence des fonctions</a> pour plus de détails.</p>
+
+<p>Le paramètre fournit au gestionnaire d'évènement <em>functionRef</em> lors du déclenchement de l'évènement est objet qui représente l'évènement de déplacment de souris, de type {{ domxref("MouseEvent") }}.</p>
+
+<h3 id="Notes" name="Notes">Exemple</h3>
+
+<pre class="brush: js">document.body.onmousemove = event =&gt; {
+  // Suivi de la position de la souris dans la console
+  console.log(`Position de la souris : X = ${event.clientX} | Y = ${event.clientY}`);
+}</pre>
+
+<h3 id="Notes" name="Notes">Notes</h3>
+
+<p>L'évènement <code>mousemove</code> se déclenche lorsque l'utilisateur déplace la souris.</p>
+
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+
+<p>{{ DOM0() }}</p>
+
+<div class="noinclude"> </div>
+
+<p>{{ languages( { "en": "en/DOM/element.onmousemove", "pl": "pl/DOM/element.onmousemove" } ) }}</p>
diff --git a/files/fr/web/api/globaleventhandlers/onmouseout/index.html b/files/fr/web/api/globaleventhandlers/onmouseout/index.html
new file mode 100644
index 0000000000..ac9fb708bd
--- /dev/null
+++ b/files/fr/web/api/globaleventhandlers/onmouseout/index.html
@@ -0,0 +1,20 @@
+---
+title: element.onmouseout
+slug: Web/API/GlobalEventHandlers/onmouseout
+tags:
+  - DOM
+  - DOM_0
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/GlobalEventHandlers/onmouseout
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p>La propriété <b>onmouseout</b> renvoie le code de gestion de l'évènement <code>mouseout</code> (sortie du pointeur de la souris) pour l'élément courant.</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<pre class="eval">code de gestion de l'évènement = element.onmouseout
+</pre>
+<h3 id="Notes" name="Notes">Notes</h3>
+<p>L'évènement <code>mouseout</code> se déclenche lorsque le pointeur de la souris quitte un élément (par exemple lorsque le pointeur sort d'une image sur une page web, cet évènement se déclenche pour l'élément <code>image</code> correspondant).</p>
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+<p>{{ DOM0() }}</p>
+<p>{{ languages( { "en": "en/DOM/element.onmouseout" } ) }}</p>
diff --git a/files/fr/web/api/globaleventhandlers/onmouseover/index.html b/files/fr/web/api/globaleventhandlers/onmouseover/index.html
new file mode 100644
index 0000000000..f5f46d7ac9
--- /dev/null
+++ b/files/fr/web/api/globaleventhandlers/onmouseover/index.html
@@ -0,0 +1,20 @@
+---
+title: element.onmouseover
+slug: Web/API/GlobalEventHandlers/onmouseover
+tags:
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/GlobalEventHandlers/onmouseover
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p>La propriété <b>onmouseover</b> renvoie le code de gestion de l'évènement <code>onMouseOver</code> pour l'élément courant.</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<pre class="eval">code de gestion de l'évènement = element.onmouseover
+</pre>
+<h3 id="Notes" name="Notes">Notes</h3>
+<p>L'évènement <code>mouseover</code> se déclenche lorsque l'utilisateur déplace la souris au dessus d'un élément particulier.</p>
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+<p>Ne fait partie d'aucune spécification.</p>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "en": "en/DOM/element.onmouseover", "pl": "pl/DOM/element.onmouseover" } ) }}</p>
diff --git a/files/fr/web/api/globaleventhandlers/onmouseup/index.html b/files/fr/web/api/globaleventhandlers/onmouseup/index.html
new file mode 100644
index 0000000000..c283e36862
--- /dev/null
+++ b/files/fr/web/api/globaleventhandlers/onmouseup/index.html
@@ -0,0 +1,20 @@
+---
+title: element.onmouseup
+slug: Web/API/GlobalEventHandlers/onmouseup
+tags:
+  - DOM
+  - DOM_0
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/GlobalEventHandlers/onmouseup
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p>La propriété <b>onmouseup</b> renvoie le gestionnaire de l'évènement <code>mouseup</code> (bouton de la souris relaché) pour l'élément courant.</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<pre class="eval">code de gestion de l'évènement = element.onMouseUp
+</pre>
+<h3 id="Notes" name="Notes">Notes</h3>
+<p>L'évènement <code>mouseup</code> se déclenche lorsque l'utilisateur relâche le bouton gauche de la souris.</p>
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+<p>{{ DOM0() }}</p>
+<p>{{ languages( { "en": "en/DOM/element.onmouseup" } ) }}</p>
diff --git a/files/fr/web/api/globaleventhandlers/onreset/index.html b/files/fr/web/api/globaleventhandlers/onreset/index.html
new file mode 100644
index 0000000000..e2c6eb2011
--- /dev/null
+++ b/files/fr/web/api/globaleventhandlers/onreset/index.html
@@ -0,0 +1,129 @@
+---
+title: GlobalEventHandlers.onreset
+slug: Web/API/GlobalEventHandlers/onreset
+tags:
+  - API
+  - DOM
+  - Gestionnaires d'évènements
+  - Propriété
+  - évènements
+translation_of: Web/API/GlobalEventHandlers/onreset
+---
+<p>{{ ApiRef() }}</p>
+
+<p>La propriété <code><strong>GlobalEventHandlers.onreset</strong></code> contient un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) déclenché quand un évènement {{event("reset")}} est reçu.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre>window.onreset = funcRef;
+</pre>
+
+<h3 id="Parameters" name="Parameters">Paramètres</h3>
+
+<ul>
+ <li><code>funcRef</code> est une référence à une fonction.</li>
+</ul>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="eval">&lt;html&gt;
+&lt;script&gt;
+function reg() {
+  window.captureEvents(Event.RESET);
+  window.onreset = hit;
+}
+
+function hit() {
+ alert('hit');
+}
+&lt;/script&gt;
+
+&lt;body onload="reg();"&gt;
+ &lt;form&gt;
+   &lt;input type="reset" value="reset" /&gt;
+ &lt;/form&gt;
+ &lt;div id="d"&gt; &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>L'évènement <code>reset</code> est déclenché quand l'utilisateur clique sur le bouton de réinitialisation dans un formulaire (<code>&lt;input type="reset"/&gt;</code>).</p>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<table class="spectable 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','webappapis.html#handler-onreset','onreset')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fr/web/api/globaleventhandlers/onresize/index.html b/files/fr/web/api/globaleventhandlers/onresize/index.html
new file mode 100644
index 0000000000..c8dba30afa
--- /dev/null
+++ b/files/fr/web/api/globaleventhandlers/onresize/index.html
@@ -0,0 +1,66 @@
+---
+title: element.onresize
+slug: Web/API/GlobalEventHandlers/onresize
+tags:
+  - DOM
+  - DOM_0
+translation_of: Web/API/window.onresize
+---
+<p>{{ ApiRef() }}</p>
+
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+
+<p>La propriété <strong>onresize</strong> renvoie le code de gestion <code>onresize</code> de l'élément. Il sert également à définir le code devant s'exécuter lorsqu'un évènement de redimensionnement survient.</p>
+
+<p>Seul l'objet <var>window</var> possède un évènement <code>onresize</code>.</p>
+
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+
+<pre class="eval">// attribue une fonction anonyme à onresize
+window.onresize = function(){alert('Redimensionnement de la fenêtre')}
+
+// Attribue la référence d'une fonction à onresize
+function sayHi(){alert('Hi')}
+
+window.onresize = sayHi;
+
+// Montre la valeur de window.onresize
+alert(window.onresize);
+</pre>
+
+<p>Un évènement onresize employé avec des cadres sera lancé à chaque fois que le cadre sera redimensionné soit directement, soit comme résultant du redimensionnement de la fenêtre.</p>
+
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+
+<pre>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+ "http://www.w3.org/TR/html4/strict.dtd"&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;exemple avec onresize&lt;/title&gt;
+&lt;script type="text/javascript"&gt;
+
+function sayHi(){
+  alert('Hi');
+}
+
+window.onresize = sayHi;
+
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&lt;input type="button"
+ value="Cliquez ici pour voir window.onresize"
+ onclick="alert(window.onresize);"
+&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h3 id="Notes" name="Notes">Notes</h3>
+
+<p>Un attribut onresize peut être placé sur n'importe quel élément, mais seul l'objet <code>window</code> possède un évènement sur le redimensionnement. Le rédimensionnement d'autres éléments (par exemple, la modification de la largeur ou de la hauteur d'un élément img par un script) ne lancera aucun évènement de redimensionnement.</p>
+
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+
+<p>{{ DOM0() }}</p>
+
+<p>{{ languages( { "en": "en/DOM/element.onresize" } ) }}</p>
diff --git a/files/fr/web/api/globaleventhandlers/onscroll/index.html b/files/fr/web/api/globaleventhandlers/onscroll/index.html
new file mode 100644
index 0000000000..5afe8002a1
--- /dev/null
+++ b/files/fr/web/api/globaleventhandlers/onscroll/index.html
@@ -0,0 +1,18 @@
+---
+title: element.onscroll
+slug: Web/API/GlobalEventHandlers/onscroll
+tags:
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/GlobalEventHandlers/onscroll
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p>La propriété <b>onscroll</b> renvoie le gestionnaire d'évènement <code>scroll</code> pour l'élément courant.</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<pre class="eval"><i>code de gestion d'évènement</i> = element.onscroll;
+</pre>
+<h3 id="Notes" name="Notes">Notes</h3>
+<p>L'évènement <code>scroll</code> se déclenche lorsque l'utilisateur fait défiler le contenu d'un élément.</p>
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+<p>DOM Level 0. Ne fait partie d'aucune spécification.</p>
+<p>{{ languages( { "en": "en/DOM/element.onscroll" } ) }}</p>
diff --git a/files/fr/web/api/globaleventhandlers/onselect/index.html b/files/fr/web/api/globaleventhandlers/onselect/index.html
new file mode 100644
index 0000000000..1946c69caa
--- /dev/null
+++ b/files/fr/web/api/globaleventhandlers/onselect/index.html
@@ -0,0 +1,80 @@
+---
+title: GlobalEventHandlers.onselect
+slug: Web/API/GlobalEventHandlers/onselect
+tags:
+  - API
+  - Gestionnaire d'événement
+  - HTML DOM
+  - Propriété
+  - Reference
+translation_of: Web/API/GlobalEventHandlers/onselect
+---
+<div>{{ ApiRef("HTML DOM") }}</div>
+
+<p>La propriété <strong><code>onselect</code></strong> du mixin {{domxref("GlobalEventHandlers")}} est un {{domxref("EventHandler")}} qui traite les événements <a href="/fr-FR/docs/Web/API/Element/select_event"><code>select</code></a>.</p>
+
+<p>L'événement <code>select</code> n'est déclenché qu'après que du texte à l'intérieur d'un <code>{{HtmlElement('input/text', '&lt;input type="text"&gt;')}}</code> ou d'un {{HtmlElement("textarea")}} a été sélectionné.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><em>target</em>.onselect = <em>functionRef</em>;
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p><code>réfFonction</code> est un nom de fonction ou une <a href="/fr-FR/docs/Web/JavaScript/Reference/Operators/function">expression retournant une fonction</a>. La fonction reçoit un objet {{domxref("UIEvent")}} comme unique argument.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Cet exemple enregistre le texte que vous sélectionnez à l'intérieur d'un élément {{HtmlElement("textarea")}}.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;textarea&gt;Essayez de sélectionner du texte dans cet élément.&lt;/textarea&gt;
+&lt;p id="log"&gt;&lt;/p&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">function enregistrerSelection(event) {
+  const log = document.getElementById('log');
+  const selection = event.target.value.substring(event.target.selectionStart, event.target.selectionEnd);
+  log.textContent = `Vous avez sélectionné : ${selection}`;
+}
+
+const textarea = document.querySelector('textarea');
+textarea.onselect = enregistrerSelection;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Examples")}}</p>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<table class="spectable 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','webappapis.html#handler-onselect','onselect')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">La table de compatibilité de cette page est générée à partir de données structurées. Si vous souhaitez y contribuer, merci de consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et de nous envoyer une pull request.</div>
+
+<p>{{Compat("api.GlobalEventHandlers.onselect")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'événement <a href="/fr-FR/docs/Web/API/Element/select_event"><code>select</code></a></li>
+</ul>
diff --git a/files/fr/web/api/headers/index.html b/files/fr/web/api/headers/index.html
new file mode 100644
index 0000000000..93e16b4a2e
--- /dev/null
+++ b/files/fr/web/api/headers/index.html
@@ -0,0 +1,133 @@
+---
+title: Headers
+slug: Web/API/Headers
+tags:
+  - API
+  - Experimental
+  - Fetch
+  - Fetch API
+  - Headers
+  - Headers API
+  - Interface
+  - Reference
+translation_of: Web/API/Headers
+---
+<div>{{APIRef("Fetch API")}}</div>
+
+<p>L'interface <code>Headers</code> de l'API Fetch vous permet d'effectuer diverses actions sur les en-têtes de requête et de réponse HTTP. Ces actions incluent la récupération, la configuration, l’ajout et la suppression. Un objet <code>Headers</code> a une liste <code>Headers</code> associée qui est vide lors de l'initialisation et qui est constituée de zéro ou plusieurs paires de noms et de valeurs. Vous pouvez en ajouter via les méthodes comme<span style="line-height: 19.0909080505371px;">{{domxref("Headers.append","append()")}} (see {{anch("Examples")}}.)  Dans toutes les méthodes de cette interface, les noms des <code>Headers</code> sont reliés à une séquence d'octets sensible à la case.</span></p>
+
+<p>Pour des raisons de sécurité, les <code>Headers</code> ci-dessous peuvent être controlés uniquement par l'User Agent : {{Glossary("Forbidden_header_name", "forbidden header names", 1)}}  et {{Glossary("Forbidden_response_header_name", "forbidden response header names", 1)}}.</p>
+
+<p>Un objet <code>Headers</code> a aussi une garde associée, qui prend la valeur <code>immutable</code>, <code>request</code>, <code>request-no-cors</code>, <code>reponse</code>, or <code>none</code>. Cela affecte si les méthodes {{domxref("Headers.set","set()")}}, {{domxref("Headers.delete","delete()")}}, et {{domxref("Headers.append","append()")}}  vont modifier le <code>Header</code>. Pour plus d'informations voir {{Glossary("Guard")}}.</p>
+
+<p>Vous pouvez récuperer un objet <code>Header</code> via les propriétés {{domxref("Request.headers")}} et {{domxref("Response.headers")}} et créer un nouvel objet <code>Header</code> en utilisant le constructeur {{domxref("Headers.Headers()")}}.</p>
+
+<p>Un objet implémentant <code>Headers</code> peut directement être utilisé dans une structure {{jsxref("Statements/for...of", "for...of")}}, au lieu de{{domxref('Headers.entries()', 'entries()')}}: <code>for (var p of myHeaders)</code> est équivalent à <code>for (var p of myHeaders.entries())</code>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Vous pouvez trouver plus d'informations à propos des Headers disponibles en lisant la page suivante : <a href="/en-US/docs/Web/HTTP/Headers">HTTP headers</a>.</p>
+</div>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("Headers.Headers()", "Headers()")}}</dt>
+ <dd>Crée un nouvel objet <code>Headers</code>.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("Headers.append()")}}</dt>
+ <dd>Ajoute une nouvelle valeur à un Header existant dans un objet <code>Headers</code>, ou ajoute le header s'il n'existe pas déjà.</dd>
+ <dt>{{domxref("Headers.delete()")}}</dt>
+ <dd>Supprime un header dans un objet <code>Headers</code>.</dd>
+ <dt>{{domxref("Headers.entries()")}}</dt>
+ <dd>Retourne un {{jsxref("Iteration_protocols","iterator")}} permettant d'acceder à toutes les paires clef/valeur contenue dans cet objet.</dd>
+ <dt>{{domxref("Headers.forEach()")}}</dt>
+ <dd>Exécute une fonction fournie une fois pour chaque élément du tableau.</dd>
+ <dt>{{domxref("Headers.get()")}}</dt>
+ <dd>Retourne une séquence {{domxref("ByteString")}} de toutes les valeurs d'un Header dans un objet <code>Headers</code> avec un nom donné.</dd>
+ <dt>{{domxref("Headers.has()")}}</dt>
+ <dd>Retourne un booléen indiquant si un objet <code>Headers</code> contient un certain header.</dd>
+ <dt>{{domxref("Headers.keys()")}}</dt>
+ <dd>Retourne un  {{jsxref("Iteration_protocols", "iterator")}} permettant de parcourir toutes les clefs des paires clef/valeur contenues dans cet objet.</dd>
+ <dt>{{domxref("Headers.set()")}}</dt>
+ <dd>Définti une nouvelle valeur pour un header existant dans un objet <code>Headers</code>, ou ajoute le header s'il n'existe pas déjà.</dd>
+ <dt>{{domxref("Headers.values()")}}</dt>
+ <dd>Retourne un {{jsxref("Iteration_protocols", "iterator")}} permettant de parcourir toutes les valeurs des paires clefs/valeur contenues dans cet objet.</dd>
+</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>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: Toutes les méthodes Headers vont retourner <code>TypeError</code> si vous essayez de passer dans une réfférenceun nom qui n'est pas un <a href="https://fetch.spec.whatwg.org/#concept-header-name">nom de Header HTTP valide</a>. Les opérations de mutation vont retourner <code>TypeError</code> si le header a un {{Glossary("Guard")}} immuable. Dans tous les autres cas, les erreurs sont silencieuses.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: Lorsque les valeurs d'en-tête sont itérées, elles sont automatiquement triées par ordre lexicographique et les valeurs des noms d'en-tête en double sont combinées.</p>
+</div>
+
+<h3 id="Méthodes_obsolètes">Méthodes obsolètes</h3>
+
+<dl>
+ <dt>{{domxref("Headers.getAll()")}}</dt>
+ <dd>Utilisée pour retourner un array de toutes les valeurs d'un header dans un objet <code>Headers</code> avec un nom donné. Cette méthode est maintenant supprimée des standards, et {{domxref("Headers.get()")}} retourne maintenant toutes les valeurs d'un nom donné au lieu du premier seulement.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans le fragment de code suivant, nous créons un nouvel Header en utilisant le contructeur <code>Headers()</code>, ajoutons un nouvel header à ce dernier en utilisant <code>append()</code>, puis retournons la valeur du header en utilisant <code>get()</code> :</p>
+
+<pre class="brush: js notranslate">var monHeader = new Headers();
+
+monHeader.append('Content-Type', 'text/xml');
+monHeader.get('Content-Type') // doit retourner 'text/xml'
+</pre>
+
+<p>La même chose peut être accomplie en passant par un array d'array  <span class="tlid-translation translation" lang="fr"><span title="">un littéral d'objet au constructeur.</span></span></p>
+
+<pre class="brush: js notranslate">var mesHeaders = new Headers({
+    'Content-Type': 'text/xml'
+});
+
+// ou, en utilisant un array d'array
+mesHeaders = new Headers([
+    ['Content-Type', 'text/xml']
+]);
+
+mesHeaders.get('Content-Type') // doit retourner 'text/xml'
+</pre>
+
+<h2 id="Caractéristiques">Caractéristiques</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Caractéristiques</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#headers-class','Headers')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Headers")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">API ServiceWorker</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/fr/web/api/history/index.html b/files/fr/web/api/history/index.html
new file mode 100644
index 0000000000..50830bc9b8
--- /dev/null
+++ b/files/fr/web/api/history/index.html
@@ -0,0 +1,131 @@
+---
+title: History
+slug: Web/API/History
+tags:
+  - DOM
+  - HTML-DOM
+translation_of: Web/API/History
+---
+<p>{{APIRef}}</p>
+
+<p>L'interface<span style="line-height: 1.5;"> </span><strong style="line-height: 1.5;"><code>History</code></strong><span style="line-height: 1.5;"> permet de manipuler</span> l'historique de navigation du navigateur<span style="line-height: 1.5;">, soit la liste des pages visitées au sein de l'onglet ou fenêtre ou cadre dans lequelle la page actuelle est ouverte.</span></p>
+
+<h2 id="Propriétés" style="line-height: 30px;">Propriétés</h2>
+
+<p><em>L'interface <code>History</code></em><em> n'hérite d'aucune propriété.</em></p>
+
+<dl>
+ <dt>{{domxref("History.length")}} {{readOnlyInline}}</dt>
+ <dd>Retourne un <code>Integer</code> représentant le nombre d'élements dans l'historique de la session, y incluant la page actullement ouverte. Par exemple, pour une page chargée dans un nouvel onglet cette propriété retourne <code>1</code>.</dd>
+ <dt>{{domxref("History.current")}} {{readOnlyInline}} {{ non-standard_inline() }} {{ obsolete_inline(26) }}</dt>
+ <dd>Retourne un {{domxref("DOMString")}} de l‘URL active dans l'historique de navigation. Cette propriété n‘a jamais été rendu disponible au contenu web ni supporté par aucun autre navigateur. Utilisez plutôt {{domxref("Location.href")}}.</dd>
+ <dt>{{domxref("History.next")}} {{readOnlyInline}} {{ non-standard_inline() }} {{ obsolete_inline(26) }}</dt>
+ <dd>Retourne un {{domxref("DOMString")}} de l‘URL suivante dans l'historique de navigation. Cette propriété n‘a jamais été rendu disponible au contenu web ni supporté par aucun autre navigateur.</dd>
+ <dt>{{domxref("History.previous")}} {{readOnlyInline}} {{ non-standard_inline() }} {{ obsolete_inline(26) }}</dt>
+ <dd>Retourne un {{domxref("DOMString")}} de l‘URL précédente dans l'historique de navigation.</dd>
+ <dt>{{domxref("History.state")}} {{readOnlyInline}} {{ gecko_minversion_inline("2.0") }}</dt>
+ <dd>Retourne une value <code>any</code> représentant l'état le plus haut de l‘historique de navigation. C‘est une manière de vérifier cet état sans avoir à attendre un évenement {{event("popstate")}}.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>L‘interface <code>History</code></em> <em>n‘hérite d‘aucune méthode.</em></p>
+
+<dl>
+ <dt>{{domxref("History.back()")}}</dt>
+ <dd>Recule vers la page précédente dans l‘historique de navigation, soit la même action que lorsque l‘utilsateur clique le bouton Précédent du navigateur. Equivalent de <code>history.go(-1)</code>.
+ <div class="note"><strong>Note:</strong> Appeler cette méthode pour reculer plus loin que la première page de l'historique de navigation n‘a aucun effet et ne déclenche pas d'exception.</div>
+ </dd>
+ <dt>{{domxref("History.forward()")}}</dt>
+ <dd>Avance vers la page suivante dans l‘historique de navigation, soit la même action que lorsque l‘utilsateur clique le bouton Suivant du navigateur. Equivalent de <code>history.go(1)</code>.
+ <div class="note"><strong>Note:</strong> Appeler cette méthode pour avancer plus loin que la page la plus récente de l'historique de navigation n‘a aucun effet et ne déclenche pas d'exception.</div>
+ </dd>
+ <dt>{{domxref("History.go()")}}</dt>
+ <dd>Charge une page dans l‘historique de navigation, identifiée par sa position relative à la page courante, par exemple <code>-1</code> pour la page précédente ou <code>1</code> pour la page suivante. Lorsque <code><em>integerDelta</em></code> sort du cadre de l‘historique (aka. -1 alors qu‘il n‘y a pas de page précédente), cette méthode n‘aura aucun effet et ne déclenchera pas d'exception. Appeler <code>go()</code> sans paramètres ou un paramètre autre qu'<span style="line-height: 1.5;">un </span><code style="font-style: normal; line-height: 1.5;">Integer</code><span style="line-height: 1.5;"> n‘a aucun effet (sauf par Internet Explorer, </span><a class="external" href="http://msdn.microsoft.com/en-us/library/ms536443(VS.85).aspx" style="line-height: 1.5;" title="http://msdn.microsoft.com/en-us/library/ms536443(VS.85).aspx">qui supporte les URLs en String comme paramètre</a><span style="line-height: 1.5;">).</span></dd>
+ <dt>{{domxref("History.pushState()")}} {{ gecko_minversion_inline("2.0") }}</dt>
+ <dd>Insère les paramètres fournis dans la pile de l‘historique de navigation avec un titre donné et, si fourni, l‘URL. Les données sont traitées comme opaque par le DOM; il est nécessaire de spécifier chaque objet JavaScript devant être sérialisé. Notez que Firefox ignore actuellement le paramètre titre; pour plus d'informations, voir <a href="/fr/docs/Web/Guide/DOM/Manipuler_historique_du_navigateur" title="en/DOM/Manipulating the browser history">Manipuler l'historique du navigateur</a>.
+ <div class="note"><strong>Note:</strong> De Gecko 2.0 {{ geckoRelease("2.0") }} jusqu‘à Gecko 5.0 {{ geckoRelease("5.0") }}, l‘objet donné est sérialisé via JSON. A partir de Gecko 6.0 {{ geckoRelease("6.0") }}, cet objet est sérialisé via <a href="/en/DOM/The_structured_clone_algorithm" title="en/DOM/The structured clone algorithm">the structured clone algorithm</a>. Cela permet une plus large variété d‘objets pouvant être passé.</div>
+ </dd>
+ <dt>{{domxref("History.replaceState()")}} {{ gecko_minversion_inline("2.0") }}</dt>
+ <dd>Modifie la page la plus récente dans la pile de l‘historique de navigation pour avoir les données, titre, et si spécifiée, URL. Les données sont traitées comme opaque par le DOM; il est nécessaire de spécifier chaque objet JavaScript devant être sérialisé. Notez que Firefox ignore actuellement le paramètre titre; pour plus d'informations, voir <a href="/fr/docs/Web/Guide/DOM/Manipuler_historique_du_navigateur" title="en/DOM/Manipulating the browser history">Manipuler l'historique du navigateur</a>.
+ <div class="note"><strong>Note:</strong> De Gecko 2.0 {{ geckoRelease("2.0") }} jusqu‘à Gecko 5.0 {{ geckoRelease("5.0") }}, l‘objet donné est sérialisé via JSON. A partir de Gecko 6.0 {{ geckoRelease("6.0") }}, cet objet est sérialisé via <a href="/en/DOM/The_structured_clone_algorithm" title="en/DOM/The structured clone algorithm">the structured clone algorithm</a>. Cela permet une plus large variété d‘objets pouvant être passé.</div>
+ </dd>
+</dl>
+
+<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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "history.html#history-0", "History")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Conforme à {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "browsers.html#the-history-interface", "History")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La propriété {{domxref("Window.history")}} retourne l'historique de navigation de la session en cours.</li>
+</ul>
diff --git a/files/fr/web/api/history/length/index.html b/files/fr/web/api/history/length/index.html
new file mode 100644
index 0000000000..aae76e8157
--- /dev/null
+++ b/files/fr/web/api/history/length/index.html
@@ -0,0 +1,47 @@
+---
+title: History.length
+slug: Web/API/History/length
+translation_of: Web/API/History/length
+---
+<div>{{APIRef("History API")}}</div>
+
+<p><span class="seoSummary">La propriété en lecture seule <code><strong>History.length</strong></code> retourne un entier indiquant le nombre d'élément dans l'historique de session, incluant la page courante.</span> Par exemple, pour une page dans un nouvel onglet, la propriété retournera <code>1</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">const <em>length</em> = history.length
+</pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statuts</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "history.html#dom-history-length", "History.length")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Pas de changement depuis {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "browsers.html#dom-history-length", "History.length")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.History.length")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("History")}} auquel <code>length</code> se rattache.</li>
+</ul>
diff --git a/files/fr/web/api/htmlbaseelement/index.html b/files/fr/web/api/htmlbaseelement/index.html
new file mode 100644
index 0000000000..3a7badc3fe
--- /dev/null
+++ b/files/fr/web/api/htmlbaseelement/index.html
@@ -0,0 +1,122 @@
+---
+title: HTMLBaseElement
+slug: Web/API/HTMLBaseElement
+translation_of: Web/API/HTMLBaseElement
+---
+<div>
+<div>{{APIRef("HTML DOM")}}</div>
+</div>
+
+<div></div>
+
+<div>L'interface <strong><code>HTMLBaseElement</code></strong> contient l'URI de base pour un document. Cet objet hérite de toutes les propriétés et des méthodes telles quelles sont décrites dans l'interface {{domxref("HTMLElement")}}.</div>
+
+<div></div>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Hérite des propriétés de son parent, {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLBaseElement.href")}}</dt>
+ <dd>est un {{domxref("DOMString")}} qui reflète l'attribut HTML {{htmlattrxref("href", "base")}}, contenant l'URL de base pour les URLs relatives dans le document.</dd>
+ <dt>{{domxref("HTMLBaseElement.target")}}</dt>
+ <dd>est un {{domxref("DOMString")}} qui reflète l'attribut HTML {{htmlattrxref("target", "base")}}, contenant un contexte de navigation cible par défaut ou une frame pour les éléments qui n'ont pas de cibe spécifiée.</dd>
+</dl>
+
+<h2 id="Methodes">Methodes</h2>
+
+<p><em>Pas de méthodes spécifiques; Hérite des propriétés de son parent, {{domxref("HTMLElement")}}.</em></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('HTML WHATWG', "semantics.html#the-base-element", "HTMLBaseElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Aucun changement depuis le dernier snapshot, {{SpecName("HTML5.1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "document-metadata.html#the-base-element", "HTMLBaseElement")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Aucun changement depuis {{SpecName("HTML5 W3C")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "document-metadata.html#the-base-element", "HTMLBaseElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Aucun changement depuis {{SpecName("DOM2 HTML")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-73629039', 'HTMLBaseElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>Aucun changement depuis {{SpecName("DOM1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-73629039', 'HTMLBaseElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Première définition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilités_navigateur">Compatibilités navigateur</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caractéristique</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caractéristique</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'élément HTML implémentant l'interface {{ HTMLElement("base") }}</li>
+</ul>
diff --git a/files/fr/web/api/htmlbasefontelement/index.html b/files/fr/web/api/htmlbasefontelement/index.html
new file mode 100644
index 0000000000..8ff54dca08
--- /dev/null
+++ b/files/fr/web/api/htmlbasefontelement/index.html
@@ -0,0 +1,69 @@
+---
+title: HTMLBaseFontElement
+slug: Web/API/HTMLBaseFontElement
+tags:
+  - API
+  - HTML DOM
+  - Interface
+  - Obsolete
+  - Reference
+translation_of: Web/API/HTMLBaseFontElement
+---
+<div>{{APIRef("HTML DOM")}}{{obsolete_header}}</div>
+
+<p>L'interface <strong><code>HTMLBaseFontElement</code></strong> fournit des propriétés spéciales (au-delà de l'interface classique {{domxref("HTMLElement")}} dont elle dispose également par héritage) pour manipuler les éléments {{HTMLElement("basefont")}}.</p>
+
+<p>L'élément <code>&lt;basefont&gt;</code> est obsolète en HTML4 et supprimé en HTML5. Cette dernière spécification exige que cet élément implémente {{domxref("HTMLUnknownElement")}} plutôt que <code>HTMLBaseFontElement</code>.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Hérite des propriétés de son parent, {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLBaseFontElement.color")}}</dt>
+ <dd>Est un {{domxref("DOMString")}} représentant la couleur du texte en utilisant soit une couleur nommée soit une couleur spécifiée au format hexadécimal <code>#RRGGBB</code>.</dd>
+ <dt>{{domxref("HTMLBaseFontElement.face")}}</dt>
+ <dd>Est un {{domxref("DOMString")}} représentant une liste d'un ou plusieurs noms de polices. Le texte du document dans le style par défaut est rendu dans la première face de police prise en charge par le navigateur du client. Si aucune police répertoriée n'est installée sur le système local, le navigateur utilise généralement par défaut la police proportionnelle ou à largeur fixe pour ce système.</dd>
+ <dt>{{domxref("HTMLBaseFontElement.size")}}</dt>
+ <dd>Est un {{domxref("DOMString")}} représentant la taille de la police sous forme de valeur numérique ou relative. Les valeurs numériques vont de <code>1</code> à <code>7</code>, <code>1</code> étant le plus petit et <code>3</code> la valeur par défaut. La valeur relative comme par un <code>'+'</code> ou un <code>'-</code>'.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Pas de méthode spécifique; hérite des méthodes de son parent, {{domxref("HTMLElement")}}.</em></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("DOM2 HTML", "html.html#ID-32774408", "HTMLBaseFontElement")}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>Pas de changement.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM1", "level-one-html.html#ID-32774408", "HTMLBaseFontElement")}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.HTMLBaseFontElement")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'élément HTML {{HTMLElement("basefont")}} implémentait cette interface.</li>
+</ul>
diff --git a/files/fr/web/api/htmlbodyelement/index.html b/files/fr/web/api/htmlbodyelement/index.html
new file mode 100644
index 0000000000..33868ba02b
--- /dev/null
+++ b/files/fr/web/api/htmlbodyelement/index.html
@@ -0,0 +1,198 @@
+---
+title: HTMLBodyElement
+slug: Web/API/HTMLBodyElement
+tags:
+  - API
+  - HTML DOM
+  - Interface
+  - Reference
+translation_of: Web/API/HTMLBodyElement
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>L'interface <strong> <code>HTMLBodyElement</code> </strong> des propriétés particulières (au-delà de celles de l'interface {{ domxref("HTMLElement") }} dont-elle hérite également) pour manipuler les éléments.</p>
+
+<h2 id="propriétés">propriétés</h2>
+
+<p><em>Propriétés hérite de son parent, {{domxref("HTMLElement")}} et de {{domxref("WindowEventHandlers")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLBodyElement.aLink")}} {{obsolete_inline}}</dt>
+ <dd>Est un {{ domxref("DOMString") }} qui représente la couleur des liens hypertextes actifs.</dd>
+ <dt>{{domxref("HTMLBodyElement.background")}} {{obsolete_inline}}</dt>
+ <dd>Est un {{ domxref("DOMString") }} qui représente la description de l'emplacement de la ressource d'image d'arrière-plan. Notez que ce n'est pas un URI, même si certaines anciennes versions de certains navigateurs s'y attendent.</dd>
+ <dt>{{domxref("HTMLBodyElement.bgColor")}} {{obsolete_inline}}</dt>
+ <dd>Est un {{ domxref("DOMString") }} qui représente la couleur de fond du document.</dd>
+ <dt>{{domxref("HTMLBodyElement.link")}} {{obsolete_inline}}</dt>
+ <dd>Est un {{ domxref("DOMString") }} qui représente la couleur des liens non visités.</dd>
+ <dt>{{domxref("HTMLBodyElement.text")}} {{obsolete_inline}}</dt>
+ <dd>Est un {{ domxref("DOMString") }} qui représente la couleur de premier plan du texte.</dd>
+ <dt>{{domxref("HTMLBodyElement.vLink")}} {{obsolete_inline}}</dt>
+ <dd>Est un {{ domxref("DOMString") }} qui représente la couleur des liens visités.</dd>
+</dl>
+
+<h2 id="méthodes">méthodes</h2>
+
+<p><em>Aucune méthode spécifique; méthodes hérite de ses parents, {{domxref("HTMLElement")}} et de {{domxref("WindowEventHandlers")}}</em><em>.</em></p>
+
+<h2 id="Les_gestionnaires_d'événements">Les gestionnaires d'événements</h2>
+
+<p><em>Pas de gestionnaire d'événement spécifique; gestionnaires d'événements hérite de ses parents, {{domxref("HTMLElement")}} et de {{domxref("WindowEventHandlers")}}</em><em>.</em></p>
+
+<dl>
+ <dt>{{domxref("WindowEventHandlers.onafterprint")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code d'appel lorsque l'événement {{event("afterprint")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onbeforeprint")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code d'appel lorsque l'événement {{event("beforeprint")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onbeforeunload")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code d'appel lorsque l'événement {{event("beforeunload")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onhashchange")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code d'appel lorsque l'événement {{event("hashchange")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onlanguagechange")}} {{experimental_inline}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code d'appel lorsque l'événement {{event("languagechange")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onmessage")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code d'appel lorsque l'événement {{event("message")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onoffline")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code d'appel lorsque l'événement {{event("offline")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.ononline")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code d'appel lorsque l'événement {{event("online")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpagehide")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code d'appel lorsque l'événement {{event("pagehide")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpageshow")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code d'appel lorsque l'événement {{event("pageshow")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpopstate")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code d'appel lorsque l'événement {{event("popstate")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onresize")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code d'appel lorsque l'événement {{event("resize")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onstorage")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code d'appel lorsque l'événement {{event("storage")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onunload")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code d'appel lorsque l'événement {{event("unload")}} est déclenché.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "sections.html#the-body-element", "HTMLBodyElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Techniquement, les propriétés liées à l'événement, <code>onafterprint</code>, <code>onbeforeprint</code>, <code>onbeforeunload</code>, <code>onblur</code>, <code>onerror</code>, <code>onfocus</code>, <code>onhashchange</code>, <code>onlanguagechange</code>, <code>onload</code>, <code>onmessage</code>, <code>onoffline</code>, <code>ononline</code>, <code>onpopstate</code>, <code>onresize</code>, <code>onstorage</code> et <code>onunload</code>, ont été passées à {{domxref("WindowEventHandlers")}}, et <code>HTMLBodyElement</code> implémentant cette interface.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "sections.html#the-body-element", "HTMLBodyElement")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "sections.html#the-body-element", "HTMLBodyElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Les propriétés suivantes sont désormais obsolètes: <code>aLink</code>, <code>bgColor</code>, <code>background</code>, <code>link</code>, <code>text</code> Les propriétés suivantes ont été ajoutées:. <code>vLink</code>, <code>onafterprint</code>, <code>onbeforeprint</code>, <code>onbeforeunload</code>, <code>onblur</code>, <code>onerror</code>, <code>onfocus</code>, <code>onhashchange</code>, <code>onload</code>, <code>onmessage</code>, <code>onoffline</code>, <code>ononline</code>, <code>onpopstate</code>, <code>onresize</code>, et <code>onstorage</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-62018039', 'HTMLBodyElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>Ne change pas de {{SpecName("DOM1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-62018039', 'HTMLBodyElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale.</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>1.0</td>
+   <td>{{CompatGeckoDesktop(1.0)}} [1]</td>
+   <td>4.0</td>
+   <td>{{CompatVersionUnknown}} [1]</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onXYZ</code> event handlers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onlanguage</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(32)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onXYZ</code> event handlers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onlangugage</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(32)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Firefox prior to Firefox 7.0 and some older versions of Opera did returned an URI for the <code>HTMLBodyElement.background</code> attribute.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Élément HTML mise en œuvre par cette interface: {{ HTMLElement("body") }}</li>
+</ul>
diff --git a/files/fr/web/api/htmlbrelement/index.html b/files/fr/web/api/htmlbrelement/index.html
new file mode 100644
index 0000000000..ae2314261b
--- /dev/null
+++ b/files/fr/web/api/htmlbrelement/index.html
@@ -0,0 +1,111 @@
+---
+title: HTMLBRElement
+slug: Web/API/HTMLBRElement
+tags:
+  - DOM
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/HTMLBRElement
+---
+<div>
+ {{ApiRef}}</div>
+<p>L'interface <strong><code>HTMLBRElement</code></strong> représente un retour à la ligne. Il hérite de {{domxref("HTMLElement")}}.</p>
+<h2 id="Propriétés">Propriétés</h2>
+<p><em>Hérite les propriétés de son parent : {{domxref("HTMLElement")}}.</em></p>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Nom</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>clear</code> {{obsolete_inline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Indique le flux du texte autours des objets flottants.</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Méthodes">Méthodes</h2>
+<p><em>Aucune méthode spécifique ; </em><em>hérite les méthodes de son parent, {{domxref("HTMLElement")}}</em>.</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', "text-level-semantics.html#the-br-element", "HTMLBRElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Aucun changement par rapport à {{SpecName("HTML5 W3C")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "text-level-semantics.html#the-br-element", "HTMLBRElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Aucun changement par rapport à {{SpecName("DOM2 HTML")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-ID-56836063', 'HTMLBodyElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>Aucun changement par rapport à {{SpecName("DOM1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-56836063', 'HTMLBodyElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Première définition.</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+<p>{{CompatibilityTable}}</p>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Fonctionnalité</th>
+    <th>Chrome</th>
+    <th>Firefox (Gecko)</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari (WebKit)</th>
+   </tr>
+   <tr>
+    <td>Support de base</td>
+    <td>1.0</td>
+    <td>{{CompatGeckoDesktop(1.0)}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Fonctionnalité</th>
+    <th>Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Phone</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Support de base</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatGeckoMobile(1.0)}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h2 id="Voir_également">Voir également</h2>
+<ul>
+ <li>L'élément HTML supportant cet interface : {{ HTMLElement("br") }}</li>
+</ul>
diff --git a/files/fr/web/api/htmlbuttonelement/index.html b/files/fr/web/api/htmlbuttonelement/index.html
new file mode 100644
index 0000000000..8f9ca4eab7
--- /dev/null
+++ b/files/fr/web/api/htmlbuttonelement/index.html
@@ -0,0 +1,147 @@
+---
+title: HTMLButtonElement
+slug: Web/API/HTMLButtonElement
+tags:
+  - API
+  - HTML DOM
+  - Interface
+  - Reference
+  - TopicStub
+translation_of: Web/API/HTMLButtonElement
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>  <span class="tlid-translation translation"><span title="">L'interface</span></span>  <span class="tlid-translation translation"><span title=""> </span></span><strong><code>HTMLButtonElement</code></strong>  <span class="tlid-translation translation"><span title="">fournit des propriétés et des méthodes (au-delà de l'interface d'objet {{HTMLElement ("button")}} dont elle dispose également par héritage) pour manipuler la présentation et la présentation des éléments de bouton.</span></span></p>
+
+<p>{{InheritanceDiagram(600, 120)}}</p>
+
+<h2 id="Propriétés"><span class="tlid-translation translation"><span title="">Propriétés</span></span></h2>
+
+<p><span class="tlid-translation translation"><span title="">Hérite des propriétés de son parent,</span></span> <em> {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLButtonElement.accessKey")}}</dt>
+ <dd><span class="tlid-translation translation"><span title="">Est un {{domxref ("DOMString")}} indiquant la touche de clavier à caractère unique permettant d'accéder au bouton.</span></span></dd>
+ <dt>{{domxref("HTMLButtonElement.autofocus")}}</dt>
+ <dd><span class="tlid-translation translation"><span title="">Est un {{domxref ("Boolean")}} indiquant si le contrôle doit avoir ou non le focus d'entrée lors du chargement de la page, sauf si l'utilisateur le remplace, par exemple en tapant un contrôle différent.</span> <span title="">Cet attribut est spécifié pour un seul élément associé à un formulaire dans un document.</span></span></dd>
+ <dt>{{domxref("HTMLButtonElement.disabled")}}</dt>
+ <dd><span class="tlid-translation translation"><span title="">Est un {{domxref ("Boolean")}} indiquant si le contrôle est désactivé ou non, ce qui signifie qu'il n'accepte aucun clic</span></span> .</dd>
+ <dt>{{domxref("HTMLButtonElement.form")}} {{readonlyInline}}</dt>
+ <dd><span class="tlid-translation translation"><span title="">Est un {{domxref ("HTMLFormElement")}} reflétant le formulaire auquel ce bouton est associé.</span> <span title="">Si le bouton est un descendant d'un élément de formulaire, cet attribut est l'ID de cet élément de formulaire.</span><br>
+ <span title="">Si le bouton n'est pas un descendant d'un élément de formulaire, l'attribut peut être l'identifiant de n'importe quel élément de formulaire dans le même document auquel il est lié, ou la valeur null si aucun élément ne correspond</span></span> .</dd>
+ <dt>{{domxref("HTMLButtonElement.formAction")}}</dt>
+ <dd><span class="tlid-translation translation"><span title="">Est un {{domxref ("DOMString")}} reflétant l'URI d'une ressource qui traite les informations soumises par le bouton.</span> <span title="">S'il est spécifié, cet attribut remplace l'attribut {{htmlattrxref ("action", "form")}} de l'élément {{HTMLElement ("form")}} à qui appartient cet élément.</span></span></dd>
+ <dt>{{domxref("HTMLButtonElement.formEnctype")}}</dt>
+ <dd><span class="tlid-translation translation"><span title="">Est un {{domxref ("DOMString")}} reflétant le type de contenu utilisé pour soumettre le formulaire au serveur.</span> <span title="">S'il est spécifié, cet attribut remplace l'attribut {{htmlattrxref ("enctype", "form")}} de l'élément {{HTMLElement ("form")}} à qui appartient cet élément.</span></span></dd>
+ <dt>{{domxref("HTMLButtonElement.formMethod")}}</dt>
+ <dd><span class="tlid-translation translation"><span title="">Est un {{domxref ("DOMChaine")}} reflétant la méthode HTTP que le navigateur utilise pour soumettre le formulaire.</span> <span title="">S'il est spécifié, cet attribut remplace l'attribut {{htmlattrxref ("méthode", "form")}} de l'élément {{HTMLElement ("form")}} à qui appartient cet élément.</span></span></dd>
+ <dt>{{domxref("HTMLButtonElement.formNoValidate")}}</dt>
+ <dd><span class="tlid-translation translation"><span title="">Est un {{domxref ("Boolean")}} indiquant que le formulaire ne doit pas être validé lors de sa soumission.</span> <span title="">S'il est spécifié, cet attribut remplace l'attribut {{htmlattrxref ("novalidate", "form")}} de l'élément {{HTMLElement ("form")}} à qui appartient cet élément.</span></span></dd>
+ <dt>{{domxref("HTMLButtonElement.formTarget")}}</dt>
+ <dd><span class="tlid-translation translation"><span title="">Est un {{domxref ("DOMChaîne")}} reflétant un nom ou un mot clé indiquant où afficher la réponse reçue après la soumission du formulaire.</span> <span title="">S'il est spécifié, cet attribut remplace l'attribut {{htmlattrxref ("target", "form")}} de l'élément {{HTMLElement ("form")}} à qui appartient cet élément.</span></span></dd>
+ <dt>{{domxref("HTMLButtonElement.labels")}} {{readonlyInline}}</dt>
+ <dd><span class="tlid-translation translation"><span title="">Est un {{domxref ("NodeList")}} qui représente une liste d'éléments {{HTMLElement ("label")}} qui sont des étiquettes pour ce bouton.</span></span></dd>
+ <dt>{{domxref("HTMLButtonElement.menu")}} {{experimental_inline}}</dt>
+ <dd><span class="tlid-translation translation"><span title="">Est-ce un {{domxref ("HTMLMenuElement")}} représentant l'élément de menu à afficher si le bouton est cliqué et de type = "menu".</span></span></dd>
+ <dt>{{domxref("HTMLButtonElement.name")}}</dt>
+ <dd><span class="tlid-translation translation"><span title="">Est un {{domxref ("DOMString")}} représentant le nom de l'objet lorsqu'il est soumis avec un formulaire.</span> <span title="">{{HTMLVersionInline (5)}} Si spécifié, il ne doit pas s'agir d'une chaîne vide.</span></span></dd>
+ <dt>{{domxref("HTMLButtonElement.tabIndex")}}</dt>
+ <dd><span class="tlid-translation translation"><span title="">Est un</span></span>  <code>long</code> <span class="tlid-translation translation"><span title="">qui représente la position de cet élément dans l'ordre de tabulation</span></span> .</dd>
+ <dt>{{domxref("HTMLButtonElement.type")}}</dt>
+ <dd>: <span class="tlid-translation translation"><span title="">Est un {{domxref ("DOMString")}} indiquant le comportement du bouton.</span> <span title="">C'est un attribut énuméré avec les valeurs possibles suivantes:</span></span>
+ <ul>
+  <li><code>"submit"</code>: <span class="tlid-translation translation"><span title="">Le bouton soumet le formulaire.</span> <span title="">Il s'agit de la valeur par défaut si l'attribut n'est pas spécifié, {{HTMLVersionInline (5)}} ou s'il est modifié dynamiquement en une valeur vide ou non valide.</span></span></li>
+  <li><code>"reset"</code>: <span class="tlid-translation translation"><span title="">Le bouton réinitialise le formulaire.</span></span></li>
+  <li><code>"button"</code>: <span class="tlid-translation translation"><span title="">Le bouton ne fait rien.</span></span></li>
+  <li><code>"menu"</code>: <span class="tlid-translation translation"><span title="">Le bouton affiche un menu.</span> <span title="">{{experimental_inline}}</span></span></li>
+ </ul>
+ </dd>
+ <dt>{{domxref("HTMLButtonElement.validationMessage")}} {{readonlyInline}}</dt>
+ <dd><span class="tlid-translation translation"><span title="">Est un {{domxref ("DOMString")}} représentant le message localisé décrivant les contraintes de validation que le contrôle ne satisfait pas (le cas échéant).</span> <span title="">Cet attribut est la chaîne vide si le contrôle n'est pas candidat à la validation de contrainte (willValidate est false) ou s'il respecte ses contraintes.</span></span></dd>
+ <dt>{{domxref("HTMLButtonElement.validity")}} {{readonlyInline}}</dt>
+ <dd><span class="tlid-translation translation"><span title="">Est un {{domxref ("ValidityState")}} représentant les états de validité dans lesquels se trouve ce bouton.</span></span></dd>
+ <dt>{{domxref("HTMLButtonElement.value")}}</dt>
+ <dd><span class="tlid-translation translation"><span title="">Est un {{domxref ("DOMString")}} représentant la valeur de contrôle de formulaire actuelle du bouton.</span></span></dd>
+ <dt>{{domxref("HTMLButtonElement.willValidate")}} {{readonlyInline}}</dt>
+ <dd><span class="tlid-translation translation"><span title="">Est un {{domxref ("Boolean")}} indiquant si le bouton est candidat à la validation de contrainte.</span> <span title="">Il est</span></span>  <code>false</code> <span class="tlid-translation translation"><span title="">si des conditions l'empêchent de valider la contrainte</span></span> .</dd>
+</dl>
+
+<h2 id="Les_méthodes"><span class="tlid-translation translation"><span title="">Les méthodes</span></span></h2>
+
+<p><span class="tlid-translation translation"><span title="">Hérite des méthodes de son parent, {{domxref ("HTMLElement")}}.</span></span></p>
+
+<table class="standard-table" style="height: 239px; width: 1383px;">
+ <thead>
+  <tr>
+   <th scope="col">Nom</th>
+   <th scope="col"><span class="tlid-translation translation"><span title="">Type de retour</span></span></th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>checkValidity()</code></td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>
+    <p><span class="tlid-translation translation"><span title="">Non pris en charge pour les éléments de bouton.</span></span></p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>setCustomValidity(in DOMString error)</code></p>
+   </td>
+   <td><code>void</code></td>
+   <td><span class="tlid-translation translation"><span title="">Non pris en charge pour les éléments de bouton.</span></span></td>
+  </tr>
+ </tbody>
+</table>
+
+<p><span class="tlid-translation translation"><span title="">Avec un navigateur basé sur Gecko, utilisez la pseudo-classe {{cssxref (": - moz-submit-invalid")}} pour styler les boutons de soumission en fonction de la validation d'un formulaire.</span></span></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('HTML WHATWG', "forms.html#the-button-element", "HTMLButtonElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td><span class="tlid-translation translation"><span title="">L'attribut suivant a été ajouté</span></span> : <code>menu</code>.<br>
+    <span class="tlid-translation translation"><span title="">L'attribut</span></span>  <code>type</code> <span class="tlid-translation translation"><span title="">peut prendre une valeur supplémentaire</span></span> , <code>"menu"</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "forms.html#the-button-element", "HTMLButtonElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td><span class="tlid-translation translation"><span title="">Les attributs</span></span>  <code>tabindex</code> et <code>accesskey</code>,  <span class="tlid-translation translation"><span title="">sont maintenant définis sur</span></span> {{domxref("HTMLElement")}}.<br>
+    <span class="tlid-translation translation"><span title="">Les attributs suivants ont été ajoutés</span></span> : <code>autofocus</code>, <code>formAction</code>, <code>formEnctype</code>, <code>formMethod</code>, <code>formNoValidate</code>, <code>formTarget</code>, <code>labels</code>, <code>validity</code>, <code>validationMessage</code>, and <code>willValidate</code>.<br>
+    <span class="tlid-translation translation"><span title="">Les méthodes suivantes ont été ajoutées</span></span> : <code>checkValidity()</code>, <code>setCustomValidity()</code>.<br>
+    The <code>type</code> attribute is no more read-only.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-34812697', 'HTMLButtonElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td><span class="tlid-translation translation"><span title="">Aucun changement de</span></span>  {{SpecName("DOM1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-34812697', 'HTMLButtonElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>. <span class="tlid-translation translation"><span title="">Définition initiale</span></span></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs"><span class="tlid-translation translation"><span title="">Compatibilité des navigateurs</span></span></h2>
+
+<div class="hidden"><span class="tlid-translation translation"><span title="">Le tableau de compatibilité sur cette page est généré à partir de données structurées.</span> <span title="">Si vous souhaitez contribuer aux données, veuillez consulter</span></span>  <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> <span class="tlid-translation translation"><span title="">et envoyez-nous une </span></span>requête .</div>
+
+<p>{{Compat("api.HTMLButtonElement")}}</p>
+
+<h2 id="Voir_également"><span class="tlid-translation translation"><span title="">Voir également</span></span></h2>
+
+<ul>
+ <li><span class="tlid-translation translation"><span title="">Élément HTML implémentant cette interface</span></span> : {{HTMLElement("button")}}</li>
+</ul>
diff --git a/files/fr/web/api/htmlbuttonelement/labels/index.html b/files/fr/web/api/htmlbuttonelement/labels/index.html
new file mode 100644
index 0000000000..463b72f021
--- /dev/null
+++ b/files/fr/web/api/htmlbuttonelement/labels/index.html
@@ -0,0 +1,66 @@
+---
+title: HTMLButtonElement.labels
+slug: Web/API/HTMLButtonElement/labels
+tags:
+  - API
+  - DOM
+  - Propriété
+translation_of: Web/API/HTMLButtonElement/labels
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La propriété en lecture seule <code><strong>HTMLButtonElement.labels</strong></code> renvoie une {{domxref("NodeList")}} (<em>liste de noeuds</em>) des éléments {{HTMLElement("label")}} (<em>étiquette</em>) associés avec l'élément {{HTMLElement("button")}} (<em>bouton</em>).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <var>labelElements</var> = <var>button</var>.labels;
+</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une {{domxref("NodeList")}} contenant les éléments <code>&lt;label&gt;</code> associés avec l'élément <code>&lt;button&gt;</code>.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;label id="label1" for="test"&gt;Label 1&lt;/label&gt;
+&lt;button id="test"&gt;Button&lt;/button&gt;
+&lt;label id="label2" for="test"&gt;Label 2&lt;/label&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">window.addEventListener("DOMContentLoaded", function() {
+  const button = document.getElementById("test");
+  for(var i = 0; i &lt; button.labels.length; i++) {
+    console.log(button.labels[i].textContent); // "Label 1" et "Label 2"
+  }
+});</pre>
+
+<p>{{EmbedLiveSample("Example", "100%", 30)}}</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">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "forms.html#dom-lfe-labels", "labels")}}</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.HTMLButtonElement.labels")}}</p>
diff --git a/files/fr/web/api/htmlcanvaselement/getcontext/index.html b/files/fr/web/api/htmlcanvaselement/getcontext/index.html
new file mode 100644
index 0000000000..142044f6bd
--- /dev/null
+++ b/files/fr/web/api/htmlcanvaselement/getcontext/index.html
@@ -0,0 +1,290 @@
+---
+title: HTMLCanvasElement.getContext()
+slug: Web/API/HTMLCanvasElement/getContext
+tags:
+  - API
+  - Canevas
+  - HTMLCanvasElement
+  - Méthode
+  - Reference
+translation_of: Web/API/HTMLCanvasElement/getContext
+---
+<div>{{APIRef("Canvas API")}}</div>
+
+<p>La méthode <strong><code>HTMLCanvasElement.getContext()</code></strong> retourne un contexte de dessin sur le canevas, ou {{jsxref("null")}} si l'identificateur de contexte n'est pas supporté.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var><em>canvas</em>.getContext(typeDeC<em>ontexte, attributsDeContexte</em>);</var>
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>typeDeContexte</dt>
+ <dd>Est un {{domxref("DOMString")}} contenant l'identifcateur de contexte définissant le contexte de dessin associé au canevas. Les valeurs possibles sont :
+ <ul>
+  <li><code>"2d</code>", conduisant à la création d'un objet {{domxref("CanvasRenderingContext2D")}} représentant un contexte de représentation bi-dimensionnel.</li>
+  <li><code>"webgl"</code> (ou <code>"experimental-webgl"</code>) pour créer un objet {{domxref("WebGLRenderingContext")}} représentant un contexte de représentation tri-dimensionnel. Ce contexte est seulement disponible sur les navigateurs implémentant la version 1 de <a href="https://developer.mozilla.org/en-US/docs/Web/WebGL">WebGL</a> (OpenGL ES 2.0).</li>
+  <li>"<code>webgl2</code>" pour créer un objet {{domxref("WebGL2RenderingContext")}} représentant un contexte de représentation tri-dimensionnel. Ce contexte est seulement disponible sur les navigateurs implémentant la version 2 de <a href="https://developer.mozilla.org/en-US/docs/Web/WebGL">WebGL</a> (OpenGL ES 3.0). {{experimental_inline}}.</li>
+  <li><code>"bitmaprenderer"</code> pour créer un {{domxref("ImageBitmapRenderingContext")}} ne fournissant que la fonctionnalité de remplacement du contenu du canevas par une {{domxref("ImageBitmap")}} donnée.</li>
+ </ul>
+
+ <p>Note : l'identificateur "<code>experimental-webgl</code>" est utilisé dans les nouvelles implémentations de WebGL. Ces implémentations n'ont pas encore obtenu la conformité à la suite de test, ou l'emploi des pilotes graphiques sur la plateforme n'est pas encore stable. Le <a href="https://www.khronos.org/">Khronos Group</a> certifie les implémentations WebGL sous certaines <a href="https://www.khronos.org/registry/webgl/sdk/tests/CONFORMANCE_RULES.txt">règles de conformité</a>.</p>
+ </dd>
+ <dt><code>attributsDeContexte</code></dt>
+ <dd>
+ <p>Vous pouvez utiliser plusieurs attributs de contexte quand vous créez votre contexte de représentation, par exemple :</p>
+
+ <pre class="brush: js">canvas.getContext('webgl',
+                 { antialias: false,
+                   depth: false });</pre>
+ attributs de contexte 2d :
+
+ <ul>
+  <li><strong><code>alpha </code></strong>: booléen indiquant que le canevas contient un canal alpha. Si positionné à <code>false</code>, le navigateur saura ainsi que l'arrière-plan est toujours opaque, ce qui peut alors accélérer le dessin de contenus et d'images transparents.</li>
+  <li>{{non-standard_inline}} (Gecko seulement) <strong><code>willReadFrequently </code></strong>: booléen indiquant si de nombreuses opérations de relecture sont prévues ou non. Cela forcera l'utilisation d'un canevas 2D logiciel (au lieu d'un canevas accéléré matériellement) et peut faire économiser de la mémoire lors d'appels fréquents à {{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}}. Cette option est seulement disponible si l'indicateur <code>gfx.canvas.willReadFrequently.enable</code> est positionné à <code>true</code> (ce qui, par défaut, est seulement le cas pour B2G/Firefox OS).</li>
+  <li>{{non-standard_inline}} (Blink seulement) <strong><code>storage </code></strong>: chaîne indiquant quel stockage est utilisé ("persistent" par défaut).</li>
+ </ul>
+ attributs de contexte WebGL :
+
+ <ul>
+  <li><strong><code>alpha </code></strong>: booléen indiquant que le canevas contient un tampon alpha.</li>
+  <li><strong><code>depth </code></strong>: booléen indiquant que le tampon de dessin a un tampon de profondeur d'au moins 16 bits.</li>
+  <li><strong><code>stencil </code></strong>: booléen indiquant que le tampon de dessin a un tampon stencil d'au moins 8 bits.</li>
+  <li><strong><code>antialias </code></strong>: booléen indiquant si un anti-aliasing doit être effectué ou non.</li>
+  <li><strong><code>premultipliedAlpha </code></strong>: booléen indiquant que le composeur de page supposera que le tampon de dessin contient des couleurs avec alpha pré-multiplié.</li>
+  <li><strong><code>preserveDrawingBuffer </code></strong>: si la valeur est is true, les tampons ne seront pas effacés et conserveront leurs valeurs jusqu'à ce qu'elles soient effacées ou réécrites par l'auteur.</li>
+  <li>
+   <p><code><strong>failIfMajorPerformanceCaveat</strong></code><strong><code> </code></strong>: booléen indiquant qu'un contexte sera créé si la performance du système est faible.</p>
+  </li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée :</h3>
+
+<p>Un {{domxref("RenderingContext")}}, qui est soit un</p>
+
+<ul>
+ <li>{{domxref("CanvasRenderingContext2D")}} pour <code>"2d"</code>,</li>
+ <li>{{domxref("WebGLRenderingContext")}} pour <code>"webgl"</code> et <code>"experimental-webgl"</code>,</li>
+ <li>{{domxref("WebGL2RenderingContext")}} pour <code>"webgl2"</code> ou</li>
+ <li>{{domxref("ImageBitmapRenderingContext")}} pour <code>"bitmaprenderer"</code>.</li>
+</ul>
+
+<p>Si le <em>typeDeContexte</em> ne correspond pas à un contexte de dessin possible, <code>null</code> est retourné.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Étant donné l'élément {{HTMLElement("canvas")}} :</p>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="300" height="300"&gt;&lt;/canvas&gt;
+</pre>
+
+<p>vous pouvez obtenir un contexte 2d du canevas grâce au code suivant :</p>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+console.log(ctx); // CanvasRenderingContext2D { ... }
+</pre>
+
+<p>Vous avez alors le <a href="/en-US/docs/Web/API/CanvasRenderingContext2D">contexte 2D de représentation</a> pour un canevas, et vous pouvez dessiner à l'intérieur.</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('HTML WHATWG', "scripting.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Pas de changement depuis l'instantané le plus récent, {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "scripting-1.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Instantané du {{SpecName('HTML WHATWG')}} contenant la définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support de base (contexte 2d)</td>
+   <td>{{CompatChrome(4)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
+   <td>{{CompatIE(9)}}</td>
+   <td>{{CompatOpera(9)}}</td>
+   <td>{{CompatSafari(3.1)}}</td>
+  </tr>
+  <tr>
+   <td>Contexte <code>webgl</code></td>
+   <td>{{CompatChrome(9)}}<sup>[1]</sup><br>
+    {{CompatChrome(33)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop('1.9.2')}}<sup>[1]</sup><br>
+    {{CompatGeckoDesktop('24')}}</td>
+   <td>11.0<sup>[2]</sup></td>
+   <td>9.0<sup>[3]</sup></td>
+   <td>5.1<sup>[2]</sup></td>
+  </tr>
+  <tr>
+   <td>Contexte <code>webgl2</code></td>
+   <td>{{CompatChrome(56)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop('25')}}<sup>[4]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Attribut de contexte <code>alpha </code>2d</td>
+   <td>32</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(30)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>A</code>ttribut <code>failIfMajorPerformanceCaveat</code></p>
+   </td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(41)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Contexte bitmaprenderer</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(46)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome pour 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>Support de base (contexte 2d)</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.9.2")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Contexte <code>webgl</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[2]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Contexte <code>webgl2</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Attribut de contexte <code>alpha </code>2d</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(30)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>A</code>ttribut <code>failIfMajorPerformanceCaveat</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(41)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Contexte bitmaprenderer</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(46)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Chrome 9 et Gecko 1.9.2 l'implémentaient initialement comme <code>-webgl</code> <code>expérimental</code>. Depuis Chrome 33 et Gecko 24, ils l'implémentent comme <code>webgl</code> standard.</p>
+
+<p>[2] Internet Explorer 11, WebKit 5.1 et Firefox Mobile l'implémentaient comme <code>-webgl</code> <code>expérimental</code>.</p>
+
+<p>[3] Opera 9 l'implémentait comme <code>-webgl</code> <code>expérimental</code> via une préférence utilisateur, dans la version 15.0, la préférence utilisateur a été supprimée.</p>
+
+<p>[4] Gecko 25 l'implémentait comme "<code>-webgl2</code> <code>expérimental</code>" via la préférence utilisateur <code>webgl.enable-prototype-webgl2</code>. A partir de Gecko 42, la chaîne "webgl2" est utilisée via la même préférence, et "experimental-webgl2" n'est plus accepté.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface la définissant, {{domxref("HTMLCanvasElement")}}.</li>
+ <li>{{domxref("OffscreenCanvas.getContext()")}}.</li>
+ <li>Contextes de représentation disponibles : {{domxref("CanvasRenderingContext2D")}}, {{domxref("WebGLRenderingContext")}} et {{domxref("WebGL2RenderingContext")}} et {{domxref("ImageBitmapRenderingContext")}}.</li>
+</ul>
diff --git a/files/fr/web/api/htmlcanvaselement/height/index.html b/files/fr/web/api/htmlcanvaselement/height/index.html
new file mode 100644
index 0000000000..f5bc9c8e2a
--- /dev/null
+++ b/files/fr/web/api/htmlcanvaselement/height/index.html
@@ -0,0 +1,77 @@
+---
+title: HTMLCanvasElement.height
+slug: Web/API/HTMLCanvasElement/height
+tags:
+  - API
+  - Canvas
+  - HTMLCanvasElement
+  - Propriété
+translation_of: Web/API/HTMLCanvasElement/height
+---
+<div>
+<div>
+<div>{{APIRef("Canvas API")}}</div>
+</div>
+</div>
+
+<p>La propriété <strong><code><span>HTMLCanvasElement.height</span></code></strong> est un entier positif reflétant l'attribut HTML {{htmlattrxref("height", "canvas")}} de l'élément {{HTMLElement("canvas")}} mesuré en pixels CSS. Quand cet attribut n'est pas spécifié, ou si on lui affecte une valeur invalide, telle que négative, la valeur par défaut de <code>150</code> is utilisée.</p>
+
+<p>C'est l'une des deux propriétés, l'autre étant {{domxref("HTMLCanvasElement.width")}}, qui contrôlent la taille du canevas.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>var <em>pxl</em> = <em>canvas</em></var>.height;
+<em>canvas</em>.height = <em>pxl</em>;
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Étant donné cet élément {{HTMLElement("canvas")}} :</p>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="300" height="300"&gt;&lt;/canvas&gt;
+</pre>
+
+<p>vous pouvez obtenir la hauteur du canevas avec le code suivant :</p>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+console.log(canvas.height); // 300
+</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', "scripting.html#attr-canvas-height", "HTMLCanvasElement.height")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Pas de changement depuis l'instantané le plus récent, {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "scripting-1.html#attr-canvas-height", "HTMLCanvasElement.height")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "scripting-1.html#attr-canvas-height", "HTMLCanvasElement.height")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Instantané du {{SpecName('HTML WHATWG')}} contenant la définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("api.HTMLCanvasElement.height")}}</p>
+<h2 id="See_Also" name="See_Also">Voir aussi</h2>
+
+<ul>
+ <li>L'interface la définissant, {{domxref("HTMLCanvasElement")}}.</li>
+ <li>L'autre propriété contrôlant la taille du canevas, {{domxref("HTMLCanvasElement.width")}}.</li>
+</ul>
diff --git a/files/fr/web/api/htmlcanvaselement/index.html b/files/fr/web/api/htmlcanvaselement/index.html
new file mode 100644
index 0000000000..d87b8022f5
--- /dev/null
+++ b/files/fr/web/api/htmlcanvaselement/index.html
@@ -0,0 +1,361 @@
+---
+title: HTMLCanvasElement
+slug: Web/API/HTMLCanvasElement
+tags:
+  - Canvas
+translation_of: Web/API/HTMLCanvasElement
+---
+<div>{{ApiRef}}</div>
+
+<p>L'interface <strong><code><span>HTMLCanvasElement</span></code></strong> fournit un ensemble de propriétés et de méthodes pour manipuler la disposition et la représentation des éléments canvas. L'interface <code>HTMLCanvasElement</code> hérite également des propriétés et des méthodes de l'interface {{domxref("HTMLElement")}}.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Propriétés hérités de son parent, </em><em>{{domxref("HTMLElement")}}.</em></p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Nom</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>height</code></td>
+   <td><code>unsigned long</code></td>
+   <td>Représente l'attribut HTML {{htmlattrxref("height", "canvas")}}, qui spécifie la hauteur de l'espace des coordonnées en pixels CSS.</td>
+  </tr>
+  <tr>
+   <td><code>width</code></td>
+   <td><code>unsigned long</code></td>
+   <td>Représente l'attribut HTML {{htmlattrxref("width", "canvas")}}, qui spécifie la largeur de l'espace des coordonnées en pixels CSS.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Méthodes héritées de son parent, </em><em>{{domxref("HTMLElement")}}.</em></p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Nom &amp; arguments</th>
+   <th scope="col">Résultat</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>getContext(in {{domxref("DOMString")}} contextId)</code></td>
+   <td>{{domxref("RenderingContext")}}</td>
+   <td>Renvoie un contexte de dessin sur le canvas, ou null si l'ID de contexte n'est pas supporté. Un contexte de dessin vous permet de dessiner sur le canvas. Appeler getContext avec <code>"2d"</code> renvoie un object {{domxref("CanvasRenderingContext2D")}}, alors que l'appeler avec <code>"experimental-webgl"</code> (ou <code>"webgl"</code>) renvoie un objet {{domxref("WebGLRenderingContext")}} . Ce dernier contexte n'est disponible que dans les navigateur qui implémentent <a href="/en-US/docs/Web/WebGL">WebGL</a>.</td>
+  </tr>
+  <tr>
+   <td><code>supportsContext()</code> {{experimental_inline}}</td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>Renvoie une valeur {{domxref("Boolean")}} indiquant si le contexte donné est supporté par ce canvas.</td>
+  </tr>
+  <tr>
+   <td><em><code>setContext()</code></em> {{experimental_inline}}</td>
+   <td><code>void</code></td>
+   <td>Chnage de contexte de l'élément en rapport avec celui fourni.</td>
+  </tr>
+  <tr>
+   <td><code>transferControlToProxy()</code> {{experimental_inline}}</td>
+   <td>{{domxref("CanvasProxy")}}</td>
+   <td>Retourne un mandataire pour autoriser le canvas à être utilisé dans un autre {{domxref("Worker")}}.</td>
+  </tr>
+  <tr>
+   <td><code>toDataURL</code>(in optional {{domxref("DOMString")}} type, in any ...args)</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Renvoie une <code>data:</code> URL contenant une représentation de l'image au format spécifié par l'argument <code>type</code> (PNG par défaut). L'image renvoyée est en 96dpi.
+    <ul>
+     <li>Si la hauteur ou la largeur du canvas est <code>0</code>, <code>"data:,</code>" représentant une chaîne vide, est renvoyée.</li>
+     <li>Si le format demandé n'est pas <code>image/png</code>, mais que la valeur renvoyée commence par <code>data:image/png</code>, alors le format demandé n'est pas supporté.</li>
+     <li>Chrome supporte le format <code>image/webp</code>.</li>
+     <li>Si le format demandé est <code>image/jpeg </code>ou <code>image/webp</code>, alors le second argument, s'il est compris entre <code>0.0</code> et <code>1.0</code>, est considéré comme une indication de la qualité d'image ; si le second argument est n'importe quoi d'autre, la valeur par défaut pour la qualité est utilisé. Les autres arguments sont ignorés.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td><code>toDataURLHD()</code>{{experimental_inline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Renvoie une <code>data:</code> URL contenant une représentation de l'image au format spécifié par <code>type</code> (PNG par défaut). L'image renvoyée est à la résolution native du canvas.
+    <ul>
+     <li>Si la hauteur ou la largeur du canvas est <code>0</code>, <code>"data:,</code>" représentant une chaîne vide, est renvoyée.</li>
+     <li>Si le format demandé n'est pas <code>image/png</code>, mais que la valeur renvoyée commence par <code>data:image/png</code>, alors le format demandé n'est pas supporté.</li>
+     <li>Chrome supporte le format <code>image/webp</code>.</li>
+     <li>Si le format demandé est <code>image/jpeg </code>ou <code>image/webp</code>, alors le second argument, s'il est compris entre <code>0.0</code> et <code>1.0</code>, est considéré comme une indication de la qualité d'image ; si le second argument est n'importe quoi d'autre, la valeur par défaut pour la qualité est utilisé. Les autres arguments sont ignorés.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td><code>toBlob</code>(in FileCallback callback, in optional {{domxref("DOMString")}} type, in any ...args)</td>
+   <td><code>void</code></td>
+   <td>Renvoie un objet {{domxref("Blob")}} représentant l'image contenue dans le canvas ; ce fichier peut être mis en cache sur le disque ou stocké en mémoire au choix du navigateur. Si <code>type</code> n'est pas précisé, le format de l'image est <code>image/png</code>. L'image renvoyée est en 96dpi.</td>
+  </tr>
+  <tr>
+   <td><code>toBlobHD</code>(in FileCallback callback, in optional {{domxref("DOMString")}} type, in any ...args) {{experimental_inline}}</td>
+   <td><code>void</code></td>
+   <td>Renvoie un objet {{domxref("Blob")}} représentant l'image contenue dans le canvas ; ce fichier peut être mis en cache sur le disque ou stocké en mémoire au choix du navigateur. Si <code>type</code> n'est pas précisé, le format de l'image est <code>image/png</code>. L'image renvoyée est à la résolution native du canvas.</td>
+  </tr>
+  <tr>
+   <td><code>mozGetAsFile</code>(in {{domxref("DOMString")}} name, in optional {{domxref("DOMString")}} type) {{non-standard_inline}}</td>
+   <td>{{domxref("File")}}</td>
+   <td>Renvoie un objet {{domxref("File")}} représentant l'image contenue dans le canvas ; ce fichier est en mémoire avec le <code>nom</code> précisé. Si <code>type</code> n'est pas précisé, le fotmat de l'image est <code>image/png</code>.</td>
+  </tr>
+  <tr>
+   <td><code>void mozFetchAsStream(in {{interface("nsIInputStreamCallback")}} callback, [optional] in DOMString type)</code> {{non-standard_inline}}</td>
+   <td><code>void</code></td>
+   <td>Crée un nouveau flux d'entrée qui, quand il est prêt, fournit le contenu du canvas en tant que données d'image. Quand le nouveau flux est prêt, la fonction de rappel spécifiée {{ifmethod("nsIInputStreamCallback", "onInputStreamReady")}} est appelée. Si <code>type</code> n'est pas précisée, Le format de l'image est <code>image/png.</code>
+    <div class="note"><strong>Note:</strong> Cette méthode ne peut être utilisée que depuis le code chrome.</div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Example_Obtenir_la_data-url_du_canvas">Example: Obtenir la data-url du canvas</h3>
+
+<p>D'abord, dessinez dans le canvas, ensuite appelez <code>canvas.toDataURL()</code> pour obtenir la data: URL du canvas.</p>
+
+<pre class="brush: js">function test() {
+ var canvas = document.getElementById("canvas");
+ var url = canvas.toDataURL();
+
+ var nouvelleImg = document.createElement("img");
+ nouvelleImg.src = url;
+ document.body.appendChild(nouvelleImg);
+}
+</pre>
+
+<h3 id="Example_Obtenir_un_fichier_représentant_le_canvas">Example: Obtenir un fichier représentant le canvas</h3>
+
+<p>Une fois que vous avez dessiné du contenu dans un canvas, vous pouvez le convertir dans un fichier avec l'un des formats supportés. Par exemple, l'extrait de code ci-dessous récupère l'image contenue dans l'élément canvas avec l'ID "canvas", en effectue une copie au format PNG, puis ajoute un nouvel élément {{HTMLElement("img")}} au document, dont l'image source est celle créée en utilisant le canvas.</p>
+
+<pre class="brush: js">function test() {
+  var canvas = document.getElementById("canvas");
+  canvas.toBlob(function(blob) {
+    var nouvelleImg = document.createElement("img"),
+        url = URL.createObjectURL(blob);
+    nouvelleImg.onload = function() {
+      // Il n'est plus nécessaire de lire le blob, il est donc révoqué
+      URL.revokeObjectURL(url);
+    };
+    nouvelleImg.src = url;
+    document.body.appendChild(nouvelleImg);
+  });
+}</pre>
+
+<p>Vous pouvez utiliser cette technique en association avec les événemments de souris pour effectuer un changement d'images dynamique (niveau de gris et couleur dans cet exemple) :</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
+&lt;title&gt;MDC Example&lt;/title&gt;
+&lt;script type="text/javascript"&gt;
+function afficherImageCouleur() {
+  this.style.display = "none";
+  this.nextSibling.style.display = "inline";
+}
+
+function afficherImageGrise() {
+  this.previousSibling.style.display = "inline";
+  this.style.display = "none";
+}
+
+function supprimerCouleurs() {
+  var aImages = document.getElementsByClassName("grayscale"),
+      nImgsLong = aImages.length,
+      oCanvas = document.createElement("canvas"),
+      oCtx = oCanvas.getContext("2d");
+  for (var nLargeur, nHauteur, oImgData, oImgGrise, nPixel, aPix, nPixLong, nImgId = 0; nImgId &lt; nImgsLong; nImgId++) {
+    oImgCouleur = aImages[nImgId];
+    nLargeur = oImgCouleur .offsetWidth;
+    nHauteur = oImgCouleur .offsetHeight;
+    oCanvas.width = nWidth;
+    oCanvas.height = nHeight;
+    oCtx.drawImage(oImgCouleur , 0, 0);
+    oImgData = oCtx.getImageData(0, 0, nLargeur, nHauteur);
+    aPix = oImgData.data;
+    nPixLong = aPix.length;
+    for (nPixel = 0; nPixel &lt; nPixLen; nPixel += 4) {
+      aPix[nPixel + 2] = aPix[nPixel + 1] = aPix[nPixel] = (aPix[nPixel] + aPix[nPixel + 1] + aPix[nPixel + 2]) / 3;
+    }
+    oCtx.putImageData(oImgData, 0, 0);
+    oImgGrise = new Image();
+    oImg.src = oCanvas.toDataURL();
+    oImgGrise.onmouseover = afficherImageCouleur;
+    oImgCouleur.onmouseout = afficherImageGrise;
+    oCtx.clearRect(0, 0, nLargeur, nHauteur);
+    oImgCouleur.style.display = "none";
+    oImgCouleur.parentNode.insertBefore(oImgGrise , oImgCouleur);
+  }
+}
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body onload="supprimerCouleurs();"&gt;
+&lt;p&gt;&lt;img class="grayscale" src="chagall.jpg" alt="" /&gt;&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Remarquez qu'ici nous créons une image PNG ; si vous ajoutez un second paramètre à l'appel de <code>toBlob()</code>, vous pouvez spécifier le type d'image. Par exemple, pour obtenir l'image au format JPEG :</p>
+
+<pre class="brush: js"> canvas.toBlob(function(blob){...}, "image/jpeg", 0.95); // JPEG avec une qualité de 95%</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', "embedded-content-0.html#the-canvas-element", "HTMLCanvasElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>La méthode <code>getContext()</code> retourne un {{domxref("RenderingContext")}} au lieu d'un <code>object</code> opaque.<br>
+    Les méthodes <code>supportsContext()</code>, <code>setContext()</code>, <code>transferControlToProxy()</code>, <code>toDataURLHD()</code>, <code>toBlobURLHD()</code> ont été ajoutées.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "the-canvas-element.html#the-canvas-element", "HTMLCanvasElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Support_par_les_navigateurs">Support par les navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Fonctionnalité de base</td>
+   <td>4.0</td>
+   <td>{{CompatGeckoDesktop('3.6')}}</td>
+   <td>9.0</td>
+   <td>9.0 [1]</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td><code>toBlob()</code></td>
+   <td>{{CompatNo}} (bug <a href="http://crbug.com/67587">67587</a>)</td>
+   <td>{{CompatGeckoDesktop('3.6')}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}} (bug <a href="https://bugs.webkit.org/show_bug.cgi?id=71270">71270</a>)</td>
+  </tr>
+  <tr>
+   <td><code>toBlobHD()</code>, <code>toDataURLHD()</code>, <code>supportsContext()</code>, <code>setContext()</code>, <code>transferControlToProxy()</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mozGetAsFile()</code> {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop('2')}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mozFetchAsStream()</code> {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop('13')}}</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>Fonctionnalité</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>Fonctionnalité de base</td>
+   <td>2.1</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.0 [1]</td>
+   <td>3.2</td>
+  </tr>
+  <tr>
+   <td><code>toBlob()</code></td>
+   <td>{{CompatNo}} (bug <a href="http://crbug.com/67587">67587</a>)</td>
+   <td>{{CompatNo}} (bug <a href="http://crbug.com/67587">67587</a>)</td>
+   <td>{{CompatGeckoMobile('3.6')}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}} (bug <a href="https://bugs.webkit.org/show_bug.cgi?id=71270">71270</a>)</td>
+  </tr>
+  <tr>
+   <td><code>toBlobHD()</code>, <code>toDataURLHD()</code>, <code>supportsContext()</code>, <code>setContext()</code>, <code>transferControlToProxy()</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mozGetAsFile()</code> {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile('2')}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mozFetchAsStream()</code> {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile('13')}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Opera Mini 5.0 et supérieur ont un support partiel.</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>Elément HTML implementant cette interface : {{HTMLElement("canvas")}}.</li>
+</ul>
diff --git a/files/fr/web/api/htmlcollection/index.html b/files/fr/web/api/htmlcollection/index.html
new file mode 100644
index 0000000000..ef8d29878a
--- /dev/null
+++ b/files/fr/web/api/htmlcollection/index.html
@@ -0,0 +1,94 @@
+---
+title: HTMLCollection
+slug: Web/API/HTMLCollection
+tags:
+  - API
+  - DOM
+  - Reference
+translation_of: Web/API/HTMLCollection
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p>L'interface <strong>HTMLCollection</strong> est constituée d'une collection générique (à la manière d'un tableau similaire à <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Fonctions/arguments">arguments</a>) d'éléments (dans l'ordre du document) et offre des méthodes et des propriétés pour sélectionner ces éléments dans la liste.</p>
+
+<p><strong>Note:</strong> Cette interface est appelée <code>HTMLCollection</code> pour des raisons historiques (avant DOM4, les collections implémentant cette interface pouvaient uniquement êtres constituées d'élements HTML).</p>
+
+<p>Une HTMLCollection dans le DOM HTML est automatiquement mise à jour quand le document concerné change.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("HTMLCollection.length")}} {{readonlyInline}}</dt>
+ <dd>Retourne le nombre d'éléments de la collection.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("HTMLCollection.item()")}}</dt>
+ <dd>Retourne le nœud spécifique à l'<code>index</code> basé sur zéro donné dans la liste. Retourne <code>null</code> si l'<code>index</code> est hors de portée.</dd>
+ <dt>{{domxref("HTMLCollection.namedItem()")}}</dt>
+ <dd>Retourne le nœud spécifique dont l'ID ou, à défaut, le nom correspond à la chaîne de caractères fournie par <code>name</code>. La recherche par nom est faite seulement en dernier ressort, uniquement en HTML, et seulement si l'élément référencé supporte l'attribut <code>name</code>. Retourne <code>null</code> si aucun nœud n'existe pour le nom donné.</dd>
+</dl>
+
+<h2 id="Utilisation_en_JavaScript">Utilisation en JavaScript</h2>
+
+<p><code>HTMLCollection</code> expose aussi directement ses membres comme propriétés, par nom et par index. Les ID HTML peuvent contenir : et . comme caractères valides, ce qui nécessite d'utiliser la notation entre crochets pour accèder aux propriétés. Actuellement, HTMLCollections ne reconnait pas  purement les ID numériques, ce qui provoquerait des conflits avec l'accès de "array-style" , bien qu'HTML5 le permette.</p>
+
+<p>Par exemple, en supposant qu'il y ait un élément <code>&lt;form&gt;</code> <em>(formulaire)</em> dans le document et que son <code>id</code> soit <code>"myForm" </code>:</p>
+
+<pre class="brush: html"><code>var elem1, elem2;
+
+// document.forms est une HTMLCollection
+
+elem1 = document.forms[0];
+elem2 = document.forms.item(0);
+
+alert(elem1 === elem2); // affiche : "true" <em>(vrai)</em>
+
+elem1 = document.forms.myForm;
+elem2 = document.forms.namedItem("myForm");
+
+alert(elem1 === elem2); // affiche : "true"
+
+elem1 = document.forms["named.item.with.periods"];</code></pre>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Certains navigateurs se comportent différemment quand il y a plus d'un élément correspondant à la chaîne utilisée comme index (ou l'argument <code>namedItem</code>). Firefox 8 se comporte comme spécifié dans DOM 2 et DOM4, en retournant le premier élément correspondant. Les navigateurs WebKit et Internet Explorer, dans ce cas, retournent une autre <code>HTMLCollection</code> et Opera retourne un {{domxref("NodeList")}} de tous les éléments correspondants.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#htmlcollection', 'HTMLCollection')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-75708506', 'HTMLCollection')}}</td>
+   <td>{{ Spec2('DOM2 HTML') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-75708506', 'HTMLCollection')}}</td>
+   <td>{{ Spec2('DOM1') }}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("NodeList")}}</li>
+ <li>{{domxref("HTMLFormControlsCollection")}}, {{domxref("HTMLOptionsCollection")}}</li>
+</ul>
diff --git a/files/fr/web/api/htmlcollection/item/index.html b/files/fr/web/api/htmlcollection/item/index.html
new file mode 100644
index 0000000000..d3e10f88c0
--- /dev/null
+++ b/files/fr/web/api/htmlcollection/item/index.html
@@ -0,0 +1,36 @@
+---
+title: HTMLCollection.item
+slug: Web/API/HTMLCollection/item
+translation_of: Web/API/HTMLCollection/item
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p><code>HTMLCollection.item()</code> récupère un élément par sa position.</p>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>index</dt>
+ <dd>La position de l'élement à retourner. Les éléments apparaissent dans une HTMLCollection dans le même ordre que celui du document source.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>L'élement à la position spécifiée, ou null si la position est inférieure à zéro ou supérieure ou égale à la valeur de la propriété <code>length</code>.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>item()</code> retourne un élément numéroté d'une HTMLCollection. En Javascript, il est plus simple de traiter une HTMLCollection comme un tableau et d'utiliser les indexes comme pour les tableaux.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">var c = document.images;  // Ceci est une HTMLCollection.
+var img0 = c.item(0);     // Vous pouvez utiliser la méthode item comme ceci,
+var img1 = c[1];          // Mais cette notation est plus simple et plus commune
+</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("NodeList.item()")}}</li>
+</ul>
diff --git a/files/fr/web/api/htmlcontentelement/getdistributednodes/index.html b/files/fr/web/api/htmlcontentelement/getdistributednodes/index.html
new file mode 100644
index 0000000000..61fc5c2798
--- /dev/null
+++ b/files/fr/web/api/htmlcontentelement/getdistributednodes/index.html
@@ -0,0 +1,100 @@
+---
+title: HTMLContentElement.getDistributedNodes()
+slug: Web/API/HTMLContentElement/getDistributedNodes
+tags:
+  - API
+  - HTML DOM
+  - Référence(2)
+  - Web Components
+translation_of: Web/API/HTMLContentElement/getDistributedNodes
+---
+<p>{{ APIRef("Web Components") }}</p>
+
+<p>La méthode <code><strong>HTMLContentElement.getDistributedNodes()</strong></code> retourne un {{domxref("NodeList")}} statique du {{glossary("distributed nodes")}} associé avec l'élément <code>&lt;content&gt;</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>nodeList</em> = <em>object</em>.getDistributedNodes()
+</pre>
+
+<h2 id="Specifications" name="Specifications">Exemple</h2>
+
+<pre class="brush: js">// Récupère les éléments
+var nodes = myContentObject.getDistributedNodes();</pre>
+
+<h2 id="Specifications" name="Specifications">Spécifications</h2>
+
+<table class="spec-table standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Shadow DOM', '#the-content-element', 'content')}}</td>
+   <td>{{Spec2('Shadow DOM')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>35</td>
+   <td><span style="font-size: 12px; line-height: 18px;">{{CompatGeckoDesktop("28")}}</span> [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>26</td>
+   <td><span style="font-size: 12px; line-height: 18px;">{{CompatNo}}</span><span style="font-size: 14px; line-height: 1.5;"> </span></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>37</td>
+   <td>{{CompatGeckoMobile("28")}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Si le Shadow DOM n'est pas activé dans Firefox, les éléments <code>&lt;content&gt;</code> se comporteront comme des {{domxref("HTMLUnknownElement")}}. Les Shadow DOM ont été ajoutés dans Firefox 28 et sont configurés par un paramètre, <code>dom.webcomponents.enabled</code>, désactivé par défault.</p>
+
+<div class="text-wrap tlid-copy-target">
+<div class="result-shield-container tlid-copy-target"><span class="tlid-translation translation"><span title="">Voir également</span></span></div>
+</div>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/HTMLContentElement">HTMLContentElement</a></li>
+</ul>
diff --git a/files/fr/web/api/htmlcontentelement/index.html b/files/fr/web/api/htmlcontentelement/index.html
new file mode 100644
index 0000000000..9368fb2fd6
--- /dev/null
+++ b/files/fr/web/api/htmlcontentelement/index.html
@@ -0,0 +1,112 @@
+---
+title: HTMLContentElement
+slug: Web/API/HTMLContentElement
+tags:
+  - API
+  - HTML DOM
+  - Interface
+  - Reference
+  - Web Components
+translation_of: Web/API/HTMLContentElement
+---
+<p>{{ APIRef("Web Components") }}</p>
+
+<p>L'interface <code><strong>HTMLContentElement</strong></code> represente un élément HTML {{HTMLElement("content")}}, utilisé dans le <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">Shadow DOM</a>. </p>
+
+<h2 id="Properties" name="Properties">Propriétés</h2>
+
+<p><em>Cette interface hérite des propriétés de {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLContentElement.select")}}</dt>
+ <dd>Une {{domxref("DOMString")}} qui renvoie le {{ htmlattrxref("select", "content") }} d'un attribut HTML. La valeur de retour est une liste de sélecteurs CSS séparés par des virgules. Ils récupèrent le contenu à inserer à la place de l'élément <code>&lt;content&gt;</code>.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Cette interface hérite des methodes de {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLContentElement.getDistributedNodes()")}}</dt>
+ <dd>Retourne un {{domxref("NodeList")}} statique du {{glossary("distributed nodes")}} associé avec l'élément <code>&lt;content&gt;</code>. </dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="spec-table standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Shadow DOM', '#the-content-element', 'content')}}</td>
+   <td>{{Spec2('Shadow DOM')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>35</td>
+   <td><span style="font-size: 12px; line-height: 18px;">{{CompatGeckoDesktop("28")}}</span> [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>26</td>
+   <td><span style="font-size: 12px; line-height: 18px;">{{CompatNo}}</span></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>37</td>
+   <td>{{CompatGeckoMobile("28")}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Si Shadow DOM n'est pas activé sur Firefox, les élements &lt;content&gt; agiront comme des  {{domxref("HTMLUnknownElement")}}. Les Shadow DOM ont été ajoutés à Firefox 28 et sont derrière une configuration <code>dom.webcomponents.enabled</code>, qui est désactivée par défaut.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>L'élement HTML {{HTMLElement("content")}}, qui implémente cette interface.</li>
+ <li><a href="/en-US/docs/Web/Web_Components/Shadow_DOM">Shadow DOM</a></li>
+</ul>
+
+<dl>
+ <dt> </dt>
+</dl>
diff --git a/files/fr/web/api/htmlcontentelement/select/index.html b/files/fr/web/api/htmlcontentelement/select/index.html
new file mode 100644
index 0000000000..c6cdfd1230
--- /dev/null
+++ b/files/fr/web/api/htmlcontentelement/select/index.html
@@ -0,0 +1,101 @@
+---
+title: HTMLContentElement.select
+slug: Web/API/HTMLContentElement/select
+tags:
+  - API
+  - HTML DOM
+  - Property
+  - Référence(2)
+  - Web Components
+translation_of: Web/API/HTMLContentElement/select
+---
+<p>{{ APIRef("Web Components") }}</p>
+
+<p>La propriété <code><strong>HTMLContentElement.select</strong></code> represente l'attribut <code>select</code>. La valeur de retour est une liste de sélecteurs CSS séparés par des espaces. Ils récupèrent le contenu à inserer à la place de l'élément <code>&lt;content&gt;</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>object</em>.select = "<em>CSSselector</em> <em>CSSselector</em> ...";
+</pre>
+
+<h2 id="Specifications" name="Specifications">Exemple</h2>
+
+<pre class="brush: js">// Choisi les éléments &lt;h1&gt; et les elements avec la class "error"
+myContentObject.select = "h1 .error";</pre>
+
+<h2 id="Specifications" name="Specifications">Spécifications</h2>
+
+<table class="spec-table standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Shadow DOM', '#the-content-element', 'content')}}</td>
+   <td>{{Spec2('Shadow DOM')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>35</td>
+   <td><span style="font-size: 12px; line-height: 18px;">{{CompatGeckoDesktop("28")}}</span> [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>26</td>
+   <td><span style="font-size: 12px; line-height: 18px;">{{CompatNo}}</span></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>37</td>
+   <td>{{CompatGeckoMobile("28")}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Si Shadow DOM n'est pas activé sur Firefox, les élements &lt;content&gt; agiront comme des  {{domxref("HTMLUnknownElement")}}. Les Shadow DOM ont été ajoutés à Firefox 28 et sont derrière une configuration <code>dom.webcomponents.enabled</code>, qui est désactivée par défaut.</p>
+
+<div class="text-wrap tlid-copy-target">
+<div class="result-shield-container tlid-copy-target"><span class="tlid-translation translation"><span title="">Voir également</span></span></div>
+</div>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/HTMLContentElement">HTMLContentElement</a></li>
+</ul>
diff --git a/files/fr/web/api/htmldialogelement/close_event/index.html b/files/fr/web/api/htmldialogelement/close_event/index.html
new file mode 100644
index 0000000000..b3708752ef
--- /dev/null
+++ b/files/fr/web/api/htmldialogelement/close_event/index.html
@@ -0,0 +1,116 @@
+---
+title: 'HTMLDialogElement: close event'
+slug: Web/API/HTMLDialogElement/close_event
+tags:
+  - API
+  - DOM HTML
+  - Evènement
+  - HTMLDialogElement
+  - Reference
+  - close
+  - fermeture
+translation_of: Web/API/HTMLDialogElement/close_event
+---
+<p>{{ APIRef() }}</p>
+
+<p><span class="seoSummary">L'événement <strong><code>close</code></strong> est déclenché sur un objet {{domxref ("HTMLDialogElement")}} lorsque la boîte de dialogue qu'il représente a été fermée</span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Bouillonnant</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">Annulable</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("Event")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Propriété du gestionnaire d'événements</th>
+   <td>{{domxref ("GlobalEventHandlers/onclose", "onclose")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_concret">Exemple concret</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;dialog class="example-dialog"&gt;
+  &lt;button class="close" type="reset"&gt;Close&lt;/button&gt;
+&lt;/dialog&gt;
+
+&lt;button class="open-dialog"&gt;Open dialog&lt;/button&gt;
+
+&lt;div class="result"&gt;&lt;/div&gt;</pre>
+
+<div class="hidden">
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">button, div {
+  margin: .5rem;
+}
+</pre>
+</div>
+
+<h4 id="JS">JS</h4>
+
+<pre class="brush: js notranslate">const result = document.querySelector('.result')
+
+const dialog = document.querySelector('.example-dialog')
+dialog.addEventListener('close', (event) =&gt; {
+  result.textContent = 'dialog was closed'
+})
+
+const openDialog = document.querySelector('.open-dialog')
+openDialog.addEventListener('click', () =&gt; {
+  if (typeof dialog.showModal === 'function') {
+    dialog.showModal()
+    result.textContent = ''
+  } else {
+    result.textContent = 'The dialog API is not supported by this browser'
+  }
+})
+
+const closeButton = document.querySelector('.close')
+closeButton.addEventListener('click', () =&gt; {
+  dialog.close()
+})
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{ EmbedLiveSample('Exemple_concret', '100%', '100px') }}</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>{{ SpecName('HTML WHATWG', 'indices.html#event-close', 'close') }}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.HTMLDialogElement.close_event")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>Élément HTML <code><a href="/en-US/docs/Web/HTML/Element/dialog">&lt;dialog&gt;</a></code></li>
+</ul>
diff --git a/files/fr/web/api/htmldialogelement/index.html b/files/fr/web/api/htmldialogelement/index.html
new file mode 100644
index 0000000000..7a5458bf48
--- /dev/null
+++ b/files/fr/web/api/htmldialogelement/index.html
@@ -0,0 +1,148 @@
+---
+title: HTMLDialogElement
+slug: Web/API/HTMLDialogElement
+tags:
+  - API
+  - Experimental
+  - HTML DOM
+  - HTMLDialogElement
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/API/HTMLDialogElement
+---
+<div>{{APIRef("HTML DOM")}}{{SeeCompatTable}}</div>
+
+<p>The <strong><code>HTMLDialogElement</code></strong> interface provides methods to manipulate {{HTMLElement("dialog")}} elements. It inherits properties and methods from the {{domxref("HTMLElement")}} interface.</p>
+
+<p>{{InheritanceDiagram(600, 120)}}</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>Inherits properties from its parent, {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLDialogElement.open")}}</dt>
+ <dd>A {{domxref("Boolean")}} reflecting the {{htmlattrxref("open", "dialog")}} HTML attribute, indicating whether the dialog is available for interaction.</dd>
+ <dt>{{domxref("HTMLDialogElement.returnValue")}}</dt>
+ <dd>A {{domxref("DOMString")}} that sets or returns the return value for the dialog.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>Inherits methods from its parent, {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLDialogElement.close()")}}</dt>
+ <dd>Closes the dialog. An optional {{domxref("DOMString")}} may be passed as an argument, updating the <code>returnValue</code> of the the dialog.</dd>
+ <dt>{{domxref("HTMLDialogElement.show()")}}</dt>
+ <dd>Displays the dialog modelessly, i.e. still allowing interaction with content outside of the dialog.</dd>
+ <dt>{{domxref("HTMLDialogElement.showModal()")}}</dt>
+ <dd>Displays the dialog as a modal, over the top of any other dialogs that might be present. Interaction outside the dialog is blocked.</dd>
+</dl>
+
+<h2 id="Events">Events</h2>
+
+<dl>
+ <dt>{{domxref("HTMLDialogElement/close_event", "close")}}</dt>
+ <dd>Fired when the dialog is closed.<br>
+ Also available via the {{domxref("GlobalEventHandlers/onclose", "onclose")}} property.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>The following example shows a simple button that, when clicked, opens a {{htmlelement("dialog")}} containing a form via the {{domxref("HTMLDialogElement.showModal()")}} function. From there you can click the <em>Cancel</em> button to close the dialog (via the {{domxref("HTMLDialogElement.close()")}} function), or submit the form via the submit button.</p>
+
+<pre class="brush: html notranslate">  &lt;!-- Simple pop-up dialog box, containing a form --&gt;
+  &lt;dialog id="favDialog"&gt;
+    &lt;form method="dialog"&gt;
+      &lt;section&gt;
+        &lt;p&gt;&lt;label for="favAnimal"&gt;Favorite animal:&lt;/label&gt;
+        &lt;select id="favAnimal" name="favAnimal"&gt;
+          &lt;option&gt;&lt;/option&gt;
+          &lt;option&gt;Brine shrimp&lt;/option&gt;
+          &lt;option&gt;Red panda&lt;/option&gt;
+          &lt;option&gt;Spider monkey&lt;/option&gt;
+        &lt;/select&gt;&lt;/p&gt;
+      &lt;/section&gt;
+      &lt;menu&gt;
+        &lt;button id="cancel" type="reset"&gt;Cancel&lt;/button&gt;
+        &lt;button type="submit"&gt;Confirm&lt;/button&gt;
+      &lt;/menu&gt;
+    &lt;/form&gt;
+  &lt;/dialog&gt;
+
+  &lt;menu&gt;
+    &lt;button id="updateDetails"&gt;Update details&lt;/button&gt;
+  &lt;/menu&gt;
+
+  &lt;script&gt;
+    (function() {
+      var updateButton = document.getElementById('updateDetails');
+      var cancelButton = document.getElementById('cancel');
+      var dialog = document.getElementById('favDialog');
+      dialog.returnValue = 'favAnimal';
+
+      function openCheck(dialog) {
+        if(dialog.open) {
+          console.log('Dialog open');
+        } else {
+          console.log('Dialog closed');
+        }
+      }
+
+      // Update button opens a modal dialog
+      updateButton.addEventListener('click', function() {
+        dialog.showModal();
+        openCheck(dialog);
+      });
+
+      // Form cancel button closes the dialog box
+      cancelButton.addEventListener('click', function() {
+        dialog.close('animalNotChosen');
+        openCheck(dialog);
+      });
+
+    })();
+  &lt;/script&gt;</pre>
+
+<div class="note">
+<p><strong>Note</strong>: You can find this example on GitHub as <a href="https://github.com/mdn/dom-examples/blob/master/htmldialogelement-basic/index.html">htmldialogelement-basic</a> (<a href="https://mdn.github.io/dom-examples/htmldialogelement-basic/">see it live also</a>).</p>
+</div>
+
+<h2 id="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', '#htmldialogelement', 'HTMLDialogElement')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.2', 'interactive-elements.html#the-dialog-element', '&lt;dialog&gt;')}}</td>
+   <td>{{Spec2('HTML5.2')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.HTMLDialogElement")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The HTML element implementing this interface: {{ HTMLElement("dialog") }}.</li>
+</ul>
diff --git a/files/fr/web/api/htmldivelement/index.html b/files/fr/web/api/htmldivelement/index.html
new file mode 100644
index 0000000000..0d46821045
--- /dev/null
+++ b/files/fr/web/api/htmldivelement/index.html
@@ -0,0 +1,74 @@
+---
+title: HTMLDivElement
+slug: Web/API/HTMLDivElement
+tags:
+  - API
+  - HTML DOM
+  - Interface
+  - Reference
+translation_of: Web/API/HTMLDivElement
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>L'interface <strong><code>HTMLDivElement</code></strong> fournit certaines propriétés spécifiques (en plus de celles qui proviennent de l'interface {{domxref("HTMLElement")}} via l'héritage) afin de manipuler les éléments {{HtmlElement("div")}}.</p>
+
+<p>{{InheritanceDiagram(600,120)}}</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Cette interface hérite des propriétés de son parent {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLDivElement.align")}} {{obsolete_inline}}</dt>
+ <dd>Une chaîne de caractères {{domxref("DOMString")}} qui représente une propriété à valeur contrainte indiquant l'alignement du contenu de l'élément par rapport à son contexte. Les valeurs possibles pour cette propriété sont <code>"left"</code>, <code>"right"</code>, <code>"justify"</code> et <code>"center"</code>.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Aucune méthode spécifique. Toutes les méthodes sont héritées depuis le parent {{domxref("HTMLElement")}}.</em></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('HTML WHATWG', "#htmldivelement", "HTMLDivElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "grouping-content.html#the-div-element", "HTMLDivElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Aucune modification depuis {{SpecName("DOM2 HTML")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-22445964', 'HTMLDivElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>Aucune modification depuis {{SpecName("DOM1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-22445964', 'HTMLDivElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.HTMLDivElement")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'élément HTML qui implémente cette interface : {{HTMLElement("div")}}.</li>
+</ul>
diff --git a/files/fr/web/api/htmldocument/index.html b/files/fr/web/api/htmldocument/index.html
new file mode 100644
index 0000000000..ff96e73ff6
--- /dev/null
+++ b/files/fr/web/api/htmldocument/index.html
@@ -0,0 +1,16 @@
+---
+title: HTMLDocument
+slug: Web/API/HTMLDocument
+translation_of: Web/API/HTMLDocument
+---
+<p>{{ APIRef("HTML DOM") }}</p>
+
+<p><strong><code>HTMLDocument</code></strong> est une interface abstraite de <a href="/fr-FR/docs/DOM" title="en/DOM">DOM</a> qui fournit un accès aux propriétés spéciales et aux méthodes non présentes par défaut dans un document ordinaire (XML).</p>
+
+<p>Ses méthodes et propriétés sont incluses dans la page {{domxref("document")}} et listées séparément dans leur propre section DOM référencées ci-dessus.</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268" rel="freelink">http://www.w3.org/TR/DOM-Level-2-HTM...ml#ID-26809268</a></li>
+</ul>
diff --git a/files/fr/web/api/htmlelement/beforeinput_event/index.html b/files/fr/web/api/htmlelement/beforeinput_event/index.html
new file mode 100644
index 0000000000..72f9239a17
--- /dev/null
+++ b/files/fr/web/api/htmlelement/beforeinput_event/index.html
@@ -0,0 +1,96 @@
+---
+title: 'HTMLElement: beforeinput event'
+slug: Web/API/HTMLElement/beforeinput_event
+translation_of: Web/API/HTMLElement/beforeinput_event
+---
+<div>{{APIRef}} {{SeeCompatTable}}</div>
+
+<p>L’évènement DOM <strong><code>beforeinput</code></strong> est émis quand la valeur d’un élément {{HTMLElement("input")}}, {{HTMLElement("select")}}, ou {{HTMLElement("textarea")}} est sur le point d’être modifié. L’évènement s’applique également aux éléments ayant l’attribut {{domxref("HTMLElement.contentEditable", "contenteditable")}} actif, et à tout élément quand le {{domxref("Document.designMode", "designMode")}} est activé.</p>
+
+<p>Dans le cas de <code>contenteditable</code> et <code>designMode</code>, la cible de l’évènement est <em>l’hôte d’édition.</em> Si ces propriétés s’appliquent à plusieurs éléments, l’hôte d’édition est le plus proche ancêtre dont le parent n’est pas éditable.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th>Bouillonne</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th>Annulable</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th>Interface</th>
+   <td>{{DOMxRef("InputEvent")}}</td>
+  </tr>
+  <tr>
+   <th>Propriété gestionnaire d’évènement</th>
+   <td>Aucune</td>
+  </tr>
+  <tr>
+   <th>Sync / Async</th>
+   <td>Sync</td>
+  </tr>
+  <tr>
+   <th>Composé</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th>Action par défaut</th>
+   <td>Mettre à jour l’élément DOM</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Cet exemple affiche la valeur de l’élément {{HtmlElement("input")}} juste avant qu’elle soit modifiée.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input placeholder="Saisissez du texte" name="name"/&gt;
+&lt;p id="values"&gt;&lt;/p&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">const input = document.querySelector('input');
+const log = document.getElementById('values');
+
+input.addEventListener('beforeinput', updateValue);
+
+function updateValue(e) {
+  log.textContent = e.target.value;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Examples")}}</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>
+  </tr>
+  <tr>
+   <td>{{SpecName('UI Events', "#event-type-beforeinput", "beforeinput event")}}</td>
+   <td>{{Spec2('UI Events')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">La table de compatibilité sur cette page est générée à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request.</em></div>
+
+<p>{{Compat("api.HTMLElement.beforeinput_event")}}</p>
+
+
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Évènement associé : <code><a href="/en-US/docs/Web/API/HTMLElement/input_event">input</a></code></li>
+</ul>
diff --git a/files/fr/web/api/htmlelement/change_event/index.html b/files/fr/web/api/htmlelement/change_event/index.html
new file mode 100644
index 0000000000..552a6d0e70
--- /dev/null
+++ b/files/fr/web/api/htmlelement/change_event/index.html
@@ -0,0 +1,167 @@
+---
+title: change
+slug: Web/API/HTMLElement/change_event
+tags:
+  - Change
+  - DOM
+  - Event
+  - HTML
+  - Reference
+  - Web
+  - Élément HTML
+translation_of: Web/API/HTMLElement/change_event
+---
+<p>{{APIRef}}</p>
+
+<p>L'événement <strong>change</strong> est déclenché pour les éléments {{HTMLElement("input")}} <em>(entrée)</em>, {{HTMLElement("select")}} <em>(sélection)</em> et {{HTMLElement("textarea")}} <em>(zone de texte)</em> lorsqu'un changement de leur valeur est réalisé par l'utilisateur. Contrairement à l'événement {{event("input")}}, <strong>change</strong> n'est pas nécessairement déclenché pour chaque changement de valeur.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Propagation</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Annulable</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("Event")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Gestionnaire d'événements</th>
+   <td>{{domxref("GlobalEventHandlers/onchange", "onchange")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>En fonction du type d'élément de formulaire modifié et de la manière dont l'utilisateur interagit avec cet élément, l'événement <strong>change</strong> se déclenche à un moment différent :</p>
+
+<ul>
+ <li>Quand l'élément est activé (en cliquant ou en utilisant le clavier) pour <code>&lt;input type="radio"&gt;</code> et <code>&lt;input type="checkbox"&gt;</code><em>(case à cocher</em>).</li>
+ <li>Quand l'utilisateur réalise le changement de manière explicite (par exemple, en sélectionnant une valeur venant d'un {{HTMLElement("select")}} d'un menu déroulant avec le clic d'une souris, en sélectionnant une date d'un "date picker" <em>(sélecteur de date)</em> pour <code>&lt;input type="date"&gt;</code>, en sélectionnant un fichier d'un "file picker" <em>(sélecteur de fichier)</em> pour <code>&lt;input type="file"&gt;</code>, etc.).</li>
+ <li>Quand l'élément perd le focus après que sa valeur a été changée, mais pas validée (par exemple, après l'édition d'une valeur de {{HTMLElement("textarea")}} ou <code>&lt;input type="text"&gt;</code>).</li>
+</ul>
+
+<p>Les différents navigateurs ne sont pas toujours d'accord sur le fait que l'événement <strong>change</strong> doit être déclenché pour certains types d'interactions. Par exemple, la navigation avec le clavier dans les éléments {{HTMLElement("select")}} ne déclenche jamais l'événement dans Gecko jusqu'à ce que l'utilisateur appuie sur la touche Entrée ou déplace le focus en dehors du &lt;select&gt; (voir {{bug("126379")}}).</p>
+
+<p><a href="https://html.spec.whatwg.org/multipage/forms.html#concept-input-apply">La spécification HTML répertorie les types <code>&lt;input&gt;</code> qui doivent déclencher l'événement <code>change</code>.</a></p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Lélément_&lt;select>">L'élément &lt;select&gt;</h3>
+
+<p>Le code suivant gère l'événement <strong>change</strong> sur {{HTMLElement("select")}} en appellant la fonction <code>changeEventHandler() </code>dans<code> l'attribut <em>onchange</em>. Il lit la valeur de la cible de l'événement et la montre dans une alerte.</code></p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;label&gt;Choose an ice cream flavor:
+  &lt;select class="ice-cream" name="ice-cream"&gt;
+    &lt;option value=""&gt;Select One …&lt;/option&gt;
+    &lt;option value="chocolate"&gt;Chocolate&lt;/option&gt;
+    &lt;option value="sardine"&gt;Sardine&lt;/option&gt;
+    &lt;option value="vanilla"&gt;Vanilla&lt;/option&gt;
+  &lt;/select&gt;
+&lt;/label&gt;
+
+&lt;div class="result"&gt;&lt;/div&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css">body {
+  display: grid;
+  grid-template-areas: "select result";
+}
+
+select {
+  grid-area: select;
+}
+
+.result {
+  grid-area: result;
+}</pre>
+</div>
+
+<h4 id="Javascript">Javascript</h4>
+
+<pre class="brush: js">const selectElement = document.querySelector('.ice-cream');
+
+selectElement.addEventListener('change', (event) =&gt; {
+  const result = document.querySelector('.result');
+  result.textContent = `You like ${event.target.value}`;
+});</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{ EmbedLiveSample('Lélément_&lt;select&gt;', '100%', '75px') }}</p>
+
+<h3 id="Lélément_dentrée_de_texte">L'élément d'entrée de texte</h3>
+
+<p>Pour certains éléments, notamment <code>&lt;input type="text"&gt;</code>, l'événement de changement ne se déclenche pas tant que le contrôle ne perd pas le focus. Essayez de saisir quelque chose dans le champ ci-dessous, puis cliquez ailleurs pour déclencher l'événement.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;input placeholder="Enter some text" name="name"/&gt;
+&lt;p id="log"&gt;&lt;/p&gt;</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">const input = document.querySelector('input');
+const log = document.getElementById('log');
+
+input.addEventListener('change', updateValue);
+
+function updateValue(e) {
+  log.textContent = e.target.value;
+}</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{ EmbedLiveSample('Lélément_dentrée_de_texte', '100%', '75px') }}</p>
+
+<ul>
+</ul>
+
+<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("HTML WHATWG", "indices.html#event-change", "change")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "webappapis.html#handler-onchange", "change")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Events", "#Events-eventgroupings-htmlevents", "change")}}</td>
+   <td>{{Spec2("DOM2 Events")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilités_navigateurs">Compatibilités navigateurs</h2>
+
+
+
+<p>{{Compat("api.GlobalEventHandlers.onchange")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p>Cet événement est aussi déclenché dans plusieurs API non-standard:</p>
+
+<ul>
+ <li>{{domxref("NetworkInformation.connection")}} déclenche l'événement <strong>change</strong> lorsque les informations de connexions changent.</li>
+ <li>{{domxref("DeviceStorageChangeEvent")}} est déclenché à chaque fois qu'un fichier est créé, modifié, ou supprimé du système de stockage du périphérique.</li>
+</ul>
diff --git a/files/fr/web/api/htmlelement/click/index.html b/files/fr/web/api/htmlelement/click/index.html
new file mode 100644
index 0000000000..554b3ec9a7
--- /dev/null
+++ b/files/fr/web/api/htmlelement/click/index.html
@@ -0,0 +1,123 @@
+---
+title: element.click
+slug: Web/API/HTMLElement/click
+tags:
+  - DOM
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/HTMLElement/click
+---
+<p>{{ ApiRef() }}</p>
+<h2 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h2>
+<p>La méthode <b>click</b> simule un clic sur un élément.</p>
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+<pre class="syntaxbox">element.click()</pre>
+<h2 id="Notes" name="Notes">Notes</h2>
+<p>Lorsque la méthode <code>click</code> est utilisée sur des éléments où elle est gérée (par exemple un {{HTMLElement("input")}}), elle déclenche également l'évènement <code>click</code> de l'élément qui se propagera aux éléments situés plus haut dans l'arbre du document (ou la chaîne évènementielle) et déclenchera aussi leurs évènements <code>click</code>. Cependant, la propagation d'un évènement <code>click</code> ne déclenchera pas la navigation à partir d'un élément {{HTMLElement("a")}} comme si un vrai clic de souris avait été reçu.</p>
+<p>Au moment où sont écrites ces lignes (Opera Next est à la version 12.11), la méthode <code>click</code> d'Opera <strong>sera ignorée silencieusement</strong>, si executée sur un élément {{HTMLElement("input")}} avec un type "file", et une propriété <a href="/fr/docs/CSS" title="/fr/docs/CSS">CSS</a> {{cssxref('display')}} à "none".</p>
+<div class="geckoVersionNote">
+ <p>{{gecko_callout_heading("5.0")}}</p>
+ <p>Avant Gecko 5.0 {{geckoRelease("5.0")}}, Gecko supportait la méthode <code>click</code> qu'avec des éléments {{HTMLElement("input")}} de type
+  <i>
+   button</i>
+  ,
+  <i>
+   checkbox</i>
+  ,
+  <i>
+   radio</i>
+  ,
+  <i>
+   reset</i>
+  ou
+  <i>
+   submit</i>
+  . Gecko n'implémentait pas la méthode <code>click</code> sur d'autres éléments qui auraient pu répondre à des clics de souris comme les liens (éléments {{HTMLElement("a")}}), et ne déclenchait pas nécessairement l'évènement click d'autres éléments.</p>
+ <p>Cependant, maintenant Gecko supporte la méthode sur tous les éléments comme requis par <a href="/fr/docs/HTML/HTML5" title="/fr/docs/HTML/HTML5">HTML5</a>.</p>
+ <p>D'autres implémentations du DOM peuvent se comporter différemment.</p>
+</div>
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</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('DOM2 HTML', 'html.html#ID-2651361')}} <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2/html/html.html#ID-2651361">traduction en français</a> (non normative)</small></td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+<p>{{CompatibilityTable}}</p>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Fonctionnalité</th>
+    <th>Chrome</th>
+    <th>Firefox (Gecko)</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari (WebKit)</th>
+   </tr>
+   <tr>
+    <td>Support de base</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>5</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+   <tr>
+    <td><code>input@file (limited)</code></td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>4</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>12.10</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+   <tr>
+    <td><code>input@file (full)</code></td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>4</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Fonctionnalité</th>
+    <th>Android</th>
+    <th>Chrome pour Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Phone</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Support de base</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div class="note">
+ <p><strong>Note :</strong> <em>Support de base</em>, se réfère ici au minimum requis pas la spécification.</p>
+</div>
+<p><br>
+  </p>
diff --git a/files/fr/web/api/htmlelement/contenteditable/index.html b/files/fr/web/api/htmlelement/contenteditable/index.html
new file mode 100644
index 0000000000..1863ffa2aa
--- /dev/null
+++ b/files/fr/web/api/htmlelement/contenteditable/index.html
@@ -0,0 +1,113 @@
+---
+title: HTMLElement.contentEditable
+slug: Web/API/HTMLElement/contentEditable
+tags:
+  - API
+  - HTML DOM
+  - HTMLElement
+  - Référence(2)
+  - contenteditable
+translation_of: Web/API/HTMLElement/contentEditable
+---
+<div>
+<div>{{APIRef("HTML DOM")}}</div>
+</div>
+
+<p><code>La propriété </code><strong><code>HTMLElement.contentEditable</code></strong> est utilisée pour indiquer si un élément HTML est ou non éditable. Cet attribut peut avoir 3 valeurs :</p>
+
+<ul>
+ <li><code>"true"</code> <em>(vrai)</em> indique que l'élément est éditable.</li>
+ <li><code>"false"</code> <em>(faux)</em> indique que l'élément ne sera pas éditable.</li>
+ <li><code>"inherit"</code>  <em>(hérité)</em> indique que l'élément héritera de l'état editable de son parent.</li>
+</ul>
+
+<p>Vous pouvez utiliser la propriété {{domxref("HTMLElement.isContentEditable")}} pour tester la valeur de la propriété {{domxref("Boolean")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>editable</em> = element.contentEditable
+element.contentEditable = "true"
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'interaction.html#contenteditable', 'contenteditable')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Definition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>11</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.9)}}</td>
+   <td>6<sup>[1]</sup></td>
+   <td>10.6</td>
+   <td>3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>3</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.9)}}</td>
+   <td>6<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Internet Explorer a un tas de bogues concernant l'implémentation de cette fonctionnalité. IE10 se bloque dans certains cas lors de la modification des listes (<a href="https://connect.microsoft.com/IE/feedback/details/796187/internet-explorer-10-crash-with-contenteditable-list">bug 796187</a>). IE11 + utilise un positionnement non valide pour lorsqu'un élément est flottant (<a href="https://connect.microsoft.com/IE/feedback/details/858749">bug 858749</a>). Dans IE9-10, la fenêtre se fige lorsque vous utilisez la molette de la souris pendant le déplacement (<a href="https://connect.microsoft.com/IE/feedbackdetail/view/809254">bug 809254</a>). IE10-11 ne déclenche pas l'événement d'<a href="/en-US/docs/Web/Events/input"><code>input</code></a> (<a href="https://connect.microsoft.com/IE/feedbackdetail/view/794285">bug 794285</a>). IE10 se bloque après avoir sélectionné "Couper" dans le menu contextuel (<a href="https://connect.microsoft.com/IE/feedbackdetail/view/801770">bug 801770</a>). IE11 + ne permet pas de placer le caret dans une cellule de tableau vide (bug 807199). IE10 ne déclenche pas d'événement de <a href="https://developer.mozilla.org/fr/docs/Web/Events/contextmenu"><code>contextmenu</code></a> lorsque vous cliquez avec le bouton droit sur des mots mal orthographiés (<a href="https://connect.microsoft.com/IE/feedbackdetail/view/774350">bug 774350</a>). IE11 ajoute des éléments {{HTMLElement ("br")}} à {{HTMLElement ("body")}} lors de l'affichage / dissimulation d'un {{HTMLElement ("iframe")}} avec un document contenteditable à l'intérieur (<a href="https://connect.microsoft.com/IE/feedbackdetail/view/864804">bug 864804</a>). IE11 ne permet pas de désactiver les poignées de redimensionnement pour les images / entrées (<a href="https://connect.microsoft.com/IE/feedbackdetail/view/907422">bug 907422</a>).</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>  <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Contenu_editable">Contenu editable</a></li>
+ <li>{{domxref("HTMLElement.isContentEditable")}}</li>
+ <li>L'attribut global <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Attributs_universels/contenteditable">contenteditable</a> .</li>
+</ul>
diff --git a/files/fr/web/api/htmlelement/dataset/index.html b/files/fr/web/api/htmlelement/dataset/index.html
new file mode 100644
index 0000000000..fa7ece8acc
--- /dev/null
+++ b/files/fr/web/api/htmlelement/dataset/index.html
@@ -0,0 +1,102 @@
+---
+title: HTMLElement.dataset
+slug: Web/API/HTMLElement/dataset
+tags:
+  - API
+  - HTML DOM
+  - HTMLElement
+  - Propriété
+  - Référence(2)
+  - dataset
+translation_of: Web/API/HTMLOrForeignElement/dataset
+---
+<p>{{ APIRef }}</p>
+
+<p>La propriété <code><strong>HTMLElement.dataset</strong></code> fournit un accès en mode lecture et écriture, à tous les <a href="/fr/docs/Web/HTML/Attributs_globaux/data-*" title="https://developer.mozilla.org/fr/docs/Web/HTML/Attributs_globaux/data-*">attributs de données sur mesure</a> (<em>data-*</em>) définis sur l'élément. C'est un <a href="/en/DOM/DOMStringMap" title="en/DOM/DOMStringMap">tableau associatif de DOMString</a>, qui associe à chaque nom d'attribut de données sur mesure la valeur qu'il contient.</p>
+
+<p>Le nom d'un attribut de données sur mesure commence par <code>data-</code>. Il ne doit contenir que des lettres, des nombres et les caractères suivants : tiret (<code>-</code>), point (<code>.</code>), deux-points (<code>:</code>), tiret bas (<code>_</code>). De plus, il ne doit pas contenir des lettres majuscules ASCII (<code>A</code> à <code>Z</code>).</p>
+
+<p>Un nom d'attribut de données sur mesure est transformé en clef pour l'entrée de la {{ domxref("DOMStringMap") }} avec les règles suivantes :</p>
+
+<ul>
+ <li>le préfixe <code>data-</code> est enlevé (y compris le tiret) ;</li>
+ <li>pour tout tiret (<code>U+002D</code>) suivi par une <span style="line-height: 1.5;"> lettre minuscule ASCII</span><code> a</code><span style="line-height: 1.5;"> à </span><code>z</code><span style="line-height: 1.5;">, le tiret est enlevé et la lettre est transformée en la majuscule correspondante ;</span></li>
+ <li>les autres caractères (y compris les autres tirets) ne sont pas modifiés.</li>
+</ul>
+
+<p>La transformation opposée, qui associe un nom d'attribut à une clef, utilise les règles suivantes :</p>
+
+<ul>
+ <li>Restriction : Aucun tiret ne doit être immédiatement suivi d'une lettre minuscule ASCII <code>a</code> à <code>z</code> (avant la transformation) ;</li>
+ <li>un préfixe <code>data-</code> est ajouté ;</li>
+ <li>toute lettre majuscule ASCII <code>A</code> à <code>Z</code> est transformée en un tiret suivi de la minuscule correspondante ;</li>
+ <li>les autres caractères ne sont pas modifiés.</li>
+</ul>
+
+<p>La restriction dans les règles ci-dessus garantit que les deux transformations sont bien l'inverse l'une de l'autre.</p>
+
+<p>Par exemple, l'attribut nommé <code>data-abc-def</code> correspond à la clef <code>abcDef</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>chaîne</em> = <em>element</em>.dataset.<em>nomEnCamelCase</em>;
+<em>element.</em>dataset.<em>nomEnCamelCase</em> = <em>chaîne</em>;</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">&lt;div id="utilisateur" data-id="1234567890" data-utilisateur="Monsieur Tartempion" data-date-de-naissance&gt;Monsieur Tartempion
+&lt;/div&gt;
+
+var el = document.querySelector('#utilisateur');
+
+// el.id == 'utilisateur'
+// el.dataset.id === '1234567890'
+// el.dataset.utilisateur === 'Monsieur Tartempion'
+// el.dataset.dateDeNaissance === ''
+
+el.dataset.dateDeNaissance = '1960-10-03'; // renseigne la date de naissance.
+
+// 'unAttributDeDonnees' in el.dataset === false
+
+el.dataset.unAttributDeDonnees = 'mes données';
+// 'unAttributDeDonnees' in el.dataset === 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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Pas de changement depuis le dernier instantané (snapshot), {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Instantané de {{SpecName('HTML WHATWG')}}, pas de changement depuis {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Instantané de {{SpecName('HTML WHATWG')}}, définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.HTMLElement.dataset")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La classe des attributs globaux HTML <a href="/fr/docs/Web/HTML/Attributs_globaux/data-*"><strong>data-*</strong></a>.</li>
+</ul>
diff --git a/files/fr/web/api/htmlelement/dir/index.html b/files/fr/web/api/htmlelement/dir/index.html
new file mode 100644
index 0000000000..e4bd63a25e
--- /dev/null
+++ b/files/fr/web/api/htmlelement/dir/index.html
@@ -0,0 +1,48 @@
+---
+title: element.dir
+slug: Web/API/HTMLElement/dir
+tags:
+  - DOM
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/HTMLElement/dir
+---
+<p>{{ ApiRef() }}</p>
+<h2 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h2>
+<p>L'attribut <code><strong>dir</strong></code> obtient ou définit la direction d'écriture du texte pour le contenu de l'élément courant.</p>
+<h2 id="Syntaxe_et_valeurs" name="Syntaxe_et_valeurs">Syntaxe et valeurs</h2>
+<pre class="brush: js">var <var>DirectionActuelle</var> = referenceElement.dir;
+referenceElement.dir = <var>NouvelleDirection</var>;
+</pre>
+<p><var>DirectionActuelle</var> est une variable chaîne de caractères représentant la direction d'écriture du texte pour l'élément courant. <var>NouvelleDirection</var> est une variable chaîne de caractères représentant la nouvelle direction d'écriture du texte souhaitée pour l'élément.</p>
+<p>Les valeurs possibles pour <code><strong>dir</strong></code> sont <strong><code>ltr</code></strong>, pour de gauche à droite (<em>left-to-right</em>), et <strong><code>rtl</code></strong>, pour de droite à gauche (<em>right-to-left</em>).</p>
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+<pre class="brush: js">var para = document.getElementById("para1");
+para.dir = "rtl";
+// change la direction du texte sur un paragraphe identifié par "para1"
+</pre>
+<h2 id="Notes" name="Notes">Notes</h2>
+<p>La direction d'écriture du texte sur un élément est celle dans laquelle le texte est disposé (pour permettre le support de systèmes multilingues). Les langues arabes et l'hébreu sont des exemples typiques de langues qui utiliseront la direction « rtl » (de droite à gauche).</p>
+<p>Une image peut avoir sont attribut <code>dir</code> positionné à « rtl », auquel cas les attributs <code>title</code> et <code>alt</code> seront formatés et définis comme allant de droite à gauche.</p>
+<p>Lorsqu'un tableau a sa direction définie comme « rtl », l'ordre des colonnes va de droite à gauche.</p>
+<div class="geckoVersionNote">
+ <p>{{ gecko_callout_heading("7.0") }}</p>
+ <p>Avant Gecko 7.0 {{ geckoRelease("7.0") }}, il était possible que la valeur renvoyée ne soit pas toujours en minuscule. A partir de Gecko 7.0, la valeur renvoyée est toujours en minuscule, comme défini dans la spécification.</p>
+</div>
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</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('DOM2 HTML', 'html.html#ID-52460740', 'dir')}} <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-52460740">traduction</a> (non normative)</small></td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+<p> </p>
diff --git a/files/fr/web/api/htmlelement/focus/index.html b/files/fr/web/api/htmlelement/focus/index.html
new file mode 100644
index 0000000000..3659a5a75b
--- /dev/null
+++ b/files/fr/web/api/htmlelement/focus/index.html
@@ -0,0 +1,223 @@
+---
+title: HTMLElement.focus()
+slug: Web/API/HTMLElement/focus
+tags:
+  - API
+  - HTML DOM
+  - HTMLElement
+translation_of: Web/API/HTMLOrForeignElement/focus
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p>La méthode <strong><code>HTMLElement.focus()</code></strong> donne le focus à l'élément spécifié, s'il peut prendre le focus.</p>
+
+<h2 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Syntaxe</h2>
+
+<pre class="syntaxbox">element.focus();
+element.focus(focusOption); // Paramètre objet</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>focusOptions</code> {{optional_inline}} {{experimental_inline}}</dt>
+ <dd>Est un objet ayant les propriétés suivantes:</dd>
+ <dd>
+ <dl>
+  <dt><code>preventScroll</code> {{optional_inline}}</dt>
+  <dd>Est une valeur <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a>:
+  <ul>
+   <li>Si <code>false</code>, la méthode fera défiler la page pour que l'élément soit visible à l'écran.</li>
+   <li>Si <code>true</code>,  la méthode ne fera PAS défiler la page pour que l'élément soit visible à l'écran.</li>
+  </ul>
+  </dd>
+ </dl>
+ </dd>
+</dl>
+
+<h2 id="Specification" name="Specification">Exemples</h2>
+
+<h3 id="Focus_on_a_text_field" name="Focus_on_a_text_field">Donner le focus à un champ texte</h3>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">focusMethod <span class="operator token">=</span> <span class="keyword token">function</span> <span class="function token">getFocus</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"myTextField"</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">focus</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h4 id="HTML">HTML</h4>
+
+<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>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>myTextField<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"Champ texte</span>.<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span><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">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>focusMethod()<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Cliquez-moi pour donner le focus au champ texte!<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>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{ EmbedLiveSample('Focus_on_a_text_field') }}</p>
+
+<h3 id="Focus_on_a_button" name="Focus_on_a_button">Donner le focus à un bouton</h3>
+
+<h4 id="JavaScript_2">JavaScript</h4>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">focusMethod <span class="operator token">=</span> <span class="keyword token">function</span> <span class="function token">getFocus</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"myButton"</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">focus</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<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>button</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>myButton<span class="punctuation token">"</span></span><span class="punctuation token">&gt;Cliquez</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">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>focusMethod()<span class="punctuation token">"</span></span><span class="punctuation token">&gt;Cliquez-moi pour donner le focus au bouton</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></code></pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{ EmbedLiveSample('Focus_on_a_button') }}</p>
+
+<h3 id="Focus_prevent_scroll" name="Focus_prevent_scroll">Focus avec option</h3>
+
+<h4 id="JavaScript_3">JavaScript</h4>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">focusScrollMethod <span class="operator token">=</span> <span class="keyword token">function</span> <span class="function token">getFocus</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"myButton"</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">focus</span><span class="punctuation token">(</span><span class="punctuation token">{</span>preventScroll<span class="punctuation token">:</span><span class="keyword token">false</span><span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+focusNoScrollMethod <span class="operator token">=</span> <span class="keyword token">function</span> <span class="function token">getFocusWithoutScrolling</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"myButton"</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">focus</span><span class="punctuation token">(</span><span class="punctuation token">{</span>preventScroll<span class="punctuation token">:</span><span class="keyword token">true</span><span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h4 id="HTML_3">HTML</h4>
+
+<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>button</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>focusScrollMethod()<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Cliquez-moi pour donner le focus au bouton!<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>button</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>focusNoScrollMethod()<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Cliquez-moi pour donner le focus au bouton sans défilement!<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>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>container<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">height</span><span class="punctuation token">:</span> <span class="number token">1000</span>px<span class="punctuation token">;</span> <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">1000</span>px<span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>myButton<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">margin-top</span><span class="punctuation token">:</span> <span class="number token">500</span>px<span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;Cliquez</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>div</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h4 id="Résultat_3">Résultat</h4>
+
+<p>{{ EmbedLiveSample('Focus_prevent_scroll') }}</p>
+
+<h2 id="Specification" name="Specification">Spécification</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', 'editing.html#dom-focus', 'focus')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'editing.html#focus()-0', 'focus')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'editing.html#dom-focus', 'focus')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-32130014', 'focus')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#method-focus', 'focus')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Si vous appelez <code>HTMLElement.focus()</code> à partir d'un gestionnaire d'événement mousedown, vous devez appeler <code>event.preventDefault()</code> pour empêcher le focus de quitter l'<code>HTMLElement</code>.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table>
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox</th>
+   <th>Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>focusOptions</code></td>
+   <td>{{CompatChrome(64)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOperaMobile(51)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table>
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile</th>
+   <th>Edge mobile</th>
+   <th>IE mobile</th>
+   <th>Opera Android</th>
+   <th>Safari iOS</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>focusOptions</code></td>
+   <td>{{CompatChrome(64)}}</td>
+   <td>{{CompatChrome(64)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOperaMobile(51)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La méthode DOM {{domxref("HTMLElement.blur()")}} pour retirer le focus.</li>
+ <li>{{domxref('document.activeElement')}} pour savoir quel élément a actuellement le focus.</li>
+</ul>
diff --git a/files/fr/web/api/htmlelement/hidden/index.html b/files/fr/web/api/htmlelement/hidden/index.html
new file mode 100644
index 0000000000..28cc5255d5
--- /dev/null
+++ b/files/fr/web/api/htmlelement/hidden/index.html
@@ -0,0 +1,145 @@
+---
+title: HTMLElement.hidden
+slug: Web/API/HTMLElement/hidden
+translation_of: Web/API/HTMLElement/hidden
+---
+<div>
+<div>{{ APIRef("HTML DOM") }}</div>
+</div>
+
+<p><span class="seoSummary">La propriété <strong><code>hidden</code></strong> de l'{{domxref("HTMLElement")}} est un {{jsxref("Boolean")}} qui vaut <code>true</code> si l'élément est caché, sinon sa valeur est <code>false</code>. Cela est très différent de l'utilisation de la propriété CSS {{cssxref("display")}} pour contrôler la visibilité d'un élément.</span> La propriété <code>hidden</code> s'applique à tous les modes de présentation et ne doit pas être utilisée pour cacher du contenu qui est destiné à être directement accessible par l'utilisateur.</p>
+
+<p>Des cas d'utilisation appropriés de <code>hidden</code> comprennent :</p>
+
+<ul>
+ <li>du contenu qui n'est pas encore pertinent mais qui peut être nécessaire ultérieurement ;</li>
+ <li>du contenu qui était nécessaire antérieurement mais qui ne l'est plus ;</li>
+ <li>du contenu qui est réutilisé par d'autres parties de la page à la manière d'un modèle ;</li>
+ <li>la création d'un canevas hors écran comme tampon de dessin.</li>
+</ul>
+
+<p>Des cas inappropriés d'utilisation comprennent :</p>
+
+<ul>
+ <li>le fait de cacher des panneaux dans une boîte de dialogue à onglets ;</li>
+ <li>le fait de cacher du contenu dans une présentation tout en ayant l'intention qu'il soit visible dans d'autres.</li>
+</ul>
+
+<div class="note">
+<p>Des éléments qui ne sont pas <code>hidden</code> ne doivent pas faire référence à des éléments qui le sont.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><em>estCaché</em> = <em>HTMLElement</em>.hidden;
+
+<em>HTMLElement</em>.hidden = true | false;</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un Boolean qui est <code>true</code> si l'élément est caché à la vue ; sinon, la valeur est <code>false</code>.</p>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<p>Voici un exemple où un bloc caché est utilisé pour contenir un message de remerciement qui est affiché après qu'un utilisateur a accepté une demande inhabituelle.</p>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">document.getElementById("boutonOk")
+        .addEventListener("click", function() {
+  document.getElementById("bienvenue").hidden = true;
+  document.getElementById("impressionnant").hidden = false;
+}, false);</pre>
+
+<p>Ce code installe une gestionnaire pour le bouton "OK" du panneau de bienvenue, gestionnaire qui cache le panneau de bienvenue et rend le panneau de suite — ayant le curieux nom d'"impressionnant" — visible à sa place.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<p>Le code HTML pour les deux boîtes est montré ci-dessous.</p>
+
+<h4 id="Le_panneau_bienvenue">Le panneau bienvenue</h4>
+
+<pre class="brush: html notranslate">&lt;div id="bienvenue" class="panneau"&gt;
+  &lt;h1&gt;Bienvenue à Machin.com !&lt;/h1&gt;
+  &lt;p&gt;En cliquant sur "OK", vous acceptez d'être impressionnant chaque jour !&lt;/p&gt;
+  &lt;button class="bouton" id="boutonOk"&gt;OK&lt;/button&gt;
+&lt;/div&gt;</pre>
+
+<p>Ce code HTML crée un panneau (dans un bloc {{HTMLElement("div")}}) qui accueille les utilisateurs sur un site et leur dit ce qu'ils acceptent en cliquant sur le bouton OK.</p>
+
+<h4 id="Le_panneau_de_suite">Le panneau de suite</h4>
+
+<p>Une fois que l'utilisateur a cliqué sur le bouton "OK" dans le panneau d'accueil, le code JavaScript échange les deux panneaux en changeant leurs valeurs respectives pour <code>hidden</code>. Le panneau de suite ressemble à ce qui suit en HTML:</p>
+
+<pre class="brush: html notranslate">&lt;div id="impressionnant" class="panneau" hidden&gt;
+  &lt;h1&gt;Merci !&lt;/h1&gt;
+  &lt;p&gt;Merci &lt;strong&gt;vraiment&lt;/strong&gt; beaucoup d'avoir accepté d'être
+  impressionnant aujourd'hui ! Maintenant, sortez et faites des choses impressionnantes
+  d'une façon impressionnante pour rendre le monde plus impressionnant !&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<p>Le contenu est mis en forme en utilisant le CSS ci-dessous.</p>
+
+<pre class="brush: css notranslate">.panneau {
+  font: 16px "Open Sans", Helvetica, Arial, sans-serif;
+  border: 1px solid #22d;
+  padding: 12px;
+  width: 500px;
+  text-align: center;
+}
+
+.bouton {
+  font: 22px "Open Sans", Helvetica, Arial, sans-serif;
+  padding: 5px 36px;
+}
+
+h1 {
+  margin-top: 0;
+  font-size: 175%;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{ EmbedLiveSample('Example', 560, 200) }}</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('HTML WHATWG', "interaction.html#dom-hidden", "HTMLElement.hidden")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "editing.html#the-hidden-attribute", "HTMLElement.hidden")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "editing.html#the-hidden-attribute", "HTMLElement.hidden")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">La table compatibilité de cette page est générée à partir de données structurées. Au cas où vous souhaiteriez contribuer aux données, merci de please de vous regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et de nous envoyer une "pull request".</div>
+
+<p>{{Compat("api.HTMLElement.hidden")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Element.hidden")}}</li>
+ <li>{{cssxref("display")}}</li>
+</ul>
diff --git a/files/fr/web/api/htmlelement/index.html b/files/fr/web/api/htmlelement/index.html
new file mode 100644
index 0000000000..5e9cfbda3b
--- /dev/null
+++ b/files/fr/web/api/htmlelement/index.html
@@ -0,0 +1,230 @@
+---
+title: HTMLElement
+slug: Web/API/HTMLElement
+tags:
+  - DOM
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/HTMLElement
+---
+<div>
+ {{ApiRef}}</div>
+<h2 id="Interface_des_éléments_HTML">Interface des éléments HTML</h2>
+<p><code>HTMLElement</code> est une interface abstraite pour le <a href="/fr/docs/DOM" title="en-US/docs/DOM">DOM</a>, héritée par tous les éléments HTML.</p>
+<h2 id="Propriétés">Propriétés</h2>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Nom</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{domxref("element.accessKey", "accessKey")}} {{HTMLVersionInline(5)}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>La touche de navigation clavier assignée à l'élément.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("element.accessKeyLabel", "accessKeyLabel")}} {{HTMLVersionInline(5)}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Une chaîne de caractères définissant la touche de navigation clavier assignée.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("element.className", "className")}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Le nom de la classe <a href="/fr/docs/CSS" title="/fr/docs/CSS">CSS</a> définie pour l'élément.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("element.dataset", "dataset")}} {{HTMLVersionInline(5)}}</td>
+   <td>{{domxref("DOMStringMap")}}</td>
+   <td>Un tableau associatif des attributs  <code>data-*</code> de l'élément.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("element.dir", "dir")}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>L'attribut <code>dir</code> de l'élément.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("element.id", "id")}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>L'ID de l'élément.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("element.lang", "lang")}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>L'attribut  <code>lang</code> de l'élément.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("element.title", "title")}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>L'attribut <code>title</code> de l'élément.</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Méthodes">Méthodes</h2>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Nom et paramètres</th>
+   <th scope="col">Renvoie</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{domxref("element.blur()", "blur()")}} {{HTMLVersionInline(5)}}</td>
+   <td><code>void</code></td>
+   <td>Retire le focus clavier de l'élément actuellement sélectionné.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("element.click()", "click()")}} {{HTMLVersionInline(5)}}</td>
+   <td><code>void</code></td>
+   <td>Envoie un évènement <code>click</code> à l'élément.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("element.focus()", "focus()")}} {{HTMLVersionInline(5)}}</td>
+   <td><code>void</code></td>
+   <td>Place le focus clavier sur l'élément.</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Spécification">Spécification</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('HTML WHATWG', 'elements.html#htmlelement', 'HTMLElement')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+<p>{{CompatibilityTable}}</p>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Fonctionnalité</th>
+    <th>Firefox (Gecko)</th>
+    <th>Chrome</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari</th>
+   </tr>
+   <tr>
+    <td>Support de base</td>
+    <td>{{CompatGeckoDesktop("1.0")}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+   </tr>
+   <tr>
+    <td>{{domxref("element.accessKey", "accessKey")}}</td>
+    <td>{{CompatGeckoDesktop("5.0")}}</td>
+    <td>17.0</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatVersionUnknown}}(<a class="external" href="http://trac.webkit.org/changeset/107483">535.10</a>)</td>
+   </tr>
+   <tr>
+    <td>{{domxref("element.accessKeyLabel", "accessKeyLabel")}}</td>
+    <td>{{CompatGeckoDesktop("8.0")}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatNo}}{{WebkitBug(72715)}}</td>
+   </tr>
+   <tr>
+    <td>{{domxref("element.blur()", "blur()")}}</td>
+    <td>{{CompatGeckoDesktop("5.0")}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+   </tr>
+   <tr>
+    <td>{{domxref("element.click()", "click()")}}</td>
+    <td>{{CompatGeckoDesktop("5.0")}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatVersionUnknown}}(<a class="external" href="http://trac.webkit.org/changeset/107483">535.24</a>)</td>
+   </tr>
+   <tr>
+    <td>{{domxref("element.dataset", "dataset")}}</td>
+    <td>{{CompatGeckoDesktop("6.0")}}</td>
+    <td>9.0</td>
+    <td>{{CompatUnknown}}</td>
+    <td>11.10</td>
+    <td>5.1</td>
+   </tr>
+   <tr>
+    <td>{{domxref("element.focus()", "focus()")}}</td>
+    <td>{{CompatGeckoDesktop("5.0")}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Fonctionnalité</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>Android</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Support de base</td>
+    <td>{{CompatGeckoMobile("1.0")}}</td>
+    <td rowspan="7">{{CompatUnknown}}</td>
+    <td rowspan="7">{{CompatUnknown}}</td>
+    <td rowspan="7">{{CompatUnknown}}</td>
+    <td rowspan="7">{{CompatUnknown}}</td>
+   </tr>
+   <tr>
+    <td>{{domxref("element.accessKey", "accessKey")}}</td>
+    <td>{{CompatGeckoMobile("5.0")}}</td>
+   </tr>
+   <tr>
+    <td>{{domxref("element.accessKeyLabel", "accessKeyLabel")}}</td>
+    <td>{{CompatGeckoMobile("8.0")}}</td>
+   </tr>
+   <tr>
+    <td>{{domxref("element.blur()", "blur()")}}</td>
+    <td>{{CompatGeckoMobile("5.0")}}</td>
+   </tr>
+   <tr>
+    <td>{{domxref("element.click()", "click()")}}</td>
+    <td>{{CompatGeckoMobile("5.0")}}</td>
+   </tr>
+   <tr>
+    <td>{{domxref("element.dataset", "dataset")}}</td>
+    <td>{{CompatGeckoMobile("6.0")}}</td>
+   </tr>
+   <tr>
+    <td>{{domxref("element.focus()", "focus()")}}</td>
+    <td>{{CompatGeckoMobile("5.0")}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h2 id="Voir_également">Voir également</h2>
+<ul>
+ <li>{{domxref("Element")}}</li>
+</ul>
diff --git a/files/fr/web/api/htmlelement/input_event/index.html b/files/fr/web/api/htmlelement/input_event/index.html
new file mode 100644
index 0000000000..3e20f0e2bb
--- /dev/null
+++ b/files/fr/web/api/htmlelement/input_event/index.html
@@ -0,0 +1,261 @@
+---
+title: input
+slug: Web/API/HTMLElement/input_event
+tags:
+  - DOM
+  - Element
+  - Entrée
+  - HTML5
+translation_of: Web/API/HTMLElement/input_event
+---
+<p>L'évènement DOM <code>input</code> <em>(entrée)</em> est déclenché de façon synchrone quand la valeur d'un élément {{HTMLElement("input")}} <em>(entrée)</em>, {{HTMLElement("select")}} <em>(sélection)</em> ou {{ HTMLElement("textarea") }} <em>(zone de texte)</em> est modifiée. (Pour les éléments <code>input</code> avec <code>type=checkbox</code> <em>(case à cocher)</em> ou <code>type=radio</code> , l'évènement <code>input</code>  n'est pas lancé quand l'utilisateur clique sur le contrôle, parce que la valeur attribuée ne peut être changée).</p>
+
+<p>De plus, l'évènement  <code>input</code> se déclenche sur les éditeurs <a href="https://developer.mozilla.org/fr/docs/Web/API/HTMLElement/contentEditable" title="Element.contentEditable"><code>contenteditable</code></a> quand son contenu est modifié. Dans ce cas, l'évènement cible est l'élément "editing host" <em>(hôte de l'édition)</em> . <span class="short_text" id="result_box" lang="fr"><span>S'il y a deux éléments ou plus qui ont</span></span> <code>contenteditable</code> à true <em>(vrai)</em>, "editing host" <span id="result_box" lang="fr"><span>est l'élément ancêtre le plus proche dont le parent n'est pas modifiable</span></span> . <span id="result_box" lang="fr"><span>De même, il est déclenché sur l'élément racine des éditeurs</span></span> <a href="https://developer.mozilla.org/fr/docs/Web/API/Document/designMode" title="document.designMode"><code>designMode</code></a> .</p>
+
+<h2 id="Information_générale">Information générale</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#event-input-input">HTML5</a>, <a href="https://dvcs.w3.org/hg/dom3events/raw-file/tip/html/DOM3-Events.html#event-type-input">DOM Level 3 Events</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("Event")}}, {{domxref("InputEvent")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Oui</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">Élement</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">La valeur ou le contenu est modifié</dd>
+</dl>
+
+<p> </p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>9<sup>[2][3]</sup></td>
+   <td>{{CompatVersionUnknown}}<sup>[4]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>immediately after <code>compositionupdate</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("12")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>15</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>on <code>contenteditable</code> element</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("14")}}</td>
+   <td>{{CompatNo}}<sup>[5]</sup>
+    <p> </p>
+   </td>
+   <td>15</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>when <code>designMode</code> is "on"</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("14")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>data</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>isComposing</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("31")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>&lt;select&gt;</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("49")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>immediately after <code>compositionupdate</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("12")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>on <code>contenteditable</code> element</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("14")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>when <code>designMode</code> is "on"</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("14")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>data</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>isComposing</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("31")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>&lt;select&gt;</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] <span id="result_box" lang="fr"><span>Avant Gecko 12.0 {GeckoRelease ("12.0")}}, Gecko ne déclenchait pas les événements </span></span> "input" <span lang="fr"><span> pendant que la composition était en cours en utilisant des IME ou lorsque des clés mortes étaient utilisées sur Mac OS X.</span></span></p>
+
+<p>[2] IE 9 ne déclenche pas un événement "input" lorsque l'utilisateur supprime des caractères d'une entrée (par exemple en appuyant sur Retour arrière ou Suppr., ou en utilisant l'opération "Cut" <em>(couper)</em>).</p>
+
+<p>[3] IE 10 et 11 ont un bogue, l'évènement "input"  s'y déclenche lors des changements de l'attribut "placeholder" (espace réservé).</p>
+
+<p>[4] <span id="result_box" lang="fr"><span>Avant Opera 15, Opera ne déclenchait pas un événement </span></span> "input" <span lang="fr"><span> après la suppression du texte dans un champ de saisie</span></span> .</p>
+
+<p>[5] <span id="result_box" lang="fr"><span>La cible de l'événement est l'élément "</span></span> innermost" <span lang="fr"><span> à la position du curseur.</span></span></p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{event("keydown")}}</li>
+ <li>{{event("keyup")}}</li>
+ <li>{{event("keypress")}}</li>
+ <li>{{event("input")}}</li>
+</ul>
+
+<p>L'évènement <a href="/en-US/docs/Web/Reference/Events/change">change</a> est lié . "change"<span id="result_box" lang="fr"><span> se déclenche moins souvent que "input" - il n'est lancé que lorsque les modifications sont validées par l'utilisateur.</span></span></p>
diff --git a/files/fr/web/api/htmlelement/iscontenteditable/index.html b/files/fr/web/api/htmlelement/iscontenteditable/index.html
new file mode 100644
index 0000000000..ba62e2d99d
--- /dev/null
+++ b/files/fr/web/api/htmlelement/iscontenteditable/index.html
@@ -0,0 +1,127 @@
+---
+title: HTMLElement.isContentEditable
+slug: Web/API/HTMLElement/isContentEditable
+tags:
+  - HTML DOM
+  - Propriété
+  - Reference
+  - lecture seule
+  - Édition
+  - Élément HTML
+translation_of: Web/API/HTMLElement/isContentEditable
+---
+<div>
+<div>{{ APIRef("HTML DOM") }}</div>
+</div>
+
+<p>La propriété en lecture seule <strong><code>HTMLElement.isContentEditable</code></strong> renvoie un  {{jsxref("Boolean")}} qui est <code>true </code><em>(vrai)</em> si le contenu de l'élément est éditable ; sinon elle renvoie <code>false</code><em>(faux)</em>.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>editable</em> = <em>element</em>.isContentEditable
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"infoText1"</span><span class="punctuation token">)</span><span class="punctuation token">.</span>innerHTML <span class="operator token">+</span><span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"myText1"</span><span class="punctuation token">)</span><span class="punctuation token">.</span>isContentEditable<span class="punctuation token">;</span>
+document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"infoText2"</span><span class="punctuation token">)</span><span class="punctuation token">.</span>innerHTML <span class="operator token">+</span><span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"myText2"</span><span class="punctuation token">)</span><span class="punctuation token">.</span>isContentEditable<span class="punctuation token">;</span></code></pre>
+
+<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="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>myText1<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Uneditable Paragraph<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="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>myText2<span class="punctuation token">"</span></span> <span class="attr-name token">contentEditable</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>true<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Editable Paragraph<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="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>infoText1<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Can edit the first paragraph? <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="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>infoText2<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Can edit the second paragraph? <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{ EmbedLiveSample('Example') }}</p>
+
+<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>{{SpecName('HTML WHATWG', "editing.html#dom-iscontenteditable", "HTMLElement.contenteditable")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Pas de changement de la dernière image, {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "editing.html#dom-iscontenteditable", "HTMLElement.contenteditable")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>L'image de {{SpecName('HTML WHATWG')}}, n'est pas changée par {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "editing.html#dom-iscontenteditable", "HTMLElement.contenteditable")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Image de  {{SpecName('HTML WHATWG')}},  definition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("2") }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>{{ CompatGeckoMobile("2") }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("element.contentEditable")}}</li>
+ <li>L'attribut global <a href="/en-US/docs/Web/HTML/Global_attributes/contenteditable">contenteditable</a>.</li>
+</ul>
diff --git a/files/fr/web/api/htmlelement/lang/index.html b/files/fr/web/api/htmlelement/lang/index.html
new file mode 100644
index 0000000000..990a1cd780
--- /dev/null
+++ b/files/fr/web/api/htmlelement/lang/index.html
@@ -0,0 +1,46 @@
+---
+title: element.lang
+slug: Web/API/HTMLElement/lang
+tags:
+  - DOM
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/HTMLElement/lang
+---
+<p>{{ ApiRef() }}</p>
+<h2 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h2>
+<p>Cette propriété permet d'obtenir ou de définir la langue de base des valeurs d'attribut et du contenu textuel d'un élément.</p>
+<h2 id="Syntaxe_et_valeurs" name="Syntaxe_et_valeurs">Syntaxe et valeurs</h2>
+<pre class="brush: js">var <var>langueUtilisee</var> = référenceElement.lang; // Récupérer la valeur de lang
+référenceElement.lang = <var>NouvelleLangue</var>; // Définir la valeur de lang
+</pre>
+<p><var>langueUtilisee</var> est une variable chaîne de caracteres recevant la langue dans laquelle le texte de l'élément courant est écrit. <var>NouvelleLangue</var> est une variable chaîne de caractères dont la valeur définit la langue dans laquelle le texte de l'élément courant est écrit.</p>
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+<pre class="brush: js">// ce bout de code compare la langue de base et
+// redirige vers une autre URL suivant la langue
+if (document.documentElement.lang === "en") {
+    window.location.href = "un_document.html.en";
+} else if(document.documentElement.lang === "ru") {
+    window.location.href = "un_document.html.ru";
+}
+</pre>
+<h2 id="Notes" name="Notes">Notes</h2>
+<p>Les codes de langues renvoyés par cette propriété sont définis dans la <a class="external" href="http://tools.ietf.org/html/rfc1766" title="http://tools.ietf.org/html/rfc1766">RFC 1766</a>. Par exemple, « en » pour anglais, « ja » pour japonais, « es » pour espagnol, « fr » pour français, etc. La valeur par défaut de cet attribut est <code>unknown</code> (inconnue). Notez que cet attribut, bien que valide au niveau de chaque élément individuel, et le plus souvent spécifié pour le nœud racine du document.</p>
+<p>Ne marche qu'avec l'attribut <code>lang</code>, et non avec <code>xml:lang</code>.</p>
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</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('DOM2 HTML', 'html.html#ID-59132807', 'id')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+<p> </p>
diff --git a/files/fr/web/api/htmlelement/offsetheight/index.html b/files/fr/web/api/htmlelement/offsetheight/index.html
new file mode 100644
index 0000000000..bfd4b1d130
--- /dev/null
+++ b/files/fr/web/api/htmlelement/offsetheight/index.html
@@ -0,0 +1,66 @@
+---
+title: element.offsetHeight
+slug: Web/API/HTMLElement/offsetHeight
+tags:
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/HTMLElement/offsetHeight
+---
+<p>{{ ApiRef() }}</p>
+
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+
+<p>Propriété <abbr title="Dynamic HyperText Markup Language">DHTML</abbr> permettant d'obtenir la hauteur d'un élément par rapport à la mise en page.</p>
+
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+
+<pre class="eval">var <em>hauteurTotaleElem</em> = document.getElementById(<em>id</em>).offsetHeight;
+</pre>
+
+<p><em>hauteurTotalElem</em> est une variable stockant un entier correspondant à la valeur en pixels de la hauteur totale de l'élément identifé par <code>id</code>. <code>offsetHeight</code> est une propriété en lecture seule.</p>
+
+<h3 id="Description" name="Description">Description</h3>
+
+<p>Typiquement, la propriété <strong>offsetHeight</strong> d'un élément est une mesure qui comprend les bordures de l'élément, ses marges internes verticales (padding), la barre de défilement horizontale si présente et affichée, et la hauteur CSS de l'élément.</p>
+
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+
+<div id="offsetContainer" style="margin: 26px 0px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: absolute; left: 260px;">
+<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
+<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p>
+
+<p>Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.</p>
+
+<p><span style="float: right;"><img alt="Image:BirmanCat.jpg" class="internal" src="/@api/deki/files/1176/=BirmanCat.jpg"></span>All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.</p>
+
+<p>Cat image and text coming from <a class="external" href="http://www.best-cat-art.com/">www.best-cat-art.com</a></p>
+
+<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p>
+</div>
+<strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: -32px; position: absolute; top: 85px;">Left</strong><strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 170px; position: absolute; top: -24px;">Top</strong><strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong><strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong><em>margin-top</em><em>margin-bottom</em><em>border-top</em><em>border-bottom</em><span class="comment">{{ mediawiki.external('if IE') }}&gt;&lt;span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;margin-left&lt;/span&gt;&lt;span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;border-left&lt;/span&gt;&lt;span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;padding-left&lt;/span&gt;&lt;span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;"&gt;padding-right&lt;/span&gt;&lt;span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;border-right&lt;/span&gt;&lt;span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;margin-right&lt;/span&gt;&lt;!{{ mediawiki.external('endif') }}</span></div>
+
+<p style="margin-top: 270px;"><img alt="Image:offsetHeight.png" class="internal" src="/@api/deki/files/1419/=OffsetHeight.png"></p>
+
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+
+<p><code>offsetHeight</code> fait partie du modèle objet DHTML de Microsoft Internet Explorer. Elle ne fait partie d'aucune spécification ou recommandation technique du W3C.</p>
+
+<h3 id="Notes" name="Notes">Notes</h3>
+
+<p><code>offsetHeight</code> est une propriété du modèle objet DHTML introduite par Microsoft Internet Explorer. On l'appelle parfois la hauteur physique ou graphique d'un élément, ou sa hauteur « border-box » (bordure et boîte).</p>
+
+<h3 id="R.C3.A9f.C3.A9rences" name="R.C3.A9f.C3.A9rences">Références</h3>
+
+<ul>
+ <li><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/offsetheight.asp?frame=true"><em>offsetHeight definition</em> sur MSDN</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/workshop/author/om/measuring.asp"><em>Measuring Element Dimension and Location</em> sur MSDN</a></li>
+</ul>
+
+<h3 id="Voir_aussi" name="Voir_aussi">Voir aussi</h3>
+
+<ul>
+ <li><a href="/fr/DOM/element.clientHeight" title="fr/DOM/element.clientHeight"><code>element.clientHeight</code></a></li>
+ <li><a href="/fr/DOM/element.scrollHeight" title="fr/DOM/element.scrollHeight"><code>element.scrollHeight</code></a></li>
+ <li><a href="/fr/DOM/element.offsetWidth" title="fr/DOM/element.offsetWidth"><code>element.offsetWidth</code></a></li>
+</ul>
+
+<p>{{ languages( { "en": "en/DOM/element.offsetHeight", "pl": "pl/DOM/element.offsetHeight" } ) }}</p>
diff --git a/files/fr/web/api/htmlelement/offsetleft/index.html b/files/fr/web/api/htmlelement/offsetleft/index.html
new file mode 100644
index 0000000000..b9c055927b
--- /dev/null
+++ b/files/fr/web/api/htmlelement/offsetleft/index.html
@@ -0,0 +1,56 @@
+---
+title: element.offsetLeft
+slug: Web/API/HTMLElement/offsetLeft
+tags:
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/HTMLElement/offsetLeft
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p>Renvoie le nombre de pixels dont le
+ <i>
+  coin supérieur gauche</i>
+ de l'élément courant est décalé vers là gauche au sein du nœud <code><a href="fr/DOM/element.offsetParent">offsetParent</a></code>.</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<pre class="eval"><i>left</i> =<i>element</i>.offsetLeft;
+</pre>
+<p><code>left</code> est un entier représentant le décalage vers la gauche en pixels.</p>
+<h3 id="Note" name="Note">Note</h3>
+<p><code>offsetLeft</code> renvoie la position du coin supérieur gauche de l'élément ; pas nécessairement du « vrai » bord gauche de l'élément. C'est important pour les éléments <b>span</b> dans les textes continus qui s'étendent sur plusieurs lignes. Le span peut commencer au milieu de la page et continuer au début de la ligne suivante. La propriété <code>offsetLeft</code> fera référence au coin gauche de départ du span, pas le bord gauche du texte au début de la seconde ligne. Par conséquent, une boîte avec les valeurs left, top, width et height correspondant à <code>offsetLeft, offsetTop, offsetWidth</code> et <code>offsetHeight</code> ne contiendra pas forcément un span avec débordement de texte.</p>
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+<pre>var colorTable = document.getElementById("t1");
+var tOLeft = colorTable.offsetLeft;
+
+if (tOLeft &gt; 5) {
+  // grand décalage à gauche : faire quelque chose ici
+}
+</pre>
+<h3 id="Exemple_2" name="Exemple_2">Exemple</h3>
+<p>Comme noté plus haut, cet exemple montre une « longue » phrase qui déborde dans un div avec une bordure bleue, et une boîte rouge dont on pourrait croire qu'elle décrit les limites du span.</p>
+<p><img alt="Image:offsetLeft.jpg"></p>
+<p><small><font color="gray">Note : il s'agit d'une image de l'exemple, pas d'un rendu direct dans le navigateur. En effet, il n'est pas possible d'intégrer des scripts dans la page du wiki.</font></small></p>
+<pre>&lt;div style="width: 300px; border-color:blue;
+  border-style:solid; border-width:1;"&gt;
+  &lt;span&gt;Short span. &lt;/span&gt;
+  &lt;span id="long"&gt;Long span that wraps withing this div.&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;div id="box" style="position: absolute; border-color: red;
+  border-width: 1; border-style: solid; z-index: 10"&gt;
+&lt;/div&gt;
+
+&lt;script&gt;
+  var box = document.getElementById("box");
+  var long = document.getElementById("long");
+  box.style.left = long.offsetLeft + document.body.scrollLeft;
+  box.style.top = long.offsetTop + document.body.scrollTop;
+  box.style.width = long.offsetWidth;
+  box.style.height = long.offsetHeight;
+&lt;/script&gt;
+</pre>
+<h3 id="Voir_aussi" name="Voir_aussi">Voir aussi</h3>
+<p><code><a href="fr/DOM/element.offsetParent">offsetParent</a></code>, <code><a href="fr/DOM/element.offsetTop">offsetTop</a></code>, <code><a href="fr/DOM/element.offsetWidth">offsetWidth</a></code>, <code><a href="fr/DOM/element.offsetHeight">offsetHeight</a></code></p>
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+<p>Cette propriété ne fait partie d'aucun standard ou recommandation technique du W3C.</p>
+<p><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/offsetleft.asp">MSDN: offsetLeft</a></p>
+<p>{{ languages( { "en": "en/DOM/element.offsetLeft", "pl": "pl/DOM/element.offsetLeft" } ) }}</p>
diff --git a/files/fr/web/api/htmlelement/offsetparent/index.html b/files/fr/web/api/htmlelement/offsetparent/index.html
new file mode 100644
index 0000000000..d466de34de
--- /dev/null
+++ b/files/fr/web/api/htmlelement/offsetparent/index.html
@@ -0,0 +1,22 @@
+---
+title: element.offsetParent
+slug: Web/API/HTMLElement/offsetParent
+tags:
+  - DOM
+  - DOM_0
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/HTMLElement/offsetParent
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p>Renvoie une référence à l'objet qui est l'élément conteneur positionné le plus proche (dans la hiérarchie de positionnement). Si l'élément n'est pas positionné, c'est l'élément racine (html en mode de respect des standards ; body en mode de rendu quirks) qui est l'<b>offsetParent</b>.</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<pre class="eval"><i>objetParent</i> = element.offsetParent
+</pre>
+<h3 id="Param.C3.A8tres" name="Param.C3.A8tres">Paramètres</h3>
+<ul>
+ <li><code>objetParent</code> est une référence à l'élément dans lequel l'élément courant est positionné.</li>
+</ul>
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+<p>{{ DOM0() }}</p>
+<p>{{ languages( { "en": "en/DOM/element.offsetParent", "pl": "pl/DOM/element.offsetParent" } ) }}</p>
diff --git a/files/fr/web/api/htmlelement/offsettop/index.html b/files/fr/web/api/htmlelement/offsettop/index.html
new file mode 100644
index 0000000000..6be7a15bd3
--- /dev/null
+++ b/files/fr/web/api/htmlelement/offsettop/index.html
@@ -0,0 +1,50 @@
+---
+title: element.offsetTop
+slug: Web/API/HTMLElement/offsetTop
+tags:
+  - DOM
+  - DOM_0
+translation_of: Web/API/HTMLElement/offsetTop
+---
+<p>{{ ApiRef() }}</p>
+
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+
+<p><strong>offsetTop</strong> renvoie la distance entre l'élément courant et le haut du nœud <a href="/fr/docs/DOM/element.offsetParent"><code>offsetParent</code></a>.</p>
+
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+
+<pre class="eval"><em>topPos</em> = element.offsetTop;
+</pre>
+
+<h3 id="Param.C3.A8tres" name="Param.C3.A8tres">Paramètres</h3>
+
+<ul>
+ <li><code>topPos</code> est le nombre de pixels depuis le haut de l'élément parent.</li>
+</ul>
+
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+
+<pre>d = document.getElementById("div1");
+
+topPos = d.offsetTop;
+
+if (topPos &gt; 10 ) {
+
+    // l'objet est décalé de plus de
+    // 10 pixels par rapport à son parent
+
+}
+</pre>
+
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+
+<p>{{ DOM0() }}</p>
+
+<h3 id="R.C3.A9f.C3.A9rences" name="R.C3.A9f.C3.A9rences">Références</h3>
+
+<p><a class="external" href="http://msdn2.microsoft.com/en-us/library/ms534303.aspx"><em>offsetTop definition</em> sur MSDN</a></p>
+
+<div class="noinclude"> </div>
+
+<p>{{ languages( { "en": "en/DOM/element.offsetTop", "pl": "pl/DOM/element.offsetTop" } ) }}</p>
diff --git a/files/fr/web/api/htmlelement/offsetwidth/index.html b/files/fr/web/api/htmlelement/offsetwidth/index.html
new file mode 100644
index 0000000000..4d65ebae61
--- /dev/null
+++ b/files/fr/web/api/htmlelement/offsetwidth/index.html
@@ -0,0 +1,56 @@
+---
+title: element.offsetWidth
+slug: Web/API/HTMLElement/offsetWidth
+translation_of: Web/API/HTMLElement/offsetWidth
+---
+<p>{{ ApiRef() }}</p>
+
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+
+<p>Renvoie la largeur totale d'un élément.</p>
+
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+
+<pre class="eval">var <em>offsetWidth</em> = <em>element</em>.offsetWidth;
+</pre>
+
+<p><code>offsetWidth</code> est une propriété en lecture seule.</p>
+
+<h3 id="Description" name="Description">Description</h3>
+
+<p>Typiquement, l'attribut <code>offsetWidth</code> est une mesure qui comprend les bordures de l'élément, ses marges internes horizontales (padding), la barre de défilement verticale si présente et affichée, et la largeur CSS de l'élément.</p>
+
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+
+<div id="offsetContainer" style="margin: 26px 0px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: absolute; left: 260px;">
+<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
+<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p>
+
+<p>Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.</p>
+
+<p><span style="float: right;"><img alt="Image:BirmanCat.jpg"></span>All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.</p>
+
+<p>Cat image and text coming from <a class="external" href="http://www.best-cat-art.com/">www.best-cat-art.com</a></p>
+
+<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p>
+</div>
+<strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: -32px; position: absolute; top: 85px;">Left</strong><strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 170px; position: absolute; top: -24px;">Top</strong><strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong><strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong><em>margin-top</em><em>margin-bottom</em><em>border-top</em><em>border-bottom</em><span class="comment">{{ mediawiki.external('if IE') }}&gt;&lt;span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;margin-left&lt;/span&gt;&lt;span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;border-left&lt;/span&gt;&lt;span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;padding-left&lt;/span&gt;&lt;span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;"&gt;padding-right&lt;/span&gt;&lt;span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;border-right&lt;/span&gt;&lt;span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;margin-right&lt;/span&gt;&lt;!{{ mediawiki.external('endif') }}</span></div>
+
+<p style="margin-top: 270px;"><img alt="Image:offsetWidth.png"></p>
+
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+
+<p><code>offsetWidth</code> fait partie du modèle objet <abbr title="Dynamic HyperText Markup Language">DHTML</abbr> de Microsoft Internet Explorer. Elle ne fait partie d'aucune spécification ou recommandation technique du W3C.</p>
+
+<h3 id="Notes" name="Notes">Notes</h3>
+
+<p><code>offsetWidth</code> est une propriété du modèle objet <abbr title="Dynamic HyperText Markup Language">DHTML</abbr> provenant de Microsoft Internet Explorer. On l'appelle parfois la largeur physique ou graphique d'un élément, ou sa largeur « border-box » (bordure et boîte).</p>
+
+<h3 id="R.C3.A9f.C3.A9rences" name="R.C3.A9f.C3.A9rences">Références</h3>
+
+<ul>
+ <li><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/offsetwidth.asp?frame=true"><em>offsetWidth definition</em> sur MSDN</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/workshop/author/om/measuring.asp"><em>Measuring Element Dimension and Location</em> sur MSDN</a></li>
+</ul>
+
+<p>{{ languages( { "en": "en/DOM/element.offsetWidth", "pl": "pl/DOM/element.offsetWidth" } ) }}</p>
diff --git a/files/fr/web/api/htmlelement/outertext/index.html b/files/fr/web/api/htmlelement/outertext/index.html
new file mode 100644
index 0000000000..02b825ffe4
--- /dev/null
+++ b/files/fr/web/api/htmlelement/outertext/index.html
@@ -0,0 +1,93 @@
+---
+title: HTMLElement.outerText
+slug: Web/API/HTMLElement/outerText
+tags:
+  - API
+  - DOM
+  - Propriété
+translation_of: Web/API/HTMLElement/outerText
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>{{ Non-standard_header() }}</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p><strong><code>HTMLElement.outerText</code></strong> n'est pas une propriété standard. En lecture, elle renvoie la même valeur que {{domxref("Node.innerText")}}. En écriture, elle supprime le noeud courant et le remplace par le texte fourni.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Voir <a href="http://stackoverflow.com/questions/18481382/what-is-the-difference-between-innertext-and-outertext/18481435#18481435">cette réponse proposée sur StackOverflow</a>.</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<p>Ne fait partie d'aucune spécification. Discussion de la norme : <a href="https://github.com/whatwg/html/issues/668">whatwg/html#668</a>.</p>
+
+<p>Microsoft en a publié <a href="https://msdn.microsoft.com/en-us/library/ms534311(v=vs.85).aspx">une description sur MSDN</a>.</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Microsoft Edge</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+</div>
+
+<div id="compat-mobile"> </div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Node.innerText")}}</li>
+ <li>{{domxref("Element.outerHTML")}}</li>
+</ul>
diff --git a/files/fr/web/api/htmlelement/style/index.html b/files/fr/web/api/htmlelement/style/index.html
new file mode 100644
index 0000000000..85a19bb89a
--- /dev/null
+++ b/files/fr/web/api/htmlelement/style/index.html
@@ -0,0 +1,57 @@
+---
+title: HTMLElement.style
+slug: Web/API/HTMLElement/style
+tags:
+  - DOM
+  - Style
+translation_of: Web/API/ElementCSSInlineStyle/style
+---
+<p>{{ APIRef("HTML DOM") }}</p>
+
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+
+<p>Renvoie un objet représentant l'attribut <code>style</code> de l'élément.</p>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre class="eval">var div = document.getElementById("div1");
+div.style.marginTop = ".25cm";
+</pre>
+
+<h3 id="Notes" name="Notes">Notes</h3>
+
+<p>Étant donné que la propriété <code>style</code> d'un élément représente sa déclaration de style en-ligne, qui se trouve dans son attribut <code>style</code> et qui a la priorité la plus haute dans la cascade CSS, elle est utile pour définir un style pour un élément particulier.</p>
+
+<p>Cependant, elle n'est pas utile pour connaître le style de l'élément en général, puisqu'elle ne représente que les déclarations CSS définies dans l'attribut <code>style</code> de l'élément, et pas celles qui viennent d'autres règles de style, comme celles qui peuvent se trouver dans la section <code>&lt;head&gt;</code> ou des feuilles de style externes.</p>
+
+<p>Pour obtenir les valeurs de toutes les propriétés CSS pour un élément, vous devriez plutôt utiliser <code><a href="/fr/DOM/window.getComputedStyle" title="fr/DOM/window.getComputedStyle">window.getComputedStyle</a></code>.</p>
+
+<p>Consultez la <a href="/fr/docs/DOM/CSS" title="fr/DOM/CSS">liste des propriétés CSS DOM</a> pour une liste des propriétés CSS accessibles depuis le DOM. Vous y trouverez quelques notes supplémentaires concernant l'utilisation de la propriété <code>style</code> pour styler des éléments dans le DOM.</p>
+
+<p>Il est généralement préférable d'utiliser la propriété <code>style</code> plutôt que <code>elt.setAttribute('style', '...')</code> depuis un script, étant donné que l'utilisation de la propriété <code>style</code> n'écrasera pas les autres propriétés CSS qui peuvent avoir été spécifiées dans l'attribut <code>style</code>.</p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleRule-style">DOM Level 2 Core : style</a> — <small><a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2/style/css.html#CSS-CSSStyleRule-style">traduction en français</a> (non normative)</small></li>
+</ul>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer à ces données, veuillez consulter le site <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.HTMLElement.style")}}</p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification"><span id="1236997045923S" style="display: none;"> </span>Voir aussi</h2>
+
+<ul>
+ <li><a class="internal" href="/en/CSS/CSS_Reference" title="en/CSS/CSS_Reference">Liste des propriétés CSS DOM</a> (en)</li>
+</ul>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Lien Externe</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3schools.com/HTMLDOM/dom_obj_style.asp" title="http://www.w3schools.com/HTMLDOM/dom_obj_style.asp">HTML DOM Style Object</a> — W3Schools.com (en)</li>
+</ul>
+
+<p>{{ languages( { "en": "en/DOM/element.style", "ja": "ja/DOM/element.style", "pl": "pl/DOM/element.style" } ) }}</p>
diff --git a/files/fr/web/api/htmlelement/tabindex/index.html b/files/fr/web/api/htmlelement/tabindex/index.html
new file mode 100644
index 0000000000..b2dd8ca956
--- /dev/null
+++ b/files/fr/web/api/htmlelement/tabindex/index.html
@@ -0,0 +1,25 @@
+---
+title: element.tabIndex
+slug: Web/API/HTMLElement/tabIndex
+tags:
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/HTMLOrForeignElement/tabIndex
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p>Obtient ou définit l'ordre de tabulation de l'élément courant.</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<pre class="eval">element.tabIndex = <em>iIndex</em>;
+</pre>
+<h3 id="Param.C3.A8tres" name="Param.C3.A8tres">Paramètres</h3>
+<ul>
+ <li><code>iIndex</code> est un nombre.</li>
+</ul>
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+<pre>b1 = document.getElementById("button1");
+b1.tabIndex = 1;
+</pre>
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-40676705">DOM Level 2 HTML: tabIndex</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-40676705">traduction en français</a> (non normative)</small></li>
+</ul>
diff --git a/files/fr/web/api/htmlelement/title/index.html b/files/fr/web/api/htmlelement/title/index.html
new file mode 100644
index 0000000000..3b406bc52b
--- /dev/null
+++ b/files/fr/web/api/htmlelement/title/index.html
@@ -0,0 +1,126 @@
+---
+title: HTMLElement.title
+slug: Web/API/HTMLElement/title
+tags:
+  - API
+  - HTML DOM
+  - HTMLElement
+  - Propriété
+  - Reference
+translation_of: Web/API/HTMLElement/title
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p>La propriété <strong><code>HTMLElement.title</code></strong> représente le titre de l'élément, le texte habituellement affiché dans une fenêtre contextuelle d''info-bulle' lorsque la souris survole le nœud affiché.</p>
+
+<div class="note">
+<p>Si un nœud n'a pas d'attribut <code>title</code>, alors l'action par défaut est de l'hériter de son nœud parent, qui peut à son tour l'hériter de son nœud parent, etc..</p>
+
+<pre> &lt;div title="InfoCool"&gt;
+   &lt;div title=""&gt;le survol de la souris ici fera apparaître "InfoCool"&lt;/div&gt;
+   &lt;div title=" "&gt;le survol de la souris ici ne fera rien apparaître&lt;/div&gt;
+ &lt;/div&gt;
+</pre>
+</div>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="eval">var <em>chn</em> = <em>element</em>.title;<em>
+</em>element.title = <em>chn</em>;
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js"> bouton1.title = "cliquer pour rafraîchir";
+</pre>
+
+<h2 id="Specification" name="Specification">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('HTML WHATWG', '#dom-title', 'title')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Pas de changement par rapport à la {{SpecName('DOM2 HTML')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-78276800', 'title')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>Pas de changement par rapport à la {{SpecName('DOM1')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-78276800', 'title')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome pour 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>Support de base</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'attribut HTML global <a href="/fr/docs/Web/HTML/Attributs_universels/title"><strong>title</strong></a>.</li>
+</ul>
diff --git a/files/fr/web/api/htmlformcontrolscollection/index.html b/files/fr/web/api/htmlformcontrolscollection/index.html
new file mode 100644
index 0000000000..7924983b8c
--- /dev/null
+++ b/files/fr/web/api/htmlformcontrolscollection/index.html
@@ -0,0 +1,64 @@
+---
+title: HTMLFormControlsCollection
+slug: Web/API/HTMLFormControlsCollection
+tags:
+  - API
+  - Collection
+  - DOM
+  - Interface
+translation_of: Web/API/HTMLFormControlsCollection
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>L'interface <strong><code>HTMLFormControlsCollection</code></strong> représente une <em>collection</em> <em>d'éléments de contrôle de formulaires</em>. Il représente les listes retournées par le {{domxref("HTMLFormElement")}} et le {{domxref("HTMLFieldSetElement")}} de la propriété d'interface {{domxref("HTMLFieldSetElement.elements", "elements")}}.</p>
+
+<p>Cette interface remplace une méthode de {{domxref("HTMLCollection")}}, sur laquelle elle est basée.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Cette interface hérite des propriétés de son parent {{domxref("HTMLCollection")}}.</em></p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Cette interface hérite des méthodes de son parent {{domxref("HTMLCollection")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLFormControlsCollection.namedItem()")}}</dt>
+ <dd>Renvoie la {{domxref("RadioNodeList")}} (<em>liste de noeuds radio</em>) ou l'{{domxref("Element")}} dans la collection dont le <code>name</code> (<em>nom</em>) ou l'<code>id</code> (<em>identifiant</em>) correspond au nom spécifié, ou <code>null</code> si aucun noeud ne correspond. Noter que cette version de <code>namedItem()</code> cache celui hérité de {{domxref("HTMLCollection")}}. Comme pour le premier, en JavaScript, en utilisant le crochet de la syntaxe de tableau (<em>array</em>) avec une {{jsxref("String")}} (<em>chaîne de caractères</em>), <code><em>collection</em>["value"]</code> est équivalent à <code><em>collection</em>.namedItem("value")</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">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "infrastructure.html#htmlformcontrolscollection", "HTMLFormControlsCollection")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Pas de changement depuis le dernier instantané {{SpecName('HTML5 W3C')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "infrastructure.html#htmlformcontrolscollection", "HTMLFormControlsCollection")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Dans cet instantané de {{SpecName("HTML WHATWG")}}, <code>HTMLFormControlsCollections</code> est défini pour la première fois.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.HTMLFormControlsCollection")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("HTMLCollection")}}, {{domxref("RadioNodeList")}}, {{domxref("HTMLOptionsCollection")}}</li>
+</ul>
diff --git a/files/fr/web/api/htmlformelement/acceptcharset/index.html b/files/fr/web/api/htmlformelement/acceptcharset/index.html
new file mode 100644
index 0000000000..281ebf7a43
--- /dev/null
+++ b/files/fr/web/api/htmlformelement/acceptcharset/index.html
@@ -0,0 +1,27 @@
+---
+title: HTMLFormElement.acceptCharset
+slug: Web/API/HTMLFormElement/acceptCharset
+tags:
+  - HTMLFormElement
+translation_of: Web/API/HTMLFormElement/acceptCharset
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>La propriété <code><strong>HTMLFormElement.acceptCharset</strong></code> représente une liste des codages de caratères acceptés par l'élément FORM concerné. Les valeurs de cette liste peuvent être séparés par des virgules ou des espaces.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="eval"><em>string</em> = form.acceptCharset;
+form.acceptCharset = <em>string</em><code>;</code>
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="eval">inputs = document.forms["myform"].acceptCharset
+</pre>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<p><a class="external" href="http://www.w3.org/TR/html5/forms.html#dom-form-acceptcharset" title="http://www.w3.org/TR/html5/forms.html#dom-form-acceptcharset">HTML 5, Section 4.10.3: The Form Element</a></p>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-19661795">DOM Level 2 HTML: acceptCharset</a></p>
diff --git a/files/fr/web/api/htmlformelement/action/index.html b/files/fr/web/api/htmlformelement/action/index.html
new file mode 100644
index 0000000000..7963547cd3
--- /dev/null
+++ b/files/fr/web/api/htmlformelement/action/index.html
@@ -0,0 +1,26 @@
+---
+title: HTMLFormElement.action
+slug: Web/API/HTMLFormElement/action
+translation_of: Web/API/HTMLFormElement/action
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>La propriété <strong><code>HTMLFormElement.action</code></strong> représente l'action associée à l'élément {{HTMLElement("form")}}.</p>
+
+<p>L'action d'un formulaire est le programme exécuté sur le serveur lorsque le formulaire est soumis. Cette propriété peut être récupérée ou définie.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="eval"><em>string</em> = form.action
+form.action = <em>string</em>
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<p>form.action = "/cgi-bin/publish";</p>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<p><a class="external" href="http://www.w3.org/TR/html5/association-of-controls-and-forms.html#dom-fs-method" title="http://www.w3.org/TR/html5/association-of-controls-and-forms.html#dom-fs-method">HTML 5, Section 4.10.19.6, Form submission</a></p>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-74049184">DOM Level 2 HTML: action</a></p>
diff --git a/files/fr/web/api/htmlformelement/elements/index.html b/files/fr/web/api/htmlformelement/elements/index.html
new file mode 100644
index 0000000000..14ba012b3b
--- /dev/null
+++ b/files/fr/web/api/htmlformelement/elements/index.html
@@ -0,0 +1,31 @@
+---
+title: HTMLFormElement.elements
+slug: Web/API/HTMLFormElement/elements
+translation_of: Web/API/HTMLFormElement/elements
+---
+<div>
+<div>{{APIRef("HTML DOM")}}</div>
+</div>
+
+<p>La propriété <code><strong>HTMLFormElement.elements</strong></code> retourne une {{domxref("HTMLFormControlsCollection")}} ({{ HTMLVersionInline(4) }} <code><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-75708506">HTMLCollection</a></code>) de tous les contrôles de formulaire contenu dans l'élément FORM, à l'exception des éléments de type <a href="/fr-FR/docs/HTML/Element/Input" title="input">input</a> dont l'attribut <code>type</code> est égal à <code>image</code>.</p>
+
+<p>Vous pouvez accéder à un élément particulier en utilisant soit un index soit le <code>name</code> ou l'<code>id</code> de l'élément.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>nodeList</em> = <em>HTMLFormElement</em>.elements
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush:js">var inputs = document.getElementById("form1").elements;
+var inputByIndex = inputs[2];
+var inputByName = inputs["login"];
+</pre>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/html5/forms.html#dom-form-elements" title="http://www.w3.org/TR/html5/forms.html#dom-form-elements">HTML5, Section 4.10.3, The form Element</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-76728479">DOM Level 2 HTML: elements</a></li>
+</ul>
diff --git a/files/fr/web/api/htmlformelement/encoding/index.html b/files/fr/web/api/htmlformelement/encoding/index.html
new file mode 100644
index 0000000000..43c942335d
--- /dev/null
+++ b/files/fr/web/api/htmlformelement/encoding/index.html
@@ -0,0 +1,10 @@
+---
+title: HTMLFormElement.encoding
+slug: Web/API/HTMLFormElement/encoding
+translation_of: Web/API/HTMLFormElement/encoding
+---
+<div>
+<div>{{APIRef("HTML DOM")}}</div>
+</div>
+
+<p>La propriété <strong><code>HTMLFormElement.encoding</code></strong> est un nom alternatif pour l'élément {{domxref("HTMLFormElement.enctype","enctype")}} de l'objet {{domxref("HTMLFormElement")}} du DOM.</p>
diff --git a/files/fr/web/api/htmlformelement/enctype/index.html b/files/fr/web/api/htmlformelement/enctype/index.html
new file mode 100644
index 0000000000..c78cfc4b29
--- /dev/null
+++ b/files/fr/web/api/htmlformelement/enctype/index.html
@@ -0,0 +1,26 @@
+---
+title: HTMLFormElement.enctype
+slug: Web/API/HTMLFormElement/enctype
+translation_of: Web/API/HTMLFormElement/enctype
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>La propriété <code><strong>HTMLFormElement.enctype</strong></code> représente le type de contenu de l'élément  {{HTMLElement("form")}}.</p>
+
+<p>Le type d'encodage généralement utilisé est "application/x-www-form-urlencoded".</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="eval"><em>string</em> = form.enctype
+form.enctype = <em>string</em>
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="eval">form.enctype = "application/x-www-form-urlencoded";</pre>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<p><a class="external" href="http://www.w3.org/TR/html5/forms.html#attr-fs-enctype" title="http://www.w3.org/TR/html5/association-of-controls-and-forms.html#dom-fs-method">HTML 5, Section 4.10.19.6, Form submission</a></p>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-84227810">DOM Level 2 HTML: enctype</a></p>
diff --git a/files/fr/web/api/htmlformelement/index.html b/files/fr/web/api/htmlformelement/index.html
new file mode 100644
index 0000000000..6cbdaa5313
--- /dev/null
+++ b/files/fr/web/api/htmlformelement/index.html
@@ -0,0 +1,223 @@
+---
+title: form
+slug: Web/API/HTMLFormElement
+tags:
+  - API
+  - Contrôles
+  - DOM
+  - Formulaire
+  - HTML
+  - Interface
+translation_of: Web/API/HTMLFormElement
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>L'interface <strong><code>HTMLFormElement</code></strong> représente un élément  {{HTMLElement("form")}} dans le DOM ; il peut être utilisé pour accéder et, dans quelques cas, modifier l'aspect du formulaire, ainsi que pour accéder à ses éléments composants.</p>
+
+<p>{{InheritanceDiagram(600,120)}}</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Cette interface hérite aussi des propriétés de son parent {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLFormElement.elements")}}{{ReadOnlyInline}}</dt>
+ <dd>Un élément {{domxref("HTMLFormControlsCollection")}} regroupant les différents contrôles associés à ce formulaire.</dd>
+ <dt>{{domxref("HTMLFormElement.length")}}{{ReadOnlyInline}}</dt>
+ <dd>Une valeur de type <code>long</code> indiquant le nombre de contrôles dans le formulaire.</dd>
+ <dt>{{domxref("HTMLFormElement.name")}}</dt>
+ <dd>Une chaîne {{domxref("DOMString")}} indiquant la valeur de l'attribut HTML {{htmlattrxref("name", "form")}} pour ce formulaire et qui correspond au nom du formulaire.</dd>
+ <dt>{{domxref("HTMLFormElement.method")}}</dt>
+ <dd>Une chaîne {{domxref("DOMString")}} indiquant la valeur de l'attribut HTML {{htmlattrxref("method", "form")}} pour ce formulaire et qui correspond à la méthode HTTP utilisée pour envoyer le formulaires. Seules certaines valeurs peuvent être utilisées avec cette propriété.</dd>
+ <dt>{{domxref("HTMLFormElement.target")}}</dt>
+ <dd>Une chaîne {{domxref("DOMString")}} indiquant la valeur de l'attribut HTML {{htmlattrxref("target", "form")}} pour ce formulaire et qui indique l'emplacement où seront affichées les résultats après envoi du formulaire.</dd>
+ <dt>{{domxref("HTMLFormElement.action")}}</dt>
+ <dd>Une chaîne {{domxref("DOMString")}} indiquant la valeur de l'attribut HTML {{htmlattrxref("action", "form")}} pour ce formulaire et qui contient l'URI d'un programme traitant les informations transmises via le formulaire.</dd>
+ <dt>{{domxref("HTMLFormElement.encoding")}} ou {{domxref("HTMLFormElement.enctype")}}</dt>
+ <dd>Une chaîne {{domxref("DOMString")}} indiquant la valeur de l'attribut HTML {{htmlattrxref("enctype", "form")}} pour ce formulaire et qui correspond au type de contenu utilisé pour transmettre les données du formulaire vers le serveur. Seules certaines valeurs peuvent être utilisées pour cette propriété. Les deux noms indiqués pour la méthode sont synonymes.</dd>
+ <dt>{{domxref("HTMLFormElement.acceptCharset")}}</dt>
+ <dd>Une chaîne {{domxref("DOMString")}} indiquant la valeur de l'attribut HTML {{htmlattrxref("accept-charset", "form")}} pour ce formulaire et qui correspond au jeu de caractères / à l'encodage pris en charge par le serveur.</dd>
+ <dt>{{domxref("HTMLFormElement.autocomplete")}}</dt>
+ <dd>Une chaîne {{domxref("DOMString")}} indiquant la valeur de l'attribut HTML {{htmlattrxref("autocomplete", "form")}} pour ce formulaire et qui indique si les contrôles du formulaire sont automatiquement renseignés par le navigateur.</dd>
+ <dt>{{domxref("HTMLFormElement.noValidate")}}</dt>
+ <dd>Un booléen indiquant la valeur de l'attribut HTML {{htmlattrxref("novalidate", "form")}} pour ce formulaire et qui indique si le formulaire ne devrait pas être validé.</dd>
+</dl>
+
+<p>Les champs de saisie nommés sont ajoutés comme propriétés sur leurs formulaires associés. Ces propriétés peuvent surcharger les propriétés natives si elles utilisent le même nom ! Par exemple, un formulaire disposant d'un {{HTMLElement("&lt;input&gt;")}} nommé <code>action</code> surchargera la propriété native <code>action</code> et tout appel renverra le champ <code>input</code> plutôt que la valeur de l'attribut HTML {{htmlattrxref("action", "form")}}.</p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Cette interface hérite aussi des méthodes de son parent {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLFormElement.submit()")}}</dt>
+ <dd>soumet le formulaire au serveur.</dd>
+ <dt>{{domxref("HTMLFormElement.reset()")}}</dt>
+ <dd>redéfinit le formulaire à son état initial.</dd>
+ <dt>{{domxref("HTMLFormElement.checkValidity()")}}</dt>
+ <dd>renvoie <code>true</code> si les contrôles du formulaire sont soumis à des contraintes de validation et les respectent. Elle renvoie <code>false</code> si certains contrôles ne respectent pas leurs contraintes. Elle déclenche un évènement {{event("invalid")}} pour chaque contrôle qui ne respecte pas ses contraintes. De tels contrôles sont considérés invalides si l'évènement n'est pas annulé. C'est au développeur de choisir comment réagir face à la valeur <code>false</code> produite par cette méthode.</dd>
+ <dt>{{domxref("HTMLFormElement.reportValidity()")}}</dt>
+ <dd>renvoie <code>true</code> si les contrôles du formulaire respectent leurs contraintes de validation. Lorsque <code>false</code> est renvoyé, des évènements annulables {{Event("invalid")}} sont déclenchés pour chaque contrôle invalide et les problèmes de validation sont rapportés à l'utilisateur.</dd>
+ <dt>{{domxref("HTMLFormElement.requestAutocomplete()")}} {{obsolete_inline}}</dt>
+ <dd>déclenche une interface native du navigateur afin d'aider les utilisateurs à remplir les champs pour lesquels <a href="https://html.spec.whatwg.org/#autofill-field-name">la valeur nommée du champ à remplissage automatique</a> ne vaut pas <code>off</code> ou <code>on</code>. Le formulaire reçoit un évènement lorsque l'utilisateur a fini d'intéragir avec l'interface, l'événement sera {{event("autocomplete")}} si les champs ont bien été remplis ou {{event("autocompleteerror")}} s'il y a eu un problème. <strong>Cette méthode a été retirée de Chrome et Firefox — cf. {{bug(1270740)}} pour plus d'informations et les raisons associées.</strong></dd>
+</dl>
+
+<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
+
+<h3 id="Obtention_d'un_objet_élément_de_formulaire">Obtention d'un objet élément de formulaire</h3>
+
+<p>Pour obtenir un objet <code>HTMLFormElement</code>, vous pouvez utiliser un <a href="https://developer.mozilla.org/fr/docs/Web/CSS/S%C3%A9lecteurs_CSS">sélecteur CSS</a> avec {{domxref("ParentNode.querySelector", "querySelector()")}}  ou vous pouvez obtenir une liste de tous les formulaires du document utilisant sa propriété {{domxref("Document.forms", "forms")}}.</p>
+
+<p>{{domxref("Document.forms")}} renvoie un tableau des objets <code>HTMLFormElement</code> listant chacun des formulaires de la page. Vous pouvez utiliser alors l'une des syntaxes suivantes pour obtenir un formulaire individuel :</p>
+
+<dl>
+ <dt><code>document.forms[<em>index</em>]</code></dt>
+ <dd>renvoie le formulaire à l'<code>index</code> spécifié dans le tableau du formulaire.</dd>
+ <dt><code>document.forms[<em>id</em>]</code></dt>
+ <dd>renvoie le formulaire dont l'ID (<em>identifiant</em>) est <code>id</code> .</dd>
+ <dt><code>document.forms[<em>name</em>]</code></dt>
+ <dd>renvoie le formulaire dont la valeur d'attribut de {{domxref("Element.name", "name")}} est <code>name</code>.</dd>
+</dl>
+
+<h3 id="Accès_aux_éléments_du_formulaire">Accès aux éléments du formulaire</h3>
+
+<p>Vous pouvez accéder à la liste des éléments contenant des données dans le formulaire en examinant la propriété {{domxref ("HTMLFormElement.elements", "elements")}}. Ceci retourne une {{domxref ("HTMLFormControlsCollection")}} listant tous les éléments d'entrée de données utilisateur du formulaire, aussi bien ceux qui sont des descendants du <code>&lt;form&gt;</code> que ceux déclarés membres du formulaire par leurs attributs.</p>
+
+<h3 id="Éléments_considérés_comme_des_contrôles_de_formulaire">Éléments considérés comme des contrôles de formulaire</h3>
+
+<p>Les éléments qui sont inclus par <code>HTMLFormElement.elements</code> et  <code>HTMLFormElement.length</code> sont :</p>
+
+<ul>
+ <li>{{HTMLElement("button")}} (<em>bouton</em>)</li>
+ <li>{{HTMLElement("fieldset")}} (<em>champ</em>s)</li>
+ <li>{{HTMLElement("input")}} (<em>entrée</em>) (à l'exception de ceux dont {{htmlattrxref("type", "input")}} est <code>"image"</code> omis pour des raisons historiques)</li>
+ <li>{{HTMLElement("object")}} (<em>objet</em>)</li>
+ <li>{{HTMLElement("output")}} (<em>sortie</em>)</li>
+ <li>{{HTMLElement("select")}} (<em>sélection</em>)</li>
+ <li>{{HTMLElement("textarea")}} (<em>zone de texte</em>)</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Crée un nouvel élément de formulaire, modifie ses attributs et l'envoie :</p>
+
+<pre class="brush: js">var f = document.createElement("form"); // On crée un formulaire
+document.body.appendChild(f);           // On l'ajoute au corps du document
+f.action = "/cgi-bin/some.cgi";         // On y ajoute des attributs action et method
+f.method = "POST"
+f.submit();                             // On appelle la méhtode submit pour l'envoyer
+</pre>
+
+<p id="Extraction_d'informations_et_définition_d'attributs">Extrait des informations d'un élément de formulaire et définit quelques uns de ses attributs :</p>
+
+<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>form</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>formA<span class="punctuation token">"</span></span> <span class="attr-name token">action</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>/cgi-bin/test<span class="punctuation token">"</span></span> <span class="attr-name token">method</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>post<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+ <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;Appuyez sur "Info" pour les détails du formulaire, ou "Définir" pour modifier ces détails</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">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>getFormInfo();<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Info<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>button</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>setFormInfo(this.form);<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Set<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>button</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>reset<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Reset<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>textarea</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>form-info<span class="punctuation token">"</span></span> <span class="attr-name token">rows</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>15<span class="punctuation token">"</span></span> <span class="attr-name token">cols</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>20<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>textarea</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>form</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
+  <span class="keyword token">function</span> <span class="function token">getFormInfo</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span>
+    <span class="comment token">// Obtenir une référence au formulaire par son nom</span>
+    <span class="keyword token">var</span> f <span class="operator token">=</span> document<span class="punctuation token">.</span>forms<span class="punctuation token">[</span><span class="string token">"formA"</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
+    <span class="comment token">// Les propriétés du formulaire qui nous intéressent</span>
+    <span class="keyword token">var</span> properties <span class="operator token">=</span> <span class="punctuation token">[</span> <span class="string token">'elements'</span><span class="punctuation token">,</span> <span class="string token">'length'</span><span class="punctuation token">,</span> <span class="string token">'name'</span><span class="punctuation token">,</span> <span class="string token">'charset'</span><span class="punctuation token">,</span> <span class="string token">'action'</span><span class="punctuation token">,</span> <span class="string token">'acceptCharset'</span><span class="punctuation token">,</span> <span class="string token">'action'</span><span class="punctuation token">,</span> <span class="string token">'enctype'</span><span class="punctuation token">,</span> <span class="string token">'method'</span><span class="punctuation token">,</span> <span class="string token">'target'</span> <span class="punctuation token">]</span><span class="punctuation token">;</span>
+    <span class="comment token">// Itérer sur les propriétés en les transformant en une chaîne que nous pouvons afficher à l'utilisateur</span>
+    <span class="keyword token">var</span> info <span class="operator token">=</span> properties<span class="punctuation token">.</span><span class="function token">reduce</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>property<span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="keyword token">return</span> property <span class="operator token">+</span> <span class="string token">": "</span> <span class="operator token">+</span> f<span class="punctuation token">[</span>property<span class="punctuation token">]</span> <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="string token">""</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">join</span><span class="punctuation token">(</span><span class="string token">"\n"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+    <span class="comment token">// Définir les &lt;textarea&gt; du formulaire pour en afficher les propriétés</span>
+    document<span class="punctuation token">.</span>forms<span class="punctuation token">[</span><span class="string token">"formA"</span><span class="punctuation token">]</span><span class="punctuation token">.</span>elements<span class="punctuation token">[</span><span class="string token">'form-info'</span><span class="punctuation token">]</span><span class="punctuation token">.</span>value <span class="operator token">=</span> info<span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+
+  <span class="keyword token">function</span> <span class="function token">setFormInfo</span><span class="punctuation token">(</span>f<span class="punctuation token">)</span><span class="punctuation token">{</span> <span class="comment token">//L'argument doit être une référence d'élément de formulaire.</span>
+    f<span class="punctuation token">.</span>action <span class="operator token">=</span> <span class="string token">"a-different-url.cgi"</span><span class="punctuation token">;</span>
+    f<span class="punctuation token">.</span>name   <span class="operator token">=</span> <span class="string token">"a-different-name"</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p id="Envoyer_un_formulaire_via_une_popup">Envoi d'un formulaire dans une nouvelle fenêtre :</p>
+
+<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>!doctype</span> <span class="attr-name token">html</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>meta</span> <span class="attr-name token">charset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>utf-8<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>title</span><span class="punctuation token">&gt;</span></span>Example new-window form submission<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>title</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>form</span> <span class="attr-name token">action</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>test.php<span class="punctuation token">"</span></span> <span class="attr-name token">target</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>_blank<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>label</span><span class="punctuation token">&gt;</span></span>First name: <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>firstname<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</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>label</span><span class="punctuation token">&gt;</span></span>Last name: <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>lastname<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</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>label</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>password<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pwd<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</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>fieldset</span><span class="punctuation token">&gt;</span></span>
+   <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>legend</span><span class="punctuation token">&gt;</span></span>Pet preference<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>legend</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>label</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>radio<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pet<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>cat<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span> Cat<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</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>label</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>radio<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pet<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>dog<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span> Dog<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</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>fieldset</span><span class="punctuation token">&gt;</span></span>
+
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>fieldset</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>legend</span><span class="punctuation token">&gt;</span></span>Owned vehicles<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>legend</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>label</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>checkbox<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>vehicle<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Bike<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>I have a bike<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</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>label</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>checkbox<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>vehicle<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Car<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>I have a car<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</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>fieldset</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="punctuation token">&gt;</span></span>Submit<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>form</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h3 id="Envoi_de_formulaires_et_téléchargement_de_fichiers_en_utilisant_XMLHttpRequest">Envoi de formulaires et téléchargement de fichiers en utilisant <code>XMLHttpRequest</code></h3>
+
+<p>Vous pouvez consulter <a href="https://developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest#Submitting_forms_and_uploading_files">ce paragraphe</a> si vous souhaitez en savoir plus pour sérialiser et envoyer un formulaire grâce à l'API {{domxref("XMLHttpRequest")}}.</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', "forms.html#the-form-element", "HTMLFormElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Ajout de la méthode <code>requestAutocomplete()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "forms.html#the-form-element", "HTMLFormElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Les propriétés de l'élément renvoient un élément {{domxref("HTMLFormControlsCollection")}} plutôt qu'un {{domxref("HTMLCollection")}} (changement principalement technique). Ajout de la méthode <code>checkValidity()</code>. Ajout des propriétés <code>autocomplete</code>, <code>noValidate</code> et <code>encoding</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-40002357', 'HTMLFormElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-40002357', 'HTMLFormElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.HTMLFormElement")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'élément HTML qui implémente cette interface {{HTMLElement("form")}}.</li>
+</ul>
diff --git a/files/fr/web/api/htmlformelement/length/index.html b/files/fr/web/api/htmlformelement/length/index.html
new file mode 100644
index 0000000000..9ca717ea44
--- /dev/null
+++ b/files/fr/web/api/htmlformelement/length/index.html
@@ -0,0 +1,29 @@
+---
+title: HTMLFormElement.length
+slug: Web/API/HTMLFormElement/length
+translation_of: Web/API/HTMLFormElement/length
+---
+<div>
+<div>{{APIRef("HTML DOM")}}</div>
+</div>
+
+<p>La propriété en lecture seule <code><strong>HTMLFormElement.length</strong></code> retourne le nombre de contrôles présents dans l'élément {{HTMLElement("Form")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>integer</var> = form.length
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush:js">if (document.getElementById("form1").length &gt; 1) {
+  // more than one form control here
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Spécifications</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/html5/forms.html#dom-form-length" title="http://www.w3.org/TR/html5/forms.html#dom-form-length">HTML 5, Section 4.10.3, The form Element</a></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#HTML-HTMLFormElement-length">DOM Level 2: length</a></li>
+</ul>
diff --git a/files/fr/web/api/htmlformelement/method/index.html b/files/fr/web/api/htmlformelement/method/index.html
new file mode 100644
index 0000000000..5072c652ab
--- /dev/null
+++ b/files/fr/web/api/htmlformelement/method/index.html
@@ -0,0 +1,25 @@
+---
+title: HTMLFormElement.method
+slug: Web/API/HTMLFormElement/method
+translation_of: Web/API/HTMLFormElement/method
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>La propriété <code><strong>HTMLFormElement.method</strong></code> représente la méthode HTTP utilisée pour soumettre un formulaire.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="eval"><em>string</em> = form.method
+form.method = <em>string</em>
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="eval">document.forms["myform"].method = "post";
+</pre>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<p><a class="external" href="http://www.w3.org/TR/html5/association-of-controls-and-forms.html#dom-fs-method" title="http://www.w3.org/TR/html5/association-of-controls-and-forms.html#dom-fs-method">HTML 5, Section 4.10.19.6, Form submission</a></p>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-82545539">DOM Level 2 HTML: method</a></p>
diff --git a/files/fr/web/api/htmlformelement/name/index.html b/files/fr/web/api/htmlformelement/name/index.html
new file mode 100644
index 0000000000..6a144b2e79
--- /dev/null
+++ b/files/fr/web/api/htmlformelement/name/index.html
@@ -0,0 +1,32 @@
+---
+title: HTMLFormElement.name
+slug: Web/API/HTMLFormElement/name
+translation_of: Web/API/HTMLFormElement/name
+---
+<div>
+<div>{{APIRef("HTML DOM")}}</div>
+</div>
+
+<p>La propriété <code>HTMLFormElement.name</code> représente le nom de l'élément <code>form</code> sous la forme d'une chaîne de caratères.</p>
+
+<p>Si votre {{HTMLElement("Form")}} contient un élément appelé <em>name</em>, alors ce dernier redéfinit la propriété <code>form.name</code>, afin que vous ne puissiez y accéder. Internet Explorer (IE) bloque la définition ou la modification du nom d'un élément créé avec <code>createElement()</code> à partir de la propriété <code>name</code>.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>string</em> = form.name
+form.name = <em>string</em></pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush:js">var form1name = document.getElementById("form1").name;
+
+if (form1name != document.form.form1) {
+   // browser doesn't support this form of reference
+}</pre>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/html5/forms.html#dom-form-name" title="http://www.w3.org/TR/html5/forms.html#dom-form-name">HTML 5, Section 4.10.3, The form Element</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-22051454">DOM Level 2 HTML: name</a></li>
+</ul>
diff --git a/files/fr/web/api/htmlformelement/reportvalidity/index.html b/files/fr/web/api/htmlformelement/reportvalidity/index.html
new file mode 100644
index 0000000000..ea685b944c
--- /dev/null
+++ b/files/fr/web/api/htmlformelement/reportvalidity/index.html
@@ -0,0 +1,60 @@
+---
+title: HTMLFormElement.reportValidity()
+slug: Web/API/HTMLFormElement/reportValidity
+tags:
+  - HTML
+  - Méthode
+translation_of: Web/API/HTMLFormElement/reportValidity
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><span class="tlid-translation translation"><span title="">La méthode</span></span>  <strong><code>HTMLFormElement.reportValidity()</code></strong> <span class="tlid-translation translation"><span title="">renvoie true si les contrôles enfants de l'élément répondent à leurs contraintes de validation.</span> <span title="">Lorsque la valeur</span></span> <code>false</code> <span class="tlid-translation translation"><span title="">est renvoyée,</span></span> ,  <span class="tlid-translation translation"><span title="">les événements</span></span> <code><a href="https://developer.mozilla.org/en-US/docs/Web/Events/invalid">invalid</a></code> <span class="tlid-translation translation"><span title="">annulables sont déclenchés pour chaque enfant non valide et les problèmes de validation sont signalés à l'utilisateur.</span></span> .</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>HTMLFormElement</em>.reportValidity()
+</pre>
+
+<h3 id="Valeur_de_retour"><span class="tlid-translation translation"><span title="">Valeur de retour</span></span></h3>
+
+<p>{{domxref("Boolean")}}</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">document.forms['myform'].addEventListener('invalid', function() {
+  // Optional response here
+}, false);
+
+document.forms['myform'].addEventListener('submit', function() {
+  document.forms['myform'].reportValidity();
+}, false);</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "forms.html#dom-cva-reportvalidity", "HTMLFormElement.reportValidity()")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.1", "semantics.html#the-constraint-validation-api", "HTMLFormElement.reportValidity()")}}</td>
+   <td>{{Spec2("HTML5.1")}}</td>
+   <td><span class="tlid-translation translation"><span title="">Définition initiale</span></span></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_du_navigateur"><span class="tlid-translation translation"><span title="">Compatibilité du navigateur</span></span></h2>
+
+<div class="hidden"><span class="tlid-translation translation"><span title="">Le tableau de compatibilité sur cette page est généré à partir de données structurées.</span> <span title="">Si vous souhaitez contribuer aux données, veuillez consulter</span></span>  <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> <span class="tlid-translation translation"><span title="">et envoyez-nous une</span></span> requête .</div>
+
+<p>{{Compat("api.HTMLFormElement.reportValidity")}}</p>
diff --git a/files/fr/web/api/htmlformelement/reset/index.html b/files/fr/web/api/htmlformelement/reset/index.html
new file mode 100644
index 0000000000..7ed17f275f
--- /dev/null
+++ b/files/fr/web/api/htmlformelement/reset/index.html
@@ -0,0 +1,28 @@
+---
+title: HTMLFormElement.reset()
+slug: Web/API/HTMLFormElement/reset
+tags:
+  - API
+  - HTML DOM
+  - HTMLFormElement
+  - Méthode
+  - Reference
+translation_of: Web/API/HTMLFormElement/reset
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>La méthode <strong><code>HTMLFormElement.reset()</code></strong> restaure les valeurs par défaut des éléments du formulaire. Cette méthode fait la même chose que lorsqu'on clique sur un bouton de type <code>reset</code>.</p>
+
+<p>Si un élément du formulaire (comme un bouton reset par exemple) a un <code>name</code> ou <code>id</code> valant <var>reset</var>, celui-ci remplacera la méthode reset du formulaire. Les attributs des éléments, comme <code>disabled</code>, ne sont pas réinitialisés.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="eval"><em>HTMLFormElement</em>.reset()
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="eval">document.getElementById("myform").reset();
+</pre>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
diff --git a/files/fr/web/api/htmlformelement/submit/index.html b/files/fr/web/api/htmlformelement/submit/index.html
new file mode 100644
index 0000000000..4dfb9ba3f0
--- /dev/null
+++ b/files/fr/web/api/htmlformelement/submit/index.html
@@ -0,0 +1,42 @@
+---
+title: HTMLFormElement.submit()
+slug: Web/API/HTMLFormElement/submit
+tags:
+  - HTML DOM
+  - HTMLFormElement
+  - Méthode
+translation_of: Web/API/HTMLFormElement/submit
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><span class="tlid-translation translation"><span title="">La méthode</span></span>  <strong><code>HTMLFormElement.submit()</code></strong>  <span class="tlid-translation translation"><span title="">soumet un</span></span> {{HtmlElement("form")}} <span class="tlid-translation translation"><span title="">donné</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Cette méthode est similaire, mais pas identique, à l’activation du script submit {{HtmlElement ("button")}}.</span> <span title="">Lors de l'appel direct de cette méthode, cependant:</span></span></p>
+
+<ul>
+ <li><span class="tlid-translation translation"><span title="">Aucun événement {{event ("submit")}} n'est déclenché.</span> <span title="">En particulier, le formulaire</span></span>  </li>
+ <li>{{domxref("GlobalEventHandlers.onsubmit", "onsubmit")}}  <span class="tlid-translation translation"><span title="">le gestionnaire d'événement n'est pas exécuté</span></span> .</li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">Constraint validation</a> <span class="tlid-translation translation"><span title="">n'est pas déclenché</span></span> .</li>
+</ul>
+
+<p><span class="tlid-translation translation"><span title="">Si un contrôle de formulaire (tel qu'un</span></span>  submit <span class="tlid-translation translation"><span title="">bouton</span></span> ) <span class="tlid-translation translation"><span title="">a un</span></span><code>name</code> ou un <code>id</code> de <code>submit</code>, <span class="tlid-translation translation"><span title="">cette méthode masquera la méthode d'envoi du formulaire.</span></span></p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>HTMLFormElement</em>.submit()
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">document.forms["myform"].submit();
+</pre>
+
+<h2 id="Specification">Specification</h2>
+
+<p><a href="https://html.spec.whatwg.org/multipage/forms.html#the-form-element">HTML Living standard: The form element</a></p>
+
+<h2 id="Compatibilité_du_navigateur"><span class="tlid-translation translation"><span title="">Compatibilité du navigateur</span></span></h2>
+
+<div class="hidden"><span class="tlid-translation translation"><span title="">Le tableau de compatibilité sur cette page est généré à partir de données structurées.</span> <span title="">Si vous souhaitez contribuer aux données, veuillez consulter</span></span>  <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> <span class="tlid-translation translation"><span title="">et envoyez-nous une</span></span> requête.</div>
+
+<p>{{Compat("api.HTMLFormElement.submit")}}</p>
diff --git a/files/fr/web/api/htmlformelement/submit_event_/index.html b/files/fr/web/api/htmlformelement/submit_event_/index.html
new file mode 100644
index 0000000000..135058c596
--- /dev/null
+++ b/files/fr/web/api/htmlformelement/submit_event_/index.html
@@ -0,0 +1,59 @@
+---
+title: submit
+slug: Web/API/HTMLFormElement/submit_event_
+translation_of: Web/API/HTMLFormElement/submit_event
+---
+<p>L’événement <code>submit</code> est émis lorsqu’un formulaire est soumis au serveur.</p>
+
+<p>Notez que l’événement <code>submit</code> se déclenche <strong>uniquement</strong> sur <a href="/fr-FR/docs/Web/HTML/Element/form">l’élement form</a>, et pas sur les éléments <a href="/fr-FR/docs/Web/HTML/Element/button">button</a> ou <a href="/fr/docs/Web/HTML/Element/Input/submit">input submit</a>. (Les formulaires sont soumis, pas les boutons.)</p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#form-submission-algorithm">HTML5</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("Event")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Bouillonne</dt>
+ <dd style="margin: 0 0 0 120px;">Oui (bien que spécifié comme un événement simple qui ne bouillonne pas)</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Oui</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">Élément</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Variable (envoie le contenu du formulaire au serveur)</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Propriété</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>La cible de l’évènement (la cible la plus haute dans l’arbre DOM).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Le type de l’évènement.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Si l’évènement bouillonne normalement ou non.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Si l’évènement est annulable ou non.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/api/htmlformelement/target/index.html b/files/fr/web/api/htmlformelement/target/index.html
new file mode 100644
index 0000000000..ac4d5f1e75
--- /dev/null
+++ b/files/fr/web/api/htmlformelement/target/index.html
@@ -0,0 +1,25 @@
+---
+title: HTMLFormElement.target
+slug: Web/API/HTMLFormElement/target
+translation_of: Web/API/HTMLFormElement/target
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>La propriété <strong><code>HTMLFormElement.target</code></strong> représente la cible de l'action (i.e., le cadre de destination dans lequel produire le résultat).</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="eval"><em>string</em> = form.target
+form.target = <em>string</em>
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="eval">myForm.target = document.frames[1].name;
+</pre>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<p><a class="external" href="http://www.w3.org/TR/html5/association-of-controls-and-forms.html#dom-fs-method" title="http://www.w3.org/TR/html5/association-of-controls-and-forms.html#dom-fs-method">HTML 5, Section 4.10.19.6, Form submission</a></p>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-6512890">DOM Level 2 HTML: target</a></p>
diff --git a/files/fr/web/api/htmlframesetelement/index.html b/files/fr/web/api/htmlframesetelement/index.html
new file mode 100644
index 0000000000..d8a411ae12
--- /dev/null
+++ b/files/fr/web/api/htmlframesetelement/index.html
@@ -0,0 +1,111 @@
+---
+title: HTMLFrameSetElement
+slug: Web/API/HTMLFrameSetElement
+tags:
+  - API
+  - HTML-DOM
+  - HTMLFrameSetElement
+  - Interface
+  - Obsolete
+  - Reference
+translation_of: Web/API/HTMLFrameSetElement
+---
+<div>{{APIRef("HTML DOM")}}{{Obsolete_header}}</div>
+
+<p>L'interface <strong><code>HTMLFrameSetElement</code></strong> fournit des propriétés spéciales (au-delà de celles de l'interface standard {{domxref("HTMLElement")}} dont elles héritent aussi) pour manipuler les éléments {{HTMLELEment("frameset")}}.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Hérite des propriétés de son parent, {{domxref("HTMLElement")}} et de {{domxref("WindowEventHandlers")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLFrameSetElement.cols")}} {{obsolete_inline}}</dt>
+ <dd>Est un {{domxref("DOMString")}} structuré comme une liste séparée par des virgules spécifiant la largeur de chaque colonne à l'intérieur d'un jeu de cadres.</dd>
+ <dt>{{domxref("HTMLFrameSetElement.rows")}} {{obsolete_inline}}</dt>
+ <dd>Est un {{domxref("DOMString")}} structuré comme une liste séparée par des virgules spécifiant la hauteur de chaque colonne à l'intérieur d'un jeu de cadres.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Pas de méthode spécifique; hérite des méthodes de son parent, {{domxref("HTMLElement")}} et de {{domxref("WindowEventHandlers")}}</em><em>.</em></p>
+
+<h2 id="Gestionnaires_dévénements">Gestionnaires d'événements</h2>
+
+<p><em>Aucun gestionnaire d'événements spécifique; hérite des gestionnairs d'événements de son parent, {{domxref("HTMLElement")}} et de {{domxref("WindowEventHandlers")}}</em><em>.</em></p>
+
+<dl>
+ <dt>{{domxref("WindowEventHandlers.onafterprint")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code à appeler lorsque l'événement {{event("afterprint")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onbeforeprint")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code à appeler lorsque l'événement {{event("beforeprint")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onbeforeunload")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code à appeler lorsque l'événement {{event("beforeunload")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onhashchange")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code à appeler lorsque l'événement {{event("hashchange")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onlanguagechange")}} {{experimental_inline}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code à appeler lorsque l'événement {{event("languagechange")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onmessage")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code à appeler lorsque l'événement {{event("message")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onoffline")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code à appeler lorsque l'événement {{event("offline")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.ononline")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code à appeler lorsque l'événement {{event("online")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpagehide")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code à appeler lorsque l'événement {{event("pagehide")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpageshow")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code à appeler lorsque l'événement {{event("pageshow")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpopstate")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code à appeler lorsque l'événement {{event("popstate")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onresize")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code à appeler lorsque l'événement {{event("resize")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onstorage")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code à appeler lorsque l'événement {{event("storage")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onunload")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code à appeler lorsque l'événement {{event("unload")}} est déclenché.</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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#htmlframesetelement", "HTMLFrameSetElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>À partir de l'instantané {{SpecName('HTML5 W3C')}}, l'interface {{domxref("WindowEventHandlers")}} a maintenant une propriété <code>onlanguagechange</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "obsolete.html#htmlframesetelement", "HTMLFrameSetElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Instantané d'un précédent {{SpecName('HTML WHATWG')}}<br>
+    Les cadres sont désormais obsolètes. Implémente {{domxref("WindowEventHandlers")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-ID-43829095', 'HTMLBodyElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>Aucun changement par rapport à {{SpecName("DOM1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-43829095', 'HTMLBodyElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.HTMLFrameSetElement")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Élément HTML implémentant cette interface : {{HTMLElement("frameset")}}</li>
+ <li>L'équivalent de cet élément en dehors des cadres : {{domxref("HTMLBodyElement")}}.</li>
+</ul>
diff --git a/files/fr/web/api/htmliframeelement/contentwindow/index.html b/files/fr/web/api/htmliframeelement/contentwindow/index.html
new file mode 100644
index 0000000000..8ebaf2afd9
--- /dev/null
+++ b/files/fr/web/api/htmliframeelement/contentwindow/index.html
@@ -0,0 +1,46 @@
+---
+title: HTMLIFrameElement.contentWindow
+slug: Web/API/HTMLIFrameElement/contentWindow
+tags:
+  - API
+  - DOM
+  - Propriété
+  - Web
+translation_of: Web/API/HTMLIFrameElement/contentWindow
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>La propriété <strong><code>contentWindow</code></strong> renvoie l'objet <code><a href="/fr/docs/Web/API/Window">Window</a></code> d'un élément {{HTMLElement("iframe")}}. Cet objet <code>Window</code> peut être utilisé pour accéder au document de l'<em>iframe</em> et à son DOM. Cet attribut est en lecture seule mais ses propriétés peuvent être manipulées comme pour l'objet global <code>Window</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> x <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">"iframe"</span><span class="punctuation token">)</span><span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">.</span>contentWindow<span class="punctuation token">;</span>
+<span class="comment token">//x = window.frames[0];</span>
+
+x<span class="punctuation token">.</span>document<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">"body"</span><span class="punctuation token">)</span><span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">.</span>style<span class="punctuation token">.</span>backgroundColor <span class="operator token">=</span> <span class="string token">"blue"</span><span class="punctuation token">;</span>
+<span class="comment token">// ceci devrait changer le 1er iframe dans le document bleu.</span></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('HTML WHATWG', '#dom-iframe-contentwindow', 'HTMLIFrameElement: contentWindow')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.HTMLIFrameElement.contentWindow")}}</p>
diff --git a/files/fr/web/api/htmliframeelement/featurepolicy/index.html b/files/fr/web/api/htmliframeelement/featurepolicy/index.html
new file mode 100644
index 0000000000..452e826dd6
--- /dev/null
+++ b/files/fr/web/api/htmliframeelement/featurepolicy/index.html
@@ -0,0 +1,46 @@
+---
+title: HTMLIFrameElement.featurePolicy
+slug: Web/API/HTMLIFrameElement/featurePolicy
+tags:
+  - API
+  - Feature Policy
+  - Feature-Policy
+  - HTMLIFrameElement
+  - Policy
+  - Property
+translation_of: Web/API/HTMLIFrameElement/featurePolicy
+---
+<div>{{APIRef("Feature Policy API")}}{{SeeCompatTable}}</div>
+
+<p><span class="seoSummary">La propriété en lecture seule <strong><code>featurePolicy</code></strong> de l'interface {{DOMxRef("HTMLIFrameElement")}} retourne l'interface {{DOMxRef("FeaturePolicy")}}, qui fournit une API simple pour consulter facilement les règles de fonctionnalités appliquées à un élément <code>&lt;iframe&gt;</code> spécifique.</span></p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">var policy = <em>HTMLIFrameElement</em>.featurePolicy</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un objet <a href="https://developer.mozilla.org/en-US/docs/Web/API/FeaturePolicy" title="Note: This interface is called Policy in Firefox."><code>FeaturePolicy</code></a> pouvant être utilisé pour consulter les paramètres Feature Policy appliqués au cadre.</p>
+
+<h2 id="Spécification">Spécification</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("Feature Policy")}}</td>
+   <td>{{Spec2("Feature Policy")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.HTMLIFrameElement.featurePolicy")}}</p>
diff --git a/files/fr/web/api/htmliframeelement/index.html b/files/fr/web/api/htmliframeelement/index.html
new file mode 100644
index 0000000000..6a8377ba23
--- /dev/null
+++ b/files/fr/web/api/htmliframeelement/index.html
@@ -0,0 +1,279 @@
+---
+title: HTMLIFrameElement
+slug: Web/API/HTMLIFrameElement
+translation_of: Web/API/HTMLIFrameElement
+---
+<div>
+<div>{{APIRef("HTML DOM")}}</div>
+</div>
+
+<p>L'interface <strong><code>HTMLIFrameElement</code></strong> fournit des propriétés et des méthodes spéciales (en plus de celles de l'interface {{domxref("HTMLElement")}} auxquelles il peut accéder par héritage) pour manipuler la disposition et la présentation des éléments "en-ligne" d'une frame.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Propriétés héritées de son parent,, {{domxref("HTMLElement")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("HTMLIFrameElement.align")}} {{obsolete_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that specifies the alignment of the frame with respect to the surrounding context.</dd>
+ <dt>{{domxref("HTMLIFrameElement.allowfullscreen")}} {{experimental_inline}}</dt>
+ <dd>Is a {{domxref("Boolean")}} that indicates whether or not the inline frame is willing to be placed into full screen mode. See <a href="/en-US/docs/DOM/Using_full-screen_mode" title="https://developer.mozilla.org/en/DOM/Using_full-screen_mode">Using full-screen mode</a> for details.</dd>
+ <dt>{{domxref("HTMLIFrameElement.contentDocument")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("Document")}}, the active document in the inline frame's nested browsing context.</dd>
+ <dt>{{domxref("HTMLIFrameElement.contentWindow")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("WindowProxy")}}, the window proxy for the nested browsing context.</dd>
+ <dt>{{domxref("HTMLIFrameElement.frameborder")}} {{obsolete_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that indicates whether to create borders between frames.</dd>
+ <dt>{{domxref("HTMLIFrameElement.height")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("height", "iframe")}} HTML attribute, indicating the height of the frame.</dd>
+ <dt>{{domxref("HTMLIFrameElement.longDesc")}} {{obsolete_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that contains the URI of a long description of the frame.</dd>
+ <dt>{{domxref("HTMLIFrameElement.marginHeight")}} {{obsolete_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} being the height of the frame margin.</dd>
+ <dt>{{domxref("HTMLIFrameElement.marginWidth")}} {{obsolete_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} being the width of the frame margin.</dd>
+ <dt>{{domxref("HTMLIFrameElement.name")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("name", "iframe")}} HTML attribute, containing a name by which to refer to the frame.</dd>
+ <dt>{{domxref("HTMLIFrameElement.sandbox")}}</dt>
+ <dd>Is a {{domxref("DOMSettableTokenList")}} that reflects the {{htmlattrxref("sandbox", "iframe")}} HTML attribute, indicating extra restrictions on the behavior of the nested content.</dd>
+ <dt>{{domxref("HTMLIFrameElement.scrolling")}} {{obsolete_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that indicates whether the browser should provide scrollbars for the frame.</dd>
+ <dt>{{domxref("HTMLIFrameElement.seamless")}} {{experimental_inline}}</dt>
+ <dd>Is a {{domxref("Boolean")}} that reflects the {{htmlattrxref("seamless", "iframe")}} HTML attribute, indicating that the inline frame should be rendered seamlessly within the parent document.</dd>
+ <dt>{{domxref("HTMLIFrameElement.src")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("src", "iframe")}} HTML attribute, containing the address of the content to be embedded.</dd>
+ <dt>{{domxref("HTMLIFrameElement.srcdoc")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that represents the content to display in the frame.</dd>
+ <dt>{{domxref("HTMLIFrameElement.width")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("width", "iframe")}} HTML attribute, indicating the width of the frame.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>No specific method; inherits properties from its parent, {{domxref("HTMLElement")}}</em>.</p>
+
+<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>{{SpecName('HTML WHATWG', "the-iframe-element.html#the-iframe-element", "HTMLIFrameElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>The following property has been added: <code>allowFullscreen</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#the-iframe-element", "HTMLIFrameElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>The following properties are now obsolete: <code>scrolling</code>, <code>marginWidth</code>, <code>marginHeight</code>, <code>longDesc</code>, <code>frameBorder</code>, and <code>align</code>.<br>
+    The following properties have been added: <code>srcdoc</code>, <code>sandbox</code>, <code>seamless</code>, and <code>contentWindow</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-50708718', 'HTMLIFrameElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>The <code>contentDocument</code> property has been added.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-50708718', 'HTMLIFrameElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>srcdoc</code></td>
+   <td>4</td>
+   <td>{{CompatGeckoDesktop(25)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>sandbox</code></td>
+   <td>4</td>
+   <td>{{CompatGeckoDesktop(17)}} [1]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>seamless</code> {{experimental_inline}}</td>
+   <td>4</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>contentDocument</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>8.0 (for older version use <code>HTMLIFrameElement.contentWindow.document</code> instead)</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>contentWindow</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>allowFullScreen</code> {{experimental_inline}}</td>
+   <td>17 {{property_prefix("-webkit")}}<br>
+    <em>Daily test builds only</em></td>
+   <td>{{compatGeckoDesktop(9.0)}} {{property_prefix("-moz")}}<br>
+    {{compatGeckoDesktop(18.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>srcdoc</code></td>
+   <td>4</td>
+   <td>{{CompatGeckoMobile(25)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>sandbox</code></td>
+   <td>4</td>
+   <td>{{CompatGeckoMobile(17)}} [1]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>seamless</code> {{experimental_inline}}</td>
+   <td>4</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>contentDocument</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>contentWindow</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>allowFullScreen</code> {{experimental_inline}}</td>
+   <td>17 {{property_prefix("-webkit")}}<br>
+    <em>Daily test builds only</em></td>
+   <td>{{compatGeckoMobile(9.0)}} {{property_prefix("-moz")}}<br>
+    {{compatGeckoMobile(18.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Previously, the type of <code>sandbox</code> was a {{domxref("DOMString")}} instead of a {{domxref("DOMSettableTokenList")}}. This has been fixed with <a href="/en-US/Firefox/Releases/29/Site_Compatibility">Gecko 29.0</a> {{geckoRelease(29)}}) ({{bug(845067)}}). Other browsers may still implement the property as <code>DOMString</code> since it was a late change in the specification.</p>
+
+<h3 id="Firefox_OS_notes">Firefox OS notes</h3>
+
+<p>Firefox OS extend the <code>HTMLIFrameElement</code> interface to support browser iframes. Those extra methods are made for <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Security/Application_security" title="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Security/Application_security">privileged applications</a> which want to implement a browser like application for Firefox OS devices. Not that in that context, the <code>HTMLIFrameElement</code> also inherit methods from the {{domxref("EventTarget")}} interface. To learn how to implement such applications, see the <a href="/en-US/docs/WebAPI/Browser" title="/en-US/docs/WebAPI/Browser">Using the Browser API</a> article.</p>
+
+<dl>
+ <dt>{{domxref("HTMLIFrameElement.setVisible()","HTMLIFrameElement.setVisible(visible)")}}</dt>
+ <dd>Allows the parent to explicitly change the visibility state of the browser iframes.</dd>
+ <dt>{{domxref("HTMLIFrameElement.getVisible()","HTMLIFrameElement.getVisible()")}}</dt>
+ <dd>Returns the current visibility state of the browser iframe. Returns a {{domxref("DOMRequest")}}.</dd>
+ <dt>{{domxref("HTMLIFrameElement.sendMouseEvent()","HTMLIFrameElement.sendMouseEvent(type, x, y, button, clickCount, modifiers)")}}</dt>
+ <dd>Send a mouse event to the browser iframe.</dd>
+ <dt>{{domxref("HTMLIFrameElement.sendTouchEvent()","HTMLIFrameElement.sendTouchEvent(type, identifiers, touchesX, touchesY,radiisX, radiisY, rotationAngles, forces,count, modifiers)")}}</dt>
+ <dd>Send a touch event to the browser iframe.</dd>
+ <dt>{{domxref("HTMLIFrameElement.goBack()","HTMLIFrameElement.goBack()")}}</dt>
+ <dd>Navigate the browser iframe back.</dd>
+ <dt>{{domxref("HTMLIFrameElement.goForward()","HTMLIFrameElement.goForward()")}}</dt>
+ <dd>Navigate the browser iframe forward.</dd>
+ <dt>{{domxref("HTMLIFrameElement.reload()","HTMLIFrameElement.reload()")}}</dt>
+ <dd>Reload the browser iframe.</dd>
+ <dt>{{domxref("HTMLIFrameElement.stop()","HTMLIFrameElement.stop()")}}</dt>
+ <dd>Stop loading the browser iframe content.</dd>
+ <dt>{{domxref("HTMLIFrameElement.purgeHistory()","HTMLIFrameElement.purgeHistory()")}}</dt>
+ <dd>Allows to remove the all browsing history of the browser iframe.</dd>
+ <dt>{{domxref("HTMLIFrameElement.getScreenshot()","HTMLIFrameElement.getScreenshot(maxWidth, maxHeight)")}}</dt>
+ <dd>Allows to take a screenshot of the browser iframe's content, scaled to fit within <code>maxWidth</code> and <code>maxHeight</code> pixels. Returns a {{domxref("DOMRequest")}}.</dd>
+ <dt>{{domxref("HTMLIFrameElement.addNextPaintListener()","HTMLIFrameElement.addNextPaintListener()")}}</dt>
+ <dd>Add a listener to recieve an event the first time the browser iframe is ready to paint (This listener is sent an event after the first {{event("MozAfterPaint")}} event is dispacted in the iframe.)</dd>
+ <dt>{{domxref("HTMLIFrameElement.removeNextPaintListener()","HTMLIFrameElement.removeNextPaintListener()")}}</dt>
+ <dd>Remove the listener added by the previous function.</dd>
+ <dt>{{domxref("HTMLIFrameElement.getCanGoBack()","HTMLIFrameElement.getCanGoBack()")}}</dt>
+ <dd>Returns a {{domxref("DOMRequest")}} which <code>result</code> is a boolean indicating wether the browser iframe can be navigate backward.</dd>
+ <dt>{{domxref("HTMLIFrameElement.getCanGoForward()","HTMLIFrameElement.getCanGoForward()")}}</dt>
+ <dd>Returns a {{domxref("DOMRequest")}} which <code>result</code> is a boolean indicating wether the browser iframe can be navigate forward.</dd>
+</dl>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The HTML element implementing this interface: {{HTMLElement("iframe")}}</li>
+</ul>
diff --git a/files/fr/web/api/htmlimageelement/image/index.html b/files/fr/web/api/htmlimageelement/image/index.html
new file mode 100644
index 0000000000..19fc326df7
--- /dev/null
+++ b/files/fr/web/api/htmlimageelement/image/index.html
@@ -0,0 +1,122 @@
+---
+title: Image()
+slug: Web/API/HTMLImageElement/Image
+tags:
+  - API
+  - Constructeur
+  - DOM
+translation_of: Web/API/HTMLImageElement/Image
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p id="Image_Element_constructor">Le constructeur <strong><code>Image()</code></strong> crée une nouvelle instance {{domxref("HTMLImageElement")}} .</p>
+
+<p>C'est fonctionnellement équivalent à {{domxref("Document.createElement()", "document.createElement('img')")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Image(width, height)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>width</dt>
+ <dd>La largeur de l'image (c'est-à-dire, la valeur pour l'attribut {{htmlattrxref("width", "img")}})</dd>
+ <dt>height</dt>
+ <dd>La hauteur de l'image (c'est-à-dire, la valeur pour l'attribut {{htmlattrxref("height", "img")}}).</dd>
+</dl>
+
+<h2 id="Exemples"><span style="line-height: 1.572;">Exemples</span></h2>
+
+<pre class="brush: js">var myImage = new Image(100, 200);
+myImage.src = 'picture.jpg';
+console.log(myImage);</pre>
+
+<div><span id="result_box" lang="fr"><span>Cela équivaudrait à définir la balise HTML suivante dans le</span></span> {{htmlelement("body")}} (<em>corps</em>) :</div>
+
+<pre class="brush: html">&lt;img width="100" height="200" src="picture.jpg"&gt;
+</pre>
+
+<div> </div>
+
+<div class="note">
+<p><strong>Note </strong>: Le "bitmap" entier est chargé quelle que soit la taille spécifiée dans le constructeur. Si une taille est spécifiée dans le constructeur, elle sera reflétée dans les propriétés {{domxref("HTMLImageElement.width")}} et {{domxref("HTMLImageElement.height")}} de l'instance résultante. La largeur intrinsèque et la hauteur de l'image en pixels CSS sont reflétées à travers les propriétés {{domxref("HTMLImageElement.naturalWidth")}} et {{domxref("HTMLImageElement.naturalHeight")}}. Si aucune taille n'est spécifiée dans le constructeur, les deux paires de ces propriétés auront les mêmes valeurs.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<div>
+<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", "embedded-content.html#dom-image", "Image()")}}</td>
+   <td>{{spec2("HTML WHATWG")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+</div>
+
+<div>
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{compatversionunknown}}</td>
+   <td>{{compatversionunknown}}</td>
+   <td>{{compatversionunknown}}</td>
+   <td>{{compatversionunknown}}</td>
+   <td>{{compatversionunknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{compatversionunknown}}</td>
+   <td>{{compatversionunknown}}</td>
+   <td>{{compatversionunknown}}</td>
+   <td>{{compatversionunknown}}</td>
+   <td>{{compatversionunknown}}</td>
+   <td>{{compatversionunknown}}</td>
+   <td>{{compatversionunknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
+</div>
+
+<div> </div>
diff --git a/files/fr/web/api/htmlimageelement/index.html b/files/fr/web/api/htmlimageelement/index.html
new file mode 100644
index 0000000000..f531958bf3
--- /dev/null
+++ b/files/fr/web/api/htmlimageelement/index.html
@@ -0,0 +1,401 @@
+---
+title: HTMLImageElement
+slug: Web/API/HTMLImageElement
+translation_of: Web/API/HTMLImageElement
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p>L'interface  <strong><code>HTMLImageElement</code></strong> fournit des propriétés et des méthodes spéciales pour manipuler la mise en page et la présentation des éléments {{HTMLElement("img")}} .</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em><span id="result_box" lang="fr"><span>Hérite les propriétés de son parent, {{domxref ("HTMLElement")}}</span></span></em></p>
+
+<dl>
+ <dt>{{domxref("HTMLImageElement.align")}} {{obsolete_inline}}</dt>
+ <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> qui indique l'alignement de l'image en respectant le contexte environnant. Les valeurs possibles sont <code>"left"</code><em>(gauche)</em>, <code>"right"</code><em>(droite)</em>, <code>"justify"</code><em>(justifié)</em>, et <code>"center"</code><em>(centré) .</em></dd>
+ <dt>{{domxref("HTMLImageElement.alt")}}</dt>
+ <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères) </em>qui reflète les attributs HTML {{htmlattrxref("alt", "img")}} , ceux-ci indiquant le recul du contexte de l'image.</dd>
+ <dt>{{domxref("HTMLImageElement.border")}} {{obsolete_inline}}</dt>
+ <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères) </em>qui est responsable de la largeur de la bordure entourant l'image. Il est maintenant déprécié et la propriété CSS {{cssxref("border")}} est utilisée à la place.</dd>
+ <dt>{{domxref("HTMLImageElement.complete")}} {{readonlyInline}}</dt>
+ <dd>Retourne un {{domxref("Boolean")}} <em>(booléen)</em> qui est <code>true</code> <em>(vrai)</em> si le navigateur a fini de chercher l'image, que ce soit avec succès ou non. Il affiche aussi "true" si l'image n'a pas de valeur {{domxref("HTMLImageElement.src", "src")}} .</dd>
+ <dt>{{domxref("HTMLImageElement.crossOrigin")}}</dt>
+ <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères) </em> représentant le paramètre CORS défini pour cet élément image. Voir <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Reglages_des_attributs_CORS">Attributs de règlage du CORS</a> pour plus de détails.</dd>
+ <dt>{{domxref("HTMLImageElement.currentSrc")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Retourne une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> représentant l'URL de l'image courante affichée (qui peut changer, par exemple en réponse à une requête multimédia).</dd>
+ <dt>{{domxref("HTMLImageElement.height")}}</dt>
+ <dd>Est un <code>unsigned long</code> <em>(non signé long)</em> qui reflète l'attibut HTML {{htmlattrxref("height", "img")}} indiquant la hauteur du rendu de l'image en pixels CSS.</dd>
+ <dt>{{domxref("HTMLImageElement.hspace")}} {{obsolete_inline}}</dt>
+ <dd>Est un <code>long</code> représentant l'espace de chaque côté de l'image.</dd>
+ <dt>{{domxref("HTMLImageElement.isMap")}}</dt>
+ <dd>Est un {{domxref("Boolean")}} <em>(booléen)</em> qui reflète l'attribut HTML {{htmlattrxref("ismap", "img")}} indiquant que l'image fait partie d'une carte d'image côté serveur.</dd>
+ <dt>{{domxref("HTMLImageElement.longDesc")}} {{obsolete_inline}}</dt>
+ <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> représentant l'URL d'une longue description de l'image.</dd>
+ <dt>{{domxref("HTMLImageElement.lowSrc")}} {{obsolete_inline}}</dt>
+ <dd>Est une {{domxref("DOMString")}}  <em>(chaîne de caractères)</em> qui <span id="result_box" lang="fr"><span> fait référence à une copie de faible qualité (mais plus rapide à charger) de l'image.</span></span></dd>
+ <dt>{{domxref("HTMLImageElement.name")}} {{obsolete_inline}}</dt>
+ <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> représentant le nom de l'élément.</dd>
+ <dt>{{domxref("HTMLImageElement.naturalHeight")}} {{readonlyInline}}</dt>
+ <dd>Retourne un <code>unsigned long</code>  représentant la hauteur intrinsèque de l'image en pixels CSS, si elle est disponible ; sinon, 0 est affiché.</dd>
+ <dt>{{domxref("HTMLImageElement.referrerPolicy")}} {{experimental_inline}}</dt>
+ <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> qui reflète l'attribut HTML {{htmlattrxref("referrerpolicy", "img")}}  <span id="result_box" lang="fr"><span>indiquant la référence à utiliser pour récupérer l'image.</span></span></dd>
+ <dt>{{domxref("HTMLImageElement.src")}}</dt>
+ <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> qui reflète l'attribut HTML  {{htmlattrxref("src", "img")}} contenant l'URL complète de l'image y compris l'URI de base.</dd>
+ <dt>{{domxref("HTMLImageElement.sizes")}} {{experimental_inline}}</dt>
+ <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> reflétant l'attribut HTML {{htmlattrxref("sizes", "img")}} <em>(taille)</em>.</dd>
+ <dt>{{domxref("HTMLImageElement.srcset")}} {{experimental_inline}}</dt>
+ <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> reflétant l'attribut HTML {{htmlattrxref("srcset", "img")}} , qui contient une liste d'images candidates, séparées par une virgule. Une image candidate est une URL suivie d'un <code>'w'</code>  avec la largeur de l'image ou d'un <code>'x'</code>  avec la densité en pixels.</dd>
+ <dt>{{domxref("HTMLImageElement.useMap")}}</dt>
+ <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> qui reflète l'attribut HTML {{htmlattrxref("usemap", "img")}} contenant une URL partielle d'un élément "map" <em>(carte)</em>.</dd>
+ <dt>{{domxref("HTMLImageElement.vspace")}} {{obsolete_inline}}</dt>
+ <dd>Est un <code>long</code> représentant l'espace au-dessus et en-dessous de l'image.</dd>
+ <dt>{{domxref("HTMLImageElement.width")}}</dt>
+ <dd>Est un <code>unsigned long</code> qui reflète l'attribut HTML {{htmlattrxref("width", "img")}} indiquant la largeur rendue de l'image en pixels CSS.</dd>
+ <dt>{{domxref("HTMLImageElement.x")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Retourne un <code>long</code>  représentant le décalage horizontal à partir de la couche la plus proche. Cette propriété imite un comportement ancien de Netscape 4.</dd>
+ <dt>{{domxref("HTMLImageElement.y")}} {{readonlyInline}} {{experimental_inline}}</dt>
+ <dd>Retourne un <code>long</code> représentant le décalage vertical à partir de la couche la plus proche. Cette propriété imite un comportement ancien de Netscape 4.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Hérite les propriétés de son parent, {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLImageElement.Image()", "Image()")}}</dt>
+ <dd>Le constructeur d'image, comprend<span id="result_box" lang="fr"><span> deux propriétés </span></span> <code>unsigned</code>  et <code>long</code> <span lang="fr"><span>, qui sont la largeur et la hauteur de la ressource, et crée une instance de </span></span> <code>HTMLImageElement</code> <span lang="fr"><span>, non insérée dans une arborescence DOM.</span></span></dd>
+</dl>
+
+<h2 id="Erreurs">Erreurs</h2>
+
+<p>Si une erreur apparaît pendant un essai de chargement ou de rendu de l'image, et si un gestionnaire d'évènements {{htmlattrxref("onerror")}} a été configuré pour gérer les évènements {{event("error")}} , ce gestionnaire est appelé. Cela peut se produire dans un certain nombre de situations, y compris :</p>
+
+<ul>
+ <li>L'attribut  {{htmlattrxref("src", "img")}} est vide ou <code>null</code>.</li>
+ <li>L'URL spécifiée de <code>src</code>  est la même que l'URL de la page actuelle de l'utilisateur.</li>
+ <li>L'image spécifiée est corrompue de telle manière qu'elle ne peut être chargée.</li>
+ <li>Les métadonnées de l'image spécifiée sont corrompues empêchant de récupérer ses dimensions,  et aucune dimension n'est spécifiée dans les attributs de l'élément <code>&lt;img&gt;</code>.</li>
+ <li>L'image spécifiée est dans un format non supporté par l'"{{Glossary("user agent")}}".</li>
+</ul>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> img1 <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Image</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">//  Constructeur HTML5</span>
+img1<span class="punctuation token">.</span>src <span class="operator token">=</span> <span class="string token">'image1.png'</span><span class="punctuation token">;</span>
+img1<span class="punctuation token">.</span>alt <span class="operator token">=</span> <span class="string token">'alt'</span><span class="punctuation token">;</span>
+document<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>img1<span class="punctuation token">)</span><span class="punctuation token">;</span></code>
+
+<span class="keyword token">var</span> img2 <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'img'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// utilise DOM HTMLImageElement</span>
+img2<span class="punctuation token">.</span>src <span class="operator token">=</span> <span class="string token">'image2.jpg'</span><span class="punctuation token">;</span>
+img2<span class="punctuation token">.</span>alt <span class="operator token">=</span> <span class="string token">'alt text'</span><span class="punctuation token">;</span>
+document<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>img2<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// en utilisant la première image dans le document</span>
+<span class="function token">alert</span><span class="punctuation token">(</span>document<span class="punctuation token">.</span>images<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">.</span>src<span class="punctuation token">)</span><span class="punctuation token">;</span></pre>
+
+<h2 class="brush: js line-numbers  language-js" 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('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}</td>
+   <td>{{Spec2('Referrer Policy')}}</td>
+   <td>Ajoute la propriété <code>referrerPolicy</code> .</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSSOM View", "#excensions-to-the-htmlimageelement-interface", "Extensions to HTMLImageElement")}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Ajoute les propriétés <code>x</code> et<code>y</code> .</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "embedded-content.html#the-img-element", "HTMLImageElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Les propriétés suivantes sont ajoutées : <code>srcset</code>, <code>currentSrc</code> et <code>sizes</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#the-img-element", "HTMLImageElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Un constructeur (avec 2 paramètres facultatifs) est ajouté.<br>
+    Les propriétés suivantes sont maintenant obsolètes : <code>name</code>, <code>border</code>, <code>align</code>, <code>hspace</code>, <code>vspace</code>, et <code>longdesc</code>.<br>
+    Les propriétés suivantes sont maintenant <code>unsigned et long</code>, iau lieu de <code>long</code>: <code>height</code> et <code>width</code>.<br>
+    Les propriétés suivantes ont été ajoutées : <code>crossorigin</code>, <code>naturalWidth</code>, <code>naturalHeight</code> et <code>complete</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-17701901', 'HTMLImgElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>La propriété <code>lowSrc</code> a été supprimée.<br>
+    La propriété est maintenant <code>long</code>, au lieu des <code>DOMString</code>: <code>height</code>, <code>width</code>, <code>hspace</code> et <code>vspace</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-17701901', 'HTMLImgElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>lowSrc</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>naturalWidth</code>, <code>naturalHeight</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>crossorigin</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>complete</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>5<sup>[4]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>srcset</code> {{experimental_inline}}</td>
+   <td>{{CompatChrome(34)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(32)}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>21</td>
+   <td>{{CompatSafari(7.1)}}</td>
+  </tr>
+  <tr>
+   <td><code>currentSrc </code>{{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(32)}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>sizes</code> {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(33)}}<sup>[3]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>x</code> and <code>y</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>14<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>referrerPolicy</code> {{experimental_inline}}</td>
+   <td>{{CompatChrome(51)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(50)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>onerror</code> event handler</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(51)}}<sup>[5]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>lowSrc</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>naturalWidth</code>, <code>naturalHeight</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>9</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>crossorigin</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>complete</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>srcset</code> {{experimental_inline}}</td>
+   <td>{{CompatChrome(34)}}</td>
+   <td>{{CompatChrome(34)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(32)}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>iOS 8</td>
+  </tr>
+  <tr>
+   <td><code>currentSrc </code>{{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(32)}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>sizes</code> {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(33)}}<sup>[3]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>x</code> and <code>y</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>14<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>referrerPolicy</code> {{experimental_inline}}</td>
+   <td>{{CompatChrome(51)}}</td>
+   <td>{{CompatChrome(51)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(50)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>onerror</code> event handler</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(51)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Cependant, ces propriétés <code>x</code> et <code>y</code> ont été supprimées dans Gecko 7.0 {{geckoRelease("7.0")}} mais plus tard, elles ont été restaurées dans Gecko 14.0 {{geckoRelease("14.0")}} pour des raisons de compatibilité.</p>
+
+<p>[2] Cette fonctionnalité est derrière la préférence <code>dom.image.srcset.enabled</code> , par défaut <code>false</code><em>(faux)</em>.</p>
+
+<p>[3] Cette fonctionnalité est derrière la préférence <code>dom.image.picture.enabled</code> , par défaut <code>false</code><em>(faux)</em>.</p>
+
+<p>[4] IE retourne <code>false</code> pour les images brisées.</p>
+
+<p>[5] Peut également être pris en charge dans les versions antérieures.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p>L'élément HTML implémentant cette interface : {{HTMLElement("img")}}</p>
diff --git a/files/fr/web/api/htmlinputelement/index.html b/files/fr/web/api/htmlinputelement/index.html
new file mode 100644
index 0000000000..6a61fadaed
--- /dev/null
+++ b/files/fr/web/api/htmlinputelement/index.html
@@ -0,0 +1,426 @@
+---
+title: HTMLInputElement
+slug: Web/API/HTMLInputElement
+tags:
+  - API
+  - HTML DOM
+  - Interface
+  - NeedsNewLayout
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/API/HTMLInputElement
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p>The <strong><code>HTMLInputElement</code></strong> interface provides special properties and methods for manipulating the options, layout, and presentation of {{HtmlElement("input")}} elements.</p>
+
+<p>{{InheritanceDiagram(600, 120)}}</p>
+
+<h2 id="Properties">Properties</h2>
+
+<table class="standard-table">
+ <caption>Properties related to the parent form</caption>
+ <thead>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>form </code>{{readonlyInline}}</td>
+   <td><em>{{domxref("HTMLFormElement")}}<code> object</code>:</em> <strong>Returns</strong> a reference to the parent {{HtmlElement("form")}} element.</td>
+  </tr>
+  <tr>
+   <td><code>formAction</code></td>
+   <td><em><code>string</code>: </em><strong>Returns / Sets</strong> the element's {{ htmlattrxref("formaction", "input") }} attribute, containing the URI of a program that processes information submitted by the element. This overrides the {{ htmlattrxref("action", "form") }} attribute of the parent form.</td>
+  </tr>
+  <tr>
+   <td><code>formEncType</code></td>
+   <td><em><code>string</code>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("formenctype", "input") }} attribute, containing the type of content that is used to submit the form to the server. This overrides the {{ htmlattrxref("enctype", "form") }} attribute of the parent form.</td>
+  </tr>
+  <tr>
+   <td><code>formMethod</code></td>
+   <td><em><code>string</code>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("formmethod", "input") }} attribute, containing the HTTP method that the browser uses to submit the form. This overrides the {{ htmlattrxref("method", "form") }} attribute of the parent form.</td>
+  </tr>
+  <tr>
+   <td><code>formNoValidate</code></td>
+   <td><em>{{jsxref("Boolean")}}:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("formnovalidate", "input") }} attribute, indicating that the form is not to be validated when it is submitted. This overrides the {{ htmlattrxref("novalidate", "form") }} attribute of the parent form.</td>
+  </tr>
+  <tr>
+   <td><code>formTarget</code></td>
+   <td><em><code>string</code>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("formtarget", "input") }} attribute, containing a name or keyword indicating where to display the response that is received after submitting the form. This overrides the {{ htmlattrxref("target", "form") }} attribute of the parent form.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>Properties that apply to any type of input element that is not hidden</caption>
+ <tbody>
+  <tr>
+   <td><code>name</code></td>
+   <td><em><code>string</code>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("name", "input") }} attribute, containing a name that identifies the element when submitting the form.</td>
+  </tr>
+  <tr>
+   <td><code>type</code></td>
+   <td><code><em>string</em></code>: <strong>Returns / Sets</strong> the element's {{ htmlattrxref("type", "input") }} attribute, indicating the type of control to display. See {{ htmlattrxref("type", "input") }} attribute of {{ HTMLElement("input") }} for possible values.</td>
+  </tr>
+  <tr>
+   <td><code>disabled</code></td>
+   <td><em>{{jsxref("Boolean")}}:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("disabled", "input") }} attribute, indicating that the control is not available for interaction. The input values will not be submitted with the form. See also {{ htmlattrxref("readOnly", "input") }}</td>
+  </tr>
+  <tr>
+   <td><code>autofocus</code></td>
+   <td><em>{{jsxref("Boolean")}}:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("autofocus", "input") }} attribute, which specifies that a form control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form element in a document can have the {{htmlattrxref("autofocus","input")}} attribute. It cannot be applied if the {{htmlattrxref("type","input")}} attribute is set to <code>hidden</code> (that is, you cannot automatically set focus to a hidden control).</td>
+  </tr>
+  <tr>
+   <td><code>required</code></td>
+   <td><em>{{jsxref("Boolean")}}:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("required", "input") }} attribute, indicating that the user must fill in a value before submitting a form.</td>
+  </tr>
+  <tr>
+   <td><code>value</code></td>
+   <td><code><em>string</em></code><em>:</em> <strong>Returns / Sets</strong> the current value of the control.
+    <p class="note"><strong>Note:</strong> If the user enters a value different from the value expected, this may return an empty string.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>validity</code> {{readonlyInline}}</td>
+   <td><em>{{domxref("ValidityState")}}<code> object</code>:</em> <strong>Returns</strong> the element's current validity state.</td>
+  </tr>
+  <tr>
+   <td><code>validationMessage</code> {{readonlyInline}}</td>
+   <td><code><em>string</em></code><em>:</em> <strong>Returns</strong> a localized message that describes the validation constraints that the control does not satisfy (if any). This is the empty string if the control is not a candidate for constraint validation ({{htmlattrxref("willValidate","input")}} is false), or it satisfies its constraints. This value can be set by the <code>setCustomValidity</code> method.</td>
+  </tr>
+  <tr>
+   <td><code>willValidate </code>{{readonlyInline}}</td>
+   <td><em>{{jsxref("Boolean")}}:</em> <strong>Returns</strong> whether the element is a candidate for constraint validation. It is false if any conditions bar it from constraint validation, including: its <code>type</code> is <code>hidden</code>, <code>reset</code>, or <code>button</code>; it has a <a href="/en-US/docs/Web/HTML/Element/datalist">datalist</a> ancestor; its <code>disabled</code> property is <code>true</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption><a id="Properties_checkbox_radio" name="Properties_checkbox_radio"></a>Properties that apply only to elements of type <code>"checkbox"</code> or <code>"radio"</code></caption>
+ <tbody>
+  <tr>
+   <td><code>checked</code></td>
+   <td><em>{{jsxref("Boolean")}}:</em> <strong>Returns / Sets</strong> the current state of the element when {{htmlattrxref("type","input")}} is <code>checkbox</code> or <code>radio</code>.</td>
+  </tr>
+  <tr>
+   <td><code>defaultChecked</code></td>
+   <td><em>{{jsxref("Boolean")}}:</em> <strong>Returns / Sets</strong> the default state of a radio button or checkbox as originally specified in HTML that created this object.</td>
+  </tr>
+  <tr>
+   <td><code><a id="indeterminate" name="indeterminate"></a>indeterminate</code></td>
+   <td><em>{{jsxref("Boolean")}}:</em> <strong>Returns</strong> whether the checkbox or radio button is in indeterminate state. For checkboxes, the effect is that the appearance of the checkbox is obscured/greyed in some way as to indicate its state is indeterminate (not checked but not unchecked). Does not affect the value of the <code>checked</code> attribute, and clicking the checkbox will set the value to false.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>Properties that apply only to elements of type <code>"image"</code></caption>
+ <tbody>
+  <tr>
+   <td><code>alt</code></td>
+   <td><em><code>string</code>: </em><strong>Returns / Sets</strong> the element's {{ htmlattrxref("alt", "input") }} attribute, containing alternative text to use when {{htmlattrxref("type","input")}} is <code>image.</code></td>
+  </tr>
+  <tr>
+   <td><code>height</code></td>
+   <td><em><code>string</code>: </em><strong>Returns / Sets</strong> the element's {{ htmlattrxref("height", "input") }} attribute, which defines the height of the image displayed for the button, if the value of {{htmlattrxref("type","input")}} is <code>image</code>.</td>
+  </tr>
+  <tr>
+   <td><code>src</code></td>
+   <td><code><em>string</em></code><em>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("src", "input") }} attribute, which specifies a URI for the location of an image to display on the graphical submit button, if the value of {{htmlattrxref("type","input")}} is <code>image</code>; otherwise it is ignored.</td>
+  </tr>
+  <tr>
+   <td><code>width</code></td>
+   <td><code><em>string</em></code><em>:</em> <strong>Returns / Sets</strong> the document's {{ htmlattrxref("width", "input") }} attribute, which defines the width of the image displayed for the button, if the value of {{htmlattrxref("type","input")}} is <code>image</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption><a id="Properties_file" name="Properties_file"></a>Properties that apply only to elements of type <code>"file"</code></caption>
+ <tbody>
+  <tr>
+   <td><code>accept</code></td>
+   <td><em><code>string</code>: </em><strong>Returns / Sets</strong> the element's {{ htmlattrxref("accept", "input") }} attribute, containing comma-separated list of file types accepted by the server when {{htmlattrxref("type","input")}} is <code>file</code>.</td>
+  </tr>
+  <tr>
+   <td><code>allowdirs</code> {{non-standard_inline}}</td>
+   <td><em>{{jsxref("Boolean")}}:</em> Part of the non-standard Directory Upload API; <strong>indicates</strong> whether or not to allow directories and files both to be selected in the file list. Implemented only in Firefox and is hidden behind a preference.</td>
+  </tr>
+  <tr>
+   <td><a id="files_prop" name="files_prop"><code>files</code></a></td>
+   <td><strong>Returns/accepts</strong> a {{domxref("FileList")}} object, which contains a list of {{domxref("File")}} objects representing the files selected for upload.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLInputElement.webkitdirectory", "webkitdirectory")}} {{Non-standard_inline}}</td>
+   <td><em>{{jsxref("Boolean")}}:</em><strong> Returns</strong> the {{htmlattrxref("webkitdirectory", "input")}} attribute; if true, the file system picker interface only accepts directories instead of files.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLInputElement.webkitEntries", "webkitEntries")}} {{Non-standard_inline}}</td>
+   <td><em>Array of {{domxref("FileSystemEntry")}} objects:</em> <strong>Describes</strong> the currently selected files or directories.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>Properties that apply only to <code>text/number</code>-containing or elements</caption>
+ <tbody>
+  <tr>
+   <td><code>autocomplete</code></td>
+   <td><em><code>string</code>: </em><strong>Returns / Sets</strong> the element's {{htmlattrxref("autocomplete", "input")}} attribute, indicating whether the value of the control can be automatically completed by the browser. Ignored if the value of the {{htmlattrxref("type","input")}} attribute is <code>hidden</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code>, or a button type (<code>button</code>, <code>submit</code>, <code>reset</code>, <code>image</code>). Possible values are:<br>
+    <code>"on"</code>: the browser can autocomplete the value using previously stored value<br>
+    <code>"off"</code>: the user must explicity enter a value</td>
+  </tr>
+  <tr>
+   <td><code>max</code></td>
+   <td><em><code>string</code>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("max", "input") }} attribute, containing the maximum (numeric or date-time) value for this item, which must not be less than its minimum ({{htmlattrxref("min","input")}} attribute) value.</td>
+  </tr>
+  <tr>
+   <td><code>maxLength</code></td>
+   <td><em><code>long</code>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("maxlength", "input") }} attribute, containing the <u><strong>maximum number of characters</strong></u> (in Unicode code points) that the value can have. (If you set this to a negative number, an exception will be thrown.)</td>
+  </tr>
+  <tr>
+   <td><code>min</code></td>
+   <td><em><code>string</code>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("min", "input") }} attribute, containing the minimum (numeric or date-time) value for this item, which must not be greater than its maximum ({{htmlattrxref("max","input")}} attribute) value.</td>
+  </tr>
+  <tr>
+   <td><code>minLength</code></td>
+   <td><em><code>long</code>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("minlength", "input") }} attribute, containing the <u><strong>minimum number of characters</strong></u> (in Unicode code points) that the value can have. (If you set this to a negative number, an exception will be thrown.)</td>
+  </tr>
+  <tr>
+   <td><code>pattern</code></td>
+   <td><em><code>string</code>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("pattern", "input") }} attribute, containing a <u><strong>regular expression</strong></u> that the control's value is checked against. Use the {{htmlattrxref("title","input")}} attribute to describe the pattern to help the user. This attribute applies when the value of the {{htmlattrxref("type","input")}} attribute is <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code> or <code>email</code>; otherwise it is ignored.</td>
+  </tr>
+  <tr>
+   <td><code>placeholder</code></td>
+   <td><em><code>string</code>: </em><strong>Returns / Sets </strong>the element's {{ htmlattrxref("placeholder", "input") }} attribute, containing a hint to the user of what can be entered in the control. The placeholder text must not contain carriage returns or line-feeds. This attribute applies when the value of the {{htmlattrxref("type","input")}} attribute is <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code> or <code>email</code>; otherwise it is ignored.</td>
+  </tr>
+  <tr>
+   <td><code>readOnly</code></td>
+   <td><em><code>boolean</code>:</em><strong> Returns / Sets</strong> the element's {{ htmlattrxref("readonly", "input") }} attribute, indicating that the user cannot modify the value of the control.<br>
+    {{HTMLVersionInline(5)}}This is ignored if the value of the {{htmlattrxref("type","input")}} attribute is <code>hidden</code>, <code>range</code>, <code>color</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code>, or a button type.</td>
+  </tr>
+  <tr>
+   <td><code>selectionStart</code></td>
+   <td><em><code>unsigned long</code>:</em> <strong>Returns / Sets</strong> the beginning index of the selected text. When nothing is selected, this returns the position of the text input cursor (caret) inside of the {{HTMLElement("input")}} element.</td>
+  </tr>
+  <tr>
+   <td><code>selectionEnd</code></td>
+   <td><em><code>unsigned long</code>:</em> <strong>Returns / Sets </strong>the end index of the selected text. When there's no selection, this returns the offset of the character immediately following the current text input cursor position.</td>
+  </tr>
+  <tr>
+   <td><code>selectionDirection</code></td>
+   <td><em><code>string</code>:</em> <strong>Returns / Sets</strong> the direction in which selection occurred. Possible values are:<br>
+    <code>forward</code> if selection was performed in the start-to-end direction of the current locale<br>
+    <code>backward</code> for the opposite direction<br>
+    <code>none</code> if the direction is unknown</td>
+  </tr>
+  <tr>
+   <td><code>size</code></td>
+   <td><em><code>unsigned long</code>:</em> <strong>Returns / Sets </strong>the element's {{ htmlattrxref("size", "input") }} attribute, containing <u><strong>visual size of the control</strong></u>. This value is in pixels unless the value of {{htmlattrxref("type","input")}} is <code>text</code> or <code>password</code>, in which case, it is an integer number of characters. Applies only when {{htmlattrxref("type","input")}} is set to <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code>, <code>email</code>, or <code>password</code>; otherwise it is ignored.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>Properties not yet categorized</caption>
+ <tbody>
+  <tr>
+   <td><code>defaultValue</code></td>
+   <td><em><code>string</code>:</em> <strong>Returns / Sets</strong> the default value as originally specified in the HTML that created this object.</td>
+  </tr>
+  <tr>
+   <td><code>dirName</code></td>
+   <td><em><code>string</code>:</em> <strong>Returns / Sets </strong>the directionality of the element.</td>
+  </tr>
+  <tr>
+   <td><code>accessKey</code></td>
+   <td><em><code>string</code>: </em><strong>Returns</strong> a string containing a single character that switches input focus to the control when pressed.</td>
+  </tr>
+  <tr>
+   <td><code>list</code> {{readonlyInline}}</td>
+   <td><em>{{domxref("HTMLElement")}}<code> object</code>:</em> <strong>Returns</strong> the element pointed by the {{ htmlattrxref("list", "input") }} attribute. The property may be <code>null</code> if no HTML element found in the same tree.</td>
+  </tr>
+  <tr>
+   <td><code>multiple</code></td>
+   <td><em>{{jsxref("Boolean")}}:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("multiple", "input") }} attribute, indicating whether more than one value is possible (e.g., multiple files).</td>
+  </tr>
+  <tr>
+   <td><code>files</code></td>
+   <td><em>{{domxref("FileList")}}<code> array</code>:</em> <strong>Returns</strong> the list of selected files.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLInputElement.labels")}} {{readonlyInline}}</td>
+   <td><em>{{domxref("NodeList")}}<code> array</code>:</em> <strong>Returns</strong> a list of {{ HTMLElement("label") }} elements that are labels for this element.</td>
+  </tr>
+  <tr>
+   <td><code>step</code></td>
+   <td><code><em>string</em></code><em>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("step", "input") }} attribute, which works with<strong> </strong>{{htmlattrxref("min","input")}} and {{htmlattrxref("max","input")}} to limit the increments at which a numeric or date-time value can be set. It can be the string <code>any</code> or a positive floating point number. If this is not set to <code>any</code>, the control accepts only values at multiples of the step value greater than the minimum.</td>
+  </tr>
+  <tr>
+   <td><code>valueAsDate</code></td>
+   <td><em>{{jsxref("Date")}}<code> object</code>:</em> <strong>Returns / Sets</strong> the value of the element, interpreted as a date, or <code>null</code> if conversion is not possible.</td>
+  </tr>
+  <tr>
+   <td><code>valueAsNumber</code></td>
+   <td><em><code>double</code>:</em> <strong>Returns</strong> the value of the element, interpreted as one of the following, in order:
+    <ul>
+     <li>A time value</li>
+     <li>A number</li>
+     <li><code>NaN</code> if conversion is impossible</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td><code>autocapitalize</code> {{experimental_inline}}</td>
+   <td><code><em>string</em></code><em>:</em> <strong>Defines</strong> the capitalization behavior for user input. Valid values are <code>none</code>, <code>off</code>, <code>characters</code>, <code>words</code>, or <code>sentences</code>.</td>
+  </tr>
+  <tr>
+   <td><code>inputmode</code></td>
+   <td>Provides a hint to browsers as to the type of virtual keyboard configuration to use when editing this element or its contents.</td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+ <dt>{{domxref("HTMLInputElement.align")}} {{obsolete_inline}}</dt>
+ <dd><code><em>string</em></code><em>:</em> <strong>Represents</strong> the alignment of the element. <em>Use CSS instead.</em></dd>
+ <dt>{{domxref("HTMLInputElement.useMap")}} {{ obsolete_inline }}</dt>
+ <dd><code><em>string</em></code><em>:</em> <strong>Represents</strong> a client-side image map.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td>{{domxref("HTMLElement.blur()", "blur()")}}</td>
+   <td>Removes focus from the input element; keystrokes will subsequently go nowhere.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.click()", "click()")}}</td>
+   <td>Simulates a click on the input element.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.focus()", "focus()")}}</td>
+   <td>Focuses on the input element; keystrokes will subsequently go to this element.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLInputElement.select()", "select()")}}</td>
+   <td>Selects all the text in the input element, and focuses it so the user can subsequently replace all of its content.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLInputElement.setSelectionRange()", "setSelectionRange()")}}</td>
+   <td>Selects a range of text in the input element (but does not focus it).</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLInputElement.setRangeText()", "setRangeText()")}}</td>
+   <td>Replaces a range of text in the input element with new text.</td>
+  </tr>
+  <tr>
+   <td><code>setCustomValidity()</code></td>
+   <td>Sets a custom validity message for the element. If this message is not the empty string, then the element is suffering from a custom validity error, and does not validate.</td>
+  </tr>
+  <tr>
+   <td><code>checkValidity()</code></td>
+   <td>Returns a {{jsxref("Boolean")}} that is <code>false</code> if the element is a candidate for constraint validation, and it does not satisfy its constraints. In this case, it also fires an {{event("invalid")}} event at the element. It returns <code>true</code> if the element is not a candidate for constraint validation, or if it satisfies its constraints.</td>
+  </tr>
+  <tr>
+   <td><code>reportValidity()</code></td>
+   <td>Runs the <code>checkValidity()</code> method, and if it returns false (for an invalid input or no pattern attribute provided), then it reports to the user that the input is invalid in the same manner as if you submitted a form.</td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+ <dt>{{domxref("HTMLInputElement.stepDown()")}}</dt>
+ <dd>Decrements the {{htmlattrxref("value","input")}} by ({{htmlattrxref("step","input")}} * n), where n defaults to 1 if not specified. Throws an INVALID_STATE_ERR exception:
+ <ul>
+  <li>if the method is not applicable to for the current {{htmlattrxref("type","input")}} value,</li>
+  <li>if the element has no {{htmlattrxref("step","input")}} value,</li>
+  <li>if the {{htmlattrxref("value","input")}} cannot be converted to a number,</li>
+  <li>if the resulting value is above the {{htmlattrxref("max","input")}} or below the {{htmlattrxref("min","input")}}.</li>
+ </ul>
+ </dd>
+ <dt>{{domxref("HTMLInputElement.stepUp()")}}</dt>
+ <dd>Increments the {{htmlattrxref("value","input")}} by ({{htmlattrxref("step","input")}} * n), where n defaults to 1 if not specified. Throws an INVALID_STATE_ERR exception:
+ <ul>
+  <li>if the method is not applicable to for the current {{htmlattrxref("type","input")}} value.,</li>
+  <li>if the element has no {{htmlattrxref("step","input")}} value,</li>
+  <li>if the {{htmlattrxref("value","input")}} cannot be converted to a number,</li>
+  <li>if the resulting value is above the {{htmlattrxref("max","input")}} or below the {{htmlattrxref("min","input")}}.</li>
+ </ul>
+ </dd>
+ <dt>{{domxref("HTMLInputElement.mozSetFileArray()")}} {{non-standard_inline}}</dt>
+ <dd>Sets the files selected on the input to the given array of {{domxref("File")}} objects. This is an alternative to <code>mozSetFileNameArray()</code> which can be used in frame scripts: a chrome script can <a href="/en-US/docs/Extensions/Using_the_DOM_File_API_in_chrome_code">open files as File objects</a> and send them via <a href="/en-US/Firefox/Multiprocess_Firefox/The_message_manager">message manager</a>.</dd>
+ <dt>{{domxref("HTMLInputElement.mozGetFileNameArray()")}} {{non-standard_inline}}</dt>
+ <dd>Returns an array of all the file names from the input.</dd>
+ <dt>{{domxref("HTMLInputElement.mozSetFileNameArray()")}} {{non-standard_inline}}</dt>
+ <dd>Sets the filenames for the files selected on the input. Not for use in <a href="/en-US/Firefox/Multiprocess_Firefox/Limitations_of_frame_scripts">frame scripts</a>, because it accesses the file system.</dd>
+</dl>
+
+<h2 id="Events">Events</h2>
+
+<p>Listen to these events using <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> or by assigning an event listener to the <code>on<em>eventname</em></code> property of this interface:</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/HTMLElement/input_event"><code>input</code></a></dt>
+ <dd>Fires when the <code>value</code> of an {{HTMLElement("input")}}, {{HTMLElement("select")}}, or {{HTMLElement("textarea")}} element has been changed. Note that this is actually fired on the {{domxref("HTMLElement")}} interface and also applies to <code><a href="/en-US/docs/Web/HTML/Global_attributes/contenteditable">contenteditable</a></code> elements, but we've listed it here because it is most commonly used with form input elements.<br>
+ Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/oninput">oninput</a></code> event handler property.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/HTMLElement/invalid_event">invalid</a></code></dt>
+ <dd>Fired when an element does not satisfy its constraints during constraint validation.<br>
+ Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/oninvalid">oninvalid</a></code> event handler property.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/HTMLInputElement/search_event">search</a></code></dt>
+ <dd>Fired when a search is initiated on an {{HTMLElement("input")}} of <code>type="search"</code>.<br>
+ Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onsearch">onsearch</a></code> event handler property.</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', "#htmlinputelement", "HTMLInputElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "forms.html#the-input-element", "HTMLInputElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Technically, the <code>tabindex</code> and <code>accesskey</code> properties, as well as the <code>blur()</code>, <code>click()</code>, and <code>focus()</code> methods, are now defined on {{domxref("HTMLElement")}}.<br>
+    The following properties are now obsolete: <code>align</code> and <code>useMap</code>.<br>
+    The following properties have been added: <code>autocomplete</code>, <code>autofocus</code>, <code>dirName</code>, <code>files</code>, <code>formAction</code>, <code>formEncType</code>, <code>formMethod</code>, <code>formNoValidate</code>, <code>formTarget</code>, <code>height</code>, <code>indeterminate</code>, <code>labels</code>, <code>list</code>, <code>max</code>, <code>min</code>, <code>multiple</code>, <code>pattern</code>, <code>placeholder</code>, <code>required</code>, <code>selectionDirection</code>, <code>selectionEnd</code>, <code>selectionStart</code>, <code>step</code>, <code>validationMessage</code>, <code>validity</code>, <code>valueAsDate</code>, <code>valueAsNumber</code>, <code>width</code>, and <code>willValidate</code>.<br>
+    The following methods have been added: <code>checkValidity()</code>, <code>setCustomValidity()</code>, <code>setSelectionRange()</code>, <code>stepUp()</code>, and <code>stepDown()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-6043025', 'HTMLInputElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>The <code>size</code> property is now an <code>unsigned long</code>. The <code>type</code> property must be entirely given in lowercase characters.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-6043025', 'HTMLInputElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.HTMLInputElement")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>HTML element implementing this interface: {{ HTMLElement("input") }}</li>
+</ul>
diff --git a/files/fr/web/api/htmlinputelement/labels/index.html b/files/fr/web/api/htmlinputelement/labels/index.html
new file mode 100644
index 0000000000..f6efa64dce
--- /dev/null
+++ b/files/fr/web/api/htmlinputelement/labels/index.html
@@ -0,0 +1,70 @@
+---
+title: HTMLInputElement.labels
+slug: Web/API/HTMLInputElement/labels
+tags:
+  - API
+  - DOM
+  - Propriété
+  - Étiquettes
+translation_of: Web/API/HTMLInputElement/labels
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La propriété en lecture seule <code><strong>HTMLInputElement.labels</strong></code> renvoie une {{domxref("NodeList")}} (<em>liste de noeuds</em>) des éléments {{HTMLElement("label")}} (<em>étiquette</em>) associés avec l'élément {{HTMLElement("input")}} (<em>entrée</em>).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <var>labelElements</var> = <var>input</var>.labels;
+</pre>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Une {{domxref("NodeList")}} contenant les éléments <code>&lt;label&gt;</code> associés avec l'élément <code>&lt;input&gt;</code>.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;label id="label1" for="test"&gt;Label 1&lt;/label&gt;
+&lt;input id="test"/&gt;
+&lt;label id="label2" for="test"&gt;Label 2&lt;/label&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">window.addEventListener("DOMContentLoaded", function() {
+  const input = document.getElementById("test");
+  for(var i = 0; i &lt; input.labels.length; i++) {
+    console.log(input.labels[i].textContent); // "Label 1" et "Label 2"
+  }
+});</pre>
+
+<p>{{EmbedLiveSample("Exemple", "100%", 30)}}</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">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "forms.html#dom-lfe-labels", "labels")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Pas de changement.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "forms.html#dom-lfe-labels", "labels")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.HTMLInputElement.labels")}}</p>
diff --git a/files/fr/web/api/htmlmediaelement/abort_event/index.html b/files/fr/web/api/htmlmediaelement/abort_event/index.html
new file mode 100644
index 0000000000..05fe0a451a
--- /dev/null
+++ b/files/fr/web/api/htmlmediaelement/abort_event/index.html
@@ -0,0 +1,87 @@
+---
+title: 'HTMLMediaElement: abort event'
+slug: Web/API/HTMLMediaElement/abort_event
+tags:
+  - API
+  - Event
+  - HTMLMediaElement
+  - Reference
+  - Web
+  - abort
+translation_of: Web/API/HTMLMediaElement/abort_event
+---
+<div>{{APIRef}}</div>
+
+<p>L'événement <strong><code>abort</code></strong> se déclenche si l'élément écouté ne s'est pas chargé complétement. Il est désactivé si le résultat obtenu est une erreur.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Bubbles</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Cancelable</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("Event")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Event handler property</th>
+   <td>{{domxref("GlobalEventHandlers/onabort", "onabort")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js notranslate">const video = document.querySelector('video');
+const videoSrc = 'https://path/to/video.webm';
+
+video.addEventListener('abort', () =&gt; {
+  console.log(`Abort loading: ${videoSrc}`);
+});
+
+const source = document.createElement('source');
+source.setAttribute('src', videoSrc);
+source.setAttribute('type', 'video/webm');
+
+video.appendChild(source);</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "media.html#event-media-abort")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#event-media-abort")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+
+
+<p>{{Compat("api.HTMLMediaElement.abort_event")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("HTMLAudioElement")}}</li>
+ <li>{{domxref("HTMLVideoElement")}}</li>
+ <li>{{HTMLElement("audio")}}</li>
+ <li>{{HTMLElement("video")}}</li>
+</ul>
diff --git a/files/fr/web/api/htmlmediaelement/canplay_event/index.html b/files/fr/web/api/htmlmediaelement/canplay_event/index.html
new file mode 100644
index 0000000000..95fdb08c7e
--- /dev/null
+++ b/files/fr/web/api/htmlmediaelement/canplay_event/index.html
@@ -0,0 +1,80 @@
+---
+title: 'HTMLMediaElement: canplay'
+slug: Web/API/HTMLMediaElement/canplay_event
+translation_of: Web/API/HTMLMediaElement/canplay_event
+---
+<p>L'événement <code>canplay</code> est déclenché lorsque l'<a href="/fr/docs/Glossaire/User_agent">agent utilisateur</a> peut jouer le média, mais estime que trop peu de données ont été chargées pour le jouer jusqu'à la fin sans avoir à l'arrêter pour charger d'avantage de contenu dans la mémoire tampon (buffer).</p>
+
+<h2 id="Informations_Générales">Informations Générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-canplay">HTML5 media</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">Event</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">Element</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Aucune</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Evénements_liés">Evénements liés</h2>
+
+<ul>
+ <li>{{event("playing")}}</li>
+ <li>{{event("waiting")}}</li>
+ <li>{{event("seeking")}}</li>
+ <li>{{event("seeked")}}</li>
+ <li>{{event("ended")}}</li>
+ <li>{{event("loadedmetadata")}}</li>
+ <li>{{event("loadeddata")}}</li>
+ <li>{{event("canplay")}}</li>
+ <li>{{event("canplaythrough")}}</li>
+ <li>{{event("durationchange")}}</li>
+ <li>{{event("timeupdate")}}</li>
+ <li>{{event("play")}}</li>
+ <li>{{event("pause")}}</li>
+ <li>{{event("ratechange")}}</li>
+ <li>{{event("volumechange")}}</li>
+ <li>{{event("suspend")}}</li>
+ <li>{{event("emptied")}}</li>
+ <li>{{event("stalled")}}</li>
+</ul>
diff --git a/files/fr/web/api/htmlmediaelement/canplaythrough_event/index.html b/files/fr/web/api/htmlmediaelement/canplaythrough_event/index.html
new file mode 100644
index 0000000000..9a67a55a00
--- /dev/null
+++ b/files/fr/web/api/htmlmediaelement/canplaythrough_event/index.html
@@ -0,0 +1,80 @@
+---
+title: 'HTMLMediaElement: canplaythrough'
+slug: Web/API/HTMLMediaElement/canplaythrough_event
+translation_of: Web/API/HTMLMediaElement/canplaythrough_event
+---
+<p>L'événement <code><strong>canplaythrough</strong></code> est déclenché lorsque le user agent peut jouer le média et estime que suffisament de données ont été chargées pour le lire jusqu'au bout. (Sans s'arrêter afin de charger plus contenu en mémoire)</p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-canplaythrough">HTML5 media</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">Event</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">Element</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Aucune</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Evénements_liés">Evénements liés</h2>
+
+<ul>
+ <li>{{event("playing")}}</li>
+ <li>{{event("waiting")}}</li>
+ <li>{{event("seeking")}}</li>
+ <li>{{event("seeked")}}</li>
+ <li>{{event("ended")}}</li>
+ <li>{{event("loadedmetadata")}}</li>
+ <li>{{event("loadeddata")}}</li>
+ <li>{{event("canplay")}}</li>
+ <li>{{event("canplaythrough")}}</li>
+ <li>{{event("durationchange")}}</li>
+ <li>{{event("timeupdate")}}</li>
+ <li>{{event("play")}}</li>
+ <li>{{event("pause")}}</li>
+ <li>{{event("ratechange")}}</li>
+ <li>{{event("volumechange")}}</li>
+ <li>{{event("suspend")}}</li>
+ <li>{{event("emptied")}}</li>
+ <li>{{event("stalled")}}</li>
+</ul>
diff --git a/files/fr/web/api/htmlmediaelement/capturestream/index.html b/files/fr/web/api/htmlmediaelement/capturestream/index.html
new file mode 100644
index 0000000000..75a73c45f9
--- /dev/null
+++ b/files/fr/web/api/htmlmediaelement/capturestream/index.html
@@ -0,0 +1,94 @@
+---
+title: HTMLMediaElement.captureStream()
+slug: Web/API/HTMLMediaElement/captureStream
+tags:
+  - API
+  - Audio
+  - HTML DOM
+  - HTMLMediaElement
+  - Media
+  - Media Capture DOM Elements
+  - Method
+  - Reference
+  - Video
+  - captureStream
+translation_of: Web/API/HTMLMediaElement/captureStream
+---
+<div>{{APIRef("HTML Media Capture")}}</div>
+
+<p><strong><code>captureStream()</code></strong> est une méthode de l'interface {{domxref("HTMLMediaElement")}} retournant un objet {{domxref('MediaStream')}} qui diffuse en temps réel l'enregistrement d'un contenu obtenu dans un élément média.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <em>mediaStream</em> = mediaElement.captureStream()</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Aucun.</p>
+
+<h3 id="Retours">Retours</h3>
+
+<p>Un objet {{domxref('MediaStream')}} pouvant être utilisé en tant que source pour des données audio et/ou vidéo par d'autres média traitant du code, ou comme source pour <a href="/en-US/docs/Glossary/WebRTC">WebRTC</a>.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans cet exemple, un écouteur d'événement est mise en place, permettant la capture du contenu d'un élément média avec l'ID <code>"playback"</code> dans un {{domxref("MediaStream")}} lors d'un clic sur un bouton de lancement. La flux peut être utilisée dans d'autres buts—comme une source de diffusion via WebRTC, vous permettant de partager des vidéos pré-enregistrées avec une autre personne lors d'un appel video.</p>
+
+<pre class="brush: js">document.querySelector('.playAndRecord').addEventListener('click', function() {
+  var playbackElement = document.getElementById("playback");
+  var captureStream = playbackElement.captureStream();
+  playbackElement.play();
+});
+</pre>
+
+<p>Voir <a href="/en-US/docs/Web/API/MediaStream_Recording_API/Recording_a_media_element">Recording a media element</a> pour des exemples et explications plus détaillées et complexes.</p>
+
+<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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Capture DOM Elements','#widl-HTMLMediaElement-captureStream-MediaStream','captureStream()')}}</td>
+   <td>{{Spec2('Media Capture DOM Elements')}}</td>
+   <td>Déclaration initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilités">Compatibilités</h2>
+
+<div>
+
+
+<p>{{Compat("api.HTMLMediaElement.captureStream")}}</p>
+
+<h3 id="Firefox-notes_spécifiques">Firefox-notes spécifiques</h3>
+</div>
+
+<p>Avant Firefox 51, vous ne pouviez pas utiliser <code>captureStream()</code> sur un élément média dont la source était, lui-même, un objet {{domxref("MediaStream")}} (comme un élément {{HTMLElement("video")}} présentant un flux reçu à travers un {{domxref("RTCPeerConnection")}}). Au commencement de  51, ça fonctionne. ce qui veut dire que vous pouvez capturer le flux d'un élément video et utiliser {{domxref("MediaRecorder")}} pour l'enregistrer. Voir {{bug(1259788)}} pour plus de détails.</p>
+
+<p>Cependant, <code>captureStream()</code> reste préfixé <code>mozCaptureStream()</code> sur Firefox pour une bonne raison: il y a quelques etrangetés dans l'implémentation actuelle qui mérite d'être soulignées :</p>
+
+<ul>
+ <li>Actuellement, l'implémentation de Firefox fonctionne uniquement (comme décrit dans les spécifications) quand la source de l'élément média est elle-même, donc une instance {{domxref("MediaStream")}}.</li>
+ <li>Si la source de l'élément média n'est pas un <code>MediaStream</code>, la sortie de cette méthode n'est pas compatible avec les spécifications, et si vous changez la source après avoir commencé la capture, la sortie de la capture du flux ne peut accepter les nouvelles données source suite à une incompatibilité, donc aucun  {{domxref("MediaStreamTrack")}}s sera ajouté de la nouvelle source <code>MediaStream</code> au flux capturé, résultant d'une sortie n'ayant pas capturé la source mise à jour.</li>
+ <li>Repasser la source en <code>MediaStream</code> ajoute des pistes au flux et fonctionne de nouveau comme prévu.</li>
+ <li>L'appel à <code>mozCaptureMediaStream()</code> sur un élément avec une source <code>MediaStream</code> retourne un flux qui contient uniquement les pistes jouées par un <code>MediaStream</code>.</li>
+ <li>Si vous appellez <code>mozCaptureMediaStream()</code> sur un élément média sans source, son mode de compatibilité va se baser sur la première source ayant été ajoutée; Par exemple, Si c'est un <code>MediaStream</code>, alors la capture du flux va seulement fonctionner avec une source MediaStream à partir de ce moment.</li>
+ <li>Ce comportement particulier va être supprimer un fois que le support des sources non-<code>MediaStream</code> aura atteint la spécification et que la méthode ne sera plus préfixée. Voir {{bug(1259788, "bug", 160)}} pour plus de détails.</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/MediaStream_Recording_API/Recording_a_media_element">Recording a media element</a></li>
+ <li><a href="/en-US/docs/Web/API/MediaStream_Recording_API">MediaStream Recording API</a></li>
+ <li>{{domxref("HTMLCanvasElement.captureStream()")}}</li>
+ <li>{{domxref("MediaStream")}}</li>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC API</a></li>
+</ul>
diff --git a/files/fr/web/api/htmlmediaelement/durationchange_event/index.html b/files/fr/web/api/htmlmediaelement/durationchange_event/index.html
new file mode 100644
index 0000000000..0c5573379c
--- /dev/null
+++ b/files/fr/web/api/htmlmediaelement/durationchange_event/index.html
@@ -0,0 +1,80 @@
+---
+title: 'HTMLMediaElement: durationchange'
+slug: Web/API/HTMLMediaElement/durationchange_event
+translation_of: Web/API/HTMLMediaElement/durationchange_event
+---
+<p>L'évènement <strong><code>durationchange</code> </strong>est déclenché quand l'attribut de durée est mis à jour.</p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-durationchange">HTML5 media</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("Event")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("Element")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Default Action</dt>
+ <dd style="margin: 0 0 0 120px;">Aucune.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Evénements_liés">Evénements liés</h2>
+
+<ul>
+ <li>{{event("playing")}}</li>
+ <li>{{event("waiting")}}</li>
+ <li>{{event("seeking")}}</li>
+ <li>{{event("seeked")}}</li>
+ <li>{{event("ended")}}</li>
+ <li>{{event("loadedmetadata")}}</li>
+ <li>{{event("loadeddata")}}</li>
+ <li>{{event("canplay")}}</li>
+ <li>{{event("canplaythrough")}}</li>
+ <li>{{event("durationchange")}}</li>
+ <li>{{event("timeupdate")}}</li>
+ <li>{{event("play")}}</li>
+ <li>{{event("pause")}}</li>
+ <li>{{event("ratechange")}}</li>
+ <li>{{event("volumechange")}}</li>
+ <li>{{event("suspend")}}</li>
+ <li>{{event("emptied")}}</li>
+ <li>{{event("stalled")}}</li>
+</ul>
diff --git a/files/fr/web/api/htmlmediaelement/emptied_event/index.html b/files/fr/web/api/htmlmediaelement/emptied_event/index.html
new file mode 100644
index 0000000000..d550ba2b11
--- /dev/null
+++ b/files/fr/web/api/htmlmediaelement/emptied_event/index.html
@@ -0,0 +1,80 @@
+---
+title: 'HTMLMediaElement: emptied'
+slug: Web/API/HTMLMediaElement/emptied_event
+translation_of: Web/API/HTMLMediaElement/emptied_event
+---
+<p>L'événement <strong><code>emptied</code></strong> est déclenché lorsqu'un média est devenu vide. Par exemple, cet événement est envoyé si le média a déjà été chargé (complètement ou partiellement), et que la méthode <em>load() </em>est appelé pour le recharger.</p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-emptied">HTML5 media</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("Event")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("Element")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Aucune</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Evénements_liés">Evénements liés</h2>
+
+<ul>
+ <li>{{event("playing")}}</li>
+ <li>{{event("waiting")}}</li>
+ <li>{{event("seeking")}}</li>
+ <li>{{event("seeked")}}</li>
+ <li>{{event("ended")}}</li>
+ <li>{{event("loadedmetadata")}}</li>
+ <li>{{event("loadeddata")}}</li>
+ <li>{{event("canplay")}}</li>
+ <li>{{event("canplaythrough")}}</li>
+ <li>{{event("durationchange")}}</li>
+ <li>{{event("timeupdate")}}</li>
+ <li>{{event("play")}}</li>
+ <li>{{event("pause")}}</li>
+ <li>{{event("ratechange")}}</li>
+ <li>{{event("volumechange")}}</li>
+ <li>{{event("suspend")}}</li>
+ <li>{{event("emptied")}}</li>
+ <li>{{event("stalled")}}</li>
+</ul>
diff --git a/files/fr/web/api/htmlmediaelement/ended_event/index.html b/files/fr/web/api/htmlmediaelement/ended_event/index.html
new file mode 100644
index 0000000000..742ad75319
--- /dev/null
+++ b/files/fr/web/api/htmlmediaelement/ended_event/index.html
@@ -0,0 +1,98 @@
+---
+title: 'HTMLMediaElement: ended'
+slug: Web/API/HTMLMediaElement/ended_event
+translation_of: Web/API/HTMLMediaElement/ended_event
+---
+<p>L'événement <strong>ended</strong> est déclenché lorsque la lecture ou le streaming s'est arrêté parce que la fin du média a été atteinte ou qu'aucune donnée n'est disponible.</p>
+
+<p>L'événement se produit dans deux contextes liés mais unique:</p>
+
+<ul>
+ <li>Les éléments basés sur {{domxref("HTMLMediaElement")}} ({{HTMLElement("audio")}} et {{HTMLElement("video")}}) déclenchent <strong>ended</strong> lorsque la lecture du média atteint la fin.</li>
+ <li>Les pistes de flux média, qui sont basées sur l'interface {{domxref("MediaStreamTrack")}}, déclenchent <strong><code>ended</code></strong> lorsque <span id="result_box" lang="fr"><span>la source de la piste interrompt définitivement l'envoi de données sur le flux. Il y'a différentes manières d'y arriver</span></span>:
+  <ul>
+   <li>il n'y a plus de données à envoyer.</li>
+   <li>L'utilisateur a <span id="result_box" lang="fr"><span>révoqué les autorisations nécessaires pour que les données soient envoyées</span></span>.</li>
+   <li><span id="result_box" lang="fr"><span>Le matériel générant les données source a été supprimé ou éjecté</span></span>.</li>
+   <li><span id="result_box" lang="fr"><span>Un peer distant a définitivement cessé d'envoyer des données.</span> <span>La mise en pause des médias ne génère pas l'événement <strong>ended</strong></span></span>.</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-ended">HTML5 media</a> et <a href="https://www.w3.org/TR/mediacapture-streams/#event-mediastreamtrack-ended">Media Capture and Streams</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("Event")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("Element")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Aucune</dd>
+</dl>
+
+<div class="note">
+<p><span id="result_box" lang="fr"><span>Bien que cet événement soit défini dans deux spécifications, à ce moment-là, les deux spécifient cet événement de manière identique, nous avons donc documenté comme si elles ne faisaient qu'une.</span> <span>Si à un moment donné, cela change, la documentation sera révisée.</span></span></p>
+</div>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Evénements_liés">Evénements liés</h2>
+
+<ul>
+ <li>{{event("playing")}}</li>
+ <li>{{event("waiting")}}</li>
+ <li>{{event("seeking")}}</li>
+ <li>{{event("seeked")}}</li>
+ <li>{{event("ended")}}</li>
+ <li>{{event("loadedmetadata")}}</li>
+ <li>{{event("loadeddata")}}</li>
+ <li>{{event("canplay")}}</li>
+ <li>{{event("canplaythrough")}}</li>
+ <li>{{event("durationchange")}}</li>
+ <li>{{event("timeupdate")}}</li>
+ <li>{{event("play")}}</li>
+ <li>{{event("pause")}}</li>
+ <li>{{event("ratechange")}}</li>
+ <li>{{event("volumechange")}}</li>
+ <li>{{event("suspend")}}</li>
+ <li>{{event("emptied")}}</li>
+ <li>{{event("stalled")}}</li>
+</ul>
diff --git a/files/fr/web/api/htmlmediaelement/index.html b/files/fr/web/api/htmlmediaelement/index.html
new file mode 100644
index 0000000000..d5d7e48c46
--- /dev/null
+++ b/files/fr/web/api/htmlmediaelement/index.html
@@ -0,0 +1,238 @@
+---
+title: HTMLMediaElement
+slug: Web/API/HTMLMediaElement
+tags:
+  - API
+  - Audio
+  - DOM
+  - Interface
+  - Media
+  - Video
+translation_of: Web/API/HTMLMediaElement
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p>L'interface <strong><code>HTMLMediaElement</code></strong> ajoute à {{domxref("HTMLElement")}} les propriétés et les méthodes nécessaires pour prendre en charge les fonctionnalités de base liées aux médias qui sont communes aux vidéos et aux documents audios. {{domxref("HTMLVideoElement")}} et {{domxref("HTMLAudioElement")}} héritent de cette interface.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Cette interface hérite aussi des propriétés de ses ancêtres </em><em>{{domxref("HTMLElement")}}, {{domxref("Element")}}, {{domxref("Node")}} et {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLMediaElement.audioTracks")}}</dt>
+ <dd>est une {{domxref("AudioTrackList")}} qui liste les objets {{domxref("AudioTrack")}} (<em>pistes audio</em>) contenus dans l'élément.</dd>
+ <dt>{{domxref("HTMLMediaElement.autoplay")}}</dt>
+ <dd>est un {{jsxref("Boolean")}} qui reflète l'attribut HTML {{htmlattrxref("autoplay","video")}}, indiquant si la lecture doit commencer automatiquement dès que suffisamment de médias sont disponibles pour le faire sans interruption.</dd>
+ <dd>
+ <div class="note">
+ <p>Les sites qui lisent automatiquement l'audio (ou les vidéos avec une piste audio) peuvent être désagréables pour les utilisateurs, il faut donc l'éviter autant que possible. Si vous devez offrir la fonctionnalité de lecture automatique, vous devez la faire activer (par un utilisateur qui la lance expréssement). Cependant, cela peut être utile lors de la création d'éléments média dont la source sera définie ultérieurement, sous le contrôle de l'utilisateur.</p>
+ </div>
+ </dd>
+ <dt>{{domxref("HTMLMediaElement.buffered")}}{{readonlyinline}}</dt>
+ <dd>Renvoie un objet {{domxref("TimeRanges")}} qui indique les plages de la source du média que le navigateur a en mémoire tampon (le cas échéant) au moment de l'accès à la propriété <code>buffered</code>.</dd>
+ <dt>{{domxref("HTMLMediaElement.controller")}}</dt>
+ <dd>est un objet {{domxref("MediaController")}} qui représente le contrôleur du média assigné à l'élément, ou <code>null</code> si aucun n'est défini.</dd>
+ <dt>{{domxref("HTMLMediaElement.controls")}}</dt>
+ <dd>est un {{jsxref('Boolean')}} qui reflète l'attribut HTML {{htmlattrxref("controls","video")}}, indiquant quels éléments de contrôle de ressource de l'interface utilisateur doivent être affichés.</dd>
+ <dt>{{domxref("HTMLMediaElement.controlsList")}} {{readonlyinline}}</dt>
+ <dd>renvoie une {{domxref("DOMTokenList")}} qui aide l'agent utilisateur à sélectionner les contrôles à afficher sur l'élément du média chaque fois que l'agent utilisateur affiche son propre jeu de contrôles. La <code>DOMTokenList</code> prend une ou plusieurs des trois valeurs possibles : <code>nodownload</code>, <code>nofullscreen</code> et <code>noremoteplayback</code>.</dd>
+ <dt>{{domxref("HTMLMediaElement.crossOrigin")}}</dt>
+ <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) indiquant les <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Reglages_des_attributs_CORS">règlages CORS</a> pour cet élément de média.</dd>
+ <dt>{{domxref("HTMLMediaElement.currentSrc")}}{{readonlyinline}}</dt>
+ <dd>Renvoie une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) avec l'URL absolue de la ressource de média choisie.</dd>
+ <dt>{{domxref("HTMLMediaElement.currentTime")}}</dt>
+ <dd>est un <code>double</code> indiquant le temps de lecture actuel en secondes. La définition de cette valeur recherche le média à la nouvelle heure.</dd>
+ <dt>{{domxref("HTMLMediaElement.defaultMuted")}}</dt>
+ <dd>est un {{jsxref('Boolean')}} qui reflète l'attribut HTML {{htmlattrxref("muted","video")}}, qui indique si la sortie audio de l'élément média doit être désactivée par défaut.</dd>
+ <dt>{{domxref("HTMLMediaElement.defaultPlaybackRate")}}</dt>
+ <dd>est un <code>double</code> indiquant le taux de lecture par défaut pour le média.</dd>
+ <dt>{{domxref("HTMLMediaElement.disableRemotePlayback")}}</dt>
+ <dd>est un {{jsxref('Boolean')}} qui définit ou retourne l'état de lecture à distance, indiquant si l'élément de média est autorisé à avoir une interface de lecture à distance.</dd>
+ <dt>{{domxref("HTMLMediaElement.duration")}}{{readonlyinline}}</dt>
+ <dd>renvoie un <code>double</code> indiquant la longueur du média en secondes, ou 0 si aucune donnée multimédia n'est disponible.</dd>
+ <dt>{{domxref("HTMLMediaElement.ended")}}{{readonlyinline}}</dt>
+ <dd>renvoie un {{jsxref('Boolean')}} qui indique si l'élément média est terminé.</dd>
+ <dt>{{domxref("HTMLMediaElement.error")}}{{readonlyinline}}</dt>
+ <dd>renvoie un objet {{domxref("MediaError")}} pour l'erreur la plus récente, ou <code>null</code> s'il n'y a pas eu d'erreur.</dd>
+ <dt>{{domxref("HTMLMediaElement.loop")}}</dt>
+ <dd>est un {{jsxref('Boolean')}} qui reflète l'attribut HTML {{htmlattrxref("loop","video")}} (<em>boucle</em>), lequel indique si l'élément média doit recommencer quand il arrive à la fin.</dd>
+ <dt>{{domxref("HTMLMediaElement.mediaGroup")}}</dt>
+ <dd>est une {{domxref("DOMString")}} qui reflète l'attribut HTML {{htmlattrxref("mediagroup","video")}}, lequel indique le nom du groupe d'éléments auquel il appartient. Un groupe d'éléments média partage un  {{domxref('MediaController')}} commun.</dd>
+ <dt>{{domxref("HTMLMediaElement.mediaKeys")}}{{readonlyinline}} {{experimental_inline}}</dt>
+ <dd>Renvoie un objet {{domxref("MediaKeys")}} ou <code>null</code>. <code>MediaKeys</code> est un ensemble de clés qu'un élément <code>HTMLMediaElement</code> associé peut utiliser pour déchiffrer les données du média pendant la lecture.</dd>
+ <dt>{{domxref("HTMLMediaElement.mozAudioCaptured")}}{{readonlyinline}} {{non-standard_inline}}</dt>
+ <dd>renvoie un {{jsxref('Boolean')}}. Lié à la capture de flux audio.</dd>
+ <dt>{{domxref("HTMLMediaElement.mozFragmentEnd")}} {{non-standard_inline}}</dt>
+ <dd>est un <code>double</code> qui donne accès à l'heure de fin du fragment si l'élément média a un fragment URI pour <code>currentSrc</code>, sinon il est égal à la durée du média.</dd>
+ <dt>{{domxref("HTMLMediaElement.mozFrameBufferLength")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>
+ <p>est un <code>unsigned long</code> qui indique le nombre d'échantillons qui seront renvoyés dans le "framebuffer" de chaque évènement <code>MozAudioAvailable</code>. Ce nombre est un total pour tous les canaux, et par défaut est défini par le nombre de canaux * 1024 (c'est-à-dire, 2 canaux * 1024 échantillons = total 2048).</p>
+
+ <p>La propriété <code>mozFrameBufferLength</code> peut être définie à une nouvelle valeur pour une latence plus faible, de plus grandes quantités de données, etc. La taille donnée <em>doit</em> être un nombre compris entre 512 et 16384. L'utilisation d'autres tailles entraîne la levée d'une exception. Le meilleur moment pour définir une nouvelle longueur est après le lancement de l'évènement <a href="/en-US/docs/Web/Events/loadedmetadata">loadedmetadata</a>, lorsque l'information audio est connue, mais avant que l'audio ait commencé ou que les événements <code>MozAudioAvailable</code> aient commencé à se déclencher.</p>
+ </dd>
+ <dt>{{domxref("HTMLMediaElement.mozSampleRate")}}{{readonlyinline}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>renvoie un <code>double</code> représentant le nombre d'échantillons par seconde. Par exemple, 44100 échantillons par seconde correspondent à la fréquence d'échantillonnage utilisée par les CD audio.</dd>
+ <dt>{{domxref("HTMLMediaElement.muted")}}</dt>
+ <dd>est un {{jsxref('Boolean')}} qui détermine si l'audio est coupé. <code>true</code> (<em>vrai</em>) si l'audio est coupé et <code>false</code> (<em>faux</em>) sinon.</dd>
+ <dt>{{domxref("HTMLMediaElement.networkState")}}{{readonlyinline}}</dt>
+ <dd>renvoie un <code>unsigned short</code> (énumération) indiquant l'état actuel de récupération du média sur le réseau.</dd>
+ <dt>{{domxref("HTMLMediaElement.paused")}}{{readonlyinline}}</dt>
+ <dd>renvoie un {{jsxref('Boolean')}} qui indique si l'élément média est en pause.</dd>
+ <dt>{{domxref("HTMLMediaElement.playbackRate")}}</dt>
+ <dd>est un <code>double</code> qui indique la vitesse à laquelle le média est lu.</dd>
+ <dt>{{domxref("HTMLMediaElement.played")}}{{readonlyinline}}</dt>
+ <dd>renvoie un objet {{domxref('TimeRanges')}} qui contient les plages de la source média que le navigateur a lu, le cas échéant.</dd>
+ <dt>{{domxref("HTMLMediaElement.preload")}}</dt>
+ <dd>est une {{domxref("DOMString")}} (<em>chaîne</em>) qui reflète l'attribut HTML {{htmlattrxref("preload","video")}}, indiquant quelles données doivent être préchargées, le cas échéant. Les valeurs possibles sont : <code>none</code>, <code>metadata</code>, <code>auto</code>.</dd>
+ <dt>{{domxref("HTMLMediaElement.preservesPitch")}} {{non-standard_inline}}</dt>
+ <dd>est un {{jsxref('Boolean')}} qui détermine si la hauteur du son sera préservée. S'il est défini à <code>false</code> (<em>faux</em>), la hauteur du son s'ajustera à la vitesse de l'audio. C'est implémenté avec préfixe dans Firefox (<code>mozPreservesPitch</code>) et WebKit (<code>webkitPreservesPitch</code>).</dd>
+ <dt>{{domxref("HTMLMediaElement.readyState")}}{{readonlyinline}}</dt>
+ <dd>Renvoie un <code>unsigned short</code> (énumération) indiquant l'état de préparation des médias.</dd>
+ <dt>{{domxref("HTMLMediaElement.seekable")}}{{readonlyinline}}</dt>
+ <dd>Renvoie un objet {{domxref('TimeRanges')}} qui contient les plages de temps que l'utilisateur peut rechercher, le cas échéant.</dd>
+ <dt>{{domxref("HTMLMediaElement.seeking")}}{{readonlyinline}}</dt>
+ <dd>Renvoie un {{jsxref('Boolean')}} qui indique si les médias sont en train de chercher une nouvelle position.</dd>
+ <dt>{{domxref("HTMLMediaElement.sinkId")}}{{readonlyinline}} {{experimental_inline}}</dt>
+ <dd>Renvoie une {{domxref("DOMString")}} (<em>chaîne</em>) qui est l'identifiant unique du périphérique audio de sortie, ou une chaîne vide s'il utilise l'agent utilisateur par défaut. Cet identifiant doit être l'une des valeurs <code>MediaDeviceInfo.deviceid</code> retournées par {{domxref("MediaDevices.enumeratedDevices()")}}, <code>id-multimedia</code> ou <code>id-communications</code>.</dd>
+ <dt>{{domxref("HTMLMediaElement.src")}}</dt>
+ <dd>est une {{domxref("DOMString")}} qui reflète l'attribut HTML {{htmlattrxref("src","video")}}, lequel contient l'URL d'une ressource média à utiliser.</dd>
+ <dt>{{domxref("HTMLMediaElement.srcObject")}}</dt>
+ <dd>est un {{domxref('MediaStream')}} représentant le média à lire ou qui a joué dans le <code>HTMLMediaElement</code> courant, ou <code>null</code> s'il n'est pas assigné.</dd>
+ <dt>{{domxref("HTMLMediaElement.textTracks")}}{{readonlyinline}}</dt>
+ <dd>Renvoie la liste d'objets {{domxref("TextTrack")}} (<em>piste de texte</em>) contenus dans l'élément.</dd>
+ <dt>{{domxref("HTMLMediaElement.videoTracks")}}{{readonlyinline}}</dt>
+ <dd>Renvoie la liste d'objets {{domxref("VideoTrack")}} (<em>pistes vidéo</em>) contenus dans l'élément.
+ <div class="note">
+ <p><strong>Note : </strong>Gecko ne prend en charge que la lecture d'une seule piste et l'analyse des métadonnées des pistes n'est disponible que pour les médias avec le format de conteneur Ogg.</p>
+ </div>
+ </dd>
+ <dt>{{domxref("HTMLMediaElement.volume")}}</dt>
+ <dd>est un <code>double</code> indiquant le volume audio, de 0.0 (silence) à 1.0 (le plus fort).</dd>
+</dl>
+
+<h3 id="Gestionnaires_dévènements">Gestionnaires d'évènements</h3>
+
+<dl>
+ <dt>{{domxref("HTMLMediaElement.onencrypted")}}</dt>
+ <dd>définit le {{domxref('EventHandler')}} (<em>gestionnaire d'évènements</em>) appelé quand le média est encrypté.</dd>
+ <dt>{{domxref("HTMLMediaElement.onwaitingforkey")}}</dt>
+ <dd>définit le {{domxref('EventHandler')}} (<em>gestionnaire d'évènements</em>) appelé quand la lecture est bloquée en attente d'une clé de chiffrement.</dd>
+</dl>
+
+<h2 id="Attributs_obsolètes">Attributs obsolètes</h2>
+
+<p>Ces attributs sont obsolètes et ne doivent plus être utilisés, même si un navigateur les prend encore en charge.</p>
+
+<dl>
+ <dt>{{domxref("HTMLMediaElement.initialTime")}} {{readonlyinline}} {{non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>renvoie un <code>double</code> qui indique la position de lecture initiale en secondes.</dd>
+ <dt>{{domxref("HTMLMediaElement.mozChannels")}} {{readonlyinline}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>renvoie un <code>double</code> représentant le nombre de canaux dans la ressource audio (c'est-à-dire 2 pour stéréo).</dd>
+</dl>
+
+<h3 id="Gestionnaires_dévènements_obsolètes">Gestionnaires d'évènements obsolètes</h3>
+
+<dl>
+ <dt>{{domxref("HTMLMediaElement.onmozinterruptbegin")}} {{non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>définit le {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) appelé lorsque l'élément média est interrompu du fait du gestionnaire de canaux audio. C'était une spécificité de Firefox, implémentée pour Firefox OS et supprimée à partir de Firefox 55.</dd>
+ <dt>{{domxref("HTMLMediaElement.onmozinterruptend")}} {{non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>définit le {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) appelé lorsque l'interruption est terminée. C'était une spécificité de Firefox, implémentée pour Firefox OS et supprimée à partir de Firefox 55.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Cette interface hérite aussi des méthodes de ses ancêtres {{domxref("HTMLElement")}}, {{domxref('Element')}}, {{domxref('Node')}} et {{domxref('EventTarget')}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLMediaElement.addTextTrack()")}}</dt>
+ <dd>Ajoute une piste de texte (telle qu'une piste pour les sous-titres) à un élément de média.</dd>
+ <dt>{{domxref("HTMLMediaElement.captureStream()")}} {{experimental_inline}}</dt>
+ <dd>Renvoie {{domxref("MediaStream")}}, capture un flux du contenu du média.</dd>
+ <dt>{{domxref("HTMLMediaElement.canPlayType()")}}</dt>
+ <dd>Détermine si le type de média spécifié peut être lu.</dd>
+ <dt>{{domxref("HTMLMediaElement.fastSeek()")}}</dt>
+ <dd>cherche directement à l'heure donnée.</dd>
+ <dt>{{domxref("HTMLMediaElement.load()")}}</dt>
+ <dd>Réinitialise l'élément média et redémarre la ressource. Tous les événements en attente sont ignorés. La quantité de données média récupérées est toujours affectée par l'attribut <code>preload</code>. Cette méthode peut être utile pour libérer des ressources après la suppression de tout attribut <code>src</code> et des descendants d'éléments <code>source</code>. Sinon, il est généralement inutile d'utiliser cette méthode, à moins que cela ne soit nécessaire pour réanalyser les enfants de l'élément <code>source</code> après des modifications dynamiques.</dd>
+ <dt>{{domxref("HTMLMediaElement.mozCaptureStream()")}} {{non-standard_inline}}</dt>
+ <dd>[enter description]</dd>
+ <dt>{{domxref("HTMLMediaElement.mozCaptureStreamUntilEnded()")}} {{non-standard_inline}}</dt>
+ <dd>[enter description]</dd>
+ <dt>{{domxref("HTMLMediaElement.mozGetMetadata()")}} {{non-standard_inline}}</dt>
+ <dd>Renvoie un {{jsxref('Object')}}, qui contient des propriétés représentant les métadonnées de la ressource média en cours de lecture, comme paires <code>{key: value}</code>. Une copie distincte des données est renvoyée chaque fois que la méthode est appelée. Cette méthode doit être appelée après le déclenchement de l'évènement <a href="/en-US/docs/Web/Events/loadedmetadata">loadedmetadata</a>.</dd>
+ <dt>{{domxref("HTMLMediaElement.pause()")}}</dt>
+ <dd>met en pause la lecture du média.</dd>
+ <dt>{{domxref("HTMLMediaElement.play()")}}</dt>
+ <dd><span class="short_text" id="result_box" lang="fr"><span>commence la lecture du média.</span></span></dd>
+ <dt>{{domxref("HTMLMediaElement.seekToNextFrame()")}} {{non-standard_inline}} {{experimental_inline}}</dt>
+ <dd>cherche l'image suivante dans les médias. Cette méthode expérimentale non standard permet de conduire manuellement la lecture et le rendu des médias à une vitesse personnalisée, ou de se déplacer dans le média image par image pour effectuer un filtrage ou d'autres opérations.</dd>
+ <dt>{{domxref("HTMLMediaElement.setMediaKeys()")}} {{experimental_inline}}</dt>
+ <dd>Renvoie {{jsxref("Promise")}}. Définit les {{domxref("MediaKeys")}}, clés à utiliser quand le média doit être décrypté pendant la lecture.</dd>
+ <dt>{{domxref("HTMLMediaElement.setSinkId()")}} {{experimental_inline}}</dt>
+ <dd>définit l'identifiant du périphérique audio à utiliser en sortie et renvoie un {{jsxref("Promise")}}. Cela fonctionne uniquement quand l'application est autorisée à utiliser l'appareil spécifié.</dd>
+</dl>
+
+<h2 id="Méthodes_obsolètes">Méthodes obsolètes</h2>
+
+<p>Ces méthodes sont obsolètes et ne doivent plus être utilisées, même si un navigateur les prend encore en charge.</p>
+
+<dl>
+ <dt>{{domxref("HTMLMediaElement.mozLoadFrom()")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Cette méthode, disponible seulement pour les implémentations Mozilla, charge les données d'un autre élément de média. Ce fonctionnement est similaire à <code>load()</code> excepté qu'à la place d'exécuter l'algorithme normal de sélection de la ressource, la source est simplement définie sur  <code>currentSrc</code> de l'autre élément. Ceci est optimisé pour que cet élément accède à toutes les données mises en cache et en mémoire tampon de l'autre élément ; en fait, les deux éléments partagent les données téléchargées, de sorte que les données téléchargées par l'un ou l'autre élément sont disponibles pour les deux.</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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "the-video-element.html#htmlmediaelement", "HTMLMediaElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Pas de changement de {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('EME', '#introduction', 'Encrypted Media Extensions')}}</td>
+   <td>{{Spec2('EME')}}</td>
+   <td>Ajout de {{domxref("MediaKeys")}}, {{domxref("MediaEncryptedEvent")}}, et setMediaKeys.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Capture','#htmlmediaelement-extensions','HTMLMediaElement')}}</td>
+   <td>{{Spec2('Media Capture')}}</td>
+   <td>Ajout de <code>sinkId</code>, <code>setSinkId()</code> et <code>captureStream()</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.HTMLMediaElement")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>References
+  <ul>
+   <li>Les éléments HTML {{HTMLElement("video")}} et {{HTMLElement("audio")}}.</li>
+   <li>Les interfaces {{domxref("HTMLVideoElement")}} et {{domxref("HTMLAudioElement")}}, dérivées de <code>HTMLMediaElement</code>.</li>
+  </ul>
+ </li>
+ <li>Articles
+  <ul>
+   <li><a class="internal" href="https://developer.mozilla.org/fr/Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video">Contenu audio et video</a></li>
+   <li><a class="internal" href="https://developer.mozilla.org/fr/docs/Web/HTML/Formats_pour_audio_video">Formats pris en charge par <code>audio</code> et <code>video</code></a></li>
+   <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Web_Audio_API">Web Audio API</a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/api/htmlmediaelement/play/index.html b/files/fr/web/api/htmlmediaelement/play/index.html
new file mode 100644
index 0000000000..b65ea9ebf3
--- /dev/null
+++ b/files/fr/web/api/htmlmediaelement/play/index.html
@@ -0,0 +1,163 @@
+---
+title: HTMLMediaElement.play()
+slug: Web/API/HTMLMediaElement/play
+tags:
+  - API
+  - Audio
+  - HTMLMediaElement
+  - Interface
+  - Media
+  - Méthode
+  - Reference
+  - Video
+  - play
+translation_of: Web/API/HTMLMediaElement/play
+---
+<p>{{APIRef("HTML DOM")}} {{SeeCompatTable}}</p>
+
+<p>La méthode <strong><code>HTMLMediaElement.play()</code></strong> essaie de commencer la lecture du média et renvoie une {{jsxref("Promise")}} qui est résolue quand la lecture a commencé avec succès, et est rejetée si la lecture ne peut commencer pour n'importe quelle raison (comme, par exemple, une erreur de permission).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>Promise</em> = <em>HTMLMediaElement</em>.play();</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Aucun.</p>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une {{jsxref("Promise")}} qui est résolue quand la lecture a commencé, ou rejetée si la lecture ne peut commencer.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Le <em>gestionnaire de rejet</em> de la promesse est appelé avec un nom d'exception comme seul paramètre (contrairement aux exceptions traditionnelles). Les exceptions possibles incluent :</p>
+
+<dl>
+ <dt><code>NotAllowedError</code></dt>
+ <dd>Le client (navigateur) ou système d'exploitation ne permet pas la lecture du média dans le contexte ou la situation actuelle. Ceci peut arriver, par exemple, si le navigateur oblige l'utilisateur à lancer manuellement le média en cliquant sur le bouton "play".</dd>
+ <dt><code>NotSupportedError</code></dt>
+ <dd>La source du média (qui peut être spécifié comme un {{domxref("MediaStream")}}, {{domxref("MediaSource")}}, {{domxref("Blob")}}, ou {{domxref("File")}}, par example) ne représente pas un format supporté.</dd>
+</dl>
+
+<p>D'autres types d'exceptions peuvent survenir selon l'implémentation du navigateur, du lecteur de média, etc.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Cet exemple commence la lecture d'un élément <code>video</code> et met à jour une box avec un message de succès si la lecture a bien démarré et un message d'erreur si une erreur survient.</p>
+
+<pre class="brush: js">let myVideo = document.getElementById("myVideoElement");
+
+myVideo.play().then(() =&gt; {
+  document.getElementById("statusText").innerHTML = "Yay ! La vidéo est lancée !";
+}).catch((error) =&gt; {
+ document.getElementById("statusText").innerHTML = "Erreur: " + error;
+});
+</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', 'embedded-content.html#dom-media-play', 'play()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Définition initiale; living specification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C','embedded-content-0.html#playing-the-media-resource','play()')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p>Notez que les versions WHATWG et W3C de la spécification diffèrent (depuis le 20 Avril 2016) par le fait que cette méthode renvoie respectivement une {{jsxref("Promise")}} ou rien du tout.</p>
+</div>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support basique</td>
+   <td>{{CompatChrome(50.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Renvoie une promesse</td>
+   <td>{{CompatChrome(50.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(53)}}</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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(50.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(50.0)}}</td>
+  </tr>
+  <tr>
+   <td>Renvoie une promesse</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(53)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fr/web/api/htmlmediaelement/volume/index.html b/files/fr/web/api/htmlmediaelement/volume/index.html
new file mode 100644
index 0000000000..130734e004
--- /dev/null
+++ b/files/fr/web/api/htmlmediaelement/volume/index.html
@@ -0,0 +1,66 @@
+---
+title: HTMLMediaElement.volume
+slug: Web/API/HTMLMediaElement/volume
+tags:
+  - API
+  - Audio
+  - HTML DOM
+  - Property
+  - Propriété
+  - Reference
+  - Volume
+  - sound
+translation_of: Web/API/HTMLMediaElement/volume
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p>La propriété <strong><code>HTMLMediaElement.volume</code></strong> définit le volume auquel le média doit être lu. </p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>volume</em> ​= <em>video</em>.volume; //1</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une valeur de type double (nombre à virgule) inclut entre 0 et 1, si elle vaut 0 le son est coupé et elle vaut 1 le son est le plus élevé possible.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre>var obj = document.createElement('audio');
+console.log(obj.volume); // 1
+obj.volume = 0.75;</pre>
+
+<h2 id="Specifications">Specifications</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('HTML WHATWG', "#dom-media-volume", "HTMLMediaElement.volume")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.volume")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateur">Compatibilité navigateur</h2>
+
+
+
+<p>{{Compat("api.HTMLMediaElement.volume")}}</p>
+
+<h2 id="See_Also" name="See_Also">Voir aussi</h2>
+
+<ul>
+ <li>The interface defining it, {{domxref("HTMLMediaElement")}}.</li>
+ <li>{{domxref("HTMLMediaElement.muted")}}</li>
+</ul>
diff --git a/files/fr/web/api/htmloptionelement/index.html b/files/fr/web/api/htmloptionelement/index.html
new file mode 100644
index 0000000000..100dfce550
--- /dev/null
+++ b/files/fr/web/api/htmloptionelement/index.html
@@ -0,0 +1,177 @@
+---
+title: HTMLOptionElement
+slug: Web/API/HTMLOptionElement
+translation_of: Web/API/HTMLOptionElement
+---
+<div>
+ {{ApiRef}}</div>
+<p>L'interface <code>HTMLOptionElement</code> représente l'élément {{HTMLElement("option")}} et hérite de toutes les classes et méthodes de l'intreface {{domxref("HTMLElement")}} .</p>
+<h2 id="Propriétés"><em>Propriétés</em></h2>
+<p><em>hérite des propriétés de son parent, {{domxref("HTMLElement")}}.</em></p>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Nom</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>defaultSelected</code></td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>
+    <p>Contient la valeur initiale de l'attribut HTML {{htmlattrxref("selected", "option")}} ,indiquant si l'option est sélectionnée par défaut ou non.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>disabled</code></td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>
+    <p>Retourne la valeur de l'attribut HTML {{htmlattrxref("disabled", "option")}} , cet attribut indique que l'option ne peut pas être sélectionnée. Une option peut aussi être désactivée lorsqu'elle est fille d'un élément {{HTMLElement("optgroup")}} désactivé.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>form</code>{{readonlyInline}}</td>
+   <td>{{domxref("HTMLFormElement")}}</td>
+   <td>
+    <p>Si l'option est une fille d'un élément {{HTMLElement("select")}}, cette propriété à la même valeur que l'attribut <code>form</code> de l'objet {{DomXref("HTMLSelectElement")}}</p>
+    <p>correspondant, sinon , sa valeur est <code>null</code>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>index</code>{{readonlyInline}}</td>
+   <td><code>long</code></td>
+   <td>
+    <p>La position de l'option dans la liste d'options à laquelle elle appartient, dans un ordre arborescent. Si l'option ne fait pas partie d'une liste d'options , comme dans le cas où elle appartient à l'élément {{HTMLElement("datalist")}} sa valeur est 0.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>label</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>
+    <p>Reflète la valeur de l'attribut {{htmlattrxref("label", "option")}}, qui fourni un libellé à l'option. si cet attribut n'est pas spécifié, sa lecture retourne le text de l'élément en question.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>selected</code></td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>
+    <p>Indique si l'option est sélectionnée ou non .</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>text</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>
+    <p>Contient le contenu texte de l'élément.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>value</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>
+    <p>Retourne la valeur de l'attribut HTML {{htmlattrxref("value", "option")}}, s'il existe, sinon la valeur de la propriété {{domxref("Node.textContent")}} est retournée.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Méthodes">Méthodes</h2>
+<p><em>Hérite des méthodes de son parent , {{domxref("HTMLElement")}}.</em></p>
+<dl>
+ <dt>
+  {{domxref("HTMLOptionElement.Option()")}}</dt>
+ <dd>
+   </dd>
+ <dd>
+   </dd>
+ <dd>
+  c'est le constructeur créant l'objet <code>HTMLOptionElement</code> object. il accepte quatre valeurs : le texte à afficher , <code>text</code>, la valeur associée au texte , <code>value</code>, la valeur du <code>defaultSelected</code>, et la valeur du <code>selected</code>. les trois dernières sont optionnelles.</dd>
+</dl>
+<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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "the-button-element.html#the-option-element", "HTMLOptionElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>
+    <p>pas de changement depuis la {{SpecName("HTML5 W3C")}}.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "forms.html#the-option-element", "HTMLOptionElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>
+    <p>Le constructeur, <code>Option()</code>, a été ajouté. la propriété <code>form </code>peut avoir la valeur <code>null</code>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-70901257', 'HTMLOptionElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>
+    <p>Le sens de la propriété <code>selected a changé</code>: elle indique désormais si l'option est sélectionnée à l'instant , au lieu d'indiquer si elle a été initialement sélectionnée.</p>
+    <p>La propriété <code>defaultSelected</code> n'est plus en lecture seule</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-70901257', 'HTMLOptionElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>La définition initiale .</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+<p>{{CompatibilityTable}}</p>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th><span class="short_text" id="result_box" lang="fr"><span class="hps">caractéristique</span></span></th>
+    <th>Chrome</th>
+    <th>Firefox (Gecko)</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari (WebKit)</th>
+   </tr>
+   <tr>
+    <td>support basique</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatGeckoDesktop(1.0)}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th><span class="short_text" id="result_box" lang="fr"><span class="hps">caractéristique</span></span></th>
+    <th>Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Phone</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>support basique</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatGeckoMobile(1.0)}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h2 id="Voir_aussi">Voir aussi</h2>
+<ul>
+ <li>L'élement HTML  implèmentant cette interface : {{ HTMLElement("option") }}.</li>
+</ul>
diff --git a/files/fr/web/api/htmloptionelement/option/index.html b/files/fr/web/api/htmloptionelement/option/index.html
new file mode 100644
index 0000000000..80dc7f77cd
--- /dev/null
+++ b/files/fr/web/api/htmloptionelement/option/index.html
@@ -0,0 +1,101 @@
+---
+title: Option()
+slug: Web/API/HTMLOptionElement/Option
+tags:
+  - API
+  - Constructeur
+  - HTML DOM
+  - HTMLOptionElement
+translation_of: Web/API/HTMLOptionElement/Option
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>Le constructeur <strong><code>Option()</code></strong> permet de créer un nouvel objet {{domxref("HTMLOptionElement")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>o</em><em>ptionElementReference</em> = new Option(<em>text</em>, <em>value</em>, <em>defaultSelected</em>, <em>selected</em>);</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>text</code> {{optional_inline}}</dt>
+ <dd>Une chaîne de caractères {{domxref("DOMString")}} représentant le contenu de l'élément, c'est-à-dire le texte affiché. Si cet argument n'est pas spécifié, c'est la chaîne vide qui sera utilisée.</dd>
+ <dt><code>value</code> {{optional_inline}}</dt>
+ <dd>Une chaîne de caractères {{domxref("DOMString")}} représentant la valeur de {{domxref("HTMLOptionElement")}}, c’est-à-dire l’attribut HTML <code>value</code> de l'élément {{htmlelement("option")}}. Si cet argument n'est pas fourni, ce sera la valeur de <code>text</code> qui sera reprise comme valeur (par exemple pour l'élément {{htmlelement("select")}} associé lorsque le formulaire est envoyé au serveur).</dd>
+ <dt><code>defaultSelected</code> {{optional_inline}}</dt>
+ <dd>Un {{domxref("Boolean")}} qui définit la valeur de l'attribut {{htmlattrxref("selected", "option")}}, c'est-à-dire que cette {{htmlelement("option")}} sera la valeur par défaut sélectionné dans l'élément {{htmlelement("select")}} lors du premier chargement de la page. S'il n'est pas spécifié, la valeur <code>false</code> sera utilisée par défaut.</dd>
+ <dt><code>selected</code> {{optional_inline}}</dt>
+ <dd>Un {{domxref("Boolean")}} qui définit l'état sélectionné de l'option, la valeur par défaut est <code>false</code> (non sélectionné). Si cet argument est absent et même si l'argument <code>defaultSelected</code> vaut <code>true</code>, l'option ne sera pas pas sélectionnée.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Ajouter_de_nouvelles_options">Ajouter de nouvelles options</h3>
+
+<pre class="brush: js">/* Imaginons qu'on ait le code HTML suivant dans le document
+&lt;select id='s'&gt;
+
+&lt;/select&gt;
+*/
+
+var s = document.getElementById('s');
+var options = [Quatre, Cinq, Six];
+
+options.forEach(function(element,key) {
+    s[key] = new Option(element,key);
+});
+</pre>
+
+<h3 id="Ajouter_des_options_avec_différents_paramètres">Ajouter des options avec différents paramètres</h3>
+
+<pre class="brush: js">/* Imaginons qu'ont ait le code HTML suivant dans le document
+&lt;select id="s"&gt;
+  &lt;option&gt;Premier&lt;/option&gt;
+  &lt;option&gt;Deuxième&lt;/option&gt;
+  &lt;option&gt;Troisième&lt;/option&gt;
+&lt;/select&gt;
+*/
+
+var s = document.getElementById('s');
+var options = [ 'zéro', 'un', 'deux' ];
+
+options.forEach(function(element, key) {
+  if (element == 'zéro') {
+    s[s.options.length] = new Option(element, s.options.length, false, false);
+  }
+  if (element == 'un') {
+    s[s.options.length] = new Option(element, s.options.length, true, false); // Ajouter l'attribut "selected"
+  }
+  if (element == 'deux') {
+    s[s.options.length] = new Option(element, s.options.length, false, true); // Sélectionnera l'option
+  }
+});
+
+/* Résultat dans le DOM / HTML modifié :
+&lt;select id="s"&gt;
+  &lt;option value="0"&gt;zéro&lt;/option&gt;
+  &lt;option value="1" selected=""&gt;un&lt;/option&gt;
+  &lt;option value="2"&gt;deux&lt;/option&gt; // L'utilisateur verra cette option sélectionnée
+&lt;/select&gt;
+*/</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 class="external external-icon" href="http://www.w3.org/TR/2012/WD-html5-20121025/the-option-element.html#dom-option" hreflang="en" lang="en">HTML5<br>
+    <small lang="en-US">The definition of 'Option' in that specification.</small></a></td>
+   <td>Recommendation</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/api/htmlquoteelement/index.html b/files/fr/web/api/htmlquoteelement/index.html
new file mode 100644
index 0000000000..5ae2324898
--- /dev/null
+++ b/files/fr/web/api/htmlquoteelement/index.html
@@ -0,0 +1,30 @@
+---
+title: HTMLQuoteElement
+slug: Web/API/HTMLQuoteElement
+tags:
+  - DOM
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/HTMLQuoteElement
+---
+<p>{{ ApiRef() }}</p>
+<h2 id="Interface_des_éléments_HTML_de_citation">Interface des éléments HTML de citation</h2>
+<p>Les objets DOM quote expose l'interface <a href="http://www.w3.org/TR/html5/grouping-content.html#htmlquoteelement" title="http://www.w3.org/TR/html5/grouping-content.html#htmlquoteelement"><code>HTMLQuoteElement</code></a> (ou {{ HTMLVersionInline(4) }} <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-70319763" title="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-70319763"><code>HTMLQuoteElement</code></a>), qui fournissent plusieurs propriétés pour manipuler les éléments de citation (et viennent s'ajouter aux propriétés habituelles pour un objet de l'interface {{domxref("element")}}, disponibles par héritage).</p>
+<h2 id="Propriétés">Propriétés</h2>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Nom</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>cite</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Reflète l'attribut HTML {{ htmlattrxref("cite", "blockquote") }} contenant l'URL de la source de la citation.</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Voir_également">Voir également</h2>
+<p>Cette interface est supportée par les deux éléments HTML {{ HTMLElement("blockquote") }} et {{ HTMLElement("q") }}.</p>
diff --git a/files/fr/web/api/htmlselectelement/index.html b/files/fr/web/api/htmlselectelement/index.html
new file mode 100644
index 0000000000..9cd6420eb0
--- /dev/null
+++ b/files/fr/web/api/htmlselectelement/index.html
@@ -0,0 +1,268 @@
+---
+title: HTMLSelectElement
+slug: Web/API/HTMLSelectElement
+translation_of: Web/API/HTMLSelectElement
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p>L'interface <code><strong>HTMLSelectElement</strong></code> représente un élément HTML {{HTMLElement("select")}}. Cet élément partage aussi toute les propriétés et méthodes des autres elements HTML via l'interface {{ domxref("HTMLElement") }}.</p>
+
+<h2 id="Properties" name="Properties">Propriétés</h2>
+
+<p><em>Cette interface hérite des propriétés de {{domxref("HTMLElement")}}, {{domxref("Element")}} et {{domxref("Node")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLSelectElement.autofocus")}}</dt>
+ <dd><em>Est un </em>{{jsxref("Boolean")}} qui reflète l'attribut HTML {{ htmlattrxref("autofocus", "select") }} : il indique si l'élément a le focus au chargement de la page (excepté si l'utilisateur le change, par exemple en cliquant sur un autre element). Uniquement les elément associé à un formulaire dans le document peuvent utiliser cet attribut. {{ gecko_minversion_inline("2.0") }}</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("HTMLSelectElement.disabled")}}</dt>
+ <dd>Est un {{jsxref("Boolean")}} qui reflète l'attribut HTML {{ htmlattrxref("disabled", "select") }} : il indique si l'élément est oui ou non desactivé. Si il est désactivé, l'élément n'accepte pas les clicks.</dd>
+ <dt>{{domxref("HTMLSelectElement.form")}} {{readonlyInline}}</dt>
+ <dd>Retourne un {{domxref("HTMLFormElement")}} représentant le formulaire associé a cet élément. Si cet élément est le fils d'un formulaire, alors cet attribut est l'ID de l'element form. Si l'élément n'est pas fils d'un formulaire, alors l'attribut peut-être l'ID de n'importe quel élément du même document.</dd>
+ <dt>{{domxref("HTMLSelectElement.labels")}} {{readonlyInline}}</dt>
+ <dd>Retourne une {{ domxref("NodeList") }} contenant la liste des labels associé avec l'éléments select.</dd>
+ <dt>{{domxref("HTMLSelectElement.length")}}</dt>
+ <dd>Est un <code>unsigned long</code> représentant le nombre d'élément {{ HTMLElement("option") }} dans cet element <code>select</code>.</dd>
+ <dt>{{domxref("HTMLSelectElement.multiple")}}</dt>
+ <dd>Est un {{jsxref("Boolean")}} représentant l'attribut HTML {{ htmlattrxref("multiple", "select") }}, qui indique si plusieurs items peuvent être choisis à la fois par l'utilisateur.</dd>
+ <dt>{{domxref("HTMLSelectElement.name")}}</dt>
+ <dd>Est une {{ domxref("DOMString") }} qui représente l'attribut HTML {{ htmlattrxref("name", "select") }}, contenant le nom de ce contrôle pour les serveurs et pour les fonctions de recherche dans le DOM.</dd>
+ <dt>{{domxref("HTMLSelectElement.options")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{ domxref("HTMLOptionsCollection") }} containing the set of {{ HTMLElement("option") }} elements contained by this element.</dd>
+ <dt>{{domxref("HTMLSelectElement.required")}}</dt>
+ <dd>Is a {{jsxref("Boolean")}} that reflects the {{ htmlattrxref("required", "select") }} HTML attribute, which indicates whether the user is required to select a value before submitting the form. {{ gecko_minversion_inline("2.0") }}</dd>
+ <dt>{{domxref("HTMLSelectElement.selectedIndex")}}</dt>
+ <dd>Is a <code>long</code> that reflects the index of the first selected {{ HTMLElement("option") }} element. The value <code>-1</code> indicates no element is selected.</dd>
+ <dt>{{domxref("HTMLSelectElement.selectedOptions")}} {{readonlyInline}}</dt>
+ <dd>Returns a live {{ domxref("HTMLCollection") }} containing the set of options that are selected.</dd>
+ <dt>{{domxref("HTMLSelectElement.size")}}</dt>
+ <dd>Is a <code>long</code> that reflects the {{ htmlattrxref("size", "select") }} HTML attribute, which contains the number of visible items in the control. The default is 1, unless <code>multiple</code> is true, in which case it is 4.</dd>
+ <dt>{{domxref("HTMLSelectElement.type")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{ domxref("DOMString") }} the form control's type. When <code>multiple</code> is <code>true</code>, it returns <code>"select-multiple"</code>; otherwise, it returns <code>"select-one"</code>.</dd>
+ <dt>{{domxref("HTMLSelectElement.validationMessage")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{ domxref("DOMString") }} containing a localized message that describes the validation constraints that the control does not satisfy (if any). This attribute is the empty string if the control is not a candidate for constraint validation (<code>willValidate</code> is false), or it satisfies its constraints.</dd>
+ <dt>{{domxref("HTMLSelectElement.validity")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("ValidityState")}} representing the validity state that this control is in.</dd>
+ <dt>{{domxref("HTMLSelectElement.value")}}</dt>
+ <dd>Is a {{ domxref("DOMString") }} with the value of this form control, that is, of the first selected option.</dd>
+ <dt>{{domxref("HTMLSelectElement.willValidate")}}{{readonlyInline}}</dt>
+ <dd>Is a {{jsxref("Boolean")}} that indicates whether the button is a candidate for constraint validation. It is false if any conditions bar it from constraint validation.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Méthodes</h2>
+
+<p><em>This interface inherits the methods of {{domxref("HTMLElement")}}, and of {{domxref("Element")}} and {{domxref("Node")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLSelectElement.add()")}}</dt>
+ <dd>Adds an element to the collection of <code>option</code> elements for this <code>select</code> element.</dd>
+ <dt>{{domxref("HTMLElement.blur", "HTMLSelectElement.blur()")}} {{ obsolete_inline}}</dt>
+ <dd>Removes input focus from this element. <em>This method is now implemented on {{domxref("HTMLElement")}}</em>.</dd>
+ <dt>{{domxref("HTMLSelectElement.checkValidity()")}}</dt>
+ <dd>Checks whether the element has any constraints and whether it satisfies them. If the element fails its constraints, the browser fires a cancelable {{event("invalid")}} event at the element (and returns <code>false</code>).</dd>
+ <dt>{{domxref("HTMLElement.focus", "HTMLSelectElement.focus()")}} {{obsolete_inline}}</dt>
+ <dd>Gives input focus to this element. <em>This method is now implemented on {{domxref("HTMLElement")}}</em>.</dd>
+ <dt>{{domxref("HTMLSelectElement.item()")}}</dt>
+ <dd>Gets an item from the options collection for this {{HTMLElement("select")}} element. You can also access an item by specifying the index in array-style brackets or parentheses, without calling this method explicitly.</dd>
+ <dt>{{domxref("HTMLSelectElement.namedItem()")}}</dt>
+ <dd>Gets the item in the options collection with the specified name. The name string can match either the <code>id</code> or the <code>name</code> attribute of an option node. You can also access an item by specifying the name in array-style brackets or parentheses, without calling this method explicitly.</dd>
+ <dt>{{domxref("HTMLSelectElement.remove()")}}</dt>
+ <dd>Removes the element at the specified index from the options collection for this select element.</dd>
+ <dt>{{domxref("HTMLSelectElement.setCustomValidity()")}}</dt>
+ <dd>Sets the custom validity message for the selection element to the specified message. Use the empty string to indicate that the element does <em>not</em> have a custom validity error.</dd>
+</dl>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<h3 id="Get_information_about_the_selected_option">Get information about the selected option</h3>
+
+<pre class="brush: js">/* assuming we have the following HTML
+<span class="whitespace">&lt;</span><span class="xml-tagname">select </span><span class="xml-attname">id</span><span class="xml-punctuation">=</span><span class="xml-attribute">'s'</span><span class="xml-punctuation">&gt;</span>
+<span class="whitespace">    </span><span class="xml-punctuation">&lt;</span><span class="xml-tagname">option</span><span class="xml-punctuation">&gt;</span><span class="xml-text">First</span><span class="xml-punctuation">&lt;/</span><span class="xml-tagname">option</span><span class="xml-punctuation">&gt;</span>
+<span class="whitespace">    </span><span class="xml-punctuation">&lt;</span><span class="xml-tagname">option </span><span class="xml-attname">selected</span><span class="xml-punctuation">&gt;</span><span class="xml-text">Second</span><span class="xml-punctuation">&lt;/</span><span class="xml-tagname">option</span><span class="xml-punctuation">&gt;</span>
+<span class="whitespace">    </span><span class="xml-punctuation">&lt;</span><span class="xml-tagname">option</span><span class="xml-punctuation">&gt;</span><span class="xml-text">Third</span><span class="xml-punctuation">&lt;/</span><span class="xml-tagname">option</span><span class="xml-punctuation">&gt;</span>
+<span class="xml-punctuation">&lt;/</span><span class="xml-tagname">select</span><span class="xml-punctuation">&gt;</span>
+*/
+
+<span class="js-keyword">var </span><span class="js-variable">select </span><span class="js-operator">= </span><span class="js-variable">document</span><span class="js-punctuation">.</span><span class="js-property">getElementById</span><span class="js-punctuation">(</span><span class="js-string">'s'</span><span class="js-punctuation">)</span><span class="js-punctuation">;</span>
+
+<span class="js-comment">// return the index of the selected option</span>
+<span class="js-variable">alert</span><span class="js-punctuation">(</span><span class="js-variable">select</span><span class="js-punctuation">.</span><span class="js-property">selectedIndex</span><span class="js-punctuation">)</span><span class="js-punctuation">; </span><span class="js-comment">// 1</span>
+
+<span class="js-comment">// return the value of the selected option</span>
+<span class="js-variable">alert</span><span class="js-punctuation">(</span><span class="js-variable">select</span><span class="js-punctuation">.</span><span class="js-property">options</span><span class="js-punctuation">[</span><span class="js-variable">select</span><span class="js-punctuation">.</span><span class="js-property">selectedIndex</span><span class="js-punctuation">]</span><span class="js-punctuation">.</span><span class="js-property">value</span><span class="js-punctuation">) </span><span class="js-comment">// Second</span>
+</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', '#htmlselectelement', 'HTMLSelectElement')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Since the latest snapshot, {{SpecName('HTML5 W3C')}}, it adds the <code>autocomplete</code> property and the <code>reportValidity()</code> method.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#htmlselectelement', 'HTMLSelectElement')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Is a snapshot of {{SpecName("HTML WHATWG")}}.<br>
+    It adds the <code>autofocus</code>, <code>form</code>, <code>required</code>, <code>labels</code>, <code>selectedOptions</code>, <code>willValidate</code>, <code>validity</code> and <code>validationMessage</code> properties.<br>
+    The <code>tabindex</code> property and the <code>blur()</code> and <code>focus()</code> methods have been moved to {{domxref("HTMLElement")}}.<br>
+    The methods <code>item()</code>, <code>namedItem()</code>, <code>checkValidity()</code> and <code>setCustomValidity()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-94282980', 'HTMLSelectElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td><code>options</code> now returns an {{domxref("HTMLOptionsCollection")}}.<br>
+    <code>length</code> now returns an <code>unsigned long</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-94282980', 'HTMLSelectElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>1.0</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td><code>item()</code> and <code>namedItem()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(2.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>setCustomValidity()</code>, <code>checkValidity()</code>, <code>willValidate</code>, <code>validationMessage</code>, <code>validity</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(2.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>selectedOptions</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(26)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>labels</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ unimplemented_inline("556743") }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoMobile(1)}}</td>
+   <td>1.0</td>
+   <td>1.0</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td><code>item()</code> and <code>namedItem()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(2.0)}}</td>
+   <td>1.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>setCustomValidity()</code>, <code>checkValidity()</code>, <code>willValidate</code>, <code>validationMessage</code>, <code>validity</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(2.0)}}</td>
+   <td>1.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>selectedOptions</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(26)}}</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>labels</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ unimplemented_inline("556743") }}</td>
+   <td>{{ unimplemented_inline("556743") }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The {{HTMLElement("select")}} HTML element, implementing this interface.</li>
+</ul>
+
+<dl>
+ <dt> </dt>
+</dl>
diff --git a/files/fr/web/api/htmlselectelement/remove/index.html b/files/fr/web/api/htmlselectelement/remove/index.html
new file mode 100644
index 0000000000..e631e15531
--- /dev/null
+++ b/files/fr/web/api/htmlselectelement/remove/index.html
@@ -0,0 +1,134 @@
+---
+title: HTMLSelectElement.remove()
+slug: Web/API/HTMLSelectElement/remove
+translation_of: Web/API/HTMLSelectElement/remove
+---
+<p>{{ APIRef("HTML DOM") }}</p>
+
+<p>La méthode <code><strong>HTMLSelectElement.remove()</strong></code> enlève l'option à l'index choisi dans la liste des options de cet objet select.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="eval">collection.remove(index);
+</pre>
+
+<h3 id="Parameters" name="Parameters">Paramètre</h3>
+
+<ul>
+ <li><em>index est</em> un entier long définissant la position du {{ domxref("HTMLOptionElement") }} à enlever de la collection. Si rien n'est trouvé à cette position dans la liste, la méthode n'a aucun effet.</li>
+</ul>
+
+<dl>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">var sel = document.getElementById("maListe");
+sel.remove(1);
+
+/*
+  Prend l'objet select existant suivant :
+
+  &lt;select id="maListe" name="maListe"&gt;
+    &lt;option value="1"&gt;Option: Value 1&lt;/option&gt;
+    &lt;option value="2"&gt;Option: Value 2&lt;/option&gt;
+    &lt;option value="3"&gt;Option: Value 3&lt;/option&gt;
+  &lt;/select&gt;
+
+  Et le transforme en:
+
+  &lt;select id="maListe" name="maListe"&gt;
+    &lt;option value="1"&gt;Option: Value 1&lt;/option&gt;
+    &lt;option value="3"&gt;Option: Value 3&lt;/option&gt;
+  &lt;/select&gt;
+*/
+ </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('HTML WHATWG', '#dom-select-remove', 'HTMLSelectElement.remove()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#dom-select-remove', 'HTMLSelectElement.remove()')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Is a snapshot of {{SpecName("HTML WHATWG")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-33404570', 'HTMLSelectElement.remove()')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-33404570', 'HTMLSelectElement.remove()')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Navigateurs_compatibles">Navigateurs compatibles</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{ domxref("ChildNode.remove") }}, la méthode appelée quand remove est créé sans argument pour un {{ domxref("HTMLSelectElement") }}.</li>
+ <li>{{domxref("HTMLSelectElement") }} qui possède cette méthode.</li>
+</ul>
diff --git a/files/fr/web/api/htmlselectelement/selectedindex/index.html b/files/fr/web/api/htmlselectelement/selectedindex/index.html
new file mode 100644
index 0000000000..3ba1a7eb93
--- /dev/null
+++ b/files/fr/web/api/htmlselectelement/selectedindex/index.html
@@ -0,0 +1,71 @@
+---
+title: HTMLSelectElement.selectedIndex
+slug: Web/API/HTMLSelectElement/selectedIndex
+translation_of: Web/API/HTMLSelectElement/selectedIndex
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><code><strong>HTMLSelectElement.selectedIndex</strong></code> est un <code>long</code> qui représente l'index du premier élément sélectionné {{HTMLElement("option")}}. La valeur <code>-1</code> indique qu'aucun élément est sélectionné.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <var>index</var> = <var>selectElem</var>.selectedIndex;
+<em>selectElem<code>.selectedIndex = </code>index;</em>
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p id="p"&gt;selectedIndex: 0&lt;/p&gt;
+
+&lt;select id="select"&gt;
+  &lt;option selected&gt;Option A&lt;/option&gt;
+  &lt;option&gt;Option B&lt;/option&gt;
+  &lt;option&gt;Option C&lt;/option&gt;
+  &lt;option&gt;Option D&lt;/option&gt;
+  &lt;option&gt;Option E&lt;/option&gt;
+&lt;/select&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js; highlight[6]">var selectElem = document.getElementById('select');
+var pElem = document.getElementById('p');
+
+// Quand une nouvelle &lt;option&gt; est selectionnée
+selectElem.addEventListener('change', function() {
+  var index = selectElem.selectedIndex;
+  // Rapporter cette donnée au &lt;p&gt;
+  pElem.innerHTML = 'selectedIndex: ' + index;
+})</pre>
+
+<p>{{EmbedLiveSample("Exemple", "200px", "80px")}}</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('HTML WHATWG', '#dom-select-selectedindex', 'HTMLSelectElement')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Pas de changement depuis le snapshot précédent, {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#dom-select-selectedindex', 'HTMLSelectElement')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Définition initiale, snapshot de {{SpecName("HTML WHATWG")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_entre_les_navigateurs">Compatibilité entre les navigateurs</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api.HTMLSelectElement.selectedIndex")}}</p>
diff --git a/files/fr/web/api/htmlselectelement/setcustomvalidity/index.html b/files/fr/web/api/htmlselectelement/setcustomvalidity/index.html
new file mode 100644
index 0000000000..b5163f567d
--- /dev/null
+++ b/files/fr/web/api/htmlselectelement/setcustomvalidity/index.html
@@ -0,0 +1,106 @@
+---
+title: HTMLSelectElement.setCustomValidity()
+slug: Web/API/HTMLSelectElement/setCustomValidity
+translation_of: Web/API/HTMLSelectElement/setCustomValidity
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p>La méthode <code><strong>HTMLSelectElement.setCustomValidity()</strong></code> définit le message de validation personnalisé de l'élément sélectionné avec le message renseigné. Utiliser une chaîne de caractère vide indique que l'élément <em>n'a pas</em> de message d'erreur de validation personnalisé.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="eval  language-html"><code class="language-html"><em>ElmSelectionne</em>.setCustomValidity(<em>message</em>);</code></pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<ul>
+ <li><em>message </em>est le {{domxref("DOMString")}} contenant le message d'erreur.</li>
+</ul>
+
+<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', '#dom-cva-setcustomvalidity', 'HTMLSelectElement.setCustomValidity()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Pas de changement depuis la dernière snapshot, {{SpecName('HTML5 W3C')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#dom-cva-setcustomvalidity', 'HTMLSelectElement.setCustomValidity()')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Définition initiale, snapshot de {{SpecName('HTML WHATWG')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Edge</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(2.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(2.0)}}</td>
+   <td>1.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">Form validation.</a></li>
+</ul>
diff --git a/files/fr/web/api/htmlshadowelement/index.html b/files/fr/web/api/htmlshadowelement/index.html
new file mode 100644
index 0000000000..6da5cbc00c
--- /dev/null
+++ b/files/fr/web/api/htmlshadowelement/index.html
@@ -0,0 +1,123 @@
+---
+title: HTMLShadowElement
+slug: Web/API/HTMLShadowElement
+tags:
+  - API
+  - HTML DOM
+  - Interface
+  - Reference
+  - Web Components
+translation_of: Web/API/HTMLShadowElement
+---
+<p>{{ APIRef("Web Components") }}</p>
+
+<p>L'interface <code><strong>HTMLShadowElement</strong></code> représente un élement HTML {{HTMLElement("shadow")}}, utililisé dans le <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">Shadow DOM</a>. </p>
+
+<h2 id="Properties" name="Properties">Propriétés</h2>
+
+<p><em>Cette interface hérite des propriétés de {{domxref("HTMLElement")}}.</em></p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Cette interface hérite des methodes de {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLContentElement.getDistributedNodes()")}}</dt>
+ <dd>Retourne un {{domxref("NodeList")}} statique du {{glossary("distributed nodes")}} associé avec l'élément <code>&lt;content&gt;</code>. </dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="spec-table standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Shadow DOM', '#the-shadow-element', 'shadow')}}</td>
+   <td>{{Spec2('Shadow DOM')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>35</td>
+   <td><span style="font-size: 12px; line-height: 18px;">{{CompatGeckoDesktop("28")}}</span> [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>26</td>
+   <td><span style="font-size: 12px; line-height: 18px;">{{CompatNo}}</span></td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLShadowElement.getDistributedNodes", "getDistributedNodes()")}}</td>
+   <td>35</td>
+   <td><span style="font-size: 12px; line-height: 18px;">{{CompatNo}}</span></td>
+   <td>{{CompatNo}}</td>
+   <td>26</td>
+   <td><span style="font-size: 12px; line-height: 18px;">{{CompatNo}}</span></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>37</td>
+   <td>{{CompatGeckoMobile("28")}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLShadowElement.getDistributedNodes", "getDistributedNodes()")}}</td>
+   <td>37</td>
+   <td><span style="font-size: 12px; line-height: 18px;">{{CompatNo}}</span></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Si Shadow DOM n'est pas activé sur Firefox, les élements &lt;content&gt; agiront comme des  {{domxref("HTMLUnknownElement")}}. Les Shadow DOM ont été ajoutés à Firefox 28 et sont derrière une configuration <code>dom.webcomponents.enabled</code>, qui est désactivée par défaut.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>L'élément HTML {{HTMLElement("shadow")}}, qui implémente cette interface.</li>
+ <li><a href="/en-US/docs/Web/Web_Components/Shadow_DOM">Shadow DOM</a></li>
+</ul>
+
+<dl>
+ <dt> </dt>
+</dl>
diff --git a/files/fr/web/api/htmlspanelement/index.html b/files/fr/web/api/htmlspanelement/index.html
new file mode 100644
index 0000000000..013a2d9777
--- /dev/null
+++ b/files/fr/web/api/htmlspanelement/index.html
@@ -0,0 +1,19 @@
+---
+title: HTMLSpanElement
+slug: Web/API/HTMLSpanElement
+tags:
+  - DOM
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/HTMLSpanElement
+---
+<div>
+ {{ ApiRef() }}</div>
+<p>L'élément DOM <code>span</code> supporte l'interface <code><span class="external">HTMLSpanElement</span></code>, qui est dérivé de l'interface {{ domxref("HTMLElement") }}. Il ne supporte aucune propriété ou méthode additionnelle par rapport à <code>HTMLElement</code>.</p>
+<h2 id="Voir_également">Voir également</h2>
+<ul>
+ <li>{{ HTMLElement("span") }}</li>
+ <li>Spécification W3C de l'élément <a class="external" href="http://www.w3.org/TR/html4/struct/global.html#edef-SPAN" title="http://www.w3.org/TR/html4/struct/global.html#edef-SPAN">span</a></li>
+ <li>Spécification DOM : <a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-58190037" title="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-58190037">interface <span class="external"><code>HTMLElement</code></span></a></li>
+</ul>
+<div>
+  </div>
diff --git a/files/fr/web/api/htmlstyleelement/index.html b/files/fr/web/api/htmlstyleelement/index.html
new file mode 100644
index 0000000000..75fb1d9b74
--- /dev/null
+++ b/files/fr/web/api/htmlstyleelement/index.html
@@ -0,0 +1,115 @@
+---
+title: style
+slug: Web/API/HTMLStyleElement
+tags:
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/HTMLStyleElement
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Notes" name="Notes">Notes</h3>
+<p>Consultez les pages suivantes pour plus d'informations sur certains des objets utilisés pour manipuler les propriétés CSS depuis le DOM :</p>
+<ul>
+ <li><a href="fr/DOM/element.style">L'objet DOM element.style</a></li>
+ <li><a href="fr/DOM/stylesheet">L'objet DOM stylesheet</a></li>
+ <li><a href="fr/DOM/cssRule">L'objet DOM cssRule</a></li>
+ <li><a href="fr/DOM/CSS">La liste des propriétés DOM CSS</a></li>
+</ul>
+<h3 id="Informations_.C3.A0_d.C3.A9placer_vers_d.27autres_pages" name="Informations_.C3.A0_d.C3.A9placer_vers_d.27autres_pages">Informations à déplacer vers d'autres pages</h3>
+<p>L'objet basique <code>style</code> explose les interfaces <code>StyleSheet</code> et <code>CSSStyleSheet</code> de la spécification
+ <i>
+  DOM Level 2 Style</i>
+ . Ces interfaces contiennent des membres comme <code>insertRule</code>, <code>selectorText</code>, et <code>parentStyleSheet</code> permettant d'accéder et de manipuler les règles de style individuelles qui constituent une feuille de style CSS.</p>
+<p>Pour obtenir les objets <code>style</code> depuis un objet <code>document</code>, il est possible d'utiliser la propriété <code>document.styleSheets</code> et d'accéder aux objets individuels par un index (par exemple, <code>document.styleSheets{{ mediawiki.external(0) }}</code> est la première feuille de style définie pour le document, et ainsi de suite). Bien qu'il existe plusieurs syntaxes pour exprimer les feuilles de style d'un document, les navigateurs basés sur Mozilla gèrent uniquement CSS. Par conséquent, l'objet <code>style</code> récupéré depuis ce tableau implémente à la fois les interfaces StyleSheet et CSSStyleSheet.</p>
+<pre class="eval">var ss = document.styleSheets[1];
+ss.cssRules[0].style.backgroundColor="blue";
+</pre>
+<p>La liste des propriétés disponibles dans le DOM pour la propriété de style est donnée dans la <a href="fr/DOM/CSS">liste des propriétés DOM CSS</a>.</p>
+<p>La propriété <a href="fr/DOM/style">style</a> de l'élément peut également être utilisée pour obtenir et définir les styles d'un élément. Cependant, cette propriété renvoie uniquement les attributs de style qui ont été définis
+ <i>
+  in-line</i>
+ ou directement sur cet élément à l'aide de <code>element.style.propertyName</code> (par exemple <code>&lt;td style="background-color: lightblue"&gt;</code> renvoie la chaîne "background-color:lightblue", même si d'autres styles peuvent s'appliquer à l'élément depuis une feuille de style).</p>
+<p>De plus, lorsque cette propriété est définie sur un élément, elle écrase et efface tout style qui peut avoir été défini ailleurs pour cette propriété particulière de l'élément. Par exemple, définir la propriété <code>border</code> écrasera les réglages définis ailleurs pour la propriété <code>border</code> de cet élément dans la section <code>head</code> du document ou dans des feuilles de style externes. Cependant, cela n'affectera pas les autres déclarations de propriétés pour les styles de cet élément, comme <code>padding</code>, <code>margin</code> ou <code>font</code> par exemple.</p>
+<p>Pour changer le style d'un élément particulier, l'exemple suivant peut être adapté :</p>
+<pre>&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;exemple de style simple&lt;/title&gt;
+
+&lt;script type="text/javascript"&gt;
+
+function alterStyle(elem) {
+  elem.style.background = 'green';
+}
+
+function resetStyle(elemId) {
+  elem = document.getElementById(elemId);
+  elem.style.background = 'white';
+}
+&lt;/script&gt;
+
+&lt;style type="text/css"&gt;
+#p1 {
+ border: solid blue 2px;
+}
+&lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;!-- passe une référence à l'objet de l'élément comme paramètre 'this'. --&gt;
+&lt;p id="p1" onclick="alterStyle(this)";&gt;
+ Cliquez ici pour changer la couleur de fond. &lt;/p&gt;
+
+&lt;!-- passe l'id 'p1' d'un autre style de l'élément à modifier. --&gt;
+&lt;button onclick="resetStyle('p1');"&gt;Réinitialiser la couleur de fond&lt;/button&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+<p>La méthode <code>getComputedStyle()</code> de l'objet <code>document.defaultView</code> renvoie tous les styles qui ont finalement été calculés pour un élément. Consultez l'<a href="fr/R%c3%a9f%c3%a9rence_du_DOM_Gecko/Exemples#Exemple_6_:_getComputedStyle">exemple 6 : getComputedStyle</a> dans le chapitre des exemples pour plus d'informations sur l'utilisation de cette méthode.</p>
+<h3 id="L.27objet_DOM_style" name="L.27objet_DOM_style">L'objet DOM style</h3>
+<p>L'objet <code>style</code> représente une règle de style individuelle. Contrairement aux règles individuelles disponibles depuis la collection <code><a href="fr/DOM/document.styleSheets">document.styleSheets</a></code>, on accède à l'objet depuis l'objet <code>document</code> ou depuis les éléments auxquels ce style est appliqué. Il représente les styles
+ <i>
+  in-line</i>
+ d'un élément particulier.</p>
+<p>Mais il y a plus important que les deux propriétés exposées ici, c'est l'utilisation de l'objet <code>style</code> pour définir des propriétés de style individuelles sur un élément :</p>
+<pre>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+  "http://www.w3.org/TR/html4/loose.dtd"&gt;
+&lt;html&gt;
+ &lt;head&gt;
+  &lt;title&gt;style Property Example&lt;/title&gt;
+  &lt;link rel="StyleSheet" href="example.css" type="text/css"&gt;
+  &lt;script type="text/javascript"&gt;
+    function stilo()
+    {
+      document.getElementById("d").style.color = "orange";
+    }
+  &lt;/script&gt;
+ &lt;/head&gt;
+
+ &lt;body&gt;
+  &lt;div id="d" class="thunder"&gt;Thunder&lt;/div&gt;
+  &lt;button onclick="stilo()"&gt;ss&lt;/button&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+<p>Les attributs <b>media</b> et <b>type</b> du style peuvent être donnés ou non. Notez qu'il est également possible de changer les styles d'un élément en obtenant une référence vers cet élément et en utilisant ensuite sa méthode DOM <a href="fr/DOM/element.setAttribute">setAttribute()</a> pour spécifier à la fois la propriété CSS et sa valeur.</p>
+<pre class="eval">var el = document.getElementById("un-element");
+el.setAttribute("style", "background-color:darkblue;");
+</pre>
+<p><br>
+ Soyez cependant conscient que <code>setAttribute</code> écrasera toute propriété de style qui pourrait déjà avoir été définie dans l'objet style de cet élément. Si l'élément « un-element » ci-dessus avait déjà un attribut indiquant par exemple <code>style="font-size: 18px"</code>, cette valeur serait supprimée par l'utilisation de <code>setAttribute</code>.</p>
+<h5 id="Propri.C3.A9t.C3.A9s" name="Propri.C3.A9t.C3.A9s">Propriétés</h5>
+<dl>
+ <dt>
+  <a href="fr/DOM/style.media">style.media</a></dt>
+ <dd>
+  spécifie le média de destination pour lequel l'information de style est prévue.</dd>
+ <dt>
+  <a href="fr/DOM/style.type">style.type</a></dt>
+ <dd>
+  renvoie le type de style appliqué par cette règle.</dd>
+</dl>
+<p> </p>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "en": "en/DOM/style", "es": "es/DOM/style", "pl": "pl/DOM/style" } ) }}</p>
diff --git a/files/fr/web/api/htmltablecellelement/index.html b/files/fr/web/api/htmltablecellelement/index.html
new file mode 100644
index 0000000000..2de9fbc52b
--- /dev/null
+++ b/files/fr/web/api/htmltablecellelement/index.html
@@ -0,0 +1,162 @@
+---
+title: HTMLTableCellElement
+slug: Web/API/HTMLTableCellElement
+tags:
+  - API
+  - HTML DOM
+  - Interface
+  - Reference
+translation_of: Web/API/HTMLTableCellElement
+---
+<div>
+<div>{{ APIRef("HTML DOM") }}</div>
+</div>
+
+<p>L'interface <strong><span class="external"><code>HTMLTableCellElement</code></span></strong> expose des méthodes et des propriétés spécifiques (s'ajoutant à celles fournies par l'interface générique {{domxref("HTMLElement")}}, également disponibles par héritage) pour l'agencement et la gestion de l'apparence des cellules de tableau dans un document HTML, qu'il s'agisse de cellules d'entête ou de données.</p>
+
+<h2 id="Properties" name="Properties">Propriétés</h2>
+
+<p><em>Hérite des propriétés de son parent, {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLTableCellElement.colSpan")}}</dt>
+ <dd>Renvoie un entier long positif (<code>unsigned</code> <code>long</code>) représentant le nombre de colonnes sur lesquelles doit s'étendre cette cellule. C'est une représentation de l'attribut {{htmlattrxref("colspan", "td")}}.</dd>
+ <dt>{{domxref("HTMLTableCellElement.rowSpan")}}</dt>
+ <dd>Renvoie un entier long positif (<code>unsigned</code> <code>long</code>) représentant le nombre de lignes sur lesquelles doit s'étendre cette cellule. C'est une représentation de l'attribut {{htmlattrxref("rowspan", "td")}}.</dd>
+ <dt>{{domxref("HTMLTableCellElement.headers")}} {{readonlyInline}}</dt>
+ <dd>Renvoie un objet {{domxref("DOMSettableTokenList")}} décrivant la liste des <code>id</code> des éléments {{HTMLElement("th")}} représentant les entêtes associés à la cellule. C'est une représentation de l'attribut {{htmlattrxref("headers", "td")}}.</dd>
+ <dt>{{domxref("HTMLTableCellElement.cellIndex")}} {{readonlyInline}}</dt>
+ <dd>Renvoie un entier long (<code>long</code>) représentant la position de la cellule dans la collection de cellules de l'élement {{HTMLElement("tr")}} auquel elle appartient. Cette propriété renvoie<code>-1</code> si la cellule n'appartient à aucun élément <code>&lt;tr&gt;.</code></dd>
+ <dt>{{domxref("HTMLTableCellElement.align")}} {{obsolete_inline}}</dt>
+ <dd>Renvoie un chaîne {{domxref("DOMString")}} contenant la valeur énumérée de l'attribut {{htmlattrxref("align", "td")}}. Cette propriété décrit l'alignement du contenu de la cellule compte tenu du contexte ; ses valeurs possibles sont <code>"left"</code>, <code>"right"</code>, et <code>"center"</code>.</dd>
+ <dt>{{domxref("HTMLTableCellElement.bgColor")}} {{obsolete_inline}}</dt>
+ <dd>Renvoie une chaîne {{domxref("DOMString")}} contenant la couleur de fond des cellules. C'est une représentation de l'attribut obsolète {{htmlattrxref("bgColor", "td")}}.</dd>
+ <dt>{{domxref("HTMLTableCellElement.axis")}} {{obsolete_inline}}</dt>
+ <dd>Renvoie une chaîne {{domxref("DOMString")}} contenant un nom regroupant des cellules de manière virtuelle. C'est une représentation de l'attribut obsolète {{htmlattrxref("axis", "td")}}.</dd>
+ <dt>{{domxref("HTMLTableCellElement.height")}} {{obsolete_inline}}</dt>
+ <dd>Renvoie une chaîne {{domxref("DOMString")}} contenant la valeur en pixels de la hauteur de l'empreinte de la cellule. C'est une représentation de l'attribut obsolète {{htmlattrxref("height", "td")}}.</dd>
+ <dt>{{domxref("HTMLTableCellElement.width")}} {{obsolete_inline}}</dt>
+ <dd>Renvoie une chaîne {{domxref("DOMString")}} contenant la valeur en pixels de la largeur de l'empreinte de la cellule. C'est une représentation de l'attribut obsolète {{htmlattrxref("width", "td")}}.</dd>
+ <dt>{{domxref("HTMLTableCellElement.ch")}} {{obsolete_inline}}</dt>
+ <dd>Renvoie une chaîne {{domxref("DOMString")}} contenant un unique caractère. Ce caractère est celui utilisé pour l'alignement de toutes les cellules d'une même colonne. Il représente l'attribut {{htmlattrxref("char", "td")}} et prend par défaut la valeur du séparateur décimal associé à la langue, par exemple <code>'.'</code> pour l'anglais, <code>ou ','</code> pour le français. Cette propriété était optionnelle et peu supportée.</dd>
+ <dt>{{domxref("HTMLTableCellElement.chOff")}} {{obsolete_inline}}</dt>
+ <dd>Renvoie une chaîne {{domxref("DOMString")}} contenant un entier indiquant le nombre de caractères devant être laissés à droite (pour les écritures de gauche à droite<span style='font-family: "Calibri",sans-serif; font-size: 11.0pt; line-height: 107%;'> </span>; sinon à gauche pour les écritures de droite à gauche) du caractère défini par <code>HTMLTableCellElement.ch</code>. Cette propriété était optionnelle et peu supportée.</dd>
+ <dt>{{domxref("HTMLTableCellElement.noWrap")}} {{obsolete_inline}}</dt>
+ <dd>Renvoie un valeur booléenne {{domxref("Boolean")}} représentant l'attribut {{htmlattrxref("nowrap", "td")}} et indiquant si le contenu de la cellule peut être scindé en plusieurs lignes.</dd>
+ <dt>{{domxref("HTMLTableCellElement.vAlign")}} {{obsolete_inline}}</dt>
+ <dd>Renvoie une chaîne {{domxref("DOMString")}} contenant une valeur énumérée indiquant le type d'alignement vertical attendu du contenu de la cellule. Cette propriété représente l'attribut {{htmlattrxref("valign", "td")}} et peut prendre l'une des valeurs suivantes : <code>"top"</code>, <code>"middle"</code>, <code>"bottom"</code>, <code>ou "baseline"</code>.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Méthodes</h2>
+
+<p><em>Aucune méthode spécifique ; hérite des méthodes de son parent, {{domxref("HTMLElement")}}</em>.</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('HTML WHATWG', "tabular-data.html#htmltablecellelement", "HTMLTableCellElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Aucune modification depuis {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "tabular-data.html#htmltablecellelement", "HTMLTableCellElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Les propriétés suivantes sont devenues obsolètes<span style='font-family: "Calibri",sans-serif; font-size: 11.0pt; line-height: 107%;'> </span>: <code>align</code>, <code>axis</code>, <code>bgColor</code>, <code>height</code>, <code>width</code>, <code>ch</code>, <code>chOff</code>, <code>noWrap</code>, <code>et vAlign</code>.<br>
+    La propriété <code>headers</code> est maintenant en lecture seule et renvoie un objet {{domxref("DOMSettableTokenList")}} au lieu d'une simple chaîne {{domxref("DOMString")}}.<br>
+    Les propriétés <code>colspan</code> et <code>rowspan</code> renvoient maintenant des entiers long positifs (<code>unsigned long)</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-82915075', 'HTMLTableCellElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>La propriété <code>cellIndex</code> est maintenant accessible en lecture seule.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-82915075', 'HTMLTableCellElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>ch</code> and <code>chOff</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>ch</code> and <code>chOff</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p id="sect1"> </p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Éléments HTML implémentant cette interface <span style='font-family: "Calibri",sans-serif; font-size: 11.0pt; line-height: 107%;'> </span> : {{HTMLElement("th")}} et {{HTMLElement("td")}} par héritage via {{domxref("HTMLTableHeaderCellElement")}} et {{domxref("HTMLTableDataCellElement")}}.</li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/web/api/htmltableelement/caption/index.html b/files/fr/web/api/htmltableelement/caption/index.html
new file mode 100644
index 0000000000..a3d9226edd
--- /dev/null
+++ b/files/fr/web/api/htmltableelement/caption/index.html
@@ -0,0 +1,26 @@
+---
+title: table.caption
+slug: Web/API/HTMLTableElement/caption
+tags:
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/HTMLTableElement/caption
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p><b>caption</b> renvoie la légende du tableau.</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<pre class="eval"><i>string</i> = table.caption
+</pre>
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+<pre class="eval">if (table.caption) {
+  // On peut alors faire quelque chose avec la légende du tableau
+}
+</pre>
+<h3 id="Notes" name="Notes">Notes</h3>
+<p>Cette propriété ne renvoie rien s'il n'y a aucune légende pour le tableau.</p>
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-14594520">DOM Level 2 HTML : caption</a> <small>(<a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-14594520">traduction</a>)</small></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-12035137">Interface HTMLTableCaptionElement</a> <small>(<a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-12035137">traduction</a>)</small></li>
+</ul>
+<p>{{ languages( { "en": "en/DOM/table.caption", "pl": "pl/DOM/table.caption" } ) }}</p>
diff --git a/files/fr/web/api/htmltableelement/index.html b/files/fr/web/api/htmltableelement/index.html
new file mode 100644
index 0000000000..ab997c53a9
--- /dev/null
+++ b/files/fr/web/api/htmltableelement/index.html
@@ -0,0 +1,110 @@
+---
+title: table
+slug: Web/API/HTMLTableElement
+tags:
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/HTMLTableElement
+---
+<div>
+ {{ ApiRef() }}</div>
+<h2 id="Interface_de_l.27.C3.A9l.C3.A9ment_HTML_Table" name="Interface_de_l.27.C3.A9l.C3.A9ment_HTML_Table">Interface de l'élément HTML Table</h2>
+<p>Les objets <code>table</code> exposent l'interface <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-64060425"><code>HTMLTableElement</code></a> <small>(<a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-64060425">traduction</a>)</small>, qui fournit des propriétés et méthodes spécialisées (outre l'interface des objets <a href="/fr/docs/DOM/element">element</a> qu'ils acquièrent également par héritage) pour manipuler la disposition et la présentation des tableaux en HTML.</p>
+<h2 id="Propri.C3.A9t.C3.A9s" name="Propri.C3.A9t.C3.A9s">Propriétés</h2>
+<dl>
+ <dt>
+  <a href="/fr/docs/DOM/table.caption">table.caption</a></dt>
+ <dd>
+  <b>caption</b> renvoie la légende du tableau.</dd>
+ <dt>
+  <a href="/fr/docs/DOM/table.tHead">table.tHead</a></dt>
+ <dd>
+  <b>tHead</b> renvoie l'en-tête du tableau.</dd>
+ <dt>
+  <a href="/fr/docs/DOM/table.tFoot">table.tFoot</a></dt>
+ <dd>
+  <b>tFoot</b> renvoie le pied du tableau.</dd>
+ <dt>
+  <a href="/fr/docs/DOM/table.rows">table.rows</a></dt>
+ <dd>
+  <b>rows</b> renvoie les lignes du tableau.</dd>
+ <dt>
+  <a href="/fr/docs/DOM/table.tBodies">table.tBodies</a></dt>
+ <dd>
+  <b>tBodies</b> renvoie les corps du tableau.</dd>
+</dl>
+<dl>
+ <dt>
+  <a href="/fr/docs/DOM/table.align">table.align</a> {{ Deprecated_inline() }}</dt>
+ <dd>
+  <b>align</b> obtient ou définit l'alignement du tableau.</dd>
+ <dt>
+  <a href="/fr/docs/DOM/table.bgColor">table.bgColor</a> {{ Deprecated_inline() }}</dt>
+ <dd>
+  <b>bgColor</b> obtient ou définit la couleur de fond du tableau.</dd>
+ <dt>
+  <a href="/fr/docs/DOM/table.border">table.border</a> {{ Deprecated_inline() }}</dt>
+ <dd>
+  <b>border</b> obtient ou défini la bordure du tableau.</dd>
+ <dt>
+  <a href="/fr/docs/DOM/table.cellPadding">table.cellPadding</a></dt>
+ <dd>
+  <b>cellPadding</b> obtient ou définit les marges internes (
+  <i>
+   padding</i>
+  ) des cellules.</dd>
+ <dt>
+  <a href="/fr/docs/DOM/table.cellSpacing">table.cellSpacing</a></dt>
+ <dd>
+  <b>cellSpacing</b> obtient ou définit l'espace entre les cellules.</dd>
+ <dt>
+  <a href="/fr/docs/DOM/table.frame">table.frame</a></dt>
+ <dd>
+  <b>frame</b> spécifie les côtés du tableau ayant une bordure.</dd>
+ <dt>
+  <a href="/fr/docs/DOM/table.rules">table.rules</a></dt>
+ <dd>
+  <b>rules</b> spécifie les bordures intérieures visibles.</dd>
+ <dt>
+  <a href="/fr/docs/DOM/table.summary">table.summary</a></dt>
+ <dd>
+  <b>summary</b> obtient ou définit le résumé du tableau.</dd>
+ <dt>
+  <a href="/fr/docs/DOM/table.width">table.width</a></dt>
+ <dd>
+  <b>width</b> obtient ou définit la largeur du tableau.</dd>
+</dl>
+<h2 id="M.C3.A9thodes" name="M.C3.A9thodes">Méthodes</h2>
+<dl>
+ <dt>
+  <a href="/fr/docs/DOM/table.createTHead">table.createTHead</a></dt>
+ <dd>
+  <b>createTHead</b> crée un en-tête de tableau.</dd>
+ <dt>
+  <a href="/fr/docs/DOM/table.deleteTHead">table.deleteTHead</a></dt>
+ <dd>
+  <b>deleteTHead</b> retire l'en-tête du tableau.</dd>
+ <dt>
+  <a href="/fr/docs/DOM/table.createTFoot">table.createTFoot</a></dt>
+ <dd>
+  <b>createTFoot</b> crée un pied de tableau.</dd>
+ <dt>
+  <a href="/fr/docs/DOM/table.deleteTFoot">table.deleteTFoot</a></dt>
+ <dd>
+  <b>deleteTFoot</b> retire un pied de tableau.</dd>
+ <dt>
+  <a href="/fr/docs/DOM/table.createCaption">table.createCaption</a></dt>
+ <dd>
+  <b>createCaption</b> crée une nouvelle légende pour le tableau.</dd>
+ <dt>
+  <a href="/fr/docs/DOM/table.deleteCaption">table.deleteCaption</a></dt>
+ <dd>
+  <b>deleteCaption</b> retire la légende d'un tableau.</dd>
+ <dt>
+  <a href="/fr/docs/DOM/table.insertRow">table.insertRow</a></dt>
+ <dd>
+  <b>insertRow</b> insère une nouvelle ligne.</dd>
+ <dt>
+  <a href="/fr/docs/DOM/table.deleteRow">table.deleteRow</a></dt>
+ <dd>
+  <b>deleteRow</b> retire une ligne.</dd>
+</dl>
diff --git a/files/fr/web/api/htmltableelement/insertrow/index.html b/files/fr/web/api/htmltableelement/insertrow/index.html
new file mode 100644
index 0000000000..737195cf29
--- /dev/null
+++ b/files/fr/web/api/htmltableelement/insertrow/index.html
@@ -0,0 +1,152 @@
+---
+title: table.insertRow
+slug: Web/API/HTMLTableElement/insertRow
+tags:
+  - API
+  - DOM HTML
+  - HTMLTableElement
+  - Méthode
+  - NeedsMobileBrowserCompatibility
+  - Reference
+translation_of: Web/API/HTMLTableElement/insertRow
+---
+<div>
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p>La méthode <strong><code>HTMLTableElement.insertRow()</code></strong> insère une nouvelle ligne dans la table et retourne une référence à la nouvelle ligne.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>ligne</em> = <em>HTMLTableElement</em>.insertRow(<em>optionnel indice = -1</em>);</pre>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/HTMLTableElement" title="DOM/HTMLTableElement"><code>HTMLTableElement</code></a> est une référence à un élément table HTML.</li>
+ <li><code>indice</code> est l'indice de ligne de la nouvelle ligne.</li>
+ <li><code>ligne</code> reçoit la référence à la nouvelle ligne. Une référence à un <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableRowElement">HTMLTableRowElement</a>. Si l'indice est -1 ou est égal au nombre de lignes, la ligne est ajoutée comme dernière ligne. Si <code>indice</code> est plus grand que le nombre de lignes, une exception IndexSizeError sera générée. Si indice est omis, sa  valeur sera -1 par défaut.</li>
+ <li>Si une table a plusieurs éléments <code>tbody</code>, par défaut, la nouvelle ligne est ajoutée dans le dernier <code>tbody</code>. Pour insérer la ligne dans un <code>tbody</code> particulier :<br>
+  <code>var <em>tbody_particulier</em></code><code>=document.getElementById(<em>id_tbody</em>);<br>
+  var <em>ligne</em>=tbody_particulier.</code><code>insertRow(<em>indice</em>)</code></li>
+</ul>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush:html">&lt;table id="TableA"&gt;
+&lt;tr&gt;
+&lt;td&gt;Ancienne ligne supérieure&lt;/td&gt;
+&lt;/tr&gt;
+&lt;/table&gt;
+&lt;script type="text/javascript"&gt;
+
+function ajouteLigne(tableID) {
+  // Récupération d'une référence à la table
+  var refTable = document.getElementById(tableID);
+
+  // Insère une ligne dans la table à l'indice de ligne 0
+  var nouvelleLigne = refTable.insertRow(0);
+
+  // Insère une cellule dans la ligne à l'indice 0
+  var nouvelleCellule = nouvelleLigne.insertCell(0);
+
+  // Ajoute un nœud texte à la cellule
+  var nouveauTexte = document.createTextNode('Nouvelle ligne supérieure')
+  nouvelleCellule.appendChild(nouveauTexte);
+}
+
+// Appelle ajouteLigne() avec l'ID d'une table
+ajouteLigne('TableA');
+
+&lt;/script&gt;</pre>
+
+<p>Pour être valide dans un document HTML, un élément TR doit avoir au moins un élément TD.</p>
+
+<p>Remarquez que <code>insertRow</code> insère directement la ligne dans la table et renvoie une référence à la nouvelle ligne. La ligne n'a pas besoin d'être ajoutée séparement comme cela aurait été le cas si <code><a href="/en-US/docs/DOM/document.createElement" title="DOM/document.createElement">document.createElement()</a></code> avait été utilisé pour créer un nouvel élement TR.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Spécification</th>
+   <th>Statut</th>
+   <th>Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "tables.html#dom-table-insertrow", "HTMLTableElement.insertRow()")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 HTML", "html.html#ID-93995626", "HTMLTableElement.insertRow()")}}</td>
+   <td>{{Spec2("DOM2 HTML")}}</td>
+   <td>Spécifie plus en détail où la ligne est insérée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM1", "level-one-html.html#ID-39872903", "HTMLTableElement.insertRow()")}}</td>
+   <td>{{Spec2("DOM1")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<p>{{CompatibilityTable}}</p>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>3<sup>[1]</sup></td>
+   <td>5.5</td>
+   <td>10</td>
+   <td>4</td>
+  </tr>
+ </tbody>
+</table>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>[1] A partir de Gecko 20.0 {{geckoRelease("20.0")}}, l'argument indice a été rendu optionnel et a -1 comme valeur par défaut d'après la spécification HTML.</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("HTMLTableRowElement.insertCell()")}}</li>
+</ul>
diff --git a/files/fr/web/api/htmltablerowelement/index.html b/files/fr/web/api/htmltablerowelement/index.html
new file mode 100644
index 0000000000..323cd60902
--- /dev/null
+++ b/files/fr/web/api/htmltablerowelement/index.html
@@ -0,0 +1,99 @@
+---
+title: HTMLTableRowElement
+slug: Web/API/HTMLTableRowElement
+tags:
+  - API
+  - HTML DOM
+  - Interface
+  - Reference
+  - TopicStub
+translation_of: Web/API/HTMLTableRowElement
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p>L'interface <strong><code>HTMLTableRowElement</code></strong> fournit des propriétés et des méthodes spéciales (au-delà de l'interface {{domxref("HTMLElement")}} dont elle dispose également par héritage) pour manipuler la mise en page et la présentation des lignes dans un tableau HTML.</p>
+
+<p>{{InheritanceDiagram(600, 120)}}</p>
+
+<h2 id="Properties" name="Properties">Propriétés</h2>
+
+<p><em>Hérite des propriétés de son parent, {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLTableRowElement.align")}} {{obsolete_inline}}</dt>
+ <dd>Est un {{domxref("DOMString")}} contenant une valeur énumérée reflétant l'attribut {{htmlattrxref("align", "tr")}}. Il indique l'alignement du contenu de l'élément par rapport au contexte environnant. Les valeurs possibles sont <code>"left"</code>, <code>"right"</code>, et <code>"center"</code>.</dd>
+ <dt>{{domxref("HTMLTableRowElement.bgColor")}} {{obsolete_inline}}</dt>
+ <dd>Est un {{domxref("DOMString")}} contenant la couleur de fond des cellules. Il reflète l'attribut obsolète {{htmlattrxref("bgColor", "tr")}} attribute.</dd>
+ <dt>{{domxref("HTMLTableRowElement.cells")}} {{readonlyInline}}</dt>
+ <dd>Renvoie une {{domxref("HTMLCollection")}} en direct contenant les cellules de la ligne. La <code>HTMLCollection</code> est active et est automatiquement mise à jour lorsque des cellules sont ajoutées ou supprimées.</dd>
+ <dt>{{domxref("HTMLTableRowElement.ch")}} {{obsolete_inline}}</dt>
+ <dd>Est un {{domxref("DOMString")}} contenant un seul caractère. Ce caractère est celui sur lequel aligner toutes les cellules d'une colonne. Il reflète {{htmlattrxref("char", "tr")}} et par défaut les points décimaux associés à la langue, par exemple <code>'.'</code> pour l'anglais, ou <code>','</code> pour le français. Cette propriété était facultative et n'était pas très bien prise en charge.</dd>
+ <dt>{{domxref("HTMLTableRowElement.chOff")}} {{obsolete_inline}}</dt>
+ <dd>Est un {{domxref("DOMString")}} contenant un entier indiquant combien de caractère doivent être laissés à droite (pour les scripts de gauche à droite; ou à gauche pour les scripts de droite à gauche) du caractère défini par <code>HTMLTableRowElement.ch</code>. Cette propriété était facultative et n'était pas très bien prise en charge.</dd>
+ <dt>{{domxref("HTMLTableRowElement.rowIndex")}} {{readonlyInline}}</dt>
+ <dd>Renvoie une valeur <code>long</code> qui donne la position logique de la ligne dans la table entière. Si la ligne ne fait pas partie d'une table, renvoie <code>-1</code>.</dd>
+ <dt>{{domxref("HTMLTableRowElement.sectionRowIndex")}} {{readonlyInline}}</dt>
+ <dd>Renvoie une valeur <code>long</code> qui donne la position logique de la ligne dans la section de table à laquelle elle appartient. Si la ligne ne fait pas partie d'une section, renvoie <code>-1</code>.</dd>
+ <dt>{{domxref("HTMLTableRowElement.vAlign")}} {{obsolete_inline}}</dt>
+ <dd>Est un {{domxref("DOMString")}} représentant une valeur énumérée indiquant comment le contenu de la cellule doit être aligné verticalement. Il reflète l'attribut {{htmlattrxref("valign", "tr")}} et peut avoir l'une des valeurs suivantes : <code>"top"</code>, <code>"middle"</code>, <code>"bottom"</code>, ou <code>"baseline"</code>.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Méthodes</h2>
+
+<p><em>Hérite des méthodes de son parent, {{domxref("HTMLElement")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("HTMLTableRowElement.deleteCell()")}}</dt>
+ <dd>Supprime la cellule à la position donnée dans la ligne. Si la position donnée est supérieure (ou égale car elle commence à zéro) au nombre de cellules dans la ligne, ou est inférieure à <code>0</code>, elle déclenche une {{domxref("DOMException")}} avec la valeur <code>IndexSizeError</code>.</dd>
+ <dt>{{domxref("HTMLTableRowElement.insertCell()")}}</dt>
+ <dd>Insère une nouvelle cellule juste avant la position donnée dans la ligne. Si la position donnée n'est pas donnée ou est <code>-1</code>, elle ajoute la cellule à la ligne. Si la position donnée est supérieure (ou égale car elle commence à zéro) au nombre de cellules dans la ligne, ou est inférieure à <code>-1</code>, elle déclenche une {{domxref("DOMException")}} avec la valeur <code>IndexSizeError</code>. Renvoie une référence à un <a href="/en-US/docs/Web/API/HTMLTableCellElement">HTMLTableCellElement [en-US]</a>.</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">Commantaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#htmltablerowelement", "HTMLTableRowElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "tabular-data.html#the-tr-element", "HTMLTableRowElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Le paramètre de <code>insertCell</code> est désormais facultatif et vaut par défaut <code>-1</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-6986576', 'HTMLTableRowElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>Les propriétés <code>cells</code>, <code>rowIndex</code>, et <code>selectionRowIndex</code> sont désormais en lecture seule.<br>
+    Les méthodes <code>insertCell</code> et <code>deleteCell</code> peuvent déclencher des exceptions.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-6986576', 'HTMLTableRowElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Défintion initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez nous une pull request.</div>
+
+<p>{{Compat("api.HTMLTableRowElement")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'élément HTML implémentant cette interface : {{HTMLElement("tr")}}.</li>
+</ul>
+
+<dl>
+ <dt></dt>
+</dl>
diff --git a/files/fr/web/api/htmltablerowelement/insertcell/index.html b/files/fr/web/api/htmltablerowelement/insertcell/index.html
new file mode 100644
index 0000000000..e4c064e2cc
--- /dev/null
+++ b/files/fr/web/api/htmltablerowelement/insertcell/index.html
@@ -0,0 +1,105 @@
+---
+title: HTMLTableRowElement.insertCell()
+slug: Web/API/HTMLTableRowElement/insertCell
+translation_of: Web/API/HTMLTableRowElement/insertCell
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>La méthode <strong><code>HTMLTableRowElement.insertCell()</code></strong> insère une nouvelle cellule ({{HtmlElement("td")}}) dans une ligne de tableau ({{HtmlElement("tr")}}) et renvoie une référence sur cette cellule.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> <code>insertCell()</code> insère la cellule directement dans la ligne. La cellule n’a pas besoin d’être ajoutée séparément comme cela serait le cas si {{domxref("Document.createElement()")}} avait été utilisé pour créer le nouvel élément <code>&lt;td&gt;</code>.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <var>newCell</var> = <var>HTMLTableRowElement</var>.insertCell(<var>index</var>);
+</pre>
+
+<p>{{domxref("HTMLTableRowElement")}} est une référence sur un élément HTML {{HtmlElement("tr")}}.</p>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>index</code> {{optional_inline}}</dt>
+ <dd><code>index</code> est l’index de cellule de la nouvelle cellule. Si <code>index</code> est <code>-1</code> ou égal au nombre actuel de cellules, la nouvelle cellule est ajoutée à la fin la ligne. Si <code>index</code> est supérieur au nombre de cellules, une exception <code>IndexSizeError</code> sera levée. Si <code>index</code> est omis, la valeur sera <code>-1</code> par défaut.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p><code>newCell</code> est une {{domxref("HTMLTableCellElement")}} qui fait référence à la nouvelle cellule.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Cet exemple utilise {{domxref("HTMLTableElement.insertRow()")}} pour ajouter une nouvelle ligne à une table.</p>
+
+<p>Nous utilisons ensuite <code>insertCell(0)</code> pour insérer une nouvelle cellule dans la nouvelle ligne (pour être du HTML valide, un <code>&lt;tr&gt;</code> doit avoir au moins un élément <code>&lt;td&gt;</code>). Enfin, nous ajoutons du texte à la cellule en utilisant {{domxref("Document.createTextNode()")}} et {{domxref("Node.appendChild()")}}.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;table id="my-table"&gt;
+  &lt;tr&gt;&lt;td&gt;Row 1&lt;/td&gt;&lt;/tr&gt;
+  &lt;tr&gt;&lt;td&gt;Row 2&lt;/td&gt;&lt;/tr&gt;
+  &lt;tr&gt;&lt;td&gt;Row 3&lt;/td&gt;&lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">function addRow(tableID) {
+  // Obtient une référence sur la table
+  let tableRef = document.getElementById(tableID);
+
+  // Insère une ligne à la fin de la table
+  let newRow = tableRef.insertRow(-1);
+
+  // Insère une cellule dans la ligne à l’index 0
+  let newCell = newRow.insertCell(0);
+
+  // Ajoute un nœud texte à la cellule
+  let newText = document.createTextNode('New bottom row');
+  newCell.appendChild(newText);
+}
+
+// Appelle addRow() avec l’ID de la table
+addRow('my-table');</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Example")}}</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">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "tables.html#dom-tr-insertcell", "HTMLTableRowElement.insertCell()")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 HTML", "html.html#ID-68927016", "HTMLTableRowElement.insertCell()")}}</td>
+   <td>{{Spec2("DOM2 HTML")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">La table de compatibilité sur cette page est générée à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request.</em></div>
+
+<p>{{Compat("api.HTMLTableRowElement.insertCell")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("HTMLTableElement.insertRow()")}}</li>
+ <li>L’élément HTML représentant les  cellules : {{domxref("HTMLTableCellElement")}}</li>
+</ul>
diff --git a/files/fr/web/api/htmltimeelement/datetime/index.html b/files/fr/web/api/htmltimeelement/datetime/index.html
new file mode 100644
index 0000000000..48df191248
--- /dev/null
+++ b/files/fr/web/api/htmltimeelement/datetime/index.html
@@ -0,0 +1,174 @@
+---
+title: HTMLTimeElement.dateTime
+slug: Web/API/HTMLTimeElement/dateTime
+translation_of: Web/API/HTMLTimeElement/dateTime
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<div>La propriété <code><strong>HTMLTimeElement</strong></code><strong><code>.dateTime</code></strong> est une {{domxref("DOMString")}} qui reflète l'attribut HTML {{ htmlattrxref("datetime", "time") }}, contenant une date et une heure interprétable par un ordinateur.</div>
+
+<p>Le format de la chaîne de caractères doit correspondre à l'une des micro-syntaxes HTML suivantes:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Microsyntaxe</th>
+   <th scope="col">Description</th>
+   <th scope="col">Exemples</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Mois</td>
+   <td><em>AAAA</em><code>-</code><em>MM</em></td>
+   <td><code>2011-11</code>, <code>2013-05</code></td>
+  </tr>
+  <tr>
+   <td>
+    <p>Date</p>
+   </td>
+   <td><em><code>AAAA</code></em><code>-</code><em>MM</em><code>-</code><em>DD</em></td>
+   <td><code>1887-12-01</code></td>
+  </tr>
+  <tr>
+   <td>Date sans l'année</td>
+   <td><em>MM</em><code>-</code><em>DD</em></td>
+   <td><code>11-12</code></td>
+  </tr>
+  <tr>
+   <td>Heure</td>
+   <td><em>HH</em><code>:</code><em>MM</em><br>
+    <em>HH</em><code>:</code><em>MM</em><code>:</code><em>SS</em><br>
+    <em>HH</em><code>:</code><em>MM</em><code>:</code><em>SS</em><code>.</code><em>mmm</em></td>
+   <td><code>23:59</code><br>
+    <code>12:15:47</code><br>
+    <code>12:15:52.998</code></td>
+  </tr>
+  <tr>
+   <td>Date et heure locale</td>
+   <td><em>AAAA</em><code>-</code><em>MM</em><code>-</code><em>DD</em> <em>HH</em><code>:</code><em>MM</em><br>
+    <em>AAAA</em><code>-</code><em>MM</em><code>-</code><em>DD</em> <em>HH</em><code>:</code><em>MM</em><code>:</code><em>SS</em><br>
+    <em>AAAA</em><code>-</code><em>MM</em><code>-</code><em>DD</em> <em>HH</em><code>:</code><em>MM</em><code>:</code><em>SS<code>.</code><em>mmm</em></em><br>
+    <em>AAAA</em><code>-</code><em>MM</em><code>-</code><em>DD</em><code>T</code><em>HH</em><code>:</code><em>MM</em><br>
+    <em>AAAA</em><code>-</code><em>MM</em><code>-</code><em>DD</em><code>T</code><em>HH</em><code>:</code><em>MM</em><code>:</code><em>SS</em><br>
+    <em>AAAA</em><code>-</code><em>MM</em><code>-</code><em>DD</em><code>T</code><em>HH</em><code>:</code><em>MM</em><code>:</code><em>SS<code>.</code><em>mmm</em></em></td>
+   <td><code>2013-12-25 11:12<br>
+    1972-07-25 13:43:07<br>
+    1941-03-15 07:06:23.678<br>
+    2013-12-25T11:12<br>
+    1972-07-25T13:43:07<br>
+    1941-03-15T07:06:23.678</code></td>
+  </tr>
+  <tr>
+   <td>Décalage horaire</td>
+   <td><code>Z</code><br>
+    <code>+</code><em>HHMM<br>
+    <code>+</code></em><em>HH</em><code>:</code><em>MM</em><br>
+    <em><code>-</code><em>HHMM<br>
+    <code>-</code></em><em>HH</em><code>:</code><em>MM</em></em></td>
+   <td><code>Z<br>
+    +0200<br>
+    +04:30<br>
+    -0300<br>
+    -08:00</code></td>
+  </tr>
+  <tr>
+   <td>date et heure globale</td>
+   <td>
+    <p><em>N'importe quelle combinaison de date et d'heure locale suivie d'un décalage horaire</em></p>
+   </td>
+   <td><code>2013-12-25 11:12+0200<br>
+    1972-07-25 13:43:07+04:30<br>
+    1941-03-15 07:06:23.678Z<br>
+    2013-12-25T11:12-08:00</code></td>
+  </tr>
+  <tr>
+   <td>Semaine</td>
+   <td><em>AAAA</em><code>-W</code><em>WW</em></td>
+   <td><code>2013-W46</code></td>
+  </tr>
+  <tr>
+   <td>
+    <p>Quatre ou plus chiffres ASCII</p>
+   </td>
+   <td><em>AAAA</em></td>
+   <td><code>2013</code>, <code>0001</code></td>
+  </tr>
+  <tr>
+   <td>Durée</td>
+   <td><code>P</code><em>d</em><code>D</code><code>T</code><em>h</em><code>H</code><em>m</em><code>M</code><em>s</em><code>S</code><br>
+    <code>P</code><em>d</em><code>D</code><code>T</code><em>h</em><code>H</code><em>m</em><code>M</code><em>s</em><code>.</code>X<code>S</code><br>
+    <code>P</code><em>d</em><code>D</code><code>T</code><em>h</em><code>H</code><em>m</em><code>M</code><em>s</em><code>.</code>XX<code>S</code><br>
+    <code>P</code><em>d</em><code>D</code><code>T</code><em>h</em><code>H</code><em>m</em><code>M</code><em>s</em><code>.</code>XXX<code>S</code><br>
+    <code>P</code><code>T</code><em>h</em><code>H</code><em>m</em><code>M</code><em>s</em><code>S</code><br>
+    <code>P</code><code>T</code><em>h</em><code>H</code><em>m</em><code>M</code><em>s</em><code>.</code>X<code>S</code><br>
+    <code>P</code><code>T</code><em>h</em><code>H</code><em>m</em><code>M</code><em>s</em><code>.</code>XX<code>S</code><br>
+    <code>P</code><code>T</code><em>h</em><code>H</code><em>m</em><code>M</code><em>s</em><code>.</code>XXX<code>S</code><br>
+    <em>w</em><code>w </code><em>d</em><code>d </code><em>h</em><code>h </code><em>m</em><code>m </code><em>s</em><code>s</code></td>
+   <td><code>P12DT7H12M13S<br>
+    P12DT7H12M13.3S<br>
+    P12DT7H12M13.45S<br>
+    P12DT7H12M13.455S<br>
+    PT7H12M13S<br>
+    PT7H12M13.2S<br>
+    PT7H12M13.56S<br>
+    PT7H12M13.999S<br>
+    7d 5h 24m 13s</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>dateTimeString</em> = <em>timeElt</em>.dateTime;
+<em>timeElt.dateTime = </em><em>dateTimeString</em>
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">// Supposons qu'il y ai un élément &lt;time id="t"&gt; dans le HTML
+
+var t = document.getElementById("t");
+t.dateTime = "6w 5h 34m 5s";
+</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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "text-level-semantics.html#dom-time-datetime", "HTMLTimeElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Pas de changement depuis {{SpecName("HTML5.1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "text-level-semantics.html#dom-time-datetime", "HTMLTimeElement")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Pas de changement depuis {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "text-level-semantics.html#dom-time-datetime", "HTMLTimeElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+
+
+<p>{{Compat("api.HTMLTimeElement.dateTime")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("HTMLTimeElement")}} dont cette propriété appartient.</li>
+</ul>
diff --git a/files/fr/web/api/htmltimeelement/index.html b/files/fr/web/api/htmltimeelement/index.html
new file mode 100644
index 0000000000..ad8499d1cc
--- /dev/null
+++ b/files/fr/web/api/htmltimeelement/index.html
@@ -0,0 +1,64 @@
+---
+title: HTMLTimeElement
+slug: Web/API/HTMLTimeElement
+translation_of: Web/API/HTMLTimeElement
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p><span class="seoSummary">L'interface <strong><code>HTMLTimeElement</code></strong> fournit des propriétés spéciales (en plus de celles fournies en héritage par l'interface {{domxref("HTMLElement")}}) pour manipuler les éléments {{HTMLElement("time")}}.</span></p>
+
+<p>{{InheritanceDiagram(600, 120)}}</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Hérite des propriétés de {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLTimeElement.dateTime")}}</dt>
+ <dd>C'est une {{domxref("DOMString")}} qui reflète l'attribut {{htmlattrxref("datetime", "time")}} de l'élément HTML correspondant, dans une forme interprétable par un ordinateur de la date et de l'heure.</dd>
+</dl>
+
+<h2 id="Métodes">Métodes</h2>
+
+<p><em>Pas de méthode spécifique, mais cette interface hérite des méthodes de {{domxref("HTMLElement")}}.</em></p>
+
+<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">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#htmltimeelement", "HTMLTimeElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "text-level-semantics.html#the-time-element", "HTMLTimeElement")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Pas de changement depuis {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "text-level-semantics.html#the-time-element", "HTMLTimeElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+
+
+<p>{{Compat("api.HTMLTimeElement")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'élément HTML {{HTMLElement("time")}} implémentant cette interface.</li>
+</ul>
diff --git a/files/fr/web/api/htmlunknownelement/index.html b/files/fr/web/api/htmlunknownelement/index.html
new file mode 100644
index 0000000000..ce08ea4331
--- /dev/null
+++ b/files/fr/web/api/htmlunknownelement/index.html
@@ -0,0 +1,53 @@
+---
+title: HTMLUnknownElement
+slug: Web/API/HTMLUnknownElement
+translation_of: Web/API/HTMLUnknownElement
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>L’interface <strong><code>HTMLUnknownElement</code></strong> représente un élément HTML invalide et dérive de l’interface {{DOMxRef("HTMLElement")}}, mais sans implémenter aucune propriété ou méthode additionnelle.</p>
+
+<p>{{InheritanceDiagram(600, 120)}}</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Pas de propriété spécifique ; hérite des propriétés de son parent, {{DOMxRef("HTMLElement")}}.</em></p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Pas de méthode spécifique ; hérite des méthodes de son parent, {{DOMxRef("HTMLElement")}}.</em></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("HTML WHATWG", "elements.html#htmlunknownelement", "HTMLUnknownElement")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Pas de changement depuis {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "dom.html#htmlunknownelement", "HTMLUnknownElement")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">La table de compatibilité sur cette page est générée à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request.</em></div>
+
+<p>{{Compat("api.HTMLUnknownElement")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les éléments HTML obsolètes ou non standard implémentant cette interface : {{HTMLElement("bgsound")}}, {{HTMLElement("blink")}}, {{HTMLElement("isindex")}}, {{HTMLElement("multicol")}}, {{HTMLElement("nextid")}}, {{HTMLElement("rb")}}, {{HTMLElement("spacer")}}</li>
+ <li>{{DOMxRef("SVGUnknownElement")}}</li>
+</ul>
diff --git a/files/fr/web/api/htmlvideoelement/index.html b/files/fr/web/api/htmlvideoelement/index.html
new file mode 100644
index 0000000000..41f61c0890
--- /dev/null
+++ b/files/fr/web/api/htmlvideoelement/index.html
@@ -0,0 +1,113 @@
+---
+title: HTMLVideoElement
+slug: Web/API/HTMLVideoElement
+tags:
+  - API
+  - HTML DOM
+  - HTMLVideoElement
+  - Interface
+  - Reference
+  - Video
+translation_of: Web/API/HTMLVideoElement
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><strong><code>L’interface HTMLVideoElement</code> </strong> fournit des propriétés et des méthodes spéciales pour manipuler des objets vidéo. Il hérite également des propriétés et des méthodes de {{domxref("HTMLMediaElement")}} et de {{domxref("HTMLElement")}}.</p>
+
+<p>La liste des <a href="/fr/docs/Web/Media/Formats">formats multimédias pris en charge</a> varie d’un navigateur à l’autre. Vous pouvez fournir votre vidéo dans un format unique que tous les navigateurs pertinents prennent en charge, ou fournir plusieurs sources vidéo dans des formats suffisamment différents couverts par les différents navigateurs que vous ciblez.</p>
+
+<p>{{InheritanceDiagram(600, 140)}}</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Cette interface hérite des propriétés de ses interfaces ancêtres : </em><em>{{domxref("HTMLMediaElement")}} et </em><em>{{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLVideoElement.height")}}</dt>
+ <dd>Une chaîne de caractères {{domxref("DOMString")}} qui reflète la valeur de l'attribut HTML {{htmlattrxref("height", "video")}} indiquant la hauteur de la zone d'affichage, en pixels.</dd>
+ <dt>{{domxref("HTMLVideoElement.poster")}}</dt>
+ <dd>Une chaîne de caractères {{domxref("DOMString")}} qui reflète la valeur de l'attribut {{htmlattrxref("poster", "video")}} qui indique une image à afficher tant qu'aucune donnée vidéo n'est disponible.</dd>
+ <dt>{{domxref("HTMLVideoElement.videoHeight")}} {{readonlyInline}}</dt>
+ <dd>Un entier non signé qui indique la hauteur intrinsèque de la ressource, exprimée en pixels CSS, ou 0 tant que le média n'est pas disponible.</dd>
+ <dt>{{domxref("HTMLVideoElement.videoWidth")}} {{readonlyInline}}</dt>
+ <dd>Un entier non signé qui indique la largeur intrinsèque de la ressource, exprimée en pixels CSS, ou 0 tant que le média n'est pas disponible.</dd>
+ <dt>{{domxref("HTMLVideoElement.width")}}</dt>
+ <dd>Une chaîne de caractères {{domxref("DOMString")}} qui reflète la valeur de l'attribut HTML {{htmlattrxref("width", "video")}} indiquant la largeur de la zone d'affichage, en pixels.</dd>
+</dl>
+
+<h3 id="Propriétés_spécifiques_à_Gecko">Propriétés spécifiques à Gecko</h3>
+
+<dl>
+ <dt>{{domxref("HTMLVideoElement.mozParsedFrames")}} {{Non-standard_Inline}}{{ReadOnlyInline}}</dt>
+ <dd>Un entier non signé indiquant le nombre de <em>frames</em> qui ont été analysées (<em>parsed</em>) depuis la ressource média.</dd>
+ <dt>{{domxref("HTMLVideoElement.mozDecodedFrames")}} {{Non-standard_Inline}}{{ReadOnlyInline}}</dt>
+ <dd>Un entier non signé indiquant le nombre de <em>frames</em> qui ont été décodées en images.</dd>
+ <dt>{{domxref("HTMLVideoElement.mozPresentedFrames")}} {{Non-standard_Inline}}{{ReadOnlyInline}}</dt>
+ <dd>Un entier non signé indiquant le nombre de <em>frames</em> décodées qui ont été présentées au canal de rendu pour l'affichage.</dd>
+ <dt>{{domxref("HTMLVideoElement.mozPaintedFrames")}} {{Non-standard_Inline}}{{ReadOnlyInline}}</dt>
+ <dd>Un entier non signé indiquant le nombre de <em>frames</em> présentées et qui ont été affichées à l'écran.</dd>
+ <dt>{{domxref("HTMLVideoElement.mozFrameDelay")}} {{Non-standard_Inline}}{{ReadOnlyInline}}</dt>
+ <dd>Un double indiquant le retard, exprimé en secondes, pour l'affichage de la dernière <em>frame</em> affichée.</dd>
+ <dt>{{domxref("HTMLVideoElement.mozHasAudio")}} {{Non-standard_Inline}}{{ReadOnlyInline}}</dt>
+ <dd>Un booléen indiquant s'il y a de l'audio associé à cette vidéo.</dd>
+</dl>
+
+<h3 id="Propriétés_spécifiques_à_Microsoft">Propriétés spécifiques à Microsoft</h3>
+
+<dl>
+ <dt>{{DOMxRef("HTMLVideoElement.msFrameStep()")}} {{Non-standard_Inline}}</dt>
+ <dd>Permet d'avancer ou de reculer la vidéo d'une <em>frame</em>.</dd>
+ <dt>{{DOMxRef("HTMLVideoElement.msHorizontalMirror")}} {{Non-standard_Inline}}</dt>
+ <dd>Permet d'indiquer ou de définir si la vidéo est inversée horizontalement dans l'affichage.</dd>
+ <dt>{{DOMxRef("HTMLVideoElement.msInsertVideoEffect()")}} {{Non-standard_Inline}}</dt>
+ <dd>Ajoute l'effet vidéo indiqué dans le canal de rendu.</dd>
+ <dt>{{DOMxRef("HTMLVideoElement.msIsLayoutOptimalForPlayback")}} {{Non-standard_Inline}}{{ReadOnlyInline}}</dt>
+ <dd>Indique si la vidéo peut être affichée plus efficacement.</dd>
+ <dt>{{DOMxRef("HTMLVideoElement.msIsStereo3D")}} {{Non-standard_Inline}}{{ReadOnlyInline}}</dt>
+ <dd>Un booléen qui détermine si le système considère que la vidéo chargée est en stéréo 3D. La valeur <code>true</code> indique que la source est en stéro 3D.</dd>
+ <dt>{{DOMxRef("HTMLVideoElement.msZoom")}} {{Non-standard_Inline}}</dt>
+ <dd>Contrôle si le cadre de la vidéo est réduit pour s'inscrire dans la zone d'affichage de la vidéo (autrement dit : si la vidéo est zoomée/tronquée pour s'inscrire dans la zone correspondante).</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Hérite des méthodes de son parent {{domxref("HTMLMediaElement")}} et de son ancêtre {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLVideoElement.getVideoPlaybackQuality()")}} {{experimental_inline}}</dt>
+ <dd>Cette méthode renvoie un objet {{domxref("VideoPlaybackQuality")}} contenant les métriques/statistiques sur la lecture actuelle avec des informations comme le nombre d'images sautées ou corrompues ainsi que le nombre total d'images.</dd>
+</dl>
+
+<h2 id="Évènements">Évènements</h2>
+
+<p><font><em>Hérite des méthodes de son parent {{domxref("HTMLMediaElement")}} et de son ancêtre {{domxref("HTMLElement")}}. </em>Pour écouter ces évènements, on utilisera <code><a href="/fr/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> ou on affectera un gestionnaire d'évènement avec la propriété <code>on&lt;NomEvenement&gt;</code> (ex. <code>onclick</code>) de l'interface.</font></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', "#htmlvideoelement", "HTMLVideoElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.HTMLVideoElement")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'élément HTML qui implémente cette interface {{HTMLElement("video")}}.</li>
+ <li><a href="/fr/docs/Web/Media/Formats">Les formats médias pris en charge</a></li>
+</ul>
diff --git a/files/fr/web/api/idbcursor/advance/index.html b/files/fr/web/api/idbcursor/advance/index.html
new file mode 100644
index 0000000000..8011394d64
--- /dev/null
+++ b/files/fr/web/api/idbcursor/advance/index.html
@@ -0,0 +1,181 @@
+---
+title: IDBCursor.advance()
+slug: Web/API/IDBCursor/advance
+tags:
+  - API
+  - IndexedDB
+  - Méthode
+  - Reference
+translation_of: Web/API/IDBCursor/advance
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La méthode <strong><code>advance()</code></strong> de l'interface {{domxref("IDBCursor")}} définit le nombre d'itérations du curseur avec lequel celui-ci doit se déplacer vers l'avant.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">cursor.advance(count);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>count</code></dt>
+ <dd>Le nombre d'itérations du curseur.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Aucune.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Cette méthode peut déclencher des exceptions  {{domxref("DOMException")}} :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Exception</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>TransactionInactiveError</code></td>
+   <td>Cette transaction IDBCursor est inactive.</td>
+  </tr>
+  <tr>
+   <td><code>TypeError</code></td>
+   <td>La valeur passée au paramètre <code>count</code> vaut zéro ou est négative.</td>
+  </tr>
+  <tr>
+   <td><code>InvalidStateError</code></td>
+   <td>Le curseur est en itération ou a itéré au-delà de la plage.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans ce petit morceau de code on fait une transaction, récupère un magasin d'objet, puis utilise un curseur pour itérer sur les enregistrements du magasin. Ici, on utilise <code>cursor.advance(2)</code> pour avancer de 2 cases à chaque fois, ce qui signifie que seule la moitié des résultats sera affichée. <code>advance()</code>fonctionne de façon similaire à {{domxref ("IDBCursor.continue")}} mais permet de sauter plusieurs enregistrements à la fois et pas uniquement d'accéder à l'enregistrement suivant.</p>
+
+<p>On notera également que, dans chaque itération de la boucle, on peut  récupérer les données de l'enregistrement en cours grâce à l'objet curseur via <code>curseur.value.foo</code>. Pour un exemple fonctionnel complet, voir <a href="https://github.com/mdn/IDBcursor-example/">notre exemple IDBCursor</a> (<a href="https://mdn.github.io/IDBcursor-example/">l'exemple en <em>live</em></a>).</p>
+
+<pre class="brush: js">function advanceResult() {
+  list.innerHTML = '';
+  var transaction = db.transaction(['granListAlbum'], "readonly");
+  var objectStore = transaction.objectStore('granListAlbum');
+
+  objectStore.openCursor().onsuccess = function(event) {
+    var curseur = event.target.result;
+    if(curseur) {
+      var listItem = document.createElement('li');
+      listItem.innerHTML = '<strong>' + curseur.value.titreAlbum + '</strong>, ' + curseur.value.annee;
+      list.appendChild(listItem);
+      curseur.advance(2);
+    } else {
+      console.log('moitié des resultats affiché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('IndexedDB', '#widl-IDBCursor-advance-void-unsigned-long-count', 'advance()')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, partial</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les web workers</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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les web workers</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>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Manipuler IndexedDB</a></li>
+ <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li>
+ <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li>
+ <li>Manipuler des curseurs : {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence pour IndexedDB : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/idbcursor/continue/index.html b/files/fr/web/api/idbcursor/continue/index.html
new file mode 100644
index 0000000000..f93060fbd2
--- /dev/null
+++ b/files/fr/web/api/idbcursor/continue/index.html
@@ -0,0 +1,184 @@
+---
+title: IDBCursor.continue()
+slug: Web/API/IDBCursor/continue
+tags:
+  - API
+  - IndexedDB
+  - Méthode
+  - Reference
+translation_of: Web/API/IDBCursor/continue
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La méthode <strong><code>continue()</code></strong> de l'interface {{domxref("IDBCursor")}} fait avancer le curseur jusqu'à la prochaine position qui corrrespond à une clé donnée si celle-ci est passée en paramètre, si aucune clé n'est indiquée, le curseur avancera à la position qui suit immédiatement la position actuelle (dans la direction de progression du curseur).</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">curseur.continue(<em>cléOptionnelle</em>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code><em>cléOptionnelle</em></code></dt>
+ <dd>La clé sur laquelle se positionne le curseur.</dd>
+</dl>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Cette méthode peut déclencher des exceptions  {{domxref("DOMException")}} de type :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Exception</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>TransactionInactiveError</code></td>
+   <td>La transaction de l'IDBCursor est inactive.</td>
+  </tr>
+  <tr>
+   <td><code>DataError</code></td>
+   <td>
+    <p>Le paramètre <code><em>cléOptionnelle</em></code> peut:</p>
+
+    <ul>
+     <li>Être invalide.</li>
+     <li>Être inférieur ou égal à la position de ce curseur et la direction du curseur <code>next</code> ou <code>nextunique</code>.</li>
+     <li>Être supérieur ou égal à la position de ce curseur et la direction de ce curseur <code>prev</code> ou <code>prevunique</code>.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td><code>InvalidStateError</code></td>
+   <td>Le curseur est en itération ou il a itéré au-delà de la plage.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans ce petit morceau de code, on fait une transaction, on récupère un magasin d'objet, puis on utilise un curseur afin d'itérer sur les enregistrements contenus dans le magasin. Il n'est pas nécessaire de sélectionner les données selon une clé, on peut simplement toutes les récupérer. On notera qu'à chaque itération de la boucle, on récupère les données correspondantes à l'enregistrement grâce au curseur sous la forme <code>curseur.value.toto</code>. Pour étudier un exemple de travail complet, voir <a href="https://github.com/mdn/IDBcursor-example/">notre exemple IDBCursor</a> (<a href="https://mdn.github.io/IDBcursor-example/">voir l'exemple live</a>).</p>
+
+<pre class="brush: js">function afficheDonnee() {
+  var transaction = db.transaction(['granListAlbum'], "readonly");
+  var objectStore = transaction.objectStore('granListAlbum');
+
+  objectStore.openCursor().onsuccess = function(event) {
+    var curseur = event.target.result;
+    if(curseur) {
+      var listItem = document.createElement('li');
+      listItem.innerHTML = curseur.value.titreAlbum + ', ' + curseur.value.annee;
+      list.appendChild(listItem);
+
+      curseur.continue();
+    } else {
+      console.log('Entrées toutes affiché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('IndexedDB', '#widl-IDBCursor-continue-void-any-key', 'continue()')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, en partie</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les web workers</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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les web workers</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>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Manipuler IndexedDB</a></li>
+ <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li>
+ <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li>
+ <li>Manipuler des curseurs : {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence pour IndexedDB : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/idbcursor/index.html b/files/fr/web/api/idbcursor/index.html
new file mode 100644
index 0000000000..f44088a7b1
--- /dev/null
+++ b/files/fr/web/api/idbcursor/index.html
@@ -0,0 +1,221 @@
+---
+title: IDBCursor
+slug: Web/API/IDBCursor
+tags:
+  - API
+  - IndexedDB
+  - Interface
+  - Référence(2)
+translation_of: Web/API/IDBCursor
+---
+<div>{{APIRef("IndexedDB")}}
+<div>
+<p>L'interface <strong><code>IDBCursor</code></strong> de l' <a href="/fr/docs/Web/API/API_IndexedDB">API IndexedDB</a> représente un <a href="/fr/docs/Web/API/API_IndexedDB/Basic_Concepts_Behind_IndexedDB#range">curseur</a> pour traverser ou itérer sur plusieurs enregistrements dans une base de données.</p>
+
+<p>Le curseur possède une source qui indique l'index ou le magasin d'objets sur lequel il itère. Il est décrit par une position dans cet intervalle et par une direction dans laquelle il se déplace : dans l'ordre des clés d'enregistrement suivant le sens donné au curseur (montant ou descendant). Le curseur permet à une application de traiter de façon asynchrone tous les enregistrements de sa plage.</p>
+
+<p>On peut avoir autant de curseurs qu'on souhaite en même temps. Ce sera toujours le même objet <code>IDBCursor</code> qui représentera un curseur donné. Les opérations sont effectuées à l’intérieur de l'index ou du magasin d'objet.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("IDBCursor.advance()")}}</dt>
+ <dd>Définit le nombre d’itérations vers l'avant.</dd>
+ <dt>{{domxref("IDBCursor.continue()")}}</dt>
+ <dd>Avance le curseur sur la position suivante le long de sa direction, jusqu'à l'élément dont la clé correspond au paramètre (optionnel) passé à la fonction.</dd>
+ <dt>{{domxref("IDBCursor.delete()")}}</dt>
+ <dd>Retourne un objet {{domxref ("IDBRequest")}}, et, dans un thread séparé, supprime l'enregistrement à la position du curseur, sans changer la position du curseur. Ceci peut être utilisé pour supprimer des enregistrements spécifiques.</dd>
+ <dt>{{domxref("IDBCursor.update()")}}</dt>
+ <dd>Retourne un objet {{domxref("IDBRequest")}}, et, dans un thread séparé, met à jour la valeur à la position actuelle du curseur dans le magasin d'objets. Ceci peut être utilisé pour mettre à jour des enregistrements spécifiques.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("IDBCursor.source")}} {{readonlyInline}}</dt>
+ <dd>Renvoie le {{domxref("IDBObjectStore")}} ou {{domxref("IDBIndex")}} sur lequel le curseur itère. Cette fonction ne retourne jamais <code>null</code> et ne déclenche pas d’exception, même dans les cas ou le curseur est en train d'itérer, s'il a itéré en dehors la plage ou si la transaction n'est pas active.</dd>
+ <dt>{{domxref("IDBCursor.direction")}} {{readonlyInline}}</dt>
+ <dd>Renvoie la direction de parcours du curseur. Voir le paragraphe suivant, <a href="#constantes">Constantes</a>, pour les valeurs possibles.</dd>
+ <dt>{{domxref("IDBCursor.key")}} {{readonlyInline}}</dt>
+ <dd>Renvoie la clé de l'enregistrement à la position du curseur ou <code>undefined</code> si le curseur est en dehors de la plage. La clé peut être de n'importe quel type de données.</dd>
+ <dt>{{domxref("IDBCursor.primaryKey")}} {{readonlyInline}}</dt>
+ <dd>Renvoie la clé primaire effective actuelle du curseur ou <code>undefined</code> si le curseur est actuellement itéré ou a itéré en dehors de sa plage. La clé primaire du curseur peut être de tout type de données.</dd>
+</dl>
+
+<h2 id="Constantes"><a id="constantes" name="constantes">Constantes</a></h2>
+
+<p>{{deprecated_header(13)}}</p>
+
+<p class="warning">Ces constantes ne sont plus disponibles - elles ont été retirées depuis Gecko 25. Les valeurs équivalentes en chaînes de caractères devraient être utilisées à la place (cf. {{bug(891944)}}).</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Constante</th>
+   <th scope="col">Valeur</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>NEXT</code></td>
+   <td>
+    <p><code>"next"</code></p>
+   </td>
+   <td>Le curseur indique tous les enregistrements, y compris les doublons. Il commence à la limite inférieure de la plage de clé et se déplace vers le haut (en itérant dans l'ordre des clés).</td>
+  </tr>
+  <tr>
+   <td><code>NEXTUNIQUE</code></td>
+   <td>
+    <p><code>"nextunique"</code></p>
+   </td>
+   <td>Le curseur indique tous les enregistrements, à l'exclusion des doublons. Si plusieurs enregistrements existent avec la même clé, seule la première itération est récupérée. Il commence à la limite inférieure de la plage de clé et se déplace vers le haut.</td>
+  </tr>
+  <tr>
+   <td><code>PREV</code></td>
+   <td>
+    <p><code>"prev"</code></p>
+   </td>
+   <td>Le curseur indique tous les enregistrements, y compris les doublons. Il commence à la limite supérieure de la plage de clé et se déplace vers le bas (en itérant dans l'ordre inverse des clés).</td>
+  </tr>
+  <tr>
+   <td><code>PREVUNIQUE</code></td>
+   <td>
+    <p><code>"prevunique"</code></p>
+   </td>
+   <td>Le curseur indique tous les enregistrements, à l'exclusion des doublons. Si plusieurs enregistrements existent avec la même clé, seule la première itération est récupéré. Il commence à la limite supérieure de la plage de clé et se déplace vers le bas.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans ce fragment simple, nous créons une transaction, récupérons un magasin d'objets, puis utilisons un curseur pour parcourir tous les enregistrements du magasin d'objets. Le curseur ne nous oblige pas à sélectionner les données basées sur une clé, nous pouvons simplement travailler sur tout les enregistrements. Notez également que dans chaque itération de la boucle, vous pouvez récupérer les données de l'enregistrement en cours sous l'objet curseur à l'aide <code>curseur.value.toto</code>. Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/IDBcursor-example/">exemple IDBCursor</a> (<a href="https://mdn.github.io/IDBcursor-example/">l'exemple en <em>live</em></a>).</p>
+
+<pre class="brush: js">function afficheDonnee() {
+  var transaction = db.transaction(['grandListAlbum'], "readonly");
+  var objectStore = transaction.objectStore('grandListAlbum');
+
+  objectStore.openCursor().onsuccess = function(event) {
+    var curseur = event.target.result;
+    if(curseur) {
+      var listItem = document.createElement('li');
+      listItem.innerHTML = curseur.value.titreAlbum + ', ' + curseur.value.annee;
+      list.appendChild(listItem);
+
+      curseur.continue();
+    } else {
+      console.log('Entrées tous affiché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('IndexedDB', '#idl-def-IDBCursor', 'cursor')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, partial</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible avec les web workers</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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible avec les web workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Manipuler IndexedDB</a></li>
+ <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li>
+ <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li>
+ <li>Manipuler des curseurs: {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence pour IndexedDB : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li>
+</ul>
+</div>
+</div>
diff --git a/files/fr/web/api/idbdatabase/close/index.html b/files/fr/web/api/idbdatabase/close/index.html
new file mode 100644
index 0000000000..85659d1c4c
--- /dev/null
+++ b/files/fr/web/api/idbdatabase/close/index.html
@@ -0,0 +1,147 @@
+---
+title: IDBDatabase.close()
+slug: Web/API/IDBDatabase/close
+tags:
+  - API
+  - IndexedDB
+  - Méthode
+  - Reference
+translation_of: Web/API/IDBDatabase/close
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La méthode <strong><code>close()</code></strong> de l'interface {{domxref("IDBDatabase")}} ferme de façon asynchrone la connexion à la base de donnée.</p>
+
+<p>La connexion sera fermée lorsque toutes les transactions liées à cette connexion seront terminées. En revanche, on ne pourra pas démarrer de nouvelles transactions sur la connexion une fois que cette méthode a été appelée. Les méthodes qui initialisent des transactions déclencheront une exception lorsque la fermeture est en cours.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">db.close();</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Aucune.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js;highlight:[16]">// ouverture de la connexion à la base de données toDoList
+  var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+  // deux gestionnaires d’événements effectuant les
+  // opérations après que l'ouverture se soit bien
+  // passée ou non.
+  DBOpenRequest.onerror = function(event) {
+    note.innerHTML += '&lt;li&gt;Erreur lors du chargement de la base.&lt;/li&gt;';
+  };
+
+  DBOpenRequest.onsuccess = function(event) {
+    note.innerHTML += '&lt;li&gt;Base chargée.&lt;/li&gt;';
+
+    // affecte la connexion à la variable db
+    db = DBOpenRequest.result;
+
+    // fermeture de la base de donnée.
+    db.close();
+  }</pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="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', '#widl-IDBDatabase-close-void', 'close()')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, en partie</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les web workers</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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les web workers</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>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Manipuler IndexedDB</a></li>
+ <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li>
+ <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li>
+ <li>Manipuler des curseurs : {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence pour IndexedDB : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/idbdatabase/createobjectstore/index.html b/files/fr/web/api/idbdatabase/createobjectstore/index.html
new file mode 100644
index 0000000000..c63991e662
--- /dev/null
+++ b/files/fr/web/api/idbdatabase/createobjectstore/index.html
@@ -0,0 +1,213 @@
+---
+title: IDBDatabase.createObjectStore()
+slug: Web/API/IDBDatabase/createObjectStore
+tags:
+  - API
+  - IndexedDB
+  - Méthode
+  - Reference
+translation_of: Web/API/IDBDatabase/createObjectStore
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La méthode <strong><code>createObjectStore()</code></strong>, rattachée à l'interface {{domxref("IDBDatabase")}}, permet d'ajouter un magasin d’objet ou un index à la base de donnée et renvoie un accès vers celui-ci.</p>
+
+<p>Cette méthode utilise deux paramètres : le nom du magasin d'objets et un objet qui permettra de définir des propriétés optionnelles supplémentaires.</p>
+
+<p>Cette méthode ne peut être appelée que lors d'une transaction en mode <a href="/fr/docs/Web/API/IDBTransaction"><code>versionchange</code></a>.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var objectStore = db.createObjectStore(name, optionalParameters);
+</pre>
+
+<h2 id="Paramètres">Paramètres</h2>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Le nom du magasin d'objet à ajouter. Il est possible d'ajouter un magasin d’objet dont le nom est la chaîne vide (!).</dd>
+ <dt><code>optionalParameters</code> {{optional_inline}}</dt>
+ <dd>
+ <p>Un objet qui permet de décrire plus finement le magasin d'objets avec ces propriétés :</p>
+
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col">Propriété</th>
+    <th scope="col">Description</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td><code>keyPath</code></td>
+    <td>Le chemin de la clé utilisé par le magasin d'objet. Si ce paramètre est vide ou non spécifié, le magasin d'objets utilisera une clé externe. Le <code>keyPath</code> peut aussi être un tableau.</td>
+   </tr>
+   <tr>
+    <td><code>autoIncrement</code></td>
+    <td>Si <code>true</code>, le magasin d’objet implémentera un générateur de clé. La valeur par défaut est <code>false</code>.</td>
+   </tr>
+  </tbody>
+ </table>
+
+ <p>Les autres propriétés seront ignorés.</p>
+ </dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<dl>
+ <dt>{{domxref("IDBObjectStore")}}</dt>
+ <dd>Le magasin d'objets qui vient d'être créé.</dd>
+</dl>
+
+<h2 id="Exceptions">Exceptions</h2>
+
+<dl>
+ <dt><code>InvalidStateError</code></dt>
+ <dd>Cette exception {{domxref("DOMException")}} est levée si la méthode n'est pas appelée lors d'une transaction en mode <code>versionchange</code>. Pour les anciens navigateurs basés sur WebKit, il faut d'abord appeler {{domxref("IDBVersionChangeRequest.setVersion")}}.</dd>
+ <dt><code>TransactionInactiveError</code></dt>
+ <dd>Cette exception {{domxref("DOMException")}} est levée si la méthode est appelée sur une base de données qui n'existe pas (elle a par exemple été effacée). Dans les versions antérieures à Firefox 41, ce dernier levait une erreur <code>InvalidStateError</code>, cela est désormais corrigé (cf. {{bug("1176165")}}).</dd>
+ <dt><code>ConstraintError</code></dt>
+ <dd>Un magasin d'objet portant le même nom (la casse est importante) existe déjà dans cette base de donnée.</dd>
+ <dt><code>InvalidAccessError</code></dt>
+ <dd>Si la valeur <code>autoIncrement</code> est à <code>true</code> et que le chemin de clé n'est pas renseigné ou est un tableau vide.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js"> // Ouverture de la base de données
+  var request = window.indexedDB.open("toDoList", 4);
+
+  /* Gestionnaire d'événement qui intervient lors de la
+     mise en place d'une nouvelle version de la base de
+     données, que la base n'existe pas et soit ajoutée
+     ou qu'un nouveau numéro de version soit passé à
+     window.indexedDB.open
+     Il est seulement mis en œuvre dans les
+     navigateurs récents */
+  request.onupgradeneeded = function(event) {
+    var db = event.target.result;
+
+    db.onerror = function(event) {
+      note.innerHTML += '&lt;li&gt;Erreur du chargement de la base de données.&lt;/li&gt;';
+    };
+
+    // On ajoute un magasin d'objet à la base de données
+
+    var objectStore = db.createObjectStore("toDoList", { keyPath: "taskTitle" });
+
+    // définition des index de ce magasin d'objets
+
+    objectStore.createIndex("hours", "hours", { unique: false });
+    objectStore.createIndex("minutes", "minutes", { unique: false });
+    objectStore.createIndex("day", "day", { unique: false });
+    objectStore.createIndex("month", "month", { unique: false });
+    objectStore.createIndex("year", "year", { unique: false });
+
+    objectStore.createIndex("notified", "notified", { unique: false });
+
+    note.innerHTML += '&lt;li&gt;Magasin d\'objet ajouté.&lt;/li&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('IndexedDB', '#widl-IDBDatabase-createObjectStore-IDBObjectStore-DOMString-name-IDBObjectStoreParameters-optionalParameters', 'createObjectStore()')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, en partie</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible via les web workers</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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Disponible via les web workers</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>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Manipuler IndexedDB</a></li>
+ <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li>
+ <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li>
+ <li>Manipuler des curseurs : {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence pour IndexedDB : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/idbdatabase/deleteobjectstore/index.html b/files/fr/web/api/idbdatabase/deleteobjectstore/index.html
new file mode 100644
index 0000000000..4c3587fabd
--- /dev/null
+++ b/files/fr/web/api/idbdatabase/deleteobjectstore/index.html
@@ -0,0 +1,233 @@
+---
+title: IDBDatabase.deleteObjectStore()
+slug: Web/API/IDBDatabase/deleteObjectStore
+tags:
+  - API
+  - IndexedDB
+  - Méthode
+  - Reference
+translation_of: Web/API/IDBDatabase/deleteObjectStore
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La méthode <strong><code>deleteObjectStore()</code></strong> de l'interface {{domxref("IDBDatabase")}} supprime un magasin d'objet et ses index de la base de données.</p>
+
+<p>Comme la méthode {{domxref("IDBDatabase.createObjectStore")}}, cette méthode doit être appelée <em>uniquement</em> lors d'une transaction en mode <a href="/fr/docs/Web/API/IDBTransaction"><code>versionchange</code></a>.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">dbInstance.deleteObjectStore(name);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Le nom du magasin d'objet à supprimer.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Aucune.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Cette méthode peut lever une {{domxref("DOMException")}} d'un de ces types suivants:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Exception</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>InvalidStateError</code></td>
+   <td>Levée si la méthode n'est pas appelée lors d'une transaction en mode <code>versionchange</code>. Pour les anciens navigateurs basés sur WebKit, il faut d'abord appeler la méthode  {{domxref("IDBVersionChangeRequest.setVersion")}}.</td>
+  </tr>
+  <tr>
+   <td><code>TransactionInactiveError</code></td>
+   <td>Levée si la méthode est appelée sur une base de données qui n'existe pas (ex. elle a été effacée). Pour les versions antérieures à Firefox 41, ce dernier déclenchait une erreur <code>InvalidStateError</code>, cela est désormais corrigé (cf. {{bug("1176165")}}).</td>
+  </tr>
+  <tr>
+   <td><code>NotFoundError</code></td>
+   <td>Levée lors de la suppression d'un magasin d'objets qui n'existe pas. Les noms sont sensibles à la casse.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, on ouvre une connexion à la base de données et dans le gestionnaire d'événements <code>onupdateneeded</code>, on ajoute un magasin d'objets en utilisant la méthode {{domxref("IDBDatabase.createObjectStore")}}. Enfin, on supprime ce magasin d'objets grâce à <code>deleteObjectStore()</code>.</p>
+
+<pre class="brush: js;">  // Connexion à la base de données
+  var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+  /* Gestionnaire d'événements qui intervient lors de
+     la mise en place d'une nouvelle version de la
+     base de données, que la base n'existe pas, qu'elle
+     soit ajoutée ou qu'un nouveau numéro de version
+     soit utilisé avec à window.indexedDB.open
+     Seulement utilisé avec les navigateurs récents */
+  DBOpenRequest.onupgradeneeded = function(event) {
+    var db = event.target.result;
+
+    db.onerror = function(event) {
+      note.innerHTML += '&lt;li&gt;Erreur du chargement de la base de données.&lt;/li&gt;';
+    };
+
+    // Ajoute un magasin d'objets à la base de données
+
+    var objectStore = db.createObjectStore("toDoList", { keyPath: "taskTitle" });
+
+    // Définition des index de ce magasin d'objets
+
+    objectStore.createIndex("hours", "hours", { unique: false });
+    objectStore.createIndex("minutes", "minutes", { unique: false });
+    objectStore.createIndex("day", "day", { unique: false });
+    objectStore.createIndex("month", "month", { unique: false });
+    objectStore.createIndex("year", "year", { unique: false });
+
+    objectStore.createIndex("notified", "notified", { unique: false });
+
+    note.innerHTML += '&lt;li&gt;Magasin d\'objets ajouté.&lt;/li&gt;';
+
+    // Supprime le magasin d'objets
+
+    db.deleteObjectStore("toDoList");
+  };
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="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', '#widl-IDBDatabase-deleteObjectStore-void-DOMString-name', 'deleteObjectStore()')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("IndexedDB 2", "#dom-idbdatabase-deleteobjectstore", "deleteObjectStore()")}}</td>
+   <td>{{Spec2("IndexedDB 2")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support basique</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, en partie</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les web workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</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>
+
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android Webview</th>
+   <th>Chrome pour 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>Support simple</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les web workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</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>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Manipuler IndexedDB</a></li>
+ <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li>
+ <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li>
+ <li>Manipuler des curseurs : {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence pour IndexedDB : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/idbdatabase/index.html b/files/fr/web/api/idbdatabase/index.html
new file mode 100644
index 0000000000..113bf3ffa6
--- /dev/null
+++ b/files/fr/web/api/idbdatabase/index.html
@@ -0,0 +1,221 @@
+---
+title: IDBDatabase
+slug: Web/API/IDBDatabase
+tags:
+  - API
+  - IndexedDB
+  - Interface
+  - Reference
+translation_of: Web/API/IDBDatabase
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>L'interface <strong><code>IDBDatabase</code></strong> de l'API IndexedDB fournit <a href="/fr/docs/Web/API/API_IndexedDB#Se_connecter_à_la_base_de_données">une connexion à la base de données</a>. On peut utiliser un objet <code>IDBDatabase</code> pour ouvrir une {{domxref("IDBTransaction","transaction")}} sur la base de données puis ajouter, éditer ou supprimer des enregistrements de cette base de données. Cette interface constitue le seul moyen d'accéder et de gérer les versions de la base de données.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<div class="note">
+<p><strong>Note : </strong>Tout ce qui est fait dans une base de données indexée s'inscrit dans le contexte d'une transaction qui représente un interaction avec les données dans la base. Tout les objets de l'interface IndexedDB (incluant les accès aux magasins d'objets, indexes et curseurs) sont liés à une transaction en particulier. Aussi, on ne peut pas exécuter une commande, accéder aux données ou ouvrir quoi que ce soit, en dehors d'une transaction.</p>
+</div>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p>Cet objet hérite de <a href="/fr/docs/Web/API/EventTarget">EventTarget</a>.</p>
+
+<dl>
+ <dt>{{domxref("IDBDatabase.close()")}}</dt>
+ <dd>Ferme de façon asynchrone la connexion à la base de données.</dd>
+ <dt>{{domxref("IDBDatabase.createObjectStore()")}}</dt>
+ <dd>Ajoute un magasin d’objet ou un index à la base de donnéeset le renvoie.</dd>
+ <dt>{{domxref("IDBDatabase.deleteObjectStore()")}}</dt>
+ <dd>À partir d'un nom donné, supprime un magasin d'objet et les index associés.</dd>
+ <dt>{{domxref("IDBDatabase.transaction()")}}</dt>
+ <dd>Renvoie une transaction sous la forme d'un objet {{domxref("IDBTransaction")}} sur lequel on peut appeler la méthode {{domxref("IDBTransaction.objectStore")}} afin d'accéder aux magasins d'objet de la base de données.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("IDBDatabase.name")}} {{readonlyInline}}</dt>
+ <dd>Une chaîne de caractères ({{domxref("DOMString")}}) qui contient le nom de la base de données connectée.</dd>
+ <dt>{{domxref("IDBDatabase.version")}} {{readonlyInline}}</dt>
+ <dd>Un <a href="/fr/docs/Mozilla/Projects/NSPR/Reference/Long_Long_(64-bit)_Integers">entier de 64 bits</a> qui indique la version de la base de données connectée. Quand une base de données est créée, cette propriété est une chaîne de caractère vide.</dd>
+ <dt>{{domxref("IDBDatabase.objectStoreNames")}} {{readonlyInline}}</dt>
+ <dd>Une liste de noms (sous la forme d'un objet {{domxref("DOMStringList")}} des magasins d'objets correspondants à la base de données connectée.</dd>
+</dl>
+
+<h3 id="Gestionnaires_d'événements">Gestionnaires d'événements</h3>
+
+<dl>
+ <dt>{{domxref("IDBDatabase.onabort")}}</dt>
+ <dd>S'exécute au déclenchement de l'événement <code>abort</code> quand la tentative d’accès à la base de donnée est interrompue.</dd>
+ <dt>{{domxref("IDBDatabase.onerror")}}</dt>
+ <dd>S’exécute au déclenchement de l'événement <code>error</code> quand la connexion à la base de donnée échoue.</dd>
+ <dt>{{domxref("IDBDatabase.onversionchange")}}</dt>
+ <dd>S’exécute au déclenchement de l'événement <code>versionchange</code> quand la structure de la base de donnée change (l'événement {{domxref("IDBOpenDBRequest.onupgradeneeded")}} ou {{domxref("IDBFactory.deleteDatabase")}} à été demandé ailleurs (probablement dans une autre fenêtre ou onglet sur le même ordinateur). Cela est différent de la transaction correspondant à un changement de version (cf. {{domxref("IDBVersionChangeEvent")}}) mais les concepts sont liés.</dd>
+ <dt>
+ <h2 id="Exemples">Exemples</h2>
+ </dt>
+</dl>
+
+<p>Dans le fragment de code suivant, on ouvre une base de données de façon asynchrone avec {{domxref("IDBFactory")}} puis on gère les cas de succès et d'erreur avant de créer un nouveau magasin d'objet au cas où une mise à jour est nécessaire ({{domxref("IDBdatabase")}}). Pour étudier un exemple complet et fonctionnel, voir notre application <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">voir l'exemple <em>live</em></a>).</p>
+
+<pre class="brush: js;highlight:[13,24,26,27,28,32]">// On ouvre la base de données
+  var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+  // On ajoute les deux gestionnaires d'événements
+  // qui agissent sur l'objet IDBDatabase object,
+  // dans le cas où tout se passe bien ou non
+  DBOpenRequest.onerror = function(event) {
+    note.innerHTML += '&lt;li&gt;Erreur lors du chargement de la base de données.&lt;/li&gt;';
+  };
+
+  DBOpenRequest.onsuccess = function(event) {
+    note.innerHTML += '&lt;li&gt;Base de données initialisée.&lt;/li&gt;';
+
+    // On enregistre le résultat de l'ouverture
+    // dans la variable db (on l'utilisera plusieurs
+    // fois par la suite).
+    db = DBOpenRequest.result;
+
+    // On lance la fonction displayData()
+    // afin de remplir la liste de tâches
+    // avec les données contenues dans la base
+    displayData();
+  };
+
+  // Ce gestionnaire permet de parer au cas où une
+  // nouvelle version de la base de données doit
+  // être créée.
+  // Soit la base de données n'existait pas, soit
+  // il faut utiliser une nouvelle version
+
+  DBOpenRequest.onupgradeneeded = function(event) {
+    var db = event.target.result;
+
+    db.onerror = function(event) {
+      note.innerHTML += '&lt;li&gt;Erreur lors du chargement de la base de données.&lt;/li&gt;';
+    };
+
+    // On crée un magasin d'objet objectStore pour
+    // cette base de données via IDBDatabase.createObjectStore
+
+    var objectStore = db.createObjectStore("toDoList", { keyPath: "taskTitle" });
+
+    // Enfin, on définit les données qui seront contenues
+    // dans ce modèle de données
+
+    objectStore.createIndex("hours", "hours", { unique: false });
+    objectStore.createIndex("minutes", "minutes", { unique: false });
+    objectStore.createIndex("day", "day", { unique: false });
+    objectStore.createIndex("month", "month", { unique: false });
+    objectStore.createIndex("year", "year", { unique: false });
+
+    objectStore.createIndex("notified", "notified", { unique: false });
+
+    note.innerHTML += "&lt;li&gt;Magasin d'objets créé.&lt;/li&gt;";
+  };</pre>
+
+<p>La ligne qui suit permet d'ouvrir une transaction avec cette base de données afin de consulter le magasin d'objets et de manipuler les données qu'il contient..</p>
+
+<pre class="brush: js">var objectStore = db.transaction('toDoList').objectStore('toDoList'); </pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="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', '#idl-def-IDBDatabase', 'IDBDatabase')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, en partie</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les web workers</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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les web workers</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>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Manipuler IndexedDB</a></li>
+ <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li>
+ <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li>
+ <li>Manipuler des curseurs : {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence pour IndexedDB : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/idbdatabase/name/index.html b/files/fr/web/api/idbdatabase/name/index.html
new file mode 100644
index 0000000000..5dfe249927
--- /dev/null
+++ b/files/fr/web/api/idbdatabase/name/index.html
@@ -0,0 +1,151 @@
+---
+title: IDBDatabase.name
+slug: Web/API/IDBDatabase/name
+tags:
+  - API
+  - IndexedDB
+  - Propriété
+  - Reference
+translation_of: Web/API/IDBDatabase/name
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La propriété <strong><code>name</code></strong> de l'interface <code>IDBDatabase</code> est une chaîne de caractères, sous la forme d'un objet {{domxref("DOMString")}}, contenant le nom de la base de données connectée.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">db.name</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une chaîne de caractères {{domxref("DOMString")}} contenant le nom de la base de données connectée.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Cet exemple affiche le nom de la base de données qui est ouverte. La connexion (l'objet {{domxref("IDBDatabase")}}) est affectée à la variable <code>db</code>, puis sa propriété <code>name</code> est affichée dans la console.</p>
+
+<pre class="brush: js;highlight:[16]">// Connexion à la base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+// Les deux gestionnaires d'événement activés pour
+// détecter si l'ouverture de la base se déroule
+// correctement ou non.
+
+DBOpenRequest.onerror = function(event) {
+  note.innerHTML += '&lt;li&gt;Erreur au chargement de la base de données.&lt;/li&gt;';
+};
+
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '&lt;li&gt;Base de données initialisée.&lt;/li&gt;';
+
+  // Affecte la connexion à la variable db.
+  db = DBOpenRequest.result;
+
+  // Affiche le nom de la base de donnée (ici "toDoList")
+  // dans la console.
+  console.log(db.name);
+};</pre>
+
+<p class="note">Pour un exemple fonctionnel complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">voir l'exemple <em>live</em></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('IndexedDB', '#widl-IDBDatabase-name', 'name')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, en partie</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les web workers</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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les web workers</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>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Manipuler IndexedDB</a></li>
+ <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li>
+ <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li>
+ <li>Manipuler des curseurs : {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence pour IndexedDB : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/idbdatabase/objectstorenames/index.html b/files/fr/web/api/idbdatabase/objectstorenames/index.html
new file mode 100644
index 0000000000..8d1ed037c6
--- /dev/null
+++ b/files/fr/web/api/idbdatabase/objectstorenames/index.html
@@ -0,0 +1,148 @@
+---
+title: IDBDatabase.objectStoreNames
+slug: Web/API/IDBDatabase/objectStoreNames
+tags:
+  - API
+  - Database
+  - IndexedDB
+  - Propriété
+  - Reference
+translation_of: Web/API/IDBDatabase/objectStoreNames
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La propriété <strong><code>objectStoreNames</code></strong>, rattachée à l'interface {{domxref("IDBDatabase")}}, est une liste de chaînes de caractères  ({{domxref("DOMStringList")}}) qui sont les noms des magasins d'objets ({{domxref("IDBObjectStore")}}) connectés à la base de données.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">db.objectStoreNames</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une liste {{domxref("DOMStringList")}} des noms de magasins d'objets ({{domxref("IDBObjectStore")}}) connectés à la base de données.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">// Connexion à la base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+// Les deux gestionnaires d’événements activés pour
+// gérer la réussite ou l'échec de le connexion.
+DBOpenRequest.onerror = function(event) {
+  note.innerHTML += '&lt;li&gt;Erreur de chargement de la base de données.&lt;/li&gt;';
+};
+
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '&lt;li&gt;Base de données initialisée.&lt;/li&gt;';
+
+  // Affecte la connexion à la variable db.
+  db = DBOpenRequest.result;
+
+  // Cette ligne affiche sur la console la liste des magasins
+  // d'objets de la base de données
+  console.log(db.objectStoreNames);
+};</pre>
+
+<p class="note">Pour un exemple fonctionnel complet, voir notre application de démo <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">l'exemple <em>live</em></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('IndexedDB', '#widl-IDBDatabase-objectStoreNames', 'objectStoreNames')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, en partie</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible via les web workers</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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Disponible via les web workers</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>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Manipuler IndexedDB</a></li>
+ <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li>
+ <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li>
+ <li>Manipuler des curseurs : {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence pour IndexedDB : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/idbdatabase/onabort/index.html b/files/fr/web/api/idbdatabase/onabort/index.html
new file mode 100644
index 0000000000..5a4f4f7a50
--- /dev/null
+++ b/files/fr/web/api/idbdatabase/onabort/index.html
@@ -0,0 +1,151 @@
+---
+title: IDBDatabase.onabort
+slug: Web/API/IDBDatabase/onabort
+tags:
+  - API
+  - IndexedDB
+  - Propriété
+  - Reference
+translation_of: Web/API/IDBDatabase/onabort
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>Le gestionnaire d'événement <strong><code>onabort</code></strong>, rattaché à l'interface {{domxref("IDBDatabase")}}, s'exécute au déclenchement de l'événement <code>abort</code>, lorsque la tentative d’accès à la base de données est interrompue.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">db.onabort = function() { ... }</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Cette exemple illustre un gestionnaire d'événement {{domxref("IDBOpenDBRequest.onupgradeneeded")}} dans lequel on ajoute un magasin d'objet et les deux gestionnaires d'événement <code>onerror</code> et <code>onabort</code> pour gérer les cas d'échec.</p>
+
+<pre class="brush: js">DBOpenRequest.onupgradeneeded = function(event) {
+  var db = event.target.result;
+
+  db.onerror = function() {
+    note.innerHTML += '&lt;li&gt;Erreur du chargement de la base de données.&lt;/li&gt;';
+  };
+
+  db.onabort = function() {
+    note.innerHTML += '&lt;li&gt;L\'ouverture de la connexion à été annulée !&lt;/li&gt;';
+  };
+
+  // On ajoute un magasin d'objet à la base de données
+
+  var objectStore = db.createObjectStore("toDoList", { keyPath: "taskTitle" });
+
+  // On définit les index du magasin
+
+  objectStore.createIndex("hours", "hours", { unique: false });
+  objectStore.createIndex("minutes", "minutes", { unique: false });
+  objectStore.createIndex("day", "day", { unique: false });
+  objectStore.createIndex("month", "month", { unique: false });
+  objectStore.createIndex("year", "year", { unique: false });
+
+  objectStore.createIndex("notified", "notified", { unique: false });
+
+  note.innerHTML += '&lt;li&gt;Le magasin d\'objets à été ajouté.&lt;/li&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('IndexedDB', '#widl-IDBDatabase-onabort', 'onabort')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_avec_les_navigateurs">Compatibilité avec les navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Foncionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, en partie</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible via les web workers</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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Disponible via les web workers</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>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Manipuler IndexedDB</a></li>
+ <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li>
+ <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li>
+ <li>Manipuler des curseurs : {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence pour IndexedDB : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/idbdatabase/onerror/index.html b/files/fr/web/api/idbdatabase/onerror/index.html
new file mode 100644
index 0000000000..fbfb5efab3
--- /dev/null
+++ b/files/fr/web/api/idbdatabase/onerror/index.html
@@ -0,0 +1,151 @@
+---
+title: IDBDatabase.onerror
+slug: Web/API/IDBDatabase/onerror
+tags:
+  - API
+  - IndexedDB
+  - Propriété
+  - Reference
+translation_of: Web/API/IDBDatabase/onerror
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>Le gestionnaire d'événement <strong><code>onerror</code></strong>, rattaché à  l'interface <code>IDBDatabase</code>, s’exécute au déclenchement de l'événement <code>error</code> qui se produit lorsque la connexion à la base de donnée échoue.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">db.onerror = function() { ... }</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans cet exemple, on illustre un gestionnaire d'événement {{domxref("IDBOpenDBRequest.onupgradeneeded")}} dans lequel on ajoute un magasin d'objet et les deux gestionnaires d'événements <code>onerror</code> et <code>onabort</code> afin de gérer les cas d'échec de la connexion.</p>
+
+<pre class="brush: js">DBOpenRequest.onupgradeneeded = function(event) {
+  var db = event.target.result;
+
+  db.onerror = function() {
+    note.innerHTML += '&lt;li&gt;Erreur du chargement de la base de données.&lt;/li&gt;';
+  };
+
+  db.onabort = function() {
+    note.innerHTML += '&lt;li&gt;L\'ouverture de la connexion à été annulé!&lt;/li&gt;';
+  };
+
+  // Ajoute un magasin d'objet à la base de données
+
+  var objectStore = db.createObjectStore("toDoList", { keyPath: "taskTitle" });
+
+  // Définition des index
+
+  objectStore.createIndex("hours", "hours", { unique: false });
+  objectStore.createIndex("minutes", "minutes", { unique: false });
+  objectStore.createIndex("day", "day", { unique: false });
+  objectStore.createIndex("month", "month", { unique: false });
+  objectStore.createIndex("year", "year", { unique: false });
+
+  objectStore.createIndex("notified", "notified", { unique: false });
+
+  note.innerHTML += '&lt;li&gt;Le magasin d\'objets à été ajouté.&lt;/li&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('IndexedDB', '#widl-IDBDatabase-onerror', 'onerror')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, en partie</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible via les web workers</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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Disponible via les web workers</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>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Manipuler IndexedDB</a></li>
+ <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li>
+ <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li>
+ <li>Manipuler des curseurs : {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence pour IndexedDB : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/idbdatabase/onversionchange/index.html b/files/fr/web/api/idbdatabase/onversionchange/index.html
new file mode 100644
index 0000000000..396a1fb49b
--- /dev/null
+++ b/files/fr/web/api/idbdatabase/onversionchange/index.html
@@ -0,0 +1,157 @@
+---
+title: IDBDatabase.onversionchange
+slug: Web/API/IDBDatabase/onversionchange
+tags:
+  - API
+  - IndexedDB
+  - Propriété
+  - Reference
+translation_of: Web/API/IDBDatabase/onversionchange
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>Le gestionnaire d'événement <strong><code>onversionchange</code></strong>, rattaché à l'interface {{domxref("IDBDatabase")}}, s’exécute au déclenchement de l'événement <code>versionchange</code> qui se produit lorsque la structure de la base de donnée change (l'événement {{domxref("IDBOpenDBRequest.onupgradeneeded")}} ou {{domxref("IDBFactory.deleteDatabase")}} a été demandé par ailleurs (probablement dans une autre fenêtre ou onglet sur le même ordinateur)).</p>
+
+<p>Cela n'est pas la même chose qu'une transaction <code>versionchange</code> (bien que les concepts soient apparentés).</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">db.onversionchange = function() { ... }</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Cette exemple illustre un gestionnaire d'événement {{domxref("IDBOpenDBRequest.onupgradeneeded")}} dans lequel on ajoute un magasin d'objets. Les deux gestionnaires d'événements <code>onerror</code> et <code>onabort</code> sont utilisés pour les cas d'échec. Le gestionnaire d'événement <code>onversionchange</code> est utilisé afin d'indiquer que la structure de la base de données a été modifiée.</p>
+
+<pre class="brush: js">DBOpenRequest.onupgradeneeded = function(event) {
+  var db = event.target.result;
+
+  db.onerror = function() {
+    note.innerHTML += '&lt;li&gt;Erreur du chargement de la base de données.&lt;/li&gt;';
+  };
+
+  db.onabort = function() {
+    note.innerHTML += '&lt;li&gt;L\'ouverture de la connexion à été annulée !&lt;/li&gt;';
+  };
+
+  // Ajoute un magasin d'objets à la base de données
+
+  var objectStore = db.createObjectStore("toDoList", { keyPath: "taskTitle" });
+
+  // Définition des index
+
+  objectStore.createIndex("hours", "hours", { unique: false });
+  objectStore.createIndex("minutes", "minutes", { unique: false });
+  objectStore.createIndex("day", "day", { unique: false });
+  objectStore.createIndex("month", "month", { unique: false });
+  objectStore.createIndex("year", "year", { unique: false });
+
+  objectStore.createIndex("notified", "notified", { unique: false });
+
+  note.innerHTML += '&lt;li&gt;Le magasin d\'objet à été ajouté.&lt;/li&gt;';
+
+  db.onversionchange = function(event) {
+    note.innerHTML += '&lt;li&gt;Des changements ont été appliqués sur la base de données. Vous devez réactualiser cette page ou la fermer et utiliser l\'autre version de cette application qui est ouverte.&lt;/li&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('IndexedDB', '#widl-IDBDatabase-onversionchange', 'onversionchange')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, partial</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible via les web workers</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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>4.4</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Disponible via les web workers</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>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Manipuler IndexedDB</a></li>
+ <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li>
+ <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li>
+ <li>Manipuler des curseurs : {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence pour IndexedDB : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/idbdatabase/transaction/index.html b/files/fr/web/api/idbdatabase/transaction/index.html
new file mode 100644
index 0000000000..82f9006306
--- /dev/null
+++ b/files/fr/web/api/idbdatabase/transaction/index.html
@@ -0,0 +1,224 @@
+---
+title: IDBDatabase.transaction()
+slug: Web/API/IDBDatabase/transaction
+translation_of: Web/API/IDBDatabase/transaction
+---
+<p>{{ APIRef("IndexedDB") }}</p>
+
+<div>
+<p>La méthode <strong><code>transaction</code></strong> de l'interface {{domxref("IDBDatabase")}} renvoie une {{domxref("IDBTransaction","transaction")}} sur laquelle on peut appeler la méthode {{domxref("IDBTransaction.objectStore")}} pour accéder aux magasins d'objets de la base de donnée.</p>
+</div>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var transaction = db.transaction(storeNames, mode);</pre>
+
+<h2 id="Paramètres">Paramètres</h2>
+
+<dl>
+ <dt>storeNames</dt>
+ <dd>un tableau de noms de magasins d'objets entrant dans le cadre de cette transaction. Indique seulement les magasins d'objets dont on a besoin.<br>
+ Si l’on n’a besoin que d’un seul magasin d'objet, on peut simplement passer son nom. Les lignes suivantes sont équivalentes :
+ <pre class="brush: js">var transaction = db.transaction(['my-store-name']);
+var transaction = db.transaction('my-store-name');</pre>
+ Pour utiliser tous les magasins d'objets de la base de donnée, on peut appeler la methode {{domxref("IDBDatabase.objectStoreNames")}}:
+
+ <pre class="brush:js;">var transaction = db.transaction(db.objectStoreNames);</pre>
+ Passer un tableau vide lèvera une exception.</dd>
+ <dt>mode {{optional_inline}}</dt>
+ <dd>
+ <p>Le {{domxref("IDBTransactionMode","mode")}} d’{{domxref("IDBObjectStore","accès aux magasins d'objets")}} à la base de données (par default <code>readonly</code>):</p>
+
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col">Valeur</th>
+    <th scope="col">Explication</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td id="readonly"><code>readonly</code></td>
+    <td>permet de prendre des objets dans les magasins d'objets, de lire les index et de faire des curseurs.</td>
+   </tr>
+   <tr>
+    <td id="readwrite"><code>readwrite</code></td>
+    <td>Permet en plus de que l'on peut faire en readonly, d’ajouter et mettre à jour des objets dans les magasins d'objets.</td>
+   </tr>
+   <tr id="versionchange">
+    <td><code>versionchange</code></td>
+    <td>Permet toute les opérations, y compris celles qui suppriment ou ajoutent des {{domxref("IDBOjectStore","magasins d'objets")}} ou des {{domxref("IDBIndex","index")}}. Ce mode met à jour le numéro de version de la base de données, il se sert au début de {{domxref ("IDBDatabase.setVersion")}}. Les {{domxref("IDBTransaction","transactions")}} dans ce mode ne peuvent pas fonctionner en même temps que d'autres.</td>
+   </tr>
+   <tr>
+    <td id="readwriteflush "><code>readwriteflush</code></td>
+    <td>
+     <p>Si vous devez vous assurer de l'efficacité d'une transaction pour une raison quelconque (par exemple, vous stockez des données critiques qui ne peuvent être recalculées plus tard), vous pouvez forcer l’enregistrement complet sur disque avant de déclencher l’événement <code>complete</code> en utilisant le mode <code>readwriteflush</code> (non standard) expérimental ( voir {{domxref("IDBDatabase.transaction")}} ). C'est expérimental, et ne peut être utilisé que si le <code> dom.indexedDB.experimental </code> pref est réglé sur <code> true </code> dans <code> about:config.</code></p>
+
+     <p class="note">Depuis Firefox 40, les transactions IndexedDB diminuent en efficacité pour gagner en efficience (voir {{Bug ( "1112702")}}.) Auparavant, dans une transaction en <code><a href="#const_read_write">readwrite</a></code> l'événement complete était déclanché seulement lorsque toutes les données étaient écrites sur le disque. Maintenant l'événement <code>complete</code> est déclenché après que l'OS ai envoyé l'ordre d'écrire les données, mais potentiellement avant qu'elles aient été écrites sur le disque. L'événement <code>complete</code> peut ainsi se déclancher plus rapidement qu'auparavant, cependant, il existe une chance infime pour que l'ensemble de la transaction soit perdue si le système d'exploitation plante ou s'il y a une perte de courant avant que les données aient été écites sur le disque. Étant donné que ces événements catastrophiques sont rares la plupart des utilisateurs ne devraient pas avoir à s'en préoccuper davantage.</p>
+    </td>
+   </tr>
+  </tbody>
+ </table>
+ {{note("Pour éviter des pertes de performance, n’utilisez le mode <code>readwrite</code> que si vous avez effectivement besoin d’écrire ou de mettre à jour des données sur la base.")}} Si on a besoin d’accéder à un magasin d'objets pour écrire ou mettre à jour des enregistrement, on utilise la sytaxe:
+
+ <pre class="brush:js">var transaction = db.transaction('monMagasin','readwrite');</pre>
+ </dd>
+ <dd> </dd>
+</dl>
+
+<h2 id="Renvoie">Renvoie</h2>
+
+<p>Une {{domxref("IDBTransaction","transaction")}}.</p>
+
+<h2 id="Exceptions">Exceptions</h2>
+
+<dl>
+ <dt><code>InvalidStateError</code></dt>
+ <dd>Cette {{domxref("DOMException","exception")}} est levée si la méthode <code>close()</code> a été appelée sur cette connexion à la base de donnée.</dd>
+ <dt><code>NotFoundError</code></dt>
+ <dd>Cette {{domxref("DOMException","exception")}} est levée si un magasin d'objets indiqué dans le paramètre <code>storeNames</code> n'existe pas ou plus.</dd>
+ <dt><code>TypeError</code></dt>
+ <dd>Cette {{domxref("DOMException","exception")}} est levée si la valeur du paramètre <code>mode</code> n'est pas valide.</dd>
+ <dt><code>InvalidAccessError</code></dt>
+ <dd>Cette {{domxref("DOMException","exception")}} est levée si la liste passée à <code>storeNames</code> est vide</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans cet exemple, on ouvre simplement une connexion à la base de donnée puis une transaction sur cette connexion.</p>
+
+<pre class="brush: js">var db;
+
+// Connexion à la base de donnée
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '&lt;li&gt;Base de donnée initialisée.&lt;/li&gt;';
+
+  // affecte la connexion à la variable db
+  db = DBOpenRequest.result;
+
+  // exécute la fonction displayData() qui affiche la liste des taches présentes dans la base de donnée
+  displayData();
+
+};
+
+// ouvre une transaction en lecture/écriture prête pour l'ajout d'enregistrement.
+var transaction = db.transaction(["toDoList"], "readwrite");
+
+// affiche le succès de l'ouverture de la transaction
+transaction.oncomplete = function(event) {
+  note.innerHTML += '&lt;li&gt;Fin de transaction: les modifications sur la base de donnée sont terminées.&lt;/li&gt;';
+};
+
+transaction.onerror = function(event) {
+  note.innerHTML += '&lt;li&gt;La transaction n'a pas pu être initiée.&lt;/li&gt;';
+};
+
+// On peut maintenant accéder au magasin d'objet
+var objectStore = transaction.objectStore("toDoList");
+// etc.</pre>
+
+<p class="note">Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p>
+
+<h2 id="Spécification">Spécification</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('IndexedDB', '#widl-IDBDatabase-transaction-IDBTransaction-DOMString-sequence-DOMString--storeNames-IDBTransactionMode-mode', 'transaction()')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité avec les navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, en partie</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans workers</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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>4.4</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Disponible dans workers</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>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}</li>
+ <li>{{domxref("IDBDatabase","Débuter une connexion")}}</li>
+ <li>{{domxref("IDBTransaction","Utilisé les transactions")}}</li>
+ <li>{{domxref("IDBKeyRange","Définir l'intervalle des clés")}}</li>
+ <li>{{domxref("IDBObjectStore","Accès aux magasins d'objets")}}</li>
+ <li>{{domxref("IDBCursor","Utiliser les curseur")}}</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="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
+</ul>
diff --git a/files/fr/web/api/idbdatabase/version/index.html b/files/fr/web/api/idbdatabase/version/index.html
new file mode 100644
index 0000000000..f30b2a5ea9
--- /dev/null
+++ b/files/fr/web/api/idbdatabase/version/index.html
@@ -0,0 +1,79 @@
+---
+title: IDBDatabase.version
+slug: Web/API/IDBDatabase/version
+tags:
+  - API
+  - IDBDatabase
+  - IndexedDB
+  - Propriété
+  - Reference
+translation_of: Web/API/IDBDatabase/version
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La propriété <strong><code>version</code></strong>, rattachée à l'interface {{domxref("IDBDatabase")}}, est un entier sur 64 bits qui contient la version de la base de données à laquelle on est connecté. Lors de la création initiale d'une base de données, cet attribut a la chaîne vide.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">db.version</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un entier qui contient la version de la base de données à laquelle on est connecté.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js;highlight:[16]">// On ouvre la base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+//  On déclare des gestionnaires d'évènements pour l'ouverture
+DBOpenRequest.onerror = function(event) {
+  note.innerHTML += '&lt;li&gt;Erreur lors du chargement de la base de données.&lt;/li&gt;';
+};
+
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '&lt;li&gt;Base de données initialisée.&lt;/li&gt;';
+
+  // on stocke le résultat de l'ouverture si besoin de l'utiliser ensuite
+  db = DBOpenRequest.result;
+
+  // Cette ligne inscrira la version de la base dans la console : "4"
+  console.log(db.version);
+};</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="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', '#widl-IDBDatabase-version', 'version')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.IDBDatabase.version")}}</p>
+
+<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/idbenvironment/index.html b/files/fr/web/api/idbenvironment/index.html
new file mode 100644
index 0000000000..aabd28dfab
--- /dev/null
+++ b/files/fr/web/api/idbenvironment/index.html
@@ -0,0 +1,78 @@
+---
+title: IDBEnvironment
+slug: Web/API/IDBEnvironment
+tags:
+  - API
+  - IDBEnvironment
+  - IndexedDB
+  - Référence(2)
+translation_of: Web/API/IDBEnvironment
+---
+<div>{{APIRef}}</div>
+
+<div class="warning">
+<p><strong>Important :</strong> À partir de Firefox 52, la propriété définie dans ce <em>mixin</em> a été déplacée vers {{domxref("WindowOrWorkerGlobalScope")}} et d'autres navigateurs implémenteront également cette décision. Voir {{domxref("WindowOrWorkerGlobalScope")}} pour des informations à jour.</p>
+</div>
+
+<p>L'utilitaire <strong><code>IDBEnvironment</code></strong>, lié à l'interface <a href="/fr/docs/Web/API/API_IndexedDB">IndexedDB API</a>, contient la propriété <code>indexedDB</code> qui permet d'accéder aux fonctionnalités de l'API IndexedDB. C'est l'interface de haut niveau implémentée par les objets {{domxref("window")}} et {{domxref("Worker")}}.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("IDBEnvironment.indexedDB")}} {{readonlyInline}}</dt>
+ <dd>Cette propriété fournit un mécanisme qui permet aux applications d'accéder à des bases de données de façon asynchrone. Elle contient un objet {{domxref("IDBFactory")}}.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans le fragment de code suivant, on crée une requête asynchrone sur une base de données et on utilise le gestionnaire d'évènements <code>onsuccess</code> de la requête :</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="Spécifications">Spécifications</h2>
+
+<table class="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', '#idl-def-IDBEnvironment', 'IDBEnvironment')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div>
+
+
+<p>{{Compat("api.IDBEnvironment")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+</div>
+
+<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/idbfactory/cmp/index.html b/files/fr/web/api/idbfactory/cmp/index.html
new file mode 100644
index 0000000000..10fd12cbad
--- /dev/null
+++ b/files/fr/web/api/idbfactory/cmp/index.html
@@ -0,0 +1,189 @@
+---
+title: IDBFactory.cmp()
+slug: Web/API/IDBFactory/cmp
+tags:
+  - API
+  - IDBFactory
+  - IndexedDB
+  - Méthode
+  - Reference
+translation_of: Web/API/IDBFactory/cmp
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La méthode <strong><code>cmp()</code></strong> de l'interface {{domxref("IDBFactory")}} compare deux valeurs de clé et détermine si celles-ci sont égales et sinon, laquelle est la plus grande. Cette opération est utilisée pour l'enregistrement et le parcours des données.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<p class="note"><strong>Note :</strong> Cette méthode ne doit pas être utilisée pour comparer des valeurs JavaScript. En effet, de nombreuses valeurs JavaScript ne sont pas des valeurs valides pour représenter des clés IndexedDB (les booléens et les objets par exemple), dans ces cas, elles peuvent être traitées comme des clés égales (ainsi IndexedDB ignore les tableaux ayant des propriétés non numériques et les considère comme des tableaux vides, de sorte que les éventuels tableaux non numériques seront considérés comme égaux). Une exception est levée si l'une des valeurs n'est pas une clé valide.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var resultat = window.indexedDB.cmp(a, b);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>a</code></dt>
+ <dd>La première clé pour la comparaison.</dd>
+ <dt><code>b</code></dt>
+ <dd>La deuxième clé pour la comparaison.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un entier qui indique le résultat de la comparaison. Le tableau ci-dessous indique les valeurs possibles et leur signification :</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Valeur renvoyée</th>
+   <th scope="col">Description</th>
+  </tr>
+  <tr>
+   <td>-1</td>
+   <td>La clé 1 est plus petite que la clé 2.</td>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td>Les deux clé sont égales.</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>La clé 1 est plus grande que la clé 2.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Exceptions_levées">Exceptions levées</h3>
+
+<p>Cette méthode peut lever une exception {{domxref("DOMException")}} de type :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Exception</th>
+   <th scope="col">Description</th>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/API/DOMError"><code>DataError</code></a></td>
+   <td>L'une des clés fournies n'est pas valide.</td>
+  </tr>
+ </thead>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js;">var a = 1;
+var b = 2;
+var result = window.indexedDB.cmp(a, b);
+console.log( "Résultat de la comparaison : " + 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', '#widl-IDBFactory-cmp-short-any-first-any-second', 'cmp')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</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/idbfactory/deletedatabase/index.html b/files/fr/web/api/idbfactory/deletedatabase/index.html
new file mode 100644
index 0000000000..766e109546
--- /dev/null
+++ b/files/fr/web/api/idbfactory/deletedatabase/index.html
@@ -0,0 +1,173 @@
+---
+title: IDBFactory.deleteDatabase()
+slug: Web/API/IDBFactory/deleteDatabase
+tags:
+  - IDBFactory
+  - IndexedDB
+  - Méthode
+  - Reference
+translation_of: Web/API/IDBFactory/deleteDatabase
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La méthode <strong><code>deleteDatabase()</code></strong>, rattachée à l'interface {{domxref("IDBFactory")}}, permet de demander la suppression d'une base de données. La méthode renvoie immédiatement un objet {{domxref("IDBOpenDBRequest")}} puis effectue l'opération de suppression de façon asynchrone.</p>
+
+<p>Si la base de données est bien supprimée, un évènement <code>success</code> est déclenché sur l'objet <code>IDBOpenDBRequest</code> renvoyé et la propriété <code>result</code> vaut alors <code>undefined</code>. Si une erreur se produit lors de la suppression, ce sera un évènement <code>error</code> qui sera déclenché sur l'objet renvoyé par la méthode.</p>
+
+<div>
+<p>Lorsque la méthode <code>deleteDatabase()</code> est invoquée, toutes les autres connexions qui sont ouvertes sur cette base de données recevront un évènement <code><a href="/fr/docs/Web/Events/versionchange_indexedDB">versionchange</a></code>.</p>
+</div>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La syntaxe actuellement standard est :</p>
+
+<pre class="syntaxbox">var <em>request</em> = <em>indexedDB</em>.deleteDatabase(<em>nom</em>);</pre>
+
+<p><span class="idlInterface"><span class="idlMethod">Une version expérimentale permet de gérer des options (cf. ci-après) :</span></span></p>
+
+<pre class="syntaxbox">var <em>request</em> = <em>indexedDB</em>.deleteDatabase(nom, options);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>nom</code></dt>
+ <dd>Le nom de la base de données qu'on souhaite supprimer. Tenter de supprimer une base de données qui n'existe pas ne déclenchera pas d'exception (contrairement à la tentative de suppression d'un magasin d'objets inexistant avec {{domxref("IDBDatabase.deleteObjectStore()")}} qui déclenchera bien une exception).</dd>
+ <dt><code>options</code> {{NonStandardBadge}}</dt>
+ <dd>Dans Gecko, à partir de <a href="/fr/Firefox/Releases/26">la version 26</a>, il est possible d'inclure un paramètre pour indiquer le stockage de la base. La valeur peut être <code>permanent</code> (la valeur par défaut) ou <code>temporary</code> si on souhaite supprimer une base de données qui fait partie d'une mémoire partagée.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Cette méthode renvoie un objet {{domxref("IDBOpenDBRequest")}} sur lequel seront déclenchés les évènements relatifs à la requête.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var DBDeleteRequest = window.indexedDB.deleteDatabase("toDoList");
+
+DBDeleteRequest.onerror = function(event) {
+  console.log("Erreur lors de la suppression de la base");
+};
+
+DBDeleteRequest.onsuccess = function(event) {
+  console.log("Suppression de la base réussie");
+
+  console.log(event.result); // 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('IndexedDB', '#widl-IDBFactory-deleteDatabase-IDBOpenDBRequest-DOMString-name', 'deleteDatabase()')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("IndexedDB 2", "#dom-idbfactory-deletedatabase", "deleteDatabase()")}}</td>
+   <td>{{Spec2("IndexedDB 2")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24 (sans préfixe)</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, partial</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview Android</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>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Manipuler IndexedDB</a></li>
+ <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li>
+ <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li>
+ <li>Manipuler des curseurs : {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence pour IndexedDB : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/idbfactory/index.html b/files/fr/web/api/idbfactory/index.html
new file mode 100644
index 0000000000..3d2356a76b
--- /dev/null
+++ b/files/fr/web/api/idbfactory/index.html
@@ -0,0 +1,109 @@
+---
+title: IDBFactory
+slug: Web/API/IDBFactory
+translation_of: Web/API/IDBFactory
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>L'interface <strong><code>IDBFactory</code></strong> fait partie de l'<a href="/fr/docs/Web/API/API_IndexedDB">API IndexedDB</a> et permet aux applications d'accéder à des bases de données de façon asynchrone. L'objet qui implémente cette interface  est <code>window.indexedDB</code>. Autrement dit, on créera et on accèdera à une base de données (voire on la supprimera) directement via cet objet plutôt qu'en utilisant l'objet <code>IDBFactory</code>.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("IDBFactory.open")}}</dt>
+ <dd>Une méthode qui permet d'ouvrir une connexion à une base de données.</dd>
+ <dt>{{domxref("IDBFactory.deleteDatabase")}}</dt>
+ <dd>Une méthode qui permet de demander la suppression d'une base de données.</dd>
+ <dt>{{domxref("IDBFactory.cmp")}}</dt>
+ <dd>Une méthode qui compare deux clés et renvoie un résultat qui indique laquelle est la plus grande.</dd>
+ <dt>{{domxref("IDBFactory.databases")}}</dt>
+ <dd>Une méthode qui répertorie toutes les bases de données disponibles, y compris leurs noms et leurs versions.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on effectue une requête sur une base de données et on gère les cas de succès et d'erreur. Vous pouvez consulter un exemple complet sur <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">notre application To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">voir l'exemple en <em>live</em></a>).</p>
+
+<pre class="brush:js;highlight:[10]">var note = document.querySelector("ul");
+
+// Dans la ligne suivante, inclure les préfixes des
+// implémentations à tester
+window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
+// attention à ne pas utiliser "var indexedDB = ..."
+// si on n'est pas dans une fonction
+
+// On pourra éventuellement avoir besoin de références
+// envers les objets window.IDB* :
+window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
+window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
+// (Mozilla n'a jamais préfixé ces objets,
+// il n'est pas nécessaire d'écrire window.mozIDB*)
+
+// On ouvre la version 4 de notre base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+// On ajoute ensuite les gestionnaires d'évènements
+// pour gérer le succès ou l'échec de l'ouverture
+// de la base de données
+DBOpenRequest.onerror = function(event) {
+  note.innerHTML += '&lt;li&gt;Erreur lors du chargement de la base.&lt;/li&gt;';
+};
+
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '&lt;li&gt;Base de données initialisée.&lt;/li&gt;';
+
+  // store the result of opening the database in the db
+  // variable. This is used a lot later on, for opening
+  // transactions and suchlike.
+  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", "#idl-def-IDBFactory", "IDBFactory")}}</td>
+   <td>{{Spec2("IndexedDB")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("IndexedDB 2", "#factory-interface", "IDBFactory")}}</td>
+   <td>{{Spec2("IndexedDB 2")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("IndexedDB 3", "#factory-interface", "IDBFactory")}}</td>
+   <td>{{Spec2("IndexedDB 3")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.IDBFactory")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Manipuler IndexedDB</a></li>
+ <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li>
+ <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li>
+ <li>Manipuler des curseurs : {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence pour IndexedDB : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/idbfactory/open/index.html b/files/fr/web/api/idbfactory/open/index.html
new file mode 100644
index 0000000000..5c6ca281ea
--- /dev/null
+++ b/files/fr/web/api/idbfactory/open/index.html
@@ -0,0 +1,154 @@
+---
+title: IDBFactory.open()
+slug: Web/API/IDBFactory/open
+tags:
+  - API
+  - IDBFactory
+  - IndexedDB
+  - Méthode
+  - Reference
+translation_of: Web/API/IDBFactory/open
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La méthode <strong><code>open()</code></strong> de l'interface {{domxref("IDBFactory")}} lance une requête pour ouvrir une <a href="/fr/docs/Web/API/API_IndexedDB#Se_connecter_à_la_base_de_données">connexion à une base de données</a>.</p>
+
+<p>La méthode renvoie immédiatement un objet {{domxref("IDBOpenDBRequest")}} puis effectue l'opération d'ouverture de façon asynchrone. Si l'opération réussit, un évènement <code>success</code> sera éms sur l'objet <code>IDBOpenDBRequest</code> renvoyé par la méthode, et la propriété <code>result</code> de l'évènement aura la valeur de l'objet {{domxref("IDBDatabase")}} associé à la connexion.</p>
+
+<p>Si une erreur se produit lors de la connexion, un évènement <code>error</code> sera émis sur l'objet <code>IDBOpenDBRequest</code> renvoyé par la méthode.</p>
+
+<p>Cette méthode peut également émettre les évènements <code>upgradeneeded</code>, <code>blocked</code> ou <code>versionchange</code>.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La syntaxe standard est la suivante :</p>
+
+<pre class="syntaxbox">var <em>IDBOpenDBRequest</em> = <em>indexedDB</em>.open(<em>nom</em>);
+var <em>IDBOpenDBRequest</em> = <em>indexedDB</em>.open(<em>nom</em>, <em>version</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>nom</code></dt>
+ <dd>Le nom de la base de données qu'on souhaite ouvrir.</dd>
+ <dt><code>version</code> {{optional_inline}}</dt>
+ <dd>Paramètre optionnel qui représente la version de la base de données qu'on veut ouvrir. Si ce paramètre n'est pas fourni et que la base de données existe, une connexion sera ouverte sans changer la version de la base de données. Si ce paramètre n'est pas fourni est que la base de données n'existe pas, elle sera créée avec une version <code>1</code>.</dd>
+</dl>
+
+<h4 id="Objet_options_expérimental_de_Gecko">Objet options expérimental de Gecko</h4>
+
+<dl>
+ <dt><code>options</code> (<code>version</code> et <code>storage</code>) {{optional_inline}} {{deprecated_inline}}</dt>
+ <dd>Dans Gecko, à partir de <a href="/fr/Firefox/Releases/26">la version 26</a>, il est possible de passer en paramètre un objet <code>options</code> non standard, qui contienne le numéro de version de la base de données (équivalent donc au paramètre <code>version</code> définit ci-avant), et également une valeur <code>storage</code> qui décrit si on souhaite utiliser un stockage permanent (avec la valeur <code>persistent</code>) ou un stockage temporaire (avec la valeur <code>temporary</code>).
+ <div class="warning"><strong>Attention :</strong> l’attribut <code>storage</code> est déprécié et sera prochainement retiré de Gecko. Vous devriez utiliser {{domxref("StorageManager.persist()")}} à la place pour obtenir un stockage persistant.</div>
+ </dd>
+</dl>
+
+<div class="note">
+<p><strong>Note :</strong> Vous pouvez consulter l'article <a href="/fr/docs/Web/API/API_IndexedDB/Browser_storage_limits_and_eviction_criteria">les limites de stockage du navigateur et les critères d'éviction</a> pour en savoir plus sur les différents types de stockage disponibles et la façon dont Firefox gère les données côté client.</p>
+</div>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un objet {{domxref("IDBOpenDBRequest")}} sur lequel sont déclenchés les différents évènements liés à cette requête.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Cette méthode peut lever une {{domxref("DOMException")}} de type suivant :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Exception</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>TypeError</code></td>
+   <td>La valeur de version est zéro ou un nombre négatif ou n’est pas un nombre.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Voici un exemple d'ouverture de la base de données <code>toDoList</code> en utilisant la syntaxe standard et le paramètre <code>version</code> :</p>
+
+<pre class="brush: js">var request = window.indexedDB.open("toDoList", 4);</pre>
+
+<p>Dans le fragment de code qui suit, on effectue une requête pour ouvrir une base de données et on inclut des gestionnaires d'évènements pour gérer la réussite ou l'échec de l'ouverture. Pour consulter un exemple fonctionnel complet, vous pouvez étudier notre application <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/">cf. l'exemple <em>live</em></a>).</p>
+
+<pre class="brush:js">var note = document.querySelector("ul");
+
+window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
+// NE PAS utiliser "var indexedDB = ..." si on n’est pas dans une fonction.
+// On pourrait avoir besoin de références vers quelques objets window.IDB* :
+window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
+window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
+// Mozilla n’a jamais préfixé ces objets, donc on n’a pas besoin de window.mozIDB*
+
+// On ouvre la version 4 de la base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+// On ajoute deux gestionnaires d'évènements
+// Le premier utilisé en cas d'échec
+DBOpenRequest.onerror = function(event) {
+  note.innerHTML += '&lt;li&gt;Erreur lors du chargement de la base.&lt;/li&gt;';
+};
+
+// Et le second en cas de réussite
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '&lt;li&gt;Base de données initialisée.&lt;/li&gt;';
+
+  // On stocke le résultat de l'ouverture dans la
+  // variable db qui sera utilisée par la suite
+  // pour d'autres opérations
+  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', '#widl-IDBFactory-open-IDBOpenDBRequest-DOMString-name-unsigned-long-long-version', 'open()')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("IndexedDB 2", "#dom-idbfactory-open", "open()")}}</td>
+   <td>{{Spec2("IndexedDB 2")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">
+<p>La page de compatibilité sur cette table est générée à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data" lang="en-US">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request.</em></p>
+</div>
+
+<p>{{Compat("api.IDBFactory.open")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
+ <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li>
+ <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li>
+ <li>Manipuler des curseurs : {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence pour IndexedDB : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/idbindex/count/index.html b/files/fr/web/api/idbindex/count/index.html
new file mode 100644
index 0000000000..7571096b3e
--- /dev/null
+++ b/files/fr/web/api/idbindex/count/index.html
@@ -0,0 +1,218 @@
+---
+title: IDBIndex.count()
+slug: Web/API/IDBIndex/count
+tags:
+  - API
+  - IDBIndex
+  - IndexedDB
+  - Méthode
+  - Reference
+translation_of: Web/API/IDBIndex/count
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La méthode <strong><code>count()</code></strong>, rattachée à l'interface {{domxref("IDBIndex")}}, renvoie un objet {{domxref("IDBRequest")}} et, dans un <em>thread</em> séparé, renvoie le nombre d'enregistrements contenu dans un intervalle de clé.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>request</em> = <em>monIndex</em>.count();
+var <em>request</em> = <em>monIndex</em>.count(<em>cle</em>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>cle</code> {{optional_inline}}</dt>
+ <dd>La clé ou l'intervalle de clé qui définit les enregistrements qu'on souhaite compter.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un objet {{domxref("IDBRequest")}} sur lequel seront déclenchés les différents évènements relatifs à l'opération.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Cette méthode peut déclencher différents types d'exceptions :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Exception</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>TransactionInactiveError</code></td>
+   <td>La transaction associée à cet index est inactive.</td>
+  </tr>
+  <tr>
+   <td><code>DataError</code></td>
+   <td>
+    <p>La clé ou l'intervalle de clé fourni possède une clé invalide.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>InvalidStateError</code></td>
+   <td>L'index a été supprimé ou retiré.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on ouvre une transaction et un magasin d'objets puis on récupère l'index <code>lName</code> depuis une base de données de contacts. Ensuite, on ouvre un curseur simple sur cet index grâce à la méthode {{domxref("IDBIndex.openCursor")}} (ce qui fonctionne comme si on ouvrait un curseur sur le magasin d'objets avec {{domxref("IDBObjectStore.openCursor")}} sauf que les enregistrements sont ici triés selon l'index plutôt que selon la clé primaire).</p>
+
+<p><code>myIndex.count()</code> est alors utilisé afin de compter le nombre d'enregistrements dans l'index et le résultat de la requête est affiché dans la console au travers du gestionnaire d'évènements pour la réussite (<code>onsuccess</code>).</p>
+
+<p>Efin, on parcourt chaque enregistrement pour l'insérer dans un tableau HTML. Pour consulter un exemple fonctionnel complet, vous pouvez vous référer à notre dépôt <a href="https://github.com/mdn/IDBIndex-example">IDBIndex-example</a> (<a href="https://mdn.github.io/IDBIndex-example/">cf. la démonstration <em>live</em></a>).</p>
+
+<pre class="brush: js">function displayDataByIndex() {
+  tableEntry.innerHTML = '';
+  var transaction = db.transaction(['contactsList'], 'readonly');
+  var objectStore = transaction.objectStore('contactsList');
+
+  var myIndex = objectStore.index('lName');
+  var countRequest = myIndex.count();
+  countRequest.onsuccess = function() {
+    console.log(countRequest.result);
+  }
+
+  myIndex.openCursor().onsuccess = function(event) {
+    var cursor = event.target.result;
+    if(cursor) {
+      var tableRow = document.createElement('tr');
+      tableRow.innerHTML =   '&lt;td&gt;' + cursor.value.id + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.lName + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.fName + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.jTitle + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.company + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.eMail + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.phone + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.age + '&lt;/td&gt;';
+      tableEntry.appendChild(tableRow);
+
+      cursor.continue();
+    } else {
+      console.log('Éléments affichés.');
+    }
+  };
+};</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<dl>
+</dl>
+
+<table class="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', '#widl-IDBIndex-count-IDBRequest-any-key', 'count()')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("IndexedDB 2", "#dom-idbindex-count", "count()")}}</td>
+   <td>{{Spec2("IndexedDB 2")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24 (sans préfixe)</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, partial</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Manipuler IndexedDB</a></li>
+ <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li>
+ <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li>
+ <li>Manipuler des curseurs : {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence pour IndexedDB : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/idbindex/get/index.html b/files/fr/web/api/idbindex/get/index.html
new file mode 100644
index 0000000000..2dfbd523c7
--- /dev/null
+++ b/files/fr/web/api/idbindex/get/index.html
@@ -0,0 +1,190 @@
+---
+title: IDBIndex.get()
+slug: Web/API/IDBIndex/get
+translation_of: Web/API/IDBIndex/get
+---
+<p>{{ APIRef("IndexedDB") }}</p>
+
+<div>
+<p>La méthode <strong><code>get()</code></strong> de l'interface {{domxref("IDBIndex")}} fait une requête ({{domxref("IDBRequest")}}) pour renvoyer le premier enregistrement correspondant à la clé ou l'intervalle de clé {{domxref("IDBKeyRange","")}} du magasin d'objet suivant l'index.</p>
+</div>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var request = myIndex.get(key);</pre>
+
+<h2 id="Paramètre">Paramètre</h2>
+
+<dl>
+ <dt><code>key</code></dt>
+ <dd>la clé ou l'intervalle de clé ({{domxref("IDBKeyRange")}}) de l'enregistrement dont on cherche la valeur.</dd>
+</dl>
+
+<h2 id="Valeur_de_retour">Valeur de retour</h2>
+
+<dl>
+ <dt>Une requête ({{domxref("IDBRequest")}})</dt>
+ <dd>La propriété "result" ({{domxref("IDBRequest.result")}}) de cette requête renvoie en cas de succès le premier enregistrement correspondant à la clé ou à l'intervalle de clé. Le résultat contient l'enregistrement { key: la clé, value: un_clone_structuré_de_la_valeur }.</dd>
+</dl>
+
+<h2 id="Exceptions">Exceptions</h2>
+
+<dl>
+ <dt><code>TransactionInactiveError</code></dt>
+ <dd>Cette exception ( {{domxref("DOMException")}}) est levée si la transaction ({{domxref("IDBTransaction")}}) dont dépend l'accès ({{domxref("IDBObjectStore")}}) au magasin d'objet de cet index est inactive.</dd>
+ <dt><code>DataError</code></dt>
+ <dd>Cette exception ({{domxref("DOMException")}}) est levée si la clé ou l'intervalle de clé ({{domxref("IDBKeyRange")}}) est invalide.</dd>
+ <dt><code>InvalidStateError</code></dt>
+ <dd>Cette exception ({{domxref("DOMException")}}) est levée si l'index à été supprimé.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans l'exemple suivant on ouvre une transaction puis un magasin d'objet et enfin l'index <code>lName</code>.</p>
+
+<p>Le code <code>myIndex.get('Bungle')</code> renvoie une requête qui cherche sur l'index un enregistrement dont la clé <code>lName</code> est <code>Bungle</code>. En cas de sucés le résultat de la requête qui contient l'enregistrement est affiché sur la console.</p>
+
+<p>Finalement, on itère sur tous les enregistrements pour en insérer les données dans un tableau HTML. En utilisant la méthode {{domxref("IDBIndex.openCursor")}} qui travaille de la même façon que la méthode {{domxref("IDBObjectStore.openCursor")}} de l'accès ({{domxref("IDBObjectStore")}}) au magasin d'objet sauf que les enregistrements sont renvoyés dans l'ordre de l'index et non celui du magasin d'objet.</p>
+
+<pre class="brush:js">function displayDataByIndex() {
+  tableEntry.innerHTML = '';
+
+  //ouvre un transaction
+  var transaction = db.transaction(['contactsList'], 'readonly');
+  //accés au magasin d'objet
+  var objectStore = transaction.objectStore('contactsList');
+
+  //on récupère l'index
+  var myIndex = objectStore.index('lName');
+  //requête de recherche
+  var getRequest = myIndex.get('Bungle');
+  //en cas de succès
+  getRequest.onsuccess = function() {
+    console.log(getRequest.result);
+  }
+
+  //un curseur qui itère sur l'index
+  myIndex.openCursor().onsuccess = function(event) {
+    var cursor = event.target.result;
+    if(cursor) {
+      var tableRow = document.createElement('tr');
+      tableRow.innerHTML =   '&lt;td&gt;' + cursor.value.id + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.lName + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.fName + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.jTitle + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.company + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.eMail + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.phone + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.age + '&lt;/td&gt;';
+      tableEntry.appendChild(tableRow);
+
+      cursor.continue();
+    } else {
+      console.log('Tous les enregistrements ont été affichés.');
+    }
+  };
+};</pre>
+
+<p class="note">Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="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', '#widl-IDBIndex-get-IDBRequest-any-key', 'get()')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité avec les navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, en partie</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans workers</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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Disponible dans workers</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>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}</li>
+ <li>{{domxref("IDBDatabase","Débuter une connexion")}}</li>
+ <li>{{domxref("IDBTransaction","Utilisé les transactions")}}</li>
+ <li>{{domxref("IDBKeyRange","Définir l'intervalle des clés")}}</li>
+ <li>{{domxref("IDBObjectStore","Accès aux magasins d'objets")}}</li>
+ <li>{{domxref("IDBCursor","Utiliser les curseur")}}</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="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
+</ul>
diff --git a/files/fr/web/api/idbindex/getall/index.html b/files/fr/web/api/idbindex/getall/index.html
new file mode 100644
index 0000000000..5099371f31
--- /dev/null
+++ b/files/fr/web/api/idbindex/getall/index.html
@@ -0,0 +1,101 @@
+---
+title: IDBIndex.getAll()
+slug: Web/API/IDBIndex/getAll
+tags:
+  - API
+  - IDBIndex
+  - IndexedDB
+  - Méthode
+  - Reference
+translation_of: Web/API/IDBIndex/getAll
+---
+<p>{{ APIRef("IndexedDB") }}</p>
+
+<div>
+<p>La méthode <strong><code>getAll()</code></strong> de l'interface {{domxref("IDBIndex")}} fait une requête ({{domxref("IDBRequest")}}) qui renvoie un tableau ordonné suivant les clés, des clones structurés des enregistrements de l'index relié ({{domxref("IDBIndex")}}). On peut limiter le nombre d'enregistrements en les filtrant suivant leurs clés ou en paramétrant le compteur.</p>
+</div>
+
+<p>On peut comparer cette méthode avec une recherche par curseur. Effectivement, il est plus intéressant si l'on veut accéder aux enregistrements un par un d'utiliser un {{domxref("IDBCursor","curseur")}}, les clones structurés des valeurs seront faits un par un. Mais si l'on veut un tableau des clones structurés des valeurs il vaut mieux utiliser <code>getAll()</code>, le moteur Gecko fera les clones structurés en une seule fois.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var getAllKeysRequest = IDBIndex.getAll();
+var getAllKeysRequest = IDBIndex.getAll(query);
+var getAllKeysRequest = IDBIndex.getAll(query, count);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>query {{optional_inline}}</dt>
+ <dd>Une clé ou un intervalle de clé ({{domxref("IDBKeyRange")}}) <strong>pour filtrer</strong>, seules les valeurs des enregistrements correspondant sont renvoyées. Par défaut toutes les clones structurés des enregistrements de l'index relié sont renvoyés.</dd>
+ <dt>count {{optional_inline}}</dt>
+ <dd>Le nombre d'enregistrement <strong>maximum renvoyés</strong>. Un nombre décimal sera tronqué. Zéro annule le compteur et toutes les valeurs sont retournées.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<dl>
+ <dt>{{domxref("IDBRequest")}}</dt>
+ <dd>La propriété {{domxref("IDBRequest.result","result")}} de cette requête renvoie le tableau des clones structurés des enregistrements en cas de succès.</dd>
+</dl>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<dl>
+ <dt><code>TransactionInactiveError</code></dt>
+ <dd>Cette {{domxref("DOMException","exception")}} est levée si la transaction ({{domxref("IDBTransaction")}}) est inactive.</dd>
+ <dt><code>DataError</code></dt>
+ <dd>Cette exception ({{domxref("DOMException")}}) est levée si la clé ou l'intervalle de clé ({{domxref("IDBKeyRange")}}) est invalide.</dd>
+ <dt><code>InvalidStateError</code></dt>
+ <dd>Cette exception ({{domxref("DOMException")}}) est levée si l'index à été supprimé.</dd>
+ <dt><code>TypeError</code></dt>
+ <dd>Cette exception ({{domxref("DOMException")}}) est levée si le compteur n'est pas un nombre positif.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">//on récupère l’accès à l'index
+var myIndex = objectStore.index('index');
+//on fait une requête de recherche sur l'index
+var getAllKeyRequest = myIndex.getAllKeys();
+//si la requête réussi
+getAllKeysRequest.onsuccess = function() {
+  //on affiche le résultat sur la console
+  //~= [{key:'a',value:un_clone_structuré},{key:'2',value:un_clone_structuré},...]
+  console.log(getAllKeysRequest.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('IndexedDB2', '#dom-idbindex-getall', 'getAll()')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.IDBIndex.getAll")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}</li>
+ <li>{{domxref("IDBDatabase","Débuter une connexion")}}</li>
+ <li>{{domxref("IDBTransaction","Utilisé les transactions")}}</li>
+ <li>{{domxref("IDBKeyRange","Définir l'intervalle des clés")}}</li>
+ <li>{{domxref("IDBObjectStore","Accès aux magasins d'objets")}}</li>
+ <li>{{domxref("IDBCursor","Utiliser les curseur")}}</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="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
+</ul>
diff --git a/files/fr/web/api/idbindex/getallkeys/index.html b/files/fr/web/api/idbindex/getallkeys/index.html
new file mode 100644
index 0000000000..6495f23e44
--- /dev/null
+++ b/files/fr/web/api/idbindex/getallkeys/index.html
@@ -0,0 +1,104 @@
+---
+title: IDBIndex.getAllKeys()
+slug: Web/API/IDBIndex/getAllKeys
+tags:
+  - API
+  - IDBIndex
+  - IndexedDB
+  - Méthode
+  - Reference
+translation_of: Web/API/IDBIndex/getAllKeys
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La méthode <strong><code>getAllKeys()</code></strong>, rattachée à l'interface {{domxref("IDBIndex")}}, permet de récupérer les clés de tous les objets contenus dans l'index et de les enregistrer dans la propriété <code>result</code> de l'objet renvoyé par la méthode.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var getAllKeysRequest = <em>IDBIndex</em>.getAllKeys();
+var getAllKeysRequest = <em>IDBIndex</em>.getAllKeys(<em>requete</em>);
+var getAllKeysRequest = <em>IDBIndex</em>.getAllKeys(<em>requete</em>, <em>quantite</em>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>requete</code> {{optional_inline}}</dt>
+ <dd>Une clé ou un intervalle de clé ({{domxref("IDBKeyRange")}}) qui identifie les clés qu'on souhaite récupérer. Si cette valeur vaut {{jsxref("null")}} ou est absente, le navigateur utilisera un intervalle de clé sans limite.</dd>
+ <dt><code>quantite</code> {{optional_inline}}</dt>
+ <dd>Le nombre d'enregistrements qu'on souhaite obtenir. Si cette quantité est supérieure au nombre d'enregistrements récupérés par la requête, le navigateur ne récupèrera que le premier élément. Si elle est négative ou supérieure à <code>2<sup>32</sup>-1</code>, une exception {{jsxref("TypeError")}} sera levée.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un objet {{domxref("IDBRequest")}} sur lequel seront reçus les différents évènements rattachés à cette opération.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Cette méthode peut déclencher une des exceptions suivantes :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Exception</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>TransactionInactiveError</code></td>
+   <td>La transaction pour cet index {{domxref("IDBIndex")}} est inactive.</td>
+  </tr>
+  <tr>
+   <td><code>InvalidStateError</code></td>
+   <td>L'index {{domxref("IDBIndex")}} a été supprimé ou déplacé.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("TypeError")}}</td>
+   <td>Le paramètre <code>quantite</code> n'est pas compris entre <code>0</code> et <code>2<sup>32</sup>-1</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var myIndex = objectStore.index('index');
+var getAllKeyRequest = myIndex.getAllKeys();
+getAllKeysRequest.onsuccess = function() {
+  console.log(getAllKeysRequest.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-idbindex-getallkeys', 'getAll()')}}</td>
+   <td>{{Spec2('IndexedDB 2')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.IDBIndex.getAllKeys")}}</p>
+
+<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/idbindex/getkey/index.html b/files/fr/web/api/idbindex/getkey/index.html
new file mode 100644
index 0000000000..610ca5d29c
--- /dev/null
+++ b/files/fr/web/api/idbindex/getkey/index.html
@@ -0,0 +1,214 @@
+---
+title: IDBIndex.getKey()
+slug: Web/API/IDBIndex/getKey
+tags:
+  - API
+  - IDBIndex
+  - IndexedDB
+  - Méthode
+  - Reference
+translation_of: Web/API/IDBIndex/getKey
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La méthode <strong><code>getKey()</code></strong>, rattachée à l'interface {{domxref("IDBIndex")}}, renvoie un objet {{domxref("IDBRequest")}} et, dans un <em>thread</em> séparé, récupère la clé associée ou la clé primaire si l'argument passé à la fonction est un intervalle {{domxref("IDBKeyRange")}}.</p>
+
+<p>Si la méthode trouve une clé, ce sera alors la propriété <code>result</code> de la requête renvoyée. Seule la clé primaire de l'enregistrement est renvoyée (pour obtenir l'ensemble de l'enregistrement, on utilisera {{domxref("IDBIndex.get")}}).</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var myIndex = objectStore.index('index');
+var request = myIndex.getKey(key);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>key</code> {{optional_inline}}</dt>
+ <dd>Une clé ou un intervalle {{domxref("IDBKeyRange")}} qui identifie l'enregistrement dont on souhaite obtenir la clé. Si la valeur vaut {{jsxref("null")}} ou si elle est absente, le navigateur utilisera un intervalle de clé sans limite.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un objet {{domxref("IDBRequest")}} qui recevra les différents évènements relatifs à l'opération qui est déclenchée.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Cette méthode peut déclencher une exception. Celle-ci peut avoir l'un des types suivants :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Exception</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>TransactionInactiveError</td>
+   <td>La transaction rattachée à cet <code>IDBIndex</code> est inactive.</td>
+  </tr>
+  <tr>
+   <td><code>DataError</code></td>
+   <td>
+    <p>La clé ou l'intervalle de clés qui est fourni contient une clé invalide.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>InvalidStateError</code></td>
+   <td>L'index a été supprimé ou déplacé.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on ouvre une transaction et un magasin d'objets. Ensuite on récupère l'index <code>lName</code> sur cette base de donnée. On ouvre alors un curseur sur l'index grâce à la méthode {{domxref("IDBIndex.openCursor")}} (cela fonctionne de la même façon que {{domxref("IDBObjectStore.openCursor")}} sauf que les enregistrements sont triés selon l'index et pas selon la clé primaire).</p>
+
+<p><code>myIndex.getKey('Bungle')</code> est ensuite utilisé afin d'obtenir la clé primaire de l'enregistrement pour lequel <code>lName</code> vaut <code>Bungle</code>. Le résultat de cette requête est imprimé dans la console lorsque la fonction de rappel (<em>callback</em>) de succès est déclenché.</p>
+
+<p>Enfin, on parcourt les enregistrements pour remplir un tableau HTML. Le dépôt <a href="https://github.com/mdn/IDBIndex-example">IDBIndex-example </a>contient un exemple complet (<a href="https://mdn.github.io/IDBIndex-example/">ainsi qu'une démonstration</a>).</p>
+
+<pre class="brush: js">function displayDataByIndex() {
+  tableEntry.innerHTML = '';
+  var transaction = db.transaction(['contactsList'], 'readonly');
+  var objectStore = transaction.objectStore('contactsList');
+  var myIndex = objectStore.index('lName');
+  var getKeyRequest = myIndex.getKey('Bungle');
+  getKeyRequest.onsuccess = function() {
+    console.log(getKeyRequest.result);
+  }
+
+  myIndex.openCursor().onsuccess = function(event) {
+    var cursor = event.target.result;
+    if(cursor) {
+      var tableRow = document.createElement('tr');
+      tableRow.innerHTML =   '&lt;td&gt;' + cursor.value.id + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.lName + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.fName + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.jTitle + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.company + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.eMail + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.phone + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.age + '&lt;/td&gt;';
+      tableEntry.appendChild(tableRow);
+
+      cursor.continue();
+    } else {
+      console.log('Les éléments sont affichés.');
+    }
+  };
+};</pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="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', '#widl-IDBIndex-getKey-IDBRequest-any-key', 'getKey()')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, partial</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview 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>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</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>L'exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">notifications de trucs à faire</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">voir la démonstration</a>)</li>
+</ul>
diff --git a/files/fr/web/api/idbindex/index.html b/files/fr/web/api/idbindex/index.html
new file mode 100644
index 0000000000..cd228c60b7
--- /dev/null
+++ b/files/fr/web/api/idbindex/index.html
@@ -0,0 +1,278 @@
+---
+title: IDBIndex
+slug: Web/API/IDBIndex
+tags:
+  - API
+  - Database
+  - IDBIndex
+  - IndexedDB
+  - Interface
+  - Reference
+  - Storage
+  - TopicStub
+translation_of: Web/API/IDBIndex
+---
+<p>{{APIRef("IndexedDB")}}</p>
+
+<div>
+<p>L'interface <strong><code>IDBIndex</code></strong>de l'{{domxref("IndexedDB_API","API IndexedDB")}} est un accès à un index d'un magasins d'objet. Un index permet de trier les enregistrements d'un magasin d'objet sur une autre clé que la clé primaire.</p>
+
+<p>Un index contient des enregistrements persistent. Chaque enregistrement est composé d'une clé ( la valeur du chemin de clé) et d'une valeur (la clé primaire de l'enregistrement dans le magasin d'objet). Les enregistrements de l'index se mettent automatiquement à jour lorsque un enregistrement du magasin d'objet est ajouté , mise à jour ou supprimé. Chaque enregistrement de l'index ne peut référer qu'a un enregistrement du magasin d'objet. Un magasin d'objet peut avoir plusieurs index et lorsque le magasin d'objet change tout les index sont mis à jour automatiquement.</p>
+
+<p>On peut retrouver les enregistrement sur une partie des clés, voir {{domxref("IDBKeyRange","intervalle de clé")}}.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p>Hérite de: <a href="/en/DOM/EventTarget" title="en/DOM/EventTarget">EventTarget</a></p>
+
+<dl>
+ <dt>{{domxref("IDBIndex.count()")}}</dt>
+ <dd>Fait un {{domxref("IDBRequest","requête")}} sur l'index. La requête compte le nombre d'enregistrements dans cet index ou sur l'{{domxref("IDBKeyRange","intervalle de clé")}} passé en paramètre.</dd>
+ <dt>{{domxref("IDBIndex.get()")}}</dt>
+ <dd>Fait une {{domxref("IDBRequest","requête")}} pour renvoyer le premier enregistrement correspondant à la clé ou l'{{domxref("IDBKeyRange","")}} du magasin d'objet suivant l'index.</dd>
+ <dt>{{domxref("IDBIndex.getKey()")}}</dt>
+ <dd>Fait une {{domxref("IDBRequest","requête")}} pour renvoyer la clé primaire correspondant à la clé ou à l'{{domxref("IDBKeyRange","intervalle de clé")}} de l'index. Si une clé est trouvé le résultat de la requête contiendra seulement la clé primaire de l'enregistrement et non l'enregistrement comme le fait {{domxref("IDBIndex.get")}}.</dd>
+ <dt>{{domxref("IDBIndex.getAll()")}}</dt>
+ <dd>Fait une {{domxref("IDBRequest","requête")}} qui renvoie un tableau ordonné suivant les clés, des clones structurés des enregistrements de l'{{domxref("IDBIndex","index relié")}}. On peut limité le nombre d'enregistrements en les filtrants suivant leurs clés ou en paramétrant le compteur.</dd>
+ <dt>{{domxref("IDBIndex.getAllKeys()")}}</dt>
+ <dd>Ferrais une {{domxref("IDBRequest","requête")}} qui renverrait la liste de toutes les clés des enregistrements de l'index. On pourrait limiter le nombre d'enregistrements en les filtrants suivant leurs clés ou en paramétrant le compteur.</dd>
+ <dt>{{domxref("IDBIndex.openCursor()")}}</dt>
+ <dd>Fait une {{domxref("IDBRequest","requête")}} récursive suivant un {{domxref("IDBCursorWithValue","curseur avec valeur")}} qui itère l'index {{domxref("IDBObjectStore","relié")}} sur l'{{domxref("IDBKeyRange","intervalle de clé")}} spécifié.</dd>
+ <dt>{{domxref("IDBIndex.openKeyCursor()")}}</dt>
+ <dd>Fait une {{domxref("IDBRequest","requête")}} récursive suivant un {{domxref("IDBCursor","curseur")}} qui itère l'index {{domxref("IDBObjectStore","relié")}} sur l'{{domxref("IDBKeyRange","intervalle de clé")}} spécifié.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("IDBIndex.isAutoLocale")}} {{readonlyInline}} {{ Non-Standard_inline() }}</dt>
+ <dd>Renvoie un {{domxref("Boolean","booléen")}} indiquant si la valeur de <code>locale</code> à été paramétré sur <code>auto</code> lors de la mise en place de l'index (voir les paramètres <code>{{domxref("IDBObjectStore.createIndex")}}</code>).</dd>
+ <dt>{{domxref("IDBIndex.locale")}} {{readonlyInline}} {{ Non-Standard_inline() }}</dt>
+ <dd>Renvoie la localisation de l'index (par exemple fr, ou <code>en-US</code>) <code>si la localisation à été spécifie lors de la mise en place de l'index</code> (voir les paramètres {{domxref("IDBObjectStore.createIndex")}}).</dd>
+ <dt>{{domxref("IDBIndex.name")}} {{readonlyInline}}</dt>
+ <dd>Renvoie le nom de l'index.</dd>
+ <dt>{{domxref("IDBIndex.objectStore")}} {{readonlyInline}}</dt>
+ <dd>Renvoie un {{domxref("IDBObjectStore","accès au magasin d'objet")}} que référence l'index.</dd>
+ <dt>{{domxref("IDBIndex.keyPath")}} {{readonlyInline}}</dt>
+ <dd>Renvoie le chemin de clé de l'index. Si l'index n'est pas <a href="https://developer.mozilla.org/fr/IndexedDB/Index#gloss_auto-populated" title="en/IndexedDB/Index#gloss auto-populated">automatiquement mise à jour</a> la propriété vaux <code>null</code>.</dd>
+ <dt>{{domxref("IDBIndex.multiEntry")}} {{readonlyInline}}</dt>
+ <dd>Renvoie un {{domxref("Boolean","booléen")}} qui indique comment l'index gère le chemin de clé si c'est un tableau.</dd>
+ <dt>{{domxref("IDBIndex.unique")}} {{readonlyInline}}</dt>
+ <dd>Renvoie un {{domxref("Boolean","booléen")}} qui indique l'index interdit la duplication d'enregistrement sur sa clé.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans l'exemple suivant on ouvre une transaction puis un magasin d'objet et enfin l'index <code>lName</code>.</p>
+
+<p>Finalement, On itère sur tous les enregistrements pour en insérer les données dans un tableau HTML. En utilisant la méthode {{domxref("IDBIndex.openCursor")}} qui travaille de la même façon que la méthode {{domxref("IDBObjectStore.openCursor")}} de l'{{domxref("IDBObjectStore","accès")}} au magasin d'objet sauf que les enregistrements sont renvoyés dans l'ordre de l'index et non celui du magasin d'objet.</p>
+
+<pre class="brush:js notranslate">function displayDataByIndex() {
+  tableEntry.innerHTML = '';
+
+  //ouvre un transaction
+  var transaction = db.transaction(['contactsList'], 'readonly');
+  //accés au magasin d'objet
+  var objectStore = transaction.objectStore('contactsList');
+
+  //on récupère l'index
+  var myIndex = objectStore.index('lName');
+
+  //un curseur qui itère sur l'index
+  var request = myIndex.openCursor();
+  request.onsuccess = function(event) {
+    var cursor = request.result;
+    if(cursor) {
+      var tableRow = document.createElement('tr');
+      tableRow.innerHTML =   '&lt;td&gt;' + cursor.value.id + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.lName + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.fName + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.jTitle + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.company + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.eMail + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.phone + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.age + '&lt;/td&gt;';
+      tableEntry.appendChild(tableRow);
+
+      cursor.continue();
+    } else {
+      console.log('Tous les enregistrements ont été affichés.');
+    }
+  };
+};</pre>
+
+<p class="note">Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p>
+
+<h2 id="Spécification">Spécification</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('IndexedDB', '#idl-def-IDBIndex', 'IDBIndex')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité avec les navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatChrome(23.0)}}{{property_prefix("webkit")}}<br>
+    {{CompatChrome(24.0)}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, en partie</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td><code>count()</code></td>
+   <td>{{CompatChrome(23.0)}}</td>
+   <td>{{ CompatGeckoDesktop("22.0") }}</td>
+   <td>10, en partie</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td><code>getAll()</code> et <code>getAllKeys()</code></td>
+   <td>{{CompatChrome(48.0)}}</td>
+   <td>{{ CompatGeckoDesktop("24.0") }}<br>
+    behind <code>dom.indexedDB.experimental</code>  pref</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>isAutoLocale</code> et <code>locale</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>
+    <p>{{CompatGeckoDesktop("43.0")}}<br>
+     behind <code>dom.indexedDB.experimental</code>  pref</p>
+   </td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("22.0") }}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>count()</code></td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("22.0") }}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>getAll()</code> et <code>getAllKeys()</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatChrome(48.0)}}</td>
+   <td>{{ CompatGeckoMobile("24.0") }}<br>
+    avec <code>dom.indexedDB.experimental</code>  activer</td>
+   <td>1.1 avec<br>
+    <code>dom.indexedDB.experimental</code>  avtivé</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatChrome(48.0)}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans 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>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>isAutoLocale</code> et <code>locale</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo()}}</td>
+   <td>{{CompatGeckoMobile("43.0")}}<br>
+    avec <code>dom.indexedDB.experimental</code>  activé</td>
+   <td>2.5<br>
+    avec <code>dom.indexedDB.experimental</code>  activé</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}</li>
+ <li>{{domxref("IDBDatabase","Débuter une connexion")}}</li>
+ <li>{{domxref("IDBTransaction","Utilisé les transactions")}}</li>
+ <li>{{domxref("IDBKeyRange","Définir l'intervalle des clés")}}</li>
+ <li>{{domxref("IDBObjectStore","Accès aux magasins d'objets")}}</li>
+ <li>{{domxref("IDBCursor","Utiliser les curseur")}}</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="http://mdn.github.io/to-do-notifications/">voir l'exemple en direct</a>.)</li>
+</ul>
+</div>
diff --git a/files/fr/web/api/idbindex/isautolocale/index.html b/files/fr/web/api/idbindex/isautolocale/index.html
new file mode 100644
index 0000000000..330dde93b9
--- /dev/null
+++ b/files/fr/web/api/idbindex/isautolocale/index.html
@@ -0,0 +1,81 @@
+---
+title: IDBIndex.isAutoLocale
+slug: Web/API/IDBIndex/isAutoLocale
+tags:
+  - API
+  - Experimental
+  - IDBIndex
+  - IndexedDB
+  - Propriété
+  - Reference
+translation_of: Web/API/IDBIndex/isAutoLocale
+---
+<div>{{APIRef("IndexedDB")}}{{SeeCompatTable}}</div>
+
+<p>La propriété en lecture seule <strong><code>isAutoLocale</code></strong>, rattachée à l'interface {{domxref("IDBIndex")}}, est un booléen qui indique si la valeur <code>locale</code> de l'index vaut <code>auto</code> (cf. <a href="/fr/docs/Web/API/IDBObjectStore/createIndex#Paramètres">les paramètres optionnels de <code>createIndex()</code></a>).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var monIndex = objectStore.index('index');
+console.log(monIndex.isAutoLocale);</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un booléen.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, on ouvre une transaction et un magasin d'objet puis on récupère l'index <code>lName</code> depuis une base de données de contact. Ensuite, on ouvre un curseur simple sur l'index grâce à la méthode {{domxref("IDBIndex.openCursor")}} — cela fonctionne comme si on avait directement ouvert un curseur sur un magasin d'objet avec {{domxref("IDBObjectStore.openCursor")}} mais ici les enregistrements sont triés selon l'index et pas selon la clé primaire.</p>
+
+<p>La valeur <code>isAutoLocale</code> est affichée dans la console.</p>
+
+<pre class="brush:js">function displayDataByIndex() {
+  tableEntry.innerHTML = '';
+  var transaction = db.transaction(['contactsList'], 'readonly');
+  var objectStore = transaction.objectStore('contactsList');
+
+  var myIndex = objectStore.index('lName');
+  console.log(myIndex.isAutoLocale);
+
+  myIndex.openCursor().onsuccess = function(event) {
+    var cursor = event.target.result;
+    if(cursor) {
+      var tableRow = document.createElement('tr');
+      tableRow.innerHTML =   '&lt;td&gt;' + cursor.value.id + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.lName + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.fName + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.jTitle + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.company + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.eMail + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.phone + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.age + '&lt;/td&gt;';
+      tableEntry.appendChild(tableRow);
+
+      cursor.continue();
+    } else {
+      console.log('Les éléments ont été affichés.');
+    }
+  };
+};</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Actuellement, cette propriété ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.IDBIndex.isAutoLocale")}}</p>
+
+<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/idbindex/keypath/index.html b/files/fr/web/api/idbindex/keypath/index.html
new file mode 100644
index 0000000000..e2d289cfd0
--- /dev/null
+++ b/files/fr/web/api/idbindex/keypath/index.html
@@ -0,0 +1,165 @@
+---
+title: IDBIndex.keyPath
+slug: Web/API/IDBIndex/keyPath
+translation_of: Web/API/IDBIndex/keyPath
+---
+<p>{{ APIRef("IndexedDB") }}</p>
+
+<div>
+<p>La propriété <strong><code>keyPath</code></strong> de l'interface {{domxref("IDBIndex")}} renvoie le <a href="/fr/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB#gloss_keypath" title="en/IndexedDB#gloss key path">chemin de clé</a> de l'index. Si l'index n'est pas <a href="https://developer.mozilla.org/fr/IndexedDB/Index#gloss_auto-populated" title="en/IndexedDB/Index#gloss auto-populated">automatiquement mise à jour</a> la propriété vaux <code>null</code>.</p>
+
+<p>{{AvailableInWorkers}}</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var keyPath = myIndex.keyPath</pre>
+
+<h2 id="Valeur">Valeur</h2>
+
+<p>Tous types de valeur pouvant être utilisés comme chemin de clé.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans l'exemple suivant on ouvre une transaction puis un magasin d'objet et enfin l'index <code>lName</code>.</p>
+
+<p>Le chemin de clé de l'index est affiché sur la console (ici: <code>lName</code>).</p>
+
+<p>Finalement, On itère sur tous les enregistrements pour en insérer les données dans un tableau HTML. En utilisant la méthode {{domxref("IDBIndex.openCursor")}} qui travaille de la même façon que la méthode {{domxref("IDBObjectStore.openCursor")}} de l'{{domxref("IDBObjectStore","accès")}} au magasin d'objet sauf que les enregistrements sont renvoyés dans l'ordre de l'index et non celui du magasin d'objet.</p>
+
+<pre class="brush:js">function displayDataByIndex() {
+  tableEntry.innerHTML = '';
+
+  //ouvre un transaction
+  var transaction = db.transaction(['contactsList'], 'readonly');
+  //accés au magasin d'objet
+  var objectStore = transaction.objectStore('contactsList');
+
+  //on récupère l'index
+  var myIndex = objectStore.index('lName');
+  //on affiche le chemin de clé de l'index sur la console
+  console.log(myIndex.keyPath);
+
+  //un curseur qui itère sur l'index
+  myIndex.openCursor().onsuccess = function(event) {
+    var cursor = event.target.result;
+    if(cursor) {
+      var tableRow = document.createElement('tr');
+      tableRow.innerHTML =   '&lt;td&gt;' + cursor.value.id + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.lName + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.fName + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.jTitle + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.company + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.eMail + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.phone + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.age + '&lt;/td&gt;';
+      tableEntry.appendChild(tableRow);
+
+      cursor.continue();
+    } else {
+      console.log('Tous les enregistrements ont été affichés.');
+    }
+  };
+};</pre>
+
+<p class="note">Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p>
+
+<h2 id="Spécification">Spécification</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('IndexedDB', '#widl-IDBIndex-keyPath', 'keyPath')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité avec les navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, en partie</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans workers</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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>4.4</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Disponible dans workers</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>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}</li>
+ <li>{{domxref("IDBDatabase","Débuter une connexion")}}</li>
+ <li>{{domxref("IDBTransaction","Utilisé les transactions")}}</li>
+ <li>{{domxref("IDBKeyRange","Définir l'intervalle des clés")}}</li>
+ <li>{{domxref("IDBObjectStore","Accès aux magasins d'objets")}}</li>
+ <li>{{domxref("IDBCursor","Utiliser les curseur")}}</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="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
+</ul>
diff --git a/files/fr/web/api/idbindex/locale/index.html b/files/fr/web/api/idbindex/locale/index.html
new file mode 100644
index 0000000000..722e8e547d
--- /dev/null
+++ b/files/fr/web/api/idbindex/locale/index.html
@@ -0,0 +1,133 @@
+---
+title: IDBIndex.locale
+slug: Web/API/IDBIndex/locale
+translation_of: Web/API/IDBIndex/locale
+---
+<div>{{APIRef("IndexedDB")}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>locale</code></strong> de l'interface {{domxref("IDBIndex")}} renvoie la localisation de l'index (par exemple fr, ou <code>en-US</code>) <code>si la localisation à été spécifie lors de la mise en place de l'index</code> (voir les paramètres {{domxref("IDBObjectStore.createIndex")}}).</p>
+
+<p>{{note("Cette propriété renvoie la localisation utilisé par l'index. En d'autres termes, elle ne renverras jamais 'auto'.")}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var indexLocalisation = myIndex.locale;</pre>
+
+<h2 id="Valeur">Valeur</h2>
+
+<p>Une {{domxref("DOMString","chaîne de caractère")}} représentant la localisation courante de l'index.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans l'exemple suivant on ouvre une transaction puis un magasin d'objet et enfin l'index <code>lName</code>.</p>
+
+<p>La valeur de la propriété <code>Locale</code> est affichée sur la console.</p>
+
+<p>Finalement, On itère sur tous les enregistrements pour en insérer les données dans un tableau HTML. En utilisant la méthode {{domxref("IDBIndex.openCursor")}} qui travaille de la même façon que la méthode {{domxref("IDBObjectStore.openCursor")}} de l'{{domxref("IDBObjectStore","accès")}} au magasin d'objet sauf que les enregistrements sont renvoyés dans l'ordre de l'index et non celui du magasin d'objet.</p>
+
+<pre class="brush:js">function displayDataByIndex() {
+  tableEntry.innerHTML = '';
+
+  //ouvre un transaction
+  var transaction = db.transaction(['contactsList'], 'readonly');
+  //accés au magasin d'objet
+  var objectStore = transaction.objectStore('contactsList');
+
+  //on récupère l'index
+  var myIndex = objectStore.index('lName');
+  //on affiche la propriété locale sur la console
+  console.log(myIndex.locale);
+
+  //un curseur qui itère sur l'index
+  myIndex.openCursor().onsuccess = function(event) {
+    var cursor = event.target.result;
+    if(cursor) {
+      var tableRow = document.createElement('tr');
+      tableRow.innerHTML =   '&lt;td&gt;' + cursor.value.id + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.lName + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.fName + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.jTitle + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.company + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.eMail + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.phone + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.age + '&lt;/td&gt;';
+      tableEntry.appendChild(tableRow);
+
+      cursor.continue();
+    } else {
+      console.log('Tous les enregistrements ont été affichés.');
+    }
+  };
+};</pre>
+
+<p class="note">Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<p>Ne fait actuellement partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_avec_les_navigateurs">Compatibilité avec les navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("43.0")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("43.0")}}<sup>[1]</sup></td>
+   <td>2.5<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Pour accédé à cette fonctionnalité il faut activé <code>dom.indexedDB.experimental</code> dans <code>about:config</code>.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}</li>
+ <li>{{domxref("IDBDatabase","Débuter une connexion")}}</li>
+ <li>{{domxref("IDBTransaction","Utilisé les transactions")}}</li>
+ <li>{{domxref("IDBKeyRange","Définir l'intervalle des clés")}}</li>
+ <li>{{domxref("IDBObjectStore","Accès aux magasins d'objets")}}</li>
+ <li>{{domxref("IDBCursor","Utiliser les curseur")}}</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="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
+</ul>
diff --git a/files/fr/web/api/idbindex/multientry/index.html b/files/fr/web/api/idbindex/multientry/index.html
new file mode 100644
index 0000000000..75ab4b0a93
--- /dev/null
+++ b/files/fr/web/api/idbindex/multientry/index.html
@@ -0,0 +1,167 @@
+---
+title: IDBIndex.multiEntry
+slug: Web/API/IDBIndex/multiEntry
+tags:
+  - API
+  - IDBIndex
+  - IndexedDB
+  - Propriété
+  - Reference
+translation_of: Web/API/IDBIndex/multiEntry
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La propriété <strong><code>multiEntry</code></strong>, rattachée à l'interface {{domxref("IDBIndex")}}, est un booléen qui indique le comportement de l'index lorsque le résultat de l'évaluation d'un chemin de clé renvoie un tableau.</p>
+
+<p>Ce comportement est paramétré au moment où l'index est créé avec la méthode {{domxref("IDBObjectStore.createIndex")}}. Cette méthode permet d'utiliser un paramètre facultatif <code>options</code> pour définir la propriété <code>multiEntry</code> avec <code>true</code>/<code>false</code>.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var monIndex = objectStore.index('index');
+console.log(monIndex.multiEntry);</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un booléen. S'il vaut <code>true</code>, cela signifie qu'il y a autant d'enregistrement que de valeurs dans le tableau renvoyé lors de l'évaluation du chemin (les clés des enregistrements sont les valeurs du tableau). S'il vaut <code>false</code>, cela signifie qu'il n'y aura qu'un seul enregistrement ajouté et que la clé sera le tableau.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on ouvre une transaction sur un magasin d'objets et on récupère l'index <code>lName</code> depuis la base de données des contacts. Ensuite, on ouvre un curseur simple sur l'index grâce à la méthode {{domxref("IDBIndex.openCursor")}} (cela fonctionne comme si on avait directement ouvert un curseur sur le magasin d'objets avec {{domxref("IDBObjectStore.openCursor")}} mais les enregistrements sont ici renvoyés en étant triés selon l'index et non selon la clé primaire.</p>
+
+<p>La propriété <code>multiEntry</code> est affichée dans la console. Dans cet exemple, elle a la valeur <code>false</code>.</p>
+
+<p>Enfin, on parcourt chacun des enregistrements pour insérer les données dans un tableau HTML. Pour consulter un exemple complet, vous pouvez vous référer à <a href="https://github.com/mdn/IDBIndex-example">notre dépôt IDBIndex-example</a> (<a href="https://mdn.github.io/IDBIndex-example/">voir également la démo <em>live</em></a>).</p>
+
+<pre class="brush: js">function displayDataByIndex() {
+  tableEntry.innerHTML = '';
+  var transaction = db.transaction(['contactsList'], 'readonly');
+  var objectStore = transaction.objectStore('contactsList');
+
+  var myIndex = objectStore.index('lName');
+  console.log(myIndex.multiEntry);
+
+  myIndex.openCursor().onsuccess = function(event) {
+    var cursor = event.target.result;
+    if(cursor) {
+      var tableRow = document.createElement('tr');
+      tableRow.innerHTML =   '&lt;td&gt;' + cursor.value.id + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.lName + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.fName + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.jTitle + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.company + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.eMail + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.phone + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.age + '&lt;/td&gt;';
+      tableEntry.appendChild(tableRow);
+
+      cursor.continue();
+    } else {
+      console.log('Les éléments ont été affiché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('IndexedDB', '#widl-IDBIndex-multiEntry', 'multiEntry')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</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/idbindex/name/index.html b/files/fr/web/api/idbindex/name/index.html
new file mode 100644
index 0000000000..006d141ffa
--- /dev/null
+++ b/files/fr/web/api/idbindex/name/index.html
@@ -0,0 +1,208 @@
+---
+title: IDBIndex.name
+slug: Web/API/IDBIndex/name
+tags:
+  - API
+  - IDBIndex
+  - IndexedDB
+  - Propriété
+  - Reference
+translation_of: Web/API/IDBIndex/name
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La propriété <strong><code>name</code></strong>, rattachée à l'interface {{domxref("IDBIndex")}}, contient une chaîne de caractères qui permet de désigner l'index courant.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>indexName</em> = <em>IDBIndex</em>.name;
+<em>IDBIndex</em>.name = <em>indexName</em>;</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une chaîne de caractères qui fournit le nom à l'index.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Différentes exceptions peuvent être déclenchées lorsqu'on souhaite modifier le nom d'un index.</p>
+
+<dl>
+ <dt><code>InvalidStateError</code></dt>
+ <dd>L'index ou le magasin d'objets a été supprimé ou la transaction courante n'est pas une transaction de montée de niveau. Le renommage des index est uniquement possible lors des transactions de montée de niveau (c'est-à-dire quand le mode de la transaction est <code>"versionchange"</code>).</dd>
+ <dt><code>TransactionInactiveError</code></dt>
+ <dd>La transaction courante n'est pas active.</dd>
+ <dt><code>ConstraintError</code></dt>
+ <dd>Il existe déjà un index avec ce nom.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on ouvre une transaction sur un magasin d'objets pour lequel on récupère l'index <code>lName</code>. Ensuite, on ouvre un curseur sur cet index avec la méthode {{domxref("IDBIndex.openCursor()")}} (celle-ci fonctionne comme la méthode {{domxref("IDBObjectStore.openCursor", "openCursor()")}} qui s'utilise sur les magasins d'objets mais ici, les enregistrements sont triés selon l'index et pas selon la clé primaire).</p>
+
+<p>Le nom de l'index est affiché dans la console grâce à la propriété (ici, le nom sera <code>"lName"</code>).</p>
+
+<p>Enfin, on parcourt chacun des enregistrements et on ajoute les données dans un tableau HTML.</p>
+
+<pre class="brush: js">function displayDataByIndex() {
+  tableEntry.innerHTML = '';
+  var transaction = db.transaction(['contactsList'], 'readonly');
+  var objectStore = transaction.objectStore('contactsList');
+
+  var myIndex = objectStore.index('lName');
+  console.log(myIndex.name);
+
+  myIndex.openCursor().onsuccess = function(event) {
+    var cursor = event.target.result;
+    if(cursor) {
+      var tableRow = document.createElement('tr');
+      tableRow.innerHTML =   '&lt;td&gt;' + cursor.value.id + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.lName + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.fName + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.jTitle + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.company + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.eMail + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.phone + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.age + '&lt;/td&gt;';
+      tableEntry.appendChild(tableRow);
+
+      cursor.continue();
+    } else {
+      console.log('Les éléments sont affichés.');
+    }
+  };
+};</pre>
+
+<div class="note">
+<p><strong>Note :</strong> pour un exemple fonctionnel complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">application To-do</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple</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('IndexedDB', '#widl-IDBIndex-name', 'name')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Possibilité de renommer avec le mutateur lié à <code>name</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(49)}}</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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Possibilité de renommer avec le mutateur lié à <code>name</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(49)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</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/idbindex/objectstore/index.html b/files/fr/web/api/idbindex/objectstore/index.html
new file mode 100644
index 0000000000..6f9a8f95f0
--- /dev/null
+++ b/files/fr/web/api/idbindex/objectstore/index.html
@@ -0,0 +1,167 @@
+---
+title: IDBIndex.objectStore
+slug: Web/API/IDBIndex/objectStore
+translation_of: Web/API/IDBIndex/objectStore
+---
+<p>{{ APIRef("IndexedDB") }}</p>
+
+<div>
+<p>La propriètè <strong><code>objectStore</code></strong> de l'interface {{domxref("IDBIndex")}} renvoie un accès au magasin d'objet que référence l'index.</p>
+
+<p>{{AvailableInWorkers}}</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js" style="font-size: 14px;">var indexObjectStore = myIndex.objectStore;</pre>
+
+<h2 id="Valeur">Valeur</h2>
+
+<p>Un {{ domxref("IDBObjectStore","accès au magasin d'objet") }}.</p>
+
+<h2 id="Example">Example</h2>
+
+<p>Dans l'exemple suivant on ouvre une transaction puis un magasin d'objet et enfin l'index <code>lName</code>.</p>
+
+<p>Le magasin d'objet référencé par l'index est afficher sur la console, quelque chose ressemblant à:</p>
+
+<pre>IDBObjectStore { name: "contactsList", keyPath: "id", indexNames: DOMStringList[7], transaction: IDBTransaction, autoIncrement: false }</pre>
+
+<p>Finalement, On itère sur tous les enregistrements pour en insérer les données dans un tableau HTML. En utilisant la méthode {{domxref("IDBIndex.openCursor")}} qui travaille de la même façon que la méthode {{domxref("IDBObjectStore.openCursor")}} de l'{{domxref("IDBObjectStore","accès")}} au magasin d'objet sauf que les enregistrements sont renvoyés dans l'ordre de l'index et non celui du magasin d'objet.</p>
+
+<pre class="brush:js">function displayDataByIndex() {
+  tableEntry.innerHTML = '';
+
+  //ouvre un transaction
+  var transaction = db.transaction(['contactsList'], 'readonly');
+  //accés au magasin d'objet
+  var objectStore = transaction.objectStore('contactsList');
+
+  //on récupère l'index
+  var myIndex = objectStore.index('lName');
+  //on affiche le magasin d'objet référencé locale sur la console
+  console.log(myIndex.objectStore);
+
+  //un curseur qui itère sur l'index
+  myIndex.openCursor().onsuccess = function(event) {
+    var cursor = event.target.result;
+    if(cursor) {
+      var tableRow = document.createElement('tr');
+      tableRow.innerHTML =   '&lt;td&gt;' + cursor.value.id + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.lName + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.fName + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.jTitle + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.company + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.eMail + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.phone + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.age + '&lt;/td&gt;';
+      tableEntry.appendChild(tableRow);
+
+      cursor.continue();
+    } else {
+      console.log('Tous les enregistrements ont été affichés.');
+    }
+  };
+};</pre>
+
+<p class="note">Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p>
+
+<h2 id="Spécification">Spécification</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('IndexedDB', '#widl-IDBIndex-objectStore', 'objectStore')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité avec les navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, en partie</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans workers</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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>4.4</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Disponible dans workers</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>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}</li>
+ <li>{{domxref("IDBDatabase","Débuter une connexion")}}</li>
+ <li>{{domxref("IDBTransaction","Utilisé les transactions")}}</li>
+ <li>{{domxref("IDBKeyRange","Définir l'intervalle des clés")}}</li>
+ <li>{{domxref("IDBObjectStore","Accès aux magasins d'objets")}}</li>
+ <li>{{domxref("IDBCursor","Utiliser les curseur")}}</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="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
+</ul>
diff --git a/files/fr/web/api/idbindex/opencursor/index.html b/files/fr/web/api/idbindex/opencursor/index.html
new file mode 100644
index 0000000000..71bace93a3
--- /dev/null
+++ b/files/fr/web/api/idbindex/opencursor/index.html
@@ -0,0 +1,230 @@
+---
+title: IDBIndex.openCursor()
+slug: Web/API/IDBIndex/openCursor
+tags:
+  - API
+  - IDBIndex
+  - IndexedDB
+  - Méthode
+  - Reference
+  - openCursor
+translation_of: Web/API/IDBIndex/openCursor
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La méthode <strong><code>openCursor()</code></strong> de l'interface {{domxref("IDBIndex")}} renvoie un objet {{domxref("IDBRequest")}} et, dans un <em>thread</em> séparé, crée <a href="/fr/docs/Web/API/IDBCursor">un curseur</a> sur l'intervalle de clé fourni en argument.</p>
+
+<p>La méthode la positionne le curseur de façon approprié, selon la direction indiquée :</p>
+
+<ul>
+ <li>Si aucun intervalle de clé n'est spécifié ou qu'il vaut {{jsxref("null")}}, l'intervalle résultant contiendra l'ensemble des enregistrements</li>
+ <li>L'évènement <code>success</code> est toujours déclenché :
+  <ul>
+   <li>Si un enregistrement est trouvé la propriété <code>result</code> de l'évènement contient le nouvel objet {{domxref("IDBCursor")}} et la valeur (<code>value</code>) de ce curseur est un clône de la valeur référencée</li>
+   <li>Si aucun enregistrement n'est trouvé la propriété <code>result</code> de l'évènement vaudra <code>null</code>.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var request = myIndex.openCursor(keyRange,direction);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>keyRange</code> {{optional_inline}}</dt>
+ <dd>L'intervalle de clé ({{domxref("IDBKeyRange")}}) sur lequel se déplace le curseur. Si aucun argument n'est passé, la valeur par défaut sera un intervalle qui englobe tous les enregistrements du magasin d'objets.</dd>
+ <dt><code>direction</code> {{optional_inline}}</dt>
+ <dd>La direction dans laquelle se déplace le curseur (la propriété <code>direction</code> de l'objet {{domxref("IDBCursor.direction")}}). La valeur par défaut est <code>"next"</code>.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un objet {{domxref("IDBRequest")}} sur lequel les évènements associés à l'opération seront déclenchés.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Cette méthode peut déclencher une {{domxref("DOMException")}} dont le type peut être l'un des suivant :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Type d'exception</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>TransactionInactiveError</td>
+   <td>La transaction pour cet index est inactive.</td>
+  </tr>
+  <tr>
+   <td><code>TypeError</code></td>
+   <td>La valeur du paramètre pour la direction est invalide.</td>
+  </tr>
+  <tr>
+   <td>DataError</td>
+   <td>
+    <p>La clé ou l'intervalle de clé fourni contient une clé invalide.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>InvalidStateError</code></td>
+   <td>L'index a été supprimé ou déplacé.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans l'exemple suivant, on ouvre une transaction puis un magasin d'objet et enfin l'index <code>lName</code>.</p>
+
+<p>Ensuite, on parcourt les enregistrements pour insérer les données dans un tableau HTML. En utilisant la méthode {{domxref("IDBIndex.openCursor")}} qui travaille de la même façon que la méthode {{domxref("IDBObjectStore.openCursor")}} de l'{{domxref("IDBObjectStore","accès")}} au magasin d'objet sauf que les enregistrements sont renvoyés dans l'ordre de l'index et non celui du magasin d'objet.</p>
+
+<pre class="brush:js">function displayDataByIndex() {
+  tableEntry.innerHTML = '';
+
+  //ouvre un transaction
+  var transaction = db.transaction(['contactsList'], 'readonly');
+  //accés au magasin d'objet
+  var objectStore = transaction.objectStore('contactsList');
+
+  //on récupère l'index
+  var myIndex = objectStore.index('lName');
+
+  //un curseur qui itère sur l'index
+  var request = myIndex.openCursor();
+  request.onsuccess = function(event) {
+    var cursor = request.result;
+    if(cursor) {
+      var tableRow = document.createElement('tr');
+      tableRow.innerHTML =   '&lt;td&gt;' + cursor.value.id + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.lName + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.fName + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.jTitle + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.company + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.eMail + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.phone + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.age + '&lt;/td&gt;';
+      tableEntry.appendChild(tableRow);
+
+      cursor.continue();
+    } else {
+      console.log('Tous les enregistrements ont été affichés.');
+    }
+  };
+};</pre>
+
+<p class="note"><strong>Note :</strong> pour un exemple fonctionnel complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">application To-do</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple</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('IndexedDB', '#widl-IDBIndex-openCursor-IDBRequest-any-range-IDBCursorDirection-direction', 'openCursor()')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, partial</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</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/idbindex/openkeycursor/index.html b/files/fr/web/api/idbindex/openkeycursor/index.html
new file mode 100644
index 0000000000..09f7003c12
--- /dev/null
+++ b/files/fr/web/api/idbindex/openkeycursor/index.html
@@ -0,0 +1,228 @@
+---
+title: IDBIndex.openKeyCursor()
+slug: Web/API/IDBIndex/openKeyCursor
+tags:
+  - API
+  - IDBIndex
+  - IndexedDB
+  - Méthode
+  - Reference
+  - openKeyCursor
+translation_of: Web/API/IDBIndex/openKeyCursor
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La méthode <strong><code>openKeyCursor()</code></strong> de {{domxref("IDBIndex")}} renvoie un objet {{domxref("IDBRequest")}} et, dans un <em>thread</em> séparé, crée un curseur sur l'intervalle de clé passé en argument pour l'index courant.</p>
+
+<p>Cette méthode positionne le curseur sur la clé appropriée, dans la direction indiquée :</p>
+
+<ul>
+ <li>si l'intervalle de clé n'est pas défini ou s'il est nul, l'intervalle englobera l'ensemble des clés</li>
+ <li>si au moins une clé correspond à l'intervalle de clés, un évènement <code>success</code> est déclenché pour la requête qui est renvoyée. La propriété <code>result</code> de cet évènement contiendra un objet {{domxref("IDBCursor")}} dont la propriété <code>value</code> correspond à l'enregistrement qui a été traduit.</li>
+ <li>Si aucun intervalle ne correspond à l'intervalle indiqué, un évènement <code>error</code> est déclenché pour la requête.</li>
+</ul>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var monIndex = objectStore.index("index");
+var request = monIndex.openKeyCursor(keyRange,direction);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>keyRange</code> {{optional_inline}}</dt>
+ <dd>L'{{domxref("IDBKeyRange","intervalle de clé")}} sur lequel se déplace le curseur. On peut passer un clé seule qui sera alors considéré comme une {{domxref("IDBKeyRange.only","intervalle seule")}}. Par défaut le curseur se déplace sur l'ensemble des clés de l'index.</dd>
+ <dt><code>direction</code> {{optional_inline}}</dt>
+ <dd>La {{domxref("IDBCursor.direction","direction")}} du {{domxref("IDBCursor","curseur")}} qui défini le sens d'itération. par défaut "next".</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un objet {{domxref("IDBRequest")}} sur lequel on peut écouter les évènements associés à l'opération lancée par la méthode.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Cette méthode peut lever une exception :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Type d'exception</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>TransactionInactiveError</td>
+   <td>La transaction pour cet index {{domxref("IDBIndex")}} est inactive.</td>
+  </tr>
+  <tr>
+   <td><code>TypeError</code></td>
+   <td>La valeur du paramètre pour la direction est invalide.</td>
+  </tr>
+  <tr>
+   <td><code>DataError</code></td>
+   <td>
+    <p>La clé ou l'intervalle de clé fourni contient une clé invalide.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>InvalidStateError</code></td>
+   <td>L'index {{domxref("IDBIndex")}} a été supprimé ou déplacé.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans l'exemple suivant on ouvre une transaction puis un magasin d'objet et enfin l'index <code>lName</code>.</p>
+
+<p>Ensuite, on itère sur l'ensemble des enregistrements pour en insérer leur clé dans un tableau HTML. En utilisant la méthode {{domxref("IDBIndex.openKeyCursor")}} qui travaille de la même façon que la méthode {{domxref("IDBObjectStore.openKeyCursor")}} de l'{{domxref("IDBObjectStore","accès")}} au magasin d'objet sauf que les enregistrements sont renvoyés dans l'ordre de l'index et non celui du magasin d'objet.</p>
+
+<pre class="brush:js">function displayDataByIndex() {
+  tableEntry.innerHTML = '';
+
+  //ouvre un transaction
+  var transaction = db.transaction(['contactsList'], 'readonly');
+  //accés au magasin d'objet
+  var objectStore = transaction.objectStore('contactsList');
+
+  //on récupère l'index
+  var myIndex = objectStore.index('lName');
+
+  //un curseur qui itère sur l'index
+  var request = myIndex.openCursor();
+  request.onsuccess = function(event) {
+    var cursor = request.result;
+    if(cursor) {
+
+
+      // cursor.key la clé de l'enregistrement à la position du curseur
+      // il n'y as pas de cursor.value contrairement à openCursor()
+
+      var tableRow = document.createElement('tr');
+      tableRow.innerHTML =   '&lt;td&gt;' + cursor.key + '&lt;/td&gt;'
+      tableEntry.appendChild(tableRow);
+
+      //on relance la requête pour la position suivante du curseur
+      cursor.continue();
+    } else {
+      console.log('Toutes les clé ont été affichés.');
+    }
+  };
+};</pre>
+
+<p class="note"><strong>Note :</strong> pour un exemple fonctionnel complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">application To-do</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple</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('IndexedDB', '#widl-IDBIndex-openKeyCursor-IDBRequest-any-range-IDBCursorDirection-direction', 'openKeyCursor()')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, partial</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible pour les <em>web workers</em></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>Feature</th>
+   <th>Android</th>
+   <th>Webview 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>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible pour les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</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>
+</ul>
diff --git a/files/fr/web/api/idbindex/unique/index.html b/files/fr/web/api/idbindex/unique/index.html
new file mode 100644
index 0000000000..a10b64189e
--- /dev/null
+++ b/files/fr/web/api/idbindex/unique/index.html
@@ -0,0 +1,172 @@
+---
+title: IDBIndex.unique
+slug: Web/API/IDBIndex/unique
+tags:
+  - API
+  - IDBIndex
+  - IndexedDB
+  - Propriété
+  - Reference
+translation_of: Web/API/IDBIndex/unique
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La propriété <strong><code>unique</code></strong>, rattachée à l'interface <code>IDBIndex</code>, est un booléen qui indique si l'index utilisé permet d'avoir des clés dupliquées.</p>
+
+<p>Cette caractéristique est décidée lors de la création de l'index, avec la méthode {{domxref("IDBObjectStore.createIndex")}}. Cette méthode prend un paramètre optionnel, <code>unique</code>, qui, s'il vaut <code>true</code>, indique que l'index ne permettra pas d'avoir de clés dupliquées.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var myIndex = objectStore.index('index');</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un booléen qui vaut <code>true</code> si l'index permet d'avoir des valeurs dupliquées pour une même clé ou <code>false</code> s'il n'est pas possible d'avoir de clés dupliquées.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, on ouvre une transaction en lecture sur un magasin d'objets puis on récupère l'index <code>lName</code>. On ouvre alors un curseur sur l'index grâce à {{domxref("IDBIndex.openCursor")}} (cela fonctionne de façon analogue à l'ouverture d'un curseur sur le magasin d'objets avec {{domxref("IDBObjectStore.openCursor")}} sauf qu'ici, les enregistrements sont triés selon l'index et pas selon la clé primaire.</p>
+
+<p>On affiche le caractère unique des clé dans la console (ici, on voit que la propriété vaut <code>false</code>).</p>
+
+<p>Enfin, on parcourt chaque enregistrement et on insère les données dans le tableau HTML (pour voir un exemple complet, consulter <a href="https://github.com/mdn/IDBIndex-example">notre dépôt IDBIndex-example</a> (<a href="https://mdn.github.io/IDBIndex-example/">voir la démonstration <em>live</em></a>).</p>
+
+<pre class="brush: js">function displayDataByIndex() {
+  tableEntry.innerHTML = '';
+  var transaction = db.transaction(['contactsList'], 'readonly');
+  var objectStore = transaction.objectStore('contactsList');
+
+  var myIndex = objectStore.index('lName');
+  console.log(myIndex.unique);
+
+  myIndex.openCursor().onsuccess = function(event) {
+    var cursor = event.target.result;
+    if(cursor) {
+      var tableRow = document.createElement('tr');
+      tableRow.innerHTML =   '&lt;td&gt;' + cursor.value.id + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.lName + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.fName + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.jTitle + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.company + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.eMail + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.phone + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.age + '&lt;/td&gt;';
+      tableEntry.appendChild(tableRow);
+
+      cursor.continue();
+    } else {
+      console.log('Les éléments sont affiché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('IndexedDB', '#widl-IDBIndex-unique', 'unique')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, partial</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</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/idbkeyrange/bound/index.html b/files/fr/web/api/idbkeyrange/bound/index.html
new file mode 100644
index 0000000000..6d59ada434
--- /dev/null
+++ b/files/fr/web/api/idbkeyrange/bound/index.html
@@ -0,0 +1,191 @@
+---
+title: IDBKeyRange.bound()
+slug: Web/API/IDBKeyRange/bound
+tags:
+  - API
+  - IDBKeyRange
+  - IndexedDB
+  - Méthode
+  - Reference
+translation_of: Web/API/IDBKeyRange/bound
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La méthode <strong><code>bound()</code></strong>, rattachée à l'interface {{domxref("IDBKeyRange")}}, renvoie un intervalle de clé délimité par une borne inférieure et une borne supérieure.</p>
+
+<p>L'intervalle peut être ouvert (les limites sont exclues) ou fermé (les limites sont incluses). Par défaut, l'intervalle est fermé.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">myKeyRange = IDBKeyRange.bound(lower, upper, lowerOpen, upperOpen);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>lower</code></dt>
+ <dd>La limite inférieure de l'intervalle.</dd>
+ <dt><code>upper</code></dt>
+ <dd>La limite supérieure de l'intervalle.</dd>
+ <dt><code>lowerOpen</code> {{optional_inline}}</dt>
+ <dd>Si cette valeur vaut <code>false</code> (la valeur par defaut), l'intervalle contient la limite inférieure.</dd>
+ <dt><code>upperOpen</code> {{optional_inline}}</dt>
+ <dd>Si cette valeur vaut <code>false</code> (la valeur par défaut), l'intervalle contient la limite supérieure.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un objet {{domxref("IDBKeyRange")}} qui représente l'intervalle de clé.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<dl>
+ <dt><code>DataError</code></dt>
+ <dd>Cette exception {{domxref("DOMException")}} est levée si :
+ <ul>
+  <li>Une des limites passé n'est pas valide.</li>
+  <li>La limite inférieur est supèrieur à la limite supérieur.</li>
+  <li>Les limites correspondent et l'intervalle est ouvert.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on illustre comment créer un intervalle de clé. On déclare <code>keyRangeValue = IDBKeyRange.bound("A", "F");</code> ce qui représente un intervalle entre "A" et "F". Ensuite, on ouvre une transaction grâce à un objet {{domxref("IDBTransaction")}} puis on ouvre un magasin d'objets et on ouvre un curseur avec la méthode {{domxref("IDBObjectStore.openCursor")}} pour lequel on indique <code>keyRangeValue</code> comme intervalle de clé correspondant. Cela signifie que le curseur ne parcourera que les enregistrements dont les clés sont contenues dans cet intervalle. L'intervalle contient bien les valeurs "A" et "F" car les bornes sont incluses. Si on avait utilisé <code>IDBKeyRange.bound("A", "F", true, true);</code>, l'intervalle n'aurait pas inclus "A" et "F" mais uniquement les valeurs intermédiaires.</p>
+
+<pre class="brush: js">function displayData() {
+  var keyRangeValue = IDBKeyRange.bound("A", "F");
+
+  var transaction = db.transaction(['fThings'], 'readonly');
+  var objectStore = transaction.objectStore('fThings');
+
+  objectStore.openCursor(keyRangeValue).onsuccess = function(event) {
+    var cursor = event.target.result;
+      if(cursor) {
+        var listItem = document.createElement('li');
+        listItem.innerHTML = '&lt;strong&gt;' + cursor.value.fThing + '&lt;/strong&gt;, ' + cursor.value.fRating;
+        list.appendChild(listItem);
+
+        cursor.continue();
+      } else {
+        console.log('Les éléments ont été affichés.');
+      }
+    };
+  };</pre>
+
+<div class="note">
+<p><strong>Note </strong>: Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter <a href="https://github.com/mdn/IDBKeyRange-example">le dépôt GitHub IDBKeyRange-example</a> (<a href="https://mdn.github.io/IDBKeyRange-example/">ainsi que la démonstration associée</a>).</p>
+</div>
+
+<h2 id="Spécification">Spécification</h2>
+
+<div>
+<table class="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', '#widl-IDBKeyRange-bound-IDBKeyRange-any-lower-any-upper-boolean-lowerOpen-boolean-upperOpen', 'bound()')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, partial</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</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/idbkeyrange/includes/index.html b/files/fr/web/api/idbkeyrange/includes/index.html
new file mode 100644
index 0000000000..5b6071eba0
--- /dev/null
+++ b/files/fr/web/api/idbkeyrange/includes/index.html
@@ -0,0 +1,153 @@
+---
+title: IDBKeyRange.includes()
+slug: Web/API/IDBKeyRange/includes
+tags:
+  - API
+  - IDBKeyRange
+  - IndexedDB
+  - Méthode
+  - Reference
+translation_of: Web/API/IDBKeyRange/includes
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La méthode <code><strong>includes()</strong></code>, rattachée à l'interface {{domxref("IDBKeyRange")}}, renvoie un booléen si la clé est contenue dans un intervalle de clé.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">myIncludesResult = myKeyRange.includes('A');</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>key</code></dt>
+ <dd>La clé dont on souhaite savoir si elle est dans l'intervalle.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un booléen.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Cette méthode peut lever une exception {{domxref("DOMException")}} de type {{domxref("DataError")}} lorsque la clé fournie n'est pas une clé valide.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var keyRangeValue = IDBKeyRange.bound('A', 'K', false, false);
+
+var monResultat = keyRangeValue.includes('F');
+// Renvoie true
+
+var monResultat = keyRangeValue.includes('W');
+// 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('IndexedDB 2', '#dom-idbkeyrange-includes', 'includes()')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>
+    <p>{{CompatChrome(52.0)}}</p>
+   </td>
+   <td>{{CompatGeckoDesktop("47.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(39)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(52.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile(39)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(52.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
+
+<p>La méhode <code>includes()</code> a été ajoutée à partir de la deuxième édition de la spécification d'Indexed DB. Pour les navigateurs qui ne prennent pas en charge cette fonctionnalité, on peut utiliser la prothèse suivante.</p>
+
+<pre class="brush: js">IDBKeyRange.prototype.includes = IDBKeyRange.prototype.includes || function(key) {
+  var r = this, c;
+  if (r.lower !== undefined) {
+    c = indexedDB.cmp(key, r.lower);
+    if (r.lowerOpen &amp;&amp; c &lt;= 0) return false;
+    if (!r.lowerOpen &amp;&amp; c &lt; 0) return false;
+  }
+  if (r.upper !== undefined) {
+    c = indexedDB.cmp(key, r.upper);
+    if (r.upperOpen &amp;&amp; c &gt;= 0) return false;
+    if (!r.upperOpen &amp;&amp; c &gt; 0) return false;
+  }
+  return true;
+};
+</pre>
+
+<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/idbkeyrange/index.html b/files/fr/web/api/idbkeyrange/index.html
new file mode 100644
index 0000000000..bec24f9b68
--- /dev/null
+++ b/files/fr/web/api/idbkeyrange/index.html
@@ -0,0 +1,197 @@
+---
+title: IDBKeyRange
+slug: Web/API/IDBKeyRange
+tags:
+  - API
+  - Database
+  - IDBKeyRange
+  - IndexedDB
+  - Interface
+  - Reference
+  - Storage
+  - TopicStub
+translation_of: Web/API/IDBKeyRange
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>L'interface <strong><code>IDBKeyRange</code></strong> de l'API <a href="/fr/docs/Web/API/API_IndexedDB">IndexedDB</a> représente un intervalle continue sur un type de donnée utilisé pour représenter des clés. Les enregistrements peuvent être récupérés depuis des objets {{domxref("IDBObjectStore")}} et {{domxref("IDBIndex")}} grâce à des clés ou à des intervalles de clé. Il est possible de préciser les bornes inférieure et supérieure de l'intervalle. Si les clés sont des chaînes de caractères, on pourrait ainsi parcourir l'ensemble des valeurs pour l'intervalle A–Z.</p>
+
+<p>Un intervalle de clé peut être une seule valeur ou un intervalle avec des bornes inférieure et supérieure. Si l'intervalle possède ces deux bornes, il est dit borné. S'il n'a aucune borne, il est non-borné. Un intervalle de clé borné peut être ouvert (les bornes sont exclues) ou fermé (les bornes sont inclues). Pour récupérer les différentes clés d'un intervalle donné, on peut utiliser les fragments de code suivants :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Intervalle</th>
+   <th scope="col">Code</th>
+  </tr>
+  <tr>
+   <td>Toutes les clés ≤ <strong>x</strong></td>
+   <td>{{domxref("IDBKeyRange.upperBound")}}<code>(<strong>x</strong>)</code></td>
+  </tr>
+  <tr>
+   <td>Toutes les clés &lt; <strong>x</strong></td>
+   <td>{{domxref("IDBKeyRange.upperBound")}}<code>(<strong>x</strong>, true) </code></td>
+  </tr>
+  <tr>
+   <td>Toutes les clés ≥<strong> y</strong></td>
+   <td>{{domxref("IDBKeyRange.lowerBound")}}<code>(<strong>y</strong>)</code></td>
+  </tr>
+  <tr>
+   <td>Toutes les clés &gt;<strong> y</strong></td>
+   <td>{{domxref("IDBKeyRange.lowerBound")}}<code>(<strong>y</strong>, true)</code></td>
+  </tr>
+  <tr>
+   <td>Toutes les clés ≥ <strong>x</strong> &amp;&amp; ≤ <strong>y</strong></td>
+   <td>{{domxref("IDBKeyRange.bound")}}<code>(<strong>x</strong>, <strong>y</strong>)</code></td>
+  </tr>
+  <tr>
+   <td>Toutes les clés &gt; <strong>x</strong> &amp;&amp;&lt; <strong>y</strong></td>
+   <td>{{domxref("IDBKeyRange.bound")}}<code>(<strong>x</strong>, <strong>y</strong>, true, true)</code></td>
+  </tr>
+  <tr>
+   <td>Toutes les clés &gt; <strong>x</strong> &amp;&amp; ≤ <strong>y</strong></td>
+   <td>{{domxref("IDBKeyRange.bound")}}<code>(<strong>x</strong>, <strong>y</strong>, true, false)</code></td>
+  </tr>
+  <tr>
+   <td>Toutes les clés ≥ <strong>x</strong> &amp;&amp;&lt; <strong>y</strong></td>
+   <td>{{domxref("IDBKeyRange.bound")}}<code>(<strong>x</strong>, <strong>y</strong>, false, true)</code></td>
+  </tr>
+  <tr>
+   <td>La clé = <strong>z</strong></td>
+   <td>{{domxref("IDBKeyRange.only")}}<code>(<strong>z</strong>)</code></td>
+  </tr>
+ </thead>
+</table>
+
+<p>Une clé est contenue dans un intervalle de clé lorsque les conditions suivantes sont réunies :</p>
+
+<ul>
+ <li>La borne inférieure de l'intervalle de clé est :
+  <ul>
+   <li><code>undefined</code></li>
+   <li>Inférieure à la valeur de la clé</li>
+   <li>Égal à la valeur de la clé si <code>lowerOpen</code> est <code>false</code> (l'intervalle est fermé à gauche)</li>
+  </ul>
+ </li>
+ <li>La borne supérieure de l'intervalle de clé est :
+  <ul>
+   <li><code>undefined</code></li>
+   <li>Supérieure à la valeur de la clé</li>
+   <li>Égal à la valeur de la clé si <code>upperOpen</code> vaut <code>false</code> (l'intervalle est fermé à droite)</li>
+  </ul>
+ </li>
+</ul>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("IDBKeyRange.lower")}} {{readonlyInline}}</dt>
+ <dd>Cette propriété fournit la borne inférieure de l'intervalle de clé.</dd>
+ <dt>{{domxref("IDBKeyRange.upper")}} {{readonlyInline}}</dt>
+ <dd>Cette propriété fournit la borne supérieure de l'intervalle de clé.</dd>
+ <dt>{{domxref("IDBKeyRange.lowerOpen")}} {{readonlyInline}}</dt>
+ <dd>Cette méthode renvoie <code>false</code> si la borne inférieure est contenue dans l'intervalle de clé (autrement dit elle permet de vérifier si l'intervalle est ouvert à gauche).</dd>
+ <dt>{{domxref("IDBKeyRange.upperOpen")}} {{readonlyInline}}</dt>
+ <dd>Cette méthode renvoie <code>false</code> si la borne supérieure est contenue dans l'intervalle de clé (autrement dit elle permet de vérifier si l'intervalle est ouvert à droite).</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<h3 id="Méthodes_statiques">Méthodes statiques</h3>
+
+<dl>
+ <dt>{{domxref("IDBKeyRange.bound()")}}</dt>
+ <dd>Cette méthode permet de créer un nouvel intervalle de clé avec une borne inférieure et une borne supérieure.</dd>
+ <dt>{{domxref("IDBKeyRange.only()")}}</dt>
+ <dd>Cette méthode crée un nouvel intervalle de clé qui ne contient qu'une valeur.</dd>
+ <dt>{{domxref("IDBKeyRange.lowerBound()")}}</dt>
+ <dd>Cette méthode crée un nouvel intervalle de clé avec une borne inférieure.</dd>
+ <dt>{{domxref("IDBKeyRange.upperBound()")}}</dt>
+ <dd>Cette méthode crée un nouvel intervalle de clé avec une borne supérieure.</dd>
+</dl>
+
+<h3 id="Méthodes_des_instances">Méthodes des instances</h3>
+
+
+
+<dl>
+ <dt>{{domxref("IDBKeyRange.includes()")}}</dt>
+ <dd>Cette méthode renvoie un booléen qui indique si la clé passée en argument est contenue dans l'intervalle de clé.</dd>
+</dl>
+
+
+
+<dl>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on montre comment utiliser un intervalle de clé. Ici, on déclare un objet <code>keyRangeValue</code> qui représente un intervalle pour les valeurs entre "A" et "F". On ouvre une transaction grâce à {{domxref("IDBTransaction")}}, on ouvre également un magasin d'objets puis un curseur avec la méthode {{domxref("IDBObjectStore.openCursor")}} pour lequel on indique que <code>keyRangeValue</code> est l'intervalle de clé à considérer. Cela signifie que le curseur récupèrera uniquement les enregistrements pour lesquels les clés sont contenues dans cet intervalle. Cet intervalle est fermé, il inclut les valeur "A" and "F" (on n'a pas indiqué que ces bornes étaient ouvertes). Si on avait utilisé <code>IDBKeyRange.bound("A", "F", true, true);</code>, l'intervalle serait ouvert et ne contiendrait pas "A" ou "F" mais uniquement les valeurs intermédiaires.</p>
+
+<pre class="brush: js notranslate">function displayData() {
+  var keyRangeValue = IDBKeyRange.bound("A", "F");
+
+  var transaction = db.transaction(['fThings'], 'readonly');
+  var objectStore = transaction.objectStore('fThings');
+
+  objectStore.openCursor(keyRangeValue).onsuccess = function(event) {
+    var cursor = event.target.result;
+      if(cursor) {
+        var listItem = document.createElement('li');
+        listItem.innerHTML = '&lt;strong&gt;' + cursor.value.fThing + '&lt;/strong&gt;, ' + cursor.value.fRating;
+        list.appendChild(listItem);
+
+        cursor.continue();
+      } else {
+        console.log('Les éléments ont été affichés.');
+      }
+    };
+  };</pre>
+
+<div class="note">
+<p><strong>Note </strong>: Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter <a href="https://github.com/mdn/IDBKeyRange-example">le dépôt GitHub IDBKeyRange-example</a> (<a href="https://mdn.github.io/IDBKeyRange-example/">ainsi que la démonstration associée</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('IndexedDB', '#idl-def-IDBKeyRange', 'IDBKeyRange')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB 2', '#keyrange', 'IDBKeyRange')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td>Ajout de <code>includes()</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.IDBKeyRange")}}</p>
+
+<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/idbkeyrange/lower/index.html b/files/fr/web/api/idbkeyrange/lower/index.html
new file mode 100644
index 0000000000..a3a607bf0b
--- /dev/null
+++ b/files/fr/web/api/idbkeyrange/lower/index.html
@@ -0,0 +1,164 @@
+---
+title: IDBKeyRange.lower
+slug: Web/API/IDBKeyRange/lower
+tags:
+  - API
+  - IDBKeyRange
+  - IndexedDB
+  - Propriété
+  - Reference
+translation_of: Web/API/IDBKeyRange/lower
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La propriété <strong><code>lower</code></strong>, rattachée à l'interface {{domxref("IDBKeyRange")}}, renvoie la borne inférieure de l'intervalle de clé.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">monIntervalle.lower;</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>La borne inférieure de l'intervalle de clé (qui peut être d'un type quelconque).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on voit comment utiliser un intervalle de clé. On déclare <code>keyRangeValue = IDBKeyRange.upperBound("F", "W", true, true);</code> — ce qui correspond à intervalle qui inclut tout ce qui se trouve entre "F" et "W" mais pas ces valeurs (l'intervalle est « ouvert »). Ensuite, on ouvre une transaction grâce à {{domxref("IDBTransaction")}}, un magasin d'objet et un curseur grâce à {{domxref("IDBObjectStore.openCursor")}} pour lequel on déclare que <code>keyRangeValue</code> est l'intervalle de clé optionnel.</p>
+
+<p>Après avoir déclaré l'intervalle de clé, on affiche la valeur de la propriété <code>lower</code> dans la console (ce qui doit donner "F").</p>
+
+<pre class="brush: js">function displayData() {
+  var keyRangeValue = IDBKeyRange.bound("F", "W", true, true);
+  console.log(keyRangeValue.lower);
+
+  var transaction = db.transaction(['fThings'], 'readonly');
+  var objectStore = transaction.objectStore('fThings');
+
+  objectStore.openCursor(keyRangeValue).onsuccess = function(event) {
+    var cursor = event.target.result;
+      if(cursor) {
+        var listItem = document.createElement('li');
+        listItem.innerHTML = '&lt;strong&gt;' + cursor.value.fThing + '&lt;/strong&gt;, ' + cursor.value.fRating;
+        list.appendChild(listItem);
+
+        cursor.continue();
+      } else {
+        console.log('Les éléments ont été affichés.');
+      }
+    };
+  };</pre>
+
+<div class="note">
+<p><strong>Note </strong>: Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter <a href="https://github.com/mdn/IDBKeyRange-example">le dépôt GitHub IDBKeyRange-example</a> (<a href="https://mdn.github.io/IDBKeyRange-example/">ainsi que la démonstration associée</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('IndexedDB', '#widl-IDBKeyRange-lower', 'lower')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24 (unprefixed)</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, partial</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</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/idbkeyrange/lowerbound/index.html b/files/fr/web/api/idbkeyrange/lowerbound/index.html
new file mode 100644
index 0000000000..d3c5299ad4
--- /dev/null
+++ b/files/fr/web/api/idbkeyrange/lowerbound/index.html
@@ -0,0 +1,178 @@
+---
+title: IDBKeyRange.lowerBound()
+slug: Web/API/IDBKeyRange/lowerBound
+tags:
+  - IDBKeyRange
+  - IndexedDB
+  - Méthode
+  - Reference
+translation_of: Web/API/IDBKeyRange/lowerBound
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La méthode <strong><code>lowerBound()</code></strong>, rattachée à l'interface  {{domxref("IDBKeyRange")}}, crée un intervalle de clé avec une borne inférieure.</p>
+
+<p>Par défaut, la borne est inclue dans l'intervalle (autrement dit, il est fermé à gauche).</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">IDBKeyRange.lowerBound(borne);
+IDBKeyRange.lowerBound(borne, ouvert);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>borne</code></dt>
+ <dd>La valeur de la borne inférieure pour l'intervalle.</dd>
+ <dt><code>ouvert {{optional_inline}}</code></dt>
+ <dd>Ce booléen indique si l'intervalle est ouvert à gauche (autrement dit, s'il vaut <code>false</code> la borne est inclue et s'il vaut <code>true</code> la borne n'est pas inclue dans l'intervalle).</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un objet {{domxref("IDBKeyRange")}} qui correspond à l'intervalle de clé créé.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Cette méthode peut lever une exception {{domxref("DOMException")}} de type <code>DataError</code> lorsque la valeur passée en paramètre n'est pas une clé valide.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on illustre comment créer un intervalle de clé avec une borne inférieure, on utilise <code>keyRangeValue = IDBKeyRange.lowerBound("F", false);</code> — cela permet de créer un intervalle qui contient "F" et les valeurs inférieures. On ouvre ensuite une transaction grâce à {{domxref("IDBTransaction")}}) puis un magasin d'objet et un curseur avec la méthode {{domxref("IDBObjectStore.openCursor")}} à laquelle on associe l'intervalle de clé <code>keyRangeValue</code>.</p>
+
+<p>Si on a avait utilisé <code>IDBKeyRange.lowerBound("F", true);</code>, "F" n'aurait pas fait partie de l'intervalle.</p>
+
+<pre class="brush: js">function displayData() {
+  var keyRangeValue = IDBKeyRange.lowerBound("F");
+
+  var transaction = db.transaction(['fThings'], 'readonly');
+  var objectStore = transaction.objectStore('fThings');
+
+  objectStore.openCursor(keyRangeValue).onsuccess = function(event) {
+    var cursor = event.target.result;
+      if(cursor) {
+        var listItem = document.createElement('li');
+        listItem.innerHTML = '&lt;strong&gt;' + cursor.value.fThing + '&lt;/strong&gt;, ' + cursor.value.fRating;
+        list.appendChild(listItem);
+
+        cursor.continue();
+      } else {
+        console.log('Les éléments sont affichés.');
+      }
+    };
+  };</pre>
+
+<div class="note">
+<p><strong>Note </strong>: Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter <a href="https://github.com/mdn/IDBKeyRange-example">le dépôt GitHub IDBKeyRange-example</a> (<a href="https://mdn.github.io/IDBKeyRange-example/">ainsi que la démonstration associée</a>).</p>
+</div>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="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', '#widl-IDBKeyRange-lowerBound-IDBKeyRange-any-lower-boolean-open', 'lowerBound()')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, partial</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</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/idbkeyrange/loweropen/index.html b/files/fr/web/api/idbkeyrange/loweropen/index.html
new file mode 100644
index 0000000000..e8cbe37164
--- /dev/null
+++ b/files/fr/web/api/idbkeyrange/loweropen/index.html
@@ -0,0 +1,164 @@
+---
+title: IDBKeyRange.lowerOpen
+slug: Web/API/IDBKeyRange/lowerOpen
+tags:
+  - API
+  - IDBKeyRange
+  - IndexedDB
+  - Propriété
+  - Reference
+translation_of: Web/API/IDBKeyRange/lowerOpen
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La propriété <strong><code>lowerOpen</code></strong>, rattachée à l'interface {{domxref("IDBKeyRange")}}, renvoie un booléen qui inidque si l'intervalle est ouvert pour la borne inférieure (autrement dit, le booléen est vrai lorsque la borne n'est pas incluse et est faux sinon).</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">myKeyRange.lowerOpen;</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un booléen qui indique si l'intervalle est ouvert pour la borne inférieure (<code>true</code> si c'est le cas (la borne n'est pas incluse), <code>false</code> sinon).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on voit comment utiliser un intervalle de clé. On déclare <code>keyRangeValue = IDBKeyRange.upperBound("F", "W", true, true);</code> — c'est-à-dire un intervalle qui inclue tout ce qui se trouve entre "F" et "W" mais qui n'inclue pas ces bornes (l'intervalle est « ouvert »). Ensuite, on ouvre une transaction grâce à {{domxref("IDBTransaction")}} puis on ouvre un magasin d'objet et un curseur grâce à {{domxref("IDBObjectStore.openCursor")}}. La valeur <code>keyRangeValue</code> est utilisée comme intervalle de clé pour ce curseur.</p>
+
+<p>Après avoir déclaré l'intervalle de clé, on affiche la valeur de la propriété <code>lowerOpen</code> dans la console. Ici, la valeur de la propriété est <code>true</code> car l'intervalle est ouvert pour la borne supérieure et la borne inférieure qui ne sont donc pas comprises dans l'intervalle.</p>
+
+<pre class="brush: js">function displayData() {
+  var keyRangeValue = IDBKeyRange.bound("F", "W", true, true);
+  console.log(keyRangeValue.lowerOpen);
+
+  var transaction = db.transaction(['fThings'], 'readonly');
+  var objectStore = transaction.objectStore('fThings');
+
+  objectStore.openCursor(keyRangeValue).onsuccess = function(event) {
+    var cursor = event.target.result;
+      if(cursor) {
+        var listItem = document.createElement('li');
+        listItem.innerHTML = '&lt;strong&gt;' + cursor.value.fThing + '&lt;/strong&gt;, ' + cursor.value.fRating;
+        list.appendChild(listItem);
+
+        cursor.continue();
+      } else {
+        console.log('Les éléments ont été affichés.');
+      }
+    };
+  };</pre>
+
+<div class="note">
+<p><strong>Note </strong>: Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter <a href="https://github.com/mdn/IDBKeyRange-example">le dépôt GitHub IDBKeyRange-example</a> (<a href="https://mdn.github.io/IDBKeyRange-example/">ainsi que la démonstration associée</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('IndexedDB', '#widl-IDBKeyRange-lowerOpen', 'lowerOpen')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24 (unprefixed)</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, partial</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</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/idbkeyrange/only/index.html b/files/fr/web/api/idbkeyrange/only/index.html
new file mode 100644
index 0000000000..1f645d2dcf
--- /dev/null
+++ b/files/fr/web/api/idbkeyrange/only/index.html
@@ -0,0 +1,175 @@
+---
+title: IDBKeyRange.only()
+slug: Web/API/IDBKeyRange/only
+tags:
+  - API
+  - IDBKeyRange
+  - IndexedDB
+  - Méthode
+  - Reference
+translation_of: Web/API/IDBKeyRange/only
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La méthode <strong><code>only()</code></strong>, rattachée à l'interface {{domxref("IDBKeyRange")}}, permet de créer un nouvel intervalle de clé qui ne contient qu'une valeur.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">myKeyRange = IDBKeyRange.only(valeur);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>valeur</code></dt>
+ <dd>La valeur dans l'intervalle de clé.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>L'objet {{domxref("IDBKeyRange")}} correspondant à l'intervalle de clé qui vient d'être créé.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Cette méthode peut déclencher une exception {{domxref("DOMException")}} du type <code>DataError</code> lorsque la valeur passée en argument n'est pas une clé valide.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on illustre comment utiliser un intervalle de clé qui ne contient qu'une seule clé. On déclare un intervalle qui ne contient que la valeur "A" avec <code>keyRangeValue = IDBKeyRange.only("A");</code> Ensuite, on ouvre une transaction grâce à {{domxref("IDBTransaction")}} puis un magasin d'objets et un curseur grâce à la méthode {{domxref("IDBObjectStore.openCursor")}} pour laquelle on passe <code>keyRangeValue</code> en argument. Cela signifie que le curseur permettra uniquement de récupérer les enregistrements dont la clé vaut "A".</p>
+
+<pre class="brush: js">function displayData() {
+  var keyRangeValue = IDBKeyRange.only("A");
+
+  var transaction = db.transaction(['fThings'], 'readonly');
+  var objectStore = transaction.objectStore('fThings');
+
+  objectStore.openCursor(keyRangeValue).onsuccess = function(event) {
+    var cursor = event.target.result;
+      if(cursor) {
+        var listItem = document.createElement('li');
+        listItem.innerHTML = '&lt;strong&gt;' + cursor.value.fThing + '&lt;/strong&gt;, ' + cursor.value.fRating;
+        list.appendChild(listItem);
+
+        cursor.continue();
+      } else {
+        console.log('Les éléments sont affichés.');
+      }
+    };
+  };</pre>
+
+<div class="note">
+<p><strong>Note </strong>: Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter <a href="https://github.com/mdn/IDBKeyRange-example">le dépôt GitHub IDBKeyRange-example</a> (<a href="https://mdn.github.io/IDBKeyRange-example/">ainsi que la démonstration associée</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('IndexedDB', '#widl-IDBKeyRange-only-IDBKeyRange-any-value', 'only')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview 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>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</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/idbkeyrange/upper/index.html b/files/fr/web/api/idbkeyrange/upper/index.html
new file mode 100644
index 0000000000..7424dce142
--- /dev/null
+++ b/files/fr/web/api/idbkeyrange/upper/index.html
@@ -0,0 +1,164 @@
+---
+title: IDBKeyRange.upper
+slug: Web/API/IDBKeyRange/upper
+tags:
+  - API
+  - IDBKeyRange
+  - IndexedDB
+  - Propriété
+  - Reference
+translation_of: Web/API/IDBKeyRange/upper
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La propriété <strong><code>upper</code></strong>, rattachée à l'interface {{domxref("IDBKeyRange")}}, renvoie la borne supérieure de l'intervalle de clé.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">monIntervalle.upper;</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>La borne supérieure de l'intervalle de clé (qui peut être d'un type quelconque).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on voit comment utiliser un intervalle de clé. On déclare <code>keyRangeValue = IDBKeyRange.upperBound("F", "W", true, true);</code> — ce qui correspond à intervalle qui inclut tout ce qui se trouve entre "F" et "W" mais pas ces valeurs (l'intervalle est « ouvert »). Ensuite, on ouvre une transaction grâce à {{domxref("IDBTransaction")}}, un magasin d'objet et un curseur grâce à {{domxref("IDBObjectStore.openCursor")}} pour lequel on déclare que <code>keyRangeValue</code> est l'intervalle de clé optionnel.</p>
+
+<p>Après avoir déclaré l'intervalle de clé, on affiche la valeur de la propriété <code>upper</code> dans la console (ce qui doit donner "W").</p>
+
+<pre class="brush: js">function displayData() {
+  var keyRangeValue = IDBKeyRange.bound("F", "W", true, true);
+  console.log(keyRangeValue.upper);
+
+  var transaction = db.transaction(['fThings'], 'readonly');
+  var objectStore = transaction.objectStore('fThings');
+
+  objectStore.openCursor(keyRangeValue).onsuccess = function(event) {
+    var cursor = event.target.result;
+      if(cursor) {
+        var listItem = document.createElement('li');
+        listItem.innerHTML = '&lt;strong&gt;' + cursor.value.fThing + '&lt;/strong&gt;, ' + cursor.value.fRating;
+        list.appendChild(listItem);
+
+        cursor.continue();
+      } else {
+        console.log('Les éléments ont été affichés.');
+      }
+    };
+  };</pre>
+
+<div class="note">
+<p><strong>Note </strong>: Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter <a href="https://github.com/mdn/IDBKeyRange-example">le dépôt GitHub IDBKeyRange-example</a> (<a href="https://mdn.github.io/IDBKeyRange-example/">ainsi que la démonstration associée</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('IndexedDB', '#widl-IDBKeyRange-upper', 'upper')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24 (unprefixed)</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, partial</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</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/idbkeyrange/upperbound/index.html b/files/fr/web/api/idbkeyrange/upperbound/index.html
new file mode 100644
index 0000000000..bf00b275d9
--- /dev/null
+++ b/files/fr/web/api/idbkeyrange/upperbound/index.html
@@ -0,0 +1,179 @@
+---
+title: IDBKeyRange.upperBound()
+slug: Web/API/IDBKeyRange/upperBound
+tags:
+  - API
+  - IDBKeyRange
+  - IndexedDB
+  - Méthode
+  - Reference
+translation_of: Web/API/IDBKeyRange/upperBound
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La méthode <strong><code>upperBound()</code></strong>, rattachée à l'interface  {{domxref("IDBKeyRange")}}, crée un intervalle de clé avec une borne supérieure.</p>
+
+<p>Par défaut, la borne est inclue dans l'intervalle (autrement dit, il est fermé à droite).</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">IDBKeyRange.upperBound(borne);
+IDBKeyRange.upperBound(borne, ouvert);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>borne</code></dt>
+ <dd>La valeur de la borne supérieure pour l'intervalle.</dd>
+ <dt><code>ouvert {{optional_inline}}</code></dt>
+ <dd>Ce booléen indique si l'intervalle est ouvert à droite (autrement dit, s'il vaut <code>false</code> la borne est inclue et s'il vaut <code>true</code> la borne n'est pas inclue dans l'intervalle).</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un objet {{domxref("IDBKeyRange")}} qui correspond à l'intervalle de clé créé.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Cette méthode peut lever une exception {{domxref("DOMException")}} de type <code>DataError</code> lorsque la valeur passée en paramètre n'est pas une clé valide.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on illustre comment créer un intervalle de clé avec une borne supérieure, on utilise <code>keyRangeValue = IDBKeyRange.upperBound("F");</code> — cela permet de créer un intervalle qui contient "F" et les valeurs inférieures. On ouvre ensuite une transaction grâce à {{domxref("IDBTransaction")}}) puis un magasin d'objet et un curseur avec la méthode {{domxref("IDBObjectStore.openCursor")}} à laquelle on associe l'intervalle de clé <code>keyRangeValue</code>.</p>
+
+<p>Si on a avait utilisé <code>IDBKeyRange.upperBound("F", true);</code>, "F" n'aurait pas fait partie de l'intervalle.</p>
+
+<pre class="brush: js">function displayData() {
+  var keyRangeValue = IDBKeyRange.upperBound("F");
+
+  var transaction = db.transaction(['fThings'], 'readonly');
+  var objectStore = transaction.objectStore('fThings');
+
+  objectStore.openCursor(keyRangeValue).onsuccess = function(event) {
+    var cursor = event.target.result;
+      if(cursor) {
+        var listItem = document.createElement('li');
+        listItem.innerHTML = '&lt;strong&gt;' + cursor.value.fThing + '&lt;/strong&gt;, ' + cursor.value.fRating;
+        list.appendChild(listItem);
+
+        cursor.continue();
+      } else {
+        console.log('Les éléments sont affichés.');
+      }
+    };
+  };</pre>
+
+<div class="note">
+<p><strong>Note </strong>: Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter <a href="https://github.com/mdn/IDBKeyRange-example">le dépôt GitHub IDBKeyRange-example</a> (<a href="https://mdn.github.io/IDBKeyRange-example/">ainsi que la démonstration associée</a>).</p>
+</div>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="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', '#widl-IDBKeyRange-upperBound-IDBKeyRange-any-upper-boolean-open', 'upperBound()')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, partial</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</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/idbkeyrange/upperopen/index.html b/files/fr/web/api/idbkeyrange/upperopen/index.html
new file mode 100644
index 0000000000..52bb77a1ff
--- /dev/null
+++ b/files/fr/web/api/idbkeyrange/upperopen/index.html
@@ -0,0 +1,150 @@
+---
+title: IDBKeyRange.upperOpen
+slug: Web/API/IDBKeyRange/upperOpen
+translation_of: Web/API/IDBKeyRange/upperOpen
+---
+<p>{{ APIRef("IndexedDB") }}</p>
+
+<p>La propriété <strong><code>upperOpen</code></strong> de l'interface {{domxref("IDBKeyRange")}} renvoie un booléen indiquant si la valeur de la limite supérieure est incluse dans l'{{domxref("IDBKeyRange","intervalle de clé")}}.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">myKeyRange.upperOpen;</pre>
+
+<h2 id="Value">Value</h2>
+
+<dl>
+ <dt>true</dt>
+ <dd>La valeur de la limite supérieure n'est pas incluse dans l'intervalle.</dd>
+ <dt>false</dt>
+ <dd>La valeur de la limite supérieure est incluse dans l'intervalle.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans l'exemple suivant, on récupère l'{{domxref("IDBKeyRange","intervalle de clé")}} entre "F" et "W". Puis on ouvre une {{domxref("IDBTransaction","transaction")}} sur la connexion pour avoir l’{{domxref("IDBObjectStore","accès")}} au magasin d'objets 'fThings'. On met en place un {{domxref("IDBCursor","curseur")}} sur l'intervalle pour afficher dans une liste les valeurs des propriétés fThing et fRating des objets trouvés.</p>
+
+<p>La propriété <strong><code>upperOpen</code></strong> sert ici à afficher sur la console le booléen indiquant si la valeur de la limite supérieure est comprise dans l'intervalle.</p>
+
+<pre class="brush: js" style="font-size: 14px;">function displayData() {
+  var keyRangeValue = IDBKeyRange.bound("F", "W", true, true);
+  console.log(keyRangeValue.upperOpen);
+
+  var transaction = db.transaction(['fThings'], 'readonly');
+  var objectStore = transaction.objectStore('fThings');
+
+  objectStore.openCursor(keyRangeValue).onsuccess = function(event) {
+    var cursor = event.target.result;
+      if(cursor) {
+        var listItem = document.createElement('li');
+        listItem.innerHTML = '&lt;strong&gt;' + cursor.value.fThing + '&lt;/strong&gt;, ' + cursor.value.fRating;
+        list.appendChild(listItem);
+
+        cursor.continue();
+      } else {
+        console.log('Entries all displayed.');
+      }
+    };
+  };</pre>
+
+<h2 id="Spécification">Spécification</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('IndexedDB', '#widl-IDBKeyRange-upperOpen', 'upperOpen')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité avec les navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, en partie</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans workers</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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>4.4</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Disponible dans workers</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>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}</li>
+ <li>{{domxref("IDBDatabase","Débuter une connexion")}}</li>
+ <li>{{domxref("IDBTransaction","Utilisé les transactions")}}</li>
+ <li>{{domxref("IDBKeyRange","Définir l'intervalle des clés")}}</li>
+ <li>{{domxref("IDBObjectStore","Accès aux magasins d'objets")}}</li>
+ <li>{{domxref("IDBCursor","Utiliser les curseur")}}</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="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
+</ul>
diff --git a/files/fr/web/api/idbobjectstore/add/index.html b/files/fr/web/api/idbobjectstore/add/index.html
new file mode 100644
index 0000000000..0e2a4a7b83
--- /dev/null
+++ b/files/fr/web/api/idbobjectstore/add/index.html
@@ -0,0 +1,239 @@
+---
+title: IDBObjectStore.add()
+slug: Web/API/IDBObjectStore/add
+translation_of: Web/API/IDBObjectStore/add
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La méthode <strong><code>add()</code></strong>, rattachée à l'interface {{domxref("IDBObjectStore")}}, renvoie un objet {{domxref("IDBRequest")}} et, dans un <em>thread</em> séparé, crée un <a href="https://www.whatwg.org/specs/web-apps/current-work/multipage/common-dom-interfaces.html#structured-clone">clone structurel</a> de la valeur et stocke la valeur clonée dans le magasin d'objet. Cette méthode permet d'ajouter de nouveaux enregistrements dans un magasin d'objet.</p>
+
+<p>Afin de déterminer si l'opération <code>add</code> s'est effectuée correctement, on pourra écouter l'évènement <code>complete</code> de la transaction et l'évènement <code>success</code> de la requête <code>IDBObjectStore.add</code> car la transaction peut échouer après le déclenchement de l'évènement <code>success</code>. Autremnt dit, l'évènement <code>success</code> est uniquement déclenché au moment où la transaction a été mise dans la file.</p>
+
+<p>La méthode <code>add</code> ne permet que d'insérer des objets. Si un enregistrement existe déjà dans le magasin d'objet pour la clé fournie en argument, un évènement <code>ConstrainError</code> sera déclenché via l'objet {{domxref("IDBRequest")}}. Si on souhaite mettre à jour des enregistrements existants, on utilisera plutôt la méthode {{domxref("IDBObjectStore.put")}}.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var request = objectStore.add(valeur, clé);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>valeur</code></dt>
+ <dd>La valeur à ajouter au magasin.</dd>
+ <dt><code>clé</code></dt>
+ <dd>La clé qu'on souhaite utiliser pour identifier l'enregistrement. Si elle n'est pas indiquée, la valeur par défaut sera <code>null</code>.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un objet {{domxref("IDBRequest")}} qui émettra les différents évènements relatifs à l'opération.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Cette méthode peut lever une exception {{domxref("DOMException")}} ayant l'un des types suivants :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Exception</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>ReadOnlyError</code></td>
+   <td>La transaction associée à cette opération est en lecture seule.</td>
+  </tr>
+  <tr>
+   <td><code>TransactionInactiveError</code></td>
+   <td>La transaction pour cet objet  {{domxref("IDBObjectStore")}} est inactive.</td>
+  </tr>
+  <tr>
+   <td><code>DataError</code></td>
+   <td>
+    <p>Un des conditions suivantes est vérifiée :</p>
+
+    <ul>
+     <li>Le magasin d'objet utilise des clés en ligne ou possède un générateur de clés et une clé a été fournie dans la fonction.</li>
+     <li>Le magasin d'objet utilise des clés hors lignes et et n'a pas de générateur de clés et aucune clé n'a été fournie dans la fonction.</li>
+     <li>Le magasin d'objet utilise des clés en ligne mais ne possède pas de générateur de clés et le chemin de clé utilisé par le magasin ne pointe pas vers une clé valide.</li>
+     <li>La clé a été fournie à la fonction mais ce paramètre n'est pas une clé valide.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td><code>InvalidStateError</code></td>
+   <td>L'objet {{domxref("IDBObjectStore")}} a été supprimé ou déplacé.</td>
+  </tr>
+  <tr>
+   <td><code>DataCloneError</code></td>
+   <td>La donnée qui devait être enregistrée n'a pas pu être clonée par l'algorithme de clonage interne.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans le fragment de code suivant, on ouvre une transaction en lecture/écriture vers la base de données et on ajoute des données au magasin d'objet grâce à la méthode <code>add()</code>. On notera également les fonctions rattachées à la transaction qui sont utilisées comme gestionnaires d'évènement et qui permettent de savoir si la transaction a réussi ou échoué.</p>
+
+<pre class="brush: js">// On ouvre la base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '&lt;li&gt;Database initialisée.&lt;/li&gt;';
+
+  // On enregistre le résultat dans la variable db
+  // afin de l'utiliser par la suite
+  var db = DBOpenRequest.result;
+
+  // On utilise la fonction addData() afin d'ajouter
+  // des données dans la base de données
+  addData();
+};
+
+function addData() {
+  // On crée un nouvel objet qu'on insèrera ensuite
+  // dans la base de données
+  var newItem = [ { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: "December", year: 2013, notified: "no" } ];
+
+  // On ouvre une transaction en lecture/écriture
+  // afin d'ajouter les données
+  var transaction = db.transaction(["toDoList"], "readwrite");
+
+  // On indique si la transaction s'est déroulées
+  // sans problème
+  transaction.oncomplete = function(event) {
+    note.innerHTML += '&lt;li&gt;Transaction terminée : modification effectuée.&lt;/li&gt;';
+  };
+
+
+  transaction.onerror = function(event) {
+    note.innerHTML += '&lt;li&gt;Ouverture de la transaction impossible : les objets dupliqués ne sont pas autorisés.&lt;/li&gt;';
+  };
+
+  // On crée un magasin d'objets pour la transaction
+  var objectStore = transaction.objectStore("toDoList");
+
+  // On ajoute l'objet newItem dans le magasin d'objets
+  var objectStoreRequest = objectStore.add(newItem[0]);
+
+  objectStoreRequest.onsuccess = function(event) {
+    // On indique la réussite de l'insertion
+    note.innerHTML += '&lt;li&gt;Nouvel objet ajouté dans la base de données.&lt;/li&gt;';
+  };
+};</pre>
+
+<div class="note">
+<p><strong>Note :</strong> pour un exemple fonctionnel complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">application To-do</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple</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('IndexedDB', '#widl-IDBObjectStore-add-IDBRequest-any-value-any-key', 'add()')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24 (unprefixed)</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, partial</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</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/idbobjectstore/autoincrement/index.html b/files/fr/web/api/idbobjectstore/autoincrement/index.html
new file mode 100644
index 0000000000..d6b516219f
--- /dev/null
+++ b/files/fr/web/api/idbobjectstore/autoincrement/index.html
@@ -0,0 +1,178 @@
+---
+title: IDBObjectStore.autoIncrement
+slug: Web/API/IDBObjectStore/autoIncrement
+translation_of: Web/API/IDBObjectStore/autoIncrement
+---
+<p>{{ APIRef("IndexedDB") }}</p>
+
+<p>La propriété <strong><code>autoIncrement</code></strong> de l'interface {{domxref("IDBObjectStore")}} renvoie la position du drapeau d’incrémentation automatique du magasin d'objet {{domxref("IDBObjectStore","relié")}}.</p>
+
+<p class="note">Note: Chaque magasin d'objets à son conteur d’incrémentation automatique.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre>var myAutoIncrement = objectStore.autoIncrement;</pre>
+
+<h2 id="Valeur">Valeur</h2>
+
+<p>Un {{domxref("Boolean","booléen")}} .</p>
+
+<dl>
+ <dt><code>true</code></dt>
+ <dd>Le magasin d'objet relié s’incrémente automatiquement.</dd>
+ <dt><code>false</code></dt>
+ <dd>Le magasin d'objet relié ne s’incrémente pas automatiquement.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans le code suivant, on ouvre une {{domxref("IDBDatabase","connexion")}} à la base de donnée. Sur cette connexion on démarre une {{domxref("IDBTransaction","transaction")}} en lecture/écriture pour avoir un {{domxref("IDBObjectStore","accès")}} au magasin d'objet <code>"toDoList"</code> dans lequel on {{domxref("IDBObjectStore.add","ajoute")}} un enregistrement.</p>
+
+<p>La propriété <strong><code>autoIncrement</code></strong> de l'accès au magasin d'objet sert à affiché la position du drapeau d’incrémentation automatique de ce magasin d'objet sur la console.</p>
+
+<pre class="brush: js">//Connexion à la base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+DBOpenRequest.onsuccess = function(event) {
+	note.innerHTML += 'Connexion établie.';
+
+	//Affecte la connexion à la variable db.
+	db = DBOpenRequest.result;
+
+	// Exécutez la fonction addData () pour ajouter l'enregistrement dans le magasin d'objet
+	addData();
+};
+function addData() {
+	// un nouvel objet prêt à être emmagasiné
+	newItem = [ { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: "December", year: 2013, notified: "no" } ];
+
+	// ouvre une transaction de lecture / écriture  prête au traitement des données sur la connexion
+	var transaction = db.transaction(["toDoList"], "readwrite");
+
+	// en cas de succès de l'ouverture de la transaction
+	transaction.oncomplete = function(event) {
+		note.innerHTML += '&lt;li&gt;Transaction complété : modification de la base de données terminée.&lt;/li&gt;';
+	};
+	// en  cas d'échec de l'ouverture de la transaction
+	transaction.onerror = function(event) {
+		note.innerHTML += '&lt;li&gt;L\'erreur: "' + transaction.error +'" c\'est produite échec de la transaction.&lt;/li&gt;';
+	};
+
+	// ouvre l'accès au un magasin "toDoList" de la transaction
+	var objectStore = transaction.objectStore("toDoList");
+
+//-&gt;Affiche la position du drapeau d’incrémentation automatique
+    console.log(objectStore.autoIncrement);
+
+	// Ajoute un enregistrement
+	var objectStoreRequest = objectStore.add(newItem[0]);
+	objectStoreRequest.onsuccess = function(event) {
+		// signale l'ajout de l'enregistrement
+		note.innerHTML += '&lt;li&gt;Enregistrement ajouté.&lt;/li&gt;';
+	};
+ };
+ </pre>
+
+<p class="note">Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p>
+
+<h2 id="Spécification">Spécification</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('IndexedDB', '#widl-IDBObjectStore-autoIncrement', 'autoIncrement')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité avec les navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, en partie</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans workers</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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>4.4</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Disponible dans workers</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>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}</li>
+ <li>{{domxref("IDBDatabase","Débuter une connexion")}}</li>
+ <li>{{domxref("IDBTransaction","Utilisé les transactions")}}</li>
+ <li>{{domxref("IDBKeyRange","Définir l'intervalle des clés")}}</li>
+ <li>{{domxref("IDBObjectStore","Accès aux magasins d'objets")}}</li>
+ <li>{{domxref("IDBCursor","Utiliser les curseur")}}</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="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
+</ul>
diff --git a/files/fr/web/api/idbobjectstore/clear/index.html b/files/fr/web/api/idbobjectstore/clear/index.html
new file mode 100644
index 0000000000..3f6213015f
--- /dev/null
+++ b/files/fr/web/api/idbobjectstore/clear/index.html
@@ -0,0 +1,181 @@
+---
+title: IDBObjectStore.clear()
+slug: Web/API/IDBObjectStore/clear
+translation_of: Web/API/IDBObjectStore/clear
+---
+<p>{{ APIRef("IndexedDB") }}</p>
+
+<p>La méthode <strong><code>clear()</code></strong> de l'interface {{domxref("IDBObjectStore")}} fait une {{domxref("IDBRequest","requête")}} pour vider le magasin d'objet {{domxref("IDBObjectStore","relié")}}.</p>
+
+<p>Vider un magasin d'objet consiste à supprimer tous les enregistrements et les entrées des index de ce magasin d'objet.</p>
+
+<div class="note">
+<p>Note: La méthode clear() ne remet pas à zero le compteur du génerateur de clé s'il y en à un.</p>
+</div>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var request = objectStore.clear();</pre>
+
+<h2 id="Renvoie">Renvoie</h2>
+
+<p>Une {{domxref("IDBRequest","requête")}}.</p>
+
+<h2 id="Exceptions">Exceptions</h2>
+
+<dl>
+ <dt><code>ReadOnlyError</code></dt>
+ <dd>Cette {{domxref("DOMException","exception")}} est levé si la transaction associé à cette requête est en {{domxref("IDBTransaction.mode","mode")}} lecture seule.</dd>
+ <dt><code>TransactionInactiveError</code></dt>
+ <dd>Cette {{domxref("DOMException","exception")}} est levé si la {{domxref("IDBTransaction","transaction")}} de l'{{domxref("IDBObjectStore","accès")}} au magasin d’objet est inactive.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans le code suivant, on ouvre une {{domxref("IDBDatabase","connexion")}} à la base de donnée. Sur cette connexion on démarre une {{domxref("IDBTransaction","transaction")}} en lecture/écriture pour avoir un {{domxref("IDBObjectStore","accès")}} au magasin d'objet <code>"toDoList"</code> et le {{domxref("IDBObjectStore.clear","vider")}}</p>
+
+<p>La méthode <strong><code>clear()</code></strong> de l'accès au magasin d'objet fait une {{domxref("IDBRequest","requête")}} pour vider le magasin d'objet <code>toDoList</code>.</p>
+
+<pre class="brush: js">//Connexion à la base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+DBOpenRequest.onsuccess = function(event) {
+	note.innerHTML += '&lt;li&gt;Connexion établie.&lt;/li&gt;';
+
+	//Affecte la connexion à la variable db.
+	db = DBOpenRequest.result;
+
+  // Exécutez la fonction clearData () pour vider les données dans le magasin d'objet
+  clearData();
+};
+
+function clearData() {
+  // ouvre une transaction de lecture / écriture  prête pour le nettoyage
+  var transaction = db.transaction(["toDoList"], "readwrite");
+
+  // en cas de succès de l'ouverture de la transaction
+  transaction.oncomplete = function(event) {
+	note.innerHTML += '&lt;li&gt;Transaction complété : modification de la base de données terminée.&lt;/li&gt;';
+  };
+
+  // en cas d'échec de l'ouverture de la transaction
+  transaction.onerror = function(event) {
+     note.innerHTML += '&lt;li&gt;Transaction en échec à cause de l\'erreur : ' + transaction.error + '&lt;/li&gt;';
+  };
+
+  // ouvre l'accès au un magasin "toDoList" de la transaction
+  var objectStore = transaction.objectStore("toDoList");
+
+  // Vide le magasin d'objet
+  var objectStoreRequest = objectStore.clear();
+
+  objectStoreRequest.onsuccess = function(event) {
+  // rapporte le succès du nettoyage
+  note.innerHTML += '&lt;li&gt;Enregistrements effacées.&lt;/li&gt;';
+  };
+};
+</pre>
+
+<p class="note">Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p>
+
+<h2 id="Spécification">Spécification</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('IndexedDB', '#widl-IDBObjectStore-clear-IDBRequest', 'clear()')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité avec les navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, en partie</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans workers</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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>4.4</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Disponible dans workers</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>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}</li>
+ <li>{{domxref("IDBDatabase","Débuter une connexion")}}</li>
+ <li>{{domxref("IDBTransaction","Utilisé les transactions")}}</li>
+ <li>{{domxref("IDBKeyRange","Définir l'intervalle des clés")}}</li>
+ <li>{{domxref("IDBObjectStore","Accès aux magasins d'objets")}}</li>
+ <li>{{domxref("IDBCursor","Utiliser les curseur")}}</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="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
+</ul>
diff --git a/files/fr/web/api/idbobjectstore/count/index.html b/files/fr/web/api/idbobjectstore/count/index.html
new file mode 100644
index 0000000000..3ac1c44d6e
--- /dev/null
+++ b/files/fr/web/api/idbobjectstore/count/index.html
@@ -0,0 +1,183 @@
+---
+title: IDBObjectStore.count()
+slug: Web/API/IDBObjectStore/count
+tags:
+  - API
+  - IDBObjectStore
+  - IndexedDB
+  - Méthode
+  - Reference
+translation_of: Web/API/IDBObjectStore/count
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La méthode <strong><code>count()</code></strong>, rattachée à l'interface {{domxref("IDBObjectStore")}}, renvoie un objet {{domxref("IDBRequest")}} et, dans un <em>thread</em> séparé, renvoie le nombre d'enregistrements qui correspondent à la clé ou à l'intervalle de clé ({{domxref("IDBKeyRange")}}) passé en argument. Si aucun argument n'est fourni, la méthode renvoie le nombre total d'enregistrements contenus dans le magasin d'objets.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var requete = ObjectStore.count(optionalKeyRange);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>optionalKeyRange</code></dt>
+ <dd>Une clé ou un intervalle de clé ({{domxref("IDBKeyRange")}}) qui indique le critère de comptage des enregistrements.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un objet {{domxref("IDBRequest")}} sur lequel seront déclenchés les différents évènements relatifs à l'opération.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Cette méthode peut déclencher une exception {{domxref("DOMException")}} ayant un des types suivants :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Exception</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>InvalidStateError</code></td>
+   <td>L'objet {{domxref("IDBObjectStore")}} a été supprimé.</td>
+  </tr>
+  <tr>
+   <td><code>TransactionInactiveError</code></td>
+   <td>La transaction associée à l'objet {{domxref("IDBObjectStore")}} est inactive.</td>
+  </tr>
+  <tr>
+   <td><code>DataError</code></td>
+   <td>La clé ou l'intervalle de clé passé en argument est invalide.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans ce fragment de code, on crée une transaction, on récupère un magasin d'objets puis on compte le nombre d'enregistrements contenus dans ce magasin grâce à la méthode <code>count()</code>. Lorsque l'évènement associé au succès de l'opération est déclenché, on inscrit le résultat dans la console.</p>
+
+<pre class="brush: js">var transaction = db.transaction(['fThings'], 'readonly');
+var objectStore = transaction.objectStore('fThings');
+
+var countRequest = objectStore.count();
+countRequest.onsuccess = function() {
+  console.log(countRequest.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', '#widl-IDBObjectStore-count-IDBRequest-any-key', 'count()')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview 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>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</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/idbobjectstore/createindex/index.html b/files/fr/web/api/idbobjectstore/createindex/index.html
new file mode 100644
index 0000000000..aef72d855a
--- /dev/null
+++ b/files/fr/web/api/idbobjectstore/createindex/index.html
@@ -0,0 +1,231 @@
+---
+title: IDBObjectStore.createIndex()
+slug: Web/API/IDBObjectStore/createIndex
+translation_of: Web/API/IDBObjectStore/createIndex
+---
+<p>{{ APIRef("IndexedDB") }}</p>
+
+<p>La méthode <strong><code>createIndex()</code></strong> de l'interface {{domxref("IDBObjectStore")}} met en place sur le magasin d'objet {{domxref("IDBObjectStore","relié")}} un nouvel index et en renvoie l'{{domxref("IDBIndex","accès")}}.</p>
+
+<div class="note">
+<p>Note: cette méthode ne peut être appelé que si la transaction de l'accès au magasin d'objet est en mode VersionChange.</p>
+</div>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js" style="font-size: 14px;">objectStore.createIndex(nomIndex, nomCle, parametresIndexOptionnel);</pre>
+
+<h2 id="Paramètres">Paramètres</h2>
+
+<dl>
+ <dt>nomIndex</dt>
+ <dd>Le nom de l'index que l'on veut ajouter. Il est possible d'ajouter un index avec un nom vide.</dd>
+ <dt>nomCle</dt>
+ <dd>Le nom de clé qu'utilise l'index. Il est possible d'ajouter un index sans nom de clé.</dd>
+ <dt>parametresIndexOptionnel {{optional_inline}}</dt>
+ <dd>
+ <p>Un objet optionnel pouvant inclure une ou plusieurs des propriétés suivantes:</p>
+
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col">Propriété</th>
+    <th scope="col">Description</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td><code>unique</code></td>
+    <td>Si true, l'index empêcheras la duplication d'une clé.</td>
+   </tr>
+   <tr>
+    <td><code>multiEntry</code></td>
+    <td>Si true, l'index ajoutera une entrée pour chaque élément de tableau quand le nom de clé de clé est résolue. Si false, il ajoutera un seule entrée contenant le tableau.</td>
+   </tr>
+   <tr>
+    <td><code>locale</code></td>
+    <td>
+     <p>Actuellement uniquement dans Firefox 43+ , cela vous permet de spécifier des paramètres de localisation pour l'index. Toutes les opérations de tri effectuées sur les données via des intervalle de clé obéirons aux règles locales de tri (voir <a href="https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB#Locale-aware_sorting">trie dans localisation courante</a>, en). Vous pouvez spécifier sa valeur de trois façons différentes:</p>
+
+     <ul>
+      <li><code>string</code>: une chaîne de caractère contenant le code de la localisation , par exemple 'fr' ou <code>'en-US'</code>.</li>
+      <li><code>auto</code>: La localisation par défaut est utilisé (peut être régler par l'utilisateur).</li>
+      <li><code>null or undefined</code>: Les règles de tri par défaut de javaScript seront utilisées.</li>
+     </ul>
+    </td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h2 id="Renvoie">Renvoie</h2>
+
+<p>L'{{domxref("IDBIndex","accès")}} au nouvel index.</p>
+
+<h2 id="Exceptions">Exceptions</h2>
+
+<dl>
+ <dt><code>InvalidStateError</code></dt>
+ <dd>Cette {{domxref("DOMException","exeption")}} si la {{domxref("IDBTransaction","transaction")}} dont dépend cet {{domxref("IDBObjectStore","accès")}} au magasin d'objet n'est pas en {{domxref("IDBTransaction.mode","mode")}} <code>versionchange</code>.</dd>
+ <dt><code>TransactionInactiveError</code></dt>
+ <dd>Cette {{domxref("DOMException","exeption")}} si la {{domxref("IDBTransaction","transaction")}} de l'{{domxref("IDBObjectStore","accès")}} au magasin d’objet est inactive.
+ <p class="note">Dans les versions de Firefox antérieur à 41, une <code>InvalidStateError</code> est levé dans ce cas aussi, ce qui est trompeur. Cela a été corrigé (voir <a class="external external-icon" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176165" title="FIXED: Fix error codes for {create,delete}{ObjectStore,Index}">bug 1176165</a> ).</p>
+ </dd>
+ <dt><code>ConstraintError</code></dt>
+ <dd>Cette {{domxref("DOMException","exeption")}} si un index avec le même nom (case sensible) existe déjà sur le magasin d'objet.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans l'exemple suivant on peut voir le gestionnaire d'événement {{domxref("IDBOpenDBRequest.onupgradeneeded","<code>onupgradeneeded</code>")}} être utilisé pour mètre à jour la structure de la base de donnée quand un numéro de version supérieur est chargé.</p>
+
+<p>Des méthode <strong><code>createIndex()</code></strong> sont utilisées pour mètre en place différents index sur le magasin d'objet <code>toDoList</code>.</p>
+
+<pre class="brush: js">var db;
+
+// Requête d'ouverture de la base de données "toDoList"
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+// Gère  l'échec de l'ouverture de la base
+DBOpenRequest.onerror = function(event) {
+  note.innerHTML += '&lt;li&gt;La base de donnée n\'as pas peut être ouverte.&lt;/li&gt;';
+};
+
+// Gère le succès de l'ouverture de la base
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '&lt;li&gt;La base de données est ouverte.&lt;/li&gt;';
+
+  //La connexion est affcté à la variable db.
+  db = request.result;
+
+  // Exécute une fonction d'affichage displayData()
+  displayData();
+};
+
+// Ce gestionnaire d'événement nécessite  un nouveau numéro de version de la basse de données.
+// Si la base n'existe pas un nouveau numéro de version est généré par la méthode d'ouverture de connexion window.indexDB.open .
+
+DBOpenRequest.onupgradeneeded = function(event) {
+  var db = event.target.result;
+
+  db.onerror = function(event) {
+    note.innerHTML += '&lt;li&gt;Erreur de chargement de la base de données.&lt;/li&gt;';
+  };
+
+  // L'Accès au magasin d'objet "toDoList" de la base de donnée
+  var objectStore = db.createObjectStore("toDoList", { keyPath: "taskTitle" });
+
+  // Met en place les index du magasin d'objet
+  objectStore.createIndex("heures", "hours", { unique: false });
+  objectStore.createIndex("minutes", "minutes", { unique: false });
+  objectStore.createIndex("jour", "day", { unique: false });
+  objectStore.createIndex("mois", "month", { unique: false });
+  objectStore.createIndex("annee", "year", { unique: false });
+  objectStore.createIndex("notifiee", "notified", { unique: false });
+};
+</pre>
+
+<p class="note">Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBObjectStore-createIndex-IDBIndex-DOMString-name-DOMString-sequence-DOMString--keyPath-IDBIndexParameters-optionalParameters', 'createIndex()')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité avec les navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, en partie</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans workers</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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>4.4</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Disponible dans workers</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>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}</li>
+ <li>{{domxref("IDBDatabase","Débuter une connexion")}}</li>
+ <li>{{domxref("IDBTransaction","Utilisé les transactions")}}</li>
+ <li>{{domxref("IDBKeyRange","Définir l'intervalle des clés")}}</li>
+ <li>{{domxref("IDBObjectStore","Accès aux magasins d'objets")}}</li>
+ <li>{{domxref("IDBCursor","Utiliser les curseur")}}</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="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
+</ul>
diff --git a/files/fr/web/api/idbobjectstore/delete/index.html b/files/fr/web/api/idbobjectstore/delete/index.html
new file mode 100644
index 0000000000..81350ca992
--- /dev/null
+++ b/files/fr/web/api/idbobjectstore/delete/index.html
@@ -0,0 +1,221 @@
+---
+title: IDBObjectStore.delete()
+slug: Web/API/IDBObjectStore/delete
+tags:
+  - API
+  - IndexedDB
+  - Méthode
+  - Reference
+translation_of: Web/API/IDBObjectStore/delete
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La méthode <strong><code>delete()</code></strong>, rattachée à l'interface {{domxref("IDBObjectStore")}}, renvoie un objet {{domxref("IDBRequest")}} et, dans un <em>thread</em> séparé, supprime le ou les enregistrements concernés.</p>
+
+<p>Cette méthode prend une clé ou un objet {{domxref("IDBKeyRange")}} en argument ce qui permet de supprimer un ou plusieurs enregistrements. Si on souhaite supprimer l'ensemble des enregistrements d'un magasin de données, on utilisera plutôt la méthode {{domxref("IDBObjectStore.clear")}}.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var request = objectStore.delete(keyOrKeyRange);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>keyOrKeyRange</code></dt>
+ <dd>La clé de l'enregistrement qu'on souhaite supprimer ou un objet {{domxref("IDBKeyRange")}} qui indique l'intervalle de clés à supprimer.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un objet {{domxref("IDBRequest")}} qui recevra les évènements relatifs à cette opération. <code>request.result</code> vaut {{jsxref("undefined")}}.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Cette méthode peut lever une des exceptions suivantes :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Exception</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>TransactionInactiveError</code></td>
+   <td>La transaction associée au curseur <code>IDBCursor</code> est inactive.</td>
+  </tr>
+  <tr>
+   <td><code>ReadOnlyError</code></td>
+   <td>La transaction est uniquement en lecture seule.</td>
+  </tr>
+  <tr>
+   <td><code>InvalidStateError</code></td>
+   <td>Le curseur créé avec {{domxref("IDBindex.openKeyCursor")}}, est en train d'être parcouru ou a été parcouru après sa fin.</td>
+  </tr>
+  <tr>
+   <td><code>DataError</code></td>
+   <td>La clé ou l'intervalle de clés n'est pas valide.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on ouvre une transaction en lecture/écriture et on supprime un enregistrement donné grâce à <code>delete()</code>. Pour un exemple complet, voir l'application <a href="https://github.com/mdn/to-do-notifications/">Notifications To-do</a> (<a href="https://mdn.github.io/to-do-notifications/">démonstration</a>).</p>
+
+<pre class="brush: js">// On ouvre l'accès à la base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '&lt;li&gt;Initialisation de la base&lt;/li&gt;';
+
+  // On enregistre le résultat de l'ouverture
+  // dans la variable db.
+  var db = DBOpenRequest.result;
+
+  // On utilise deleteData() pour supprimer
+  // un enregistrement
+  deleteData();
+};
+
+function deleteData() {
+  // On ouvre une transaction en lecture/écriture
+  // afin de supprimer la donnée
+  var transaction = db.transaction(["toDoList"], "readwrite");
+
+  // On indique le succès de la transaction
+  transaction.oncomplete = function(event) {
+    note.innerHTML += '&lt;li&gt;Transaction terminée : modification de la base terminée.&lt;/li&gt;';
+  };
+
+
+  transaction.onerror = function(event) {
+    note.innerHTML += '&lt;li&gt;Transaction interrompue suite à l\'erreur : ' + transaction.error + '&lt;/li&gt;';
+  };
+
+  // On crée un magasin d'objets pour la transaction
+  var objectStore = transaction.objectStore("toDoList");
+
+  // On supprime l'enregistrement du magasin
+  var objectStoreRequest = objectStore.delete("Walk dog");
+
+  objectStoreRequest.onsuccess = function(event) {
+    // On indique le succès de l'opération
+    note.innerHTML += '&lt;li&gt;Enregistremnt supprimé.&lt;/li&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('IndexedDB', '#widl-IDBObjectStore-delete-IDBRequest-any-key', 'delete()')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, partial</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview 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>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</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>L'exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">notifications de trucs à faire</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">voir la démonstration</a>)</li>
+</ul>
diff --git a/files/fr/web/api/idbobjectstore/deleteindex/index.html b/files/fr/web/api/idbobjectstore/deleteindex/index.html
new file mode 100644
index 0000000000..b0ff264b07
--- /dev/null
+++ b/files/fr/web/api/idbobjectstore/deleteindex/index.html
@@ -0,0 +1,197 @@
+---
+title: IDBObjectStore.deleteIndex()
+slug: Web/API/IDBObjectStore/deleteIndex
+translation_of: Web/API/IDBObjectStore/deleteIndex
+---
+<p>{{ APIRef("IndexedDB") }}</p>
+
+<p>La méthode <strong><code>deleteIndex()</code></strong> de l'interface {{domxref("IDBObjectStore")}} supprime l'index dont le nom est passé en paramètre, du magasin d'objet relié ({{domxref("IDBObjectStore")}}).</p>
+
+<div class="note">
+<p><strong>Note</strong>: Cette méthode ne peut être appelée que si la transaction ({{domxref("IDBTransaction")}}) de l'accès ({{domxref("IDBObjectStore")}}) au magasin d'objet est en mode ({{domxref("IDBTransaction.mode")}}) <strong><a href="/fr/docs/Web/API/IDBTransaction/mode#versionchange">versionchange</a></strong>. Les propriétés<strong> indexNames ({{domxref("IDBObjectStore.indexNames")}}) </strong>des accès au magasin d'object seront aussi mises à jour.</p>
+</div>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">objectStore.deleteIndex(nomIndex);</pre>
+
+<h3 id="Paramètre">Paramètre</h3>
+
+<dl>
+ <dt>nomIndex</dt>
+ <dd>Le nom de l'index à supprimer.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Void.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<dl>
+ <dt><code>InvalidStateError</code></dt>
+ <dd>Cette exception ({{domxref("DOMException")}}) est levée si la transaction ({{domxref("IDBTransaction")}}) dont dépend cet accès ({{domxref("IDBObjectStore")}}) au magasin d'objet n'est pas en mode ({{domxref("IDBTransaction.mode")}}) <a href="/fr/docs/Web/API/IDBTransaction/mode#versionchange"><code>versionchange</code></a>.</dd>
+ <dt><code>TransactionInactiveError</code></dt>
+ <dd>Cette exception ({{domxref("DOMException")}}) est levée si la transaction ({{domxref("IDBTransaction")}}) de l'accès ({{domxref("IDBObjectStore")}}) au magasin d’objet est inactive.
+ <p class="note">Dans les versions de Firefox antérieur à 41, une <code>InvalidStateError</code> est levée dans ce cas aussi, ce qui est trompeur. Cela a été corrigé (voir <a class="external external-icon" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176165" title="FIXED: Fix error codes for {create,delete}{ObjectStore,Index}">bug 1176165</a>).</p>
+ </dd>
+ <dt><code>NotFoundError</code></dt>
+ <dd>Cette exception ({{domxref("DOMException")}}) est levée si l'index avec le nom (case sensible) demandé n'existe pas sur le magasin d'objet.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans l'exemple suivant on peut voir le gestionnaire d'événement {{domxref("IDBOpenDBRequest.onupgradeneeded","<code>onupgradeneeded</code>")}} être utilisé pour mettre à jour la structure de la base de données quand un numéro de version supérieure est chargé.</p>
+
+<p>Des méthode <strong><code>deleteIndex()</code></strong> sont utilisées pour supprimer d'anciens index du magasin d'objet <code>toDoList</code>.</p>
+
+<pre class="brush: js">var db;
+
+// Requête d'ouverture de la base de données "toDoList"
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+// Gère  l'échec de l'ouverture de la base
+DBOpenRequest.onerror = function(event) {
+  note.innerHTML += '&lt;li&gt;La base de donnée n\'as pas peut être ouverte.&lt;/li&gt;';
+};
+
+// Gère le succès de l'ouverture de la base
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '&lt;li&gt;La base de données est ouverte.&lt;/li&gt;';
+
+  //
+  db = request.result;
+
+  // Exécute une fonction d'affichage displayData()
+  displayData();
+};
+
+// Ce gestionnaire d'événement nécessite  un nouveau numéro de version de la base de données.
+// Si la base n'existe pas un nouveau numéro de version est généré par la méthode d'ouverture de connexion window.indexDB.open .
+
+DBOpenRequest.onupgradeneeded = function(event) {
+
+  db.onerror = function(event) {
+    note.innerHTML += '&lt;li&gt;Erreur de chargement de la base de données.&lt;/li&gt;';
+  };
+
+  // L'Accès au magasin d'objet "toDoList" de la base de données
+  var objectStore = db.createObjectStore("toDoList", { keyPath: "taskTitle" });
+
+  // Met en place les index du magasin d'objet
+  objectStore.createIndex("heures", "hours", { unique: false });
+  objectStore.createIndex("minutes", "minutes", { unique: false });
+  objectStore.createIndex("jour", "day", { unique: false });
+  objectStore.createIndex("mois", "month", { unique: false });
+  objectStore.createIndex("annee", "year", { unique: false });
+  objectStore.createIndex("notifiee", "notified", { unique: false });
+
+  //supprime des index du magasin d'objet
+  objectStore.deleteIndex("secondes");
+  objectStore.deleteIndex("contact");
+};
+</pre>
+
+<p class="note">Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="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', '#widl-IDBObjectStore-deleteIndex-void-DOMString-indexName', 'deleteIndex()')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité avec les navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, en partie</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans workers</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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Disponible dans workers</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>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}</li>
+ <li>{{domxref("IDBDatabase","Débuter une connexion")}}</li>
+ <li>{{domxref("IDBTransaction","Utilisé les transactions")}}</li>
+ <li>{{domxref("IDBKeyRange","Définir l'intervalle des clés")}}</li>
+ <li>{{domxref("IDBObjectStore","Accès aux magasins d'objets")}}</li>
+ <li>{{domxref("IDBCursor","Utiliser les curseur")}}</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="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
+</ul>
diff --git a/files/fr/web/api/idbobjectstore/get/index.html b/files/fr/web/api/idbobjectstore/get/index.html
new file mode 100644
index 0000000000..8852a504d4
--- /dev/null
+++ b/files/fr/web/api/idbobjectstore/get/index.html
@@ -0,0 +1,195 @@
+---
+title: IDBObjectStore.get()
+slug: Web/API/IDBObjectStore/get
+translation_of: Web/API/IDBObjectStore/get
+---
+<p>{{ APIRef("IndexedDB") }}</p>
+
+<div>
+<p>La méthode <strong><code>get()</code></strong> de l'interface {{domxref("IDBObjectStore")}} fait une {{domxref("IDBRequest","requête")}} pour renvoyer la valeur d'un enregistrement du magasin d'objet {{domxref("IDBObjectStore","relié")}}.</p>
+</div>
+
+<p>{{Note("Si plusieurs enregistrements peuvent être sélectionnés la valeur du premier enregistrement rencontré (dont la valeur n'est pas <code>undefined</code>) sera renvoyée.")}} {{Note("On ne peut pas savoir s'il y a correspondance mais que l(es) enregistrement(s) a/ont des valeurs non définie (<code>undefined</code>) ou s'ils n'y as pas de correspondance par cette méthode. On peut utulisé la methode getAllKeys pour retrouvé la ou les clés du ou des enregistrements qui n'ont pas de valeur défini (valeur = <code>undefined</code>).")}}</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var request = objectStore.get(cle);</pre>
+
+<h2 id="Paramètre">Paramètre</h2>
+
+<dl>
+ <dt><code>cle</code></dt>
+ <dd>la clé ou l'{{domxref("IDBKeyRange","intervalle de clé")}} de l'enregistrement dont on cherche la valeur.</dd>
+</dl>
+
+<h2 id="Renvoie">Renvoie</h2>
+
+<dl>
+ <dt>Une {{domxref("IDBRequest","requête")}}</dt>
+ <dd>La propriété {{domxref("IDBRequest.result","result")}} de cette requête renvoie en cas de succès,  un clone structuré de la valeur de l'enregistrement correspondant à la clé ou du premier correspondant à l'intervalle de clé.</dd>
+</dl>
+
+<h2 id="Exceptions">Exceptions</h2>
+
+<dl>
+ <dt><code>TransactionInactiveError</code></dt>
+ <dd>Cette {{domxref("DOMException","exception")}} est levé si la {{domxref("IDBTransaction","transaction")}} dont dépend cet {{domxref("IDBObjectStore","accès")}} au magasin d'objet est inactive.</dd>
+ <dt><code>DataError</code></dt>
+ <dd>Cette {{domxref("DOMException","exception")}} est levé si la clé ou l'{{domxref("IDBKeyRange","intervalle de clé")}} est invalide.</dd>
+ <dt><code>InvalidStateError</code></dt>
+ <dd>Cette {{domxref("DOMException","exception")}} est levé si le magasin d'objet à été supprimé.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans le code suivant , on ouvre une {{domxref("IDBTransaction","transaction")}} sur la {{domxref("IDBDatabase","connexion")}} à la base de données, pour avoir l'{{domxref("IDBObjectStore","accès")}} au magasin d'objet dans lequel on veut retrouver la valeur d'un enregistrement.</p>
+
+<p>La méthode <strong><code>get() </code></strong>sert à retrouver la valeur de l'enregistrement dont la clé est <code><em>Walk dog</em></code> dans magasin d'objets <em><code>toDoList</code></em></p>
+
+<pre class="brush: js">// ouvre la connexion à la base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+// Gère l'ouverture de la connexion
+DBOpenRequest.onsuccess = function() {
+  note.innerHTML += '&lt;li&gt;Database initialised.&lt;/li&gt;';
+
+  // enregistre la connexion dans la variable db
+  db = DBOpenRequest.result;
+
+  // exécute la fonction deleteData()
+  deleteData();
+};
+
+function deleteData() {
+  // ouvre un transaction en mode lecture/écriture pour effectuer la suppression
+  var transaction = db.transaction(["toDoList"], "readwrite");
+
+  // affiche le succès de la transaction.
+  transaction.oncomplete = function() {
+    note.innerHTML += '&lt;li&gt;Transaction effectuée: fin de la modification de la base de données.&lt;/li&gt;';
+  };
+
+  // affiche la cause de l’échec de la transaction.
+  transaction.onerror = function() {
+    note.innerHTML += '&lt;li&gt;Échec de la transaction: ' + transaction.error + ' la base de données n\'a pas été modifié&lt;/li&gt;';
+  };
+
+  // ouvre un accès au magasin d'objet toDoList
+  var objectStore = transaction.objectStore("toDoList");
+
+  // Retrouve l'enregistrement dont la clé est Walk dog
+   var objectStoreRequest = objectStore.get("Walk dog");
+
+  objectStoreRequest.onsuccess = function() {
+    //Affiche le succès de la requête
+    note.innerHTML += '&lt;li&gt;Enregistrement retrouvé.&lt;/li&gt;';
+
+    //affecte la valeur de l'enregistrement à la variable
+    var myRecord = objectStoreRequest.result;
+  };
+};
+</pre>
+
+<p class="note">Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBObjectStore-get-IDBRequest-any-key', 'get()')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité avec les navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, en partie</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans workers</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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>4.4</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Disponible dans workers</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>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}</li>
+ <li>{{domxref("IDBDatabase","Débuter une connexion")}}</li>
+ <li>{{domxref("IDBTransaction","Utilisé les transactions")}}</li>
+ <li>{{domxref("IDBKeyRange","Définir l'intervalle des clés")}}</li>
+ <li>{{domxref("IDBObjectStore","Accès aux magasins d'objets")}}</li>
+ <li>{{domxref("IDBCursor","Utiliser les curseur")}}</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="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
+</ul>
diff --git a/files/fr/web/api/idbobjectstore/getall/index.html b/files/fr/web/api/idbobjectstore/getall/index.html
new file mode 100644
index 0000000000..714ca578d7
--- /dev/null
+++ b/files/fr/web/api/idbobjectstore/getall/index.html
@@ -0,0 +1,128 @@
+---
+title: IDBObjectStore.getAll()
+slug: Web/API/IDBObjectStore/getAll
+translation_of: Web/API/IDBObjectStore/getAll
+---
+<p>{{ APIRef("IndexedDB") }}</p>
+
+<p>La méthode <strong><code>getAll()</code></strong> de l'interface {{domxref("IDBObjectStore")}} fait une {{domxref("IDBRequest","requête")}} qui renvoie un tableau ordonné suivant les clés, des valeurs de tous les enregistrements du magasin d'objet {{domxref("IDBObjectStore","relié")}}. On peut limité le nombre d'enregistrements en les filtrants suivant leurs clés ou en paramétrant le compteur.</p>
+
+<p>{{ Note("Cette méthode renverras un tableau vide si aucun enregistrement ne correspond. Si la valeur est undefined elle prendra une case du tableau.") }}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var request = objectStore.getAll(query, count);</pre>
+
+<h2 id="Paramètres">Paramètres</h2>
+
+<dl>
+ <dt>query {{optional_inline}}</dt>
+ <dd>Une clé ou l'{{domxref("IDBKeyRange","intervalle de clé")}} <strong>pour filtrer</strong>, seule les valeurs des enregistrements correspondant sont renvoyées. Par défaut toutes les valeurs des enregistrements du magasin d'objet sont renvoyées.</dd>
+ <dt>count {{optional_inline}}</dt>
+ <dd>Le nombre de valeurs d'enregistrement <strong>maximum renvoyées</strong>. Un nombre décimal sera tronqué. Zéro annule le compteur et toutes les valeurs sont retournées.</dd>
+</dl>
+
+<h2 id="Renvoie">Renvoie</h2>
+
+<dl>
+ <dt>Une {{domxref("IDBRequest","requête")}}</dt>
+ <dd>La propriété {{domxref("IDBRequest.result","result")}} de cette requête renvoie le tableau des valeurs des enregistrements en cas de succès.</dd>
+</dl>
+
+<h2 id="Exceptions">Exceptions</h2>
+
+<dl>
+ <dt><code>TransactionInactiveError</code></dt>
+ <dd>Cette {{domxref("DOMException","exception")}} est levée si la {{domxref("IDBTransaction","transaction")}} est inactive.</dd>
+ <dt><code>DataError</code></dt>
+ <dd>Cette {{domxref("DOMException","exception")}} est levée si la clé où l'{{domxref("IDBKeyRange","intervalle de clé")}} est invalide.</dd>
+ <dt><code>InvalidStateError</code></dt>
+ <dd>Cette {{domxref("DOMException","exception")}} est levée si le magasin d'objets a été supprimé.</dd>
+ <dt><code>TypeError</code></dt>
+ <dd>Cette {{domxref("DOMException","exception")}} est levée si le compteur n'est pas un nombre positif.</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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB2', '#dom-idbobjectstore-getall', 'getAll()')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_avec_les_navigateurs">Compatibilité avec les navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatChrome(48.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(48.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(48.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}</li>
+ <li>{{domxref("IDBDatabase","Débuter une connexion")}}</li>
+ <li>{{domxref("IDBTransaction","Utiliser les transactions")}}</li>
+ <li>{{domxref("IDBKeyRange","Définir l'intervalle des clés")}}</li>
+ <li>{{domxref("IDBObjectStore","Accès aux magasins d'objets")}}</li>
+ <li>{{domxref("IDBCursor","Utiliser les curseurs")}}</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="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
+</ul>
diff --git a/files/fr/web/api/idbobjectstore/getallkeys/index.html b/files/fr/web/api/idbobjectstore/getallkeys/index.html
new file mode 100644
index 0000000000..56a70e3e68
--- /dev/null
+++ b/files/fr/web/api/idbobjectstore/getallkeys/index.html
@@ -0,0 +1,176 @@
+---
+title: IDBObjectStore.getAllKeys()
+slug: Web/API/IDBObjectStore/getAllKeys
+tags:
+  - API
+  - IDBObjectStore
+  - IndexedDB
+  - Méthode
+  - Référence(2)
+translation_of: Web/API/IDBObjectStore/getAllKeys
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La méthode <strong><code>getAllKeys()</code></strong>, rattachée à l'interface {{domxref("IDBObjectStore")}}, renvoie un objet  {{domxref("IDBRequest")}} qui permet de récupérer l'ensemble des clés pour les objets qui correspondent au critère passé en argument (ou les clés de tous les objets du magasin si aucun paramètre n'est fourni).</p>
+
+<p>Si une valeur est trouvée, un clone structurelle sera créé et fourni comme résultat pour la requête.</p>
+
+<p>Cette méthode produira le même résultat pour :</p>
+
+<ul>
+ <li>un enregistrement qui n'existe pas dans la base de données</li>
+ <li>un enregistrement qui possède une valeur indéfinie</li>
+</ul>
+
+<p>Pour différencier ces deux situations, on peut appeler la méthode {{domxref("IDBObjectStore.openCursor","openCursor()")}} avec la même clé. Cette méthode fournit un curseur si l'enregistrement existe et ne fournit aucun curseur s'il n'y a pas d'enregistrement.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var request = <em>objectStore</em>.getAllKeys();
+var request = <em>objectStore</em>.getAllKeys(<em>query</em>);
+var request = <em>objectStore</em>.getAllKeys(<em>query</em>, <em>count</em>);</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>query</code> {{optional_inline}}</dt>
+ <dd>Une valeur qui est (ou se résoud) en un intervalle de clés ({{domxref("IDBKeyRange")}}).</dd>
+ <dt><code>count</code> {{optional_inline}}</dt>
+ <dd>Une valeur qui définit le nombre de valeurs à renvoyer si plusieurs correspondent. Cette valeur doit être supérieure à  <code>0</code> ou inférieure <code>à 2<sup>32</sup>-1</code>, sinon une exception {{jsxref("TypeError")}} sera levée.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un objet {{domxref("IDBRequest")}} pour lequel seront déclenchés les différents évènements relatifs à l'opération.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Cette méthode peut déclencher une exception {{domxref("DOMException")}} ayant le type suivant :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Exception</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>TransactionInactiveError</code></td>
+   <td>Le magasin d'objets ({{domxref("IDBObjectStore")}}) associé à la transaction est inactif.</td>
+  </tr>
+  <tr>
+   <td><code>DataError</code></td>
+   <td>
+    <p>La clé ou l'intervalle de clé fourni contient une clé invalide ou est nul.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>InvalidStateError</code></td>
+   <td>Le magasin d'objets ({{domxref("IDBObjectStore")}}) a été supprimé ou retiré.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="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-idbobjectstore-getallkeys', 'getAll()')}}</td>
+   <td>{{Spec2('IndexedDB w')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatChrome(48.0)}}</td>
+   <td>{{CompatGeckoDesktop(44)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(35)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatChrome(48.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(35)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(48.0)}}</td>
+   <td>{{CompatGeckoMobile(44)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile(35)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(48.0)}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(48.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile(35)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(48.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Cette fonctionnalité était disponible depuis Firefox 27 via la préférence <code>dom.indexedDB.experimental</code>, qui était désactivée par défaut.</p>
+
+<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/idbobjectstore/getkey/index.html b/files/fr/web/api/idbobjectstore/getkey/index.html
new file mode 100644
index 0000000000..9e56d3b408
--- /dev/null
+++ b/files/fr/web/api/idbobjectstore/getkey/index.html
@@ -0,0 +1,174 @@
+---
+title: IDBObjectStore.getKey()
+slug: Web/API/IDBObjectStore/getKey
+translation_of: Web/API/IDBObjectStore/getKey
+---
+<p>{{ APIRef("IndexedDB") }}</p>
+
+<div>
+<p>La méthode <strong><code>getKey()</code></strong> de l'interface {{domxref("IDBObjectStore")}} retourne un objet {{domxref("IDBRequest")}}, et, dans un <em>thread</em> séparé, retourne la clé sélectionnée par la requête spécifiée. Cela permet de retrouver un enregistrement spécifique depuis un espace de stockage déterminé.</p>
+</div>
+
+<p>Si la clé a bien été retrouvée, alors un clone structuré (une copie conforme) sera créée et servira comme résultat à l'objet de requête.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var request = <em>objectStore</em>.getKey(<em>key</em>);</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><em>key</em></dt>
+ <dd>La clé ou l'intervale de clé qui identifie l'enregistrement à retrouver.</dd>
+</dl>
+
+<h3 id="Return_Value">Return Value</h3>
+
+<p>An {{domxref("IDBRequest")}} object on which subsequent events related to this operation are fired.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>This method may raise a {{domxref("DOMException")}} of one of the following types:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Exception</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>TransactionInactiveError</code></td>
+   <td>This {{domxref("IDBObjectStore")}}'s transaction is inactive.</td>
+  </tr>
+  <tr>
+   <td><code>DataError</code></td>
+   <td>
+    <p>The key or key range provided contains an invalid key.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>InvalidStateError</code></td>
+   <td>The {{domxref("IDBObjectStore")}} has been deleted or removed.<br>
+     </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js">let openRequest = indexedDB.open("telemetry");
+openRequest.onsuccess = (event) =&gt; {
+  let db = event.target.result;
+  let store = db.transaction("netlogs").objectStore("netlogs");
+
+  let today = new Date();
+  let yesterday = new Date(today);
+  yesterday.setDate(today.getDate() - 1);
+  let request = store.getKey(IDBKeyRange(yesterday, today));
+  request.onsuccess = (event) =&gt; {
+    let when = event.target.result;
+    alert("The 1st activity in last 24 hours was occurred at " + when);
+  };
+};</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('IndexedDB 2', '#dom-idbobjectstore-getkey', 'getKey()')}}</td>
+   <td>{{Spec2('IndexedDB 2')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(58)}}</td>
+   <td>{{CompatGeckoDesktop("51.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatChrome(58)}}</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>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(58)}}</td>
+   <td>{{CompatChrome(58)}}</td>
+   <td>{{CompatGeckoMobile("51.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatChrome(58)}}</td>
+   <td>{{CompatChrome(58)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB">Using IndexedDB</a></li>
+ <li>Starting transactions: {{domxref("IDBDatabase")}}</li>
+ <li>Using transactions: {{domxref("IDBTransaction")}}</li>
+ <li>Setting a range of keys: {{domxref("IDBKeyRange")}}</li>
+ <li>Retrieving and making changes to your data: {{domxref("IDBObjectStore")}}</li>
+ <li>Using cursors: {{domxref("IDBCursor")}}</li>
+ <li>Reference example: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
+</ul>
diff --git a/files/fr/web/api/idbobjectstore/index.html b/files/fr/web/api/idbobjectstore/index.html
new file mode 100644
index 0000000000..b2c219650e
--- /dev/null
+++ b/files/fr/web/api/idbobjectstore/index.html
@@ -0,0 +1,238 @@
+---
+title: IDBObjectStore
+slug: Web/API/IDBObjectStore
+translation_of: Web/API/IDBObjectStore
+---
+<p>{{APIRef("IndexedDB")}}</p>
+
+<p>L'interface <strong><code>IDBObjectStore</code></strong> de l'{{domxref("IndexedDB_API","API IndexedDB")}} est un accès aux magasins d'objet de la base de données.</p>
+
+<p>Le magasin d'objet emmagasine des enregistrements. Chaque enregistrement est constitué d'un couple clé/valeur. Chaque valeurs est indexée sur sa clé. Les clés sont triées pour former l'index primaire du magasin. Ce qui permet un accès rapide et ordonnée aux valeurs.</p>
+
+<p>Le magasin d'objet peut en plus de l'index primaire avoir des index qui ordonnent les enregistrements sur d'autres clés. Ces index se mettent automatiquement à jour dans la plupart des cas et permettent de mettre des contraintes d’unicités pour d'autres clés que la clé primaire du magasin d'objet.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("IDBObjectStore.add()")}}</dt>
+ <dd>Une {{domxref("IDBRequest","requête")}} pour ajouter un enregistrement au magasin d'objet relié, un <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-dom-interfaces.html#structured-clone">clone structuré</a> de la valeur passé en paramètre et sa clé .</dd>
+ <dt>{{domxref("IDBObjectStore.clear()")}}</dt>
+ <dd>Une {{domxref("IDBRequest","requête")}} pour vider le magasin d'objet relié.</dd>
+ <dt>{{domxref("IDBObjectStore.delete()")}}</dt>
+ <dd>Une {{domxref("IDBRequest","requête")}} de suppression d'enregistrement(s) du magasin d'objet relié.</dd>
+ <dt>{{domxref("IDBObjectStore.get()")}}</dt>
+ <dd>Une {{domxref("IDBRequest","requête")}} pour renvoyer la valeur d'un enregistrement du magasin d'objet relié.</dd>
+ <dt>{{domxref("IDBObjectStore.getAll()")}}</dt>
+ <dd>Une {{domxref("IDBRequest","requête")}} qui renvoie un tableau ordonné suivant les clés, des valeurs de tous les enregistrements du magasin d'objet relié. On peut limité le nombre d'enregistrements en les filtrants suivant leurs clés ou en paramétrant le compteur.</dd>
+ <dt>{{domxref("IDBObjectStore.getAllKeys()")}}</dt>
+ <dd>Une {{domxref("IDBRequest","requête")}} qui renvoie la liste de toutes les clés des enregistrements du magasin d'objet. On peut limité le nombre d'enregistrements en les filtrants suivant leurs clés ou en paramétrant le compteur.</dd>
+ <dt>{{domxref("IDBObjectStore.createIndex()")}}</dt>
+ <dd>Met en place sur le magasin d'objet relié, un nouvel index et en renvoie l'{{domxref("IDBIndex","accès")}}.</dd>
+ <dt>{{domxref("IDBObjectStore.deleteIndex()")}}</dt>
+ <dd>Supprime l'index dont le nom est passé en paramètre, du magasin d'objet relié.</dd>
+ <dt>{{domxref("IDBObjectStore.index()")}}</dt>
+ <dd>L'{{domxref("IDBIndex","accès")}} à l'index dont le nom est passé en paramètre du magasin d'objet relié.</dd>
+ <dt>{{domxref("IDBObjectStore.put()")}}</dt>
+ <dd>Une {{domxref("IDBRequest","requête")}} pour ajouter ou mettre à jour un enregistrement du magasin d'objet relié, un <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-dom-interfaces.html#structured-clone">clone structuré</a> de la valeur passée en paramètre et sa clé.</dd>
+ <dt>{{domxref("IDBObjectStore.openCursor()")}}</dt>
+ <dd>Une {{domxref("IDBRequest","requête")}} récursive suivant un {{domxref("IDBCursorWithValue","curseur avec valeur")}} qui itère le magasin d'objet relié.</dd>
+ <dt>{{domxref("IDBObjectStore.openKeyCursor()")}}</dt>
+ <dd>Une {{domxref("IDBRequest","requête")}} récursive suivant un {{domxref("IDBCursor","curseur")}} qui itère le magasin d'objet relié.</dd>
+ <dt>{{domxref("IDBObjectStore.count()")}}</dt>
+ <dd>Une {{domxref("IDBRequest","requête")}} au magasin d'objet relié. La requête compte le nombre d'enregistrements dans ce magasin d'objet ou sur l'{{domxref("IDBKeyRange","intervalle de clé")}} passé en paramètre.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("IDBObjectStore.indexNames")}} {{readonlyInline}}</dt>
+ <dd>La liste des noms d'index du magasin d'objet relié.</dd>
+ <dt>{{domxref("IDBObjectStore.keyPath")}} {{readonlyInline}}</dt>
+ <dd>Le <a href="https://developer.mozilla.org/fr/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB#gloss_keypath">nom de la clé</a> du magasin d'objets relié.</dd>
+ <dt>{{domxref("IDBObjectStore.name")}} {{readonlyInline}}</dt>
+ <dd>Le nom du magasin d'objet relié.</dd>
+ <dt>{{domxref("IDBObjectStore.transaction")}} {{readonlyInline}}</dt>
+ <dd>La {{domxref("IDBTransaction","transaction")}} à laquelle l'accès du magasin d'objet appartient.</dd>
+ <dt>{{domxref("IDBObjectStore.autoIncrement")}} {{readonlyInline}}</dt>
+ <dd>La position du drapeau d’incrémentation automatique du magasin d'objet relié.</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Cet exemple montre différents usages de l'accès au magasin d'objet. On met à jour la structure de donnée avec {{domxref("IDBObjectStore.createIndex")}} dans un gestionnaire d'événement <code>onupgradeneeded</code>. On ajoute un nouvel enregistrement avec {{domxref("IDBObjectStore.add")}}.</p>
+
+<pre class="brush: js">// connexion à la base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+// gère le succès de la connexion
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '&lt;li&gt;Connexion ouverte.&lt;/li&gt;';
+
+  //affect la connexion à la variable db.
+  db = DBOpenRequest.result;
+};
+
+// Ce gestionnaire d'événement s'active quand on à besoin d'une nouvelle version de la base de donnée.
+// Si la base n'existais pas avant ou
+// si on ouvre une nouvelle version avec window.indexedDB.open.
+DBOpenRequest.onupgradeneeded = function(event) {
+  var db = event.target.result;
+
+  db.onerror = function(event) {
+    note.innerHTML += '&lt;li&gt;Erreur de chargement de la base.&lt;/li&gt;';
+  };
+
+  // Ajoute un magasin d'objets à la base de données
+  var objectStore = db.createObjectStore("toDoList", { keyPath: "taskTitle" });
+
+  // défini des index sur ce magasin
+
+  objectStore.createIndex("hours", "hours", { unique: false });
+  objectStore.createIndex("minutes", "minutes", { unique: false });
+  objectStore.createIndex("day", "day", { unique: false });
+  objectStore.createIndex("month", "month", { unique: false });
+  objectStore.createIndex("year", "year", { unique: false });
+
+  objectStore.createIndex("notified", "notified", { unique: false });
+
+  note.innerHTML += '&lt;li&gt;Le magasin d\'objet est ajouté.&lt;/li&gt;';
+};
+
+// Un nouvel enregistrement à ajouter
+var newItem = [
+ { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: 'December', year: 2013, notified: "no" }
+];
+
+// ouvre une transaction en lecture/écriture sur la connexion, prête à ajouter l'enregistrement.
+var transaction = db.transaction(["toDoList"], "readwrite");
+
+// affiche le succès de la transaction
+transaction.oncomplete = function(event) {
+  note.innerHTML += '&lt;li&gt;La transaction à été effectuée.&lt;/li&gt;';
+};
+
+transaction.onerror = function(event) {
+  note.innerHTML += '&lt;li&gt;La transaction n\'as pue aboutir.&lt;/li&gt;';
+};
+
+// Un accès à toDoList pour la transaction
+var objectStore = transaction.objectStore("toDoList");
+// Ajoute l'enregistrement au magasin d'objet
+var objectStoreRequest = objectStore.add(newItem[0]);
+
+//l'enregistrement c'est bien passé.
+objectStoreRequest.onsuccess = function(event) {
+  note.innerHTML += '&lt;li&gt;L\'enregistrement à été ajouté au magasin d\'objet.&lt;/li&gt;';
+}</pre>
+
+<p class="note">Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#idl-def-IDBObjectStore', 'IDBObjectStore')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité avec les navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, en partie</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponibke dans workers</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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponibke dans workers</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}</li>
+ <li>{{domxref("IDBDatabase","Débuter une connexion")}}</li>
+ <li>{{domxref("IDBTransaction","Utilisé les transactions")}}</li>
+ <li>{{domxref("IDBKeyRange","Définir l'intervalle des clés")}}</li>
+ <li>{{domxref("IDBCursor","Utiliser les curseur")}}</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="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
+</ul>
diff --git a/files/fr/web/api/idbobjectstore/index/index.html b/files/fr/web/api/idbobjectstore/index/index.html
new file mode 100644
index 0000000000..d4f2db4edb
--- /dev/null
+++ b/files/fr/web/api/idbobjectstore/index/index.html
@@ -0,0 +1,200 @@
+---
+title: IDBObjectStore.index()
+slug: Web/API/IDBObjectStore/index
+tags:
+  - API
+  - IDBObjectStore
+  - IndexedDB
+  - Méthode
+  - Reference
+translation_of: Web/API/IDBObjectStore/index
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La méthode <strong><code>index()</code></strong>, rattachée à l'interface {{domxref("IDBObjectStore")}}, permet d'ouvrir un index sur le magasin d'objet courant pour, par exemple, renvoyer une liste d'enregistrements triés par cet index grâce à un curseur.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">objectStore.index(nomIndex);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>nomIndex</code></dt>
+ <dd>Le nom de l'index qu'on souhaite ouvrir.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un objet {{domxref("IDBIndex")}} qui permet d'accéder à l'index.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Cette méthode peut déclencher une exception {{domxref("DOMException")}} ayant l'un des types suivants :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Exception</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>InvalidStateError</code></td>
+   <td>L'objet correspondant au magasin d'objet a été supprimé ou la transaction a été clôturée.</td>
+  </tr>
+  <tr>
+   <td><code>NotFoundError</code></td>
+   <td>Il n'existe pas d'index pour ce nom dans la base de données (la recherche est sensible à la casse).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on ouvre une transaction sur un magasin d'objet et on accède à l'index <code>lName</code> de la base de données. Ensuite, on ouvre un curseur sur l'index grâce à la méthode {{domxref("IDBIndex.openCursor")}} — cela fonctionne de la même façon que d'ouvrir un curseur à même le magasin d'objet grâce à {{domxref("IDBObjectStore.openCursor")}} sauf que, cette fois, les enregistrements sont renvoyés triés selon l'index et non selon la clé primaire.</p>
+
+<p>Enfin, on parcourt chaque enregistrement pour l'ajouter dans un tableau HTML.</p>
+
+<pre class="brush: js">function displayDataByIndex() {
+  tableEntry.innerHTML = '';
+  var transaction = db.transaction(['contactsList'], 'readonly');
+  var objectStore = transaction.objectStore('contactsList');
+
+  var myIndex = objectStore.index('lName');
+  myIndex.openCursor().onsuccess = function(event) {
+    var cursor = event.target.result;
+    if(cursor) {
+      var tableRow = document.createElement('tr');
+      tableRow.innerHTML =   '&lt;td&gt;' + cursor.value.id + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.lName + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.fName + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.jTitle + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.company + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.eMail + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.phone + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.age + '&lt;/td&gt;';
+      tableEntry.appendChild(tableRow);
+
+      cursor.continue();
+    } else {
+      console.log('Éléments affichés.');
+    }
+  };
+};</pre>
+
+<div class="note">
+<p><strong>Note :</strong> pour un exemple fonctionnel complet, voir notre <a href="https://github.com/mdn/IDBIndex-example">exemple sur GitHub</a> (<a href="https://mdn.github.io/IDBIndex-example/">la démonstration associée</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('IndexedDB', '#widl-IDBObjectStore-index-IDBIndex-DOMString-name', 'index()')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, partial</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</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/idbobjectstore/indexnames/index.html b/files/fr/web/api/idbobjectstore/indexnames/index.html
new file mode 100644
index 0000000000..c3cd0288e6
--- /dev/null
+++ b/files/fr/web/api/idbobjectstore/indexnames/index.html
@@ -0,0 +1,188 @@
+---
+title: IDBObjectStore.indexNames
+slug: Web/API/IDBObjectStore/indexNames
+tags:
+  - API
+  - IDBObjectStore
+  - IndexedDB
+  - Propriété
+  - Reference
+translation_of: Web/API/IDBObjectStore/indexNames
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La propriété <strong><code>indexNames</code></strong>, rattachée à l'interface {{domxref("IDBObjectStore")}}, renvoie la liste des noms des index pour les objets du magasin d'objets courant.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var myindexNames = objectStore.indexNames;</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une liste {{domxref("DOMStringList")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, on initialise une transaction de lecture/écriture sur une base de données en ajoutant des données dans un magasin d'objets via la méthode <code>add()</code>. Une fois l'objet créé, on affiche <code>objectStore.indexNames</code> en sortie de la console. Pour un exemple complet et fonctionnel, vous pouvez utiliser notre application <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">tester la démo</a>).</p>
+
+<pre class="brush: js">// On commence par ouvrir la base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '&lt;li&gt;Base de données initialisée.&lt;/li&gt;';
+
+  // On enregistre le résultat de l'ouverture
+  // dans la variable db afin de l'utiliser
+  // ensuite
+  db = this.result;
+
+  // On exécute la fonction addData() afin
+  // d'ajouter des données à la base de données
+  addData();
+};
+
+function addData() {
+  // On crée un nouvel objet prêt à être inséré
+  // dans la base de données
+  var newItem = [ { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: "December", year: 2013, notified: "no" } ];
+
+  // On ouvre une transaction en lecture/écriture
+  // vers la base de données afin d'ajouter des
+  // données
+  var transaction = db.transaction(["toDoList"], "readwrite");
+
+  // On indique le succès de la transaction
+  transaction.oncomplete = function(event) {
+    note.innerHTML += '&lt;li&gt;Transaction terminée : modification finie.&lt;/li&gt;';
+  };
+
+
+  transaction.onerror = function(event) {
+    note.innerHTML += '&lt;li&gt;Transaction non-ouverte à cause d'une erreur. Les doublons ne sont pas autorisés.&lt;/li&gt;';
+  };
+
+  // On crée un magasin d'objet pour la transaction
+  // et on affiche indexNames dans la console
+  var objectStore = transaction.objectStore("toDoList");
+  console.log(objectStore.indexNames);
+
+  // On ajoute l'objet newItem au magasin d'objets
+  var objectStoreRequest = objectStore.add(newItem[0]);
+
+  objectStoreRequest.onsuccess = function(event) {
+    // On indique le succès de l'ajout de l'objet
+    // dans la base de données
+    note.innerHTML += '&lt;li&gt;Un nouvel élément a été ajouté dans la base de données.&lt;/li&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('IndexedDB', '#widl-IDBObjectStore-indexNames', 'indexNames')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</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/idbobjectstore/keypath/index.html b/files/fr/web/api/idbobjectstore/keypath/index.html
new file mode 100644
index 0000000000..16e46308c8
--- /dev/null
+++ b/files/fr/web/api/idbobjectstore/keypath/index.html
@@ -0,0 +1,195 @@
+---
+title: IDBObjectStore.keyPath
+slug: Web/API/IDBObjectStore/keyPath
+tags:
+  - API
+  - IDBObjectStore
+  - IndexedDB
+  - Propriété
+  - Reference
+  - keyPath
+translation_of: Web/API/IDBObjectStore/keyPath
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La propriété <strong><code>keyPath</code></strong> de l'interface {{domxref("IDBObjectStore")}} renvoie le <a href="/fr/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB#gloss_keypath">chemin de la clé</a> de ce magasin d'objet.</p>
+
+<p>Si cette propriété vaut <code>null</code> l'application doit fournir une clé pour chaque opération de modification.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var mykeyPath = objectStore.keyPath;</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>N'importe quel type de valeur.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans l'exemple suivant, on initialise une transaction de lecture/écriture sur une base de données en ajoutant des données dans un magasin d'objets via la méthode <code>add()</code>. Une fois l'objet créé, on affiche <code>objectStore.keyPath</code> en sortie de la console. Pour un exemple complet et fonctionnel, vous pouvez utiliser notre application <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">tester la démo</a>).</p>
+
+<pre class="brush: js">// On commence par ouvrir la base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '&lt;li&gt;Initialisation de la base.&lt;/li&gt;';
+
+  // On enregistre le résultat de l'ouverture
+  // dans la variable db afin de l'utiliser
+  // ensuite
+  var db = DBOpenRequest.result;
+
+  // On utilise la fonction addData() afin d'ajouter
+  // des données à la base de données
+  addData();
+};
+
+function addData() {
+  // On crée un nouvel objet prêt à être inséré
+  // dans la base de données
+  var newItem = [ { taskTitle: "Promener le chien", hours: 19, minutes: 30, day: 24, month: "Décembre", year: 2013, notified: "no" } ];
+
+  // On ouvre une transaction en lecture/écriture
+  // vers la base de données afin d'ajouter des
+  // données
+  var transaction = db.transaction(["toDoList"], "readwrite");
+
+  // On indique le succès de la transaction
+  transaction.oncomplete = function(event) {
+    note.innerHTML += '&lt;li&gt;Transaction terminée : modification finie.&lt;/li&gt;';
+  };
+
+  transaction.onerror = function(event) {
+    note.innerHTML += '&lt;li&gt;Transaction non-ouverte à cause d'une erreur. Les doublons ne sont pas autorisés.&lt;/li&gt;';
+  };
+
+  // On crée un magasin d'objet pour la transaction
+  // et on affiche KeyPath dans la console
+  var objectStore = transaction.objectStore("toDoList");
+  console.log(objectStore.keyPath);
+
+  // On ajoute l'objet newItem au magasin d'objets
+  var objectStoreRequest = objectStore.add(newItem[0]);
+
+  objectStoreRequest.onsuccess = function(event) {
+    // On indique le succès de l'ajout de l'objet
+    // dans la base de données
+    note.innerHTML += '&lt;li&gt;Un nouvel élément a été ajouté dans la base de données.&lt;/li&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('IndexedDB', '#widl-IDBObjectStore-keyPath', 'keyPath')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support<br>
+    simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, partiel</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview 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>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support<br>
+    Simple</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</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/idbobjectstore/name/index.html b/files/fr/web/api/idbobjectstore/name/index.html
new file mode 100644
index 0000000000..4fb4c3fbb7
--- /dev/null
+++ b/files/fr/web/api/idbobjectstore/name/index.html
@@ -0,0 +1,216 @@
+---
+title: IDBObjectStore.name
+slug: Web/API/IDBObjectStore/name
+tags:
+  - API
+  - IDBObjectStore
+  - IndexedDB
+  - Propriété
+  - Reference
+translation_of: Web/API/IDBObjectStore/name
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La propriété <strong><code>name</code></strong>, rattachée à l'interface {{domxref("IDBObjectStore")}}, indique le nom du magasin d'objets courant.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>nomDuMagasin</em> = <em>IDBObjectStore</em>.name;
+<em>IDBObjectStore</em>.name = <em>nouveauNom</em>;</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une chaîne de caractères qui contient le nom du magasin d'objet.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Plusieurs exceptions peuvent être levées lorsqu'on tente de modifier le nom d'un magasin d'objets.</p>
+
+<dl>
+ <dt><code>InvalidStateError</code></dt>
+ <dd>Le magasin d'objets a été supprimé ou la transaction courante n'est pas une transaction de mise à jour : il est uniquemnet possible d'opérer un renommage lorsque le mode de la transaction est <code>"versionchange"</code>.</dd>
+ <dt><code>TransactionInactiveError</code></dt>
+ <dd>La transaction actuelle est inactive.</dd>
+ <dt><code>ConstraintError</code></dt>
+ <dd>Un magasin d'objets utilise déjà le nom qu'on souhaite employer.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans le fragment de code qui suit, on ouvre une transaction en lecture/écriture pour la base de données et on ajoute des données au magasin d'objets grâce à la méthode <code>add()</code>. Une fois que le magasin d'objets a été créé, on inscrit la valeur de <code>objectStore.name</code> dans la console. Pour un exemple complet, voir notre application <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> (cf. également <a href="https://mdn.github.io/to-do-notifications/">la démonstration <em>live</em></a>).</p>
+
+<pre class="brush: js">// On ouvre la base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '&lt;li&gt;Initialisation de la base de données&lt;/li&gt;';
+
+  // On enregistre le résultat de l'ouverture dans la variable
+  // db afin de l'utiliser ensuite.
+  db = DBOpenRequest.result;
+
+  // On exécute la fonction addData() afin d'ajouter des
+  // données à la base de données
+  addData();
+};
+
+function addData() {
+  // On crée un nouvel objet pour l'insérer dans la base
+  var newItem = [ { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: "December", year: 2013, notified: "no" } ];
+
+  // On ouvre une transaction en lecture/écriture
+  // afin d'ajouter les données
+  var transaction = db.transaction(["toDoList"], "readwrite");
+
+  // On gère le cas où la transaction est effectuée correctement
+  transaction.oncomplete = function(event) {
+    note.innerHTML += '&lt;li&gt;Transaction terminée : modification appliquée.&lt;/li&gt;';
+  };
+
+  transaction.onerror = function(event) {
+    note.innerHTML += '&lt;li&gt;Transaction non ouverte. Les doublons sont interdits.&lt;/li&gt;';
+  };
+
+  // On crée un magasin d'objets pour la transaction
+  var objectStore = transaction.objectStore("toDoList");
+  console.log(objectStore.name);
+
+  // On ajoute l'objet newItem dans le magasin d'objet
+  var objectStoreRequest = objectStore.add(newItem[0]);
+
+  objectStoreRequest.onsuccess = function(event) {
+    // On rapporte la réussite de l'ajout de l'objet en base
+    note.innerHTML += '&lt;li&gt;Nouvel élément ajouté dans la base de données.&lt;/li&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('IndexedDB', '#widl-IDBObjectStore-name', 'name')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop(16)}}</td>
+   <td>10</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(37)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Renommage possible via le mutateur <code>name</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(49)}}</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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(22)}}</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(37)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Renommage possible via le mutateur <code>name</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(49)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</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/idbobjectstore/opencursor/index.html b/files/fr/web/api/idbobjectstore/opencursor/index.html
new file mode 100644
index 0000000000..6109ea0611
--- /dev/null
+++ b/files/fr/web/api/idbobjectstore/opencursor/index.html
@@ -0,0 +1,193 @@
+---
+title: IDBObjectStore.openCursor()
+slug: Web/API/IDBObjectStore/openCursor
+tags:
+  - API
+  - IDBObjectStore
+  - IndexedDB
+  - Méthode
+  - Reference
+translation_of: Web/API/IDBObjectStore/openCursor
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La méthode <strong><code>openCursor()</code></strong>, rattachée à l'interface {{domxref("IDBObjectStore")}}, renvoie un objet {{domxref("IDBRequest")}} et, dans un <em>thread</em> séparé, renvoie un nouvel objet {{domxref("IDBCursorWithValue")}} qu'on peut utiliser pour parcourir un magasin d'objets avec un curseur.</p>
+
+<p>Afin de déterminer si l'opération s'est déroulée correctement, on pourra surveiller l'évènement <code>success</code>.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var requete = ObjectStore.openCursor(optionalKeyRange, optionalDirection);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>range</code> {{optional_inline}}</dt>
+ <dd>Une clé ou un intervalle de clés ({{domxref("IDBKeyRange")}}) qu'on souhaite parcourir. Si une seule clé est passée en argument, l'intervalle utilisé pour le curseur sera restreint à cette seule clé. Si aucune valeur n'est passée pour cet argument, l'intervalle utilisé pour le curseur englobera tous les enregistrements du magasin d'objets.</dd>
+ <dt><code>direction</code> {{optional_inline}}</dt>
+ <dd>Un objet {{domxref("IDBCursorDirection")}} qui indique la direction de parcours du curseur. La valeur par défaut est <code>"next"</code>.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un objet {{domxref("IDBRequest")}} sur lequel seront déclenchés les évènements relatifs à l'opération.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Cette méthode peut déclencher une exception {{domxref("DOMException")}} ayant l'un des types suivants :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Exception</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>InvalidStateError</code></td>
+   <td>L'objet {{domxref("IDBObjectStore")}} ou l'objet {{domxref("IDBIndex")}} a été supprimé.</td>
+  </tr>
+  <tr>
+   <td><code>TransactionInactiveError</code></td>
+   <td>La transaction rattachée au magasin d'objets ({{domxref("IDBObjectStore")}}) est inactive.</td>
+  </tr>
+  <tr>
+   <td><code>DataError</code></td>
+   <td>La clé ou l'intervalle de clés indiqué est invalide.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans ce fragment de code, on crée une transaction, on ouvre le magasin d'objets souhaité puis on place un curseur pour parcourir tous les enregistrements du magasin d'objets :</p>
+
+<pre class="brush: js">var transaction = db.transaction("name", "readonly");
+var objectStore = transaction.objectStore("name");
+var request = objectStore.openCursor();
+request.onsuccess = function(event) {
+  var cursor = event.target.result;
+  if(cursor) {
+    // cursor.value contient l'enregistrement courant
+    // pendant le parcours, on peut éventuellement le manipuler ici
+    cursor.continue();
+  } else {
+    // il n'y a plus de résultats
+  }
+};
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="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', '#widl-IDBIndex-openCursor-IDBRequest-any-range-IDBCursorDirection-direction', 'openCursor')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, partial</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview 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>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</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/idbobjectstore/openkeycursor/index.html b/files/fr/web/api/idbobjectstore/openkeycursor/index.html
new file mode 100644
index 0000000000..d5d23efe42
--- /dev/null
+++ b/files/fr/web/api/idbobjectstore/openkeycursor/index.html
@@ -0,0 +1,181 @@
+---
+title: IDBObjectStore.openKeyCursor()
+slug: Web/API/IDBObjectStore/openKeyCursor
+tags:
+  - API
+  - IDBObjectStore
+  - IndexedDB
+  - Méthode
+  - Reference
+translation_of: Web/API/IDBObjectStore/openKeyCursor
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La méthode <strong><code>openKeyCursor()</code></strong>, rattachée à l'interface {{domxref("IDBObjectStore")}}, renvoie un objet {{domxref("IDBRequest")}} dont le résultat sera un curseur ({{domxref("IDBCursor")}}) qui pourra être utilisé afin de parcourir les enregistrements correspondants. Cette méthode est utilisée afin de parcourir les clés d'un magasin d'objets grâce à un curseur.</p>
+
+<p>Afin de déterminer si le curseur a bien été ajouté, on pourra écouter l'évènement <code>success</code> sur le résultat de la méthode.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>requete</em> = <em>objectStore</em>.openKeyCursor(<em>optionalKeyRange</em>, <em>optionalDirection</em>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>optionalKeyRange</code></dt>
+ <dd>L'intervalle de clés qu'on souhaite parcourir. Si une seule clé est fournie, l'intervalle constitué ne contiendra que cette clé. Si aucune valeur n'est passée en argument, le curseur produit parcourera tous les enregistrements du magasin d'objets.</dd>
+ <dt><code>optionalDirection</code></dt>
+ <dd>Un objet {{domxref("IDBCursorDirection")}} qui indique la direction dans laquelle le curseur doit parcourir les évènements. La valeur par défaut est <code>"next"</code>.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un objet {{domxref("IDBRequest")}} sur lequel seront déclenchés les différents évènements relatifs à cette opération.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Cette méthode peut déclencher une exception {{domxref("DOMException")}} ayant l'un des types suivants :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Exception</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>InvalidStateError</code></td>
+   <td>Le magasin d'objets ({{domxref("IDBObjectStore")}} ou l'index ({{domxref("IDBIndex")}}) a été supprimé.</td>
+  </tr>
+  <tr>
+   <td><code>TransactionInactiveError</code></td>
+   <td>La transaction associée au magasin d'objet ({{domxref("IDBObjectStore")}}) est inactive.</td>
+  </tr>
+  <tr>
+   <td><code>DataError</code></td>
+   <td>La clé ou l'intervalle de clés indiqué est invalide.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans le fragment de code suivant, on crée une transaction, on l'utilise sur un magasin d'objets donné puis on utilise le curseur pour parcourir tous les enregistrements du magasin d'objets :</p>
+
+<pre class="brush: js">var transaction = db.transaction("name", "readonly");
+var objectStore = transaction.objectStore("name");
+var request = objectStore.openKeyCursor();
+request.onsuccess = function(event) {
+  var cursor = event.target.result;
+  if(cursor) {
+    // cursor.key contient la clé de l'enregistrement courant
+    // à la différence de openCursor, il n'y a pas de cursor.value
+    cursor.continue();
+  } else {
+    // Il n'y a plus d'autres résultats
+  }
+};</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB2', '#dom-idbobjectstore-openkeycursor', 'openKeyCursor')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatChrome(48.0)}}</td>
+   <td>{{CompatGeckoDesktop("44.0")}} [1]</td>
+   <td>10, partial</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatChrome(48.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(35)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatChrome(48.0)}}</td>
+   <td>{{CompatGeckoMobile("44.0")}} [1]</td>
+   <td>10</td>
+   <td>22</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(48.0)}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(48.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile(35)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(48.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Cette fonctionnalité était disponible depuis Firefox 27 via une préférence : <code>dom.indexedDB.experimental</code> qui était désactivée par défaut.</p>
+
+<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/idbobjectstore/put/index.html b/files/fr/web/api/idbobjectstore/put/index.html
new file mode 100644
index 0000000000..4122bd300f
--- /dev/null
+++ b/files/fr/web/api/idbobjectstore/put/index.html
@@ -0,0 +1,229 @@
+---
+title: IDBObjectStore.put()
+slug: Web/API/IDBObjectStore/put
+tags:
+  - API
+  - IDBObjectStore
+  - IndexedDB
+  - Méthode
+  - Reference
+translation_of: Web/API/IDBObjectStore/put
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La méthode <strong><code>put()</code></strong>, rattachée à l'interface {{domxref("IDBObjectStore")}}, renvoie un objet {{domxref("IDBRequest")}} et, dans un autre <em>thread</em>, crée <a href="https://www.whatwg.org/specs/web-apps/current-work/multipage/common-dom-interfaces.html#structured-clone">un clone structuré</a> de la valeur puis enregistre ce clone dans le magasin d'objet. Cette méthode permet ainsi d'ajouter de nouveaux enregistrements ou de mettre à jour des enregistrements existants dans un magasin d'objet lorsque la transaction est en mode <code>readwrite</code> (lecture-écriture)</p>
+
+<p>Si l'enregistrement est stocké avec succès, un évènement de succès sera déclenché sur la requête renvoyée par la méthode. La propriété <code>result</code> de cette requête contiendra la clé de l'enregistrement créé ou mis à jour. La propriété <code>transaction</code> de cette requête sera la transaction dans laquelle le magasin d'objet est ouvert.</p>
+
+<p>La méthode <code>put()</code> permet d'ajouter ou de mettre à jour. Si on souhaite uniquement insérer, on utilisera plutôt {{domxref("IDBObjectStore.add")}}.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var request = objectStore.put(monElement);
+var request = objectStore.put(monElement, cleOptionnelle);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>monElement</code></dt>
+ <dd>La valeur qu'on souhaite enregistrer.</dd>
+ <dt><code>cleOptionnelle</code> {{optional_inline}}</dt>
+ <dd>La clé qu'on souhaite utiliser pour identifier l'enregistrement. Si cet argument est absent, la valeur par défaut sera {{jsxref("null")}}.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un objet {{domxref("IDBRequest")}} qui recevra les évènements qui seront déclenchés suite à cette opération.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Cette méthode peut lever une de ces exceptions {{domxref("DOMException")}} :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Exception</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>ReadOnlyError</code></td>
+   <td>La transaction associée à l'opération est uniquement <a href="/fr/docs/Web/API/IDBTransaction#Constantes">dans un mode de lecture seule</a>.</td>
+  </tr>
+  <tr>
+   <td><code>TransactionInactiveError</code></td>
+   <td>La transaction rattachée à l'objet {{domxref("IDBObjectStore")}} est inactive.</td>
+  </tr>
+  <tr>
+   <td><code>DataError</code></td>
+   <td>
+    <p>L'une de ces conditions est vérifiée :</p>
+
+    <ul>
+     <li>Le magasin d'objet utilise des clés en ligne (<em>in-line keys</em>) ou dispose d'un générateur de clés et le paramètre pour la clé a été utilisé.</li>
+     <li>Le magasin d'objet utilise des clés en ligne (<em>in-line keys</em>), ne  dispose pas d'un générateur de clés et le paramètre pour la clé n'a pas été utilisé.</li>
+     <li>Le magasin d'objet utilise des clés en ligne (<em>in-line keys</em>), ne  dispose pas d'un générateur de clés et le chemin de clé du magasin d'objet ne déclenche pas une clé valide.</li>
+     <li>Le paramètre pour la clé a été fourni mais la valeur n'est pas une clé valide.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td><code>InvalidStateError</code></td>
+   <td>L'objet {{domxref("IDBObjectStore")}} a été supprimé ou déplacé.</td>
+  </tr>
+  <tr>
+   <td><code>DataCloneError</code></td>
+   <td>Les données à enregistrer n'ont pas pu être clonées par l'algorithme interne.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, on effectue une requête pour obtenir l'enregistrement correspondant à un titre donné. Lorsque cette requête est réussie, on récupère l'enregistrement via la fonction <code>onsuccess</code>. Ensuite, on met à jour une des propriétés de l'enregistrement et on enregistre la valeur mise à jour dans le magasin d'objet avec une autre requête et <code>put()</code>.</p>
+
+<pre class="brush: js">var title = "Walk dog";
+
+// On ouvre une transaction
+var objectStore = db.transaction(['toDoList'], "readwrite").objectStore('toDoList');
+
+// On obtient la liste to-do dont le titre correspond
+var objectStoreTitleRequest = objectStore.get(title);
+
+objectStoreTitleRequest.onsuccess = function() {
+  // On récupère les données de l'objet associé
+  // à l'enregistrement
+  var data = objectStoreTitleRequest.result;
+
+  // On met à jour la valeur de notified avec "yes"
+  data.notified = "yes";
+
+  // On crée une autre requête pour appliquer cette
+  // mise à jour en base de données
+  var updateTitleRequest = objectStore.put(data);
+
+  // On imprime la transaction à l'origine
+  // de la requête
+  console.log("La transaction originelle est " + updateTitleRequest.transaction);
+
+  // Lorsque cette nouvelle requête a réussi. On affiche
+  // les données grâce à la fonction displayData()
+  updateTitleRequest.onsuccess = function() {
+    displayData();
+  };
+};</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="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', '#widl-IDBObjectStore-put-IDBRequest-any-value-any-key', 'put()')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, partial</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview 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>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</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/idbobjectstore/transaction/index.html b/files/fr/web/api/idbobjectstore/transaction/index.html
new file mode 100644
index 0000000000..013af1c552
--- /dev/null
+++ b/files/fr/web/api/idbobjectstore/transaction/index.html
@@ -0,0 +1,171 @@
+---
+title: IDBObjectStore.transaction
+slug: Web/API/IDBObjectStore/transaction
+translation_of: Web/API/IDBObjectStore/transaction
+---
+<p>{{ APIRef("IndexedDB") }}</p>
+
+<div>
+<p>La propriété <strong><code>transaction</code></strong> de l'interface {{domxref("IDBObjectStore")}} renvoie la {{domxref("IDBTransaction","transaction")}} à laquelle l'{{domxref("IDBObjectStore","accès")}} du magasin d'objet appartient.</p>
+
+<p>{{AvailableInWorkers}}</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var myTransaction = objectStore.transaction;</pre>
+
+<h2 id="Valeur">Valeur</h2>
+
+<p>Une {{domxref("IDBTransaction","transaction")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans le code suivant, on ouvre une {{domxref("IDBDatabase","connexion")}} à la base de donnée. Sur cette connexion on démarre une {{domxref("IDBTransaction","transaction")}} en lecture/écriture pour avoir un {{domxref("IDBObjectStore","accès")}} au magasin d'objet <code>"toDoList"</code> dans lequel on {{domxref("IDBObjectStore.add","ajoute")}} un enregistrement.</p>
+
+<p>La propriété <strong><code>transaction</code></strong> affiche la transaction à laquelle l'accès du magasin d'objet appartient.</p>
+
+<pre class="brush: js">//Connexion à la base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+DBOpenRequest.onsuccess = function(event) {
+	note.innerHTML += '&lt;li&gt;Connexion établie.&lt;/li&gt;';
+
+	//Affecte la connexion à la variable db.
+	db = DBOpenRequest.result;
+
+	// Exécutez la fonction addData () pour ajouter un enregistrement au magasin d'objet
+	addData();
+};
+function addData() {
+	// un nouvel objet prêt à être emmagasiné
+	newItem = [ { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: "December", year: 2013, notified: "no" } ];
+
+	// ouvre une transaction de lecture / écriture  prête au traitement des données sur la connexion
+	var transaction = db.transaction(["toDoList"], "readwrite");
+
+	// en cas de succès de l'ouverture de la transaction
+	transaction.oncomplete = function(event) {
+		note.innerHTML += '&lt;li&gt;Transaction complété : modification de la base de données terminée.&lt;/li&gt;';
+	};
+	// en  cas d'échec de l'ouverture de la transaction
+	transaction.onerror = function(event) {
+		note.innerHTML += '&lt;li&gt;L\'erreur: "' + transaction.error +'" c\'est produite échec de la transaction.&lt;/li&gt;';
+	};
+
+	// ouvre l'accès au un magasin "toDoList" de la transaction
+	var objectStore = transaction.objectStore("toDoList");
+
+//-&gt;Affiche la transaction de l'accès du magasin d'objet
+    console.log(objectStore.transaction);
+
+	// Ajoute un enregistrement
+	var objectStoreRequest = objectStore.add(newItem[0]);
+	objectStoreRequest.onsuccess = function(event) {
+		// signale l'ajout de l'enregistrement
+		note.innerHTML += '&lt;li&gt;Enregistrement ajouté.&lt;/li&gt;';
+	};
+ };
+ </pre>
+
+<p class="note">Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p>
+
+<h2 id="Spécification">Spécification</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('IndexedDB', '#widl-IDBObjectStore-transaction', 'transaction')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité avec les navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, en partie</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans workers</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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>4.4</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Disponible dans workers</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>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}</li>
+ <li>{{domxref("IDBDatabase","Débuter une connexion")}}</li>
+ <li>{{domxref("IDBTransaction","Utilisé les transactions")}}</li>
+ <li>{{domxref("IDBKeyRange","Définir l'intervalle des clés")}}</li>
+ <li>{{domxref("IDBObjectStore","Accès aux magasins d'objets")}}</li>
+ <li>{{domxref("IDBCursor","Utiliser les curseur")}}</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="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
+</ul>
diff --git a/files/fr/web/api/idbopendbrequest/index.html b/files/fr/web/api/idbopendbrequest/index.html
new file mode 100644
index 0000000000..f5561d6315
--- /dev/null
+++ b/files/fr/web/api/idbopendbrequest/index.html
@@ -0,0 +1,226 @@
+---
+title: IDBOpenDBRequest
+slug: Web/API/IDBOpenDBRequest
+tags:
+  - API
+  - Base de données
+  - IndexedDB
+  - Interface
+  - Reference
+  - Référence DOM
+  - Stockage
+translation_of: Web/API/IDBOpenDBRequest
+---
+<p>{{APIRef("IndexedDB")}}</p>
+
+<div>
+<p>L'interface <strong><code>IDBOpenDBRequest</code></strong> de l'API IndexedDB donne un accès aux résultats des requêtes permettant d'ouvrir ou  de supprimer des bases de donnée (Effectuée via {{domxref("IDBFactory.open")}} et {{domxref("IDBFactory.deleteDatabase")}}).</p>
+</div>
+
+<p>{{AvailableInWorkers}}</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Hérite  des méthodes de ses parents {{domxref("IDBRequest")}} et {{domxref("EventTarget")}}</em>.</p>
+
+<h3 id="Évènements">Évènements</h3>
+
+<dl>
+ <dt>{{domxref("IDBOpenDBRequest.onblocked")}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Le gestionnaire d'événements pour événement bloqué</span></span> . Cet événement est lancé lorsqu' un événement  <code>upgradeneeded </code>doit être déclenché en raison d'un changement de version, mais que la base de données est toujours en cours d'utilisation (c'est-à-dire, non fermée) quelque part, même après l'envoi de l'évènement <code>versionchange</code> .</dd>
+ <dt>{{domxref("IDBOpenDBRequest.onupgradeneeded")}}</dt>
+ <dd>Le gestionnaire d'évènement pour évènement <code>upgradeneeded</code> <em>(mise-à-jour nécessaire)</em>, lancé quand une base de données d'une version supérieure à celle de la base de données existante est chargé.</dd>
+ <dt>
+ <h2 id="Méthodes">Méthodes</h2>
+
+ <p><em>Pas de méthodes, mais hérite des méthodes de ses parents {{domxref("IDBRequest")}} et {{domxref("EventTarget")}}.</em></p>
+ </dt>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans l'exemple ci-dessous,  le gestionnaire <code>onupgradeneeded</code> est utilisé pour mettre à jour la structure de la base de données, si une base plus récente est chargée. Pour voir un exemple complet, référez-vous à notre application <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<u><a href="http://mdn.github.io/to-do-notifications/">voir cet exemple réel</a></u>)</p>
+
+<pre class="brush: js; highlight:[15,25,26,28,29,30,31,32,33,34]">var db;
+
+// Ouvre la base de données.
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+// Ces gestionnaires d'évènements agissent sur la base de données en cours d'ouverture.
+  note.innerHTML += '&lt;li&gt;Error loading database.&lt;/li&gt;';
+};
+
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '&lt;li&gt;Database initialised.&lt;/li&gt;';
+
+  // stocke le résultat de l'ouverture de la base de données dans la variable db .
+  // Ceci est beaucoup moins utilisé.
+  db = DBOpenRequest.result;
+
+  // Exécute la fonction displayData() pour remplir la liste de tâches
+  // avec toutes les données de la lste de tâches déjà dans la base.
+  displayData();
+};
+
+// Cet évènement gère l'évènement par lequel une nouvelle version
+// de la base de données doit être créée. Soit elle n'a pas
+// été créée avant, soit un nouveau numéro de version a été
+// soumis via la ligne "window.indexedDB.open" ci-dessous.
+// Il n'est implémenté que dans les navigateurs récents.
+DBOpenRequest.onupgradeneeded = function(event) {
+  var db = this.result;
+
+  db.onerror = function(event) {
+    note.innerHTML += '&lt;li&gt;Error loading database.&lt;/li&gt;';
+  };
+
+  // Crée un objet de stockage pour cette base de données.
+  var objectStore = db.createObjectStore("toDoList", { keyPath: "taskTitle" });
+
+  // définit quels éléments de données l'objet de stockage contiendra.
+
+  objectStore.createIndex("hours", "hours", { unique: false });
+  objectStore.createIndex("minutes", "minutes", { unique: false });
+  objectStore.createIndex("day", "day", { unique: false });
+  objectStore.createIndex("month", "month", { unique: false });
+  objectStore.createIndex("year", "year", { unique: false });
+  objectStore.createIndex("notified", "notified", { unique: 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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#idl-def-IDBOpenDBRequest', 'IDBOpenDBRequest')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("IndexedDB 2", "#idbopendbrequest", "IDBOpenDBRequest")}}</td>
+   <td>{{Spec2("IndexedDB 2")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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 (unprefixed)</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, partial</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</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>Fonctionnalité</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>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</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>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</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>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
+ <li>Démarrage de transactions : {{domxref("IDBDatabase")}}</li>
+ <li>Utilisation de transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définition un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupération et modification des données : {{domxref("IDBObjectStore")}}</li>
+ <li>Utilisation de 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="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
+</ul>
diff --git a/files/fr/web/api/idbrequest/blocked_event/index.html b/files/fr/web/api/idbrequest/blocked_event/index.html
new file mode 100644
index 0000000000..e3fdfdfb83
--- /dev/null
+++ b/files/fr/web/api/idbrequest/blocked_event/index.html
@@ -0,0 +1,102 @@
+---
+title: blocked
+slug: Web/API/IDBRequest/blocked_event
+translation_of: Web/API/IDBOpenDBRequest/blocked_event
+---
+<p>Le handler <strong>blocked</strong> est exécuté lorsque l'ouverture d'une connexion à une base de données bloque une transaction <em>versionchange</em> sur celle-ci.</p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">IDBVersionChangeEvent</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">IDBRequest</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Aucune</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The request concerned by this event.</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+  <tr>
+   <td><code>newVersion</code> {{readonlyInline}}</td>
+   <td>unsigned long (int)</td>
+   <td>The new version of the database.</td>
+  </tr>
+  <tr>
+   <td><code>oldVersion</code> {{readonlyInline}}</td>
+   <td>unsigned long (int)</td>
+   <td>The old version of the database.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush:js; line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> req1 <span class="operator token">=</span> indexedDB<span class="punctuation token">.</span><span class="function token">open</span><span class="punctuation token">(</span><span class="string token">"addressbook"</span><span class="punctuation token">,</span> <span class="number token">3</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+req1<span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span> event <span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> addressbookDB <span class="operator token">=</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">;</span>
+
+  <span class="comment token">// Essayons d'ouvrir la même base de données avec une version de révision plus élevée</span>
+  <span class="keyword token">var</span> req2 <span class="operator token">=</span> indexedDB<span class="punctuation token">.</span><span class="function token">open</span><span class="punctuation token">(</span><span class="string token">"addressbook"</span><span class="punctuation token">,</span> <span class="number token">4</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="comment token">// Dans ce cas, le handler onblocked</span> sera exécuté
+  req2<span class="punctuation token">.</span>onblocked <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span> e <span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span>
+  <span class="punctuation token">}</span><span class="punctuation token">;</span>
+
+<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Evénements_liés">Evénements liés</h2>
+
+<ul>
+ <li>{{event("success")}}</li>
+ <li>{{event("error")}}</li>
+ <li>{{event("abort")}}</li>
+ <li>{{event("complete")}}</li>
+ <li>{{event("upgradeneeded")}}</li>
+ <li>{{event("blocked")}}</li>
+ <li>{{event("versionchange")}}</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/IndexedDB/Using_IndexedDB">Utilisation d'IndexedDB</a></li>
+</ul>
diff --git a/files/fr/web/api/idbrequest/error/index.html b/files/fr/web/api/idbrequest/error/index.html
new file mode 100644
index 0000000000..45e27f7f49
--- /dev/null
+++ b/files/fr/web/api/idbrequest/error/index.html
@@ -0,0 +1,213 @@
+---
+title: IDBRequest.error
+slug: Web/API/IDBRequest/error
+tags:
+  - API
+  - Error
+  - IDBRequest
+  - IndexedDB
+  - Propriété
+  - Reference
+translation_of: Web/API/IDBRequest/error
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La propriété <strong><code>error</code></strong> de l'interface {{domxref("IDBRequest")}} renvoie l'erreur associée lorsque la requête est un échec.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var myError = request.error;</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une erreur {{domxref("DOMError")}} qui contient l'erreur pertinente. Pour Chrome 48 et les versions ultérieures, cette propriété est une {{domxref("DOMException")}} car <code>DOMError</code> a été retiré du standard pour le DOM. Les codes d'erreurs suivants sont utilisés selon les conditions d'erreur :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Erreur</th>
+   <th scope="col">Explication</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>AbortError</code></td>
+   <td>Si on annule la transaction en cours, toutes les requêtes en cours reçoivent cette erreur.</td>
+  </tr>
+  <tr>
+   <td><code>ConstraintError</code></td>
+   <td>Erreur obtenue lorsqu'on tente d'insérer des données qui ne respectent pas une contrainte. C'est un type d'exception utilisé lorsqu'on crée des magasins d'objet et des index. On aura cette erreur lorsqu'on essaiera par exemple d'ajouter une clé qui existe déjà dans l'enregistrement.</td>
+  </tr>
+  <tr>
+   <td><code>QuotaExceededError</code></td>
+   <td>Erreur obtenue lorsque atteint le quota d'espace disque et que l'utilisateur refuse de céder plus d'espace mémoire.</td>
+  </tr>
+  <tr>
+   <td><code>UnknownError</code></td>
+   <td>Erreur obtenue lorsque l'opération a échoué pour des raisons qui ne sont pas propres à la base de données (par exemple une erreur d'écriture sur le disque).</td>
+  </tr>
+  <tr>
+   <td><code>NoError</code></td>
+   <td>Valeur utilisée lorsque la requête est réussie.</td>
+  </tr>
+  <tr>
+   <td><code>VersionError</code></td>
+   <td>Erreur obtenue lorsqu'on essaye d'ouvrir une base de données avec une version inférieure à celle dont elle dispose déjà.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>En plus des codes d'erreur envoyés à l'objet {{domxref("IDBRequest")}}, les opérations asynchrones peuvent également déclencher des exceptions. La liste décrit les problèmes qui peuvent se produire lorsque la requête est en cours d'exécution mais d'autres problèmes peuvent apparaître lors de la construction de la requête. Ainsi, si la requête a échoué et que le résultat n'est pas disponible, l'exception <code>InvalidStateError </code>sera levée.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on effectue une requête sur le titre de l'enregistrement. Le gestionnaire d'évèvenement <code>onsuccess</code> traite l'enregistrement obtenu depuis le magasin d'objet ({{domxref("IDBObjectStore")}}) et qui est disponible via <code>objectStoreTitleRequest.result</code>. Le gestionnaire met ensuite à jour une propriété de l'enregistrement puis replace l'enregistrement mis à jour dans le magasin d'objet.</p>
+
+<p>On dispose également d'une fonction <code>onerror</code> qui permet d'indiquer l'erreur qui s'est produite si la requêté échoue. Pour consulter un exemple complet, voir <a href="https://github.com/mdn/to-do-notifications/">l'application de notifications To-do</a> (cf. <a href="https://mdn.github.io/to-do-notifications/">la démonstration <em>live</em></a>).</p>
+
+<pre class="brush: js">var title = "Walk dog";
+
+// On ouvre une transaction
+var objectStore = db.transaction(['toDoList'], "readwrite").objectStore('toDoList');
+
+// On récupère la liste de tâches avec ce titre
+var objectStoreTitleRequest = objectStore.get(title);
+
+objectStoreTitleRequest.onsuccess = function() {
+  // On récupère l'objet du résultat
+  var data = objectStoreTitleRequest.result;
+
+  // On met à jour la valeur de la propriété notified avec "yes"
+  data.notified = "yes";
+
+  // On crée une autre requête pour replacer l'élément
+  // into the database
+  var updateTitleRequest = objectStore.put(data);
+
+  // Lorsque la requête est réussie, on utilise à nouveau
+  // la fonction the displayData() pour mettre à jour
+  // l'affichage
+  updateTitleRequest.onsuccess = function() {
+    displayData();
+  };
+};
+
+objectStoreTitleRequest.onerror = function() {
+  // S'il se produit une erreur pendant la requête
+  // on l'enregistre
+  console.log("Il y a eu une erreur pour la récupération des données : " + objectStoreTitleRequest.error);
+};</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="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', '#widl-IDBRequest-error', 'error')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview 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>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</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/idbrequest/index.html b/files/fr/web/api/idbrequest/index.html
new file mode 100644
index 0000000000..87759d881f
--- /dev/null
+++ b/files/fr/web/api/idbrequest/index.html
@@ -0,0 +1,129 @@
+---
+title: IDBRequest
+slug: Web/API/IDBRequest
+tags:
+  - API
+  - Database
+  - IDBRequest
+  - IndexedDB
+  - Interface
+  - Reference
+  - Storage
+  - TopicStub
+translation_of: Web/API/IDBRequest
+---
+<p>{{APIRef("IndexedDB")}}</p>
+
+<p>L'interface <strong><code>IDBRequest</code></strong> de l'API IndexedDB donne accès par ses gestionnaires d'événements aux résultats des requêtes asynchrones sur la base de données, les magasins d'objets ou les index. Chaque opération d'écriture ou lecture sur la base de données utilise une requête.</p>
+
+<p>Cet objet <strong><code>IDBRequest</code></strong> ne contient aucune information sur le résultat de l'opération, mais dès qu'une information est disponible un événement est déclenché. L'objet <strong><code>IDBRequest</code></strong> utilise ses gestionnaires d'événements pour le capter et mettre l'information à disposition.</p>
+
+<p>Toute les opération asynchrone retourne immédiatement une instance <strong><code>IDBRequest</code></strong> avec une propriété <code>readyState</code> défini à <code>'pending'</code> qui passe à  <code>'done'</code> lorsque la requête réussie ou échoue. Quand l'état passe à <code>done</code>, chaque requête retourne <code>result</code> et <code>error</code>, et un évènement est envoyé sur la requête. Quand l'état est sur <code>pending</code>, chaque accès à <code>result</code> ou <code>error</code> lève une exception <code>InvalidStateError</code>.</p>
+
+<p>Pour faire simple, chaque méthode asynchrome retourne un objet de requête. Si l'opération réussi, le résultat est disponible dans la propriété <code>result</code> et un évènement <code>success</code> est lancé ({{domxref("IDBRequest.onsuccess")}}). Si une erreur est rencontrée, une exeption est disponible dans la propriété <code>error</code> et un évènement <code>error</code> est lancé ({{domxref("IDBRequest.onerror")}}).</p>
+
+<p>L'interface {{domxref("IDBOpenDBRequest")}} est dérivé de <code>IDBRequest</code>.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Hérite des propriétés de {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("IDBRequest.result","result")}} {{readonlyInline}}</dt>
+ <dd>La propriété <strong><code>result</code></strong> de l'interface <strong><code>IDBRequest</code></strong> renvoie le résultat de la requête. Si la requête est en cours, échoue ou que le résultat n'est pas disponible, l'exception <code>InvalidStateError</code> est levée.</dd>
+ <dt>{{domxref("IDBRequest.error","error")}} {{readonlyInline}}</dt>
+ <dd>La propriété <strong><code>error</code></strong> de l'interface <strong><code>IDBRequest</code></strong> indique le code de l'erreur survenue durant le traitement de la requête. Si la requête est en cours l'exception <code>InvalidStateError</code> est levée.</dd>
+ <dt>{{domxref("IDBRequest.source","source")}} {{readonlyInline}}</dt>
+ <dd>La propriété <strong><code>source</code></strong> de l'interface <strong><code>IDBRequest</code></strong> renvoie la source de la requête, tel qu'un {{domxref("IDBIndex","index")}}, un {{domxref("IDBObjectStore","magasin d'ojets")}} ou <code>null</code> s'il n'y a pas de source (lors de l'appel {{domxref("indexedDB.open")}} par exemple).</dd>
+ <dt>{{domxref("IDBRequest.transaction","transaction")}} {{readonlyInline}}</dt>
+ <dd>La propriété <strong><code>transaction</code></strong> de l'interface <strong><code>IDBRequest</code></strong> renvoie la {{domxref("IDBTransaction","transaction")}} dans laquelle on fait la requête. La propriété peut renvoyer <code>null</code> si requête se fait sans transaction, comme un objet IDBRequest renvoyé par {{domxref("IDBFactory.open")}} dans ce cas on est juste connecté à la base de données.</dd>
+ <dt>{{domxref("IDBRequest.readyState","readyState")}} {{readonlyInline}}</dt>
+ <dd>La propriété <strong><code>readyState</code></strong> de l'interface <strong><code>IDBRequest</code></strong> renvoie l'état de la requête. Chaque requête débute avec un statut <code>pending</code> et passe au statut <code>done</code> quand la requête réussie ou échoue.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Pas de méthodes spécifiques, mais hérite des méthodes de {{domxref("EventTarget")}}.</em></p>
+
+<h2 id="Gestionnaire_dévénement">Gestionnaire d'événement</h2>
+
+<p>On peut écouter les évènement avec <code>addEventListener()</code> ou bien en assignant un gestionnaire d'évènement à la propriété <code>on<em>eventname</em></code> de cette interface.</p>
+
+<dl>
+ <dt>{{domxref("IDBRequest.onerror","onerror")}}</dt>
+ <dd>Le gestionnaire d'événement <strong><code>onerror</code></strong> de l'interface <strong><code>IDBRequest</code></strong> capte l'événement <code><a href="/en-US/docs/Web/Events/error">error</a></code>, déclenché quand une requête renvoie une erreur.</dd>
+ <dt>{{domxref("IDBRequest.onsuccess","onsuccess")}}</dt>
+ <dd>Le gestionnaire d'événement <strong><code>onsuccess</code></strong> de l'interface <strong><code>IDBRequest</code></strong> capte l'événement <code><a href="/en-US/docs/Web/Events/success">success</a></code>, déclenché quand la requête réussie.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans l'exemple suivant, on ouvre une base de données et on fait une requête. Les gestionnaires d'événement <code>{{domxref("IDBRequest.onsuccess","onsuccess")}}</code> et <code>{{domxref("IDBRequest","onerror")}}</code> sont inclus. Pour un exemple de travail complet, voir notre application <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> (<a href="http://mdn.github.io/to-do-notifications/">voir l'exemple en direct</a>).</p>
+
+<pre class="brush: js notranslate">var db;
+
+// Ouvre une base de données.
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+// Ces deux gestionnaires d'événement interviennent quand la dase de
+// de données s'ouvre ou non.
+DBOpenRequest.onerror = function(event) {
+  note.innerHTML += '&lt;li&gt;Error loading database.&lt;/li&gt;';
+};
+
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '&lt;li&gt;Database initialised.&lt;/li&gt;';
+
+  // Affecte le resutat de l'ouverture à la variable.
+  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">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#idbrequest', 'IDBRequest')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("IndexedDB 2", "#request-api", "IDBRequest")}}</td>
+   <td>{{Spec2("IndexedDB 2")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité avec les navigateurs</h2>
+
+<div>
+<div>
+<div>
+
+
+<p>{{Compat("api.IDBRequest")}}</p>
+</div>
+</div>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/IndexedDB_API/Using_IndexedDB">Utiliser IndexedDB</a></li>
+ <li>Démarrer une transaction: {{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 vos 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="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
+</ul>
diff --git a/files/fr/web/api/idbrequest/onerror/index.html b/files/fr/web/api/idbrequest/onerror/index.html
new file mode 100644
index 0000000000..a63b087f8c
--- /dev/null
+++ b/files/fr/web/api/idbrequest/onerror/index.html
@@ -0,0 +1,151 @@
+---
+title: IDBRequest.onerror
+slug: Web/API/IDBRequest/onerror
+translation_of: Web/API/IDBRequest/onerror
+---
+<p>{{ APIRef("IndexedDB") }}</p>
+
+<p>le gestionnaire d'événement <strong><code>onerror</code></strong> de l'interface {{domxref("IDBRequest")}} capte l'événement <code><a href="/en-US/docs/Web/Events/error">error</a></code>, déclenché quand une requête renvoie une erreur.</p>
+
+<p>Le gestionnaire d'événement reçoit l'événement <a href="/en-US/docs/Web/Events/error">error</a> avec le type="error" en paramètre.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">request.onerror = function( event ) { ... };</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'exemple suivant demande un titre d'enregistrement donné, <code>onsuccess</code> obtient l'enregistrement associé au {{domxref("IDBObjectStore","magasin d'objets")}} (mis à disposition en tant que <code style="font-style: normal;">objectStoreTitleRequest.result</code>), on met à jour une propriété de l'enregistrement, puis le sauve dans le magasin d'objets. En bas le gestionnaire d'événement <code>onerror</code> affiche le code d'erreur si la {{domxref("IDBRequest","requête")}} échoue. Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p>
+
+<pre>var title = "Walk dog";
+
+// Ouvrez une transaction comme d'habitude
+var objectStore = db.transaction(['toDoList'], "readwrite").objectStore('toDoList');
+
+// Obtenez l'objet toDoList qui a ce titre
+var objectStoreTitleRequest = objectStore.get(title);
+
+objectStoreTitleRequest.onsuccess = function() {
+  // Prenez l'objet de données renvoyé comme résultat
+  var data = objectStoreTitleRequest.result;
+
+  // Mettre à jour la valeur notified de l'objet à "yes"
+  data.notified = "yes";
+
+  // Créer une autre requête qui insère le nouvelle élément dans la base de données
+  var updateTitleRequest = objectStore.put(data);
+
+  // Lorsque cette requête réussit, appelle de la fonction displayData() pour mettre à jour l'affichage
+  updateTitleRequest.onsuccess = function() {
+    displayData();
+  };
+};
+
+objectStoreTitleRequest.onerror = function() {
+  // Si une erreur se produit à la demande, on l'affiche
+  console.log("Il y a eu une erreur dans la récupération des données: " + objectStoreTitleRequest.error);
+};
+</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('IndexedDB', '#widl-IDBRequest-onerror', 'onerror')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité avec les navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, en partie</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans workers</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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>4.4</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Disponible dans workers</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>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB">Using IndexedDB</a></li>
+ <li><a href="/en-US/docs/Web/Events/error">Error Event</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/fr/web/api/idbrequest/onsuccess/index.html b/files/fr/web/api/idbrequest/onsuccess/index.html
new file mode 100644
index 0000000000..e1f2f6fa90
--- /dev/null
+++ b/files/fr/web/api/idbrequest/onsuccess/index.html
@@ -0,0 +1,153 @@
+---
+title: IDBRequest.onsuccess
+slug: Web/API/IDBRequest/onsuccess
+translation_of: Web/API/IDBRequest/onsuccess
+---
+<p>{{ APIRef("IndexedDB") }}</p>
+
+
+<p>Le gestionnaire d'événement <strong><code>onsuccess</code></strong> de l'interface {{domxref("IDBRequest")}} capte l'événement <code><a href="/en-US/docs/Web/Events/success">success</a></code>, déclenché quand la requête réussie.</p>
+
+<p>Le gestionnaire d'événement un événement <a href="/en-US/docs/Web/Events/success">success</a> avec le type="success" en paramètre.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">request.onsuccess = function( event ) { ... };</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'exemple suivant demande un titre d'enregistrement donné, <code>onsuccess</code> obtient l'enregistrement associé de {{domxref("IDBObjectStore")}} (mis à disposition en tant que <code>objectStoreTitleRequest.result</code>), on met à jour une propriété de l'enregistrement, puis le sauve dans le magasin d'objets. En bas le gestionnaire d'événement <code>onerror</code> affiche le code d'erreur si la requête échoue. Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p>
+
+<pre>var title = "Walk dog";
+
+// Ouvrez une transaction comme d'habitude
+var objectStore = db.transaction(['toDoList'], "readwrite").objectStore('toDoList');
+
+// Obtenez l'objet toDoList qui a ce titre
+var objectStoreTitleRequest = objectStore.get(title);
+
+objectStoreTitleRequest.onsuccess = function() {
+  // Prenez l'objet de données renvoyé comme résultat
+  var data = objectStoreTitleRequest.result;
+
+  // Mettre à jour la valeur notified de l'objet à "yes"
+  data.notified = "yes";
+
+  // Créer une autre requête qui insère le nouvelle élément dans la base de données
+  var updateTitleRequest = objectStore.put(data);
+
+  // Lorsque cette requête réussit, appelle de la fonction displayData() pour mettre à jour l'affichage
+  updateTitleRequest.onsuccess = function() {
+    displayData();
+  };
+};
+
+objectStoreTitleRequest.onerror = function() {
+  // Si une erreur se produit à la demande, on l'affiche
+  console.log("Il y a eu une erreur dans la récupération des données: " + objectStoreTitleRequest.error);
+};
+</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('IndexedDB', '#widl-IDBRequest-onsuccess', 'onsuccess')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité avec les navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, en partie</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans workers</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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>4.4</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Disponible dans workers</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>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB">Using IndexedDB</a></li>
+ <li><a href="/en-US/docs/Web/Events/success">Success Event</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/fr/web/api/idbrequest/readystate/index.html b/files/fr/web/api/idbrequest/readystate/index.html
new file mode 100644
index 0000000000..2093d5e30a
--- /dev/null
+++ b/files/fr/web/api/idbrequest/readystate/index.html
@@ -0,0 +1,175 @@
+---
+title: IDBRequest.readyState
+slug: Web/API/IDBRequest/readyState
+tags:
+  - API
+  - IDBRequest
+  - IndexedDB
+  - Propriété
+  - Reference
+translation_of: Web/API/IDBRequest/readyState
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La propriété <strong><code>readyState</code></strong>, rattachée à l'interface {{domxref("IDBRequest")}}, est une propriété en lecture seule qui indique l'état de la requête.</p>
+
+<p>Chaque requête démarre avec l'état <code>pending</code> (c'est-à-dire en attente). Cet état vaut ensuite <code>done</code> (fini) lorsque la requête est terminée (en cas de réussite de l'opération comme en cas d'échec).</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>currentReadyState</em> = <em>request</em>.readyState;</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>La valeur {{domxref("IDBRequestReadyState")}} de la requête, qui peut être l'un de deux valeurs. <code>pending</code> lorsque la requête est en attente, <code>done</code> lorsque celle-ci est finie.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on effectue une requête sur un enregistrement avec un titre donné et on recupère l'enregistrement associé grâce au gestionnaire d'évènement <code>onsuccess</code> à partir du magasin d'objets {{domxref("IDBObjectStore")}}. Ensuite, on met à jour une des propriétés de cet enregistrement et on replace cet objet mis à jour dans le magasin d'objets via une autre requête. La valeur de la propriété <code>readyState</code> pour la deuxième requête est affichée dans la console. Pour consulter un exemple fonctionnel complet, vous pouvez vous référer à notre appliction <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">cf. également l'exemple <em>live</em></a>).</p>
+
+<pre class="brush: js">var title = "Walk dog";
+
+// On ouvre une transaction
+var objectStore = db.transaction(['toDoList'], "readwrite").objectStore('toDoList');
+
+// On récupère l'enregistrement avec le titre souhaité
+var objectStoreTitleRequest = objectStore.get(title);
+
+objectStoreTitleRequest.onsuccess = function() {
+  // On récupère les données du résultat de la requête
+  var data = objectStoreTitleRequest.result;
+
+  // On met à jour la propriété notified de l'objet
+  // avec la valeur "yes"
+  data.notified = "yes";
+
+  // Ensuite, on crée une autre requête pour insérer
+  // l'enregistrement dans la base de données
+  var updateTitleRequest = objectStore.put(data);
+
+  // On affiche l'état de la requête dans la console
+  console.log("La valeur de readyState est " + updateTitlerequest.readyState);
+
+  // Lorsque cette deuxième requête est appliquée,
+  // on exécute la fonction displayData() afin d'afficher
+  // les données à jour
+  updateTitleRequest.onsuccess = function() {
+    displayData();
+  };
+};</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="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', '#widl-IDBRequest-readyState', 'readyState')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("IndexedDB 2", "#dom-idbrequest-readystate", "readyState")}}</td>
+   <td>{{Spec2("IndexedDB 2")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24 (sans préfixe)</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, partial</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Manipuler IndexedDB</a></li>
+ <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li>
+ <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li>
+ <li>Manipuler des curseurs : {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence pour IndexedDB : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/idbrequest/result/index.html b/files/fr/web/api/idbrequest/result/index.html
new file mode 100644
index 0000000000..654ffb20d1
--- /dev/null
+++ b/files/fr/web/api/idbrequest/result/index.html
@@ -0,0 +1,168 @@
+---
+title: IDBRequest.result
+slug: Web/API/IDBRequest/result
+tags:
+  - API
+  - IDBRequest
+  - IndexedDB
+  - Propriété
+  - Reference
+translation_of: Web/API/IDBRequest/result
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La propriété <strong><code>result</code></strong>, rattachée à l'interface {{domxref("IDBRequest")}}, renvoie le résultat de la requête. Si la requête échoue et que le résultat n'est pas disponible, une exception <code>InvalidStateError</code> sera levée.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var resultat = request.result;</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>La valeur du résultat de la requête (le type dépend des objets du magasin d'objets).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on souhaite récupérer l'enregistrement qui correspond à un titre donné. Le gestionnaire d'évènements <code>onsuccess</code> permet de récupérer l'enregistrement contenu dans le magasin d'objet ({{domxref("IDBObjectStore")}}) (via <code>objectStoreTitleRequest.result</code>). Ensuite, on met à jour une propriété de cet enregistrement et on replace cet enregistrement dans le magasin d'objet.</p>
+
+<pre class="brush: js;highlight:[11]">var title = "Walk dog";
+
+// On ouvre une transaction en lecture/écriture
+var objectStore = db.transaction(['toDoList'], "readwrite").objectStore('toDoList');
+
+// On récupère l'objet qui possède le titre souhaité
+var objectStoreTitleRequest = objectStore.get(title);
+
+objectStoreTitleRequest.onsuccess = function() {
+  // On agit sur les données de l'objet de la requête
+  var data = objectStoreTitleRequest.result;
+
+  // On met à jour la propriété notified avec "yes"
+  data.notified = "yes";
+
+  // On crée une autre requête pour réinsérer l'objet dans la base
+  var updateTitleRequest = objectStore.put(data);
+
+  // Lorsque cette seconde requête est terminée, on lance displayData() pour rafraîchir l'écran
+  updateTitleRequest.onsuccess = function() {
+    displayData();
+  };
+};</pre>
+
+<div class="note">
+<p><strong>Note :</strong> pour un exemple fonctionnel complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">application To-do</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple</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('IndexedDB', '#widl-IDBRequest-result', 'result')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, partial</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview 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>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</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/idbrequest/source/index.html b/files/fr/web/api/idbrequest/source/index.html
new file mode 100644
index 0000000000..dcf0bb4029
--- /dev/null
+++ b/files/fr/web/api/idbrequest/source/index.html
@@ -0,0 +1,178 @@
+---
+title: IDBRequest.source
+slug: Web/API/IDBRequest/source
+tags:
+  - API
+  - IDBRequest
+  - IndexedDB
+  - Propriété
+  - Reference
+translation_of: Web/API/IDBRequest/source
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La propriété <strong><code>source</code></strong> est une propriété en lecture seule, rattachée à l'interface {{domxref("IDBRequest")}}, et qui indique la source de la requête (c'est-à-dire l'index ou le magasin d'objets utilisé). Si aucune source n'existe (par exemple car on a appelé {{domxref("indexedDB.open")}}), la propriété vaut <code>null</code>.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>IDBIndex</em> = <em>request</em>.source;
+var <em>IDBCursor</em> = <em>request</em>.source;
+var <em>IDBObjectStore</em> = <em>request</em>.source;
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un objet qui représente la source de la requête. Ce peut être un objet {{domxref("IDBIndex")}}, {{domxref("IDBObjectStore")}} ou un objet  {{domxref("IDBCursor")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on récupère un enregistrement avec un titre donné depuis un magasin d'objets. Ensuite, on met à jour une des propriétés de cet enregistrement et on met à jour le magasin d'objets en insérant cet objet modifié. Lors de cette deuxième requête, on affiche la source dans la console. Pour consulter un exemple fonctionnel complet, vous pouvez vous référer à notre application <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">cf. l'exemple <em>live</em></a>).</p>
+
+<pre class="brush: js;highlight:[11]">var title = "Walk dog";
+
+// On ouvre une transaction
+var objectStore = db.transaction(['toDoList'], "readwrite").objectStore('toDoList');
+
+// On fait une requête pour récupérer
+// l'enregistrement qui possède le titre
+// souhaité
+var objectStoreTitleRequest = objectStore.get(title);
+
+objectStoreTitleRequest.onsuccess = function() {
+  // On récupère l'objet afin de le modifier
+  var data = objectStoreTitleRequest.result;
+
+  // On met à jour la propriété notified
+  // avec la valeur "yes"
+  data.notified = "yes";
+
+  // On crée une autre requête pour replacer
+  // l'enregistrement modifié dans la base de d
+  // données
+  var updateTitleRequest = objectStore.put(data);
+
+  // Ici, on affiche la source de la requête dans
+  // la console
+  console.log("La source de cette requête est " + updateTitlerequest.source);
+  // Quand cette deuxième requête sera appliquée,
+  // on lancera displayData() pour mettre à jour
+  // l'affichage
+  updateTitleRequest.onsuccess = function() { displayData(); };
+};
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="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', '#widl-IDBRequest-source', 'source')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("IndexedDB 2", "#dom-idbrequest-source", "source")}}</td>
+   <td>{{Spec2("IndexedDB 2")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24 (sans préfixe)</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, partial</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Manipuler IndexedDB</a></li>
+ <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li>
+ <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li>
+ <li>Manipuler des curseurs : {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence pour IndexedDB : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/idbrequest/transaction/index.html b/files/fr/web/api/idbrequest/transaction/index.html
new file mode 100644
index 0000000000..d8d1e99ef8
--- /dev/null
+++ b/files/fr/web/api/idbrequest/transaction/index.html
@@ -0,0 +1,180 @@
+---
+title: IDBRequest.transaction
+slug: Web/API/IDBRequest/transaction
+translation_of: Web/API/IDBRequest/transaction
+---
+<p>{{ APIRef("IndexedDB") }}</p>
+
+<p>La propriété <strong><code>transaction</code></strong> de l'interface IDBRequest renvoie la {{domxref("IDBTransaction","transaction")}} dans laquelle on fait la requête.La propriètè peut renvoiyer <code>null</code> si requête se fait sans transaction, comme un objet IDBRequest renvoyé par {{domxref("IDBFactory.open")}} dans ce cas on est juste connecté à la base de données.</p>
+
+<p class="note"> Durant la gestion d'un événement {{domxref("IDBOpenDBRequest.onupgradeneeded", "upgradeneeded")}} qui met à jour la version de la base de données, la propriété <strong><code>transaction</code></strong> doit être une {{domxref("IDBTransaction","transaction")}} ouverte en {{domxref("IDBTransaction.mode", "mode")}} <code>"versionchange"</code>, on peut alors accéder aux {{domxref("IDBObjectStore","magasins d'objets")}} et {{domxref("IDBIndex","index")}} ou annulé la mise à niveau. Après quoi, la propriété <strong><code>transaction</code></strong> renverra encore <code>null</code>.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var myTransaction = request.transaction;</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une {{domxref("IDBTransaction","transaction")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'exemple suivant demande un titre d'enregistrement donné, <code>onsuccess</code> obtient l'enregistrement associé du {{domxref("IDBObjectStore","magasin d'objects")}} (mis à disposition en tant que <code>objectStoreTitleRequest.result</code>), on met à jour une propriété de l'enregistrement, puis le sauve dans le magasin d'objects. La {{domxref("IDBTransaction","transaction")}} à l'origine de la deuxième {{domxref("IBBRequest","requête")}} est affichée sur la console du développeur (Ps, les deux requêtes proviennent de la même transaction). En bas est une fonction onerror qui affiche le code d'erreur si la requête échoue. Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p>
+
+<pre class="brush: js">var title = "Walk dog";
+
+// Ouvrez une transaction comme d'habitude
+var objectStore = db.transaction(['toDoList'], "readwrite").objectStore('toDoList');
+
+// Obtenez l'objet toDoList qui a ce titre
+var objectStoreTitleRequest = objectStore.get(title);
+
+objectStoreTitleRequest.onsuccess = function() {
+  // Prenez l'objet de données renvoyé comme résultat
+  var data = objectStoreTitleRequest.result;
+
+  // Mettre à jour la valeur notified de l'objet à "yes"
+  data.notified = "yes";
+
+  // Créer une autre requête qui insère le nouvelle élément dans la base de données
+  var updateTitleRequest = objectStore.put(data);
+
+  // Affiche la transaction à l'origine de la deuxième requête
+  console.log(" la transaction à l'origine de ces requêtes est " + updateTitleRequest.transaction);
+
+  // Lorsque cette requête réussit, appelle de la fonction displayData() pour mettre à jour l'affichage
+  updateTitleRequest.onsuccess = function() {
+    displayData();
+  };
+
+objectStoreTitleRequest.onerror = function() {
+  // Si une erreur pendant la requête, on l'affiche
+  console.log("Il y a eu une erreur dans la récupération des données: " + objectStoreTitleRequest.error);
+};
+</pre>
+
+<p>Cet exemple montre comment la propriété <strong><code>transaction</code></strong> peut être utilisé pendant une mise à niveau de version pour accéder à des {{domxref("IDBObjectStore","magasins d'objects")}} existants: ​</p>
+
+<pre class="brush: js">var openRequest = indexedDB.open('db', 2);
+console.log(openRequest.transaction); // Affiche "null".
+
+openRequest.onupgradeneeded = function(event) {
+  console.log(openRequest.transaction.mode); // Affiche "versionchange".
+  var db = openRequest.result;
+  if (event.oldVersion &lt; 1) {
+    // Nouvelle base de données, créer un magasin d'objets "livres".
+    db.createObjectStore('books');
+  }
+  if (event.oldVersion &lt; 2) {
+    // Mise à niveau de la base de données v1: ajoute un index sur "title" pour stocker les livres.
+    var bookStore = openRequest.transaction.objectStore('books');
+    bookStore.createIndex('by_title', 'title');
+  }
+};
+
+openRequest.onsuccess = function() {
+  console.log(openRequest.transaction); // Affiche "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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBRequest-transaction', 'transaction')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité avec les navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, en partie</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans workers</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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>4.4</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Disponible dans workers</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>
+
+<h2 id="Voir_aussi">Voir aussi</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/fr/web/api/idbtransaction/abort/index.html b/files/fr/web/api/idbtransaction/abort/index.html
new file mode 100644
index 0000000000..8017fe58d8
--- /dev/null
+++ b/files/fr/web/api/idbtransaction/abort/index.html
@@ -0,0 +1,193 @@
+---
+title: IDBTransaction.abort()
+slug: Web/API/IDBTransaction/abort
+tags:
+  - API
+  - IDBTransaction
+  - IndexedDB
+  - Méthode
+  - Reference
+translation_of: Web/API/IDBTransaction/abort
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La méthode <strong><code>abort()</code></strong>, rattachée à l'interface {{domxref("IDBTransaction")}}, permet d'annuler les modifications apportées aux objets de la base de données pendant la transaction courante.</p>
+
+<p>Tous les objets {{domxref("IDBRequest")}} créés pendant cette transaction verront leur attribut {{domxref("IDBRequest.error")}} prendre la valeur <code>AbortError</code>.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">transaction.abort();</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Aucune.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Cette méthode peut déclencher une exception {{domxref("DOMException")}} du type <code>InvalidStateError</code> lorsque la transaction a été validée ou qu'elle a déjà été annulée.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans le fragment de code suivant, on ouvre une transaction en lecture/écriture sur la base de données et on ajoute des données au magasin d'objets. On dispose également de fonctions attachées aux gestionnaires d'évènements de la transaction pour gérer la réussite ou l'échec des opérations. Ensuite, on annule les opérations de la transaction grâce à <code>abort()</code>. Pour un exemple complet, vous pouvez consulter <a href="https://github.com/mdn/to-do-notifications/">notre application de notifications To-do</a> (cf. <a href="https://mdn.github.io/to-do-notifications/">la démonstration <em>live</em></a>).</p>
+
+<pre class="brush: js">// On ouvre la base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '&lt;li&gt;Initialisation de la base.&lt;/li&gt;';
+
+  // On enregistre le résultat de l'ouverture dans la
+  // variable db afin de l'utiliser ensuite
+  db = DBOpenRequest.result;
+
+  // On exécute la fonction addData() afin d'ajouter
+  // des données à la base de données
+  addData();
+};
+
+function addData() {
+  // On crée un nouvel objet pour l'insérer dans la reate a new object ready for being
+  // inserted into the IDB
+  var newItem = [ { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: "December", year: 2013, notified: "no" } ];
+
+  // On ouvre une transaction en lecture/écriture
+  // afin d'ajouter des données
+  var transaction = db.transaction(["toDoList"], "readwrite");
+
+  // On gère la réussite de la transaction
+  transaction.oncomplete = function(event) {
+    note.innerHTML += '&lt;li&gt;Transaction terminée : modifications appliquées.&lt;/li&gt;';
+  };
+
+
+  transaction.onerror = function(event) {
+    note.innerHTML += '&lt;li&gt;Transaction non ouverte à cause d'une erreur.&lt;/li&gt;';
+  };
+
+  // On crée le magasin d'objet pour la transaction
+  var objectStore = transaction.objectStore("toDoList");
+
+  // On ajoute un nouvel objet newItem au magasin d'objet
+  var objectStoreRequest = objectStore.add(newItem[0]);
+
+  objectStoreRequest.onsuccess = function(event) {
+    // On gère la réussite de l'ajout de l'élément dans
+    // la base de données
+    note.innerHTML += '&lt;li&gt;Nouvel objet ajouté dans la base de données.&lt;/li&gt;';
+  };
+
+  // On annule la transaction en cours
+  transaction.abort();
+};</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="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', '#widl-IDBTransaction-abort-void', 'abort')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24 (unprefix)</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, partial</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</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/idbtransaction/abort_event/index.html b/files/fr/web/api/idbtransaction/abort_event/index.html
new file mode 100644
index 0000000000..36d16a63ac
--- /dev/null
+++ b/files/fr/web/api/idbtransaction/abort_event/index.html
@@ -0,0 +1,75 @@
+---
+title: abort
+slug: Web/API/IDBTransaction/abort_event
+translation_of: Web/API/IDBTransaction/abort_event
+---
+<p>Le gestionnaire<strong> </strong>d'arrêt est exécuté lorsqu'une transaction a été interrompue.</p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">Event</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Oui</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">IDBTransaction</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Aucune</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Evénements_liés">Evénements liés</h2>
+
+<ul>
+ <li>{{event("success")}}</li>
+ <li>{{event("error")}}</li>
+ <li>{{event("abort")}}</li>
+ <li>{{event("complete")}}</li>
+ <li>{{event("upgradeneeded")}}</li>
+ <li>{{event("blocked")}}</li>
+ <li>{{event("versionchange")}}</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/IndexedDB/Using_IndexedDB">Utilisation d'IndexedDB</a></li>
+</ul>
diff --git a/files/fr/web/api/idbtransaction/complete_event/index.html b/files/fr/web/api/idbtransaction/complete_event/index.html
new file mode 100644
index 0000000000..78ced266c7
--- /dev/null
+++ b/files/fr/web/api/idbtransaction/complete_event/index.html
@@ -0,0 +1,89 @@
+---
+title: complete
+slug: Web/API/IDBTransaction/complete_event
+translation_of: Web/API/IDBTransaction/complete_event
+---
+<p>Le gestionnaire <strong>complete</strong> est exécuté lorsqu'une transaction est complétée avec succès.</p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">Event</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">IDBTransaction</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Aucune</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush:js;">var transaction = db.transaction(["customers"], IDBTransaction.versionchange);
+
+transaction.oncomplete = function( event ) {
+  ...
+}
+
+// qui est équivalent à
+transaction.addEventListener("complete", function( event ) {
+  ...
+});
+</pre>
+
+<h2 id="Evénements_liés">Evénements liés</h2>
+
+<ul>
+ <li>{{event("success")}}</li>
+ <li>{{event("error")}}</li>
+ <li>{{event("abort")}}</li>
+ <li>{{event("complete")}}</li>
+ <li>{{event("upgradeneeded")}}</li>
+ <li>{{event("blocked")}}</li>
+ <li>{{event("versionchange")}}</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/IndexedDB/Using_IndexedDB">Utilisation d'indexedDB</a></li>
+</ul>
diff --git a/files/fr/web/api/idbtransaction/db/index.html b/files/fr/web/api/idbtransaction/db/index.html
new file mode 100644
index 0000000000..460fc2d4c7
--- /dev/null
+++ b/files/fr/web/api/idbtransaction/db/index.html
@@ -0,0 +1,189 @@
+---
+title: IDBTransaction.db
+slug: Web/API/IDBTransaction/db
+tags:
+  - API
+  - IDBTransaction
+  - IndexedDB
+  - Propriété
+  - Reference
+translation_of: Web/API/IDBTransaction/db
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La propriété <strong><code>db</code></strong> de l'interface {{domxref("IDBTransaction")}} renvoie la {{domxref("IDBDatabase","connexion","",1)}} à la base de donnée associée à la {{domxref("IDBTransaction","transaction","",1)}}.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var myDatabase = transaction.db;</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une {{domxref("IDBDatabase","connexion","",1)}} à la base de données sous la forme d'un objet <code>IDBDatabase</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans le fragment de code suivant, on ouvre une {{domxref("IDBDatabase","connexion","",1)}} à la base de donnée. Sur cette connexion on démarre une {{domxref("IDBTransaction","transaction","",1)}} en lecture/écriture pour {{domxref("IDBObjectStore","accéder au magasin d'objet","",1)}}  <code>"toDoList"</code> et y {{domxref("IDBObjectStore.add","ajouter","",1)}} un enregistrement. Notez également les gestionnaires d'événements {{domxref("IDBTransaction.oncomplete","oncomplete")}} et {{domxref("IDBTransaction.onerror","onerror")}} de la transaction qui affichent sur la page le résultat de la transaction.</p>
+
+<p>À la fin, la méthode <strong><code>db</code></strong> sert à renvoyer la connexion à la base de données associée à la transaction.</p>
+
+<pre class="brush: js">//Connexion à la base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += 'Connexion établie.';
+
+  //Affecter la connexion à la variable db.
+  db = DBOpenRequest.result;
+
+  // Exécuter la fonction addData () pour emmagasiner
+  // les données dans la base
+  addData();
+};
+function addData() {
+    //Un nouvel objet prêt à être emmagasiné
+  newItem = [ { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: "December", year: 2013, notified: "no" } ];
+
+  // Ouvrir une transaction de lecture / écriture
+  // pour permettre le traitement des données sur la connexion
+  var transaction = db.transaction(["toDoList"], "readwrite");
+
+  // En cas de succès de l'ouverture de la transaction
+  transaction.oncomplete = function(event) {
+    note.innerHTML += '&lt;li&gt;Transaction complété : modification de la base de données terminée.&lt;/li&gt;';
+  };
+  // En  cas d'échec de l'ouverture de la transaction
+  transaction.onerror = function(event) {
+    note.innerHTML += '&lt;li&gt;Erreur transaction non ouverte, doublons interdits.&lt;/li&gt;';
+  };
+
+  // Ouvrir l'accès au un magasin "toDoList" de la transaction
+  var objectStore = transaction.objectStore("toDoList");
+
+  // Ajouter un enregistrement
+  var objectStoreRequest = objectStore.add(newItem[0]);
+  objectStoreRequest.onsuccess = function(event) {
+    // Signaler l'ajout de l'enregistrement
+    note.innerHTML += '&lt;li&gt;Enregistrement ajouté.&lt;/li&gt;';
+  };
+  // Renvoyer la connexion à la base de donnée
+  //associée à cette transaction.
+  transaction.db;
+};
+ </pre>
+
+<p class="note"><strong>Note :</strong> pour un exemple fonctionnel complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">application To-do</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple</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('IndexedDB', '#widl-IDBTransaction-db', 'db')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview 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>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</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/idbtransaction/error/index.html b/files/fr/web/api/idbtransaction/error/index.html
new file mode 100644
index 0000000000..a66b371b97
--- /dev/null
+++ b/files/fr/web/api/idbtransaction/error/index.html
@@ -0,0 +1,189 @@
+---
+title: IDBTransaction.error
+slug: Web/API/IDBTransaction/error
+tags:
+  - API
+  - Erreur
+  - IDBTransaction
+  - IndexedDB
+  - Propriété
+  - Reference
+translation_of: Web/API/IDBTransaction/error
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La propriété <strong><code>IDBTransaction.error</code></strong> de l'interface {{domxref("IDBTransaction")}} renvoie un type d'erreur lorsque la {{domxref("IDBTransaction","transaction","",1)}} échoue.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var myError = transaction.error;</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>L'{{domxref("DOMError","erreur","",1)}} correspondante qui est un objet <code>DOMError</code>. Il y a différents types d'erreurs possibles : l'erreur obtenue peut ainsi faire référence à l'objet de la requête qui l'a déclenchée ou à un échec de la transaction (par exemple <code> QuotaExceededError</code> ou <code> UnknownError</code>).</p>
+
+<p>Cette propriété vaut <code>null</code> si la transaction n'est pas terminée ou qu'elle est terminée avec succès ou qu'elle a été annulée avec la méthode {{domxref("IDBTransaction.abort","abort")}}.</p>
+
+<p class="note"><strong>Note :</strong> Dans Chrome 48+ cette propriété renvoie une exception {{domxref ("DOMException")}} parce que le type {{domxref("DOMError")}} a été retiré de la norme DOM.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans le fragment de code suivant, on ouvre une {{domxref("IDBDatabase","connexion","",1)}} à la base de donnée. Sur cette connexion on démarre une {{domxref("IDBTransaction","transaction","",1)}} en lecture/écriture pour {{domxref("IDBObjectStore","accéder au magasin d'objet","",1)}}  <code>"toDoList"</code> et y {{domxref("IDBObjectStore.add","ajouter","",1)}} un enregistrement. Notez également les gestionnaires d'événements {{domxref("IDBTransaction.oncomplete","oncomplete")}} et {{domxref("IDBTransaction.onerror","onerror")}} de la transaction qui affichent sur la page le résultat de la transaction.</p>
+
+<p>La propriété <strong><code>error</code></strong> sert dans le bloc <code>transaction.onerror = function(event) {...}</code> afin d'afficher le type d'erreur qui est survenue.</p>
+
+<pre class="brush: js">//Connexion à la base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '&lt;li&gt;Connexion établie.&lt;/li&gt;';
+
+  //Affecter la connexion à la variable db.
+  db = DBOpenRequest.result;
+
+  // Exécuter la fonction addData () pour emmagasiner
+  // les données dans la base
+  addData();
+};
+
+function addData() {
+  // Créer un nouvel objet prêt à être emmagasiné
+  newItem = [ { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: "December", year: 2013, notified: "no" } ];
+
+  // Ouvrir une transaction de lecture / écriture
+  // pour permettre le traitement des données sur la connexion
+  var transaction = db.transaction(["toDoList"], "readwrite");
+
+  // En cas de succès de l'ouverture de la transaction
+  transaction.oncomplete = function(event) {
+    note.innerHTML += '&lt;li&gt;Transaction terminée : modification de la base de données terminée.&lt;/li&gt;';
+  };
+  // En  cas d'échec de l'ouverture de la transaction
+  transaction.onerror = function(event) {
+    note.innerHTML += '&lt;li&gt;L\'erreur: "' + transaction.error +'" s\'est produite, échec de la transaction.&lt;/li&gt;';
+  };
+
+  // Ouvrir l'accès au un magasin "toDoList" de la transaction
+  var objectStore = transaction.objectStore("toDoList");
+
+  // Ajouter un enregistrement
+  var objectStoreRequest = objectStore.add(newItem[0]);
+  objectStoreRequest.onsuccess = function(event) {
+    // Signaler l'ajout de l'enregistrement
+    note.innerHTML += '&lt;li&gt;Enregistrement ajouté.&lt;/li&gt;';
+  };
+ };
+ </pre>
+
+<p class="note"><strong>Note :</strong> pour un exemple fonctionnel complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">application To-do</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple</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('IndexedDB', '#transaction', 'IDBTransaction')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</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/idbtransaction/index.html b/files/fr/web/api/idbtransaction/index.html
new file mode 100644
index 0000000000..a48077f753
--- /dev/null
+++ b/files/fr/web/api/idbtransaction/index.html
@@ -0,0 +1,304 @@
+---
+title: IDBTransaction
+slug: Web/API/IDBTransaction
+tags:
+  - API
+  - IDBTransaction
+  - IndexedDB
+  - Interface
+  - Reference
+translation_of: Web/API/IDBTransaction
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>L'interface <strong><code>IDBTransaction</code></strong> de l'<a href="/fr/docs/Web/API/API_IndexedDB">API IndexedDB</a> fournit une transaction statique asynchrone vers une base de données grâce à des attributs de gestion d'évènementns. Toutes les opérations de lecture et d'écriture de données sont effectuées au sein de transaction. Il est possible d'utiliser {{domxref("IDBDatabase")}} afin d'initier des transactions puis {{domxref("IDBTransaction")}} afin de paramétrer le mode de la transaction (c'est-à-dire s'il est en lecture seule ou en lecture/écriture) et d'accéder à un objet {{domxref("IDBObjectStore")}} pour réaliser une requête. On peut également utiliser <code>IDBTransaction</code> pour interrompre une requête.</p>
+
+<p>S'il vous garantir une certaine longévité (par exemple si on utilise des données critiques qui ne peuvent pas être recalculées par la suite), il est possible d'écrire le contenu de la transaction sur le disque avant la diffusion de l'évènement <code>complete</code> grâce au mode expérimental non-standard <code>readwriteflush</code> (cf. {{domxref("IDBDatabase.transaction")}}).</p>
+
+<p>On notera qu'une transaction commence dès sa création et pas lorsque la première requête est lancée. Par exemple :</p>
+
+<pre class="brush: js" id="comment_text_0">var trans1 = db.transaction("toto", "readwrite");
+var trans2 = db.transaction("toto", "readwrite");
+trans2.put("2", "clé");
+trans1.put("1", "clé");
+</pre>
+
+<p>Une fois que le code est exécuté, le magasin d'objet contiendra la valeur "2" car la transaction est lancée après la transaction <code>trans1</code>.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p>Cette interface hérite de {{domxref("EventTarget")}}.</p>
+
+<dl>
+ <dt>{{domxref("IDBTransaction.abort")}}</dt>
+ <dd>Cette méthode annule les modifications apportées aux objets associés à cette transaction. Si la transaction a déjà été interrompue ou est terminée, cette méthode déclenchera un évènement d'erreur.</dd>
+ <dt>{{domxref("IDBTransaction.objectStore")}}</dt>
+ <dd>Cette méthode renvoie un objet {{domxref("IDBObjectStore")}} qui représente le magasin d'objet associé à cette transaction.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("IDBTransaction.db")}} {{readonlyInline}}</dt>
+ <dd>La connexion à la base de données associée à cette transaction.</dd>
+ <dt>{{domxref("IDBTransaction.mode")}} {{readonlyInline}}</dt>
+ <dd>Le mode de la transaction qui définit la façon dont on accède/modifie les données. Les différentes valeurs sont définies ci-après dans la section Constante. Par défaut, la valeur est <code>readonly</code>.</dd>
+ <dt>{{domxref("IDBTransaction.objectStoreNames")}} {{readonlyinline}}</dt>
+ <dd>Cette propriété est une liste ({{domxref("DOMStringList")}}) des noms des objets {{domxref("IDBObjectStore")}}.</dd>
+ <dt>{{domxref("IDBTransaction.error")}} {{readonlyInline}}</dt>
+ <dd>Cette propriété renvoie le type de l'erreur qui se produit lorsque la transaction infructueuse. Cette propriété vaut <code>null</code> si la transaction n'est pas finie, est finie et validée correctement ou a été cloturée avec la fonction{{domxref("IDBTransaction.abort")}}.</dd>
+</dl>
+
+<h3 id="Gestionnaires_d'évènements">Gestionnaires d'évènements</h3>
+
+<dl>
+ <dt>{{domxref("IDBTransaction.onabort")}} {{readonlyInline}}</dt>
+ <dd>Ce gestionnaire permet de gérer l'évènement <code>abort</code> qui est déclenché lorsque la transaction a été interrompue.</dd>
+ <dt>{{domxref("IDBTransaction.oncomplete")}} {{readonlyInline}}</dt>
+ <dd>Ce gestionnaire permet de gérer l'évènement <code>complete</code> qui est  déclenché lorsque la transaction se finit correctement.</dd>
+ <dt>{{domxref("IDBTransaction.onerror")}} {{readonlyInline}}</dt>
+ <dd>Ce gestionnaire permet de gérer l'évènement <code>error</code> qui est déclenché lorsqu'une erreur empêche la transaction de se finir correctement.</dd>
+</dl>
+
+<h2 id="Les_différents_modes">Les différents modes</h2>
+
+<p>Une transaction peut s'effectuer dans l'un de ces modes :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Valeur</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <p>"readonly"</p>
+
+    <p>(0 dans Chrome)</p>
+   </td>
+   <td>Ce mode permet de lire les données mais pas de les modifier.</td>
+  </tr>
+  <tr>
+   <td>
+    <p>"readwrite"</p>
+
+    <p>(1 dans Chrome)</p>
+   </td>
+   <td>Ce mode permet de lire, d'écrire et de modifier les données du magasin d'objets.</td>
+  </tr>
+  <tr>
+   <td>
+    <p>"versionchange"</p>
+
+    <p>(2 dans Chrome)</p>
+   </td>
+   <td>Ce mode permet d'effectuer toutes les opérations, y compris l'ajout ou la suppression de magasins d'objets et d'index. Ce mode doit être utilisé pour mettre à jour le numéro de version utilisé par les transactions démarées avec la méthode <a href="/fr/docs/Web/API/IDBDatabase"><code>setVersion()</code></a> de <code><a href="/fr/docs/Web/API/IDBDatabase">IDBDatabase</a></code>. Les transactions lancées dans ce mode ne peuvent pas être lancées en même temps que d'autres transactions. Ces transactions sont parfois qualifiées comme « transactions de mise à jour ».</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on ouvre une transaction en lecture/écriture sur la base de données et on ajoute des données dans le magasin d'objet. On notera également l'utilisation des gestionnaires d'évènements attachés à la transaction qui permettent d'indiquer la réussite ou l'échec de l'ouverture de la transaction. Pour un exemple complet, voir <a href="https://github.com/mdn/to-do-notifications/">l'application de notifications To-do</a> (<a href="https://mdn.github.io/to-do-notifications/">voir également la démonstration <em>live</em></a>)</p>
+
+<pre class="brush: js">// On commence par ouvrir la base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '&lt;li&gt;Initialisation de la base.&lt;/li&gt;';
+
+  // On enregistre le résultat de l'ouverture
+  // dans la variable db afin de l'utiliser
+  // ensuite
+  var db = DBOpenRequest.result;
+
+  // On utilise la fonction addData() afin d'ajouter
+  // des données à la base de données
+  addData();
+};
+
+function addData() {
+  // On crée un nouvel objet prêt à être inséré
+  // dans la base de données
+  var newItem = [ { taskTitle: "Promener le chien", hours: 19, minutes: 30, day: 24, month: "Décembre", year: 2013, notified: "no" } ];
+
+  // On ouvre une transaction en lecture/écriture
+  // vers la base de données afin d'ajouter des
+  // données
+  var transaction = db.transaction(["toDoList"], "readwrite");
+
+  // On indique le succès de la transaction
+  transaction.oncomplete = function(event) {
+    note.innerHTML += '&lt;li&gt;Transaction terminée : modification finie.&lt;/li&gt;';
+  };
+
+
+  transaction.onerror = function(event) {
+    note.innerHTML += '&lt;li&gt;Transaction non-ouverte à cause d'une erreur. Les doublons ne sont pas autorisés.&lt;/li&gt;';
+  };
+
+  // On crée un magasin d'objet pour la transaction
+  var objectStore = transaction.objectStore("toDoList");
+
+  // On ajoute l'objet newItem au magasin d'objets
+  var objectStoreRequest = objectStore.add(newItem[0]);
+
+  objectStoreRequest.onsuccess = function(event) {
+    // On indique le succès de l'ajout de l'objet
+    // dans la base de données
+    note.innerHTML += '&lt;li&gt;Un nouvel élément a été ajouté dans la base de données.&lt;/li&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('IndexedDB', '#transaction', 'IDBTransaction')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support simple</td>
+   <td>{{CompatChrome(23)}}{{property_prefix("webkit")}}<br>
+    {{CompatChrome(24)}}<br>
+    {{CompatChrome(38)}} (dépréciation des préfixes)<br>
+    {{CompatChrome(57)}} (retrait des préfixes)</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, partial</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}<br>
+    {{CompatChrome(38)}} (dépréciation des préfixes)<br>
+    {{CompatChrome(57)}} (retrait des préfixes)</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(35)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>objectStoreNames</code></td>
+   <td>{{CompatChrome(48.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("50.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(35)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Webview Android</th>
+   <th>Chrome pour 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>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatVersionUnknown}}<br>
+    {{CompatChrome(38)}} (dépréciation des préfixes)<br>
+    {{CompatChrome(57)}} (retrait des préfixes)</td>
+   <td>{{CompatVersionUnknown}}<br>
+    {{CompatChrome(38)}} (dépréciation des préfixes)<br>
+    {{CompatChrome(57)}} (retrait des préfixes)</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}<br>
+    {{CompatChrome(38)}} (dépréciation des préfixes)<br>
+    {{CompatChrome(57)}} (retrait des préfixes)</td>
+   <td>{{CompatVersionUnknown}}<br>
+    {{CompatChrome(38)}} (dépréciation des préfixes)<br>
+    {{CompatChrome(57)}} (retrait des préfixes)</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile(35)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>objectStoreNames</code></td>
+   <td>{{CompatChrome(48.0)}}</td>
+   <td>{{CompatChrome(48.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOperaMobile(35)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(48.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Older versions of Chrome serialize all transactions. So even if you have only read-only transactions and no read-write transaction, your transactions are executed one at a time. Any subsequent transactions are not executed until all read-only transactions are completed. For the status, see <a href="https://crbug/64076">bug 64076</a>.</p>
+
+<p>Note that as of Firefox 40, IndexedDB transactions have relaxed durability guarantees to increase performance (see {{Bug("1112702")}}.) Previously in a <code>readwrite</code> transaction {{domxref("IDBTransaction.oncomplete")}} was fired only when all data was guaranteed to have been flushed to disk. In Firefox 40+ the <code>complete</code> event is fired after the OS has been told to write the data but potentially before that data has actually been flushed to disk. The <code>complete</code> event may thus be delivered quicker than before, however, there exists a small chance that the entire transaction will be lost if the OS crashes or there is a loss of system power before the data is flushed to disk. Since such catastrophic events are rare most consumers should not need to concern themselves further.</p>
+
+<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/idbtransaction/mode/index.html b/files/fr/web/api/idbtransaction/mode/index.html
new file mode 100644
index 0000000000..2a5ec909f3
--- /dev/null
+++ b/files/fr/web/api/idbtransaction/mode/index.html
@@ -0,0 +1,213 @@
+---
+title: IDBTransaction.mode
+slug: Web/API/IDBTransaction/mode
+tags:
+  - API
+  - IDBTransaction
+  - IndexedDB
+  - Propriété
+  - Reference
+translation_of: Web/API/IDBTransaction/mode
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La propriété <strong><code>mode</code></strong> de l'interface {{domxref("IDBTransaction")}} renvoie le mode d'accès aux données des magasins d'objet pendant la transaction (autrement dit, s'agit-il d'une transaction en lecture seule ou d'un accès en écriture ?). La valeur par défaut est <code>readonly</code>.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>modeCourant</em> = <em>IDBTransaction</em>.mode;</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un objet {{domxref("IDBTransactionMode")}} qui définit le mode d'accès aux données des magasins d'objet :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Valeur</th>
+   <th scope="col">Signification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>readonly</code></td>
+   <td>Lecture seule : on peut lire (consulter) les données mais on ne peut pas les modifier.</td>
+  </tr>
+  <tr>
+   <td><code>readwrite</code></td>
+   <td>Lecture et écriture : on peut lire et écrire (modifier) des données dans les magasins d'objet.</td>
+  </tr>
+  <tr>
+   <td><code>versionchange</code></td>
+   <td>Toutes les opérations peuvent être effectuées, y compris celles qui suppriment ou créent des magasins d'objets et des index. Ce mode doit être utilisé lorsqu'on souhaite mettre à jour le numéro de version pour les transactions qui démarrent avec {{domxref("IDBDatabase.setVersion()")}}. Les transactions effectuées dans ce mode ne peuvent pas être exécutées de façon concurrente avec les autres transactions. Les transactions effectuées dans ce mode sont parfois appelées transactions de mise à jour (<em>upgrade transactions</em>).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans le fragment de code suivant, on ouvre une transaction en lecture/écriture sur la base de données et on ajoute des données au magasin d'objets. On notera que les fonctions attachées aux gestionnaires d'évènement de la transaction permettent de rapporter des informations en cas de succès ou d'échec de la transaction. Enfin, on affiche le mode de la transaction dans la console grâce à la propriété <code>mode</code>. Pour un exemple complet, se référer à l'<a href="https://github.com/mdn/to-do-notifications/">exemple d'application To-do</a> (cf. <a href="https://mdn.github.io/to-do-notifications/">la démonstration</a>).</p>
+
+<pre class="brush: js">// On ouvre la base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '&lt;li&gt;Initialisation de la base de données.&lt;/li&gt;';
+
+  // On enregistre le résultat de l'ouverture dans la variable
+  // db utilisée ensuite.
+  var db = DBOpenRequest.result;
+
+  // On utilise la fonction addData() afin d'ajouter des données
+  // dans la base de données
+  addData();
+};
+
+function addData() {
+  // On crée un nouvel objet prêt à être inséré dans la base
+  // de données
+  var newItem = [ { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: "December", year: 2013, notified: "no" } ];
+
+  // On ouvre une transaction en lecture/écriture afin d'ajouter
+  // des données
+  var transaction = db.transaction(["toDoList"], "readwrite");
+
+  // On gère le succès ou l'échec de la transaction
+  transaction.oncomplete = function(event) {
+    note.innerHTML += '&lt;li&gt;Transaction terminée : modifications appliquées.&lt;/li&gt;';
+  };
+
+  transaction.onerror = function(event) {
+    note.innerHTML += '&lt;li&gt;Transaction non-ouverte à cause d'une erreur (duplication d'objet interdite).&lt;/li&gt;';
+  };
+
+  // On crée un magasin d'objets pour la transaction
+  var objectStore = transaction.objectStore("toDoList");
+
+  // On ajoute l'objet newItem dans le magasin d'objets
+  var objectStoreRequest = objectStore.add(newItem[0]);
+
+  objectStoreRequest.onsuccess = function(event) {
+    // On indique le succès de l'opération pour ajouter
+    // l'objet dans la base de données
+    note.innerHTML += '&lt;li&gt;Nouvel objet ajouté à la base de données.&lt;/li&gt;';
+  };
+
+  // On renvoie le mode de la transaction qui était ouverte
+  // (ce devrait être "readwrite")
+  transaction.mode;
+};</pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="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', '#widl-IDBTransaction-mode', 'mode')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, partial</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview 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>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</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/idbtransaction/objectstore/index.html b/files/fr/web/api/idbtransaction/objectstore/index.html
new file mode 100644
index 0000000000..6fcde8434f
--- /dev/null
+++ b/files/fr/web/api/idbtransaction/objectstore/index.html
@@ -0,0 +1,196 @@
+---
+title: IDBTransaction.objectStore()
+slug: Web/API/IDBTransaction/objectStore
+tags:
+  - API
+  - IndexedDB
+  - Méthode
+  - Reference
+translation_of: Web/API/IDBTransaction/objectStore
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La méthode <strong><code>objectStore()</code></strong>, rattachée à l'interface {{domxref("IDBTransaction")}}, renvoie l'accès à un des magasins d'objets liés à la transation sous la forme d'un objet {{domxref("IDBObjectStore")}}.</p>
+
+<p>Si cette méthode est appelée plusieurs fois sur la même transaction et avec le même nom de magasin, elle renverra la même instance de  {{domxref("IDBObjectStore")}}. Si cette méthode est appelée sur une autre transaction, elle renverra une instance différente.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var objectStore = transaction.objectStore(nom);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>nom</code></dt>
+ <dd>Le nom du magasin d'objets auquel on veut accéder.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un objet {{domxref("IDBObjectStore")}} qui permet d'accéder au magasin d'objets.</p>
+
+<h2 id="Exceptions">Exceptions</h2>
+
+<dl>
+ <dt><code>NotFoundError</code></dt>
+ <dd>Cette exception {{domxref("DOMException")}} est levée si le magasin d'objets demandé n'a pas été trouvé sur la transaction.</dd>
+ <dt><code>InvalidStateError</code></dt>
+ <dd>Cette exception {{domxref("DOMException")}} est levée si la transaction est terminée ou si la demande a été faite sur un objet source qui a été supprimé ou retiré.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans le code qui suit, on ouvre une connexion à la base de données. Sur cette connexion, on démarre une transaction (cf.  {{domxref("IDBTransaction")}}) en lecture/écriture afin d'accéder au magasin d'objets <code>"toDoList"</code> pour y ajouter un enregistrement (via la méthode {{domxref("IDBObjectStore.add")}}). On notera également l'utilisation des gestionnaires d'événement {{domxref("IDBTransaction.oncomplete")}} et {{domxref("IDBTransaction.onerror")}} de la transaction qui permettent d'afficher la résultat de la transaction sur la page.</p>
+
+<p>La méthode <strong><code>objectStore()</code></strong> permet d'accéder au magasin d'objets <code>"toDoList"</code>.</p>
+
+<pre class="brush: js">// Connexion à la base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '&lt;li&gt;Connexion établie.&lt;/li&gt;';
+
+  // On affecte la connexion à la variable db.
+  db = DBOpenRequest.result;
+
+  // On exécute la fonction addData() pour
+  // ajouter des données dans la base
+  addData();
+};
+
+function addData() {
+  // Un nouvel objet prêt à être emmagasiné
+  newItem = [ { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: "December", year: 2013, notified: "no" } ];
+
+  // On ouvre une transaction en lecture/écriture
+  // pour le traitement des données sur la connexion
+  var transaction = db.transaction(["toDoList"], "readwrite");
+
+  // On utilise oncomplete en cas de succès de
+  // l'ouverture de la transaction
+  transaction.oncomplete = function(event) {
+    note.innerHTML += '&lt;li&gt;Transaction terminée : modification de la base de données OK.&lt;/li&gt;';
+  };
+
+  // En cas d'échec de l'ouverture, on utilisera
+  // le gestionnaire onerror
+  transaction.onerror = function(event) {
+    note.innerHTML += '&lt;li&gt;L\'erreur: "' + transaction.error +'" s\'est produite, échec de la transaction.&lt;/li&gt;';
+  };
+
+  // On ouvre un magasin d'objets sur la transaction
+  // grâce à la méthode objectStore
+  var objectStore = transaction.objectStore("toDoList");
+
+  // Enfin, on ajoute un enregistrement
+  var objectStoreRequest = objectStore.add(newItem[0]);
+  objectStoreRequest.onsuccess = function(event) {
+    // et on signale l'ajout de l'enregistrement
+    note.innerHTML += '&lt;li&gt;Enregistrement ajouté.&lt;/li&gt;';
+  };
+};
+</pre>
+
+<p class="note"><strong>Note :</strong> Pour un exemple fonctionnel complet, voir notre application <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">l'exemple <em>live</em> est disponible ici</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('IndexedDB', '#widl-IDBTransaction-objectStore-IDBObjectStore-DOMString-name', 'objectStore()')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible via les <em>web workers</em></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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Disponible via les <em>web workers</em></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>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Manipuler IndexedDB</a></li>
+ <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li>
+ <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li>
+ <li>Manipuler des curseurs : {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence pour IndexedDB : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/idbtransaction/objectstorenames/index.html b/files/fr/web/api/idbtransaction/objectstorenames/index.html
new file mode 100644
index 0000000000..65eb8f767d
--- /dev/null
+++ b/files/fr/web/api/idbtransaction/objectstorenames/index.html
@@ -0,0 +1,106 @@
+---
+title: IDBTransaction.objectStoreNames
+slug: Web/API/IDBTransaction/ObjectStoreNames
+tags:
+  - API
+  - IndexedDB
+  - Propriété
+  - Reference
+translation_of: Web/API/IDBTransaction/ObjectStoreNames
+---
+<div>{{APIRef("IndexedDB")}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>objectStoreNames</code></strong> de l'interface {{domxref("IDBTransaction")}} renvoie la {{domxref("DOMStringList","liste")}} des noms des magasins d'objets de la {{domxref("IDBTransaction","transaction")}} .</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var maBaseDeDonnees = transactionObj.objectStoreNames;</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une liste {{domxref("DOMStringList")}} contenant les noms des magasins d'objets liés à la transaction ({{domxref("IDBTransaction")}}).</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('IndexedDB2', '#dom-idbtransaction-objectstorenames', 'db')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatChrome(48.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(48.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(48.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Manipuler IndexedDB</a></li>
+ <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li>
+ <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li>
+ <li>Manipuler des curseurs : {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence pour IndexedDB : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/idbtransaction/onabort/index.html b/files/fr/web/api/idbtransaction/onabort/index.html
new file mode 100644
index 0000000000..efdfe1acf9
--- /dev/null
+++ b/files/fr/web/api/idbtransaction/onabort/index.html
@@ -0,0 +1,182 @@
+---
+title: IDBTransaction.onabort
+slug: Web/API/IDBTransaction/onabort
+tags:
+  - API
+  - IndexedDB
+  - Propriété
+  - Reference
+translation_of: Web/API/IDBTransaction/onabort
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>Le gestionnaire d'événement <strong><code>onabort</code></strong>, rattaché à l'interface {{domxref("IDBTransaction")}}, s'exécute au déclenchement d'un événement <code><a href="/fr/docs/Web/Events/abort">abort</a></code>, lorsque la transaction a été annulée avec la méthode {{domxref("IDBTransaction.abort")}}.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">transaction.onabort = function() { ... };</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans le code suivant, on ouvre une connexion à la base de données. Sur cette connexion, on démarre une transaction avec {{domxref("IDBTransaction")}} en lecture/écriture pour accéder au magasin d'objets intitulé <code>"toDoList"</code> et y ajouter un enregistrement (grâce à la méthode {{domxref("IDBObjectStore.add")}}). On notera également l'utilisation des gestionnaires d'événement {{domxref("IDBTransaction.oncomplete")}} et {{domxref("IDBTransaction.onerror")}} qui affichent le résultat de la transaction sur la page.</p>
+
+<p>On voit ici le gestionnaire d'événement <strong><code>onabort</code></strong> qui est utilisé pour afficher un message sur la console du développeur.</p>
+
+<pre class="brush: js">// Connexion à la base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '&lt;li&gt;Connexion établie.&lt;/li&gt;';
+
+  // On affecte la connexion à la variable db.
+  db = DBOpenRequest.result;
+
+  // On exécute la fonction addData () afin de
+  // stocker des données dans la base
+  addData();
+};
+
+function addData() {
+  // Voici un nouvel objet prêt à être emmagasiné
+  newItem = [ { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: "December", year: 2013, notified: "no" } ];
+
+  // On ouvre une transaction en lecture/écriture, prête
+  // à traiter des données sur la connexion
+  var transaction = db.transaction(["toDoList"], "readwrite");
+
+  // On utilise oncomplete en cas de succès de
+  // l'ouverture de la transaction
+  transaction.oncomplete = function(event) {
+    note.innerHTML += '&lt;li&gt;Transaction terminée : modification de la base de données OK.&lt;/li&gt;';
+  };
+
+  // En cas d'échec de l'ouverture, ce sera
+  // le gestionnaire onerror qui interviendra
+  transaction.onerror = function(event) {
+    note.innerHTML += '&lt;li&gt;L\'erreur: "' + transaction.error +'" s\'est produite, échec de la transaction.&lt;/li&gt;';
+  };
+
+  // On ouvre l'accès au un magasin "toDoList"
+  // dans la transaction
+  var objectStore = transaction.objectStore("toDoList");
+
+  // Ici, l'enregistrement est ajouté
+  var objectStoreRequest = objectStore.add(newItem[0]);
+  objectStoreRequest.onsuccess = function(event) {
+    // On signale l'ajout de l'enregistrement
+    note.innerHTML += '&lt;li&gt;Enregistrement ajouté.&lt;/li&gt;';
+  };
+
+  transaction.onabort = function() {
+    // Ce gestionnaire permet de signaler
+    // qu'une transaction a été annulée avec succès
+    console.log("Transaction annulée !");
+  };
+
+  // On abandonne la transaction qu'on vient de faire
+  transaction.abort();
+};</pre>
+
+<p class="note"><strong>Note :</strong> Pour un exemple fonctionnel complet, voir notre application <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em> disponible</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('IndexedDB', '#widl-IDBTransaction-onabort', 'onabort')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, en partie</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible via les <em>web workers</em></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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Disponible via les <em>web workers</em></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>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Manipuler IndexedDB</a></li>
+ <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li>
+ <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li>
+ <li>Manipuler des curseurs : {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence pour IndexedDB : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/idbtransaction/oncomplete/index.html b/files/fr/web/api/idbtransaction/oncomplete/index.html
new file mode 100644
index 0000000000..ad72f26f93
--- /dev/null
+++ b/files/fr/web/api/idbtransaction/oncomplete/index.html
@@ -0,0 +1,180 @@
+---
+title: IDBTransaction.oncomplete
+slug: Web/API/IDBTransaction/oncomplete
+tags:
+  - API
+  - IndexedDB
+  - Propriété
+  - Reference
+translation_of: Web/API/IDBTransaction/oncomplete
+---
+<div>{{ APIRef("IndexedDB") }}</div>
+
+<p>Le gestionnaire d'événement <strong><code>oncomplete</code></strong>, rattaché à l'interface {{domxref("IDBTransaction")}}, s'exécute au déclenchement d'un événement <code><a href="/fr/docs/Web/Events/complete">complete</a></code> lorsque la transaction se termine avec succès.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Depuis Firefox 40, les transactions IndexedDB diminuent en efficacité pour gagner en efficience (voir {{Bug ( "1112702")}}). Auparavant, dans une transaction en <code><a href="#const_read_write">readwrite</a></code>, l'événement <code>complete</code> était déclenché seulement lorsque toutes les données étaient écrites sur le disque. Maintenant, l'événement <code>complete</code> est déclenché après que l'OS ai envoyé l'ordre d'écrire les données, mais potentiellement avant qu'elles aient été écrites sur le disque. L'événement <code>complete</code> peut ainsi être déclenché plus rapidement qu'auparavant. Cependant, il existe une chance infime pour que l'ensemble de la transaction soit perdue si le système d'exploitation plante ou s'il y a une perte de courant avant que les données aient été écrites sur le disque. Étant donné que ces événements catastrophiques sont rares, la plupart des utilisateurs ne devraient pas avoir à s'en préoccuper davantage.</p>
+
+<p class="warning">Si vous devez vous assurer de l'efficacité d'une transaction pour une raison quelconque (par exemple, vous stockez des données critiques qui ne peuvent être recalculé plus tard), vous pouvez forcer l'enregistrement complet sur disque avant de déclencher l'événement <code>complete</code> en utilisant le mode <code>readwriteflush</code> (non-standard) expérimental (cf. {{domxref("IDBDatabase.transaction")}} ). Ce mode expérimentale ne peut être utilisé que si la préférence<code> dom.indexedDB.experimental </code> pref est réglée sur <code> true</code> dans <code> about: config</code>.</p>
+</div>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">transaction.oncomplete = function() { ... };</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans le code suivant, on ouvre une connexion à la base de donnée. Ensuite, sur cette connexion, on démarre une transaction (avec  {{domxref("IDBTransaction")}}) en lecture/écriture pour accéder au magasin d'objet <code>"toDoList"</code> et y ajouter un enregistrement grâce à la méthode {{domxref("IDBObjectStore.add")}}. On notera également la façon dont le gestionnaire d'événement {{domxref("IDBTransaction.onerror")}} est utilisé dans la transaction.</p>
+
+<p>Le gestionnaires d'événement <strong><code>oncomplete</code></strong> de la transaction permet d'afficher un message de succès sur la page.</p>
+
+<pre class="brush: js">// Connexion à la base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '&lt;li&gt;Connexion établie.&lt;/li&gt;';
+
+  // Affectation de la connexion à la variable db.
+  db = DBOpenRequest.result;
+
+  // Exécution de la fonction addData () pour
+  // stocker des données dans la base
+  addData();
+};
+
+function addData() {
+  // Voici un nouvel objet prêt à être emmagasiné
+  newItem = [ { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: "December", year: 2013, notified: "no" } ];
+
+  // On ouvre une transaction en lecture/écriture
+  // prête au traitement des données sur la connexion
+  var transaction = db.transaction(["toDoList"], "readwrite");
+
+  // Voici le gestionnaire utilisé en cas de succès
+  // de l'ouverture de la transaction
+  transaction.oncomplete = function(event) {
+    note.innerHTML += '&lt;li&gt;Transaction terminée : modification de la base de données OK.&lt;/li&gt;';
+  };
+
+  // Et celui utilisé en cas d'échec de
+  // l'ouverture de la transaction
+  transaction.onerror = function(event) {
+    note.innerHTML += '&lt;li&gt;L\'erreur: "' + transaction.error +'" s\'est produite, échec de la transaction.&lt;/li&gt;';
+  };
+
+  // Puis, on ouvre l'accès au un magasin "toDoList"
+  // de la transaction
+  var objectStore = transaction.objectStore("toDoList");
+
+  // Enfin on ajoute l'enregistrement
+  var objectStoreRequest = objectStore.add(newItem[0]);
+  objectStoreRequest.onsuccess = function(event) {
+    // Et on signale l'ajout de l'enregistrement
+    note.innerHTML += '&lt;li&gt;Enregistrement ajouté.&lt;/li&gt;';
+  };
+ };
+</pre>
+
+<p class="note">Pour un exemple de travail complet, voir notre application <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em> disponible</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('IndexedDB', '#widl-IDBTransaction-oncomplete', 'oncomplete')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des  navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, en partie</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible via les <em>web workers</em></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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Disponible via les <em>web workers</em></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>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Manipuler IndexedDB</a></li>
+ <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li>
+ <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li>
+ <li>Manipuler des curseurs : {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence pour IndexedDB : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/idbtransaction/onerror/index.html b/files/fr/web/api/idbtransaction/onerror/index.html
new file mode 100644
index 0000000000..18c08c9a57
--- /dev/null
+++ b/files/fr/web/api/idbtransaction/onerror/index.html
@@ -0,0 +1,171 @@
+---
+title: IDBTransaction.onerror
+slug: Web/API/IDBTransaction/onerror
+tags:
+  - API
+  - IndexedDB
+  - Propriété
+  - Reference
+translation_of: Web/API/IDBTransaction/onerror
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>Le gestionnaire d'événement <strong><code>onerror</code></strong>, rattaché à l'interface {{domxref("IDBTransaction")}}, s'exécute au déclenchement d'un événement <code><a href="/fr/docs/Web/Events/error">error</a></code> lorsque la transaction échoue.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">transaction.onerror = function() { ... };</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans le code suivant, on commence par ouvrir une connexion à la base de donnée. Grâce à cette connexion, on initialise une transaction en lecture/écriture grâce à <code>IDBTransaction</code> pour accéder au magasin d'objets intitulé <code>toDoList</code> et y ajouter un enregistrement via la méthode  {{domxref("IDBObjectStore.add")}}. On notera également l'utilisation du gestionnaire d'événements {{domxref("IDBTransaction.oncomplete")}}.</p>
+
+<p>Le gestionnaire d'événement <strong><code>onerror</code></strong> de la transaction affiche le code d'erreur de la propriété propriété {{domxref("IDBTransaction.error","error")}} sur la page.</p>
+
+<pre class="brush: js">// Connexion à la base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+DBOpenRequest.onsuccess = function(event) {
+	note.innerHTML += '&lt;li&gt;Connexion établie.&lt;/li&gt;';
+
+	// On affecte la connexion à la variable db.
+	db = DBOpenRequest.result;
+
+	// On exécute la fonction addData () pour ajouter
+    // des données dans la base
+	addData();
+};
+function addData() {
+	// On crée un nouvel objet prêt à être emmagasiné
+	newItem = [ { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: "December", year: 2013, notified: "no" } ];
+
+	// On ouvre une transaction de lecture / écriture
+    // pour traiter les données via la connexion
+	var transaction = db.transaction(["toDoList"], "readwrite");
+
+	// En cas de succès de l'ouverture de la transaction
+    // on utilise ce gestionnaire
+	transaction.oncomplete = function(event) {
+		note.innerHTML += '&lt;li&gt;Transaction terminée : modification de la base de données OK.&lt;/li&gt;';
+	};
+	// En  cas d'échec de l'ouverture de la transaction
+    // on utilisera ce gestionnaire
+	transaction.onerror = function(event) {
+		note.innerHTML += '&lt;li&gt;L\'erreur: "' + transaction.error +'" s\'est produite, échec de la transaction.&lt;/li&gt;';
+	};
+
+	// On ouvre l'accès au magasin "toDoList" de la transaction
+	var objectStore = transaction.objectStore("toDoList");
+
+	// Enfin on ajoute un enregistrement
+	var objectStoreRequest = objectStore.add(newItem[0]);
+	objectStoreRequest.onsuccess = function(event) {
+		// On signale l'ajout de l'enregistrement
+		note.innerHTML += '&lt;li&gt;Enregistrement ajouté.&lt;/li&gt;';
+	};
+ };
+ </pre>
+
+<p class="note"><strong>Note :</strong> Pour un exemple de travail complet, voir l'application <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em> disponible ici</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('IndexedDB', '#widl-IDBTransaction-ononerror', 'onerror')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_avec_les_navigateurs">Compatibilité avec les navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, en partie</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible via les <em>web workers</em></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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Disponible via les <em>web workers</em></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>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Manipuler IndexedDB</a></li>
+ <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li>
+ <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li>
+ <li>Manipuler des curseurs : {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence pour IndexedDB : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/imagedata/data/index.html b/files/fr/web/api/imagedata/data/index.html
new file mode 100644
index 0000000000..93e6bb21c5
--- /dev/null
+++ b/files/fr/web/api/imagedata/data/index.html
@@ -0,0 +1,51 @@
+---
+title: ImageData.data
+slug: Web/API/ImageData/data
+translation_of: Web/API/ImageData/data
+---
+<p>{{APIRef("Canvas API")}}</p>
+
+<p>La propriété en lecteur seul <code>ImageData.data</code> retourne un {{jsxref("Uint8ClampedArray")}}. Il représente un tableau unidirectionnel contenant les données sous forme d'entiers inclus entre 0 et 255 dans l'ordre RGBA comme ceci : <code>[r1,g1,b1,a1,…,rn;gn;bn;an]</code>.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>imagedata</em>.data
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js  language-js">var imagedata = new ImageData(100, 100);
+imagedata.data; // Uint8ClampedArray[40000]
+</pre>
+
+<h2 id="Specification" name="Specification">Specification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'scripting.html#dom-imagedata-data', 'ImageData.data')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.ImageData.data")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("ImageData.height")}}</li>
+ <li>{{domxref("ImageData.width")}}</li>
+</ul>
+
+<div id="cke_pastebin" style="position: absolute; top: 459.5px; width: 1px; height: 1px; overflow: hidden; left: -1000px;"> </div>
diff --git a/files/fr/web/api/imagedata/index.html b/files/fr/web/api/imagedata/index.html
new file mode 100644
index 0000000000..c80d75e4b1
--- /dev/null
+++ b/files/fr/web/api/imagedata/index.html
@@ -0,0 +1,65 @@
+---
+title: ImageData
+slug: Web/API/ImageData
+tags:
+  - API
+  - Canvas
+  - DOM
+  - Images
+  - JavaScript
+translation_of: Web/API/ImageData
+---
+<p>{{APIRef("Canvas API")}}</p>
+
+<p>L'interface <code><strong>ImageData</strong></code> représente les données des pixels au sein d'une certaine zone dans un élément {{HTMLElement("canvas")}}. Elle est définie par les méthodes des constructeurs ou créateurs d'objet {{domxref("ImageData.ImageData", "ImageData()")}}  sur l'objet {{domxref("CanvasRenderingContext2D")}} associé à canevas,  {{domxref("CanvasRenderingContext2D.createImageData", "createImageData()")}} et  {{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}}. Elle peut être également utilisée pour redéfinir une partie du canevas en utilisant {{domxref("CanvasRenderingContext2D.putImageData", "putImageData()")}}.</p>
+
+<h2 id="Constructeurs">Constructeurs</h2>
+
+<dl>
+ <dt>{{domxref("ImageData.ImageData", "ImageData()")}} {{experimental_inline}}</dt>
+ <dd>Crée un objet ImageData à partir d'un {{jsxref ("Uint8ClampedArray")}} donné et la taille de l'image qu'il contient. Si aucun tableau n'est donné, il crée une image d'un rectangle noir. Notez que c'est la façon la plus courante de créer un tel objet dans les "Workers" car {{domxref ("CanvasRenderingContext2D.createImageData", "createImageData ()")}} n'y est pas disponible.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("ImageData.data")}}</dt>
+ <dd>Un {{domxref("Uint8ClampedArray")}} représentant un tableau à une seule dimension contenant les données des pixels sous format RVBA, chaque valeur comprise entre <code>0</code> et <code>255</code> (inclus).</dd>
+ <dt>{{domxref("ImageData.height")}} {{readonlyInline}}</dt>
+ <dd>Un <code>unsigned</code> <code>long</code> représentant la hauteur effective, en pixels, de l'objet <code>ImageData</code>.</dd>
+ <dt>{{domxref("ImageData.width")}} {{readonlyInline}}</dt>
+ <dd>Un <code>unsigned</code> <code>long</code> représentant la largeur effective, en pixels, de l'objet <code>ImageData</code>.</dd>
+</dl>
+
+<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('HTML WHATWG', "the-canvas-element.html#imagedata", "ImageData")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("api.ImageData")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+
+<ul>
+ <li>{{domxref("CanvasRenderingContext2D")}}.</li>
+ <li>L'élément {{HTMLElement("canvas")}} et l'interface associée, {{domxref("HTMLCanvasElement")}}.</li>
+</ul>
diff --git a/files/fr/web/api/index.html b/files/fr/web/api/index.html
new file mode 100644
index 0000000000..adbd2a33b8
--- /dev/null
+++ b/files/fr/web/api/index.html
@@ -0,0 +1,33 @@
+---
+title: Référence Web API
+slug: Web/API
+tags:
+  - API
+  - Applications
+  - DOM
+  - JavaScript
+  - Reference
+  - Web
+translation_of: Web/API
+---
+<p class="summary"><span class="seoSummary">Quand vous codez en JavaScript pour le web, il y a un grand nombre d'API disponibles. La liste ci-dessous énumère toutes les interfaces (types et objets) que vous pouvez appeler quand vous développez votre application web ou votre site.</span></p>
+
+<p>Les APIs Web sont habituellement utilisés avec le JavaScript, bien que cela ne devrait pas toujours être le cas.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Voici une liste de toutes les APIs disponibles.</p>
+
+<div>{{ListGroups}}</div>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<p>Voici une liste de toutes les interfaces (c'est à dire, les types d'objets) disponibles.</p>
+
+<div>{{APIListAlpha}}</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Events">Web API event reference</a></li>
+</ul>
diff --git a/files/fr/web/api/inputevent/index.html b/files/fr/web/api/inputevent/index.html
new file mode 100644
index 0000000000..01d6d8cdb9
--- /dev/null
+++ b/files/fr/web/api/inputevent/index.html
@@ -0,0 +1,73 @@
+---
+title: InputEvent
+slug: Web/API/InputEvent
+translation_of: Web/API/InputEvent
+---
+<div>{{APIRef("DOM Events")}} {{SeeCompatTable}}</div>
+
+<p>L’interface <strong><code>InputEvent</code></strong> représente un évènement notifiant la modification d’un contenu éditable.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("InputEvent.InputEvent", "InputEvent()")}}</dt>
+ <dd>Crée un objet <code>InputEvent</code>.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Cette interface hérite des propriétés de ses <em>parents, {{domxref("UIEvent")}} et {{domxref("Event")}}.</em></em></p>
+
+<dl>
+ <dt>{{domxref("InputEvent.data")}}{{readOnlyInline}}</dt>
+ <dd>Retourne une {{domxref("DOMString")}} avec les caractères insérést. Cela peut être une chaîne vide si la modification n’insère pas de texte (comme la suppression de caractères, par exemple).</dd>
+ <dt>{{domxref("InputEvent.dataTransfer")}}{{readonlyinline}}</dt>
+ <dd>Retourne un objet {{domxref("DataTransfer")}} contenant des informations sur des données de texte riche (<em>richtext</em>) ou brut (<em>plaintext</em>) étant ajoutées ou supprimées du contenu éditable.</dd>
+ <dt>{{domxref("InputEvent.inputType")}}{{readonlyinline}}</dt>
+ <dd>Retourne le type de modification du le contenu éditable tel que, par exemple, l’insertion, la suppression ou le formatage de texte. Voir la page de la propriété pour une liste complète des types de modification.</dd>
+ <dt>{{domxref("InputEvent.isComposing")}}{{readOnlyInline}}</dt>
+ <dd>Retourne une valeur {{jsxref("Boolean", "booléenne")}} indiquant si l’évènement est émis après {{event("compositionstart")}} et avant {{event("compositionend")}}.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Cette interface <em>hérite des méthodes de ses parents, {{domxref("UIEvent")}} et {{domxref("Event")}}.</em></em></p>
+
+<dl>
+ <dt>{{domxref('InputEvent.getTargetRanges()')}}</dt>
+ <dd>Retourne un tableau de {{domxref("Range", "ranges")}} statiques qui seront affectés par une modification du DOM si l’évènement input n’est pas annulé.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table" style="height: 49px; width: 1000px;">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('InputEvents2','#interface-InputEvent','InputEvent')}}</td>
+   <td>{{Spec2('InputEvents2')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">La table de compatibilité sur cette page est générée à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request.</em></div>
+
+<p>{{Compat("api.InputEvent")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{ event("beforeinput") }}</li>
+ <li><a href="/docs/Web/API/InputEvent/input_event">l’évènement <code>input</code></a></li>
+</ul>
diff --git a/files/fr/web/api/intersection_observer_api/index.html b/files/fr/web/api/intersection_observer_api/index.html
new file mode 100644
index 0000000000..82cf68421f
--- /dev/null
+++ b/files/fr/web/api/intersection_observer_api/index.html
@@ -0,0 +1,599 @@
+---
+title: Intersection Observer API
+slug: Web/API/Intersection_Observer_API
+tags:
+  - API
+  - IntersectionObserver
+  - Reference
+  - Web
+translation_of: Web/API/Intersection_Observer_API
+---
+<div>{{SeeCompatTable}}{{DefaultAPISidebar("Intersection Observer API")}}</div>
+
+<p class="summary"><span class="seoSummary">L'API <em>Intersection Observer</em> permet d'observer de manière asynchrone l'évolution de l'intersection d'un élément cible avec un élément ancêtre ou avec la zone d'affichage d'un document de niveau supérieur.</span></p>
+
+<p>Historiquement, détecter la visibilité d'un élément, ou la visibilité relative de deux éléments l'un par rapport à l'autre, a été une tache difficile, résolue de manière peu rigoureuse et pouvant nuire à la fluidité de la page consultée. Malheureusement, avec la maturation de la toile, ce genre d'information se révèle de plus en plus nécessaire. La donnée de l'intersection est requise pour de nombreuses raisons, telles que:</p>
+
+<ul>
+ <li>Le chargement paresseux d'images ou d'autres types de contenus au fur et à mesure que la page défile.</li>
+ <li>L'implantation de « défilement infini », où de plus en plus de contenu est chargé tandis que l'utilisateur défile, afin qu'il n'ait pas à changer de page.</li>
+ <li>Le signalement de la visibilité pour les publicités afin de calculer les revenus publicitaires.</li>
+ <li>La décision d'exécuter ou non une tâche ou une animation selon que l'utilisateur va en voir le résultat ou non.</li>
+</ul>
+
+<p>De par le passé, l'implantation de la détection d'intersection impliquait des gestionnaires d'évènements et des boucles appelant des méthodes telles que {{domxref("Element.getBoundingClientRect()")}} afin de générer les informations nécessaires pour chaque élément concerné. Comme la totalité du code est exécuté dans le <em>thread</em> principal, même une seule de ces boucles peut causer des problèmes de performance. Si un site est rempli de ces tests, les choses peuvent vite devenir très moches.</p>
+
+<p>Prenons une page qui utilise un défilement infini. Mettons qu'elle utilise une bibliothèque fournie par un éditeur afin de gérer les publicités placées périodiquement le long de la page, qu'elle a des graphiques animés ici et là, et qu'elle utilise une bibliothèque personnalisée pour dessiner des cases de notifications et ce genre de choses. Chacune de ces choses a ses propres procédures de détection d'intersection, toutes exécutées dans le <em>thread</em> principal. L'auteur du site ne le réalise peut-être même pas, puisqu'il utilise deux bibliothèques dont il ne connaît pas forcément les détails de fonctionnement. Quand l'utilisateur navigue sur la page, ces procédures de détection d'intersection réagissent constamment pendant l'exécution du code de défilement, rendant l'expérience frustrante pour l'utilisateur vis-à-vis de son navigateur, du site Internet et de son ordinateur.</p>
+
+<p>L'API <em>Intersection Observer</em> permet d'intégrer une fonction <em>callback</em> qui est exécutée quand un élément qu'on souhaite surveiller entre ou sort d'un autre élément (ou du <em>viewport</em> (zone d'affichage)), ou quand la taille de leur intersection varie d'une quantité prédéterminée. Ainsi, les sites n'ont plus besoin de faire quoi que ce soit sur le <em>thread</em> principal pour surveiller ce genre d'intersection d'éléments, et le navigateur est libre de gérer la détection d'intersection comme bon lui semble.</p>
+
+<p>Il y a une chose sur laquelle l'API <em>Intersection Observer</em> ne peut pas vous renseigner : le nombre de pixels qui intersectent, ou bien desquels il s'agit précisément; par contre elle permet d'ordonner des actions souvent utiles telles que « si ils s'intersectent de plus de N%, alors faire ceci ».</p>
+
+<h2 id="Concepts_et_utilisation_de_l'observateur_d'intersections">Concepts et utilisation de l'observateur d'intersections</h2>
+
+<p>L'API <em>Intersection Observer</em> permet de mettre en place une fonction <em>callback</em> qui est appelée quand un élément, appelé la <strong>cible</strong>, intersecte ou bien le <em>viewport</em> (la zone d'affichage) ou bien un élément prédéfini ; dans le cadre de cette API, nous l’appellerons <strong>l'élément racine</strong> ou <strong>la racine</strong>. Typiquement, on voudra observer les variations de l'intersection par rapport à la zone d'affichage du document (ce qui est fait en passant l'argument <code>null</code> au moment de désigner l'élément racine). Que vous utilisiez la zone d'affichage ou un autre élément comme racine, l'API fonctionne de la même façon, en exécutant une fonction <em>callback</em>, fournie au préalable, lorsque la visibilité de l'élément cible change de telle sorte qu'il atteint la quantité voulue d'intersection avec l'élément racine.</p>
+
+<p>Le degré d'intersection entre l'élément cible et sa racine est le <strong>ratio d'intersection</strong>. C'est une représentation du pourcentage de l'élément cible qui est visible, exprimée sous la forme d'un nombre compris entre 0.0 et 1.0.</p>
+
+<h3 id="Création_d'un_observateur_d'intersection">Création d'un observateur d'intersection</h3>
+
+<p>Créez l'observateur d'intersection en appelant son constructeur et en lui passant la référence d'une fonction <em>callback</em>. Cette fonction sera exécutée quand un palier est franchi dans un sens ou dans un autre :</p>
+
+<pre class="brush: js">var options = {
+  root: document.querySelector('#scrollArea'),
+  rootMargin: '0px',
+  threshold: 1.0
+}
+
+var observer = new IntersectionObserver(callback, options);</pre>
+
+<p>Un palier de 1.0 signifie que lorsque 100% de la cible est visible dans l'élément désigné par l'option <code>root</code> (l'élément racine), la fonction <em>callback</em> est invoquée.</p>
+
+<h4 id="Options_de_l'observateur_d'intersection">Options de l'observateur d'intersection</h4>
+
+<p>L'objet <code>options</code> qui est passé dans le constructeur  {{domxref("IntersectionObserver.IntersectionObserver", "IntersectionObserver()")}} permet de contrôler les circonstances selon lesquelles la fonction <em>callback</em> de l'observateur est invoquée. Il possède les champs suivants :</p>
+
+<dl>
+ <dt><code>root</code></dt>
+ <dd>L'élément qui est utilisé comme zone d'affichage au moment d'évaluer la visibilité de la cible. Il doit être un ancêtre de la cible. S'il n'est pas spécifié ou s'il prend la valeur <code>null</code>, sa valeur par défaut est la zone d'affichage (le <em>viewport</em>) du navigateur.</dd>
+ <dt><code>rootMargin</code></dt>
+ <dd>La marge autour de la racine. Peut prendre des valeurs similaires à la propriété CSS {{cssxref("margin")}} par exemple "<code>10px 20px 30px 40px"</code> (top, right, bottom, left). Si l'élément <code>root</code> a été spécifié, les valeurs peuvent être exprimées en pourcentages. Cet ensemble de valeur sert à agrandir ou à réduire chaque coté du cadre délimitant l'élément racine avant d'évaluer les intersections. Par défaut, toutes les valeurs prennent la valeur zéro.</dd>
+ <dt><code>threshold</code></dt>
+ <dd>Soit un nombre, soit un tableau de nombre qui indique à quel pourcentage de la visibilité de la cible la fonction <em>callback</em> de la cible doit être exécuté. Si vous souhaitez seulement détecter quand la visibilité franchit la barre des 50%, vous pouvez entrer la valeur 0.5. Si vous voulez que le <em>callback</em> soit exécuté chaque fois que la visibilité varie de 25% de plus, il faudra spécifier le tableau [0, 0.25, 0.5, 0.75, 1]. La valeur par défaut est 0 (ce qui signifie que dés qu'un seul pixel sera visible, la fonction <em>callback</em> sera exécutée). Une valeur de 1.0 signifie que le palier n'est considéré comme franchi qu'une fois que tous les pixels sont visibles.</dd>
+</dl>
+
+<h4 id="Choisir_un_élément_à_observer">Choisir un élément à observer</h4>
+
+<p>Une fois l'observateur créé, il faut lui donner un élément cible à observer :</p>
+
+<pre class="brush: js">var target = document.querySelector('#listItem');
+observer.observe(target);
+</pre>
+
+<p>Lorsque la cible franchit un palier spécifié indiqué dans l'objet <code>IntersectionObserver</code>, la fonction <em>callback</em> est appelée. Le <em>callback</em> reçoit une liste d'objets {{domxref("IntersectionObserverEntry")}} ainsi que l'observateur :</p>
+
+<pre class="brush: js">var callback = function(entries, observer) {
+  entries.forEach(entry =&gt; {
+    // chaque élément de <em>entries</em> correspond à une variation
+    // d'intersection pour un des éléments cible:
+    //   entry.boundingClientRect
+    //   entry.intersectionRatio
+    //   entry.intersectionRect
+    //   entry.isIntersecting
+    //   entry.rootBounds
+    //   entry.target
+    //   entry.time
+  });
+};
+</pre>
+
+<p>Soyez attentif au fait que la fonction <em>callback</em> est exécutée dans le <em>thread</em> principal. Elle devrait être exécutée aussi rapidement que possible ; si une opération prenant du temps a besoin d'être effectuée, utilisez {{domxref("Window.requestIdleCallback()")}}.</p>
+
+<p>De plus, remarquez que si vous avez spécifié l'option <code>root</code>, la cible doit être un descendant de l'élément <code>root</code>.</p>
+
+<h3 id="Comment_est_calculée_l'intersection">Comment est calculée l'intersection</h3>
+
+<p>Toutes les régions envisagées par l'API <em>Intersection Observer</em> sont des rectangles; les éléments de forme irrégulière sont assimilées au plus petit rectangle qui contient l'élément en question tout entier. De même, si la partie visible d'un élément n'est pas rectangulaire, le rectangle d'intersection de l'élément sera le plus petit rectangle qui contient toute la partie visible de l'élément.</p>
+
+<p>Il est utile de comprendre comment les différentes propriétés fournies par {{domxref("IntersectionObserverEntry")}} décrivent une intersection.</p>
+
+<h4 id="La_racine_de_l'intersection_et_la_marge_de_la_racine">La racine de l'intersection et la marge de la racine</h4>
+
+<p>Avant de pouvoir étudier l'intersection d'un élément avec un conteneur, nous devons savoir quel est ce conteneur. Ce conteneur est <strong>la racine de l'intersection</strong>, ou <strong>élément racine</strong>. Ce peut être soit un élément du document qui est un ancêtre de l'élément à observer, ou <code>null</code> si l'on souhaite utiliser la zone d'affichage (<em>viewport</em>) du document comme conteneur.</p>
+
+<p>Le rectangle utilisé pour délimiter la racine de l'intersection peut être ajusté en ajustant la <strong>marge de la racine</strong>, c'est-à-dire le champ <code>rootMargin</code>, lors de la création de {{domxref("IntersectionObserver")}}. La valeur de <code>rootMargin</code> définit le décalage ajouté à chaque coté du cadre délimitant la racine de l'intersection pour créer le cadre final de la racine de l'intersection (accessible via {{domxref("IntersectionObserverEntry.rootBounds")}} quand la fonction <em>callback</em> est exécutée).</p>
+
+<h4 id="Paliers">Paliers</h4>
+
+<p>Plutôt que de rapporter le moindre changement de variation de la visibilité d'un élément, l'API Intersection Observer utilise des <strong>paliers</strong>. Lors de la création d'un observateur, vous pouvez fournir une ou plusieurs valeurs numériques qui représentent des pourcentages de visibilité de l'élément cible. Dans ce cas, l'API ne rapportent que les changements de visibilité qui franchissent ces paliers.</p>
+
+<p>Par exemple, si vous voulez être informé à chaque fois que la visibilité d'une cible passe au dessus ou en dessous de chaque multiple de 25%, il faudra fournir le tableau [0, 0.25, 0.5, 0.75, 1] comme liste de paliers lors de la création de l'observateur. Vous pouvez préciser dans quelle direction a changé la visibilité (c'est-à-dire, si l'élément est devenu plus ou moins visible) en lisant la valeur de la propriété {{domxref("IntersectionObserverEntry.isIntersecting", "isIntersecting")}} du  {{domxref("IntersectionObserverEntry")}} passé dans la fonction <code>callback</code> lors du changement de visibilité. Si <code>isIntersecting</code> est <code>true</code>, l'élément cible est devenu au moins aussi visible quand le palier a été franchi. Si elle vaut <code>false</code>, la cible n'est plus aussi visible que le palier spécifié.</p>
+
+<p>Pour mieux comprendre comment fonctionnent les paliers, faites défiler la boîte ci-dessous. A l'intérieur, chacune des boîtes colorées affiche son pourcentage de visibilité sur chacun de ses quatre coins, de telle sorte que l'on peut voir ces ratios changer tandis que le conteneur défile. Chaque boîte a un ensemble différent de paliers :</p>
+
+<ul>
+ <li>La première boîte a un palier pour chaque point de pourcentage de visibilité; c'est à dire que le tableau {{domxref("IntersectionObserver.thresholds")}} est <code>[0.00, 0.01, 0.02, ..., 0.99, 1.00]</code>.</li>
+ <li>La deuxième boîte a un unique palier, à 50%.</li>
+ <li>La troisième boîte a des paliers tous les 10% de visibilité (0%, 10%, 20%, etc.).</li>
+ <li>La dernière boîte a des paliers tous les 25%.</li>
+</ul>
+
+<div class="hidden" id="threshold-example">
+<pre class="brush: html">&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">.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">let observers = [];
+
+startup();
+
+function startup() {
+  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.1) {
+    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
+
+  //wrapper.scrollIntoView({
+  //  block: "start",
+  //});
+  document.scrollingElement.scrollTop = wrapper.firstChild.getBoundingClientRect().top + window.scrollY;
+  document.scrollingElement.scrollLeft = 750;
+}
+
+function intersectionCallback(entries) {
+  entries.forEach(function(entry) {
+    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;
+  });
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample("threshold-example", 500, 500)}}</p>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<dl>
+ <dt>{{domxref("IntersectionObserver")}}</dt>
+ <dd>L'interface principale pour l'API Intersection Observer. Elle fournit des méthodes pour créer et manipuler un observateur qui peut observer n'importe quel nombre d'éléments cibles pour une même configuration d'intersection. Chaque observateur peut observer de manière asynchrone les évolutions de l'intersection entre un ou plusieurs éléments cibles et un élément ancêtre partagé, ou avec le {{Glossary('viewport')}} de leur {{domxref("Document")}} de niveau supérieur. L'ancêtre ou le <em>viewport</em> est désigné par le terme <strong>racine</strong>.</dd>
+ <dt>{{domxref("IntersectionObserverEntry")}}</dt>
+ <dd>Cette interface décrit l'intersection d'un élément cible spécifique avec la racine de l'observateur à un moment donné. Les objets de ce type ne peuvent être obtenus que de deux façons : comme entrée du callback de votre <code>IntersectionObserver</code>, ou en appelant {{domxref("IntersectionObserver.takeRecords()")}}.</dd>
+</dl>
+
+<h2 id="Un_exemple_simple">Un exemple simple</h2>
+
+<p>Cet exemple simple va faire changer la couleur et la transparence d'un élément cible à mesure qu'il devient plus ou moins visible. Sur la page <em><a href="/fr/docs/Web/API/Intersection_Observer_API/Timing_element_visibility">Timing element visibility with the Intersection Observer API</a></em>, vous pourrez trouver un exemple plus développé montrant comment chronométrer le temps durant lequel un élément (par exemple, une publicité) a été visible à l'écran, et comment réagir à cette information en enregistrant des statistiques ou en mettant à jour des éléments.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<p>Le code HTML de cet exemple est très court. L'élément principal est la boîte que nous allons cibler (avec l'ingénieuse dénomination <code>"box"</code>) et certains contenus dans la boîte.</p>
+
+<pre class="brush: html">&lt;div id="box"&gt;
+  &lt;div class="vertical"&gt;
+    Bienvenue dans &lt;strong&gt;La Boîte !&lt;/strong&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<p>Le CSS n'est pas extrêmement important dans le cadre de cet exemple ; il met en place l'élément et établit que les attributs {{cssxref("background-color")}} et {{cssxref("border")}} peuvent participer à des <a href="/fr/docs/Web/CSS/CSS_Transitions">transitions CSS</a>. Nous utiliserons ces transitions pour faire évoluer l'élément de telle sorte qu'il devienne plus ou moins obscur.</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>Enfin, jetons un œil au code JavaScript qui utilise l'API <em>Intersection Observer</em>.</p>
+
+<h4 id="Préparation">Préparation</h4>
+
+<p>Premièrement, nous devons préparer des variables et installer l'observateur.</p>
+
+<pre class="brush: js">var numSteps = 20.0;
+
+var boxElement;
+var prevRatio = 0.0;
+var increasingColor = "rgba(40, 40, 190, ratio)";
+var decreasingColor = "rgba(190, 40, 40, ratio)";
+
+// On met l'ensemble en place.
+
+window.addEventListener("load", function(event) {
+  boxElement = document.querySelector("#box");
+
+  createObserver();
+}, false);</pre>
+
+<p>Les constantes et variables que nous préparons sont :</p>
+
+<dl>
+ <dt><code>numSteps</code></dt>
+ <dd>Une constante qui indique combien de paliers nous voulons avoir entre les ratios de visibilité de 0.0 et de 1.0.</dd>
+ <dt><code>prevRatio</code></dt>
+ <dd>Cette variable sera utilisée pour mémoriser quel était le ratio de visibilité la dernière fois qu'un palier a été franchi ; ce qui nous permettra de savoir si l'élément est en train de devenir plus ou moins visible.</dd>
+ <dt><code>increasingColor</code></dt>
+ <dd>Une chaîne de caractères définissant une couleur que nous appliquerons à l'élément cible quand le ratio de visibilité augmente. Le mot "ratio" dans cette chaîne de caractères sera remplacé par la ratio de visibilité de la cible actuelle, de telle sorte que l'élément, en plus de changer de couleur, deviendra de plus en plus opaque à mesure qu'il deviendra obscur.</dd>
+ <dt><code>decreasingColor</code></dt>
+ <dd>De même, il s'agit d'une chaîne de caractères qui définit une couleur que nous appliquerons lorsque le ratio de visibilité diminue.</dd>
+</dl>
+
+<p>On appelle {{domxref("EventTarget.addEventListener", "Window.addEventListener()")}} pour commencer à écouter l'évènement {{event("load")}} ; une fois que la page a finit de charger, on obtient une référence de l'élément avec l'identifiant <code>"box"</code> grâce à {{domxref("Document.querySelector", "querySelector()")}}, puis on appelle la méthode <code>createObserver()</code> que l'on va définir un peu plus tard pour gérer la création et l'installation de l'observateur d'intersection.</p>
+
+<h4 id="Création_de_l'observateur_d'intersection">Création de l'observateur d'intersection</h4>
+
+<p>La méthode <code>createObserver()</code> est appelée une fois que le chargement de la page est terminé afin de gérer la création du nouveau {{domxref("IntersectionObserver")}} et de commencer le processus d'observation de l'élément cible.</p>
+
+<pre class="brush: js">function createObserver() {
+  var observer;
+
+  var options = {
+    root: null,
+    rootMargin: "0px",
+    threshold: buildThresholdList()
+  };
+
+  observer = new IntersectionObserver(handleIntersect, options);
+  observer.observe(boxElement);
+}</pre>
+
+<p>On commence par définir un objet <code>options</code> contenant les paramètres pour l'observateur. On voudra observer les évolutions de la visibilité de l'élément cible relativement au <em>viewport</em>, on initialise donc <code>root</code> avec <code>null</code>. Nous n'avons pas besoin de marge, donc l'espace de marge, <code>rootMargin</code>, est initialisé à <code>"0px"</code>. Ainsi, l'observateur surveillera les variations de l'intersection entre les frontières de l'élément cible et ceux du <em>viewport</em>, sans aucun espace ajouté ou ôté.</p>
+
+<p>La liste de paliers de ratio de visibilité, <code>threshold</code>, est construite par la fonction <code>buildThresholdList()</code>. La liste de paliers est construite mécaniquement dans cet exemple car il y en a un certain nombre, et que ce nombre a vocation à être ajustable.</p>
+
+<p>Une fois que <code>options</code> est prêt, nous pouvons créer le nouvel observateur, en appelant le constructeur {{domxref("IntersectionObserver.IntersectionObserver", "IntersectionObserver()")}} , en précisant une fonction <em>callback</em> à appeler quand l'intersection franchit l'un de nos paliers, <code>handleIntersect()</code>, et notre ensemble d'options. On appelle alors {{domxref("IntersectionObserver.observe", "observe()")}} sur l'observateur retourné, afin de le passer à l'élément qui sera notre cible</p>
+
+<p>On pourrait également choisir de surveiller l'évolution de la visibilité de l'intersection de plusieurs éléments par rapport au <em>viewport</em> en appelant <code>observer.observe()</code>pour chacun de ces éléments.</p>
+
+<h4 id="Construction_du_tableau_de_paliers_de_ratios">Construction du tableau de paliers de ratios</h4>
+
+<p>La fonction<code>buildThresholdList()</code>, qui construit la liste de paliers, ressemble à ceci :</p>
+
+<pre class="brush: js">function buildThresholdList() {
+  var thresholds = [];
+
+  for (var i=1.0; i&lt;=numSteps; i++) {
+    var ratio = i/numSteps;
+    thresholds.push(ratio);
+  }
+
+  thresholds.push(0);
+  return thresholds;
+}</pre>
+
+<p>Cela construit la tableau de paliers (chacun de ces paliers étant un ratio compris entre 0.0 et 1.0, ajouté en poussant la valeur<code>i/numSteps</code>dans le tableau <code>thresholds</code> pour chaque entier <code>i</code> entre 1 et <code>numSteps</code>). On pousse également 0 pour inclure cette valeur. Le résultat, dans le cas où<code>numSteps</code>a sa valeur par défaut, est la liste de paliers suivante :</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>Bien sur, on pourrait coder en dur le tableau de paliers dans notre code, et c'est souvent ce que vous ferez. Cependant, cet exemple laisse un peu de place pour plus de configuration afin d'ajuster la granularité, par exemple.</p>
+
+<h4 id="Gérer_les_évolutions_de_l'intersection">Gérer les évolutions de l'intersection</h4>
+
+<p>Quand le navigateur détecte que l'élément cible (dans notre cas, celui avec l'identifiant <code>"box"</code>) a été révélé ou caché de tel sorte que son ratio de visibilité franchit l'un des paliers de notre liste, il appelle la fonction <code>handleIntersect()</code>:</p>
+
+<pre class="brush: js">function handleIntersect(entries, observer) {
+  entries.forEach(function(entry) {
+    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>Pour chaque {{domxref("IntersectionObserverEntry")}} dans la liste <code>entries</code>, on cherche si le {{domxref("IntersectionObserverEntry.intersectionRatio", "intersectionRatio")}} de l'entrée augmente; si c'est le cas, on donne à la propriété CSS {{cssxref("background-color")}} de la cible la valeur <code>increasingColor</code> (pour rappel, c'est la chaîne de caractères <code>"rgba(40, 40, 190, ratio)"</code>), et on remplace le mot "ratio" avec le <code>intersectionRatio</code> de l'entrée. Le résultat : non seulement la couleur change, mais la transparence de l'élément change aussi. Quand le ratio d'intersection diminue, l'alpha de la couleur de fond diminue de même, et l'élément devient plus transparent.</p>
+
+<p>De même, si le <code>intersectionRatio</code> augmente, on utilise la chaîne de caractères <code>decreasingColor</code> et on y remplace le mot "ratio" avec <code>intersectionRatio</code> avant d'assigner le <code>background-color</code> de l'élément cible.</p>
+
+<p>Enfin, afin de surveiller si le ratio d'intersection augmente ou diminue, on garde en mémoire le ratio actuel dans la variable <code>prevRatio</code>.</p>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>Vous pouvez retrouver le résultat ci-dessous. Déroulez cette page vers le haut ou vers le bas et observez comment l'apparence de la boîte change au fur et à mesure.</p>
+
+<p>{{EmbedLiveSample('Un_exemple_simple', 400, 400)}}</p>
+
+<p>Vous pouvez consulter un exemple encore plus détaillé sur l'article <em><a href="/fr/docs/Web/API/Intersection_Observer_API/Timing_element_visibility">Timing element visibility with the Intersection Observer API</a></em>.</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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IntersectionObserver')}}</td>
+   <td>{{Spec2('IntersectionObserver')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support simple</td>
+   <td>{{CompatChrome(51)}}</td>
+   <td>15</td>
+   <td>{{CompatGeckoDesktop(55)}}<sup>[1][2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(38)}}</td>
+   <td>{{WebKitBug(159475)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Webview Android</th>
+   <th>Chrome pour Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatChrome(51)}}</td>
+   <td>{{CompatChrome(51)}}</td>
+   <td>{{CompatGeckoMobile(55)}}<sup>[1][2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOperaMobile(38)}}</td>
+   <td>{{WebKitBug(159475)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Cette fonctionnalité a été implémentée depuis Gecko 53.0 {{geckoRelease("53.0")}} derrière la préférence <code>dom.IntersectionObserver.enabled</code>, qui vaut <code>false</code> par défaut. Elle est activée par défaut à partir de Firefox 55, cf {{bug(1243846)}}.</p>
+
+<p>[2] Firefox ne prend pas actuellement le {{cssxref("clip-path")}} d'éléments ancêtres en compte quand il évalue la visibilité d'un élément au sein de sa racine. Voir {{bug(1319140)}} pour le statut de ce problème.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://github.com/WICG/IntersectionObserver/tree/gh-pages/polyfill">Une prothèse (<em>polyfill</em>) pour l'API <em>Intersection Observer</em></a></li>
+ <li><em><a href="/fr/docs/Web/API/Intersection_Observer_API/Timing_element_visibility">Timing element visibility with the Intersection Observer API</a></em></li>
+ <li>{{domxref("IntersectionObserver")}} et {{domxref("IntersectionObserverEntry")}}</li>
+</ul>
diff --git a/files/fr/web/api/intersectionobserver/index.html b/files/fr/web/api/intersectionobserver/index.html
new file mode 100644
index 0000000000..6561632d3e
--- /dev/null
+++ b/files/fr/web/api/intersectionobserver/index.html
@@ -0,0 +1,89 @@
+---
+title: IntersectionObserver
+slug: Web/API/IntersectionObserver
+tags:
+  - API
+  - Experimental
+  - Interface
+  - IntersectionObserver
+  - Observation
+  - Visibilité
+translation_of: Web/API/IntersectionObserver
+---
+<div>{{SeeCompatTable}}{{APIRef("Intersection Observer API")}}</div>
+
+<p><span class="seoSummary">L'interface <code><strong>IntersectionObserver</strong></code> de l'<a href="/en-US/docs/Web/API/Intersection_Observer_API">API Intersection Observer</a> fournit un moyen d'observer de manière asynchrone les changements d'intersection d'un élément cible avec un élément ancêtre ou avec la fenêtre du document {{Glossary('viewport')}}.</span> L'ancêtre ou la fenêtre du document racine est alors appelé racine.</p>
+
+<p>Lorsqu'un <code>IntersectionObserver</code> est créé, il est configuré pour surveiller des ratios donnés de visibilité au sein de la racine. La configuration ne peut être changé après initialisation de l'<code>IntersectionObserver</code>, ainsi un certain objet d'observation n'est utile que pour surveiller des changements spécifiques en mesure de visibilité ; toutefois, l'on peut observer de multiples éléments avec un unique observateur.</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("IntersectionObserver.IntersectionObserver()")}}</dt>
+ <dd>Crée un nouvel objet <code>IntersectionObserver</code> qui exécutera une fonction de rappel spécifiée lorsqu'il détectera que la visibilité de l'élément cible a franchi un ou plusieurs des seuils.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("IntersectionObserver.root")}} {{readonlyinline}}</dt>
+ <dd>Un ancêtre spécifique de la cible {{domxref("element")}} étant observé. Si aucune valeur n'a été donnée au constructeur ou qu'il vaut <code>null</code>, la fenêtre du document racine est utilisée.</dd>
+ <dt>{{domxref("IntersectionObserver.rootMargin")}} {{readonlyinline}}</dt>
+ <dd>
+ <div id="gt-res-content">
+ <div class="trans-verified-button-small" dir="ltr" id="gt-res-dir-ctr"><span id="result_box" lang="fr"><span>Un rectangle de décalage appliqué au {{Glossary ('bounding box')}} de la racine lors du calcul des intersections, réduisant ou développant la racine à des fins de calcul.</span> <span>La valeur renvoyée par cette propriété peut différer de celle spécifiée lors de l'appel du constructeur, car elle peut être modifiée pour répondre aux exigences internes.</span> <span>Chaque décalage peut être exprimé en pixels (px) ou en pourcentage (%).</span> <span>La valeur par défaut est "0px 0px 0px 0px".</span></span></div>
+ </div>
+ </dd>
+ <dt>{{domxref("IntersectionObserver.thresholds")}} {{readonlyinline}}</dt>
+ <dd>Une liste de seuils, triée par ordre numérique croissant, où chaque seuil est un rapport de la surface d'intersection à la surface de la zone de délimitation de l'élément observé. Les notifications pour une cible sont émises dès lors qu'un seuil au moins est franchi pour cette cible. Si aucune valeur n'est donnée, 0 est définie par défaut.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("IntersectionObserver.disconnect()")}}</dt>
+ <dd>Indique à l'objet <code>IntersectionObserver</code> de ne plus observer aucune cible.</dd>
+ <dt>{{domxref("IntersectionObserver.observe()")}}</dt>
+ <dd>Indique à l'<code>IntersectionObserver</code> un nouvel élément à observer.</dd>
+ <dt>{{domxref("IntersectionObserver.takeRecords()")}}</dt>
+ <dd>Retourne un tableau d'objets {{domxref("IntersectionObserverEntry")}} pour toutes les cibles observées et cesse de surveiller chacune d'elles.</dd>
+ <dt>{{domxref("IntersectionObserver.unobserve()")}}</dt>
+ <dd>Indique à l'<code>IntersectionObserver</code> de cesser d'observer un élément cible particuler.</dd>
+ <dt>
+ <h2 id="Exemples">Exemples</h2>
+ </dt>
+</dl>
+
+<pre class="brush: js">var intersectionObserver = new IntersectionObserver(function (entrées) {
+  // Si ratioIntersection vaut 0 ou moins, la cible
+  // est hors de vue et rien n'est alors fait
+  if (entrées[0].intersectionRatio &lt;= 0) return;
+
+  chargerÉléments(10);
+  console.log("Nouveaux éléments chargés");
+});
+// commencement de l'observation
+intersectionObserver.observe(document.querySelector("sélecteur CSS"));</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>{{SpecName('IntersectionObserver')}}</td>
+   <td>{{Spec2('IntersectionObserver')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api.IntersectionObserver")}}</p>
diff --git a/files/fr/web/api/intersectionobserver/intersectionobserver/index.html b/files/fr/web/api/intersectionobserver/intersectionobserver/index.html
new file mode 100644
index 0000000000..f9cd0084ab
--- /dev/null
+++ b/files/fr/web/api/intersectionobserver/intersectionobserver/index.html
@@ -0,0 +1,81 @@
+---
+title: IntersectionObserver.IntersectionObserver()
+slug: Web/API/IntersectionObserver/IntersectionObserver
+tags:
+  - API
+  - Constructeur
+  - Constructor
+  - Intersection Observer
+  - IntersectionObserver
+  - IntersectionObserver API
+  - Reference
+translation_of: Web/API/IntersectionObserver/IntersectionObserver
+---
+<div>{{APIRef("Intersection Observer API")}}{{SeeCompatTable}}</div>
+
+<p><span class="seoSummary">Le constructeur <strong><code>IntersectionObserver()</code></strong> crée et retourne un nouvel objet {{domxref("IntersectionObserver")}}.</span> Le <code>rootMargin</code> (marges de la racine), si spécifié, est vérifié pour s'assurer qu'il est syntaxiquement correct, les seuils d'intersection aussi pour vérifier qu'ils sont tous sur l'intervalle entre 0.0 et 1.0 inclus, et en fin que la liste des seuils d'intersection est triée par ordre croissant. Si la liste des seuils est vide, sa valeur par défaut est [0.0].</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">let <em>observer</em> = new IntersectionObserver(<em>fonctionRappel[, </em><em>options</em>]);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>fonctionRappel</code></dt>
+ <dd>Une fonction appelée lorsque la proportion de l'élément visible franchit un seuil. La fonciton de rappel reçoit en entrée deux paramètres:
+ <dl>
+  <dt><code>entrées</code></dt>
+  <dd>une liste d'objets {{domxref("IntersectionObserverEntry")}}, chacun représentant un seuil qui a été franchi, que ce soit en passant au-dessus ou en-dessous du pourcentage spécifié par le seuil.</dd>
+  <dt><code>observateur</code></dt>
+  <dd>L'{{domxref("IntersectionObserver")}} pour lequel la fonction de rappel est invoquée.</dd>
+ </dl>
+ </dd>
+ <dt><code>options</code> {{optional_inline}}</dt>
+ <dd>un objet optionnel qui paramètre l'observateur. Si <code>options</code> n'est pas spécifié, l'observateur utilise la fenêtre du document comme racine, sans marge, et un seuil de 0% (signifiant que le moindre changement d'un pixel suffira à déclencher la fonction de rappel). Vous pouvez fournir dans l'objet options les propriétés suivantes :
+ <dl>
+  <dt><code>root</code></dt>
+  <dd>Un objet {{domxref("Element")}} qui est racine de la cible désignée, dont le rectangle attaché sera considéré comme la fenêtre. Toute portion de l'élément cible non visible dans la zone couverte par le <code>root</code> n'est pas considérée visible.</dd>
+  <dt><code>rootMargin</code></dt>
+  <dd>Une chaîne de caractères spécifiant un ensemble de décalages à ajouter au {{Glossary('bounding_box')}} de la racine au moment de calculer les intersections, en réduisant ou grossissant la racine à des fins de calcul. La syntaxe est approximativement la même que celle pour la propriété CSS {{cssxref("margin")}} ; voir {{SectionOnPage("/fr-FR/docs/Web/API/Intersection_Observer_API", "L'élément racine et sa marge externe")}} pour plus d'informations sur le fonctionnement des marges et la syntaxe. Sa valeur par défaut est "0px 0px 0px 0px".</dd>
+  <dt><code>threshold</code></dt>
+  <dd>Un nombre ou un tableau de nombres entre 0.0 et 1.0 (inclus), spécifiant des seuils  définis comme ratios de la hauteur visible d'un élément cible observé par rapport à sa hauteur totale. Une valeur de 0.0 signifie que tout pixel visible de l'élément le rend visible et 1.0 que l'entièreté de l'élément doit être visible. Voir {{SectionOnPage("/fr-FR/docs/Web/API/Intersection_Observer_API", "Thresholds")}} pour une description plus approfondie de l'usage des seuils d'intersection. Le seuil par défaut est 0.0.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un nouvel {{domxref("IntersectionObserver")}} pouvant être utilisé pour observer la visibilité d'un élément cible au sein de l'élément <code>root</code> spécifié franchissant un des seuils de visibilité spécifiés. Appeler sa méthode {{domxref("IntersectionObserver.observe", "observe()")}} pour commencer à observer les changements de visibilité d'un élément cible.</p>
+
+<h3 id="Erreurs">Erreurs</h3>
+
+<dl>
+ <dt><code>SyntaxError</code></dt>
+ <dd>Le <code>rootMargin</code> spécifié est invalide.</dd>
+ <dt>RangeError</dt>
+ <dd>Une ou plusieurs des valeurs du <code>threshold</code> est en dehors de l'intervalle allant de 0.0 à 1.0.</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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IntersectionObserver','#dom-intersectionobserver-intersectionobserver','IntersectionObserver constructor')}}</td>
+   <td>{{Spec2('IntersectionObserver')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api.IntersectionObserver.IntersectionObserver")}}</p>
diff --git a/files/fr/web/api/intersectionobserver/observe/index.html b/files/fr/web/api/intersectionobserver/observe/index.html
new file mode 100644
index 0000000000..a9dd23b18b
--- /dev/null
+++ b/files/fr/web/api/intersectionobserver/observe/index.html
@@ -0,0 +1,75 @@
+---
+title: IntersectionObserver.observe()
+slug: Web/API/IntersectionObserver/observe
+tags:
+  - API
+  - Intersection Observer
+  - IntersectionObserver
+  - IntersectionObserver API
+  - Méthode
+  - Reference
+  - observe
+translation_of: Web/API/IntersectionObserver/observe
+---
+<div>{{APIRef("Intersection Observer API")}}{{SeeCompatTable}}</div>
+
+<p>La méthode <code><strong>observe()</strong></code> de l'interface {{domxref("IntersectionObserver")}} ajoute un élément à l'ensemble des éléments cibles étant observés par l'<code>IntersectionObserver</code>. Un observateur a un ensemble de seuils d'intersection et une racine, mais peut observer plusieurs éléments cibles en surveillant leurs changements de visibilité indépendamment. Pour cesser d'observer un élément, il faut appeler la méthode {{domxref("IntersectionObserver.unobserve()")}}.</p>
+
+<p>Lorsque la visibilité d'un élément cible franchit l'un des seuils d'intersection de l'observateur (tel que listé dans {{domxref("IntersectionObserver.thresholds")}}, la fonction de rappel de l'observateur est executée avec un {{domxref("IntersectionObserverEntry")}} représentant le changement d'intersection qui a été observé. À noter que cette conception permet à de multiples changements d'intersection d'éléments différents d'être traités par un unique appel à la fonction de rappel au moyen d'un tableau d'objets <code>IntersectionObserverEntry</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>IntersectionObserver</em>.observe(cible);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>cible</code></dt>
+ <dd>Un {{domxref("element")}} dont la visibilité dans la racine est à suivre. Cet élément doit nécessairement être descendant de l'élément racine (ou contenu dans le document courant si la racine est la fenêtre du document).</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">  // Créer l'observateur
+  let observateur = new IntersectionObserver(fonctionRappel, optionsObservateur);
+</pre>
+
+<p>Faire observer un élément par l'observateur :</p>
+
+<pre class="brush: js">observateur.observe(cible);</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('IntersectionObserver','#dom-intersectionobserver-observe','IntersectionObserver.observe()')}}</td>
+   <td>{{Spec2('IntersectionObserver')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api.IntersectionObserver.observe")}}</p>
+
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("IntersectionObserver.unobserve()")}}</li>
+</ul>
diff --git a/files/fr/web/api/intersectionobserver/root/index.html b/files/fr/web/api/intersectionobserver/root/index.html
new file mode 100644
index 0000000000..755208e8ae
--- /dev/null
+++ b/files/fr/web/api/intersectionobserver/root/index.html
@@ -0,0 +1,48 @@
+---
+title: IntersectionObserver.root
+slug: Web/API/IntersectionObserver/root
+tags:
+  - API
+  - Intersection Observer
+  - IntersectionObserver
+  - Property
+  - root
+translation_of: Web/API/IntersectionObserver/root
+---
+<div>{{APIRef("Intersection Observer API")}}{{SeeCompatTable}}</div>
+
+<p>La propriété en lecture seule <strong><code>root</code></strong> de l'interface {{domxref("IntersectionObserver")}} identifie l'{{domxref("Element")}} dont les bornes sont considérés comme le {{Glossary("bounding box")}} de la {{Glossary("viewport")}} pour l'élément qui est la cible de l'observateur. Si le <code>root</code> vaut <code>null</code>, alors les bornes de la fenêtre du document courant sont celles utilisées.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var><code>var <em>root</em> = </code>IntersectionObserver</var>.root;
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un objet {{domxref("Element")}} dont la bordure du modèle de boîte est utilisée pour définir les limites de sa zone de visibilité afin de déterminer quelle proportion de l'élément cible est visible. L'intersection de ce rectangle délimiteur, décalé par toute marge spécifiée au moyen des options passées au constructeur de l'{{domxref("IntersectionObserver.IntersectionObserver", "IntersectionObserver()")}}, les limites de la zone recouverte par l'élément cible, moins les limites de la zone recouverte par chaque élément ou autre objet chevauchant l'élément cible, est considéré comme la partie visible de l'élément.</p>
+
+<p>Si <code>root</code> vaut <code>null</code>, alors les bornes de la fenêtre du document courant (c'est-à-dire la zone visible, permettant donc de visionner le document) sont celles utilisées.</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('IntersectionObserver', '#dom-intersectionobserver-root', 'IntersectionObserver')}}</td>
+   <td>{{Spec2('IntersectionObserver')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api.IntersectionObserver.root")}}</p>
diff --git a/files/fr/web/api/intersectionobserver/rootmargin/index.html b/files/fr/web/api/intersectionobserver/rootmargin/index.html
new file mode 100644
index 0000000000..caacf6da30
--- /dev/null
+++ b/files/fr/web/api/intersectionobserver/rootmargin/index.html
@@ -0,0 +1,54 @@
+---
+title: IntersectionObserver.rootMargin
+slug: Web/API/IntersectionObserver/rootMargin
+tags:
+  - API
+  - Intersection Observer
+  - IntersectionObserver
+  - Propriété
+  - rootMargin
+translation_of: Web/API/IntersectionObserver/rootMargin
+---
+<div>{{APIRef("Intersection Observer API")}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>rootMargin</code></strong> en lecture seule de l'interface {{domxref("IntersectionObserver")}} est une chaîne de caractères avec une syntaxe similaire à celle de la propriété CSS {{cssxref("margin")}}. Chaque côté de la zone rectangulaire représentée par <code>rootMargin</code> est ajouté au côté correspondant du {{domxref("IntersectionObserver.root", "root")}} dans le {{Glossary("bounding box")}} de l'élément avant que le test d'intersection soit effectué. Cela permet, par exemple, d'ajuster les limites vers l'extérieur afin que l'élément cible soit considéré comme entièrement visible même si un certain nombre de pixels en largeur ou en hauteur sont rognés, ou encore pour traiter la cible comme partiellement masquée si une bordure est trop proche de celle du {{Glossary("bounding box")}} de l'élément racine.</p>
+
+<p>Voir {{SectionOnPage("/fr-FR/docs/Web/API/Intersection_Observer_API", "L'élément racine et sa marge externe")}} pour une explication plus approfondie à propos de la marge externe de l'élément racine et comment cela fonctionne avec le bounding box de ce même élément.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var><code>var <em>marginString</em> = </code>IntersectionObserver</var>.rootMargin;
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une chaîne de caractères, formatée d'une manière similaire à la valeur de la propriété CSS {{cssxref("margin")}}, contenant les décalages pour un ou plusieurs côtés du bounding box de l'élément racine. Ces décalages sont ajoutés aux valeurs correspondantes du bounding box de l'élément racine avant l'intersection entre la zone rectangulaire résultante la zone couverte par l'élément cible.</p>
+
+<p>La chaîne de caractères renvoyée par cette propriété peut ne pas correspondre à celle spécifiée lors de l'initialisation de l'{{domxref("IntersectionObserver")}}. Le navigateur a la possibilté de modifier la valeur.</p>
+
+<p>Si <code>rootMargin</code> n'est pas spécifiée à l'initialisation de l'objet, sa valeur par défaut vaudra <code>"0px 0px 0px 0px"</code>, signifiant que l'intersection sera calculée entre les limites non modifiées de l'élément racine et celles de l'élément cible. {{SectionOnPage("/fr-FR/docs/Web/API/Intersection_Observer_API", "L'élément racine et sa marge externe")}} décrit avec plus de détails comment <code>rootMargin</code> est utilisée.</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('IntersectionObserver', '#dom-intersectionobserver-rootMargin', 'IntersectionObserver.rootMargin')}}</td>
+   <td>{{Spec2('IntersectionObserver')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<div>
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api.IntersectionObserver.rootMargin")}}</p>
+</div>
diff --git a/files/fr/web/api/intersectionobserver/thresholds/index.html b/files/fr/web/api/intersectionobserver/thresholds/index.html
new file mode 100644
index 0000000000..1ec8f5c0a8
--- /dev/null
+++ b/files/fr/web/api/intersectionobserver/thresholds/index.html
@@ -0,0 +1,66 @@
+---
+title: IntersectionObserver.thresholds
+slug: Web/API/IntersectionObserver/thresholds
+tags:
+  - API
+  - Intersection Observer
+  - Intersection Observer API
+  - IntersectionObserver
+  - Propriété
+translation_of: Web/API/IntersectionObserver/thresholds
+---
+<div>{{APIRef("Intersection Observer API")}}{{draft}}{{SeeCompatTable}}</div>
+
+<p>La propriété en lecture seule <strong><code>thresholds</code></strong> de l'interface {{domxref("IntersectionObserver")}} retourne la liste des seuils d'intersection spécifiés lorsque l'observateur a été instancié avec {{domxref("IntersectionObserver.IntersectionObserver", "IntersectionObserver()")}}. Si un unique ratio seuil a été donné comme valeur numérique à l'instanciation de l'objet, cette valeur sera un tableau contenant uniquement cette valeur.</p>
+
+<p>Voir {{SectionOnPage("/fr-FR/docs/Web/API/Intersection_Observer_API", "Thresholds")}} pour apprendre comment fonctionnent les seuils d'intersection.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var><code><em>let thresholds</em> = </code>IntersectionObserver</var>.thresholds;
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un tableau de seuils d'intersection, originellement spécifié au moyen de la propriété <code>threshold</code> à l'instanciation d'un observateur. Si un unique observateur a été spécifié, sans être donné dans un tableau (valeur numérique), cette valeur se traduite comme un tableau d'un élément la contenant. Quelque fut l'ordre de votre tableau original de <code>threshold</code>, il sera trié par ordre croissant.</p>
+
+<p>Si aucune option <code>threshold</code> n'est donnée lorsque <code>IntersectionObserver()</code> est utilisé pour instantier l'observateur, la valeur de <code>thresholds</code> est par défaut définie à <code>[0]</code>.</p>
+
+<div class="note">
+<p>Attention! Bien que l'objet d'<code>options</code> que vous pouvez spécifier lorsque vous créez un {{domxref("IntersectionObserver")}} a un champ nommé {{domxref("IntersectionObserver.threshold", "threshold")}}, cette propriété-ci s'appelle <code>thresholds</code>. Cela peut porter à confusion. Si vous utilisez <code>thresholds</code> par erreur comme nom du champ votre objet d'<code>options</code>, le tableau de <code>thresholds</code> va se retrouver égal à <code>[0.0]</code>, ce qui n'est probablement pas ce à quoi vous vous attendiez. Le déboguage n'en sera que plus chaotique.</p>
+</div>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="syntaxbox">// Instanciation d'un observateur, c'est l'objet d'options qui contient le tableau des seuils (propriété threshold)
+observateur = new IntersectionObserver(fonctionRappel, optionsObservateur)
+</pre>
+
+<p>Puis faire simplement :</p>
+
+<pre class="syntaxbox">observateur.thresholds</pre>
+
+<p>Pour afficher la liste des seuils fournie à l'initialisation.</p>
+
+<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>{{SpecName('IntersectionObserver', '#dom-intersectionobserver-thresholds', 'IntersectionObserver.thresholds')}}</td>
+   <td>{{Spec2('IntersectionObserver')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api.IntersectionObserver.thresholds")}}</p>
diff --git a/files/fr/web/api/intersectionobserver/unobserve/index.html b/files/fr/web/api/intersectionobserver/unobserve/index.html
new file mode 100644
index 0000000000..eb4b731432
--- /dev/null
+++ b/files/fr/web/api/intersectionobserver/unobserve/index.html
@@ -0,0 +1,74 @@
+---
+title: IntersectionObserver.unobserve()
+slug: Web/API/IntersectionObserver/unobserve
+tags:
+  - API
+  - Intersection Observer
+  - IntersectionObserver API
+  - IntersectioonObserver
+  - Méthode
+  - Reference
+translation_of: Web/API/IntersectionObserver/unobserve
+---
+<div>{{APIRef("Intersection Observer API")}}{{SeeCompatTable}}</div>
+
+<p><span class="seoSummary">La méthode <code><strong>unobserve()</strong></code> de l'interface {{domxref("IntersectionObserver")}} indique à l'<code>IntersectionObserver</code> de cesser d'observer l'élément cible spécifié.</span></p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>IntersectionObserver</em>.unobserve(cible);</pre>
+
+<h3 id="Paramètress">Paramètress</h3>
+
+<dl>
+ <dt><code>cible</code></dt>
+ <dd>L'{{domxref("Element")}} à cesser d'observer. Si l'élément spécifié n'est pas en cours d'observation, cette méthode ne fait rien et ne jette pas d'erreur.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p><code>undefined</code>.</p>
+
+<dl>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Ce bout de code montre simplement la création d'un observateur, l'ajout d'un élément sous observation puis sa fin d'observation.</p>
+
+<pre class="brush: js">let observer = new IntersectionObserver(fonctionRappel);
+observateur.observe(document.getElementById("élémentÀObserver"));
+
+/* ... */
+
+observateur.unobserve(document.getElementById("élémentÀObserver"));</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('IntersectionObserver','#dom-intersectionobserver-unobserve','IntersectionObserver.unobserve()')}}</td>
+   <td>{{Spec2('IntersectionObserver')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api.IntersectionObserver.unobserve")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Intersection_Observer_API">Intersection Observer API</a></li>
+ <li>{{domxref("IntersectionObserver.observe()")}}</li>
+</ul>
diff --git a/files/fr/web/api/intersectionobserverentry/index.html b/files/fr/web/api/intersectionobserverentry/index.html
new file mode 100644
index 0000000000..6b4554fc81
--- /dev/null
+++ b/files/fr/web/api/intersectionobserverentry/index.html
@@ -0,0 +1,60 @@
+---
+title: IntersectionObserverEntry
+slug: Web/API/IntersectionObserverEntry
+tags:
+  - API
+  - Interface
+  - Intersection Observer
+  - IntersectionObserver
+  - IntersectionObserverEntry
+translation_of: Web/API/IntersectionObserverEntry
+---
+<div>{{SeeCompatTable}}{{APIRef("Intersection Observer API")}}</div>
+
+<p><span class="seoSummary">L'interface <code><strong>IntersectionObserverEntry</strong></code> de l'<a href="/en-US/docs/Web/API/Intersection_Observer_API">API Intersection Observer</a> décrit l'intersection entre l'élément cible et son conteneur (appelé racine) à un moment spécifique de transition.</span> Les instances de <code>IntersectionObserverEntry</code> sont délivrées à une fonction de rappel de l'{{domxref("IntersectionObserver")}} en tant que paramètres <code>entries</code> ; autrement, ces objets ne peuvent être obtenus qu'en appelant {{domxref("IntersectionObserver.takeRecords()")}}.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("IntersectionObserverEntry.boundingClientRect")}} {{readonlyinline}}</dt>
+ <dd>Retourne les limites de la zone couverte par l'élément cible comme {{domxref("DOMRectReadOnly")}}. Ces limites sont calculées comme décrit dans la documentation pour {{domxref("Element.getBoundingClientRect()")}}.</dd>
+ <dt>{{domxref("IntersectionObserverEntry.intersectionRatio")}} {{readonlyinline}}</dt>
+ <dd>Retourne le ratio de l'<code>intersectionRect</code> au <code>boundingClientRect</code>.</dd>
+ <dt>{{domxref("IntersectionObserverEntry.intersectionRect")}} {{readonlyinline}}</dt>
+ <dd>Retourne un {{domxref("DOMRectReadOnly")}} représentant la partie visible de l'élément cible.</dd>
+ <dt>{{domxref("IntersectionObserverEntry.isIntersecting")}} {{ReadOnlyInline}}</dt>
+ <dd>Retourne une valeur booléenne valant <code>true</code> si l'élément cible s'entrecoupe avec la zone d'intersection de l'élément racine. S'il vaut <code>true</code>, alors <code>IntersectionObserverEntry</code> décrit une transition vers un état d'intersection ;  S'il vaut <code>false</code>, alors la transition se fait d'un état d'intersection à un état de non-intersection.</dd>
+ <dt>{{domxref("IntersectionObserverEntry.rootBounds")}} {{readonlyinline}}</dt>
+ <dd>Retourne un {{domxref("DOMRectReadOnly")}} pour la zone d'intersection de l'élément racine.</dd>
+ <dt>{{domxref("IntersectionObserverEntry.target")}} {{ReadOnlyInline}}</dt>
+ <dd>L'{{domxref("Element")}} dont l'intersection avec la racine a changé d'état.</dd>
+ <dt>{{domxref("IntersectionObserverEntry.time")}} {{readonlyinline}}</dt>
+ <dd>Un {{domxref("DOMHighResTimeStamp")}} indiquant l'instant auquel l'intersection a été enregistrée, relative au <a href="/en-US/docs/Web/API/DOMHighResTimeStamp#The_time_origin">temps originel</a> de l'<code>IntersectionObserver</code>.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Cette interface n'a pas de méthode.</em></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('IntersectionObserver','#intersection-observer-entry','IntersectionObserverEntry')}}</td>
+   <td>{{Spec2('IntersectionObserver')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api.IntersectionObserverEntry")}}</p>
diff --git a/files/fr/web/api/intersectionobserverentry/target/index.html b/files/fr/web/api/intersectionobserverentry/target/index.html
new file mode 100644
index 0000000000..ebea1ca87b
--- /dev/null
+++ b/files/fr/web/api/intersectionobserverentry/target/index.html
@@ -0,0 +1,60 @@
+---
+title: IntersectionObserverEntry.target
+slug: Web/API/IntersectionObserverEntry/target
+tags:
+  - API
+  - Intersection Observer
+  - IntersectionObserver
+  - Propriété
+  - target
+translation_of: Web/API/IntersectionObserverEntry/target
+---
+<div>{{APIRef("Intersection Observer API")}}{{SeeCompatTable}}</div>
+
+<p><span class="seoSummary">La propriété en lecture seule <strong><code>target</code></strong> de l'interface {{domxref("IntersectionObserverEntry")}} indique quel {{domxref("Element")}} ciblé a changé sa proportion d'intersection avec l'élément racine.</span></p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var><code>var <em>target</em> = </code>IntersectionObserverEntry</var>.target;
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>La propriété <code>target</code> de l'<code>IntersectionObserverEntry</code> spécifie quel {{domxref("Element")}} précédemment ciblé par l'appel à {{domxref("IntersectionObserver.observe()")}} dont l'intersection avec la racine a changé.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans cet exemple, la valeur de la propriété CSS {{cssxref("opacity")}} de chaque élément cible vaut son {{domxref("IntersectionObserverEntry.intersectionRatio", "intersectionRatio")}}.</p>
+
+<pre class="brush: js">function intersectionCallback(entries) {
+  entries.forEach(function(entry) {
+    entry.target.opacity = entry.intersectionRatio;
+  });
+}</pre>
+
+<p>Ainsi, l'élément devient visible seulement lorsqu'il est entièrement visible, c'est-à-dire que la zone qu'il couvre est contenue dans celle de la racine. Autrement, son opacité diminue graduellement avec sa proportion d'intersection avec son élément racine.</p>
+
+<p>Pour voir un exemple plus concret, vous pouvez vous renseigner sur l'{{SectionOnPage("/en-US/docs/Web/API/Intersection_Observer_API/Timing_element_visibility", "Handling intersection changes")}}.</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('IntersectionObserver', '#dom-intersectionobserverentry-target', 'IntersectionObserverEntry.target')}}</td>
+   <td>{{Spec2('IntersectionObserver')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api.IntersectionObserverEntry.target")}}</p>
diff --git a/files/fr/web/api/keyboardevent/charcode/index.html b/files/fr/web/api/keyboardevent/charcode/index.html
new file mode 100644
index 0000000000..34335deca5
--- /dev/null
+++ b/files/fr/web/api/keyboardevent/charcode/index.html
@@ -0,0 +1,102 @@
+---
+title: KeyboardEvent.charCode
+slug: Web/API/KeyboardEvent/charCode
+tags:
+  - API
+  - Clavier
+  - DOM
+  - Déprécié
+  - Propriété
+  - Référence(2)
+  - évènements
+translation_of: Web/API/KeyboardEvent/charCode
+---
+<p>{{ ApiRef("DOM Events") }}{{non-standard_header}}{{deprecated_header}}</p>
+
+<p>La propriété en lecture seule {{domxref("KeyboardEvent.charCode")}} retourne la valeur Unicode d'une touche caractère pressée pendant un évènement {{ domxref("element.onkeypress", "keypress") }}.</p>
+
+<p>Pour des constantes équivalant ces codes numériques, voir {{ domxref("KeyboardEvent", "KeyEvent") }}.</p>
+
+<div class="note">
+<p><strong><code>N'utilisez plus cette propriété, elle est dépréciée.</code></strong></p>
+
+<p>Utilisez plutôt {{domxref("KeyboardEvent.key")}}.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>var value</em> = <em>event</em>.charCode;
+</pre>
+
+<ul>
+ <li><em><code>value</code></em> est la valeur Unicode du caractère associé à la touche pressée.</li>
+</ul>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;Exemple charCode&lt;/title&gt;
+
+    &lt;script type="text/javascript"&gt;
+
+      function AfficherCaractere(e)
+      {
+        alert(
+                "Touche tapée : " +
+                String.fromCharCode(e.charCode) + "\n" +
+                "charCode: " + e.charCode
+        );
+      }
+
+    &lt;/script&gt;
+  &lt;/head&gt;
+
+  &lt;body onkeypress="AfficherCaractere(event);"&gt;
+    &lt;p&gt;Tapez une touche caractère de votre clavier (a,b,c...)&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Après un évènement {{ domxref("element.onkeypress", "keypress") }}, la valeur Unicode de la touche pressée est stockée dans l'une ou l'autre des propriétés <code>{{ domxref("event.keyCode", "keyCode") }}</code> et <code>charCode</code>, jamais les deux à la fois. Si la touche pressée génère un caractère (ex. 'a'), <code>charCode</code> prend la valeur du code de ce caractère, en respectant la casse. (i.e. <code>charCode</code> tient compte d'une touche Maj. enfoncée). Sinon, le code est stocké dans <code>keyCode</code>.</p>
+
+<p>Quand une ou plusieurs touche modificatrices sont pressées, il y a quelques règles complexes pour <code>charCode</code>, jetez un oeil à <a href="/en/Gecko_Keypress_Event" title="en/Gecko Keypress Event">Gecko Keypress Event</a> (en anglais) pour le détail.</p>
+
+<p><code>charCode</code> n'est jamais défini lors d'évènements {{ domxref("element.onkeydown", "keydown") }} et {{ domxref("element.onkeyup", "keyup") }}. Dans ces cas, <code>keyCode</code> is set instead.</p>
+
+<p>Pour obtenir le code de la touche qu'il soit stocké dans <code>keyCode</code> ou <code>charCode</code>, requêtez la propriété {{ domxref("event.which", "which") }}.</p>
+
+<p>Les caractères entrés via IME ne s'enregistrent pas sous <code>keyCode</code> ou <code>charCode</code>. <span class="comment">Actually with the Chinese IME I'm using, entering the IME results in a keypress event with keyCode = 229 and no other key events fire until the IME exits (which may happen after multiple characters are inputted). I'm not sure if other IME's work this way.</span></p>
+
+<p>Pour une liste de valeurs de <code>charCode</code> associées à leurs touches, lancez l'exemple dans <a href="/en/Gecko_DOM_Reference/Examples#Example_7:_Displaying_Event_Object_Constants" title="en/Gecko_DOM_Reference/Examples#Example_7:_Displaying_Event_Object_Constants">Gecko DOM Reference:Examples #Example 7: Displaying Event Object Constants</a> (en anglais) et regardez le tableau HTML résultant.</p>
+
+<h2 id="Specifications" name="Specifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification (en anglais)</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM3 Events','#widl-KeyboardEvent-charCode','KeyboardEvent.charCode')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>Définition initiale; Déprécié</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.KeyboardEvent.charCode")}}</p>
+
+<div id="compat-desktop"></div>
+
+<div id="compat-mobile"></div>
diff --git a/files/fr/web/api/keyboardevent/code/index.html b/files/fr/web/api/keyboardevent/code/index.html
new file mode 100644
index 0000000000..dee3e236e0
--- /dev/null
+++ b/files/fr/web/api/keyboardevent/code/index.html
@@ -0,0 +1,217 @@
+---
+title: KeyboardEvent.code
+slug: Web/API/KeyboardEvent/code
+tags:
+  - API
+  - Code
+  - DOM Events
+  - KeyboardEvent
+  - Propriété
+  - Reference
+translation_of: Web/API/KeyboardEvent/code
+---
+<div>{{APIRef("DOM Events")}}</div>
+
+<p><span class="seoSummary">La propriété <strong><code>KeyboardEvent.code</code></strong> représente une touche physique du clavier (contrairement au caractère généré par celle-ci). En d'autres termes, cette propriété retourne une valeur qui n'est pas modifiée par la disposition du clavier ou l'état des touches de modification.</span></p>
+
+<p>Si le clavier n'est pas physique, la valeur retournée sera définie par le navigateur pour être le plus proche possible des valeurs retournées par un clavier physique afin de maximiser la compatibilité entre un clavier physique et virtuel.</p>
+
+<p>Cette propriété est utile quand vous souhaitez manipuler les clés en fonction de leur position physique sur le clavier et non les caractères associés au clés (par exemple pour les touches de déplacement d'un jeu vidéo). Attention toutefois, on ne pourra pas utiliser la valeur fournie par <code>KeyboardEvent.code</code> afin de déterminer le caractère utilisé sur le clavier.</p>
+
+<p>Par exemple, le <code>code</code> retourné est <code>"KeyQ"</code> pour le caractère "<kbd>q</kbd>" sur un clavier QWERTY, mais le même <code>code</code> représente le caractère "<kbd>'</kbd>"  sur un clavier Dvorak, et le caractère "<kbd>a</kbd>" sur un clavier AZERTY. Cela rend impossible l'utilisation du <code>code</code> pour déterminer le code d'une clé destiné aux utilisateurs s'ils n'utilisent pas une disposition de clavier anticipé.</p>
+
+<p>Pour déterminer quel caractère correspond à un <code>key event</code>, utilisez plutôt la propriété {{domxref("KeyboardEvent.key")}}.</p>
+
+<h2 id="Valeurs_des_codes">Valeurs des codes</h2>
+
+<p>Les valeurs de code pour Windows, Linux et macOS figurent dans la liste de la <a href="/fr/docs/Web/API/KeyboardEvent/code/code_values">KeyboardEvent: code values</a>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Pratiquer_KeyboardEvent">Pratiquer <code>KeyboardEvent</code></h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;
+   Appuyez sur une touche du clavier pour voir quelle valeur clé de
+   KeyboardEvent correspond à chaque événement
+&lt;/p&gt;
+&lt;div id="output"&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">#output {
+  font-family: Arial, Helvetica, sans-serif;
+  border: 1px solid black;
+}</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">window.addEventListener("keydown", function(event) {
+  let str = "KeyboardEvent: key='" + event.key + "' | code='" +
+            event.code + "'";
+  let el = document.createElement("span");
+  el.innerHTML = str + "&lt;br/&gt;";
+
+  document.getElementById("output").appendChild(el);
+}, true);</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>Pour essayer ce code, cliquez sur le lien ci-dessous:</p>
+
+<p>{{EmbedLiveSample('Pratiquer_KeyboardEvent', 600, 300) }}</p>
+
+<h3 id="Gérer_les_événements_de_clavier_dans_un_jeu"><span class="tlid-translation translation" lang="fr"><span title="">Gérer les événements de clavier dans un jeu</span></span></h3>
+
+<div class="text-wrap tlid-copy-target">
+<div class="result-shield-container tlid-copy-target"><span class="tlid-translation translation" lang="fr"><span title="">Cet exemple établit un écouteur d'événements pour</span></span> l'événement {{event("keydown")}}  <span class="tlid-translation translation" lang="fr"><span title="">qui gère la saisie au clavier pour un jeu qui utilise la disposition de clavier typique "ZQSD" pour se déplacer en avant, à gauche, en arrière et à droite.</span> <span title="">Cela utilisera les quatre mêmes touches physiquement, quels que soient les caractères correspondants, par exemple si l'utilisateur utilise un clavier QWERTY.</span></span></div>
+</div>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;Appuyez sur les touches ZQSD (WASP sur QWERTY) pour bouger et pour vous diriger&lt;/p&gt;
+&lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="world"&gt;
+  &lt;polygon id="spaceship" points="15,0 0,30 30,30"/&gt;
+&lt;/svg&gt;
+&lt;script&gt;refresh();&lt;/script&gt;
+</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">.world {
+  margin: 0px;
+  padding: 0px;
+  background-color: black;
+  width: 400px;
+  height: 400px;
+}
+
+#spaceship {
+  fill: orange;
+  stroke: red;
+  stroke-width: 2px;
+}</pre>
+
+<h4 id="JavaScript_2">JavaScript</h4>
+
+<p>La première section du code JavaScript établit certaines variables que nous allons utiliser. <code>shipSize</code> contient la taille du vaisseau dans lequel le joueur se déplace, pour plus de commodité. <code>position</code> est utilisé pour suivre la position du vaisseau sur le terrain de jeu. <code>moveRate</code> et <code>turnRate</code> sont le nombre de pixels en avant et en arrière chaque fois que vous appuyez sur une touche pour déplacer le vaisseau et le nombre de degrés de rotation que les commandes de direction gauche et droite appliquent à chaque frappe. <code>angle</code> est la quantité actuelle de rotation appliquée au vaisseau, en degrés; il commence à 0 ° (pointant tout droit). Enfin, <code>spaceship</code> est défini pour faire référence à l'élément portant l'ID "spaceship", qui est le polygone SVG représentant le vaisseau que le joueur contrôle.</p>
+
+<pre class="brush: js">let shipSize = {
+  width: 30,
+  height: 30
+};
+
+let position = {
+  x: 200,
+  y: 200
+};
+
+let moveRate = 9;
+let turnRate = 5;
+
+let angle = 0;
+
+let spaceship = document.getElementById("spaceship");
+</pre>
+
+<p>Vient ensuite la fonction <code>updatePosition()</code>. Cette fonction prend en entrée la distance à laquelle le vaisseau doit être déplacé, où positif est un mouvement en avant et négatif est un mouvement en arrière. Cette fonction calcule la nouvelle position du vaisseau en fonction de la distance parcourue et de la direction actuelle du vaisseau. Il veille également à ce que le vaisseau franchisse les limites du terrain de jeu au lieu de disparaître.</p>
+
+<pre class="brush: js">function updatePosition(offset) {
+  let rad = angle * (Math.PI/180);
+  position.x += (Math.sin(rad) * offset);
+  position.y -= (Math.cos(rad) * offset);
+
+  if (position.x &lt; 0) {
+    position.x = 399;
+  } else if (position.x &gt; 399) {
+    position.x = 0;
+  }
+
+  if (position.y &lt; 0) {
+    position.y = 399;
+  } else if (position.y &gt; 399) {
+    position.y = 0;
+  }
+}
+</pre>
+
+<p>La fonction <code>refresh()</code> <span class="tlid-translation translation" lang="fr"><span title="">gère l'application de la rotation et de la position à l'aide d'un</span></span> <a href="/en-US/docs/Web/SVG/Attribute/transform">SVG transform</a>.</p>
+
+<pre class="brush: js">function refresh() {
+  let x = position.x - (shipSize.width/2);
+  let y = position.y - (shipSize.height/2);
+  let transform = "translate(" + x + " " + y + ") rotate(" + angle + " 15 15) ";
+
+  spaceship.setAttribute("transform", transform);
+}
+</pre>
+
+<p><span class="tlid-translation translation" lang="fr"><span title="">Enfin, la méthode <code>addEventListener()</code> est utilisée pour commencer à écouter les événements {{event ("keydown")}}, en mettant à jour chaque touche en mettant à jour la position et l’angle de rotation du vaisseau, puis en appelant la méthode <code>refresh()</code> pour tracer le navire dans sa nouvelle position </span><span title="">et son nouvel angle.</span></span></p>
+
+<pre class="brush: js">window.addEventListener("keydown", function(event) {
+  if (event.preventDefaulted) {
+    return; // Do nothing if event already handled
+  }
+
+  switch(event.code) {
+    case "KeyS":
+    case "ArrowDown":
+      // Handle "back"
+      updatePosition(-moveRate);
+      break;
+    case "KeyW":
+    case "ArrowUp":
+      // Handle "forward"
+      updatePosition(moveRate);
+      break;
+    case "KeyA":
+    case "ArrowLeft":
+      // Handle "turn left"
+      angle -= turnRate;
+      break;
+    case "KeyD":
+    case "ArrowRight":
+      // Handle "turn right"
+      angle += turnRate;
+      break;
+  }
+
+  refresh();
+
+  // Consume the event so it doesn't get handled twice
+  event.preventDefault();
+}, true);</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>Pour essayer le code ci-dessus, cliquez sur le bouton ci-dessous:</p>
+
+<p>{{EmbedLiveSample("Handle_keyboard_events_in_a_game", 420, 460)}}</p>
+
+<p><span class="tlid-translation translation" lang="fr"><span title="">Ce code peut être amélioré de plusieurs manières.</span> <span title="">La plupart des jeux réels surveillent les événements</span></span> {{event("keydown")}}, <span class="tlid-translation translation" lang="fr"><span title="">démarrent le mouvement lorsque cela se produit et stoppent le mouvement lorsque l'événement</span></span> {{event("keyup")}} se produit, au lieu de compter sur des répétitions de touches. <span class="tlid-translation translation" lang="fr"><span title="">Cela permettrait des mouvements plus fluides et plus rapides, mais permettrait également au joueur de bouger et de diriger en même temps.</span> <span title="">Des transitions ou des animations peuvent également être utilisées pour rendre le mouvement du navire plus fluide.</span></span> Pour permettre cela, il ne faudrait pas utiliser de <code>switch</code>, ni de <code>else if</code>.ff</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('UI Events', '#dom-keyboardevent-code', 'KeyboardEvent.code')}}</td>
+   <td>{{Spec2('UI Events')}}</td>
+   <td>Définition initiale, inclut les <a href="https://w3c.github.io/uievents-code/">valeurs de code</a>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.KeyboardEvent.code")}}</p>
diff --git a/files/fr/web/api/keyboardevent/index.html b/files/fr/web/api/keyboardevent/index.html
new file mode 100644
index 0000000000..fe8ef03ea0
--- /dev/null
+++ b/files/fr/web/api/keyboardevent/index.html
@@ -0,0 +1,244 @@
+---
+title: KeyboardEvent
+slug: Web/API/KeyboardEvent
+tags:
+  - API
+  - DOM
+  - Evènements IU
+  - Interface
+  - Reference
+  - évènements
+translation_of: Web/API/KeyboardEvent
+---
+<div>{{APIRef("DOM Events")}}</div>
+
+<p>Les objets <strong><code>KeyboardEvent</code></strong> décrivent l'interaction d'un utilisateur avec le clavier. Chaque événement décrit une touche ; le type d'événement (<code>keydown</code>, <code>keypress</code>, ou <code>keyup</code>) identifie quel type d'activité a été effectué.</p>
+
+<div class="note"><strong>Note :</strong> <code>KeyboardEvent</code> indique exactement ce qui est en train de se passer sur une touche. Lorsque vous devez gérer une saisie de texte, utilisez l'événement <code>input</code> HTML5 à la place. Par exemple, si un utilisateur saisit du texte à partir d'un système d'écriture à la main comme une tablette PC, les événements touche peuvent ne pas être déclenchés.</div>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}</dt>
+ <dd>Crée un objet <code>KeyboardEvent</code>.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Cette interface hérite également des méthodes de ses parents, {{domxref("UIEvent")}} et {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("KeyboardEvent.getModifierState()")}}</dt>
+ <dd>Retourne un {{jsxref("Boolean")}} indiquant si une touche modifcatrice, telle que <kbd>Alt</kbd>, <kbd>Shift</kbd>, <kbd>Ctrl</kbd>, ou <kbd>Meta</kbd>, était pressée quand l'évènement a été créé.</dd>
+ <dt>{{domxref("KeyboardEvent.initKeyEvent()")}}{{deprecated_inline}}</dt>
+ <dd>Initialise un objet <code>KeyboardEvent</code>. Ceci a été implémenté seulement par Gecko (d'autres utilisaient {{domxref ("KeyboardEvent.initKeyboardEvent()")}}) et ne devrait plus être utilisé. La manière moderne standard consiste à utiliser le constructeur {{domxref ("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}.</dd>
+ <dt>{{domxref("KeyboardEvent.initKeyboardEvent()")}}{{deprecated_inline}}</dt>
+ <dd>Initialise un objet <code>KeyboardEvent</code>. Cela n'a jamais été implémenté par Gecko (qui utilisait {{domxref ("KeyboardEvent.initKeyEvent()")}}) et ne devrait plus être utilisé. La manière moderne standard consiste à utiliser le constructeur {{domxref ("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Cette interface hérite également des propriétés de ses parents, {{domxref("UIEvent")}} et {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("KeyboardEvent.altKey")}} {{Readonlyinline}}</dt>
+ <dd>Returne un {{jsxref("Boolean")}} qui est <code>true</code> si la touche <kbd>Alt</kbd> (<kbd>Option</kbd> ou <kbd>⌥</kbd> sous OS X) était active quand l'évènement touche a été généré.</dd>
+ <dt>{{domxref("KeyboardEvent.char")}} {{Non-standard_inline}}{{Deprecated_inline}}{{Readonlyinline}}</dt>
+ <dd>Renvoie une {{domxref("DOMString")}} représentant la valeur de caractère de la touche. Si la touche correspond à un caractère imprimable, cette valeur est une chaîne Unicode non vide contenant ce caractère. Si la touche n'a pas de représentation imprimable, il s'agit d'une chaîne vide.</dd>
+ <dd>
+ <div class="note">
+ <p><strong>Note :</strong> si la touche est utilisée comme une macro insérant plusieurs caractères, la valeur de cet attribut est la chaîne entière, pas seulement le premier caractère.</p>
+ </div>
+ </dd>
+ <dd>
+ <div class="warning">
+ <p><strong>Avertissement :</strong> cela a été supprimé des DOM Level 3 Events. C'est pris en charge uniquement sur IE9 + et Microsoft Edge.</p>
+ </div>
+ </dd>
+ <dt>{{domxref("KeyboardEvent.charCode")}} {{Deprecated_inline}}{{Readonlyinline}}</dt>
+ <dd>Retourne un {{jsxref ("Number")}} représentant le numéro de référence Unicode de la touche ; cet attribut est utilisé uniquement par l'événement <code>keypress</code>. Pour les touches dont l'attribut <code>char</code> contient plusieurs caractères, il s'agit de la valeur Unicode du premier caractère de cet attribut. Dans Firefox 26, cela retourne des codes pour les caractères imprimables.</dd>
+ <dd>
+ <div class="warning">
+ <p><strong>Avertissement :</strong> cet attribut est obsolète : vous devriez utiliser {{domxref("KeyboardEvent.key")}} à la place, si disponible.</p>
+ </div>
+ </dd>
+ <dt>{{domxref("KeyboardEvent.code")}} {{Readonlyinline}}</dt>
+ <dd>Retourne une {{domxref ("DOMString")}} avec la valeur du code de la touche représentée par l'événement.</dd>
+ <dt>{{domxref("KeyboardEvent.ctrlKey")}} {{Readonlyinline}}</dt>
+ <dd>Retourne un {{jsxref ("Boolean")}} qui est <code>true</code> si la touche <kbd>Ctrl</kbd> était active lorsque l'événement touche a été généré.</dd>
+ <dt>{{domxref("KeyboardEvent.isComposing")}} {{Readonlyinline}}</dt>
+ <dd>Renvoie un {{jsxref ("Boolean")}} qui est <code>true</code> si l'événement est déclenché après <code>compositionstart</code> et avant <code>compositionend</code>.</dd>
+ <dt>{{domxref("KeyboardEvent.key")}} {{Readonlyinline}}</dt>
+ <dd>Retourne une {{domxref ("DOMString")}} représentant la valeur de touche de la touche représentée par l'événement.</dd>
+ <dt>{{domxref("KeyboardEvent.keyCode")}} {{deprecated_inline}}{{Readonlyinline}}</dt>
+ <dd>Retourne un {{jsxref("Number")}} représentant un code numérique dépendant du système et de l'implémentation, identifiant la valeur non modifiée de la touche pressée.
+ <div class="warning"><strong>Avertissement : </strong>cet attribut est obsolète. vous devriez utiliser {{domxref("KeyboardEvent.key")}} à la place, si disponible.</div>
+ </dd>
+ <dt>{{domxref("KeyboardEvent.keyIdentifier")}} {{Non-standard_inline}}{{deprecated_inline}}{{Readonlyinline}}</dt>
+ <dd>Cette propriété n'est pas standard et a été abandonnée en faveur de {{domxref("KeyboardEvent.key")}}. Elle faisait partie d'une ancienne version de DOM Level 3 Events.</dd>
+ <dt>{{domxref("KeyboardEvent.keyLocation")}} {{Non-standard_inline}}{{deprecated_inline}}{{Readonlyinline}}</dt>
+ <dd>C'est un alias obsolète non standard pour {{domxref("KeyboardEvent.location")}}. Il faisait partie d'une ancienne version de DOM Level 3 Events.</dd>
+ <dt>{{domxref("KeyboardEvent.locale")}} {{Readonlyinline}}</dt>
+ <dd>Retourne une {{domxref("DOMString")}} représentant une chaîne de paramètres régionaux indiquant les paramètres régionaux pour lesquels le clavier est configuré. Cela peut être une chaîne vide si le navigateur ou l'appareil ne connaît pas les paramètres régionaux du clavier.
+ <div class="note"><strong>Note :</strong> cela ne décrit pas les paramètres régionaux des données entrées. Un utilisateur peut utiliser une disposition du clavier donnée, tout en saisissant du texte dans une autre langue.</div>
+ </dd>
+ <dt>{{domxref("KeyboardEvent.location")}}<a> {{Readonlyinline}}</a></dt>
+ <dd>Retourne un {{jsxref ("Number")}} représentant l'emplacement de la touche du clavier ou tout autre dispositif d'entrée.</dd>
+ <dt>{{domxref("KeyboardEvent.metaKey")}} {{Readonlyinline}}</dt>
+ <dd>Retourne un {{jsxref("Boolean")}} qui est <code>true</code> si la touche <kbd>Meta</kbd> (sur les claviers Mac, la touche <kbd>⌘ Command</kbd> ; sur les claviers Windows, la touche Windows (<kbd>⊞</kbd>)) était active quand l'évènement touche a été généré.</dd>
+ <dt>{{domxref("KeyboardEvent.repeat")}} {{Readonlyinline}}</dt>
+ <dd>Retourne un {{jsxref("Booléen")}} qui est <code>true</code> si la touche est maintenue enfoncée de telle sorte qu'elle se répète automatiquement.</dd>
+ <dt>{{domxref("KeyboardEvent.shiftKey")}} {{Readonlyinline}}</dt>
+ <dd>Retourne un {{jsxref("Boolean")}} qui est <code>true</code> si la touche <kbd>Shift</kbd> était active quand l'évènement touche a été généré.</dd>
+ <dt>{{domxref("KeyboardEvent.which")}} {{deprecated_inline}}{{Readonlyinline}}</dt>
+ <dd>Retourne un {{jsxref("Number")}} représentant un code numérique dépendant du système et de l'implémentation, identifiant la valeur non modifiée de la touche pressée ; c'est généralement le même que <code>keyCode</code>.
+ <div class="warning"><strong>Avertissement :</strong> cet attribut est obsolète ; vous devriez utiliser {{domxref("KeyboardEvent.key")}} à la place, si disponible.</div>
+ </dd>
+</dl>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Les événements existants sont <code>keydown</code>, <code>keypress</code> et <code>keyup</code>. Pour la plupart des touches, Gecko génère une suite d'événements touche comme suit :</p>
+
+<ol>
+ <li>lorsque la touche est d'abord enfoncée, l'événement <code>keydown</code> est envoyé ;</li>
+ <li>si la touche n'est pas une touche de modification, l'événement <code>keypress</code> est envoyé ;</li>
+ <li>lorsque l'utilisateur relâche la touche, l'événement <code>keyup</code> est envoyé.</li>
+</ol>
+
+<h3 id="Cas_particuliers">Cas particuliers</h3>
+
+<p>Certaines touches inversent l'état d'un voyant lumineux ; celles-ci comprennent des touches telles que Caps Lock, Num Lock et Scroll Lock. Sous Windows et Linux, ces touches génèrent uniquement les événements <code>keydown</code> et <code>keyup</code>.</p>
+
+<div class="note">
+<p>Sous Linux, Firefox 12 et les versions antérieures ont également envoyé l'événement <code>keypress</code> pour ces touches.</p>
+</div>
+
+<p>Cependant, une limitation du modèle d'événement Mac OS X fait que Caps Lock ne génère que l'événement <code>keydown</code>. Num Lock était supporté sur certains modèles d'ordinateurs portables plus anciens (modèles 2007 et plus anciens), mais depuis lors, Mac OS X n'a pas supporté Num Lock même sur les claviers externes. Sur les MacBooks plus anciens avec une touche Num Lock, cette touche ne génère aucun événement touche. Gecko supporte la touche Scroll Lock si un clavier externe ayant une touche F14 est connecté. Dans certaines anciennes versions de Firefox, cette touche générait un événement <code>keypress</code> ; ce comportement incohérent était le {{bug(602812)}}.</p>
+
+<h3 id="Gestion_de_l'auto-répétition">Gestion de l'auto-répétition</h3>
+
+<p> </p>
+
+<p>Lorsqu'une touche est maintenue enfoncée, elle commence à se répéter automatiquement. Cela a pour résultat qu'une suite d'événements similaire à ce qui suit est générée :</p>
+
+<ol>
+ <li><code>keydown</code></li>
+ <li><code>keypress</code></li>
+ <li><code>keydown</code></li>
+ <li><code>keypress</code></li>
+ <li>&lt;&lt; répétition jusqu'à ce que l'utilisateur relâche la touche &gt;&gt;</li>
+ <li><code>keyup</code></li>
+</ol>
+
+<p>C'est ce que la spécification DOM Niveau 3 dit qu'il devrait se produire. Cependant, il y a quelques mises en garde, comme décrit ci-dessous.</p>
+
+<p> </p>
+
+<h4 id="Auto-répétition_sur_certains_environnements_GTK_tels_que_Ubuntu_9.4">Auto-répétition sur certains environnements GTK tels que Ubuntu 9.4</h4>
+
+<p>Dans certains environnements basés sur GTK, l'auto-répétition génère automatiquement un événement natif lors de la répétition automatique, et Gecko n'a aucun moyen de connaître la différence entre une suite répétée de touches et une répétition automatique. Sur ces plateformes, une touche auto-répétée génère donc la suite d'événements suivante :</p>
+
+<ol>
+ <li><code>keydown</code></li>
+ <li><code>keypress</code></li>
+ <li><code>keyup</code></li>
+ <li><code>keydown</code></li>
+ <li><code>keypress</code></li>
+ <li><code>keyup</code></li>
+ <li>&lt;&lt; répétition jusqu'à ce que l'utilisateur relâche la touche &gt;&gt;</li>
+ <li><code>keyup</code></li>
+</ol>
+
+<p>Dans ces environnements, malheureusement, il n'y a aucun moyen pour que le contenu Web puisse faire la différence entre les touches répétées automatiquement et les touches qui sont simplement pressées à plusieurs reprises.</p>
+
+<h4 id="Gestion_de_l'auto-répétition_avant_Gecko_5.0">Gestion de l'auto-répétition avant Gecko 5.0</h4>
+
+<p>Avant Gecko 5.0 {{geckoRelease('5.0')}}, la gestion du clavier était moins cohérente entre les plates-formes.</p>
+
+<dl>
+ <dt>Windows</dt>
+ <dd>Le comportement de la répétition automatique est le même que dans Gecko 4.0 et ultérieur.</dd>
+ <dt>Mac</dt>
+ <dd>Après l'événement keydown initial, seuls les événements keypress sont envoyés jusqu'à ce que l'événement keyup se produise ; les événements de clavier intermédiaires ne sont pas envoyés.</dd>
+ <dt>Linux</dt>
+ <dd>Le comportement de l'événement dépend de la plate-forme particulière. Il se comportera comme Windows ou Mac suivant ce que fait le modèle d'événement natif.</dd>
+</dl>
+
+<p class="note"><strong>Note :</strong> le déclenchement manuel d'un événement ne génère <em>pas</em> l'action par défaut associée à cet événement. Par exemple, le déclenchement manuel d'un événement touche n'entraîne pas l'apparition de cette lettre dans une zone de saisie de texte ayant la focalisation. Dans le cas des événements de l'interface utilisateur, cela est important pour des raisons de sécurité, car cela empêche les scripts de simuler les actions de l'utilisateur interagissant avec le navigateur lui-même.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;script&gt;
+'use strict';
+
+document.addEventListener('keydown', (event) =&gt; {
+  const nomTouche = event.key;
+
+  if (nomTouche === 'Control') {
+    // Pas d'alerte si seule la touche Control est pressée.
+    return;
+  }
+
+  if (event.ctrlKey) {
+    // Même si event.key n'est pas 'Control' (par ex., 'a' is pressed),
+    // event.ctrlKey peut être true si la touche Ctrl est pressée dans le même temps.
+    alert(`Combinaison de ctrlKey + ${nomTouche}`);
+  } else {
+    alert(`Touche pressée ${nomTouche}`);
+  }
+}, false);
+
+document.addEventListener('keyup', (event) =&gt; {
+  const nomTouche = event.key;
+
+  // Dès que l'utilisateur relâche la touche Ctrl, la touche n'est plus active.
+  // Aussi event.ctrlKey est false.
+  if (nomTouche === 'Control') {
+    alert('La touche Control a été relâchée');
+  }
+}, false);
+
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</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('UI Events', '#interface-keyboardevent', 'KeyboardEvent')}}</td>
+   <td>{{Spec2('UI Events')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>La spécification d'interface <code>KeyboardEvent</code> est passée par de nombreuses versions préliminaires, d'abord sous DOM Events Level 2 où elle a été supprimée du fait qu'aucun consensus n'avait émergé, puis sous DOM Events Level 3. Cela conduit à l'implémentation de méthodes d'initialisation non standard, la version ancienne DOM Events Level 2, {{domxref("KeyboardEvent.initKeyEvent()")}} par les navigateurs Gecko et la version prémiminaire DOM Events Level 3, {{domxref("KeyboardEvent.initKeyboardEvent()")}} par d'autres navigateurs. Tous deux ont été remplacés par l'utilisation moderne d'un constructeur : {{domxref ("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.KeyboardEvent")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("KeyboardEvent.code")}}.</li>
+ <li>{{domxref("KeyboardEvent.key")}}.</li>
+ <li>{{domxref("KeyboardEvent.getModifierState")}}</li>
+</ul>
diff --git a/files/fr/web/api/keyboardevent/key/index.html b/files/fr/web/api/keyboardevent/key/index.html
new file mode 100644
index 0000000000..cf51e90dc4
--- /dev/null
+++ b/files/fr/web/api/keyboardevent/key/index.html
@@ -0,0 +1,227 @@
+---
+title: KeyboardEvent.key
+slug: Web/API/KeyboardEvent/key
+tags:
+  - API
+  - DOM
+  - KeyboardEvent
+  - Lecture-seule
+  - Propriété
+  - Reference
+  - UI Events
+translation_of: Web/API/KeyboardEvent/key
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p>La propriété en lecture seule de <code>key</code> de l'interface {{domxref("KeyboardEvent")}} retourne la valeur d’une ou plusieurs touches pressées par l’utilisateur, tout en tenant compte de l'état des touches de modification telles que la touche <kbd>Shift</kbd> (<em>majuscules</em>) ainsi que les paramètres régionaux des clavier et mise en page. Ce peut être l’une des valeurs suivantes :</p>
+
+<div class="pull-aside moreinfo">
+<h4 id="Valeurs_des_touches">Valeurs des touches</h4>
+
+<p>Voir une liste complète des <a href="https://developer.mozilla.org/fr/docs/Web/API/KeyboardEvent/key/Key_Values">valeurs de touches</a></p>
+</div>
+
+<ul>
+ <li>
+  <p>Si la valeur a une représentation d’impression, ce sera une chaîne de caractères Unicode non vide</p>
+ </li>
+ <li>Si la valeur est une touche de contrôle, une des <a href="#Key_values">valeurs de touches pré-définies</a>.</li>
+ <li>Si l’<code>KeyboardEvent</code> est causé par l’appui sur une touche morte, la valeur de la touche sera "<code>Dead</code>".</li>
+ <li>Certaines touches de clavier spécialisées (telles que les touches étendues de contrôle des médias sur les claviers multimédias) ne génèrent pas de codes de touches sous Windows ; à la place, ils déclenchent les événements <code>WM_APPCOMMAND</code>. Ces événements sont connectés aux événements de clavier DOM et sont répertoriés parmi les «codes de touche virtuelle» pour Windows, même s'ils ne sont pas réellement des codes de touche.</li>
+ <li>Si la valeur ne peut être identifiée, '<code>Unidentified</code>' sera retourné.</li>
+</ul>
+
+<h2 id="Séquence_KeyboardEvent">Séquence KeyboardEvent</h2>
+
+<p>Les événements <code>KeyboardEvents</code> sont déclenchés selon une séquence prédéterminée, et la compréhension de ces éléments contribuera à comprendre la valeur de la propriété <code>key</code> pour un événement <code>KeyboardEvent</code> particulier. Pour une touche donnée, la séquence de KeyboardEvents est la suivante, en supposant que {{domxref ("Event.preventDefault")}} n'est pas appelée :</p>
+
+<ol>
+ <li>Un événement {{domxref("Element/keydown_event", "keydown")}} (<em>touche abaissée</em>) est d'abord déclenché. Si la touche est maintenue enfoncée et que la touche est une touche de caractère, l'événement continue d'être émis dans un intervalle dépendant de l'implémentation de la plateforme, et la propriété en lecture seule {{domxref ("KeyboardEvent.repeat")}} est définie sur <code>true</code> (<em>vrai</em>).</li>
+ <li>Si la touche est une touche de caractère qui entraînerait l'insertion d'un caractère dans {{HTMLElement ("entrée")}}, {{HTMLElement ("textarea")}} ou un élément dont {{domxref ("HTMLElement. contentEditable ")}} a la valeur <code>true</code>, les types d'événements {{domxref("HTMLElement/beforeinput_event", "beforeinput")}} et {{domxref("HTMLElement/input_event", "input")}} sont déclenchés dans cet ordre. Notez que d'autres implémentations peuvent déclencher l'événement {{event ("keypress")}} si elles sont prises en charge. Les événements seront déclenchés à plusieurs reprises tant que la touche est maintenue enfoncée.</li>
+ <li>Un évènement {{domxref("Element/keyup_event", "keyup")}} est déclenché une fois la touche relachée. Ceci complète le processus.</li>
+</ol>
+
+<p>Dans les étapes 1 et 3, l'attribut <code>KeyboardEent.key</code> est défini et est déclaré à une valeur appropriée en fonction des règles définies.</p>
+
+<h2 id="Exemple_de_séquence_KeyboardEvent">Exemple de séquence KeyboardEvent</h2>
+
+<p>Considérez la séquence d'événements générée lorsque nous interagissons avec la touche <kbd>Shift</kbd> et la touche <kbd>2</kbd> en utilisant un clavier américain et un clavier britannique.</p>
+
+<p>Essayez d'expérimenter en utilisant les deux cas de test suivants :</p>
+
+<ol>
+ <li>Maintenez la touche <kbd>shift</kbd> enfoncée, puis appuyez sur <kbd>2</kbd> et relâchez-la. Ensuite, relâchez la touche <kbd>shift</kbd>.</li>
+ <li>Maintenez la touche <code>shift</code> enfoncée, puis appuyez sur <kbd>2</kbd>. Relâchez la touche <kbd>shift</kbd>. Finalement, relâchez la touche <kbd>2</kbd>.</li>
+</ol>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>fx<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>textarea</span> <span class="attr-name token">rows</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>5<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>test-target<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>test-target<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>textarea</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">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>btn-clear-console<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>btn-clear-console<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>clear console<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>div</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>flex<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>console-log<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css line-numbers  language-css"><code class="language-css"><span class="selector token"><span class="class token">.fx</span> </span><span class="punctuation token">{</span>
+  <span class="property token">-webkit-display</span><span class="punctuation token">:</span> flex<span class="punctuation token">;</span>
+  <span class="property token">display</span><span class="punctuation token">:</span> flex<span class="punctuation token">;</span>
+  <span class="property token">margin-left</span><span class="punctuation token">:</span> -<span class="number token">20</span>px<span class="punctuation token">;</span>
+  <span class="property token">margin-right</span><span class="punctuation token">:</span> -<span class="number token">20</span>px<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token"><span class="class token">.fx</span> &gt; div </span><span class="punctuation token">{</span>
+  <span class="property token">padding-left</span><span class="punctuation token">:</span> <span class="number token">20</span>px<span class="punctuation token">;</span>
+  <span class="property token">padding-right</span><span class="punctuation token">:</span> <span class="number token">20</span>px<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token"><span class="class token">.fx</span> &gt; div<span class="pseudo-class token">:first-child</span> </span><span class="punctuation token">{</span>
+   <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">30%</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token"><span class="class token">.flex</span> </span><span class="punctuation token">{</span>
+  <span class="property token">-webkit-flex</span><span class="punctuation token">:</span> <span class="number token">1</span><span class="punctuation token">;</span>
+  <span class="property token">flex</span><span class="punctuation token">:</span> <span class="number token">1</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token"><span class="id token">#test-target</span> </span><span class="punctuation token">{</span>
+  <span class="property token">display</span><span class="punctuation token">:</span> block<span class="punctuation token">;</span>
+  <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">100%</span><span class="punctuation token">;</span>
+  <span class="property token">margin-bottom</span><span class="punctuation token">:</span> <span class="number token">10</span>px<span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">let</span> textarea <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'test-target'</span><span class="punctuation token">)</span><span class="punctuation token">,</span>
+consoleLog <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'console-log'</span><span class="punctuation token">)</span><span class="punctuation token">,</span>
+btnClearConsole <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'btn-clear-console'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="keyword token">function</span> <span class="function token">logMessage</span><span class="punctuation token">(</span>message<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">let</span> p <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'p'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  p<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>document<span class="punctuation token">.</span><span class="function token">createTextNode</span><span class="punctuation token">(</span>message<span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  consoleLog<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>p<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+textarea<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'keydown'</span><span class="punctuation token">,</span> <span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="operator token">=</span><span class="operator token">&gt;</span> <span class="punctuation token">{</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span>e<span class="punctuation token">.</span>repeat<span class="punctuation token">)</span>
+    <span class="function token">logMessage</span><span class="punctuation token">(</span>`first keydown event<span class="punctuation token">.</span> key property value is <span class="string token">"${e.key}"</span><span class="template-string token"><span class="string token">`);
+  else
+    logMessage(`</span></span>keydown event repeats<span class="punctuation token">.</span> key property value is <span class="string token">"${e.key}"</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>
+
+textarea<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'beforeinput'</span><span class="punctuation token">,</span> <span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="operator token">=</span><span class="operator token">&gt;</span> <span class="punctuation token">{</span>
+  <span class="function token">logMessage</span><span class="punctuation token">(</span>`beforeinput event<span class="punctuation token">.</span> you are about inputing <span class="string token">"${e.data}"</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>
+
+textarea<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'input'</span><span class="punctuation token">,</span> <span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="operator token">=</span><span class="operator token">&gt;</span> <span class="punctuation token">{</span>
+  <span class="function token">logMessage</span><span class="punctuation token">(</span>`input event<span class="punctuation token">.</span> you have just inputed <span class="string token">"${e.data}"</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>
+
+textarea<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'keyup'</span><span class="punctuation token">,</span> <span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="operator token">=</span><span class="operator token">&gt;</span> <span class="punctuation token">{</span>
+  <span class="function token">logMessage</span><span class="punctuation token">(</span>`keyup event<span class="punctuation token">.</span> key property value is <span class="string token">"${e.key}"</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>
+
+btnClearConsole<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> <span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="operator token">=</span><span class="operator token">&gt;</span> <span class="punctuation token">{</span>
+  <span class="keyword token">let</span> child <span class="operator token">=</span> consoleLog<span class="punctuation token">.</span>firstChild<span class="punctuation token">;</span>
+  <span class="keyword token">while</span> <span class="punctuation token">(</span>child<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+   consoleLog<span class="punctuation token">.</span><span class="function token">removeChild</span><span class="punctuation token">(</span>child<span class="punctuation token">)</span><span class="punctuation token">;</span>
+   child <span class="operator token">=</span> consoleLog<span class="punctuation token">.</span>firstChild<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>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemple_de_séquence_KeyboardEvent')}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Sur les navigateurs qui n'implémentent pas complètement l'interface {{domxref("InputEvent")}} qui est utilisée pour les événements {{domxref("HTMLElement/beforeinput_event", "beforeinput")}} et {{domxref("HTMLElement/input_event", "input")}}, vous pouvez obtenir une réponse incorrecte sur ces lignes du journal de sortie.</p>
+</div>
+
+<h3 id="Cas_1">Cas 1</h3>
+
+<p>Lorsque la touche Maj (<em>shift</em>) est enfoncée, un événement {{domxref("Element/keydown_event", "keydown")}} est d'abord déclenché et la valeur de la propriété <code>key</code> est définie sur la chaîne <code>"Shift"</code>. Comme nous gardons cette touche enfoncée, l'événement {{event ("keydown")}} est continu et ne se répéte pas car la touche Maj ne produit pas de caractère.</p>
+
+<p>Lorsque la <code>key 2</code> est enfoncée, un autre événement {{domxref("Element/keydown_event", "keydown")}} est déclenché pour cette nouvelle touche, et la valeur de la propriété <code>key</code> pour l'événement est définie sur la chaîne <code>"@"</code> pour le clavier de type américain et <code>"""</code> pour le clavier de type britannique, à cause de la touche de changement de modificateur active. Les événements {{domxref("HTMLElement/beforeinput_event", "beforeinput")}} et {{domxref("HTMLElement/input_event", "input")}} sont déclenchés ensuite parce qu'une touche de caractère a été activée.</p>
+
+<p>Lorsque nous relâchons la <code>key 2</code>, un événement {{domxref("Element/keyup_event", "keyup")}} est déclenché et la propriété <code>key</code> conserve les valeurs de chaîne <code>"@"</code> et <code>"""</code> pour les différents claviers respectivement.</p>
+
+<p>Lorsque nous relâchons enfin la touche <code>shift</code>, un autre événement {{domxref("Element/keyup_event", "keyup")}} est déclenché pour elle, et la valeur de l'attribut de la touche reste <code>"Shift"</code>.</p>
+
+<h3 id="Cas_2">Cas 2</h3>
+
+<p>Lorsque la touche Maj est enfoncée, un événement {{domxref("Element/keydown_event", "keydown")}} est d'abord déclenché et la valeur de la propriété <code>key</code> est définie sur la chaîne "Shift". Comme nous maintenons cette touche enfoncée, l'événement {{domxref("Element/keydown_event", "keydown")}} est continu et ne se répéte pas car la touche Maj ne produit pas de caractère.</p>
+
+<p>Lorsque la <code>key 2</code> est enfoncée, un autre événement {{domxref("Element/keydown_event", "keydown")}} est déclenché pour cette nouvelle touche, et la valeur de la propriété <code>key</code> pour l'événement est définie sur la chaîne <code>"@"</code> pour le clavier de type américain et <code>"""</code> pour le clavier de type britanique, à cause de la touche de changement de modificateur active. Les événements {{domxref("HTMLElement/beforeinput_event", "beforeinput")}} et {{domxref("HTMLElement/input_event", "input")}} sont déclenchés ensuite parce qu'une touche de caractère a été activée. Comme nous maintenons la touche enfoncée, l'événement {{domxref("Element/keydown_event", "keydown")}} continue à se déclencher à plusieurs reprises et la propriété {{domxref ("KeyboardEvent.repeat")}} est définie sur <code>true</code>. Les évènements {{domxref("HTMLElement/beforeinput_event", "beforeinput")}} et {{domxref("HTMLElement/input_event", "input")}} sont également déclenchés.</p>
+
+<p>Lorsque nous relâchons la touche <code>shift</code>, un événement {{domxref("Element/keyup_event", "keyup")}} est déclenché et la valeur de l'attribut clé reste "Shift". À ce stade, notez que la valeur de la propriété <code>key</code> pour l'événement de répétition du clavier de la touche <code>key 2</code> est désormais "2" car la touche de modification du sélecteur n'est plus active. Il en va de même pour la propriété {{domxref("HTMLElement/beforeinput_event", "beforeinput")}} des événements {{domxref("HTMLElement/input_event", "input")}} et {{event ("input")}}.</p>
+
+<p>Lorsque nous relâchons enfin la touche <code>key 2</code>, un événement {{domxref("Element/keyup_event", "keyup")}} est déclenché mais la propriété <code>key</code> est définie sur la valeur de chaîne <code>"2"</code> pour les deux configurations de clavier car la touche de modification <code>shift</code> n'est plus active.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p><span id="result_box" lang="fr"><span>Cet exemple utilise {{domxref("EventTarget.addEventListener()")}} pour écouter les événements </span></span> {{domxref("Element/keydown_event", "keydown")}} <span lang="fr"><span>.</span> <span>Quand ils se produisent, la valeur de la touche est vérifiée pour voir si c'est l'une des touches qui intéressent le code, et si c'est le cas, elle est traitée (éventuellement en pilotant un vaisseau spatial, peut-être en changeant la cellule sélectionnée dans une feuille de calcul</span><span>).</span></span></p>
+
+<pre class="brush: js">window.addEventListener("keydown", function (event) {
+  if (event.defaultPrevented) {
+    return; // Ne devrait rien faire si l'événement de la touche était déjà consommé.
+  }
+
+  switch (event.key) {
+    case "ArrowDown":
+      // Faire quelque chose pour la touche "flèche vers le bas" pressée.
+      break;
+    case "ArrowUp":
+      // Faire quelque chose pour la touche "up arrow" pressée.
+      break;
+    case "ArrowLeft":
+      // Faire quelque chose pour la touche "left arrow" pressée.
+      break;
+    case "ArrowRight":
+      // Faire quelque chose pour la touche "right arrow" pressée.
+      break;
+    case "Enter":
+      // Faire quelque chose pour les touches "enter" ou "return" pressées.
+      break;
+    case "<code>Escape</code>":
+      // Faire quelque chose pour la touche "esc" pressée.
+      break;
+    default:
+      return; // Quitter lorsque cela ne gère pas l'événement touche.
+  }
+
+  // Annuler l'action par défaut pour éviter qu'elle ne soit traitée deux fois.
+  event.preventDefault();
+}, true);
+</pre>
+
+<h2 id="Spécification">Spécification</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('DOM3 Events', '#widl-KeyboardEvent-key', 'KeyboardEvent.key')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>Définition initiale, incluant les valeurs de touches.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.KeyboardEvent.key")}}</p>
+
+<div id="compat-desktop"></div>
+
+<div id="compat-mobile"></div>
diff --git a/files/fr/web/api/keyboardevent/key/key_values/index.html b/files/fr/web/api/keyboardevent/key/key_values/index.html
new file mode 100644
index 0000000000..a61f42654e
--- /dev/null
+++ b/files/fr/web/api/keyboardevent/key/key_values/index.html
@@ -0,0 +1,3639 @@
+---
+title: Key Values
+slug: Web/API/KeyboardEvent/key/Key_Values
+translation_of: Web/API/KeyboardEvent/key/Key_Values
+---
+<p>Les tableaux ci-dessous énumèrent les valeurs clés standard dans différentes catégories de clés, avec une explication de l'utilisation habituelle de la clé. Les codes de clés virtuels correspondants pour les plateformes communes sont inclus lorsqu'ils sont disponibles.</p>
+
+<div class="pull-aside">
+<div class="moreinfo">Apprenez à utiliser ces valeurs clés en JavaScript en utilisant <a href="/fr/docs/Web/API/KeyboardEvent/key">KeyboardEvent.key</a></div>
+</div>
+
+<p><a href="#Special_values">Special Values </a>| <a href="#Modifier_keys">Modifier Keys</a> | <a href="#Whitespace_keys">Whitespace Keys</a> | <a href="#Navigation_keys">Navigation Keys</a> | <a href="#Editing_keys">Editing Keys</a> | <a href="#UI_keys">UI Keys</a> | <a href="#Device_keys">Device Keys</a> | <a href="#IME_and_composition_keys">IME and Composition Keys</a> | <a href="#Function_keys">Function Keys</a> | <a href="#Phone_keys">Phone Keys</a> | <a href="#Multimedia_keys">Multimedia Keys</a> | <a href="#Audio_control_keys">Audio Control Keys</a> | <a href="#TV_control_keys">TV Control Keys</a> | <a href="#Media_controller_keys">Media Controller Keys</a> | <a href="#Speech_recognition_keys">Speech Recognition Keys</a> | <a href="#Document_keys">Document Keys</a> | <a href="#Application_selector_keys">Application Selector Keys</a> | <a href="#Browser_control_keys">Browser Control Keys</a> | <a href="#Numeric_keypad_keys">Numeric Keypad Keys</a></p>
+
+<h2 id="Valeurs_spéciales">Valeurs spéciales</h2>
+
+<p>Les valeurs de <code>key</code> qui ont une signification particulière autre que l'identification d'une clé ou d'un caractère spécifique.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;"><code>KeyboardEvent.key</code> Valeur</th>
+   <th rowspan="2" scope="col" style="text-align: left;">Description</th>
+   <th colspan="4" scope="col" style="text-align: center;">Code clé virtuel</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"Unidentified"</code></td>
+   <td>L'agent utilisateur n'a pas été en mesure de faire correspondre le code virtuel de l'événement à une valeur clé spécifique. Cela peut être dû à des contraintes matérielles ou logicielles, ou à des contraintes liées à la plate-forme sur laquelle l'agent utilisateur fonctionne.</td>
+   <td><em>varie</em></td>
+   <td><em>varie</em></td>
+   <td><em>varie</em></td>
+   <td><em>varie</em></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Modifier_keys">Modifier keys</h2>
+
+<p>Modifiers are special keys which are used to generate special characters or cause special actions when used in combination with other keys. Examples include the <kbd>Shift</kbd> and <kbd>Control</kbd> keys, and lock keys such as <kbd>Caps Lock</kbd> and <kbd>NumLock</kbd>.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;"><code>KeyboardEvent.key</code> Value</th>
+   <th rowspan="2" scope="col" style="text-align: left;">Description</th>
+   <th colspan="4" scope="col" style="text-align: center;">Virtual Keycode</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+  <tr>
+   <td><code>"Alt"</code> [5]</td>
+   <td>The <kbd>Alt</kbd> (Alternative) key.</td>
+   <td><code>VK_MENU</code> (0x12)<br>
+    <code>VK_LMENU</code> (0xA4)<br>
+    <code>VK_RMENU</code> (0xA5)</td>
+   <td><code>kVK_Option</code> (0x3A)<br>
+    <code>kVK_RightOption</code> (0x3D)</td>
+   <td><code>GDK_KEY_Alt_L</code> (0xFFE9)<br>
+    <code>GDK_KEY_Alt_R</code> (0xFFEA)<br>
+    <code>Qt::Key_Alt</code> (0x01000023)</td>
+   <td><code>KEYCODE_ALT_LEFT</code> (57)<br>
+    <code>KEYCODE_ALT_RIGHT</code> (58)</td>
+  </tr>
+  <tr>
+   <td><code>"AltGraph"</code> [5]</td>
+   <td>The <kbd>AltGr</kbd> or <kbd>AltGraph</kbd> (Alternate Graphics) key. Enables the ISO Level 3 shift modifier (where <kbd>Shift</kbd> is the level 2 modifier).</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Mode_switch</code> (0xFF7E)<br>
+    <code>GDK_KEY_ISO_Level3_Shift</code> (0xFE03)<br>
+    <code>GDK_KEY_ISO_Level3_Latch</code> (0xFE04)<br>
+    <code>GDK_KEY_ISO_Level3_Lock</code> (0xFE05)<br>
+    <code>GDK_KEY_ISO_Level5_Shift</code> (0xFE11)<br>
+    <code>GDK_KEY_ISO_Level5_Latch</code> (0xFE12)<br>
+    <code>GDK_KEY_ISO_Level5_Lock</code> (0xFE13)<br>
+    <code>Qt::Key_AltGr</code> (0x01001103<br>
+    <code>Qt::Key_Mode_switch</code> (0x0100117E)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"CapsLock"</code></td>
+   <td>The <kbd>Caps Lock</kbd> key. Toggles the capital character lock on and off for subsequent input.</td>
+   <td><code>VK_CAPITAL</code> (0x14)</td>
+   <td><code>kVK_CapsLock</code> (0x39)</td>
+   <td><code>GDK_KEY_Caps_Lock</code> (0xFFE5)<br>
+    <code>Qt::Key_CapsLock</code> (0x01000024)</td>
+   <td><code>KEYCODE_CAPS_LOCK</code> (115)</td>
+  </tr>
+  <tr>
+   <td><code>"Control"</code></td>
+   <td>The <kbd>Control</kbd>, <kbd>Ctrl</kbd>, or <kbd>Ctl</kbd> key. Allows typing control characters.</td>
+   <td><code>VK_CONTROL</code> (0x11)<br>
+    <code>VK_LCONTROL</code> (0xA2)<br>
+    <code>VK_RCONTROL</code> (0xA3)</td>
+   <td><code>kVK_Control</code> (0x3B)<br>
+    <code>kVK_RightControl</code> (0x3E)</td>
+   <td><code>GDK_KEY_Control_L</code> (0xFFE3)<br>
+    <code>GDK_KEY_Control_R</code> (0xFFE4)<br>
+    <code>Qt::Key_Control</code> (0x01000021)</td>
+   <td><code>KEYCODE_CTRL_LEFT</code> (113)<br>
+    <code>KEYCODE_CTRL_RIGHT</code> (114)</td>
+  </tr>
+  <tr>
+   <td><code>"Fn"</code></td>
+   <td>The <kbd>Fn</kbd> (Function modifier) key. Used to allow generating function key (<kbd>F1</kbd>-<kbd>F15</kbd>, for instance) characters on keyboards without a dedicated function key area. Often handled in hardware so that events aren't generated for this key.</td>
+   <td></td>
+   <td><code>kVK_Function</code> (0x3F)</td>
+   <td></td>
+   <td><code>KEYCODE_FUNCTION</code> (119)</td>
+  </tr>
+  <tr>
+   <td><code>"FnLock"</code></td>
+   <td>The <kbd>FnLock</kbd> or <kbd>F-Lock</kbd> (Function Lock) key.Toggles the function key mode described by "Fn" on and off. Often handled in hardware so that events aren't generated for this key.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Hyper"</code> [4]</td>
+   <td>The <kbd>Hyper</kbd> key.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Hyper_L</code> (0xFFED)<br>
+    <code>GDK_KEY_Hyper_R</code> (0xFFEE)<br>
+    <code>Qt::Key_Hyper_L</code> (0x01000056)<br>
+    <code>Qt::Key_Hyper_R</code> (0x01000057)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Meta"</code> [1]</td>
+   <td>The <kbd>Meta</kbd> key. Allows issuing special command inputs. This is the <kbd>Windows</kbd> logo key, or the <kbd>Command</kbd> or <kbd>⌘</kbd> key on Mac keyboards.</td>
+   <td><code>VK_LWIN</code> (0x5B)<br>
+    <code>VK_RWIN</code> (0x5C)</td>
+   <td><code>kVK_Command</code> (0x37)<br>
+    <code>kVK_RightCommand</code> (0x36)</td>
+   <td><code>GDK_KEY_Meta_L</code> (0xFFE7)<br>
+    <code>GDK_KEY_Meta_R</code> (0xFFE8)<br>
+    <code>Qt::Key_Meta</code> (0x01000022)</td>
+   <td><code>KEYCODE_META_LEFT</code> (117)<br>
+    <code>KEYCODE_META_RIGHT</code> (118)</td>
+  </tr>
+  <tr>
+   <td><code>"NumLock"</code></td>
+   <td>The <kbd>NumLock</kbd> (Number Lock) key. Toggles the numeric keypad between number entry some other mode (often directional arrows).</td>
+   <td><code>VK_NUMLOCK</code> (0x90)</td>
+   <td></td>
+   <td><code>GDK_KEY_Num_Lock</code> (0xFF7F)<br>
+    <code>Qt::Key_NumLock</code> (0x01000025)</td>
+   <td><code>KEYCODE_NUM_LOCK</code> (143)</td>
+  </tr>
+  <tr>
+   <td><code>"ScrollLock"</code> [2]</td>
+   <td>The <kbd>Scroll Lock</kbd> key. Toggles beteen scrolling and cursor movement modes.</td>
+   <td><code>VK_SCROLL</code> (0x91)</td>
+   <td></td>
+   <td><code>GDK_KEY_Scroll_Lock</code> (0xFF14)<br>
+    <code>Qt::Key_ScrollLock</code> (0x01000026)</td>
+   <td><code>KEYCODE_SCROLL_LOCK</code> (116)</td>
+  </tr>
+  <tr>
+   <td><code>"Shift"</code></td>
+   <td>The <kbd>Shift</kbd> key. Modifies keystrokes to allow typing upper (or other) case letters, and to support typing punctuation and other special characters.</td>
+   <td><code>VK_SHIFT</code> (0x10)<br>
+    <code>VK_LSHIFT</code> (0xA0)<br>
+    <code>VK_RSHIFT</code> (0xA1)</td>
+   <td><code>kVK_Shift</code> (0x38)<br>
+    <code>kVK_RightShift</code> (0x3C)</td>
+   <td><code>GDK_KEY_Shift_L</code> (0xFFE1)<br>
+    <code>GDK_KEY_Shift_R</code> (0xFFE2)<br>
+    <code>Qt::Key_Shift</code> (0x01000020)</td>
+   <td><code>KEYCODE_SHIFT_LEFT</code> (59)<br>
+    <code>KEYCODE_SHIFT_RIGHT</code> (60)</td>
+  </tr>
+  <tr>
+   <td><code>"Super"</code> [4]</td>
+   <td>The <kbd>Super</kbd> key.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Super_L</code> (0xFFEB)<br>
+    <code>GDK_KEY_Super_R</code> (0xFFEC)<br>
+    <code>Qt::Key_Super_L</code> (0x01000053)<br>
+    <code>Qt::Key_Super_R</code> (0x01000054)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Symbol"</code></td>
+   <td>The <kbd>Symbol</kbd> modifier key (found on certain virtual keyboards).</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_SYM</code> (63) [3]</td>
+  </tr>
+  <tr>
+   <td><code>"SymbolLock"</code></td>
+   <td>The <kbd>Symbol Lock</kbd> key.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+ </thead>
+</table>
+
+<p>[1] In Internet Explorer (tested on release 9 and 11), as well as in all versions of Firefox, the <kbd>Windows</kbd> key is reported as <code>"OS"</code> instead of as <code>"Meta"</code>. This will be changed in Firefox per {{bug(1232918)}}. Until that's fixed, these keys are returned as <code>"OS"</code> by Firefox: <code>VK_LWIN</code> (0x5B) and <code>VK_RWIN</code> (0x5C) on Windows, and <code><code>GDK_KEY_Super_L</code> (0xFFEB)</code>, <code><code>GDK_KEY_Super_R</code> (0xFFEC)</code>, <code><code>GDK_KEY_Hyper_L</code> (0xFFED)</code>, and <code><code>GDK_KEY_Hyper_R</code> (0xFFEE)</code> on Linux.</p>
+
+<p>[2] Internet Explorer (tested on release 9 and 11) reports <code>"Scroll"</code> instead of <code>"ScrollLock"</code> for the <kbd>Scroll Lock</kbd> key.</p>
+
+<p>[3] Firefox did not add support for the <kbd>Symbol</kbd> key until Firefox 37.</p>
+
+<p>[4] Firefox generates the key value <code>"OS</code>" for the <kbd>Super</kbd> and <kbd>Hyper</kbd> keys, instead of <code>"Super"</code> and <code>"Hyper"</code>.</p>
+
+<p>[5] Chrome 67 and Firefox 63 now correctly interpret the right <kbd>Alt</kbd> key for keyboard layouts which map that key to <kbd>AltGr</kbd>. See Firefox bug {{bug(900750)}} and <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=25503">Chrome bug 25503</a> for further details.</p>
+
+<h2 id="Whitespace_keys">Whitespace keys</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;"><code>KeyboardEvent.key</code> Value</th>
+   <th rowspan="2" scope="col" style="text-align: left;">Description</th>
+   <th colspan="4" scope="col" style="text-align: center;">Virtual Keycode</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"Enter"</code></td>
+   <td>The <kbd>Enter</kbd> or <kbd>↵</kbd> key (sometimes labeled <kbd>Return</kbd>).</td>
+   <td><code>VK_RETURN</code> (0x0D)</td>
+   <td><code>kVK_Return</code> (0x24)<br>
+    <code>kVK_ANSI_KeypadEnter</code> (0x4C)<br>
+    <code>kVK_Powerbook_KeypadEnter</code> (0x34)</td>
+   <td><code><code>GDK_KEY_Return</code> (0xFF0D)</code><br>
+    <code><code>GDK_KEY_KP_Enter</code> (0xFF8D)</code><br>
+    <code><code>GDK_KEY_ISO_Enter</code> (0xFE34)</code><br>
+    <code><code>GDK_KEY_3270_Enter</code> (0xFD1E)</code><br>
+    <code>Qt::Key_Return</code> (0x01000004)<br>
+    <code>Qt::Key_Enter</code> (0x01000005)</td>
+   <td><code>KEYCODE_ENTER</code> (66)<br>
+    <code>KEYCODE_NUMPAD_ENTER</code> (160)<br>
+    <code>KEYCODE_DPAD_CENTER</code> (23)</td>
+  </tr>
+  <tr>
+   <td><code>"Tab"</code></td>
+   <td>The Horizontal Tab key, <kbd>Tab</kbd>.</td>
+   <td><code>VK_TAB</code> (0x09)</td>
+   <td><code>kVK_Tab</code> (0x30)</td>
+   <td><code><code>GDK_KEY_Tab</code> (0xFF09)</code><br>
+    <code><code>GDK_KEY_KP_Tab</code> (0xFF89)<br>
+    GDK_KEY_ISO_Left_Tab</code> (0xFE20)<br>
+    <code>Qt::Key_Tab</code> (0x01000001)</td>
+   <td><code>KEYCODE_TAB</code> (61)</td>
+  </tr>
+  <tr>
+   <td><code>" "</code> [1]</td>
+   <td>The space key, <kbd>Space Bar</kbd>.</td>
+   <td><code>VK_SPACE</code> (0x20)</td>
+   <td><code>kVK_Space</code> (0x31)</td>
+   <td>
+    <p><code>GDK_KEY_space</code> (0x20)<br>
+     <code>GDK_KEY_KP_Space</code> (0xFF80)<br>
+     <code>Qt::Key_Space</code> (0x20)</p>
+   </td>
+   <td><code>KEYCODE_SPACE</code> (62)</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>[1] Older browsers may return "Spacebar" instead of " " for the <kbd>Space Bar</kbd> key. Firefox did so until version 37, as did Internet Explorer 9, 10, and 11.</p>
+
+<h2 id="Navigation_keys">Navigation keys</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;"><code>KeyboardEvent.key</code> Value</th>
+   <th rowspan="2" scope="col" style="text-align: left;">Description</th>
+   <th colspan="4" scope="col" style="text-align: center;">Virtual Keycode</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"ArrowDown"</code> [1]</td>
+   <td>The down arrow key.</td>
+   <td><code>VK_DOWN</code> (0x28)</td>
+   <td><code>kVK_DownArrow</code> (0x7D)</td>
+   <td><code>GDK_KEY_Down</code> (0xFF54)<br>
+    <code>GDK_KEY_KP_Down</code> (0xFF99)<br>
+    <code>Qt::Key_Down</code> (0x01000015)</td>
+   <td><code>KEYCODE_DPAD_DOWN</code> (20)</td>
+  </tr>
+  <tr>
+   <td><code>"ArrowLeft"</code> [1]</td>
+   <td>The left arrow key.</td>
+   <td><code>VK_LEFT</code> (0x25)</td>
+   <td><code>kVK_LeftArrow</code> (0x7B)</td>
+   <td><code>GDK_KEY_Left</code> (0xFF51)<br>
+    <code>GDK_KEY_KP_Left</code> (0xFF96)<br>
+    <code>Qt::Key_Left</code> (0x01000012)</td>
+   <td><code>KEYCODE_DPAD_LEFT</code> (21)</td>
+  </tr>
+  <tr>
+   <td><code>"ArrowRight"</code> [1]</td>
+   <td>The right arrow key.</td>
+   <td><code>VK_RIGHT</code> (0x27)</td>
+   <td><code>kVK_RightArrow</code> (0x7C)</td>
+   <td><code>GDK_KEY_Right</code> (0xFF53)<br>
+    <code>GDK_KEY_KP_Right</code> (0xFF98)<br>
+    <code>Qt::Key_Right</code> (0x01000014)</td>
+   <td><code>KEYCODE_DPAD_RIGHT</code> (22)</td>
+  </tr>
+  <tr>
+   <td><code>"ArrowUp"</code> [1]</td>
+   <td>The up arrow key.</td>
+   <td><code>VK_UP</code><code> (0x26)</code></td>
+   <td><code>kVK_UpArrow</code> (0x7E)</td>
+   <td><code>GDK_KEY_Up</code> (0xFF52)<br>
+    <code>GDK_KEY_KP_Up</code> (0xFF97)<br>
+    <code>Qt::Key_Up</code> (0x01000013)</td>
+   <td><code>KEYCODE_DPAD_UP</code> (19)</td>
+  </tr>
+  <tr>
+   <td><code>"End"</code></td>
+   <td>The <kbd>End</kbd> key. Moves to the end of content.</td>
+   <td><code>VK_END</code> (0x23)</td>
+   <td><code>kVK_End</code> (0x77)</td>
+   <td><code>GDK_KEY_End</code> (0xFF57)<br>
+    <code>GDK_KEY_KP_End</code> (0xFF9C)<br>
+    <code>Qt::Key_End</code> (0x01000011)</td>
+   <td><code>KEYCODE_MOVE_END</code> (123)</td>
+  </tr>
+  <tr>
+   <td><code>"Home"</code></td>
+   <td>The <kbd>Home</kbd> key. Moves to the start of content.</td>
+   <td><code>VK_HOME</code> (0x24)</td>
+   <td><code>kVK_Home</code> (0x73)</td>
+   <td><code>GDK_KEY_Home</code> (0xFF50)<br>
+    <code>GDK_KEY_KP_Home</code> (0xFF95)<br>
+    <code>Qt::Key_Home</code> (0x01000010)</td>
+   <td><code>KEYCODE_MOVE_HOME</code> (122)</td>
+  </tr>
+  <tr>
+   <td><code>"PageDown"</code></td>
+   <td>The <kbd>Page Down</kbd> (or <kbd>PgDn</kbd>) key. Scrolls down or displays the next page of content.</td>
+   <td><code>VK_NEXT</code> (0x22)</td>
+   <td><code>kVK_PageDown</code><code> (0x79)</code></td>
+   <td><code>GDK_KEY_Page_Down</code> (0xFF56)<br>
+    <code>GDK_KEY_KP_Page_Down</code> (0xFF9B)<br>
+    <code>Qt::Key_PageDown</code> (0x01000017)</td>
+   <td><code>KEYCODE_PAGE_DOWN</code> (93)</td>
+  </tr>
+  <tr>
+   <td><code>"PageUp"</code></td>
+   <td>The <kbd>Page Up</kbd> (or <kbd>PgUp</kbd>) key. Scrolls up or displays the previous page of content.</td>
+   <td><code>VK_PRIOR</code> (0x21)</td>
+   <td><code>kVK_PageUp</code> (0x74)</td>
+   <td><code>GDK_KEY_Page_Up</code> (0xFF55)<br>
+    <code>GDK_KEY_KP_Page_Up</code> (0xFF9A)<br>
+    <code>Qt::Key_PageUp</code> (0x01000016)</td>
+   <td><code>KEYCODE_PAGE_UP</code> (92)</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>[1] Internet Explorer, Edge (16 and earlier), and Firefox (36 and earlier) use "Left", "Right", "Up", and "Down" instead of "ArrowLeft", "ArrowRight", "ArrowUp", and "ArrowDown".</p>
+
+<h2 id="Editing_keys">Editing keys</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;"><code>KeyboardEvent.key</code> Value</th>
+   <th rowspan="2" scope="col" style="text-align: left;">Description</th>
+   <th colspan="4" scope="col" style="text-align: center;">Virtual Keycode</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"Backspace"</code></td>
+   <td>The <kbd>Backspace</kbd> key. This key is labeled <kbd>Delete</kbd> on Mac keyboards.</td>
+   <td><code>VK_BACK</code> (0x08)</td>
+   <td><code>kVK_Delete</code> (0x33)</td>
+   <td><code>GDK_KEY_BackSpace</code> (0xFF08)<br>
+    <code>Qt::Key_Backspace</code> (0x01000003)</td>
+   <td><code>KEYCODE_DEL</code> (67)</td>
+  </tr>
+  <tr>
+   <td><code>"Clear"</code></td>
+   <td>The <kbd>Clear</kbd> key. Removes the currently selected input.</td>
+   <td><code>VK_CLEAR</code> (0x0C)<br>
+    <code>VK_OEM_CLEAR</code> (0xFE)</td>
+   <td><code>kVK_ANSI_KeypadClear</code> (0x47)</td>
+   <td><code>GDK_KEY_Clear</code> (0xFF0B)<br>
+    <code>Qt::Key_Clear</code> (0x0100000B)</td>
+   <td><code>KEYCODE_CLEAR</code> (28)</td>
+  </tr>
+  <tr>
+   <td><code>"Copy"</code></td>
+   <td>The <kbd>Copy</kbd> key (on certain extended keyboards).</td>
+   <td><code>APPCOMMAND_COPY</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Copy</code> (0x1008FF57)<br>
+    <code>Qt::Key_Copy</code> (0x010000CF)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"CrSel"</code> [3]</td>
+   <td>The Cursor Select key, <kbd>CrSel</kbd>.</td>
+   <td><code>VK_CRSEL</code> (0xF7)</td>
+   <td></td>
+   <td><code>GDK_KEY_3270_CursorSelect</code> (0xFD1C)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Cut"</code></td>
+   <td>The <kbd>Cut</kbd> key (on certain extended keyboards).</td>
+   <td><code>APPCOMMAND_CUT</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Cut</code> (0x1008FF58)<br>
+    <code>Qt::Key_Cut</code> (0x010000D0)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Delete"</code> [2]</td>
+   <td>The Delete key, <kbd>Del</kbd>.</td>
+   <td><code>VK_DELETE</code> (0x2E)</td>
+   <td><code>kVK_ForwardDelete</code> (0x75) [1]</td>
+   <td><code>GDK_KEY_Delete</code> (0xFFFF)<br>
+    <code>GDK_KEY_KP_Delete</code> (0xFF9F)<br>
+    <code>Qt::Key_Delete</code> (0x01000007)</td>
+   <td><code>KEYCODE_FORWARD_DEL</code> (112)</td>
+  </tr>
+  <tr>
+   <td><code>"EraseEof"</code></td>
+   <td>Erase to End of Field. Deletes all characters from the current cursor position to the end of the current field.</td>
+   <td><code>VK_EREOF</code> (0xF9)</td>
+   <td></td>
+   <td><code>GDK_KEY_3270_ExSelect</code> (0xFD1B)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"ExSel"</code> [4]</td>
+   <td>The <kbd>ExSel</kbd> (Extend Selection) key.</td>
+   <td><code>VK_EXSEL</code> (0xF8)</td>
+   <td></td>
+   <td><code>GDK_KEY_3270_ExSelect</code> (0xFD1B)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Insert"</code></td>
+   <td>The Insert key, <kbd>Ins</kbd>. Toggles  between inserting and overwriting text.</td>
+   <td><code>VK_INSERT</code> (0x2D)</td>
+   <td></td>
+   <td><code>GDK_KEY_Insert</code> (0xFF63)<br>
+    <code>GDK_KEY_KP_Insert</code> (0xFF9E)<br>
+    <code>Qt::Key_Insert</code> (0x01000006)</td>
+   <td><code>KEYCODE_INSERT</code> (124)</td>
+  </tr>
+  <tr>
+   <td><code>"Paste"</code></td>
+   <td>Paste from the clipboard.</td>
+   <td><code>APPCOMMAND_PASTE</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Paste</code> (0x1008FF6D)<br>
+    <code>Qt::Key_Paste</code> (0x010000E2)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Redo"</code></td>
+   <td>Redo the last action.</td>
+   <td><code>APPCOMMAND_REDO</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Redo</code> (0xFF66)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Undo"</code></td>
+   <td>Undo the last action.</td>
+   <td><code>APPCOMMAND_UNDO</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Undo</code> (0xFF65)</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>[1] On keyboards without a dedicated <kbd>Del</kbd> key, the Mac generates the <code>"Delete"</code> value when <kbd>Fn</kbd> is pressed in tandem with <kbd>Delete</kbd> (which is <kbd>Backspace</kbd> on other platforms).</p>
+
+<p>[2] Internet Explorer (tested on release 9 and 11) and Firefox 36 and earlier use "Del" instead of "Delete" for the <kbd>Del</kbd> key.</p>
+
+<p>[3] Internet Explorer (tested on release 9 and 11) and Firefox 36 and earlier generate the value <code>"Crsel"</code> instead of <code>"CrSel"</code> when the <kbd>CrSel</kbd> key is pressed.</p>
+
+<p>[4] Internet Explorer (tested on release 9 and 11) and Firefox 36 and earlier generate the value <code>"Exsel"</code> instead of <code>"ExSel"</code> when the <kbd>ExSel</kbd> key is pressed.</p>
+
+<h2 id="UI_keys">UI keys</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;"><code>KeyboardEvent.key</code> Value</th>
+   <th rowspan="2" scope="col" style="text-align: left;">Description</th>
+   <th colspan="4" scope="col" style="text-align: center;">Virtual Keycode</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"Accept"</code></td>
+   <td>The <kbd>Accept</kbd>, <kbd>Commit</kbd>, or <kbd>OK</kbd> key or button. Accepts the currently selected option or input method sequence conversion.</td>
+   <td><code>VK_ACCEPT</code> (0x1E)</td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_DPAD_CENTER</code> (23)</td>
+  </tr>
+  <tr>
+   <td><code>"Again"</code></td>
+   <td>The <kbd>Again</kbd> key. Redoes or repeats a previous action.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Redo</code> (0xFF66)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Attn"</code> [4]</td>
+   <td>The <kbd>Attn</kbd> (Attention) key.</td>
+   <td><code>VK_OEM_ATTN</code> (0xF0)</td>
+   <td></td>
+   <td><code>GDK_KEY_3270_Attn</code> (0xFD0E)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Cancel"</code> [1]</td>
+   <td>The <kbd>Cancel</kbd> key.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Cancel</code> (0xFF69)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"ContextMenu"</code> [3]</td>
+   <td>Shows the context menu. Typically found between the <kbd>Windows</kbd> (or <kbd>OS</kbd>) key and the <kbd>Control</kbd> key on the right side of the keyboard.</td>
+   <td><code>VK_APPS</code> (0x5D)</td>
+   <td><code>kVK_PC_ContextMenu</code> (0x6E)</td>
+   <td><code>GDK_KEY_Menu</code> (0xFF67)<br>
+    <code>Qt::Key_Menu</code> (0x01000055)</td>
+   <td><code>KEYCODE_MENU</code> (82)</td>
+  </tr>
+  <tr>
+   <td><code>"Escape"</code> [2]</td>
+   <td>The <kbd>Esc</kbd> (Escape) key. Typically used as an exit, cancel, or "escape this operation" button. Historically, the Escape character was used to signal the start of a special control sequence of characters called an "escape sequence."</td>
+   <td><code>VK_ESCAPE</code> (0x1B)</td>
+   <td><code>kVK_Escape</code> (0x35)</td>
+   <td><code>GDK_KEY_Escape</code> (0xFF1B)<br>
+    <code>Qt::Key_Escape</code> (0x01000000)</td>
+   <td><code>KEYCODE_ESCAPE</code> (111)</td>
+  </tr>
+  <tr>
+   <td><code>"Execute"</code></td>
+   <td>The <kbd>Execute</kbd> key.</td>
+   <td><code>VK_EXECUTE</code> (0x2B)</td>
+   <td></td>
+   <td><code>Qt::Key_Execute</code> (0x01020003)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Find"</code></td>
+   <td>The <kbd>Find</kbd> key. Opens an interface (typically a dialog box) for performing a find/search operation.</td>
+   <td><code>APPCOMMAND_FIND</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Find</code> (0xFF68)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Finish"</code> [5]</td>
+   <td>The <kbd>Finish</kbd> key.</td>
+   <td><code>VK_OEM_FINISH</code> (0xF1)</td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Help"</code></td>
+   <td>The <kbd>Help</kbd> key. Opens or toggles the display of help information.</td>
+   <td><code>VK_HELP</code> (0x2F)<br>
+    <code>APPCOMMAND_HELP</code></td>
+   <td><code>kVK_Help</code> (0x72)</td>
+   <td><code>GDK_KEY_Help</code> (0xFF6A)<br>
+    <code>Qt::Key_Help</code> (0x01000058)</td>
+   <td><code>KEYCODE_HELP</code> (259)</td>
+  </tr>
+  <tr>
+   <td><code>"Pause"</code></td>
+   <td>The <kbd>Pause</kbd> key. Pauses the current application or state, if applicable.
+    <div class="note">This shouldn't be confused with the <code>"MediaPause"</code> key value, which is used for media controllers, rather than to control applications and processes.</div>
+   </td>
+   <td><code>VK_PAUSE</code> (0x13)</td>
+   <td></td>
+   <td><code>GDK_KEY_Pause</code> (0xFF13)<br>
+    <code>GDK_KEY_Break</code> (0xFF6B)<br>
+    <code>Qt::Key_Pause</code> (0x01000008)</td>
+   <td><code>KEYCODE_BREAK</code> (121)</td>
+  </tr>
+  <tr>
+   <td><code>"Play"</code></td>
+   <td>The <kbd>Play</kbd> key. Resumes a previously paused application, if applicable.
+    <div class="note">This shouldn't be confused with the <code>"MediaPlay"</code> key value, which is used for media controllers, rather than to control applications and processes.</div>
+   </td>
+   <td><code>VK_PLAY</code> (0xFA)</td>
+   <td></td>
+   <td><code>GDK_KEY_3270_Play</code> (0xFD16)<br>
+    <code>Qt::Key_Play</code> (0x01020005)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Props"</code></td>
+   <td>The <kbd>Props</kbd> (Properties) key.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Select"</code></td>
+   <td>The <kbd>Select</kbd> key.</td>
+   <td><code>VK_SELECT</code> (0x29)</td>
+   <td></td>
+   <td><code>GDK_KEY_Select</code> (0xFF60)</td>
+   <td><code>KEYCODE_BUTTON_SELECT</code> (109)</td>
+  </tr>
+  <tr>
+   <td><code>"ZoomIn"</code> [6]</td>
+   <td>The <kbd>ZoomIn</kbd> key.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_ZoomIn</code> (0x1008FF8B)<br>
+    <code>Qt::Key_ZoomIn</code> (0x010000F6)</td>
+   <td><code>KEYCODE_ZOOM_IN</code> (168)</td>
+  </tr>
+  <tr>
+   <td><code>"ZoomOut"</code> [6]</td>
+   <td>The <kbd>ZoomOut</kbd> key.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_ZoomOut</code> (0x1008FF8C)<br>
+    <code>Qt::Key_ZoomOut</code> (0x010000F7)</td>
+   <td><code>KEYCODE_ZOOM_OUT</code> (169)</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>[1] In Google Chrome 52, the <kbd>Cancel</kbd> key incorrectly returns the key code <code>"Pause"</code>. This is fixed in Chrome 53. See <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=612749">Chrome bug 612749</a> for details.</p>
+
+<p>[2] In Internet Explorer (tested on release 9 and 11) and Firefox 36 and earlier, the <kbd>Esc</kbd> key returns <code>"Esc"</code> instead of <code>"Escape"</code>.</p>
+
+<p>[3] Internet Explorer (tested on release 9 and 11) and Firefox 36 and earlier report <code>"Apps"</code> instead of <code>"ContextMenu"</code> for the context menu key.</p>
+
+<p>[4] The <kbd>Attn</kbd> key generates the key code <code>"Unidentified"</code> on Internet Explorer (tested on release 9 and 11). Firefox and Google Chrome report the same, unless the Japanese keyboard layout is in effect, in which case it generates <code>"KanaMode"</code> instead.</p>
+
+<p>[5] The <kbd>Finish</kbd> key gemerates the key code <code>"Unidentified"</code> on Internet Explorer (tested on release 9 and 11). Firefox reports the same, unless the Japanese keyboard layout is in effect, in which case it generates <code>"Katakana"</code> instead.</p>
+
+<p>[6] Firefox didn't support the <code>"ZoomIn"</code> and <code>"ZoomOut"</code> keys until Firefox 37.</p>
+
+<h2 id="Device_keys">Device keys</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;"><code>KeyboardEvent.key</code> Value</th>
+   <th rowspan="2" scope="col" style="text-align: left;">Description</th>
+   <th colspan="4" scope="col" style="text-align: center;">Virtual Keycode</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"BrightnessDown"</code></td>
+   <td>The Brightness Down key. Typically used to reduce the brightness of the display.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_MonBrightnessDown</code> (0x1008FF03)<br>
+    <code>Qt::Key_MonBrightnessDown</code> (0x010000B3)</td>
+   <td><code>KEYCODE_BRIGHTNESS_DOWN</code> (220)</td>
+  </tr>
+  <tr>
+   <td><code>"BrightnessUp"</code></td>
+   <td>The Brightness Up key. Typically increases the brightness of the display.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_MonBrightnessUp</code> (0x1008FF02)<br>
+    <code>Qt::Key_MonBrightnessUp</code> (0x010000B2)</td>
+   <td><code>KEYCODE_BRIGHTNESS_UP</code> (221)</td>
+  </tr>
+  <tr>
+   <td><code>"Eject"</code></td>
+   <td>The <kbd>Eject</kbd> key. Ejects removable media (or toggles an optical storage device tray open and closed).</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Eject</code> (0x1008FF2C)<br>
+    <code>Qt::Key_Eject</code> (0x010000B9)</td>
+   <td><code>KEYCODE_MEDIA_EJECT</code> (129)</td>
+  </tr>
+  <tr>
+   <td><code>"LogOff"</code> [2]</td>
+   <td>The <kbd>LogOff</kbd> key.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_LogOff</code> (0x1008FF61)<br>
+    <code>Qt::Key_LogOff</code> (0x010000D9)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Power"</code></td>
+   <td>The <kbd>Power</kbd> button or key, to toggle power on and off.
+    <div class="note">Not all systems pass this key through to to the user agent.</div>
+   </td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_POWER</code> (26)</td>
+  </tr>
+  <tr>
+   <td><code>"PowerOff"</code></td>
+   <td>The <kbd>PowerOff</kbd> or <kbd>PowerDown</kbd> key. Shuts off the system.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_PowerDown</code> (0x1008FF21)<br>
+    <code>GDK_KEY_PowerOff</code> (0x1008FF2A)<br>
+    <code>Qt::Key_PowerDown</code> (0x0100010B)<br>
+    <code>Qt::Key_PowerOff</code> (0x010000B7)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"PrintScreen"</code></td>
+   <td>The <kbd>PrintScreen</kbd> or <kbd>PrtScr</kbd> key. Sometimes <kbd>SnapShot</kbd>. Captures the screen and prints it or saves it to disk.</td>
+   <td><code>VK_SNAPSHOT</code> (0x2C)</td>
+   <td></td>
+   <td><code>GDK_KEY_3270_PrintScreen</code> (0xFD1D)<br>
+    <code>GDK_KEY_Print</code> (0xFF61)<br>
+    <code>GDK_KEY_Sys_Req</code> (0xFF15)<br>
+    <code>Qt::Key_Print</code> (0x01000009)<br>
+    <code>Qt::Key_SysReq</code> (0x0100000A)</td>
+   <td><code>KEYCODE_SYSRQ</code> (120)</td>
+  </tr>
+  <tr>
+   <td><code>"Hibernate"</code> [2]</td>
+   <td>The <kbd>Hibernate</kbd> key. This saves the state of the computer to disk and then shuts down; the computer can be returned to its previous state by restoring the saved state information.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Hibernate</code> (0x1008FFA8)<br>
+    <code>Qt::Key_Hibernate</code> (0x01000108)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Standby"</code> [1]</td>
+   <td>The <kbd>Standby</kbd> key; also known as <kbd>Suspend</kbd> or <kbd>Sleep</kbd>. This turns off the display and puts the computer in a low power consumption mode, without completely powering off.</td>
+   <td><code>VK_SLEEP</code> (0x5F)</td>
+   <td></td>
+   <td><code>GDK_KEY_Standby</code> (0x1008FF10)<br>
+    <code>GDK_KEY_Suspend</code> (0x1008FFA7)<br>
+    <code>GDK_KEY_Sleep</code> (0x1008FF2F)<br>
+    <code>Qt::Key_Standby</code> (0x01000093)<br>
+    <code>Qt::Key_Suspend</code> (0x0100010C)<br>
+    <code>Qt::Key_Sleep</code> (0x01020004)</td>
+   <td><code>KEYCODE_SLEEP</code> (223)</td>
+  </tr>
+  <tr>
+   <td><code>"WakeUp"</code> [2]</td>
+   <td>The <kbd>WakeUp</kbd> key; used to wake the computer from the hibernation or standby modes.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_WakeUp</code> (0x1008FF2B)<br>
+    <code>Qt::Key_WakeUp</code> (0x010000B8)</td>
+   <td><code>KEYCODE_WAKEUP</code> (224)</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>[1] The <kbd>Standby</kbd> key is not supported by Internet Explorer (tested on release 9 and 11) and Firefox 36 and earlier, so it is reported as <code>"Unidentified"</code>.</p>
+
+<p>[2] Prior to Firefox 37, this key generated the value <code>"Unidentified"</code>.</p>
+
+<h2 id="IME_and_composition_keys">IME and composition keys</h2>
+
+<p>Keys used when using an Input Method Editor (IME) to input text which can't readily be entered by simple keypresses, such as text in languages such as those which have more graphemes than there are character entry keys on the keyboard; common examples include Chinese, Japanese, Korean, and Hindi.</p>
+
+<p>Some keys are common across multiple languages, while others exist only on keyboards targeting specific languages. In addition, not all keyboards have all of these keys.</p>
+
+<h4 id="Common_IME_keys">Common IME keys</h4>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;"><code>KeyboardEvent.key</code> Value</th>
+   <th rowspan="2" scope="col" style="text-align: left;">Description</th>
+   <th colspan="4" scope="col" style="text-align: center;">Virtual Keycode</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"AllCandidates"</code></td>
+   <td>The <kbd>All Candidates</kbd> key, which starts multi-candidate mode, in which multiple candidates are displayed for the ongoing input.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_MultipleCandidate</code> (0xFF3D<br>
+    <code>Qt::Key_MultipleCandidate</code> (0x0100113D)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Alphanumeric"</code></td>
+   <td>The <kbd>Alphanumeric</kbd> key.</td>
+   <td><code>VK_OEM_ATTN</code> (0xF0)</td>
+   <td></td>
+   <td><code>GDK_KEY_Eisu_Shift</code> (0xFF2F)<br>
+    <code>GDK_KEY_Eisu_toggle</code> (0xFF30)<br>
+    <code>Qt::Key_Eisu_Shift</code> (0x0100112f)<br>
+    <code>Qt::Key_Eisu_toggle</code> (0x01001130)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"CodeInput"</code></td>
+   <td>The <kbd>Code Input</kbd> key, which enables code input mode, which lets the user enter characters by typing their code points (their Unicode character numbers, typically).</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Codeinput</code> (0xFF37)<br>
+    <code>Qt::Key_Codeinput</code> (0x01001137)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Compose"</code></td>
+   <td>The <kbd>Compose</kbd> key.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Multi_key</code> (0xFF20) [1]<br>
+    <code>Qt::Key_Multi_key</code> (0x01001120)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Convert"</code> [4]</td>
+   <td>The <kbd>Convert</kbd> key, which instructs the IME to convert the current input method sequence into the resulting character.</td>
+   <td><code>VK_CONVERT</code> (0x1C)</td>
+   <td></td>
+   <td><code>GDK_KEY_Henkan</code> (0xFF23)<br>
+    <code>Qt::Key_Henkan</code> (0x01001123)</td>
+   <td><code>KEYCODE_HENKAN</code> (214)</td>
+  </tr>
+  <tr>
+   <td><code>"Dead"</code></td>
+   <td>A dead "combining" key; that is, a key which is used in tandem with other keys to generate accented and other modified characters. If pressed by itself, it doesn't generate a character. If you wish to identify which specific dead key was pressed (in cases where more than one exists), you can do so by examining the {{domxref("KeyboardEvent")}}'s associated {{event("compositionupdate")}} event's  {{domxref("CompositionEvent.data", "data")}} property.</td>
+   <td></td>
+   <td></td>
+   <td>See {{anch("Dead keycodes for Linux")}} below</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"FinalMode"</code></td>
+   <td>The <kbd>Final</kbd> (Final Mode) key is used on some Asian keyboards to enter final mode when using IMEs.</td>
+   <td><code>VK_FINAL</code> (0x18)</td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"GroupFirst"</code></td>
+   <td>Switches to the first character group on an <a href="https://en.wikipedia.org/wiki/ISO/IEC_9995">ISO/IEC 9995 keyboard</a>. Each key may have multiple groups of characters, each in its own column. Pressing this key instructs the device to interpret keypresses as coming from the first column on subsequent keystrokes.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_ISO_First_Group</code> (0xFE0C)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"GroupLast"</code></td>
+   <td>Switches to the last character group on an <a href="https://en.wikipedia.org/wiki/ISO/IEC_9995">ISO/IEC 9995 keyboard</a>.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_ISO_Last_Group</code> (0xFE0E)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"GroupNext"</code> [4]</td>
+   <td>Switches to the next character group on an <a href="https://en.wikipedia.org/wiki/ISO/IEC_9995">ISO/IEC 9995 keyboard</a>.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_ISO_Next_Group</code> (0xFE08)</td>
+   <td><code>KEYCODE_LANGUAGE_SWITCH</code> (204)</td>
+  </tr>
+  <tr>
+   <td><code>"GroupPrevious"</code></td>
+   <td>Switches to the previous character group on an <a href="https://en.wikipedia.org/wiki/ISO/IEC_9995">ISO/IEC 9995 keyboard</a>.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_ISO_Prev_Group</code> (0xFE0A)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"ModeChange"</code> [5]</td>
+   <td>The Mode Change key. Toggles or cycles among input modes of IMEs.</td>
+   <td><code>VK_MODECHANGE</code> (0x1F)</td>
+   <td></td>
+   <td><code>GDK_KEY_Mode_switch</code> (0xFF7E)<br>
+    <code>GDK_KEY_script_switch</code> (0xFF7E)<br>
+    <code>Qt::Key_Mode_switch</code> (0x0100117E)</td>
+   <td><code>KEYCODE_SWITCH_CHARSET</code> (95)</td>
+  </tr>
+  <tr>
+   <td><code>"NextCandidate"</code></td>
+   <td>The Next Candidate function key. Selects the next possible match for the ongoing input.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"NonConvert"</code> [2]</td>
+   <td>The <kbd>NonConvert</kbd> ("Don't convert") key. This accepts the current input method sequence without running conversion when using an IME.</td>
+   <td><code>VK_NONCONVERT</code> (0x1D)</td>
+   <td></td>
+   <td><code>GDK_KEY_Muhenkan</code> (0xFF22)<br>
+    <code>Qt::Key_Muhenkan</code> (0x01001122)<br>
+     </td>
+   <td><code>KEYCODE_MUHENKAN</code> (213)</td>
+  </tr>
+  <tr>
+   <td><code>"PreviousCandidate"</code></td>
+   <td>The Previous Candidate key. Selects the previous possible match for the ongoing input.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_PreviousCandidate</code> (0xFF3E)<br>
+    <code>Qt::Key_PreviousCandidate</code> (0x0100113E)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Process"</code> [3]</td>
+   <td>The <kbd>Process</kbd> key. Instructs the IME to process the conversion.</td>
+   <td><code>VK_PROCESSKEY</code> (0xE5)</td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"SingleCandidate"</code> [4]</td>
+   <td>The Single Candidate key. Enables single candidate mode (as opposed to multi-candidate mode); in this mode, only one candidate is displayed at a time.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_SingleCandidate</code> (0xFF3C)<br>
+    <code>Qt::Key_SingleCandidate</code> (0x0100113C)</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>[1] On the <em>X Window System</em>, the <kbd>Compose</kbd> key is called the <kbd>Multi</kbd> key.</p>
+
+<p>[2] The <kbd>NonConvert</kbd> key is reported as <code>"Nonconvert"</code> instead of the correct <code>"NonConvert"</code> by Internet Explorer (tested on release 9 and 11) and Firefox versions 36 and earlier.</p>
+
+<p>[3] The <kbd>Process</kbd> key currently returns <code>"Unidentified"</code> in Firefox and Internet Explorer. Google Chrome returns the value of the key as if IME were not in use.</p>
+
+<p>[4] Prior to Firefox 37, these keys were <code>"Unidentified"</code>.</p>
+
+<p>[5] Firefox generates the key value <code>"AltGraph"</code> instead of <code>"ModeChange"</code>.</p>
+
+<h3 id="Korean_keyboards_only">Korean keyboards only</h3>
+
+<p>These keys are only available on Korean keyboards. There are other keys defined by various platforms for Korean keyboards, but these are the most common and are the ones identified by the UI Events specification.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;"><code>KeyboardEvent.key</code> Value</th>
+   <th rowspan="2" scope="col" style="text-align: left;">Description</th>
+   <th colspan="4" scope="col" style="text-align: center;">Virtual Keycode</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+  <tr>
+   <td><code>"HangulMode"</code></td>
+   <td>The <kbd>Hangul</kbd> (Korean character set) mode key, which toggles between Hangul and English entry modes.</td>
+   <td><code>VK_HANGUL</code> (0x15) [1]</td>
+   <td></td>
+   <td><code>GDK_KEY_Hangul</code> (0xFF31)<br>
+    <code>Qt::Key_Hangul</code> (0x01001131)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"HanjaMode"</code></td>
+   <td>Selects the Hanja mode, for converting Hangul characters to the more specific Hanja characters.</td>
+   <td><code>VK_HANJA</code> (0x19) [1]</td>
+   <td></td>
+   <td><code>GDK_KEY_Hangul_Hanja</code> (0xFF34)<br>
+    <code>Qt::Key_Hangul_Hanja</code> (0x01001134)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"JunjaMode"</code></td>
+   <td>Selects the Junja mode, in which Korean is represented using single-byte Latin characters.</td>
+   <td><code>VK_JUNJA</code> (0x17)</td>
+   <td></td>
+   <td><code>GDK_KEY_Hangul_Jeonja</code> (0xFF38)<br>
+    <code>Qt::Key_Hangul_Jeonja</code> (0x01001138)</td>
+   <td></td>
+  </tr>
+ </thead>
+</table>
+
+<p>[1] <code>VK_HANGUL</code> and <code>VK_KANA</code> share the same numeric key value on Windows, as do <code>VK_HANJA</code> and <code>VK_KANJI</code>.</p>
+
+<h3 id="Japanese_keyboards_only">Japanese keyboards only</h3>
+
+<p>These keys are only available on Japanese keyboards.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;"><code>KeyboardEvent.key</code> Value</th>
+   <th rowspan="2" scope="col" style="text-align: left;">Description</th>
+   <th colspan="4" scope="col" style="text-align: center;">Virtual Keycode</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+  <tr>
+   <td><code>"Eisu"</code> [1]</td>
+   <td>The <kbd>Eisu</kbd> key. This key's purpose is defined by the IME, but may be used to close the IME.</td>
+   <td></td>
+   <td><code>kVK_JIS_Eisu</code> (0x66)</td>
+   <td><code>GDK_KEY_Eisu_toggle</code> (0xFF2F)<br>
+    <code>Qt::Key_Eisu_toggle</code> (0x01001130)</td>
+   <td><code>KEYCODE_EISU</code> (212)</td>
+  </tr>
+  <tr>
+   <td><code>"Hankaku"</code> [3]</td>
+   <td>The <kbd>Hankaku</kbd> (half-width characters) key.</td>
+   <td><code>VK_OEM_AUTO</code> (0xF3)</td>
+   <td></td>
+   <td><code>GDK_KEY_Hankaku</code> (0xFF29)<br>
+    <code>Qt::Key_Hankaku</code> (0x01001129)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Hiragana"</code></td>
+   <td>The <kbd>Hiragana</kbd> key; selects Kana characters mode.</td>
+   <td><code>VK_OEM_COPY</code> (0xF2)</td>
+   <td></td>
+   <td><code>GDK_KEY_Hiragana</code> (0xFF25)<br>
+    <code>Qt::Key_Hiragana</code> (0x01001125)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"HiraganaKatakana"</code> [6]</td>
+   <td>Toggles between the Hiragana and Katakana writing systems.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Hiragana_Katakana</code> (0xFF27)<br>
+    <code>Qt::Key_Hiragana_Katakana</code> (0x01001127)</td>
+   <td><code>KEYCODE_KATAKANA_HIRAGANA</code> (215)</td>
+  </tr>
+  <tr>
+   <td><code>"KanaMode"</code></td>
+   <td>The <kbd>Kana Mode</kbd> (Kana Lock) key.</td>
+   <td><code>VK_KANA</code> (0x15) [2]<br>
+    <code>VK_ATTN</code> (0xF6)</td>
+   <td></td>
+   <td><code>GDK_KEY_Kana_Lock</code> (0xFF2D)<br>
+    <code>GDK_KEY_Kana_Shift</code> (0xFF2E)<br>
+    <code>Qt::Key_Kana_Lock</code> (0x0100112D)<br>
+    <code>Qt::Key_Kana_Shift</code> (0x0100112E)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"KanjiMode"</code></td>
+   <td>The <kbd>Kanji Mode</kbd> key. Enables entering Japanese text using the ideographic characters of Chinese origin.</td>
+   <td><code>VK_KANJI</code> [2]</td>
+   <td><code>kVK_JIS_Kana</code> (0x68)</td>
+   <td><code>GDK_KEY_Kanji</code> (0xFF21)<br>
+    <code>Qt::Key_Kanji</code> (0x01001121)</td>
+   <td><code>KEYCODE_KANA</code> (218)</td>
+  </tr>
+  <tr>
+   <td><code>"Katakana"</code></td>
+   <td>The <kbd>Katakana</kbd> key.</td>
+   <td><code>VK_OEM_FINISH</code> (0xF1)</td>
+   <td></td>
+   <td><code>GDK_KEY_Katakana</code> (0xFF26)<br>
+    <code>Qt::Key_Katakana</code> (0x01001126)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Romaji"</code> [5]</td>
+   <td>The <kbd>Romaji</kbd> key; selects the Roman character set.</td>
+   <td><code>VK_OEM_BACKTAB</code> (0xF5)</td>
+   <td></td>
+   <td><code>GDK_KEY_Romaji</code> (0xFF24)<br>
+    <code>Qt::Key_Romaji</code> (0x01001124)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Zenkaku"</code> [4]</td>
+   <td>The <kbd>Zenkaku</kbd> (full width) characters key.</td>
+   <td><code>VK_OEM_ENLW</code> (0xF4)</td>
+   <td></td>
+   <td><code>GDK_KEY_Zenkaku</code> (0xFF28)<br>
+    <code>Qt::Key_Zenkaku</code> (0x01001128)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"ZenkakuHanaku"</code> [6]</td>
+   <td>The <kbd>Zenkaku/Hankaku</kbd> (full width/half width) toggle key.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Zenkaku_Hankaku</code> (0xFF2A)<br>
+    <code>Qt::Zenkaku_Hankaku</code> (0x0100112A)</td>
+   <td>
+    <p><code>KEYCODE_ZENKAKU_HANKAKU</code> (211)</p>
+   </td>
+  </tr>
+ </thead>
+</table>
+
+<p>[1] Prior to Firefox 37, the <kbd>Eisu</kbd> key was mapped to <code>"RomanCharacters"</code> by mistake.</p>
+
+<p>[2] <code>VK_HANGUL</code> and <code>VK_KANA</code> share the same numeric key value on Windows, as do <code>VK_HANJA</code> and <code>VK_KANJI</code>.</p>
+
+<p>[3] Prior to Firefox 37, the <kbd>Hankaku</kbd> (half-width) key generated the key value <code>"HalfWidth"</code> on Firefox. Also, this key generates the value <code>"Unidentified"</code> on Internet Explorer (tested on release 9 and 11).</p>
+
+<p>[4] Internet Explorer (tested on release 9 and 11) reports <code>"Unidentified"</code> for the <kbd>Zenkaku</kbd> key; Firefox 36 and earlier identify this key as <code>"FullWidth"</code> on Japanese keyboard layouts and <code>"Unidentified"</code> on all other keyboard layouts. Firefox 37 and later, and all versions of Google Chrome, correctly return <code>"Zenkaku"</code>.</p>
+
+<p>[5] <code>"Unidentified"</code> in Internet Explorer (tested on release 9 and 11). Firefox 36 and earlier identify the <kbd>Romaji</kbd> key as <code>"RomanCharacters"</code> on Japanese keyboards and <code>"Unidentified"</code> for other keyboards; this is corrected to return <code>"Romaji"</code> in Firefox 37 and later.</p>
+
+<p>[6] This key is reported as <code>"Unidentified"</code> prior to Firefox 37.</p>
+
+<h3 id="Dead_keycodes_for_Linux">Dead keycodes for Linux</h3>
+
+<p>Linux generates accented characters using special <strong>dead keys</strong>; these are keys which are pressed in combination with character keys to generate accented forms of those characters. You can identify which specific dead key was used (if more than one exists) by examining the  {{domxref("KeyboardEvent")}}'s associated {{event("compositionupdate")}} event's  {{domxref("CompositionEvent.data", "data")}} property.</p>
+
+<p>You can find a table of the dead keys and the characters they can be used with to generate accented or otherwise special characters on Linux using GTK</p>
+
+<p>The value of {{domxref("CompositionEvent.data", "data")}} will be one of the following:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><strong><code>CompositionEvent.data</code></strong> value</td>
+   <td>Symbol</td>
+   <td>Comments</td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_grave</code> (0xFE50)<br>
+    <code>Qt::Key_Dead_Grave</code> (0x01001250)</td>
+   <td>`</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_acute</code> (0xFE51)<br>
+    <code>Qt::Key_Dead_Acute</code> (0x01001251)</td>
+   <td>´</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_circumflex</code> (0xFE52)<br>
+    <code>Qt::Key_Dead_Circumflex</code> (0x01001252)</td>
+   <td>ˆ</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_tilde</code> (0xFE53)<br>
+    <code>Qt::Key_Dead_Tilde</code> (0x01001253)</td>
+   <td>˜</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_perispomeni</code> (0xFE53)</td>
+   <td> ͂</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_macron</code> (0xFE54)<br>
+    <code>Qt::Key_Dead_Macron</code> (0x01001254)</td>
+   <td>¯</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_breve</code> (0xFE55)<br>
+    <code>Qt::Key_Dead_Breve</code> (0x01001255)</td>
+   <td>˘</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_abovedot</code> (0xFE56)<br>
+    <code>Qt::Key_Dead_Abovedot</code> (0x01001256)</td>
+   <td>˙</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_diaeresis</code> (0xFE57)<br>
+    <code>Qt::Key_Dead_Diaeresis</code> (0x01001257)</td>
+   <td>¨</td>
+   <td>Also called an umlaut.</td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_abovering</code> (0xFE58)<br>
+    <code>Qt::Key_Dead_Abovering</code> (0x01001258)</td>
+   <td>˚</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_doubleacute</code> (0xFE59)<br>
+    <code>Qt::Key_Dead_Doubleacute</code> (0x01001259)</td>
+   <td>˝</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_caron</code> (0xFE5A)<br>
+    <code>Qt::Key_Dead_Caron</code> (0x0100125A)</td>
+   <td>ˇ</td>
+   <td>Also called a háček; used in Czech among other languages.</td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_cedilla</code> (0xFE5B)<br>
+    <code>Qt::Key_Dead_Cedilla</code> (0x0100125B)</td>
+   <td>¸</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_ogonek</code> (0xFE5C)<br>
+    <code>Qt::Key_Dead_Ogonek</code> (0x0100125C)</td>
+   <td>˛</td>
+   <td>Also called a nosinė; used in Polish and Old Irish.</td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_iota</code> (0xFE5D)<br>
+    <code>Qt::Key_Dead_Iota</code> (0x0100125D)</td>
+   <td> ͅ</td>
+   <td>Iota subscript.</td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_voiced_sound</code> (0xFE5E)<br>
+    <code>Qt::Key_Dead_Voiced_Sound</code> (0x0100125E)</td>
+   <td>゙</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_semivoiced_sound</code> (0xFE5F)<br>
+    <code>Qt::Key_Dead_Semivoiced_Sound</code> (0x0100125F)</td>
+   <td>゚</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_belowdot</code> (0xFE60)<br>
+    <code>Qt::Key_Dead_Belowdot</code> (0x01001260)</td>
+   <td>̣̣</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_hook</code> (0xFE61)<br>
+    <code>Qt::Key_Dead_Hook</code> (0x01001261)</td>
+   <td>  ̡</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_horn</code> (0xFE62)<br>
+    <code>Qt::Key_Dead_Horn</code> (0x01001262)</td>
+   <td> ̛</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_stroke</code> (0xFE63)</td>
+   <td> ̶̶</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_abovecomma</code> (0xFE64)</td>
+   <td> ̓̓</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_psili</code> (0xFE64)</td>
+   <td> ᾿</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_abovereversedcomma</code> (0xFE65)</td>
+   <td>ʽ</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_dasia</code> (0xFE65)</td>
+   <td>῾</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_doublegrave</code> (0xFE66)</td>
+   <td> ̏</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_belowring</code> (0xFE67)</td>
+   <td>˳</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_belowmacron</code> (0xFE68)</td>
+   <td> ̱</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_belowcircumflex</code> (0xFE69)</td>
+   <td>ꞈ</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_belowtilde</code> (0xFE6A)</td>
+   <td>̰</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_belowbreve</code> (0xFE6B)</td>
+   <td>̮</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_belowdiaeresis</code> (0xFE6C)</td>
+   <td> ̤</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_invertedbreve</code> (0xFE6D)</td>
+   <td>̯</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_belowcomma</code> (0xFE6E)</td>
+   <td>̦</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_currency</code> (0xFE6F)</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_a</code> (0xFE80)</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_A</code> (0xFE81)</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_e</code> (0xFE82)</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_E</code> (0xFE83)</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_i</code> (0xFE84)</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_I</code> (0xFE85)</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_o</code> (0xFE86)</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_O</code> (0xFE87)</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_u</code> (0xFE88)</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_U</code> (0xFE89)</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_small_schwa</code> (0xFE8A)</td>
+   <td>ə</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_capital_schwa</code> (0xFE8B)</td>
+   <td>Ə</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_greek</code> (0xFE8C)</td>
+   <td></td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Function_keys">Function keys</h2>
+
+<p>While various platforms support different numbers of the general-purpose function keys, such as <kbd>F1</kbd>-<kbd>F12</kbd> (or <kbd>F1</kbd>-<kbd>F10</kbd>, or <kbd>F1</kbd>-<kbd>F15</kbd>, or...), the first few are specifically defined as follows. If more function keys are available, their names continue the pattern here by continuing to increment the numeric portion of each key's name, so that, for example, <code>"F24"</code> is a valid key value.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;"><code>KeyboardEvent.key</code> value</th>
+   <th rowspan="2" scope="col" style="text-align: left;">Description</th>
+   <th colspan="4" scope="col" style="text-align: center;">Virtual Keycode</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+  <tr>
+   <td><code>"F1"</code></td>
+   <td>The first general-purpose function key, <kbd>F1</kbd>.</td>
+   <td><code>VK_F1</code> (0x70)</td>
+   <td><code>kVK_F1</code> (0x7A)</td>
+   <td><code>GDK_KEY_F1</code> (0xFFBE)<br>
+    <code>GDK_KEY_KP_F1</code> (0xFF91)<br>
+    <code>Qt::Key_F1</code> (0x01000030)</td>
+   <td><code>KEYCODE_F1</code> (131)</td>
+  </tr>
+  <tr>
+   <td><code>"F2"</code></td>
+   <td>The <kbd>F2</kbd> key.</td>
+   <td><code>VK_F2</code> (0x71)</td>
+   <td><code>kVK_F2</code> (0x78)</td>
+   <td><code>GDK_KEY_F2</code> (0xFFBF)<br>
+    <code>GDK_KEY_KP_F2</code> (0xFF92)<br>
+    <code>Qt::Key_F2</code> (0x01000031)</td>
+   <td><code>KEYCODE_F2</code> (132)</td>
+  </tr>
+  <tr>
+   <td><code>"F3"</code></td>
+   <td>The <kbd>F3</kbd> key.</td>
+   <td><code>VK_F3</code> (0x72)</td>
+   <td><code>kVK_F3</code> (0x63)</td>
+   <td><code>GDK_KEY_F3</code> (0xFFC0)<br>
+    <code>GDK_KEY_KP_F3</code> (0xFF93)<br>
+    <code>Qt::Key_F3</code> (0x01000032)</td>
+   <td><code>KEYCODE_F3</code> (133)</td>
+  </tr>
+  <tr>
+   <td><code>"F4"</code></td>
+   <td>The <kbd>F4</kbd> key.</td>
+   <td><code>VK_F4</code> (0x73)</td>
+   <td><code>kVK_F4</code> (0x76)</td>
+   <td><code>GDK_KEY_F4</code> (0xFFC1)<br>
+    <code>GDK_KEY_KP_F4</code> (0xFF94)<br>
+    <code>Qt::Key_F4</code> (0x01000033)</td>
+   <td><code>KEYCODE_F4</code> (134)</td>
+  </tr>
+  <tr>
+   <td><code>"F5"</code></td>
+   <td>The <kbd>F5</kbd> key.</td>
+   <td><code>VK_F5</code> (0x74)</td>
+   <td><code>kVK_F5</code> (0x60)</td>
+   <td><code>GDK_KEY_F5</code> (0xFFC2)<br>
+    <code>Qt::Key_F5</code> (0x01000034)</td>
+   <td><code>KEYCODE_F5</code> (135)</td>
+  </tr>
+  <tr>
+   <td><code>"F6"</code></td>
+   <td>The <kbd>F6</kbd> key.</td>
+   <td><code>VK_F6</code> (0x75)</td>
+   <td><code>kVK_F6</code> (0x61)</td>
+   <td><code>GDK_KEY_F6</code> (0xFFC3)<br>
+    <code>Qt::Key_F6</code> (0x01000035)</td>
+   <td><code>KEYCODE_F6</code> (136)</td>
+  </tr>
+  <tr>
+   <td><code>"F7"</code></td>
+   <td>The <kbd>F7</kbd> key.</td>
+   <td><code>VK_F7</code> (0x76)</td>
+   <td><code>kVK_F7</code> (0x62)</td>
+   <td><code>GDK_KEY_F7</code> (0xFFC4)<br>
+    <code>Qt::Key_F7</code> (0x01000036)</td>
+   <td><code>KEYCODE_F7</code> (137)</td>
+  </tr>
+  <tr>
+   <td><code>"F8"</code></td>
+   <td>The <kbd>F8</kbd> key.</td>
+   <td><code>VK_F8</code> (0x77)</td>
+   <td><code>kVK_F8</code> (0x64)</td>
+   <td><code>GDK_KEY_F8</code> (0xFFC5)<br>
+    <code>Qt::Key_F8</code> (0x01000037)</td>
+   <td><code>KEYCODE_F8</code> (138)</td>
+  </tr>
+  <tr>
+   <td><code>"F9"</code></td>
+   <td>The <kbd>F9</kbd> key.</td>
+   <td><code>VK_F9</code> (0x78)</td>
+   <td><code>kVK_F9</code> (0x65)</td>
+   <td><code>GDK_KEY_F9</code> (0xFFC6)<br>
+    <code>Qt::Key_F9</code> (0x01000038)</td>
+   <td><code>KEYCODE_F9</code> (139)</td>
+  </tr>
+  <tr>
+   <td><code>"F10"</code></td>
+   <td>The <kbd>F10</kbd> key.</td>
+   <td><code>VK_F10</code> (0x79)</td>
+   <td><code>kVK_F10</code> (0x6D)</td>
+   <td><code>GDK_KEY_F10</code> (0xFFC7)<br>
+    <code>Qt::Key_F10</code> (0x01000039)</td>
+   <td><code>KEYCODE_F10</code> (140)</td>
+  </tr>
+  <tr>
+   <td><code>"F11"</code></td>
+   <td>The <kbd>F11</kbd> key.</td>
+   <td><code>VK_F11</code> (0x7A)</td>
+   <td><code>kVK_F11</code> (0x67)</td>
+   <td><code>GDK_KEY_F11</code> (0xFFC8)<br>
+    <code>Qt::Key_F11</code> (0x0100003A)</td>
+   <td><code>KEYCODE_F11</code> (141)</td>
+  </tr>
+  <tr>
+   <td><code>"F12"</code></td>
+   <td>The <kbd>F12</kbd> key.</td>
+   <td><code>VK_F12</code> (0x7B)</td>
+   <td><code>kVK_F12</code> (0x6F)</td>
+   <td><code>GDK_KEY_F12</code> (0xFFC9)<br>
+    <code>Qt::Key_F12</code> (0x0100003B)</td>
+   <td><code>KEYCODE_F12</code> (142)</td>
+  </tr>
+  <tr>
+   <td><code>"F13"</code></td>
+   <td>The <kbd>F13</kbd> key.</td>
+   <td><code>VK_F13</code> (0x7C)</td>
+   <td><code>kVK_F13</code> (0x69)</td>
+   <td><code>GDK_KEY_F13</code> (0xFFCA)<br>
+    <code>Qt::Key_F13</code> (0x0100003C)</td>
+   <td><code>KEYCODE_F13</code></td>
+  </tr>
+  <tr>
+   <td><code>"F14"</code></td>
+   <td>The <kbd>F14</kbd> key.</td>
+   <td><code>VK_F14</code> (0x7D)</td>
+   <td><code>kVK_F14</code> (0x6B)</td>
+   <td><code>GDK_KEY_F14</code> (0xFFCB)<br>
+    <code>Qt::Key_F1</code>4 (0x0100003D)</td>
+   <td><code>KEYCODE_F14</code></td>
+  </tr>
+  <tr>
+   <td><code>"F15"</code></td>
+   <td>The <kbd>F15</kbd> key.</td>
+   <td><code>VK_F15</code> (0x7E)</td>
+   <td><code>kVK_F15</code> (0x71)</td>
+   <td><code>GDK_KEY_F15</code> (0xFFCC)<br>
+    <code>Qt::Key_F1</code>5 (0x0100003E)</td>
+   <td><code>KEYCODE_F15</code></td>
+  </tr>
+  <tr>
+   <td><code>"F16"</code></td>
+   <td>The <kbd>F16</kbd> key.</td>
+   <td><code>VK_F16</code> (0x7F)</td>
+   <td><code>kVK_F16</code> (0x6A)</td>
+   <td><code>GDK_KEY_F16</code> (0xFFCD)<br>
+    <code>Qt::Key_F1</code>6 (0x0100003F)</td>
+   <td><code>KEYCODE_F16</code></td>
+  </tr>
+  <tr>
+   <td><code>"F17"</code></td>
+   <td>The <kbd>F17</kbd> key.</td>
+   <td><code>VK_F17</code> (0x80)</td>
+   <td><code>kVK_F17</code> (0x40)</td>
+   <td><code>GDK_KEY_F17</code> (0xFFCE)<br>
+    <code>Qt::Key_F1</code>7 (0x01000040)</td>
+   <td><code>KEYCODE_F17</code></td>
+  </tr>
+  <tr>
+   <td><code>"F18"</code></td>
+   <td>The <kbd>F18</kbd> key.</td>
+   <td><code>VK_F18</code> (0x81)</td>
+   <td><code>kVK_F18</code> (0x4F)</td>
+   <td><code>GDK_KEY_F18</code> (0xFFCF)<br>
+    <code>Qt::Key_F1</code>8 (0x01000041)</td>
+   <td><code>KEYCODE_F18</code></td>
+  </tr>
+  <tr>
+   <td><code>"F19"</code></td>
+   <td>The <kbd>F19</kbd> key.</td>
+   <td><code>VK_F19</code> (0x82)</td>
+   <td><code>kVK_F19</code> (0x50)</td>
+   <td><code>GDK_KEY_F19</code> (0xFFD0)<br>
+    <code>Qt::Key_F1</code>9 (0x01000042)</td>
+   <td><code>KEYCODE_F19</code></td>
+  </tr>
+  <tr>
+   <td><code>"F20"</code></td>
+   <td>The <kbd>F20</kbd> key.</td>
+   <td><code>VK_F20</code> (0x83)</td>
+   <td><code>kVK_F20</code> (0x5A)</td>
+   <td><code>GDK_KEY_F20</code> (0xFFD1)<br>
+    <code>Qt::Key_F20</code> (0x01000043)</td>
+   <td><code>KEYCODE_F20</code></td>
+  </tr>
+  <tr>
+   <td><code>"Soft1"</code></td>
+   <td>The first general-purpose virtual function key.</td>
+   <td></td>
+   <td></td>
+   <td><code>Qt::Key_Context1</code> (0x01100000)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Soft2"</code></td>
+   <td>The second general-purpose virtual function key.</td>
+   <td></td>
+   <td></td>
+   <td><code>Qt::Key_Context2</code> (0x01100001)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Soft3"</code></td>
+   <td>The third general-purpose virtual function key.</td>
+   <td></td>
+   <td></td>
+   <td><code>Qt::Key_Context3</code> (0x01100002)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Soft4"</code></td>
+   <td>The fourth general-purpose virtual function key.</td>
+   <td></td>
+   <td></td>
+   <td><code>Qt::Key_Context4</code> (0x01100003)</td>
+   <td></td>
+  </tr>
+ </thead>
+</table>
+
+<h2 id="Phone_keys">Phone keys</h2>
+
+<p>These keys represent buttons which commonly exist on modern smartphones.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;"><code>KeyboardEvent.key</code> Value</th>
+   <th rowspan="2" scope="col" style="text-align: left;">Description</th>
+   <th colspan="4" scope="col" style="text-align: center;">Virtual Keycode</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+  <tr>
+   <td><code>"AppSwitch"</code></td>
+   <td>Presents a list of recently-used applications which lets the user change apps quickly.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_APP_SWITCH</code> (181)</td>
+  </tr>
+  <tr>
+   <td><code>"Call"</code></td>
+   <td>The <kbd>Call</kbd> key; dials the number which has been entered.</td>
+   <td></td>
+   <td></td>
+   <td><code>Qt::Key_Call</code> (0x01100004)</td>
+   <td><code>KEYCODE_CALL</code> (5)</td>
+  </tr>
+  <tr>
+   <td><code>"Camera"</code></td>
+   <td>The <kbd>Camera</kbd> key; activates the camera.</td>
+   <td></td>
+   <td></td>
+   <td><code>Qt::Key_Camera</code> (0x01100020)</td>
+   <td><code>KEYCODE_CAMERA</code> (27)</td>
+  </tr>
+  <tr>
+   <td><code>"CameraFocus"</code></td>
+   <td>The <kbd>Focus</kbd> key; focuses the camera.</td>
+   <td></td>
+   <td></td>
+   <td><code>Qt::Key_CameraFocus</code> (0x01100021)</td>
+   <td><code>KEYCODE_FOCUS</code> (80)</td>
+  </tr>
+  <tr>
+   <td><code>"EndCall"</code></td>
+   <td>The <kbd>End Call</kbd> or <kbd>Hang Up</kbd> button.</td>
+   <td></td>
+   <td></td>
+   <td><code>Qt::Key_Hangup</code> (0x01100005)</td>
+   <td><code>KEYCODE_ENDCALL</code> (6)</td>
+  </tr>
+  <tr>
+   <td><code>"GoBack"</code></td>
+   <td>The <kbd>Back</kbd> button.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_BACK</code> (4)</td>
+  </tr>
+  <tr>
+   <td><code>"GoHome"</code> [1]</td>
+   <td>The <kbd>Home</kbd> button, which takes the user to the phone's main screen (usually an application launcher).</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_HOME</code> (3)</td>
+  </tr>
+  <tr>
+   <td><code>"HeadsetHook"</code></td>
+   <td>The <kbd>Headset Hook</kbd> key. This is typically actually a button on the headset which is used to hang up calls and play or pause media.</td>
+   <td></td>
+   <td></td>
+   <td><code>Qt::Key_ToggleCallHangup</code> (0x01100007)</td>
+   <td><code>KEYCODE_HEADSETHOOK</code> (79)</td>
+  </tr>
+  <tr>
+   <td><code>"LastNumberRedial"</code></td>
+   <td>The <kbd>Redial</kbd> button, which redials the last-called number.</td>
+   <td></td>
+   <td></td>
+   <td><code>Qt::Key_LastNumberRedial</code> (0x01100009)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Notification"</code></td>
+   <td>The <kbd>Notification</kbd> key.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_NOTIFICATION</code> (83)</td>
+  </tr>
+  <tr>
+   <td><code>"MannerMode"</code></td>
+   <td>A button which cycles among the notification modes: silent, vibrate, ring, and so forth.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_MANNER_MODE</code> (205)</td>
+  </tr>
+  <tr>
+   <td><code>"VoiceDial"</code></td>
+   <td>The <kbd>Voice Dial</kbd> key. Initiates voice dialing.</td>
+   <td></td>
+   <td></td>
+   <td><code>Qt::Key_VoiceDial</code> (0x01100008)</td>
+   <td><code>KEYCODE_VOICE_ASSIST</code> (231)</td>
+  </tr>
+ </thead>
+</table>
+
+<p>[1] Prior to Firefox 37, the Home button generated a key code of <code>"Exit"</code>. Starting in Firefox 37, the button generates the key code <code>"MozHomeScreen"</code>.</p>
+
+<h2 id="Multimedia_keys">Multimedia keys</h2>
+
+<p>The multimedia keys are extra buttons or keys for controlling media devices, found on some keyboards.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;"><code>KeyboardEvent.key</code> Value</th>
+   <th rowspan="2" scope="col" style="text-align: left;">Description</th>
+   <th colspan="4" scope="col" style="text-align: center;">Virtual Keycode</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+  <tr>
+   <td><code>"ChannelDown"</code></td>
+   <td>Switches to the previous channel.</td>
+   <td><code>APPCOMMAND_MEDIA_CHANNEL_DOWN</code></td>
+   <td></td>
+   <td><code>Qt::Key_ChannelDown</code> (0x01000119)</td>
+   <td><code>KEYCODE_CHANNEL_DOWN</code> (167)</td>
+  </tr>
+  <tr>
+   <td><code>"ChannelUp"</code></td>
+   <td>Switches to the next channel.</td>
+   <td><code>APPCOMMAND_MEDIA_CHANNEL_UP</code></td>
+   <td></td>
+   <td><code>Qt::Key_ChannelUp</code> (0x01000118)</td>
+   <td><code>KEYCODE_CHANNEL_UP</code> (166)</td>
+  </tr>
+  <tr>
+   <td><code>"MediaFastForward"</code> [2]</td>
+   <td>Starts, continues, or increases the speed of fast forwarding the media.</td>
+   <td><code>APPCOMMAND_MEDIA_FAST_FORWARD</code></td>
+   <td></td>
+   <td><code>GDK_KEY_AudioForward (0x1008FF97)<br>
+    Qt:Key_AudioForward</code> (0x01000102)</td>
+   <td><code>KEYCODE_MEDIA_FAST_FORWARD</code> (90)</td>
+  </tr>
+  <tr>
+   <td><code>"MediaPause"</code></td>
+   <td>Pauses the currently playing media. Some older applications use simply "Pause" but this is not correct.</td>
+   <td><code>APPCOMMAND_MEDIA_PAUSE</code></td>
+   <td></td>
+   <td><code>GDK_KEY_AudioPause</code> (0x1008FF31)<br>
+    <code>Qt::Key_MediaPause</code> (0x1000085)</td>
+   <td><code>KEYCODE_MEDIA_PAUSE</code> (127)</td>
+  </tr>
+  <tr>
+   <td><code>"MediaPlay"</code></td>
+   <td>Starts or continues playing media at normal speed, if not already doing so. Has no effect otherwise.</td>
+   <td><code>APPCOMMAND_MEDIA_PLAY</code></td>
+   <td></td>
+   <td><code>GDK_KEY_AudioPlay</code> (0x1008FF14)</td>
+   <td><code>KEYCODE_MEDIA_PLAY</code><code> (126)</code></td>
+  </tr>
+  <tr>
+   <td><code>"MediaPlayPause"</code></td>
+   <td>Toggles between playing and pausing the current media.</td>
+   <td><code>VK_MEDIA_PLAY_PAUSE</code> (0xB3)<br>
+    <code>APPCOMMAND_MEDIA_PLAY_PAUSE</code></td>
+   <td></td>
+   <td><code>Qt::Key_MediaTogglePlayPause</code> (0x1000086)</td>
+   <td><code>KEYCODE_MEDIA_PLAY_PAUSE</code> (85)</td>
+  </tr>
+  <tr>
+   <td><code>"MediaRecord"</code></td>
+   <td>Starts or resumes recording media.</td>
+   <td><code>APPCOMMAND_MEDIA_RECORD</code></td>
+   <td></td>
+   <td><code>GDK_KEY_AudioRecord</code> (0x1008FF1C)<br>
+    <code>Qt::Key_MediaRecord</code> (0x01000084)</td>
+   <td><code>KEYCODE_MEDIA_RECORD</code><code> (130)</code></td>
+  </tr>
+  <tr>
+   <td><code>"MediaRewind"</code></td>
+   <td>Starts, continues, or increases the speed of rewinding the media.</td>
+   <td><code>APPCOMMAND_MEDIA_REWIND</code></td>
+   <td></td>
+   <td><code>GDK_KEY_AudioRewind</code> (0x1008FF3E)<br>
+    <code>Qt::Key_AudioRewind</code> (0x010000C5)</td>
+   <td><code>KEYCODE_MEDIA_REWIND</code><code> (89)</code></td>
+  </tr>
+  <tr>
+   <td><code>"MediaStop"</code></td>
+   <td>Stops the current media activity (such as playing, recording, pausing, forwarding, or rewinding). Has no effect if the media is currently stopped already.</td>
+   <td><code>VK_MEDIA_STOP</code> (0xB2)<br>
+    <code>APPCOMMAND_MEDIA_STOP</code></td>
+   <td></td>
+   <td><code>GDK_KEY_AudioStop</code> (0x1008FF15)<br>
+    <code>Qt::Key_MediaStop</code> (0x01000081)</td>
+   <td><code>KEYCODE_MEDIA_STOP</code> (86)</td>
+  </tr>
+  <tr>
+   <td><code>"MediaTrackNext"</code> [1]</td>
+   <td>Seeks to the next media or program track.</td>
+   <td><code>VK_MEDIA_NEXT_TRACK</code> (0xB0)<br>
+    <code>APPCOMMAND_MEDIA_NEXTTRACK</code></td>
+   <td></td>
+   <td><code>GDK_KEY_AudioNext</code> (0x1008FF17)<br>
+    <code>Qt::Key_MediaNext</code> (0x01000083)</td>
+   <td><code>KEYCODE_MEDIA_NEXT</code> (87)</td>
+  </tr>
+  <tr>
+   <td><code>"MediaTrackPrevious"</code> [1]</td>
+   <td>Seeks to the previous media or program track.</td>
+   <td><code>VK_MEDIA_PREV_TRACK</code> (0xB1)<br>
+    <code>APPCOMMAND_MEDIA_PREVIOUSTRACK</code></td>
+   <td></td>
+   <td><code>GDK_KEY_AudioPrev</code> (0x1008FF16)<br>
+    <code>Qt::Key_MediaPrevious</code> (0x01000082)</td>
+   <td><code>KEYCODE_MEDIA_PREVIOUS</code> (88)</td>
+  </tr>
+ </thead>
+</table>
+
+<p>[1] Internet Explorer, Edge, and Firefox (36 and earlier) use <code>"MediaNextTrack"</code> and <code>"MediaPreviousTrack"</code> instead of <code>"MediaTrackNext"</code> and <code>"MediaTrackPrevious"</code>.</p>
+
+<p>[2] Prior to Firefox 37, Firefox generated the key code <code>"FastFwd"</code> on some platforms and <code>"Unidentified"</code> on others instead of <code>"MediaFastForward"</code>.</p>
+
+<h2 id="Audio_control_keys">Audio control keys</h2>
+
+<p>These media keys are used specifically for controlling audio.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;"><code>KeyboardEvent.key</code> Value</th>
+   <th rowspan="2" scope="col" style="text-align: left;">Description</th>
+   <th colspan="4" scope="col" style="text-align: center;">Virtual Keycode</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+  <tr>
+   <td><code>"AudioBalanceLeft"</code></td>
+   <td>Adjusts audio balance toward the left.</td>
+   <td><code>VK_AUDIO_BALANCE_LEFT</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"AudioBalanceRight"</code></td>
+   <td>Adjusts audio balance twoard the right.</td>
+   <td><code>VK_AUDIO_BALANCE_RIGHT</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"AudioBassDown"</code></td>
+   <td>Decreases the amount of bass.</td>
+   <td><code>APPCOMMAND_BASS_DOWN</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"AudioBassBoostDown"</code></td>
+   <td>Reduces bass boosting or cycles downward through bass boost modes or states.</td>
+   <td><code>VK_BASS_BOOST_DOWN</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"AudioBassBoostToggle"</code></td>
+   <td>Toggles bass boosting on and off.</td>
+   <td><code>APPCOMMAND_BASS_BOOST</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"AudioBassBoostUp"</code></td>
+   <td>Increases the amoung of bass boosting, or cycles upward through a set of bass boost modes or states.</td>
+   <td><code>VK_BASS_BOOST_UP</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"AudioBassUp"</code></td>
+   <td>Increases the amount of bass.</td>
+   <td><code>APPCOMMAND_BASS_UP</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"AudioFaderFront"</code></td>
+   <td>Adjusts the audio fader toward the front.</td>
+   <td><code>VK_FADER_FRONT</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"AudioFaderRear"</code></td>
+   <td>Adjustts the audio fader toward the rear.</td>
+   <td><code>VK_FADER_REAR</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"AudioSurroundModeNext"</code></td>
+   <td>Selects the next available surround sound mode.</td>
+   <td><code>VK_SURROUND_MODE_NEXT</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"AudioTrebleDown"</code></td>
+   <td>Decreases the amount of treble.</td>
+   <td><code>APPCOMMAND_TREBLE_DOWN</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"AudioTrebleUp"</code></td>
+   <td>Increases the amount of treble.</td>
+   <td><code>APPCOMMAND_TREBLE_UP</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"AudioVolumeDown" [1]</code></td>
+   <td>Decreases the audio volume.</td>
+   <td><code>VK_VOLUME_DOWN</code> (0xAE)<br>
+    <code>APPCOMMAND_VOLUME_DOWN</code></td>
+   <td><code>kVK_VolumeDown</code> (0x49)</td>
+   <td><code>GDK_KEY_AudioLowerVolume</code> (0x1008FF11)<br>
+    <code>Qt::Key_VolumeDown</code> (0x01000070)</td>
+   <td><code>KEYCODE_VOLUME_DOWN</code> (25)</td>
+  </tr>
+  <tr>
+   <td><code>"AudioVolumeMute" [1]</code></td>
+   <td>Mutes the audio.</td>
+   <td><code>VK_VOLUME_MUTE</code> (0xAD)<br>
+    <code>APPCOMMAND_VOLUME_MUTE</code></td>
+   <td><code>kVK_Mute</code> (0x4A)</td>
+   <td><code>GDK_KEY_AudioMute</code> (0x1008FF12)<br>
+    <code>Qt::Key_VolumeMute</code> (0x01000071)</td>
+   <td><code>KEYCODE_VOLUME_MUTE</code> (164)</td>
+  </tr>
+  <tr>
+   <td><code>"AudioVolumeUp" [1]</code></td>
+   <td>Increases the audio volume.</td>
+   <td><code>VK_VOLUME_UP</code> (0xAF)<br>
+    <code>APPCOMMAND_VOLUME_UP</code></td>
+   <td><code>kVK_VolumeUp</code> (0x48)</td>
+   <td><code>GDK_KEY_AudioRaiseVolume</code> (0x1008FF13)<br>
+    <code>Qt::Key_VolumeUp</code> (0x01000072)</td>
+   <td><code>KEYCODE_VOLUME_UP</code> (24)</td>
+  </tr>
+  <tr>
+   <td><code>"MicrophoneToggle"</code></td>
+   <td>Toggles the microphone on and off.</td>
+   <td><code>APPCOMMAND_MIC_ON_OFF_TOGGLE</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"MicrophoneVolumeDown"</code></td>
+   <td>Decreases the microphone's input volume.</td>
+   <td><code>APPCOMMAND_MICROPHONE_VOLUME_DOWN</code></td>
+   <td></td>
+   <td><code>Qt::Key_MicVolumeDown</code> (0x0100011E)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"MicrophoneVolumeMute"</code></td>
+   <td>Mutes the microphone input.</td>
+   <td><code>APPCOMMAND_MICROPHONE_VOLUME_MUTE</code></td>
+   <td></td>
+   <td><code>GDK_KEY_AudioMicMute</code> (0x1008FFB2)<br>
+    <code>Qt::Key_MicMute</code> (0x01000113)</td>
+   <td><code>KEYCODE_MUTE</code> (91)</td>
+  </tr>
+  <tr>
+   <td><code>"MicrophoneVolumeUp"</code></td>
+   <td>Increases the microphone's input volume.</td>
+   <td><code>APPCOMMAND_MICROPHONE_VOLUME_UP</code></td>
+   <td></td>
+   <td><code>Qt::Key_MicVolumeUp</code> (0x0100011D)</td>
+   <td></td>
+  </tr>
+ </thead>
+</table>
+
+<p>[1] Internet Explorer, Edge, and Firefox (48 and earlier) use <code>"VolumeUp"</code>, <code>"VolumeDown"</code>, and <code>"VolumeMute"</code> instead of <code>"AudioVolumeUp"</code>, <code>"AudioVolumeDown"</code>, and <code>"AudioVolumeMute"</code>. In Firefox 49 they were updated to match the latest specification. The old names are still used on <a href="/en-US/docs/Mozilla/B2G_OS">Boot to Gecko</a>.</p>
+
+<h2 id="TV_control_keys">TV control keys</h2>
+
+<p>These key values represent buttons or keys present on television devices, or computers or phones which have TV support.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;"><code>KeyboardEvent.key</code> Value</th>
+   <th rowspan="2" scope="col" style="text-align: left;">Description</th>
+   <th colspan="4" scope="col" style="text-align: center;">Virtual Keycode</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+  <tr>
+   <td><code>"TV"</code> [1]</td>
+   <td>Switches into TV viewing mode.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV</code> (170)</td>
+  </tr>
+  <tr>
+   <td><code>"TV3DMode"</code></td>
+   <td>Toggles 3D TV mode on and off.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_3D_MODE</code> (206)</td>
+  </tr>
+  <tr>
+   <td><code>"TVAntennaCable"</code></td>
+   <td>Toggles between antenna and cable inputs.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_ANTENNA_CABLE</code> (242)</td>
+  </tr>
+  <tr>
+   <td><code>"TVAudioDescription"</code></td>
+   <td>Toggles audio description mode on and off.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_AUDIO_DESCRIPTION</code> (252)</td>
+  </tr>
+  <tr>
+   <td><code>"TVAudioDescriptionMixDown"</code></td>
+   <td>Decreases trhe audio description's mixing volume; reduces the volume of the audio descriptions relative to the program sound.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_AUDIO_DESCRIPTION_MIX_DOWN</code> (254)</td>
+  </tr>
+  <tr>
+   <td><code>"TVAudioDescriptionMixUp"</code></td>
+   <td>Increases the audio description's mixing volume; increases the volume of the audio descriptions relative to the program sound.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_AUDIO_DESCRIPTION_MIX_UP</code> (253)</td>
+  </tr>
+  <tr>
+   <td><code>"TVContentsMenu"</code></td>
+   <td>Displays or hides the media contents available for playback (this may be a channel guide showing the currently airing programs, or a list of media files to play).</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_CONTENTS_MENU</code> (256)</td>
+  </tr>
+  <tr>
+   <td><code>"TVDataService"</code></td>
+   <td>Displays or hides the TV's data service menu.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_DATA_SERVICE</code> (230)</td>
+  </tr>
+  <tr>
+   <td><code>"TVInput"</code> [2]</td>
+   <td>Cycles the input mode on an external TV.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_INPUT</code> (178)</td>
+  </tr>
+  <tr>
+   <td><code>"TVInputComponent1"</code></td>
+   <td>Switches to the input "Component 1."</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_INPUT_COMPONENT_1</code> (249)</td>
+  </tr>
+  <tr>
+   <td><code>"TVInputComponent2"</code></td>
+   <td>Switches to the input "Component 2."</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_INPUT_COMPONENT_2</code> (250)</td>
+  </tr>
+  <tr>
+   <td><code>"TVInputComposite1"</code></td>
+   <td>Switches to the input "Composite 1."</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_INPUT_COMPOSITE_1</code> (247)</td>
+  </tr>
+  <tr>
+   <td><code>"TVInputComposite2"</code></td>
+   <td>Switches to the input "Composite 2."</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_INPUT_COMPOSITE_2</code> (248)</td>
+  </tr>
+  <tr>
+   <td><code>"TVInputHDMI1"</code></td>
+   <td>Switches to the input "HDMI 1."</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_INPUT_HDMI_1</code> (243)</td>
+  </tr>
+  <tr>
+   <td><code>"TVInputHDMI2"</code></td>
+   <td>Switches to the input "HDMI 2."</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_INPUT_HDMI_2</code> (244)</td>
+  </tr>
+  <tr>
+   <td><code>"TVInputHDMI3"</code></td>
+   <td>Switches to the input "HDMI 3."</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_INPUT_HDMI_3</code> (245)</td>
+  </tr>
+  <tr>
+   <td><code>"TVInputHDMI4"</code></td>
+   <td>Switches to the input "HDMI 4."</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_INPUT_HDMI_4</code> (246)</td>
+  </tr>
+  <tr>
+   <td><code>"TVInputVGA1"</code></td>
+   <td>Switches to the input "VGA 1."</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_INPUT_VGA_1</code> (251)</td>
+  </tr>
+  <tr>
+   <td><code>"TVMediaContext"</code></td>
+   <td>The Media Context menu key.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_MEDIA_CONTEXT_MENU</code> (257)</td>
+  </tr>
+  <tr>
+   <td><code>"TVNetwork"</code></td>
+   <td>Toggle the TV's network connection on and off.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_NETWORK</code> (241)</td>
+  </tr>
+  <tr>
+   <td><code>"TVNumberEntry"</code></td>
+   <td>Put the TV into number entry mode.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_NUMBER_ENTRY</code> (234)</td>
+  </tr>
+  <tr>
+   <td><code>"TVPower"</code> [2]</td>
+   <td>The device's power button.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_POWER</code> (177)</td>
+  </tr>
+  <tr>
+   <td><code>"TVRadioService"</code></td>
+   <td>Radio button.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_RADIO_SERVICE</code> (232)</td>
+  </tr>
+  <tr>
+   <td><code>"TVSatellite"</code></td>
+   <td>Satellite button.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_SATELLITE</code> (237)</td>
+  </tr>
+  <tr>
+   <td><code>"TVSatelliteBS"</code></td>
+   <td>Broadcast Satellite button.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_SATELLITE_BS</code> (238)</td>
+  </tr>
+  <tr>
+   <td><code>"TVSatelliteCS"</code></td>
+   <td>Communication Satellite button.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_SATELLITE_CS</code> (239)</td>
+  </tr>
+  <tr>
+   <td><code>"TVSatelliteToggle"</code></td>
+   <td>Toggles among available satellites.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_SATELLITE_SERVICE</code> (240)</td>
+  </tr>
+  <tr>
+   <td><code>"TVTerrestrialAnalog"</code></td>
+   <td>Selects analog terrestrial television service (analog cable or antenna reception).</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_TERRESTRIAL_ANALOG</code> (235)</td>
+  </tr>
+  <tr>
+   <td><code>"TVTerrestrialDigital"</code></td>
+   <td>Selects digital terrestrial television service (digital cable or antenna receiption).</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_TERRESTRIAL_DIGITAL</code> (236)</td>
+  </tr>
+  <tr>
+   <td><code>"TVTimer"</code></td>
+   <td>Timer programming button.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_TIMER_PROGRAMMING</code> (258)</td>
+  </tr>
+ </thead>
+</table>
+
+<p>[1] Firefox added proper support for the <code>"TV"</code> key in Firefox 37; before that, this key generated the key code <code>"Live"</code>.</p>
+
+<p>[2] These keys were <code>"Unidentified"</code> until Firefox 37.</p>
+
+<h2 id="Media_controller_keys">Media controller keys</h2>
+
+<p>Because modern remote controls for media devices often include buttons beyond the basic controls covered elsewhere in this document, key values are defined for a broad array of these additional buttons.</p>
+
+<p>The values below are derived in part form a number of consumer electronics technical specifications:</p>
+
+<ul>
+ <li><a href="http://atsc.org/standard/a100-dtv-application-software-environment-level-1-dase-1/">DTV Application Software Environment</a> (part of the {{interwiki("wikipedia", "ATSC")}} specification)</li>
+ <li><a href="http://www.cablelabs.com/specifications/OC-SP-OCAP1.1.3-100603.pdf">Open Cable Application Platform 1.1.3</a></li>
+ <li><a href="http://www.ce.org/Standards/Standard-Listings/R7-Home-Network-Committee/CEA-2014-B-(ANSI%29.aspx">ANSI/CEA-2014-B</a>: Web-based Protocol and Framework for Remote User Interface on UPnP™ Networks and the Internet</li>
+ <li><a href="http://developer.android.com/reference/android/view/KeyEvent.html">Android KeyEvent key code values</a></li>
+</ul>
+
+<div class="note">
+<p>Remote controls typically include keys whose values are already defined elsewhere, such as under {{anch("Multimedia keys")}} or {{anch("Audio control keys")}}. Those keys' values will match what's documented in those tables.</p>
+</div>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;"><code>KeyboardEvent.key</code> Value</th>
+   <th rowspan="2" scope="col" style="text-align: left;">Description</th>
+   <th colspan="4" scope="col" style="text-align: center;">Virtual Keycode</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+  <tr>
+   <td><code>"AVRInput"</code> [3]</td>
+   <td>Changes the input mode on an external audio/video receiver (AVR) unit.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_AVR_INPUT</code> (182)</td>
+  </tr>
+  <tr>
+   <td><code>"AVRPower"</code> [3]</td>
+   <td>Toggles the power on an external AVR unit.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_AVR_POWER</code> (181)</td>
+  </tr>
+  <tr>
+   <td><code>"ColorF0Red"</code> [3]</td>
+   <td>General-purpose media function key, color-coded red; this has index 0 among the colored keys.</td>
+   <td><code>VK_COLORED_KEY_0</code></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_PROG_RED</code> (183)</td>
+  </tr>
+  <tr>
+   <td><code>"ColorF1Green"</code> [3]</td>
+   <td>General-purpose media funciton key, color-coded green; this has index 1 among the colored keys.</td>
+   <td><code>VK_COLORED_KEY_1</code></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_PROG_GREEN</code> (184)</td>
+  </tr>
+  <tr>
+   <td><code>"ColorF2Yellow"</code> [3]</td>
+   <td>General-purpose media funciton key, color-coded yellow; this has index 2 among the colored keys.</td>
+   <td><code>VK_COLORED_KEY_2</code></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_PROG_YELLOW</code> (185)</td>
+  </tr>
+  <tr>
+   <td><code>"ColorF3Blue"</code> [3]</td>
+   <td>General-purpose media funciton key, color-coded blue; this has index 3 among the colored keys.</td>
+   <td><code>VK_COLORED_KEY_3</code></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_PROG_BLUE</code> (186)</td>
+  </tr>
+  <tr>
+   <td><code>"ColorF4Grey"</code></td>
+   <td>General-purpose media funciton key, color-coded grey; this has index 4 among the colored keys.</td>
+   <td><code>VK_COLORED_KEY_4</code></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_PROG_GREY</code></td>
+  </tr>
+  <tr>
+   <td><code>"ColorF5Brown"</code></td>
+   <td>General-purpose media funciton key, color-coded brown; this has index 5 among the colored keys.</td>
+   <td><code>VK_COLORED_KEY_5</code></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_PROG_BROWN</code></td>
+  </tr>
+  <tr>
+   <td><code>"ClosedCaptionToggle"</code></td>
+   <td>Toggles closed captioning on and off.</td>
+   <td><code>VK_CC</code></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_CAPTIONS</code> (175)</td>
+  </tr>
+  <tr>
+   <td><code>"Dimmer"</code></td>
+   <td>Adjusts the brightness of the device by toggling between two brightness levels <em>or</em> by cycling among multiple brightness levels.</td>
+   <td><code>VK_DIMMER</code></td>
+   <td></td>
+   <td><code>GDK_KEY_BrightnessAdjust</code> (0x1008FF3B)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"DisplaySwap"</code></td>
+   <td>Cycles among video sources.</td>
+   <td><code>VK_DISPLAY_SWAP</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"DVR"</code></td>
+   <td>Switches the input source to the Digital Video Recorder (DVR).</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_DVR</code> (173)</td>
+  </tr>
+  <tr>
+   <td><code>"Exit"</code></td>
+   <td>The Exit button, which exits the curreent application or menu.</td>
+   <td><code>VK_EXIT</code></td>
+   <td></td>
+   <td><code>Qt::Key_Exit</code> (0x0102000a)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"FavoriteClear0"</code></td>
+   <td>Clears the program or content stored in the first favorites list slot.</td>
+   <td><code>VK_CLEAR_FAVORITE_0</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"FavoriteClear1"</code></td>
+   <td>Clears the program or content stored in the second favorites list slot.</td>
+   <td><code>VK_CLEAR_FAVORITE_1</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"FavoriteClear2"</code></td>
+   <td>Clears the program or content stored in the third favorites list slot.</td>
+   <td><code>VK_CLEAR_FAVORITE_2</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"FavoriteClear3"</code></td>
+   <td>Clears the program or content stored in the fourth favorites list slot.</td>
+   <td><code>VK_CLEAR_FAVORITE_3</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"FavoriteRecall0"</code></td>
+   <td>Selects (recalls) the program or content stored in the first favorites list slot.</td>
+   <td><code>VK_RECALL_FAVORITE_0</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"FavoriteRecall1"</code></td>
+   <td>Selects (recalls) the program or content stored in the second favorites list slot.</td>
+   <td><code>VK_RECALL_FAVORITE_1</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"FavoriteRecall2"</code></td>
+   <td>Selects (recalls) the program or content stored in the third favorites list slot.</td>
+   <td><code>VK_RECALL_FAVORITE_2</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"FavoriteRecall3"</code></td>
+   <td>Selects (recalls) the program or content stored in the fourth favorites list slot.</td>
+   <td><code>VK_RECALL_FAVORITE_3</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"FavoriteStore0"</code></td>
+   <td>Stores the current program or content into the first favorites list slot.</td>
+   <td><code>VK_STORE_FAVORITE_0</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"FavoriteStore1"</code></td>
+   <td>Stores the current program or content into the second favorites list slot.</td>
+   <td><code>VK_STORE_FAVORITE_1</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"FavoriteStore2"</code></td>
+   <td>Stores the current program or content into the third favorites list slot.</td>
+   <td><code>VK_STORE_FAVORITE_2</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"FavoriteStore3"</code></td>
+   <td>Stores the current program or content into the fourth favorites list slot.</td>
+   <td><code>VK_STORE_FAVORITE_3</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Guide"</code></td>
+   <td>Toggles the display of the program or content guide.</td>
+   <td><code>VK_GUIDE</code></td>
+   <td></td>
+   <td><code>Qt::Key_Guide</code> (0x0100011A)</td>
+   <td><code>KEYCODE_GUIDE</code> (172)</td>
+  </tr>
+  <tr>
+   <td><code>"GuideNextDay"</code></td>
+   <td>If the guide is currently displayed, this button tells the guide to display the next day's content.</td>
+   <td><code>VK_NEXT_DAY</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"GuidePreviousDay"</code></td>
+   <td>If the guide is currently displayed, this button tells the guide to display the previous day's content.</td>
+   <td><code>VK_PREV_DAY</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Info"</code></td>
+   <td>Toggles the display of information about the currently selected content, program, or media.</td>
+   <td><code>VK_INFO</code></td>
+   <td></td>
+   <td><code>Qt::Key_Info</code> (0x0100011B)</td>
+   <td><code>KEYCODE_INFO</code> (165)</td>
+  </tr>
+  <tr>
+   <td><code>"InstantReplay"</code></td>
+   <td>Tellls the device to perform an instant replay (typically some form of jumping back a short amount of time then playing it again, possibly but not usually in slow motion).</td>
+   <td><code>VK_INSTANT_REPLAY</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Link"</code></td>
+   <td>Opens content liniked to the current program, if available and possible.</td>
+   <td><code>VK_LINK</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"ListProgram"</code></td>
+   <td>Lists the current program.</td>
+   <td><code>VK_LIST</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LiveContent"</code></td>
+   <td>Toggles a display listing currently available live content or programs.</td>
+   <td><code>VK_LIVE</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Lock"</code></td>
+   <td>Locks or unlocks the currently selected content or pgoram.</td>
+   <td><code>VK_LOCK</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"MediaApps"</code></td>
+   <td>Presents a list of media applications, such as photo viewers, audio and video players, and games. [1]</td>
+   <td><code>VK_APPS</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"MediaAudioTrack"</code></td>
+   <td>The Audio Track key.</td>
+   <td></td>
+   <td></td>
+   <td>GDK_KEY_AudioCycleTrack (0x1008FF9B)<br>
+    <code>Qt::Key_AudioCycleTrack</code> (0x01000106)</td>
+   <td><code>KEYCODE_MEDIA_AUDIO_TRACK</code> (222)</td>
+  </tr>
+  <tr>
+   <td><code>"MediaLast"</code></td>
+   <td>Jumps back to the last-viewed content, program, or other media.</td>
+   <td><code>VK_LAST</code></td>
+   <td></td>
+   <td><code>Qt::Key_MediaLast</code> (0x0100FFFF)</td>
+   <td><code>KEYCODE_LAST_CHANNEL</code> (229)</td>
+  </tr>
+  <tr>
+   <td><code>"MediaSkipBackward"</code></td>
+   <td>Skips backward to the previous content or program.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_MEDIA_SKIP_BACKWARD</code></td>
+  </tr>
+  <tr>
+   <td><code>"MediaSkipForward"</code></td>
+   <td>Skips forward to the next content or program.</td>
+   <td><code>VK_SKIP</code></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_MEDIA_SKIP_FORWARD</code></td>
+  </tr>
+  <tr>
+   <td><code>"MediaStepBackward"</code></td>
+   <td>Steps backward to the previous content or program.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_MEDIA_STEP_BACKWARD</code></td>
+  </tr>
+  <tr>
+   <td><code>"MediaStepForward"</code></td>
+   <td>Steps forward to the next content or program.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_MEDIA_SKIP_FORWARD</code></td>
+  </tr>
+  <tr>
+   <td><code>"MediaTopMenu"</code></td>
+   <td>Top Menu button; opens the media's main menu, such as on a DVD or Blu-Ray disc.</td>
+   <td></td>
+   <td></td>
+   <td><code>Qt::Key_TopMenu</code> (0x0100010A)</td>
+   <td><code>KEYCODE_MEDIA_TOP_MENU</code></td>
+  </tr>
+  <tr>
+   <td><code>"NavigateIn"</code></td>
+   <td>Navigates into a submenu or option.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_NAVIGATE_IN</code></td>
+  </tr>
+  <tr>
+   <td><code>"NavigateNext"</code></td>
+   <td>Navigates to the next item.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_NAVIGATE_NEXT</code></td>
+  </tr>
+  <tr>
+   <td><code>"NavigateOut"</code></td>
+   <td>Navigates out of the current screen or menu.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_NAVIGATE_OUT</code></td>
+  </tr>
+  <tr>
+   <td><code>"NavigatePrevious"</code></td>
+   <td>Navigates to the previous item.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_NAVIGATE_PREVIOUS</code></td>
+  </tr>
+  <tr>
+   <td><code>"NextFavoriteChannel"</code></td>
+   <td>Cycles to the next channel in the favorites list.</td>
+   <td><code>VK_NEXT_FAVORITE_CHANNEL</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"NextUserProfile"</code></td>
+   <td>Cycles to the next saved user profile, if this feature is supported and multiple profiles exist.</td>
+   <td><code>VK_USER</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"OnDemand"</code></td>
+   <td>Opens the user interface for selecting on demand content or programs to watch.</td>
+   <td><code>VK_ON_DEMAND</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Pairing"</code></td>
+   <td>Starts the process of pairing the remote with a device to be controlled.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_PAIRING</code> (225)</td>
+  </tr>
+  <tr>
+   <td><code>"PinPDown"</code></td>
+   <td>A button to move the picture-in-picture view downward.</td>
+   <td><code>VK_PINP_DOWN</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"PinPMove"</code></td>
+   <td>A button to control moving the picture-in-picture view.</td>
+   <td><code>VK_PINP_MOVE</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"PinPToggle"</code></td>
+   <td>Toggles display of th epicture-in-picture view on and off.</td>
+   <td><code>VK_PINP_TOGGLE</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"PinPUp"</code></td>
+   <td>A button to move the picture-in-picture view upward.</td>
+   <td><code>VK_PINP_UP</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"PlaySpeedDown"</code></td>
+   <td>Decreases the media playback rate.</td>
+   <td><code>VK_PLAY_SPEED_DOWN</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"PlaySpeedReset"</code></td>
+   <td>Returns the media playback rate to normal.</td>
+   <td><code>VK_PLAY_SPEED_RESET</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"PlaySpeedUp"</code></td>
+   <td>Increases the media playback rate.</td>
+   <td><code>VK_PLAY_SPEED_UP</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"RandomToggle"</code></td>
+   <td>Toggles random media (also known as "shuffle mode") on and off.</td>
+   <td><code>VK_RANDOM_TOGGLE</code></td>
+   <td></td>
+   <td><code>GDK_KEY_AudioRandomPlay</code> (0x1008FF99)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"RcLowBattery"</code></td>
+   <td>A code sent when the remote control's battery is low. This doesn't actually correspond to a physical key at all.</td>
+   <td><code>VK_RC_LOW_BATTERY</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"RecordSpeedNext"</code></td>
+   <td>Cycles among the available media recording speeds.</td>
+   <td><code>VK_RECORD_SPEED_NEXT</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"RfBypass"</code></td>
+   <td>Toggles radio frequency (RF) input bypass mode on and off. RF bypass mode passes RF input directly to the RF output without any processing or filtering.</td>
+   <td><code>VK_RF_BYPASS</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"ScanChannelsToggle"</code></td>
+   <td>Toggles the channel scan mode on and off; this is a mode which flips through channels automatically until the user stops the scan.</td>
+   <td><code>VK_SCAN_CHANNELS_TOGGLE</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"ScreenModeNext"</code></td>
+   <td>Cycles through the available screen display modes.</td>
+   <td><code>VK_SCREEN_MODE_NEXT</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Settings"</code></td>
+   <td>Toggles display of the device's settings screen on and off.</td>
+   <td><code>VK_SETTINGS</code></td>
+   <td></td>
+   <td><code>Qt::Key_Settings</code> (0x0100011C)</td>
+   <td><code>KEYCODE_SETTINGS</code></td>
+  </tr>
+  <tr>
+   <td><code>"SplitScreenToggle"</code></td>
+   <td>Toggles split screen display mode on and off.</td>
+   <td><code>VK_SPLIT_SCREEN_TOGGLE</code></td>
+   <td></td>
+   <td><code>GDK_KEY_SplitScreen (</code>0x1008FF7D)<br>
+    <code>Qt::Key_SplitScreen</code> (0x010000ED)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"STBInput"</code> [3]</td>
+   <td>Cycles among input modes on an external set-top box (STB).</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_STB_INPUT</code> (180)</td>
+  </tr>
+  <tr>
+   <td><code>"STBPower"</code> [3]</td>
+   <td>Toggles on and off an external STB.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_STB_POWER</code> (179)</td>
+  </tr>
+  <tr>
+   <td><code>"Subtitle"</code></td>
+   <td>Toggles the display of subtitles on and off if they're available.</td>
+   <td><code>VK_SUBTITLE</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Subtitle</code> (0x1008FF9A)</td>
+   <td><code>KEYCODE_CAPTIONS</code> (175)</td>
+  </tr>
+  <tr>
+   <td><code>"Teletext"</code></td>
+   <td>Toggles display of {{interwiki("wikipedia", "teletext")}}, if available.</td>
+   <td><code>VK_TELETEXT</code></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_TELETEXT</code> (233)</td>
+  </tr>
+  <tr>
+   <td><code>"VideoModeNext"</code> [3]</td>
+   <td>Cycles through the available video modes.</td>
+   <td><code>VK_VIDEO_MODE_NEXT</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Next_VMode</code> (0x1008FE22)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Wink"</code></td>
+   <td>Causes the device to identify itself in some fashion, such as by flashing a light, briefly changing the brightness of indicator lights, or emitting a tone.</td>
+   <td><code>VK_WINK</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"ZoomToggle"</code> [2]</td>
+   <td>Toggles between full-screen and scaled content display, or otherwise change the magnification level.</td>
+   <td><code>VK_ZOOM</code> (0xFB)</td>
+   <td></td>
+   <td><code>Qt::Key_Zoom</code> (0x01020006)</td>
+   <td><code>KEYCODE_TV_ZOOM_MODE</code> (255)</td>
+  </tr>
+ </thead>
+</table>
+
+<p>[1] Don't confuse the media controller <code>VK_APPS</code> key with the Windows <code>VK_APPS</code> key, which is also known as <code>VK_CONTEXT_MENU</code>. That key is encoded as <code>"ContextMenu"</code>.</p>
+
+<p>[2] Internet Explorer (tested on release 9 and 11) and Firefox 36 and earlier identify the zoom toggle button as <code>"Zoom"</code>. Firefox 37 corrects this to <code>"ZoomToggle"</code>.</p>
+
+<p>[3] These keys were <code>"Unidentified"</code> until Firefox 37.</p>
+
+<h2 id="Speech_recognition_keys">Speech recognition keys</h2>
+
+<p>These special multimedia keys are used to control speech recognition features.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;"><code>KeyboardEvent.key</code> Value</th>
+   <th rowspan="2" scope="col" style="text-align: left;">Description</th>
+   <th colspan="4" scope="col" style="text-align: center;">Virtual Keycode</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+  <tr>
+   <td><code>"SpeechCorrectionList"</code> [1]</td>
+   <td>Presents a list of possible corrections for a word which was incorrectly identified.</td>
+   <td><code>APPCOMMAND_CORRECTION_LIST</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"SpeechInputToggle"</code> [2]</td>
+   <td>Toggles between dictation mode and command/control mode. This lets the speech engine know whether to interpret spoken words as input text or as commands.</td>
+   <td><code>APPCOMMAND_DICTATE_OR_COMMAND_CONTROL_TOGGLE</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+ </thead>
+</table>
+
+<p>[1] The <code>APPCOMMAND_CORRECTION_LIST</code> command on Windows generates <code>"Unidentified"</code> on Firefox.</p>
+
+<p>[2] The <code>APPCOMMAND_DICTATE_OR_COMMAND_CONTROL_TOGGLE</code> command on Windows generates <code>"Unidentified"</code> on Firefox.</p>
+
+<h2 id="Document_keys">Document keys</h2>
+
+<p>These keys control documents. In the specification, they're included in other sets of keys, such as the media keys, but they make more sense when considered to be their own category.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;"><code>KeyboardEvent.key</code> Value</th>
+   <th rowspan="2" scope="col" style="text-align: left;">Description</th>
+   <th colspan="4" scope="col" style="text-align: center;">Virtual Keycode</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+  <tr>
+   <td><code>"Close"</code> [1]</td>
+   <td>Closes the current document or message. Must not exit the application.</td>
+   <td><code>APPCOMMAND_CLOSE</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Close</code> (0x1008FF56)<br>
+    <code>Qt::Key_Close</code> (0x010000CE)</td>
+   <td><code>KEYCODE_MEDIA_CLOSE</code> (128)</td>
+  </tr>
+  <tr>
+   <td><code>"New"</code> [1]</td>
+   <td>Creates a new document or message.</td>
+   <td><code>APPCOMMAND_NEW</code></td>
+   <td></td>
+   <td><code>GDK_KEY_New</code> (0x1008FF68)<br>
+    <code>Qt::Key_New</code> (0x01000120)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Open"</code> [1]</td>
+   <td>Opens an existing document or message.</td>
+   <td><code>APPCOMMAND_OPEN</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Open</code> (0x1008FF6B)<br>
+    <code>Qt::Key_Open</code> (0x01000121)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Print"</code></td>
+   <td>Prints the current document or message.</td>
+   <td><code>APPCOMMAND_PRINT</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Print</code> (0xFF61)<br>
+    <code>Qt::Print</code> (0x01000009)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Save"</code> [1]</td>
+   <td>Saves the current document or message.</td>
+   <td><code>APPCOMMAND_SAVE</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Save</code> (0x1008FF77)<br>
+    <code>Qt::Key_Save</code> (0x010000EA)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"SpellCheck"</code> [1]</td>
+   <td>Starts spell checking the current document.</td>
+   <td><code>APPCOMMAND_SPELL_CHECK</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Spell</code> (0x1008FF7C)<br>
+    <code>Qt::Key_Spell</code> (0x010000EC)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"MailForward"</code> [1]</td>
+   <td>Opens the user interface to forward a message.</td>
+   <td><code>APPCOMMAND_FORWARD_MAIL</code></td>
+   <td></td>
+   <td><code>GDK_KEY_MailForward</code> (0x1008FF90)<br>
+    <code>Qt::Key_MailForward</code> (0x010000FB)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"MailReply"</code> [1]</td>
+   <td>Opens the user interface to reply to a message.</td>
+   <td><code>APPCOMMAND_REPLY_TO_MAIL</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Reply</code> (0x1008FF72)<br>
+    <code>Qt::Key_Reply</code> (0x010000E5)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"MailSend"</code> [1]</td>
+   <td>Sends the current message.</td>
+   <td><code>APPCOMMAND_SEND_MAIL</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Send</code> (0x1008FF7B)<br>
+    <code>Qt::Key_Send</code> (0x010000EB)</td>
+   <td></td>
+  </tr>
+ </thead>
+</table>
+
+<p>[1] Prior to Firefox 37, this key generated the key value <code>"Unidentified"</code>.</p>
+
+<h2 id="Application_selector_keys">Application selector keys</h2>
+
+<p>Some keyboards offer special keys for launching or switching to certain common applications. Key values for those are listed here.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;"><code>KeyboardEvent.key</code> Value</th>
+   <th rowspan="2" scope="col" style="text-align: left;">Description</th>
+   <th colspan="4" scope="col" style="text-align: center;">Virtual Keycode</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+  <tr>
+   <td><code>"LaunchCalculator"</code> [5]</td>
+   <td>The <kbd>Calculator</kbd> key, often labeled with an icon. This is often used as a generic application launcher key (<code>APPCOMMAND_LAUNCH_APP2</code>).</td>
+   <td><code>APPCOMMAND_LAUNCH_APP2</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Calculator</code> (0x1008FF1D)<br>
+    <code>Qt::Key_Calculator</code> (0x010000CB)</td>
+   <td><code>KEYCODE_CALCULATOR</code> (210)</td>
+  </tr>
+  <tr>
+   <td><code>"LaunchCalendar"</code> [5]</td>
+   <td>The <kbd>Calendar</kbd> key, often labeled with an icon.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Calendar</code> (0x1008FF20)<br>
+    <code>Qt::Key_Calendar</code> (0x010000E4)</td>
+   <td><code>KEYCODE_CALENDAR</code> (208)</td>
+  </tr>
+  <tr>
+   <td><code>"LaunchContacts"</code></td>
+   <td>The <kbd>Contacts</kbd> key.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_CONTACTS</code> (207)</td>
+  </tr>
+  <tr>
+   <td><code>"LaunchMail"</code></td>
+   <td>The <kbd>Mail</kbd> key. This is often displayed with an icon.</td>
+   <td><code>VK_LAUNCH_MAIL</code> (0xB4)<br>
+    <code>APPCOMMAND_LAUNCH_MAIL</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Mail</code> (0x1008FF19)<br>
+    <code>Qt::Key_LaunchMail</code> (0x010000A0)</td>
+   <td><code>KEYCODE_ENVELOPE</code> (65)</td>
+  </tr>
+  <tr>
+   <td><code>"LaunchMediaPlayer"</code> [1]</td>
+   <td>The <kbd>Media Player</kbd> key.</td>
+   <td><code>VK_LAUNCH_MEDIA_SELECT</code> (0xB5)<br>
+    <code>APPCOMMAND_LAUNCH_MEDIA_SELECT</code></td>
+   <td></td>
+   <td><code>GDK_KEY_CD</code> (0x1008FF53)<br>
+    <code>GDK_KEY_Video</code> (0x1008FF87)<br>
+    <code>GDK_KEY_AudioMedia</code> (0x1008FF32)<br>
+    <code>Qt::Key_LaunchMedia</code> (0x010000A1)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchMusicPlayer"</code> [5]</td>
+   <td>The <kbd>Music Player</kbd> key, often labeled with an icon.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Music</code> (0x1008FF92)<br>
+    <code>Qt::Key_Music</code> (0x010000FD)</td>
+   <td><code>KEYCODE_MUSIC</code> (209)</td>
+  </tr>
+  <tr>
+   <td><code>"LaunchMyComputer"</code> [5]</td>
+   <td>The <kbd>My Computer</kbd> key on Windows keyboards. This is often used as a generic application launcher key (<code>APPCOMMAND_LAUNCH_APP1</code>).</td>
+   <td><code>APPCOMMAND_LAUNCH_APP1</code></td>
+   <td></td>
+   <td><code>GDK_KEY_MyComputer</code> (0x1008FF33)<br>
+    <code>GDK_KEY_Explorer</code> (0x1008FF5D)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchPhone"</code></td>
+   <td>The <kbd>Phone</kbd> key, to open the phone dialer application if one is present.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Phone</code> (0x1008FF6E)<br>
+    <code>Qt::Key_Phone</code> (0x010000E3)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchScreenSaver"</code> [5]</td>
+   <td>The <kbd>Screen Saver</kbd> key.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_ScreenSaver</code> (0x1008FF2D)<br>
+    <code>Qt::Key_ScreenSaver</code> (0x010000BA)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchSpreadsheet"</code> [4]</td>
+   <td>The <kbd>Spreadsheet</kbd> key. This key may be labeled with an icon.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Excel</code> (0x1008FF5C)<br>
+    <code>Qt::Key_Excel</code> (0x010000D4)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchWebBrowser"</code> [4]</td>
+   <td>The <kbd>Web Browser</kbd> key. This key is frequently labeled with an icon.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_WWW</code> (0x1008FF2E)<br>
+    <code>Qt::Key_WWW</code> (0x010000BB)</td>
+   <td><code>KEYCODE_EXPLORER</code> (64)</td>
+  </tr>
+  <tr>
+   <td><code>"LaunchWebCam"</code> [5]</td>
+   <td>The <kbd>WebCam</kbd> key. Opens the webcam application.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_WebCam</code> (0x1008FF8F)<br>
+    <code>Qt::Key_WebCam</code> (0x010000FA)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchWordProcessor"</code> [5]</td>
+   <td>The <kbd>Word Processor</kbd> key. This may be an icon of a specific word processor application, or a generic document icon.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Word</code> (0x1008FF89)<br>
+    <code>Qt::Key_Word</code> (0x010000F4)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchApplication1"</code> [2]</td>
+   <td>The first generic application launcher button.</td>
+   <td><code>VK_LAUNCH_APP1</code> (0xB6)<br>
+    <code>APPCOMMAND_LAUNCH_APP1</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Launch0</code> (0x1008FF40)<br>
+    <code>Qt::Key_Launch0</code> (0x010000A2)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchApplication2"</code> [3]</td>
+   <td>The second generic application launcher button.</td>
+   <td><code>VK_LAUNCH_APP2</code> (0xB7)<br>
+    <code>APPCOMMAND_LAUNCH_APP2</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Launch1</code> (0x1008FF41)<br>
+    <code>Qt::Key_Launch1</code> (0x010000A3)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchApplication3"</code></td>
+   <td>The third generic application launcher button.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Launch2</code> (0x1008FF42)<br>
+    <code>Qt::Key_Launch2</code> (0x010000A4)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchApplication4"</code></td>
+   <td>The fourth generic application launcher button.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Launch3</code> (0x1008FF43)<br>
+    <code>Qt::Key_Launch3</code> (0x010000A5)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchApplication5"</code></td>
+   <td>The fifth generic application launcher button.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Launch4</code> (0x1008FF44)<br>
+    <code>Qt::Key_Launch4</code> (0x010000A6)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchApplication6"</code></td>
+   <td>The sixth generic application launcher button.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Launch5</code> (0x1008FF45)<br>
+    <code>Qt::Key_Launch5</code> (0x010000A7)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchApplication7"</code></td>
+   <td>The seventh generic application launcher button.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Launch6</code> (0x1008FF46)<br>
+    <code>Qt::Key_Launch6</code> (0x010000A8)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchApplication8"</code></td>
+   <td>The eighth generic application launcher button.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Launch7</code> (0x1008FF47)<br>
+    <code>Qt::Key_Launch7</code> (0x010000A9)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchApplication9"</code></td>
+   <td>The ninth generic application launcher button.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Launch8</code> (0x1008FF48)<br>
+    <code>Qt::Key_Launch8</code> (0x010000AA)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchApplication10"</code></td>
+   <td>The 10th generic application launcher button.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Launch9</code> (0x1008FF49)<br>
+    <code>Qt::Key_Launch9</code> (0x010000AB)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchApplication11"</code></td>
+   <td>The 11th generic application launcher button.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_LaunchA</code> (0x1008FF4A)<br>
+    <code>Qt::Key_LaunchA</code> (0x010000AC)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchApplication12"</code></td>
+   <td>The 12th generic application launcher button.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_LaunchB</code> (0x1008FF4B)<br>
+    <code>Qt::Key_LaunchB</code> (0x010000AD)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchApplication13"</code></td>
+   <td>The 13th generic application launcher button.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_LaunchC</code> (0x1008FF4C)<br>
+    <code>Qt::Key_LaunchC</code> (0x010000AE)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchApplication14"</code></td>
+   <td>The 14th generic application launcher button.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_LaunchD</code> (0x1008FF4D)<br>
+    <code>Qt::Key_LaunchD</code> (0x010000AF)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchApplication15"</code></td>
+   <td>The 15th generic application launcher button.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_LaunchE</code> (0x1008FF4E)<br>
+    <code>Qt::Key_LaunchE</code> (0x010000B0)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchApplication16"</code></td>
+   <td>The 16th generic application launcher button.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_LaunchF</code> (0x1008FF4F)<br>
+    <code>Qt::Key_LaunchF</code> (0x010000B1)</td>
+   <td></td>
+  </tr>
+ </thead>
+</table>
+
+<p>[1] Internet Explorer, Edge, and Firefox (36 and earlier) use <code>"SelectMedia"</code> instead of <code>"LaunchMediaPlayer"</code>. Firefox 37 through Firefox 48 use <code>"MediaSelect"</code>. Firefox 49 has been updated to match the latest specification, and to return <code>"LaunchMediaPlayer"</code>.</p>
+
+<p>[2] Google Chrome 57 and earlier returned <code>"LaunchMyComputer"</code> instead of <code>"LaunchApplication1"</code>. See <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=612743">Chrome Bug 612743</a> for more information.</p>
+
+<p>[3] Google Chrome 57 and earlier returned <code>"LaunchCalculator"</code> instead of <code>"LaunchApplication2"</code>. See <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=612743">Chrome Bug 612743</a> for more information.</p>
+
+<p>[4] Prior to Firefox 37, Firefox returned the key code <code>"LaunchApplication1"</code> instead of "<code>LaunchWebBrowser"</code> for the Web browser key.</p>
+
+<p>[5] Firefox introduced support for this key in Firefox 37; prior to that, this key was reported as <code>"Unidentified"</code>.</p>
+
+<h2 id="Browser_control_keys">Browser control keys</h2>
+
+<p>Some keyboards include special keys for controlling Web browsers. Those keys follow.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;"><code>KeyboardEvent.key</code> Value</th>
+   <th rowspan="2" scope="col" style="text-align: left;">Description</th>
+   <th colspan="4" scope="col" style="text-align: center;">Virtual Keycode</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+  <tr>
+   <td><code>"BrowserBack"</code></td>
+   <td>Navigates to the previous content or page in the current Web view's history.</td>
+   <td><code>VK_BROWSER_BACK</code> (0xA6)<br>
+    <code>APPCOMMAND_BROWSER_BACKWARD</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Back</code> (0x1008FF26)<br>
+    <code>Qt::Key_Back</code> (0x01000061)</td>
+   <td><code>KEYCODE_BACK</code> (4)</td>
+  </tr>
+  <tr>
+   <td><code>"BrowserFavorites"</code> [1]</td>
+   <td>Opens the user's list of bookmarks/favorites.</td>
+   <td><code>VK_BROWSER_FAVORITES</code> (0xAB)<br>
+    <code>APPCOMMAND_BROWSER_FAVORITES</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Favorites</code> (0x1008FF30)<br>
+    <code>GDK_KEY_MySites</code> (0x1008FF67)<br>
+    <code>Qt::Favorites</code> (0x01000091)</td>
+   <td><code>KEYCODE_BOOKMARK</code> (174)</td>
+  </tr>
+  <tr>
+   <td><code>"BrowserForward"</code></td>
+   <td>Navigates to the next content or page in the current Web view's history.</td>
+   <td><code>VK_BROWSER_FORWARD</code> (0xA7)<br>
+    <code>APPCOMMAND_BROWSER_FORWARD</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Forward</code> (0x1008FF27)<br>
+    <code>Qt::Key_Forward</code> (0x01000062)</td>
+   <td><code>KEYCODE_FORWARD</code> (125)</td>
+  </tr>
+  <tr>
+   <td><code>"BrowserHome"</code></td>
+   <td>Navigates to the user's preferred home page.</td>
+   <td><code>VK_BROWSER_HOME</code> (0xAC)<br>
+    <code>APPCOMMAND_BROWSER_HOME</code></td>
+   <td></td>
+   <td><code>GDK_KEY_HomePage</code> (0x1008FF18)<br>
+    <code>Qt::Key_HomePage</code> (0x01000090)</td>
+   <td><code>KEYCODE_HOME</code> (3)</td>
+  </tr>
+  <tr>
+   <td><code>"BrowserRefresh"</code></td>
+   <td>Refreshes the current page or contentl.</td>
+   <td><code>VK_BROWSER_REFRESH</code> (0xA8)<br>
+    <code>APPCOMMAND_BROWSER_REFRESH</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Refresh</code> (0x1008FF29)<br>
+    <code>GDK_KEY_Reload</code> (0x1008FF73)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"BrowserSearch"</code></td>
+   <td>Activates the user's preferred search engine or the search interface within their browser.</td>
+   <td><code>VK_BROWSER_SEARCH</code> (0xAA)<br>
+    <code>APPCOMMAND_BROWSER_SEARCH</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Search</code> (0x1008FF1B)<br>
+    <code>Qt::Key_Search</code> (0x01000092)</td>
+   <td><code>KEYCODE_SEARCH</code> (84)</td>
+  </tr>
+  <tr>
+   <td><code>"BrowserStop"</code></td>
+   <td>Stops loading the currently displayed Web view or content.</td>
+   <td><code>VK_BROWSER_STOP</code> (0xA9)<br>
+    <code>APPCOMMAND_BROWSER_STOP</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Stop</code> (0x1008FF28)<br>
+    <code>Qt::Key_Search</code> (0x01000063)</td>
+   <td></td>
+  </tr>
+ </thead>
+</table>
+
+<p>[1] Prior to Firefox 37, this key's value was reported as <code>"Unidentified"</code>.</p>
+
+<h2 id="Numeric_keypad_keys">Numeric keypad keys</h2>
+
+<p>These keys are found on the keyboard's numeric keypad. However, not all are present on every keyboard. Although typical numeric keypads have numeric keys from <kbd>0</kbd> to <kbd>9</kbd> (encoded as <code>"0"</code> through <code>"9"</code>), some multimedia keyboards include additional number keys for higher numbers.</p>
+
+<div class="note">
+<p>The <kbd>10</kbd> key, if present, generates events with the <code>key</code> value of <code>"0"</code>.</p>
+</div>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;"><code>KeyboardEvent.key</code> Value</th>
+   <th rowspan="2" scope="col" style="text-align: left;">Description</th>
+   <th colspan="4" scope="col" style="text-align: center;">Virtual Keycode</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+  <tr>
+   <td><code>"Decimal"</code> [1] {{obsolete_inline}}</td>
+   <td>The decimal point key (typically <kbd>.</kbd> or <kbd>,</kbd> depending on the region. In newer browsers, this value to simply be the character generated by the decimal key (one of those two characters). [1]</td>
+   <td><code>VK_DECIMAL</code> (0x6E)</td>
+   <td><code>kVK_ANSI_KeypadDecimal</code> (0x41)</td>
+   <td><code>GDK_KEY_KP_Decimal</code> (0xFFAE)<br>
+     </td>
+   <td><code>KEYCODE_NUMPAD_DOT</code> (158)</td>
+  </tr>
+  <tr>
+   <td><code>"Key11"</code></td>
+   <td>The <kbd>11</kbd> key found on certain media numeric keypads.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Key12"</code></td>
+   <td>The <kbd>12</kbd> key found on certain media numeric keypads.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Multiply"</code> [1] {{obsolete_inline}}</td>
+   <td>The numeric keypad's multiplication key, <kbd>*</kbd>.</td>
+   <td><code>VK_MULTIPLY</code> (0x6A)</td>
+   <td><code>kVK_ANSI_KeypadMultiply</code> (0x43)</td>
+   <td><code>GDK_KEY_KP_Multiply</code> (0xFFAA)<br>
+    <code>Qt::Key_Multiply</code> (0x0D7)</td>
+   <td><code>KEYCODE_NUMPAD_MULTIPLY</code> (155)</td>
+  </tr>
+  <tr>
+   <td><code>"Add"</code> [1] {{obsolete_inline}}</td>
+   <td>The numeric keypad's addition key, <kbd>+</kbd>.</td>
+   <td><code>VK_ADD</code> (0x6B)</td>
+   <td><code>kVK_ANSI_KeypadPlus</code> (0x45)</td>
+   <td><code>GDK_KEY_KP_Add</code> (0xFFAB)</td>
+   <td><code>KEYCODE_NUMPAD_ADD</code> (157)</td>
+  </tr>
+  <tr>
+   <td><code>"Clear"</code></td>
+   <td>The numeric keypad's <kbd>Clear</kbd> key.</td>
+   <td></td>
+   <td><code>kVK_ANSI_KeypadClear</code> (0x47)</td>
+   <td><code>GDK_KEY_Clear</code> (0xFF0B)<br>
+    <code>Qt::Key_Clear</code> (0x0100000B)</td>
+   <td><code>KEYCODE_CLEAR</code> (28)</td>
+  </tr>
+  <tr>
+   <td><code>"Divide"</code> [1] {{obsolete_inline}}</td>
+   <td>The numeric keypad's division key, /.</td>
+   <td><code>VK_DIVIDE</code> (0x6F)</td>
+   <td><code>kVK_ANSI_KeypadDivide</code> (0x4B)</td>
+   <td><code>GDK_KEY_KP_Divide</code> (0xFFAF)<br>
+    <code>Qt::Key_Slash</code> (0x2F)</td>
+   <td><code>KEYCODE_NUMPAD_DIVIDE</code> (154)</td>
+  </tr>
+  <tr>
+   <td><code>"Subtract"</code> [1] {{obsolete_inline}}</td>
+   <td>The numeric keypad's subtraction key, -.</td>
+   <td><code>VK_SUBTRACT</code> (0x6D)</td>
+   <td><code>kVK_ANSI_KeypadMinus</code> (0x4E)</td>
+   <td><code>GDK_KEY_KP_Subtract</code> (0xFFAD)</td>
+   <td><code>KEYCODE_NUMPAD_SUBTRACT</code> (156)</td>
+  </tr>
+  <tr>
+   <td><code>"Separator"</code> [1]</td>
+   <td>The numeric keypad's places separator character (in the United States, this is a comma, but elsewhere it is frequently a period).</td>
+   <td><code>VK_SEPARATOR</code> (0x6C)</td>
+   <td><code>kVK_JIS_KeypadComma</code> (0x5F)</td>
+   <td><code>GDK_KEY_KP_Separator</code> (0xFFAC)<br>
+     </td>
+   <td><code>KEYCODE_NUMPAD_COMMA</code> (159)</td>
+  </tr>
+  <tr>
+   <td>"0" through "9"</td>
+   <td>The actual digit keys on the numeric keypad.</td>
+   <td><code>VK_NUMPAD0</code> (0x60) - <code>VK_NUMPAD9</code> (0x69)</td>
+   <td><code>kVK_Keypad0</code> (0x52) - <code>kVK_Keypad9</code> (0x5C)</td>
+   <td><code>GDK_KEY_KP_0</code> (0xFFB0) - <code>GDK_KEY_KP_9</code> (0xFFB9)</td>
+   <td><code>KEYCODE_NUMPAD_0</code> (144) - <code>KEYCODE_NUMPAD_9</code> (153)</td>
+  </tr>
+ </thead>
+</table>
+
+<p>[1] While older browsers used words like <code>"Add"</code>, <code>"Decimal"</code>, <code>"Multiply"</code>, and so forth modern browsers identify these using the actual character (<code>"+"</code>, <code>"."</code>, <code>"*"</code>, and so forth).</p>
diff --git a/files/fr/web/api/keyboardevent/keyboardevent/index.html b/files/fr/web/api/keyboardevent/keyboardevent/index.html
new file mode 100644
index 0000000000..2f63832ae4
--- /dev/null
+++ b/files/fr/web/api/keyboardevent/keyboardevent/index.html
@@ -0,0 +1,86 @@
+---
+title: KeyboardEvent()
+slug: Web/API/KeyboardEvent/KeyboardEvent
+tags:
+  - API
+  - Clavier
+  - Constructeur
+  - DOM
+  - évènements
+translation_of: Web/API/KeyboardEvent/KeyboardEvent
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p>Le constructeur <strong><code>KeyboardEvent()</code></strong> crée un nouveau {{domxref("KeyboardEvent")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"> <em>event</em> = new KeyboardEvent(<em>typeArg</em>, <em>KeyboardEventInit</em>);</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><em>typeArg</em></dt>
+ <dd>Une représentation du nom de l'évènement sous forme de {{domxref("DOMString")}}.</dd>
+ <dt><em>KeyboardEventInit</em>{{optional_inline}}</dt>
+</dl>
+
+<dl>
+ <dd>Un dictionnaire <code>KeyboardEventInit</code> ayant les champs suivants :
+
+ <ul>
+  <li><code>"key"</code>, optionnel et par défaut <code>""</code>, de type {{domxref("DOMString")}}, qui définit la valeur de {{domxref("KeyboardEvent.key")}}.</li>
+  <li><code>"code"</code>, optionnel et par défaut <code>""</code>, de type {{domxref("DOMString")}}, qui définit la valeur de {{domxref("KeyboardEvent.code")}}.</li>
+  <li><code>"location"</code>, optionnel et par défaut <code>0</code>, de type <code>unsigned long</code>, qui définit la valeur de {{domxref("KeyboardEvent.location")}}.</li>
+  <li><code>"ctrlKey"</code>, optionnel et par défaut <code>false</code>, de type {{jsxref("Boolean")}}, qui définit la valeur de {{domxref("KeyboardEvent.ctrlKey")}}.</li>
+  <li><code>"shiftKey"</code>, optionnel et par défaut <code>false</code>, de type {{jsxref("Boolean")}}, qui définit la valeur de {{domxref("KeyboardEvent.shiftKey")}}.</li>
+  <li><code>"altKey"</code>, optionnel et par défaut <code>false</code>, de type {{jsxref("Boolean")}}, qui définit la valeur de {{domxref("KeyboardEvent.altKey")}}.</li>
+  <li><code>"metaKey"</code>, optionnel et par défaut <code>false</code>, de type {{jsxref("Boolean")}}, qui définit la valeur de {{domxref("KeyboardEvent.metaKey")}}.</li>
+  <li><code>"repeat"</code>, optionnel et par défaut <code>false</code>, de type {{jsxref("Boolean")}}, qui définit la valeur de {{domxref("KeyboardEvent.repeat")}}.</li>
+  <li><code>"isComposing"</code>, optionnel et par défaut <code>false</code>, de type {{jsxref("Boolean")}}, qui définit la valeur de {{domxref("KeyboardEvent.isComposing")}}.</li>
+  <li><code>"charCode"</code>, optionnel et par défaut <code>0</code>, de type <code>unsigned long</code>, qui définit la valeur du déprécié {{domxref("KeyboardEvent.charCode")}}.</li>
+  <li><code>"keyCode"</code>, optionnel et par défaut <code>0</code>, de type <code>unsigned long</code>, qui définit la valeur du déprécié {{domxref("KeyboardEvent.keyCode")}}.</li>
+  <li><code>"which"</code>, optionnel et par défaut <code>0</code>, de type <code>unsigned long</code>, qui définit la valeur du déprécié {{domxref("KeyboardEvent.which")}}.</li>
+ </ul>
+
+ <div class="note">
+ <p><em>Le dictionnaire <code>KeyboardEventInit</code></em><em> accepte aussi les champs des dictionnaires  {{domxref("UIEvent.UIEvent", "UIEventInit")}} et {{domxref("Event.Event", "EventInit")}}.</em></p>
+ </div>
+ </dd>
+</dl>
+
+<h2 id="Specifications" name="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('UI Events','#interface-keyboardevent','KeyboardEvent()')}}</td>
+   <td>{{Spec2('UI Events')}}</td>
+   <td>Définition actuelle.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events','#interface-KeyboardEvent','KeyboardEvent()')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.KeyboardEvent.KeyboardEvent")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("KeyboardEvent")}}, l'interface des objets qu'il construit.</li>
+</ul>
diff --git a/files/fr/web/api/localfilesystem/index.html b/files/fr/web/api/localfilesystem/index.html
new file mode 100644
index 0000000000..7740dded97
--- /dev/null
+++ b/files/fr/web/api/localfilesystem/index.html
@@ -0,0 +1,202 @@
+---
+title: LocalFileSystem
+slug: Web/API/LocalFileSystem
+translation_of: Web/API/LocalFileSystem
+---
+<div>{{APIRef("File System API")}}{{non-standard_header()}}</div>
+
+<p>L'interface <code>LocalFileSystem</code>, appartenant à l'API <a href="/fr/docs/Web/API/File_and_Directory_Entries_API/Introduction" title="en/DOM/File_API/File_System_APIB">File System</a> fournit un accès à un système de fichier placé dans un bac à sable (<em>sandboxed file system</em>). Les méthodes de cette interface sont implémentées par les objets implémentants <code><a href="/fr/docs/Web/API/Window" title="cn/DOM/window">Window</a></code> ou <code><a href="/fr/docs/Web/API/Worker" title="En/DOM/Worker">Worker</a></code>.</p>
+
+<h2 id="Concepts_de_base">Concepts de base</h2>
+
+<h3 id="Créer_un_nouvel_espace_de_stockage">Créer un nouvel espace de stockage</h3>
+
+<p>Il est possible de demander l'accès à un système de fichier dans un bac à sable en utilisant la méthode <code>window.requestFileSystem()</code>. Lorsque la création de cet espace est effectuée, une fonction de rappel (<em>callback</em>) est appelée avec un objet <code><a href="/fr/docs/Web/API/FileSystem" title="en/DOM/File_API/File_System_API/FileSystem">FileSystem</a></code> contenant deux propriétés : le nom et la racine du système de fichier ainsi créé.</p>
+
+<p>Il est possible d'appeler cette méthode plusieurs fois pour différentes situations : on peut créer un espace de stockage temporaire et/ou un espace de stockage permanent (voir <a href="/fr/docs/Web/API/File_and_Directory_Entries_API/Introduction" title="https://developer.mozilla.org/en/DOM/File_APIs/Filesystem/Basic_Concepts_About_the_Filesystem_API#The_File_System_API_can_use_different_storage_types">l'article sur les concepts de base</a> pour approfondir). On peut ainsi créer un espace de stockage temporaire pour mettre en cache certains fichiers (des images par exemple) afin d'améliorer les performances ou créer un espace de stockage pour des données applicatives (ex. des brouillons de messages créés par l'utilisateur) qui ne devraient pas être supprimées avant d'être répliquées sur les serveurs distants.</p>
+
+<h3 id="Utiliser_un_stockage_persistent">Utiliser un stockage persistent</h3>
+
+<p>La méthode <code>requestFileSystem()</code> permet d'indiquer si on souhaite un stockage persistent ou temporaire. Un espace de stockage persistent est conservé dans le navigateur tant que l'utilisateur ou que l'application ne l'a pas supprimé. Pour créer un espace de stockage permanent, l'utilisateur doit fournir la permission à l'application de l'utiliser. En revanche, un espace de stockage temporaire peut être créé sans permission mais peut être libéré par le navigateur à tout moment.</p>
+
+<p>Pour utiliser un stockage permanent, Chrome expose la méthode <code>requestQuota</code>. Il faut invoquer cette méthode ainsi :</p>
+
+<pre class="notranslate">var requestedBytes = 1024*1024*10; // 10MB
+
+navigator.webkitPersistentStorage.requestQuota (
+    requestedBytes, function(grantedBytes) {
+        window.requestFileSystem(PERSISTENT, grantedBytes, onInitFs, errorHandler);
+
+    }, function(e) { console.log('Error', e); }
+);
+</pre>
+
+<p>L'utilisateur doit fournir la permission à l'application pour enregistrer des données locales avant que l'application puisse utiliser le stockage permanent. Une fois que l'utilisateur a autorisé l'accès, il n'est plus nécessaire d'appeler <code>requestQuota()</code> (des appels ultérieurs n'auront aucun effet).</p>
+
+<p>Une autre API, <em>Quota Management</em>, permet de connaître le quota alloué et l'espace consommé pour l'origine courante. On peut ainsi utiliser la méthode <code>window.webkitPersistentStorage.queryUsageAndQuota()</code>. Pour en savoir plus, voir cette <a href="http://stackoverflow.com/a/29662985/89484">réponse StackOverflow</a>.</p>
+
+<h3 id="Origine_unique">Origine unique</h3>
+
+<p>Le système de fichier est accessible depuis une seule origine. Cela signifie que votre application ne peut pas lire ou écrire des fichiers dans les systèmes de fichier éventuellement créés par d'autres applications. Par ailleurs, votre application ne peut pas accéder aux fichiers d'un répertoire arbitraire (ex. Mes Images, Mes Documents) sur le disque de l'utilisateur. Pour plus d'informations, voir <a href="/fr/docs/Web/API/File_and_Directory_Entries_API/Introduction" title="https://developer.mozilla.org/en/DOM/File_APIs/Filesystem/Basic_Concepts_About_the_Filesystem_API#Restrictions">l'article d'introduction aux concepts de base</a>.</p>
+
+<h3 id="Exemple">Exemple</h3>
+
+<p>Voici un fragment de code qui illustre comment demander l'accès à un stockage sur le système de fichier.</p>
+
+<pre class="brush: js notranslate">// Gestion des préfixes spécifiques au navigateur
+window.requestFileSystem  = window.requestFileSystem || window.webkitRequestFileSystem;
+
+// Le premier paramètre indique le type de stockage
+// Ensuite, on indique la taille de l'espace demandé (en octets)
+// initFs est la fonction à invoquer en cas de succès
+// errorHandler est la fonction à invoquer en cas d'erreur ou de refus d'accès
+
+window.requestFileSystem(window.PERSISTENT, 1024*1024,onInitFs,errorHandler);
+</pre>
+
+<h2 id="Constantes">Constantes</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Constante</th>
+   <th scope="col">Valeur</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>TEMPORARY</code></td>
+   <td><code>0</code></td>
+   <td>Un espace de stockage temporaire qui peut être supprimé par le navigateur lorsque celui-ci l'estime nécessaire.</td>
+  </tr>
+  <tr>
+   <td><code>PERSISTENT</code></td>
+   <td><code>1</code></td>
+   <td>Un espace de stockage qui reste permanent dans le navigateur tant que l'utilisateur ou que l'application ne l'a pas supprimé. L'utilisateur doit fournir une permission avant qu'une application puisse utiliser ce type de stockage.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<h3 id="requestFileSystem" name="requestFileSystem"><code>requestFileSystem()</code></h3>
+
+<p>Cette méthode permet de demander l'accès à uyn système de fichier pour stocker des données. On peut ainsi accéder à un système de fichier placé dans un bac à sable en demandant un objet <code>LocalFileSystem</code> avec la méthode globale <code>window.requestFileSystem()</code>.</p>
+
+<pre class="notranslate">void requestFileSystem(
+  in unsigned short type,
+  in unsigned long long size,
+  in FileSystemCallback successCallback,
+  in ErrorCallback errorCallback
+);</pre>
+
+<h5 id="Paramètres">Paramètres</h5>
+
+<dl>
+ <dt><code>type</code></dt>
+ <dd>Le type de stockage sur le système de fichier. La valeur de cet argument peut être <code>TEMPORARY</code> ou <code>PERSISTENT</code>.</dd>
+ <dt><code>size</code></dt>
+ <dd>L'espace de stockage, exprimé en octets, nécessaire à l'application.</dd>
+ <dt><code>successCallback</code></dt>
+ <dd>Une fonction de rappel à invoquer lorsque le navigateur fournit bien l'accès au système de fichier. Cette fonction reçoit en argument un objet <code><a href="/fr/docs/Web/API/FileSystem" title="en/DOM/File_API/File_System_API/FileSystem">FileSystem</a></code> avec deux propriétés :
+ <ul>
+  <li><code>name</code> - le nom unique, assigné par le navigateur au système de fichiers.</li>
+  <li><code>root</code> - un objet <code>DirectoryEntry</code> en lecture seule qui représente la racine du système de fichier.</li>
+ </ul>
+ </dd>
+ <dt><code>errorCallback</code></dt>
+ <dd>Une fonction de rappel à invoquer en cas d'erreur ou lorsque l'accès n'est pas autorisé. Cette fonction reçoit un objet <code>FileError</code> comme argument.</dd>
+</dl>
+
+<h5 id="Valeur_de_retour">Valeur de retour</h5>
+
+<dl>
+ <dt><code>void</code></dt>
+</dl>
+
+<h5 id="Exceptions">Exceptions</h5>
+
+<p>Cette méthode peut lever une exception <code><a href="/en-US/docs/Web/API/FileError" title="en/DOM/File_API/File_System_API/FileException">FileError</a></code> avec le code suivant :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Exception</th>
+   <th scope="col">Description</th>
+  </tr>
+  <tr>
+   <td><code>SECURITY_ERROR</code></td>
+   <td>L'application n'est pas autorisée à accéder à l'interface <em>File System</em>. Par exemple, il est interdit d'utiliser <code>file://</code>. Pour plus de détails, consulter <a href="/fr/docs/Web/API/File_and_Directory_Entries_API/Introduction#restrictions" title="https://developer.mozilla.org/en/DOM/File_APIs/Filesystem/Basic_Concepts_About_the_Filesystem_API#You_cannot_run_your_app_from_file:.2F.2F">l'article d'introduction aux concepts de base</a>.</td>
+  </tr>
+ </thead>
+</table>
+
+<h3 id="resolveLocalFileSystemURL" name="resolveLocalFileSystemURL()"><code>resolveLocalFileSystemURL()</code></h3>
+
+<p>Cette méthode permet de consulter une entrée pour un fichier ou un répertoire avec une URL locale.</p>
+
+<pre class="notranslate">void resolveLocalFileSystemURL(
+  in DOMString url,
+  in EntryCallback successCallback,
+  in optional ErrorCallback errorCallback
+);
+</pre>
+
+<h5 id="Paramètres_2">Paramètres</h5>
+
+<dl>
+ <dt><code>url</code></dt>
+ <dd>L'URL du fichier local ou du répertoire sur le système de fichier.</dd>
+ <dt><code>successCallback</code></dt>
+ <dd>Une fonction de rappel à invoquer lorsque le navigateur fournit le fichier ou le répertoire de l'URL indiquée.</dd>
+ <dt><code>errorCallback</code></dt>
+ <dd>Une fonction de rappel à invoquer en cas d'erreur ou lorsque l'accès est refusé.</dd>
+</dl>
+
+<h5 id="Valeur_de_retour_2">Valeur de retour</h5>
+
+<dl>
+ <dt><code>void</code></dt>
+</dl>
+
+<h5 id="Exceptions_2">Exceptions</h5>
+
+<p>Cette méthode peut lever une exception <code><a href="/fr/docs/Web/API/FileError" title="en/DOM/File_API/File_System_API/FileException">FileError</a></code> avec l'un des code suivants :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Exception</th>
+   <th scope="col">Description</th>
+  </tr>
+  <tr>
+   <td><code>ENCODING_ERR</code></td>
+   <td>La syntaxe de l'URL est invalide.</td>
+  </tr>
+  <tr>
+   <td><code>NOT_FOUND_ERR</code></td>
+   <td>La structure de l'URL est correcte mais elle réfère à une ressource qui n'existe pas.</td>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>SECURITY_ERR</code></td>
+   <td>L'application n'est pas autorisée à accéder à l'interface pour le système de fichier.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Voir <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> pour contribuer à ces données de compatibilité.</div>
+
+<p>{{Compat("api.LocalFileSystem")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La spécification : {{spec("http://dev.w3.org/2009/dap/file-system/pub/FileSystem/", "File API: Directories and System Specification", "WD")}}</li>
+ <li><a href="/fr/docs/Web/API/File_and_Directory_Entries_API/Introduction" title="en/DOM/File_API/File_System_API">La référence pour l'API <em>File System</em></a></li>
+ <li><a href="/fr/docs/Web/API/File_and_Directory_Entries_API/Introduction" title="en/DOM/File_APIs/Filesystem/Basic_Concepts_About_the_Filesystem_API">Une introduction aux concepts de base de l'API <em>File System</em></a></li>
+</ul>
diff --git a/files/fr/web/api/location/assign/index.html b/files/fr/web/api/location/assign/index.html
new file mode 100644
index 0000000000..3e0476b3be
--- /dev/null
+++ b/files/fr/web/api/location/assign/index.html
@@ -0,0 +1,71 @@
+---
+title: Location.assign()
+slug: Web/API/Location/assign
+tags:
+  - API
+  - JavaScript
+  - Location
+  - Méthode
+  - Reference
+  - WebAPI
+translation_of: Web/API/Location/assign
+---
+<p>{{ APIRef("Location") }}</p>
+
+<p>La méthode <code><strong>Location.assign()</strong></code> charge et affiche dans la fenêtre le document situé à l'URL spécifiée.</p>
+
+<p>Si l'action est impossible à cause d'une violation de sécurité, une {{domxref("DOMException")}} de type <code>SECURITY_ERROR</code> est lancée. Cela se produit si l'origine du script appelant est différente de l'origine de la page initialement désignée par l'objet {{domxref("Location")}}, principalement quand le script est hébergé sur un autre domaine.</p>
+
+<p>Si l'URL spécifiée n'est pas valide, une {{domxref("DOMException")}} de type <code>SYNTAX_ERROR</code> est lancée.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>object</em>.assign(<em>url</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><em>url</em></dt>
+ <dd>Une {{domxref("DOMString")}} contenant l'URL de la page vers laquelle naviguer.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js">// Navigue vers l'article Location.reload
+document.location.assign('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');</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('HTML WHATWG', "history.html#dom-location-assign", "Location.assign()")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Pas de différence avec {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "browsers.html#dom-location-assign", "Location.assign()")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité">Compatibilité</h2>
+
+
+
+<p>{{Compat("api.Location.assign")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("Location")}} à laquelle appartient cette méthode.</li>
+ <li>Méthodes similaires : {{domxref("Location.replace()")}} et {{domxref("Location.reload()")}}.</li>
+</ul>
diff --git a/files/fr/web/api/location/index.html b/files/fr/web/api/location/index.html
new file mode 100644
index 0000000000..52372c8da1
--- /dev/null
+++ b/files/fr/web/api/location/index.html
@@ -0,0 +1,155 @@
+---
+title: Location
+slug: Web/API/Location
+tags:
+  - API
+  - HTML DOM
+  - Interface
+  - JavaScript
+  - Location
+  - Reference
+translation_of: Web/API/Location
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>L'interface <strong><code>Location</code></strong> représente l'emplacement de l'objet auquel elle est liée. Les changements effectués dessus sont reflétés sur l'objet lié. Les deux interfaces {{domxref("Document")}} et {{domxref("Window")}} sont liées à une <code>Location</code>, accessible via {{domxref("Document.location")}} et {{domxref("Window.location")}} respectivement.</p>
+
+<h2 id="Anatomie_dune_Location">Anatomie d'une Location</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;span id="href" title="href"&gt;&lt;span id="protocol" title="protocol"&gt;http:&lt;/span&gt;//&lt;span id="host" title="host"&gt;&lt;span id="hostname" title="hostname"&gt;example.org&lt;/span&gt;:&lt;span id="port" title="port"&gt;8888&lt;/span&gt;&lt;/span&gt;&lt;span id="pathname" title="pathname"&gt;/foo/bar&lt;/span&gt;&lt;span id="search" title="search"&gt;?q=baz&lt;/span&gt;&lt;span id="hash" title="hash"&gt;#bang&lt;/span&gt;&lt;/span&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">html, body {height:100%;}
+html {display:table; width:100%;}
+body {display:table-cell; text-align:center; vertical-align:middle; font-family:georgia; font-size:230%; line-height:1em; white-space:nowrap;}
+
+[title] {position:relative; display:inline-block; box-sizing:border-box; /*border-bottom:.5em solid;*/ line-height:2em; cursor:pointer;}
+
+[title]:before {content:attr(title); font-family:monospace; position:absolute; top:100%; width:100%; left:50%; margin-left:-50%; font-size:40%; line-height:1.5; background:black;}
+[title]:hover:before,
+:target:before {background:black; color:yellow;}
+
+[title] [title]:before {margin-top:1.5em;}
+[title] [title] [title]:before {margin-top:3em;}
+
+[title]:hover,
+:target {position:relative; z-index:1; outline:50em solid rgba(255,255,255,.8);}</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">[].forEach.call(document.querySelectorAll('[title][id]'), function (node) {
+  node.addEventListener("click", function(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    window.location.hash = '#' + $(this).attr('id');
+  });
+});
+[].forEach.call(document.querySelectorAll('[title]'), function (node) {
+  node.addEventListener("click", function(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    window.location.hash = '';
+  });
+});</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample('Anatomy_Of_Location')}}</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>L'interface <code>Location</code> n'hérite d'aucune propriété, mais implémente celles de {{domxref("URLUtils")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("Location.href")}}</dt>
+ <dd>Une {{domxref("DOMString")}} contenant l'URL entière.</dd>
+ <dt>{{domxref("Location.protocol")}}</dt>
+ <dd>Une {{domxref("DOMString")}} contenant le schéma de protocole de l'URL, incluant le <code>':'</code> final.</dd>
+ <dt>{{domxref("Location.host")}}</dt>
+ <dd>Une {{domxref("DOMString")}} contenant l'hôte, c'est-à-dire le <em>domaine</em>, un <code>':'</code>, et le <em>numéro de port</em> de l'URL.</dd>
+ <dt>{{domxref("Location.hostname")}}</dt>
+ <dd>Une {{domxref("DOMString")}} contenant le domaine de l'URL.</dd>
+ <dt>{{domxref("Location.port")}}</dt>
+ <dd>Une {{domxref("DOMString")}} contenant le numéro de port de l'URL.</dd>
+ <dt>{{domxref("Location.pathname")}}</dt>
+ <dd>Une {{domxref("DOMString")}} contenant un <code>'/'</code> initial suivi du chemin de l'URL.</dd>
+ <dt>{{domxref("Location.search")}}</dt>
+ <dd>Une {{domxref("DOMString")}} contenant un <code>'?'</code> suivi des paramètres de l'URL. Les navigateurs moderne fournissent <a href="/en-US/docs/Web/API/URLSearchParams/get#Example">URLSearchParams</a> et <a href="/en-US/docs/Web/API/URL/searchParams#Example">URL.searchParams</a> <span class="tlid-translation translation" lang="fr"><span title="">pour faciliter l'analyse des paramètres</span></span> de la <span class="tlid-translation translation" lang="fr"><span title="">chaîne de requête (querystring).</span></span></dd>
+ <dt>{{domxref("Location.hash")}}</dt>
+ <dd>Une {{domxref("DOMString")}} contenant un <code>'#'</code> suivi de <em>l'identifiant de fragment</em> de l'URL.</dd>
+ <dt>{{domxref("Location.username")}} {{Obsolete_Inline}}</dt>
+ <dd>Une {{domxref("DOMString")}} contenant le nom d'utilisateur spécifié avant le nom de domaine.</dd>
+ <dt>{{domxref("Location.password")}} {{Obsolete_Inline}}</dt>
+ <dd>Une {{domxref("DOMString")}} contenant le mot de passe spécifié avant le nom de domaine.</dd>
+ <dt>{{domxref("Location.origin")}} {{readOnlyInline}}</dt>
+ <dd>Retourne une {{domxref("DOMString")}} contenant la forme canonique de l'origine de la location.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>L'interface <code>Location</code> n'hérite d'aucune méthode, mais implémente celles de {{domxref("URLUtils")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("Location.assign()")}}</dt>
+ <dd>Charge la ressource située à l'URL passée en paramètre.</dd>
+ <dt>{{domxref("Location.reload()")}}</dt>
+ <dd>Recharge la ressource depuis l'URL actuelle. Son unique paramètre facultatif est un <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Boolean">Boolean</a>, qui, s'il est <code>true</code>, implique que la page est toujours rechargée depuis le serveur. Si ce paramètre est <code>false</code> ou non spécifié, le navigateur peut éventuellement recharger la page depuis son cache.</dd>
+ <dt>{{domxref("Location.replace()")}}</dt>
+ <dd>Remplace la ressource actuelle par celle à l'URL passée en paramètre. la différence avec la méthode <code>assign()</code> est que, après avoir utilisé <code>replace()</code>, la page actuelle ne sera pas enregistrée dans l'historique de session {{domxref("History")}}, ce qui signifie que l'utilisateur ne pourra pas utiliser le bouton <em>précédent</em> pour y revenir.</dd>
+ <dt>{{domxref("Location.toString()")}}</dt>
+ <dd>Retourne une {{domxref("DOMString")}} contenant l'URL entière. C'est un synonyme de {{domxref("URLUtils.href")}}, sauf que <code>toString()</code> ne peut être utilisée pour modifier la valeur.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js">// Crée un élèment ancre et utilise la propriété href </code>dans le but de cet exemple
+<code class="language-js">// </code>Une alternative plus correcte est de naviguer vers l'URL et d'utiliser document.location ou window.location
+<code class="language-js"><span class="keyword token">var</span> url <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'a'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+url<span class="punctuation token">.</span>href <span class="operator token">=</span> <span class="string token">'https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container'</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>url<span class="punctuation token">.</span>href<span class="punctuation token">)</span><span class="punctuation token">;</span>      <span class="comment token">// https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>url<span class="punctuation token">.</span>protocol<span class="punctuation token">)</span><span class="punctuation token">;</span>  <span class="comment token">// https:</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>url<span class="punctuation token">.</span>host<span class="punctuation token">)</span><span class="punctuation token">;</span>      <span class="comment token">// developer.mozilla.org:8080</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>url<span class="punctuation token">.</span>hostname<span class="punctuation token">)</span><span class="punctuation token">;</span>  <span class="comment token">// developer.mozilla.org</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>url<span class="punctuation token">.</span>port<span class="punctuation token">)</span><span class="punctuation token">;</span>      <span class="comment token">// 8080</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>url<span class="punctuation token">.</span>pathname<span class="punctuation token">)</span><span class="punctuation token">;</span>  <span class="comment token">// /en-US/search</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>url<span class="punctuation token">.</span>search<span class="punctuation token">)</span><span class="punctuation token">;</span>    <span class="comment token">// ?q=URL</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>url<span class="punctuation token">.</span>hash<span class="punctuation token">)</span><span class="punctuation token">;</span>      <span class="comment token">// #search-results-close-container</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>url<span class="punctuation token">.</span>origin<span class="punctuation token">)</span><span class="punctuation token">;</span>    <span class="comment token">// https://developer.mozilla.org:8080</span></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('HTML WHATWG', "history.html#the-location-interface", "Location")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Pas de différence avec {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "browsers.html#the-location-interface", "Location")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité">Compatibilité</h2>
+
+
+
+<p>{{Compat("api.Location")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Deux méthodes qui créent un objet <code>location</code> : {{domxref("Window.location")}} et {{domxref("Document.location")}}.</li>
+ <li>Interfaces liées aux URL: {{domxref("URL")}}, {{domxref("URLSearchParams")}} et {{domxref("HTMLHyperlinkElementUtils")}}.</li>
+</ul>
diff --git a/files/fr/web/api/location/reload/index.html b/files/fr/web/api/location/reload/index.html
new file mode 100644
index 0000000000..c825101853
--- /dev/null
+++ b/files/fr/web/api/location/reload/index.html
@@ -0,0 +1,61 @@
+---
+title: Location.reload()
+slug: Web/API/Location/reload
+tags:
+  - API
+  - JavaScript
+  - Location
+  - Méthode
+  - Reference
+translation_of: Web/API/Location/reload
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p><span class="seoSummary">La méthode <code><strong>Location.reload()</strong></code> recharge la ressource depuis l'URL actuelle.</span></p>
+
+<p>Si l'action est impossible à cause d'une violation de sécurité, une {{domxref("DOMException")}} de type <code>SECURITY_ERROR</code> est lancée. Cela se produit si l'origine du script appelant est différente de l'origine de la page initialement désignée par l'objet {{domxref("Location")}}, principalement quand le script est hébergé sur un autre domaine. Voir la page <a href="/fr/docs/Web/Security/Same_origin_policy_for_JavaScript">Same-origin policy</a> pour plus d'informations.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><em>object</em>.reload();
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js notranslate">// Recharge la page actuelle
+document.location.reload();</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('HTML WHATWG', "history.html#dom-location-reload", "Location.reload()")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Pas de différence avec {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "browsers.html#dom-location-reload", "Location.reload()")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité">Compatibilité</h2>
+
+
+
+<p>{{Compat("api.Location.reload")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("Location")}} à laquelle appartient cette méthode.</li>
+ <li>Méthodes similaires : {{domxref("Location.assign()")}} et {{domxref("Location.replace()")}}.</li>
+</ul>
diff --git a/files/fr/web/api/location/replace/index.html b/files/fr/web/api/location/replace/index.html
new file mode 100644
index 0000000000..bca43babfb
--- /dev/null
+++ b/files/fr/web/api/location/replace/index.html
@@ -0,0 +1,100 @@
+---
+title: Location.replace()
+slug: Web/API/Location/replace
+tags:
+  - API
+  - JavaScript
+  - Méthode
+  - Reference
+translation_of: Web/API/Location/replace
+---
+<p>{{APIRef("Location")}}</p>
+<p>La méthode <code><strong>Location.replace()</strong></code> remplace la ressource actuelle par celle présente à l'URL donnée. La différence avec la méthode {{domxref("Location.assign","assign()")}} est que, après avoir utilisé <code>replace()</code>, la page actuelle ne sera pas enregistrée dans l'historique de session {{domxref("History")}}, ce qui signifie que l'utilisateur ne sera pas en mesure d'utiliser le bouton <em>précédent</em> pour y revenir.</p>
+<p>Si le remplacement est impossible à cause d'une violation de sécurité, une {{domxref("DOMException")}} de type <code>SECURITY_ERROR</code> est lancée. Ceci se produit si l'origine du script appelant est différente de l'origine de la page originellement désignée par l'objet {{domxref("Location")}}, principalement quand le script est hébergé sur un autre domaine.</p>
+<p>Si l'URL donnée n'est pas valide, une {{domxref("DOMException")}} de type <code>SYNTAX_ERROR</code> est lancée.</p>
+<h2 id="Syntaxe">Syntaxe</h2>
+<pre class="syntaxbox"><em>object</em>.replace(<em>url</em>);
+</pre>
+<h3 id="Paramètres">Paramètres</h3>
+<dl>
+ <dt>
+  <em>url</em></dt>
+ <dd>
+  {{domxref("DOMString")}} contenant l'URL de la page vers laquelle naviguer.</dd>
+</dl>
+<h2 id="Exemples">Exemples</h2>
+<pre class="brush: js">// Navigue vers l'article <em>Location.reload</em> en remplaçant la page actuelle
+document.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');</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('HTML WHATWG', "history.html#dom-location-replace", "Location.replace()")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Pas de différence avec {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "browsers.html#dom-location-replace", "Location.replace()")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Compatibilité">Compatibilité</h2>
+<p>{{ CompatibilityTable() }}</p>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Fonctionnalité</th>
+    <th>Chrome</th>
+    <th>Firefox (Gecko)</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari</th>
+   </tr>
+   <tr>
+    <td>Support de base</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Fonctionnalité</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>Support de base</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h2 id="Voir_aussi">Voir aussi</h2>
+<ul>
+ <li>L'interface {{domxref("Location")}} à laquelle appartient cette méthode.</li>
+ <li>Méthodes similaires : {{domxref("Location.assign()")}} et {{domxref("Location.reload()")}}.</li>
+</ul>
diff --git a/files/fr/web/api/mediadevices/getusermedia/index.html b/files/fr/web/api/mediadevices/getusermedia/index.html
new file mode 100644
index 0000000000..67678ebeb0
--- /dev/null
+++ b/files/fr/web/api/mediadevices/getusermedia/index.html
@@ -0,0 +1,347 @@
+---
+title: MediaDevices.getUserMedia()
+slug: Web/API/MediaDevices/getUserMedia
+translation_of: Web/API/MediaDevices/getUserMedia
+---
+<div>{{APIRef("WebRTC")}}</div>
+
+<p><span class="notranslate"><span class="seoSummary">La méthode <code><strong>MediaDevices.getUserMedia()</strong></code> invite l'utilisateur à autoriser l'utilisation d'une entrée multimédia qui produit un </span></span> <span class="seoSummary">{{domxref("MediaStream")}}</span> <span class="notranslate"><span class="seoSummary"> avec des pistes contenant les types de médias demandés.</span></span> <span class="notranslate"> Ce flux peut inclure, par exemple, une piste vidéo (produite par une source matérielle ou vidéo virtuelle telle qu'une caméra, un dispositif d'enregistrement vidéo, un service de partage d'écran, etc.), une piste audio (de la même manière, produite par une source physique ou Source audio virtuelle comme un microphone, convertisseur A / D ou similaire) et éventuellement d'autres types de piste.</span></p>
+
+<p><span class="notranslate">Il renvoie un </span> {{jsxref("Promise")}} <span class="notranslate"> qui est résolu avec succès si l'utilisateur donne son autorisation;</span> <span class="notranslate"> </span> {{domxref("MediaStream")}} <span class="notranslate"> est fourni à ce moment-là.</span> <span class="notranslate"> Si l'utilisateur refuse ou si le média correspondant n'est pas disponible, le </span> {{jsxref("Promise")}} <span class="notranslate"> est rejetée avec respectivement <code>PermissionDeniedError</code> ou <code>NotFoundError</code>.</span></p>
+
+<div class="note">
+<p><span class="notranslate">Il est possible que le </span> {{jsxref("Promise")}} <span class="notranslate"> renvoyé ne soit <em>ni</em> résolu ni rejeté, car l'utilisateur n'est pas tenu de faire un choix.</span> .</p>
+</div>
+
+<p><span class="notranslate">Généralement, vous accédez à l'objet </span> {{domxref("MediaDevices")}} <span class="notranslate"> avec </span> {{domxref("navigator.mediaDevices")}} <span class="notranslate"> , comme ceci:</span></p>
+
+<pre class="brush: js">navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
+  /* use the stream */
+}).catch(function(err) {
+  /* handle the error */
+});</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>promise</em> = navigator.mediaDevices.getUserMedia(<em>constraints</em>);
+</pre>
+
+<h3 id="Paramètres"><span class="notranslate">Paramètres</span></h3>
+
+<dl>
+ <dt><code>constraints</code></dt>
+ <dd>
+ <p><span class="notranslate">Un objet </span> {{domxref("MediaStreamConstraints")}} <span class="notranslate"> spécifiant les types de supports à demander, ainsi que toutes les exigences pour chaque type.</span></p>
+
+ <p><span class="notranslate">Le paramètre constraints est un objet <code>MediaStreamConstraints</code> avec deux membres: <code>video</code> et <code>audio</code> , décrivant les types de média demandés.</span> <span class="notranslate"> L'un ou l'autre ou les deux doivent être spécifiés.</span> <span class="notranslate"> Si le navigateur ne trouve pas toutes les pistes multimédia avec les types spécifiés qui répondent aux contraintes fournies, la promesse renvoyée est rejetée avec <code>NotFoundError</code> .</span></p>
+
+ <p><span class="notranslate">Les demandes suivantes sont audio et vidéo sans aucune exigence spécifique:</span></p>
+
+ <pre class="brush: js">{ audio: true, video: true }</pre>
+
+ <p><span class="notranslate">Si <code>true</code> est spécifié pour un type de média, le flux résultant est <em>requis</em> pour obtenir ce type de piste.</span> <span class="notranslate"> Si on ne peut pas l'obtenir pour une raison quelconque, l'appel à <code>getUserMedia()</code> entraînera une erreur.</span></p>
+
+ <p><span class="notranslate">Alors que les informations sur les caméras et les microphones d'un utilisateur sont inaccessibles pour des raisons de confidentialité, une application peut demander les capacités de caméra et de microphone dont elle a besoin en utilisant des contraintes supplémentaires.</span> <span class="notranslate"> Ce qui suit exprime une préférence pour la résolution de la caméra 1280x720:</span></p>
+
+ <pre class="brush: js">{
+  audio: true,
+  video: { width: 1280, height: 720 }
+}</pre>
+
+ <p id="successCallback"><span class="notranslate">Le navigateur essaiera d'honorer cela, mais peut renvoyer d'autres résolutions si une correspondance exacte n'est pas disponible, ou si l'utilisateur l'annule.</span></p>
+
+ <p><span class="notranslate">Pour <em>exiger</em> une capacité, utilisez les mots-clés <code>min</code> , <code>max</code> ou <code>exact</code> (aka <code>min == max</code> ).</span> <span class="notranslate"> Ce qui suit exige une résolution minimale de 1280x720:</span></p>
+
+ <pre class="brush: js">{
+  audio: true,
+  video: {
+    width: { min: 1280 },
+    height: { min: 720 }
+  }
+}</pre>
+
+ <p><span class="notranslate">Si aucune caméra n'existe avec cette résolution ou plus haut, le </span> {{jsxref("Promise")}} <span class="notranslate"> retourné sera rejeté avec <code>OverconstrainedError</code>.</span></p>
+
+ <p><span class="notranslate">La raison de la différence de comportement est que les mots clés <code>min</code> , <code>max</code> et <code>exact</code> sont intrinsèquement obligatoires, alors que les valeurs simples et un mot-clé appelé <code>ideal</code> ne le sont pas.</span> <span class="notranslate"> Voici un exemple plus complet:</span></p>
+
+ <pre class="brush: js">{
+  audio: true,
+  video: {
+    width: { min: 1024, ideal: 1280, max: 1920 },
+    height: { min: 776, ideal: 720, max: 1080 }
+  }
+}</pre>
+
+ <p><span class="notranslate">Une valeur <code>ideal</code> , lorsqu'elle est utilisée, a une gravité, ce qui signifie que le navigateur essaiera de trouver le réglage (et la caméra, si vous en avez plus d'une), avec les valeurs les plus proches des valeurs idéales données.</span></p>
+
+ <p><span class="notranslate">Les valeurs simples sont par nature idéales, ce qui signifie que le premier de nos exemples de résolution ci-dessus aurait pu être écrit comme ceci:</span></p>
+
+ <pre class="brush: js">{
+  audio: true,
+  video: {
+    width: { ideal: 1280 },
+    height: { ideal: 720 }
+  }
+}</pre>
+
+ <p><span class="notranslate">Toutes les contraintes ne sont pas des nombres.</span> <span class="notranslate"> Par exemple, sur les appareils mobiles, les éléments suivants préfèrent la caméra avant (si celle-ci est disponible) sur l'arrière:</span></p>
+
+ <pre class="brush: js">{ audio: true, video: { facingMode: "user" } }</pre>
+
+ <p><span class="notranslate">Pour <em>exiger</em> la caméra arrière, utilisez:</span></p>
+
+ <pre class="brush: js">{ audio: true, video: { facingMode: { exact: "environment" } } }</pre>
+ </dd>
+</dl>
+
+<h3 id="Valeur_de_retour"><span class="notranslate">Valeur de retour</span></h3>
+
+<p><span class="notranslate">Un </span> {{jsxref("Promise")}} <span class="notranslate"> qui reçoit en objet </span> {{domxref("MediaStream")}} <span class="notranslate"> lorsque les médias demandés ont été obtenus avec succès.</span></p>
+
+<h3 id="Erreurs">Erreurs</h3>
+
+<p><span class="notranslate">Les rejets du </span> {{jsxref("Promise")}} <span class="notranslate"> retourné sont effectués en passant un objet erreur <a href="https://translate.googleusercontent.com/translate_c?depth=1&amp;hl=fr&amp;prev=search&amp;rurl=translate.google.fr&amp;sl=en&amp;sp=nmt4&amp;u=https://developer.mozilla.org/en-US/docs/Web/API/DOMException&amp;usg=ALkJrhgnRUAs3RQR8I7ulOitmhRQUlVEUA" title="L'interface DOMException représente un événement anormal (appelé exception) qui se produit en raison de l'appel d'une méthode ou de l'accès à une propriété d'une API Web."><code>DOMException</code></a> au gestionnaire d'erreurs.</span> <span class="notranslate"> Les erreurs possibles sont:</span></p>
+
+<dl>
+ <dt><code>AbortError</code></dt>
+ <dd><span class="notranslate">Bien que l'utilisateur et le système d'exploitation aient tous deux accédé à l'équipement matériel, et qu'aucun problème de matériel ne causerait un <code>NotReadableError</code> , un problème s'est produit, ce qui a empêché l'utilisation du périphérique.</span></dd>
+ <dt><code>NotAllowedError</code></dt>
+ <dd><span class="notranslate">L'utilisateur a spécifié que l'instance de navigation actuelle n'a pas accès au périphérique;</span> <span class="notranslate"> Ou l'utilisateur a refusé l'accès pour la session en cours;</span> <span class="notranslate"> Ou l'utilisateur a refusé tout l'accès aux périphériques multimédias utilisateurs dans le monde entier.</span>
+ <div class="note"><span class="notranslate">Les versions plus anciennes de la spécification ont utilisé <code>SecurityError</code> pour cela à la place;</span> <span class="notranslate"> <code>SecurityError</code> a pris une nouvelle signification.</span></div>
+ </dd>
+ <dt><code>NotFoundError</code></dt>
+ <dd><span class="notranslate">Aucune piste multimédia du type spécifié n'a été trouvée satisfaisant les contraintes données.</span></dd>
+ <dt><code>NotReadableError</code></dt>
+ <dd><span class="notranslate">Bien que l'utilisateur ait autorisé l'utilisation des appareils correspondants, une erreur matérielle s'est produite sur le système d'exploitation, le navigateur ou le niveau de la page Web qui a empêché l'accès au périphérique.</span></dd>
+ <dt><code>OverConstrainedError</code></dt>
+ <dd><span class="notranslate">Aucun dispositif candidat répondant aux critères demandés.</span> <span class="notranslate"> L'erreur est un objet de type <code>OverconstrainedError</code> et possède une propriété de <code>constraint</code> dont la valeur de chaîne est le nom d'une contrainte impossible à honorer et une propriété <code>message</code> contenant une chaîne lisible par l'homme expliquant le problème.</span>
+ <div class="note"><span class="notranslate">Étant donné que cette erreur peut se produire même lorsque l'utilisateur n'a pas encore autorisé l'utilisation du périphérique sous-jacent, il peut être utilisé comme surface d'empreinte digitale.</span></div>
+ </dd>
+ <dt><code>SecurityError</code></dt>
+ <dd><span class="notranslate">Le support multimédia utilisateur est désactivé sur le </span> {{domxref("Document")}} <span class="notranslate"> sur lequel <code>getUserMedia()</code> été appelé.</span> <span class="notranslate"> Le mécanisme par lequel le support média utilisateur est activé/désactivé est laissé à la discrétion de l'utilisateur.</span></dd>
+ <dt><code>TypeError</code></dt>
+ <dd><span class="notranslate">La liste des contraintes spécifiées est vide ou toutes les contraintes sont définies comme <code>false</code> .</span></dd>
+</dl>
+
+<h2 id="Exemples"><span class="notranslate"><strong>Exemple</strong>s</span></h2>
+
+<h3 id="Largeur_et_hauteur"><span class="notranslate">Largeur et hauteur</span></h3>
+
+<p><span class="notranslate">Cet exemple donne une préférence pour la résolution de la caméra et attribue l'objet <a href="https://translate.googleusercontent.com/translate_c?depth=1&amp;hl=fr&amp;prev=search&amp;rurl=translate.google.fr&amp;sl=en&amp;sp=nmt4&amp;u=https://developer.mozilla.org/en-US/docs/Web/API/MediaStream&amp;usg=ALkJrhipdR5n2jQ-BGrPTomESH_A7nof4g" title="L'interface MediaStream représente un flux de contenu multimédia. Un flux se compose de plusieurs pistes telles que des pistes vidéo ou audio. Chaque piste est spécifiée comme une instance de MediaStreamTrack."><code>MediaStream</code></a> résultant à un élément vidéo.</span></p>
+
+<pre>// Prefer camera resolution nearest to 1280x720.
+var constraints = { audio: true, video: { width: 1280, height: 720 } };
+
+navigator.mediaDevices.getUserMedia(constraints)
+.then(function(mediaStream) {
+  var video = document.querySelector('video');
+  video.srcObject = mediaStream;
+  video.onloadedmetadata = function(e) {
+    video.play();
+  };
+})
+.catch(function(err) { console.log(err.name + ": " + err.message); }); // always check for errors at the end.
+</pre>
+
+<h3 id="Utilisation_de_la_nouvelle_API_dans_les_navigateurs_plus_anciens"><span class="notranslate">Utilisation de la nouvelle API dans les navigateurs plus anciens</span></h3>
+
+<p><span class="notranslate">Voici un exemple d'utilisation de <code>navigator.mediaDevices.getUserMedia()</code> , avec un adaptateur pour faire face aux navigateurs plus anciens.</span> <span class="notranslate"> Notez que cet adaptater ne corrige pas les différences existantes dans la syntaxe des contraintes, ce qui signifie que les contraintes ne fonctionneront pas bien dans les navigateurs.</span> <span class="notranslate"> Il est recommandé d'utiliser l'adaptateur</span> <a href="https://github.com/webrtc/adapter">adapter.js</a> <span class="notranslate"> a la place, qui gère les contraintes.</span></p>
+
+<pre class="brush: js">// Older browsers might not implement mediaDevices at all, so we set an empty object first
+if (navigator.mediaDevices === undefined) {
+  navigator.mediaDevices = {};
+}
+
+// Some browsers partially implement mediaDevices. We can't just assign an object
+// with getUserMedia as it would overwrite existing properties.
+// Here, we will just add the getUserMedia property if it's missing.
+if (navigator.mediaDevices.getUserMedia === undefined) {
+  navigator.mediaDevices.getUserMedia = function(constraints) {
+
+    // First get ahold of the legacy getUserMedia, if present
+    var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
+
+    // Some browsers just don't implement it - return a rejected promise with an error
+    // to keep a consistent interface
+    if (!getUserMedia) {
+      return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
+    }
+
+    // Otherwise, wrap the call to the old navigator.getUserMedia with a Promise
+    return new Promise(function(resolve, reject) {
+      getUserMedia.call(navigator, constraints, resolve, reject);
+    });
+  }
+}
+
+navigator.mediaDevices.getUserMedia({ audio: true, video: true })
+.then(function(stream) {
+  var video = document.querySelector('video');
+  // Older browsers may not have srcObject
+  if ("srcObject" in video) {
+    video.srcObject = stream;
+  } else {
+    // Avoid using this in new browsers, as it is going away.
+    video.src = window.URL.createObjectURL(stream);
+  }
+  video.onloadedmetadata = function(e) {
+    video.play();
+  };
+})
+.catch(function(err) {
+  console.log(err.name + ": " + err.message);
+});
+</pre>
+
+<h3 id="Taux_d'images">Taux d'images</h3>
+
+<p><span class="notranslate">Des cadences inférieures peuvent être souhaitables dans certains cas, comme les transmissions WebRTC avec des restrictions de bande passante.</span></p>
+
+<pre class="brush: js">var constraints = { video: { frameRate: { ideal: 10, max: 15 } } };
+</pre>
+
+<h3 id="Caméra_avant_et_arrière"><span class="notranslate">Caméra avant et arrière</span></h3>
+
+<p><span class="notranslate">Sur les téléphones portables.</span></p>
+
+<pre class="brush: js">var front = false;
+document.getElementById('flip-button').onclick = function() { front = !front; };
+
+var constraints = { video: { facingMode: (front? "user" : "environment") } };
+</pre>
+
+<h2 id="Permissions">Permissions</h2>
+
+<p><span class="notranslate">Pour utiliser <code>getUserMedia()</code> dans une application installable (par exemple, une <a href="https://translate.googleusercontent.com/translate_c?depth=1&amp;hl=fr&amp;prev=search&amp;rurl=translate.google.fr&amp;sl=en&amp;sp=nmt4&amp;u=https://developer.mozilla.org/en-US/Apps/Build/Building_apps_for_Firefox_OS/Firefox_OS_app_beginners_tutorial&amp;usg=ALkJrhjjqOGYUEn75gZx3AcoQDArrosa9Q">application Firefox OS</a> ), vous devez spécifier un ou les deux champs suivants dans votre fichier manifeste:</span></p>
+
+<pre class="brush: js">"permissions": {
+  "audio-capture": {
+    "description": "Required to capture audio using getUserMedia()"
+  },
+  "video-capture": {
+    "description": "Required to capture video using getUserMedia()"
+  }
+}</pre>
+
+<p><span class="notranslate">Voir </span> <a href="https://developer.mozilla.org/en-US/Apps/Developing/App_permissions#audio-capture">permission: audio-capture</a> <span class="notranslate"> et </span> <a href="https://developer.mozilla.org/en-US/Apps/Developing/App_permissions#video-capture">permission: video-capture</a> <span class="notranslate"> pour plus d'informations.</span></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('Media Capture', '#dom-mediadevices-getusermedia', 'MediaDevices.getUserMedia()')}}</td>
+   <td>{{Spec2('Media Capture')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Microsoft Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(53.0)}}<sup>[1][3]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(36)}}<sup>[2][4]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(40)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Promises</td>
+   <td>{{CompatChrome(53.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(38)}}</td>
+   <td>{{CompatUnknown}}</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>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(53.0)}}<sup>[1][3]</sup></td>
+   <td>{{CompatChrome(53.0)}}<sup>[1][3]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(36)}} <sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOperaMobile(40)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Promises</td>
+   <td>{{CompatChrome(53.0)}}</td>
+   <td>{{CompatChrome(53.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(38)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] <span class="notranslate"> Les versions plus anciennes de Chrome et Opera implémentent <code>navigator.webkitGetUserMedia</code> , la version préfixée de la méthode </span> {{domxref("navigator.getUserMedia")}} <span class="notranslate"> .</span></p>
+
+<p><span class="notranslate">De la version 47 à la 52, l'interface promise n'est disponible que via  </span> <a href="https://github.com/webrtc/adapter">adapter.js</a><span class="notranslate">, ou en utilisant les options flag</span> <a>chrome://flags/#enable-experimental-web-platform-features</a> <span class="notranslate">.</span> <span class="notranslate"> À partir de la version 53, l'interface promise est activée par défaut, même si cette interface n'est toujours pas disponible via le <code>navigator</code> .</span></p>
+
+<p>[2] <span class="notranslate">Les anciennes versions de Firefox implémentent <code>navigator.mozGetUserMedia()</code> , la version préfixée de la méthode </span> {{domxref("navigator.getUserMedia")}} <span class="notranslate"> .</span></p>
+
+<p><span class="notranslate">La version prometteuse de cette méthode et la syntaxe de contrainte décrites ici sont disponibles à partir de Firefox 38. Les versions antérieures (32-37) ont utilisé une syntaxe de contrainte périmée, mais la syntaxe décrite ici, ainsi que l'interface promise est Disponible à l'aide de </span> <a href="https://github.com/webrtc/adapter">adapter.js</a> <span class="notranslate">.</span></p>
+
+<p><span class="notranslate">Firefox 49 comprend des modifications pour mettre les </span> {{anch("Errors", "erreurs")}} <span class="notranslate"> possibles à jour avec la spécification, y compris la modification de la signification de <code>SecurityError</code> .</span> <span class="notranslate"> De plus, si les pistes vidéo et audio sont demandées, <code>getUserMedia()</code> échoue maintenant pour ne pas pouvoir accéder aux deux.</span> <span class="notranslate"> Auparavant, il créerait un flux qui disposait de la partie réussie des médias.</span> <span class="notranslate"> Par exemple, si l'utilisateur dispose d'un microphone mais pas d'appareil photo (ou refusé l'accès à la caméra), les versions précédentes de Firefox renverraient un flux avec une piste audio mais pas de vidéo.</span> <span class="notranslate"> Maintenant, cela entraîne correctement une erreur.</span></p>
+
+<p><span class="notranslate">Opera utilise une syntaxe de contrainte périmée, mais la syntaxe décrite ici est disponible via </span> <a href="https://github.com/webrtc/adapter">adapter.js</a>.</p>
+
+<p>[3] <span class="notranslate">Chrome lance une erreur si la page qui sert le script est chargée d'origine non sécurisée (c'est-à-dire HTTP).</span></p>
+
+<p>[4] <span class="notranslate">Avant Firefox 55, <code>getUserMedia()</code> renvoie incorrectement <code>NotSupportedError</code> lorsque la liste des contraintes spécifiées est vide ou que toutes les contraintes sont définies comme <code>false</code> .</span> <span class="notranslate"> À partir de Firefox 55, cette situation appelle correctement le gestionnaire d'échec avec un <code>TypeError</code> .</span></p>
+
+<h2 id="Voir_également"><span class="notranslate">Voir également</span></h2>
+
+<ul>
+ <li><span class="notranslate">L'ancien API</span> {{domxref("navigator.getUserMedia()")}}.</li>
+ <li>{{domxref("mediaDevices.enumerateDevices()")}}: <span class="notranslate">Apprenez les types et le nombre de périphériques que l'utilisateur dispose.</span></li>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC API</a></li>
+ <li><a href="/en-US/docs/Web/API/Media_Streams_API">Media Capture and Streams API (Media Streams)</a></li>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API/Taking_still_photos">Taking webcam photos</a>: <span class="notranslate">un didacticiel sur l'utilisation de <code>getUserMedia()</code> pour prendre des photos plutôt que de la vidéo.</span></li>
+</ul>
diff --git a/files/fr/web/api/mediadevices/index.html b/files/fr/web/api/mediadevices/index.html
new file mode 100644
index 0000000000..fa78862e35
--- /dev/null
+++ b/files/fr/web/api/mediadevices/index.html
@@ -0,0 +1,126 @@
+---
+title: MediaDevices
+slug: Web/API/MediaDevices
+tags:
+  - API
+  - Appareils
+  - Audio
+  - Conference
+  - Interface
+  - Media
+  - Partage
+  - Reference
+  - Video
+  - WebRTC
+translation_of: Web/API/MediaDevices
+---
+<div>{{APIRef("Media Capture and Streams")}}</div>
+
+<p><span class="seoSummary">L'interface <strong><code>MediaDevices</code></strong> permet d'accéder aux périphériques d'entrée multimédia connectés tels que les caméras et les microphones, ainsi que le partage d'écran. Essentiellement, il vous permet d'accéder à n'importe quelle source matérielle de données multimédias.</span></p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Hérite des propriétés de son interface parente, {{domxref("EventTarget")}}.</em></p>
+
+<h2 id="Handlers" name="Handlers">Événéments</h2>
+
+<dl>
+ <dt>{{domxref("MediaDevices/devicechange_event", "devicechange")}}</dt>
+ <dd>Déclenché lorsqu'un périphérique d'entrée ou de sortie multimédia est connecté ou retiré de l'ordinateur de l'utilisateur.<br>
+ Egalement disponible via la propriété {{domxref("MediaDevices/ondevicechange", "ondevicechange")}}.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Hérite des méthodes de son interface parente, {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{ domxref("MediaDevices.enumerateDevices", "enumerateDevices()") }}</dt>
+ <dd>Obtient un tableau d'informations sur les périphériques d'entrée et de sortie multimédia disponibles sur le système.</dd>
+ <dt>{{domxref("MediaDevices.getSupportedConstraints", "getSupportedConstraints()")}}</dt>
+ <dd>Renvoie un objet conforme à {{domxref("MediaTrackSupportedConstraints")}} indiquant quelles propriétés de contrainte sont prises en charge sur l'interface {{domxref("MediaStreamTrack")}}. Consultez {{SectionOnPage("/en-US/docs/Web/API/Media_Streams_API", "Capabilities and constraints")}} pour en savoir plus sur les contraintes et comment les utiliser.</dd>
+ <dt>{{domxref("MediaDevices.getDisplayMedia", "getDisplayMedia()")}}</dt>
+ <dd>Invite l'utilisateur à sélectionner un affichage ou une partie d'un affichage (comme une fenêtre) à capturer en tant que {{domxref("MediaStream")}} à des fins de partage ou d'enregistrement. Renvoie une promesse qui se résout en un <code>MediaStream</code>.</dd>
+ <dt>{{ domxref("MediaDevices.getUserMedia", "getUserMedia()") }}</dt>
+ <dd>Avec l'autorisation de l'utilisateur via une invite, allume une caméra et / ou un microphone sur le système et fournit un {{domxref("MediaStream")}} contenant une piste vidéo et / ou une piste audio avec l'entrée.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush:js notranslate">'use strict';
+
+// Placez les variables dans la portée globale pour les rendre disponibles à la console du navigateur.
+var video = document.querySelector('video');
+var constraints = window.constraints = {
+  audio: false,
+  video: true
+};
+var errorElement = document.querySelector('#errorMsg');
+
+navigator.mediaDevices.getUserMedia(constraints)
+.then(function(stream) {
+  var videoTracks = stream.getVideoTracks();
+  console.log('Got stream with constraints:', constraints);
+  console.log('Using video device: ' + videoTracks[0].label);
+  stream.onremovetrack = function() {
+    console.log('Stream ended');
+  };
+  window.stream = stream; // rendre la variable disponible dans la console du navigateur
+  video.srcObject = stream;
+})
+.catch(function(error) {
+  if (error.name === 'ConstraintNotSatisfiedError') {
+    errorMsg('The resolution ' + constraints.video.width.exact + 'x' +
+        constraints.video.height.exact + ' px is not supported by your device.');
+  } else if (error.name === 'PermissionDeniedError') {
+    errorMsg('Permissions have not been granted to use your camera and ' +
+      'microphone, you need to allow the page access to your devices in ' +
+      'order for the demo to work.');
+  }
+  errorMsg('getUserMedia error: ' + error.name, error);
+});
+
+function errorMsg(msg, error) {
+  errorElement.innerHTML += '&lt;p&gt;' + msg + '&lt;/p&gt;';
+  if (typeof error !== 'undefined') {
+    console.error(error);
+  }
+}</pre>
+
+<h2 id="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('Media Capture', '#mediadevices', 'MediaDevices')}}</td>
+   <td>{{Spec2('Media Capture')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.MediaDevices")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Media_Streams_API">Media Capture et Streams API</a>: l'API dont cette interface fait partie.</li>
+ <li><a href="/en-US/docs/Web/API/Screen_Capture_API">API de capture d'écran</a>: L'API définissant la méthode {{domxref("MediaDevices.getDisplayMedia", "getDisplayMedia()")}}.</li>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC API</a></li>
+ <li>{{domxref("Navigator.mediaDevices")}}: Renvoie une référence à un objet <code>MediaDevices</code> qui peut être utilisé pour accéder aux périphériques.</li>
+ <li><a href="https://github.com/chrisjohndigital/CameraCaptureJS">CameraCaptureJS:</a> Capture et lecture vidéo HTML5 à l'aide de <code>MediaDevices</code> et de l'API d'enregistrement MediaStream (<a href="https://github.com/chrisjohndigital/CameraCaptureJS">source sur GitHub</a>)</li>
+ <li><a href="https://github.com/chrisjohndigital/OpenLang">OpenLang</a>: Application Web de laboratoire de langage vidéo HTML5 video utilisant <code>MediaDevices</code> et l'API d'enregistrement MediaStream pour l'enregistrement vidéo (<a href="https://github.com/chrisjohndigital/OpenLang">source sur GitHub</a>)</li>
+</ul>
diff --git a/files/fr/web/api/mediasource/index.html b/files/fr/web/api/mediasource/index.html
new file mode 100644
index 0000000000..5c3c303bdd
--- /dev/null
+++ b/files/fr/web/api/mediasource/index.html
@@ -0,0 +1,155 @@
+---
+title: MediaSource
+slug: Web/API/MediaSource
+tags:
+  - API
+  - Audio
+  - Experimental
+  - Extensions
+  - Interface
+  - MSE
+  - Media
+  - MediaSource
+  - MediaSource Extensions
+  - Reference
+  - TopicStub
+  - Video
+translation_of: Web/API/MediaSource
+---
+<p>{{APIRef("Media Source Extensions")}}{{SeeCompatTable}}</p>
+
+<p>L'interface <strong><code>MediaSource</code></strong> de l'<a href="/en-US/docs/Web/API/Media_Source_Extensions_API">API Media Source Extensions</a> représente une source de données multimédia pour un objet {{domxref("HTMLMediaElement")}}. Un objet <code>MediaSource</code> peut être attaché à un {{domxref("HTMLMediaElement")}} pour être lu dans l'agent utilisateur.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("MediaSource.MediaSource", "MediaSource()")}}</dt>
+ <dd>Construit et renvoie un nouvel objet <code>MediaSource</code> sans tampon source associé.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("MediaSource.sourceBuffers")}} {{readonlyInline}}</dt>
+ <dd>Renvoie un objet {{domxref("SourceBufferList")}} contenant la liste des objets {{domxref("SourceBuffer")}} associés à ce <code>MediaSource</code>.</dd>
+ <dt>{{domxref("MediaSource.activeSourceBuffers")}} {{readonlyInline}}</dt>
+ <dd>Renvoie un objet {{domxref("SourceBufferList")}} contenant un sous-ensemble des objets {{domxref("SourceBuffer")}} contenus dans {{domxref("MediaSource.sourceBuffers")}} — la liste des objets fournissant la piste vidéo sélectionnée, pistes audio activées et pistes de texte affichées / masquées.</dd>
+ <dt>{{domxref("MediaSource.readyState")}} {{readonlyInline}}</dt>
+ <dd>Renvoie une énumération représentant l'état de la <code>MediaSource</code> actuelle, qu'elle ne soit pas actuellement attachée à un élément multimédia (<code>fermé</code>), attachée et prête à recevoir des objets {{domxref("SourceBuffer")}} (<code>ouvert</code>), ou attachée mais le flux a été terminé via {{domxref("MediaSource.endOfStream()")}} (<code>terminé</code>).</dd>
+ <dt>{{domxref("MediaSource.duration")}}</dt>
+ <dd>Obtient et définit la durée du média actuel présenté.</dd>
+</dl>
+
+<h3 id="Gestionnaires_dévénements">Gestionnaires d'événements</h3>
+
+<dl>
+ <dt>{{domxref("MediaSource.onsourceclose")}}</dt>
+ <dd>Le gestionnaire d'événements pour l'événement <code>sourceclose</code>.</dd>
+ <dt>{{domxref("MediaSource.onsourceended")}}</dt>
+ <dd>Le gestionnaire d'événements pour l'événement <code>sourceended</code>.</dd>
+ <dt>{{domxref("MediaSource.onsourceopen")}}</dt>
+ <dd>Le gestionnaire d'événements pour l'événement <code>sourceopen</code>.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Hérite des méthodes de son interface parente, {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("MediaSource.addSourceBuffer()")}}</dt>
+ <dd>Crée un nouveau {{domxref ("SourceBuffer")}} du type MIME donné et l'ajoute à la liste {{domxref ("MediaSource.sourceBuffers")}}.</dd>
+ <dt>{{domxref("MediaSource.clearLiveSeekableRange()")}}</dt>
+ <dd>Efface un ensemble privé de plage de recherche avec un appel à <code>setLiveSeekableRange()</code>.</dd>
+ <dt>{{domxref("MediaSource.endOfStream()")}}</dt>
+ <dd>Signale la fin du flux.</dd>
+ <dt>{{domxref("MediaSource.removeSourceBuffer()")}}</dt>
+ <dd>Supprime le {{domxref ("SourceBuffer")}} donné de la liste {{domxref ("MediaSource.sourceBuffers")}}.</dd>
+ <dt>{{domxref("MediaSource.setLiveSeekableRange()")}}</dt>
+ <dd>Définit la plage que l'utilisateur peut rechercher dans l'élément multimédia.</dd>
+</dl>
+
+<h2 id="Méthodes_statiques">Méthodes statiques</h2>
+
+<dl>
+ <dt>{{domxref("MediaSource.isTypeSupported()")}}</dt>
+ <dd>Renvoie une valeur {{domxref ("Boolean")}} indiquant si le type MIME donné est pris en charge par l'agent utilisateur actuel - c'est-à-dire s'il parvient à créer des objets {{domxref ("SourceBuffer")}} pour ce type MIME .</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>L'exemple simple suivant charge une vidéo avec {{domxref ("XMLHttpRequest")}} et la lit dès que possible. Cet exemple a été écrit par Nick Desaulniers et peut être <a href="http://nickdesaulniers.github.io/netfix/demo/bufferAll.html">consulté en direct ici</a> (vous pouvez aussi <a href="https://github.com/nickdesaulniers/netfix/blob/gh-pages/demo/bufferAll.html">télécharger la source</a> pour une enquête plus approfondie).</p>
+
+<pre class="brush: js notranslate">var video = document.querySelector('video');
+
+var assetURL = 'frag_bunny.mp4';
+// Need to be specific for Blink regarding codecs
+// ./mp4info frag_bunny.mp4 | grep Codec
+var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
+
+if ('MediaSource' in window &amp;&amp; MediaSource.isTypeSupported(mimeCodec)) {
+  var mediaSource = new MediaSource();
+  //console.log(mediaSource.readyState); // closed
+  video.src = URL.createObjectURL(mediaSource);
+  mediaSource.addEventListener('sourceopen', sourceOpen);
+} else {
+  console.error('Unsupported MIME type or codec: ', mimeCodec);
+}
+
+function sourceOpen (_) {
+  //console.log(this.readyState); // open
+  var mediaSource = this;
+  var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
+  fetchAB(assetURL, function (buf) {
+    sourceBuffer.addEventListener('updateend', function (_) {
+      mediaSource.endOfStream();
+      video.play();
+      //console.log(mediaSource.readyState); // ended
+    });
+    sourceBuffer.appendBuffer(buf);
+  });
+};
+
+function fetchAB (url, cb) {
+  console.log(url);
+  var xhr = new XMLHttpRequest;
+  xhr.open('get', url);
+  xhr.responseType = 'arraybuffer';
+  xhr.onload = function () {
+    cb(xhr.response);
+  };
+  xhr.send();
+};</pre>
+
+<h2 id="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('Media Source Extensions', '#mediasource', 'MediaSource')}}</td>
+   <td>{{Spec2('Media Source Extensions')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.MediaSource")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("SourceBuffer")}}</li>
+ <li>{{domxref("SourceBufferList")}}</li>
+</ul>
diff --git a/files/fr/web/api/mediasource/mediasource/index.html b/files/fr/web/api/mediasource/mediasource/index.html
new file mode 100644
index 0000000000..dac8c3d8ee
--- /dev/null
+++ b/files/fr/web/api/mediasource/mediasource/index.html
@@ -0,0 +1,54 @@
+---
+title: MediaSource.MediaSource()
+slug: Web/API/MediaSource/MediaSource
+translation_of: Web/API/MediaSource/MediaSource
+---
+<div>{{APIRef("Media Source Extensions")}}{{SeeCompatTable}}</div>
+
+<p>Le constructeur <code><strong>MediaSource()</strong></code> de l'interface {{domxref("MediaSource")}} construit et retourne un nouvel object <code>MediaSource</code> sans buffer associé</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var mediaSource = new MediaSource();</pre>
+
+<h3 id="Paramèteres">Paramèteres</h3>
+
+<p>Aucun.</p>
+
+<h2 id="Example">Example</h2>
+
+<p>Le fragement de code suivant est tiré d'un exemple simple écrit par par Nick Desaulniers (<a href="http://nickdesaulniers.github.io/netfix/demo/bufferAll.html">voir la démonstration complète</a>, ou <a href="https://github.com/nickdesaulniers/netfix/blob/gh-pages/demo/bufferAll.html">télécharger les sources</a> pour une meilleure compréhention.)</p>
+
+<pre class="brush: js">var video = document.querySelector('video');
+
+var assetURL = 'frag_bunny.mp4';
+// A besoin d'être spécifique, Blink (moteur de rendu Chrome) demande le codec
+// ./mp4info frag_bunny.mp4 | grep Codec
+var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
+
+if ('MediaSource' in window &amp;&amp; MediaSource.isTypeSupported(mimeCodec)) {
+  var mediaSource = new MediaSource;
+  //console.log(mediaSource.readyState); // "closed"
+  video.src = URL.createObjectURL(mediaSource);
+  mediaSource.addEventListener('sourceopen', sourceOpen);
+} else {
+  console.error('Unsupported MIME type or codec: ', mimeCodec);
+}
+
+...
+</pre>
+
+<h2 id="Compatibilitée_des_navigateurs">Compatibilitée des navigateurs</h2>
+
+<div>
+
+
+<p>{{Compat("api.MediaSource.MediaSource")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("SourceBuffer")}}</li>
+ <li>{{domxref("SourceBufferList")}}</li>
+</ul>
diff --git a/files/fr/web/api/mediastream/index.html b/files/fr/web/api/mediastream/index.html
new file mode 100644
index 0000000000..aa4881b5a1
--- /dev/null
+++ b/files/fr/web/api/mediastream/index.html
@@ -0,0 +1,139 @@
+---
+title: MediaStream
+slug: Web/API/MediaStream
+translation_of: Web/API/MediaStream
+---
+<div>{{APIRef("Media Capture and Streams")}} {{SeeCompatTable}}</div>
+
+<p>L'interface <code>MediaStream</code> représente le contenu d'un flux de média. Un flux est composé de plusieurs <em>pistes</em>, tel que des pistes vidéos ou audio.</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<dl>
+ <dt>{{domxref("MediaStream.id")}} {{readonlyInline}}</dt>
+ <dd>{{domxref("DOMString")}} contenant 36 carractères correspondant à l'identifiant unique (GUID) de l'objet.</dd>
+ <dt>{{domxref("MediaStream.ended")}} {{readonlyInline}}</dt>
+ <dd>Booléen dont la valeur est <code>true</code> si l'évènement <span style="line-height: inherit;">{{event("ended (MediaStream)", "ended")}} à été déclenché sur l'objet, signifiant que le flux à été complètement lu, ou <code>false</code></span> si la fin du flux n'à pas été atteinte.</dd>
+</dl>
+
+<h3 id="Gestionnaire_d'évènements">Gestionnaire d'évènements</h3>
+
+<dl>
+ <dt>{{domxref("MediaStream.onaddtrack")}}</dt>
+ <dd>Est un <span style="line-height: inherit;">{{domxref("EventHandler")}} contenant l'action à exécuter lorsqu'un évènement {{event("addtrack")}} est déclenché sur l'objet, ce qui arrive lorsqu'un nouvel objet {{domxref("MediaStreamTrack")}} est ajouté.</span></dd>
+ <dt>{{domxref("MediaStream.onended")}}</dt>
+ <dd><span style="line-height: inherit;">Est un  {{domxref("EventHandler")}} contenant l'action à exécuter lorsqu'un évènement {{event("ended (MediaStream)","ended")}} est déclenché sur l'objet, ce qui arrive lorsque la diffusion est terminée.</span></dd>
+ <dt>{{domxref("MediaStream.onremovetrack")}}</dt>
+ <dd><span style="line-height: inherit;">Est un {{domxref("EventHandler")}} contenant l'action à exécuter lorsqu'un évènement {{event("removetrack")}} est délenché sur l'objet, ce qui arrive quand un objet  {{domxref("MediaStreamTrack")}} est retiré.</span></dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("MediaStream.getTrackById()")}}</dt>
+ <dd>Retourne la piste dont l'ID correspond à celui passé en paramètre, <code>trackid</code>. Si aucun paramètre n'est fourni, ou si aucune piste avec cet id existe, la fonction retourne <code>null</code>. Si plusieurs pistes ont le même id, elle retourne la première piste.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("MediaStream.addTrack()")}}</dt>
+ <dd>Stocke une copie de<span style="line-height: inherit;"> {{domxref("MediaStreamTrack")}} fourni en paramètre. Si la piste à déjà été ajouté à l'objet <code>MediaStream</code></span>, rien ne se passe; si la piste est au statut <code>finished</code>, c'est à dire qu'elle est terminée, l'<span style="line-height: inherit;">exception </span><code style="font-size: 14px; line-height: inherit;">INVALID_STATE_RAISE</code><span style="line-height: inherit;"> est levée.</span></dd>
+ <dt>{{domxref("MediaStream.removeTrack()")}}</dt>
+ <dd>Retire le <span style="line-height: inherit;">the {{domxref("MediaStreamTrack")}} fourni comme argument. Si la piste ne fait pas parti du <code>MediaStream</code></span>, rien ne se passe<span style="line-height: inherit;">; Si la piste est au statut <code>finished</code></span>, ce qui arrive lorsqu'elle est terminée, <span style="line-height: inherit;">l'exception </span><code style="font-size: 14px; line-height: inherit;">INVALID_STATE_RAISE</code><span style="line-height: inherit;"> est levée.</span></dd>
+ <dt>{{domxref("MediaStream.getAudioTracks()")}}</dt>
+ <dd>Retourne la liste des<span style="line-height: inherit;"> {{domxref("MediaStreamTrack")}} stockés dans l'objet </span><code style="font-size: 14px; line-height: inherit;">MediaStream</code><span style="line-height: inherit;"> qui ont leur attribut </span><code style="font-size: 14px; line-height: inherit;">kind</code><span style="line-height: inherit;"> défini à </span><code style="font-size: 14px; line-height: inherit;">"audio"</code><span style="line-height: inherit;">. L'ordre n'est pas défini, et peut varier d'un navigateur à l'autre, mais aussi d'un appel de la méthode à l'autre.</span></dd>
+ <dt>{{domxref("MediaStream.getVideoTracks()")}}</dt>
+ <dd>Retourne une liste des<span style="line-height: inherit;"> {{domxref("MediaStreamTrack")}} stockés dans l'objet </span><code style="font-size: 14px; line-height: inherit;">MediaStream</code><span style="line-height: inherit;"> qui ont leur attribut </span><code style="font-size: 14px; line-height: inherit;">kind</code><span style="line-height: inherit;"> défini à </span><code style="font-size: 14px; line-height: inherit;">"video"</code><span style="line-height: inherit;">. L'ordre n'est pas défini, et peut varier d'un navigateur à l'autre, mais aussi d'un appel de la méthode à l'autre.</span></dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p> </p>
+
+<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>{{SpecName('Media Capture', '#mediastream', 'MediaStream')}}</td>
+   <td>{{Spec2('Media Capture')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>getAudioTracks()</code> et <code>getVideoTracks()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("23.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>getAudioTracks()</code> et <code>getVideoTracks()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("23.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Using the MediaStream API</li>
+</ul>
diff --git a/files/fr/web/api/mediastreamaudiosourcenode/index.html b/files/fr/web/api/mediastreamaudiosourcenode/index.html
new file mode 100644
index 0000000000..7608396cc0
--- /dev/null
+++ b/files/fr/web/api/mediastreamaudiosourcenode/index.html
@@ -0,0 +1,153 @@
+---
+title: MediaStreamAudioSourceNode
+slug: Web/API/MediaStreamAudioSourceNode
+tags:
+  - API
+  - Interface
+  - MediaStreamAudioSourceNode
+  - Reference
+  - Web Audio API
+translation_of: Web/API/MediaStreamAudioSourceNode
+---
+<p>{{APIRef("Web Audio API")}}</p>
+
+<div>
+<p>L'interface <code>MediaStreamAudioSourceNode</code> représente une source audio <a href="https://developer.mozilla.org/fr/docs/Web/API/WebRTC_API">WebRTC</a> {{domxref("MediaStream")}} (comme une webcam ou un micro). C'est un {{domxref("AudioNode")}} qui agit comme une source audio.</p>
+</div>
+
+<p>Un <code>MediaElementSourceNode</code> n'a pas d'entrée et une seule sortie. On le créé en utilisant la méthode {{domxref("AudioContext.createMediaStreamSource")}}. Le nombre de canaux de sortie est égal au nombre de canaux de {{domxref("AudioMediaStreamTrack")}}. S'il n'y a pas de media stream valide, alors la sortie sera constituée d'un seul canal silencieux.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Nombre d'entrées</th>
+   <td><code>0</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Nombre de sorties</th>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Nombre de canaux</th>
+   <td>Défini par {{domxref("AudioMediaStreamTrack")}} et passé à la méthode {{domxref("AudioContext.createMediaStreamSource")}} qui le créé.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("MediaStreamAudioSourceNode.MediaStreamAudioSourceNode()")}}</dt>
+ <dd>Créé une nouvelle instance de <code>MediaStreamAudioSourceNode</code>.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Hérite des propriétés de son parent, </em><em>{{domxref("AudioNode")}}</em>.</p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Hérite des méthdoes de son parent, </em><em>{{domxref("AudioNode")}}</em>.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>{{page("/fr-FR/docs/Web/API/AudioContext.createMediaStreamSource","Example")}}</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#the-mediastreamaudiosourcenode-interface', 'MediaStreamAudioSourceNode')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support basique</td>
+   <td>14 {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("25")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15 {{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+  <tr>
+   <td>Constructor</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatNo}}</td>
+   <td>28 {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("25")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+  <tr>
+   <td>Constructeur</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/mediastreamevent/index.html b/files/fr/web/api/mediastreamevent/index.html
new file mode 100644
index 0000000000..82fe5d1e39
--- /dev/null
+++ b/files/fr/web/api/mediastreamevent/index.html
@@ -0,0 +1,56 @@
+---
+title: MediaStreamEvent
+slug: Web/API/MediaStreamEvent
+tags:
+  - API
+  - Expérimentale
+  - Expérimentale(2)
+  - Interface
+  - Reference
+  - Référence(2)
+  - WebRTC
+translation_of: Web/API/MediaStreamEvent
+---
+<p>{{APIRef("WebRTC")}}{{deprecated_header}}</p>
+
+<p>L'interface <strong><code>MediaStreamEvent</code></strong> représente les événements qui se produisent en relation avec un {{domxref("MediaStream")}}. Deux événements de ce type peuvent être lancés: {{event("addstream")}} et {{event("removestream")}}.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Un {{domxref("MediaStreamEvent")}} étant un {{domxref("Event")}}, cet événement implémente également ces propriétés</em>.</p>
+
+<dl>
+ <dt>{{domxref("MediaStreamEvent.stream")}} {{readOnlyInline}}</dt>
+ <dd>Contient le {{domxref("MediaStream")}} contenant le flux associé à l'événement.</dd>
+</dl>
+
+<h2 id="Constructeurs">Constructeurs</h2>
+
+<dl>
+ <dt>{{domxref("MediaStreamEvent.MediaStreamEvent()", "MediaStreamEvent()")}}</dt>
+ <dd>Renvoie un nouveau <code>MediaStreamEvent</code>. Il prend deux paramètres, le premier étant un {{domxref("DOMString")}} représentant le type de l'événement; le second un dictionnaire contenant le {{domxref("MediaStream")}} auquel il se réfère.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Un {{domxref("MediaStreamEvent")}} étant un {{domxref("Event")}}, cet événement implémente également ces propriétés</em>.  <em>Il n'y a pas de méthode <em>{{domxref("MediaStreamEvent")}}</em> spécifique.</em></p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js notranslate">pc.onaddstream = function( ev ) {
+  alert("Un stream (id: '" + ev.stream.id + "') a été ajouté à cette connexion.");
+};
+</pre>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.MediaStreamEvent")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/WebRTC_API" title="/en-US/docs/CSS/Using_CSS_animations">WebRTC</a></li>
+ <li>Sa cible habituelle: {{domxref("RTCPeerConnection")}}.</li>
+</ul>
diff --git a/files/fr/web/api/messageevent/index.html b/files/fr/web/api/messageevent/index.html
new file mode 100644
index 0000000000..79a62f3ab3
--- /dev/null
+++ b/files/fr/web/api/messageevent/index.html
@@ -0,0 +1,103 @@
+---
+title: MessageEvent
+slug: Web/API/MessageEvent
+translation_of: Web/API/MessageEvent
+---
+<div>Une interface <strong>MessageEvent </strong>permet de recevoir un message (une donnée texte), grâce soit au {{domxref("WebSocket")}} soit par un WebRTC {{domxref("RTCDataChannel")}}. </div>
+
+<div> </div>
+
+<p>L'interface dispose d'un gestionnaire d'événements déclenché par l'événement<span style="line-height: 1.5;"> {{domxref("WebSocket.onmessage")}} ou {{domxref("RTCDataChannel.onmessage")}}.</span></p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{domxref("MessageEvent.MessageEvent", "MessageEvent()")}}</dt>
+ <dd>Créer une nouvelle instance <code>MessageEvent</code>.</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>Cette interface hérite des méthodes et propriétés de son parent {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("MessageEvent.data")}} {{ReadonlyInline}}</dt>
+ <dd>Retourne un {{domxref("DOMString")}}, {{domxref("Blob")}} ou un tableau {{domxref("ArrayBuffer")}} contenant les données émises par le serveur/ l'émetteur. </dd>
+ <dt>{{domxref("MessageEvent.origin")}}</dt>
+ <dd>est une {{domxref("DOMString")}} …</dd>
+ <dt>{{domxref("MessageEvent.ports")}}</dt>
+ <dd>…</dd>
+ <dt>{{domxref("MessageEvent.source")}}</dt>
+ <dd>…</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>Cette interface hérite des méthodes et propriétés de son parent {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("MessageEvent.initMessageEvent()")}} {{deprecated_inline}}</dt>
+ <dd><strong>… Ne pas utiliser directement (déprécié) </strong>: préférer le constructeur {{domxref("MessageEvent.MessageEvent", "MessageEvent()")}} en lieu et place.</dd>
+</dl>
+
+<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>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] As of Gecko 11.0 {{geckoRelease("11.0")}}, Gecko supports <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer">ArrayBuffer</a></code> for data, but not {{domxref("Blob")}}.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("ExtendableMessageEvent")}}, interface similaire, mais utiliser pour donner plus de flexibilité aux auteurs.</li>
+ <li><a href="/en-US/docs/Web/API/WebSocket_API">WebSocket API</a></li>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC API</a></li>
+</ul>
diff --git a/files/fr/web/api/mouseevent/index.html b/files/fr/web/api/mouseevent/index.html
new file mode 100644
index 0000000000..9ca9f98666
--- /dev/null
+++ b/files/fr/web/api/mouseevent/index.html
@@ -0,0 +1,327 @@
+---
+title: MouseEvent
+slug: Web/API/MouseEvent
+tags:
+  - API
+  - DOM
+  - Interface
+  - Reference
+  - Référence(2)
+  - Souris
+  - évènements
+translation_of: Web/API/MouseEvent
+---
+<p id="Sommaire">{{APIRef("DOM Events")}}</p>
+
+<p>L'interface <strong><code>MouseEvent</code></strong> représente les événements qui se produisent lors d'une interaction de l'utilisateur avec un appareil de pointage (tel qu'une souris). Les événements communs utilisant cette interface incluent {{event("click")}}, {{event("dblclick")}}, {{event("mouseup")}} et {{event("mousedown")}}.</p>
+
+<p><code>MouseEvent</code> dérive de {{domxref("UIEvent")}}, qui lui-même est issu d'{{domxref("Event")}}. Bien que la méthode {{domxref ("MouseEvent.initMouseEvent()")}} soit conservée à des fins de compatibilité descendante, la création d'un objet <code>MouseEvent</code> doit être effectuée à l'aide du constructeur {{domxref ("MouseEvent.MouseEvent","MouseEvent()")}}.</p>
+
+<p>Plusieurs événements plus spécifiques sont basés sur <code>MouseEvent</code>, y compris {{domxref ("WheelEvent")}} et {{domxref ("DragEvent")}}.</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("MouseEvent.MouseEvent", "MouseEvent()")}}</dt>
+ <dd>crée un objet <code>MouseEvent</code>.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Cette interface hérite aussi des propriétés de ses parents</em> <em> {{domxref("UIEvent")}} et {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("MouseEvent.altKey")}} {{readonlyinline}}</dt>
+ <dd>renvoie <code>true</code> (<em>vrai</em>) si la touche <kbd>alt</kbd> est pressée lorsque l'événement est lancé.</dd>
+ <dt>{{domxref("MouseEvent.button")}} {{readonlyinline}}</dt>
+ <dd>Le chiffre représentant le bouton qui est pressé lorsque l'événement est lancé.</dd>
+ <dt>{{domxref("MouseEvent.buttons")}} {{readonlyinline}}{{gecko_minversion_inline("15.0")}}</dt>
+ <dd>
+ <p>Les boutons qui sont pressés alors que l'événement est lancé.</p>
+ </dd>
+ <dt>{{domxref("MouseEvent.clientX")}} {{readonlyinline}}</dt>
+ <dd>La coordonnée en X du pointeur de la souris dans les coordonnées locales (contenu du DOM).</dd>
+ <dt>{{domxref("MouseEvent.clientY")}} {{readonlyinline}}</dt>
+ <dd>La coordonnée en Y du pointeur de la souris dans les coordonnées locales (contenu du DOM).</dd>
+ <dt>{{domxref("MouseEvent.ctrlKey")}} {{readonlyinline}}</dt>
+ <dd>renvoie <code>true</code> si la touche <kbd>ctrl</kbd> est pressée alors que l'événement est lancé.</dd>
+ <dt>{{domxref("MouseEvent.metaKey")}} {{readonlyinline}}</dt>
+ <dd>renvoie <code>true</code> si la touche <kbd>méta</kbd> est pressée alors que l'événement est lancé.</dd>
+ <dt>{{domxref("MouseEvent.movementX")}} {{readonlyinline}}</dt>
+ <dd>La coordonnée en X du pointeur de la souris relative à la position de la souris lors du dernier événement {{event("mousemove")}} lancé.</dd>
+ <dt>{{domxref("MouseEvent.movementY")}} {{readonlyinline}}</dt>
+ <dd>La coordonnée en Y du pointeur de la souris relative à la position de la souris lors du dernier événement {{event("mousemove")}} lancé.</dd>
+ <dt>{{domxref("MouseEvent.offsetX")}} {{readonlyinline}}{{experimental_inline}}</dt>
+ <dd>La coordonnée en X du pointeur de la souris relative à la postion du bord de remplissage du noeud cible.</dd>
+ <dt>{{domxref("MouseEvent.offsetY")}} {{readonlyinline}}{{experimental_inline}}</dt>
+ <dd>La coordonnée en Y du pointeur de la souris relative à la postion du bord de remplissage du noeud cible.</dd>
+ <dt>{{domxref("MouseEvent.pageX")}} {{readonlyinline}}{{experimental_inline}}</dt>
+ <dd>La coordonnée en X du pointeur de la souris relative au document entier.</dd>
+ <dt>{{domxref("MouseEvent.pageY")}} {{readonlyinline}}{{experimental_inline}}</dt>
+ <dd>La coordonnée en Y du pointeur de la souris relative au document entier.</dd>
+ <dt>{{domxref("MouseEvent.region")}} {{readonlyinline}}</dt>
+ <dd>renvoie l'identifiant de la région touchée par l'évènement. Si aucune région n'est affectée, <code>null</code> est retourné.</dd>
+ <dt>{{domxref("MouseEvent.relatedTarget")}} {{readonlyinline}}</dt>
+ <dd>
+ <p>La seconde cible pour l'événement, s'il y en a une.</p>
+ </dd>
+ <dt>{{domxref("MouseEvent.screenX")}} {{readonlyinline}}</dt>
+ <dd>La coordonnée en X du pointeur de la souris de façon globale (par rapport à l'écran).</dd>
+ <dt>{{domxref("MouseEvent.screenY")}} {{readonlyinline}}</dt>
+ <dd>La coordonnée en Y du pointeur de la souris de façon globale (par rapport à l'écran).</dd>
+ <dt>{{domxref("MouseEvent.shiftKey")}} {{readonlyinline}}</dt>
+ <dd>renvoie <code>true</code> si la touche <kbd>Maj</kbd> est pressée alors que l'événement est lancé.</dd>
+ <dt>{{domxref("MouseEvent.which")}} {{readonlyinline}}</dt>
+ <dd>Le bouton qui est pressé alors que l'événement est lancé.</dd>
+ <dt>MouseEvent.mozPressure {{non-standard_inline()}} {{readonlyinline}}</dt>
+ <dd>La quantité de pression appliquée à un appareil tactile ou tablette lors de la génération de l'événement ; l'amplitude de cette valeur se situe entre 0.0 (pression minimum) et 1.0 (pression maximum).</dd>
+ <dt>MouseEvent.mozInputSource {{non-standard_inline()}} {{readonlyinline}}</dt>
+ <dd>Le type d'appareil qui a généré l'événement (une des constantes <code>MOZ_SOURCE_*</code> listées ci-dessous). Ceci permet, par exemple, de déterminer si un événement de pointeur est généré par une souris ou par un événement tactile (qui pourrait affecter le degré de précision avec lequel il est possible d'interpréter les coordonnées associées à l'événement).</dd>
+ <dt>{{domxref("MouseEvent.webkitForce")}} {{non-standard_inline()}} {{readonlyinline}}</dt>
+ <dd>La quantité de pression appliquée en cliquant.</dd>
+ <dt>{{domxref("MouseEvent.x")}} {{experimental_inline}}{{readonlyinline}}</dt>
+ <dd>Alias pour {{domxref("MouseEvent.clientX")}}.</dd>
+ <dt>{{domxref("MouseEvent.y")}} {{experimental_inline}}{{readonlyinline}}</dt>
+ <dd>Alias pour {{domxref("MouseEvent.clientY")}}.</dd>
+</dl>
+
+<h2 id="Constantes"><span style="display: none;"> </span><span style="display: none;"> </span>Constantes</h2>
+
+<dl>
+ <dt>{{domxref("MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN")}} {{non-standard_inline}}{{readonlyinline}}</dt>
+ <dd>Force minimum nécessaire pour un click normal.</dd>
+ <dt>{{domxref("MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN")}} {{non-standard_inline}}{{readonlyinline}}</dt>
+ <dd>Force minimum nécessaire pour un click fort.</dd>
+</dl>
+
+<h2 id="Les_méthodes">Les méthodes</h2>
+
+<p><em>Cette interface hérite aussi des méthodes de ses parents</em> <em>{{domxref("UIEvent")}} et {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("MouseEvent.getModifierState")}}(){{gecko_minversion_inline("15.0")}}</dt>
+ <dd>Retourne l'état actuel de la touche de modification spécifiée. Voir {{domxref("KeyboardEvent.getModifierState")}}() pour plus de détails.</dd>
+ <dt>{{domxref("MouseEvent.initMouseEvent()")}} {{deprecated_inline}}</dt>
+ <dd>initialise la valeur de l'<code>MouseEvent</code> créé. Si l'évènement a déjà été diffusé, la méthode ne produit rien.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Cet exemple illustre la simulation d'un clic (générant par programmation un événement click) sur une case à cocher en utilisant les méthodes DOM.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">simulateClick</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> evt <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">MouseEvent</span><span class="punctuation token">(</span><span class="string token">"click"</span><span class="punctuation token">,</span> <span class="punctuation token">{</span>
+    bubbles<span class="punctuation token">:</span> <span class="keyword token">true</span><span class="punctuation token">,</span>
+    cancelable<span class="punctuation token">:</span> <span class="keyword token">true</span><span class="punctuation token">,</span>
+    view<span class="punctuation token">:</span> window
+  <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">var</span> cb <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"checkbox"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">//élément pour cliquer</span>
+  <span class="keyword token">var</span> canceled <span class="operator token">=</span> <span class="operator token">!</span>cb<span class="punctuation token">.</span><span class="function token">dispatchEvent</span><span class="punctuation token">(</span>evt<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">if</span><span class="punctuation token">(</span>canceled<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="comment token">// Un gestionnaire appelé preventDefault</span>
+    <span class="function token">alert</span><span class="punctuation token">(</span><span class="string token">"canceled"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
+    <span class="comment token">// Aucun des gestionnaires n'est appelé preventDefault</span>
+    <span class="function token">alert</span><span class="punctuation token">(</span><span class="string token">"not canceled"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span>
+document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"button"</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> simulateClick<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<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><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>label</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>checkbox<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>checkbox<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span> Checked<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</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">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Click me<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>
+
+<p>Cliquez sur le bouton pour voir comment l'exemple fonctionne :</p>
+
+<p>{{ EmbedLiveSample('Example', '', '', '') }}</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('CSSOM View','#extensions-to-the-mouseevent-interface', 'MouseEvent')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Redéfinit <code>MouseEvent</code> de long à double. C'est-à-dire qu'un <code>PointerEvent</code> dont le <code>pointerType</code> est "souris" est un double.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "#dom-mouseevent-region", "MouseEvent.region")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Ajout de la propriété  <code>region</code>  à partir de {{SpecName('DOM3 Events')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Lock','#extensions-to-the-mouseevent-interface','MouseEvent')}}</td>
+   <td>{{Spec2('Pointer Lock')}}</td>
+   <td>À partir de {{SpecName('DOM3 Events')}}, ajout des propriétés <code>movementX</code> et <code>movementY</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#extensions-to-the-mouseevent-interface', 'MouseEvent')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>À partir de {{SpecName('DOM3 Events')}}, ajout des propriétés <code>offsetX</code> et <code>offsetY</code>, <code>pageX</code> et <code>pageY</code>, <code>x</code> et <code>y</code>. Redéfinition de l'écran, de la page, du client et des propriétés des coordonnées (x et y) comme <code>double</code> et non plus <code>long</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events','#events-mouseevents','MouseEvent')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>À partir de {{SpecName('DOM2 Events')}}, ajout du constructeur <code>MouseEvent()</code>, de la méthode <code>getModifierState()</code> et de la propriété <code>buttons</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent')}}</td>
+   <td>{{Spec2('DOM2 Events')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+<p> </p>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("MouseEvent.movementX","movementX")}}<br>
+    {{domxref("MouseEvent.movementY","movementY")}}</td>
+   <td>{{CompatChrome(37)}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}} {{property_prefix("moz")}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{ CompatSafari(10.1) }}</td>
+  </tr>
+  <tr>
+   <td>{{ domxref("MouseEvent.buttons", "buttons") }}</td>
+   <td>{{CompatChrome(43)}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{ domxref("MouseEvent.which", "which") }}</td>
+   <td>{{CompatChrome(1)}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>1.0</td>
+   <td>9.0</td>
+   <td>5.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>{{domxref("MouseEvent.getModifierState()", "getModifierState()")}}</td>
+   <td>{{CompatChrome(47)}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatGeckoDesktop(15)}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("MouseEvent.mozPressure", "mozPressure")}} and {{domxref("MouseEvent.mozInputSource", "mozInputSource")}} {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatGeckoDesktop(2)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("MouseEvent.MouseEvent", "MouseEvent()")}}</td>
+   <td>{{CompatChrome(45)}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatGeckoDesktop(11)}}</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("MouseEvent.region")}}</td>
+   <td>{{CompatChrome(51)}}<sup>[1]</sup></td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatGeckoDesktop(32)}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("MouseEvent.offsetX")}}, and {{domxref("MouseEvent.offsetY")}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>9</td>
+   <td>{{CompatGeckoDesktop(40)}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("MouseEvent.screenX")}}, {{domxref("MouseEvent.screenY")}}, {{domxref("MouseEvent.clientX")}}, and {{domxref("MouseEvent.Y")}} are double instead of long.</td>
+   <td>{{CompatChrome(56)}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Nécessite l'activation de l'indicateur <code>ExperimentalCanvasFeatures</code>.</p>
+
+<p> </p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<div>Son parent direct : {{domxref("UIEvent")}}.</div>
+
+<p> </p>
diff --git a/files/fr/web/api/mouseevent/offsetx/index.html b/files/fr/web/api/mouseevent/offsetx/index.html
new file mode 100644
index 0000000000..853c9d18c7
--- /dev/null
+++ b/files/fr/web/api/mouseevent/offsetx/index.html
@@ -0,0 +1,122 @@
+---
+title: MouseEvent.offsetX
+slug: Web/API/MouseEvent/offsetX
+tags:
+  - API
+  - Experimental
+  - MouseEvent
+  - Property
+  - Read-only
+  - Reference
+translation_of: Web/API/MouseEvent/offsetX
+---
+<p>{{APIRef("DOM Events")}}{{SeeCompatTable}}</p>
+
+<p>La propriété en lecture seule <strong><code>offsetX</code></strong> de l'interface {{domxref("MouseEvent")}} fournit le décalage sur l'axe X du pointeur de la souris entre cet évènement et la bordure de la marge intérieure du noeud cible.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var xOffset = <em>instanceOfMouseEvent</em>.offsetX;
+</pre>
+
+<h3 id="Valeur_renvoyée">Valeur renvoyée</h3>
+
+<p>Un nombre à virgule flottante double précision <code>double</code>. Les premières versions de la spécification la définissaient comme un nombre entier. Pour plus de détails, voir la section Compatibilité des navigateurs.</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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#dom-mouseevent-offsetx', 'MouseEvent')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("39.0")}}</td>
+   <td>6</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Redéfini de <code>long</code> à <code>double</code></td>
+   <td>{{CompatChrome(56)}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionalité</th>
+   <th>Android Webview</th>
+   <th>Chrome pour 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>Support simple</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("43.0")}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Redéfini de <code>long</code> à <code>double</code></td>
+   <td>{{CompatChrome(56)}}</td>
+   <td>{{CompatChrome(56)}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li>{{ domxref("MouseEvent") }}</li>
+</ul>
diff --git a/files/fr/web/api/mouseevent/offsety/index.html b/files/fr/web/api/mouseevent/offsety/index.html
new file mode 100644
index 0000000000..7227d3b0ee
--- /dev/null
+++ b/files/fr/web/api/mouseevent/offsety/index.html
@@ -0,0 +1,122 @@
+---
+title: MouseEvent.offsetY
+slug: Web/API/MouseEvent/offsetY
+tags:
+  - API
+  - Experimental
+  - MouseEvent
+  - Property
+  - Read-only
+  - Reference
+translation_of: Web/API/MouseEvent/offsetY
+---
+<p>{{APIRef("DOM Events")}}{{SeeCompatTable}}</p>
+
+<p>La propriété en lecture seule <strong><code>offsetY</code></strong> de l'interface {{domxref("MouseEvent")}}  fournit le décalage sur l'axe Y du pointeur de la souris entre cet évènement et la bordure de la marge intérieure du noeud cible.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var yOffset = <em>instanceOfMouseEvent</em>.offsetY;
+</pre>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Un nombre à virgule flottante double précision <code>double</code>. Les premières versions de la spécification la définissaient comme un nombre entier. Pour plus de détails, voir la section Commpatibilité des navigateurs.</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('CSSOM View', '#dom-mouseevent-offsety', 'MouseEvent')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("39.0")}}</td>
+   <td>6</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Redéfini de <code>long</code> à <code>double</code></td>
+   <td>{{CompatChrome(56)}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android Webview</th>
+   <th>Chrome pour 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>Support simple</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("43.0")}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Redéfini de <code>long</code> à <code>double</code></td>
+   <td>{{CompatChrome(56)}}</td>
+   <td>{{CompatChrome(56)}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li>{{ domxref("MouseEvent") }}</li>
+</ul>
diff --git a/files/fr/web/api/mutationobserver/index.html b/files/fr/web/api/mutationobserver/index.html
new file mode 100644
index 0000000000..9ef10b13db
--- /dev/null
+++ b/files/fr/web/api/mutationobserver/index.html
@@ -0,0 +1,245 @@
+---
+title: MutationObserver
+slug: Web/API/MutationObserver
+translation_of: Web/API/MutationObserver
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><code>MutationObserver</code> fournit un moyen d’intercepter les changements dans le <a href="/en-US/docs/DOM">DOM</a>. Il a été conçu pour remplacer les <a href="/en-US/docs/DOM/Mutation_events">Mutation Events</a> définis dans la spécification DOM3 Events.</p>
+
+<h2 id="Constructor" name="Constructor">Constructeur</h2>
+
+<h3 id="MutationObserver()" name="MutationObserver()"><code>MutationObserver()</code></h3>
+
+<p>Le constructeur permettant d’instancier un nouvel observateur de mutations DOM.</p>
+
+<pre class="syntaxbox">new MutationObserver( function callback );</pre>
+
+<h6 id="Parameters" name="Parameters">Paramètres</h6>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Une fonction qui sera appelée à chaque mutation du DOM. L’observateur appellera cette fonction avec deux arguments. Le premier est un tableau d’objets de type {{domxref("MutationRecord")}} ; le second est l’instance de <code>MutationObserver</code>.</dd>
+</dl>
+
+<h2 id="Instance_methods" name="Instance_methods">Méthodes d’instance</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>void <a href="#observe()">observe</a>( {{domxref("Node")}} target, <a href="#MutationObserverInit">MutationObserverInit</a> options );</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#disconnect()">disconnect</a>();</code></td>
+  </tr>
+  <tr>
+   <td><code>Array <a href="#takeRecords()">takeRecords</a>();</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Note</strong>: La cible {{domxref("Node")}} ne doit pas être confondue avec celle de <a href="https://nodejs.org/en/">NodeJS</a>.</p>
+</div>
+
+<h3 id="observe()" name="observe()"><code>observe()</code></h3>
+
+<p>Inscrit l’instance du <code>MutationObserver</code> afin d’être notifié des mutations DOM du nœud sélectionné.</p>
+
+<pre class="syntaxbox">void observe( {{domxref("Node")}} target, <a href="#MutationObserverInit"><code>MutationObserverInit</code></a> options );
+</pre>
+
+<h6 id="Parameters" name="Parameters">Paramètres</h6>
+
+<dl>
+ <dt><code>target</code></dt>
+ <dd>Le {{domxref("Node")}} (nœud) sur lequel doivent être observées les mutations DOM.</dd>
+ <dt><code>options</code></dt>
+ <dd>Un objet du type <a href="#MutationObserverInit"><code>MutationObserverInit</code></a>. Il spécifie quelles mutations DOM sont à rapporter.</dd>
+</dl>
+
+<div class="note"><strong>Note :</strong> ajouter un observateur sur un élément revient à utiliser <code>addEventListener</code>. Si vous observez un élément plusieurs fois, cela n’a pas d’impact, dans le sens où, si vous observez un élément deux fois, la callback ne sera pas appelée deux fois, et vous n’aurez pas besoin d’appeler <code>disconnect()</code> deux fois. En d’autres termes, une fois qu’un élément est observé, l’observer à nouveau avec la même instance n’a pas d’effet. Cependant, si la callback est différente, un nouvel observateur sera ajouté.</div>
+
+<h3 id="disconnect()" name="disconnect()"><code>disconnect()</code></h3>
+
+<p>L’instance <code>MutationObserver</code> cesse de recevoir les notifications de mutations DOM. Jusqu’à ce que la méthode <a href="#observe()"><code>observe()</code></a> soit appelée à nouveau, les callbacks de l’observateur ne seront pas invoquées.</p>
+
+<pre class="syntaxbox">void disconnect();
+</pre>
+
+<div class="note">
+<p><strong>Note : </strong>Selon la <a href="https://dom.spec.whatwg.org/#garbage-collection">spécification</a>, un <code>MutationObserver</code> est supprimé par le garbage collector si l'élément cible est supprimé.</p>
+</div>
+
+<h3 id="takeRecords()" name="takeRecords()"><code>takeRecords()</code></h3>
+
+<p>Vide la file des mutations enregistrées du <code>MutationObserver</code> et retourne son contenu.</p>
+
+<pre class="syntaxbox">Array takeRecords();
+</pre>
+
+<dl>
+ <dt>Valeur de retour</dt>
+ <dd>Retourne un tableau de  {{domxref("MutationRecord")}}.</dd>
+</dl>
+
+<h2 id="MutationObserverInit" name="MutationObserverInit"><code>MutationObserverInit</code></h2>
+
+<p><code>MutationObserverInit</code> est un objet pouvant avoir les propriétés suivantes :</p>
+
+<div class="note"><strong>Note :</strong> Au moins une propriété parmi <code>childList</code>, <code>attributes</code> ou <code>characterData</code> doit être initialisée à <code>true</code>, sinon l’erreur <em lang="en">"An invalid or illegal string was specified</em>" sera émise.</div>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Propriété</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>childList</code></td>
+   <td><code>true</code> si l’ajout ou la suppression des éléments enfants du nœud visé (incluant les nœuds de texte) sont à observer.</td>
+  </tr>
+  <tr>
+   <td><code>attributes</code></td>
+   <td><code>true</code> si les mutations d’attributs du nœud visé sont à observer.</td>
+  </tr>
+  <tr>
+   <td><code>characterData</code></td>
+   <td><code>true</code> si les mutation de texte du nœud visé sont à observer.</td>
+  </tr>
+  <tr>
+   <td><code>subtree</code></td>
+   <td><code>true</code> si les descendants du nœud visé sont également à observer.</td>
+  </tr>
+  <tr>
+   <td><code>attributeOldValue</code></td>
+   <td><code>true</code> si <code>attributes</code> est <code>true</code> et si la valeur des attributs avant mutation doit être enregistrée.</td>
+  </tr>
+  <tr>
+   <td><code>characterDataOldValue</code></td>
+   <td><code>true</code> si <code>characterData</code> est <code>true</code> et si la valeur des données avant mutation doit être enregistrée.</td>
+  </tr>
+  <tr>
+   <td><code>attributeFilter</code></td>
+   <td>Spécifiez un tableau de noms d’attributs locaux (sans namespace) si vous souhaitez n’observer les mutations que sur une partie des attributs.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemple_d’utilisation">Exemple d’utilisation</h2>
+
+<p>L’exemple suivant est extrait de ce <a class="external" href="http://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/" rel="freelink">blog</a>.</p>
+
+<pre class="brush: js">// Selectionne le noeud dont les mutations seront observées
+var targetNode = document.getElementById('some-id');
+
+// Options de l'observateur (quelles sont les mutations à observer)
+var config = { attributes: true, childList: true };
+
+// Fonction callback à éxécuter quand une mutation est observée
+var callback = function(mutationsList) {
+    for(var mutation of mutationsList) {
+        if (mutation.type == 'childList') {
+            console.log('Un noeud enfant a été ajouté ou supprimé.');
+        }
+        else if (mutation.type == 'attributes') {
+            console.log("L'attribut '" + mutation.attributeName + "' a été modifié.");
+        }
+    }
+};
+
+// Créé une instance de l'observateur lié à la fonction de callback
+var observer = new MutationObserver(callback);
+
+// Commence à observer le noeud cible pour les mutations précédemment configurées
+observer.observe(targetNode, config);
+
+// L'observation peut être arrêtée par la suite
+observer.disconnect();</pre>
+
+<h2 id="Additional_reading" name="Additional_reading">Autres articles pour en savoir plus (en anglais)</h2>
+
+<ul>
+ <li><a class="external" href="http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers" rel="freelink">A brief overview</a></li>
+ <li><a class="external" href="http://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/" rel="freelink">A more in-depth discussion</a></li>
+ <li><a class="external" href="http://www.youtube.com/watch?v=eRZ4pO0gVWw" rel="freelink">A screencast by Chromium developer Rafael Weinstein</a></li>
+ <li><a class="external" href="http://code.google.com/p/mutation-summary/" rel="freelink">The mutation summary library</a></li>
+ <li><a href="http://dom.spec.whatwg.org/#mutation-observers">The DOM standard</a> which defines the <code>MutationObserver</code> interface</li>
+</ul>
+
+<h2 id="Spécifications" name="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('DOM WHATWG', '#mutationobserver', 'MutationObserver')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>18 {{ property_prefix("WebKit") }}<br>
+    26</td>
+   <td>{{ CompatGeckoDesktop(14) }}</td>
+   <td>11</td>
+   <td>15</td>
+   <td>6.0 {{ property_prefix("WebKit") }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome pour Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>18 {{ property_prefix("WebKit") }}<br>
+    26</td>
+   <td>{{ CompatGeckoMobile(14) }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>15</td>
+   <td>
+    <p>6 {{ property_prefix("WebKit")}}</p>
+
+    <p>7</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fr/web/api/namednodemap/index.html b/files/fr/web/api/namednodemap/index.html
new file mode 100644
index 0000000000..51926c4857
--- /dev/null
+++ b/files/fr/web/api/namednodemap/index.html
@@ -0,0 +1,163 @@
+---
+title: NamedNodeMap
+slug: Web/API/NamedNodeMap
+tags:
+  - API
+  - DOM
+  - Interface
+  - Reference
+translation_of: Web/API/NamedNodeMap
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>L'interface <code><strong>NamedNodeMap</strong></code> représente une collection d'objets {{domxref("Attr")}}. Les objets de cette collection n'ont pas d'ordre particulier (contrairement à {{domxref("NodeList")}}) mais on peut y accéder grâce à un index (comme pour un tableau).</p>
+
+<p>Un objet <code>NamedNodeMap</code> est <em>vivant</em> et sera automatiquement mis à jour si des modifications sont apportées à son contenu (que cela provienne d'une source interne ou externe).</p>
+
+<div class="note">
+<p><strong>Note :</strong> Bien qu'intitulée <code>NamedNodeMap</code>, cette interface ne manipule pas d'objets {{domxref("Node")}} mais des objets {{domxref("Attr")}}. Ces derniers étaient à l'origine (et le sont toujours pour certaines implémentations) une classe spécialisée de {{domxref("Node")}}.</p>
+</div>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Cette interface n'hérite d'aucune propriété.</em></p>
+
+<dl>
+ <dt>{{domxref("NamedNodeMap.length")}} {{ReadOnlyInline}}</dt>
+ <dd>Cette propriété renvoie le nombre d'objets contenus dans la <em>map</em>.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Cette interface n'hérite d'aucune méthode.</em></p>
+
+<dl>
+ <dt>{{domxref("NamedNodeMap.getNamedItem()")}}</dt>
+ <dd>Cette méthode renvoie un objet {{domxref("Attr")}} qui correspond au nom indiqué.</dd>
+ <dt>{{domxref("NamedNodeMap.setNamedItem()")}}</dt>
+ <dd>Cette méthode remplace ou ajoute l'objet {{domxref("Attr")}} identifié dans la collection par le nom indiqué.</dd>
+ <dt>{{domxref("NamedNodeMap.removeNamedItem()")}}</dt>
+ <dd>Cette méthode retire l'objet {{domxref("Attr")}} de la collection à partir du nom indiqué.</dd>
+ <dt>{{domxref("NamedNodeMap.item()")}}</dt>
+ <dd>Cette méthode renvoie l'objet {{domxref("Attr")}} à l'index indiqué (ou <code>null</code> si l'index est supérieur ou égal au nombre de nœuds.</dd>
+ <dt>{{domxref("NamedNodeMap.getNamedItemNS()")}}</dt>
+ <dd>Cette méthode renvoie un objet {{domxref("Attr")}} identifié par un espace de noms et un nom local associé.</dd>
+ <dt>{{domxref("NamedNodeMap.setNamedItemNS()")}}</dt>
+ <dd>Cette méthode remplace ou ajoute un objet {{domxref("Attr")}} identifié par un espace de noms et un nom local associé.</dd>
+ <dt>{{domxref("NamedNodeMap.removeNamedItemNS()")}}</dt>
+ <dd>Cette méthode retire l'objet {{domxref("Attr")}} de la collection à partir d'un espace de noms et d'un nom local associé.</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('DOM WHATWG', '#interface-namednodemap', 'NamedNodeMap')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Interagit avec {{domxref("Attr")}} plutôt qu'avec {{domxref("Node")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-1780488922', 'NamedNodeMap')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Aucune modification depuis {{SpecName('DOM2 Core')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-1780488922', 'NamedNodeMap')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Ajout des méthodes <code>getNamedItemNS()</code>, <code>setNamedItemNS()</code> et <code>removeNamedItemNS()</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'core.html#ID-1780488922', 'NamedNodeMap')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Manipule des objets {{domxref("Attr")}} et pas des objets {{domxref("Node")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(22)}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Manipule des objets {{domxref("Attr")}} et pas des objets {{domxref("Node")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(22)}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] In Gecko 22 this interface was named <code>mozNamedAttrMap</code>. In Gecko 34 it was named back to <code>NamedNodeMap</code>.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Element.attributes")}}</li>
+ <li>{{domxref("Attr")}}</li>
+ <li>{{domxref("NodeList")}}</li>
+</ul>
diff --git a/files/fr/web/api/namelist/index.html b/files/fr/web/api/namelist/index.html
new file mode 100644
index 0000000000..9003767ee3
--- /dev/null
+++ b/files/fr/web/api/namelist/index.html
@@ -0,0 +1,52 @@
+---
+title: NameList
+slug: Web/API/NameList
+tags:
+  - API
+  - DOM
+  - Obsolete
+translation_of: Web/API/NameList
+---
+<div>{{APIRef("DOM")}} {{ obsolete_header("10.0") }}</div>
+
+<div class="note">
+<p><strong>Note:</strong> Bien que cette interface ait été précédemment implémentée dans Gecko, il n'y avait aucun moyen d'en créer une. <code>NameList</code> a été supprimé, en vigueur avec {{ Gecko("10.0") }}</p>
+</div>
+
+<p>L'interface <code><strong>NameList</strong></code> fournit une abstraction pour une collection ordonnée de paires de valeurs de nom et d'espace de noms. Les éléments sont accessibles par un index basé sur 0. La spécification DOM ne spécifie pas comment la collection doit être implémentée.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("NameList.length")}} {{readonlyInline}}</dt>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("NameList.contains()")}}</dt>
+ <dd>Renvoie un {{jsxref("Boolean")}}.</dd>
+ <dt>{{domxref("NameList.containsNS()")}}</dt>
+ <dd>Renvoie un {{jsxref("Boolean")}}.</dd>
+ <dt>{{domxref("NameList.getName()")}}</dt>
+ <dd>Renvoie un {{domxref("DOMString")}}.</dd>
+ <dt>{{domxref("NameList.getNamespaceURI()")}}</dt>
+ <dd>Renvoie un {{domxref("DOMString")}}.</dd>
+</dl>
+
+<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("DOM3 Core", "core.html#NameList", "NameList")}}</td>
+   <td>{{Spec2("DOM3 Core")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/api/navigator/battery/index.html b/files/fr/web/api/navigator/battery/index.html
new file mode 100644
index 0000000000..5e03c2f40f
--- /dev/null
+++ b/files/fr/web/api/navigator/battery/index.html
@@ -0,0 +1,127 @@
+---
+title: window.navigator.battery
+slug: Web/API/Navigator/battery
+translation_of: Web/API/Navigator/battery
+---
+<p>{{ Apiref() }}</p>
+
+<p>{{ SeeCompatTable() }}</p>
+
+<p>L'API Battery Status fournit des informations sur le niveau de charge du système et vous permet d'être notifiée via certains évènements si le niveau de batterie varie. Elle peut être utilisée pour privilégier les tâches moins gourmantes en traitement processeur sur votre site si le niveau de batterie est faible ou permettre une sauvegarde de vos travaux pour prévir d'une perte de données si la batterie est presque vide.</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<dl>
+ <dt><code>charging</code></dt>
+ <dd><strong>Lecture seule</strong>. Un booléen représentant le statut de charge de la batterie du système. Il retourne <code>vrai</code> si la batterie est en charge, si l'état de charge n'est pas déterminable, ou si aucune batterie n'est branchée au système. Retourne <code>faux</code> si la batterie est en cours de décharge.</dd>
+ <dt><code>chargingTime</code></dt>
+ <dd><strong>Lecture seule</strong>. Un double représentant le temps restant en secondes avant que la batterie ne soit complètement chargée. Retourne 0 si la batterie est complètement chargée.<br>
+ Retourne un infini positif si la batterie se décharge ou si l'implémentation est incapable de déterminer le temps de charge restant.</dd>
+ <dt><code>dischargingTime</code></dt>
+ <dd><strong>Lecture seule</strong>. Un double représentant le temps restant en secondes avant que la batterie ne soit complètement déchargée et que le système ne soit suspendu. Retourne un infini positif si la batterie est en charge, si l'implémentation n'est pas capable de déterminer le temps de décharge restant, ou s'il n'y a pas de batterie branchée au système.</dd>
+ <dt><code>level</code></dt>
+ <dd><strong>Lecture seule</strong>. Un double représentant le niveau de charge de la batterie du système, échelonné de 0 à 1.0. Retourne 0 si la batterie est vide et que le système est sur le point d'être suspendu. Retourne 1.0 si la batterie est pleine, si l'implémentation n'est pas capable de déterminer le niveau de charge de la batterie, ou s'il n'y a pas de batterie branchée au système.</dd>
+</dl>
+
+<h2 id="Evènements">Evènements</h2>
+
+<dl>
+ <dt><code>chargingchange</code></dt>
+ <dd>Déclenché lorsque l'état de charge de la batterie est mis à jour.</dd>
+ <dt><code>chargingtimechange</code></dt>
+ <dd>Déclenché lorsque le temps de charge de la batterie est mis à jour.</dd>
+ <dt><code>dischargingtimechange</code></dt>
+ <dd>Déclenché lorsque le temps de decharge de la batterie est mis à jour.</dd>
+ <dt><code>levelchange</code></dt>
+ <dd>Déclenché lorsque le niveau de charge de la batterie est mis à jour.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Voir aussi <a class="external" href="http://dev.w3.org/2009/dap/system-info/battery-status.html#introduction">l'exemple dans la specification</a>.</p>
+
+<pre class="brush: js">var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery;
+
+function updateBatteryStatus() {
+  alert("Battery status: " + battery.level * 100 + " %");
+
+  if (battery.charging) {
+    alert("Battery is charging");
+  }
+}
+
+battery.addEventListener("chargingchange", updateBatteryStatus);
+battery.addEventListener("levelchange", updateBatteryStatus);
+updateBatteryStatus();
+</pre>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>20 {{ property_prefix("webkit") }}</td>
+   <td>10.0</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>20 {{ property_prefix("webkit") }}</td>
+   <td>10.0 {{ property_prefix("moz") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Gecko_notes">Gecko notes</h3>
+
+<p>Désactivée par défaut dans Firefox 10.0, mais peut etre activée en réglant <code>dom.battery.enabled</code> à <code>vrai</code>. A partir de Firefox 11.0, <code>mozBattery</code> est activé par défaut.</p>
+
+<div class="note"><strong>Note:</strong> L'API Batterie est actuellement supportée sur Android, Windows et Linux avec UPower installé. Le support de MacOS est disponible à partir de Gecko 18.0 {{geckoRelease("18.0")}}.</div>
+
+<h2 id="Spécification">Spécification</h2>
+
+<ul>
+ <li>{{ spec("http://dev.w3.org/2009/dap/system-info/battery-status.html", "Battery Status API Specification", "ED") }}</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="external" href="http://hacks.mozilla.org/2012/02/using-the-battery-api-part-of-webapi/">Blog post - Using the Battery API</a></li>
+ <li><a class="external" href="http://davidwalsh.name/battery-api" title="http://davidwalsh.name/battery-api">David Walsh on the Javascript Battery Api</a></li>
+</ul>
+
+<p>{{ languages( {"zh-cn": "zh-cn/DOM/window.navigator.battery" } ) }}</p>
diff --git a/files/fr/web/api/navigator/connection/index.html b/files/fr/web/api/navigator/connection/index.html
new file mode 100644
index 0000000000..492a24cac4
--- /dev/null
+++ b/files/fr/web/api/navigator/connection/index.html
@@ -0,0 +1,95 @@
+---
+title: Navigator.connection
+slug: Web/API/Navigator/connection
+tags:
+  - API
+  - Connexion
+  - Expérimental(2)
+  - Navigateur
+  - Propriété
+translation_of: Web/API/Navigator/connection
+---
+<p>{{APIRef("Network Information API")}}{{SeeCompatTable}}</p>
+
+<p><code><strong>Navigator.connection</strong></code> est une propriété en lecture seule, elle représente une {{domxref("NetworkInformation")}} qui contient les informations de la connexion du système, telles que la  bande passante actuelle du périphérique utilisateur ou si la connexion est mesurée. La propriété peut être utilisée pour sélectionner un contenu en haute ou basse définition, dépendant de la connexion de l'utilisateur.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>connexionInfo</em> = navigator.connection</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">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Network Information', '#h-the-connection-attribute', 'Navigator.connection')}}</td>
+   <td>{{Spec2('Network Information')}}</td>
+   <td>Spécification initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>61</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.2 {{property_prefix("webkit")}}</td>
+   <td>12.0<sup>[1]</sup></td>
+   <td>1.4</td>
+   <td>{{CompatNo}}</td>
+   <td>37</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">[1] L'API Network peut être désactivé en utilisant la préférence <code>dom.netinfo.enabled</code>.</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Évènements_online_et_offline">Évènements online et offline</a></li>
+</ul>
diff --git a/files/fr/web/api/navigator/cookieenabled/index.html b/files/fr/web/api/navigator/cookieenabled/index.html
new file mode 100644
index 0000000000..eff4726ea4
--- /dev/null
+++ b/files/fr/web/api/navigator/cookieenabled/index.html
@@ -0,0 +1,49 @@
+---
+title: Navigator.cookieEnabled
+slug: Web/API/Navigator/cookieEnabled
+translation_of: Web/API/Navigator/cookieEnabled
+---
+<p>{{ ApiRef("HTML DOM") }}</p>
+
+<p><span class="seoSummary"><code>navigator.cookieEnabled</code></span> retourne une valeur booléenne qui indique si les cookies sont activés. Cette propriété est en lecture seule.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">var cookieEnabled = navigator.cookieEnabled;
+</pre>
+
+<ul>
+ <li><code>cookieEnabled</code> est un <a href="/en-US/docs/Glossary/Boolean">Boolean</a>: <code>true</code> ou <code>false</code>.</li>
+</ul>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js">if (!navigator.cookieEnabled) {
+  // Ce navigateur ne supporte pas ou bloque les cookies.
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</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-navigator-cookieenabled", "Navigator.cookieEnabled")}}</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.Navigator.cookieEnabled")}}</p>
diff --git a/files/fr/web/api/navigator/credentials/index.html b/files/fr/web/api/navigator/credentials/index.html
new file mode 100644
index 0000000000..e56091be03
--- /dev/null
+++ b/files/fr/web/api/navigator/credentials/index.html
@@ -0,0 +1,59 @@
+---
+title: Navigator.credentials
+slug: Web/API/Navigator/credentials
+tags:
+  - API
+  - Credential Management API
+  - CredentialsContainer
+  - Propriété
+  - Reference
+translation_of: Web/API/Navigator/credentials
+---
+<p>{{securecontext_header}}{{APIRef("")}}</p>
+
+<p>La propriété <strong><code>credentials</code></strong>, rattachée à l'interface {{domxref("Navigator")}}, renvoie l'interface {{domxref("CredentialsContainer")}} qui expose des méthodes pour demander des informations d'authentification. L'interface {{domxref("CredentialsContainer")}} notifie également l'agent utilisateur lorsqu'un évènement pertinent se produit (une connexion ou une déconnexion réussie par exemple). Cette propriété peut être utilisée pour détecter si la fonctionnalité est prise en charge ou non.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var credentialsContainer = navigator.credentials</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>L'interface {{domxref("CredentialsContainer")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">if ('credentials' in navigator) {
+  navigator.credentials.get({password: true})
+  .then(function(creds) {
+    // Gérer les informations d'authentification
+  });
+} else {
+  // Gérer la connexion comme avant
+};
+</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('Credential Management')}}</td>
+   <td>{{Spec2('Credential Management')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Navigator.credentials")}}</p>
diff --git a/files/fr/web/api/navigator/donottrack/index.html b/files/fr/web/api/navigator/donottrack/index.html
new file mode 100644
index 0000000000..e1cd620c45
--- /dev/null
+++ b/files/fr/web/api/navigator/donottrack/index.html
@@ -0,0 +1,112 @@
+---
+title: Navigator.doNotTrack
+slug: Web/API/Navigator/doNotTrack
+tags:
+  - API
+  - DOM
+  - Propriétés
+  - Reference
+translation_of: Web/API/Navigator/doNotTrack
+---
+<p>{{ApiRef("HTML DOM")}}{{SeeCompatTable}}</p>
+
+<p>Renvoi le <span class="short_text" id="result_box" lang="fr"><span class="hps">paramètre</span></span> utilisateur de <strong>do-not-track</strong>. Cette valeur est "1" si l´utilisateur a demandé de ne pas <span id="result_box" lang="fr"><span class="hps">être suivi</span> <span class="hps">par les sites web</span><span>, le contenu ou</span> <span class="hps">la publicité</span><span>.</span></span></p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="eval"><em>dnt</em> = <em>navigator</em>.doNotTrack;
+</pre>
+
+<p><span class="short_text" id="result_box" lang="fr"><span>La valeur reflète celle de l'en-tête "do-not-track" <em>(ne pas suivre)</em>,</span></span> c'est-à-dire {"1", "0", "unspecified" }. Note : <span class="short_text" id="result_box" lang="fr"><span>Avant Gecko 32, Gecko a utilisé les valeurs</span></span> { "yes", "no", "unspecified"} (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=887703">bug 887703</a>).</p>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="eval">dump(window.navigator.doNotTrack);
+//  <span id="result_box" lang="fr"><span>écrit "1" si DNT est activé;</span> <span>"0" si l'utilisateur a opté pour le suivi;</span> <span>sinon c'est "</span></span><span lang="fr"><span>unspecified" <em>(non spécifié)</em></span></span>
+</pre>
+
+<h2 id="Specification" name="Specification">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("Tracking", "#widl-Navigator-doNotTrack", "Navigator.doNotTrack")}}</td>
+   <td>{{Spec2("Tracking")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalités</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>23</td>
+   <td>{{CompatGeckoDesktop("9.0")}}<sup>[1]</sup></td>
+   <td>9<sup>[2]</sup><br>
+    11[3]</td>
+   <td>12</td>
+   <td>5.1<sup>[4]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalités</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("9.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}<sup>[2]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] <span id="result_box" lang="fr"><span>Avant Gecko 32 de Firefox, navigator.doNotTrack rapportait</span></span><span lang="fr"><span> les valeurs </span></span> <code>yes</code> <span lang="fr"><span> et </span></span> <code>no</code> <span lang="fr"><span> à la place de </span></span> <code>1</code> <span lang="fr"><span> et </span></span> <code>0</code> <span lang="fr"><span>.</span></span></p>
+
+<p>[2] Internet Explorer 9 et 10 utilisent le préfixe du fournisseur, c'est-à-dire <code>navigator.msDoNotTrack</code>.</p>
+
+<p>[3] Internet Explorer 11 et Edge utilisent <code>window.doNotTrack</code> au lieu de <code>navigator.doNotTrack</code>.</p>
+
+<p>[4] Safari 7.1.3+ utilise <code>window.doNotTrack</code> au lieu de <code>navigator.doNotTrack</code>.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en/The_Do_Not_Track_Field_Guide" title="https://developer.mozilla.org/en/The_Do_Not_Track_Field_Guide">The Do Not Track field guide</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/web/api/navigator/geolocation/index.html b/files/fr/web/api/navigator/geolocation/index.html
new file mode 100644
index 0000000000..d2bf92e515
--- /dev/null
+++ b/files/fr/web/api/navigator/geolocation/index.html
@@ -0,0 +1,106 @@
+---
+title: Navigator.geolocation
+slug: Web/API/Navigator/geolocation
+tags:
+  - API
+  - Géolocalisation API
+  - Navigateur
+  - Propriété
+  - Reference
+translation_of: Web/API/Navigator/geolocation
+---
+<div>{{APIRef("Geolocation API")}}</div>
+
+<p><strong><code>Navigator.geolocation</code></strong> est une propriété en lecture seule, qui retoune un objet {{domxref("Geolocation")}} donnant accès aux contenus web de localisation de l'appareil. Ceci permet à un site Internet ou à une application d'offrir des résultats personnalisés basés sur la localisation des utilisateurs.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Pour des raisons de sécurité, quand une page web essaie d'accéder aux informations de localisation, l'utilisateur reçoit une notification qui lui demande la permission d'activer cette fonctionnalité. Chaque navigateur a sa propre politique et ses propres méthodes pour demander cette permission.</p>
+</div>
+
+<h2 id="Syntaxe"><br>
+ Syntaxe</h2>
+
+<pre class="syntaxbox"><var>geo</var> = <var>navigator</var>.geolocation
+</pre>
+
+<h2 id="Spécifications"><br>
+ 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('Geolocation', '#navi-geo', 'Navigator.geolocation')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateur"><br>
+ Compatibilité navigateur</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>5</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>10.60<br>
+    {{CompatNo}} 15.0<br>
+    16.0</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>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>51</td>
+   <td>51</td>
+   <td>{{CompatGeckoMobile("4")}}</td>
+   <td>10</td>
+   <td>10.60</td>
+   <td>3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi"><br>
+ Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Using_geolocation">Utiliser la géolocalisation</a></li>
+</ul>
diff --git a/files/fr/web/api/navigator/getgamepads/index.html b/files/fr/web/api/navigator/getgamepads/index.html
new file mode 100644
index 0000000000..d936f8262f
--- /dev/null
+++ b/files/fr/web/api/navigator/getgamepads/index.html
@@ -0,0 +1,53 @@
+---
+title: Navigator.getGamepads()
+slug: Web/API/Navigator/getGamepads
+translation_of: Web/API/Navigator/getGamepads
+---
+<p>{{ APIRef("Navigator") }}{{SeeCompatTable}}</p>
+
+<p>La méthode <strong><code>Navigator.getGamepads()</code></strong> renvoie un tableau d'objets {{ domxref("Gamepad") }}, un par contrôleur connecté à la machine.</p>
+
+<p>Des éléments dans le tableau peuvent être <code>null</code> si un contrôleur est déconnecté durant la session, ainsi les autres restants gardent le même indice.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"> var arrayGP = navigator.getGamepads();</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">window.addEventListener("gamepadconnected", function(e) {
+  var gp = navigator.getGamepads()[0];
+  console.log("Contrôleur n°%d connecté : %s. %d boutons, %d axes.",
+  gp.index, gp.id,
+  gp.buttons.length, gp.axes.length);
+});</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('Gamepad', '', 'The Gamepad API specification')}}</td>
+   <td>{{Spec2('Gamepad')}}</td>
+   <td>Première définition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Navigator.getGamepads")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/Guide/API/Gamepad">Utiliser l'API Gamepad</a></li>
+ <li><a href="/fr/docs/Web/API/Gamepad_API">L'API Gamepad</a></li>
+</ul>
diff --git a/files/fr/web/api/navigator/id/index.html b/files/fr/web/api/navigator/id/index.html
new file mode 100644
index 0000000000..1da4e224cd
--- /dev/null
+++ b/files/fr/web/api/navigator/id/index.html
@@ -0,0 +1,17 @@
+---
+title: navigator.id
+slug: Web/API/Navigator/id
+tags:
+  - Navigator
+  - Persona
+translation_of: Archive/Navigator-id
+---
+<div>{{ ApiRef("Persona") }}</div>
+
+<h2 id="Summary" name="Summary">Résumé</h2>
+
+<p>Le <a href="/en-US/docs/Persona" title="BrowserID">protocole BrowserID</a> définit une nouvelle propriété <code>id</code> dans l'objet {{ domxref ("window.navigator")}}, dans laquelle l'API BrowserID est rendue disponible. Cette API a subi plusieurs importantes modifications. Chaque modification est listée séparément ci-dessous.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="line-numbers  language-html"><code class="language-html">var id = navigator.id</code></pre>
diff --git a/files/fr/web/api/navigator/index.html b/files/fr/web/api/navigator/index.html
new file mode 100644
index 0000000000..e8e395d3e7
--- /dev/null
+++ b/files/fr/web/api/navigator/index.html
@@ -0,0 +1,164 @@
+---
+title: Navigator
+slug: Web/API/Navigator
+tags:
+  - API
+  - DOM4
+  - Interface
+  - Navigateur
+  - Références(2)
+  - Web
+translation_of: Web/API/Navigator
+---
+<p>{{ APIRef("DOM4") }}</p>
+
+<p>L'interface <code><strong>Navigator</strong></code> représente l'état et l'identité de l'agent utilisateur. Elle permet aux scripts de l'interroger et de s'enregister eux-mêmes pour poursuivre certaines tâches.</p>
+
+<p>Un objet <code>Navigator</code> peut être récupéré en utilisant la propriété en lecture seule {{domxref("Window.navigator")}}.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>N'hérite d'aucune propriété, mais implémente celles définies dans </em> <em>{{domxref("NavigatorID")}}, {{domxref("NavigatorLanguage")}}, {{domxref("NavigatorOnLine")}}, {{domxref("NavigatorContentUtils")}}, {{domxref("NavigatorStorage")}}, {{domxref("NavigatorStorageUtils")}}, {{domxref("NavigatorConcurrentHardware")}}, {{domxref("NavigatorPlugins")}}</em> <em> et </em> <em>{{domxref("NavigatorUserMedia")}}.</em></p>
+
+<h3 id="Standard">Standard</h3>
+
+<dl>
+ <dt>{{domxref("Navigator.activeVRDisplays")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Retourne un tableau contenant chaque objet {{domxref("VRDisplay")}} qui est actuellement en train d'être présenté ({{domxref("VRDisplay.ispresenting")}} <code>est true <em>(vrai)</em></code>).</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("NavigatorID.appCodeName")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Retourne le nom de "code" interne du navigateur actuel. Ne vous fiez pas à cette propriété pour renvoyer la valeur correcte.</dd>
+ <dt>{{domxref("NavigatorID.appName")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Retourne une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> avec le nom officiel du navigateur. Ne vous fiez pas à cette propriété pour renvoyer la valeur correcte.</dd>
+ <dt>{{domxref("NavigatorID.appVersion")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Retourne la version du navigateur en tant que {{domxref("DOMString")}} <em>(chaîne de caractères)</em>. Ne vous fiez pas à cette propriété pour renvoyer la valeur correcte.</dd>
+ <dt>{{domxref("Navigator.battery")}} {{readonlyInline}}</dt>
+ <dd>Retourne un objet {{domxref("BatteryManager")}} que vous pouvez utiliser pour récupérer des information sur l'état de chargement de la batterie.</dd>
+ <dt>{{domxref("Navigator.connection")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Fournit un objet  {{domxref("NetworkInformation")}} contenant les informations sur la connection réseau du matériel.</dd>
+ <dt>{{domxref("Navigator.cookieEnabled")}} {{readonlyinline}}</dt>
+ <dd>Retourne "false" <em>(faux)</em> <span id="result_box" lang="fr"><span>si la définition d'un cookie est ignorée et "true" <em>(vrai)</em> dans le cas contraire.</span></span></dd>
+ <dt>{{domxref("NavigatorGeolocation.geolocation")}} {{readonlyInline}}</dt>
+ <dd>Retourne un objet {{domxref("Geolocation")}} permettant d'accéder à la géolocalisation de l'appareil.</dd>
+ <dt>{{domxref("NavigatorConcurrentHardware.hardwareConcurrency")}} {{readOnlyInline}}</dt>
+ <dd>Retourne le nombre de processeurs logiques disponibles</dd>
+ <dt>{{domxref("NavigatorPlugins.javaEnabled")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Retourne une marque ("flag") {{domxref("Boolean")}} indiquant si java est activé ou non.</dd>
+ <dt>{{domxref("NavigatorLanguage.language")}} {{readonlyInline}}</dt>
+ <dd>Retourne une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> représentant la langue préférée de l'utilisateur, généralement celle de l'interface utilisateur du navigateur. La valeur <code>Null</code> est retournée quand elle est inconnue.</dd>
+ <dt>{{domxref("NavigatorLanguage.languages")}} {{readonlyInline}}</dt>
+ <dd>Retourne un tableau de {{domxref("DOMString")}} représentant les langues connues par l'utilisateur, par ordre de préférence.</dd>
+ <dt>{{domxref("NavigatorPlugins.mimeTypes")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Retourne un {{domxref("MimeTypeArray")}} listant les types MIME supportés par le navigateur.</dd>
+ <dt>{{domxref("NavigatorOnLine.onLine")}} {{readonlyInline}}</dt>
+ <dd>Retourne un {{domxref("Boolean")}} indiquant si le navigateur fonctionne avec une connexion internet.</dd>
+ <dt>{{domxref("Navigator.oscpu")}}</dt>
+ <dd>Retourne une chaîne de caractères représentant le système d'exploitation utilisé.</dd>
+ <dt>{{domxref("Navigator.permissions")}} {{readonlyinline}}{{experimental_inline}}</dt>
+ <dd>Retourne un objet {{domxref("Permissions")}} qui peut être utilisé pour interroger et mettre à jour les permissions des API couvertes par <a href="https://developer.mozilla.org/en-US/docs/Web/API/Permissions_API">Permissions API</a>.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("NavigatorID.platform")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Retourne une chaîne de caractères représentant la plateforme du navigateur. Ne pas attendre de cette fonction qu'elle retourne une valeur significative.</dd>
+ <dt>{{domxref("NavigatorPlugins.plugins")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Retourne un {{domxref("PluginArray")}} listant les modules installés sur le navigateur.</dd>
+ <dt>{{domxref("NavigatorID.product")}} {{readonlyInline}} {{experimental_inline}}</dt>
+ <dd>Retourne toujours <code>'Gecko'</code>, sur n'importe quel navigateur. Cette propriété est gardée juste dans un but de compatibilité.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Navigator.serviceWorker")}} {{readonlyInline}}</dt>
+ <dd>Retourne un objet {{domxref("ServiceWorkerContainer")}}, contenant l'accès à l'enregistrement, la suppression, la mise à jour et la communication avec l'objet {{domxref("ServiceWorker")}} pour les <a href="https://html.spec.whatwg.org/multipage/browsers.html#concept-document-window">documents associés</a>.</dd>
+ <dt>{{domxref("Navigator.storage")}} {{readonlyinline}}</dt>
+ <dd>Retourne un objet unique {{domxref('StorageManager')}} utilisé pour gérer les autorisations de persistance et estimer l'espace disponible sur une base site par site / application par application.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("NavigatorID.userAgent")}} {{readonlyInline}}</dt>
+ <dd>Retourne la chaîne de caractères de l'agent utilisateur du navigateur actuel.</dd>
+</dl>
+
+<h3 id="Methods" name="Methods">Non-standard</h3>
+
+<div class="note">
+<p><span id="result_box" lang="fr"><span>Les périphériques Firefox OS ajoutent d'autres propriétés non standard.</span> <span>Vous pouvez les consulter sur l'article </span></span> <a href="https://developer.mozilla.org/fr/docs/Mozilla/Firefox_OS/API/Navigator">Firefox OS Navigator extensions</a></p>
+</div>
+
+<dl>
+ <dt>{{domxref("Navigator.buildID")}} {{non-standard_inline}}</dt>
+ <dd>Retourne l'identifiant constructeur du navigateur (par exemple, "2006090803").</dd>
+ <dt>{{domxref("Navigator.cookieEnabled")}} {{non-standard_inline}}</dt>
+ <dd>Retourne un booléen indicant si les cookies sont activés dans le navigateur ou pas.</dd>
+ <dt>{{domxref("Navigator.credentials")}} {{non-standard_inline}}</dt>
+ <dd>Retourne une interface {{domxref("CredentialsContainer")}} <span id="result_box" lang="fr"><span>qui expose des méthodes pour demander des informations d'identification et avertir l'agent utilisateur lorsque des événements intéressants se produisent, tels que la connexion réussie ou la déconnexion.</span></span></dd>
+ <dt>{{domxref("navigator.doNotTrack")}} {{non-standard_inline}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Indique la valeur de la préférence de non-suivi de l'utilisateur.</span> <span>Lorsque cette valeur est "oui", votre site Web ou votre application ne doit pas suivre l'utilisateur.</span></span></dd>
+ <dt>{{domxref("Navigator.id")}} {{non-standard_inline}}</dt>
+ <dd>Retourne l'objet {{domxref("window.navigator.id", "id")}} <span id="result_box" lang="fr"><span>que vous pouvez utiliser pour ajouter le support pour</span></span> <a href="/en-US/docs/BrowserID" title="BrowserID">BrowserID</a> vers votre site web.</dd>
+ <dt>{{domxref("Navigator.mediaDevices")}} {{non-standard_inline}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Renvoie une référence à un objet {{domxref ("MediaDevices")}} qui peut ensuite être utilisée pour obtenir des informations sur les périphériques multimédia disponibles {{domxref ("MediaDevices.enumerateDevices ()")}}</span>, trouver</span><span id="result_box" lang="fr"><span> quelles propriétés contraignantes sont supportées par les médias de l'ordinateur de l'utilisateur et l'agent utilisateur {{domxref ("MediaDevices.getSupportedConstraints ()")}}), et demander l'accès aux médias à l'aide de {{domxref ("MediaDevices.getUserMedia ()</span> <span>")}}.</span></span></dd>
+ <dt>{{domxref("Navigator.mozNotification")}} {{deprecated_inline("22")}} {{non-standard_inline}}<br>
+ {{domxref("Navigator.webkitNotification")}}</dt>
+ <dd>Retourne un objet {{domxref("navigator.mozNotification", "notification")}} utilisable pour délivrer des notifications à l'utilisateur depuis l'application web.</dd>
+ <dt>{{domxref("Navigator.mozSocial")}} {{non-standard_inline}}</dt>
+ <dd>Les objets retournés par la propriété <code>navigator.mozSocial</code> sont <span id="result_box" lang="fr"><span>disponibles dans le panneau du fournisseur de médias sociaux pour fournir les fonctionnalités dont il peut avoir besoin.</span></span></dd>
+ <dt>{{domxref("Navigator.presentation")}} {{non-standard_inline}}</dt>
+ <dd>Retourne une référence vers l'API {{domxref("Presentation")}}</dd>
+ <dt>{{domxref("Navigator.productSub")}} {{non-standard_inline}}</dt>
+ <dd>Retourne le nombre constructeur du navigateur actuel (par exemple, "20060909").</dd>
+ <dt>{{domxref("Navigator.securitypolicy")}} {{non-standard_inline}}</dt>
+ <dd>Retourne une chaîne vide. Dans Netscape 4.7x, retourne "US &amp; CA domestic policy"  <em>(politique américaine)</em> ou "Export policy" <em>(politique d'exportation)</em>.</dd>
+ <dt>{{domxref("Navigator.standalone")}} {{non-standard_inline}}</dt>
+ <dd>Retourne un booléen indiquant si le navigateur fonctionne en mode autonome.  <span class="short_text" id="result_box" lang="fr"><span>Disponible uniquement sur le Safari iOS d'Apple.</span></span></dd>
+ <dt>{{domxref("Navigator.storageQuota")}} {{readonlyinline}} {{experimental_inline}}</dt>
+ <dd>Retourne une interface {{domxref('StorageQuota')}} qui fournit des moyens d'interroger et de demander des informations sur l'utilisation de l'espace de stockage et les quotas.</dd>
+ <dt>{{domxref("Navigator.vendor")}} {{non-standard_inline}}</dt>
+ <dd>Retourne le nom du fournisseur du navigateur courant (par exemple, "Netscape6").</dd>
+ <dt>{{domxref("Navigator.vendorSub")}} {{non-standard_inline}}</dt>
+ <dd>Retourne le numéro de version du fournisseur (par exemple, "6.1").</dd>
+ <dt>{{domxref("Navigator.webkitPointer")}} {{non-standard_inline}}</dt>
+ <dd>Retourne un objet PointerLock <em>(verrou du pointeur)</em> pour l'API <a href="https://developer.mozilla.org/en-US/docs/API/Pointer_Lock_API" title="Mouse Lock API">Mouse Lock</a>.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Méthodes</h2>
+
+<p><em>N'hérite d'aucune méthode, mais met en oeuvre celles définies par {{domxref("NavigatorID")}}, {{domxref("NavigatorContentUtils")}}, <em>{{domxref("NavigatorUserMedia")}} </em>et {{domxref("NavigatorStorageUtils")}}.</em></p>
+
+<h3 id="Standard_2">Standard</h3>
+
+<dl>
+ <dt>{{domxref("Navigator.getVRDisplays()")}} {{experimental_inline}}</dt>
+ <dd>Retourne <span id="result_box" lang="fr"><span>une annonce qui résout un tableau d'objets {{domxref ("VRDisplay")}} représentant tous les périphériques VR disponibles connectés à l'ordinateur.</span></span></dd>
+ <dt>{{domxref("Navigator.getUserMedia", "Navigator.getUserMedia()")}} {{experimental_inline}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Après avoir demandé l'autorisation de l'utilisateur, renvoie le flux audio ou vidéo associé à une caméra ou un microphone sur l'ordinateur local.</span></span></dd>
+ <dt>{{domxref("Navigator.registerContentHandler()")}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Permet aux sites Web de s'inscrire eux-mêmes comme un gestionnaire possible pour un type MIME donné.</span></span></dd>
+ <dt>{{domxref("Navigator.registerProtocolHandler()")}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Permet aux sites Web de s'inscrire eux-mêmes comme un gestionnaire possible pour un protocole donné.</span></span></dd>
+ <dt>{{domxref("Navigator.requestMediaKeySystemAccess()")}} {{experimental_inline}}</dt>
+ <dd>Retourne une <span style="line-height: 19.0909080505371px;">{{jsxref("Promise")}}</span> pour un objet " <span style="line-height: 19.0909080505371px;">MediaKeySystemAccess</span> ".</dd>
+ <dt>{{domxref("Navigator.sendBeacon()")}}{{experimental_inline}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Utilisé pour transférer de manière asynchrone une petite quantité de données à l'aide de </span></span> {{Glossary("HTTP")}} <span lang="fr"><span> de l'agent utilisateur vers un serveur Web.</span></span></dd>
+ <dt>{{domxref("Navigator.share()")}}{{experimental_inline}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Appelle le mécanisme de partage natif de la plateforme actuelle.</span></span></dd>
+ <dt>{{domxref("NavigatorID.taintEnabled()")}} {{deprecated_inline("1.7.8")}} {{obsolete_inline("9.0")}} {{experimental_inline}}</dt>
+ <dd>Retourne <code>false</code><em>(faux)</em>. <span id="result_box" lang="fr"><span>Fonctions JavaScript taint / untaint supprimées dans JavaScript 1.2.</span></span></dd>
+ <dt>{{domxref("Navigator.vibrate()")}} {{gecko_minversion_inline("11.0")}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Provoque des vibrations sur les appareils avec support.</span> <span>Ne fait rien si le support de vibration n'est pas disponible.</span></span></dd>
+</dl>
+
+<h3 id="Specification" name="Specification">Non standard</h3>
+
+<div class="note">
+<p>Les appareils Firefox OS ajoutent d'autres méthodes non standard. Elles peuvent être consultées dans l'article <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/API/Navigator">Firefox OS Navigator extensions</a>.</p>
+</div>
+
+<dl>
+ <dt>{{domxref("Navigator.mozIsLocallyAvailable()")}} {{non-standard_inline}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Permet de vérifier le code pour voir si le document d'un URI donné est disponible sans utiliser le réseau.</span></span></dd>
+ <dt>{{domxref("Navigator.mozPay()")}} {{non-standard_inline}}</dt>
+ <dd><span class="short_text" id="result_box" lang="fr"><span>Permet le paiement dans l'application.</span></span></dd>
+</dl>
diff --git a/files/fr/web/api/navigator/mozislocallyavailable/index.html b/files/fr/web/api/navigator/mozislocallyavailable/index.html
new file mode 100644
index 0000000000..cb28647309
--- /dev/null
+++ b/files/fr/web/api/navigator/mozislocallyavailable/index.html
@@ -0,0 +1,34 @@
+---
+title: window.navigator.isLocallyAvailable
+slug: Web/API/Navigator/mozIsLocallyAvailable
+tags:
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/Navigator/mozIsLocallyAvailable
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p>Permet de déterminer si une ressource donnée est disponible.</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<pre class="eval">window.navigator.isLocallyAvailable(<i>uri</i>,<i>ifOffline</i>);
+</pre>
+<ul>
+ <li><code>uri</code> est l'URI de la ressource dont la disponibilité doit être vérifiée, sous la forme d'une chaîne.</li>
+ <li><code>ifOffline</code> permet de spécifier si le cache de ressources hors ligne doit être vérifié ; indiquez <code>true</code> pour prendre en compte le cache de ressources hors ligne.</li>
+</ul>
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+<pre class="eval">var disponible = navigator.isLocallyAvailable("my-image-file.png", true);
+if (disponible) {
+  /* la ressource hors ligne est présente */
+} else {
+  alert("Certaines ressources nécessaires ne sont pas disponibles tant que vous ne serez pas connecté au réseau.");
+}
+</pre>
+<h3 id="Notes" name="Notes">Notes</h3>
+<p>{{ Note("Des exceptions de sécurité peuvent se produire si l\'URI demandée n\'est pas de la même origine.") }}</p>
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+<p>Aucune ; cependant certaines informations sont disponibles : <a class="external" href="http://www.campd.org/stuff/Offline%20Cache.html">Marking Resources for Offline Use</a></p>
+<p> </p>
+<p> </p>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "en": "en/DOM/window.navigator.mozIsLocallyAvailable", "ja": "ja/DOM/window.navigator.mozIsLocallyAvailable" } ) }}</p>
diff --git a/files/fr/web/api/navigator/mozpower/index.html b/files/fr/web/api/navigator/mozpower/index.html
new file mode 100644
index 0000000000..5686a8d152
--- /dev/null
+++ b/files/fr/web/api/navigator/mozpower/index.html
@@ -0,0 +1,26 @@
+---
+title: window.navigator.mozPower
+slug: Web/API/Navigator/mozPower
+tags:
+  - B2G
+  - Firefox OS
+  - Non Standard
+  - Power Management
+  - WebAPI
+translation_of: Archive/B2G_OS/API/Navigator/mozPower
+---
+<div>
+  {{non-standard_header}} {{B2GOnlyHeader2('certified')}}</div>
+<h2 id="Summary" name="Summary">Résumé</h2>
+<p>Retourne un objet {{domxref("PowerManager")}} que vous pouvez utiliser pour gérer la consommation energétique de l'appareil.</p>
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+<pre class="syntaxbox">var power = window.navigator.mozPower;
+</pre>
+<h2 id="Value" name="Value">Valeur</h2>
+<p><code>navigator.mozPower</code> est un objet {{domxref("PowerManager")}}.</p>
+<h2 id="Specification" name="Specification">Spécification</h2>
+<p>Ne fait partie d'aucune spécification actuellement.</p>
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+<ul>
+  <li>{{domxref("window.navigator.requestWakeLock()","navigator.requestWakeLock()")}}</li>
+</ul>
diff --git a/files/fr/web/api/navigator/moztcpsocket/index.html b/files/fr/web/api/navigator/moztcpsocket/index.html
new file mode 100644
index 0000000000..82c23e3c4b
--- /dev/null
+++ b/files/fr/web/api/navigator/moztcpsocket/index.html
@@ -0,0 +1,34 @@
+---
+title: Navigator.mozTCPSocket
+slug: Web/API/Navigator/mozTCPSocket
+translation_of: Archive/B2G_OS/API/Navigator/mozTCPSocket
+---
+<p>{{APIRef("Firefox OS")}}</p>
+
+<p>{{ non-standard_header() }}</p>
+
+<p>{{ B2GOnlyHeader2('privileged') }}</p>
+
+<h2 id="Summary" name="Summary">Résumé</h2>
+
+<p>Retourne une objet {{ domxref("TCPSocket") }}, vous pouvez l'utiliser pour ouvrir d'autres sockets.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="eval">var socket = navigator.mozTCPSocket;
+</pre>
+
+<h2 id="Value" name="Value">Valeur</h2>
+
+<p><code>navigator.mozTCPSocket</code> est un objet {{domxref("TCPSocket")}} .</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<p>Not part of any specification yet; however, this API is discussed at W3C as part of the <a class="external" href="http://www.w3.org/2012/sysapps/" rel="external" title="http://www.w3.org/2012/sysapps/">System Applications Working Group</a> under the <a href="http://www.w3.org/2012/sysapps/tcp-udp-sockets/">TCP and UDP Socket API</a> proposal.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("TCPSocket")}}</li>
+ <li><a href="/en-US/docs/WebAPI/TCP_Socket" title="/en-US/docs/WebAPI/TCP_Socket">TCP Socket</a></li>
+</ul>
diff --git a/files/fr/web/api/navigator/registerprotocolhandler/index.html b/files/fr/web/api/navigator/registerprotocolhandler/index.html
new file mode 100644
index 0000000000..4280481600
--- /dev/null
+++ b/files/fr/web/api/navigator/registerprotocolhandler/index.html
@@ -0,0 +1,50 @@
+---
+title: window.navigator.registerProtocolHandler
+slug: Web/API/Navigator/registerProtocolHandler
+tags:
+  - Firefox 3
+translation_of: Web/API/Navigator/registerProtocolHandler
+---
+<p>{{ ApiRef() }} {{ Fx_minversion_header(3) }}</p>
+
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+
+<p>Permet aux sites web de s'enregistrer en tant que gestionnaires possibles pour des protocoles particuliers.</p>
+
+<p>{{ Note("Un site web ne peut enregistrer de gestionnaires de protocoles que pour lui-même. Pour des raisons de sécurité, il n\'est pas possible pour une extension ou un site d\'enregistrer des gestionnaires de protocoles ciblant d\'autres sites.") }}</p>
+
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+
+<pre class="eval">window.navigator.registerProtocolHandler(<em>protocole</em>,<em>uri</em>,<em>titre</em>);
+</pre>
+
+<ul>
+ <li><code>protocole</code> est le protocole que le site désire gérer, sous la forme d'une chaîne.</li>
+ <li><code>uri</code> est l'URI du gestionnaire sous la forme d'une chaîne. Il peut contenir « %s » pour indiquer où insérer l'URI échappée du document à gérer, comme montré dans l'exemple plus bas.</li>
+ <li><code>titre</code> est le titre du gestionnaire présenté à l'utilisateur, sous la forme d'une chaîne.</li>
+</ul>
+
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+
+<p>Si votre application web est située à <span class="nowiki">http://www.example.com</span>, vous pouvez enregistrer un gestionnaire de protocole lui permettant de gérer « mailto » comme ceci :</p>
+
+<pre class="eval">navigator.registerProtocolHandler("mailto",
+                                 "<a class="link-https" href="https://www.example.com/?to=%s" rel="freelink">https://www.example.com/?to=%s</a>",
+                                 "Example Mail");
+</pre>
+
+<p>Ceci crée un gestionnaire permettant aux liens <code>mailto</code> de diriger l'utilisateur vers l'application web, en insérant l'adresse spécifiée dans le lien dans l'URL.</p>
+
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+
+<p>Spécifié dans le <a class="external" href="http://whatwg.org/specs/web-apps/current-work/#custom-handlers">brouillon de travail Web Applications 1.0</a> du WHATWG.</p>
+
+<h3 id="Voir_.C3.A9galement" name="Voir_.C3.A9galement">Voir également</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers">Gestionnaires de protocoles web</a></li>
+</ul>
+
+<div class="noinclude"> </div>
+
+<p>{{ languages( { "en": "en/DOM/window.navigator.registerProtocolHandler", "es": "es/DOM/window.navigator.registerProtocolHandler", "ja": "ja/DOM/window.navigator.registerProtocolHandler", "ko": "ko/DOM/window.navigator.registerProtocolHandler", "pl": "pl/DOM/window.navigator.registerProtocolHandler" } ) }}</p>
diff --git a/files/fr/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.html b/files/fr/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.html
new file mode 100644
index 0000000000..8bacc37c9e
--- /dev/null
+++ b/files/fr/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.html
@@ -0,0 +1,113 @@
+---
+title: Gestionnaires de protocoles web
+slug: Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers
+translation_of: Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers
+---
+<p>{{ Fx_minversion_header(3) }}</p>
+
+<h3 id="Introduction" name="Introduction">Introduction</h3>
+
+<p>Il est relativement courant de voir des pages web lier des ressources utilisant des protocoles non-<code>http</code>. Prenons par exemple le protocole <code>mailto:</code> :</p>
+
+<pre>&lt;a href="mailto:webmaster@example.com"&gt;Webmestre&lt;/a&gt;
+</pre>
+
+<p>Les auteurs web peuvent utiliser un lien <code>mailto:</code> lorsqu'ils veulent fournir aux utilisateurs une manière pratique d'envoyer un courrier électronique, directement depuis la page web. Lorsque le lien est activé, le navigateur est supposé lancer l'application par défaut du bureau pour le courrier électronique. On pourrait appeler cela un gestionnaire de protocole<em>du bureau</em>.</p>
+
+<p>Les gestionnaires de protocoles web permettent à des applications web de participer également à ce processus. Leur importance va grandissant au fur et à mesure que différents types d'applications migrent vers le web. De fait, un grand nombre d'applications de courrier déjà basées sur le web pourraient traiter un lien <code>mailto</code>.</p>
+
+<h3 id="Enregistrement" name="Enregistrement">Enregistrement</h3>
+
+<p>La définition d'une application web comme gestionnaire de protocole n'est pas un processus difficile. En gros, l'application web utilise <code><a href="/fr/DOM/window.navigator.registerProtocolHandler" title="fr/DOM/window.navigator.registerProtocolHandler">registerProtocolHandler()</a></code> pour s'enregistrer auprès du navigateur comme gestionnaire potentiel pour un protocole donné. Par exemple :</p>
+
+<pre>navigator.registerProtocolHandler("mailto",
+                                  "https://www.example.com/?uri=%s",
+                                  "Example Mail");
+</pre>
+
+<p>Où les paramètres sont :</p>
+
+<ul>
+ <li>Le protocole.</li>
+ <li>Le modèle d'URL, utilisé comme gestionnaire. Le « %s » sera remplacé par le <code>href</code> du lien et une requête GET sera exécutée sur l'URL résultante.</li>
+ <li>Le nom du gestionnaire de protocole tel que présenté à l'utilisateur.</li>
+</ul>
+
+<p>Lorsqu'un navigateur exécutera ce code, il devra demander à l'utilisateur la permission d'autoriser l'application web à s'enregistrer comme gestionnaire du protocole. Firefox affichera une question dans une barre de notification :</p>
+
+<p><img alt="Image:wph-notification.png" class="internal" src="/@api/deki/files/1491/=Wph-notification.png"></p>
+
+<p>{{ Note() }}</p>
+
+<h4 id="Exemple" name="Exemple">Exemple</h4>
+
+<pre>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"&gt;
+&lt;html lang="fr"&gt;
+&lt;head&gt;
+  &lt;title&gt;Web Protocol Handler Sample - Register&lt;/title&gt;
+  &lt;script type="text/javascript"&gt;
+    navigator.registerProtocolHandler("fake", "http://starkravingfinkle.org/projects/wph/handler.php?value=%s", "Protocole fake");
+  &lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;h1&gt;Exemple de gestionnaire de protocole web&lt;/h1&gt;
+  &lt;p&gt;Cette page va installer un gestionnaire de protocole web pour le protocole &lt;code&gt;fake:&lt;/code&gt;.&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h3 id="Activation" name="Activation">Activation</h3>
+
+<p>À présent, chaque fois que l'utilisateur activera un lien utilisant le protocole enregistré, le navigateur dirigera l'action vers l'URL spécifiée lors de l'enregistrement de l'application web. Firefox, par défaut, demandera à l'utilisateur avant d'effectuer cette action.</p>
+
+<p><img alt="Image:wph-launch.png"></p>
+
+<h4 id="Exemple_2" name="Exemple_2">Exemple</h4>
+
+<pre>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"&gt;
+&lt;html lang="fr"&gt;
+&lt;head&gt;
+  &lt;title&gt;Exemple de gestionnaire de protocole web — test&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;p&gt;Hola, avez-vous déjà vu &lt;a href="fake:ceci%20est%20un%20faux%20protocole"&gt;ceci&lt;/a&gt; auparavant ?&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h3 id="Traitement" name="Traitement">Traitement</h3>
+
+<p>La phase suivante est le traitement de l'action. Le navigateur extrait le <code>href</code> du lien activé, le combine avec le modèle d'URL fourni lors de l'enregistrement et effectue une requête HTTP GET sur l'URL. Ainsi, avec les exemples précédents, le navigateur effectuerait une requête GET sur cette URL :</p>
+
+<pre>http://starkravingfinkle.org/projects/wph/handler.php?value=fake:ceci%20est%20un%20faux%20protocole
+</pre>
+
+<p>Un code côté serveur peut extraire les paramètres de la chaîne de requête et effectuer l'action désirée.</p>
+
+<p>{{ Note("Le code côté serveur reçoit le contenu <strong>entier</strong> de l\'attribut <code>href</code>. Cela signifie qu\'il devra traiter la chaîne pour retirer l\'indication de protocole des données.") }}</p>
+
+<h4 id="Exemple_3" name="Exemple_3">Exemple</h4>
+
+<pre>&lt;?php
+$value = "";
+if ( isset ( $_GET["value"] ) ) {
+  $value = $_GET["value"];
+}
+?&gt;
+
+&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"&gt;
+&lt;html lang="fr"&gt;
+&lt;head&gt;
+    &lt;title&gt;Exemple de gestionnaire de protocole web&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;h1&gt;Exemple de gestionnaire de protocole web — Gestionnaire&lt;/h1&gt;
+  &lt;p&gt;Cette page est appelée lors de la gestion d'une action utilisant le protocole &lt;code&gt;fake:&lt;/code&gt;. Voici les données reçues :&lt;/p&gt;
+  &lt;textarea&gt;
+&lt;?php echo(urldecode($value)) ?&gt;
+  &lt;/textarea&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p> </p>
diff --git a/files/fr/web/api/navigator/sendbeacon/index.html b/files/fr/web/api/navigator/sendbeacon/index.html
new file mode 100644
index 0000000000..3b804059f0
--- /dev/null
+++ b/files/fr/web/api/navigator/sendbeacon/index.html
@@ -0,0 +1,107 @@
+---
+title: Navigator.sendBeacon()
+slug: Web/API/Navigator/sendBeacon
+tags:
+  - API
+  - Beacon
+  - Méthode
+  - Navigateur
+  - Performance Web
+  - Reference
+  - Réseau
+  - sendBeacon
+translation_of: Web/API/Navigator/sendBeacon
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>La méthode  <code><strong>navigator.sendBeacon()</strong></code> peut être utilisée pour transférer une petite quantité de données de façon asynchrone via  {{Glossary("HTTP")}} vers un serveur web.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">navigator.sendBeacon(<em>url</em>, <em>donnees</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>url</code></dt>
+ <dd>Le paramètre <code>url</code> indique l'URL résolue à laquelle les <code>donnees</code> seront transmises.</dd>
+</dl>
+
+<dl>
+ <dt><code>donnees</code></dt>
+ <dd>Le paramètre <code>donnees</code> est un objet {{domxref("ArrayBufferView")}}, {{domxref("Blob")}}, {{domxref("DOMString")}}, ou {{domxref("FormData")}} qui contient les données à transmettre.</dd>
+</dl>
+
+<h3 id="Valeurs_de_retour">Valeurs de retour</h3>
+
+<p>La méthode <code><strong>sendBeacon()</strong></code> retourne <code>true</code> (vrai) si l'agent utilisateur est en mesure de mettre en file les données à transférer avec succès. Sinon, la méthode retourne <code>false</code> (faux).</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Cette méthode répond aux besoins de certains codes analytiques ou de diagnostic qui tentent d'envoyer des données à un serveur web avant le déchargement (<em>unloading</em>) du document. Envoyer les données plus tôt pourrait résulter en une opportunité manquée de récolter des données. Toutefois, s'assurer que les données ont été envoyées pendant le déchargement du document est quelque chose qui a traditionnellement été difficile pour les développeurs, car les agents utilisateur ignorent généralement les requêtes {{domxref("XMLHttpRequest")}} faites à l'intérieur d'un gestionnaire d'événements {{event("unload")}}.</p>
+
+<p>Afin de résoudre ce problème, les codes analytiques ou de diagnostic faisaient historiquement appel à une requête <code>XMLHttpRequest</code> synchrone dans un gestionnaire d'événements <code>unload</code> ou {{event("beforeunload")}} pour soumettre les données. La requête <code>XMLHttpRequest</code> synchrone bloque le processus de déchargement du document, ce qui à son tour fait paraître la navigation plus lente. Il n'y a rien que la page suivante peut faire pour éviter cette perception d'une mauvaise performance de chargement de page, et le résultat est que l'utilisateur perçoit la nouvelle page web comme étant lente à se charger, même si le vrai problème provient de la page précédente.</p>
+
+<p>Il y a des techniques de contournement qui ont été utilisées pour s'assurer que ce type de données est transmis. Une technique de ce genre est de retarder le déchargement de la page pour soumettre  les données en créant un élément {{HTMLElement("img")}} et en mettant son attribut <code>src</code> dans le gestionnaire de déchargement. Puisque la plupart des agents utilisateur vont retarder le déchargement afin de compléter le chargement de l'image en attente, les données peuvent être transmises durant le déchargement. Une autre technique est de créer une boucle de no-op (aucune opération) pour plusieurs secondes à l'intérieur du gestionnaire de déchargement, afin de retarder le déchargement et soumettre les données au serveur.</p>
+
+<p>Non seulement ces techniques représentent-elles de mauvais patrons de programmation, certaines d'entre elles sont peu fiables, et elles résultent toutes en une perception d'une mauvaise performance de chargement de page pour la prochaine navigation.</p>
+
+<p>L'exemple suivant montre un code analytique théorique qui tente de soumettre des données à un serveur en utilisant une requête <code>XMLHttpRequest</code> synchrone dans un gestionnaire de déchargement. Cela résulte en un délai pour le déchargement de la page.</p>
+
+<pre class="brush: js">window.addEventListener('unload', enregistrerDonnees, false);
+
+function enregistrerDonnees() {
+  var client = new XMLHttpRequest();
+  client.open("POST", "/log", false); // Le troisième paramètre indique une synchronisation xhr
+  client.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
+  client.send(donneesAnalytiques);
+}
+</pre>
+
+<p>C'est là qu'entre en jeu <code><strong>sendBeacon()</strong></code>. En utilisant la méthode <code>sendBeacon()</code>, les données sont transmises de façon asynchrone au serveur web lorsque l'Agent Utilisateur a l'opportunité de le faire, sans retarder le déchargement ou affecter la performance de la navigation suivante. Cela résoud tous les problèmes avec la soumission de données analytiques : les données sont envoyées de façon fiable, asynchrone, et cela n'impacte pas le chargement de la page suivante. De plus, ce code est en fait plus simple à écrire que n'importe quelle de ces autres techniques!</p>
+
+<p>L'exemple suivant montre un patron de code analytique théorique qui soumet des données à un serveur en utilisant la méthode <code>sendBeacon()</code>.</p>
+
+<pre class="brush: js">window.addEventListener('unload', enregistrerDonnees, false);
+
+function enregistrerDonnees() {
+  navigator.sendBeacon("/log", donneesAnalytiques);
+}
+</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('Beacon', '#sec-sendBeacon-method', 'sendBeacon()')}}</td>
+   <td>{{Spec2('Beacon')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_avec_les_navigateurs">Compatibilité avec les navigateurs</h2>
+
+<p> </p>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Navigator.sendBeacon")}}</p>
+
+<p> </p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("navigator", "navigator")}}</li>
+ <li>{{domxref("WorkerNavigator.sendBeacon()")}} (Utilisation de <code>sendBeacon()</code> dans des <em>workers</em>)</li>
+</ul>
diff --git a/files/fr/web/api/navigator/serviceworker/index.html b/files/fr/web/api/navigator/serviceworker/index.html
new file mode 100644
index 0000000000..dcdbd96a0c
--- /dev/null
+++ b/files/fr/web/api/navigator/serviceworker/index.html
@@ -0,0 +1,115 @@
+---
+title: Navigator.serviceWorker
+slug: Web/API/Navigator/serviceWorker
+tags:
+  - API
+  - Navigateur
+  - Propriété
+  - Reference
+  - Service Workers
+  - Service worker API
+  - ServiceWorker
+translation_of: Web/API/Navigator/serviceWorker
+---
+<p>{{APIRef("Service Workers API")}}</p>
+
+<p>Le <code><strong>Navigator.serviceWorker</strong></code> est une propriété en lecture seule qui renvoie un objet {{domxref("ServiceWorkerContainer")}}, et qui permet d'accéder à l'enregistrement, la suppression, la mise à jour, et la communication avec les objets {{domxref("ServiceWorker")}} pour le <a href="https://html.spec.whatwg.org/multipage/browsers.html#concept-document-window">document  associé</a>.</p>
+
+<h2 id="syntaxe">syntaxe</h2>
+
+<pre class="syntaxbox">var workerContainerInstance = navigator.serviceWorker;
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>L'objet {{domxref("ServiceWorkerContainer")}}.</p>
+
+<p> </p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Le code ci-dessous vérifie si le navigateur supporte les service workers.</p>
+
+<pre><code>if ('serviceWorker' in navigator) {
+  // Supported!
+}</code></pre>
+
+<p> </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('Service Workers', '#navigator-service-worker', 'navigator.serviceWorker')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_du_navigateur">Compatibilité du navigateur</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caractéristique</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{CompatGeckoDesktop("42.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>24</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caractéristique</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Utilisation de Service Workers</a></li>
+</ul>
diff --git a/files/fr/web/api/navigator/share/index.html b/files/fr/web/api/navigator/share/index.html
new file mode 100644
index 0000000000..21e57da9cb
--- /dev/null
+++ b/files/fr/web/api/navigator/share/index.html
@@ -0,0 +1,68 @@
+---
+title: Navigator.share
+slug: Web/API/Navigator/share
+translation_of: Web/API/Navigator/share
+---
+<div>{{APIRef("HTML DOM")}}{{SeeCompatTable}}</div>
+
+<p>La méthode <strong><code>Navigator.share()</code></strong> invoque le mécanisme de partage natif de l'appareil. Celle-ci appartient à l'API Web Share. Si l'API Web Share n'est pas supportée, alors la méthode sera <code>undefined</code>.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var sharePromise = window.navigator.share(<var>data</var>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><var>data</var></dt>
+ <dd>Un objet contenant les données à partager. Au moins un des champs suivant doit être spécifié. Les champs possibles sont les suivant : </dd>
+</dl>
+
+<ul>
+ <li><code>url</code>: Un {{domxref("USVString")}} représentant l'URL à partager.</li>
+ <li><code>text</code>: Un {{domxref("USVString")}} représentant le texte à partager.</li>
+ <li><code>title</code>: Un {{domxref("USVString")}} représentant le titre à partager.</li>
+</ul>
+
+<dl>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Une {{domxref("Promise")}} qui sera résolue une fois que l'utilisateur aura finalisé son action de partage. Elle sera rejetée immédiatement si le paramètre <var>data</var> n'est pas correctement spécifié.</p>
+
+<p>Par exemple, sur Chrome pour Android, la <code>Promise</code> retournée sera résolue après que l'utilisateur ait choisi une application vers où partager ses données.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js">navigator.share({
+  title: document.title,
+  text: 'Hello World',
+  url: 'https://developer.mozilla.org',
+}); // partage l'URL de MDN</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Web Share API','#share-method','share()')}}</td>
+   <td>{{Spec2('Web Share API')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Navigator.share")}}</p>
diff --git a/files/fr/web/api/navigator/vibrate/index.html b/files/fr/web/api/navigator/vibrate/index.html
new file mode 100644
index 0000000000..8902090780
--- /dev/null
+++ b/files/fr/web/api/navigator/vibrate/index.html
@@ -0,0 +1,61 @@
+---
+title: Navigator.vibrate()
+slug: Web/API/Navigator/vibrate
+translation_of: Web/API/Navigator/vibrate
+---
+<p>{{APIRef("Vibration API")}}</p>
+
+<p>La méthode <strong><code>Navigator.vibrate()</code></strong> active le module matériel de vibration de l'appareil, si ce dernier est présent. Si l'appareil ne supporte pas les vibrations, cette méthode n'a aucun effet. Si une série de vibration est déjà en cours, la précédente série est stopée et la nouvelle série est lancée.</p>
+
+<p>Si la méthode ne peut pas vibrer en raison d'arguments invalides, elle retournera <code>false</code>, sinon elle retournera <code>true</code>. Si la série contient de trop longue vibration, elle sera tronqué; la longueur maximale dépend de l'implémentation.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>successBool</em> = window.navigator.vibrate(motif);
+</pre>
+
+<dl>
+ <dt><code>motif</code></dt>
+ <dd>Fournit un motif de vibration et d'intervalle de pause. Chaque valeur indique un nombre de milisecondes de vibration ou de pause, en alternance. Vous pouvez fournir une valeur (pour vibrer une fois) ou un tableau de valeur (vibration, pause, vibration ...). Voir l'<a href="/fr/docs/Web/API/Vibration_API">API Vibration</a> pour plus de détails.</dd>
+</dl>
+
+<p>Passer la valeur 0, un tableau vide, ou un tableau de zéro arrêtera toutes les vibrations.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">window.navigator.vibrate(200); // vibre pendant 200ms
+window.navigator.vibrate([100,30,100,30,100,30,200,30,200,30,200,30,100,30,100,30,100]); // Vibre 'SOS' en Morse.
+</pre>
+
+<h2 id="Spécifications">Spécifications</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('Vibration API')}}</td>
+   <td>{{Spec2('Vibration API')}}</td>
+   <td>
+    <p>Linked to spec is the latest editor's draft; W3C version is a REC.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Navigator.vibrate")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Vibration_API" title="/en-US/docs/WebAPI/Vibration">Vibration API</a></li>
+</ul>
diff --git a/files/fr/web/api/navigatorlanguage/index.html b/files/fr/web/api/navigatorlanguage/index.html
new file mode 100644
index 0000000000..856c7dea15
--- /dev/null
+++ b/files/fr/web/api/navigatorlanguage/index.html
@@ -0,0 +1,61 @@
+---
+title: NavigatorLanguage
+slug: Web/API/NavigatorLanguage
+translation_of: Web/API/NavigatorLanguage
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><code><strong>NavigatorLanguage</strong></code> contient les méthodes et les propriétés de la langue du navigateur.</p>
+
+<p>Il n'y a pas d'objet de type <code>NavigatorLanguage</code>, mais d'autres interfaces comme {{domxref("Navigator")}} ou {{domxref("WorkerNavigator")}} l'implémentent.</p>
+
+<h2 id="Propriété">Propriété</h2>
+
+<p><em>L'interface <code>NavigatorLanguage</code></em><em> n'hérite d'aucune propriété.</em></p>
+
+<dl>
+ <dt>{{domxref("NavigatorLanguage.language")}} {{readonlyInline}}</dt>
+ <dd>Retourne une {{domxref("DOMString")}} représentant la langue préférée de l'utilisateur, généralement la langue de l'interface utilisateur du navigateur. La valeur <code>null</code> est retournée quand la langue est inconnue.</dd>
+ <dt>{{domxref("NavigatorLanguage.languages")}} {{readonlyInline}}</dt>
+ <dd>Retourne un tableau de {{domxref("DOMString")}} représentant les langues connu de l'utilisateur par ordre de préférence.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>L'interface <code>NavigatorLanguage</code> n'implémente et n'hérite d'aucune méthode.</em></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécifications</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#navigatorlanguage', 'NavigatorLanguage')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Depuis la <em>snapshot</em> {{SpecName('HTML5 W3C')}}, la propriété <code>languages</code> a été ajoutée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#navigatorlanguage', 'NavigatorLanguage')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Spécification initiale; <em>snapshot</em> de la version anticipé {{SpecName('HTML WHATWG')}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.NavigatorLanguage")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("Navigator")}} qui l'implémente.</li>
+</ul>
diff --git a/files/fr/web/api/navigatorlanguage/language/index.html b/files/fr/web/api/navigatorlanguage/language/index.html
new file mode 100644
index 0000000000..0d5192e5ff
--- /dev/null
+++ b/files/fr/web/api/navigatorlanguage/language/index.html
@@ -0,0 +1,58 @@
+---
+title: NavigatorLanguage.language
+slug: Web/API/NavigatorLanguage/language
+translation_of: Web/API/NavigatorLanguage/language
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>La propriété en lecture seule <strong><code>NavigatorLanguage.language</code></strong> fournit une chaîne de caractère indiquant la langue préférée de l'utilisateur, généralement la langue de l'interface du navigateur.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">const <em>lang</em> = navigator.language
+</pre>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>La constante <code>lang</code> contient une chaîne de caractère indiquant la langue défini dans <a class="external" href="https://tools.ietf.org/rfc/bcp/bcp47.txt">BCP 47</a>, par exemple "en", "en-US", "fr", "fr-FR", "es-ES", etc.</p>
+
+<p>Notons que dans Safari sur iOS avant la version 10.2, le code du pays était en minuscule, par exemple: "en-us", "fr-fr" etc.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js notranslate">if (/^en\b/.test(navigator.language)) {
+  doLangSelect(window.navigator.language);
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécifications</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-navigator-language', 'NavigatorLanguage: language')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Combatibilité_des_navigateurs">Combatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.NavigatorLanguage.language")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("NavigatorLanguage.languages", "navigator.languages")}}</li>
+ <li>{{domxref("navigator")}}</li>
+</ul>
diff --git a/files/fr/web/api/navigatorlanguage/languages/index.html b/files/fr/web/api/navigatorlanguage/languages/index.html
new file mode 100644
index 0000000000..416ffecbc0
--- /dev/null
+++ b/files/fr/web/api/navigatorlanguage/languages/index.html
@@ -0,0 +1,58 @@
+---
+title: NavigatorLanguage.languages
+slug: Web/API/NavigatorLanguage/languages
+translation_of: Web/API/NavigatorLanguage/languages
+---
+<p>{{APIRef("HTML DOM")}}{{SeeCompatTable}}</p>
+
+<p>La propriété en lecture seule <code><strong>NavigatorLanguage.languages</strong></code> retourne un tableau de {{domxref("DOMString")}} représentant les langues préférées de l'utilisateur. Les étiquettes de langue utilisent les étiquettes de langages défini par <a href="http://tools.ietf.org/html/bcp47">BCP 47</a>. Le tableau retourné est trié par ordre de préférence décroissante (la langue préférée en premier).</p>
+
+<p>La valeur de {{domxref("NavigatorLanguage.language","navigator.language")}} est le premier élément du tableau retourné.</p>
+
+<p>Quant la valeur change, notamment lorsque l'utilisateur modifie ses préférences de langues, un événement {{event("languagechange")}} est déclenché sur l'objet {{domxref("Window")}}.</p>
+
+<p>L'entête HTTP <code>Accept-Language</code> présent dans chaque requête HTTP issu de la navigation de l'utilisateur contient les mêmes valeurs que <code>navigator.languages</code>, avec en plus un champ <code>qvalues</code> (<em>valeur de qualité</em>), par exemple: <code>en-US;q=0.8</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><em>preferredLanguages</em> = <em>globalObj</em>.navigator.languages
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js notranslate">navigator.language   //"en-US"
+navigator.languages  //["en-US", "zh-CN", "ja-JP"]
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécifications</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-navigator-languages', 'NavigatorLanguage: languages')}}</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.NavigatorLanguage.languages")}}</p>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("NavigatorLanguage.language","navigator.language")}}</li>
+ <li>{{domxref("Navigator")}}</li>
+ <li>{{domxref("Window.onlanguagechange")}}</li>
+</ul>
diff --git a/files/fr/web/api/navigatoronline/index.html b/files/fr/web/api/navigatoronline/index.html
new file mode 100644
index 0000000000..118222cd81
--- /dev/null
+++ b/files/fr/web/api/navigatoronline/index.html
@@ -0,0 +1,62 @@
+---
+title: NavigatorOnLine
+slug: Web/API/NavigatorOnLine
+tags:
+  - API
+translation_of: Web/API/NavigatorOnLine
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p>L'interface <code><strong>NavigatorOnLine</strong></code> contient les méthodes et les propriétés concernant l'état de connexion du navigateur.</p>
+
+<p>Il n'y a pas d'objet de type <code>NavigatorOnLine</code>, mais d'autres interfaces l'implémentent comme {{domxref("Navigator")}} ou {{domxref("WorkerNavigator")}}.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>L'interface <code>NavigatorOnLine</code></em><em> n'hérite d'aucune propriété.</em></p>
+
+<dl>
+ <dt>{{domxref("NavigatorOnLine.onLine")}} {{readonlyInline}}</dt>
+ <dd>Retourne un {{domxref("Boolean")}} indicant si le navigateur est connecté.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>The </em><em><code>NavigatorOnLine</code></em><em> interface neither implements, nor inherit any method.</em></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécifications</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#navigatoronline', 'NavigatorOnLine')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Pas de changement depuis la dernière version, {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#navigatoronline', 'NavigatorOnLine')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Version apportant la définition initiale: {{SpecName('HTML WHATWG')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_naviagteurs">Compatibilité des naviagteurs</h2>
+
+
+
+<p>{{Compat("api.NavigatorOnLine")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("Navigator")}} qui l'implémente;</li>
+ <li><a href="/fr/docs/Web/API/NavigatorOnLine/Online_and_offline_events">Les évènements online et offline</a>.</li>
+</ul>
diff --git a/files/fr/web/api/navigatoronline/online/index.html b/files/fr/web/api/navigatoronline/online/index.html
new file mode 100644
index 0000000000..647b560985
--- /dev/null
+++ b/files/fr/web/api/navigatoronline/online/index.html
@@ -0,0 +1,91 @@
+---
+title: window.navigator.onLine
+slug: Web/API/NavigatorOnLine/onLine
+tags:
+  - API
+  - DOM Reference
+  - En ligne
+  - Navigateur En Ligne
+  - NavigatorOnLine
+  - Online
+  - Propriété
+  - Reference
+translation_of: Web/API/NavigatorOnLine/onLine
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<p><span class="seoSummary">Renvoie l'état en ligne du navigateur. La propriété renvoie une valeur {{domxref ("Boolean", "Booléenne")}}, avec <code>true</code> signifiant en ligne et <code>false</code> signifiant hors ligne.</span> La propriété envoie des mises à jour chaque fois que la capacité du navigateur à se connecter au réseau change. La mise à jour se produit lorsque l'utilisateur suit des liens ou lorsqu'un script demande une page distante. Par exemple, la propriété doit renvoyer false lorsque les utilisateurs cliquent sur des liens peu de temps après avoir perdu la connexion Internet.</p>
+
+<p>Les navigateurs implémentent cette propriété différemment.</p>
+
+<p>Dans Chrome et Safari, si le navigateur ne parvient pas à se connecter à un réseau local (LAN) ou à un routeur, il est hors ligne; toutes les autres conditions renvoient <code>true</code>. Ainsi, bien que vous puissiez supposer que le navigateur est hors ligne lorsqu'il renvoie une valeur <code>false</code>, vous ne pouvez pas supposer qu'une valeur vraie signifie nécessairement que le navigateur peut accéder à Internet. Vous pourriez obtenir de faux positifs, par exemple dans les cas où l'ordinateur exécute un logiciel de virtualisation doté d'adaptateurs Ethernet virtuels toujours «connectés». Par conséquent, si vous souhaitez vraiment déterminer l'état en ligne du navigateur, vous devez développer des moyens supplémentaires de vérification. Pour en savoir plus, consultez l'article HTML5 Rocks, <a href="http://www.html5rocks.com/en/mobile/workingoffthegrid.html">Working Off the Grid</a>.</p>
+
+<p>Dans Firefox et Internet Explorer, le passage du navigateur en mode hors ligne envoie la valeur <code>false</code>. Jusqu'à Firefox 41, toutes les autres conditions renvoient une valeur vraie; tester le comportement réel sur Nightly 68 sous Windows montre qu'il ne recherche que la connexion LAN comme Chrome et Safari donnant de faux positifs.</p>
+
+<p>Vous pouvez voir les changements dans l'état du réseau en écoutant les événements sur {{domxref ("Document/ononline", "window.ononline")}} et {{domxref ("Document/onoffline", "window.onoffline")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><em>window</em>.navigator.onLine
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p><code>online</code> est un {{domxref ("Boolean", "Booléen")}} <code>true</code> ou <code>false</code>.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Voir <a href="http://html5-demos.appspot.com/static/navigator.onLine.html">un exemple en direct</a>.</p>
+
+<p>Pour vérifier si vous êtes en ligne, interrogez <code>window.navigator.onLine</code>, comme dans l'exemple suivant:</p>
+
+<pre class="brush: js notranslate">console.log(navigator.onLine ? 'online' : 'offline')
+</pre>
+
+<p>Si le navigateur ne prend pas en charge <code>navigator.onLine</code>, l'exemple ci-dessus apparaîtra toujours comme <code>false</code> / <code>undefined</code>.</p>
+
+<p>Pour voir les modifications de l'état du réseau, utilisez <a href="https://wiki.developer.mozilla.org/en-US/docs/DOM/element.addEventListener">addEventListener</a> pour écouter les événements sur {{domxref ("Window/offline_event", "window.online")}} et {{domxref ("Window/offline_event", "window.offline")}}, comme dans l'exemple suivant:</p>
+
+<pre class="brush: js notranslate">window.addEventListener('offline', function(e) { ... })
+window.addEventListener('offline', (e) =&gt; { ... })
+
+window.addEventListener('online', function(e) { ... })
+window.addEventListener('online', (e) =&gt; { ... })
+</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">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "browsers.html#dom-navigator-online", "navigator.onLine")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.NavigatorOnLine.onLine")}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Voir <a href="https://wiki.developer.mozilla.org/en-US/docs/Online_and_offline_events">Événements en ligne / hors ligne</a> pour une description plus détaillée de cette propriété ainsi que des nouvelles fonctionnalités hors ligne introduites dans Firefox 3.</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="http://www.html5rocks.com/en/mobile/workingoffthegrid.html">HTML5 Rocks: Travailler hors du réseau avec HTML5 Offline</a></li>
+ <li><a href="http://www.html5rocks.com/en/tutorials/offline/whats-offline/">HTML5 Rocks: "Offline": Qu'est-ce que cela signifie et pourquoi devrais-je m'en soucier?</a></li>
+ <li><a href="http://hacks.mozilla.org/2010/01/offline-web-applications/">Mozilla Blog: Applications web offline</a></li>
+</ul>
diff --git a/files/fr/web/api/navigatoronline/évènements_online_et_offline/index.html b/files/fr/web/api/navigatoronline/évènements_online_et_offline/index.html
new file mode 100644
index 0000000000..4ba6a2d717
--- /dev/null
+++ b/files/fr/web/api/navigatoronline/évènements_online_et_offline/index.html
@@ -0,0 +1,99 @@
+---
+title: Évènements online et offline
+slug: Web/API/NavigatorOnLine/Évènements_online_et_offline
+tags:
+  - AJAX
+  - Applications_web_hors_ligne
+  - DOM
+  - Développement_Web
+translation_of: Web/API/NavigatorOnLine/Online_and_offline_events
+---
+<p>{{ Fx_minversion_header(3) }} <a href="fr/Firefox_3_pour_les_d%c3%a9veloppeurs">Firefox 3</a> implémente <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#offline">les évènements <code>online</code> et <code>offline</code></a> de la <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">spécification Web Applications 1.0 du WHATWG</a>.</p>
+
+<h3 id="Aper.C3.A7u" name="Aper.C3.A7u">Aperçu</h3>
+
+<p>Afin de construire une bonne application Web capable de fonctionner hors ligne, il est nécessaire de savoir quand votre application est hors ligne. De même, vous devrez également savoir quand votre application est de nouveau en ligne. Concrètement, ce qui est nécessaire se résume à :</p>
+
+<ol>
+ <li>Savoir quand l'utilisateur est de nouveau en ligne, afin de se resynchroniser avec le serveur.</li>
+ <li>Savoir quand l'utilisateur est hors ligne, afin de s'assurer que les requêtes à faire vers le serveur soient bien enregistrées localement.</li>
+</ol>
+
+<p>C'est ce processus que les évènements <code>online</code> et <code>offline</code> rendent presque trivial.</p>
+
+<p>Votre application web peut également vouloir indiquer que certains documents doivent être maintenus dans le cache des ressources hors ligne. Pour en savoir plus sur la manière de préciser cette indication, consultez l'article <a href="fr/Ressources_hors_ligne_dans_Firefox">Ressources hors ligne dans Firefox</a>.</p>
+
+<h3 id="API" name="API">API</h3>
+
+<h4 id="navigator.onLine" name="navigator.onLine"><code>navigator.onLine</code></h4>
+
+<p><code><a href="fr/DOM/window.navigator.onLine">navigator.onLine</a></code> est une propriété qui maintient une valeur <code>true</code>/<code>false</code> (<code>true</code> pour <code>online</code>, <code>false</code> pour <code>offline</code>). Cette propriété est mise à jour chaque fois que l'utilisateur passe en mode « Hors ligne » en sélectionnant l'entrée de menu correspondante (Fichier → Travailler hors connexion dans Firefox).</p>
+
+<p>De plus, cette propriété doit être mise à jour dès que le navigateur n'arrive plus à se connecter au réseau. D'après la spécification :</p>
+
+<blockquote cite="http://www.whatwg.org/specs/web-apps/current-work/#offline">L'attribut <code>navigator.onLine</code> doit renvoyer <code>false</code> si l'agent utilisateur ne va pas contacter le réseau lorsque l'utilisateur suit un lien ou lorsqu'un script demande une page distante (ou sait qu'une telle tentative échouerait)…</blockquote>
+
+<p>Firefox 2 met à jour cette propriété lors du passage en mode hors connexion du navigateur, et lors de la perte ou de la récupération de la connectivité réseau sous Windows et Linux.</p>
+
+<p>Cette propriété existait dans de versions plus anciennes de Firefox et Internet Explorer (la spécification se base sur ces implémentations précédentes), vous pouvez donc immédiatement commencer à l'utiliser. La détection de l'état du réseau a été ajoutée dans Firefox 2.</p>
+
+<h4 id="Les_.C3.A9v.C3.A8nements_.C2.AB_online_.C2.BB_et_.C2.AB_offline_.C2.BB" name="Les_.C3.A9v.C3.A8nements_.C2.AB_online_.C2.BB_et_.C2.AB_offline_.C2.BB">Les évènements « <code>online</code> » et « <code>offline</code> »</h4>
+
+<p><a href="fr/Firefox_3">Firefox 3</a> introduit deux nouveaux évènements : « <code>online</code> » et « <code>offline</code> ». Ces deux évènements sont déclenchés sur l'élément <code>&lt;body&gt;</code> de chaque page lorsque le navigateur passe d'un mode à l'autre. De plus, les évènements se propagent depuis <code>document.body</code>, vers <code>document</code>, puis vers <code>window</code>. Aucun de ces deux évènements n'est annulable (il n'est pas possible d'empêcher l'utilisateur de passer en ligne ou hors ligne).</p>
+
+<p>Vous pouvez ajouter des gestionnaires pour ces évènements selon les manières habituelles :</p>
+
+<ul>
+ <li>en utilisant <code><a href="fr/DOM/element.addEventListener">addEventListener</a></code> sur <code>window</code>, <code>document</code> ou <code>document.body</code></li>
+ <li>en définissant les propriétés <code>.ononline</code> ou <code>.onoffline</code> sur <code>document</code> ou <code>document.body</code> vers un objet JavaScript <code>Function</code>. (<strong>Note :</strong> l'utilisation de <code>window.ononline</code> ou <code>window.onoffline</code> ne fonctionnera pas, pour des raisons de compatibilité.)</li>
+ <li>en spécifiant les attributs <code>ononline="…"</code> ou <code>onoffline="…"</code> à la balise <code>&lt;body&gt;</code> dans le balisage HTML.</li>
+</ul>
+
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+
+<p>Un <a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=220609">cas de test simple</a> peut être exécuté pour vérifier que les évènements fonctionnent. <span class="comment">XXX When mochitests for this are created, point to those instead and update this example -nickolay</span></p>
+
+<pre class="eval"> &lt;!doctype html&gt;
+ &lt;html&gt;
+ &lt;head&gt;
+   &lt;script&gt;
+     function updateOnlineStatus(msg) {
+       var status = document.getElementById("status");
+       var condition = navigator.onLine ? "ONLINE" : "OFFLINE";
+       status.setAttribute("class", condition);
+       var state = document.getElementById("state");
+       state.innerHTML = condition;
+       var log = document.getElementById("log");
+       log.appendChild(document.createTextNode("Évènement : " + msg + " ; état=" + condition + "\n"));
+     }
+     function loaded() {
+       updateOnlineStatus("load");
+       document.body.addEventListener("offline", function () {
+         updateOnlineStatus("offline")
+       }, false);
+       document.body.addEventListener("online", function () {
+         updateOnlineStatus("online")
+       }, false);
+     }
+   &lt;/script&gt;
+   &lt;style&gt;...&lt;/style&gt;
+ &lt;/head&gt;
+ &lt;body onload="loaded()"&gt;
+   &lt;div id="status"&gt;&lt;p id="state"&gt;&lt;/p&gt;&lt;/div&gt;
+   &lt;div id="log"&gt;&lt;/div&gt;
+ &lt;/body&gt;
+ &lt;/html&gt;
+</pre>
+
+<h3 id="R.C3.A9f.C3.A9rences" name="R.C3.A9f.C3.A9rences">Références</h3>
+
+<ul>
+ <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#offline">La section « Offline Web applications » de la spécification Web Applications 1.0 du WHATWG</a></li>
+ <li><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=336359">Le bug suivant l'implémentation des évènements online/offline dans Firefox</a> et sa <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=336682">continuation</a></li>
+ <li><a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=220609">Un cas de test simple</a></li>
+ <li><a class="external" href="http://ejohn.org/blog/offline-events/">Une explication sur les évènements <code>online</code> et <code>offline</code></a> (en anglais)</li>
+</ul>
+
+<div class="noinclude"> </div>
+
+<p>{{ languages( { "en": "en/Online_and_offline_events", "es": "es/Eventos_online_y_offline", "ja": "ja/Online_and_offline_events", "pl": "pl/Zdarzenia_online_i_offline", "pt": "pt/Eventos_online_e_offline" } ) }}</p>
diff --git a/files/fr/web/api/navigatorstorage/index.html b/files/fr/web/api/navigatorstorage/index.html
new file mode 100644
index 0000000000..0f1524c350
--- /dev/null
+++ b/files/fr/web/api/navigatorstorage/index.html
@@ -0,0 +1,70 @@
+---
+title: NavigatorStorage
+slug: Web/API/NavigatorStorage
+tags:
+  - API
+  - Interface
+  - Mixin
+  - Navigator
+  - NavigatorStorage
+  - NeedsTranslation
+  - Reference
+  - Secure context
+  - Storage
+  - Storage Standard
+  - TopicStub
+  - WorkerNavigator
+translation_of: Web/API/NavigatorStorage
+---
+<p>{{securecontext_header}}{{APIRef("Storage")}}</p>
+
+<p>The <strong><code>NavigatorStorage</code></strong> {{Glossary("mixin")}} adds to the {{domxref("Navigator")}} and {{domxref("WorkerNavigator")}} interfaces the {{domxref("Navigator.storage")}} property, which provides access to the {{domxref("StorageManager")}} singleton used for controlling the persistence of data stores as well as obtaining information</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<p>There are many APIs which provide ways for Web content to store data on a user's computer, including {{Glossary("cookies")}}, the Web Storage API ({{domxref("Window.localStorage")}} and {{domxref("Window.sessionStorage")}}), and <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a>. The Storage Standard is designed to serve as a common basis for the implementation of all of those APIs and storage technologies, so that their constraints and configurations can be understood and controlled using a common set of methods and properties.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref("NavigatorStorage.storage", "storage")}} {{readonlyinline}}{{securecontext_inline}}</dt>
+ <dd>Returns the {{domxref("StorageManager")}} singleton object which is used to access the Storage Manager. Through the returned object, you can control persistence of data stores as well as get estimates of how much space is left for your site or appliation to store data.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>The <code>NavigatorStorage</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('Storage')}}</td>
+   <td>{{Spec2('Storage')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.NavigatorStorage")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Navigator")}}</li>
+ <li>{{domxref("navigator.storage")}}</li>
+ <li>{{domxref("WorkerNavigator")}}</li>
+ <li>{{domxref("StorageManager")}}</li>
+</ul>
diff --git a/files/fr/web/api/navigatorstorage/storage/index.html b/files/fr/web/api/navigatorstorage/storage/index.html
new file mode 100644
index 0000000000..6f17e5c4f0
--- /dev/null
+++ b/files/fr/web/api/navigatorstorage/storage/index.html
@@ -0,0 +1,51 @@
+---
+title: NavigatorStorage.storage
+slug: Web/API/NavigatorStorage/storage
+translation_of: Web/API/NavigatorStorage/storage
+---
+<p>{{securecontext_header}}{{APIRef("Storage")}}</p>
+
+<p><span class="seoSummary">La propriété en lecture seule <code><strong>NavigatorStorage.storage</strong></code> renvoie le singleton {{domxref("StorageManager")}} utilisé pour accéder aux capacités globales de stockage du navigateur pour le site actuel ou l’application actuelle.</span> L’objet renvoyé permet d’examiner et de configurer la persistance des stockages de données, et savoir approximativement combien d’espace est encore disponible dans le navigateur pour utiliser le stockage local.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>storageManager</em> = navigator.storage;
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un objet {{domxref("StorageManager")}} permettant de maintenir la persistance des données stockées, et de déterminer grossièrement combien d’espace est disponible pour stocker des données.</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('Storage', '#navigatorstorage', 'navigator.storage')}}</td>
+   <td>{{Spec2('Storage')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">La table de compatibilité sur cette page est générée à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request.</em></div>
+
+<p>{{Compat("api.NavigatorStorage.storage")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("NavigatorStorage")}}</li>
+ <li>{{domxref("StorageManager")}}</li>
+ <li>{{domxref("Navigator")}}</li>
+ <li>{{domxref("WorkerNavigator")}}</li>
+</ul>
diff --git a/files/fr/web/api/node/appendchild/index.html b/files/fr/web/api/node/appendchild/index.html
new file mode 100644
index 0000000000..640709b22e
--- /dev/null
+++ b/files/fr/web/api/node/appendchild/index.html
@@ -0,0 +1,151 @@
+---
+title: element.appendChild
+slug: Web/API/Node/appendChild
+tags:
+  - API
+  - Ajout
+  - DOM
+  - Enfant
+  - Méthodes
+  - Noeuds
+translation_of: Web/API/Node/appendChild
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La méthode <code><strong>Node.appendChild()</strong></code> ajoute un nœud à la fin de la liste des enfants d'un nœud parent spécifié. Si l'enfant donné est une référence à un nœud existant dans le document, <code>appendChild()</code> le déplace  de sa position actuelle vers une nouvelle position (il n'est pas nécessaire de supprimer le noeud sur son noeud parent avant de l'ajouter à un autre).</p>
+
+<p>Cela signifie qu'un noeud ne peut pas être à deux points du document simultanément. Donc, si le nœud a déjà un parent, le nœud est d'abord retiré, puis ajouté à la nouvelle position. Le {{domxref("Node.cloneNode()")}} peut être utilisé pour réaliser une copie de noeud avant de l'ajouter à son nouveau parent. Notez que les copies faites avec <code>cloneNode</code> ne seront pas automatiquement synchronisées.</p>
+
+<p>Si l'enfant donné est un {{domxref("DocumentFragment")}} , le contenu entier du {{domxref("DocumentFragment")}} est déplacé dans la liste d'enfants du noeud parent spécifié.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="eval">var <em>elementAjoute</em> = <em>element</em>.appendChild(<em>enfant</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><strong>enfant</strong></dt>
+ <dd>Le noeud à ajouter au noeud parent donné (généralement un élément).</dd>
+</dl>
+
+<h3 id="Valeur_renvoyée">Valeur renvoyée</h3>
+
+<p>La valeur renvoyée <span id="result_box" lang="fr"><span>est l'enfant ajouté sauf si l'enfant donné est un {{domxref ("DocumentFragment")}}, auquel cas le {{domxref ("DocumentFragment")}} vide est renvoyé.</span></span></p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Le chaînage peut ne pas fonctionner comme prévu en raison de <code>appendChild()</code> renvoyant l'élément enfant :</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> aBlock <span class="operator token">=</span> doc<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'block'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>doc<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'b'</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Définit <code>aBlock</code> pour <code>&lt;b&gt;&lt;/b&gt;</code> uniquement, ce que vous ne voulez probablement pas.</p>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre class="brush:js line-numbers  language-js"><code class="language-js"><span class="comment token">// Crée un nouvel élément paragraphe et l'ajoute à la fin du corps du document</span>
+<span class="keyword token">var</span> p <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"p"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+document<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>p<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<p> </p>
+
+<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('DOM WHATWG', '#dom-node-appendchild', 'Node.appendChild()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Pas de changement de {{SpecName("DOM3 Core")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Pas de changement de {{SpecName("DOM2 Core")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Pas de changement de {{SpecName("DOM1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-184E7107', 'Node.appendChild()')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Node.removeChild")}}</li>
+ <li>{{domxref("Node.replaceChild")}}</li>
+ <li>{{domxref("Node.insertBefore")}}</li>
+ <li>{{domxref("Node.hasChildNodes")}}</li>
+ <li>{{domxref("ParentNode.append()")}}</li>
+</ul>
diff --git a/files/fr/web/api/node/baseuri/index.html b/files/fr/web/api/node/baseuri/index.html
new file mode 100644
index 0000000000..cc52dd42cf
--- /dev/null
+++ b/files/fr/web/api/node/baseuri/index.html
@@ -0,0 +1,71 @@
+---
+title: Node.baseURI
+slug: Web/API/Node/baseURI
+tags:
+  - API
+  - DOM
+  - HTML
+  - Propriétés
+  - URI
+  - URL
+  - URL absolue
+  - XML
+translation_of: Web/API/Node/baseURI
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p>La propriété en lecture seule <code><strong>Node.baseURI</strong></code> renvoie l'URL de base absolue d'un noeud.</p>
+
+<p>L'URL de base est utilisée pour <a href="http://developers.whatwg.org/urls.html#resolving-urls">résoudre</a> les URL relatives quand le navigateur a besoin d'obtenir une URL absolue, par exemple lors du traitement de l'attribut <code>src</code>  en HTML ou XML <code><a href="https://developer.mozilla.org/fr/docs/Glossaire/XLink">xlink</a>:href</code> d'un élément {{HTMLElement("img")}} HTML.</p>
+
+<p>En général, l'URL de base est simplement l'emplacement du document, mais elle peut être affectée par de nombreux facteurs, y compris l'élément {{HTMLElement("base")}} en HTML et l'attribut  <code><a href="https://developer.mozilla.org/fr/docs/Introduction_%C3%A0_XML/xml:base">xml:base</a></code> en XML.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>baseURI</em> = <em>node</em>.baseURI;
+</pre>
+
+<ul>
+ <li><code>baseURI</code> est une {{ domxref("DOMString") }} (<em>chaîne de caractères</em>) représentant l'URL de base du {{domxref("Node")}} spécifié. Elle peut être <code>null</code> s'il est impossible d'obtenir une URI absolue.</li>
+ <li><code><em>node</em>.baseURI</code> est en lecture seule.</li>
+ <li><code><em>node</em>.baseURI</code> peut changer avec le temps (voir ci-dessous).</li>
+</ul>
+
+<h2 id="Details" name="Details">Détails</h2>
+
+<h3 id="L'URL_de_base_d'un_document">L'URL de base d'un document</h3>
+
+<p>L'URL de base d'un <em>document</em> est par défaut l'adresse du document (telle qu'affichée par le navigateur et disponible dans {{domxref("window.location")}}), mais peut changer par défaut :</p>
+
+<ul>
+ <li>Si une balise HTML {{HTMLElement("base")}} est trouvée dans le document ;</li>
+ <li>Lorsque celui-ci est un nouveau document créé dynamiquement.</li>
+</ul>
+
+<p>Voir la page <a href="http://developers.whatwg.org/urls.html#base-urls">Base URLs section of the HTML Living standard</a> (en) pour plus de détails.</p>
+
+<p>Vous pouvez utiliser <code><em>{{domxref("document")}}</em>.baseURI</code> pour obtenir l'URL de base d'un document. Notez que l'obtention de l'URL de base d'un document peut renvoyer des URL différentes au fil du temps si la balise {{HTMLElement("base")}} ou l'emplacement du document change.</p>
+
+<h3 id="L'URL_de_base_d'un_élément">L'URL de base d'un élément</h3>
+
+<p>L'URL de base d'un <em>element</em> en HTML est normalement équivalente à celle du document dans lequel se trouve le noeud.</p>
+
+<p>Si le document contient des attributs <code><a href="https://developer.mozilla.org/fr/docs/Introduction_%C3%A0_XML/xml:base">xml:base</a></code> (ce que vous ne devriez pas faire dans les documents HTML), l'<code><em>element</em>.baseURI</code> prend en compte l'attribut <code>xml:base</code> des parents de l'élément  lors du calcul de l'URL de base. Voir <a href="https://developer.mozilla.org/fr/docs/Introduction_%C3%A0_XML/xml:base">xml:base</a> pour plus de détails.</p>
+
+<p>Vous pouvez utiliser <code><em>{{domxref("element")}}</em>.baseURI</code> pour obtenir l'URL de base d'un élément.</p>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<ul>
+ <li>{{spec("http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-baseURI","DOM Level 3 Core: baseURI","REC")}}</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>l'élément {{HTMLElement("base")}} (HTML)</li>
+ <li>l'attribut <code><a href="https://developer.mozilla.org/fr/docs/Introduction_%C3%A0_XML/xml:base">xml:base</a></code> (documents XML).</li>
+ <li>{{domxref("Node.baseURIObject")}} - une variante de cette API pour les add-ons Mozilla et le code interne. Renvoie l'URL de base en tant que {{interface("nsIURI")}}.</li>
+</ul>
diff --git a/files/fr/web/api/node/baseuriobject/index.html b/files/fr/web/api/node/baseuriobject/index.html
new file mode 100644
index 0000000000..8be97398f4
--- /dev/null
+++ b/files/fr/web/api/node/baseuriobject/index.html
@@ -0,0 +1,38 @@
+---
+title: Node.baseURIObject
+slug: Web/API/Node/baseURIObject
+tags:
+  - API
+  - DOM
+  - Noeuds
+  - Propriétés
+  - URI
+  - URL
+translation_of: Web/API/Node
+---
+<div>{{APIRef("DOM")}} {{Non-standard_header}}</div>
+
+<p>La propriété <code><strong>Node.baseURIObject</strong></code> renvoie le {{Interface("nsIURI")}} représentant l'URL de base du noeud (un document ou un élément). Elle est similaire à {{domxref("Node.baseURI")}}, à ceci près qu'elle renvoie une "nsIURI" à la place d'une "string" (<em>chaîne de caractères</em>).</p>
+
+<p>Cette propriété existe sur tous les noeuds (HTML, XUL, SVG, MathML, etc.), mais est utilisable par le script seulement s'il a des privilèges UniversalXPConnect.</p>
+
+<p>Voir {{domxref("Node.baseURI")}} pour plus de détails sur ce qu'est une URL de base.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>uriObj</var> = <em>node</em>.baseURIObject
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Cette propriété est en lecture seule ; tenter d'y écrire lancera une exception. En outre, on ne peut y accèder qu'à partir du code privilégié.</p>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<p>N'existe dans aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Node.baseURIObject")}}</p>
diff --git a/files/fr/web/api/node/childnodes/index.html b/files/fr/web/api/node/childnodes/index.html
new file mode 100644
index 0000000000..d0dc5d7343
--- /dev/null
+++ b/files/fr/web/api/node/childnodes/index.html
@@ -0,0 +1,111 @@
+---
+title: element.childNodes
+slug: Web/API/Node/childNodes
+tags:
+  - API
+  - DOM
+  - Enfants
+  - Noeuds
+  - Propriétés
+translation_of: Web/API/Node/childNodes
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La propriété en lecture seule  <code><strong>Node.childNodes</strong></code> renvoie une {{domxref("NodeList")}} (<em>liste de noeuds</em>) de {{domxref("Node","noeuds")}} enfants de l'élément donné avec le premier noeud enfant affecté à l'index 0.</p>
+
+<h2 id="Syntaxe_et_valeurs" name="Syntaxe_et_valeurs">Syntaxe</h2>
+
+<pre class="eval"><a href="/fr/Référence_de_JavaScript_1.5_Core/Instructions/var" title="https://developer.mozilla.org/fr/Référence_de_JavaScript_1.5_Core/Instructions/var"><span style="color: #800080;">var</span></a> <var>collNoeuds</var> = elementDeReference.<a href="/fr/DOM/element.childNodes" title="https://developer.mozilla.org/fr/DOM/element.childNodes">childNodes</a>;
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_simple">Utilisation simple</h3>
+
+<pre class="brush:js line-numbers  language-js"><code class="language-js"><span class="comment token">// parg est une référence d'objet pour un élément &lt;p&gt;</span>
+
+<span class="comment token">// D'abord vérifier que l'élément a des noeuds enfants </span>
+<span class="keyword token">if</span> <span class="punctuation token">(</span>parg<span class="punctuation token">.</span><span class="function token">hasChildNodes</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> children <span class="operator token">=</span> parg<span class="punctuation token">.</span>childNodes<span class="punctuation token">;</span>
+
+  <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token">&lt;</span> children<span class="punctuation token">.</span>length<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="comment token">// faire quelque chose avec chaque enfant[i]</span>
+    <span class="comment token">// NOTE: La liste est en ligne, l'ajout ou la suppression des enfants changera la liste</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h3 id="Supprimer_tous_les_enfants_d'un_nom">Supprimer tous les enfants d'un nom</h3>
+
+<pre><span style="color: #999999;">// Voici une manière de supprimer tous les enfants d'un nœud
+// (boite est une référence à un élément ayant des enfants)</span>
+<a href="/fr/Référence_de_JavaScript_1.5_Core/Instructions/while" title="https://developer.mozilla.org/fr/Référence_de_JavaScript_1.5_Core/Instructions/while">while</a>( boite.<a href="/fr/DOM/element.firstChild" title="https://developer.mozilla.org/fr/DOM/element.firstChild">firstChild</a>) {
+    <span style="color: #999999;">// La liste n'est pas une copie, elle sera donc réindexée à chaque appel</span>
+    boite.<a href="/fr/DOM/element.removeChild" title="https://developer.mozilla.org/fr/DOM/element.removeChild">removeChild</a>( boite.<a href="/fr/DOM/element.firstChild" title="https://developer.mozilla.org/fr/DOM/element.firstChild">firstChild</a>);
+}
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Les éléments de la collection de noeuds sont des objets et non des chaînes de caractères. Pour en obtenir les données, vous devez utiliser leurs propriétés (par exemple <code>elementNodeReference.childNodes[1].nodeName</code> pour obtenir son nom, etc.)</p>
+
+<p>L'objet <a href="/fr/DOM/document" title="https://developer.mozilla.org/fr/DOM/document"><code>document</code></a> lui-même a deux enfants : la déclaration <a href="/fr/DOM/document.doctype" title="https://developer.mozilla.org/fr/DOM/document.doctype">Doctype</a> et l'élément racine, généralement appelés  <code>documentElement</code> . (Dans les documents (X)HTML il s'agit d'éléments  <a href="/fr/HTML/Element/html" title="https://developer.mozilla.org/fr/HTML/Element/html"><code>HTML</code></a>).</p>
+
+<p><code>childNodes</code>  inclut tous les noeuds enfants, y compris les noeuds qui ne sont pas des éléments comme les noeuds texte et commentaire. Pour obtenir une collection des seuls éléments, utilisez {{domxref("ParentNode.children")}} à la place.</p>
+
+<p> </p>
+
+<h2 id="Spécification">Spécification</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('DOM WHATWG', '#dom-node-childnodes', 'Node.childNodes')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Pas de changement</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-1451460987', 'Node.childNodes')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Pas de changement</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-1451460987', 'Node.childNodes')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Pas de changement</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-1451460987', 'Node.childNodes')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+
+
+<p>{{Compat("api.Node.childNodes")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Node.firstChild")}}</li>
+ <li>{{domxref("Node.lastChild")}}</li>
+ <li>{{domxref("Node.nextSibling")}}</li>
+ <li>{{domxref("Node.previousSibling")}}</li>
+ <li>{{domxref("ParentNode.children")}}</li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/web/api/node/clonenode/index.html b/files/fr/web/api/node/clonenode/index.html
new file mode 100644
index 0000000000..80f3474516
--- /dev/null
+++ b/files/fr/web/api/node/clonenode/index.html
@@ -0,0 +1,171 @@
+---
+title: element.cloneNode
+slug: Web/API/Node/cloneNode
+tags:
+  - API
+  - DOM
+  - Duplication
+  - Méthodes
+  - Noeuds
+translation_of: Web/API/Node/cloneNode
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La méthode <strong><code>Node.cloneNode()</code></strong> renvoie une copie du nœud sur lequel elle a été appelée.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em><var>dupNode</var></em> = <em><var>node</var></em>.cloneNode([<em><var>deep]</var></em>);
+</pre>
+
+<dl>
+ <dt>node</dt>
+ <dd>Le noeud à dupliquer.</dd>
+ <dt>dupNode</dt>
+ <dd>Le nouveau noeud qui sera un clone du <code>node</code>.</dd>
+ <dt>deep <em>{{optional_inline}} (profondeur)</em></dt>
+ <dd><code>true</code> (<em>vrai</em>) si les enfants du noeud doivent aussi être clonés ou <code>false</code> (<em>faux</em>) si seul le noeud spécifié doit l'être.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note :</strong> Dans la spécification DOM4 (telle qu'implémentée dans Gecko 13.0 {{geckoRelease(13)}}), <code>deep</code> est un argument facultatif. S'il est omis, la méthode agit comme si la valeur de  <code>deep</code> était <strong><code>true</code></strong> par défaut, elle utilise le clonage profond comme comportement par défaut. Pour créer un clone superficiel, <code>deep</code> doit être défini sur <code>false</code>.</p>
+
+<p>Le comportement a été modifié dans la dernière spécification et, s'il est omis, la méthode doit agir comme si la valeur de <code>deep</code> était <strong><code>false</code></strong>. Bien que ce soit toujours facultatif, vous devriez toujours fournir l'argument <code>deep</code> pour la compatibilité amont et aval. Avec Gecko 28.0 {{geckoRelease(28)}}), la console a averti les développeurs de ne pas omettre l'argument. À partir de Gecko 29.0 {{geckoRelease(29)}}), un clone superficiel est défini par défaut au lieu d'un clone profond.</p>
+</div>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre>p = document.getElementById("para1");
+p_prime = p.cloneNode(true);
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Cloner un nœud copie tous ses attributs ainsi que leurs valeurs, y compris les auditeurs intrinsèques (en ligne). Il ne copie pas les auditeurs d'évènement ajoutés avec <a href="https://developer.mozilla.org/en-US/docs/DOM/element.addEventListener"><code>addEventListener()</code></a> ou ceux assignés au propriétés d'éléments (par exemple <code>node.onclick = fn</code>). De plus, pour un élément {{HTMLElement("canvas")}} l'image peinte n'est pas copiée.</p>
+
+<p>Le nœud dupliqué renvoyé par <code>cloneNode</code> ne fera pas partie du document tant qu'il n'y est pas ajouté via la méthode  {{domxref("Node.appendChild()")}} ou une méthode similaire. De même, il n'a pas de parent tant qu'il n'a pas été ajouté à un autre nœud.</p>
+
+<p>Si <code>deep</code> est défini à <code>false</code>, aucun des nœuds enfants n'est copié.<br>
+ <em>T</em>out texte contenu dans le nœud n'est pas copié non plus , car il fait partie d'un ou plusieurs nœuds {{domxref("Text")}}  enfants.</p>
+
+<p>Si <code>deep</code> est évalué à <code>true</code>, le sous-arbre entier est copié également (y compris le texte qui peut être contenu dans des nœuds  {{domxref("Text")}}  enfants). Pour les nœuds vides (par exemple les éléments  {{HTMLElement("img")}}  et  {{HTMLElement("input")}} ) le fait de mettre <code>deep</code> à <code>true</code> ou <code>false</code> n'a aucune incidence sur la copie, mais il est tout de même nécessaire de fournir une valeur.</p>
+
+<div class="warning">
+<p><strong>Attention :</strong> <code>cloneNode()</code> peut conduire à dupliquer des ID (<em>identifiant</em>) d'éléments dans un document.</p>
+</div>
+
+<p>Si le noeud d'origine a un identifiant et que le clone doit être placé dans le même document, l'identifiant du clone peut être modifié pour être unique. Les attributs du nom peuvent devoir être modifiés également, selon que les noms en double sont attendus.</p>
+
+<p>Pour cloner un noeud à ajouter dans un document différent, utilisez  {{domxref("Document.importNode()")}} à la place.</p>
+
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+
+<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("DOM WHATWG", "#dom-node-clonenode", "Node.cloneNode()")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM3 Core", "core.html#ID-3A0ED0A4", "Node.cloneNode()")}}</td>
+   <td>{{Spec2("DOM3 Core")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Core", "core.html#ID-3A0ED0A4", "Node.cloneNode()")}}</td>
+   <td>{{Spec2("DOM2 Core")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>deep</code> as an optional parameter</td>
+   <td>
+    <p>{{CompatVersionUnknown}}<sup>[1]</sup></p>
+   </td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("13.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>
+    <p>{{CompatVersionUnknown}}<sup>[1]</sup></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>deep</code> as an optional parameter</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("13.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] La valeur par défaut pour le paramètre <code>deep</code> est <code>false</code></p>
+
+<p> </p>
diff --git a/files/fr/web/api/node/comparedocumentposition/index.html b/files/fr/web/api/node/comparedocumentposition/index.html
new file mode 100644
index 0000000000..7e7c2a7273
--- /dev/null
+++ b/files/fr/web/api/node/comparedocumentposition/index.html
@@ -0,0 +1,158 @@
+---
+title: Node.compareDocumentPosition()
+slug: Web/API/Node/compareDocumentPosition
+tags:
+  - API
+  - Arborescence
+  - DOM
+  - Méthodes
+  - Noeuds
+  - Position
+translation_of: Web/API/Node/compareDocumentPosition
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La méthode <code><strong>Node.compareDocumentPosition()</strong></code>compare la position du noeud courant par rapport à un autre noeud dans tout autre document.</p>
+
+<p>La valeur retournée est un masque de bits avec les valeurs suivantes :</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Nom</th>
+   <th scope="col">Valeur</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>DOCUMENT_POSITION_DISCONNECTED</code></td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td><code>DOCUMENT_POSITION_PRECEDING</code></td>
+   <td>2</td>
+  </tr>
+  <tr>
+   <td><code>DOCUMENT_POSITION_FOLLOWING</code></td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td><code>DOCUMENT_POSITION_CONTAINS</code></td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td><code>DOCUMENT_POSITION_CONTAINED_BY</code></td>
+   <td>16</td>
+  </tr>
+  <tr>
+   <td><code>DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC</code></td>
+   <td>32</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>node</em>.compareDocumentPosition( <em>otherNode</em> )
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush:js">var head = document.getElementsByTagName('head').item(0);
+
+if (head.compareDocumentPosition(document.body) &amp; Node.DOCUMENT_POSITION_FOLLOWING) {
+  console.log("well-formed document");
+} else {
+  console.log("&lt;head&gt; is not before &lt;body&gt;");
+}
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Parce que le résultat renvoyé par<em> </em><code>compareDocumentPosition</code> est un masque de bits, des <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_binaires" title="/en-US/docs/Core_JavaScript_1.5_Guide/Operators/Bitwise_Operators">opérateurs binaires</a> doivent être utilisés pour des résultats significatifs.</p>
+</div>
+
+<div class="note">
+<p><strong>Note :</strong> La première instruction utilise l' <code>item(0)</code> de la méthode <a href="/en-US/docs/Web/API/NodeList/item">NodeList</a> , qui est l'équivalent de <code>getElementsByTagName('head')[0].</code></p>
+</div>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#dom-node-comparedocumentposition','Node.compareDocumentPosition()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core','core.html#Node3-compareDocumentPosition','Node.compareDocumentPosition()')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><code><a href="https://developer.mozilla.org/fr/docs/Web/API/Node/contains" title="/en-US/docs/DOM/Node.contains">Node.contains</a></code></li>
+</ul>
diff --git a/files/fr/web/api/node/contains/index.html b/files/fr/web/api/node/contains/index.html
new file mode 100644
index 0000000000..912ef76f66
--- /dev/null
+++ b/files/fr/web/api/node/contains/index.html
@@ -0,0 +1,115 @@
+---
+title: Node.contains
+slug: Web/API/Node/contains
+tags:
+  - API
+  - DOM
+  - Filiation
+  - Méthodes
+  - Noeuds
+translation_of: Web/API/Node/contains
+---
+<div>{{APIRef("DOM")}}</div>
+
+<div>La méthode <strong><code>Node.contains()</code></strong> renvoie une valeur {{jsxref("Boolean")}} (<em>booléenne</em>) indiquant si un nœud est un descendant d'un nœud donné, c'est-à-dire le nœud lui-même, l'un de ses enfants directs ({{domxref("Node.childNodes", "childNodes")}}), l'un des enfants directs des enfants, et ainsi de suite.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">node.contains( otherNode )
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<p>Cette fonction vérifie si un élément est dans le corps de la page. Comme <code>contains</code> est inclusif, déterminer si le corps est contenu en lui-même n'est pas le but de <code>isInPage<font face="Open Sans, sans-serif">,</font></code><font face="Open Sans, sans-serif"> donc ce cas renvoie </font><code>false</code>.</p>
+
+<pre class="brush:js">function isInPage(node) {
+  return (node === document.body) ? false : document.body.contains(node);
+}</pre>
+
+<p> </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">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-node-contains", "Node.contains()")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("9.0")}}</td>
+   <td>5.0<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>3.0<sup>[2]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("9.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Internet Explorer <a href="https://connect.microsoft.com/IE/feedback/details/780874/node-contains-is-incorrect">only supports <code>contains()</code> for elements</a>.</p>
+
+<p>[2] Safari 2.x <a href="https://books.google.de/books?id=KW9G9rdlStIC&amp;lpg=PA299&amp;ots=4XRWUISZVr&amp;dq=safari+node+contains+professional+javascript&amp;pg=PA299&amp;hl=de#v=onepage&amp;q=safari%20node%20contains%20professional%20javascript&amp;f=false">implemented <code>contains()</code> incorrectly</a>.</p>
+</div>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Node.compareDocumentPosition")}}</li>
+ <li>{{domxref("Node.hasChildNodes")}}</li>
+</ul>
diff --git a/files/fr/web/api/node/firstchild/index.html b/files/fr/web/api/node/firstchild/index.html
new file mode 100644
index 0000000000..a9392e7650
--- /dev/null
+++ b/files/fr/web/api/node/firstchild/index.html
@@ -0,0 +1,92 @@
+---
+title: element.firstChild
+slug: Web/API/Node/firstChild
+tags:
+  - API
+  - DOM
+  - Enfant
+  - Noeuds
+  - Propriété
+translation_of: Web/API/Node/firstChild
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La propriété en lecture seule <strong><code>Node.firstChild</code> r</strong>envoie le premier nœud enfant de l'arbre ou <code>null</code> s'il n'en a pas. Si le noeud est un <code>Document</code> , il renvoie le premier noeud de la liste de ses enfants directs.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <var>childNode</var> = <var>node</var>.firstChild;</pre>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<p>Cet exemple montre l'utilisation de <code>firstChild</code> et la manière dont les nœuds d'espaces peuvent interférer.</p>
+
+<pre>&lt;p id="para-01"&gt;
+  &lt;span&gt;Premier span&lt;/span&gt;
+&lt;/p&gt;
+
+&lt;script type="text/javascript"&gt;
+  var p01 = document.getElementById('para-01');
+  alert(p01.firstChild.nodeName)
+&lt;/script&gt;
+</pre>
+
+<p>Dans le code ci-dessus, la <a href="https://developer.mozilla.org/fr/docs/Web/API/Console">console</a> affichera « #text » car un nœud texte a été inséré pour préserver les blancs entre la fin des balises ouvrantes &lt;p&gt; et &lt;span&gt;. <strong>Tout</strong> <a href="https://developer.mozilla.org/fr/docs/Gestion_des_espaces_dans_le_DOM">espace</a> provoquera l'insertion d'un nœud <code>#text</code> , qu'il s'agisse d'un simple espace ou de plusieurs, de retours à la ligne, tabulations, etc.</p>
+
+<p>Un autre nœud <code>#text</code> est inséré entre les balises de fermeture &lt;/span&gt; et &lt;/p&gt;.</p>
+
+<p>Si ces espaces sont retirés du code source, les nœuds <code>#text</code> n'apparaîtront plus et l'élément span deviendra le premier enfant du paragraphe.</p>
+
+<pre>&lt;p id="para-01"&gt;&lt;span&gt;Premier span&lt;/span&gt;&lt;/p&gt;
+
+&lt;script type="text/javascript"&gt;
+  var p01 = document.getElementById('para-01');
+  alert(p01.firstChild.nodeName)
+&lt;/script&gt;
+</pre>
+
+<p>À présent, l'alerte affichera « SPAN ».</p>
+
+<p>Pour éviter le problème avec <code>node.firstChild</code>  renvoyant des noeuds <code>#text</code> ou <code>#comment</code>,  {{domxref("ParentNode.firstElementChild")}}  peut être utilisé pour renvoyer seulement le premier noeud élément. Toutefois,  <code>node.firstElementChild</code> nécessite un "shim" pour Internet Explorer 9 et antérieurs.</p>
+
+<h2 id="Spécification">Spécification</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('DOM WHATWG', '#dom-node-firstchild', 'Node.firstChild')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Pas de changement</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-169727388', 'Node.firstChild')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Pas de changement</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-169727388', 'Node.firstChild')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Pas de changement</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-169727388', 'Node.firstChild')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Node.firstChild")}}</p>
+
+<div id="compat-desktop"> </div>
diff --git a/files/fr/web/api/node/getrootnode/index.html b/files/fr/web/api/node/getrootnode/index.html
new file mode 100644
index 0000000000..277df08cd3
--- /dev/null
+++ b/files/fr/web/api/node/getrootnode/index.html
@@ -0,0 +1,95 @@
+---
+title: Node.getRootNode()
+slug: Web/API/Node/getRootNode
+tags:
+  - API
+  - DOM
+  - Méthodes
+  - Noeuds
+  - Racine
+translation_of: Web/API/Node/getRootNode
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La méthode <strong><code>getRootNode()</code></strong> de l'interface {{domxref("Node")}} renvoie le contexte de la racine de l'objet, qui peut optionnellement inclure la racine "shadow" si elle est disponible.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var root = node.getRootNode(options)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>options {{optional_inline}}</dt>
+ <dd>Un objet qui définit les options pour obtenir le noeud racine. Les options disponibles sont :
+ <ul>
+  <li><code>composed</code> : un {{jsxref('Boolean')}} (<em>booléen</em>) qui indique si la racine shadow doit être retournée (<code>false</code> (<em>faux</em>) par défaut) ou un noeud racine au-delà de la racine shadow (<code>true</code>).</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Retourne">Retourne</h3>
+
+<p>Une interface {{domxref('Node')}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Le premier exemple retourne une référence au noeud HTML/document lorsqu'il est exécuté dans les navigateurs de support :</p>
+
+<pre class="brush: js language-html"><code class="language-html">rootNode = node.getRootNode();</code></pre>
+
+<p>Cet exemple plus complexe montre la différence entre retourner une racine normale et une racine qui inclut la racine shadow (voir le <a href="https://github.com/jserz/js_piece/blob/master/DOM/Node/getRootNode()/demo/getRootNode.html">code source complet</a>):</p>
+
+<pre class="brush: html">&lt;!-- source: https://github.com/jserz/js_piece/blob/master/DOM/Node/getRootNode()/demo/getRootNode.html --&gt;
+&lt;div class="js-parent"&gt;
+    &lt;div class="js-child"&gt;&lt;/div&gt;
+&lt;/div&gt;
+&lt;div class="js-shadowHost"&gt;&lt;/div&gt;
+&lt;script&gt;
+    // work on Chrome 54+，Opera41+
+
+    var parent = document.querySelector('.js-parent'),
+        child = document.querySelector('.js-child'),
+        shadowHost = document.querySelector('.js-shadowHost');
+
+    console.log(parent.getRootNode().nodeName); // #document
+    console.log(child.getRootNode().nodeName); // #document
+
+    // create a ShadowRoot
+    var shadowRoot = shadowHost.attachShadow({mode:'open'});
+    shadowRoot.innerHTML = '&lt;style&gt;div{background:#2bb8aa;}&lt;/style&gt;'
+        + '&lt;div class="js-shadowChild"&gt;content&lt;/div&gt;';
+    var shadowChild = shadowRoot.querySelector('.js-shadowChild');
+
+    // The default value of composed is false
+    console.log(shadowChild.getRootNode() === shadowRoot); // true
+    console.log(shadowChild.getRootNode({composed:false}) === shadowRoot); // true
+    console.log(shadowChild.getRootNode({composed:true}).nodeName); // #document
+&lt;/script&gt;</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('DOM WHATWG','#dom-node-getrootnode','getRootNode()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+
+
+<p>{{Compat("api.Node.getRootNode")}}</p>
+</div>
+
+<div id="compat-mobile"> </div>
diff --git a/files/fr/web/api/node/getuserdata/index.html b/files/fr/web/api/node/getuserdata/index.html
new file mode 100644
index 0000000000..0ddb31d8ff
--- /dev/null
+++ b/files/fr/web/api/node/getuserdata/index.html
@@ -0,0 +1,118 @@
+---
+title: Node.getUserData()
+slug: Web/API/Node/getUserData
+tags:
+  - API
+  - DOM
+  - Méthodes
+  - Noeuds
+translation_of: Web/API/Node/getUserData
+---
+<div>{{APIRef("DOM")}}{{obsolete_header}}</div>
+
+<p>La méthode <code><strong>Node.getUserData()</strong></code>renvoie tout {{domxref("DOMUserData")}} d'utilisateur défini précédemment sur le noeud donné par {{domxref("Node.setUserData()")}}.</p>
+
+<div class="note">
+<p>Les méthodes <code>Node.setUserData</code> et {{domxref("Node.getUserData")}} ne sont plus disponibles pour le contenu à partir du web. {{domxref("Element.dataset")}} ou <a href="/en-US/docs/JavaScript/Reference/Global_Objects/WeakMap"><code>WeakMap</code></a> peuvent être utilisés à la place.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>userData</em> = <em>someNode</em>.getUserData(<em>userKey</em>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<ul>
+ <li><code>userKey</code> est la clé pour choisir les données spécifiques recherchées pour le nœud donné. Plus d'une clé peuvent avoir été assignées sur un nœud donné, contenant leurs propres valeurs.</li>
+</ul>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">var d = document.setUserData('key', 15, null);
+console.log(document.getUserData('key')); // 15</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('DOM WHATWG', '#interface-node', 'Node')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Supprimée de la spécification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#Node3-getUserData', 'Node.getUserData()')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(1)}}<br>
+    {{CompatNo}} 22.0[1]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(1)}}<br>
+    {{CompatNo}} 22.0[1]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] La méthode est toujours disponible à partir de scripts chrome.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Node.setUserData()")}}</li>
+ <li>{{domxref("UserDataHandler")}}</li>
+ <li>{{domxref("DOMUserData")}}</li>
+</ul>
diff --git a/files/fr/web/api/node/haschildnodes/index.html b/files/fr/web/api/node/haschildnodes/index.html
new file mode 100644
index 0000000000..93d5f636aa
--- /dev/null
+++ b/files/fr/web/api/node/haschildnodes/index.html
@@ -0,0 +1,122 @@
+---
+title: element.hasChildNodes
+slug: Web/API/Node/hasChildNodes
+tags:
+  - API
+  - DOM
+  - Enfant
+  - Méthodes
+  - Noeuds
+translation_of: Web/API/Node/hasChildNodes
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La méthode  <code><strong>Node.hasChildNodes()</strong></code> renvoie une valeur <strong>booléenne</strong> indiquant si le {{domxref("Node","noeud")}} actuel possède des <a href="https://developer.mozilla.org/fr/docs/Web/API/Node/childNodes">nœuds enfants</a> ou non.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="eval">resultat =<em>element</em>.hasChildNodes();
+</pre>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<p>L'exemple suivant supprime le premier noeud enfant à l'intérieur de l'élément avec l'identifiant <code>"foo"</code> si "foo" a des noeuds enfant.</p>
+
+<pre class="brush:js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> foo <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"foo"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">if</span> <span class="punctuation token">(</span>foo<span class="punctuation token">.</span><span class="function token">hasChildNodes</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="comment token">// faire quelque chose avec les 'foo.childNodes'</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Polyfill</h2>
+
+<p> </p>
+
+<pre class="brush:js line-numbers  language-js"><code class="language-js"><span class="punctuation token">;</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>prototype<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    prototype<span class="punctuation token">.</span>hasChildNodes <span class="operator token">=</span> prototype<span class="punctuation token">.</span>hasChildNodes <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>
+        <span class="keyword token">return</span> <span class="operator token">!</span><span class="operator token">!</span><span class="keyword token">this</span><span class="punctuation token">.</span>firstChild<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>Node<span class="punctuation token">.</span>prototype<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Il y a différentes façons de déterminer si le noeud a un noeud enfant :</p>
+
+<ul>
+ <li>node.hasChildNodes()</li>
+ <li>node.firstChild != null (ou juste node.firstChild)</li>
+ <li>node.childNodes &amp;&amp; node.childNodes.length (ou node.childNodes.length &gt; 0)</li>
+</ul>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
+
+<ul>
+ <li><a href="https://dom.spec.whatwg.org/#dom-node-haschildnodes">WHATWG: hasChildNodes</a></li>
+ <li><a class="external external-icon" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-810594187">hasChildNodes</a></li>
+</ul>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>7.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Node.childNodes")}}</li>
+ <li>{{domxref("Node.hasAttributes")}}</li>
+</ul>
+
+<div class="noinclude"> </div>
+
+<p> </p>
diff --git a/files/fr/web/api/node/index.html b/files/fr/web/api/node/index.html
new file mode 100644
index 0000000000..2d46618b6b
--- /dev/null
+++ b/files/fr/web/api/node/index.html
@@ -0,0 +1,310 @@
+---
+title: Node
+slug: Web/API/Node
+tags:
+  - API
+  - DOM
+  - Document
+  - Element
+  - Interface
+  - Node
+  - Référence DOM
+  - Structure
+  - hierarchy
+translation_of: Web/API/Node
+---
+<p>{{ApiRef("DOM")}}</p>
+
+<p><code><strong>Node</strong></code> (<em>nœud)</em> est une classe abstraite de laquelle de nombreux objets de type DOM API héritent, leur permettant d'être traités de manière similaire et souvent interchangeable. Étant une classe abstraire, il n'existe pas d'objet qui soit directement un <code>Node</code>. Tous les objets implantant les fonctionnalités de <code>Node</code> sont des instances d'une de ses sous-classes, dont les plus notables sont {{domxref("Document")}}, {{domxref("Element")}} et {{domxref("DocumentFragment")}}.</p>
+
+<p>De pls, tous les types de nœuds du DOM sont représentés par une classe héritant des propriétés et méthodes de <code>Node</code> : {{domxref("CharacterData")}} (duquel {{domxref("Text")}}, {{domxref("Comment")}} et {{domxref("CDATASection")}} héritent), {{domxref("ProcessingInstruction")}}, , {{domxref("DocumentType")}}, {{domxref("Notation")}}, {{domxref("Entity")}} et {{domxref("EntityReference")}}.</p>
+
+<p>Les propriétés ou méthodes de ces interfaces peuvent retourner <code>null</code> lorsque leur existence n'est pas pertinente. Elles peuvent aussi générer une exception – par exemple lors de l'ajout d'un enfant à un type de nœud pour lequel aucun enfant ne peut exister.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Hérite les propriétés de son parent {{domxref("EventTarget")}}</em>.<sup>[1]</sup></p>
+
+<dl>
+ <dt>{{DOMxRef("Node.baseURI")}} {{readonlyInline}}</dt>
+ <dd>Retourne une {{domxref("DOMString")}} (<em>chaine de caractères</em>) <span id="result_box" lang="fr"><span>représentant l'URL de base du document contenant le <code>Node</code>.</span><span> En HTML, il correspond au protocole, au nom de domaine et à la structure du répertoire, jusqu'au dernier</span></span> <code>/</code>.</dd>
+ <dt>{{DOMxRef("Node.baseURIObject")}} {{Non-standard_inline()}} {{Fx_minversion_inline("3")}}</dt>
+ <dd><span id="result_box" lang="fr"><span>(Non disponible pour le contenu Web). L'objet </span></span><span id="result_box" lang="fr"><span>en lecture seule</span></span> <span lang="fr"><span> {{Interface ("nsIURI")}} représentant l'URI de base pour l'élément.</span></span></dd>
+ <dt>{{DOMxRef("Node.childNodes")}} {{readonlyInline}}</dt>
+ <dd>Renvoie un {{domxref ("NodeList")}} contenant tous les enfants de ce nœud. {{domxref ("NodeList")}} signifie que si les enfants du <code>Node</code> changent, l'objet {{domxref ("NodeList")}} est automatiquement mis à jour.</dd>
+ <dt>{{DOMxRef("Node.firstChild")}} {{readonlyInline}}</dt>
+ <dd>Renvoie un {{domxref ("Node")}} représentant le premier nœud enfant direct de ce nœud ou <code>null</code> s'il n'a pas d'enfant.</dd>
+ <dt>{{DOMxRef("Node.lastChild")}} {{readonlyInline}}</dt>
+ <dd>Retourne un {{domxref("Node")}} représentant le dernier nœud enfant direct de ce nœud ou <code>null</code> s'il n'a pas d'enfant.</dd>
+ <dt>{{DOMxRef("Node.nextSibling")}} {{readonlyInline}}</dt>
+ <dd>Retourne un {{domxref("Node")}} représentant le nœud suivant dans l'arbre ou <code>null</code> s'il n'y en a pas.</dd>
+ <dt>{{DOMxRef("Node.nodeName")}} {{readonlyInline}}</dt>
+ <dd>Retourne une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) contenant le nom du nœud. La structure du nom diffère du type de nœud. Par exemple, un {{domxref("HTMLElement")}} contiendra le nom de la balise correspondante, comme <code>'audio'</code>  pour un {{domxref("HTMLAudioElement")}}, un nœud {{domxref("Text")}} doit avoir la chaîne <code>'#text'</code> ou un  {{domxref("Document")}}  doit avoir la chaîne <code>'#document'.</code>.</dd>
+ <dt>{{DOMxRef("Node.nodeType")}}{{readonlyInline}}</dt>
+ <dd>Retourne un <code>unsigned short</code> (<em>non signé court</em>) représentant le type du nœud. Les valeurs possibles sont :</dd>
+</dl>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Nom</th>
+   <th scope="col">Valeur</th>
+  </tr>
+  <tr>
+   <td><code>ELEMENT_NODE</code></td>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <td><code>ATTRIBUTE_NODE</code> {{deprecated_inline()}}</td>
+   <td><code>2</code></td>
+  </tr>
+  <tr>
+   <td><code>TEXT_NODE</code></td>
+   <td><code>3</code></td>
+  </tr>
+  <tr>
+   <td><code>CDATA_SECTION_NODE</code> {{deprecated_inline()}}</td>
+   <td><code>4</code></td>
+  </tr>
+  <tr>
+   <td><code>ENTITY_REFERENCE_NODE</code> {{deprecated_inline()}}</td>
+   <td><code>5</code></td>
+  </tr>
+  <tr>
+   <td><code>ENTITY_NODE</code> {{deprecated_inline()}}</td>
+   <td><code>6</code></td>
+  </tr>
+  <tr>
+   <td><code>PROCESSING_INSTRUCTION_NODE</code></td>
+   <td><code>7</code></td>
+  </tr>
+  <tr>
+   <td><code>COMMENT_NODE</code></td>
+   <td><code>8</code></td>
+  </tr>
+  <tr>
+   <td><code>DOCUMENT_NODE</code></td>
+   <td><code>9</code></td>
+  </tr>
+  <tr>
+   <td><code>DOCUMENT_TYPE_NODE</code></td>
+   <td><code>10</code></td>
+  </tr>
+  <tr>
+   <td><code>DOCUMENT_FRAGMENT_NODE</code></td>
+   <td><code>11</code></td>
+  </tr>
+  <tr>
+   <td><code>NOTATION_NODE</code> {{deprecated_inline()}}</td>
+   <td><code>12</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+ <dt>{{DOMxRef("Node.nodeValue")}}</dt>
+ <dd>Retourne / définit la valeur du nœud courant.</dd>
+ <dt>{{DOMxRef("Node.ownerDocument")}}{{readonlyInline}}</dt>
+ <dd>Retourne le {{domxref("Document")}}  auquel ce noeud appartient. Si aucun document ne lui est associé, il retourne <code>null</code> .</dd>
+ <dt>{{DOMxRef("Node.parentNode")}}{{readonlyInline}}</dt>
+ <dd>Retourne un {{domxref("Node")}} qui est le parent de ce nœud. S'il n'existe pas, parce qu'il est en haut de l'arbre ou parce qu'il ne participe pas à un arbre, cette propriété retourne <code>null</code> .</dd>
+ <dt>{{DOMxRef("Node.parentElement")}}{{readonlyInline}}</dt>
+ <dd>Retourne un {{domxref("Element")}} qui est le parent de ce nœud. <span id="result_box" lang="fr"><span>Si le nœud n'a aucun parent ou si ce parent n'est pas un </span></span> {{domxref("Element")}} , cette propriété retourne <code>null</code>.</dd>
+ <dt>{{DOMxRef("Node.previousSibling")}}{{readonlyInline}}</dt>
+ <dd>Retourne un {{domxref("Node")}} représentant le nœud précédent dans l'arbre ou  <code>null</code> s'il n'y en a pas.</dd>
+ <dt>{{DOMxRef("Node.textContent")}}</dt>
+ <dd>Retourne / définit <span id="result_box" lang="fr"><span>le contenu textuel d'un élément et de tous ses descendants.</span></span></dd>
+</dl>
+
+<dl>
+</dl>
+
+<h3 id="Propriétés_obsolètes">Propriétés obsolètes</h3>
+
+<dl>
+ <dt>{{DOMxRef("Node.localName")}} {{obsolete_inline}}{{readonlyInline}}</dt>
+ <dd>Retourne un {{domxref("DOMString")}}  représentant <span class="short_text" id="result_box" lang="fr"><span>la partie locale du nom d'un élément.</span></span></dd>
+</dl>
+
+<div class="note">
+<p><strong>Note :</strong> <span id="result_box" lang="fr"><span>Dans Firefox 3.5 et versions antérieures, la propriété saisit le nom local pour les éléments HTML (mais pas les éléments XHTML).</span> <span>Dans les versions ultérieures, cela ne se produit pas, donc la propriété est en minuscule pour HTML et XHTML.</span></span> {{gecko_minversion_inline("1.9.2")}}</p>
+</div>
+
+<dl>
+ <dt>{{DOMxRef("Node.namespaceURI")}} {{obsolete_inline}}{{readonlyInline}}</dt>
+ <dd>L'URI du "Namespace" de ce nom, ou  <code>null</code> s'il n'y en a pas.</dd>
+</dl>
+
+<div class="note">
+<p>Note : Dans Firefox 3.5 et versions antérieures, les éléments HTML ne contiennent aucun "namespace". Dans les versions ultérieures, les éléments HTML sont dans le "namespace" <code><a class="linkification-ext external external-icon" href="https://www.w3.org/1999/xhtml/" title="Linkification: http://www.w3.org/1999/xhtml">https://www.w3.org/1999/xhtml/</a></code>  <span class="short_text" id="result_box" lang="fr"><span>pour HTML et XML. </span></span> {{gecko_minversion_inline("1.9.2")}}</p>
+</div>
+
+<dl>
+ <dt>{{DOMxRef("Node.prefix")}} {{obsolete_inline}}{{readonlyInline}}</dt>
+ <dd>Est une {{domxref("DOMString")}} représentant le préfixe de l'espace de nom du nœud ou <code>null</code>  si aucun préfixe n'est spécifié.</dd>
+ <dt>{{DOMxRef("Node.nodePrincipal")}} {{Non-standard_inline}}{{Obsolete_Inline("gecko46")}}{{Fx_MinVersion_Inline("3")}}</dt>
+ <dd>Un {{Interface("nsIPrincipal")}} représentant le nœud principal.</dd>
+ <dt>{{DOMxRef("Node.rootNode")}} {{Obsolete_Inline}}{{ReadOnlyInline}}</dt>
+ <dd>Retourne un objet {{DOMxRef("Node")}} représentant le noeud le plus haut dans l'arbre ou le noeud en cours s'il est le noeud le plus haut de l'arbre. Cette propriété a été remplacée par {{DOMxRef("Node.getRootNode()")}}.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Hérite des méthodes de son parent {{domxref("EventTarget")}}</em>.<sup>[1]</sup></p>
+
+<dl>
+ <dt>{{DOMxRef("Node.appendChild()", "Node.appendChild(<var>childNode</var>)")}}</dt>
+ <dd>Ajoute l'argument <code>childNode</code> spécifié comme dernier enfant au noeud actuel.<br>
+ Si l'argument fait référence à un noeud existant sur l'arborescence DOM, le nœud sera détaché de sa position actuelle et attaché à la nouvelle position.</dd>
+ <dt>{{DOMxRef("Node.cloneNode()")}}</dt>
+ <dd>Clône un {{domxref("Node")}} et, éventuellement, tout son contenu. Par défaut, il duplique le contenu de ce nœud.</dd>
+ <dt>{{DOMxRef("Node.compareDocumentPosition()")}}</dt>
+ <dd>Compare la position du nœud courant par rapport à un autre nœud dans tout autre document.</dd>
+ <dt>{{DOMxRef("Node.contains()")}}</dt>
+ <dd>Retourne une valeur {{jsxref("Boolean")}} (<em>booléen</em>) <span id="result_box" lang="fr"><span>indiquant si un noeud est un descendant d'un noeud donné ou non.</span></span></dd>
+ <dt>{{domxref("Node.getBoxQuads()")}} {{experimental_inline}}</dt>
+ <dd>Retourne une liste des boites CSS des nœuds relatifs à un autre nœud.</dd>
+ <dt>{{DOMxRef("Node.getRootNode()")}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Retourne la racine de l'objet contextuel qui comprend éventuellement la "Shadow root" si elle est disponible.</span></span></dd>
+ <dt>{{DOMxRef("Node.hasChildNodes()")}}</dt>
+ <dd>Retourne un {{jsxref("Boolean")}} (<em>booléen</em>) indiquant si l'élément a des<span id="result_box" lang="fr"><span> noeuds enfants ou non.</span></span></dd>
+ <dt>{{DOMxRef("Node.insertBefore()")}}</dt>
+ <dd>Insère un {{domxref("Node")}} avant <span id="result_box" lang="fr"><span>le nœud de référence en tant qu'enfant du noeud actuel.</span></span></dd>
+ <dt>{{DOMxRef("Node.isDefaultNamespace()")}}</dt>
+ <dd>Accepte une URI d'espace de nom comme argument et retourne une valeur {{jsxref("Boolean")}} avec <code>true</code> (<em>vrai</em>) si l'espace de nom est celui par défaut du noeud donné ou <code>false</code> (<em>faux</em>) sinon.</dd>
+ <dt>{{DOMxRef("Node.isEqualNode()")}}</dt>
+ <dd>Retourne une valeur {{jsxref("Boolean")}} (<em>booléenne</em>) qui indique si oui ou non deux noeuds sont du même type et si tous leurs points de données définis correspondent.</dd>
+ <dt>{{DOMxRef("Node.isSameNode()")}}</dt>
+ <dd>Retourne une valeur {{jsxref("Boolean")}} (<em>booléenne</em>) indiquant si les deux noeuds sont ou non identiques (c'est-à-dire qu'ils font référence au même objet).</dd>
+ <dt>{{DOMxRef("Node.lookupPrefix()")}}</dt>
+ <dd>Retourne une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) contenant le préfixe d'une URI d'un espace de nom donné, s'il est présent, et <code>null</code> sinon.</dd>
+ <dt>{{DOMxRef("Node.lookupNamespaceURI()")}}</dt>
+ <dd>Accepte un préfixe et retourne l'URI de l'espace de noms qui lui est associé sur le nœud donné s'il le trouve, <code>null</code> sinon. Fournir <code>null</code> comme préfixe retournera l'espace de noms par défaut.</dd>
+ <dt>{{DOMxRef("Node.normalize()")}}</dt>
+ <dd>Nettoye tous les nœuds de texte en-dessous de cet élément (fusionne adjacent, supprime vide).</dd>
+ <dt>{{DOMxRef("Node.removeChild()")}}</dt>
+ <dd>Supprime un nœud enfant, depuis l'élément courant, qui doit être un enfant de ce nœud.</dd>
+ <dt>{{DOMxRef("Node.replaceChild()")}}</dt>
+ <dd>Remplace un {{domxref("Node")}} enfant du nœud courant par celui donné dans le paramètre.</dd>
+</dl>
+
+<h3 id="Méthodes_obsolètes">Méthodes obsolètes</h3>
+
+<dl>
+ <dt>{{domxref("Node.getFeature()")}} {{obsolete_inline}}</dt>
+ <dd>Permet à un utilisateur d'obtenir un objet {{DOMxRef("DOMUserData")}} à partir du nœud fourni.</dd>
+ <dt>{{domxref("Node.getUserData()")}} {{obsolete_inline}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Permet à un utilisateur d'obtenir une {{domxref ("DOMUserData")}} (<em>donnée utilisateur</em>) à partir du </span></span>nœud<span lang="fr"><span>.</span></span></dd>
+ <dt>{{domxref("Node.hasAttributes()")}} {{obsolete_inline}}</dt>
+ <dd>Retourne un {{jsxref("Boolean")}} <span id="result_box" lang="fr"><span>indiquant si l'élément possède des attributs ou non.</span></span></dd>
+ <dt>{{domxref("Node.isSupported()")}} {{obsolete_inline}}</dt>
+ <dd>Retourne une marque {{jsxref("Boolean")}} qui contient le résultat d'un test <span id="result_box" lang="fr"><span>si l'implémentation DOM prend en compte une caractéristique spécifique et si cette fonctionnalité est prise en charge par le </span></span>nœud<span lang="fr"><span> spécifique.</span></span></dd>
+ <dt>{{domxref("Node.setUserData()")}} {{obsolete_inline}}</dt>
+ <dd><span class="short_text" id="result_box" lang="fr"><span>Permet à un utilisateur d'attacher ou d'enlever </span></span> {{domxref("DOMUserData")}} du nœud.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Parcourir_tous_les_nœuds_enfants"><span class="short_text" id="result_box" lang="fr"><span>Parcourir tous les nœuds enfants</span></span></h3>
+
+<p>La fonction suivante parcourt de manière récursive tous les nœuds enfants d'un noeud et exécute une fonction de rappel sur eux (et sur le nœud parent lui-même).</p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">function</span> DOMComb <span class="punctuation token">(</span>oParent<span class="punctuation token">,</span> oCallback<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span>oParent<span class="punctuation token">.</span><span class="function token">hasChildNodes</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> oNode <span class="operator token">=</span> oParent<span class="punctuation token">.</span>firstChild<span class="punctuation token">;</span> oNode<span class="punctuation token">;</span> oNode <span class="operator token">=</span> oNode<span class="punctuation token">.</span>nextSibling<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="function token">DOMComb</span><span class="punctuation token">(</span>oNode<span class="punctuation token">,</span> oCallback<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+  <span class="punctuation token">}</span>
+  oCallback<span class="punctuation token">.</span><span class="function token">call</span><span class="punctuation token">(</span>oParent<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h4 id="Syntaxe">Syntaxe</h4>
+
+<pre class="syntaxbox notranslate">DOMComb(parentNode, callbackFunction);</pre>
+
+<h4 id="Description">Description</h4>
+
+<p>Suit le cycle récursif de tous les nœuds enfants d'un <code>parentNode</code> et le <code>parentNode</code> lui-même, et exécute la fonction <code>callbackFunction</code> (<em>rappel</em>) sur eux comme un objet <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this" title="en-US/docs/JavaScript/Reference/Operators/this"><code>this</code></a>.</p>
+
+<h4 id="Paramètres">Paramètres</h4>
+
+<dl>
+ <dt><code>parentNode</code></dt>
+ <dd>Le nœud parent (<code><strong>Node</strong> <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object" title="en-US/docs/JavaScript/Reference/Global_Objects/Object">Object</a></code>)</dd>
+ <dt><code>callbackFunction</code></dt>
+ <dd>La fonction de rappel (<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" title="en-US/docs/JavaScript/Reference/Global_Objects/Function"><code>Function</code></a>).</dd>
+</dl>
+
+<h4 id="Exemples_dutilisation">Exemples d'utilisation</h4>
+
+<p><span id="result_box" lang="fr"><span>L'exemple suivant envoie à la <code>console.log</code> le contenu texte du corps :</span></span></p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">function</span> printContent <span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>nodeValue<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="keyword token">this</span><span class="punctuation token">.</span>nodeValue<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="punctuation token">}</span>
+<span class="punctuation token">}</span>
+
+onload <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>
+  <span class="function token">DOMComb</span><span class="punctuation token">(</span>document<span class="punctuation token">.</span>body<span class="punctuation token">,</span> printContent<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>
+
+<h3 id="Supprimer_tous_les_enfants_imbriqués_dans_un_nœud">Supprimer tous les enfants imbriqués dans un nœud</h3>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js">Element<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>removeAll <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>
+  <span class="keyword token">while</span> <span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>firstChild<span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="keyword token">this</span><span class="punctuation token">.</span><span class="function token">removeChild</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>firstChild<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="punctuation token">}</span>
+  <span class="keyword token">return</span> <span class="keyword token">this</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>
+
+<h4 id="Exemple_dutilisation">Exemple d'utilisation</h4>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="comment token">/* ... an alternative to document.body.innerHTML = "" ... */</span>
+document<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">removeAll</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></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">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-node', 'Node')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td><span class="short_text" id="result_box" lang="fr"><span>Supprime les propriétés suivantes :</span></span> <code>attributes</code>, <code>namespaceURI</code>, <code>prefix</code>, et <code>localName</code>.<br>
+    Supprime les méthodes suivantes : <code>isSupported()</code>, <code>hasAttributes()</code>, <code>getFeature()</code>, <code>setUserData()</code>, et <code>getUserData()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-1950641247', 'Node')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Les méthodes <code>insertBefore()</code>, <code>replaceChild()</code>, <code>removeChild()</code>, et<code>appendChild()</code> renvoient un autre type d'erreur (<code>NOT_SUPPORTED_ERR</code>) si elles sont appelées par {{domxref("Document")}}.<br>
+    La méthode <code>normalize()</code>  a été modifiée, ainsi ce mode {{domxref("Text")}} peut aussi être normalisé si la marque {{domxref("DOMConfiguration")}} est définie.<br>
+    Ajout des méthodes suivantes : <code>compareDocumentPosition()</code>, <code>isSameNode()</code>, <code>lookupPrefix()</code>, <code>isDefaultNamespace()</code>, <code>lookupNamespaceURI()</code>, <code>isEqualNode()</code>, <code>getFeature()</code>, <code>setUserData()</code>, et <code>getUserData().</code><br>
+    Ajout des propriétés suivantes : <code>baseURI</code> et <code>textContent</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-1950641247', 'Node')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>La propriété <code>ownerDocument</code>a été légèrement modifiée pour que  {{domxref("DocumentFragment")}} renvoie également <code>null</code>.<br>
+    Ajout des propriétés suivantes : <code>namespaceURI</code>, <code>prefix</code>, et <code>localName</code>.<br>
+    Ajout des méthodes suivantes : <code>normalize()</code>, <code>isSupported()</code> et <code>hasAttributes()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-1950641247', 'Node')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Node")}}</p>
+
+<div id="compat-desktop"></div>
diff --git a/files/fr/web/api/node/innertext/index.html b/files/fr/web/api/node/innertext/index.html
new file mode 100644
index 0000000000..6b9d530411
--- /dev/null
+++ b/files/fr/web/api/node/innertext/index.html
@@ -0,0 +1,42 @@
+---
+title: Node.innerText
+slug: Web/API/Node/innerText
+translation_of: Web/API/HTMLElement/innerText
+---
+<div>{{APIRef("DOM")}}</div>
+
+<h2 id="Sommaire">Sommaire</h2>
+
+<p><code><strong>Node.innerText</strong></code> est une propriété représentant le contenu textuel « visuellement rendu » d’un nœud. Utilisé en lecture, il renvoie une approximation du texte que l’utilisateur ou utilisatrice obtiendrait s’il ou elle sélectionnnait le contenu d’un élément avec le curseur, et le copiait dans le presse-papier.</p>
+
+<p>{{domxref("Node.textContent")}} est une alternative similaire, bien qu’il y ait d’importantes différences entre les deux.</p>
+
+<h2 id="Spécification">Spécification</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', 'dom.html#the-innertext-idl-attribute', 'innerText')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Introduction basée sur le <a href="https://github.com/rocallahan/innerText-spec" lang="en">brouillon de spécification de innerText</a>. Voir <a href="https://github.com/whatwg/html/issues/465">whatwg/html#465</a> et <a href="https://github.com/whatwg/compat/issues/5">whatwg/compat#5</a> pour l’histoire.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Node.innerText")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("HTMLElement.outerText")}}</li>
+ <li>{{domxref("Element.innerHTML")}}</li>
+</ul>
diff --git a/files/fr/web/api/node/insertbefore/index.html b/files/fr/web/api/node/insertbefore/index.html
new file mode 100644
index 0000000000..c66b4b3200
--- /dev/null
+++ b/files/fr/web/api/node/insertbefore/index.html
@@ -0,0 +1,214 @@
+---
+title: element.insertBefore
+slug: Web/API/Node/insertBefore
+tags:
+  - API
+  - DOM
+  - Enfant
+  - Insertion
+  - Méthodes
+  - Noeud
+translation_of: Web/API/Node/insertBefore
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La méthode <code><strong>Node.insertBefore()</strong></code> insère un nœud juste avant le noeud de référence en tant qu'enfant du nœud parent spécifié. Si l'enfant donné est une référence à un noeud existant dans le document, <code>insertBefore()</code> le déplace vers sa nouvelle position (il n'est pas nécessaire de supprimer le noeud de son parent avant son ajout à un autre noeud).</p>
+
+<p>Cela signifie que le noeud ne peut pas être à 2 points du document simultanément. Donc, si le noeud a déjà un parent, le noeud est d'abord supprimé puis inséré dans la nouvelle position. La méthode {{domxref("Node.cloneNode()")}}  peut être utilisée pour réaliser une copie du noeud avant son ajout sous le nouveau parent. Notez que les copies faites avec <code>cloneNode</code> ne seront pas automatiquement synchronisées.</p>
+
+<p>Si le noeud de référence est <code>null</code> , le noeud spécifié est ajouté à la fin de la liste des enfants du noeud parent spécifié.</p>
+
+<p>Si l'enfant donné est un {{domxref("DocumentFragment")}}, le contenu entier du {{domxref("DocumentFragment")}} est déplacé dans la liste des enfants du noeud parent spécifié.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>insertedNode</em> = <em>parentNode</em>.insertBefore(<em>newNode</em>, <em>referenceNode</em>);
+</pre>
+
+<p>Si  <code><var>referenceNode</var></code>  vaut <code>null</code>,  <code><var>newNode</var></code>  est inséré à la fin de la liste des nœuds enfants.</p>
+
+<div class="note">
+<p><em><code>referenceNode</code></em> <strong>n'est pas</strong> un paramètre facultatif -- vous devez explicitement transmettre un <code>Node</code> ou <code>null</code>. Ne pas le fournir ou transmettre des valeurs invalides provoque des <a href="https://code.google.com/p/chromium/issues/detail?id=419780">comportements différents</a> selon les différentes versions des navigateurs.</p>
+</div>
+
+<h2 id="Exemple" name="Exemple">Valeur retournée</h2>
+
+<p>La valeur renvoyée est l'enfant ajouté sauf si le <code>newNode</code> est un {{domxref("DocumentFragment")}}, auquel cas, le {{domxref("DocumentFragment")}}  vide est retourné.</p>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>parentElement<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+   <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>span</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>childElement<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>foo bar<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>span</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
+<span class="comment token">// Crée un nouveau noeud à insérer</span>
+<span class="keyword token">var</span> newNode <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"span"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// Obtient une référence sur le noeud parent</span>
+<span class="keyword token">var</span> parentDiv <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"childElement"</span><span class="punctuation token">)</span><span class="punctuation token">.</span>parentNode<span class="punctuation token">;</span>
+
+<span class="comment token">// Commence le cas test [ 1 ] : un childElement existe --&gt; tout fonctionne correctement</span>
+<span class="keyword token">var</span> sp2 <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"childElement"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+parentDiv<span class="punctuation token">.</span><span class="function token">insertBefore</span><span class="punctuation token">(</span>newNode<span class="punctuation token">,</span> sp2<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="comment token">// Fin du cas test [ 1 ]</span>
+
+<span class="comment token">// Commence le cas test [ 2 ] : childElement est d'un Type indéfini</span>
+<span class="keyword token">var</span> sp2 <span class="operator token">=</span> undefined<span class="punctuation token">;</span> <span class="comment token">// Il n'existe pas de noeud à l'ID "childElement"</span>
+parentDiv<span class="punctuation token">.</span><span class="function token">insertBefore</span><span class="punctuation token">(</span>newNode<span class="punctuation token">,</span> sp2<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Fusion dynamique implicite pour le type du noeud</span>
+<span class="comment token">// Fin du cas test [ 2 ]</span>
+
+<span class="comment token">// Commence le cas test [ 3 ] : childElement est d'un Type "undefined" (string) (<em>chaîne de caractères</em>)</span>
+<span class="keyword token">var</span> sp2 <span class="operator token">=</span> <span class="string token">"undefined"</span><span class="punctuation token">;</span> <span class="comment token">// </span></span></code> <code class="language-html"><span class="language-javascript script token"><span class="comment token">Il n'existe pas de noeud à l'ID "childElement"</span></span></code> <code class="language-html"><span class="language-javascript script token">
+parentDiv<span class="punctuation token">.</span><span class="function token">insertBefore</span><span class="punctuation token">(</span>newNode<span class="punctuation token">,</span> sp2<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Génère "Type Error: Invalid Argument" (<em>Erreur du Type : Argument non valide</em>) </span>
+<span class="comment token">// Fin du cas test [ 3 ]</span>
+</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p> </p>
+
+<ul>
+ <li><code>insertedNode</code> Le noeud en cours d'insertion, c'est-à-dire <code>newNode</code></li>
+ <li><code>parentNode</code> Le parent du nouveau noeud inséré.</li>
+ <li><code>newNode</code> Le noeud à insérer.</li>
+ <li><code>referenceNode</code> Le noeud devant lequel le <code>newNode</code> est inséré.</li>
+</ul>
+
+<h2 id="Exemple_2">Exemple</h2>
+
+<pre class="brush:html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>parentElement<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>span</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>childElement<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>foo bar<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>span</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
+<span class="comment token">// Crée un nouvel élément &lt;span&gt; simple</span>
+<span class="keyword token">var</span> sp1 <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"span"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// Obtient une référence à l'élément avant lequel nous voulons insérer</span>
+<span class="keyword token">var</span> sp2 <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"childElement"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="comment token">// Obtient une référence à l'élément parent</span>
+<span class="keyword token">var</span> parentDiv <span class="operator token">=</span> sp2<span class="punctuation token">.</span>parentNode<span class="punctuation token">;</span>
+
+<span class="comment token">// Insère le nouvel élément dans le DOM avant sp2</span>
+parentDiv<span class="punctuation token">.</span><span class="function token">insertBefore</span><span class="punctuation token">(</span>sp1<span class="punctuation token">,</span> sp2<span class="punctuation token">)</span><span class="punctuation token">;</span>
+</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p>Il n'existe pas de méthode <code>insertAfter</code>. Il peut être émulé avec une combinaison des méthodes <code>insertBefore</code><a class="internal" href="/fr/DOM/element.insertBefore" title="fr/DOM/element.insertBefore"> </a>et <code><a href="https://developer.mozilla.org/fr/docs/Web/API/Node/nextSibling" title="fr/DOM/element.nextSibling">nextSibling</a></code>.</p>
+
+<p>Dans l'exemple ci-dessus, <code>sp1</code> pourrait être inséré après <code>sp2</code> en utilisant :</p>
+
+<pre class="brush:js">parentDiv.insertBefore(sp1, sp2.nextSibling);
+</pre>
+
+<p>Si <code>sp2</code> n'a pas d'enfant suivant, c'est qu'il est le dernier enfant. Dans ce cas, <code>sp2.nextSibling</code> renverra <code>null</code> et <code>sp1</code> sera donc inséré à la fin de la liste des nœuds enfants (c'est-à-dire immédiatement après <code>sp2</code>).</p>
+
+<h2 id="Exemple_3">Exemple</h2>
+
+<p>Insérer un élément avant le premier élément enfant en utilisant la propriété <a href="https://developer.mozilla.org/fr/docs/Web/API/Node/firstChild" title="Node.firstChild">firstChild</a>.</p>
+
+<pre class="brush:js line-numbers  language-js"><code class="language-js"><span class="comment token">// Obtenir une référence à l'élément dans lequel nous voulons insérer un nouveau noeud</span>
+<span class="keyword token">var</span> parentElement <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'parentElement'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="comment token">// Obtenir une référence au premier enfant</span>
+<span class="keyword token">var</span> theFirstChild <span class="operator token">=</span> parentElement<span class="punctuation token">.</span>firstChild<span class="punctuation token">;</span>
+
+<span class="comment token">// Créer un nouvel élément</span>
+<span class="keyword token">var</span> newElement <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"div"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// Insérer le nouvel élément avant le premier enfant</span>
+parentElement<span class="punctuation token">.</span><span class="function token">insertBefore</span><span class="punctuation token">(</span>newElement<span class="punctuation token">,</span> theFirstChild<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Si l'élément n'a pas de premier enfant, alors <code>firstChild</code> est <code>null</code>. L'élément est toujours ajouté au parent après le dernier enfant. Comme l'élément parent n'avait pas de premier enfant, il n'avait pas non plus de dernier enfant. Par conséquent, le nouvel élément est le seul élément, après l'insertion.</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable()}}</p>
+
+<div id="compat-desktop">
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+</div>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h2>
+
+<p> </p>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#dom-node-insertbefore','Node.insertBefore')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Corrige les erreurs dans l'algorithme d'insertion</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM4','#dom-node-insertbefore','Node.insertBefore')}}</td>
+   <td>{{Spec2('DOM4')}}</td>
+   <td>Décrit l'algorithme plus en détail</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core','core.html#ID-952280727','Node.insertBefore')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Pas de changement notable</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core','core.html#ID-952280727','Node.insertBefore')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Pas de changement notable</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1','level-one-core.html#method-insertBefore','Node.insertBefore')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/api/node/isconnected/index.html b/files/fr/web/api/node/isconnected/index.html
new file mode 100644
index 0000000000..0e2acb7b5b
--- /dev/null
+++ b/files/fr/web/api/node/isconnected/index.html
@@ -0,0 +1,96 @@
+---
+title: Node.isConnected
+slug: Web/API/Node/isConnected
+tags:
+  - API
+  - DOM
+  - Noeuds
+  - Propriétés
+translation_of: Web/API/Node/isConnected
+---
+<p> </p>
+
+<p>{{APIRef("DOM")}}</p>
+
+<p>La propriété en lecture seule <strong><code>isConnected</code></strong> de l'interface {{domxref("Node")}} renvoie un booléen indiquant si le noeud est connecté (directement ou indirectement) à l'objet contexte, par exemple l'objet {{domxref("Document")}} dans le cas d'un DOM normal  ou l'objet {{domxref("ShadowRoot")}} dans le cas du DOM shadow.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var isItConnected = nodeObjectInstance.isConnected</pre>
+
+<h3 id="Renvoie_la_valeur">Renvoie la valeur</h3>
+
+<p>Un {{domxref("Boolean")}} (<em>booléen</em>) — <code>true</code> (<em>vrai</em>) si le noeud est connecté <span class="short_text" id="result_box" lang="fr"><span>à son objet contextuel pertinent</span></span> et <code>false</code> (<em>faux</em>) sinon.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Un exemple DOM standard :</p>
+
+<pre class="brush: js"><code class="language-html">let test = document.createElement('p');
+console.log(test.isConnected); // renvoie false (<em>faux</em>)
+document.body.appendChild(test);</code>
+<code class="language-html">console.log(test.isConnected); // renvoie true</code> (<em>vrai</em>)
+</pre>
+
+<p>Un exemple DOM shadow :</p>
+
+<pre class="brush: js">// Crée une racine shadow
+var shadow = this.attachShadow({mode: 'open'});
+
+// Crée du CSS à appliquer au dom shadow
+var style = document.createElement('style');
+console.log(style.isConnected); // renvoie false (<em>faux</em>)
+
+style.textContent = '.wrapper {' +
+                       'position: relative;' +
+                    '}' +
+
+                     '.info {' +
+                        'font-size: 0.8rem;' +
+                        'width: 200px;' +
+                        'display: inline-block;' +
+                        'border: 1px solid black;' +
+                        'padding: 10px;' +
+                        'background: white;' +
+                        'border-radius: 10px;' +
+                        'opacity: 0;' +
+                        'transition: 0.6s all;' +
+                        'position: absolute;' +
+                        'bottom: 20px;' +
+                        'left: 10px;' +
+                        'z-index: 3;' +
+                      '}' +
+
+// attache l'élément de style créé au dom shadow
+
+shadow.appendChild(style);
+console.log(style.isConnected); // renvoie true (<em>vrai</em>)</pre>
+
+<p> </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('DOM WHATWG','#dom-node-isconnected','isConnected')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div>
+
+
+<p>{{Compat("api.Node.isConnected")}}</p>
+</div>
+</div>
diff --git a/files/fr/web/api/node/isdefaultnamespace/index.html b/files/fr/web/api/node/isdefaultnamespace/index.html
new file mode 100644
index 0000000000..67da853471
--- /dev/null
+++ b/files/fr/web/api/node/isdefaultnamespace/index.html
@@ -0,0 +1,39 @@
+---
+title: Node.isDefaultNamespace()
+slug: Web/API/Node/isDefaultNamespace
+tags:
+  - API
+  - DOM
+  - Méthodes
+  - Noeuds
+translation_of: Web/API/Node/isDefaultNamespace
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p>La méthode <strong><code>Node.isDefaultNamespace()</code></strong> accepte un URI d'espace de nom comme argument et renvoie un {{jsxref("Boolean")}} (booléen) avec une valeur <code>true</code> (<em>vrai</em>) si l'espace de nom est celui par défaut du noeud donné ou <code>false</code> (<em>faux</em>) sinon.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>result</em> = <em>node</em>.isDefaultNamespace(<em>namespaceURI</em>)
+</pre>
+
+<ul>
+ <li><code>result</code> détient la valeur de retour <code>true</code> (<em>vrai</em>) ou <code>false</code> (<em>faux</em>).</li>
+ <li><code>namespaceURI</code> est une <code>string</code> (<em>chaîne de caractères</em>) représentant l'espace de nom par rapport auquel l'élément sera vérifié.</li>
+</ul>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush:js">var XULNS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
+var el = document.getElementsByTagNameNS(XULNS, 'textbox')[0];
+
+alert(el.isDefaultNamespace(XULNS)); // true</pre>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-isDefaultNamespace">DOM Level 3 Core: isDefaultNamespace</a></li>
+ <li><a href="/en-US/docs/Code_snippets/IsDefaultNamespace" title="Code_snippets/IsDefaultNamespace">Code snippets: isDefaultNamespace</a></li>
+</ul>
diff --git a/files/fr/web/api/node/isequalnode/index.html b/files/fr/web/api/node/isequalnode/index.html
new file mode 100644
index 0000000000..e78eb9a7c2
--- /dev/null
+++ b/files/fr/web/api/node/isequalnode/index.html
@@ -0,0 +1,140 @@
+---
+title: Node.isEqualNode()
+slug: Web/API/Node/isEqualNode
+tags:
+  - API
+  - Comparaison
+  - DOM
+  - Méthodes
+  - Noeuds
+translation_of: Web/API/Node/isEqualNode
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p>La méthode <code><strong>Node.isEqualNode()</strong></code> permet de tester l'égalité entre deux éléments du DOM. Deux noeuds sont équivalents s'ils ont le même type, les mêmes caractéristiques de définition (ID, nombre d'enfants et autres), des attributs qui correspondent etc. L'ensemble spécifique de points des données qui doit correspondre varie en fonction des types de nœuds.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox">var <var>isEqualNode</var> = <var>node</var>.isEqualNode(<var>otherNode</var>);
+</pre>
+
+<ul>
+ <li><code>otherNode</code> : Le noeud à comparer.</li>
+</ul>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans cet exemple, nous créons trois blocs {{HTMLElement("div")}}. Le premier et le troisième ont les mêmes contenus et attributs, alors que le second est différent. Alors, nous éxécutons du JavaScript pour comparer les noeuds en utilisant <code>isEqualNode()</code> et sortons les résultats.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span><span class="punctuation token">&gt;</span></span>This is the first element.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span><span class="punctuation token">&gt;</span></span>This is the second element.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span><span class="punctuation token">&gt;</span></span>This is the first element.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>output<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h3 id="Specification" name="Specification">CSS</h3>
+
+<pre class="brush: css line-numbers  language-css"><code class="language-css"><span class="selector token"><span class="id token">#output</span> </span><span class="punctuation token">{</span>
+  <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">440</span>px<span class="punctuation token">;</span>
+  <span class="property token">border</span><span class="punctuation token">:</span> <span class="number token">2</span>px solid black<span class="punctuation token">;</span>
+  <span class="property token">border-radius</span><span class="punctuation token">:</span> <span class="number token">5</span>px<span class="punctuation token">;</span>
+  <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">10</span>px<span class="punctuation token">;</span>
+  <span class="property token">margin-top</span><span class="punctuation token">:</span> <span class="number token">20</span>px<span class="punctuation token">;</span>
+  <span class="property token">display</span><span class="punctuation token">:</span> block<span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">let</span> output <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"output"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">let</span> divList  <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">"div"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+output<span class="punctuation token">.</span>innerHTML <span class="operator token">+</span><span class="operator token">=</span> <span class="string token">"div 0 equals div 0: "</span> <span class="operator token">+</span> divList<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">.</span><span class="function token">isEqualNode</span><span class="punctuation token">(</span>divList<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">)</span> <span class="operator token">+</span> <span class="string token">"&lt;br/&gt;"</span><span class="punctuation token">;</span>
+output<span class="punctuation token">.</span>innerHTML <span class="operator token">+</span><span class="operator token">=</span> <span class="string token">"div 0 equals div 1: "</span> <span class="operator token">+</span> divList<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">.</span><span class="function token">isEqualNode</span><span class="punctuation token">(</span>divList<span class="punctuation token">[</span><span class="number token">1</span><span class="punctuation token">]</span><span class="punctuation token">)</span> <span class="operator token">+</span> <span class="string token">"&lt;br/&gt;"</span><span class="punctuation token">;</span>
+output<span class="punctuation token">.</span>innerHTML <span class="operator token">+</span><span class="operator token">=</span> <span class="string token">"div 0 equals div 2: "</span> <span class="operator token">+</span> divList<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">.</span><span class="function token">isEqualNode</span><span class="punctuation token">(</span>divList<span class="punctuation token">[</span><span class="number token">2</span><span class="punctuation token">]</span><span class="punctuation token">)</span> <span class="operator token">+</span> <span class="string token">"&lt;br/&gt;"</span><span class="punctuation token">;</span></code></pre>
+
+<h3 id="Résultats">Résultats</h3>
+
+<p>{{ EmbedLiveSample('Example', 480) }}</p>
+
+<h2 id="Specification" name="Specification">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('DOM WHATWG', '#dom-node-isequalnode', 'Node.isEqualNode')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Node.isSameNode()")}}</li>
+</ul>
diff --git a/files/fr/web/api/node/issamenode/index.html b/files/fr/web/api/node/issamenode/index.html
new file mode 100644
index 0000000000..5ed912e638
--- /dev/null
+++ b/files/fr/web/api/node/issamenode/index.html
@@ -0,0 +1,151 @@
+---
+title: Node.isSameNode()
+slug: Web/API/Node/isSameNode
+tags:
+  - API
+  - DOM
+  - Méthodes
+  - Noeuds
+translation_of: Web/API/Node/isSameNode
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La méthode <code><strong>Node.isSameNode()</strong></code> teste si deux noeuds sont identiques, c'est-à-dire, s'ils font référence au même objet.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>isSameNode</em> = <em>node</em>.isSameNode(<em>other</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<ul>
+ <li><code>other</code> Le {{domxref("Node")}} à tester.</li>
+</ul>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans cet exemple, nous créons 3 blocs {{HTMLElement("div")}}. Le premier et le troisième ont les mêmes contenus et attributs, alors que le second est différent. Ensuite, nous exécutons du JavaScript pour comparer les nœuds en utilisant <code>isSameNode()</code> et sortons les résultats.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;This is the first element.&lt;/div&gt;
+&lt;div&gt;This is the second element.&lt;/div&gt;
+&lt;div&gt;This is the first element.&lt;/div&gt;
+
+&lt;p id="output"&gt;&lt;/p&gt;</pre>
+
+<div class="hidden">
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#output {
+  width: 440px;
+  border: 2px solid black;
+  border-radius: 5px;
+  padding: 10px;
+  margin-top: 20px;
+  display: block;
+}</pre>
+</div>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">let output = document.getElementById("output");
+let divList  = document.getElementsByTagName("div");
+
+output.innerHTML += "div 0 same as div 0: " + divList[0].isSameNode(divList[0]) + "&lt;br/&gt;";
+output.innerHTML += "div 0 same as div 1: " + divList[0].isSameNode(divList[1]) + "&lt;br/&gt;";
+output.innerHTML += "div 0 same as div 2: " + divList[0].isSameNode(divList[2]) + "&lt;br/&gt;";
+</pre>
+
+<h3 id="Résultats">Résultats</h3>
+
+<p>{{ EmbedLiveSample('Example', 480) }}</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">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-node', 'Node')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Pas de changement (a été longtemps retiré).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#Node3-isSameNode', 'Node.isSameNode()')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}<br>
+    Removed in {{CompatGeckoDesktop("10")}}<br>
+    Readded in {{CompatGeckoDesktop("48")}}</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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}<br>
+    Removed in {{CompatGeckoMobile("10")}}<br>
+    Readded in {{CompatGeckoMobile("48")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Node.isEqualNode()")}}</li>
+</ul>
diff --git a/files/fr/web/api/node/issupported/index.html b/files/fr/web/api/node/issupported/index.html
new file mode 100644
index 0000000000..0a329b1fcd
--- /dev/null
+++ b/files/fr/web/api/node/issupported/index.html
@@ -0,0 +1,139 @@
+---
+title: element.isSupported
+slug: Web/API/Node/isSupported
+tags:
+  - API
+  - DOM
+  - Méthodes
+  - Noeuds
+translation_of: Web/API/Node/isSupported
+---
+<p>{{APIRef("DOM")}}{{obsolete_header}}</p>
+
+<p>La méthode <code><strong>Node.isSupported()</strong></code> renvoie une marque  {{domxref("Boolean","booléenne")}} contenant le résultat du test par lequel est vérifié si une implémentation DOM prend en charge une fonctionnalité spécifique et si celle-ci est supportée par un noeud spécifique.</p>
+
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+
+<pre class="syntaxbox"><em>boolValue</em> = <em>element</em>.isSupported(<em>feature</em>, <em>version</em>)</pre>
+
+<dl>
+ <dt>
+ <h3 id="Paramètres">Paramètres</h3>
+ </dt>
+ <dt><code>feature</code></dt>
+ <dd>est une  {{domxref("DOMString")}} (<em>chaîne de caractères</em>) contenant le nom de la fonctionnalité à tester. C'est le même nom qui peut être passé à la méthode <code>hasFeature</code> de <a href="https://developer.mozilla.org/fr/docs/Web/API/Document/implementation">DOMImplementation</a>. Les valeurs possibles définies dans la spécification DOM core sont listées dans la section <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/introduction.html#ID-Conformance">Conformance</a> de DOM Level 2.</dd>
+ <dt><code>version</code></dt>
+ <dd>est une  {{domxref("DOMString")}} (<em>chaîne de caractères</em>) contenant le numéro de version de la fonctionnalité à tester. En DOM Level 2, première version, il s'agit de la chaîne « <code>2.0</code> ». Si la version n'est pas spécifiée, la gestion de n'importe quelle version de la fonctionnalité suffira pour que soit renvoyée la valeur <code>true</code>.</dd>
+</dl>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>doc<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
+ <span class="comment token">// Obtenir un élément et vérifier pour voir s'il est pris en charge par les modules HTML DOM2.</span>
+ <span class="keyword token">var</span> main <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'doc'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+ <span class="keyword token">var</span> output <span class="operator token">=</span> main<span class="punctuation token">.</span><span class="function token">isSupported</span><span class="punctuation token">(</span><span class="string token">'HTML'</span><span class="punctuation token">,</span> <span class="string token">'2.0'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h2>
+
+<p> </p>
+
+<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('DOM WHATWG', '#interface-node', 'Node')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Supprimée de la spécification</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#Level-2-Core-Node-supports', 'Node.isSupported()')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Pas de changement de {{SpecName('DOM2 Core')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#Level-2-Core-Node-supports', 'Node.isSupported()')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>{{CompatUnknown}}</td>
+   <td>
+    <p>{{CompatGeckoDesktop(1)}}</p>
+
+    <p>{{CompatGeckoDesktop(19)}} (partial)[1]</p>
+
+    <p>{{CompatGeckoDesktop(22)}}{{CompatNo}}</p>
+   </td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>
+    <p>{{CompatGeckoMobile(1)}}</p>
+
+    <p>{{CompatGeckoMobile(19)}} (partial)[1]</p>
+
+    <p>{{CompatGeckoMobile(22)}}{{CompatNo}}</p>
+   </td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Cette méthode retournera toujours <code>true</code> ({{bug("801425")}})</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("Node")}} à laquelle elle appartient.</li>
+</ul>
diff --git a/files/fr/web/api/node/lastchild/index.html b/files/fr/web/api/node/lastchild/index.html
new file mode 100644
index 0000000000..3f31c8f722
--- /dev/null
+++ b/files/fr/web/api/node/lastchild/index.html
@@ -0,0 +1,70 @@
+---
+title: element.lastChild
+slug: Web/API/Node/lastChild
+tags:
+  - API
+  - DOM
+  - Enfant
+  - Noeuds
+  - Propriétés
+translation_of: Web/API/Node/lastChild
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La propriété en lecture seule<strong> </strong><code><strong>Node.lastChild</strong></code> renvoie le dernier enfant du noeud. Si son parent est un élément, l'enfant est généralement un noeud élément, texte ou commentaire. Elle renvoie <code>null</code> s'il n'y a aucun enfant.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <var>childNode</var> = <var>node</var>.lastChild;
+</pre>
+
+<p> </p>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<p> </p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> tr <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"row1"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> corner_td <span class="operator token">=</span> tr<span class="punctuation token">.</span>lastChild<span class="punctuation token">;</span></code></pre>
+
+<h2 id="Spécification">Spécification</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('DOM WHATWG', '#dom-node-lastchild', 'Node.lastChild')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Pas de changement</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-61AD09FB', 'Node.lastChild')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Pas de changement</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-61AD09FB', 'Node.lastChild')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Pas de changement</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-61AD09FB', 'Node.lastChild')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Node.lastChild")}}</p>
+
+<div id="compat-desktop"> </div>
diff --git a/files/fr/web/api/node/localname/index.html b/files/fr/web/api/node/localname/index.html
new file mode 100644
index 0000000000..ea563ffab1
--- /dev/null
+++ b/files/fr/web/api/node/localname/index.html
@@ -0,0 +1,116 @@
+---
+title: element.localName
+slug: Web/API/Node/localName
+tags:
+  - API
+  - DOM
+  - Noeuds
+  - Nom local
+  - Propriétés
+translation_of: Web/API/Node/localName
+---
+<p>{{APIRef("DOM")}}{{obsolete_header}}</p>
+
+<p>La propriété en lecture seule <code><strong>Node.localName</strong></code> renvoie la partie locale du nom qualifié de ce nœud.</p>
+
+<div class="warning">
+<p>Dans DOM4, cette API a été déplacée de <code>Node</code> vers les interfaces {{domxref("Element")}} et {{domxref("Attr")}}.</p>
+</div>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>name</var> = <var>element</var>.localName
+</pre>
+
+<ul>
+ <li><code>name</code> est le nom local sous la forme d'une chaîne (voir {{ Anch("Notes") }} plus bas pour plus de détails)</li>
+</ul>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<p>(Doit être servi avec un type de contenu XML, comme <code>text/xml</code> ou <code>application/xhtml+xml</code> .)</p>
+
+<pre class="brush:xml line-numbers  language-xml"><code class="language-xml"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span> <span class="attr-name token">xmlns</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.w3.org/1999/xhtml<span class="punctuation token">"</span></span>
+      <span class="attr-name token"><span class="namespace token">xmlns:</span>svg</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.w3.org/2000/svg<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>application/javascript<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="cdata token">&lt;![CDATA[
+  function test() {
+    var text = document.getElementById('text');
+    var circle = document.getElementById('circle');
+
+    text.value = "&lt;svg:circle&gt; has:\n" +
+                 "localName = '" + circle.localName + "'\n" +
+                 "namespaceURI = '" + circle.namespaceURI + "'";
+  }
+  ]]&gt;</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span> <span class="attr-name token">onload</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>test()<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span><span class="namespace token">svg:</span>svg</span> <span class="attr-name token">version</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>1.1<span class="punctuation token">"</span></span>
+    <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100px<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100px<span class="punctuation token">"</span></span>
+    <span class="attr-name token">viewBox</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0 0 100 100<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span><span class="namespace token">svg:</span>circle</span> <span class="attr-name token">cx</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>50<span class="punctuation token">"</span></span> <span class="attr-name token">cy</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>50<span class="punctuation token">"</span></span> <span class="attr-name token">r</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>30<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">fill</span><span class="punctuation token">:</span><span class="hexcode token">#aaa</span></span><span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>circle<span class="punctuation token">"</span></span><span class="punctuation token">/&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span><span class="namespace token">svg:</span>svg</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>textarea</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">rows</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>4<span class="punctuation token">"</span></span> <span class="attr-name token">cols</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>55<span class="punctuation token">"</span></span><span class="punctuation token">/&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h2 id="Notes" name="Notes"><a id="Notes" name="Notes"></a>Notes</h2>
+
+<p>Le nom local d'un nœud est la partie de son nom qualifié qui suit les deux points. Les noms qualifiés sont typiquement utilisés en XML comme parties des espaces de noms de documents XML particuliers. Par exemple, dans le nom qualifié <code>ecomm:partners</code>, <code>partners</code> est le nom local et <code>ecomm</code> est le préfixe :</p>
+
+<pre>&lt;ecomm:business id="soda_shop" type="brick_n_mortar"&gt;
+  &lt;ecomm:partners&gt;
+    &lt;ecomm:partner id="1001"&gt;Tony's Syrup Warehouse
+    &lt;/ecomm:partner&gt;
+  &lt;/ecomm:partner&gt;
+&lt;/ecomm:business&gt;
+</pre>
+
+<p><span class="comment">Needs to be reworded; right now it's wrong. -Nickolay Le préfixe — dans ce cas « ecomm » — définit l'espace de noms dans lequel le nom local peut être utilisé.</span></p>
+
+<div class="note">
+<p>Dans {{Gecko("1.9.2")}} et antérieurs, la propriété retourne en casse majuscule le nom local pour les éléments HTML dans le DOM HTML (par opposition aux éléments XHTML dans le DOM XML). Dans les versions ultérieures, en conformité avec HTML5, la propriété renvoie dans le cas d'un stockage DOM interne, en casse minuscule pour les éléments HTML dans le DOM HTML et les éléments XHTML dans le DOM XML. La propriété  {{domxref("element.tagName","tagName")}} continue de renvoyer en casse majuscule pour les éléments HTML dans le DOM HTML.</p>
+</div>
+
+<p>Pour les nœuds de tout autre <a href="https://developer.mozilla.org/fr/docs/Web/API/Node/nodeType">type</a> qu'<code>ELEMENT_NODE</code> et <code>ATTRIBUTE_NODE</code>, <code>localName</code> vaut toujours <code>null</code>.</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">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-NodeNSLocalN', 'Node.localName')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-NodeNSLocalN', 'Node.localName')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Node.localName")}}</p>
+
+<h3 id="Voir_aussi" name="Voir_aussi">Voir aussi</h3>
+
+<ul>
+ <li>{{domxref("Node.namespaceURI")}}</li>
+ <li>{{domxref("Node.prefix")}}</li>
+ <li>{{domxref("Element.localName")}}</li>
+ <li>{{domxref("Attr.localName")}}</li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/web/api/node/lookupnamespaceuri/index.html b/files/fr/web/api/node/lookupnamespaceuri/index.html
new file mode 100644
index 0000000000..52e72bec1f
--- /dev/null
+++ b/files/fr/web/api/node/lookupnamespaceuri/index.html
@@ -0,0 +1,23 @@
+---
+title: Node.lookupNamespaceURI()
+slug: Web/API/Node/lookupNamespaceURI
+tags:
+  - API
+  - DOM
+  - Méthodes
+  - Noeuds
+translation_of: Web/API/Node/lookupNamespaceURI
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La méthode <code><strong>Node.lookupNamespaceURI()</strong></code> accepte un préfixe et renvoie l'URI de l'espace de nom associé avec lui sur le noeud donné s'il le trouve (et <code>null</code> sinon). La fourniture de <code>null</code> pour le préfixe renverra l'espace de nom par défaut.</p>
+
+<p>Du fait du <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=312019" title="https://bugzilla.mozilla.org/show_bug.cgi?id=312019">bug 312019</a>, cette méthode ne fonctionne pas avec les espaces de noms attribués dynamiquement (c'est-à-dire ceux qui sont définis par <a href="/en/DOM/Node.prefix" title="En/DOM/Node.prefix">Node.prefix</a>).</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-lookupNamespaceURI" rel="freelink">http://www.w3.org/TR/DOM-Level-3-Cor...upNamespaceURI</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/web/api/node/lookupprefix/index.html b/files/fr/web/api/node/lookupprefix/index.html
new file mode 100644
index 0000000000..968deea85e
--- /dev/null
+++ b/files/fr/web/api/node/lookupprefix/index.html
@@ -0,0 +1,23 @@
+---
+title: Node.lookupPrefix()
+slug: Web/API/Node/lookupPrefix
+tags:
+  - API
+  - DOM
+  - Méthodes
+  - Noeuds
+  - Préfixes
+  - URI
+translation_of: Web/API/Node/lookupPrefix
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La méthode <code><strong>Node.lookupPrefix()</strong></code> renvoie une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) contenant le préfixe d'un URI d'un espace de nom donné, s'il est présent, et <code>null</code> sinon. Quand plusieurs préfixes sont possibles, le résultat dépend de l'implémentation.</p>
+
+<p>En raison du <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=312019" title="https://bugzilla.mozilla.org/show_bug.cgi?id=312019">bug 312019</a>, cette méthode ne fonctionne plus avec les espaces de nom définis dynamiquement, c'est-à-dire ceux qui sont fixés avec la propriété {{domxref("Node.prefix")}}.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-lookupNamespacePrefix" rel="freelink">http://www.w3.org/TR/DOM-Level-3-Cor...amespacePrefix</a></li>
+</ul>
diff --git a/files/fr/web/api/node/namespaceuri/index.html b/files/fr/web/api/node/namespaceuri/index.html
new file mode 100644
index 0000000000..d185da9057
--- /dev/null
+++ b/files/fr/web/api/node/namespaceuri/index.html
@@ -0,0 +1,97 @@
+---
+title: element.namespaceURI
+slug: Web/API/Node/namespaceURI
+tags:
+  - API
+  - DOM
+  - Noeuds
+  - Propriétés
+translation_of: Web/API/Node/namespaceURI
+---
+<p>{{APIRef("DOM")}}{{obsolete_header}}</p>
+
+<p>La propriété en lecture seule <code><strong>Node.namespaceURI</strong></code> renvoie l'URI d'espace de noms du nœud, ou <code>null</code> si le noeud n'est pas dans un espace de nom. Quand le noeud est un document, elle retourne l'espace de nom XML pour le document courant.</p>
+
+<div class="warning">
+<p>Dans DOM4, cette API a été déplacée de <code>Node</code>  vers les interfaces {{domxref("Element")}} et {{domxref("Attr")}}.</p>
+</div>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>namespace</var> = <var>node</var>.namespaceURI</pre>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<p>Dans cet extrait, on examine les propriétés {{domxref("Node.localName")}} et <code>namespaceURI</code> d'un nœud. Si <code>namespaceURI</code> renvoie l'espace de noms XUL et que <code>localName</code> renvoie « browser » (<em>navigateur</em>), on peut considérer que le nœud est un <code>&lt;browser/&gt;</code> XUL.</p>
+
+<pre>if (node.localName == "browser" &amp;&amp;
+    node.namespaceURI == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") {
+  // il s'agit d'un browser XUL
+}
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Il ne s'agit pas d'une valeur calculée qui serait le résultat d'une vérification d'espace de noms basée sur les déclarations visibles. C'est simplement l'URI d'espace de noms donnée à la création.</p>
+
+<p>Dans Firefox 3.5 et antérieurs; l'URI d'espace de nom pour les éléments HTML dans les documents HTML est <code>null</code> . Dans les versions ultérieures, en conformité avec HTML5, il est <code><a class="external external-icon" href="https://www.w3.org/1999/xhtml" rel="freelink">https://www.w3.org/1999/xhtml</a></code> comme en XHTML.{{gecko_minversion_inline("1.9.2")}}</p>
+
+<p>Pour les nœuds de tout autre <a href="https://developer.mozilla.org/fr/docs/Web/API/Node/nodeType">type</a> qu'<code>ELEMENT_NODE</code> et <code>ATTRIBUTE_NODE</code>, la valeur de <code>namespaceURI</code> vaut toujours <code>null</code>.</p>
+
+<p>Il est possible de créer un élément en spécifiant une adresse <code>namespaceURI</code> avec la méthode DOM Level 2 {domxref("Document.createElementNS")}} et les attributs avec la méthode {{domxref("Element.setAttributeNS")}}.</p>
+
+<p>Suivant la spécification <a class="external" href="http://www.w3.org/TR/xml-names11/">Namespaces in XML</a>, un attribut n'hérite pas de son espace de noms depuis l'élément auquel il est attaché. Si un attribut n'a pas reçu explicitement d'espace de noms, il n'en aura aucun.</p>
+
+<p>Le DOM ne gère pas ou n'applique pas la validation de l'espace de noms en soi. Il appartient à l'application DOM de faire toute validation nécessaire. Notez également que le préfixe d'espace de noms, une fois associé à un nœud particulier, ne peut pas être modifié.</p>
+
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+
+<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("DOM3 Core", "core.html#ID-NodeNSname", "Node.namespaceURI")}}</td>
+   <td>{{Spec2("DOM3 Core")}}</td>
+   <td>Spécifie le comportement lorsqu'il est défini sur <code>null</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Core", "core.html#Namespaces-Considerations", "DOM Level 2 Core: XML Namespaces")}}</td>
+   <td>{{Spec2("DOM2 Core")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Core", "core.html#ID-NodeNSname", "Node.namespaceURI")}}</td>
+   <td>{{Spec2("DOM2 Core")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div>
+
+
+<p>{{Compat("api.Node.namespaceURI")}}</p>
+</div>
+</div>
+
+<div id="compat-mobile"> </div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Node.localName")}}</li>
+ <li>{{domxref("Node.prefix")}}</li>
+ <li>{{domxref("Element.namespaceURI")}}</li>
+ <li>{{domxref("Attr.namespaceURI")}}</li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/web/api/node/nextsibling/index.html b/files/fr/web/api/node/nextsibling/index.html
new file mode 100644
index 0000000000..b3e6cf3e7f
--- /dev/null
+++ b/files/fr/web/api/node/nextsibling/index.html
@@ -0,0 +1,83 @@
+---
+title: element.nextSibling
+slug: Web/API/Node/nextSibling
+tags:
+  - API
+  - DOM
+  - Noeuds
+  - Propriétés
+translation_of: Web/API/Node/nextSibling
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La propriété en lecture seule  <code><strong>Node.nextSibling</strong></code> renvoie le nœud (<code>node</code>) suivant immédiatement le nœud spécifié dans la liste des enfants ( {{domxref("Node.childNodes","childNodes")}}) de son nœud parent, ou <code>null</code> si le nœud spécifié est le dernier dans cette liste.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>nextNode</var> = <var>node</var>.nextSibling
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p></p><p>Les navigateurs basés sur Gecko insèrent des nœuds texte dans un document pour représenter des espaces
+    vides dans le balisage source. Par conséquent, un nœud obtenu par exemple via <a href="/fr/docs/Web/API/Node/firstChild" title="La propriété en lecture seule Node.firstChild renvoie le premier nœud enfant de l'arbre ou null s'il n'en a pas. Si le noeud est un Document , il renvoie le premier noeud de la liste de ses enfants directs."><code>Node.firstChild</code></a> ou
+    <a href="/fr/docs/Web/API/Node/previousSibling" title='{{APIRef("DOM")}}'><code>Node.previousSibling</code></a> peut faire référence à un nœud texte contenant des espaces plutôt qu'au véritable élément
+    que l'auteur comptait obtenir.</p>
+
+    <p>Consultez <a href="/fr/docs/Gestion_des_espaces_dans_le_DOM">Gestion des espaces dans le DOM</a>
+    et <a class="external" href="http://www.w3.org/DOM/faq.html#emptytext" rel="noopener"><i>Why are some Text nodes empty?</i>
+    dans la FAQ DOM 3 du W3C</a> pour plus d'informations.</p><p></p>
+
+<p>{{domxref("Element.nextElementSibling")}} peut être utilisé pour obtenir l'élément suivant en ignorant les noeuds d'espace.</p>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre class="brush:html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>div-01<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Here is div-01<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>div-02<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Here is div-02<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/javascript<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
+<span class="keyword token">var</span> el <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'div-01'</span><span class="punctuation token">)</span><span class="punctuation token">.</span>nextSibling<span class="punctuation token">,</span>
+    i <span class="operator token">=</span> <span class="number token">1</span><span class="punctuation token">;</span>
+
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'Siblings of div-01:'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="keyword token">while</span> <span class="punctuation token">(</span>el<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>i <span class="operator token">+</span> <span class="string token">'. '</span> <span class="operator token">+</span> el<span class="punctuation token">.</span>nodeName<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  el <span class="operator token">=</span> el<span class="punctuation token">.</span>nextSibling<span class="punctuation token">;</span>
+  i<span class="operator token">++</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
+
+/**************************************************
+  Ce qui suit est écrit sur la console pendant le chargement:
+
+     Siblings of div-01
+
+      1. #text
+      2. DIV
+      3. #text
+      4. SCRIPT
+
+**************************************************/</code></pre>
+
+<p>Dans cet exemple, on peut voir que des nœuds <code>#text</code> sont insérés dans le DOM là où des espaces se trouvent dans le code source entre les balises (c'est-à-dire après la balise de fermeture d'un élément et avant la balise d'ouverture du suivant). Aucun espace n'est créé entre les éléments insérés par l'instruction <code>document.write</code> .</p>
+
+<p>L'inclusion possible de nœuds textes dans le DOM doit être prise en compte pour le parcours du DOM à l'aide de <code>nextSibling</code>. Consultez les ressources dans la section Notes .</p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-nextSibling">DOM Level 1 Core: nextSibling</a> <small>— <a class="external" href="http://xmlfr.org/w3c/TR/REC-DOM-Level-1/level-one-core.html#attribute-nextSibling">traduction</a> (non normative)</small></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-6AC54C2F">DOM Level 2 Core: nextSibling</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2/core/core.html#ID-6AC54C2F">traduction</a> (non normative)</small></li>
+</ul>
+
+<h2 class="noinclude" id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Node.nextSibling")}}</p>
+
+<h2 class="noinclude" id="Voir_aussi">Voir aussi</h2>
+
+<p>{{domxref("Element.nextElementSibling")}}</p>
diff --git a/files/fr/web/api/node/nodename/index.html b/files/fr/web/api/node/nodename/index.html
new file mode 100644
index 0000000000..da778cda15
--- /dev/null
+++ b/files/fr/web/api/node/nodename/index.html
@@ -0,0 +1,111 @@
+---
+title: element.nodeName
+slug: Web/API/Node/nodeName
+tags:
+  - API
+  - DOM
+  - Noeuds
+  - Nom
+  - Propriété
+translation_of: Web/API/Node/nodeName
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La propriété en lecture seule <code><strong>Node.nodeName</strong></code> renvoie le nom du nœud courant dans une chaîne.</p>
+
+<p>Les valeurs retournées pour les différents types de noeuds sont :</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Interface</th>
+   <th>Valeur nodeName</th>
+  </tr>
+  <tr>
+   <td>{{domxref("Attr")}}</td>
+   <td>La valeur de {{domxref("Attr.name")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("CDATASection")}}</td>
+   <td><code>"#cdata-section"</code></td>
+  </tr>
+  <tr>
+   <td>{{domxref("Comment")}}</td>
+   <td><code>"#comment"</code></td>
+  </tr>
+  <tr>
+   <td>{{domxref("Document")}}</td>
+   <td><code>"#document"</code></td>
+  </tr>
+  <tr>
+   <td>{{domxref("DocumentFragment")}}</td>
+   <td><code>"#document-fragment"</code></td>
+  </tr>
+  <tr>
+   <td>{{domxref("DocumentType")}}</td>
+   <td>La valeur de {{domxref("DocumentType.name")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("Element")}}</td>
+   <td>La valeur de {{domxref("Element.tagName")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("Entity")}}</td>
+   <td>Le nom de l'entité</td>
+  </tr>
+  <tr>
+   <td>{{domxref("EntityReference")}}</td>
+   <td>Le nom de la référence d'entité</td>
+  </tr>
+  <tr>
+   <td>{{domxref("Notation")}}</td>
+   <td>Le nom de notation</td>
+  </tr>
+  <tr>
+   <td>{{domxref("ProcessingInstruction")}}</td>
+   <td>La valeur de {{domxref("ProcessingInstruction.target")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("Text")}}</td>
+   <td><code>"#text"</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>str</em> = <em>node</em>.nodeName;
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Avec le balisage suivant :</p>
+
+<pre>&lt;div id="d1"&gt;hello world&lt;/div&gt;
+&lt;input type="text" id="t"/&gt;
+</pre>
+
+<p>et le script suivant :</p>
+
+<pre>var div1 = document.getElementById("d1");
+var text_field = document.getElementById("t");
+text_field.value = div1.nodeName;
+</pre>
+
+<p>En XHTML (ou tout autre format XML), la valeur de <code>text_field</code> sera « div ». Cependant, en HTML, la valeur de <code>text_field</code> sera « DIV », parce que <code>nodeName</code> et <code>tagName</code> renvoient en casse majuscule sur les éléments HTML dans les DOM marqués comme des documents HTML. En lire plus <a href="http://ejohn.org/blog/nodename-case-sensitivity/" title="http://ejohn.org/blog/nodename-case-sensitivity/">détails sur la sensibilité à la casse de nodeName dans différents navigateurs</a> (en).</p>
+
+<p>Notez que la propriété <code><a href="fr/DOM/element.tagName">tagName</a></code> aurait pu être uilisée à la place, puisque <code>nodeName</code> a la même valeur que <code>tagName</code> pour un élément. Souvenez vous cependant que <code>nodeName</code> renverra <code>#text</code> pour les nœuds texte tandis que <code>tagName</code> renverra <code>undefined</code>.</p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68D095">DOM Level 2 Core: Node.nodeName</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-F68D095">traduction</a> (non normative)</small></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-F68D095">DOM Level 3 Core: Node.nodeName</a></li>
+ <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents">HTML 5: APIs in HTML documents</a></li>
+</ul>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Node.nodeName")}}</p>
diff --git a/files/fr/web/api/node/nodeprincipal/index.html b/files/fr/web/api/node/nodeprincipal/index.html
new file mode 100644
index 0000000000..b1813302bb
--- /dev/null
+++ b/files/fr/web/api/node/nodeprincipal/index.html
@@ -0,0 +1,39 @@
+---
+title: Node.nodePrincipal
+slug: Web/API/Node/nodePrincipal
+tags:
+  - API
+  - DOM
+  - Noeuds
+  - Principal
+  - Propriétés
+translation_of: Web/API/Node
+---
+<div>{{APIRef("DOM")}} {{Non-standard_header}}</div>
+
+<p>La propriété en lecture seule <code><strong>Node.nodePrincipal</strong></code> renvoie l'objet {{Interface("nsIPrincipal")}} représentant le contexte de sécurité actuel du noeud.</p>
+
+<p>{{Note("Cette propriété existe sur tous les nœuds (HTML, XUL, SVG, MathML, etc.), mais n'est accessible par le script que s'il possède des privilèges de chrome.")}}</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>principalObj</em> = <em>Node</em>.nodePrincipal
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un objet <code>nsIPrincipal</code> représentant le contexte de sécurité du noeud.</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Cette propriété est en lecture seule ; tenter d'y écrire lancera une exception. En outre, cette propriété est accessible seulement par le code privilégié.</p>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<p>N'existe dans aucune spécification. C'est une propriété propre à Firefox.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Node.nodePrincipal")}}</p>
diff --git a/files/fr/web/api/node/nodetype/index.html b/files/fr/web/api/node/nodetype/index.html
new file mode 100644
index 0000000000..d6f0a4eb2e
--- /dev/null
+++ b/files/fr/web/api/node/nodetype/index.html
@@ -0,0 +1,180 @@
+---
+title: element.nodeType
+slug: Web/API/Node/nodeType
+tags:
+  - API
+  - DOM
+  - Noeuds
+  - Propriétés
+  - Types
+translation_of: Web/API/Node/nodeType
+---
+<div>{{APIRef("DOM")}}</div>
+
+<div>La propriété en lecture seule <code><strong>Node.nodeType</strong></code> représente le type du noeud.</div>
+
+<h2 id="Description">Description</h2>
+
+<p>La propriété <strong><code>nodeType</code></strong> peut être utilisée pour distinguer les uns des autres les différents genres de noeuds tels que {{domxref("Element")}}, {{domxref("Text")}} et {{domxref("Comment")}} .</p>
+
+<h2 id="Syntaxe"><font><font>Syntaxe</font></font></h2>
+
+<pre class="syntaxbox"><var><font><font>Type</font></font></var> = <var><font><font>node</font></font></var> .nodeType
+</pre>
+
+<p id="Exemple"><font><font>Renvoie un entier (<em>integer</em>) qui spécifie le type du noeud ; les valeurs possibles sont listées dans </font></font> {{anch("Constantes")}}.</p>
+
+<h2 id="Exemple" name="Exemple"><a id="Constantes" name="Constantes"></a>Constantes</h2>
+
+<h3 id="Exemple" name="Exemple">Constantes de type nœud</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Constante</th>
+   <th scope="col">Valeur</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>Node.ELEMENT_NODE</code></td>
+   <td><code>1</code></td>
+   <td>Un noeud {{domxref("Element")}}  tel que {{HTMLElement("p")}} ou {{HTMLElement("div")}}<code>.</code></td>
+  </tr>
+  <tr>
+   <td><code>Node.TEXT_NODE</code></td>
+   <td><code>3</code></td>
+   <td>Le {{domxref("Text")}} actuel de l'{{domxref("Element")}} ou {{domxref("Attr")}}.</td>
+  </tr>
+  <tr>
+   <td><code>Node.PROCESSING_INSTRUCTION_NODE</code></td>
+   <td><code>7</code></td>
+   <td>Une {{domxref("ProcessingInstruction")}} d'un document XML tel que la déclaration <code>&lt;?xml-stylesheet ... ?&gt;</code>.</td>
+  </tr>
+  <tr>
+   <td><code>Node.COMMENT_NODE</code></td>
+   <td><code>8</code></td>
+   <td>Un noeud {{domxref("Comment")}}.</td>
+  </tr>
+  <tr>
+   <td><code>Node.DOCUMENT_NODE</code></td>
+   <td><code>9</code></td>
+   <td>Un noeud {{domxref("Document")}}.</td>
+  </tr>
+  <tr>
+   <td><code>Node.DOCUMENT_TYPE_NODE</code></td>
+   <td><code>10</code></td>
+   <td>Un noeud {{domxref("DocumentType")}} c'est-à-dire <code>&lt;!DOCTYPE html&gt;</code> pour des documents HTML5.</td>
+  </tr>
+  <tr>
+   <td><code>Node.DOCUMENT_FRAGMENT_NODE</code></td>
+   <td><code>11</code></td>
+   <td>Un noeud {{domxref("DocumentFragment")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Constantes_de_type_noeud_dépréciées_deprecated_inline()">Constantes de type noeud dépréciées {{deprecated_inline()}}</h3>
+
+<p>Les constantes suivantes ont été dépréciées et ne doivent plus être utilisées.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td>Constante</td>
+   <td>Valeur</td>
+   <td>Description</td>
+  </tr>
+  <tr>
+   <td><code>Node.ATTRIBUTE_NODE</code></td>
+   <td>2</td>
+   <td>Un {{domxref("Attr", "Attribut")}} d'un {{domxref("Element")}}. Les attributs d'élément n'implémentent plus l'interface {{domxref("Node")}} dans la spécification {{SpecName("DOM4")}}.</td>
+  </tr>
+  <tr>
+   <td><code>Node.CDATA_SECTION_NODE</code></td>
+   <td><code>4</code></td>
+   <td>Une {{domxref("CDATASection")}}. Supprimée dans la spécification {{SpecName("DOM4")}}.</td>
+  </tr>
+  <tr>
+   <td><code>Node.ENTITY_REFERENCE_NODE</code></td>
+   <td>5</td>
+   <td>Un noeud référence d'entité XML. Supprimé dans la spécification {{SpecName("DOM4")}}.</td>
+  </tr>
+  <tr>
+   <td><code>Node.ENTITY_NODE</code></td>
+   <td>6</td>
+   <td>Un noeud <code>&lt;!ENTITY ...&gt;</code> XML. Supprimé dans la spécificatioin {{SpecName("DOM4")}}.</td>
+  </tr>
+  <tr>
+   <td><code>Node.NOTATION_NODE</code></td>
+   <td>12</td>
+   <td>Un noeud <code>&lt;!NOTATION ...&gt;</code> XML. Supprimé dans la spécification {{SpecName("DOM4")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemple" name="Exemple"><font><font>Exemples</font></font></h2>
+
+<h3 id="Différents_types_de_noeuds"><font><font>Différents types de noeuds</font></font></h3>
+
+<pre class="brush: js">document.nodeType === Node.DOCUMENT_NODE; // true (<em>vrai</em>)
+document.doctype.nodeType === Node.DOCUMENT_TYPE_NODE; // true  (<em>vrai</em>)
+
+var fragment = document.createDocumentFragment();
+fragment.nodeType === Node.DOCUMENT_FRAGMENT_NODE; // true  (<em>vrai</em>)
+
+<code>var p = document.createElement("p");
+p.textContent = "Once upon a time...";</code>
+
+p.nodeType === Node.ELEMENT_NODE; // true  (<em>vrai</em>)
+p.firstChild.nodeType === Node.TEXT_NODE; // true  (<em>vrai</em>)
+</pre>
+
+<h3 id="Commentaires">Commentaires</h3>
+
+<p><font><font>Cet exemple vérifie si le premier noeud dans l'élément du document est un noeud commentaire et si ce n'est pas le cas, affiche un message.</font></font></p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> node <span class="operator token">=</span> document<span class="punctuation token">.</span>documentElement<span class="punctuation token">.</span>firstChild<span class="punctuation token">;</span>
+<span class="keyword token">if</span> <span class="punctuation token">(</span>node<span class="punctuation token">.</span>nodeType <span class="operator token">!=</span> Node<span class="punctuation token">.</span>COMMENT_NODE<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">"You should comment your code well!"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification"><font><font>Spécifications</font></font></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('DOM WHATWG', '#dom-node-nodetype', 'Node.nodeType')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Sont dépréciés les types <code>ATTRIBUTE_NODE, CDATA_SECTION_NODE, ENTITY_REFERENCE_NODE et NOTATION_NODE</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-1950641247', 'Node.nodeType')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Pas de changement.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-111237558', 'Node.nodeType')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Pas de changement.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-111237558', 'Node.nodeType')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Node.nodeType")}}</p>
diff --git a/files/fr/web/api/node/nodevalue/index.html b/files/fr/web/api/node/nodevalue/index.html
new file mode 100644
index 0000000000..07e228342e
--- /dev/null
+++ b/files/fr/web/api/node/nodevalue/index.html
@@ -0,0 +1,93 @@
+---
+title: element.nodeValue
+slug: Web/API/Node/nodeValue
+tags:
+  - API
+  - DOM
+  - Noeuds
+  - Propriétés
+translation_of: Web/API/Node/nodeValue
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La propriété <code><strong>Node.nodeValue</strong></code> renvoie ou définit la valeur du nœud courant.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>value</var> = <var>node</var>.nodeValue;
+</pre>
+
+<p><code>value</code> (<em>valeur</em>) est une chaîne contenant la valeur du nœud courant, s'il y en a une.</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Pour le document lui-même, <code>nodeValue</code> renvoie <code>null</code>. Pour des nœuds texte, de commentaires et CDATA, <code>nodeValue</code> renvoie le contenu du nœud. Pour les nœuds d'attributs, il s'agira de la valeur de l'attribut.</p>
+
+<p>Le tableau suivant montre les valeurs de retour pour différents types de nœuds :</p>
+
+<table>
+ <tbody>
+  <tr>
+   <td>Attr</td>
+   <td>valeur de l'attribut</td>
+  </tr>
+  <tr>
+   <td>CDATASection</td>
+   <td>contenu de la section CDATA</td>
+  </tr>
+  <tr>
+   <td>Comment</td>
+   <td>contenu du commentaire</td>
+  </tr>
+  <tr>
+   <td>Document</td>
+   <td><code>null</code></td>
+  </tr>
+  <tr>
+   <td>DocumentFragment</td>
+   <td><code>null</code></td>
+  </tr>
+  <tr>
+   <td>DocumentType</td>
+   <td><code>null</code></td>
+  </tr>
+  <tr>
+   <td>Element</td>
+   <td><code>null</code></td>
+  </tr>
+  <tr>
+   <td>NamedNodeMap</td>
+   <td><code>null</code></td>
+  </tr>
+  <tr>
+   <td>EntityReference</td>
+   <td><code>null</code></td>
+  </tr>
+  <tr>
+   <td>Notation</td>
+   <td><code>null</code></td>
+  </tr>
+  <tr>
+   <td>ProcessingInstruction</td>
+   <td>tout le contenu à l'exception de la cible</td>
+  </tr>
+  <tr>
+   <td>Text</td>
+   <td>contenu du nœud texte</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Lorsque <code>nodeValue</code> est défini comme étant <code>null</code>, l'assignation n'a aucun effet.</p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68D080">DOM Level 2 Core: Node.nodeValue</a>  <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-F68D080">traduction</a> (non normative)</small></li>
+</ul>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Node.nodeValue")}}</p>
diff --git a/files/fr/web/api/node/normalize/index.html b/files/fr/web/api/node/normalize/index.html
new file mode 100644
index 0000000000..c58ba06945
--- /dev/null
+++ b/files/fr/web/api/node/normalize/index.html
@@ -0,0 +1,40 @@
+---
+title: element.normalize
+slug: Web/API/Node/normalize
+translation_of: Web/API/Node/normalize
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<h2 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h2>
+
+<p>Place le nœud spécifié et tout son sous-arbre dans une forme « normale ». Dans un sous-arbre normalisé, aucun nœud texte n'est vide et il n'y a pas de nœuds texte adjacents.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="eval"><em>élément</em>.normalize();
+</pre>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre class="brush:js line-numbers language-js">var conteneur = document.createElement("div");
+conteneur.appendChild( document.createTextNode("Partie 1 ") );
+conteneu.appendChild( document.createTextNode("Partie 2 ") );
+
+// Ici, conteneur.childNodes.length === 2
+// conteneur.childNodes[0].textContent === "Partie 1 "
+// conteneur.childNodes[1].textContent === "Partie 2 "
+
+conteneur.normalize();
+
+// À présent, conteneur.childNodes.length === 1
+// conteneur.childNodes[0].textContent === "Partie 1 Partie 2 "</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-normalize">DOM Level 2 Core: Node.normalize (en)</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-normalize">traduction en français</a> (non normative)</small></li>
+</ul>
+
+<p>{{ languages( { "en": "en/DOM/element.normalize", "pl": "pl/DOM/element.normalize" } ) }}</p>
diff --git a/files/fr/web/api/node/ownerdocument/index.html b/files/fr/web/api/node/ownerdocument/index.html
new file mode 100644
index 0000000000..cc197c1d80
--- /dev/null
+++ b/files/fr/web/api/node/ownerdocument/index.html
@@ -0,0 +1,70 @@
+---
+title: element.ownerDocument
+slug: Web/API/Node/ownerDocument
+tags:
+  - API
+  - DOM
+  - Document
+  - Noeuds
+  - Propriétés
+translation_of: Web/API/Node/ownerDocument
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La propriété en lecture seule <code><strong>Node.ownerDocument</strong></code> renvoie l'objet document de niveau supérieur pour ce nœud.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="eval"><em>document</em> = element.ownerDocument;
+</pre>
+
+<ul>
+ <li><code>document</code> est l'objet <a href="https://developer.mozilla.org/fr/docs/Web/API/document"><code>document</code></a> parent de l'élément courant.</li>
+</ul>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre class="brush: html">// étant donné un nœud "p", obtient le premier enfant HTML
+// de l'objet document
+var d = p.ownerDocument;
+var html = d.documentElement;
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>L'objet <code>document</code> renvoyé par cette propriété est l'objet principal avec lequel tous les nœuds enfants du document HTML réel sont créés. Si cette propriété est utilisée sur un nœud qui est lui-même un document, le résultat est <code>null</code>.</p>
+
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Spécification</th>
+   <th>Statut</th>
+   <th>Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-node-ownerdocument", "Node.ownerDocument")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM3 Core", "core.html#node-ownerDoc", "Node.ownerDocument")}}</td>
+   <td>{{Spec2("DOM3 Core")}}</td>
+   <td>Pas de changement</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Core", "core.html#node-ownerDoc", "Node.ownerDocument")}}</td>
+   <td>{{Spec2("DOM2 Core")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Node.ownerDocument")}}</p>
+
+<div id="compat-desktop"> </div>
diff --git a/files/fr/web/api/node/parentelement/index.html b/files/fr/web/api/node/parentelement/index.html
new file mode 100644
index 0000000000..7da92f2334
--- /dev/null
+++ b/files/fr/web/api/node/parentelement/index.html
@@ -0,0 +1,53 @@
+---
+title: Node.parentElement
+slug: Web/API/Node/parentElement
+tags:
+  - API
+  - DOM
+  - Noeuds
+  - Propriétés
+  - parent
+translation_of: Web/API/Node/parentElement
+---
+<div>
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<div>La propriété en lecture seule <code style="font-style: normal;"><strong>Node.parentElement</strong></code> renvoie le parent du noeud DOM ({{domxref("Element")}}) ou <code style="font-style: normal;"><strong>null</strong></code> si ce dernier n'a pas de parent ou si le parent n'est pas un {{domxref("Element")}} du DOM.</div>
+</div>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>parentElement</em> = <em>node</em>.parentElement
+</pre>
+
+<p><code><strong>parentElement</strong></code> référence l'élément parent d'un n<span class="notranslate" style="line-height: 1.5;">œ</span>ud (<code><strong>node</strong></code>). C'est toujours un objet <span style="line-height: 1.5;">{{domxref("Element")}} </span> du DOM <span style="line-height: 1.5;">ou <code>null</code>.</span></p>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush:js line-numbers  language-js"><code class="language-js"><span class="keyword token">if</span> <span class="punctuation token">(</span>node<span class="punctuation token">.</span>parentElement<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    node<span class="punctuation token">.</span>parentElement<span class="punctuation token">.</span>style<span class="punctuation token">.</span>color <span class="operator token">=</span> <span class="string token">"red"</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Sur quelques navigateurs, la propriété <code>parentElement</code> est seulement définie sur les noeuds qui sont eux-mêmes des {{domxref("Element")}}. En particulier, elle n'est pas définie sur les noeuds texte.</p>
+
+<div>
+
+
+<p>{{Compat("api.Node.parentElement")}}</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<ul>
+ <li>{{spec("http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#parent-element", "DOM Level 4: Node.parentElement", "WD")}}</li>
+</ul>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Node.parentNode")}}</li>
+</ul>
diff --git a/files/fr/web/api/node/parentnode/index.html b/files/fr/web/api/node/parentnode/index.html
new file mode 100644
index 0000000000..50123e2cb6
--- /dev/null
+++ b/files/fr/web/api/node/parentnode/index.html
@@ -0,0 +1,67 @@
+---
+title: element.parentNode
+slug: Web/API/Node/parentNode
+tags:
+  - API
+  - DOM
+  - Noeuds
+  - Propriétés
+  - parent
+translation_of: Web/API/Node/parentNode
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La propriété en lecture seule <strong>parentNode</strong> <span id="result_box" lang="fr"><span>renvoie le parent du nœud spécifié dans l'arborescence de DOM</span></span> .</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>parentNode</em> = <em>node</em>.parentNode</pre>
+
+<p><code>parentNode</code> est l'élément parent du nœud courant. <span class="short_text" id="result_box" lang="fr"><span>Le parent d'un élément est un </span></span>nœud <code>Element</code> , un nœud <code>Document</code> ou un nœud <code>DocumentFragment</code> .</p>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre class="brush:js line-numbers  language-js"><code class="language-js"><span class="keyword token">if</span> <span class="punctuation token">(</span>node<span class="punctuation token">.</span>parentNode<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="comment token">// supprime un noeud  de l'arbre, </span>
+  <span class="comment token">// sauf s'il a déjà été supprimé</span>
+  node<span class="punctuation token">.</span>parentNode<span class="punctuation token">.</span><span class="function token">removeChild</span><span class="punctuation token">(</span>node<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Les <a href="https://developer.mozilla.org/en-US/docs/DOM/Node.nodeType" title="DOM/Node.nodeType">noeuds </a><code>Document</code> et <code>DocumentFragment</code> ne peuvent jamais avoir de parent, alors  <code>parentNode</code>  retournera toujours <code>null</code> .</p>
+
+<p> Il renvoie également <code>null</code> si le nœud vient d'être créé et n'est pas encore attaché à l'arbre.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div id="compat-desktop">
+
+
+<p>{{Compat("api.Node.parentNode")}}</p>
+
+<h2 id="Spécification">Spécification</h2>
+</div>
+
+<ul>
+ <li><a class="external external-icon" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1060184317">DOM Level 2 Core: Node.parentNode</a></li>
+ <li><a class="external external-icon" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1060184317">DOM Level 3 Core: Node.parentNode</a></li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<article class="approved text-content">
+<div class="boxed translate-rendered">
+<ul>
+ <li>{{Domxref("Node.firstChild")}}</li>
+ <li>{{Domxref("Node.lastChild")}}</li>
+ <li>{{Domxref("Node.childNodes")}}</li>
+ <li>{{Domxref("Node.nextSibling")}}</li>
+ <li>{{Domxref("Node.parentElement")}}</li>
+ <li>{{Domxref("Node.previousSibling")}}</li>
+ <li>{{Domxref("Node.removeChild")}}</li>
+</ul>
+</div>
+</article>
+
+<article class="localized"></article>
diff --git a/files/fr/web/api/node/prefix/index.html b/files/fr/web/api/node/prefix/index.html
new file mode 100644
index 0000000000..2ab6f61b73
--- /dev/null
+++ b/files/fr/web/api/node/prefix/index.html
@@ -0,0 +1,80 @@
+---
+title: element.prefix
+slug: Web/API/Node/prefix
+tags:
+  - API
+  - DOM
+  - Noeuds
+  - Propriétés
+  - Préfixe
+translation_of: Web/API/Node/prefix
+---
+<p>{{APIRef("DOM")}}{{obsolete_header}}</p>
+
+<p>La propriété en lecture seule  <code><strong>Node.prefix</strong></code> renvoie le préfixe de l'espace de noms pour le nœud spécifié ou <code>null</code> si aucun préfixe n'est spécifié.</p>
+
+<div class="warning">
+<p>Dans DOM4, cet API a été déplacé de <code>Node</code> vers les interfaces {{domxref("Element")}} et {{domxref("Attr")}}.</p>
+</div>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>string</var> = <var>node</var>.prefix
+</pre>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<p>Le code suivant affichera « x » sur la console.</p>
+
+<pre class="brush:xml line-numbers  language-xml"><code class="language-xml"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span><span class="namespace token">x:</span>div</span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>console.log(this.prefix)<span class="punctuation token">"</span></span><span class="punctuation token">/&gt;</span></span></code></pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Ceci fonctionnera uniquement lorsqu'un analyseur gérant les espaces de noms est utilisé, c'est-à-dire lorsque le document est servi avec un type mime XML. Cela ne fonctionnera pas pour les documents HTML.</p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h2>
+
+<article class="approved">
+<div class="boxed translate-rendered text-content">
+<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("DOM3 Core", "core.html#ID-NodeNSPrefix", "Node.prefix")}}</td>
+   <td>{{Spec2("DOM3 Core")}}</td>
+   <td>Spécifie le comportement quand elle est définie à <code>null</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Core", "core.html#ID-NodeNSPrefix", "Initial definition")}}</td>
+   <td>{{Spec2("DOM2 Core")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+
+
+<p>{{Compat("api.Node.prefix")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Node.localName")}}</li>
+ <li>{{domxref("Node.namespaceURI")}}</li>
+ <li>{{domxref("Element.prefix")}}</li>
+ <li>{{domxref("Attr.prefix")}}</li>
+</ul>
+</div>
+</article>
+
+<p> </p>
diff --git a/files/fr/web/api/node/previoussibling/index.html b/files/fr/web/api/node/previoussibling/index.html
new file mode 100644
index 0000000000..2f9f178b1f
--- /dev/null
+++ b/files/fr/web/api/node/previoussibling/index.html
@@ -0,0 +1,56 @@
+---
+title: element.previousSibling
+slug: Web/API/Node/previousSibling
+tags:
+  - API
+  - DOM
+  - Noeuds
+  - Propriétés
+translation_of: Web/API/Node/previousSibling
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La propriété en lecture seule  <code><strong>Node.previousSibling</strong></code> renvoie le nœud (<code>node</code>) précédant immédiatement le nœud courant dans la liste {{domxref("Node.childNodes", "childNodes")}} de son parent, ou <code>null</code> s'il s'agit du premier nœud de la liste.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>previousNode</var> = <em>node</em>.previousSibling;
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush:js line-numbers  language-js"><code class="language-js"><span class="comment token">// &lt;a&gt;&lt;b1 id="b1"/&gt;&lt;b2 id="b2"/&gt;&lt;/a&gt;</span>
+
+<span class="function token">alert</span><span class="punctuation token">(</span>document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"b1"</span><span class="punctuation token">)</span><span class="punctuation token">.</span>previousSibling<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// null</span>
+<span class="function token">alert</span><span class="punctuation token">(</span>document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"b2"</span><span class="punctuation token">)</span><span class="punctuation token">.</span>previousSibling<span class="punctuation token">.</span>id<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// "b1"</span></code></pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p></p><p>Les navigateurs basés sur Gecko insèrent des nœuds texte dans un document pour représenter des espaces
+    vides dans le balisage source. Par conséquent, un nœud obtenu par exemple via <a href="/fr/docs/Web/API/Node/firstChild" title="La propriété en lecture seule Node.firstChild renvoie le premier nœud enfant de l'arbre ou null s'il n'en a pas. Si le noeud est un Document , il renvoie le premier noeud de la liste de ses enfants directs."><code>Node.firstChild</code></a> ou
+    <a href="/fr/docs/Web/API/Node/previousSibling" title='{{APIRef("DOM")}}'><code>Node.previousSibling</code></a> peut faire référence à un nœud texte contenant des espaces plutôt qu'au véritable élément
+    que l'auteur comptait obtenir.</p>
+
+    <p>Consultez <a href="/fr/docs/Gestion_des_espaces_dans_le_DOM">Gestion des espaces dans le DOM</a>
+    et <a class="external" href="http://www.w3.org/DOM/faq.html#emptytext" rel="noopener"><i>Why are some Text nodes empty?</i>
+    dans la FAQ DOM 3 du W3C</a> pour plus d'informations.</p><p></p>
+
+<p>L'opération inverse <code><a href="https://developer.mozilla.org/fr/docs/Web/API/Node/nextSibling">Node.nextSibling</a></code> permet de rechercher l'élément suivant.</p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-previousSibling">DOM Level 1 Core: previousSibling</a> <small>— <a class="external" href="http://xmlfr.org/w3c/TR/REC-DOM-Level-1/level-one-core.html#attribute-previousSibling">traduction</a> (non normative)</small></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-640FB3C8">DOM Level 2 Core: previousSibling</a> <small>— <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-640FB3C8">traduction</a> (non normative)</small></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-640FB3C8">DOM Level 3 Core: previousSibling</a></li>
+</ul>
+
+<h2 class="noinclude" id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Node.previousSibling")}}</p>
+
+<h2 class="noinclude" id="Voir_aussi">Voir aussi</h2>
+
+<p>{{domxref("Node.nextSibling")}}</p>
diff --git a/files/fr/web/api/node/removechild/index.html b/files/fr/web/api/node/removechild/index.html
new file mode 100644
index 0000000000..cff831cdef
--- /dev/null
+++ b/files/fr/web/api/node/removechild/index.html
@@ -0,0 +1,112 @@
+---
+title: element.removeChild
+slug: Web/API/Node/removeChild
+tags:
+  - API
+  - DOM
+  - Enfant
+  - Méthodes
+  - Noeuds
+  - Suppression
+translation_of: Web/API/Node/removeChild
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p>La méthode <code><strong>Node.removeChild()</strong></code> retire un nœud enfant de l'arbre DOM et retourne le nœud retiré.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>var oldChild</em> = <em>node</em>.removeChild(<em>child</em>);
+<strong>OR</strong>
+<em>node</em>.removeChild(<em>child</em>);
+</pre>
+
+<ul>
+ <li><code>child</code> est le nœud enfant à retirer du DOM.</li>
+ <li><code><font face="Consolas, Liberation Mono, Courier, monospace">node </font></code>est le nœud parent de <code>child</code>.</li>
+ <li><code>oldchild</code> conserve une référence au nœud enfant retiré. <code>oldchild</code> === <code>child</code>.</li>
+</ul>
+
+<p>Le nœud enfant retiré existe toujours en mémoire, mais ne fait plus partie du DOM. Avec la première syntaxe, il est possible de réutiliser ultérieurement dans le code le nœud retiré, à l'aide de la référence à l'objet <code>ancienEnfant</code><em>. </em></p>
+
+<p>Avec la seconde forme montrée en exemple, aucune référence à l'objet <code>ancienEnfant</code> n'est conservée ; ainsi, en supposant que votre code n'a conservé nulle part ailleurs cette référence à ce nœud, il devient immédiatement inutilisable et irrécupérable, et sera en général <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Gestion_de_la_m%C3%A9moire">automatiquement supprimé</a> de la mémoire après un court moment.</p>
+
+<p>Si  <code>child</code> n'est pas un enfant du noeud  <code>element</code>, la méthode provoque une exception. Une exception sera aussi lancée dans la cas où le nœud <code>enfant </code>est bien un enfant du nœud <code>element </code>au moment de l'appel à la méthode, mais qu'il a été retiré par un gestionnaire d'événement invoqué dans la cadre d'une tentative de suppression du nœud <code>element </code>(comme <em>blur</em>).</p>
+
+<p>La méthode peut lever une exception de deux façons :</p>
+
+<ol>
+ <li>Si <code>enfant</code> était bien un enfant de <font face="Consolas, Liberation Mono, Courier, monospace">element </font>et qu'il existe donc dans le DOM, mais qu'il a déjà été retiré, la méthode provoque l'exception suivante :<code>​​</code><br>
+  <code>Uncaught NotFoundError: Failed to execute 'removeChild' on 'element': The node to be removed is not a child of this node</code>.</li>
+ <li>si l'<code>enfant</code> n'existe pas dans le DOM de la page, la méthode provoque l'exception suivante :<br>
+  <code>Uncaught TypeError: Failed to execute 'removeChild' on 'element': parameter 1 is not of type 'Node'.</code></li>
+</ol>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="comment token">&lt;!--Sample HTML code--&gt;</span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>top<span class="punctuation token">"</span></span> <span class="attr-name token">align</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>center<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span> <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/javascript<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
+      <span class="keyword token">var</span> top <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"top"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="keyword token">var</span> nested <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"nested"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+      <span class="keyword token">var</span> garbage <span class="operator token">=</span> top<span class="punctuation token">.</span><span class="function token">removeChild</span><span class="punctuation token">(</span>nested<span class="punctuation token">)</span><span class="punctuation token">;</span>    <span class="comment token">//Cas test 2: la méthode lance l'exception (2)</span>
+
+</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
+
+<span class="comment token">&lt;!--Sample HTML code--&gt;</span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>top<span class="punctuation token">"</span></span> <span class="attr-name token">align</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>center<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+ <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>nested<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/javascript<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
+      <span class="keyword token">var</span> top <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"top"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="keyword token">var</span> nested <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"nested"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+      <span class="keyword token">var</span> garbage <span class="operator token">=</span> top<span class="punctuation token">.</span><span class="function token">removeChild</span><span class="punctuation token">(</span>nested<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Ce premier appel supprime correctement le noeud</span>
+
+      <span class="comment token">// ......</span>
+      garbage <span class="operator token">=</span> top<span class="punctuation token">.</span><span class="function token">removeChild</span><span class="punctuation token">(</span>nested<span class="punctuation token">)</span><span class="punctuation token">;</span>   <span class="comment token">// Cas test 1 : la méthode dans le second appel ici, lance l'exception (1)</span>
+
+</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="comment token">&lt;!--Sample HTML code--&gt;</span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>top<span class="punctuation token">"</span></span> <span class="attr-name token">align</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>center<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>nested<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<pre class="brush:js line-numbers  language-js"><code class="language-js"><span class="comment token">// Supprime un élément spécifié quand son noeud parent est connu</span>
+<span class="keyword token">var</span> d <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"top"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> d_nested <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"nested"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> throwawayNode <span class="operator token">=</span> d<span class="punctuation token">.</span><span class="function token">removeChild</span><span class="punctuation token">(</span>d_nested<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="comment token">// Supprime un élément spécifié sans avoir à spécifier son noeud parent</span>
+<span class="keyword token">var</span> node <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"nested"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">if</span> <span class="punctuation token">(</span>node<span class="punctuation token">.</span>parentNode<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  node<span class="punctuation token">.</span>parentNode<span class="punctuation token">.</span><span class="function token">removeChild</span><span class="punctuation token">(</span>node<span class="punctuation token">)</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="comment token">// Supprime tous les enfant d'un élément</span>
+<span class="keyword token">var</span> element <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"top"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">while</span> <span class="punctuation token">(</span>element<span class="punctuation token">.</span>firstChild<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  element<span class="punctuation token">.</span><span class="function token">removeChild</span><span class="punctuation token">(</span>element<span class="punctuation token">.</span>firstChild<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-removeChild">DOM Level 1 Core: removeChild</a> — <a class="external" href="http://xmlfr.org/w3c/TR/REC-DOM-Level-1/level-one-core.html#method-removeChild">traduction en français</a> (non normative)</li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1734834066">DOM Level 2 Core: removeChild</a> — <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2/core/core.html#ID-1734834066">traduction en français</a> (non normative)</li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1734834066">DOM Level 3 Core: removeChild</a></li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Node.replaceChild")}}</li>
+ <li>{{domxref("Node.parentNode")}}</li>
+ <li>{{domxref("ChildNode.remove")}}</li>
+</ul>
diff --git a/files/fr/web/api/node/replacechild/index.html b/files/fr/web/api/node/replacechild/index.html
new file mode 100644
index 0000000000..2233bbd419
--- /dev/null
+++ b/files/fr/web/api/node/replacechild/index.html
@@ -0,0 +1,133 @@
+---
+title: element.replaceChild
+slug: Web/API/Node/replaceChild
+tags:
+  - API
+  - DOM
+  - Enfant
+  - Méthodes
+  - Noeuds
+  - Remplacement
+translation_of: Web/API/Node/replaceChild
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La méthode <strong><code>Node.replaceChild()</code></strong> remplace un nœud enfant du noeud spécifié par un autre nœud.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>replacedNode</em> = <em>parentNode</em>.replaceChild(<em>newChild</em>, <em>oldChild</em>);
+</pre>
+
+<ul>
+ <li><code>newChild</code> est le nouveau nœud qui remplacera <code>oldChild</code>. S'il existe déjà dans le DOM, il sera d'abord enlevé.</li>
+ <li><code>oldChild</code> est le nœud existant à remplacer.</li>
+ <li><code>replaceNode</code> est le nœud remplacé. C'est le même nœud que <code>oldChild</code>.</li>
+</ul>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre class="brush:js line-numbers  language-js"><code class="language-js"><span class="comment token">// &lt;div&gt;</span>
+<span class="comment token">//  &lt;span id="childSpan"&gt;foo bar&lt;/span&gt;</span>
+<span class="comment token">// &lt;/div&gt;</span>
+
+<span class="comment token">// crée un noeud élément vide</span>
+<span class="comment token">// sans ID, aucun attribut ni contenu</span>
+<span class="keyword token">var</span> sp1 <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"span"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// lui donne un attribut id appelé 'newSpan'</span>
+sp1<span class="punctuation token">.</span>id <span class="operator token">=</span> <span class="string token">"newSpan"</span><span class="punctuation token">;</span>
+
+<span class="comment token">// crée un contenu pour le nouvel élément.</span>
+<span class="keyword token">var</span> sp1_content <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createTextNode</span><span class="punctuation token">(</span><span class="string token">"new replacement span element."</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// applique ce contenu au nouvel élément</span>
+sp1<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>sp1_content<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// construit une référence au noeud existant devant être remplacé</span>
+<span class="keyword token">var</span> sp2 <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"childSpan"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> parentDiv <span class="operator token">=</span> sp2<span class="punctuation token">.</span>parentNode<span class="punctuation token">;</span>
+
+<span class="comment token">// remplace le noeud existant sp2 avec le nouvel élément span sp1</span>
+parentDiv<span class="punctuation token">.</span><span class="function token">replaceChild</span><span class="punctuation token">(</span>sp1<span class="punctuation token">,</span> sp2<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// résultat :</span>
+<span class="comment token">// &lt;div&gt;</span>
+<span class="comment token">//   &lt;span id="newSpan"&gt;nouvel élément span de remplacement.&lt;/span&gt;</span>
+<span class="comment token">// &lt;/div&gt;</span></code></pre>
+
+<div> </div>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-replaceChild">DOM Level 1 Core: replaceChild</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-785887307">DOM Level 2 Core : replaceChild</a> — <small><a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-785887307">traduction en français</a> (non normative)</small></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-785887307">DOM Level 3 Core: replaceChild</a></li>
+</ul>
+
+<p> </p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Edge</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(1.0)}}</td>
+   <td>{{CompatGeckoDesktop(1)}}</td>
+   <td>    IE6 (Maybe Earlier)</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatOpera(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Edge Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1)}}</td>
+   <td>IE6 (Maybe Earlier)</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatOperaMobile(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatChrome(1.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Node.removeChild")}}</li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/web/api/node/rootnode/index.html b/files/fr/web/api/node/rootnode/index.html
new file mode 100644
index 0000000000..df91e2aa76
--- /dev/null
+++ b/files/fr/web/api/node/rootnode/index.html
@@ -0,0 +1,70 @@
+---
+title: Node.rootNode
+slug: Web/API/Node/rootNode
+tags:
+  - API
+  - Arborescence
+  - DOM
+  - Noeuds
+  - Propriétés
+  - Racine
+translation_of: Web/API/Node/getRootNode
+---
+<p>{{deprecated_header}}{{APIRef("DOM")}}{{SeeCompatTable}}</p>
+
+<p>La propriété en lecture seule <code><strong>Node.rootNode</strong></code> renvoie un objet {{domxref("Node")}} représentant le noeud du plus haut niveau de l'arbre, ou le noeud actuel s'il est le noeud du plus haut niveau de l'arbre. Il est trouvé par rétro-navigation à travers les noeuds parents {{domxref("Node.parentNode")}} jusqu'à l'arrivée au sommet.</p>
+
+<div class="warning">
+<p><strong>Important </strong>: Pour des raisons de compatibilité, cette propriété a été remplacée par la méthode {{domxref("Node.getRootNode()")}}.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre><var>rootNode</var> = <em>node</em>.rootNode;
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un objet {{domxref("Node")}} représentant le noeud du plus haut niveau de l'arbre.</p>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<p>L'exécution de la ligne suivante dans les navigateurs de support doit renvoyer une référence au noeud HTML / document :</p>
+
+<pre class="brush: js">console.log(document.body.rootNode);</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p></p><p>Les navigateurs basés sur Gecko insèrent des nœuds texte dans un document pour représenter des espaces
+    vides dans le balisage source. Par conséquent, un nœud obtenu par exemple via <a href="/fr/docs/Web/API/Node/firstChild" title="La propriété en lecture seule Node.firstChild renvoie le premier nœud enfant de l'arbre ou null s'il n'en a pas. Si le noeud est un Document , il renvoie le premier noeud de la liste de ses enfants directs."><code>Node.firstChild</code></a> ou
+    <a href="/fr/docs/Web/API/Node/previousSibling" title='{{APIRef("DOM")}}'><code>Node.previousSibling</code></a> peut faire référence à un nœud texte contenant des espaces plutôt qu'au véritable élément
+    que l'auteur comptait obtenir.</p>
+
+    <p>Consultez <a href="/fr/docs/Gestion_des_espaces_dans_le_DOM">Gestion des espaces dans le DOM</a>
+    et <a class="external" href="http://www.w3.org/DOM/faq.html#emptytext" rel="noopener"><i>Why are some Text nodes empty?</i>
+    dans la FAQ DOM 3 du W3C</a> pour plus d'informations.</p><p></p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Node.rootNode")}}</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">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-node-rootnode', 'Node.rootNode')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/api/node/setuserdata/index.html b/files/fr/web/api/node/setuserdata/index.html
new file mode 100644
index 0000000000..1d4a18cce0
--- /dev/null
+++ b/files/fr/web/api/node/setuserdata/index.html
@@ -0,0 +1,127 @@
+---
+title: Node.setUserData()
+slug: Web/API/Node/setUserData
+tags:
+  - API
+  - DOM
+  - Données utilisateur
+  - Méthodes
+  - Noeuds
+translation_of: Web/API/Node/setUserData
+---
+<div>{{APIRef("DOM")}}{{obsolete_header}}</div>
+
+<p>La méthode <code><strong>Node.setUserData()</strong></code> permet à un utilisateur de joindre (ou supprimer) des données à un élément, sans avoir besoin de modifier le DOM. Notez que ces données ne seront pas conservées lors de l'importation via {{domxref("Node.importNode")}}, comme avec les opérations {{domxref("Node.cloneNode()")}} et {{domxref("Node.renameNode()")}} (bien que {{domxref("Node.adoptNode")}} conserve l'information), et les tests d'égalité dans {{domxref("Node.isEqualNode()")}} ne prennent pas en compte les données de l'utilisateur lors de l'évaluation.</p>
+
+<p>Cette méthode offre l'avantage d'associer des données à des noeuds spécifiques sans nécessiter de modification de la structure du document et de façon standard, mais cela signifie aussi que des étapes supplémentaires peuvent être nécessaires si l'on souhaite sérialiser l'information ou l'inclure sur un clone, importer ou renommer des opérations.</p>
+
+<div class="note">
+<p>Les méthodes <code>Node.getUserData</code> et {{domxref("Node.setUserData")}} ne sont plus disponibles depuis le contenu Web. {{domxref("HTMLElement.dataset")}} ou <a href="/en-US/docs/JavaScript/Reference/Global_Objects/WeakMap"><code>WeakMap</code></a> peuvent être utilisées à la place.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>var prevUserData</var> = <var>someNode</var>.setUserData(<var>userKey</var>, <var>userData</var>, <var>handler</var>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<ul>
+ <li><code>userKey</code> est utilisé comme une clé  par laquelle on peut ensuite obtenir les données stockées. Plus d'une clé peuvent être définies pour un nœud donné.</li>
+ <li><code>handler</code> est un rappel qui sera appelé à chaque fois que le noeud est cloné, importé, renommé, supprimé ou adopté ; une fonction peut être utilisée ou un objet mettant en œuvre la méthode <code>handle</code> (partie de l'interface {{domxref("UserDataHandler")}}). Le gestionnaire recevra 5 arguments : un entier (<em>integer</em>) représentant le type d'opération (tel que 1 pour indiquer une opération de clonage), la clé utilisateur, les données sur le noeud, le noeud source (<code>null</code> s'il a été supprimé), le noeud de destination (le nouveau noeud créé ou <code>null</code> si aucun). Si aucun gestionnaire n'est souhaité, il faut spécifier <code>null</code>.</li>
+ <li><code>userData</code> est l'objet à associer à <code>userKey</code> sur someNode. Si <code>null</code>, tout objet précédemment enregistré et l'UserDataHandler associé à <code>userKey</code> sur ce noeud seront supprimés.</li>
+</ul>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">var d = document.implementation.createDocument('', 'test', null);
+d.documentElement.setUserData('key', 15, {handle:function (o, k, d, s, ds) {console.log(o+'::'+k+'::'+d+'::'+s+'::'+ds)}}); // 2::key::15::[object Element]::[object Element]
+console.log(d.documentElement.getUserData('key')); // 15
+var e = document.importNode(d.documentElement, true); // provoque l'appel du gestionnaire
+console.log(e.getUserData('key')); // null puisque les données utilisateur ne sont pas copiées.
+</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('DOM WHATWG', '#interface-node', 'Node')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Supprimé de la  spécification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#Node3-setUserData', 'Node.setUserData()')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}<br>
+    {{CompatNo}} {{CompatGeckoDesktop("22.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}<br>
+    {{CompatNo}} {{CompatGeckoMobile("22.0")}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] La méthode reste disponible dans les scripts chrome.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Node.getUserData()")}}</li>
+ <li>{{domxref("UserDataHandler")}}</li>
+ <li>{{domxref("DOMUserData")}}</li>
+</ul>
diff --git a/files/fr/web/api/node/textcontent/index.html b/files/fr/web/api/node/textcontent/index.html
new file mode 100644
index 0000000000..aa5b90cf7a
--- /dev/null
+++ b/files/fr/web/api/node/textcontent/index.html
@@ -0,0 +1,125 @@
+---
+title: element.textContent
+slug: Web/API/Node/textContent
+tags:
+  - API
+  - DOM
+  - Noeuds
+  - Propriétés
+translation_of: Web/API/Node/textContent
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La propriété <code><strong>Node.textContent</strong></code>  représente le contenu textuel d'un nœud et de ses descendants.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>text</em> = element.textContent;
+element.textContent = "ceci est un simple exemple de texte";
+</pre>
+
+<h2 id="Notes" name="Notes">Description</h2>
+
+<ul>
+ <li><code>textContent</code> renvoie <code>null</code> si l'élément est un <a href="https://developer.mozilla.org/fr/docs/Web/API/document">document</a>, un type de document (doctype) ou une notation. Pour saisir toutes les données textuelles et CDATA pour l'ensemble du document, on peut utiliser <code> <a href="https://developer.mozilla.org/fr/docs/Web/API/document/documentElement">document.documentElement</a>.textContent</code> .</li>
+ <li>Si le nœud est une section CDATA, un commentaire, une instruction de traitement ou un nœud texte, <code>textContent</code> renvoie le texte à l'intérieur du nœud (la valeur <a href="https://developer.mozilla.org/fr/docs/Web/API/Node/nodeValue">nodeValue</a>).</li>
+ <li>Pour les autres types de nœuds, <code>textContent</code> renvoie la concaténation des valeurs de propriété <code>textContent</code> de chaque nœud enfant, à l'exception des commentaires et nœuds d'instructions de traitement. Si le nœud n'a pas d'enfants, il s'agira d'une chaîne vide.</li>
+ <li>En définissant cette propriété sur un nœud, on enlève tous ses enfants et ceux-ci sont remplacés par un seul nœud texte avec la valeur donnée.</li>
+</ul>
+
+<h3 id="Différences_avec_innerText">Différences avec <code>innerText</code></h3>
+
+<p>Internet Explorer a introduit une propriété {{domxref("node.innerText")}}. L'intention est similaire mais comporte les différences suivantes :</p>
+
+<ul>
+ <li><code>textContent</code> récupère le contenu de tous les éléments, y compris {{HTMLElement("script")}} et {{HTMLElement("style")}}, ce qui n'est pas le cas de <code>innerText</code>.</li>
+ <li><code>innerText</code> prend en compte le style de l'élément et ne retournera rien pour les éléments cachés. Aussi, il déclenchera un reflow à l'inverse de <code>textContent</code>.</li>
+ <li>Comme <code>innerText</code> reconnaît le style CSS, il déclenchera une refusion (<em>reflow</em>), alors que <code>textContent</code> ne le fera pas.</li>
+ <li>Contrairement à <code>textContent</code>, la modification <code>innerText</code> dans Internet Explorer (jusqu'à la version 11 incluse), non seulement supprime les nœuds enfants de l'élément, mais détruit aussi définitivement tout nœud de texte descendant (il est donc impossible d'insérer à nouveau des nœuds dans un autre élément ou dans le même élément) .</li>
+</ul>
+
+<h3 id="Différences_avec_innerHTML">Différences avec <code>innerHTML</code></h3>
+
+<p>{{domxref("Element.innerHTML")}} renvoie le HTML comme son nom l'indique. Souvent, pour récupérer ou écrire du texte dans un élément, les utilisateurs utilisent <code>innerHTML</code>. Cependant, <code>textContent</code> a souvent de meilleures performances car le texte n'est pas analysé en HTML. De plus, l'utilisation de <code>textContent</code> peut empêcher les attaques XSS.</p>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre class="eval">// Étant donné le fragment de HTML suivant :
+//   &lt;div id="divA"&gt;Ceci est un &lt;span&gt;exemple de&lt;/span&gt; texte&lt;/div&gt;
+
+// On obtient le contenu textuel :
+var text = document.getElementById("divA").textContent;
+// |text| vaut "Ceci est un exemple de texte".
+
+// On définit le contenu textuel :
+document.getElementById("divA").textContent = "Ceci est un exemple de texte";
+// Le HTML pour divA est à présent &lt;div id="divA"&gt;Ceci est un exemple de texte&lt;/div&gt;
+</pre>
+
+<h2 id="Polyfill_pour_IE8">Polyfill pour IE8</h2>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="comment token">// Source: Eli Grey @ http://eligrey.com/blog/post/textcontent-in-ie8</span>
+<span class="keyword token">if</span> <span class="punctuation token">(</span>Object<span class="punctuation token">.</span>defineProperty
+  <span class="operator token">&amp;&amp;</span> Object<span class="punctuation token">.</span>getOwnPropertyDescriptor
+  <span class="operator token">&amp;&amp;</span> Object<span class="punctuation token">.</span><span class="function token">getOwnPropertyDescriptor</span><span class="punctuation token">(</span>Element<span class="punctuation token">.</span>prototype<span class="punctuation token">,</span> <span class="string token">"textContent"</span><span class="punctuation token">)</span>
+  <span class="operator token">&amp;&amp;</span> <span class="operator token">!</span>Object<span class="punctuation token">.</span><span class="function token">getOwnPropertyDescriptor</span><span class="punctuation token">(</span>Element<span class="punctuation token">.</span>prototype<span class="punctuation token">,</span> <span class="string token">"textContent"</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="keyword token">get</span><span class="punctuation token">)</span> <span class="punctuation token">{</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="keyword token">var</span> innerText <span class="operator token">=</span> Object<span class="punctuation token">.</span><span class="function token">getOwnPropertyDescriptor</span><span class="punctuation token">(</span>Element<span class="punctuation token">.</span>prototype<span class="punctuation token">,</span> <span class="string token">"innerText"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    Object<span class="punctuation token">.</span><span class="function token">defineProperty</span><span class="punctuation token">(</span>Element<span class="punctuation token">.</span>prototype<span class="punctuation token">,</span> <span class="string token">"textContent"</span><span class="punctuation token">,</span>
+     <span class="comment token">// Passing innerText or innerText.get directly does not work,</span>
+     <span class="comment token">// wrapper function is required.</span>
+     <span class="punctuation token">{</span>
+       <span class="keyword token">get</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="keyword token">return</span> innerText<span class="punctuation token">.</span><span class="keyword token">get</span><span class="punctuation token">.</span><span class="function token">call</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+       <span class="punctuation token">}</span><span class="punctuation token">,</span>
+       <span class="keyword token">set</span><span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span>s<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+         <span class="keyword token">return</span> innerText<span class="punctuation token">.</span><span class="keyword token">set</span><span class="punctuation token">.</span><span class="function token">call</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">,</span> s<span class="punctuation token">)</span><span class="punctuation token">;</span>
+       <span class="punctuation token">}</span>
+     <span class="punctuation token">}</span>
+   <span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<ul>
+</ul>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Node.textContent")}}</p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#dom-node-textcontent','Node.textContent')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Pas de changement de DOM4</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM4','#dom-node-textcontent','Node.textContent')}}</td>
+   <td>{{Spec2('DOM4')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core','core.html#Node3-textContent','Node.textContent')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="http://perfectionkills.com/the-poor-misunderstood-innerText/">Plus sur les différences entre <code>innerText</code> et <code>textContent</code></a> (blog post en)</li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/web/api/nodefilter/acceptnode/index.html b/files/fr/web/api/nodefilter/acceptnode/index.html
new file mode 100644
index 0000000000..a10a9b5657
--- /dev/null
+++ b/files/fr/web/api/nodefilter/acceptnode/index.html
@@ -0,0 +1,120 @@
+---
+title: NodeFilter.acceptNode()
+slug: Web/API/NodeFilter/acceptNode
+tags:
+  - API
+  - DOM
+  - Filtre
+  - Méthodes
+  - NodeFilter
+  - Noeuds
+translation_of: Web/API/NodeFilter/acceptNode
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La méthode <strong><code>NodeFilter.acceptNode()</code></strong> renvoie un <code>unsigned short</code> (<em>non signé court</em>) qui sera utilisé pour dire si un {{domxref("Node")}} donné peut être accepté ou non par l'algorithme d'itération {{ domxref("NodeIterator") }} ou {{ domxref("TreeWalker") }}. Cette méthode doit être écrite par l'utilisateur du <code>NodeFilter</code>. Les valeurs retournées possibles sont :</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Constante</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>NodeFilter.FILTER_ACCEPT</code></td>
+   <td>Valeur renvoyée par la méthode {{ domxref("NodeFilter.acceptNode()") }} quand un noeud doit être accepté .</td>
+  </tr>
+  <tr>
+   <td><code>NodeFilter.FILTER_REJECT</code></td>
+   <td>Valeur à retourner par la méthode {{ domxref("NodeFilter.acceptNode()") }} quand le noeud doit être rejeté. Les enfants des noeuds rejetés ne sont pas visités par les objets {{ domxref("NodeIterator") }} ou {{ domxref("TreeWalker") }} ; cette valeur est traitée comme "ignorer ce noeud et tous ses enfants".</td>
+  </tr>
+  <tr>
+   <td><code>NodeFilter.FILTER_SKIP</code></td>
+   <td>Valeur à retourner par {{ domxref("NodeFilter.acceptNode()") }} pour que les noeuds soient ignorés par les objets {{ domxref("NodeIterator") }} ou {{ domxref("TreeWalker") }}. Les enfants des noeuds ignorés sont toujours considérés. Cela équivaut à "ignorer ce noeud mais pas ses enfants".</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>La fonction doit renvoyer <code>NodeFilter.FILTER_ACCEPT</code> qui pousse le TreeWalker à renvoyer le noeud, <code>NodeFilter.FILTER_REJECT</code> qui contraint le TreeWalker à ignorer le sous-arbre entier ou <code>NodeFilter.FILTER_SKIP</code>.</p>
+
+<p><span id="result_box" lang="fr"><span>Le navigateur ne fournit aucun objet implémentant cette méthode.</span></span> C'est l'utilisateur qui doit écrire un objet implémentant l'interface {{domxref("NodeFilter")}}, adapter la méthode <code>acceptNode()</code> à ses besoins et l'utiliser avec un objet {{domxref("TreeWalker")}} ou {{domxref("NodeIterator")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>result<code> = </code></em><em>nodeFilter<code>.acceptNode(</code></em><em>node</em>)
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><em>node</em></dt>
+ <dd>est un {{domxref("Node")}} (noeud) qui doit être vérifié avec le filtre.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">var nodeIterator = document.createNodeIterator(
+  // Noeud à utiliser comme racine
+  document.getElementById('someId'),
+
+  // Considérer uniquement les nœuds qui sont des nœuds de texte (nodeType 3)
+  NodeFilter.SHOW_TEXT,
+
+  // Objet contenant la fonction à utiliser pour la méthode acceptNode du NodeFilter
+    { acceptNode: function(node) {
+      // Logique pour déterminer si accepter, rejeter ou ignorer le noeud
+      // dans ce cas, n'accepte que les noeuds ayant du contenu
+      // autres que les espaces
+      if ( ! /^\s*$/.test(node.data) ) {
+        return NodeFilter.FILTER_ACCEPT;
+      }
+    }
+  },
+  false
+);
+
+// Affiche le contenu de tous les noeuds texte non vides qui sont enfants de la racine
+var node;
+
+while ((node = iterator.nextNode())) {
+  alert(node.data);
+}
+</pre>
+
+<h2 id="Specification" name="Specification">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('DOM WHATWG', '#nodeFilter', 'NodeFilter.acceptNode()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Pas de changement depuis {{SpecName('DOM2 Traversal_Range')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-NodeFilter', 'NodeFilter.acceptNode()')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.NodeFilter.acceptNode")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface à laquelle elle appartient : {{domxref("NodeFilter")}}.</li>
+</ul>
+
+<dl>
+ <dt> </dt>
+</dl>
diff --git a/files/fr/web/api/nodefilter/index.html b/files/fr/web/api/nodefilter/index.html
new file mode 100644
index 0000000000..7850b44bf7
--- /dev/null
+++ b/files/fr/web/api/nodefilter/index.html
@@ -0,0 +1,119 @@
+---
+title: NodeFilter
+slug: Web/API/NodeFilter
+tags:
+  - API
+  - Arborescence
+  - DOM
+  - Filtres
+  - Interface
+  - Itérateurs
+  - Noeuds
+translation_of: Web/API/NodeFilter
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Une interface <strong><code>NodeFilter</code></strong> représente un objet utilisé pour filtrer les noeuds dans un {{ domxref("NodeIterator") }} ou {{ domxref("TreeWalker") }}. Ils ne savent rien du DOM ni comment traverser les nœuds ; ils savent juste comment évaluer un seul noeud par rapport au filtre fourni.</p>
+
+<div class="note">
+<p>Le navigateur ne fournit aucun objet implémentant cette interface. C'est l'utilisateur qui doit en écrire un, en adaptant la méthode <code>acceptNode()</code> en fonction des besoins et en l'utilisant avec un objet {{domxref("TreeWalker")}} ou {{domxref("NodeIterator")}}.</p>
+</div>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Cette interface n'implémente ni n'hérite d'aucune propriété.</em></p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Cette interface n'hérite d'aucune méthode.</em></p>
+
+<dl>
+ <dt>{{domxref("NodeFilter.acceptNode()")}}</dt>
+ <dd>Renvoie un <code>unsigned short</code> (<em>non signé court</em>) qui sera utilisé pour dire si un {{domxref("Node")}} donné peut être accepté ou non par l'algorithme d'itération {{ domxref("NodeIterator") }} ou {{ domxref("TreeWalker") }}. Cette méthode doit être écrite par l'utilisateur du <code>NodeFilter</code>. Les valeurs retournées possibles sont :
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td class="header">Constante</td>
+    <td class="header">Description</td>
+   </tr>
+   <tr>
+    <td><code>FILTER_ACCEPT</code></td>
+    <td>Valeur renvoyée par la méthode {{ domxref("NodeFilter.acceptNode()") }} quand un noeud doit être accepté.</td>
+   </tr>
+   <tr>
+    <td><code>FILTER_REJECT</code></td>
+    <td>Valeur à retourner par la méthode {{ domxref("NodeFilter.acceptNode()") }} quand le noeud doit être rejeté. Pour {{ domxref("TreeWalker") }}, les noeuds enfants sont aussi rejetés. Pour {{ domxref("NodeIterator") }}, cette option est équivalente à FILTER_SKIP.</td>
+   </tr>
+   <tr>
+    <td><code>FILTER_SKIP</code></td>
+    <td>Valeur à retourner par {{ domxref("NodeFilter.acceptNode()") }} pour que les noeuds soient ignorés par {{ domxref("NodeIterator") }} ou {{ domxref("TreeWalker") }}. Les enfants des noeuds ignorés sont toujours considérés. Cela équivaut à "ignorer ce noeud mais pas ses enfants".</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">var nodeIterator = document.createNodeIterator(
+  // Noeud à utiliser comme racine
+  document.getElementById('someId'),
+
+  // Considérer uniquement les nœuds qui sont des nœuds de texte (nodeType 3)
+  NodeFilter.SHOW_TEXT,
+
+  // Objet contenant la fonction à utiliser pour la méthode acceptNode
+  // du NodeFilter
+    { acceptNode: function(node) {
+      // Logique pour déterminer si accepter, rejeter ou ignorer le noeud
+      // dans ce cas, n'accepte que les nœuds ayant du contenu
+      // autres que les espaces
+      if ( ! /^\s*$/.test(node.data) ) {
+        return NodeFilter.FILTER_ACCEPT;
+      }
+    }
+  },
+  false
+);
+
+// Affiche le contenu de tous les noeuds texte non vides qui sont enfants de la racine
+var node;
+
+while ((node = nodeIterator.nextNode())) {
+  alert(node.data);
+}
+</pre>
+
+<h2 id="Specification" name="Specification">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('DOM WHATWG', '#interface-nodefilter', 'NodeFilter')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-NodeFilter', 'NodeFilter')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.NodeFilter")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Interfaces connexes : {{domxref("TreeWalker")}}, {{domxref("NodeIterator")}}.</li>
+</ul>
diff --git a/files/fr/web/api/nodeiterator/detach/index.html b/files/fr/web/api/nodeiterator/detach/index.html
new file mode 100644
index 0000000000..5330650ab5
--- /dev/null
+++ b/files/fr/web/api/nodeiterator/detach/index.html
@@ -0,0 +1,69 @@
+---
+title: NodeIterator.detach()
+slug: Web/API/NodeIterator/detach
+tags:
+  - API
+  - Arborescence
+  - DOM
+  - Itérateur
+  - Méthodes
+  - Noeuds
+translation_of: Web/API/NodeIterator/detach
+---
+<p>{{APIRef("DOM")}}{{obsolete_header}}</p>
+
+<p>La méthode <strong><code>NodeIterator.detach()</code></strong> est une non opération, conservée seulement pour la rétro-compatibilité.</p>
+
+<p>Initialement, elle détachait {{domxref("NodeIterator")}} de l'ensemble sur lequel il itérait, libérant toutes les ressources utilisées par lui et basculant son état à <code>INVALID</code>. Une fois cette méthode utilisée, l'appel d'autres méthodes sur le <code>NodeIterator</code> déclenchait une exception <code>INVALID_STATE_ERR</code>. </p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>nodeIterator</em>.detach();
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="eval">var nodeIterator = document.createNodeIterator(
+    document.body,
+    NodeFilter.SHOW_ELEMENT,
+    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+    false
+);
+nodeIterator.detach(); // détache l'itérateur
+
+nodeIterator.nextNode(); // lance une exception INVALID_STATE_ERR
+</pre>
+
+<h2 id="Specification" name="Specification">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('DOM WHATWG', '#dom-nodeiterator-detach', 'NodeIterator.detach')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Transformation en non opération</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-NodeIterator-detach', 'NodeIterator.detach')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.NodeIterator.detach")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface à laquelle elle appartient : {{domxref("NodeIterator")}}.</li>
+</ul>
diff --git a/files/fr/web/api/nodeiterator/expandentityreferences/index.html b/files/fr/web/api/nodeiterator/expandentityreferences/index.html
new file mode 100644
index 0000000000..bf1f66e25a
--- /dev/null
+++ b/files/fr/web/api/nodeiterator/expandentityreferences/index.html
@@ -0,0 +1,68 @@
+---
+title: NodeIterator.expandEntityReferences
+slug: Web/API/NodeIterator/expandEntityReferences
+tags:
+  - API
+  - Arborescence
+  - DOM
+  - Itérateur
+  - Noeuds
+  - Propriété
+translation_of: Web/API/NodeIterator/expandEntityReferences
+---
+<p>{{APIRef("DOM")}} {{deprecated_header}}</p>
+
+<p>La propriété en lecture seule <code><strong>NodeIterator.expandEntityReferences</strong></code> renvoie un {{domxref("Boolean")}} (<em>booléen</em>) indiquant si les enfants des noeuds de référence d'entité sont visibles ou non pour le {{domxref("NodeIterator")}}.</p>
+
+<p>Si cette valeur est <code>false</code> (<em>faux</em>), les enfants des nœuds de référence d'entité (ainsi que tous leurs descendants) sont rejetés. Cela a préséance sur la valeur de la méthode  {{domxref("NodeIterator.whatToShow")}} et le filtre associé.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>expand</em> = <em>nodeIterator</em>.expandEntityReferences;
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">var nodeIterator = document.createNodeIterator(
+    document.body,
+    NodeFilter.SHOW_ELEMENT,
+    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+    false
+);
+expand = nodeIterator.expandEntityReferences;</pre>
+
+<h2 id="Specification" name="Specification">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('DOM WHATWG', '#nodeiterator', 'NodeIterator')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Suppression de la spécification</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-NodeIterator-expandEntityReferences', 'NodeIterator.expandEntityReferences')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div id="compat-desktop">
+
+
+<p>{{Compat("api.NodeIterator.expandEntityReferences")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+</div>
+
+<ul>
+ <li>L'interface à laquelle cette propriété appartient : {{domxref("NodeIterator")}}.</li>
+</ul>
diff --git a/files/fr/web/api/nodeiterator/filter/index.html b/files/fr/web/api/nodeiterator/filter/index.html
new file mode 100644
index 0000000000..d33a997c5a
--- /dev/null
+++ b/files/fr/web/api/nodeiterator/filter/index.html
@@ -0,0 +1,66 @@
+---
+title: NodeIterator.filter
+slug: Web/API/NodeIterator/filter
+tags:
+  - API
+  - Arborescence
+  - DOM
+  - Itérateur
+  - Noeuds
+  - Propriétés
+translation_of: Web/API/NodeIterator/filter
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La méthode en lecture seule <strong><code>NodeIterator.filter</code></strong> renvoie un objet {{domxref("NodeFilter")}}, c'est-à-dire un objet implémentant la méthode <code>acceptNode(<em>node</em>)</code>, utilisée pour filtrer les noeuds.</p>
+
+<p>Lors de la création du {{domxref("NodeIterator")}}, l'objet filtre est transmis en 3ème paramètre et l'objet méthode <code>acceptNode(<em>node</em>)</code> est appelé sur chaque noeud pour déterminer s'il doit ou non l'accepter. Cette fonction doit renvoyer la constante <code>NodeFilter.FILTER_ACCEPT</code> quand le noeud doit être accepté et <code>NodeFilter.FILTER_REJECT</code> s'il doit être rejeté.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>nodeFilter</em> = <em>nodeIterator</em>.filter;
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">var nodeIterator = document.createNodeIterator(
+    document.body,
+    NodeFilter.SHOW_ELEMENT,
+    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+    false
+);
+nodeFilter = nodeIterator.filter;</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('DOM WHATWG', '#dom-nodeiterator-filter', 'NodeIterator.filter')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Pas de changement de {{SpecName('DOM2 Traversal_Range')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-NodeIterator-filter', 'NodeIterator.filter')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.NodeIterator.filter")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface à laquelle cette propriété appartient : {{domxref("NodeIterator")}}.</li>
+</ul>
diff --git a/files/fr/web/api/nodeiterator/index.html b/files/fr/web/api/nodeiterator/index.html
new file mode 100644
index 0000000000..eb98f4762d
--- /dev/null
+++ b/files/fr/web/api/nodeiterator/index.html
@@ -0,0 +1,210 @@
+---
+title: NodeIterator
+slug: Web/API/NodeIterator
+tags:
+  - API
+  - DOM
+  - Itérateur
+  - Noeuds
+translation_of: Web/API/NodeIterator
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>L'interface <strong><code>NodeIterator</code></strong> représente un itérateur pour les membres d'une liste des nœuds dans un sous-arbre du DOM. Les nœuds seront renvoyés dans l'ordre du document.</p>
+
+<p>Un <code>NodeIterator</code> peut être créé en utilisant la méthode {{domxref("Document.createNodeIterator()")}}, comme suit :</p>
+
+<pre class="brush: js">var nodeIterator = document.createNodeIterator(<em>root</em>, <em>whatToShow</em>, <em>filter</em>);</pre>
+
+<h2 id="Properties" name="Properties">Propriétés</h2>
+
+<p><em>L'interface n'hérite d'aucune propriété.</em></p>
+
+<dl>
+ <dt>{{domxref("NodeIterator.root")}} {{readonlyInline}}</dt>
+ <dd>Renvoie un {{domxref("Node")}} (<em>noeud</em>) représentant le noeud racine comme spécifié lors de la création du <code>NodeIterator</code>.</dd>
+ <dt>{{domxref("NodeIterator.whatToShow")}} {{readonlyInline}}</dt>
+ <dd>Renvoie un <code>unsigned long</code> (<em>long non signé</em>), celui-ci étant un masque constitué de constantes décrivant les types de {{domxref("Node")}} (<em>noeud</em>) et devant être présenté. Les nœuds non correspondants sont ignorés, mais leurs enfants peuvent être inclus, le cas échéant. Les valeurs possibles sont :
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td class="header">Constante</td>
+    <td class="header">Valeur numérique</td>
+    <td class="header">Description</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_ALL</code></td>
+    <td><code>-1</code> (c'est la valeur numérique maximale du <code>unsigned long</code> (<em>non signé long</em>))</td>
+    <td>Affiche tous les noeuds.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_ATTRIBUTE</code> {{obsolete_inline}}</td>
+    <td><code>2</code></td>
+    <td>Affiche l'attribut {{domxref("Attr")}} des noeuds. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Attr")}} comme racine ; dans ce cas, cela signifie que le nœud d'attribut apparaîtra dans la première position de l'itération ou de la traversée. Comme les attributs ne sont jamais des enfants d'autres nœuds, ils n'apparaissent pas lors de la traversée de l'arbre du document.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_CDATA_SECTION</code> {{obsolete_inline}}</td>
+    <td><code>8</code></td>
+    <td>Affiche les noeuds {{domxref("CDATASection")}}.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_COMMENT</code></td>
+    <td><code>128</code></td>
+    <td>Affiche les noeuds {{domxref("Comment")}}.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_DOCUMENT</code></td>
+    <td><code>256</code></td>
+    <td>Affiche les noeuds {{domxref("Document")}}.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_DOCUMENT_FRAGMENT</code></td>
+    <td><code>1024</code></td>
+    <td>Affiche les noeuds {{domxref("DocumentFragment")}}.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_DOCUMENT_TYPE</code></td>
+    <td><code>512</code></td>
+    <td>Affiche les noeuds {{domxref("DocumentType")}}.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_ELEMENT</code></td>
+    <td><code>1</code></td>
+    <td>Affiche les noeuds {{domxref("Element")}}.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_ENTITY</code> {{obsolete_inline}}</td>
+    <td><code>32</code></td>
+    <td>Affiche les noeuds {{domxref("Entity")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{ domxref("Entity") }} comme racine ; dans ce cas, il signifie que le noeud d'entité {{domxref("Entity") }} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_ENTITY_REFERENCE</code> {{obsolete_inline}}</td>
+    <td><code>16</code></td>
+    <td>Affiche les noeuds {{domxref("EntityReference")}}.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_NOTATION</code> {{obsolete_inline}}</td>
+    <td><code>2048</code></td>
+    <td>Affiche les noeuds {{domxref("Notation")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Notation")}} comme racine ; dans ce cas, il signifie que le noeud {{domxref("Notation")}} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_PROCESSING_INSTRUCTION</code></td>
+    <td><code>64</code></td>
+    <td>Affiche les noeuds {{domxref("ProcessingInstruction")}}.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_TEXT</code></td>
+    <td><code>4</code></td>
+    <td>Affiche les noeuds {{domxref("Text")}}.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt>{{domxref("NodeIterator.filter")}} {{readonlyInline}}</dt>
+ <dd>Renvoie un {{domxref("NodeFilter")}} utilisé pour sélectionner les noeuds pertinents.</dd>
+ <dt>{{domxref("NodeIterator.expandEntityReferences")}} {{readonlyInline}} {{deprecated_inline}}</dt>
+ <dd>est un {{domxref("Boolean")}} (<em>booléen</em>) indiquant si, lors de la suppression d'une {{domxref("EntityReference")}}, tout son sous-arbre doit être supprimé en même temps.</dd>
+ <dt>{{domxref("NodeIterator.referenceNode")}} {{readonlyInline}} {{experimental_inline() }}</dt>
+ <dd>Renvoie le {{domxref("Node")}} (noeud) auquel l'itérateur est ancré.</dd>
+ <dt>{{domxref("NodeIterator.pointerBeforeReferenceNode")}} {{readonlyInline}} {{ experimental_inline() }}</dt>
+ <dd>Renvoie un {{domxref("Boolean")}} (<em>booléen</em>) qui indique si le {{domxref("NodeIterator")}} est ancré avant (<code>true</code> (<em>vrai</em>)) ou après (<code>false</code> (<em>faux</em>)) le noeud d'ancrage.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Méthodes</h2>
+
+<p><em>Cette interface n'hérite d'aucune méthode.</em></p>
+
+<dl>
+ <dt>{{domxref("NodeIterator.detach()")}} {{obsolete_inline()}}</dt>
+ <dd>Cette opération est une non opération. Elle ne fait rien. Auparavant, elle disait au moteur que le <code>NodeIterator</code> n'était plus utilisé, mais c'est maintenant inutile.</dd>
+ <dt>{{domxref("NodeIterator.previousNode()")}}</dt>
+ <dd>Renvoie le noeud {{domxref("Node")}} précédent dans le document ou <code>null</code> s'il n'y en a aucun.</dd>
+ <dt>{{domxref("NodeIterator.nextNode()")}}</dt>
+ <dd>Renvoie le noeud {{domxref("Node")}} suivant dans le  document ou <code>null</code> s'il n'y en a aucun.</dd>
+</dl>
+
+<h2 id="Specification" name="Specification">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('DOM WHATWG', '#nodeiterator', 'NodeIterator')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Ajout des propriétés <code>referenceNode</code> et <code>pointerBeforeReferenceNode</code>.<br>
+    Suppression de la propriété <code>expandEntityReferences</code>.<br>
+    La méthode <code>detach()</code> a été modifiée pour être une non opération.<br>
+    Les méthodes <code>previousNode()</code> et <code>nextNode()</code> ne déclenchent plus d'exceptions.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Iterator-overview', 'NodeIterator')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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.9.1")}}</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>3.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.9.1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9.0</td>
+   <td>3.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La méthode de création : {{domxref("Document.createNodeIterator()")}}.</li>
+ <li>Interfaces connexes : {{domxref("NodeFilter")}}, {{domxref("TreeWalker")}}.</li>
+</ul>
diff --git a/files/fr/web/api/nodeiterator/nextnode/index.html b/files/fr/web/api/nodeiterator/nextnode/index.html
new file mode 100644
index 0000000000..8c9b61982a
--- /dev/null
+++ b/files/fr/web/api/nodeiterator/nextnode/index.html
@@ -0,0 +1,67 @@
+---
+title: NodeIterator.nextNode()
+slug: Web/API/NodeIterator/nextNode
+tags:
+  - API
+  - Arborescence
+  - DOM
+  - Itérateur
+  - Méthodes
+  - Noeuds
+translation_of: Web/API/NodeIterator/nextNode
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La méthode <code><strong>NodeIterator.nextNode()</strong></code> renvoie le noeud suivant dans l'ensemble représenté par le {{domxref("NodeIterator")}} et avance la position de l'itérateur dans cet ensemble.  Le premier appel de <code>nextNode()</code> en renvoie le premier noeud.</p>
+
+<p>Cette méthode retourne <code>null</code> quand il n'y a plus de nœuds dans l'ensemble.</p>
+
+<p>Dans les navigateurs anciens, comme spécifié dans les anciennes version des spécifications, la méthode pouvait déclencher une {{domxref("DOMException")}}   <code>INVALID_STATE_ERR</code> si elle était appelée après la méthode {{domxref("NodeIterator.detach()")}}. Les navigateurs récents ne lancent rien.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>node</em> = <em>nodeIterator</em>.nextNode();
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">var nodeIterator = document.createNodeIterator(
+    document.body,
+    NodeFilter.SHOW_ELEMENT,
+    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+    false // this optional argument is not used any more
+);
+currentNode = nodeIterator.nextNode(); // renvoie le noeud suivant.
+</pre>
+
+<h2 id="Specification" name="Specification">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('DOM WHATWG', '#dom-nodeiterator-nextnode', 'NodeIterator.nextNode')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Comme <code>detach()</code> est maintenant une méthode non opérante, cette méthode ne peut plus rien lancer.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-NodeIterator-nextNode', 'NodeIterator.nextNode')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.NodeIterator.nextNode")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p>L'interface à laquelle elle appartient : {{domxref("NodeIterator")}}.</p>
diff --git a/files/fr/web/api/nodeiterator/pointerbeforereferencenode/index.html b/files/fr/web/api/nodeiterator/pointerbeforereferencenode/index.html
new file mode 100644
index 0000000000..439bfe8df6
--- /dev/null
+++ b/files/fr/web/api/nodeiterator/pointerbeforereferencenode/index.html
@@ -0,0 +1,59 @@
+---
+title: NodeIterator.pointerBeforeReferenceNode
+slug: Web/API/NodeIterator/pointerBeforeReferenceNode
+tags:
+  - API
+  - Arborescence
+  - DOM
+  - Itérateur
+  - Noeuds
+  - Propriétés
+translation_of: Web/API/NodeIterator/pointerBeforeReferenceNode
+---
+<p>{{APIRef("DOM")}} {{SeeCompatTable}}</p>
+
+<p>La propriété en lecture seule <strong><code>NodeIterator.pointerBeforeReferenceNode</code></strong> renvoie un {{domxref("Boolean")}} (booléen) qui indique si le {{domxref("NodeFilter")}} est ancré avant (si la valeur est <code>true</code> (<em>vrai</em>)) ou après (<code>false</code> (<em>faux</em>)) le noeud-ancre indiqué par la propriété {{domxref("NodeIterator.referenceNode")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>flag</em> = <em>nodeIterator</em>.pointerBeforeReferenceNode;
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">var nodeIterator = document.createNodeIterator(
+    document.body,
+    NodeFilter.SHOW_ELEMENT,
+    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+    false
+);
+flag = nodeIterator.pointerBeforeReferenceNode;</pre>
+
+<h2 id="Specification" name="Specification">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('DOM WHATWG', '#dom-nodeiterator-pointerbeforereferencenode', 'NodeIterator.pointerBeforeReferenceNode')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.NodeIterator.pointerBeforeReferenceNode")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface à laquelle elle appartient : {{domxref("NodeIterator")}}</li>
+</ul>
diff --git a/files/fr/web/api/nodeiterator/previousnode/index.html b/files/fr/web/api/nodeiterator/previousnode/index.html
new file mode 100644
index 0000000000..d0bfa021f4
--- /dev/null
+++ b/files/fr/web/api/nodeiterator/previousnode/index.html
@@ -0,0 +1,69 @@
+---
+title: NodeIterator.previousNode()
+slug: Web/API/NodeIterator/previousNode
+tags:
+  - API
+  - Arborescence
+  - DOM
+  - Méthodes
+  - Noeuds
+translation_of: Web/API/NodeIterator/previousNode
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La méthode <code><strong>NodeIterator.previousNode()</strong></code> renvoie le noeud précédent dans l'ensemble représenté par le {{domxref("NodeIterator")}} et déplace la position de l'itérateur vers l'arrière à l'intérieur de cet ensemble.</p>
+
+<p>Cette méthode renvoie <code>null</code> si le noeud courant est le premier noeud dans l'ensemble.</p>
+
+<p>Dans les navigateurs anciens, comme spécifié dans les anciennes version des spécifications, la méthode pouvait déclencher une <code>INVALID_STATE_ERR</code> {{domxref("DOMException")}} si elle était appelée après la méthode {{domxref("NodeIterator.detach()")}}. Les navigateurs récents ne lancent rien.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>node</em> = <em>nodeIterator</em>.previousNode();
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">var nodeIterator = document.createNodeIterator(
+    document.body,
+    NodeFilter.SHOW_ELEMENT,
+    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+    false // cet argument facultatif n'est plus utilisé
+);
+currentNode = nodeIterator.nextNode(); // renvoie le noeud suivant
+previousNode = nodeIterator.previousNode(); // même résultat, puisque nous sommes retournés au noeud précédent
+</pre>
+
+<h2 id="Specification" name="Specification">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('DOM WHATWG', '#dom-nodeiterator-previousnode', 'NodeIterator.previousNode')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Comme <code>detach()</code> est maintenant une méthode non opérante, cette méthode ne peut plus rien lancer.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-NodeIterator-previousNode', 'NodeIterator.previousNode')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.NodeIterator.previousNode")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface à laquelle elle appartient : {{domxref("NodeIterator")}}.</li>
+</ul>
diff --git a/files/fr/web/api/nodeiterator/referencenode/index.html b/files/fr/web/api/nodeiterator/referencenode/index.html
new file mode 100644
index 0000000000..b138a52723
--- /dev/null
+++ b/files/fr/web/api/nodeiterator/referencenode/index.html
@@ -0,0 +1,60 @@
+---
+title: NodeIterator.referenceNode
+slug: Web/API/NodeIterator/referenceNode
+tags:
+  - API
+  - Arborescence
+  - DOM
+  - Itérateur
+  - Noeuds
+  - Propriétés
+translation_of: Web/API/NodeIterator/referenceNode
+---
+<p>{{APIRef("DOM")}}{{ SeeCompatTable }}</p>
+
+<p>La propriété en lecture seule <strong><code>NodeIterator.referenceNode</code></strong> renvoie le {{domxref("Node")}} auquel l'itérateur est ancré ; si de nouveaux noeuds sont insérés, l'itérateur reste ancré au noeud de référence spécifié par cette propriété.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>node</em> = <em>nodeIterator</em>.referenceNode;
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">var nodeIterator = document.createNodeIterator(
+    document.body,
+    NodeFilter.SHOW_ELEMENT,
+    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+    false
+);
+node = nodeIterator.referenceNode;
+</pre>
+
+<h2 id="Specification" name="Specification">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('DOM WHATWG', '#dom-nodeiterator-referencenode', 'NodeIterator.referenceNode')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.NodeIterator.referenceNode")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface à laquelle elle appartient : {{domxref("NodeIterator")}}</li>
+</ul>
diff --git a/files/fr/web/api/nodeiterator/root/index.html b/files/fr/web/api/nodeiterator/root/index.html
new file mode 100644
index 0000000000..b5d6aeead3
--- /dev/null
+++ b/files/fr/web/api/nodeiterator/root/index.html
@@ -0,0 +1,65 @@
+---
+title: NodeIterator.root
+slug: Web/API/NodeIterator/root
+tags:
+  - API
+  - Arborescence
+  - DOM
+  - Itérateur
+  - Noeuds
+  - Propriété
+translation_of: Web/API/NodeIterator/root
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La propriété en lecture seule <code><strong>NodeIterator.root</strong></code> représente le {{DOMxref("Node")}} qui est la racine de ce que le {{DOMxref("NodeIterator")}} traverse.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>root</em> = <em>nodeIterator</em>.root;
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">var nodeIterator = document.createNodeIterator(
+    document.body,
+    NodeFilter.SHOW_ELEMENT,
+    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+    false
+);
+root = nodeIterator.root; // document.body dans ce cas
+</pre>
+
+<h2 id="Specification" name="Specification">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('DOM WHATWG', '#dom-nodeiterator-root', 'NodeIterator.root')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Pas de changement de {{SpecName('DOM2 Traversal_Range')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-NodeIterator-root', 'NodeIterator.root')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.NodeIterator.root")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface à laquelle elle appartient : {{domxref("NodeIterator")}}.</li>
+</ul>
diff --git a/files/fr/web/api/nodeiterator/whattoshow/index.html b/files/fr/web/api/nodeiterator/whattoshow/index.html
new file mode 100644
index 0000000000..a36dbc4527
--- /dev/null
+++ b/files/fr/web/api/nodeiterator/whattoshow/index.html
@@ -0,0 +1,145 @@
+---
+title: NodeIterator.whatToShow
+slug: Web/API/NodeIterator/whatToShow
+tags:
+  - API
+  - Arborescence
+  - DOM
+  - Itérateur
+  - Noeuds
+  - Propriétés
+translation_of: Web/API/NodeIterator/whatToShow
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La propriété en lecture seule <strong><code>NodeIterator.whatToShow</code></strong> est un <code>unsigned integer</code> (<em>entier non signé</em>) représentant un masque de bits désignant le type de noeuds qui doit être renvoyé par le {{domxref("NodeIterator")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox">var nodeTypes = <em>nodeIterator</em>.whatToShow;
+</pre>
+
+<p>Les valeurs pouvant être combinées pour former le masque de bits sont :</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Constante</td>
+   <td class="header">Valeur numérique</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>NodeFilter.SHOW_ALL</code></td>
+   <td><code>-1</code> (c'est la valeur numérique maximale du <code>unsigned long</code> (<em>non signé long</em>))</td>
+   <td>Affiche tous les noeuds.</td>
+  </tr>
+  <tr>
+   <td><code>NodeFilter.SHOW_ATTRIBUTE</code> {{deprecated_inline}}</td>
+   <td><code>2</code></td>
+   <td>Affiche l'attribut {{domxref("Attr")}} des noeuds. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Attr")}} comme racine ; dans ce cas, cela signifie que le nœud d'attribut apparaîtra dans la première position de l'itération ou de la traversée. Comme les attributs ne sont jamais des enfants d'autres nœuds, ils n'apparaissent pas lors de la traversée de l'arbre du document.</td>
+  </tr>
+  <tr>
+   <td><code>NodeFilter.SHOW_CDATA_SECTION</code> {{deprecated_inline}}</td>
+   <td><code>8</code></td>
+   <td>Affiche les noeuds {{domxref("CDATASection")}}.</td>
+  </tr>
+  <tr>
+   <td><code>NodeFilter.SHOW_COMMENT</code></td>
+   <td><code>128</code></td>
+   <td>Affiche les noeuds {{domxref("Comment")}}.</td>
+  </tr>
+  <tr>
+   <td><code>NodeFilter.SHOW_DOCUMENT</code></td>
+   <td><code>256</code></td>
+   <td>Affiche les noeuds {{domxref("Document")}}.</td>
+  </tr>
+  <tr>
+   <td><code>NodeFilter.SHOW_DOCUMENT_FRAGMENT</code></td>
+   <td><code>1024</code></td>
+   <td>Affiche les noeuds {{domxref("DocumentFragment")}}.</td>
+  </tr>
+  <tr>
+   <td><code>NodeFilter.SHOW_DOCUMENT_TYPE</code></td>
+   <td><code>512</code></td>
+   <td>Affiche les noeuds {{domxref("DocumentType")}}.</td>
+  </tr>
+  <tr>
+   <td><code>NodeFilter.SHOW_ELEMENT</code></td>
+   <td><code>1</code></td>
+   <td>Affiche les noeuds {{domxref("Element")}}.</td>
+  </tr>
+  <tr>
+   <td><code>NodeFilter.SHOW_ENTITY</code> {{deprecated_inline}}</td>
+   <td><code>32</code></td>
+   <td>Affiche les noeuds {{domxref("Entity")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{ domxref("Entity") }} comme racine ; dans ce cas, il signifie que le noeud d'entité {{domxref("Entity") }} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.</td>
+  </tr>
+  <tr>
+   <td><code>NodeFilter.SHOW_ENTITY_REFERENCE</code> {{deprecated_inline}}</td>
+   <td><code>16</code></td>
+   <td>Affiche les noeuds {{domxref("EntityReference")}}.</td>
+  </tr>
+  <tr>
+   <td><code>NodeFilter.SHOW_NOTATION</code> {{deprecated_inline}}</td>
+   <td><code>2048</code></td>
+   <td>Affiche les noeuds {{domxref("Notation")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Notation")}} comme racine ; dans ce cas, il signifie que le noeud {{domxref("Notation")}} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.</td>
+  </tr>
+  <tr>
+   <td><code>NodeFilter.SHOW_PROCESSING_INSTRUCTION</code></td>
+   <td><code>64</code></td>
+   <td>Affiche les noeuds {{domxref("ProcessingInstruction")}}.</td>
+  </tr>
+  <tr>
+   <td><code>NodeFilter.SHOW_TEXT</code></td>
+   <td><code>4</code></td>
+   <td>Affiche les noeuds {{domxref("Text")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">var nodeIterator = document.createNodeIterator(
+    document.body,
+    NodeFilter.SHOW_ELEMENT + NodeFilter.SHOW_COMMENT + NodeFilter.SHOW_TEXT,
+    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+    false
+);
+if( (nodeIterator.whatToShow == NodeFilter.SHOW_ALL) ||
+    (nodeIterator.whatToShow % (NodeFilter.SHOW_COMMENT*2)) &gt;= NodeFilter.SHOW_COMMENT) {
+    // nodeIterator affichera les commentaires
+}
+</pre>
+
+<h2 id="Specification" name="Specification">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('DOM WHATWG', '#dom-nodeiterator-whattoshow', 'NodeIterator.whatToShow')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Pas de changement depuis {{SpecName('DOM2 Traversal_Range')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-NodeIterator-whatToShow', 'NodeIterator.whatToShow')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Définitioni initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.NodeIterator.whatToShow")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface à laquelle cette propriété appartient : {{domxref("NodeIterator")}}.</li>
+</ul>
diff --git a/files/fr/web/api/nodelist/entries/index.html b/files/fr/web/api/nodelist/entries/index.html
new file mode 100644
index 0000000000..7888945118
--- /dev/null
+++ b/files/fr/web/api/nodelist/entries/index.html
@@ -0,0 +1,81 @@
+---
+title: NodeList.entries()
+slug: Web/API/NodeList/entries
+tags:
+  - API
+  - DOM
+  - Iteration
+  - Liste
+  - Méthodes
+  - Node
+  - NodeList
+  - Noeuds
+translation_of: Web/API/NodeList/entries
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La méthode <code><strong>NodeList.entries()</strong></code> renvoie un {{jsxref("Les_protocoles_iteration",'itérateur')}} permettant de parcourir toutes les paires clé / valeur contenues dans cet objet . Les valeurs sont des objets {{domxref("Node")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">list.entries();</pre>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js;highlight:[12]">var node = document.createElement("div");
+var kid1 = document.createElement("p");
+var kid2 = document.createTextNode("hey");
+var kid3 = document.createElement("span");
+node.appendChild(kid1);
+node.appendChild(kid2);
+node.appendChild(kid3);
+
+var list = node.childNodes;
+
+// Utiliser for..of
+for (var entry of list.entries()) {
+  console.log(entry);
+}
+</pre>
+
+<p>résultat :</p>
+
+<pre>Array [ 0, &lt;p&gt; ]
+Array [ 1, #text "hey" ]
+Array [ 2, &lt;span&gt; ]</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('DOM WHATWG','#interface-nodelist','entries() (as iterable&lt;Node&gt;)')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+
+
+<p>{{Compat("api.NodeList.entries")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Node")}}</li>
+ <li>{{domxref("NodeList")}}</li>
+</ul>
diff --git a/files/fr/web/api/nodelist/foreach/index.html b/files/fr/web/api/nodelist/foreach/index.html
new file mode 100644
index 0000000000..7ab1ed297b
--- /dev/null
+++ b/files/fr/web/api/nodelist/foreach/index.html
@@ -0,0 +1,123 @@
+---
+title: NodeList.prototype.forEach()
+slug: Web/API/NodeList/forEach
+tags:
+  - API
+  - DOM
+  - Liste
+  - Méthodes
+  - Noeuds
+translation_of: Web/API/NodeList/forEach
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La méthode <strong><code>forEach()</code></strong> de l'interface {{domxref("NodeList")}} appelle le rappel donné en paramètre une fois pour chaque paire de valeurs dans la liste, dans l'ordre d'insertion.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>nodeList.</em>forEach<em>(callback[, thisArg]);</em>
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Fonction à exécuter pour chaque élément, contenant éventuellement 3 arguments :
+ <dl>
+  <dt><em><code>currentValue</code></em></dt>
+  <dd>L'élément en cours de traitement dans la NodeList.</dd>
+  <dt><code><em>currentIndex</em></code></dt>
+  <dd>L'index de l'élément en cours de traitement dans la NodeList.</dd>
+  <dt><em><code>listObj</code></em></dt>
+  <dd>L'objet NodeList auquel <code>forEach()</code> est appliqué.</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code><code> {{Optional_inline}}</code></dt>
+ <dd>Valeur à utiliser comme {{jsxref("this")}} lors de l'exécution du <code>callback</code> (<em>rappel</em>).</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>{{jsxref('undefined')}} (<em>indéfini</em>).</p>
+
+<h2 id="Exceptions">Exceptions</h2>
+
+<p><em>Aucune</em>.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js;highlight:[6]">var node = document.createElement("div");
+var kid1 = document.createElement("p");
+var kid2 = document.createTextNode("hey");
+var kid3 = document.createElement("span");
+
+node.appendChild(kid1);
+node.appendChild(kid2);
+node.appendChild(kid3);
+
+var list = node.childNodes;
+
+list.forEach(
+  function(currentValue, currentIndex, listObj) {
+    console.log(currentValue + ', ' + currentIndex + ', ' + this);
+  },
+  'myThisArg'
+);</pre>
+
+<p>résultat :</p>
+
+<pre>[object HTMLParagraphElement], 0, myThisArg
+[object Text], 1, myThisArg
+[object HTMLSpanElement], 2, myThisArg</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Ce {{Glossary("Polyfill","polyfill")}} ajoute une compatibilité à tous les navigateurs prenant en charge <a href="https://caniuse.com/#search=es5">ES5</a> :</p>
+
+<pre class="brush: js">if (window.NodeList &amp;&amp; !NodeList.prototype.forEach) {
+    NodeList.prototype.forEach = function (callback, thisArg) {
+        thisArg = thisArg || window;
+        for (var i = 0; i &lt; this.length; i++) {
+            callback.call(thisArg, this[i], i, this);
+        }
+    };
+}</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('DOM WHATWG', '#interface-nodelist', 'NodeList')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td>Définit <code>NodeList</code> comme <code>iterable&lt;Node&gt; </code>(<em>noeud itérable</em>)</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("WebIDL", "#es-forEach", "forEach")}}</td>
+   <td>{{Spec2("WebIDL")}}</td>
+   <td>Définit <code>forEach</code> sur les déclarations <code>iterable</code> (<em>itératives</em>)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+
+
+<p>{{Compat("api.NodeList.forEach")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Node")}}</li>
+ <li>{{domxref("NodeList")}}</li>
+</ul>
diff --git a/files/fr/web/api/nodelist/index.html b/files/fr/web/api/nodelist/index.html
new file mode 100644
index 0000000000..6748e70ec7
--- /dev/null
+++ b/files/fr/web/api/nodelist/index.html
@@ -0,0 +1,201 @@
+---
+title: NodeList
+slug: Web/API/NodeList
+tags:
+  - API
+  - DOM
+  - Interface
+  - Liste
+  - Noeuds
+translation_of: Web/API/NodeList
+---
+<p id="Sommaire">{{APIRef("DOM")}}</p>
+
+<p>Les objets <strong><code>NodeList</code></strong> sont des collections de nœuds comme celles retournées par {{domxref("Node.childNodes")}} et la méthode {{domxref("document.querySelectorAll()")}}.</p>
+
+<div class="note">
+<p>Bien que <code>NodeList</code> ne soit pas un tableau (<code>Array</code>), il est possible d'itérer dessus en utilisant <code>forEach()</code>. Il peut également être converti en tableau (<code>Array</code>) en utilisant {{jsxref("Array.from()")}}.</p>
+
+<p>Néanmoins certains vieux navigateurs n'ont pas encore implémenté <code>NodeList.forEach()</code> ni <code>Array.from()</code>. Mais ces limitations peuvent être contournées en utilisant {{jsxref("Array.forEach()", "Array.prototype.forEach()")}} (plus dans ce document).</p>
+</div>
+
+<p>Dans certains cas, la <code>NodeList</code> est une collection en direct, ce qui signifie que les changements dans le DOM sont reflétés dans la collection. Par exemple,  {{domxref("Node.childNodes")}} est en direct :</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> parent <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'parent'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> child_nodes <span class="operator token">=</span> parent<span class="punctuation token">.</span>childNodes<span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>child_nodes<span class="punctuation token">.</span>length<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// supposons "2"</span>
+parent<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'div'</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>child_nodes<span class="punctuation token">.</span>length<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// devrait afficher "3"</span></code></pre>
+
+<p>Dans d'autres cas, la <code>NodeList</code> est une collection statique, ce qui signifie que tout changement dans le DOM n'affectera pas le contenu de la collection. {{domxref("document.querySelectorAll()")}}  renvoie une <code>NodeList</code> statique.</p>
+
+<p>Il est bon de garder cette distinction à l'esprit pour choisir la façon de parcourir les éléments de la liste des nœuds et, en particulier, pour mettre en cache la longueur de la liste.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("NodeList.length")}}</dt>
+</dl>
+
+<dl>
+ <dd>Le nombre de nœuds dans la <code>NodeList</code>.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("NodeList.item()")}}</dt>
+ <dd>Retourne un élément de la liste par son index ou <code>null</code> si l'index est en dehors des limites. Équivalent à <code>nodeList[idx]</code> (qui renvoie à la place <code>undefined</code> quand  <code>idx</code> est hors des limites).</dd>
+ <dt>{{domxref("NodeList.entries()")}}</dt>
+ <dd>renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}} permettant de parcourir toutes les paires clé / valeur contenues dans cet objet.</dd>
+ <dt>{{domxref("NodeList.forEach()")}}</dt>
+ <dd>exécute une fonction fournie une fois par élément <code>NodeList</code>.</dd>
+ <dt>{{domxref("NodeList.keys()")}}</dt>
+ <dd>renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}} permettant de parcourir toutes les clés des paires clé / valeur contenues dans cet objet.</dd>
+ <dt>{{domxref("NodeList.values()")}}</dt>
+ <dd>renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}} permettant de parcourir toutes les valeurs des paires clé / valeur contenues dans cet objet.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Il est possible de boucler sur les éléments d'une <code>NodeList</code> en utilisant :</p>
+
+<pre class="brush: js">for (var i = 0; i &lt; myNodeList.length; ++i) {
+  var item = myNodeList[i];  // L'appel de myNodeList.item(i) n'est pas nécessaire en JavaScript
+}
+</pre>
+
+<p>Ne soyez pas tenté d'utiliser <code><a href="/fr/docs/JavaScript/Reference/Instructions/for...in" title="JavaScript/ Reference/Statements/for...in">for… in</a></code> ou <code><a href="/fr/docs/JavaScript/Reference/Instructions/for_each…in" title="JavaScript/ Reference/Statements/for each...in">for each… in</a></code> pour énumérer les éléments de la liste, car cela énumère également la taille (<code>length</code>) et les propriétés du <code>NodeList</code> et cause des erreurs si votre script ne gère que les objets de type {{domxref("element")}}. De plus, <code>for… in</code> ne garantit pas de visiter les propriétés dans un ordre particulier.</p>
+
+<p>Les boucles <code><a href="/fr/docs/JavaScript/Référence_JavaScript/Instructions/for...of" title="JavaScript/Reference/Statements/for...of">for… of</a></code> boucleront correctement sur les objets <code>NodeList</code> :</p>
+
+<pre class="brush: js">var list = document.querySelectorAll( 'input[type=checkbox]' );
+for (var item of list) {
+  item.checked = true;
+}</pre>
+
+<p id="Comment_convertir_un_NodeList_en_Array">Les navigateurs récents prennent également en charge les méthodes d'itérateur {{domxref("NodeList.forEach()", "forEach()")}}, aussi bien que {{domxref("NodeList.entries()", "entries()")}}, {{domxref("NodeList.values()", "values()")}} et {{domxref("NodeList.keys()", "keys()")}}.</p>
+
+<p>Il y a aussi dans Internet Explorer une façon compatible d'utiliser {{jsxref("Array.forEach()", "Array.prototype.forEach")}} pour l'itération.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> list <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span> <span class="string token">'input[type=checkbox]'</span> <span class="punctuation token">)</span><span class="punctuation token">;</span>
+Array<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>forEach<span class="punctuation token">.</span><span class="function token">call</span><span class="punctuation token">(</span>list<span class="punctuation token">,</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>item<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  item<span class="punctuation token">.</span>checked <span class="operator token">=</span> <span class="keyword token">true</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="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('DOM WHATWG', '#interface-nodelist', 'NodeList')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-536297177', 'NodeList')}}</td>
+   <td>{{ Spec2('DOM3 Core') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-536297177', 'NodeList')}}</td>
+   <td>{{ Spec2('DOM2 Core') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-536297177', 'NodeList')}}</td>
+   <td>{{ Spec2('DOM1') }}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>entries()</code>, <code>keys()</code>, <code>values()</code>, <code>forEach()</code></td>
+   <td>{{CompatChrome(51)}}</td>
+   <td>16 (maybe prior)</td>
+   <td>{{CompatGeckoDesktop(50)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>38</td>
+   <td>10 (maybe prior)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>entries()</code>, <code>keys()</code>, <code>values()</code>, <code>forEach()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>16 (maybe prior)</td>
+   <td>{{CompatGeckoMobile(50)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10 (maybe prior)</td>
+   <td>{{CompatChrome(51)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
diff --git a/files/fr/web/api/nodelist/item/index.html b/files/fr/web/api/nodelist/item/index.html
new file mode 100644
index 0000000000..e4d65fc86d
--- /dev/null
+++ b/files/fr/web/api/nodelist/item/index.html
@@ -0,0 +1,50 @@
+---
+title: NodeList.item()
+slug: Web/API/NodeList/item
+tags:
+  - API
+  - DOM
+  - Liste
+  - Méthodes
+  - Noeuds
+translation_of: Web/API/NodeList/item
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p class="summary">Renvoie un noeud depuis une <a href="/en-US/docs/Web/API/NodeList"><code>NodeList</code></a> par l'index. Cette méthode ne lance pas d'exceptions tant que vous fournissez des arguments. Une valeur <code>null</code> est renvoyée si l'index est hors des limites et une <code>TypeError</code> est lancée si aucun argument n'est fourni.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>nodeItem</em> = <em>nodeList</em>.item(<em>index</em>)
+</pre>
+
+<ul>
+ <li><code>nodeList</code> est une <code>NodeList</code>. Elle est généralement obtenue à partir d'une autre propriété ou méthode DOM, telle que <a href="/en-US/docs/Web/API/Node/childNodes" title="childNodes">childNodes</a>.</li>
+ <li><code>index</code> est l'index du noeud à chercher. L'index commence à zéro.</li>
+ <li><code>nodeItem</code> est le numéro d'<code>index</code> du noeud dans la <code>nodeList</code> retourné par la méthode <code>item</code>.</li>
+</ul>
+
+<h2 id="Syntaxe_alternative">Syntaxe alternative</h2>
+
+<p>JavaScript propose également une syntaxe semblable à un tableau pour obtenir un élément d'une liste de nœuds par index :</p>
+
+<pre class="eval"><em>nodeItem</em> = <em>nodeList</em>[<em>index</em>]
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">var tables = document.getElementsByTagName("table");
+var firstTable = tables.item(1); // ou simplement tables[1] - renvoie le <strong>second</strong> tableau dans DOM
+</pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<p><a class="external" href="https://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-item">DOM Level 1 Core: NodeList.item()</a></p>
+
+<p><a class="external" href="https://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-844377136">DOM Level 2 Core: NodeList.item()</a></p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.NodeList.item")}}</p>
diff --git a/files/fr/web/api/nodelist/keys/index.html b/files/fr/web/api/nodelist/keys/index.html
new file mode 100644
index 0000000000..6f4f693c1a
--- /dev/null
+++ b/files/fr/web/api/nodelist/keys/index.html
@@ -0,0 +1,80 @@
+---
+title: NodeList.keys()
+slug: Web/API/NodeList/keys
+tags:
+  - API
+  - DOM
+  - Liste
+  - Méthodes
+  - Noeuds
+translation_of: Web/API/NodeList/keys
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La méthode <code><strong>NodeList.keys()</strong></code> renvoie un {{jsxref("Les_protocoles_iteration",'itérateur')}} permettant de parcourir toutes les clés contenues dans cet objet. Les clés sont des <code>unsigned integer</code> (<em>entier non signé</em>).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">nodeList.keys();</pre>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js;highlight:[13]">var node = document.createElement("div");
+var kid1 = document.createElement("p");
+var kid2 = document.createTextNode("hey");
+var kid3 = document.createElement("span");
+
+node.appendChild(kid1);
+node.appendChild(kid2);
+node.appendChild(kid3);
+
+var list = node.childNodes;
+
+// Utilisation de for..of
+for(var key of list.keys()) {
+   console.log(key);
+}
+</pre>
+
+<p>Le résultat est :</p>
+
+<pre>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">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#interface-nodelist','keys() (as iterable)')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+
+
+<p>{{Compat("api.NodeList.keys")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Node")}}</li>
+ <li>{{domxref("NodeList")}}</li>
+</ul>
diff --git a/files/fr/web/api/nodelist/length/index.html b/files/fr/web/api/nodelist/length/index.html
new file mode 100644
index 0000000000..b68db9816b
--- /dev/null
+++ b/files/fr/web/api/nodelist/length/index.html
@@ -0,0 +1,54 @@
+---
+title: NodeList.length
+slug: Web/API/NodeList/length
+tags:
+  - API
+  - DOM
+  - Liste
+  - Noeuds
+  - Propriétés
+translation_of: Web/API/NodeList/length
+---
+<div>{{APIRef("DOM")}}</div>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p><code>length</code> renvoie le nombre d'éléments dans une <code>NodeList</code>.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="brush: js"><em>numItems</em> =<em>nodeList</em>.length
+</pre>
+
+<ul>
+ <li><code>numItems</code> est un entier (<em>integer</em>), valeur représentant le nombre d'éléments dans une <code>NodeList</code>.</li>
+</ul>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">// tous les paragraphes dans le document
+var items = document.getElementsByTagName("p");
+// pour chaque élément de la liste,
+// ajouter l'élément entier en tant que chaîne de HTML
+var gross = "";
+for (var i = 0; i &lt; items.length; i++) {
+  gross += items[i].innerHTML;
+}
+// gross est maintenant tout le HTML pour les paragraphes
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Malgré l'emplacement de cette page dans la référence, <code>length</code> n'est pas une propriété d'<a href="en/DOM/element">Element</a>, mais plutôt d'une <code>NodeList</code>. Les objets NodeList sont retournés à partir des méthodes DOM comme <a href="en/DOM/document.getElementsByTagName">document.getElementsByTagName</a>.</p>
+
+<p><code>length</code> est une propriété très commune dans la programmation de DOM. Il est très courant de tester la longueur d'une liste (pour voir si elle existe) et de l'utiliser comme itérateur dans une boucle for, comme dans l'exemple ci-dessus.</p>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-203510337">length</a></p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.NodeList.length")}}</p>
diff --git a/files/fr/web/api/nodelist/values/index.html b/files/fr/web/api/nodelist/values/index.html
new file mode 100644
index 0000000000..4abe62ad34
--- /dev/null
+++ b/files/fr/web/api/nodelist/values/index.html
@@ -0,0 +1,81 @@
+---
+title: NodeList.values()
+slug: Web/API/NodeList/values
+tags:
+  - API
+  - DOM
+  - Itérateur
+  - Liste
+  - Méthodes
+  - Noeuds
+translation_of: Web/API/NodeList/values
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La méthode <code><strong>NodeList.values()</strong></code> renvoie un {{jsxref("Les_protocoles_iteration",'itérateur')}} permettant de parcourir toutes les valeurs contenues dans cet objet. Les valeurs sont des objets {{domxref("Node")}} (<em>noeud</em>).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">nodeList.values();</pre>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js;highlight:[13]">var node = document.createElement("div");
+var kid1 = document.createElement("p");
+var kid2 = document.createTextNode("hey");
+var kid3 = document.createElement("span");
+
+node.appendChild(kid1);
+node.appendChild(kid2);
+node.appendChild(kid3);
+
+var list = node.childNodes;
+
+// Utilisation de for..of
+for(var value of list.values()) {
+  console.log(value);
+}
+</pre>
+
+<p>Le résultat est :</p>
+
+<pre>&lt;p&gt;
+#text "hey"
+&lt;span&gt;
+</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('DOM WHATWG','#interface-nodelist','values() (as iterable&lt;Node&gt;)')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+
+
+<p>{{Compat("api.NodeList.values")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Node")}}</li>
+ <li>{{domxref("NodeList")}}</li>
+</ul>
diff --git a/files/fr/web/api/notation/index.html b/files/fr/web/api/notation/index.html
new file mode 100644
index 0000000000..450e57746c
--- /dev/null
+++ b/files/fr/web/api/notation/index.html
@@ -0,0 +1,107 @@
+---
+title: Notation
+slug: Web/API/Notation
+tags:
+  - API
+  - Arborescence
+  - DOM
+  - Noeuds
+  - Notation
+  - Reference
+translation_of: Web/API/Notation
+---
+<div>{{APIRef("DOM")}}{{obsolete_header}}</div>
+
+<p>Représente une notation DTD (définition de type de document) en lecture seule. Peut déclarer le format d'une entité non analysée ou déclarer formellement les cibles d'instruction de traitement du document. Hérite des méthodes et des propriétés de <a class="internal" href="/En/DOM/Node" title="En/DOM/Node"><code>Node</code></a>. Son <code><a class="internal" href="/En/DOM/Node/NodeName" title="En/DOM/Node/NodeName">nodeName</a></code> est le nom de la notation. N'a pas de parent.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("Notation.publicId")}} {{ReadOnlyInline}}</dt>
+ <dd>est une  {{domxref("DOMString")}} (<em>chaîne de caractères</em>).</dd>
+ <dt>{{domxref("Notation.systemId")}} {{ReadOnlyInline}}</dt>
+ <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>).</dd>
+</dl>
+
+<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("DOM3 Core", "core.html#ID-5431D1B9", "Notation")}}</td>
+   <td>{{Spec2("DOM3 Core")}}</td>
+   <td>Pas de changement.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Core", "core.html#ID-5431D1B9", "Notation")}}</td>
+   <td>{{Spec2("DOM2 Core")}}</td>
+   <td>Pas de changement.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-5431D1B9', 'Notation')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fr/web/api/notification/actions/index.html b/files/fr/web/api/notification/actions/index.html
new file mode 100644
index 0000000000..2f4177861b
--- /dev/null
+++ b/files/fr/web/api/notification/actions/index.html
@@ -0,0 +1,58 @@
+---
+title: Notification.actions
+slug: Web/API/notification/actions
+tags:
+  - API
+  - API Notifications
+  - Notification
+  - Notifications
+  - Propriété
+  - Reference
+  - actions
+translation_of: Web/API/Notification/actions
+---
+<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+
+<p><span class="seoSummary">La propriété <strong><code>actions</code></strong> en lecture seule de l'interface {{domxref ("Notification")}} renvoie la liste des {{domxref ("NotificationAction")}} objets définis à l'aide de l'option <code>actions</code> lors de la création de la notification à l'aide du constructeur {{domxref("Notification.Notification","Notification()")}}.</span> Il s'agit d'une liste des actions définies par l'application que l'utilisateur peut choisir de prendre directement depuis le contexte d'une notification.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> Le périphérique et l'agent utilisateur peuvent ne pouvoir afficher qu'un nombre limité d'actions (en raison, par exemple, d'un espace d'écran limité). Cette limite peut être déduite de {{DOMxRef ("Notification.maxActions")}}.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><var>Notification</var>.actions</pre>
+
+<h3 id="Value" name="Value">Valeur</h3>
+
+<p>Un tableau en lecture seule d'objets {{domxref ("NotificationAction")}}, chacun décrivant une action unique que l'utilisateur peut choisir dans une notification.</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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Notifications','#dom-notification-actions','actions')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.Notification.actions")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
+ <li>{{DOMxRef("Notification.maxActions")}}</li>
+</ul>
diff --git a/files/fr/web/api/notification/badge/index.html b/files/fr/web/api/notification/badge/index.html
new file mode 100644
index 0000000000..f179a2a7bf
--- /dev/null
+++ b/files/fr/web/api/notification/badge/index.html
@@ -0,0 +1,46 @@
+---
+title: Notification.badge
+slug: Web/API/notification/badge
+tags:
+  - API Notification
+  - API badge
+  - Notification
+  - Notifications
+  - Propriété
+  - Reference
+translation_of: Web/API/Notification/badge
+---
+<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+
+<p><span class="seoSummary">La propriété <strong><code>badge</code></strong> de l'interface {{domxref ("Notification")}} renvoie l'URL de l'image utilisée pour représenter la notification lorsqu'il n'y a pas assez d'espace pour afficher la notification elle-même.</span></p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">const url = Notification.badge</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une {{domxref('USVString')}} contenant une URL.</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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Notifications','#dom-notification-badge','badge')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td><span class="tlid-translation translation" lang="fr"><span title="">Définition initiale</span></span>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.Notification.badge")}}</p>
diff --git a/files/fr/web/api/notification/body/index.html b/files/fr/web/api/notification/body/index.html
new file mode 100644
index 0000000000..430c868dd3
--- /dev/null
+++ b/files/fr/web/api/notification/body/index.html
@@ -0,0 +1,54 @@
+---
+title: Notification.body
+slug: Web/API/notification/body
+tags:
+  - API
+  - API Notifications
+  - Corps
+  - Notification
+  - Notifications
+  - Propriété
+  - Reference
+translation_of: Web/API/Notification/body
+---
+<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+
+<p><span class="seoSummary">La propriété <span class="tlid-translation translation" lang="fr">en lecture seule</span> <strong><code>body</code></strong> de l'interface {{domxref ("Notification")}} est la chaîne de caractères qui correspond au corps de la notification, comme définis à l'aide de l'option <code>body</code> lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification()" )}}.</span></p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><var>Notification</var>.body
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une {{domxref("DOMString")}} contenant le corps de la notification.</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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Notifications','#dom-notification-body','body')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.Notification.body")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/notification/close/index.html b/files/fr/web/api/notification/close/index.html
new file mode 100644
index 0000000000..95c7066399
--- /dev/null
+++ b/files/fr/web/api/notification/close/index.html
@@ -0,0 +1,82 @@
+---
+title: Notification.close()
+slug: Web/API/notification/close
+tags:
+  - API
+  - API Notifications
+  - Méthode
+  - Notification
+  - Notifications
+  - Reference
+  - close
+  - fermeture
+translation_of: Web/API/Notification/close
+---
+<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+
+<p>La méthode <code>close()</code> de l'interface {{domxref("Notification")}} est <span class="tlid-translation translation" lang="fr">utilisée </span>pour fermer / supprimer une notification précédemment affichée.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Cette API ne doit pas être utilisée uniquement pour supprimer la notification de l'écran après un délai fixe, car cette méthode supprimera également la notification de toute barre de notification, empêchant ainsi les utilisateurs d'interagir avec elle après son affichage initial. Une utilisation valable de cette API serait de supprimer une notification qui n'est plus pertinente (par exemple, l'utilisateur a déjà lu la notification sur la page Web dans le cas d'une application de messagerie ou la chanson suivante est déjà en cours de lecture dans une application musicale).</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">Notification.close()</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Aucun.</p>
+
+<h3 id="Returns">Returns</h3>
+
+<p>Void.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'extrait de code suivant, nous avons une simple fonction qui, lorsqu'elle est appelée, crée un objet <code>options</code>, puis de celui-ci une nouvelle notification. À la fin de la fonction, elle appelle également <code>close()</code> dans une fonction {{domxref ("EventTarget.addEventListener", "addEventListener ()")}} pour supprimer la notification lorsque le contenu pertinent a été lu sur la page Web.</p>
+
+<pre class="brush:js notranslate">function spawnNotification(theBody, theIcon, theTitle) {
+  const options = {
+    body: theBody,
+    icon: theIcon
+  }
+
+  const n = new Notification(theTitle, options)
+  document.addEventListener('visibilitychange', () =&gt; {
+    if (document.visibilityState === 'visible') {
+      // The tab has become visible so clear the now-stale Notification.
+      n.close()
+    }
+  })
+}
+</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('Web Notifications')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.Notification.close")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/notification/data/index.html b/files/fr/web/api/notification/data/index.html
new file mode 100644
index 0000000000..102d0dd905
--- /dev/null
+++ b/files/fr/web/api/notification/data/index.html
@@ -0,0 +1,56 @@
+---
+title: Notification.data
+slug: Web/API/notification/data
+tags:
+  - API
+  - API Notifications
+  - Notification
+  - Notifications
+  - Propriété
+  - Reference
+  - données
+translation_of: Web/API/Notification/data
+---
+<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+
+<p><span class="seoSummary">La propriété en lecture seule <strong><code>data</code></strong> de l'interface {{domxref ("Notification")}} renvoie un clone structuré des données de la notification, comme définis à l'aide de l'option <code>data</code>  lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification() ")}}.</span></p>
+
+<p>Les données de la notification peuvent être des données arbitraires, sans restriction de format que vous souhaitez associer à la notification.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><var>Notification</var>.data
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un clone structuré.</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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Notifications','#dom-notification-data','data')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.Notification.data")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/notification/dir/index.html b/files/fr/web/api/notification/dir/index.html
new file mode 100644
index 0000000000..d3f0131d1a
--- /dev/null
+++ b/files/fr/web/api/notification/dir/index.html
@@ -0,0 +1,64 @@
+---
+title: Notification.dir
+slug: Web/API/notification/dir
+tags:
+  - API
+  - API Notifications
+  - Notification
+  - Notifications
+  - Propriété
+  - Reference
+  - direction
+translation_of: Web/API/Notification/dir
+---
+<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+
+<p><span class="seoSummary">La propriété en lecture seule <strong><code>dir</code></strong> de l'interface {{domxref ("Notification")}} indique le sens du texte de la notification, définis à l'aide de l'option <code>dir</code> lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification()" )}}.</span></p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="eval notranslate"><var>Notification</var>.dir
+</pre>
+
+<h3 id="Value" name="Value">Valeur</h3>
+
+<p>Une {{domxref ("DOMString")}} spécifiant la direction du texte. Les valeurs possibles sont:</p>
+
+<ul>
+ <li><code>auto</code>: adopte le comportement de réglage de la langue du navigateur (par défaut).</li>
+ <li><code>ltr</code>: de gauche à droite.</li>
+ <li><code>rtl</code> : de droite à gauche.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: La plupart des navigateurs semblent ignorer les paramètres explicites de ltr et rtl, et utilisent simplement le paramètre à l'échelle du navigateur.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table>
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Notifications','#dom-notification-dir','dir')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.Notification.dir")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/notification/icon/index.html b/files/fr/web/api/notification/icon/index.html
new file mode 100644
index 0000000000..a91a139a2e
--- /dev/null
+++ b/files/fr/web/api/notification/icon/index.html
@@ -0,0 +1,54 @@
+---
+title: Notification.icon
+slug: Web/API/notification/icon
+tags:
+  - API
+  - API Notifications
+  - Icône
+  - Notification
+  - Notifications
+  - Propriété
+  - Reference
+translation_of: Web/API/Notification/icon
+---
+<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+
+<p>La propriété en lecture seule <strong><code>icon</code></strong> de l'interface {{domxref ("Notification")}} contient l'URL d'une icône à afficher dans le cadre de la notification, comme définis à l'aide de l'option <code>icon</code> lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification"," Notification()")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><var>Notification</var>.icon
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une {{domxref("USVString")}}.</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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Notifications','#dom-notification-icon','icon')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.Notification.icon")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/notification/image/index.html b/files/fr/web/api/notification/image/index.html
new file mode 100644
index 0000000000..bfbb48f984
--- /dev/null
+++ b/files/fr/web/api/notification/image/index.html
@@ -0,0 +1,53 @@
+---
+title: Notification.image
+slug: Web/API/notification/image
+tags:
+  - API
+  - API Notifications
+  - Image
+  - Notification
+  - Notifications
+  - Propriété
+  - Reference
+translation_of: Web/API/Notification/image
+---
+<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+
+<p>La propriété en lecture seule <code><strong>image</strong></code> de l'interface {{domxref ("Notification")}} contient l'URL d'une image à afficher dans le cadre de la notification, comme définis à l'aide de l'option <code>image</code> lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification"," Notification()")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><var>Notification</var>.image</pre>
+
+<h3 id="Value" name="Value">Valeur</h3>
+
+<p>Une {{domxref("USVString")}}.</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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Notifications','#image-resource','image')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.Notification.image")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/notification/index.html b/files/fr/web/api/notification/index.html
new file mode 100644
index 0000000000..a31557abc2
--- /dev/null
+++ b/files/fr/web/api/notification/index.html
@@ -0,0 +1,179 @@
+---
+title: Notification
+slug: Web/API/notification
+tags:
+  - API
+  - API Notifications
+  - Interface
+  - Notifications
+  - Reference
+translation_of: Web/API/Notification
+---
+<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+
+<p><span class="seoSummary">L'interface Notification de l'<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API">API Notifications</a> est utilisée pour configurer et afficher les notifications de bureau à l'utilisateur. L'apparence et les fonctionnalités spécifiques de ces notifications varient selon les plates-formes, mais elles permettent généralement de fournir des informations de manière asynchrone à l'utilisateur.</span></p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("Notification.Notification", "Notification()")}}</dt>
+ <dd>Créer une nouvelle instance de l'object <code>Notification</code>.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<h3 id="Propriétés_statiques">Propriétés statiques</h3>
+
+<p><em>Ces propriétés ne sont disponibles que sur l'objet </em><code>Notification</code> <em>lui-même.</em></p>
+
+<dl>
+ <dt>{{domxref("Notification.permission")}} {{readonlyinline}}</dt>
+ <dd>Une chaîne représentant l'autorisation actuelle d'afficher les notifications. Les valeurs possibles sont:
+ <ul>
+  <li><code>denied</code> — L'utilisateur refuse d'afficher des notifications.</li>
+  <li><code>granted</code> — L'utilisateur accepte d'afficher des notifications.</li>
+  <li><code>default</code> — Le choix de l'utilisateur est inconnu et donc le navigateur agira comme si la valeur était refusée.</li>
+ </ul>
+ </dd>
+ <dt>{{domxref("Notification.maxActions")}} {{readonlyinline}}</dt>
+</dl>
+
+<h3 id="Propriétés_de_linstance">Propriétés de l'instance</h3>
+
+<p><em>Ces propriétés ne sont disponibles que sur les instances de l'objet </em><code>Notification</code><em>.</em></p>
+
+<dl>
+ <dt>{{domxref("Notification.actions")}} {{readonlyinline}}</dt>
+ <dd>Tableau d'actions de la notification comme spécifié dans le paramètre <code>options</code> du constructeur.</dd>
+ <dt>{{domxref("Notification.badge")}} {{readonlyinline}}</dt>
+ <dd>L'URL de l'image utilisée pour représenter la notification lorsqu'il n'y a pas assez d'espace pour afficher la notification elle-même.</dd>
+ <dt>{{domxref("Notification.body")}} {{readonlyinline}}</dt>
+ <dd>Une chaîne représentant le corps de la notification telle que spécifiée dans le paramètre <code>options</code> du constructeur.</dd>
+ <dt>{{domxref("Notification.data")}} {{readonlyinline}}</dt>
+ <dd>Renvoie un clone structuré des données de la notification.</dd>
+ <dt>{{domxref("Notification.dir")}} {{readonlyinline}}</dt>
+ <dd>La direction du texte de la notification comme spécifié dans le paramètre <code>options</code> du constructeur.</dd>
+ <dt>{{domxref("Notification.lang")}} {{readonlyinline}}</dt>
+ <dd>Code de langue de la notification tel que spécifié dans le paramètre <code>options</code> du constructeur.</dd>
+ <dt>{{domxref("Notification.tag")}} {{readonlyinline}}</dt>
+ <dd>L'ID de la notification (le cas échéant) tel que spécifié dans le paramètre <code>options</code> du constructeur.</dd>
+ <dt>{{domxref("Notification.icon")}} {{readonlyinline}}</dt>
+ <dd>L'URL de l'image utilisée comme icône de la notification comme spécifié dans le paramètre <code>options</code> du constructeur.</dd>
+ <dt>{{domxref("Notification.image")}} {{readonlyinline}}</dt>
+ <dd>L'URL d'une image à afficher dans le cadre de la notification, comme spécifié dans le paramètre <code>options</code> du constructeur.</dd>
+ <dt>{{domxref("Notification.renotify")}} {{readonlyinline}}</dt>
+ <dd>Spécifie si l'utilisateur doit être averti après qu'une nouvelle notification remplace l'ancienne.</dd>
+ <dt>{{domxref("Notification.requireInteraction")}} {{readonlyinline}}</dt>
+ <dd>Un {{jsxref ("Boolean")}} indiquant qu'une notification doit rester active jusqu'à ce que l'utilisateur clique dessus ou la rejette, plutôt que de se fermer automatiquement.</dd>
+ <dt>{{domxref("Notification.silent")}} {{readonlyinline}}</dt>
+ <dd>Spécifie si la notification doit être silencieuse, c'est-à-dire qu'aucun son ou vibration ne doit être émis, quels que soient les paramètres de l'appareil.</dd>
+ <dt>{{domxref("Notification.timestamp")}} {{readonlyinline}}</dt>
+ <dd>Spécifie l'heure à laquelle une notification est créée ou applicable (passée, présente ou future).</dd>
+ <dt>{{domxref("Notification.title")}} {{readonlyinline}}</dt>
+ <dd>Le titre de la notification tel que spécifié dans le premier paramètre du constructeur.</dd>
+ <dt>{{domxref("Notification.vibrate")}} {{readonlyinline}}</dt>
+ <dd>Spécifie un modèle de vibration pour les périphériques dotés d'un matériel de vibration à émettre.</dd>
+</dl>
+
+<h3 id="Gestionnaires_dévénements">Gestionnaires d'événements</h3>
+
+<dl>
+ <dt>{{domxref("Notification.onclick")}}</dt>
+ <dd>Un gestionnaire pour l'événement {{domxref ("Element/click_event", "click")}}. Il est déclenché à chaque fois que l'utilisateur clique sur la notification.</dd>
+ <dt>{{domxref("Notification.onclose")}}</dt>
+ <dd>Un gestionnaire pour l'événement {{domxref ("HTMLDialogElement/close_event", "close")}}. Il est déclenché lorsque l'utilisateur ferme la notification.</dd>
+ <dt>{{domxref("Notification.onerror")}}</dt>
+ <dd>Un gestionnaire pour l'événement {{domxref ("HTMLElement/error_event", "error")}}. Il est déclenché chaque fois que la notification rencontre une erreur.</dd>
+ <dt>{{domxref("Notification.onshow")}}</dt>
+ <dd>Un gestionnaire pour l'événement {{domxref ("Element/show_event", "show")}}. Il est déclenché lorsque la notification est affichée.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<h3 id="Méthodes_statiques">Méthodes statiques</h3>
+
+<p><em>Ces méthodes ne sont disponibles que sur l'objet </em><code>Notification</code> <em>lui-même.</em></p>
+
+<dl>
+ <dt>{{domxref("Notification.requestPermission()")}}</dt>
+ <dd>Demande l'autorisation à l'utilisateur d'afficher les notifications.</dd>
+</dl>
+
+<h3 id="Méthodes_dinstance">Méthodes d'instance</h3>
+
+<p><em>Ces propriétés ne sont disponibles que sur une instance de l'objet </em><code>Notification</code><em> ou via son </em><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">prototype</a><em>. L'objet </em><code>Notification</code><em> hérite également de l'interface {{domxref ("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("Notification.close()")}}</dt>
+ <dd>Ferme programmatiquement une instance de notification.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Supposons ce HTML de base:</p>
+
+<pre class="brush: html notranslate">&lt;button onclick="notifyMe()"&gt;Notifie moi !&lt;/button&gt;</pre>
+
+<p>Il est possible d'envoyer une notification comme suit - nous présentons ici un ensemble de code assez détaillé et complet que vous pourriez utiliser si vous vouliez d'abord vérifier si les notifications sont prises en charge, puis vérifiez si l'autorisation a été accordée pour l'{{glossary("Origin","origine")}} actuelle d'envoyer des notifications, puis demander l'autorisation si nécessaire, avant d'envoyer une notification.</p>
+
+<pre class="brush: js notranslate">function notifyMe() {
+  // Vérifions si le navigateur prend en charge les notifications
+  if (!('Notification' in window)) {
+    alert('Ce navigateur ne prend pas en charge la notification de bureau')
+  }
+
+  // Vérifions si les autorisations de notification ont déjà été accordées
+  else if (Notification.permission === 'granted') {
+    // Si tout va bien, créons une notification
+    const notification = new Notification('Salut toi!')
+  }
+
+  // Sinon, nous devons demander la permission à l'utilisateur
+  else if (Notification.permission !== 'denied') {
+    Notification.requestPermission().then((permission) =&gt; {
+      // Si l'utilisateur accepte, créons une notification
+      if (permission === 'granted') {
+        const notification = new Notification('Salut toi!')
+      }
+    })
+  }
+
+  // Enfin, si l'utilisateur a refusé les notifications, et que vous
+  // voulez être respectueux, il n'est plus nécessaire de les déranger.
+}
+</pre>
+
+<p>Nous ne montrons plus d'exemple en direct sur cette page, car Chrome et Firefox n'autorisent plus les demandes de notification des {{htmlelement ("iframe")}}s d'origine croisée, avec d'autres navigateurs à suivre. Pour voir un exemple en action, consultez notre <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">exemple de liste de tâches</a> (voir également l'<a href="https://mdn.github.io/to-do-notifications/">application en cours d'exécution</a>.)</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: dans l'exemple ci-dessus, nous générons des notifications en réponse à un geste de l'utilisateur (en cliquant sur un bouton). Il ne s'agit pas seulement d'une bonne pratique - vous ne devriez pas envoyer de spam aux utilisateurs avec des notifications qu'ils n'acceptent pas - mais les navigateurs suivants interdiront explicitement les notifications non déclenchées en réponse à un geste de l'utilisateur. Firefox le fait déjà depuis la version 72, par exemple.</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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Notifications')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.Notification")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/notification/lang/index.html b/files/fr/web/api/notification/lang/index.html
new file mode 100644
index 0000000000..6a0d93759f
--- /dev/null
+++ b/files/fr/web/api/notification/lang/index.html
@@ -0,0 +1,55 @@
+---
+title: Notification.lang
+slug: Web/API/notification/lang
+tags:
+  - API
+  - API Notifications
+  - Notification
+  - Notifications
+  - Propriété
+  - Reference
+translation_of: Web/API/Notification/lang
+---
+<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+
+<p><span class="seoSummary">La propriété en lecture seule <strong><code>lang</code></strong> de l'interface {{domxref ("Notification")}} indique la langue utilisée dans la notification, comme définis à l'aide de l'option <code>lang</code> lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification()" )}}.</span></p>
+
+<p>La langue elle-même est spécifiée à l'aide d'un {{domxref ("DOMString")}} représentant <a href="http://www.rfc-editor.org/rfc/bcp/bcp47.txt">une balise de langue BCP 47</a>. Consultez la page des <a href="http://www.sitepoint.com/web-foundations/iso-2-letter-language-codes/">codes de langue à 2 lettres ISO</a> de Sitepoint pour une référence simple.</p>
+
+<h2 id="Syntaxz">Syntaxz</h2>
+
+<pre class="syntaxbox notranslate"><var>N</var><var>otification</var>.lang
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une {{domxref("DOMString")}} spécifiant la balise de langue.</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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Notifications','#dom-notification-lang','lang')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.Notification.lang")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/notification/maxactions/index.html b/files/fr/web/api/notification/maxactions/index.html
new file mode 100644
index 0000000000..75c6bb0192
--- /dev/null
+++ b/files/fr/web/api/notification/maxactions/index.html
@@ -0,0 +1,65 @@
+---
+title: Notification.maxActions
+slug: Web/API/notification/maxActions
+tags:
+  - API
+  - API Notifications
+  - Notification
+  - Notifications
+  - Propriété
+  - Reference
+  - actions
+translation_of: Web/API/Notification/maxActions
+---
+<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+
+<p>L'attribut <strong><code>maxActions</code></strong> de l'interface {{domxref ("Notification")}} renvoie le nombre maximal d'actions prises en charge par l'appareil et l'agent utilisateur. En effet, c'est le nombre maximum d'éléments dans le tableau {{domxref ("Notification.actions")}} qui seront respectés par l'agent utilisateur.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><var>Notification</var>.maxActions
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un entier {{JSxRef ("Number")}} qui indique le plus grand nombre d'actions de notification pouvant être présentées à l'utilisateur par l'agent utilisateur et l'appareil.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>L'extrait de code suivant enregistre le nombre maximal d'actions prises en charge.</p>
+
+<pre class="brush: js notranslate">const { maxActions } = Notification
+console.log(`This device can display at most ${maxActions} actions on each notification.`);
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Web Notifications")}}</td>
+   <td>{{Spec2("Web Notifications")}}</td>
+   <td>Living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.Notification.maxActions")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
+ <li>{{domxref("Notification.actions")}}</li>
+</ul>
diff --git a/files/fr/web/api/notification/notification/index.html b/files/fr/web/api/notification/notification/index.html
new file mode 100644
index 0000000000..7a88a02ec3
--- /dev/null
+++ b/files/fr/web/api/notification/notification/index.html
@@ -0,0 +1,98 @@
+---
+title: Notification()
+slug: Web/API/notification/Notification
+tags:
+  - API
+  - API Notifications
+  - Constructeur
+  - Notification
+  - Notifications
+  - Reference
+translation_of: Web/API/Notification/Notification
+---
+<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+
+<p><span class="seoSummary">Le constructeur <strong><code>Notification()</code></strong> crée une nouvelle instance d'objet {{domxref ("Notification")}}, qui représente une notification utilisateur.</span></p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">const <var>myNotification</var> = new Notification(<var>title</var>, <var>options</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code><var>title</var></code></dt>
+ <dd>Définit un titre pour la notification, qui s'affiche en haut de la fenêtre de notification.</dd>
+ <dt><code><var>options</var></code> {{optional_inline}}</dt>
+ <dd>Un objet d'options contenant tous les paramètres personnalisés que vous souhaitez appliquer à la notification. Les options possibles sont:
+ <ul>
+  <li><code>dir</code>: La direction dans laquelle afficher la notification. La valeur par défaut est <code>auto</code>, qui adopte simplement le comportement du paramètre de langue du navigateur, mais vous pouvez remplacer ce comportement en définissant les valeurs de <code>ltr</code> et <code>rtl</code> (bien que la plupart des navigateurs semblent ignorer ces paramètres.)</li>
+  <li><code>lang</code>: La langue de la notification, telle que spécifiée à l'aide d'un {{domxref ("DOMString")}} représentant une <a href="http://www.rfc-editor.org/rfc/bcp/bcp47.txt">balise de langue BCP 47</a>. Consultez la page des <a href="http://www.sitepoint.com/web-foundations/iso-2-letter-language-codes/">codes de langue à 2 lettres ISO</a> de Sitepoint pour une référence simple.</li>
+  <li><code>badge</code>: Un {{domxref ("USVString")}} contenant l'URL de l'image utilisée pour représenter la notification lorsqu'il n'y a pas assez d'espace pour afficher la notification elle-même.</li>
+  <li><code>body</code>: Un {{domxref ("DOMString")}} représentant le corps du texte de la notification, qui est affiché sous le titre.</li>
+  <li><code>tag</code>: Un {{domxref ("DOMString")}} représentant un tag d'identification pour la notification.</li>
+  <li><code>icon</code>: Une {{domxref ("USVString")}} contenant l'URL d'une icône à afficher dans la notification.</li>
+  <li><code>image</code>: Une {{domxref ("USVString")}} contenant l'URL d'une image à afficher dans la notification.</li>
+  <li><code>data</code>: Données arbitraires que vous souhaitez associer à la notification. Elles peuvent être de n'importe quel type de données.</li>
+  <li><code>vibrate</code>: Un <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Guide/API/Vibration#Vibration_patterns">modèle de vibration</a> que le matériel de vibration de l'appareil émet avec la notification.</li>
+  <li><code>renotify</code>: Un {{domxref ("Boolean")}} spécifiant si l'utilisateur doit être notifié après qu'une nouvelle notification remplace l'ancienne. La valeur par défaut est <code>false</code>, ce qui signifie qu'ils ne seront pas notifiés.</li>
+  <li><code>requireInteraction</code>: Un {{domxref ("Boolean")}} indiquant qu'une notification doit rester active jusqu'à ce que l'utilisateur clique dessus ou la rejette, plutôt que de se fermer automatiquement. La valeur par défaut est <code>false</code>.</li>
+  <li><code>actions</code>: Un tableau de {{domxref ("NotificationAction")}} représentant les actions disponibles pour l'utilisateur lorsque la notification est présentée. Ce sont des options parmi lesquelles l'utilisateur peut choisir pour agir sur l'action dans le contexte de la notification elle-même. Le nom de l'action est envoyé au gestionnaire de notifications du service worker pour lui faire savoir que l'action a été sélectionnée par l'utilisateur.</li>
+  <li><code>silent</code>: Un {{domxref ("Boolean")}} spécifiant si la notification est silencieuse (aucun son ni vibration émis), quels que soient les paramètres de l'appareil. La valeur par défaut est <code>false</code>, ce qui signifie qu'il ne sera pas silencieux.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans notre <a href="https://chrisdavidmills.github.io/emogotchi/">démo Emogotchi</a> (<a href="https://github.com/mdn/emogotchi">voir le code source</a>), nous exécutons une fonction <code>spawnNotification()</code> lorsque nous voulons déclencher une notification. La fonction reçoit des paramètres pour spécifier le corps, l'icône et le titre souhaités, puis elle crée l'objet <code>options</code> nécessaire et déclenche la notification à l'aide du constructeur <code>Notification()</code>.</p>
+
+<pre class="brush: js notranslate">function spawnNotification(theBody, theIcon, theTitle) {
+  const options = {
+    body: theBody,
+    icon: theIcon
+  }
+  const n = new Notification(theTitle, options)
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Web Notifications","#dom-notification-notification","Notification() constructor")}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.Notification.Notification")}}</p>
+
+<h3 id="Notes_Chrome">Notes Chrome</h3>
+
+<p>À partir de Chrome 49, les notifications ne fonctionnent pas en mode navigation privée.</p>
+
+<p>{{Page("/en-US/docs/Web/API/Notifications_API", "Chrome notes")}}</p>
+
+<h3 id="Notes_Internet_Explorer">Notes Internet Explorer</h3>
+
+<p>La version 38.14352 et celles supérieure de MS Edge prend en charge l'<code>API Notification</code>. <a href="https://en.wikipedia.org/wiki/Microsoft_Edge#Release_history">Wikipédia - MS Edge</a><br>
+ IE 11 et inférieur n'est pas pris en charge.</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/notification/onclick/index.html b/files/fr/web/api/notification/onclick/index.html
new file mode 100644
index 0000000000..209d7c519f
--- /dev/null
+++ b/files/fr/web/api/notification/onclick/index.html
@@ -0,0 +1,63 @@
+---
+title: Notification.onclick
+slug: Web/API/notification/onclick
+tags:
+  - API
+  - DOM
+  - Notifications
+  - Propriété
+  - Reference
+  - onclick
+translation_of: Web/API/Notification/onclick
+---
+<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+
+<p>La propriété <strong><code>onclick</code></strong>, rattachée à l'interface {{domxref("Notification")}}, définit un gestionnaire d'évènement à déclencher lorsque la notification recçoit un évènement {{event("click")}} (qui se produit lorsqu'un utilisateur clique sur la notification).</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>Notification</em>.onclick = function(event) { ... };
+</pre>
+
+<p>Le comportement par défaut consiste à déplacer le focus sur la zone d'affichage (<em>viewport</em>) du <a href="https://html.spec.whatwg.org/multipage/browsers.html#browsing-context">contexte de navigation</a> de la notification. Pour éviter ce comportement, on pourra appeler la méthode <code><a href="/fr/docs/Web/API/Event/preventDefault">preventDefault()</a></code> sur l'objet représentant l'évènement.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on utilise le gestionnaire d'évènement <code>onclick</code> pour ouvrir une page dans un nouvel onglet (avec le paramètre <code>'_blank'</code>) lorsqu'on clique sur la notification :</p>
+
+<pre class="brush: js">notification.onclick = function(event) {
+  event.preventDefault(); // empêcher le navigateur de passer le focus sur l'onglet de la navigation
+  window.open('http://www.mozilla.org', '_blank');
+}</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('Web Notifications','#dom-notification-onclick','onclick')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Standard évolutif</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Notification.onclick")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Notification")}}</li>
+ <li><a href="/fr/docs/Web/API/notification/Using_Web_Notifications">Utiliser l'API Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/notification/onclose/index.html b/files/fr/web/api/notification/onclose/index.html
new file mode 100644
index 0000000000..2f3b5d6781
--- /dev/null
+++ b/files/fr/web/api/notification/onclose/index.html
@@ -0,0 +1,35 @@
+---
+title: Notification.onclose
+slug: Web/API/notification/onclose
+tags:
+  - API
+  - API Notifications
+  - Notification
+  - Notifications
+  - Propriété
+  - Reference
+  - onclose
+translation_of: Web/API/Notification/onclose
+---
+<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+
+<p><span class="seoSummary">La propriété <strong><code>onclose</code></strong> de l'interface {{domxref ("Notification")}} définit un écouteur d'événements pour recevoir les événements {{domxref ("HTMLDialogElement/close_event", "close")}}. Ces événements se produisent lorsqu'une {{domxref ("Notification")}} est fermée.</span></p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><var>Notification</var>.onclose = function(event) { ... }
+Notification.onclose = (event) =&gt; { ... }
+</pre>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.Notification.onclose")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>{{domxref("Notification")}}</li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/notification/onerror/index.html b/files/fr/web/api/notification/onerror/index.html
new file mode 100644
index 0000000000..67554d5a83
--- /dev/null
+++ b/files/fr/web/api/notification/onerror/index.html
@@ -0,0 +1,54 @@
+---
+title: Notification.onerror
+slug: Web/API/notification/onerror
+tags:
+  - API
+  - API Notifications
+  - Notification
+  - Notifications
+  - Propriété
+  - Reference
+  - onerror
+translation_of: Web/API/Notification/onerror
+---
+<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+
+<p><span class="seoSummary">La propriété <strong><code>onerror</code></strong> de l'interface {{domxref ("Notification")}} spécifie un écouteur d'événements pour recevoir les événements {{domxref ("HTMLElement/error_event", "error")}}. Ces événements se produisent lorsque quelque chose ce déroule mal avec une {{domxref ("Notification")}}</span> (dans de nombreux cas, une erreur qui empêche l'affichage de la notification.)</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><var>Notification</var>.onerror = function(event) { ... }
+<var>Notification</var>.onerror = (even) =&gt; { ... }
+</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">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Web Notifications','#dom-notification-onerror','onerror')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.Notification.onerror")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>{{domxref("Notification")}}</li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/notification/onshow/index.html b/files/fr/web/api/notification/onshow/index.html
new file mode 100644
index 0000000000..1f77b326e5
--- /dev/null
+++ b/files/fr/web/api/notification/onshow/index.html
@@ -0,0 +1,35 @@
+---
+title: Notification.onshow
+slug: Web/API/notification/onshow
+tags:
+  - API
+  - API Notifications
+  - Notification
+  - Notifications
+  - Propriété
+  - Reference
+  - onshow
+translation_of: Web/API/Notification/onshow
+---
+<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+
+<p><span class="seoSummary">La propriété <strong><code>onshow</code></strong> de l'interface {{domxref ("Notification")}} définit un écouteur d'événements pour recevoir des événements {{domxref ("Element/show_event", "show")}}. Ces événements se produisent lorsqu'une {{domxref ("Notification")}} est affiché.</span></p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><var>Notification</var>.onshow = function() { ... }
+<var>Notification</var>.onshow = () =&gt; { ... }
+</pre>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.Notification.onshow")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>{{domxref("Notification")}}</li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/notification/permission/index.html b/files/fr/web/api/notification/permission/index.html
new file mode 100644
index 0000000000..dc74126304
--- /dev/null
+++ b/files/fr/web/api/notification/permission/index.html
@@ -0,0 +1,95 @@
+---
+title: Notification.permission
+slug: Web/API/notification/permission
+tags:
+  - API
+  - API Notifications
+  - Notification
+  - Notifications
+  - Propriété
+  - Reference
+translation_of: Web/API/Notification/permission
+---
+<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+
+<p><span class="seoSummary">La propriété en lecture seule <strong><code>permission</code></strong> de l'interface {{domxref ("Notification")}} indique l'autorisation actuelle accordée par l'utilisateur à l'origine actuelle pour afficher des notifications.</span></p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">Notification.permission</pre>
+
+<h3 id="Return_Value" name="Return_Value">Valeur</h3>
+
+<p>Une {{domxref("DOMString")}} représentant l'autorisation actuelle. La valeur peut être:</p>
+
+<ul>
+ <li><code>granted</code>: L'utilisateur a explicitement accordé l'autorisation à l'origine actuelle d'afficher les notifications système.</li>
+ <li><code>denied</code>: L'utilisateur a explicitement refusé l'autorisation pour l'origine actuelle d'afficher les notifications système.</li>
+ <li><code>default</code>: La décision de l'utilisateur est inconnue; dans ce cas, l'application agira comme si l'autorisation était <code>denied</code>.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>L'extrait suivant peut être utilisé si vous souhaitez d'abord vérifier si les notifications sont prises en charge, puis vérifier si l'autorisation a été accordée pour l'origine actuelle pour envoyer des notifications, puis demander l'autorisation si nécessaire, avant d'envoyer une notification.</p>
+
+<pre class="brush: js notranslate">function notifyMe() {
+  // Let's check if the browser supports notifications
+  if (!('Notification' in window)) {
+    console.log('This browser does not support desktop notification')
+  }
+
+  // Let's check whether notification permissions have alredy been granted
+  else if (Notification.permission === 'granted') {
+    // If it's okay let's create a notification
+    const notification = new Notification('Hi there!')
+  }
+
+  // Otherwise, we need to ask the user for permission
+  else if (
+    Notification.permission !== 'denied' ||
+    Notification.permission === 'default'
+  ) {
+    Notification.requestPermission((permission) =&gt; {
+      // If the user accepts, let's create a notification
+      if (permission === 'granted') {
+        const notification = new Notification('Hi there!')
+      }
+    })
+  }
+
+  // At last, if the user has denied notifications, and you
+  // want to be respectful there is no need to bother them any more.
+}
+</pre>
+
+<h2 id="Spé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("Web Notifications","#dom-notification-permission","permission")}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.Notification.permission")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="/docs/Web/API/Notifications_API">API de notifications</a></li>
+ <li><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
+ <li><a href="/en-US/docs/Web/API/Permissions_API">Permissions d'API</a></li>
+ <li><a href="/en-US/docs/Web/API/Permissions_API/Using_the_Permissions_API">Utilisation des permissions d'API</a></li>
+</ul>
diff --git a/files/fr/web/api/notification/renotify/index.html b/files/fr/web/api/notification/renotify/index.html
new file mode 100644
index 0000000000..f8fb3b91e3
--- /dev/null
+++ b/files/fr/web/api/notification/renotify/index.html
@@ -0,0 +1,58 @@
+---
+title: Notification.renotify
+slug: Web/API/notification/renotify
+tags:
+  - API
+  - API Notifications
+  - Experimental
+  - Notification
+  - Notifications
+  - Propriété
+  - Reference
+  - renotifier
+  - renotify
+translation_of: Web/API/Notification/renotify
+---
+<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+
+<p><span class="seoSummary">La propriété en lecture seule <strong><code>renotify</code></strong> de l'interface {{domxref ("Notification")}} spécifie si l'utilisateur doit être notifié après qu'une nouvelle notification remplace l'ancienne, comme spécifié comme définis à l'aide de l'option <code>renotify</code> lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification"," Notification()")}}.</span></p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><var>Notification</var>.renotify
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un {{domxref("Boolean")}}. <code>false</code> est la valeur par défaut; <code>true</code> oblige la notification à renotifier l'utilisateur.</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('Web Notifications','#dom-notification-renotify','renotify')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.Notification.renotify")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/notification/requestpermission/index.html b/files/fr/web/api/notification/requestpermission/index.html
new file mode 100644
index 0000000000..75ccee7809
--- /dev/null
+++ b/files/fr/web/api/notification/requestpermission/index.html
@@ -0,0 +1,121 @@
+---
+title: Notification.requestPermission()
+slug: Web/API/notification/requestPermission
+tags:
+  - API
+  - API Notifications
+  - Méthode
+  - Notification
+  - Notifications
+  - Reference
+translation_of: Web/API/Notification/requestPermission
+---
+<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+
+<div class="note">
+<p><strong>Note:</strong> Cette fonctionnalité n'est pas disponible dans {{domxref("SharedWorker")}}</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Safari utilise toujours la syntaxe de function de rappel (callback ) pour obtenir l'autorisation. Lisez <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a> pour un bon exemple de la fonctionnalité de détection et d'exécution du code le cas échéant.</p>
+</div>
+
+<p><span class="seoSummary">La méthode <strong><code>requestPermission()</code></strong> de l'interface {{domxref ("Notification")}} demande l'autorisation à l'utilisateur pour l'origine actuelle d'afficher des notifications.</span></p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La dernière spécification a mis à jour cette méthode avec une syntaxe basée sur une promesse qui fonctionne comme ceci:</p>
+
+<pre class="notranslate">Notification.requestPermission()
+  .then((permission) =&gt; { ... })</pre>
+
+<p>Auparavant, la syntaxe était basée sur un simple rappel; cette version est désormais obsolète:</p>
+
+<pre class="notranslate">Notification.requestPermission(<var>callback</var>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code><var>callback</var></code> {{optional_inline}} {{deprecated_inline("gecko46")}}</dt>
+ <dd>Une fonction de rappel facultative qui est appelée avec la valeur d'autorisation. Déconseillé en faveur de la valeur de retour de la promesse.</dd>
+</dl>
+
+<h3 id="Retour">Retour</h3>
+
+<p>Une {{jsxref ("Promise", "Promesse")}} qui se résout en une {{domxref ("DOMString")}} avec la permission choisie par l'utilisateur. Les valeurs possibles pour cette chaîne sont:</p>
+
+<ul>
+ <li><code>granted</code></li>
+ <li><code>denied</code></li>
+ <li><code>default</code></li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Supposons ce HTML de base:</p>
+
+<pre class="brush: html notranslate">&lt;button onclick="notifyMe()"&gt;Notifie moi !&lt;/button&gt;</pre>
+
+<p>Il est possible d'envoyer une notification comme suit - nous présentons ici un ensemble de code assez détaillé et complet que vous pourriez utiliser si vous vouliez d'abord vérifier si les notifications sont prises en charge, puis vérifiez si l'autorisation a été accordée pour l'origine actuelle d'envoyer des notifications, puis demander l'autorisation si nécessaire, avant d'envoyer une notification.</p>
+
+<pre class="brush: js notranslate">function notifyMe() {
+  // Vérifions si le navigateur prend en charge les notifications
+  if (!('Notification' in window)) {
+    alert('Ce navigateur ne prend pas en charge la notification de bureau')
+  }
+
+  // Vérifions si les autorisations de notification ont déjà été accordées
+  else if (Notification.permission === 'granted') {
+    // Si tout va bien, créons une notification
+    const notification = new Notification('Salut toi!')
+  }
+
+  // Sinon, nous devons demander la permission à l'utilisateur
+  else if (Notification.permission !== 'denied') {
+    Notification.requestPermission().then((permission) =&gt; {
+      // Si l'utilisateur accepte, créons une notification
+      if (permission === 'granted') {
+        const notification = new Notification('Salut toi!')
+      }
+    })
+  }
+
+  // Enfin, si l'utilisateur a refusé les notifications, et que vous
+  // voulez être respectueux, il n'est plus nécessaire de les déranger.
+}
+</pre>
+
+<p>Nous ne montrons plus d'exemple en direct sur cette page, car Chrome et Firefox n'autorisent plus les demandes de notification des {{htmlelement ("iframe")}}s d'origine croisée, avec d'autres navigateurs à suivre. Pour voir un exemple en action, consultez notre <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">exemple de liste de tâches</a> (voir également l'<a href="https://mdn.github.io/to-do-notifications/">application en cours d'exécution</a>.)</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: dans l'exemple ci-dessus, nous générons des notifications en réponse à un geste de l'utilisateur (en cliquant sur un bouton). Il ne s'agit pas seulement d'une bonne pratique - vous ne devriez pas envoyer de spam aux utilisateurs avec des notifications qu'ils n'acceptent pas - mais les navigateurs suivants interdiront explicitement les notifications non déclenchées en réponse à un geste de l'utilisateur. Firefox le fait déjà depuis la version 72, par exemple.</p>
+</div>
+
+<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('Web Notifications')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.Notification.requestPermission")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/notification/requireinteraction/index.html b/files/fr/web/api/notification/requireinteraction/index.html
new file mode 100644
index 0000000000..7ee5e2b6f0
--- /dev/null
+++ b/files/fr/web/api/notification/requireinteraction/index.html
@@ -0,0 +1,54 @@
+---
+title: Notification.requireInteraction
+slug: Web/API/notification/requireInteraction
+tags:
+  - API
+  - API Notifications
+  - Notification
+  - Notifications
+  - Propriété
+  - Reference
+  - Web
+  - requireInteraction
+translation_of: Web/API/Notification/requireInteraction
+---
+<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+
+<p>La propriété en lecture seule <strong><code>requireInteraction</code></strong> de l'interface {{domxref ("Notification")}} renvoie un {{jsxref ("Boolean")}} indiquant qu'une notification doit rester active jusqu'à ce que l'utilisateur clique dessus ou la rejette, plutôt que de se fermer automatiquement. Ceci peut être défini à l'aide de l'option <code>requireInteraction</code> lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification()")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="brush: js notranslate">Notification.requireInteraction</pre>
+
+<h3 id="Return_Value" name="Return_Value">Valeur</h3>
+
+<p>Un {{jsxref("Boolean")}}.</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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Notifications','#dom-notification-requireinteraction','requireInteraction')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Living standard.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.Notification.requireInteraction")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/notification/silent/index.html b/files/fr/web/api/notification/silent/index.html
new file mode 100644
index 0000000000..bfbf316658
--- /dev/null
+++ b/files/fr/web/api/notification/silent/index.html
@@ -0,0 +1,56 @@
+---
+title: Notification.silent
+slug: Web/API/notification/silent
+tags:
+  - API
+  - API Notifications
+  - Notifications
+  - Propriété
+  - Reference
+  - Vibration
+  - Vibreur
+  - silencieuse
+  - silent
+translation_of: Web/API/Notification/silent
+---
+<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+
+<p><span class="seoSummary">La propriété en lecture seule <strong><code>silent</code></strong> de l'interface {{domxref ("Notification")}} spécifie si la notification doit être silencieuse, c'est-à-dire qu'aucun son ou vibration ne doit être émis, quels que soient les paramètres de l'appareil. Ceci est comme définis à l'aide de l'option <code>silent</code> lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification()")}}.</span></p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><var>Notification</var>.silent
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un {{domxref("Boolean")}}. <code>false</code> est la valeur par défaut; <code>true</code> rend la notification silencieuse.</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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Notifications','#dom-notification-silent','silent')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.Notification.silent")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/notification/tag/index.html b/files/fr/web/api/notification/tag/index.html
new file mode 100644
index 0000000000..853bde6928
--- /dev/null
+++ b/files/fr/web/api/notification/tag/index.html
@@ -0,0 +1,57 @@
+---
+title: Notification.tag
+slug: Web/API/notification/tag
+tags:
+  - API
+  - API Notifications
+  - Balise
+  - Notification
+  - Notifications
+  - Propriété
+  - Reference
+  - tag
+translation_of: Web/API/Notification/tag
+---
+<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+
+<p>La propriété en lecture seule <code><strong>tag</strong></code> de l'interface {{domxref ("Notification")}} correspond à une balise d'identification pour la notification, comme définis à l'aide de l'option <code>tag</code> lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification()" )}}.</p>
+
+<p>L'idée des balises de notification est que plusieurs notifications peuvent partager la même balise, les reliant entre elles. Une notification peut ensuite être programmatiquement remplacée par une autre pour éviter que l'écran des utilisateurs ne soit rempli d'un grand nombre de notifications similaires.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><var>Notification</var>.tag
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une {{domxref("DOMString")}}.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table>
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Notifications','#dom-notification-tag','tag')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.Notification.tag")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/notification/timestamp/index.html b/files/fr/web/api/notification/timestamp/index.html
new file mode 100644
index 0000000000..7dc7b3ccc2
--- /dev/null
+++ b/files/fr/web/api/notification/timestamp/index.html
@@ -0,0 +1,56 @@
+---
+title: Notification.timestamp
+slug: Web/API/notification/timestamp
+tags:
+  - API
+  - API Notifications
+  - Notification
+  - Notifications
+  - Propriété
+  - Reference
+  - horodatage
+  - timeStamp
+translation_of: Web/API/Notification/timestamp
+---
+<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+
+<p><span class="seoSummary">La propriété en lecture seule <strong><code>timestamp</code></strong> de l'interface {{domxref ("Notification")}} renvoie un {{domxref ("DOMTimeStamp")}}, comme définis à l'aide de l'option <code>timestamp</code> lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification()")}}.</span></p>
+
+<p>L'horodatage de la notification peut représenter le moment, en millisecondes depuis 00:00:00 UTC le 1er janvier 1970, de l'événement pour lequel la notification a été créée, ou il peut s'agir d'un horodatage arbitraire que vous souhaitez associer à la notification. Par exemple, un horodatage pour une réunion à venir pourrait être défini dans le futur, tandis qu'un horodatage pour un message manqué pourrait être défini dans le passé.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><var>Notification</var>.timestamp</pre>
+
+<h3 id="Return_Value" name="Return_Value">Valeur</h3>
+
+<p>Un {{domxref("DOMTimeStamp")}}.</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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Notifications','#dom-notification-timestamp','timestamp')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.Notification.timestamp")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/notification/title/index.html b/files/fr/web/api/notification/title/index.html
new file mode 100644
index 0000000000..8f98272a23
--- /dev/null
+++ b/files/fr/web/api/notification/title/index.html
@@ -0,0 +1,54 @@
+---
+title: Notification.title
+slug: Web/API/notification/title
+tags:
+  - API
+  - API Notifications
+  - Notification
+  - Notifications
+  - Propriété
+  - Reference
+  - Title
+  - Titre
+translation_of: Web/API/Notification/title
+---
+<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+
+<p><span class="seoSummary">La propriété en lecture seule <strong><code>title</code></strong> de l'interface {{domxref ("Notification")}} indique le titre de la notification, comme définis à l'aide de l'option <code>silent</code> lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification()") }} constructeur.</span></p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><var>Notification</var>.title</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une {{domxref("DOMString")}}.</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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Notifications','#dom-notification-title','title')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.Notification.title")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/notification/using_web_notifications/index.html b/files/fr/web/api/notification/using_web_notifications/index.html
new file mode 100644
index 0000000000..796e7d152a
--- /dev/null
+++ b/files/fr/web/api/notification/using_web_notifications/index.html
@@ -0,0 +1,275 @@
+---
+title: Utilisation des Notifications Web
+slug: Web/API/notification/Using_Web_Notifications
+tags:
+  - Avancé
+  - DOM
+  - Firefox OS
+  - Guide
+  - Notifications
+translation_of: Web/API/Notifications_API/Using_the_Notifications_API
+---
+<p>{{SeeCompatTable}}</p>
+
+<h2 id="En_bref">En bref</h2>
+
+<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>Pour afficher des notifications, il faut commencer par demander la permission appropriée et d'instancier un objet {{domxref("Notification")}} :</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>
+
+<h2 id="Obtenir_l'autorisation">Obtenir l'autorisation</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>
+
+<h3 id="Vérifier_l'état_de_la_permission">Vérifier l'état de la permission</h3>
+
+<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>
+
+<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>
+
+<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>
+
+<h3 id="Recevoir_la_permission">Recevoir la permission</h3>
+
+<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>
+
+<p>C'est une pratique usuelle de demander l'autorisation à l'initialisation de l'application:</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;
+    }
+  });
+});</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>
+
+<h3 id="Manifeste_des_permissions_pour_l'API_de_Notification">Manifeste des permissions pour l'API de Notification</h3>
+
+<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>
+
+<pre>"permissions": {
+  "desktop-notification": {
+    "description": "Needed for creating system notifications."
+  }
+}</pre>
+
+<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>
+
+<h2 id="Créer_une_notification">Créer une notification</h2>
+
+<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>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>
+
+<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>
+
+<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>
+
+<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>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>
+
+<pre class="brush: js">var n = new Notification("Salut!");
+n.onshow = function () {
+  setTimeout(n.close.bind(n), 5000);
+}
+</pre>
+
+<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>
+
+<h3 id="Un_petit_exemple">Un petit exemple</h3>
+
+<p>En considérant ce petit bout de HTML assez simple :</p>
+
+<pre class="brush: html">&lt;button&gt;Notifiez moi!&lt;/button&gt;</pre>
+
+<p>Il est possible de gérer les notifications de cette façon :</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;
+      }
+    });
+  }
+
+  var button = document.getElementsByTagName('button')[0];
+
+  button.addEventListener('click', function () {
+    // Si l'utilisateur accepte d'être notifié
+    if (window.Notification &amp;&amp; Notification.permission === "granted") {
+      var n = new Notification("Coucou !");
+    }
+
+    // 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;
+        }
+
+        // Si l'utilisateur est OK
+        if (status === "granted") {
+          var n = new Notification("Coucou !");
+        }
+
+        // Sinon, revenons en à un mode d'alerte classique
+        else {
+          alert("Coucou !");
+        }
+      });
+    }
+
+    // Si l'utilisateur refuse d'être notifié
+    else {
+      // We can fallback to a regular modal alert
+      alert("Coucou !");
+    }
+  });
+});</pre>
+
+<p>Et voici le résultat:</p>
+
+<p>{{ EmbedLiveSample('Simple_example', '100%', 30) }}</p>
+
+<h2 id="Gestion_des_notifications_répétitives">Gestion des notifications répétitives</h2>
+
+<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>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>
+
+<h3 id="Exemple_de_Tag">Exemple de Tag</h3>
+
+<p>Considérons le code HTML suivant:</p>
+
+<pre class="brush: html">&lt;button&gt;Notifie moi!&lt;/button&gt;</pre>
+
+<p>Il est possible de gérer plusieurs notifications de cette manière:</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;
+      }
+    });
+  }
+
+  var button = document.getElementsByTagName('button')[0];
+
+  button.addEventListener('click', function () {
+    // Si l'utilisateur accepte 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'});
+      }
+    }
+
+    // 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.
+    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
+        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'});
+          }
+        }
+
+        // Sinon on bascule sur une alerte modale
+        else {
+          alert("Hey!");
+        }
+      });
+    }
+
+    // Si l'utilisateur refuse les notifications
+    else {
+      // on bascule sur une alerte modale
+      alert("Hey!");
+    }
+  });
+});</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 cet <a href="https://github.com/mozilla/buddyup/commit/829cba7afa576052cf601c3e286b8d1981f93f45#diff-3">extrait de code</a> pour un exemple d'utilisation.</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">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Web Notifications')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Spécification initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_Navigateurs">Compatibilité Navigateurs</h2>
+
+<p>{{page("/fr/Web/API/Notification","Browser compatibility")}}</p>
+
+<h2 id="A_lire_aussi">A lire aussi</h2>
+
+<ul>
+ <li>{{ domxref("Notification") }}</li>
+</ul>
diff --git a/files/fr/web/api/notification/vibrate/index.html b/files/fr/web/api/notification/vibrate/index.html
new file mode 100644
index 0000000000..e4bc2a99d6
--- /dev/null
+++ b/files/fr/web/api/notification/vibrate/index.html
@@ -0,0 +1,56 @@
+---
+title: Notification.vibrate
+slug: Web/API/notification/vibrate
+tags:
+  - API
+  - API Notifications
+  - Notification
+  - Notifications
+  - Propriété
+  - Reference
+  - Vibration
+  - Vibreur
+  - vibrate
+translation_of: Web/API/Notification/vibrate
+---
+<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+
+<p><span class="seoSummary">La propriété en lecture seule <strong><code>vibrate</code></strong> de l'interface {{domxref ("Notification")}} spécifie un modèle de vibration que le matériel de vibration de l'appareil doit émettre lorsque la notification se déclenche. Ceci est comme définis à l'aide de l'option <code>vibrate</code> lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification ()")}}.</span></p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><var>Notification</var>.vibrate
+</pre>
+
+<h3 id="Return_Value" name="Return_Value">Valeur</h3>
+
+<p>Un <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Guide/API/Vibration#Vibration_patterns">modèle de vibration</a>, tel que spécifié dans la spécification de l'{{domxref ("Vibration_API", "Api de Vibration")}}.</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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Notifications','#dom-notification-vibrate','vibrate')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.Notification.vibrate")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/notificationevent/index.html b/files/fr/web/api/notificationevent/index.html
new file mode 100644
index 0000000000..12d31e9481
--- /dev/null
+++ b/files/fr/web/api/notificationevent/index.html
@@ -0,0 +1,162 @@
+---
+title: NotificationEvent
+slug: Web/API/NotificationEvent
+tags:
+  - API
+  - Experimental
+  - Interface
+  - Reference
+  - ServiceWorker
+translation_of: Web/API/NotificationEvent
+---
+<div>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</div>
+
+<p>L'interface <strong><code>NotificationEvent</code></strong> représente un évènement de clic pour une notification et qui est dispatché vers le {{domxref("ServiceWorkerGlobalScope")}} d'un {{domxref("ServiceWorker")}}.</p>
+
+<p>Cette interface hérite de l'interface {{domxref("ExtendableEvent")}}.</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("NotificationEvent.NotificationEvent()")}}</dt>
+ <dd>Cette méthode permet de créer un nouvel objet <code>NotificationEvent</code>.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Cet objet hérite de propriétés grâce à son ancêtre : {{domxref("Event")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("NotificationEvent.notification")}} {{readonlyInline}}</dt>
+ <dd>Cette propriété renvoie un objet {{domxref("Notification")}} représentant la notification sur laquelle on a cliqué pour déclencher l'évènement.</dd>
+ <dt>{{domxref("NotificationEvent.action")}} {{readonlyinline}}</dt>
+ <dd>Cette propriété renvoie une chaîne de caractères identifiant le bouton de la notification sur lequel l'utilisateur a cliqué. Cette valeur sera {{jsxref("undefined")}} si l'utilisateur a cliqué autre part que sur le bouton pour la notification ou si la notification ne possède pas de bouton.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Cet objet hérite de méthodes grâce à son parent </em><em>{{domxref("ExtendableEvent")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("ExtendableEvent.waitUntil", "ExtendableEvent.waitUntil()")}}</dt>
+ <dd>
+ <p>Cette méthode allonge la durée de vie de l'évènement. Elle est conçue pour être appelée dans le gestionnaire d'évènement {{event("install")}} lors de l'installation (cf. {{domxref("ServiceWorkerRegistration.installing")}}) du <em>worker</em> et dans le gestionnaire d'évènement {{event("active")}} pour le <em>worker</em> actif (cf. {{domxref("ServiceWorkerRegistration.active")}}).</p>
+ </dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">self.addEventListener('notificationclick', function(event) {
+  console.log('Au clic sur la notification : ', event.notification.tag);
+  event.notification.close();
+
+  // On regarde ici si elle est déjà ouverte
+  // et si le focus est dessus
+  event.waitUntil(clients.matchAll({
+    type: "window"
+  }).then(function(clientList) {
+    for (var i = 0; i &lt; clientList.length; i++) {
+      var client = clientList[i];
+      if (client.url == '/' &amp;&amp; 'focus' in client)
+        return client.focus();
+    }
+    if (clients.openWindow)
+      return clients.openWindow('/');
+  }));
+});
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Notifications','#notificationevent','NotificationEvent')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Note :</strong> Cette interface est définie au sein de <a href="/fr/docs/Web/API/Notifications_API">l'API Notifications</a>, mais on y accède via {{domxref("ServiceWorkerGlobalScope")}}.</p>
+</div>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatChrome(42)}}</td>
+   <td>{{CompatGeckoDesktop("44.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>action</code></td>
+   <td>{{CompatChrome(48)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("44.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(42)}}</td>
+  </tr>
+  <tr>
+   <td><code>action</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(48)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Les <em>service workers</em> (ainsi que l'API <a href="/fr/docs/Web/API/Push_API">Push</a>) ont été désactivés dans l'édition <a href="https://www.mozilla.org/fr/firefox/organizations/">Firefox 45 Extended Support Release</a> (ESR).</p>
diff --git a/files/fr/web/api/notifications_api/index.html b/files/fr/web/api/notifications_api/index.html
new file mode 100644
index 0000000000..b8ee7c258f
--- /dev/null
+++ b/files/fr/web/api/notifications_api/index.html
@@ -0,0 +1,93 @@
+---
+title: API de Notifications
+slug: Web/API/Notifications_API
+tags:
+  - API Notifications
+  - Notifications
+  - permission
+  - système
+translation_of: Web/API/Notifications_API
+---
+<p>{{DefaultAPISidebar("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+
+<p class="summary"><span class="seoSummary">L'API Notifications permet aux pages Web de contrôler l'affichage des notifications système de l'utilisateur final. Ceux-ci sont en dehors de la fenêtre du contexte de navigation de niveau supérieur, ils peuvent donc être affichés même lorsque l'utilisateur a changé d'onglet ou déplacé vers une autre application. L'API est conçue pour être compatible avec les systèmes de notification existants, sur différentes plates-formes.</span></p>
+
+<h2 id="Concepts_et_utilisation">Concepts et utilisation</h2>
+
+<p>Sur les plates-formes prises en charge, l'affichage d'une notification système implique généralement deux choses. Tout d'abord, l'utilisateur doit accorder l'autorisation à l' {{glossary("Origin","origine")}} actuelle pour afficher les notifications système, ce qui est généralement effectué lorsque l'application ou le site s'initialise, à l'aide de la méthode {{domxref ("Notification.requestPermission()")}}. Cela doit être fait en réponse à un geste de l'utilisateur, tel que cliquer sur un bouton, par exemple:</p>
+
+<pre class="brush: js notranslate">btn.addEventListener('click', () =&gt; {
+  let promise = Notification.requestPermission()
+  // wait for permission
+})</pre>
+
+<div class="blockIndicator note">
+<p>Il ne s'agit pas seulement d'une bonne pratique - vous ne devriez pas envoyer de spam aux utilisateurs avec des notifications qu'ils n'acceptent pas - mais les navigateurs suivants interdiront explicitement les notifications non déclenchées en réponse à un geste de l'utilisateur. Firefox le fait déjà depuis la version 72, par exemple.</p>
+</div>
+
+<p>Cela créera une boîte de dialogue, proche de cette apparence:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/17008/Screen_Shot_2019-12-11_at_9.59.14_AM.png" style="border-style: solid; border-width: 1px; display: block; height: 183px; margin: 0px auto; width: 643px;"></p>
+
+<p>De là, l'utilisateur peut choisir d'autoriser les notifications de cette origine ou de les bloquer. Une fois le choix effectué, le paramètre persistera généralement pour la session en cours.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Depuis Firefox 44, les autorisations pour les notifications et le push ont été fusionnées. Si l'autorisation est accordée pour les notifications, le push sera également activé.</p>
+</div>
+
+<p>Ensuite, une nouvelle notification est créée à l'aide du constructeur {{domxref ("Notification.Notification", "Notification ()")}}. Auquel on doit passé un titre en argument et il peut éventuellement recevoir un objet d'options pour personnalisés la notification, telles que la direction du texte, le corps du texte, l'icône à afficher, le son de notification à lire, etc.</p>
+
+<p>En outre, la spécification de l'API Notifications spécifie un certain nombre d'ajouts à l'<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API">API ServiceWorker</a>, pour permettre aux service worker de déclencher des notifications.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Pour en savoir plus sur l'utilisation des notifications dans votre propre application, lisez <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a>.</p>
+</div>
+
+<h2 id="Les_interfaces_de_Notifications">Les interfaces de Notifications</h2>
+
+<dl>
+ <dt>{{domxref("Notification")}}</dt>
+ <dd>Définit un objet <code>Notification</code>.</dd>
+</dl>
+
+<h3 id="Ajout_de_service_worker">Ajout de service worker</h3>
+
+<dl>
+ <dt>{{domxref("ServiceWorkerRegistration")}}</dt>
+ <dd>Inclut les méthodes {{domxref ("ServiceWorkerRegistration.showNotification()")}} et {{domxref ("ServiceWorkerRegistration.getNotifications()")}}, pour contrôler l'affichage des notifications.</dd>
+ <dt>{{domxref("ServiceWorkerGlobalScope")}}</dt>
+ <dd>Inclut le gestionnaire {{domxref ("ServiceWorkerGlobalScope.onnotificationclick")}}, pour déclencher des fonctions personnalisées lorsqu'un utilisateur clique sur une notification.</dd>
+ <dt>{{domxref("NotificationEvent")}}</dt>
+ <dd>Un type spécifique d'objet événement, basé sur {{domxref ("ExtendableEvent")}}, qui représente une notification qui s'est déclenchée.</dd>
+</dl>
+
+<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('Web Notifications')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.Notification")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/notifyaudioavailableevent/index.html b/files/fr/web/api/notifyaudioavailableevent/index.html
new file mode 100644
index 0000000000..2b388ba495
--- /dev/null
+++ b/files/fr/web/api/notifyaudioavailableevent/index.html
@@ -0,0 +1,24 @@
+---
+title: NotifyAudioAvailableEvent
+slug: Web/API/NotifyAudioAvailableEvent
+tags:
+  - API
+  - Audio
+  - Déprécié
+  - Non-standard
+  - Reference
+  - Référence(2)
+translation_of: Web/API/NotifyAudioAvailableEvent
+---
+<div>{{APIRef("Web Audio API")}}{{Non-standard_header}}{{Deprecated_header}}</div>
+
+<p><span class="seoSummary">L'interface <code><strong>NotifyAudioAvailableEvent</strong></code> non standard et obsolète définit l'événement envoyé aux éléments audio lorsque la mémoire tampon audio est pleine.</span></p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt><code>frameBuffer</code> {{ReadOnlyInline}}</dt>
+ <dd>Un {{jsxref("Float32Array")}} contenant les données audo à virgule flottante 32 bits brutes obtenues à partir du décodage de l'audio (par exemple, les données brutes envoyées au matériel audio par rapport à l'audio codé). Les données sont une série d'échantillons audio, chaque échantillon contenant une valeur de 32 bits par canal audio. Toutes les trames audio sont normalisées pour contenir 1024 échantillons par défaut, mais peuvent avoir une longueur comprise entre 512 et 16384 échantillons si l'utilisateur a défini une longueur différente à l'aide de l'attribut <code><strong>mozFrameBufferLength</strong></code>.</dd>
+ <dt><code>time</code></dt>
+ <dd>Valeur à virgule flottante indiquant le temps en secondes auquel le premier échantillon du <code>frameBuffer</code> se produit, par rapport au début de la piste audio.</dd>
+</dl>
diff --git a/files/fr/web/api/offscreencanvas/index.html b/files/fr/web/api/offscreencanvas/index.html
new file mode 100644
index 0000000000..907cfa2f7c
--- /dev/null
+++ b/files/fr/web/api/offscreencanvas/index.html
@@ -0,0 +1,196 @@
+---
+title: OffscreenCanvas
+slug: Web/API/OffscreenCanvas
+tags:
+  - API
+  - Canevas
+  - Experimental
+  - Interface
+  - Reference
+translation_of: Web/API/OffscreenCanvas
+---
+<div>{{APIRef("Canvas API")}} {{SeeCompatTable}}</div>
+
+<p>L'interface <code>OffscreenCanvas</code> fournit un canevas qui peut être restitué hors écran. Il est disponible dans les contextes à la fois window et <a href="/fr-FR/docs/Web/API/Web_Workers_API">worker</a>.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Cette API n'est actuellement implémentée que pour les contextes <a href="/fr-FR/docs/Web/API/WebGLRenderingContext">WebGL1</a> et<a href="/fr-FR/docs/Web/API/WebGL2RenderingContext">WebGL2</a>. Voir {{bug(801176)}} pour le support de l'<a href="/fr-FR/docs/Web/API/Canvas_API">API canvas</a> depuis les workers.</p>
+</div>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("OffscreenCanvas.OffscreenCanvas", "OffscreenCanvas()")}}</dt>
+ <dd>Constructeur <code>OffscreenCanvas</code>. Crée un nouvel objet <code>OffscreenCanvas</code>.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("OffscreenCanvas.height")}}</dt>
+ <dd>La hauteur du canevas hors écran.</dd>
+ <dt>{{domxref("OffscreenCanvas.width")}}</dt>
+ <dd>La largeur du canevas hors écran.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("OffscreenCanvas.getContext()")}}</dt>
+ <dd>Retourne un contexte de rendu pour le canevas hors écran.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("OffscreenCanvas.toBlob()")}}</dt>
+ <dd>Crée un objet {{domxref("Blob")}} représentant l'image contenue dans le canevas.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("OffscreenCanvas.transferToImageBitmap()")}}</dt>
+ <dd>Crée un objet {{domxref("ImageBitmap")}} à partir de l'image la plus récemment générée du <code>OffscreenCanvas</code>.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Affichage_synchrone_d'images_produites_par_un_OffscreenCanvas">Affichage synchrone d'images produites par un <code>OffscreenCanvas</code></h3>
+
+<p>Une façon d'utiliser l'API <code>OffscreenCanvas</code> est d'utiliser un {{domxref("RenderingContext")}} obtenu à partir d'un objet <code>OffscreenCanvas</code> pour générer de nouvelles images. Une fois qu'une nouvelle image a fini d'être générée dans ce contexte, la méthode {{domxref("OffscreenCanvas.transferToImageBitmap", "transferToImageBitmap()")}} peut être appelée pour sauvegarder l'image générée la plus récente. Cette méthode retourne un objet {{domxref("ImageBitmap")}}, qui peut être utilisé dans une grande variété d'API Web et également dans un second canevas, sans créer de copie par transfert.</p>
+
+<p>Pour afficher l'<code>ImageBitmap</code>, vous pouvez utiliser un contexte {{domxref("ImageBitmapRenderingContext")}}, qui peut être créé en appelant <code>canvas.getContext("bitmaprenderer")</code> sur un élément canevas (visible). Ce contexte fournit uniquement des fonctionnalités pour remplacer le contenu du canevas par l'<code>ImageBitmap</code> donnée. Un appel à {{domxref("ImageBitmapRenderingContext.transferImageBitmap()")}} avec l'<code>ImageBitmap</code> précédemment affichée et enregistrée à partir de OffscreenCanvas, affichera l'<code>ImageBitmap</code> sur le canevas et transférera son appartenance au canevas. Un seul <code>OffscreenCanvas</code> peut transférer des images dans un nombre arbitraire d'autres objets <code>ImageBitmapRenderingContext</code>.</p>
+
+<p>Étant donnés ces deux éléments {{HTMLElement("canvas")}} :</p>
+
+<pre class="brush: html">&lt;canvas id="une"&gt;&lt;/canvas&gt;
+&lt;canvas id="deux"&gt;&lt;/canvas&gt;</pre>
+
+<p>le code suivant fournira la restitution, en utilisant un <code>OffscreenCanvas</code> comme décrit ci-dessus.</p>
+
+<pre class="brush: js">var une = document.getElementById("une").getContext("bitmaprenderer");
+var deux = document.getElementById("deux").getContext("bitmaprenderer");
+
+var horsEcran = new OffscreenCanvas(256, 256);
+var gl = horsEcran.getContext('webgl');
+
+// ... un peu de dessin pour le premier canevas en utilisant le contexte gl ...
+
+// Exécuter la restitution dans le premier canevas
+var bitmapUne = horsEcran.transferToImageBitmap();
+une.transferImageBitmap(bitmapUne);
+
+// ... davantage de dessin pour le second canevas en utilisant le context gl ...
+
+// Exécuter la restitution pour le second canevas
+var bitmapDeux = horsEcran.transferToImageBitmap();
+deux.transferImageBitmap(bitmapDeux);
+</pre>
+
+<h3 id="Affichage_asynchrone_d'images_produites_par_un_OffscreenCanvas">Affichage asynchrone d'images produites par un <code>OffscreenCanvas</code></h3>
+
+<p>Une autre façon d'utiliser l'API <code>OffscreenCanvas</code> est d'appeler {{domxref("HTMLCanvasElement.transferControlToOffscreen", "transferControlToOffscreen()")}} sur un élément {{HTMLElement("canvas")}}, soit sur un worker, soit sur le thread principal, ce qui retournera un objet <code>OffscreenCanvas</code> à partir d'un objet {{domxref("HTMLCanvasElement")}} depuis le thread principal. Appeler {{domxref("OffscreenCanvas.getContext", "getContext()")}} permettra d'obtienir alors un <code>RenderingContext</code> à partir de ce <code>OffscreenCanvas</code>.</p>
+
+<p>Afin de rendre les cadres visibles, vous pouvez appeler <code>commit()</code> sur ce <code>RenderingContext</code>, afin que les cadres soient renvoyés dans l'élément {{HTMLElement ("canvas")}} original.</p>
+
+<p>Notez que dans Firefox, cette API n'est actuellement implémentée que pour le <a href="/fr-FR/docs/Web/API/WebGL_API">contexte WebGL</a> ({{domxref ("WebGLRenderingContext.commit()")}}). Pour la prise en charge de l'API Canvas 2D par les employés, voir {{bug (801176)}}.</p>
+
+<p>main.js (code du thread principal) :</p>
+
+<pre class="brush: js">var canevasHtml = document.getElementById("canevas");
+var horsEcran = canevasHtml.transferControlToOffscreen();
+
+var worker = new Worker("offscreencanvas.js");
+worker.postMessage({canvas: offscreen}, [offscreen]);
+</pre>
+
+<p>offscreencanvas.js (code worker) :</p>
+
+<pre class="brush: js">onmessage = function(evt) {
+  var canevas = evt.data.canvas.
+  var gl = canevas.getContext("webgl");
+
+  // ... un peu de dessin en utilisant le contexte gl ...
+
+  // Renvoyer les images dans l'HTMLCanvasElement original
+  gl.commit();
+};
+</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', "scripting.html#the-offscreencanvas-interface", "OffscreenCanvas")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatChrome("60")}} [2]</td>
+   <td>{{CompatGeckoDesktop(44)}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(44)}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Cette fonctionnalité se trouve derrière un paramètre de préférence de fonctionnalité. Dans about:config, mettre <code>gfx.offscreencanvas.enabled</code> à <code>true</code>.<br>
+ [2] Cette fonctionnalité se trouve derrière un indicateur. Dans <code>chrome://flags,</code> cliquer sur <code>Activer</code> pour <code>Experimental canvas features</code></p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://hacks.mozilla.org/2016/01/webgl-off-the-main-thread/">WebGL Off the Main Thread – Mozilla Hacks</a></li>
+ <li>{{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("ImageBitmap")}}</li>
+ <li>{{domxref("ImageBitmapRenderingContext")}}</li>
+ <li>{{domxref("HTMLCanvasElement.transferControlToOffscreen()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.commit()")}}</li>
+</ul>
diff --git a/files/fr/web/api/oscillatornode/index.html b/files/fr/web/api/oscillatornode/index.html
new file mode 100644
index 0000000000..ee9cfd0cef
--- /dev/null
+++ b/files/fr/web/api/oscillatornode/index.html
@@ -0,0 +1,156 @@
+---
+title: OscillatorNode
+slug: Web/API/OscillatorNode
+translation_of: Web/API/OscillatorNode
+---
+<p>{{APIRef("Web Audio API")}}</p>
+
+<div>
+<p>L'interface <code>OscillatorNode</code> représente un signal périodique, une sinusoïde par exemple. C'est un module de traitement audio {{domxref("AudioNode")}} qui crée un signal sinusoïdal à une fréquence donnée — c'est-à-dire génère une tonalité constante.</p>
+</div>
+
+<p>On crée un <code style="font-size: 14px;">OscillatorNode</code> en utilisant la méthode {{domxref("AudioContext.createOscillator")}}. Il a toujours exactement une sortie, et aucune entrée. Ses propriétés par défaut (voir {{domxref("AudioNode")}} pour la définition) sont :</p>
+
+<ul>
+ <li>Nombre d'entrées : <code>0</code></li>
+ <li>Nombre de sorties : <code>1</code></li>
+ <li>Mode de calcul des canaux : <code>max</code></li>
+ <li>Nombre de canaux : <code>2</code> (propriété ignorée dans le mode de calcul par défaut)</li>
+ <li>Interprétation des canaux : <code>speakers</code></li>
+</ul>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Hérite des propriétés de ses parents, </em><em>{{domxref("AudioNode")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("OscillatorNode.frequency")}}</dt>
+ <dd>{{domxref("AudioParam")}} de type <a href="/fr/docs/Web/API/AudioParam#a-rate">a-rate</a> représentant la fréquence d'oscillation en Hertz (la propriété frequency est en lecture seule, mais sa sous-propriété value ne l'est pas).</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("OscillatorNode.detune")}}</dt>
+ <dd>{{domxref("AudioParam")}} de type <a href="/fr/docs/Web/API/AudioParam#a-rate">a-rate</a> représentant le désaccordage de l' oscillation exprimé en cents  (la propriété detune est en lecture seule, mais sa sous-propriété value ne l'est pas).</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("OscillatorNode.type")}}</dt>
+ <dd>Chaîne de caractères indiquant la forme de l'onde générée. Différentes ondes produisent différentes tonalités.  Les valeurs standard sont <code>"sine"</code>, <code>"square"</code>, <code>"sawtooth"</code>, <code>"triangle"</code> et <code>"custom"</code>. La valeur par défault is <code>"sine"</code>. <code>custom</code> permet d'utiliser une {{domxref("PeriodicWave")}} pour décrire une forme d'onde personnalisée.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Hérite des méthodes de ses parents, {{domxref("AudioNode")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("OscillatorNode.start()")}}</dt>
+ <dd>Cette méthode déclenche la lecture du son.</dd>
+ <dt>{{domxref("OscillatorNode.stop()")}}</dt>
+ <dd>Cette méthode interrompt la lecture du son.</dd>
+ <dt>{{domxref("OscillatorNode.setPeriodicWave()")}}</dt>
+ <dd>Cette méthode définit une {{domxref("PeriodicWave")}} qui peut être utilisée pour donner sa forme à la sortie de l'oscillateur, quand on utilise l'attribut <code>type = "custom"</code>. Elle remplace la méthode devenue obsolète {{domxref("OscillatorNode.setWaveTable")}}.</dd>
+</dl>
+
+<h2 id="Event_handlers">Event handlers</h2>
+
+<dl>
+ <dt>{{domxref("OscillatorNode.onended")}}</dt>
+ <dd>Propriété utilisée pour assigner un gestionnaire d'évènement à l'évènement <code>ended</code>, qui est émis une fois que la lecture du son est terminée.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>L'exemple suivant montre une utilisation basique d'un {{ domxref("AudioContext") }} pour créer un <code>OscillatorNode</code>. Pour un exemple appliqué, jetez un oeil à notre <a href="http://mdn.github.io/violent-theremin/">Violent Theremin demo</a> (voir<a href="https://github.com/mdn/violent-theremin/blob/gh-pages/scripts/app.js"> app.js</a> pour l'intégralité du code).</p>
+
+<pre class="brush: js">// crée un contexteaudio
+var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+
+// create Oscillator node
+var oscillator = contexteAudio.createOscillator();
+oscillator.connect(contexteAudio.destination);
+oscillator.type = 'square';
+oscillator.frequency.value = 440; // valeur en hertz
+
+oscillator.start();</pre>
+
+<div>
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#the-oscillatornode-interface', 'OscillatorNode')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_avec_les_navigateurs">Compatibilité avec les navigateurs</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>14 {{property_prefix("webkit")}}</td>
+   <td>23</td>
+   <td>{{CompatNo}}</td>
+   <td>15 {{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>28 {{property_prefix("webkit")}}</td>
+   <td>25</td>
+   <td>1.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
+</div>
+
+<p> </p>
diff --git a/files/fr/web/api/page_visibility_api/index.html b/files/fr/web/api/page_visibility_api/index.html
new file mode 100644
index 0000000000..1a3c041ec6
--- /dev/null
+++ b/files/fr/web/api/page_visibility_api/index.html
@@ -0,0 +1,263 @@
+---
+title: Page Visibility API
+slug: Web/API/Page_Visibility_API
+translation_of: Web/API/Page_Visibility_API
+---
+<div>{{DefaultAPISidebar("Page Visibility API")}}</div>
+
+<p><span class="seoSummary"><strong>L’API <em>Page Visibility</em></strong> (« visibilité de la page ») permet de savoir quand une page web est visible ou a le focus.</span> Avec la navigation par onglets, il y a une probabilité raisonnable qu’une page web donnée soit en arrière-plan, donc masquée pour l’utilisateur. Quand celui-ci minimise la page ou bascule vers un autre onglet, l’API émet un évènement {{event("visibilitychange")}} correspondant à la visibilité de la page. Vous pouvez détecter cet évènement et réaliser différentes actions ou modifier un comportement. Par exemple, si votre application web est en train de lire une vidéo, elle peut mettre cette dernière en pause au moment où l’utilisateur regarde un autre onglet, et reprendre la lecture quand la personne revient à l’onglet. L’utilisateur ne perd pas le fil de la vidéo et peut continuer à la regarder.</p>
+
+<p>L’état de visibilité d’une {{HTMLElement("iframe")}} est le même que celui du document parent. Masquer l’iframe via une propriété CSS ne déclenche pas d’évènement de visibilité, ni ne change l’état du document contenu.</p>
+
+<h3 id="Avantages">Avantages</h3>
+
+<p>L’API est particulièrement utile pour économiser des ressources. Elle donne aux développeurs l’opportunité de ne pas réaliser des tâches non nécessaires quand la page web est invisible.</p>
+
+<h3 id="Cas_d’utilisation">Cas d’utilisation</h3>
+
+<p>Quelques exemples :</p>
+
+<ul>
+ <li>Un site comportant un carrousel qui ne doit pas passer à l’image suivante si l’utilisateur ne regarde pas la page.</li>
+ <li>Une application présentant un panneau d’informations, qui ne doit pas demander au serveur une mise à jour des données quand la page n’est pas visible.</li>
+ <li>Une page qui cherche à detecter quand elle est <em>prerendered</em> (pré-calculée), afin de tenir un compte précis du nombre de vues.</li>
+ <li>Un site qui cherche à désactiver les sons quand un appareil est en mode veille (l’utilisateur presse le bouton d’alimentation pour éteindre l’écran).</li>
+</ul>
+
+<p>Historiquement, les développeurs ont utilisé des solutions de remplacement imparfaites pour détecter de tels changements. Par exemple, inscrire un gestionnaire onblur/onfocus sur la fenêtre est utile quand votre page n’est pas la page active, mais cela ne vous dit pas si votre page est masquée pour l’utilisateur. L’API <em>Page Visibility</em> corrige ce problème. (Lorsqu’on compare avec un gestionnaire onblur/onfocus sur la fenêtre, une différence notable est que la page ne devient <em>pas</em> cachée quand une autre fenêtre est rendue active et le navigateur perd le focus. Une page devient cachée seulement quand l’utilisateur bascule vers un autre onglet ou minimise la fenêtre du navigateur.)</p>
+
+<h3 id="Politiques_de_performance_des_pages_en_arrière-plan">Politiques de performance des pages en arrière-plan</h3>
+
+<p>En parallèle avec l’API <em>Page Visibility,</em> un certain nombre de politiques sont en place pour atténuer l’impact négatif sur les performances lié aux onglets en arrière-plan :</p>
+
+<ul>
+ <li>Les appels à {{domxref("Window.requestAnimationFrame()")}} sont suspendus dans la plupart des navigateurs lorsqu’ils sont effectués dans un onglet en arrière-plan ou une {{ HTMLElement("iframe") }} cachée, afin d’améliorer les performances et l’autonomie de la batterie.</li>
+ <li>Les timers tels que {{domxref("WindowOrWorkerGlobalScope.setTimeout")}} sont retardés dans les onglets inactifs ou en arrière-plan pour aider à l’amélioration des performances. Voir <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Reasons_for_delays_longer_than_specified"><em>Reasons for delays longer than specified</em></a> pour plus de détails.</li>
+ <li>Les navigateurs modernes (Firefox 58+, Chrome 57+) ont mis en œuvre un retardement basé sur un budget pour les timeouts en arrière-plan. Cela place une limite supplémentaire sur la consommation de CPU des timers en arrière-plan. Cette limite opère de manière similaire dans tous les navigateurs modernes, avec les détails qui suivent :
+  <ul>
+   <li>Dans Firefox, les fenêtres d’onglets en arrière-plan ont chacune leur propre budget de temps en millisecondes — une valeur maximum et minimum de +50 ms et -150 ms, respectivement. Chrome est très similaire, excepté que le budget est spécifié en secondes.</li>
+   <li>Les fenêtres sont sujettes au retardement après 30 secondes, avec les mêmes règles de délai de retardement que spécifiées pour les timers (encore une fois, voir <em><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Reasons_for_delays_longer_than_specified">Reasons for delays longer than specified</a></em>). Pour Chrome, cette valeur est de 10 secondes.</li>
+   <li>Les tâches de timers sont permises seulement quand le budget est non négatif.</li>
+   <li>Quand un timer a été exécuté, son temps d’exécution est retranché au budget de la fenêtre depuis laquelle le timer a été appelé.</li>
+   <li>Le budget regénère à un taux de 10 ms par seconde, sous Firefox et sous Chrome.</li>
+  </ul>
+ </li>
+ <li>Certaines opérations sont exemptées de retardement :
+  <ul>
+   <li>Les applications qui jouent du son sont considérées comme en avant-plan, et donc ne sont pas retardées.</li>
+   <li>Les applications avec des connexions en temps réel (<a href="/en-US/docs/Web/API/WebSockets_API">WebSockets</a> et <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a>), afin d’éviter que ces connexions soient fermées par timeout.</li>
+   <li>Les opérations <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a>.</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Voir <a href="http://daniemon.com/tech/webapps/page-visibility/">l’exemple en direct</a> (vidéo avec son).</p>
+
+<p>Cet exemple, qui met la vidéo en pause quand vous basculez vers un autre onglet, et reprend la lecture quand vous y revenez, a été créé avec le code suivant :</p>
+
+<pre class="brush: js">// Set the name of the hidden property and the change event for visibility
+var hidden, visibilityChange;
+if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support
+  hidden = "hidden";
+  visibilityChange = "visibilitychange";
+} else if (typeof document.msHidden !== "undefined") {
+  hidden = "msHidden";
+  visibilityChange = "msvisibilitychange";
+} else if (typeof document.webkitHidden !== "undefined") {
+  hidden = "webkitHidden";
+  visibilityChange = "webkitvisibilitychange";
+}
+
+var videoElement = document.getElementById("videoElement");
+
+// If the page is hidden, pause the video;
+// if the page is shown, play the video
+function handleVisibilityChange() {
+  if (document.hidden) {
+    videoElement.pause();
+  } else {
+    videoElement.play();
+  }
+}
+
+// Warn if the browser doesn't support addEventListener or the Page Visibility API
+if (typeof document.addEventListener === "undefined" || typeof document.hidden === "undefined") {
+  console.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
+} else {
+  // Handle page visibility change
+  document.addEventListener(visibilityChange, handleVisibilityChange, false);
+
+  // When the video pauses, set the title.
+  // This shows the paused
+  videoElement.addEventListener("pause", function(){
+    document.title = 'Paused';
+  }, false);
+
+  // When the video plays, set the title.
+  videoElement.addEventListener("play", function(){
+    document.title = 'Playing';
+  }, false);
+
+}
+</pre>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>
+ <p id="document.hidden_Read_only">{{domxref("document.hidden")}} <span class="inlineIndicator readOnly readOnlyInline" title="This value may not be changed.">Read only </span></p>
+ </dt>
+ <dd>
+ <p>Retourne <code>true</code> si la page est dans un état considéré comme masqué à l’utilisateur, et <code>false</code> dans le cas contraire.</p>
+ </dd>
+ <dt>
+ <p id="document.visibilityState_Read_only">{{domxref("document.visibilityState")}} <span class="inlineIndicator readOnly readOnlyInline" title="This value may not be changed.">Read only </span></p>
+ </dt>
+ <dd>
+ <p>Une <code>string</code> représentant l’état de visibilité du document. Valeurs possibles :</p>
+
+ <ul>
+  <li><code>visible</code> : le contenu de la page peut être au moins partiellement visible. En pratique, cela signifie que la page est l’onglet actif d’une fenêtre non minimisée.</li>
+  <li><code>hidden</code> : le contenu de la page n’est pas visible pour l’utilisateur. En pratique, cela signifie que le document est soit dans un onglet en arrière-plan, soit dans une fenêtre minimizée ; ou bien que l’écran de verrouillage de l’OS est actif.</li>
+  <li><code>prerender</code> : le contenu de la page est en train d’être précalculé et n’est pas visible pour l’utilisateur (il est considéré masqué pour <code>document.hidden</code>). Le document peut être dans cet état initialement, mais ne passera jamais à cet état depuis une autre valeur. Note : le support des navigateurs est optionnel.</li>
+  <li><code>unloaded</code> : la page est en train d’être déchargée de la mémoire. Note : le support des navigateurs est optionnel.</li>
+ </ul>
+
+ <pre class="brush: js">//startSimulation and pauseSimulation defined elsewhere
+function handleVisibilityChange() {
+  if (document.hidden) {
+    pauseSimulation();
+  } else  {
+    startSimulation();
+  }
+}
+
+document.addEventListener("visibilitychange", handleVisibilityChange, false);
+</pre>
+ </dd>
+ <dt>
+ <p>{{domxref("document.onvisibilitychange")}}</p>
+ </dt>
+ <dd>
+ <p>Un {{domxref("EventHandler")}} représentant le code à appeler quand l’évènement {{event("visibilitychange")}} est émis.</p>
+ </dd>
+</dl>
+
+<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('Page Visibility API')}}</td>
+   <td>{{Spec2('Page Visibility API')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>13 {{property_prefix("webkit")}}<br>
+    33</td>
+   <td>{{CompatGeckoDesktop(18)}}<sup>[2]</sup></td>
+   <td>10</td>
+   <td>12.10<sup>[1]</sup></td>
+   <td>7</td>
+  </tr>
+  <tr>
+   <td><code>onvisibilitychange</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(56)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Retardement à budget</td>
+   <td>57</td>
+   <td>{{CompatGeckoDesktop(58)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>5.0<sup>[3]</sup></td>
+   <td>{{CompatGeckoMobile(18)}}<sup>[2]</sup></td>
+   <td>10</td>
+   <td>12.10<sup>[1]</sup></td>
+   <td>7<sup>[4]</sup></td>
+  </tr>
+  <tr>
+   <td><code>onvisibilitychange</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(56)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Retardement à budget</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(58)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] N’émet pas d’évènement {{event("visibilitychange")}} quand la fenêtre du navigateur est minimisée, ni ne passe <code>hidden</code> à <code>true</code>.</p>
+
+<p>[2] De Firefox 10 à Firefox 51 inclus, cette propriété pouvait être utilisée avec le préfixe <code>moz</code>.</p>
+
+<p>[3] Android 4.4 supporte cette fonctionnalité avec le préfixe <code>webkit</code>.</p>
+
+<p>[4] À partir d’iOS 11.0.2, les valeurs sont incorrectes en mode standalone (quand vous pressez « ajouter à l’écran d’accueil ») et quand l’écran est verrouillé (le bouton d’alimentation a été pressé). La valeur pour <code>hidden</code> est <code>false</code> et <code>visibilityState</code> est <code>visible</code>.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La description de <a href="http://blogs.msdn.com/b/ie/archive/2011/07/08/using-pc-hardware-more-efficiently-in-html5-new-web-performance-apis-part-2.aspx" title="Page Visibility on IEBlog">l’API Page Visibility</a> sur l’IEBlog</li>
+ <li>La description de <a href="http://code.google.com/chrome/whitepapers/pagevisibility.html" title="Page Visibility API by Google">l’API Page Visibility</a> par Google</li>
+</ul>
diff --git a/files/fr/web/api/pagetransitionevent/index.html b/files/fr/web/api/pagetransitionevent/index.html
new file mode 100644
index 0000000000..88e918b253
--- /dev/null
+++ b/files/fr/web/api/pagetransitionevent/index.html
@@ -0,0 +1,64 @@
+---
+title: PageTransitionEvent
+slug: Web/API/PageTransitionEvent
+translation_of: Web/API/PageTransitionEvent
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p>Les évènements de transition de page sont émis quand une page web est chargée ou déchargée.</p>
+
+<h2 id="Information_du_DOM">Information du DOM</h2>
+
+<h3 id="Hiérarchie_d’héritage">Hiérarchie d’héritage</h3>
+
+<div><a href="/fr/docs/Web/API/Event">Event</a>
+
+<div>   PageTransitionEvent</div>
+</div>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;body onpageshow="myFunction(event)"&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">function myFunction(event) {
+    if (event.persisted) {
+        alert("La page a été mise en cache par le navigateur");
+    } else {
+        alert("La page n’a PAS été mise en cache par le navigateur");
+    }
+}</pre>
+
+<h2 id="Membres">Membres</h2>
+
+<p>L’objet <strong>PageTransitionEvent</strong> possède les types de membres suivants :</p>
+
+<ul>
+ <li><a href="#Propriétés">Propriétés</a></li>
+</ul>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<p>L’objet <strong>PageTransitionEvent</strong> possède les propriétés suivantes :</p>
+
+<table class="members" id="memberListProperties">
+ <tbody>
+  <tr>
+   <th>Propriété</th>
+   <th>Type d’accès</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <th><code>persisted</code></th>
+   <th>Lecture seule</th>
+   <th>Indique si une page web est chargée depuis le cache.</th>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/api/parentnode/append/index.html b/files/fr/web/api/parentnode/append/index.html
new file mode 100644
index 0000000000..d6818894a3
--- /dev/null
+++ b/files/fr/web/api/parentnode/append/index.html
@@ -0,0 +1,137 @@
+---
+title: ParentNode.append()
+slug: Web/API/ParentNode/append
+tags:
+  - API
+  - DOM
+  - Reference
+translation_of: Web/API/ParentNode/append
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La méthode <strong><code>ParentNode.append</code></strong> insère un ensemble d’objets {{domxref("Node")}} ou {{domxref("DOMString")}} après le dernier enfant de <code>ParentNode</code>. Les objets {{domxref("DOMString")}} (c’est-à-dire les chaînes de caractères) sont insérés comme nœuds {{domxref("Text")}} équivalents.</p>
+
+<p>Différences avec {{domxref("Node.appendChild()")}} :</p>
+
+<ul>
+ <li><code>ParentNode.append()</code> vous permet également d’ajouter des objet {{domxref("DOMString")}}, tandis que <code>Node.appendChild()</code> accepte seulement les objets {{domxref("Node")}}.</li>
+ <li><code>ParentNode.append()</code> n’a pas de valeur de retour, tandis que <code>Node.appendChild()</code> retourne l’objet {{domxref("Node")}} ajouté.</li>
+ <li><code>ParentNode.append()</code> peut ajouter plusieurs nœuds et chaînes, alors que<code>Node.appendChild()</code> peut seulement ajouter un nœud.</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">[Throws, Unscopable]
+void ParentNode.append((Node or DOMString)... nodes);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>nodes</code></dt>
+ <dd>Un ensemble d’objets {{domxref("Node")}} ou {{domxref("DOMString")}} à insérer.</dd>
+</dl>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<ul>
+ <li>{{domxref("HierarchyRequestError")}} :<br>
+  Le nœud ne peut pas être inséré au point spécifié dans la hiérarchie.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Ajouter_un_élément">Ajouter un élément</h3>
+
+<pre class="brush: js">var parent = document.createElement("div");
+var p = document.createElement("p");
+parent.append(p);
+
+console.log(parent.childNodes); // NodeList [ &lt;p&gt; ]
+</pre>
+
+<h3 id="Ajouter_du_texte">Ajouter du texte</h3>
+
+<pre class="brush: js">var parent = document.createElement("div");
+parent.append("Du texte");
+
+console.log(parent.textContent); // "Du texte"</pre>
+
+<h3 id="Ajouter_un_élément_et_du_texte">Ajouter un élément et du texte</h3>
+
+<pre class="brush: js">var parent = document.createElement("div");
+var p = document.createElement("p");
+parent.append("Du texte", p);
+
+console.log(parent.childNodes); // NodeList [ #text "Du texte", &lt;p&gt; ]</pre>
+
+<h3 id="ParentNode.append_est_unscopable"><code>ParentNode.append()</code> est <em>unscopable</em></h3>
+
+<p>La méthode <code>append()</code> n’est pas accessible dans un bloc <code>with</code>. Voir {{jsxref("Symbol.unscopables")}} pour plus d’information.</p>
+
+<pre class="brush: js">var parent = document.createElement("div");
+
+with(parent) {
+  append("foo");
+}
+// ReferenceError: append is not defined </pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Vous pouvez utiliser la méthode <code>append()</code> dans Internet Explorer 9 (et supérieur) avec le code suivant :</p>
+
+<pre class="brush: js">// 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="Spécification">Spécification</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('DOM WHATWG', '#dom-parentnode-append', 'ParentNode.append()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.ParentNode.append")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>{{domxref("ParentNode")}} et {{domxref("ChildNode")}}</li>
+ <li>{{domxref("ParentNode.prepend()")}}</li>
+ <li>{{domxref("Node.appendChild()")}}</li>
+ <li>{{domxref("ChildNode.after()")}}</li>
+ <li>{{domxref("NodeList")}}</li>
+</ul>
diff --git a/files/fr/web/api/parentnode/childelementcount/index.html b/files/fr/web/api/parentnode/childelementcount/index.html
new file mode 100644
index 0000000000..df243c5b32
--- /dev/null
+++ b/files/fr/web/api/parentnode/childelementcount/index.html
@@ -0,0 +1,98 @@
+---
+title: ParentNode.childElementCount
+slug: Web/API/ParentNode/childElementCount
+tags:
+  - API
+  - DOM
+  - Noeuds
+  - Propriétés
+  - Reference
+  - parent
+translation_of: Web/API/ParentNode/childElementCount
+---
+<div>
+<p>{{APIRef("DOM") }}</p>
+</div>
+
+<p>La propriété <code><strong>ParentNode.childElementCount</strong></code> en lecture seule renvoie un <code>unsigned long</code> (<em>long non signé</em>) représentant le nombre d'élèments fils de l'élément donné.</p>
+
+<div class="note">
+<p>Cette propriété a été définie dans la pure interface {{domxref("ElementTraversal")}}.<br>
+ Comme cette interface contenait deux différents jeux de propriétés, l'un visant les  {{domxref("Node")}} (<em>noeuds</em>) qui ont des enfants, l'autre les enfants, ils ont été déplacés dans deux interfaces pures, {{domxref("ParentNode")}} et {{domxref("ChildNode")}}. Dans ce cas, <code>childElementCount</code> a été rattaché à {{domxref("ParentNode")}}. C'est un changement assez technique qui ne devrait pas affecter la compatibilité.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <var>count</var> = <em>node</em>.childElementCount;
+</pre>
+
+<dl>
+ <dt>count</dt>
+ <dd>détient la valeur de retour, un type <code>unsigned long</code> (<em>long non signé</em>) (simplement un nombre entier)</dd>
+ <dt>node</dt>
+ <dd>est un objet représentant un <code>Document</code>, un <code>DocumentFragment</code> ou un <code>Element</code>.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush:js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> foo <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"foo"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">if</span> <span class="punctuation token">(</span>foo<span class="punctuation token">.</span>childElementCount <span class="operator token">&gt;</span> <span class="number token">0</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="comment token">// faire quelque chose</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h2 id="Polyfill_pour_IE8_IE9_Safari">Polyfill pour IE8 &amp; IE9 &amp; Safari</h2>
+
+<p>Cette propriété n'est pas supportée par les versions antérieures à IE9 ni par IE9 ni par Safari. Ainsi, les objets Document, DocumentFragment dans ces navigateurs ne l'ont pas.</p>
+
+<pre class="brush:js line-numbers  language-js"><code class="language-js"><span class="punctuation token">;</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>constructor<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">if</span> <span class="punctuation token">(</span>constructor <span class="operator token">&amp;&amp;</span>
+        constructor<span class="punctuation token">.</span>prototype <span class="operator token">&amp;&amp;</span>
+        constructor<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>childElementCount <span class="operator token">==</span> <span class="keyword token">null</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        Object<span class="punctuation token">.</span><span class="function token">defineProperty</span><span class="punctuation token">(</span>constructor<span class="punctuation token">.</span>prototype<span class="punctuation token">,</span> <span class="string token">'childElementCount'</span><span class="punctuation token">,</span> <span class="punctuation token">{</span>
+            <span class="keyword token">get</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="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">,</span> count <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">,</span> node<span class="punctuation token">,</span> nodes <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">.</span>childNodes<span class="punctuation token">;</span>
+                <span class="keyword token">while</span> <span class="punctuation token">(</span>node <span class="operator token">=</span> nodes<span class="punctuation token">[</span>i<span class="operator token">++</span><span class="punctuation token">]</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+                    <span class="keyword token">if</span> <span class="punctuation token">(</span>node<span class="punctuation token">.</span>nodeType <span class="operator token">===</span> <span class="number token">1</span><span class="punctuation token">)</span> count<span class="operator token">++</span><span class="punctuation token">;</span>
+                <span class="punctuation token">}</span>
+                <span class="keyword token">return</span> count<span class="punctuation token">;</span>
+            <span class="punctuation token">}</span>
+        <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">(</span>window<span class="punctuation token">.</span>Node <span class="operator token">||</span> window<span class="punctuation token">.</span>Element<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Spécification">Spécification</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('DOM WHATWG', '#dom-parentnode-childElementCount', 'ParentNode.childElementCount')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Divise l'interface <code>ElementTraversal</code> en {{domxref("ChildNode")}} et <code>ParentNode</code>. La propriété est maintenant définie sur cette dernière.<br>
+    Les {{domxref("Document")}} et {{domxref("DocumentFragment")}} implémentent la nouvelle interface.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Element Traversal', '#attribute-childElementCount', 'ElementTraversal.childElementCount')}}</td>
+   <td>{{Spec2('Element Traversal')}}</td>
+   <td>Ajout de sa définition initiale à la pure interface <code>ElementTraversal</code> et de son utilisation sur {{domxref("Element")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+<p>{{Compat("api.ParentNode.childElementCount")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les interfaces pures {{domxref("ParentNode")}} et {{domxref("ChildNode")}}.</li>
+ <li>
+  <div class="syntaxbox">Types d'objets implémentant cette interface pure : {{domxref("Document")}}, {{domxref("Element")}} et {{domxref("DocumentFragment")}}.</div>
+ </li>
+</ul>
diff --git a/files/fr/web/api/parentnode/children/index.html b/files/fr/web/api/parentnode/children/index.html
new file mode 100644
index 0000000000..52c529a1b8
--- /dev/null
+++ b/files/fr/web/api/parentnode/children/index.html
@@ -0,0 +1,89 @@
+---
+title: ParentNode.children
+slug: Web/API/ParentNode/children
+tags:
+  - API
+  - DOM
+  - Noeuds
+  - Propriétés
+  - parent
+translation_of: Web/API/ParentNode/children
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>La propriété <code><strong>children</strong></code> de {{domxref("ParentNode")}} est une propriété en lecture seule qui renvoie une {{domxref("HTMLCollection")}} directe contenant tous les enfants {{domxref("Element","éléments")}} du noeud sur lequel elle a été appelée.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>children</em> = <em>node</em>.children;</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une {{ domxref("HTMLCollection") }}, qui est une collection directe et ordonnée des éléments DOM qui sont enfants du <em><code>node</code></em> (<em>noeud</em>). Vous pouvez accéder aux noeuds enfants individuellement en utilisant la méthode  {{domxref("HTMLCollection.item", "item()")}} (<em>élément</em>) sur la collection ou en utilisant la notation de type tableau (<em>array</em>) de JavaScript.</p>
+
+<p>S'il n'y a pas d'éléments enfants, alors <code>children</code> est une liste vide et a une <code>length</code> (<em>longueur</em>) de <code>0</code>.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> machin <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'machin'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token">&lt;</span> machin<span class="punctuation token">.</span>children<span class="punctuation token">.</span>length<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>machin<span class="punctuation token">.</span>children<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>tagName<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="comment token">// Réécrit le prototype 'children' natif.</span>
+<span class="comment token">// Ajoute le support de Document &amp; DocumentFragment pour IE9 &amp; Safari.</span>
+<span class="comment token">// Renvoie un tableau (<em>array</em>) au lieu d'une HTMLCollection.</span>
+<span class="punctuation token">;</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>constructeur<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">if</span> <span class="punctuation token">(</span>constructeur <span class="operator token">&amp;&amp;</span>
+        constructeur<span class="punctuation token">.</span>prototype <span class="operator token">&amp;&amp;</span>
+        constructeur<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>children <span class="operator token">==</span> <span class="keyword token">null</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        Object<span class="punctuation token">.</span><span class="function token">defineProperty</span><span class="punctuation token">(</span>constructeur<span class="punctuation token">.</span>prototype<span class="punctuation token">,</span> <span class="string token">'children'</span><span class="punctuation token">,</span> <span class="punctuation token">{</span>
+            <span class="keyword token">get</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="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">,</span> noeud<span class="punctuation token">,</span> noeuds <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">.</span>childNodes<span class="punctuation token">,</span> children <span class="operator token">=</span> <span class="punctuation token">[</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
+                <span class="keyword token">while</span> <span class="punctuation token">(</span>noeud <span class="operator token">=</span> noeuds<span class="punctuation token">[</span>i<span class="operator token">++</span><span class="punctuation token">]</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+                    <span class="keyword token">if</span> <span class="punctuation token">(</span>noeud<span class="punctuation token">.</span>nodeType <span class="operator token">===</span> <span class="number token">1</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+                        children<span class="punctuation token">.</span><span class="function token">push</span><span class="punctuation token">(</span>noeud<span class="punctuation token">)</span><span class="punctuation token">;</span>
+                    <span class="punctuation token">}</span>
+                <span class="punctuation token">}</span>
+                <span class="keyword token">return</span> children<span class="punctuation token">;</span>
+            <span class="punctuation token">}</span>
+        <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">(</span>window<span class="punctuation token">.</span>Node <span class="operator token">||</span> window<span class="punctuation token">.</span>Element<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Spécification">Spécification</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('DOM WHATWG', '#dom-parentnode-children', 'ParentNode.children')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.ParentNode.children")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les interfaces {{domxref("ParentNode")}} et{{domxref("ChildNode")}}.</li>
+ <li>
+  <div class="syntaxbox">Les types d'objets implémentant cette interface : {{domxref("Document")}}, {{domxref("Element")}} et {{domxref("DocumentFragment")}}.</div>
+ </li>
+ <li>
+  <div class="syntaxbox">{{domxref("Node.childNodes")}}</div>
+ </li>
+</ul>
diff --git a/files/fr/web/api/parentnode/firstelementchild/index.html b/files/fr/web/api/parentnode/firstelementchild/index.html
new file mode 100644
index 0000000000..60983da28f
--- /dev/null
+++ b/files/fr/web/api/parentnode/firstelementchild/index.html
@@ -0,0 +1,45 @@
+---
+title: Element.firstElementChild
+slug: Web/API/ParentNode/firstElementChild
+tags:
+  - Parcours arborescence
+translation_of: Web/API/ParentNode/firstElementChild
+---
+<p>{{ gecko_minversion_header("1.9.1") }}</p>
+
+<p>{{ ApiRef() }}</p>
+
+<h3 id="Summary" name="Summary">Résumé</h3>
+
+<p><strong><span style="font-family: Verdana,Tahoma,sans-serif;">firstElementChild</span></strong> renvoie le premier élément enfant d'un élément ou <code>null</code> s'il n'y a pas de descendants.</p>
+
+<h3 id="Syntax_and_values" name="Syntax_and_values">Syntaxe and valeurs</h3>
+
+<pre class="eval">var <em>N</em><em>oeudEnfant</em> = ReferenceElementNoeud.firstElementChild; </pre>
+
+<p><var>NoeudEnfant</var> est une référence vers le premier élément enfant de l'élément noeud , ou <code>null</code> s'il n'y en a pas.</p>
+
+<p>Cet attribut est en lecture seule.</p>
+
+<h3 id="Example" name="Example">Exemple</h3>
+
+<pre>&lt;p id="para-01"&gt;
+  &lt;span&gt;Premier span&lt;/span&gt;
+&lt;/p&gt;
+
+&lt;script type="text/javascript"&gt;
+  var p01 = document.getElementById('para-01');
+  alert(p01.firstElementChild.nodeName)
+&lt;/script&gt;</pre>
+
+<p>Dans cet exemple la fonction alert affiche "SPAN", qui est le nom du premier nœud enfant de l'élément paragraphe.</p>
+
+<h3 id="Voir_aussi">Voir aussi</h3>
+
+<ul>
+ <li><a class="internal" href="/en/DOM/Element.childElementCount" title="En/DOM/Element.childElementCount"><code>childElementCount</code></a></li>
+ <li><a class="internal" href="/en/DOM/Element.children" title="En/DOM/Element.children"><code>children</code></a></li>
+ <li><a class="internal" href="/en/DOM/Element.lastElementChild" title="En/DOM/Element.lastElementChild"><code>lastElementChild</code></a></li>
+ <li><a class="internal" href="/en/DOM/Element.nextElementSibling" title="En/DOM/Element.nextElementSibling"><code>nextElementSibling</code></a></li>
+ <li><a class="internal" href="/en/DOM/Element.previousElementSibling" title="En/DOM/Element.previousElementSibling"><code>previousElementSibling</code></a></li>
+</ul>
diff --git a/files/fr/web/api/parentnode/index.html b/files/fr/web/api/parentnode/index.html
new file mode 100644
index 0000000000..9b33ade976
--- /dev/null
+++ b/files/fr/web/api/parentnode/index.html
@@ -0,0 +1,75 @@
+---
+title: ParentNode
+slug: Web/API/ParentNode
+tags:
+  - API
+translation_of: Web/API/ParentNode
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>Le <code><strong>ParentNode</strong></code> <span id="result_box" lang="fr"><span>contient des méthodes et des propriétés communes à tous les types d'objets</span></span> {{domxref("Node")}}  qui peuvent avoir des enfants. Il est implémenté par les objets {{domxref("Element")}}, {{domxref("Document")}}, et {{domxref("DocumentFragment")}}.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{ domxref("ParentNode.children") }} {{experimental_inline}} {{readonlyInline}}</dt>
+ <dd>Retourne la {{domxref("HTMLCollection")}} contenant tous les objets de type {{domxref("Element")}} qui sont des enfants de ce <code>ParentNode</code>.</dd>
+ <dt>{{ domxref("ParentNode.firstElementChild") }} {{experimental_inline}} {{readonlyInline}}</dt>
+ <dd>Retourne l' {{domxref("Element")}} qui est le premier enfant de ce <code>ParentNode</code>, ou <code>null</code> s'il n'y en a pas.</dd>
+ <dt>{{ domxref("ParentNode.lastElementChild") }} {{experimental_inline}} {{readonlyInline}}</dt>
+ <dd>Retourne l'élément {{domxref("Element")}} qui est le dernier enfant de ce <code>ParentNode</code>, ou <code>null</code> s'il n'y en a pas.</dd>
+ <dt>{{ domxref("ParentNode.childElementCount") }} {{experimental_inline}} {{readonlyInline}}</dt>
+ <dd>Retourne un <code>unsigned long</code> donnant la quantité d'enfants du parent.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("ParentNode.append()")}} {{experimental_inline}}</dt>
+ <dd>Insère un ensemble d'objets {{domxref("Node")}} ou {{domxref("DOMString")}} après le dernier enfant du <code>ParentNode</code>. Les objets {{domxref("DOMString")}} sont insérés comme équivalents aux noeuds {{domxref("Text")}} .</dd>
+ <dt>{{domxref("ParentNode.prepend()")}} {{experimental_inline}}</dt>
+ <dd>Insère un ensemble d'objets {{domxref("Node")}} ou {{domxref("DOMString")}} avant le premier enfant du <code>ParentNode</code>. Les objets {{domxref("DOMString")}} sont insérés comme équivalents aux noeuds {{domxref("Text")}}.</dd>
+ <dt>{{domxref("ParentNode.querySelector()")}}</dt>
+ <dd>Retourne le premier {{domxref("Element")}} avec l'élément actuel en tant que racine qui correspond au groupe de sélecteurs spécifié.</dd>
+ <dt>{{domxref("ParentNode.querySelectorAll()")}}</dt>
+ <dd>Retourne une {{domxref("NodeList")}} représentant une liste d'éléments avec l'élément courant comme racine qui correspond au groupe de sélecteurs spécifié.</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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#parentnode', 'ParentNode')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Divise l'interface <code>ElementTraversal</code> dans {{domxref("ChildNode")}} et {{domxref("ParentNode")}}. Les propriétés {{domxref("ParentNode.firstElementChild")}}, {{domxref("ParentNode.lastElementChild")}}, et {{domxref("ParentNode.childElementCount")}} sont maintenant définies sur ce dernier. Ajout des propriétés {{domxref("ParentNode.children")}}, et des méthodes {{domxref("ParentNode.querySelector()")}}, {{domxref("ParentNode.querySelectorAll()")}}, {{domxref("ParentNode.append()")}}, et {{domxref("ParentNode.prepend()")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}</td>
+   <td>{{Spec2('Element Traversal')}}</td>
+   <td>Ajout de la définition initiale de ses propriétés dans l'interface pure<code>ElementTraversal,</code> et son utilisation sur {{domxref("Element")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.ParentNode")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface pure {{domxref("ChildNode")}} .</li>
+ <li>
+  <div class="syntaxbox">Types d'objets implémentant cette interface pure : {{domxref("Document")}}, {{domxref("Element")}}, et {{domxref("DocumentFragment")}}.</div>
+ </li>
+</ul>
diff --git a/files/fr/web/api/parentnode/lastelementchild/index.html b/files/fr/web/api/parentnode/lastelementchild/index.html
new file mode 100644
index 0000000000..8a978b0997
--- /dev/null
+++ b/files/fr/web/api/parentnode/lastelementchild/index.html
@@ -0,0 +1,161 @@
+---
+title: ParentNode.lastElementChild
+slug: Web/API/ParentNode/lastElementChild
+tags:
+  - API
+  - DOM
+  - Noeuds
+  - Propriétés
+  - parent
+translation_of: Web/API/ParentNode/lastElementChild
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>La propriété en lecture seule <code><strong>ParentNode.lastElementChild</strong></code>  renvoie  le dernier enfant de l'objet {{domxref("Element")}} ou <code>null</code> s'il n'y a pas d'élément enfant.</p>
+
+<div class="note">
+<p>Cette propriiété a été définie initialement dans la pure interface {{domxref("ElementTraversal")}}. Comme cette interface contenait deux différents jeux de propriétés, l'un visant les  {{domxref("Node")}} (<em>noeuds</em>) qui ont des enfants, l'autre les enfants, ils ont été déplacés dans deux interfaces pures, {{domxref("ParentNode")}} et {{domxref("ChildNode")}}. Dans ce cas, <code>childElementCount</code> a été rattaché à {{domxref("ParentNode")}}. C'est un changement assez technique qui ne devrait pas affecter la compatibilité.</p>
+</div>
+
+<h2 id="Syntax_and_values" name="Syntax_and_values">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>element</em> = node.lastElementChild; </pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: html">&lt;ul id="foo"&gt;
+  &lt;li&gt;First  (1)&lt;/li&gt;
+  &lt;li&gt;Second (2)&lt;/li&gt;
+  &lt;li&gt;Third  (3)&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;script&gt;
+var foo = document.getElementById('foo');
+// produit : Third  (3)
+console.log(foo.lastElementChild.textContent);
+&lt;/script&gt;
+</pre>
+
+<h2 id="Polyfill_for_IE8_IE9_and_Safari">Polyfill for IE8, IE9 and Safari</h2>
+
+<pre class="brush: js">// Remplace le prototype "lastElementChild" natif.
+// Ajout de Document &amp; DocumentFragment pris en charge pour IE9 &amp; Safari.
+// Renvoie un tableau (array) à la place de HTMLCollection.
+;(function(constructor) {
+    if (constructor &amp;&amp;
+        constructor.prototype &amp;&amp;
+        constructor.prototype.lastElementChild == null) {
+        Object.defineProperty(constructor.prototype, 'lastElementChild', {
+            get: function() {
+                var node, nodes = this.childNodes, i = nodes.length - 1;
+                while (node = nodes[i--]) {
+                    if (node.nodeType === 1) {
+                        return node;
+                    }
+                }
+                return null;
+            }
+        });
+    }
+})(window.Node || window.Element);
+</pre>
+
+<h2 id="Spécification">Spécification</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('DOM WHATWG', '#dom-parentnode-lastelementchild', 'ParentNode.lastElementChild')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Divise l'interface <code>ElementTraversal</code> en {{domxref("ChildNode")}} et <code>ParentNode</code>. La propriété est maintenant définie sur cette dernière.<br>
+    Les {{domxref("Document")}} et {{domxref("DocumentFragment")}} implémentent la nouvelle interface.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Element Traversal', '#attribute-lastElementChild', 'ElementTraversal.lastElementChild')}}</td>
+   <td>{{Spec2('Element Traversal')}}</td>
+   <td>Ajout de sa définition initiale à la pure interface <code>ElementTraversal</code> et de son utilisation sur {{domxref("Element")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support (on {{domxref("Element")}})</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9.0</td>
+   <td>10.0</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td>Support on {{domxref("Document")}} and {{domxref("DocumentFragment")}} {{experimental_inline}}</td>
+   <td>29.0</td>
+   <td>{{CompatGeckoDesktop("25.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support (on {{domxref("Element")}})</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatGeckoMobile("1.9.1")}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Support on {{domxref("Document")}} and {{domxref("DocumentFragment")}} {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("25.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les interfaces pures {{domxref("ParentNode")}} et {{domxref("ChildNode")}}.</li>
+ <li>
+  <div class="syntaxbox">Types d'objets implémentant cette interface pure : {{domxref("Document")}}, {{domxref("Element")}} et {{domxref("DocumentFragment")}}.</div>
+ </li>
+</ul>
diff --git a/files/fr/web/api/parentnode/prepend/index.html b/files/fr/web/api/parentnode/prepend/index.html
new file mode 100644
index 0000000000..a11511c3c8
--- /dev/null
+++ b/files/fr/web/api/parentnode/prepend/index.html
@@ -0,0 +1,137 @@
+---
+title: ParentNode.prepend()
+slug: Web/API/ParentNode/prepend
+tags:
+  - API
+  - DOM
+  - Méthodes
+  - Noeuds
+  - parent
+translation_of: Web/API/ParentNode/prepend
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La méthode <strong><code>ParentNode.prepend</code></strong> insère un jeu d'objets {{domxref("Node")}} (<em>noeud</em>) ou {{domxref("DOMString")}} (<em>chaîne de caractères</em>) avant le premier enfant de <code>ParentNode</code>. Les objets {{domxref("DOMString")}} sont insérés comme équivalant des noeuds {{domxref("Text")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>ParentNode</em>.prepend(<em>nodesToPrepend</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>nodesToPrepend</code></dt>
+ <dd>Un noeud ou plus à insérer avant le premier noeud enfant dans le <code>ParentNode</code> courant. Chaque noeud peut être spécifié comme un objet {{domxref("Node")}} ou comme une chaîne de caractères ; les chaînes sont insérées comme de nouveaux noeuds {{domxref("Text")}}.</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p><code>undefined</code> (<em>indéfini</em>).</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<ul>
+ <li>{{domxref("HierarchyRequestError")}} : Le noeud ne peut pas être inséré au point spécifié dans la hiérarchie.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Ajout_dun_élément">Ajout d'un élément</h3>
+
+<pre class="brush: js">var parent = document.createElement("div");
+var p = document.createElement("p");
+var span = document.createElement("span");
+parent.append(p);
+parent.prepend(span);
+
+console.log(parent.childNodes); // NodeList [ &lt;span&gt;, &lt;p&gt; ]
+</pre>
+
+<h3 id="Ajout_dun_texte">Ajout d'un texte</h3>
+
+<pre class="brush: js">var parent = document.createElement("div");
+parent.append("Some text");
+parent.prepend("Headline: ");
+
+console.log(parent.textContent); // "Headline: Some text"</pre>
+
+<h3 id="Ajout_dun_élément_et_dun_texte">Ajout d'un élément et d'un texte</h3>
+
+<pre class="brush: js">var parent = document.createElement("div");
+var p = document.createElement("p");
+parent.prepend("Some text", p);
+
+console.log(parent.childNodes); // NodeList [ #text "Some text", &lt;p&gt; ]</pre>
+
+<h3 id="ParentNode.prepend_est_non_accessible"><code>ParentNode.prepend()</code> est non accessible</h3>
+
+<p>La méthode <code>prepend()</code> n'est pas comprise dans l'instruction <code>with</code>. Voir {{jsxref("Symbol.unscopables")}} pour plus d'informations.</p>
+
+<pre class="brush: js">var parent = document.createElement("div");
+
+with(parent) {
+  prepend("foo");
+}
+// ReferenceError: prepend is not defined (<em>prepend n'est pas défini</em>)</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>vous pouvez utiliser le polyfill pour la méthode <code>prepend()</code> si elle n'est pas disponible :</p>
+
+<pre class="brush: js">// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/prepend()/prepend().md
+(function (arr) {
+  arr.forEach(function (item) {
+    if (item.hasOwnProperty('prepend')) {
+      return;
+    }
+    Object.defineProperty(item, 'prepend', {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: function prepend() {
+        var argArr = Array.prototype.slice.call(arguments),
+          docFrag = document.createDocumentFragment();
+
+        argArr.forEach(function (argItem) {
+          var isNode = argItem instanceof Node;
+          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
+        });
+
+        this.insertBefore(docFrag, this.firstChild);
+      }
+    });
+  });
+})([Element.prototype, Document.prototype, DocumentFragment.prototype]);</pre>
+
+<h2 id="Spécification">Spécification</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('DOM WHATWG', '#dom-parentnode-prepend', 'ParentNode.prepend()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.ParentNode.prepend")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("ParentNode")}} et {{domxref("ChildNode")}}</li>
+ <li>{{domxref("ParentNode.append()")}}</li>
+ <li>{{domxref("Node.appendChild()")}}</li>
+ <li>{{domxref("Node.insertBefore()")}}</li>
+ <li>{{domxref("ChildNode.before()")}}</li>
+ <li>{{domxref("NodeList")}}</li>
+</ul>
diff --git a/files/fr/web/api/parentnode/queryselector/index.html b/files/fr/web/api/parentnode/queryselector/index.html
new file mode 100644
index 0000000000..62844d47b1
--- /dev/null
+++ b/files/fr/web/api/parentnode/queryselector/index.html
@@ -0,0 +1,105 @@
+---
+title: ParentNode.querySelector()
+slug: Web/API/ParentNode/querySelector
+tags:
+  - API
+  - DOM
+  - Draft
+  - Method
+  - NeedsExample
+  - ParentNode
+  - Reference
+  - Selectors
+  - querySelector
+translation_of: Web/API/ParentNode/querySelector
+---
+<p>{{APIRef("DOM")}}{{Draft}}</p>
+
+<p>Le mixin {{DOMxRef("ParentNode")}} définit la méthode <code><strong>querySelector()</strong></code>  comme renvoyant un {{DOMxRef("Element")}} représentant le premier élément correspondant au groupe de sélecteurs spécifié qui sont les descendants de l'objet sur lequel la méthode a été appelée.</p>
+
+<p>Si vous avez besoin de tous les éléments correspondant à la liste de sélecteurs, utilisez plutôt {{DOMxRef("ParentNode.querySelectorAll", "querySelectorAll()")}} .</p>
+
+<div class="blockIndicator note">
+<p><strong><font><font>Remarque:</font></font></strong><font><font> Cette méthode est implémentée comme</font></font> {{DOMxRef("Document.querySelector()")}}, {{DOMxRef("DocumentFragment.querySelector()")}} et {{DOMxRef("Element.querySelector()")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><var>élément</var> = <em>parentNode</em>.querySelector(<var>sélécteurs</var>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>sélécteurs</code></dt>
+ <dd>Un {{DOMxRef("DOMString")}} contenant un ou plusieurs sélecteurs à comparer. Cette chaîne doit être une <a href="/en-US/docs/Web/CSS/CSS_Selectors">compound selector list</a> <font>valide </font><font>prise en charge par le navigateur; sinon, une </font>exception<font> </font><code>SyntaxError</code> est levée. Voir <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors"><font><font>Localisation des éléments DOM à l'aide de sélecteurs</font></font></a> <font>pour plus d'informations sur l'utilisation des sélecteurs pour identifier les éléments. </font><font>Plusieurs sélecteurs peuvent être spécifiés en les séparant à l'aide de virgules.</font></dd>
+</dl>
+
+<div class="blockIndicator note">
+<p><strong><font><font>Remarque: </font></font></strong><font><font>Les caractères qui ne font pas partie de la syntaxe CSS standard doivent être échappés à l'aide d'un caractère barre oblique inverse. </font><font>Étant donné que JavaScript utilise également l'échappement arrière, une attention particulière doit être apportée lors de l'écriture de littéraux de chaîne à l'aide de ces caractères. </font><font>Voir</font></font> {{anch("Escaping special characters")}} pour plus d'informations.</p>
+</div>
+
+<h3 id="Retourner_une_valeur">Retourner une valeur</h3>
+
+<p>Le premier {{DOMxRef("Element")}} qui correspond à au moins l'un des sélecteurs spécifiés ou <code>null</code> si aucun élément de ce type n'est trouvé.</p>
+
+<div class="blockIndicator note">
+<p><strong><font><font>Remarque:</font></font></strong><font><font> Si le spécifié</font></font> <code>sélécteurs</code> <font><font>inclut un </font></font><font><font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements">pseudo-élément CSS</a>,</font></font>  la valeur renvoyée est toujours <code>null</code>.</p>
+</div>
+
+<h3 id="Des_exceptions">Des exceptions</h3>
+
+<dl>
+ <dt><code>SyntaxError</code></dt>
+ <dd>La syntaxe de la chaîne <code>sélécteurs</code> <font>spécifiée </font><font>n'est pas valide.</font></dd>
+</dl>
+
+<h2 id="Caractéristiques"><font><font>Caractéristiques</font></font></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("DOM WHATWG", "#dom-parentnode-queryselector", "ParentNode.querySelector()")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>Niveau de vie</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselector", "ParentNode.querySelector()")}}</td>
+   <td>{{Spec2("Selectors API Level 2")}}</td>
+   <td>Pas de changement</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-parentnode-queryselector", "ParentNode.querySelector()")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td>
+   <td>{{Spec2("Selectors API Level 1")}}</td>
+   <td>Définition originale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs"><font><font>Compatibilité des navigateurs</font></font></h2>
+
+<div class="hidden"><font><font>Aucune donnée de compatibilité trouvée. </font><font>Veuillez fournir des données pour "api.ParentNode.querySelector" (profondeur: 1) au </font></font><a href="https://github.com/mdn/browser-compat-data" rel="noopener"><font><font>référentiel de données de compatibilité MDN</font></font></a><font><font> .</font></font></div>
+
+<p>{{Compat("api.ParentNode.querySelector")}}</p>
+
+<h2 id="Voir_également"><font><font>Voir également</font></font></h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors"><font><font>Localisation des éléments DOM à l'aide de sélecteurs</font></font></a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Code_snippets/QuerySelector"><font><font>Extraits de code pour </font></font><code>querySelector()</code></a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors"><font><font>Sélecteurs d'attributs</font></font></a><font><font> dans le guide CSS</font></font></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors"><font><font>Sélecteurs d'attributs</font></font></a><font><font> dans la zone d'apprentissage MDN</font></font></li>
+ <li>Cette méthode est disponible {{DOMxRef("Element.querySelector()")}}, {{DOMxRef("Document.querySelector()")}}, et {{DOMxRef("DocumentFragment.querySelector()")}}</li>
+</ul>
diff --git a/files/fr/web/api/parentnode/queryselectorall/index.html b/files/fr/web/api/parentnode/queryselectorall/index.html
new file mode 100644
index 0000000000..7c38961c38
--- /dev/null
+++ b/files/fr/web/api/parentnode/queryselectorall/index.html
@@ -0,0 +1,83 @@
+---
+title: ParentNode.querySelectorAll()
+slug: Web/API/ParentNode/querySelectorAll
+tags:
+  - API
+  - DOM
+  - Méthodes
+  - Noeuds
+  - Sélecteurs
+  - parent
+translation_of: Web/API/ParentNode/querySelectorAll
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p>Renvoie une {{domxref("NodeList")}} représentant une liste d'éléments avec l'élément courant comme racine et qui correspondent au groupe de sélecteurs spécifiés.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>elementList</var> = document.querySelectorAll(<var>selectors</var>);
+</pre>
+
+<p>où</p>
+
+<ul>
+ <li><code>elementList</code> est une {{domxref("NodeList")}} <a href="https://developer.mozilla.org/fr/docs/Web/API/NodeList#A_sometimes-live_collection">non-directe</a> d'objets {{domxref("element")}}.</li>
+ <li><code>selectors</code> est une chaîne de caractères (<em>string</em>) contenant un ou plusieurs <a href="https://developer.mozilla.org/fr/docs/Web/CSS/S%C3%A9lecteurs_CSS">sélecteurs CSS</a> séparés par des virgules.</li>
+</ul>
+
+<p>La <code>NodeList</code> retournée contiendra tous les éléments dans le document qui correspondent à l'un des sélecteurs spécifiés. Si la chaîne <code><em>selectors</em></code> contient un <a href="https://developer.mozilla.org/fr/docs/Web/CSS/Pseudo-elements">pseudo-element CSS</a>, la <code><var>elementList</var></code> retournée sera vide.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Cet exemple renvoie une liste de tous les éléments <code>div</code> d'un <code>document</code> avec une classe "<code>note</code>" ou "<code>alert</code>" :</p>
+
+<pre class="brush: js">var matches = document.querySelectorAll("div.note, div.alert");
+</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Renvoie une <code>NodeList</code> <a href="https://developer.mozilla.org/fr/docs/Web/API/NodeList#A_sometimes-live_collection">non directe</a> de tous les noeuds éléments correspondant.</p>
+
+<p>Lance une exception <code>SYNTAX_ERR</code> si le groupe de sélecteurs spécifié est invalide.</p>
+
+<p><code>querySelectorAll()</code> fut introduite dans l'API WebApps.</p>
+
+<p>L'argument chaîne passé à <code>querySelectorAll()</code> doit suivre la syntaxe CSS. Voir {{domxref("document.querySelector")}} pour des exemples concrets.</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("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
+   <td>{{Spec2("Selectors API Level 2")}}</td>
+   <td>Pas de changement.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.ParentNode.querySelectorAll")}}</p>
+
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Element.querySelectorAll")}}</li>
+ <li>{{domxref("Document.querySelectorAll")}}</li>
+ <li>{{domxref("DocumentFragment.querySelectorAll")}}</li>
+</ul>
diff --git a/files/fr/web/api/passwordcredential/additionaldata/index.html b/files/fr/web/api/passwordcredential/additionaldata/index.html
new file mode 100644
index 0000000000..48af22f69e
--- /dev/null
+++ b/files/fr/web/api/passwordcredential/additionaldata/index.html
@@ -0,0 +1,73 @@
+---
+title: PasswordCredential.additionalData
+slug: Web/API/PasswordCredential/additionalData
+tags:
+  - API
+  - Credential Management API
+  - PasswordCredential
+  - Propriété
+  - Reference
+translation_of: Web/API/PasswordCredential/additionalData
+---
+<p>{{SeeCompatTable}}{{APIRef("")}}{{Deprecated_header}}</p>
+
+<p>La propriété <strong><code>additionalData</code></strong>, rattachée à l'interface {{domxref("PasswordCredential")}}, est une instance de {{domxref("FormData")}} ou une instane de {{domxref("URLSearchParams")}} ou {{jsxref("null")}}.</p>
+
+<p>Les données contenues dans l'objet associé seront ajoutées au corps de la requête et envoyées au point distant avec les informations d'authentification.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>passwordCredential</em>.additionalData = formData
+<em>formData</em> = <em>passwordCredential</em>.additionalData
+passwordCredential.additionalData = urlSearchParams
+<em>ulrSearchParams</em> = <em>passwordCredential</em>.additionalData
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une instance {{domxref("FormData")}} ou une instance {{domxref("URLSearchParams")}} ou {{jsxref("null")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, on crée un objet {{domxref("FormData")}} auquel on ajoute un <a href="/docs/Web/Security/Same-origin_policy#How_to_block_cross-origin_access">jeton CSRF</a>. Ensuite, on stocke l'objet du formulaire dans le paramètre <code>additionalData</code> avant de l'envoyer au serveur avec un appel à {{domxref("fetch")}}.</p>
+
+<pre class="brush: js">// L'objet options a été créé au préalable
+navigator.credentials.get(options).then(function(creds) {
+  if (creds.type == 'password') {
+    var form = new FormData();
+    var csrf_token = document.querySelector('csrf_token').value;
+    form.append('csrf_token', csrf_token);
+
+    creds.additionalData = form;
+
+    fetch('https://www.example.com', {
+      method: 'POST',
+      credentials: creds
+    });
+  };
+});</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('Credential Management')}}</td>
+   <td>{{Spec2('Credential Management')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.PasswordCredential.additionalData")}}</p>
diff --git a/files/fr/web/api/passwordcredential/iconurl/index.html b/files/fr/web/api/passwordcredential/iconurl/index.html
new file mode 100644
index 0000000000..51e2419de1
--- /dev/null
+++ b/files/fr/web/api/passwordcredential/iconurl/index.html
@@ -0,0 +1,47 @@
+---
+title: PasswordCredential.iconURL
+slug: Web/API/PasswordCredential/iconURL
+tags:
+  - API
+  - Credential Management API
+  - PasswordCredential
+  - Propriété
+  - Reference
+translation_of: Web/API/PasswordCredential/iconURL
+---
+<p>{{SeeCompatTable}}{{APIRef("")}}</p>
+
+<p>La propriété <strong><code>iconURL</code></strong>, rattachée à l'interface {{domxref("PasswordCredential")}}, est accessible en lecture seule et fournit une chaîne de caractères {{domxref("USVString")}} représentant une URL pointant vers l'image d'une icône. Cette image est destinée à être affichée dans un sélecteur d'authentification. L'URL fournie doit être accessible sans authentification.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>url</em> = <em>passwordCredential</em>.iconURL</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une chaîne de caractères {{domxref("USVString")}} contenant une URL.</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('Credential Management','#dom-credentialuserdata-iconurl','iconURL')}}</td>
+   <td>{{Spec2('Credential Management')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.PasswordCredential.iconURL")}}</p>
diff --git a/files/fr/web/api/passwordcredential/idname/index.html b/files/fr/web/api/passwordcredential/idname/index.html
new file mode 100644
index 0000000000..61b654c9ea
--- /dev/null
+++ b/files/fr/web/api/passwordcredential/idname/index.html
@@ -0,0 +1,50 @@
+---
+title: idName
+slug: Web/API/PasswordCredential/idName
+tags:
+  - API
+  - PasswordCredential
+  - Propriété
+  - Reference
+  - idName
+translation_of: Web/API/PasswordCredential/idName
+---
+<p>{{SeeCompatTable}}{{APIRef("")}}{{Deprecated_header}}</p>
+
+<p><span class="seoSummary">La propriété <strong><code>idName</code></strong> de l'interface {{domxref("PasswordCredential")}} fournit une chaîne de caractères {{domxref("USVString")}} représentant le nom qui sera utilisé pour le champ d'identifiant, </span>lorsqu'on envoie l'objet courant à un point d'accès distant when submitting the current object to a remote endpoint via {{domxref("fetch")}}. Par défaut, cette propriété vaut <code>'username'</code>, mais on peut la définir avec n'importe quelle valeur qui serait attendue de la part d'un service distant.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var idName = PasswordCredential.idName
+PasswordCredential.idName = "userID"</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une chaîne de caractères {{domxref("USVString")}} qui représente le nom utilisé pour le champ d'identifiant lorsqu'on envoie l'objet courant à un point distant avec {{domxref("fetch")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">// TBD</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Credential Management')}}</td>
+   <td>{{Spec2('Credential Management')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.PasswordCredential.idName")}}</p>
diff --git a/files/fr/web/api/passwordcredential/index.html b/files/fr/web/api/passwordcredential/index.html
new file mode 100644
index 0000000000..fe89151751
--- /dev/null
+++ b/files/fr/web/api/passwordcredential/index.html
@@ -0,0 +1,86 @@
+---
+title: PasswordCredential
+slug: Web/API/PasswordCredential
+tags:
+  - API
+  - Credential Management API
+  - Interface
+  - PasswordCredential
+  - Reference
+translation_of: Web/API/PasswordCredential
+---
+<p>{{SeeCompatTable}}{{APIRef("Credential Management API")}}</p>
+
+<p>L'interface <code><strong>PasswordCredential</strong></code>, rattachée à l'<a href="/fr/docs/Web/API/Credential_Management_API">API Credential Management</a>, fournit des informations quant à un couple nom d'utilisateur/mot de passe. Pour les navigateurs qui prennent en charge cette fonctionnalité, une instance de cette interface peut être passée comme propriété <code>credential</code> de l'objet <code>init</code> utilisé comme argument de la méthode globale {{domxref('fetch')}}.</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("PasswordCredential.PasswordCredential()","PasswordCredential()")}}</dt>
+ <dd>Crée un nouvel objet <code>PasswordCredential</code>.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Hérite des propriétés de l'interface parente, {{domxref("Credential")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("PasswordCredential.additionalData")}} {{deprecated_inline()}}</dt>
+ <dd>Une instance {{domxref("FormData")}} ou une instance {{domxref("URLSearchParams")}} ou {{jsxref("null")}}. Les données de cet objet seront ajoutées au corps de la requête et envoyées au point distant avec les informations d'authentification.</dd>
+ <dt>{{domxref("PasswordCredential.iconURL")}} {{readonlyinline}}</dt>
+ <dd>Une chaîne de caractères {{domxref("USVString")}} contenant une URL qui pointe vers une image servant d'icône. Cette image est destinée à être utilisée dans le sélecteur d'informations d'authentification. L'URL doit être accessible sans authentification.</dd>
+ <dt>{{domxref("PasswordCredential.idName")}} {{deprecated_inline()}}</dt>
+ <dd>Une chaîne de caractères {{domxref("USVString")}} contenant le nom qui sera uitlisé pour le champ d'identifiant lorsque l'objet courant sera envoyé au point distant grâce à {{domxref("fetch")}}. La valeur par défaut correspond à <code>"username"</code> mais il est possible de surcharger cette valeur afin qu'elle corresponde à ce qui est attendu par le service distant.</dd>
+ <dt>{{domxref("PasswordCredential.name")}} {{readonlyinline}}</dt>
+ <dd>Une chaîne de caractères {{domxref("USVString")}} qui contient un nom public, lisible par un humain et qui sera affiché dans le sélecteur d'informations d'authentification.</dd>
+ <dt>{{domxref("PasswordCredential.password")}} {{readonlyinline}}</dt>
+ <dd>Une chaîne de caractères {{domxref("USVString")}} qui contient le mot de passe associé aux informations d'authentification.</dd>
+ <dt>{{domxref("PasswordCredential.passwordName")}} {{deprecated_inline()}}</dt>
+ <dd>Une chaîne de caractères {{domxref("USVString")}} qui représente le nom utilisé pour le mot de passe lorsque l'objet courant est envoyé au point distant avec {{domxref("fetch")}}. Par défaut, cette propriété vaut <code>"password"</code> mais elle peut être surchargée afin que sa valeur corresponde à ce qui est attendu par le service distant.</dd>
+</dl>
+
+<h3 id="Gestionnaires_d'évènement">Gestionnaires d'évènement</h3>
+
+<p>Aucun.</p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p>Aucune.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var cred = new PasswordCredential({
+  id: id,
+  password: password,
+  name: name,
+  iconURL: iconUrl
+});
+
+navigator.credentials.store(cred)
+ .then(function() {
+ // Faire quelque chose avec.
+});
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Credential Management')}}</td>
+   <td>{{Spec2('Credential Management')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.PasswordCredential")}}</p>
diff --git a/files/fr/web/api/passwordcredential/name/index.html b/files/fr/web/api/passwordcredential/name/index.html
new file mode 100644
index 0000000000..a83b8683ff
--- /dev/null
+++ b/files/fr/web/api/passwordcredential/name/index.html
@@ -0,0 +1,47 @@
+---
+title: PasswordCredential.name
+slug: Web/API/PasswordCredential/name
+tags:
+  - API
+  - Credential Management API
+  - PasswordCredential
+  - Propriété
+  - Reference
+translation_of: Web/API/PasswordCredential/name
+---
+<p>{{SeeCompatTable}}{{APIRef("")}}</p>
+
+<p>La propriété <strong><code>name</code></strong> est accessible en lecture seule et est rattachée à l'interface {{domxref("PasswordCredential")}}. C'est une chaîne de caractères {{domxref("USVSTring")}} qui contient un nom public, compréhensible pour un humain et qui est destiné à être affiché dans un sélecteur de fournisseur d'authentification.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>name</em> = <em>passwordCredential</em>.name</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>A {{domxref("USVString")}} containing a name.</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('Credential Management','#dom-credentialuserdata-name','name')}}</td>
+   <td>{{Spec2('Credential Management')}}</td>
+   <td>Définition initiale..</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.PasswordCredential.name")}}</p>
diff --git a/files/fr/web/api/passwordcredential/password/index.html b/files/fr/web/api/passwordcredential/password/index.html
new file mode 100644
index 0000000000..7fcb6f1c84
--- /dev/null
+++ b/files/fr/web/api/passwordcredential/password/index.html
@@ -0,0 +1,47 @@
+---
+title: PasswordCredential.password
+slug: Web/API/PasswordCredential/password
+tags:
+  - API
+  - Credential Management API
+  - PasswordCredential
+  - Propriété
+  - Reference
+translation_of: Web/API/PasswordCredential/password
+---
+<p>{{SeeCompatTable}}{{APIRef("")}}</p>
+
+<p>La propriété <strong><code>password</code></strong> est une propriété accessible en lecture seule rattachée à l'interface {{domxref("PasswordCredential")}} et fournit une chaîne de caractères {{domxref("USVString")}} contenant le mot de passe lié aux informations d'authentification.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>password</em> = <em>passwordCredential</em>.password</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une chaîne de caractères {{domxref("USVString")}} contenant le mot de passe.</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('Credential Management','#dom-passwordcredential-password','password')}}</td>
+   <td>{{Spec2('Credential Management')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.PasswordCredential.password")}}</p>
diff --git a/files/fr/web/api/passwordcredential/passwordcredential/index.html b/files/fr/web/api/passwordcredential/passwordcredential/index.html
new file mode 100644
index 0000000000..21c7234137
--- /dev/null
+++ b/files/fr/web/api/passwordcredential/passwordcredential/index.html
@@ -0,0 +1,88 @@
+---
+title: PasswordCredential
+slug: Web/API/PasswordCredential/PasswordCredential
+tags:
+  - API
+  - Constructeur
+  - Credential Management API
+  - PasswordCredential
+  - Reference
+translation_of: Web/API/PasswordCredential/PasswordCredential
+---
+<p>{{APIRef("")}}{{Non-standard_header}}</p>
+
+<p>Le constructeur <strong><code>PasswordCredential</code></strong> permet de créer un nouvel objet {{domxref("PasswordCredential")}}.</p>
+
+<p>Pour les navigateurs qui prennent en charge cette fonctionnalité, une instance de cette classe peut être utilisée comme propriété <code>credential</code> pour l'objet <code>init</code> qui sera l'argument pour un appel à {{domxref('fetch')}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var mesCredentials = new PasswordCredential(passwordCredentialData)
+var mesCredentials = new PasswordCredential(HTMLFormElement)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Le constructeur peut prendre l'une de ces deux valeurs en argument.</p>
+
+<dl>
+ <dt><code>passwordCredentialData</code> </dt>
+ <dd>Un dictionnaire <code>PasswordCredentialData</code> avec les champs suivants :
+ <ul>
+  <li><code>iconURL</code> {{optional_inline}} : l'URL de l'image pour l'avatar de l'utilisateur.</li>
+  <li><code>id</code> : l'identifiant de l'utilisateur qui se connecte.</li>
+  <li><code>name</code> {{optional_inline}} : le nom de l'utilisateur qui se connecte.</li>
+  <li><code>password</code> : le mot de passe de l'utilisateur qui se connecte.</li>
+ </ul>
+ </dd>
+ <dt><code>htmlFormElement</code></dt>
+ <dd>Une référence à un objet {{domxref("HTMLFormElement")}} contenant les champs de saisis appropriés. Le formulaire correspondant devrait contenir au moins un champ <code>id</code> et un champ <code>password</code>. Le formulaire peut aussi demander un jeton CSRF.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, nous verrons comment définir un formulaire et capturer les données saisies pour créer un objet {{domxref("PasswordCredential")}}.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;form id="form" method="post"&gt;
+  &lt;input type="text" name="id" autocomplete="username" /&gt;
+  &lt;input type="password" name="password" autocomplete="current-password" /&gt;
+  &lt;input type="hidden" name="csrf_token" value="*****" /&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p>Dans le script, on pourra faire référence à ce formulaire et l'utiliser pour créer un objet {{domxref("PasswordCredential")}} afin de le stocker dans le système de mots de passe de l'agent utilisateur.</p>
+
+<pre class="brush: js">var form = document.querySelector('#form');
+var creds = new PasswordCredential(form);
+// Stocker les informations d'authentification
+navigator.credentials.store(creds)
+  .then(function(creds) {
+  // Faire quelque chose avec les informations d'authentification si besoin
+});</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('Credential Management')}}</td>
+   <td>{{Spec2('Credential Management')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.PasswordCredential.PasswordCredential")}}</p>
diff --git a/files/fr/web/api/passwordcredential/passwordname/index.html b/files/fr/web/api/passwordcredential/passwordname/index.html
new file mode 100644
index 0000000000..d1399f8d18
--- /dev/null
+++ b/files/fr/web/api/passwordcredential/passwordname/index.html
@@ -0,0 +1,52 @@
+---
+title: PasswordCredential.passwordName
+slug: Web/API/PasswordCredential/passwordName
+tags:
+  - API
+  - Credential Management API
+  - PasswordCredential
+  - Propriété
+  - Reference
+translation_of: Web/API/PasswordCredential/passwordName
+---
+<p>{{SeeCompatTable}}{{APIRef("")}}{{Deprecated_header}}</p>
+
+<p>La propriété <strong><code>passwordName</code></strong>, rattachée à l'interface {{domxref("PasswordCredential")}}, est une chaîne de caractères {{domxref("USVString")}} qui indique le nom utilisé pour dénommer le champ relatif au mot de passe lors de l'envoi de l'objet courant au point d'accès distant avec {{domxref("fetch")}}. Par défaut, cette propriété vaut <code>'password'</code> mais il est possible de la modifier afin qu'elle corresponde à la valeur attendue par le service distant.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var passwordName = PasswordCredential.passwordName
+PasswordCredential.passwordName = "passcode"</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une chaîne de caractères  {{domxref("USVString")}} qui représente le nom du champ pour le mot de passe. Ce nom sera utilisé lors de l'envoi de l'objet courant au point d'accès distant avec {{domxref("fetch")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">// TBD</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('Credential Management')}}</td>
+   <td>{{Spec2('Credential Management')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.PasswordCredential.passwordName")}}</p>
diff --git a/files/fr/web/api/payment_request_api/index.html b/files/fr/web/api/payment_request_api/index.html
new file mode 100644
index 0000000000..78434d825c
--- /dev/null
+++ b/files/fr/web/api/payment_request_api/index.html
@@ -0,0 +1,125 @@
+---
+title: Payment Request API
+slug: Web/API/Payment_Request_API
+translation_of: Web/API/Payment_Request_API
+---
+<div>{{DefaultAPISidebar("Payment Request API")}}{{securecontext_header}}</div>
+
+<p><span class="seoSummary">L'API <em>Payment Request</em> fournit une expérience utilisateur cohérente à la fois pour les acheteurs et pour les vendeurs. Ce n'est pas une nouvelle façon de payer ses achats, c'est plutôt une façon pour les utilisateurs de sélectionner leur moyen de paiement privilégié et de rendre cete information disponible pour le marchand.</span></p>
+
+<h2 id="Concepts_et_usages_de_l'API_Payment_Request">Concepts et usages de l'API <em>Payment Request</em></h2>
+
+<p>De nombreux problèmes concernant l'abandon du panier d'achat en ligne peuvent découler de formulaires de validation finale longs et difficiles à remplir, et nécessitant souvent plusieurs étapes. L'<strong>API <em>Payment Request</em> </strong>a pour vocation de réduire le nombre d'étapes nécessaires pour terminer un paiement en ligne, faisant potentiellement ainsi diparaître les formulaires de validation finale. Elle vise à rendre le processus de validation final plus facile en conservant les informations de l'utilisateur, qui sont transmises au marchant sans nécessiter de formulaire HTML.</p>
+
+<p>Les avantages de l'utilisation de l'API <em>Payment Request</em> avec des règlements par cartes ("basic-card") :</p>
+
+<ul>
+ <li><strong>Une expérience d'achat rapide </strong>: les utilisateurs renseignent leurs informations une fois dans le navigateur et sont alors prêts pour payer des biens et services en ligne. Ils n'ont plus besoin de renseigner les mêmes informations à chaque fois sur différents sites.</li>
+ <li><strong>Une expérience cohérente sur chaque site qui fonctionne avec l'API :</strong> dans la mesure où l'affichage des informations de paiement est contrôlé par le navigateur, celui-ci peut adapter l'expérience de l'utilisateur. Ceci peut impliquer d'afficher l'interface utilisateur dans le langage favori de l'utilisateur.</li>
+ <li><strong>L'accessibilité </strong>: dans la mesure où le navigateur contrôle les éléments à renseigner concernant le paiment, il peut garantir une accessibilité du clavier et de l'écran sur chaque site sans intervention des développeurs. Un navigateur pourrait aussi adapter la taille de la fonte ou le contraste de couleur de la page de paiement,  pour la rendre plus agréable d'utilisation.</li>
+ <li><strong>La gestion des indentificants </strong>: les utilisateurs peuvent gérer leurs cartes de crédit ou leurs adresses de livraison directement dans le navigateur. Un navigateur peut aussi synchroniser ces identifiants avec d'autres appareils, permettant ainsi au utilisateurs d'aller d'un appareil à l'autre lorsqu'ils font leurs achats.</li>
+ <li><strong>Une gestion des erreurs cohérente :</strong> le navigateur peut vérifier la validité des numéros de carte et peut indiquer si la carte de l'utilisateur a expiré ou est sur le point de l'être. Le navigateur peut automatiquement suggérer quelle carte utiliser sur la base des utilisations précédentes ou les restrictions du marchant (par exemple : "Nous n'acceptions que les cartes Visa et Mastercard"), ou encore permettre à l'utilisateur d'indiquer quelle est leur carte par défault.</li>
+</ul>
+
+<p>Pour demander un paiement, une page web crée un {{domxref("PaymentRequest")}} objet en réponse à une action de l'utilisateur qui initie un paiement, comme cliquer sur un bouton "Achat". Le <code>PaymentRequest</code> permet à la page web d'interagir avec l'utilisateur prendant qu'il donne les information pour terminer la transaction.</p>
+
+<p>Vous pouvez trouver un guide complet dans l'article <a href="/en-US/docs/Web/API/Payment_Request_API/Using_the_Payment_Request_API">Using the Payment Request API</a>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: L'API est disponible à l'intérieur des éléments cross-origin {{htmlelement("iframe")}} seulement si on leur a affecté l'attribut  {{htmlattrxref("allowpaymentrequest","iframe")}}.</p>
+</div>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<dl>
+ <dt>{{domxref('PaymentAddress')}}</dt>
+ <dd>Un objet qui contient l'information "adresse". Utilisé par exemple pour les adresses de facturation et d'expédition.</dd>
+ <dt>{{domxref('PaymentRequest')}}</dt>
+ <dd>Un objet qui fournit l'API pour créer et gérer l'interface de paiement de {{Glossary("user agent", "l'agent utilisateur")}}.</dd>
+ <dt>{{domxref('PaymentRequestEvent')}}</dt>
+ <dd>Un événement fourni au gestionnaire de paiement lorsque un {{domxref("PaymentRequest")}} est fait.</dd>
+ <dt>{{domxref('PaymentRequestUpdateEvent')}}</dt>
+ <dd>Permet à la page web de mettre à jour les détails de la requête de paiement en réponse à une action de l'utilisateur.</dd>
+ <dt>{{domxref('PaymentMethodChangeEvent')}}</dt>
+ <dd>Représente une modification du moyen de paiement effectuée par l'utilisateur (par exemple, remplacer une carte de crédit par une autre ou par un autre moyen de paiement en ligne).</dd>
+ <dt>{{domxref('PaymentResponse')}}</dt>
+ <dd>Un objet renvoyé après que l'utilisateur ait sélectionné un moyen de paiement et approuvé une demande de paiement.</dd>
+ <dt>{{domxref('MerchantValidationEvent')}}</dt>
+ <dd>Correspond à la demande effectuée par le navigateur vers le site marchand afin de valider le fait qu'il a la possibilité/permission d'utiliser un gestionnaire de paiement spécifique (par exemple, enregistré/validé pour utiliser Apple Pay).</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h2 id="Dictionnaires">Dictionnaires</h2>
+
+<dl>
+ <dt>{{domxref("AddressErrors")}}</dt>
+ <dd>Un dictionnaire contenant des chaînes de caractère qui fournissent des explications concernant toutes les erreurs dans toutes les entrées {{domxref("PaymentAddress")}} qui contiennent des erreurs.</dd>
+ <dt>{{domxref("PayerErrors")}}</dt>
+ <dd>Un dictionnaire contenant des chaînes de caractère qui fournissent des explications concernant toutes les erreurs en relations avec les attributs email, téléphone et nom de {{domxref("PaymentResponse")}}.</dd>
+ <dt>{{domxref("PaymentDetailsUpdate")}}</dt>
+ <dd>Un objet qui décrit les changements qui doivent être apportés aux détails du paiement dans l'événement dont le serveur à besoin pour mettre à jour l'information à la suite de l'instanciation de l'interface de paiment mais avant que l'utilisateur ne commence à interagir avec.</dd>
+</dl>
+
+<h3 id="Dictionnaires_connexes_pour_la_specification_Basic_Card">Dictionnaires connexes pour la specification <em>Basic Card</em></h3>
+
+<dl>
+ <dt>{{domxref("BasicCardChangeDetails")}}</dt>
+ <dd>Un objet qui donne l'information "<em>redacted</em> address" qui est fournie comme {{domxref("PaymentMethodChangeEvent.methodDetails", "methodDetails")}} dans l'événement {{event("paymentmethodchange")}} envoyé à {{domxref("PaymentRequest")}} lorsque l'utilisateur modifie les informations de paiement.</dd>
+ <dt>{{domxref("BasicCardErrors")}}</dt>
+ <dd>Un message qui fournit tous les messages d'erreur associés avec les champs qui ne sont pas valides dans l'objet {{domxref("BasicCardResponse")}}. Il est utilisé comme valeur de la propriété {{domxref("PaymentValidationErrors.paymentMethod", "paymentMethod")}} dans l'objet {{domxref("PaymentValidationErrors")}} envoyé au {{domxref("PaymentRequest")}} lorsqu'une erreur se produit.</dd>
+ <dt>{{domxref('BasicCardRequest')}}</dt>
+ <dd>Définit une structure d'objet pour contenir les détails d'une requête de paiement, par exemple le type de carte de paiement.</dd>
+ <dt>{{domxref('BasicCardResponse')}}</dt>
+ <dd>Définit une structure d'objet pour les détails de la réponse de paiement tels que le numéro ou la date d'expiration d'une carte utilisée pour faire le paiement, et l'adresse de facturation.</dd>
+</dl>
+
+<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>{{SpecName('Payment')}}</td>
+   <td>{{Spec2('Payment')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Basic Card Payment')}}</td>
+   <td>{{Spec2('Basic Card Payment')}}</td>
+   <td>Defines {{domxref("BasicCardRequest")}} and {{domxref("BasicCardResponse")}}, among other things needed for handling credit card payment</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Payment Method Identifiers')}}</td>
+   <td>{{Spec2('Payment Method Identifiers')}}</td>
+   <td>Defines payment method identifiers and how they are validated, and, where applicable, minted and formally registered with the W3C.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+<h3 id="PaymentRequest_interface">PaymentRequest interface</h3>
+
+<div>
+
+
+<p>{{Compat("api.PaymentRequest", 0)}}</p>
+</div>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Payment_Request_API/Using_the_Payment_Request_API">Using the Payment Request API</a></li>
+ <li><a href="/en-US/docs/Web/API/Payment_Request_API/Concepts">Payment processing concepts</a></li>
+ <li><a href="https://webkit.org/blog/8182/introducing-the-payment-request-api-for-apple-pay/">Introducing the Payment Request API for Apple Pay</a></li>
+ <li><a href="https://developers.google.com/pay/api/web/guides/paymentrequest/tutorial">Google Pay API PaymentRequest Tutorial</a></li>
+ <li><a href="https://github.com/w3c/payment-request-info/wiki/FAQ">W3C Payment Request API FAQ</a></li>
+</ul>
diff --git a/files/fr/web/api/performance/index.html b/files/fr/web/api/performance/index.html
new file mode 100644
index 0000000000..e139a6ac71
--- /dev/null
+++ b/files/fr/web/api/performance/index.html
@@ -0,0 +1,119 @@
+---
+title: Performance
+slug: Web/API/Performance
+tags:
+  - API
+  - Performance
+  - Performance Web
+translation_of: Web/API/Performance
+---
+<div>{{APIRef("Navigation Timing")}}</div>
+
+<p>L'interface <strong><code>Performance</code></strong> donne accès à des informations liées aux performances pour la page actuelle. Elle fait partie de l'API High Resolution Time, mais est complétée par les APIs <a href="/en-US/docs/Web/API/Performance_Timeline">Performance Timeline</a>, <a href="/en-US/docs/Web/API/Navigation_timing_API">Navigation Timing</a>, <a href="/en-US/docs/Web/API/User_Timing_API">User Timing</a>, et <a href="/en-US/docs/Web/API/Resource_Timing_API">Resource Timing</a>.</p>
+
+<p>Un objet de ce type peut être obtenu en appelant  l'attribut en lecture seule {{domxref("Window.performance")}}.</p>
+
+<div class="note">
+<p><strong><em>Note</em>: </strong>Cette interface et ses attributs sont accessibles aux {{domxref("Web Worker")}} sauf dans les cas cités ci-dessous. Notez également que les marqueurs et les mesures de performance sont définis par contexte. Si vous créez un marqueur dans le processus principal (ou un autre Web Worker), vous ne pourrez pas le voir dans le processus du Web Worker, et réciproquement.</p>
+</div>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>L'interface<code>Performance</code> n'hérite d'aucune propriété.</em></p>
+
+<dl>
+ <dt>{{deprecated_inline}}  {{domxref("performance.navigation")}} {{readonlyInline}}</dt>
+ <dd>{{domxref("PerformanceNavigation")}} est un objet qui fournit des informations contextuelles sur les opérations inclues dans les indicateurs de <code>timing</code>, notamment si la page a été chargée ou actualisée, combien de redirections ont été effectuées, etc… Indisponible dans les Web Workers.</dd>
+</dl>
+
+<dl>
+ <dt>{{deprecated_inline}}  {{domxref("performance.timing")}} {{readonlyInline}}</dt>
+ <dd>{{domxref("PerformanceTiming")}} est un objet contenant des informations de performance liées à la latence. Indisponible dans les Web Workers.</dd>
+ <dt>{{domxref("performance.memory")}} {{Non-standard_inline}}</dt>
+ <dd>{{domxref("PerformanceNavigation")}} est un objet non-standard ajouté dans Chrome, contenant des informations basiques d'utilisation de la mémoire.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em><em>L'interface <code>Performance</code> n'hérite d'aucune méthode</em></em>.</p>
+
+<p> </p>
+
+<dl>
+ <dt>{{domxref("performance.clearMarks()")}}</dt>
+ <dd>Supprime le <em>marqueur</em> indiqué des données de performances du navigateur mises en mémoire tampon.</dd>
+ <dt>{{domxref("performance.clearMeasures()")}}</dt>
+ <dd>Supprime la <em>mesure</em> indiquée des données de performances du navigateur mises en mémoire tampon.</dd>
+ <dt>{{domxref("performance.clearResourceTimings()")}}</dt>
+ <dd>Supprime toutes les {{domxref("PerformanceEntry","entrées de performance")}} avec un {{domxref("PerformanceEntry.entryType","entryType")}} "<code>resource</code>" des données de performances du navigateur mises en mémoire tampon.</dd>
+ <dt>{{domxref("performance.getEntries()")}}</dt>
+ <dd>Retourne une liste d'objets {domxref("PerformanceEntry")}} basée sur le <em>filter</em> indiqué.</dd>
+ <dt>{{domxref("performance.getEntriesByName()")}}</dt>
+ <dd>Retourne une liste d'objets {{domxref("PerformanceEntry")}} basée sur le <em>nom</em> d'entrée indiqué.</dd>
+ <dt>{{domxref("performance.getEntriesByType()")}}</dt>
+ <dd>Retourne une liste d'objets {{domxref("PerformanceEntry")}} basée sur le <em>type</em> d'entrée indiqué.</dd>
+ <dt>{{domxref("performance.mark()")}}</dt>
+ <dd>Crée un {{domxref("DOMHighResTimeStamp","timestamp")}} avec le nom indiqué, dans la mémoire tampon du navigateur dédiée aux performances.</dd>
+ <dt>{{domxref("performance.measure()")}}</dt>
+ <dd>Crée un {{domxref("DOMHighResTimeStamp","timestamp")}} nommé, dans la mémoire tampon du navigateur dédiée aux performances, entre deux marqueurs spécifiques (connus comme le <em>marqueur de début</em> et le <em>marqueur de fin</em>, respectivement).</dd>
+</dl>
+
+<p> </p>
+
+<dl>
+ <dt>{{domxref("Performance.now()")}}</dt>
+ <dd>Retourne un objet {{domxref("DOMHighResTimeStamp")}} représentant le nombre de millisecondes écoulées depuis un instant donné.</dd>
+ <dt>{{domxref("performance.setResourceTimingBufferSize()")}}</dt>
+ <dd>Configure la taille de la mémoire tampon pour le chronométrage des ressources du navigateur, avec le nombre indiqué de {{domxref("PerformanceEntry.entryType","type")}} d'{{domxref("PerformanceEntry","performance entry")}}objets "<code>resource</code>" .</dd>
+ <dt>{{domxref("Performance.toJSON()")}} {{non-standard_inline}}</dt>
+ <dd>Retourne un objet JSON représentant l'objet <code>Performance</code>.</dd>
+ <dt> </dt>
+</dl>
+
+<h2 id="Events">Events</h2>
+
+<p>Écoutez ces événéments en utilisant <code>addEventListener()</code> ou en assignant un écouteur d'événément à la propriété <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">on<em>EventName</em> de cette interface.</span></font></p>
+
+<dl>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Performance/resourcetimingbufferfull_event">resourcetimingbufferfull</a></code></dt>
+ <dd>Déclenchée quaund les ressources de la mémoire tampon du navigateur pour le chronométrage est pleine.<br>
+ Également disponible via la propriété <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Performance/onresourcetimingbufferfull">onresourcetimingbufferfull</a></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">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Highres Time', '#sec-extenstions-performance-interface', 'Performance')}}</td>
+   <td>{{Spec2('Highres Time')}}</td>
+   <td>Ajout de la méthode <code>now()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Navigation Timing', '#sec-window.performance-attribute', 'Performance')}}</td>
+   <td>{{Spec2('Navigation Timing')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div>
+
+
+<p>{{Compat("api.Performance")}}</p>
+</div>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Interfaces liées : {{domxref("PerformanceTiming")}}, {{domxref("PerformanceNavigation")}}.</li>
+</ul>
diff --git a/files/fr/web/api/performance/navigation/index.html b/files/fr/web/api/performance/navigation/index.html
new file mode 100644
index 0000000000..7435d8c4ae
--- /dev/null
+++ b/files/fr/web/api/performance/navigation/index.html
@@ -0,0 +1,52 @@
+---
+title: Performance.navigation
+slug: Web/API/Performance/navigation
+tags:
+  - HTTP
+  - Performance
+  - Propriété
+  - lecture seule
+translation_of: Web/API/Performance/navigation
+---
+<p>{{APIRef("Navigation Timing")}}</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>La propriété en lecture seule <code><strong>Performance</strong></code><strong><code>.navigation</code></strong> permet d'accéder à un objet de type {{domxref("PerformanceNavigation")}} représentant la navigation qui a lieu dans le contexte courant, par êxemple, le nombre de redirections.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>navObject</em> = <em>performance</em>.navigation;</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('Navigation Timing', '#sec-window.performance-attribute', 'Performance.navigation')}}</td>
+   <td>{{Spec2('Navigation Timing')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+<div>
+
+
+<p>{{Compat("api.Performance.navigation")}}</p>
+</div>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The {{domxref("Performance")}} interface it belongs to.</li>
+</ul>
diff --git a/files/fr/web/api/performance/now/index.html b/files/fr/web/api/performance/now/index.html
new file mode 100644
index 0000000000..6c325d6d4d
--- /dev/null
+++ b/files/fr/web/api/performance/now/index.html
@@ -0,0 +1,77 @@
+---
+title: Performance.now()
+slug: Web/API/Performance/now
+tags:
+  - API
+  - API Performance Web
+  - Méthode
+  - Performance
+  - Reference
+translation_of: Web/API/Performance/now
+---
+<p>{{APIRef("High Resolution Timing")}}</p>
+
+<p>La méthode <code><strong>Performance.now()</strong></code> retourne un {{domxref("DOMHighResTimeStamp")}}, mesuré en millisecondes, avec une précision de 5 millième de milliseconde (5 microsecondes).</p>
+
+<p> </p>
+
+<p>La valeur retournée représente le temps écoulé depuis l'origine de temps.</p>
+
+<p>Gardez présents à l'esprit les points suivants :</p>
+
+<ul>
+ <li>Dans les workers dédiés créés à partir d'un contexte {{domxref("Window")}}, la valeur dans le worker sera inférieure à <code>performance.now()</code> dans la fenêtre qui a créé ce worker. C'était auparavant la même chose que le <code>t0</code> du contexte principal, mais cela a été changé.</li>
+ <li>Dans les workers partagés ou de service, la valeur dans le worker peut être supérieure à celle du contexte principal, car cette fenêtre peut être créée après ces workers.</li>
+</ul>
+
+<p> </p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<div class="geckoVersionNote">
+<p class="syntaxbox">t = performance.now();</p>
+</div>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">var t0 = performance.now();
+faireQuelqueChose();
+var t1 = performance.now();
+console.log("L'appel à faireQuelqueChose a pris " + (t1 - t0) + " millisecondes.")
+</pre>
+
+<p>Contrairement aux autres données de temps disponibles en JavaScript (par exemple <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Date/now" title="/en-US/docs/JavaScript/Reference/Global_Objects/Date/now"><code>Date.now</code></a>), les horodatages retournés par <code>Performance.now()</code> ne sont pas limités à une précision d'une milliseconde. Au contraire, ils représentent les temps comme des nombres flottants avec une précision pouvant aller jusqu'à une microseconde.</p>
+
+<p>Également contrairement à <code>Date.now()</code>, les valeurs retournées par <code>Performance.now() </code>sont toujours incrémentées à un taux constant, indépendant de l'horloge du système (qui peut être ajustée manuellement ou par l'intermédiaire d'un logiciel comme NTP). Sinon, <code>performance.timing.navigationStart + performance.now()</code> sera approximativement égal à <code>Date.now().</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('Highres Time Level 2', '#dom-performance-now', 'performance.now()')}}</td>
+   <td>{{Spec2('Highres Time Level 2')}}</td>
+   <td>Définitions plus strictes des interfaces et des types.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Highres Time', '#dom-performance-now', 'Performance.now()')}}</td>
+   <td>{{Spec2('Highres Time')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Performance.now")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="http://updates.html5rocks.com/2012/08/When-milliseconds-are-not-enough-performance-now" title="http://updates.html5rocks.com/2012/08/When-milliseconds-are-not-enough-performance-now">When milliseconds are not enough: performance.now() </a>de HTML5 Rocks.</li>
+</ul>
diff --git a/files/fr/web/api/periodicwave/index.html b/files/fr/web/api/periodicwave/index.html
new file mode 100644
index 0000000000..0bd576e5b9
--- /dev/null
+++ b/files/fr/web/api/periodicwave/index.html
@@ -0,0 +1,72 @@
+---
+title: PeriodicWave
+slug: Web/API/PeriodicWave
+tags:
+  - API
+  - Interface
+  - Media
+  - PeriodicWave
+  - Reference
+  - Web Audio
+  - Web Audio API
+  - sinusoïdal
+  - sinusoïde
+translation_of: Web/API/PeriodicWave
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<div>
+<p>L'objet <strong><code>PeriodicWave</code></strong> permet de définir une forme d'onde personnalisée, pouvant être utilisée comme sortie d'un {{domxref("OscillatorNode")}}.</p>
+</div>
+
+<p><code>PeriodicWave</code> n'a ni entrée ni sortie ; elle doit être créée avec {{domxref("AudioContext.createPeriodicWave()")}} et être assignée à un OscillatorNode avec {{domxref("OscillatorNode.setPeriodicWave()")}}.</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("PeriodicWave.PeriodicWave()")}}</dt>
+ <dd>Crée une <code>PeriodicWave</code> (onde périodique) avec toutes les valeurs optionelles mises par défaut. Pour établir des valeurs personnalisées, il faut utiliser le constructeur {{domxref("AudioContext.createPeriodicWave()")}}.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Aucune; par ailleurs, <code>PeriodicWave</code> n'hérite d'aucune propriété.</em></p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Aucune; par ailleurs, <code>PeriodicWave</code> n'hérite d'aucune méthode.</em></p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>{{page("/fr/docs/Web/API/BaseAudioContext/createPeriodicWave","Exemple")}}</p>
+
+<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>{{SpecName('Web Audio API', '#periodicwave', 'PeriodicWave')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+
+
+<p>{{Compat("api.PeriodicWave")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser l'API Web Audio</a></li>
+</ul>
diff --git a/files/fr/web/api/permissions_api/index.html b/files/fr/web/api/permissions_api/index.html
new file mode 100644
index 0000000000..9fe28e07e7
--- /dev/null
+++ b/files/fr/web/api/permissions_api/index.html
@@ -0,0 +1,92 @@
+---
+title: Permissions API
+slug: Web/API/Permissions_API
+translation_of: Web/API/Permissions_API
+---
+<p>{{DefaultAPISidebar("Permissions API")}}{{SeeCompatTable}}</p>
+
+<div class="summary">
+<p>Les permissions d'API fournissent une manière consistente de demander programatiquement le statut des permissions dans le context courrant— par exemple, si l'autorisation d'utiliser l'API est accordée ou refusée, <span style="font-size: 1rem; letter-spacing: -0.00278rem;">et si l'utilisateur sera invité à indiquer si une autorisation doit être accordée pour une AP</span><span style="font-size: 1rem; letter-spacing: -0.00278rem;">I.</span></p>
+</div>
+
+<h2 id="Conceptes_et_usages">Conceptes et usages</h2>
+
+<p>Historiquement les differentes API gérée leur propres permissions inconsistamment — par example l'API <a href="/en-US/docs/Web/API/Notifications_API">Notifications</a> permet de vérifier explicitement sont status d'autorisation et et d'en faire la demande, alors que l'API de <a href="/en-US/docs/Web/API/Geolocation">Geolocation</a> ne le fait pas (ce qui peut poser des problèmes si l'utilisateur décline la première demande d'autorisation). L'API de permissions fournit l'outil pour autorisé les déveloopers à implementes une meilleure expérience utilisteur.</p>
+
+<p>La propriétée <code>permissions</code> a rendu disponible dans l'objet {{domxref("Navigator")}}, ainsi que dans le context standard du navigateur browsin et dans le context du worker ({{domxref("WorkerNavigator")}} — donc les vérificationd de permissions sont disponible dans les workers), et retournent un obet {{domxref("Permissions")}} qui fournit l'accés aux fonctionalité des Permissions API.</p>
+
+<p>Une fois que vous avez cette objet vous pouvez effectuer une tache nécéssitant des permissions, par exemple demander la permission en utilisant la méthode {{domxref("Permissions.query()")}} pour retourner une promesse qui résous avec {{domxref("PermissionStatus")}} pour une API spécifique.</p>
+
+<p>Toutes les status de permissions d'API ne peuvent être demandé en utilisant Permissions API. API notables prenant en compte les autorisations:</p>
+
+<div class="twocolumns">
+<ul>
+ <li>
+  <p><a href="/en-US/docs/Web/API/Clipboard_API">Clipboard API</a></p>
+ </li>
+ <li>
+  <p><a href="/en-US/docs/Web/API/Notifications_API">Notifications API</a></p>
+ </li>
+ <li>
+  <p><a href="/en-US/docs/Web/API/Push_API">Push API</a></p>
+ </li>
+ <li>
+  <p>Web MIDI API</p>
+ </li>
+</ul>
+</div>
+
+<p>Plus d'APIs devrais être supporté par Permissions API dans le future.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>Nous avons fait un exemple simple appelé Location Finder. Vous pouvez <a href="https://chrisdavidmills.github.io/location-finder-permissions-api/">lancer cet exemple en live ici</a>, ou <a href="https://github.com/chrisdavidmills/location-finder-permissions-api/tree/gh-pages">voire le code source sur Github</a>.</p>
+
+<p>Ou en lire plus sur comment cela fonctionne dans notre article <a href="/en-US/docs/Web/API/Permissions_API/Using_the_Permissions_API">Utiliser Permissions API</a>.</p>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<dl>
+ <dt>{{domxref("Navigator.permissions")}} et {{domxref("WorkerNavigator.permissions")}} {{readonlyinline}}</dt>
+ <dd>Fournit l'accés à l'objet {{domxref("Permissions")}} depuis context principal ainsi que celui du worker.</dd>
+ <dt>{{domxref("Permissions")}}</dt>
+ <dd>Fournit la principale fonctionalité de Permission API, tel que les methodes de demande et revocation de permissions.</dd>
+ <dt>{{domxref("PermissionStatus")}}</dt>
+ <dd>Fournit l'accés au status actuel d'une permission, et un gestionnaire d'évenement pour répondre au changements de status d'une permission.</dd>
+</dl>
+
+<h2 id="Specification">Specification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Permissions API')}}</td>
+   <td>{{Spec2('Permissions API')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+<h3 id="Permissions_interface"><code>Permissions</code> interface</h3>
+
+<div>
+
+
+<p>{{Compat("api.Permissions")}}</p>
+</div>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Permissions_API/Using_the_Permissions_API">Using the Permissions API</a></li>
+ <li><a href="https://blog.addpipe.com/using-permissions-api-to-detect-getusermedia-responses/">Using the Permissions API to Detect How Often Users Allow or Deny Camera Access</a></li>
+</ul>
diff --git a/files/fr/web/api/plugin/index.html b/files/fr/web/api/plugin/index.html
new file mode 100644
index 0000000000..c7acb4f856
--- /dev/null
+++ b/files/fr/web/api/plugin/index.html
@@ -0,0 +1,130 @@
+---
+title: Plugin
+slug: Web/API/Plugin
+tags:
+  - API
+  - Add-ons
+  - DOM
+  - NeedsContent
+  - Plug-in
+  - Plugins
+translation_of: Web/API/Plugin
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<p>L'interface <code>Plugin</code> fournit des informations à propos d'un <a href="/en-US/docs/Mozilla/Add-ons/Plugins">plugin</a> du navigateur.</p>
+
+<div class="note">
+<p><strong>Remarque</strong>: Les propriétés propres des objets <code>Plugin</code> ne sont plus énumérables dans les dernières versions des navigateurs.</p>
+</div>
+
+<h2 id="Properties" name="Properties">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("Plugin.description")}} {{readonlyinline}}</dt>
+ <dd>Une description lisible du plugin.</dd>
+ <dt>{{domxref("Plugin.filename")}} {{readonlyinline}}</dt>
+ <dd>Le nom de fichier du fichier plugin.</dd>
+ <dt>{{domxref("Plugin.name")}} {{readonlyinline}}</dt>
+ <dd>Le nom du plugin.</dd>
+ <dt>{{domxref("Plugin.version")}} {{readonlyinline}}</dt>
+ <dd>Le numéro de version du plugin, en chaîne de caractères.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("Plugin.item")}}</dt>
+ <dd>Renvoie le type MIME d'un type de contenu pris en charge, en fonction de l'index dans une liste de types pris en charge.</dd>
+ <dt>{{domxref("Plugin.namedItem")}}</dt>
+ <dd>Renvoie le type MIME d'un élément pris en charge.</dd>
+</dl>
+
+<h2 id="Caractéristiques">Caractéristiques</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Caractéristique</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','#dom-plugin','Plugin')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilités">Compatibilités</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Les paramètres de la méthode changent d'optionnel à requis.</td>
+   <td>{{CompatChrome(59)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Les paramètres de la méthode changent d'optionnel à requis.</td>
+   <td>{{CompatChrome(59)}}</td>
+   <td>{{CompatChrome(59)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fr/web/api/pointer_events/gestes_pincer_zoom/index.html b/files/fr/web/api/pointer_events/gestes_pincer_zoom/index.html
new file mode 100644
index 0000000000..707b3e5eb3
--- /dev/null
+++ b/files/fr/web/api/pointer_events/gestes_pincer_zoom/index.html
@@ -0,0 +1,220 @@
+---
+title: Gestes pincer et zoomer
+slug: Web/API/Pointer_events/gestes_pincer_zoom
+tags:
+  - Guide
+  - PointerEvent
+  - touch
+translation_of: Web/API/Pointer_events/Pinch_zoom_gestures
+---
+<p>{{DefaultAPISidebar("Pointer Events")}}</p>
+
+<p>Ajouter la gestion des <em>gestes</em> à une application peut améliorer de manière significative l'expérience utilisateur. Il existe de nombreux types de gestes, du simple geste <em>swipe</em> (balayage de l'écran) aux gestes plus complexes avec plusieurs doigts comme le <em>twist</em> (rotation), où les points de contact (dits <em>pointeurs</em>) bougent dans des directions différentes.</p>
+
+<p>Cet exemple montre comment détecter les gestes de <em>pinch/zoom</em> (pincer/zoomer), en utilisant les {{domxref("Pointer_events","événements de pointeur")}} pour détecter si l'utilisateur bouge deux pointeurs plus proches ou plus loin l'un de l'autre. </p>
+
+<div class="note">
+<p><strong>Note</strong>: Une version <em>en direct</em> de cette application est disponible sur <a href="https://mdn.github.io/dom-examples/pointerevents/Pinch_zoom_gestures.html">Github</a>. Le <a href="https://github.com/mdn/dom-examples/blob/master/pointerevents/Pinch_zoom_gestures.html">code source est également disponible sur Github</a>; les pull requests et <a href="https://github.com/mdn/dom-examples/issues">bug reports</a> sont les bienvenus.</p>
+</div>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans cet exemple, on utilise les {{domxref("Pointer_events","événement de pointeur")}} pour détecter simultanément plusieurs appareils de pointage quel qu'en soit le type, comme les doigts, la souris, et le stylet. Le geste de pincer (zoomer), qui consiste à déplacer deux pointeurs plus près l'un vers l'autre, change la couleur d'arrière-plan de l'élément cible en  <code>lightblue</code>. Le geste d'étirer (dézoomer), qui consiste à déplacer deux pointeur plus loin l'un de l'autre, change la couleur d'arrière-plan de l'élément cible en <code>pink</code>.</p>
+
+<h3 id="Définir_la_cible_du_toucher">Définir la cible du toucher</h3>
+
+<p>L'application utilise un {{HTMLElement("div")}} pour définir la zone cible du pointeur.</p>
+
+<pre class="brush: html">&lt;style&gt;
+  div {
+    margin: 0em;
+    padding: 2em;
+  }
+  #target {
+    background: white;
+    border: 1px solid black;
+  }
+&lt;/style&gt;
+</pre>
+
+<h3 id="État_global">État global</h3>
+
+<p>Prendre en charge un mouvement à deux pointeurs nécessite de conserver un état des événements du pointeur durant les différentes phases de l'événement. Cette application utilise deux variables globales pour mettre en cache l'état de l'événement.</p>
+
+<pre class="brush: js">// Variables globales pour mettre en cache l'état de l'événement
+var evCache = new Array();
+var prevDiff = -1;
+</pre>
+
+<h3 id="Enregistrer_les_gestionnaires_d'événement">Enregistrer les gestionnaires d'événement</h3>
+
+<p>Les gestionnaires d'événement sont enregistrés pour les événements de pointeur suivants: {{event("pointerdown")}}, {{event("pointermove")}} et {{event("pointerup")}}. Le gestionnaire pour {{event("pointerup")}} est utilisé pour les événements {{event("pointercancel")}}, {{event("pointerout")}} et {{event("pointerleave")}} puisque ces quatre événements ont la même sémantique dans cette application.</p>
+
+<pre class="brush: js">function init() {
+ // Ajoute les gestionnaires d'événements pour la cible du pointeur
+ var el=document.getElementById("target");
+ el.onpointerdown = pointerdown_handler;
+ el.onpointermove = pointermove_handler;
+
+ // Même chose pour les événements pointer{up,cancel,out,leave} puisque
+ // la sémantique pour ces événements - dans cette appli - est identique.
+ el.onpointerup = pointerup_handler;
+ el.onpointercancel = pointerup_handler;
+ el.onpointerout = pointerup_handler;
+ el.onpointerleave = pointerup_handler;
+}
+</pre>
+
+<h3 id="Pointer_down">Pointer down</h3>
+
+<p>L'événement {{event("pointerdown")}} est déclenché quand un pointeur (souris, stylo/stylet ou point de contact sur un écran tactile) entre en contact avec la <em>surface de contact</em>. Dans cette application, l'état de l'événement doit être mis en cache dans le cas où il fait partie d'un geste à deux pointeurs pour pincer/zoomer.</p>
+
+<pre class="brush: js">function pointerdown_handler(ev) {
+ // L'événement pointerdown signale le début d'une interraction de toucher.
+ // L'événement est mis en cache pour prendre en charge les gestes à 2 doigts
+ evCache.push(ev);
+ log("pointerDown", ev);
+}
+</pre>
+
+<h3 id="Pointer_move">Pointer move</h3>
+
+<p>Le gestionnaire d'événement {{event("pointermove")}} détecte si un utilisateur est en train d'effectuer le geste de pincer/zoomer. Si deux pointeurs sont utilisés, et que la distance entre les pointeurs augmente (ce qui signifie qu'on étire ou dézoome), la couleur d'arrière-plan est changée en <code>pink</code>, et si la distance entre les pointeurs diminue (ce qui signifie qu'on pince ou dézoome), la couleur d'arrière-plan est changée en <code>lightblue</code>. Dans une application plus sophistiquée, le pincement ou l'étirement pourrait être utilisé pour appliquer une sémantique spécifique à l'application.</p>
+
+<p>Quand cet événement est traité, la bordure de la cible est définie à <code>dashed</code> pour fournir une indication visuelle claire que l'élément a reçu un événement de déplacement.</p>
+
+<pre class="brush: js">function pointermove_handler(ev) {
+ // Cette fonction implémente la détection du mouvement horizontal pincer/zoomer.
+ //
+ // Si la distance entre les deux pointeurs augmente (zoomer),
+ // l'arrière-plan de l'élément cible est changé en "pink" et si la
+ // distance diminue (dezoomer), la couleur est changée en "lightblue".
+ //
+ // Cette fonctionne définie la bordure de l'élément cible à "dashed" pour indiquer
+ // visuellement que la cible du pointeur a reçu un événement de déplacement.
+ log("pointerMove", ev);
+ ev.target.style.border = "dashed";
+
+ // Trouve le pointeur en cours dans le cache et le met à jour avec cet événement
+ for (var i = 0; i &lt; evCache.length; i++) {
+   if (ev.pointerId == evCache[i].pointerId) {
+      evCache[i] = ev;
+      break;
+   }
+ }
+
+ // Si deux pointeurs sont utilisés, vérifie le geste de pincement
+ if (evCache.length == 2) {
+   // Calcule la distance entre les deux pointeurs
+   var curDiff = Math.abs(evCache[0].clientX - evCache[1].clientX);
+
+   if (prevDiff &gt; 0) {
+     if (curDiff &gt; prevDiff) {
+       // La distance entre les deux pointeurs a augmenté
+       log("Pinch moving OUT -&gt; Zoom in", ev);
+       ev.target.style.background = "pink";
+     }
+     if (curDiff &lt; prevDiff) {
+       // La distance entre les deux pointeurs a diminué
+       log("Pinch moving IN -&gt; Zoom out",ev);
+       ev.target.style.background = "lightblue";
+     }
+   }
+
+   // Met en cache la distance pour les événements suivants
+   prevDiff = curDiff;
+ }
+}
+</pre>
+
+<h3 id="Pointer_up">Pointer up</h3>
+
+<p>L'événement {{event("pointerup")}} est déclenché quand le pointeur est levé de la <em>surface de contact</em>. Quand cela arrive, l'événement est retiré du cache et la couleur d'arrière-plan et bordure de la cible sont rétablies à leur valeur d'origine.</p>
+
+<p>Dans cette application, ce gestionnaire est également utilisé pour les événements {{event("pointercancel")}}, {{event("pointerleave")}} et {{event("pointerout")}}.</p>
+
+<pre class="brush: js">function pointerup_handler(ev) {
+  log(ev.type, ev);
+  // Retire ce pointeur du cache et rétablit l'arrière-plan et
+  // et bordure de la cible
+  remove_event(ev);
+  ev.target.style.background = "white";
+  ev.target.style.border = "1px solid black";
+
+  // Si le nombre de pointeurs restant est inférieur à deux, remet à zéro la différence
+  if (evCache.length &lt; 2) prevDiff = -1;
+}
+</pre>
+
+<h3 id="Application_UI">Application UI</h3>
+
+<p>Cette application utilise un élément {{HTMLElement("div")}} comme zone de toucher et fournit des boutons pour activer et nettoyer les logs.</p>
+
+<p class="note">Pour empêcher que le comportement par défaut du navigateur au toucher surcharge le gestionnaire de l'application, la propriété {{cssxref("touch-action")}} est appliquée à l'élément {{HTMLElement("body")}}.</p>
+
+<pre class="brush: html">&lt;body onload="init();" style="touch-action:none"&gt;
+ &lt;div id="target"&gt;Touchez l'écran avec deux pointeurs, puis pincez ou étirez.&lt;br/&gt;
+    La couleur d'arrière-plan changera en rose au pincement (Zoomer)
+    ou en bleu clair à l'étirement (Dézoomer).&lt;/div&gt;
+ &lt;!-- UI pour log/debug --&gt;
+ &lt;button id="log" onclick="enableLog(event);"&gt;Démarrer/Stopper les logs&lt;/button&gt;
+ &lt;button id="clearlog" onclick="clearLog(event);"&gt;Nettoyer les logs&lt;/button&gt;
+ &lt;p&gt;&lt;/p&gt;
+ &lt;output&gt;&lt;/output&gt;
+&lt;/body&gt;
+</pre>
+
+<h3 id="Fonctions_diverses">Fonctions diverses</h3>
+
+<p>Ces fonctions prennent en charge l'application mais ne sont pas directement impliquées dans le flux des événements.</p>
+
+<h4 id="Gestion_du_Cache">Gestion du Cache</h4>
+
+<p>Cette fonction aide à gérer le cache global des événements, <code>evCache</code>.</p>
+
+<pre class="brush: js">function remove_event(ev) {
+ // Supprime l'événement du cache
+ for (var i = 0; i &lt; evCache.length; i++) {
+   if (evCache[i].pointerId == ev.pointerId) {
+     evCache.splice(i, 1);
+     break;
+   }
+ }
+}
+</pre>
+
+<h4 id="Log_des_événements">Log des événements</h4>
+
+<p>Ces fonctions sont utilisées pour afficher l'activité du pointeur dans la fenêtre de l'application (pour aider à debugger et à apprendre le flux des événements).</p>
+
+<pre class="brush: js">// Flag log
+var logEvents = false;
+
+// Fonctions Log/debug
+function enableLog(ev) {
+  logEvents = logEvents ? false : true;
+}
+
+function log(prefix, ev) {
+  if (!logEvents) return;
+  var o = document.getElementsByTagName('output')[0];
+  var s = prefix + ": pointerID = " + ev.pointerId +
+                " ; pointerType = " + ev.pointerType +
+                " ; isPrimary = " + ev.isPrimary;
+  o.innerHTML += s + "
+";
+}
+
+function clearLog(event) {
+ var o = document.getElementsByTagName('output')[0];
+ o.innerHTML = "";
+}
+</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://hacks.mozilla.org/2015/08/pointer-events-now-in-firefox-nightly/">Pointer Events now in Firefox Nightly</a>; Mozilla Hacks; by Matt Brubeck and Jason Weathersby; 2015-Aug-04</li>
+ <li><a href="https://github.com/jquery/PEP">jQuery Pointer Events Polyfill</a></li>
+ <li><a href="http://www.google.com/design/spec/patterns/gestures.html">Gestures</a>; Google Design Patterns</li>
+</ul>
diff --git a/files/fr/web/api/pointer_events/index.html b/files/fr/web/api/pointer_events/index.html
new file mode 100644
index 0000000000..b8f5de1c8b
--- /dev/null
+++ b/files/fr/web/api/pointer_events/index.html
@@ -0,0 +1,433 @@
+---
+title: Événements de pointeur
+slug: Web/API/Pointer_events
+tags:
+  - API
+  - NeedsTranslation
+  - Overview
+  - TopicStub
+translation_of: Web/API/Pointer_events
+---
+<p>{{DefaultAPISidebar("Pointer Events")}}</p>
+
+<p>La plupart du contenu web d'aujourd'hui suppose que le périphérique de pointage de l'utilisateur sera une souris. Cependant, beaucoup d'appareils prennent en charge d'autres types de d'entrée pour pointeur, comme le stylet ou les doigts pour les écrans tactiles. Des extensions aux modèles d'événement de pointage sont nécessaires et les <em>événements de pointeur</em> répondent à ce besoin.</p>
+
+<p>Les événements de pointeur sont des événements DOM déclenché pour tout périphérique de pointage. Ils sont conçus pour créer un modèle unique d'événement DOM pour gérer les périphériques de pointage comme la souris, le stylet ou le toucher (avec un ou plusieurs doigts). Un <em><a href="#term_pointer">pointeur</a></em> est agnostique du type de matériel utilisé pour cibler un endroit sur l'écran.</p>
+
+<p>Avoir un seul modèle pour gérer les événements de pointeur peut simplifier la création de sites web et applications et fournir une bonne expérience utilisateur quelque soit le matériel de l'utilisateur. Toutefois, pour les scénarios dans lesquels une gestion spécifique au périphérique est souhaitée, les événements de pointeur définissent une propriété {{domxref("PointerEvent.pointerType","pointerType")}} qui permet de connaître le type de périphérique ayant déclenché l'événement.</p>
+
+<p>Les événements nécessaires pour gérer les entrées de pointeur génériques sont analogues aux {{domxref("MouseEvent","événements de souris")}}. Par conséquent, les types d'événement de pointeur sont intentionnelement similaires aux événements de souris (<code>mousedown/pointerdown</code>, <code>mousemove/pointermove</code>, etc). De plus, les événements de pointeur contiennent les propriétés usuelles présentes dans les événements de souris (coordonnées client, élément cible, états des boutons, etc.) ainsi que de nouvelles propriétés pour les autres types d'entrée: pression, géométrie de contact, inclinaison, etc. En fait, l'interface {{domxref("PointerEvent")}} hérite toutes les propriétés de {{domxref("MouseEvent","MouseEvent")}} ce qui facilite la migration des événements souris aux événements de pointeur.</p>
+
+<h2 id="Terminologie">Terminologie</h2>
+
+<dl>
+ <dt>pointeur actif</dt>
+ <dd>Tout périphérique d'entrée <em><a href="#term_pointer">pointeur</a></em> pouvant produire des événements. Un pointeur est considéré actif s'il peut encore produire des événements. Par exemple, un stylet posé sur l'écran est considéré comme actif puisqu'il peut produire des événements en étant déplacé ou levé.</dd>
+ <dt id="term_digitizer">numériseur (digitizer)</dt>
+ <dd>Un dispositif avec une surface pouvant recevoir et détecter le contact. Le plus souvent, le dispositif est un écran tactile pouvant détecter l'entrée provenant du stylet ou du doigt.</dd>
+ <dt id="term_hit_test">hit test</dt>
+ <dd>Le procédé qu'utilise le navigateur pour détermine l'élément cible de l'événement pointeur. Typiquement, il est déterminé en utilisant l'emplacement du pointeur et la disposition visuelle des éléments dans un document d'un media écran.</dd>
+ <dt id="term_pointer">pointeur</dt>
+ <dd>Une représentation agnostique du périphérique en entrée pouvant cibler des coordonnées sur un écran. Des exemples d'appareils de <em>pointeur</em> sont la souris, le stylet et la contact tactile.</dd>
+ <dt>capture du pointeur</dt>
+ <dd>La capture du pointeur permet aux événements d'être redirigé vers un élément particulier autre que le résultat du hit test.</dd>
+ <dt id="term_pointer_event">événement de pointeur</dt>
+ <dd>Un {{domxref("PointerEvent","événement")}} DOM déclenché pour un <em><a href="#term_pointer">pointeur</a></em>.</dd>
+</dl>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<p>L'interface principale est l'interface {{domxref("PointerEvent")}}, qui comprend un {{domxref("PointerEvent.PointerEvent","constructeur")}} ainsi que plusieurs événements. L'API ajoute également quelques extensions aux interfaces {{domxref("Element")}} et {{domxref("Navigator")}}. Les sous-sections suivantes décrivent brièvement chaque interface et propriétés liées.</p>
+
+<h3 id="Interface_PointerEvent">Interface PointerEvent</h3>
+
+<p>L'interface {{domxref("PointerEvent")}} hérite de l'interface {{domxref("MouseEvent")}} et a les propriétés suivantes (toutes sont {{readonlyInline}}).</p>
+
+<ul>
+ <li>{{ domxref('PointerEvent.pointerId','pointerId')}} - un identifiant unique pour le pointeur ayant déclenché l'événement.</li>
+ <li>{{ domxref('PointerEvent.width','width')}} - la largeur (ordre de grandeur sur l'axe X), en pixels CSS, du point de contact.</li>
+ <li>{{ domxref('PointerEvent.height','height')}} - la hauteur (ordre de grandeur sur l'axe Y), en pixels CSS, du point de contact.</li>
+ <li>{{ domxref('PointerEvent.pressure','pressure')}} - la pression du pointeur normalisée sur une échelle entre 0 et 1, où 0 et 1 représentent respectivement la pression minimale et le maximale que l'appareil est capable de détecter.</li>
+ <li>{{ domxref('PointerEvent.tiltX','tiltX')}} - l'angle du plan (en degrés, sur une échelle de -90 à 90) entre le plan Y-Z et le plan qui contient l'axe du stylo et l'axe Y.</li>
+ <li>{{ domxref('PointerEvent.tiltY','tiltY')}} - l'angle du plan (en degrés, sur une échelle de -90 à 90) entre le plan X-Z et le plan qui contient l'axe du stylo et l'axe X.</li>
+ <li>{{ domxref('PointerEvent.pointerType','pointerType')}} - indique le type d'appareil ayant déclenché l'événement (souris, stylet, toucher, etc.)</li>
+ <li>{{ domxref('PointerEvent.isPrimary','isPrimary')}} - indique si le pointeur est le pointeur principal de son type (utile dans le cas du multi-touch).</li>
+</ul>
+
+<h3 id="Types_dévénements_et_gestionnaires_dévénements_globaux">Types d'événements et gestionnaires d'événements globaux</h3>
+
+<p>Il existe dix types d'événement de pointeur, dont sept qui ont la même sémantique que les événements souris (<code>down, up, move, over, out, enter, leave</code>). Vous trouverez ci-dessous une courte description de chaque type d'événement et son {{domxref("GlobalEventHandlers","gestionnaire d'événement global")}} associé.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Event</th>
+   <th scope="col">On Event Handler</th>
+   <th scope="col">Description</th>
+  </tr>
+  <tr>
+   <td>{{event('pointerover')}}</td>
+   <td>{{domxref('GlobalEventHandlers.onpointerover','onpointerover')}}</td>
+   <td>déclenché quand un pointeur entre à l'intérieur des limites du <a href="#term_hit_test">hit test</a> d'un élément.</td>
+  </tr>
+  <tr>
+   <td>{{event('pointerenter')}}</td>
+   <td>{{domxref('GlobalEventHandlers.onpointerenter','onpointerenter')}}</td>
+   <td>déclenché quand un pointeur entre à l'intérieur des limites du <a href="#term_hit_test">hit test</a> d'un élément ou d'un de ses descendants.</td>
+  </tr>
+  <tr>
+   <td>{{event('pointerdown')}}</td>
+   <td>{{domxref('GlobalEventHandlers.onpointerdown','onpointerdown')}}</td>
+   <td>déclenché quand le pointeur devient <em>actif</em> (que le contact est établit).</td>
+  </tr>
+  <tr>
+   <td>{{event('pointermove')}}</td>
+   <td>{{domxref('GlobalEventHandlers.onpointermove','onpointermove')}}</td>
+   <td>déclenché quand les coordonnées du pointeur changent (que le pointeur bouge).</td>
+  </tr>
+  <tr>
+   <td>{{event('pointerup')}}</td>
+   <td>{{domxref('GlobalEventHandlers.onpointerup','onpointerup')}}</td>
+   <td>déclenché quand le pointeur n'est plus <em>actif</em> (que le contact est relaché).</td>
+  </tr>
+  <tr>
+   <td>{{event('pointercancel')}}</td>
+   <td>{{domxref('GlobalEventHandlers.onpointercancel','onpointercancel')}}</td>
+   <td>le navigateur déclenche cet événement s'il détecte que le pointeur ne pourra plus générer d'événement (si l'appareil est désactivé par exemple).</td>
+  </tr>
+  <tr>
+   <td>{{event('pointerout')}}</td>
+   <td>{{domxref('GlobalEventHandlers.onpointerout','onpointerout')}}</td>
+   <td>déclenché quand le pointeur n'est plus affecté à l'élément: qu'il sort des limites du <a href="term_hit_test">hit test</a> de l'élément; qu'il déclenche l'événement pointerup ou pointercancel; que le stylet sort de la zone de l'écran de l'appareil.</td>
+  </tr>
+  <tr>
+   <td>{{event('pointerleave')}}</td>
+   <td>{{domxref('GlobalEventHandlers.onpointerleave','onpointerleave')}}</td>
+   <td>déclenché quand le pointeur sort des limites du <a href="term_hit_test">hit test</a> de l'élément. Cet événement est également déclenché lorsqu'on utilise un stylet et qu'il sort de la zone détectable par le numériseur.</td>
+  </tr>
+  <tr>
+   <td>{{event('gotpointercapture')}}</td>
+   <td>Aucun (voir <a href="#Extensions_d'Element">Extensions d'Elements</a>)</td>
+   <td>déclenché quand un élément reçoit la capture du pointeur.</td>
+  </tr>
+  <tr>
+   <td>{{event('lostpointercapture')}}</td>
+   <td>Aucun (voir <a href="#Extensions_d'Element">Extensions d'Element</a>)</td>
+   <td>déclenché quand la capture du pointeur est désactivée.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Extensions_dElement">Extensions d'Element</h3>
+
+<p>Il existe quatre extensions à l'interface {{domxref("Element")}}:</p>
+
+<ul>
+ <li>{{domxref("Element.ongotpointercapture","ongotpointercapture")}} - an EventHandler that returns the event handler (function) for the gotpointercapture event type.</li>
+ <li>{{domxref("Element.onlostpointercapture","onlostpointercapture")}} - an EventHandler interface that returns the event handler (function) for the lostpointercapture event type.</li>
+ <li>{{domxref("Element.setPointerCapture()","setPointerCapture()")}} - this method designates a specific element as the <em>capture target</em> of future pointer events.</li>
+ <li>{{domxref("Element.releasePointerCapture()","releasePointerCapture()")}} - the method releases (stops) <em>pointer capture</em> that was previously set for a specific pointer event.</li>
+</ul>
+
+<h3 id="Extension_de_Navigator">Extension de Navigator</h3>
+
+<p>La propriété {{domxref("Navigator.maxTouchPoints")}} est utilisé pour déterminer le nombre maximum de points de contact pris en charge à n'importe quel moment.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Cette section contient des exemples basiques d'utilisation d'interfaces d'événement de pointeur.</p>
+
+<h3 id="Enregistrer_des_gestionnaires_dévénement">Enregistrer des gestionnaires d'événement</h3>
+
+<p>This example registers a handler for every event type for the given element.</p>
+
+<pre class="brush: js notranslate">&lt;html&gt;
+&lt;script&gt;
+function over_handler(event) { }
+function enter_handler(event) { }
+function down_handler(event) { }
+function move_handler(event) { }
+function up_handler(event) { }
+function cancel_handler(event) { }
+function out_handler(event) { }
+function leave_handler(event) { }
+function gotcapture_handler(event) { }
+function lostcapture_handler(event) { }
+
+function init() {
+ var el=document.getElementById("target");
+ // Register pointer event handlers
+ el.onpointerover = over_handler;
+ el.onpointerenter = enter_handler;
+ el.onpointerdown = down_handler;
+ el.onpointermove = move_handler;
+ el.onpointerup = up_handler;
+ el.onpointercancel = cancel_handler;
+ el.onpointerout = out_handler;
+ el.onpointerleave = leave_handler;
+ el.gotpointercapture = gotcapture_handler;
+ el.lostpointercapture = lostcapture_handler;
+}
+&lt;/script&gt;
+&lt;body onload="init();"&gt;
+&lt;div id="target"&gt; Touch me ... &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h3 id="Propriétés_des_événements">Propriétés des événements</h3>
+
+<p>This example illustrates accessing all of a touch event's properties.</p>
+
+<pre class="brush: js notranslate">&lt;html&gt;
+&lt;script&gt;
+var id = -1;
+
+function process_id(event) {
+  // Process this event based on the event's identifier
+}
+function process_mouse(event) {
+  // Process the mouse pointer event
+}
+function process_pen(event) {
+  // Process the pen pointer event
+}
+function process_touch(event) {
+  // Process the touch pointer event
+}
+function process_tilt(tiltX, tiltY) {
+  // Tilt data handler
+}
+function process_pressure(pressure) {
+  // Pressure handler
+}
+function process_non_primary(event) {
+  // Pressure handler
+}
+
+function down_handler(ev) {
+ // Calculate the touch point's contact area
+ var area = ev.width * ev.height;
+
+ // Compare cached id with this event's id and process accordingly
+ if (id == ev.identifier) process_id(ev);
+
+ // Call the appropriate pointer type handler
+ switch (ev.pointerType) {
+   case "mouse":
+     process_mouse(ev);
+     break;
+   case "pen":
+     process_pen(ev);
+     break;
+   case "touch":
+     process_touch(ev);
+     break;
+   default:
+     console.log("pointerType " + ev.pointerType + " is Not suported");
+ }
+
+ // Call the tilt handler
+ if (ev.tiltX != 0 &amp;&amp; ev.tiltY != 0) process_tilt(ev.tiltX, ev.tiltY);
+
+ // Call the pressure handler
+ process_pressure(ev.pressure);
+
+ // If this event is not primary, call the non primary handler
+ if (!ev.isPrimary) process_non_primary(evt);
+}
+
+function init() {
+ var el=document.getElementById("target");
+ // Register pointerdown handler
+ el.onpointerdown = down_handler;
+}
+&lt;/script&gt;
+&lt;body onload="init();"&gt;
+ &lt;div id="target"&gt; Touch me ... &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Déterminer_le_pointeur_principal">Déterminer le pointeur principal</h2>
+
+<p>In some scenarios there may be multiple pointers (for example a device with both a touchscreen and a mouse) or a pointer supports multiple contact points (for example a touchscreen that supports multiple finger touches). The application can use the {{domxref("PointerEvent.isPrimary","isPrimary")}} property to identify a master pointer among the set of <em>active pointers</em> for each pointer type. If an application only wants to support a primary pointer, it can ignore all pointer events that are not primary.</p>
+
+<p>For mouse, there is only one pointer so it will always be the primary pointer. For touch input, a pointer is considered primary if the user touched the screen when there were no other active touches. For pen and stylus input, a pointer is considered primary if the user's pen initially contacted the screen when there were no other active pens contacting the screen.</p>
+
+<h2 id="Déterminer_létat_des_boutons">Déterminer l'état des boutons</h2>
+
+<p>Some pointer devices, such as mouse and pen, support multiple buttons and the button presses can be <em>chorded</em> i.e. depressing an additional button while another button on the pointer device is already depressed. To determine the state of button presses, pointer events uses the {{domxref("MouseEvent.button","button")}} and {{domxref("MouseEvent.buttons","buttons")}} properties of the {{domxref("MouseEvent")}} interface (that {{domxref("PointerEvent")}} inherits from). The following table provides the values of <code>button</code> and <code>buttons</code> for the various device button states.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Device Button State</th>
+   <th scope="col">button</th>
+   <th scope="col">buttons</th>
+  </tr>
+  <tr>
+   <td>Mouse move with no buttons pressed</td>
+   <td>-1</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td>Left Mouse, Touch Contact, Pen contact (with no modifier buttons pressed)</td>
+   <td>0</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td>Middle Mouse</td>
+   <td>1</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>Right Mouse, Pen contact with barrel button pressed</td>
+   <td>2</td>
+   <td>2</td>
+  </tr>
+  <tr>
+   <td>X1 (back) Mouse</td>
+   <td>3</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>X2 (forward) Mouse</td>
+   <td>4</td>
+   <td>16</td>
+  </tr>
+  <tr>
+   <td>Pen contact with eraser button pressed</td>
+   <td>5</td>
+   <td>32</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Capture_du_pointeur">Capture du pointeur</h2>
+
+<p>Pointer capture allows events for a particular {{domxref("PointerEvent","pointer event")}} to be re-targeted to a particular element instead of the normal <a href="#term_hit_test">hit test</a> at a pointer's location. This can be used to ensure that an element continues to receive pointer events even if the pointer device's contact moves off the element (for example by scrolling).</p>
+
+<p>The following example shows pointer capture being set on an element.</p>
+
+<pre class="brush: js notranslate">&lt;html&gt;
+&lt;script&gt;
+function downHandler(ev) {
+ var el=document.getElementById("target");
+ //Element 'target' will receive/capture further events
+ el.setPointerCapture(ev.pointerId);
+}
+function init() {
+ var el=document.getElementById("target");
+ el.onpointerdown = downHandler;
+}
+&lt;/script&gt;
+&lt;body onload="init();"&gt;
+&lt;div id="target"&gt; Touch me ... &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>The following example shows a pointer capture being released (when a {{event("pointercancel")}} event occurs. The browser does this automatically when a {{event("pointerup")}} or {{event("pointercancel")}} event occurs.</p>
+
+<pre class="brush: js notranslate">&lt;html&gt;
+&lt;script&gt;
+function downHandler(ev) {
+ var el=document.getElementById("target");
+ // Element "target" will receive/capture further events
+ el.setPointerCapture(ev.pointerId);
+}
+function cancelHandler(ev) {
+ var el=document.getElementById("target");
+ // Release the pointer capture
+ el.releasePointerCapture(ev.pointerId);
+}
+function init() {
+ var el=document.getElementById("target");
+ // Register pointerdown and pointercancel handlers
+ el.onpointerdown = downHandler;
+ el.onpointercancel = cancelHandler;
+}
+&lt;/script&gt;
+&lt;body onload="init();"&gt;
+&lt;div id="target"&gt; Touch me ... &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Propriété_touch-action">Propriété touch-action</h2>
+
+<p>The {{cssxref("touch-action")}} CSS property is used to specifiy whether or not the browser should apply its default (<em>native</em>) touch behavior (such as zooming or panning) to a region. This property may be applied to all elements except: non-replaced inline elements, table rows, row groups, table columns, and column groups.</p>
+
+<p>A value of <code>auto</code> means the browser is free to apply its default touch behavior (to the specified region) and the value of <code>none</code> disables the browser's default touch behavior for the region. The values <code>pan-x</code> and <code>pan-y</code>, mean that touches that begin on the specified region are only for horizontal and vertical scrolling, respectively. The value <code>manipulation</code> means the browser may consider touches that begin on the element are only for scrolling and zooming.</p>
+
+<p>In the following example, the browser's default touch behavior is disabled for the <code>div</code> element.</p>
+
+<pre class="brush: html notranslate">&lt;html&gt;
+&lt;body&gt;
+ &lt;div style="touch-action:none;"&gt;Can't touch this ... &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>In the following example, default touch behavior is disabled for some <code>button</code> elements.</p>
+
+<pre class="brush: css notranslate">button#tiny {
+  touch-action: none;
+}
+</pre>
+
+<p>In the following example, when the <code>target</code> element is touched, it will only pan in the horizontal direction.</p>
+
+<pre class="brush: css notranslate">#target {
+  touch-action: pan-x;
+}
+</pre>
+
+<h2 id="Compatibilité_avec_les_événements_de_souris">Compatibilité avec les événements de souris</h2>
+
+<p>Although the pointer event interfaces enable applications to create enhanced user experiences on pointer enabled devices, the reality is the vast majority of today's web content is designed to only work with mouse input. Consequently, even if a browser supports pointer events, the browser must still process mouse events so content that assumes mouse-only input will work as is without direct modification. Ideally, a pointer enabled application does not need to explicitly handle mouse input. However, because the browser must process mouse events, there may be some compatibility issues that need to be handled. This section contains information about pointer event and mouse event interaction and the ramifications for application developers.</p>
+
+<p>The browser <em>may map generic pointer input to mouse events for compatibility with mouse-based content</em>. This mapping of events is called <em>compatibility mouse events</em>. Authors can prevent the production of certain compatibility mouse events by canceling the pointerdown event but note that:</p>
+
+<ul>
+ <li>Mouse events can only be prevented when the pointer is down.</li>
+ <li>Hovering pointers (e.g. a mouse with no buttons pressed) cannot have their mouse events prevented.</li>
+ <li>The mouseover, mouseout, mouseenter, and mouseleave events are never prevented (even if the pointer is down).</li>
+</ul>
+
+<h2 id="Bonnes_pratiques">Bonnes pratiques</h2>
+
+<p>Here are some <em>best practices</em> to consider when using pointer events:</p>
+
+<ul>
+ <li>Minimize the amount of work done that is done in the event handlers.</li>
+ <li>Add the event handlers to a specific target element (rather than the entire document or nodes higher up in the document tree).</li>
+ <li>The target element (node) should be large enough to accommodate the largest contact surface area (typically a finger touch). If the target area is too small, touching it could result in firing other events for adjacent elements.</li>
+</ul>
+
+<h2 id="Implémentation_et_déploiement">Implémentation et déploiement</h2>
+
+<p>The <a href="/en-US/docs/Web/API/PointerEvents#Browser_compatibility">pointer events browser compatibility data</a> indicates pointer event support among desktop and mobile browsers is relatively low, although additional implementations are in progress.</p>
+
+<p>Some new value have been proposed for the {{cssxref("touch-action", "CSS touch-action")}} property as part of <a href="https://w3c.github.io/pointerevents/">Pointer Events Level 2</a> specification but currently those new values have no implementation support.</p>
+
+<h2 id="Démos_and_exemples">Démos and exemples</h2>
+
+<ul>
+ <li><a href="http://patrickhlauke.github.io/touch/">Touch/pointer tests and demos (by Patrick H. Lauke)</a></li>
+</ul>
+
+<h2 id="Communauté">Communauté</h2>
+
+<ul>
+ <li><a href="https://github.com/w3c/pointerevents">Pointer Events Working Group</a></li>
+ <li><a href="http://lists.w3.org/Archives/Public/public-pointer-events/">Mail list</a></li>
+ <li><a href="irc://irc.w3.org:6667/">W3C #pointerevents IRC channel</a></li>
+</ul>
+
+<h2 id="Sujets_et_ressources_liés">Sujets et ressources liés</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/touch-events/">Touch Events Standard</a></li>
+</ul>
diff --git a/files/fr/web/api/pointerevent/index.html b/files/fr/web/api/pointerevent/index.html
new file mode 100644
index 0000000000..3ca9b1d943
--- /dev/null
+++ b/files/fr/web/api/pointerevent/index.html
@@ -0,0 +1,144 @@
+---
+title: PointerEvent
+slug: Web/API/PointerEvent
+translation_of: Web/API/PointerEvent
+---
+<p>{{ APIRef("Pointer Events") }}</p>
+
+<p>L'interface <strong><code>PointerEvent</code></strong> représente les données de l'état d'un événément du DOM produit par un pointeur, tels que la géométrie du point de contact, le type d'appareil qui a généré l'événément, l'intensité de pression qui a été appliquée au contact de la surface, etc.</p>
+
+<p>Un <em>pointeur</em> est une représentation agnostique de tout appareil de saisie (tels qu'une souris, un stylet, ou un point de contact sur une surface tactile). Le pointeur peut cibler des coordonnées spécifiques (ou une collection de coordonnées) sur la surface de contact telle qu'un écran.</p>
+
+<p>Le <em>test de ciblage</em> d'un pointeur est le processus qu'un navigateur utilise pour déterminer l'élément pour un événément de pointeur. Typiquement, cela est déterminé en considérant la position du pointeur ainsi que l'agencement visuel des éléments dans un document sur l'écran.</p>
+
+<h2 id="Constructeurs">Constructeurs</h2>
+
+<dl>
+ <dt>{{domxref("PointerEvent.PointerEvent", "PointerEvent()")}}</dt>
+ <dd>Crée un PointerEvent synthétique et anonyme.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Cette interface hérite des proprétés de {{domxref("MouseEvent")}} et {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{ domxref('PointerEvent.pointerId')}} {{readonlyInline}}</dt>
+ <dd>Un identifiant unique pour le pointeur ayant provoqué l'événément.</dd>
+ <dt>{{ domxref('PointerEvent.width')}} {{readonlyInline}}</dt>
+ <dd>La largeur (magnitude sur l'axe X), en pixels CSS, de la géométrie de contact du pointeur.</dd>
+ <dt>{{ domxref('PointerEvent.height')}} {{readonlyInline}}</dt>
+ <dd>La hauteur (magniture sur l'axe Y), en pixels CSS, de la géométrie de contact du pointeur.</dd>
+ <dt>{{ domxref('PointerEvent.pressure')}} {{readonlyInline}}</dt>
+ <dd>La pressure normalisée de l'influx du pointeur dans un intervalle compris entre 0 et 1, où 0 et 1 représentent respectivement la pression minimale et maximale que l'appareil est capable de détecter.</dd>
+ <dt>{{ domxref('PointerEvent.tangentialPressure')}} {{readonlyInline}}</dt>
+ <dd>La pression tangentielle normalisée d'un influx de pointeur (également nommée compression ou contrainte cylindrique), où 0 et 1 représentent respectivement la pression minimale et maximale que l'appareil est capable de détecter.</dd>
+ <dt>{{ domxref('PointerEvent.tiltX')}} {{readonlyInline}}</dt>
+ <dd>Le plan de l'angle (en dégrés, dans un intervalle compris entre -90 et 90) entre le plan Y-Z et le plan contenant à la fois l'axe du transducteur (ex. : un crayon stylet) et l'axe Y.</dd>
+ <dt>{{ domxref('PointerEvent.tiltY')}} {{readonlyInline}}</dt>
+ <dd>Le plan de l'angle (en dégrés, dans un intervalle compris entre -90 et 90) entre le plan X-Z et le plan contenant à la fois l'axe du transducteur (ex. : un crayon stylet) et l'axe X.</dd>
+ <dt>{{ domxref('PointerEvent.twist')}} {{readonlyInline}}</dt>
+ <dd>La rotation en degrés et dans le sens des aiguilles d'une montre, d'un transducteur (ex. : crayon stylet) autour de axe principal, avec une valeur comprise dans un intervalle entre 0 et 359.</dd>
+ <dt>{{ domxref('PointerEvent.pointerType')}} {{readonlyInline}}</dt>
+ <dd>Indique le type d'appareil qui a provoqué l'événément (souris, stylet, touché, etc.)</dd>
+ <dt>{{ domxref('PointerEvent.isPrimary')}} {{readonlyInline}}</dt>
+ <dd>Indique si le pointeur est le principal appareil de ce type.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{ domxref('PointerEvent.getCoalescedEvents()')}} {{deprecated_inline}}</dt>
+ <dd>Retourne une séquence de toutes les instances de <code>PointerEvent</code> qui ont été dirigées vers l'événément {{event("pointermove")}} envoyé.</dd>
+</dl>
+
+<h2 id="Types_d'événéments_de_pointeur">Types d'événéments de pointeur</h2>
+
+<p>L'interface <code>PointerEvent</code> a plusieurs types d'événéments. Pour déterminer quel événément s'est produit, regardez la propriété {{ domxref("Event.type", "type") }} de l'événément.</p>
+
+<div class="note"><strong>Note:</strong> Il est important de remarquer que dans beaucoup de cas, à la fois les événéments du pointeur et de la souris sont envoyés (afin de laisser la logique interagir avec l'utilisateur même lorsqu'elle n'est pas spécifique à un type de pointeur) . Si vous utilisez les événéments de pointeur, vous devez exécuter {{ domxref("event.preventDefault()") }} afin d'empêcher l'événément de la souris d'être également envoyée.</div>
+
+<dl>
+ <dt>{{event('pointerover')}}</dt>
+ <dd>Cet événément est déclenché lorsqu'un appareil de pointage est déplacé vers la zone du test de ciblage d'un élément.</dd>
+ <dt>{{event('pointerenter')}}</dt>
+ <dd>Cet événément est déclenché lorsqu'un appareil de pointage est déplacé vers la zone du test de ciblage d'un élément ou l'un de ses descendants, ce qui inclut un événément de pointage vers le bas d'un appareil qui ne propose pas de fonctionnalité de survol (voir pointage vers le bas). Ce type d'événément est similaire à un pointage par dessus, mais se différencie en ne faisant pas circuler l'événément.</dd>
+ <dt>{{event('pointerdown')}}</dt>
+ <dd>L'événément est déclenché lorsqu'un pointeur devient <em>actif</em>. Pour une souris, il est déclenché lorsque l'appareil passe d'aucun bouton pressé à au moins un bouton pressé. Pour un touché, il est déclenché lorsqu'un contact physique est effectué avec le numériseur. Pour un stylet, il est déclenché au contact de ce dernier avec le numériseur.</dd>
+ <dt>{{event('pointermove')}}</dt>
+ <dd>Cet événément est déclenché lorsqu'un pointeur change de coordonnées.</dd>
+ <dt>{{event('pointerup')}}</dt>
+ <dd>Cet événement est déclenché lorsqu'un pointeur n'est plus <em>actif</em>.</dd>
+ <dt>{{event('pointercancel')}}</dt>
+ <dd>Un navigateur déclenche cet événément s'il conclut que le pointeur ne sera plus capable de générer des événéments (par exemple, l'appareil concerné a été désactivé).</dd>
+ <dt>{{event('pointerout')}}</dt>
+ <dd>Cet événément est déclenché pour plusieurs raisons qui incluent : l'appareil de pointage est déplacé en dehors de la zone du test de ciblage d'un élément; déclencher l'événément de pointage vers le haut pour un appareil qui ne supporte pas le survol (voir pointage vers le haut); après avoir déclenché un événément de pointage annulé (voir pointage annulé); lorsqu'un stylet quitte la zone de portée pour être détectée au survol par le numériseur.</dd>
+ <dt>{{event('pointerleave')}}</dt>
+ <dd>Cet événément est déclenché lorsqu'un appareil de pointage est déplacé en dehors de la zone de ciblage d'un élément. Pour les appareils avec un stylet, cet événément est déclenché lorsque le stylet quitte la zone de portée pour être détectée au survol par le numériseur.</dd>
+ <dt>{{event('gotpointercapture')}}</dt>
+ <dd>Cet événément est déclenché lorsqu'un élément est capturé par un pointeur.</dd>
+ <dt>{{event('lostpointercapture')}}</dt>
+ <dd>Cet événément est déclenché après qu'un pointeur ait relâché sa capture.</dd>
+</dl>
+
+<h2 id="GlobalEventHandlers">GlobalEventHandlers</h2>
+
+<dl>
+ <dt>{{ domxref('GlobalEventHandlers.onpointerover') }}</dt>
+ <dd>Un {{domxref('GlobalEventHandlers','global event handler')}} pour l'événement {{event('pointerover')}}.</dd>
+ <dt>{{ domxref('GlobalEventHandlers.onpointerenter') }}</dt>
+ <dd>Un {{domxref('GlobalEventHandlers','global event handler')}} pour l'événement {{event('pointerenter')}}.</dd>
+ <dt>{{ domxref('GlobalEventHandlers.onpointerdown') }}</dt>
+ <dd>Un {{domxref('GlobalEventHandlers','global event handler')}} pour l'événement {{event('pointerdown')}}.</dd>
+ <dt>{{ domxref('GlobalEventHandlers.onpointermove') }}</dt>
+ <dd>Un {{domxref('GlobalEventHandlers','global event handler')}} pour l'événement {{event('pointermove')}}.</dd>
+ <dt>{{ domxref('GlobalEventHandlers.onpointerup') }}</dt>
+ <dd>Un {{domxref('GlobalEventHandlers','global event handler')}} pour l'événement {{event('pointerup')}}.</dd>
+ <dt>{{ domxref('GlobalEventHandlers.onpointercancel') }}</dt>
+ <dd>Un {{domxref('GlobalEventHandlers','global event handler')}} pour l'événement {{event('pointercancel')}}.</dd>
+ <dt>{{ domxref('GlobalEventHandlers.onpointerout') }}</dt>
+ <dd>Un {{domxref('GlobalEventHandlers','global event handler')}} pour l'événement {{event('pointerout')}}.</dd>
+ <dt>{{ domxref('GlobalEventHandlers.onpointerleave') }}</dt>
+ <dd>Un {{domxref('GlobalEventHandlers','global event handler')}} pour l'événement {{event('pointerleave')}}.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Un exemple de chaque propriété, type d'événément, et un gestionnaire d'événéments global sont inclus dans leur page respective de référence.</p>
+
+<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>{{SpecName('Pointer Events 2','#pointerevent-interface', 'PointerEvent')}}</td>
+   <td>{{Spec2('Pointer Events 2')}}</td>
+   <td>Version non-stable.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Events', '#pointerevent-interface', 'PointerEvent')}}</td>
+   <td>{{Spec2('Pointer Events')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+
+
+<p>{{Compat("api.PointerEvent")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{ domxref("Touch_events","Touch Events") }}</li>
+ <li>{{ domxref("GestureEvent") }}</li>
+ <li>{{ domxref("MSGestureEvent") }}</li>
+ <li>{{cssxref("touch-action")}}</li>
+</ul>
diff --git a/files/fr/web/api/positionoptions/enablehighaccuracy/index.html b/files/fr/web/api/positionoptions/enablehighaccuracy/index.html
new file mode 100644
index 0000000000..3775dc7222
--- /dev/null
+++ b/files/fr/web/api/positionoptions/enablehighaccuracy/index.html
@@ -0,0 +1,116 @@
+---
+title: PositionOptions.enableHighAccuracy
+slug: Web/API/PositionOptions/enableHighAccuracy
+translation_of: Web/API/PositionOptions/enableHighAccuracy
+---
+<div>{{securecontext_header}}{{APIRef("Geolocation API")}}</div>
+
+<p>la propriété <code><strong>PositionOptions.enableHighAccuracy</strong></code> est un {{domxref("Boolean")}} qui indique que l'application souhaite recevoir les meilleurs résultats possibles. Si <code>true</code> si l'appareil est capable de fournir une position plus précise, il le fera. Notez que cela peut entraîner des temps de réponse plus lents ou une augmentation de la consommation d'énergie (avec une puce GPS sur un appareil mobile par exemple). D'un autre côté, si <code>false</code> (la valeur par défaut), le périphérique peut prendre la liberté d'économiser des ressources en répondant plus rapidement et/ou en utilisant moins d'énergie.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>positionOptions</var>.enableHighAccuracy = <var>booleanValue</var>
+</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('Geolocation', '#enablehighaccuracy', 'PositionOptions.enableHighAccuracy')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>5</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>10.60<br>
+    Removed in 15.0<br>
+    Reintroduced in 16.0</td>
+   <td>5</td>
+  </tr>
+  <tr>
+   <td>Secure context-only</td>
+   <td>47</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatGeckoDesktop("55")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("4")}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>10.60</td>
+   <td>{{CompatUnknown()}}</td>
+  </tr>
+  <tr>
+   <td>Secure context-only</td>
+   <td>{{CompatNo}}</td>
+   <td>47</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatGeckoDesktop("55")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Using_geolocation">Using geolocation</a></li>
+ <li>The {{domxref("PositionOptions")}} interface it belongs to.</li>
+</ul>
diff --git a/files/fr/web/api/positionoptions/index.html b/files/fr/web/api/positionoptions/index.html
new file mode 100644
index 0000000000..39f88afc12
--- /dev/null
+++ b/files/fr/web/api/positionoptions/index.html
@@ -0,0 +1,128 @@
+---
+title: PositionOptions
+slug: Web/API/PositionOptions
+translation_of: Web/API/PositionOptions
+---
+<div>{{securecontext_header}}{{APIRef("Geolocation API")}}</div>
+
+<p>L'interface <strong><code>PositionOptions</code></strong> décrit un objet, contenant des propriétés, à passer en paramétre de {{domxref("Geolocation.getCurrentPosition()")}} et {{domxref("Geolocation.watchPosition()")}}.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>L'interface <code>PositionOptions</code> n'hérite d'aucune propriété</em>.</p>
+
+<dl>
+ <dt>{{domxref("PositionOptions.enableHighAccuracy")}} {{securecontext_inline}}</dt>
+ <dd>C'est un {{domxref("Boolean")}} qui indique que l'application souhaite recevoir les meilleurs résultats possibles. Si la valeur est <code>true</code> et si l'appareil peut fournir une position plus précise, il le fera. Notez que cela peut entraîner des temps de réponse plus lents ou une augmentation de la consommation d'énergie (avec une puce GPS sur un appareil mobile par exemple). D'un autre côté, si la valeur est <code>false</code>, l'appareil peut prendre la liberté d'économiser des ressources en répondant plus rapidement et/ou en utilisant moins d'énergie. Valeur par défaut: <code>false</code>.</dd>
+ <dt>{{domxref("PositionOptions.timeout")}} {{securecontext_inline}}</dt>
+ <dd>C'est une valeur positive de type <code>long</code> représentant la durée maximale (en millisecondes) que le périphérique est autorisé à prendre pour renvoyer une position. La valeur par défaut est <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code>, ce qui signifie que <code>getCurrentPosition()</code> ne retournera pas tant que la position n'est pas disponible.</dd>
+ <dt>{{domxref("PositionOptions.maximumAge")}} {{securecontext_inline}}</dt>
+ <dd>C'est une valeur positive de type <code>long</code> l'âge maximal en millisecondes d'une position en cache possible qu'il est acceptable de retourner. Si initialisé à <code>0</code>,  cela signifie que le périphérique ne peut pas utiliser une position mise en cache et doit tenter de récupérer la position actuelle réelle. Si initialisé à <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code> l'appareil doit retourner une position mise en cache indépendamment de son âge. Valeur par défaut: 0.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p>L'interface <code>PositionOptions</code> n'implémente ni n'hérite d'aucune méthode.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation', '#positionoptions', 'PositionOptions')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Specification initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>5</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>10.60<br>
+    Removed in 15.0<br>
+    Reintroduced in 16.0</td>
+   <td>5</td>
+  </tr>
+  <tr>
+   <td>Secure context-only</td>
+   <td>47</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatGeckoDesktop("55")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("4")}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>10.60</td>
+   <td>{{CompatUnknown()}}</td>
+  </tr>
+  <tr>
+   <td>Secure context-only</td>
+   <td>{{CompatNo}}</td>
+   <td>47</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatGeckoDesktop("55")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Using_geolocation">Using geolocation</a></li>
+ <li>The {{domxref("Geolocation")}} interface that uses it.</li>
+</ul>
diff --git a/files/fr/web/api/positionoptions/maximumage/index.html b/files/fr/web/api/positionoptions/maximumage/index.html
new file mode 100644
index 0000000000..e1eee43973
--- /dev/null
+++ b/files/fr/web/api/positionoptions/maximumage/index.html
@@ -0,0 +1,116 @@
+---
+title: PositionOptions.maximumAge
+slug: Web/API/PositionOptions/maximumAge
+translation_of: Web/API/PositionOptions/maximumAge
+---
+<div>{{securecontext_header}}{{APIRef("Geolocation API")}}</div>
+
+<p>La propriété <code><strong>PositionOptions.maximumAge</strong></code> est de type <code>long</code> positif indiquant l'âge maximal en millisecondes d'une position en cache possible qu'il est acceptable de renvoyer. Si la valeur est <code>0</code>, cela signifie que le périphérique ne peut pas utiliser une position mise en cache et doit tenter de récupérer la position actuelle réelle. Si la valeur est <code><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code> l'appareil doit renvoyer une position mise en cache indépendamment de son âge.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>positionOptions</var>.maximumAge = <var>timeLength</var>
+</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('Geolocation', '#maximumage', 'PositionOptions.maximumAge')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>5</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>10.60<br>
+    Removed in 15.0<br>
+    Reintroduced in 16.0</td>
+   <td>5</td>
+  </tr>
+  <tr>
+   <td>Secure context-only</td>
+   <td>47</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatGeckoDesktop("55")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("4")}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>10.60</td>
+   <td>{{CompatUnknown()}}</td>
+  </tr>
+  <tr>
+   <td>Secure context-only</td>
+   <td>{{CompatNo}}</td>
+   <td>47</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatGeckoDesktop("55")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Using_geolocation">Using geolocation</a></li>
+ <li>The {{domxref("PositionOptions")}} interface it belongs to.</li>
+</ul>
diff --git a/files/fr/web/api/positionoptions/timeout/index.html b/files/fr/web/api/positionoptions/timeout/index.html
new file mode 100644
index 0000000000..e0f9e323dd
--- /dev/null
+++ b/files/fr/web/api/positionoptions/timeout/index.html
@@ -0,0 +1,45 @@
+---
+title: PositionOptions.timeout
+slug: Web/API/PositionOptions/timeout
+translation_of: Web/API/PositionOptions/timeout
+---
+<div>{{securecontext_header}}{{APIRef("Geolocation API")}}</div>
+
+<p>La propriété <code><strong>PositionOptions.timeout</strong></code> est de type <code>long</code> positif représentant la durée maximale (en millisecondes) que le périphérique est autorisé à prendre pour renvoyer une position. La valeur par défaut est <code><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code>, ce qui signifie que <code>getCurrentPosition()</code> ne retournera rien tant que la position n'est pas disponible.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>positionOptions</var>.timeout = <var>timeLength</var>
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation', '#dom-positionoptions-timeout', 'PositionOptions.timeout')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.PositionOptions.timeout")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/WebAPI/Using_geolocation">Utiliser la géolocalisation</a></li>
+ <li>L'interface {{domxref("PositionOptions")}} auquel il appartient.</li>
+</ul>
diff --git a/files/fr/web/api/powermanager/index.html b/files/fr/web/api/powermanager/index.html
new file mode 100644
index 0000000000..184b07310f
--- /dev/null
+++ b/files/fr/web/api/powermanager/index.html
@@ -0,0 +1,109 @@
+---
+title: PowerManager
+slug: Web/API/PowerManager
+tags:
+  - API
+  - B2G
+  - Firefox OS
+  - Non-standard
+  - Power Management
+  - Reference
+  - WebAPI
+translation_of: Archive/B2G_OS/API/MozPowerManager
+---
+<p>{{ ApiRef() }}</p>
+<p>{{ non-standard_header() }}</p>
+<p>{{ B2GOnlyHeader2('certified') }}</p>
+<p>L'interface PowerManager permet de contrôler explicitement les composants de l'appareil consommant de l'énergie.</p>
+<h2 id="Présentation_de_l'interface">Présentation de l'interface</h2>
+<pre class="brush: js"><code class="idl-code">callback wakeLockListener = void (DOMString topic, DOMString state);</code>
+
+interface PowerManager
+{
+  attribute boolean cpuSleepAllowed
+  attribute double screenBrightness
+  attribute boolean screenEnabled
+
+  void addWakeLockListener(wakeLockListener listener);
+  void factoryReset();
+  DOMString getWakeLockState(DOMString topic)
+  void powerOff();
+  void reboot();
+  void removeWakeLockListener(wakeLockListener listener);
+};</pre>
+<h2 id="Propriétés">Propriétés</h2>
+<dl>
+ <dt>
+  {{domxref("PowerManager.screenEnabled")}}</dt>
+ <dd>
+  Cette propriété est un booléen permettant de consulter ou définir l'état de l'écran de l'appareil. <code>true</code> correspond à un écran actif <code>false</code> à un écran éteint.</dd>
+ <dt>
+  {{domxref("PowerManager.screenBrightness")}}</dt>
+ <dd>
+  Cette propriété définit la luminosité du rétro-éclairage de l'écran sur une échelle de 0 (min) à 1 (max). Définir cet attribut modifie la luminosité de l'écran.</dd>
+ <dt>
+  {{domxref("PowerManager.cpuSleepAllowed")}}</dt>
+ <dd>
+  Cette propriété détermine si le processeur de l'appareil passera en veille après l'extinction de l'écran. Définir cet attribut à <code>false</code> inhibe la mise en veille du processeur de l'appareil.</dd>
+</dl>
+<h2 id="Méthodes">Méthodes</h2>
+<dl>
+ <dt>
+  {{domxref("PowerManager.addWakeLockListener()")}}</dt>
+ <dd>
+  Enregistre un gestionnaire d'événements qui sera appelé à chaque changement d'état par rapport à la mise en veille de la ressource donnée.</dd>
+ <dt>
+  {{domxref("PowerManager.factoryReset()")}}</dt>
+ <dd>
+  Appeler cette méthode reconfigure l'appareil dans sa configuration usine (toutes les données utilisateurs seront perdues).</dd>
+ <dt>
+  {{domxref("PowerManager.getWakeLockState()")}}</dt>
+ <dd>
+  Retourne l'état de verrouillage d'une ressource donnée de l'appareil.</dd>
+ <dt>
+  {{domxref("PowerManager.powerOff()")}}</dt>
+ <dd>
+  Appeler cette méthode éteint l'appareil.</dd>
+ <dt>
+  {{domxref("PowerManager.reboot()")}}</dt>
+ <dd>
+  Cette méthode éteint l'appareil et le redémarre.</dd>
+ <dt>
+  {{domxref("PowerManager.removeWakeLockListener()")}}</dt>
+ <dd>
+  Permet de retirer un gestionnaire d'événements défini précédemment avec {{domxref("PowerManager.addWakeLockListener()","addWakeLockListener")}}.</dd>
+</dl>
+<h2 id="Specification" name="Specification">Exemple</h2>
+<pre class="brush: js">var screenTimeout;
+var power = window.navigator.mozPower;
+var powerAction = {
+  unlocked: function suspendDevice() {
+    power.<code>cpuSleepAllowed = true;</code>
+    power.screenEnabled   = false;
+  },
+
+  'locked-background': function shutOffOnlyScreen() {
+    power.<code>cpuSleepAllowed = false;</code>
+    power.screenEnabled   = false;
+  }
+}
+
+function screenLockListener(topic, state) {
+  if ('screen' !== topic) return;
+
+  window.clearTimeout(screenTimeout);
+
+  if (powerAction[state]) {
+    screenTimeout = window.setTimeout(powerAction[state], 3000);
+  }
+}
+
+power.addWakeLockListener(screenLockListener);
+</pre>
+<h2 id="Specification" name="Specification">Spécification</h2>
+<p>Cette API ne fait partie d'aucune spécification.</p>
+<h2 id="Voir_aussi">Voir aussi</h2>
+<ul>
+ <li>{{ domxref("window.navigator.mozPower","navigator.mozPower") }}</li>
+ <li>{{ domxref("window.navigator.requestWakeLock()","navigator.requestWakeLock()") }}</li>
+</ul>
diff --git a/files/fr/web/api/processinginstruction/index.html b/files/fr/web/api/processinginstruction/index.html
new file mode 100644
index 0000000000..a3f73f97c0
--- /dev/null
+++ b/files/fr/web/api/processinginstruction/index.html
@@ -0,0 +1,43 @@
+---
+title: ProcessingInstruction
+slug: Web/API/ProcessingInstruction
+tags:
+  - API
+  - DOM
+  - Interface
+  - Noeuds
+  - Traitement
+  - XML
+  - instructions
+translation_of: Web/API/ProcessingInstruction
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Une <strong>instruction de traitement</strong> intègre des instructions spécifiques à une application en <a href="/en-US/docs/Glossary/XML">XML</a> qui peuvent être ignorées par d'autres applications (ne les reconnaissant pas). Même si un processeur XML ignore les instructions de traitement, il leur donnera une place dans le DOM.</p>
+
+<p>Une instruction de traitement est différente de la <a href="/en/XML/XML_Declaration">déclaration XML</a>, qui fournit des informations sur le document telles que le codage des caractères et ne peut apparaître que comme le premier élément d'un document.</p>
+
+<p>Les instructions de traitement définies par l'utilisateur ne peuvent pas commencer par '<code>xml</code>', car ceux-ci sont réservés (par exemple <code><a href="/en/XML/xml-stylesheet">&lt;?xml-stylesheet ?&gt;</a></code>).</p>
+
+<p>Les instructions de traitement héritent des méthodes et propriétés de <a class="internal" href="https://developer.mozilla.org/fr/docs/Web/API/Node"><code>Node</code></a>.</p>
+
+<p>{{InheritanceDiagram(700,70)}}</p>
+
+<h3 id="Attributes" name="Attributes">Attributs</h3>
+
+<ul>
+ <li>target (<em>cible</em>) (DOMString) (<em>chaîne de caractères</em>) - après le <code>&lt;?</code> et avant un <a href="https://developer.mozilla.org/fr/docs/Gestion_des_espaces_dans_le_DOM">whitespace</a> (<em>espace</em>) le séparant des <code>data</code> (<em>données</em>)</li>
+ <li>data (<em>données</em>) (DOMString) (<em>chaîne de caractères</em>) - premier caractère non espace après <code>target</code> et avant <code>?&gt;</code></li>
+</ul>
+
+<h3 id="Specification" name="Specification">Spécification</h3>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#ID-1004215813">DOM Level 1 Core : ProcessingInstruction interface</a></li>
+</ul>
+
+<h3 id="See_also" name="See_also">Voir aussi</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document/createProcessingInstruction">document.createProcessingInstruction</a></li>
+</ul>
diff --git a/files/fr/web/api/publickeycredential/index.html b/files/fr/web/api/publickeycredential/index.html
new file mode 100644
index 0000000000..cb2ff93ec5
--- /dev/null
+++ b/files/fr/web/api/publickeycredential/index.html
@@ -0,0 +1,74 @@
+---
+title: PublicKeyCredential
+slug: Web/API/PublicKeyCredential
+tags:
+  - API
+  - Interface
+  - PublicKeyCredential
+  - Reference
+  - Web Authentication API
+  - WebAuthn
+translation_of: Web/API/PublicKeyCredential
+---
+<p>{{APIRef("Web Authentication API")}}{{securecontext_header}}</p>
+
+<p>L'interface <code><strong>PublicKeyCredential</strong></code> fournit des informations relative à la paire constituée par une clé publique et une clé privée. Cette paire constitue une information d'authentification qui permet de se connecter à un service en utilisant un paire de clé asymétrique (permettant de prévenir les attaques par <em>phishing</em> ou liées à des fuites de données).</p>
+
+<p>Cette interface hérite de {{domxref("Credential")}} et a été créée pour l'<a href="/fr/docs/Web/API/Web_Authentication_API">API Web Authentication</a> qui étend <a href="/fr/docs/Web/API/Credential_Management_API">l'API Credential Management</a>.</p>
+
+<p>Les autres interfaces qui héritent de {{domxref("Credential")}} sont :</p>
+
+<ul>
+ <li>{{domxref("PasswordCredential")}}</li>
+ <li>{{domxref("FederatedCredential")}}.</li>
+</ul>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("PublicKeyCredential.type")}} {{ReadOnlyInline()}}</dt>
+ <dd>Propriété héritée depuis {{domxref("Credential")}}. Dans le cas de <code>PublicKeyCredentials</code>, cette propriété vaut toujours <code>"public-key"</code>.</dd>
+ <dt>{{domxref("PublicKeyCredential.id")}} {{ReadOnlyInline()}}</dt>
+ <dd>Propriété héritée depuis {{domxref("Credential")}} et surchargée afin de correspondre à l'<a href="/fr/docs/Web/API/WindowBase64/Décoder_encoder_en_base64">encodage en base64url</a> de <code>PublicKeyCredential.rawId</code>.</dd>
+ <dt>{{domxref("PublicKeyCredential.rawId")}} {{ReadOnlyInline()}}</dt>
+ <dd>Un objet {{domxref("ArrayBuffer")}} qui contient l'identifiant unique global/universel pour cette instance <code>PublicKeyCredential</code>. Cet identifiant peut être utilisé afin de rechercher les informations d'authentification avec les futurs appels à {{domxref("CredentialsContainer.get")}}.</dd>
+ <dt>{{domxref("PublicKeyCredential.response")}} {{ReadOnlyInline()}}</dt>
+ <dd>Une instance {{domxref("AuthenticatorResponse")}}. Cette instance est de type :
+ <ul>
+  <li>{{domxref("AuthenticatorAttestationResponse")}} si l'objet <code>PublicKeyCredential</code> a été créé grâce à un appel à <code><a href="/fr/docs/Web/API/CredentialsContainer/create">create()</a></code></li>
+  <li>{{domxref("AuthenticatorAssertionResponse")}} si l'objet <code>PublicKeyCredential</code> a été créé grâce à un appel à <code><a href="/fr/docs/Web/API/CredentialsContainer/get">get()</a></code>.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("PublicKeyCredential.getClientExtensionResults()")}}</dt>
+ <dd>Si au moins une extension est demandée, cette méthode renverra le résultat du traitement de ces extensions.</dd>
+</dl>
+
+<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('WebAuthn')}}</td>
+   <td>{{Spec2('WebAuthn')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.PublicKeyCredential")}}</p>
diff --git a/files/fr/web/api/push_api/index.html b/files/fr/web/api/push_api/index.html
new file mode 100644
index 0000000000..968bc0df7c
--- /dev/null
+++ b/files/fr/web/api/push_api/index.html
@@ -0,0 +1,123 @@
+---
+title: Push API
+slug: Web/API/Push_API
+tags:
+  - API
+  - Chargement
+  - Experimental
+  - Notifications
+  - Push
+  - Reference
+  - Service Workers
+translation_of: Web/API/Push_API
+---
+<div>{{DefaultAPISidebar("Push API")}}{{SeeCompatTable}}</div>
+
+<p>L' <strong>API Push </strong> donne aux applications web la possibilité de recevoir des messages qui leur sont poussés depuis un serveur, qu'il s'agisse ou non d'une application active au premier plan, ou même actuellement chargée, sur un agent utilisateur. Ceci permet aux développeurs de délivrer des notifications asynchrones et des mises-à-jour aux utilisateurs qui le choisissent, entrainant un meilleur engagement [de l'utilisateur] avec du nouveau contenu au moment opportun.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Cette documentation couvre les spécifications W3C de l'API Push; si vous recherchez la documentation du système propriétaire de Push de Firefox OS, merci de vous reporter à <a href="/fr/docs/Web/API/Simple_Push_API">Simple Push</a>.</p>
+</div>
+
+<h2 id="Concepts_et_usages_de_Push">Concepts et usages de Push</h2>
+
+<div class="warning">
+<p>Lors de la mise en œuvre des abonnements PushManager, il est d'une importance vitale de se protéger contre les problèmes de CSRF/XSRF dans votre application. Voir les articles suivants pour plus d'informations :</p>
+
+<ul>
+ <li><a href="https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html">Feuille de prévention contre les Cross-Site Request Forgery (CSRF)</a><sup> (en)</sup></li>
+ <li><a href="https://blog.codinghorror.com/preventing-csrf-and-xsrf-attacks/">Prévention conte les attaques CSRF et XSRF</a> <sup>(en)</sup></li>
+</ul>
+</div>
+
+<p>Pour qu'une application web puisse recevoir des messages Push, elle doit avoir un <a href="/en-US/docs/Web/API/ServiceWorker_API">service worker</a> actif. Quand le service worker est actif, on peut souscrire aux notifications Push en utilisant {{domxref("PushManager.subscribe()")}}.</p>
+
+<p>L'élément {{domxref("PushSubscription")}} qui en résulte inclut toutes les informations dont l'application a besoin pour transmettre un message Push: un point de terminaison et la clé de chiffrement nécessaire à l'envoi des données.</p>
+
+<p>Le service worker sera démarré, comme nécessaire, pour réceptionner les messages Push, qui sont délivrés au gestionnaire d'évènement {{domxref("ServiceWorkerGlobalScope.onpush")}}. Ceci permet aux applications de réagir au message Push reçu, par exemple en affichant une notification (en utilisant {{domxref("ServiceWorkerRegistration.showNotification()")}}.)</p>
+
+<p>Chaque souscription est unique à un service worker. Le point de terminaison de la souscription est une <a class="external" href="http://www.w3.org/TR/capability-urls/">URL fonctionnelle</a> unique: la connaissance du point de terminaison est tout ce qui est nécessaire pour envoyer un message à votre application. L'URL du point de terminaison doit cependant rester secrète, sinon d'autres applications seront capables d'envoyer des messages Push à votre application.</p>
+
+<p>Activer un service worker pour délivrer un message Push peut accroître l'utilisation des ressources, particulièrement de la batterie. Les différents navigateurs ont des régimes différents pour gèrer ça — Il n'y a pas de mécanisme standard. Firefox permet à un nombre limité (quota) de messages Push d'être envoyé à une application, cependant les messages Push qui générent les notifications sont exempts de cette limite. La limite est rafraichie chaque fois que le site est visité. En comparaison, Chrome n'applique pas de limites mais nécessite que chaque message Push lance une notification pour pouvoir être affiché.</p>
+
+<div class="note">
+<p><strong>Note</strong>: comme pour Gecko 44, le quota de messages Push par application n'est pas incrémenté quand une nouvelle notification se lance et qu'une autre est déjà visible, pendant une période de 3 secondes. Cela permet de gèrer le cas où une rafale de messages Push est reçue et qu'ils n'afficheraient pas tous une notification.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: Chrome nécessite actuellement de configurer un projet sur <a class="external" href="https://developers.google.com/cloud-messaging/">Google Cloud Messaging</a> pour envoyer des messages Push et utilise le numero du projet associé ainsi que la clé durant l'envoi des messages Push. Il requiert aussi un manifeste applicatif avec des paramètres spéciaux pour utiliser ce service. Nous espérons que cette restriction sera supprimée dans le futur..</p>
+</div>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<dl>
+ <dt>{{domxref("PushEvent")}}</dt>
+ <dd>Représente une action push envoyée à l'élément de <a href="/en-US/docs/Web/API/ServiceWorkerGlobalScope">portée global</a> (global scope) d'un {{domxref("ServiceWorker")}}. Elle contient les informations envoyées depuis l'application à un {{domxref("PushSubscription")}}.</dd>
+ <dt>{{domxref("PushManager")}}</dt>
+ <dd>Fournit un moyen de recevoir des notifications de serveurs tiers ainsi que de demander les URL pour les notifications Push. Cette interface remplace les fonctionnalités obsolètes de l'interface {{domxref("PushRegistrationManager")}}.</dd>
+ <dt>{{domxref("PushMessageData")}}</dt>
+ <dd>Fournit l'accès pour pousser des données transmises par un serveur et inclut des méthodes pour manipuler les données reçues.</dd>
+ <dt>{{domxref("PushSubscription")}}</dt>
+ <dd>Fournit une URL de point de terminaison et permet la désinscription à un service Push.</dd>
+</dl>
+
+<h2 id="Complément_au_Service_worker">Complément au Service worker</h2>
+
+<p>Les ajouts à <a href="/fr/docs/Web/API/Service_Worker_API">l'API Service Worker </a>suivants ont été spécifiés dans l'API Push, pour fournir un point d'entrée à l'utilisation de messages Push pour surveiller et répondre aux événements de changement liés aux messages push et aux souscriptions.</p>
+
+<dl>
+ <dt>{{domxref("ServiceWorkerRegistration.pushManager")}} {{readonlyinline}}</dt>
+ <dd>Retourne une référence de l'interface {{domxref("PushManager")}} pour gèrer les souscriptions push incluant la souscription, récupèrer une souscription existante, et accèder au statut des permissions push. C'est le point d'entrée dans l'utilisation de la communication push.</dd>
+ <dt>{{domxref("ServiceWorkerGlobalScope.onpush")}}</dt>
+ <dd>Un gestionnaire d'événement lancé chaque fois qu'un événement {{Event("push")}} se produit ; c'est à chaque fois qu'un message push du serveur est reçu.</dd>
+ <dt>{{domxref("ServiceWorkerGlobalScope.onpushsubscriptionchange")}}</dt>
+ <dd>Un gestionnaire d'événement lancé chaque fois qu'un événement {{Event("pushsubscriptionchange")}} se produit; par exemple, quand une souscription push a été invalidée, ou va être invalidée (c.à.d. quand un service push définit une durée d'expiration).</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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Push API")}}</td>
+   <td>{{Spec2("Push API")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div>
+<h3 id="PushEvent"><code>PushEvent</code></h3>
+
+<div>
+
+
+<p>{{Compat("api.PushEvent")}}</p>
+
+<h3 id="PushMessageData"><code>PushMessageData</code></h3>
+
+<div>
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("api.PushMessageData")}}</p>
+</div>
+</div>
+</div>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Push_API/Using_the_Push_API">Using the Push API [EN]</a></li>
+ <li><a class="external" href="https://github.com/chrisdavidmills/push-api-demo">Démo API Push</a>, sur Github</li>
+ <li><a class="external" href="http://updates.html5rocks.com/2015/03/push-notificatons-on-the-open-web">Push Notifications on the Open Web</a>, Matt Gaunt</li>
+ <li><a href="/fr/docs/Web/API/Service_Worker_API">API Service Worker</a></li>
+</ul>
diff --git a/files/fr/web/api/pushevent/index.html b/files/fr/web/api/pushevent/index.html
new file mode 100644
index 0000000000..74d5cbc161
--- /dev/null
+++ b/files/fr/web/api/pushevent/index.html
@@ -0,0 +1,175 @@
+---
+title: PushEvent
+slug: Web/API/PushEvent
+tags:
+  - API
+  - ExtendableEvent
+  - Interface
+  - Push
+  - Push API
+  - Reference
+  - Service Workers
+  - Workers
+  - hors-ligne
+translation_of: Web/API/PushEvent
+---
+<p>{{APIRef("Push API")}}{{SeeCompatTable()}}</p>
+
+<p>L'interface <strong><code>PushEvent</code></strong> de l'<a href="/en-US/docs/Web/API/Push_API">API Push</a> représente un message Push qui a été reçu. Cet événement est envoyé au <a href="/fr/docs/Web/API/ServiceWorkerGlobalScope">scope global</a> d'un {{domxref("ServiceWorker")}}. Il contient les informations transmises de l'application serveur vers un {{domxref("PushSubscription")}}.</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("PushEvent.PushEvent()")}}</dt>
+ <dd>Créer un nouvel objet <code>PushEvent</code>.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Hérite des propriétés de son parent, {{domxref("ExtendableEvent")}}. Propriétés additionnelles:</em></p>
+
+<dl>
+ <dt>{{domxref("PushEvent.data")}} {{readonlyinline}}</dt>
+ <dd>Retourne une référence à un objet {{domxref("PushMessageData")}} contenant les données transmises au <span>{{domxref("PushSubscription")}}.</span></dd>
+</dl>
+
+<p><strong style="font-size: 2.14285714285714rem; font-weight: 700; letter-spacing: -1px; line-height: 30px;">Méthodes</strong></p>
+
+<p><em>Hérite des méthodes de son parent, {{domxref("ExtendableEvent")}}</em>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>L'exemple suivant prends les données du <code>PushEvent</code> et les affiche sur tous les clients du service worker.</p>
+
+<pre class="brush: js">self.addEventListener('push', function(event) {
+  if (!(self.Notification &amp;&amp; self.notification.permission === 'granted')) {
+    return;
+  }
+
+  var data = {};
+  if (event.data) {
+    data = event.data.json();
+  }
+  var title = data.title || "Something Has Happened";
+  var message = data.message || "Here's something you might want to check out.";
+  var icon = "images/new-notification.png";
+
+  var notification = new Notification(title, {
+    body: message,
+    tag: 'simple-push-demo-notification',
+    icon: icon
+  });
+
+  notification.addEventListener('click', function() {
+    if (clients.openWindow) {
+      clients.openWindow('https://example.blog.com/2015/03/04/something-new.html');
+    }
+  });
+});
+</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('Push API','#the-push-event','PushEvent')}}</td>
+   <td>{{Spec2('Push API')}}</td>
+   <td>Définition intiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonction</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatChrome(42.0)}}</td>
+   <td>{{CompatGeckoDesktop(44.0)}}<sup>[1][2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>data</code> property</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(44.0)}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonction</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(48)}}<sup>[3]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(42.0)}}</td>
+  </tr>
+  <tr>
+   <td><code>data</code> property</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(48)}}<sup>[3]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<ul>
+ <li>[1] Actuellement actif par défaut dans l'édition Nightly/Développeur Edition/Beta, mais pas sur le channel de Release ({{bug(1207875)}}.)</li>
+ <li>[2] Push (et <a href="/fr/docs/Web/API/Service_Worker_API">Service Workers</a>) ont été désactivés dans <a class="external" href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 Extended Support Release</a> (ESR.)</li>
+ <li>[3] Push a été activé par défaut dans Firefox pour Android version 48.</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Push_API/Using_the_Push_API">Utiliser l'API Push</a></li>
+ <li><a href="/fr/docs/Web/API/Push_API">API Push</a></li>
+ <li><a href="/fr/docs/Web/API/Service_Worker_API">API Service Worker</a></li>
+</ul>
diff --git a/files/fr/web/api/randomsource/getrandomvalues/index.html b/files/fr/web/api/randomsource/getrandomvalues/index.html
new file mode 100644
index 0000000000..28682a0c2a
--- /dev/null
+++ b/files/fr/web/api/randomsource/getrandomvalues/index.html
@@ -0,0 +1,75 @@
+---
+title: RandomSource.getRandomValues()
+slug: Web/API/RandomSource/getRandomValues
+tags:
+  - API
+  - Cryptographie
+  - Methode(2)
+  - Méthode
+  - Reference
+  - Référence(2)
+translation_of: Web/API/Crypto/getRandomValues
+---
+<p>{{APIRef("Web Crypto API")}}</p>
+
+<p>La méthode <code><strong>RandomSource.getRandomValues()</strong></code> permet d’obtenir des valeurs pseudo-aléatoires cryptographiquement satisfaisantes. Le tableau donné en paramètre est rempli avec des nombres pseudo-aléatoires.</p>
+
+<p>Pour garantir une performance suffisante, les implémentations n’utilisent pas un vrai générateur de nombres aléatoires, mais un générateur de nombres pseudo-aléatoires <em>semé </em>avec une valeur ayant suffisamment d'{{Glossary("entropie")}}. Les générateurs utilisés d’une implémentation à une autre seront différents mais toujours satisfaisants pour une utilisation en cryptographie. Les implémentations doivent également utiliser une graine ayant suffisamment d’entropie, comme une source d’entropie au niveau du système.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>cryptoObj</em>.getRandomValues(<em>typedArray</em>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><em>typedArray</em></dt>
+ <dd>Un {{jsxref("TypedArray")}} de nombres entiers, qui est un {{jsxref("Int8Array")}}, un {{jsxref("Uint8Array")}}, un {{jsxref("Uint16Array")}}, un {{jsxref("Int32Array")}}, ou encore un {{jsxref("Uint32Array")}}. Tous les éléments du tableau seront subsitués avec des nombres aléatoires.</dd>
+</dl>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<ul>
+ <li>Une {{exception("QuotaExceededError")}} {{domxref("DOMException")}} est levée si la taille de la requête est plus grand que 65 536 octets.</li>
+</ul>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">/* on part du principe ici que window.crypto.getRandomValues est disponible */
+
+var array = new Uint32Array(10);
+window.crypto.getRandomValues(array);
+
+console.log("Your lucky numbers:");
+for (var i = 0; i &lt; array.length; i++) {
+    console.log(array[i]);
+}
+</pre>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<table class="spec-table standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Crypto API', '#RandomSource-method-getRandomValues')}}</td>
+   <td>{{Spec2('Web Crypto API')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div id="compat-mobile">{{Compat("api.Crypto.getRandomValues")}}</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{ domxref("Window.crypto") }} pour obtenir un objet {{domxref("Crypto")}}.</li>
+ <li>{{jsxref("Math.random")}}, une source non cryptographique de nombres aléatoires.</li>
+</ul>
diff --git a/files/fr/web/api/range/createcontextualfragment/index.html b/files/fr/web/api/range/createcontextualfragment/index.html
new file mode 100644
index 0000000000..fa9c86ae30
--- /dev/null
+++ b/files/fr/web/api/range/createcontextualfragment/index.html
@@ -0,0 +1,105 @@
+---
+title: Range.createContextualFragment()
+slug: Web/API/Range/createContextualFragment
+translation_of: Web/API/Range/createContextualFragment
+---
+<p>La méthode <strong><code>Range.createContextualFragment()</code></strong> retourne un {{domxref("DocumentFragment")}} en invoquant l’algorithme d’analyse de fragment HTML ou l’algorithme d’analyse de fragment XML, avec le début du <code>range</code> (le <em>parent</em> du nœud sélectionné) comme nœud de contexte. L’algorithme d’analyse de fragment HTML est utilisé si le <code>range</code> appartient à un <code>Document</code> dont le bit « HTMLness » est défini. Dans le cas du HTML, si le nœud de contexte est censé être <code>html</code>, pour des raisons historiques l’algorithme d’analyse de fragment est invoqué avec <code>body</code> pour contexte à la place.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>documentFragment</em> = <em>range</em>.createContextualFragment( <em>chaineHTML</em> )
+</pre>
+
+<h3 id="Param.C3.A8tres" name="Param.C3.A8tres">Paramètres</h3>
+
+<dl>
+ <dt><em>chaineHTML</em></dt>
+ <dd>Une chaîne contenant du texte et des balises à convertir en un fragment de document.</dd>
+</dl>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre class="brush: js">var chaineHTML = "&lt;div&gt;Je suis un nœud div&lt;div&gt;";
+var range = document.createRange();
+// fait que le parent de la première div du document devient le nœud de contexte
+range.selectNode(document.getElementsByTagName("div").item(0));
+var documentFragment = range.createContextualFragment(chaineHTML);
+document.body.appendChild(documentFragment);
+</pre>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</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('DOM Parsing', '#idl-def-range-createcontextualfragment(domstring)', 'Range.createContextualFragment()')}}</td>
+   <td>{{Spec2('DOM Parsing')}}</td>
+   <td>Spécification initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>11</td>
+   <td>15.0</td>
+   <td>9.1.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15.0</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Document_Object_Model">Index des interfaces DOM</a></li>
+</ul>
diff --git a/files/fr/web/api/range/detach/index.html b/files/fr/web/api/range/detach/index.html
new file mode 100644
index 0000000000..b1b68cd16d
--- /dev/null
+++ b/files/fr/web/api/range/detach/index.html
@@ -0,0 +1,55 @@
+---
+title: Range.detach()
+slug: Web/API/Range/detach
+translation_of: Web/API/Range/detach
+---
+<p>{{ApiRef("DOM")}}</p>
+
+<p>La méthode <strong><code>Range.detach()</code></strong> n'a aucun effet. Elle permet de désactiver l'objet {{domxref("Range")}} et de libérer les ressources associées. Cette méthode a été conservée pour des raisons de compatibilités.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">range.detach();
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush:js">var range = document.createRange();
+
+range.selectNode(document.getElementsByTagName("div").item(0));
+range.detach();
+</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">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-range-detach', 'Range.detach()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Aucun changement.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-method-detach', 'Range.detach()')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Spécification initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Range.detach")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Document_Object_Model">The DOM interfaces index</a></li>
+</ul>
diff --git a/files/fr/web/api/range/extractcontents/index.html b/files/fr/web/api/range/extractcontents/index.html
new file mode 100644
index 0000000000..9415780474
--- /dev/null
+++ b/files/fr/web/api/range/extractcontents/index.html
@@ -0,0 +1,59 @@
+---
+title: Range.extractContents()
+slug: Web/API/Range/extractContents
+translation_of: Web/API/Range/extractContents
+---
+<p>{{ApiRef("DOM")}}</p>
+
+<p>La méthode <strong><code>Range.extractContents()</code></strong> déplace le contenu du {{ domxref("Range") }} depuis l’arbre du document dans un {{ domxref("DocumentFragment") }}.</p>
+
+<p>Les gestionnaires d’évènements ajoutés en utilisant les méthodes du DOM ne sont pas conservés lors de l’extraction. les attributs HTML d’évènements sont conservés ou dupliqués comme ils le seraient avec la méthode {{domxref("Node.cloneNode()")}}. Les attributs HTML id sont également clonés, ce qui peut mener à un document invalide si un nœud partiellement sélectionné est extrait et ajouté au document.</p>
+
+<p>Les nœuds partiellement sélectionnés sont clonés pour inclure les balises parentes nécessaires pour rendre le fragment de document valide.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>documentFragment</em> = <em>range</em>.extractContents();
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var range = document.createRange();
+range.selectNode(document.getElementsByTagName("div").item(0));
+var documentFragment = range.extractContents();
+document.body.appendChild(documentFragment);
+</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('DOM WHATWG', '#dom-range-extractcontents', 'Range.extractContents()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Pas de changement.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-method-extractContents', 'Range.extractContents()')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Spécification initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Range.extractContents")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Document_Object_Model">L’index des interfaces DOM</a></li>
+</ul>
diff --git a/files/fr/web/api/range/index.html b/files/fr/web/api/range/index.html
new file mode 100644
index 0000000000..c42a83b4ea
--- /dev/null
+++ b/files/fr/web/api/range/index.html
@@ -0,0 +1,111 @@
+---
+title: range
+slug: Web/API/Range
+translation_of: Web/API/Range
+---
+<p>{{ ApiRef() }}</p>
+
+<h3 id="Introduction" name="Introduction">Introduction</h3>
+
+<p>L'objet <code>Range</code> (littéralement : "étendue" ou "portée", ici : "segment") représente un fragment de document qui peut contenir des nœuds et des parties de nœuds texte dans un document donné.</p>
+
+<p>Un segment peut être crée en utilisant la méthode <a href="/fr/docs/Web/API/document/createRange">createRange</a> de l'objet <a href="/fr/docs/Web/API/document">document</a>. Les objets range peuvent également être récupérés en utilisant la méthode <a href="/fr/docs/Web/API/Selection/getRangeAt">getRangeAt</a> de l'objet <a href="/fr/docs/Web/API/Selection">selection</a>.</p>
+
+<h3 id="Propri.C3.A9t.C3.A9s" name="Propri.C3.A9t.C3.A9s">Propriétés</h3>
+
+<dl>
+ <dt><a href="/fr/docs/Web/API/range/collapsed">collapsed</a></dt>
+ <dd>Renvoie un booléen indiquant si le point de départ et le point final du segment sont confondus.</dd>
+ <dt><a href="/fr/docs/Web/API/range/commonAncestorContainer">commonAncestorContainer</a></dt>
+ <dd>Renvoie le nœud le plus profond qui contient à la fois les nœuds <code>startContainer</code> et <code>endContainer</code>.</dd>
+ <dt><a href="/fr/docs/Web/API/range/endContainer">endContainer</a></dt>
+ <dd>Renvoie le nœud dans lequel le segment se termine.</dd>
+ <dt><a href="/fr/docs/Web/API/range/endOffset">endOffset</a></dt>
+ <dd>Renvoie un nombre représentant l'endroit où le segment se termine dans <code>endContainer</code>.</dd>
+ <dt><a href="/fr/docs/Web/API/range/startContainer">startContainer</a></dt>
+ <dd>Renvoie le nœud dans lequel le segment débute.</dd>
+ <dt><a href="/fr/docs/Web/API/range/startOffset">startOffset</a></dt>
+ <dd>Renvoie un nombre représentant l'endroit où le segment débute dans <code>startContainer</code>.</dd>
+</dl>
+
+<h3 id="M.C3.A9thodes" name="M.C3.A9thodes">Méthodes</h3>
+
+<h4 id="M.C3.A9thodes_de_positionnement" name="M.C3.A9thodes_de_positionnement">Méthodes de positionnement</h4>
+
+<p>Ces méthodes permettent de définir le début et la fin d'un segment.</p>
+
+<dl>
+ <dt><a href="/fr/docs/Web/API/range/setStart">setStart</a></dt>
+ <dd>Définit le point de départ d'un segment.</dd>
+ <dt><a href="/fr/docs/Web/API/range/setEnd">setEnd</a></dt>
+ <dd>Définit le point final d'un segment.</dd>
+ <dt><a href="/fr/docs/Web/API/range/setStartBefore">setStartBefore</a></dt>
+ <dd>Définit le point de départ d'un segment relativement à un autre nœud.</dd>
+ <dt><a href="/fr/docs/Web/API/range/setStartAfter">setStartAfter</a></dt>
+ <dd>Définit le point de départ d'un segment relativement à un autre nœud.</dd>
+ <dt><a href="/fr/docs/Web/API/range/setEndBefore">setEndBefore</a></dt>
+ <dd>Définit le point final d'un segment relativement à un autre nœud.</dd>
+ <dt><a href="/fr/docs/Web/API/range/setEndAfter">setEndAfter</a></dt>
+ <dd>Définit le point final d'un segment relativement à un autre nœud.</dd>
+ <dt><a href="/fr/docs/Web/API/range/selectNode">selectNode</a></dt>
+ <dd>Le contenu du segment devient le nœud et son contenu.</dd>
+ <dt><a href="/fr/docs/Web/API/range/selectNodeContents">selectNodeContents</a></dt>
+ <dd>le contenu du segment devient le contenu du nœud.</dd>
+ <dt><a href="/fr/docs/Web/API/range/collapse">collapse</a></dt>
+ <dd>Replie le segment sur l'un de ses points frontières.</dd>
+</dl>
+
+<h4 id="M.C3.A9thodes_de_modification" name="M.C3.A9thodes_de_modification">Méthodes de modification</h4>
+
+<p>Ces méthodes recupèrent les nœuds d'un segment et modifient le contenu d'un segment.</p>
+
+<dl>
+ <dt><a href="/fr/docs/Web/API/range/cloneContents">cloneContents</a></dt>
+ <dd>Renvoie un fragment de document où sont copiés les nœuds d'un segment.</dd>
+ <dt><a href="/fr/docs/Web/API/range/deleteContents">deleteContents</a></dt>
+ <dd>Supprime du document le contenu d'un segment.</dd>
+ <dt><a href="/fr/docs/Web/API/range/extractContents">extractContents</a></dt>
+ <dd>Déplace le contenu d'un segment, de l'arbre du document vers un fragment de document.</dd>
+ <dt><a href="/fr/docs/Web/API/range/insertNode">insertNode</a></dt>
+ <dd>Insère un nœud au début d'un segment.</dd>
+ <dt><a href="/fr/docs/Web/API/range/surroundContents">surroundContents</a></dt>
+ <dd>Déplace le contenu d'un segment dans un nouveau nœud.</dd>
+</dl>
+
+<h4 id="Autres_m.C3.A9thodes" name="Autres_m.C3.A9thodes">Autres méthodes</h4>
+
+<dl>
+ <dt><a href="/fr/docs/Web/API/range/compareBoundaryPoints">compareBoundaryPoints</a></dt>
+ <dd>Compare les points frontières de deux segments.</dd>
+ <dt><a href="/fr/docs/Web/API/range/cloneRange">cloneRange</a></dt>
+ <dd>Renvoie un objet <code>Range</code> avec des points frontières identiques à ceux du segment cloné.</dd>
+ <dt><a href="/fr/docs/Web/API/range/detach">detach</a></dt>
+ <dd>Supprime le segment afin d'améliorer la performance.</dd>
+ <dt><a href="/fr/docs/Web/API/range/toString">toString</a></dt>
+ <dd>Renvoie le texte du segment.</dd>
+</dl>
+
+<h4 id="Les_m.C3.A9thodes_Gecko" name="Les_m.C3.A9thodes_Gecko">Les méthodes Gecko</h4>
+
+<p>Cette section décrit les méthodes de range qui sont particulières à Mozilla et ne font pas partie des spécifications DOM W3C.</p>
+
+<dl>
+ <dt><a href="/fr/docs/Web/API/range/compareNode">compareNode</a> {{ Obsolete_inline() }}</dt>
+ <dd>Renvoie une constante qui indique si le nœud est avant, après, dans ou englobe le segment.</dd>
+ <dt><a href="/fr/docs/Web/API/range/comparePoint">comparePoint</a></dt>
+ <dd>Renvoie -1, 0, ou 1, indiquant si le point se trouve avant, après, ou dans le segment.</dd>
+ <dt><a href="/fr/docs/Web/API/range/createContextualFragment">createContextualFragment</a></dt>
+ <dd>Renvoie un fragment de document créé à partir d'un morceau de code donné.</dd>
+ <dt><a href="/fr/docs/Web/API/range/intersectsNode">intersectsNode</a> {{ Obsolete_inline() }}</dt>
+ <dd>Renvoie un booléen indiquant si un nœud donné a une intersection avec le segment.</dd>
+ <dt><a href="/fr/docs/Web/API/range/isPointInRange">isPointInRange</a></dt>
+ <dd>Renvoie un booléen indiquant si le point donné est dans le segment.</dd>
+</dl>
+
+<p><span class="comment">Liens Interwikis</span></p>
+
+<p> </p>
+
+<div class="noinclude"> </div>
+
+<p>{{ languages( { "en": "en/DOM/range", "es": "es/DOM/range", "ja": "ja/DOM/range", "pl": "pl/DOM/range" } ) }}</p>
diff --git a/files/fr/web/api/range/insertnode/index.html b/files/fr/web/api/range/insertnode/index.html
new file mode 100644
index 0000000000..bec290d0ed
--- /dev/null
+++ b/files/fr/web/api/range/insertnode/index.html
@@ -0,0 +1,115 @@
+---
+title: Range.insertNode()
+slug: Web/API/Range/insertNode
+translation_of: Web/API/Range/insertNode
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p>La méthode <code><strong>Range.insertNode()</strong></code> insère un nœud au début du {{domxref("Range")}}.</p>
+
+<p>Le nouveau nœud est inséré au point de départ du <code>Range</code>. Si le nouveau nœud est sur le point d’être ajouté à un {{domxref("Node")}} texte, ce <code>Node</code> est coupé en deux au point d’insertion, et l’insertion se fait entre les deux nœuds texte.</p>
+
+<p>Si le nouveau nœud est un fragment de document, les enfants du fragment sont insérés à la place.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>range</em>.insertNode(<em>newNode</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><em>newNode</em></dt>
+ <dd>Le {{domxref("Node")}} à insérer au début du <code>range</code>.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">range = document.createRange();
+newNode = document.createElement("p");
+newNode.appendChild(document.createTextNode("New Node Inserted Here"));
+range.selectNode(document.getElementsByTagName("div").item(0));
+range.insertNode(newNode);
+</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('DOM WHATWG', '#dom-range-insertnode', 'Range.insertNode()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Pas de changement</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-method-insertNode', 'Range.insertNode()')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}<br>
+    {{CompatGeckoDesktop("14.0")}}<sup>[1]</sup></td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}<br>
+    {{CompatGeckoDesktop("14.0")}}<sup>[1]</sup></td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Avant Gecko 14.0 {{geckoRelease("14.0")}}, cette méthode n’a pas d’effet sur des ranges « collapsés » (dont les points de début et de fin sont confondus). À présent elle se comporte selon la spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Document_Object_Model">L’index des interfaces DOM</a></li>
+</ul>
diff --git a/files/fr/web/api/range/selectnode/index.html b/files/fr/web/api/range/selectnode/index.html
new file mode 100644
index 0000000000..9cc2d63030
--- /dev/null
+++ b/files/fr/web/api/range/selectnode/index.html
@@ -0,0 +1,114 @@
+---
+title: Range.selectNode()
+slug: Web/API/Range/selectNode
+tags:
+  - API
+  - DOM
+  - Méthode
+  - Range
+translation_of: Web/API/Range/selectNode
+---
+<p>{{ApiRef("DOM")}}</p>
+
+<p>La méthode <code>Range.selectNode()</code> définit le {{domxref ("Range")}} destiné à contenir le {{domxref("Node")}} et son contenu. Le {{domxref ("Node")}} parent du début et de la fin du {{domxref("Range")}} sera le même que le parent du <em>noeudDeReference</em>.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>range</em>.selectNode(<em>noeudDeReference</em>);
+</pre>
+
+<h3 id="Parameters" name="Parameters">Paramètres</h3>
+
+<dl>
+ <dt><em>noeudDeReference</em></dt>
+ <dd>Le {{domxref("Node")}} à choisir à l'intérieur d'un <code>{domxref("Range")}}</code>.</dd>
+</dl>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush:js">var range = document.createRange();
+var noeudDeReference = document.getElementsByTagName("div").item(0);
+
+range.selectNode(noeudDeReference);</pre>
+
+<h2 id="Specification" name="Specification">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('DOM WHATWG', '#dom-range-selectnode', 'Range.selectNode()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Aucun changement.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-method-selectNode', 'Range.selectNode()')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Spécification initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Document_Object_Model">Référence du DOM</a></li>
+</ul>
diff --git a/files/fr/web/api/range/setstart/index.html b/files/fr/web/api/range/setstart/index.html
new file mode 100644
index 0000000000..5f5eea8691
--- /dev/null
+++ b/files/fr/web/api/range/setstart/index.html
@@ -0,0 +1,121 @@
+---
+title: Range.setStart()
+slug: Web/API/Range/setStart
+tags:
+  - API
+  - DOM
+  - Method
+  - Range
+translation_of: Web/API/Range/setStart
+---
+<p>{{ApiRef("DOM")}}</p>
+
+<p>La methode <strong><code>Range.setStart() </code></strong>définit la position de départ d'un {{ domxref("Range") }}.</p>
+
+<p>Si le <code>startNode</code> est un {{ domxref("Node") }}  de type <code>Text</code>, <code>Comment</code>, ou <code>CDATASection</code>, alors startOffset est le nombre de caractères depuis le départ du <code>startNode</code>. Pour les autres types de <code>Nœud</code>, <code>startOffset</code> est le nombre de noeuds enfants entre le debut du <code>startNode</code>.</p>
+
+<p><span id="result_box" lang="fr"><span>Si vous définissez le point de départ en dessous (plus bas dans le document), le point final entraînera une plage réduite avec les points de départ et de fin réglés tous les deux sur la position de départ spécifiée.</span></span></p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>range</em>.setStart(<em>startNode</em>, <em>startOffset</em>);
+</pre>
+
+<h3 id="Parameters" name="Parameters">Paramètres</h3>
+
+<dl>
+ <dt><em>startNode</em></dt>
+ <dd>{{ domxref("Node") }} ou {{ domxref("Range") }} devrait démarrer.</dd>
+ <dt><em>startOffset</em></dt>
+ <dd><span id="result_box" lang="fr"><span>Un entier supérieur ou égal à zéro représentant le décalage pour le début du {{domxref ("Range")}} à partir du début de startNode</span></span>.</dd>
+</dl>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<pre class="brush: js">var range = document.createRange();
+var startNode = document.getElementsByTagName("p").item(2);
+var startOffset = 0;
+range.setStart(startNode,startOffset);
+</pre>
+
+<h2 id="Specification" name="Specification">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>{{SpecName('DOM WHATWG', '#dom-range-setstart', 'Range.setStart()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-method-setStart', 'Range.setStart()')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li>
+</ul>
diff --git a/files/fr/web/api/range/surroundcontents/index.html b/files/fr/web/api/range/surroundcontents/index.html
new file mode 100644
index 0000000000..f06b360d27
--- /dev/null
+++ b/files/fr/web/api/range/surroundcontents/index.html
@@ -0,0 +1,72 @@
+---
+title: Range.surroundContents()
+slug: Web/API/Range/surroundContents
+translation_of: Web/API/Range/surroundContents
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p>La méthode <strong><code>Range.surroundContents()</code></strong> déplace le contenu du {{ domxref("Range") }} dans un nouveau nœud, plaçant le nouveau nœud au début du <code>range</code> spécifié.</p>
+
+<p>Cette méthode est à peu près équivalente à :</p>
+
+<pre class="brush: js">newNode.appendChild(range.extractContents());
+range.insertNode(newNode)</pre>
+
+<p>Après déplacement, les bornes du <code>range</code> incluent <code>newNode</code>.</p>
+
+<p>Cependant, une exception sera levée si le {{ domxref("Range") }} découpe un nœud non-{{ domxref("Text") }} sur une seule de ses bornes. C’est-à-dire que, contrairement à l’alternative ci-dessus, s’il y a des nœuds partiellement sélectionnés, ils ne seront pas clonés ; à la place, l’opération échouera.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>range</em>.surroundContents(<em>newNode</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><em>newNode</em></dt>
+ <dd>Un {{ domxref("Node") }} à insérer à l’emplacement du <code>range</code>.</dd>
+</dl>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush:js">var range = document.createRange();
+var newNode = document.createElement("p");
+
+range.selectNode(document.getElementsByTagName("div").item(0));
+range.surroundContents(newNode);
+</pre>
+
+<h2 id="Specification" name="Specification">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('DOM WHATWG', '#dom-range-surroundcontents', 'Range.surroundContents()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Pas de changement.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-method-surroundContents', 'Range.surroundContents()')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Spécification initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">La table de compatibilité sur cette page est génératée à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.Range.surroundContents")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">L’index des interfaces DOM</a></li>
+</ul>
diff --git a/files/fr/web/api/request/credentials/index.html b/files/fr/web/api/request/credentials/index.html
new file mode 100644
index 0000000000..36d1215c39
--- /dev/null
+++ b/files/fr/web/api/request/credentials/index.html
@@ -0,0 +1,67 @@
+---
+title: Request.credentials
+slug: Web/API/Request/credentials
+tags:
+  - API
+  - Propriété
+  - Reference
+  - request
+translation_of: Web/API/Request/credentials
+---
+<div>{{APIRef("Fetch")}}</div>
+
+<p>La propriété en lecture seule <strong><code>credentials</code></strong>, de l'interface {{domxref("Request")}}, indique si l'agent utilisateur doit envoyer des cookies de l'autre domaine dans le cas de requêtes CORS. Ceci est similaire au flag <code>withCredentials</code> de XHR, mais peut prendre trois valeurs possibles (contre deux pour XHR) :</p>
+
+<ul>
+ <li><code>omit</code> : ne jamais envoyer de cookies.</li>
+ <li><code>same-origin</code> : envoyer les identifiants utilisateur (cookies, authentification HTTP simple, etc.) si l'URL a la même origine que le script. <strong>C'est la valeur par défaut.</strong></li>
+ <li><code>include</code> : toujours envoyer les identifiants utilisateur (cookies, authentification HTTP simple, etc.) même lorsque l'origine de l'URL est différente.</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var myCred = request.credentials;</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une valeur {{domxref("RequestCredentials")}} qui représente les informations d'authentification utilisées pour cette transaction.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans le morceau de code suivant, on crée une nouvelle requête en utilisant le constructeur {{domxref("Request.Request()")}} (pour un fichier image dans le même dossier que le script), puis on enregistre les identifiants de la requête dans une variable:</p>
+
+<pre class="brush: js">var myRequest = new Request('flowers.jpg');
+var myCred = myRequest.credentials; // renvoie "same-origin" 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>{{SpecName('Fetch','#dom-request-credentials','credentials')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Request.credentials")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/ServiceWorker_API">L'API ServiceWorker</a></li>
+ <li><a href="/fr/docs/Web/HTTP/Access_control_CORS">Contrôle d'accès HTTP avec les origines (CORS)</a></li>
+ <li><a href="/fr/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/fr/web/api/request/index.html b/files/fr/web/api/request/index.html
new file mode 100644
index 0000000000..c90b8278b0
--- /dev/null
+++ b/files/fr/web/api/request/index.html
@@ -0,0 +1,173 @@
+---
+title: Request
+slug: Web/API/Request
+tags:
+  - API
+  - Experimental
+  - Fetch
+  - Fetch API
+  - Interface
+  - Reference
+  - TopicStub
+  - request
+translation_of: Web/API/Request
+---
+<div>{{APIRef("Fetch API")}}</div>
+
+<p>L'interface <strong><code>Request</code></strong> de l'<a href="/en-US/docs/Web/API/Fetch_API">API Fetch</a> représente une demande de ressource.</p>
+
+<p>Vous pouvez créer un nouvel objet <code>Request</code> en utilisant le constructeur {{domxref("Request.Request","Request()")}}, mais vous êtes plus susceptible de rencontrer un objet <code>Request</code> renvoyé à la suite d'une autre opération d'API, telle en tant que service worker {{domxref("FetchEvent.request")}}.</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("Request.Request","Request()")}}</dt>
+ <dd>Crée un nouvel objet <code>Request</code>.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("Request.cache")}} {{readonlyInline}}</dt>
+ <dd>Contient le mode de cache de la demande (par exemple, <code>default</code>, <code>reload</code>, <code>no-cache</code>).</dd>
+ <dt>{{domxref("Request.context")}} {{readonlyInline}} {{deprecated_inline()}}</dt>
+ <dd>Contient le contexte de la demande (par exemple, <code>audio</code>, <code>image</code>, <code>iframe</code>, etc.)</dd>
+ <dt>{{domxref("Request.credentials")}} {{readonlyInline}}</dt>
+ <dd>Contient les informations d'identification de la demande (par exemple, <code>omit</code>, <code>same-origin</code>, <code>include</code>). La valeur par défaut est <code>same-origin</code>.</dd>
+ <dt>{{domxref("Request.destination")}} {{ReadOnlyInline}}</dt>
+ <dd>Renvoie une chaîne de l'énumération {{domxref("RequestDestination")}} décrivant la destination de la requête. Il s'agit d'une chaîne indiquant le type de contenu demandé.</dd>
+ <dt>{{domxref("Request.headers")}} {{readonlyInline}}</dt>
+ <dd>Contient l'objet {{domxref("Headers")}} associé de la requête.</dd>
+ <dt>{{domxref("Request.integrity")}} {{readonlyInline}}</dt>
+ <dd>Contient la valeur d'<a href="/en-US/docs/Web/Security/Subresource_Integrity">intégrité de la sous-ressource</a> de la demande (par exemple, <code>sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=</code>).</dd>
+ <dt>{{domxref("Request.method")}} {{readonlyInline}}</dt>
+ <dd>Contient la méthode de la requête (<code>GET</code>, <code>POST</code>, etc).</dd>
+ <dt>{{domxref("Request.mode")}} {{readonlyInline}}</dt>
+ <dd>Contient le mode de la demande (par exemple, <code>cors</code>, <code>no-cors</code>, <code>same-origin</code>, <code>navigate</code>.)</dd>
+ <dt>{{domxref("Request.redirect")}} {{readonlyinline}}</dt>
+ <dd>Contient le mode de gestion des redirections. Il peut s'agir d'un <code>follow</code>, <code>error</code>, ou d'un <code>manual</code>.</dd>
+ <dt>{{domxref("Request.referrer")}} {{readonlyInline}}</dt>
+ <dd>Contient le référent de la demande (par exemple, <code>client</code>).</dd>
+ <dt>{{domxref("Request.referrerPolicy")}} {{readonlyInline}}</dt>
+ <dd>Contient la politique de référent de la demande (par exemple, <code>no-referrer</code>).</dd>
+ <dt>{{domxref("Request.url")}} {{readonlyInline}}</dt>
+ <dd>Contient l'URL de la demande.</dd>
+</dl>
+
+<p><code>Request</code> implémente {{domxref("Body")}}, donc il hérite également des propriétés suivantes:</p>
+
+<dl>
+ <dt>{{domxref("Body.body", "body")}} {{readonlyInline}}</dt>
+ <dd>Un getter simple utilisé pour exposer un {{domxref("ReadableStream")}} du contenu du corps.</dd>
+ <dt>{{domxref("Body.bodyUsed", "bodyUsed")}} {{readonlyInline}}</dt>
+ <dd>Stocke un {{domxref("Boolean")}} qui déclare si le corps a déjà été utilisé dans une réponse.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("Request.clone()")}}</dt>
+ <dd>Crée une copie de l'objet <code>Request</code> actuel.</dd>
+</dl>
+
+<p><code>Request</code> implémente {{domxref("Body")}}, donc il dispose également des méthodes suivantes:</p>
+
+<dl>
+ <dt>{{domxref("Body.arrayBuffer()")}}</dt>
+ <dd>Renvoie une promesse qui se résout avec une représentation {{domxref("ArrayBuffer")}} du corps de la requête.</dd>
+ <dt>{{domxref("Body.blob()")}}</dt>
+ <dd>Renvoie une promesse qui se résout avec une représentation {{domxref("Blob")}} du corps de la requête.</dd>
+ <dt>{{domxref("Body.formData()")}}</dt>
+ <dd>Renvoie une promesse qui se résout avec une représentation {{domxref("FormData")}} du corps de la requếte.</dd>
+ <dt>{{domxref("Body.json()")}}</dt>
+ <dd>Renvoie une promesse qui se résout avec une représentation {{domxref("JSON")}} du corps de la requête.</dd>
+ <dt>{{domxref("Body.text()")}}</dt>
+ <dd>Renvoie une promesse qui se résout avec une représentation {{domxref("USVString")}} (texte) du coprs de la requête.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note</strong>: Les fonctions {{domxref("Body")}} ne peuvent être exécutées qu'une seule fois; les appels suivants seront résolus avec des chaînes vides / ArrayBuffers.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'extrait de code suivant, nous créons une nouvelle requête à l'aide du constructeur <code>Request()</code> (pour un fichier image dans le même répertoire que le script), puis renvoyons certaines valeurs de propriété de la requête:</p>
+
+<pre class="brush: js notranslate">const request = new Request('https://www.mozilla.org/favicon.ico');
+
+const URL = request.url;
+const method = request.method;
+const credentials = request.credentials;
+</pre>
+
+<p>Vous pouvez ensuite récupérer cette requête en passant l'objet <code>Request</code> en tant que paramètre à un appel {{domxref("WindowOrWorkerGlobalScope.fetch()")}}, par exemple:</p>
+
+<pre class="brush: js notranslate">fetch(request)
+  .then(response =&gt; response.blob())
+  .then(blob =&gt; {
+    image.src = URL.createObjectURL(blob);
+  });</pre>
+
+<p>Dans l'extrait de code suivant, nous créons une nouvelle requête à l'aide du constructeur <code>Request()</code> avec des données initiales et du contenu du body pour une requête api qui nécessite une charge utile de body:</p>
+
+<pre class="brush: js notranslate">const request = new Request('https://example.com', {method: 'POST', body: '{"foo": "bar"}'});
+
+const URL = request.url;
+const method = request.method;
+const credentials = request.credentials;
+const bodyUsed = request.bodyUsed;
+</pre>
+
+<div class="note">
+<p><strong>Note:</strong> Le type de body ne peut être qu'un {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, {{domxref("USVString")}} ou {{domxref("ReadableStream")}} donc pour ajouter un objet JSON à la charge utile, vous devez stringify cet objet.</p>
+</div>
+
+<p>Vous pouvez ensuite récupérer cette demande d'API en passant l'objet <code>Request</code> en tant que paramètre à un appel {{domxref("WindowOrWorkerGlobalScope.fetch()")}}, par exemple et obtenir la réponse:</p>
+
+<pre class="brush: js notranslate">fetch(request)
+  .then(response =&gt; {
+    if (response.status === 200) {
+      return response.json();
+    } else {
+      throw new Error('Something went wrong on api server!');
+    }
+  })
+  .then(response =&gt; {
+    console.debug(response);
+    // ...
+  }).catch(error =&gt; {
+    console.error(error);
+  });</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('Fetch','#request-class','Request')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.Request")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</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/fr/web/api/request/mode/index.html b/files/fr/web/api/request/mode/index.html
new file mode 100644
index 0000000000..1e1c82d317
--- /dev/null
+++ b/files/fr/web/api/request/mode/index.html
@@ -0,0 +1,61 @@
+---
+title: Request.mode
+slug: Web/API/Request/mode
+translation_of: Web/API/Request/mode
+---
+<div>{{APIRef("Fetch")}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>mode</code></strong> (en lecture seule) de l’interface {{domxref("Request")}} contient le mode de la requête (e.g., <code>cors</code>, <code>no-cors</code>, <code>cors-with-forced-preflight</code>, <code>same-origin</code>, or <code>navigate</code>.) Ceci est utilisé pour déterminer si les requêtes différentes de l’origine (cross-origin) mèneront à des réponses valides, et quelles propriétés de la réponse seront lisibles:</p>
+
+<ul>
+ <li><code>same-origin</code> — Avec ce mode défini, si la requête est faite vers une autre origine, le résultat sera une erreur. Vous pouvez utiliser ceci afin de vous assurer que la requête sera toujours faites vers votre origine.</li>
+ <li><code>no-cors</code> — Prévient la méthode d’une utilisation autre que <code>HEAD</code>, <code>GET</code> ou <code>POST</code>. Si un ServiceWorkers interceptait ces requêtes, il ne pourrait pas ajouter ou réécrire ces en-têtes excepté pour <a href="https://fetch.spec.whatwg.org/#simple-header">ceci</a>. De plus, JavaScript ne peut accéder à aucune propriété de la {{domxref("Response")}}. Cela vous assure que les ServiceWorkers n’affecteront pas la sémantique du Web et prévient pour des raisons de sécurité et de confidentialité pouvant mener à la fuite de données à travers les domaines.</li>
+ <li><code>cors</code> — Permet les requêtes cross-origin pour, par exemple, accéder à diverses APIs fournies par de tierces parties. Ces derniers sont censés adhérer au <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS">protocole CORS</a>. Seul un <a href="https://fetch.spec.whatwg.org/#concept-filtered-response-cors">jeu limité</a> d’en-têtes est exposé dans la {{domxref("Response")}}, mais le corps (body) est lisible.</li>
+ <li><code>navigate</code> — Un mode pour supporter la navigation. La valeur <code>navigate</code> est destinée à être utilisée seulement par la navigation HTML. Une requête navigate est créée seulement lorsqu’on navigue entre des documents.</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <var>myMode</var> = <var>request</var>.mode;</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une valeur {{domxref("RequestMode")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans le bout de code suivant, nous créons une nouvelle requête en utilisant le constructeur {{domxref("Request.Request()")}}  (pour une image située dans le même répertoire que le script), puis on stocke le mode de la requête dans une variable:</p>
+
+<pre class="brush: js">var myRequest = new Request('flowers.jpg');
+var myMode = myRequest.mode; // returns "cors" by default</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#dom-request-mode', 'mode')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Request.mode")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">L'API ServiceWorker</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/fr/web/api/request/request/index.html b/files/fr/web/api/request/request/index.html
new file mode 100644
index 0000000000..1eca86dcda
--- /dev/null
+++ b/files/fr/web/api/request/request/index.html
@@ -0,0 +1,160 @@
+---
+title: Request()
+slug: Web/API/Request/Request
+tags:
+  - API
+  - Constructeur
+  - Experimental
+  - Fetch
+  - Reference
+  - request
+translation_of: Web/API/Request/Request
+---
+<div>{{APIRef("Fetch API")}}</div>
+
+<p>Le constructeur <code><strong>Request()</strong></code> crée un nouvel objet {{domxref("Request")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var maRequete = new Request(entree[, init]);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><em>entree</em></dt>
+ <dd>Définit la ressource que vous souhaitez récupérer. Cela peut être soit :
+ <ul>
+  <li>Une {{domxref("USVString")}} contenant l'URL directe de la ressource que vous voulez récupérer.</li>
+  <li>Un objet {{domxref("Request")}}, ce qui crée en fait une copie. Notez les mises à jour de comportement suivantes pour conserver la sécurité, tout en rendant le constructeur moins susceptible de déclencher des exceptions :
+   <ul>
+    <li>Si cet objet existe depuis une autre origine lors de l'appel du constructeur, le {{domxref("Request.referrer")}} est enlevé.</li>
+    <li>Si cet objet a un {{domxref("Request.mode")}} à <code>navigate</code>, la valeur de <code>mode</code> est convertie en <code>same-origin</code>.</li>
+   </ul>
+  </li>
+ </ul>
+ </dd>
+ <dt><em>init</em> {{optional_inline}}</dt>
+ <dd>Un objet d'options contenant tous les paramètres personnalisés que vous voulez appliquer à la requête. Les options possibles sont :
+ <ul>
+  <li><code>method</code>: La méthode de la requête, par ex., <code>GET</code>, <code>POST</code>.</li>
+  <li><code>headers</code>: Tous les entêtes que vous voulez ajouter à votre requête, contenus dans un objet {{domxref("Headers")}} ou un littéral d'objet avec des valeurs {{domxref("ByteString")}}.</li>
+  <li><code>body</code>: Tout corps que vous voulez ajouter à votre requête : cela peut être un objet {{domxref ("Blob")}}, {{domxref ("BufferSource")}}, {{domxref ("FormData")}}, {{domxref ("URLSearchParams")}}, {{domxref ("USVString")}} ou {{domxref ("ReadableStream")}}. Notez qu'une requête utilisant la méthode GET ou HEAD ne peut pas avoir de corps .</li>
+  <li><code>mode</code>: Le mode que vous souhaitez utiliser pour la requête, par exemple, <code>cors</code>, <code>no-cors</code>, <code>same-origin</code>, ou <code>navigate</code>. La valeur par défaut est <code>cors</code>. Dans Chrome, la valeur par défaut est <code>no-cors</code> avant Chrome 47 et <code>same-origin</code> à partir de Chrome 47.</li>
+  <li><code>credentials</code>: Les informations d'authentification de requête que vous souhaitez utiliser pour la requête : <code>omit</code>, <code>same-origin</code>, ou <code>include</code>. La valeur par défaut est <code>omit</code>. Dans Chrome, la valeur par défaut est <code>same-origin</code> avant Chrome 47 et <code>include</code> à partir de Chrome 47.</li>
+  <li><code>cache</code>: Le <a href="/en-US/docs/Web/API/Request/cache">mode de cache</a> que vous voulez utiliser pour la requête.</li>
+  <li><code>redirect</code>: Le mode de redirection à utiliser : <code>follow</code>, <code>error</code>, ou <code>manual</code>. Dans Chrome, le défaut est <code>manual</code> avant Chrome 47 et <code>follow</code> à partir de Chrome 47.</li>
+  <li><code>referrer</code>: Une {{domxref("USVString")}} indiquant <code>no-referrer</code>, <code>client</code>, ou une URL. La valeur par défaut est <code>client</code>.</li>
+  <li><code>integrity</code>: Contient la valeur d'<a href="/en-US/docs/Web/Security/Subresource_Integrity">intégrité de la sous ressource</a> de la requête (par ex.., <code>sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=</code>).</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Erreurs">Erreurs</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><strong>Type</strong></th>
+   <th scope="col"><strong>Description</strong></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>TypeError</code></td>
+   <td>Depuis <a href="/en-US/docs/Mozilla/Firefox/Releases/43">Firefox 43</a>, <code>Request()</code> déclenchera une TypeError si l'URL contient des informations d'authentification, comme dans http://user:password@example.com.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans notre <a href="https://github.com/mdn/fetch-examples/tree/gh-pages/fetch-request">exemple de Fetch Request</a> (voir <a href="http://mdn.github.io/fetch-examples/fetch-request/">Fetch Request en direct</a>), nous créons un nouvel objet <code>Request</code> en utilisant le constructeur, puis nous le récupérons en utilisant un appel à {{domxref ("GlobalFetch.fetch")}}. Puisque nous récupérons une image, nous lançons {{domxref ("Body.blob")}} sur la réponse pour lui donner le bon type MIME afin qu'il soit géré correctement, puis nous en créons une</p>
+
+<p>Object URL et nous l'affichons dans un élément {{htmlelement ("img")}}.</p>
+
+<pre class="brush: js">var monImage = document.querySelector('img');
+
+var maRequete = new Request('fleurs.jpg');
+
+fetch(maRequete).then(function(reponse) {
+  return reponse.blob();
+}).then(function(reponse) {
+  var URLdobjet = URL.createObjectURL(reponse);
+  monImage.src = URLdobjet;
+});</pre>
+
+<p>Dans notre <a href="https://github.com/mdn/fetch-examples/tree/gh-pages/fetch-request-with-init">exemple de Fetch Request avec init</a> (see <a href="http://mdn.github.io/fetch-examples/fetch-request-with-init/">Fetch Request init en direct</a>), nous faisons la même chose, excepté que nous passons un objet init quand nous invoquons <code>fetch()</code>:</p>
+
+<pre class="brush: js">var monImage = document.querySelector('img');
+
+var mesEntetes = new Headers();
+mesEntetes.append('Content-Type', 'image/jpeg');
+
+var monInit = { method: 'GET',
+               headers: mesEntetes,
+               mode: 'cors',
+               cache: 'default' };
+
+var maRequete = new Request('fleurs.jpg',monInit);
+
+fetch(maRequete).then(function(reponse) {
+  ...
+});</pre>
+
+<p>Notez que vos pouvez aussi passer l'objet init dans l'appel à <code>fetch</code> pour obtenir le même résultat, par ex. :</p>
+
+<pre class="brush: js">fetch(maRequete,monInit).then(function(reponse) {
+  ...
+});</pre>
+
+<p>Vous pouvez aussi utilier un littéral d'objet tel que <code>headers</code> dans <code>init</code>.</p>
+
+<pre class="brush: js">var monInit = { method: 'GET',
+               headers: {
+                   'Content-Type': 'image/jpeg'
+               },
+               mode: 'cors',
+               cache: 'default' };
+
+var maRequete = new Request('fleurs.jpg', monInit);
+</pre>
+
+<p>Vous pouvez aussi passer un objet {{domxref("Request")}} au constructeur <code>Request()</code> pour créer une copie de la Request (c'est similaire au fait d'appeler la méthode {{domxref("Request.clone","clone()")}}).</p>
+
+<div class="codehilite" style="background: #f0f3f3;">
+<pre style="line-height: 125%;">var copie = new Request(maRequete);
+</pre>
+</div>
+
+<div class="note">
+<p><strong>Note</strong> : Cette dernière utilisation n'est probablement utile que dans <a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorkers</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">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#dom-request','Request()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Request.Request")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">L'API ServiceWorker</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">Le contrôle d'accès HTTP (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/fr/web/api/resize_observer_api/index.html b/files/fr/web/api/resize_observer_api/index.html
new file mode 100644
index 0000000000..e7dc99f213
--- /dev/null
+++ b/files/fr/web/api/resize_observer_api/index.html
@@ -0,0 +1,95 @@
+---
+title: Resize Observer API
+slug: Web/API/Resize_Observer_API
+tags:
+  - API
+  - Draft
+  - Element
+  - Monitor
+  - Overview
+  - Reference
+  - Resize Observer
+  - Resize Observer API
+  - observe
+translation_of: Web/API/Resize_Observer_API
+---
+<p>{{DefaultAPISidebar("Resize Observer API")}}</p>
+
+<p>L'API Resize Observer fournit un mécanisme performant par lequel du code peut surveiller les changements de dimensions d'un élément et un observateur recevoir des notifications chaque fois que les dimensions changent.</p>
+
+<h2 id="Concepts_et_utilisation">Concepts et utilisation</h2>
+
+<p>Il y a une multitude de cas d'utilisation pour des techniques de <em>responsive design</em> (et d'autres par ailleurs) qui répondent à des changements de dimensions d'un élément mais, avant, leur implantation était souvent amateures et parfois imparfaites.</p>
+
+<p>Par exemple, les <a href="/en-US/docs/Web/CSS/Media_Queries">media queries</a> / {{domxref("window.matchMedia")}} sont un bon outil pour mettre à jour une mise en page à des points spécifiques quand la zone d'affichage change de dimensions, mais qu'en est-il si vous désirez changer la mise en page en réponse à un changement spécifique des dimensions d'un élément qui n'est pas le conteneur principal ?</p>
+
+<p>Pour réaliser ceci, une solution limitée serait d'écouter les changements sur un type d'événement qui convienne à résoudre le problème et qui corresponde à l'élément dont les changements de dimensions vous intéresse (c'est-à-dire l'<a href="/en-US/docs/Web/API/Window/resize_event">événement resize</a> sur window), puis de calculer les nouvelles dimensions ou autres propriétés de l'élément après un redimensionnement au moyen de {{domxref("Element.getBoundingClientRect")}} ou de {{domxref("Window.getComputedStyle")}}, par exemple.</p>
+
+<p>Une telle solution tend à ne fonctionner que pour des cas d'utilisation limités, causer des soucis de performance (continuellement appeler les méthodes évoquées ci-avant résulterait en une grosse baisse de performance), et souvent ne fonctionnera quand les dimensions de la fenêtre du navigateur ne sont pas changées.</p>
+
+<p>L'API Resize Observer fournit une solution adaptée à résoudre exactement ces types de problèmes, et plus encore, en vous permettant d'observer aisément et de répondre à des changements dans les dimensions du content-box ou du border box d'un élément, et ce d'une manière performante. Elle fournit une solution en JavaScript au manque souvent dénoncé de <a href="https://www.xanthir.com/b4PR0">requêtes sur les éléments</a> sur la plate-forme web.</p>
+
+<p>Son utilisation est simple et presque identique aux autres observateurs tels que le <a href="/en-US/docs/Web/API/PerformanceObserver">Performance Observer</a> ou l'<a href="/en-US/docs/Web/API/Intersection_Observer_API">Intersection Observer</a>. Il vous faut créer un nouvel objet {{domxref("ResizeObserver")}} en utilisant le constructeur <code><a href="/en-US/docs/Web/API/ResizeObserver/ResizeObserver">ResizeObserver()</a></code>, puis utiliser {{domxref("ResizeObserver.observe()")}} pour le faire observer les changements de dimensions d'un élément spécifiques. Une fonction de rappel fournise au constructeur sera exécutée à chaque fois que les dimensions changent, fournissant un accès aux nouvelles dimensions et vous permettant de faire tous ce que vous souhaitez faire en réponse à ces changements.</p>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<dl>
+ <dt>{{domxref("ResizeObserver")}}</dt>
+ <dd>fournit la possibilité d'enregistrer de nouveaux observateurs et de démarrer ou d'arrêter d'observer des éléments.</dd>
+ <dt>{{domxref("ResizeObserverEntry")}}</dt>
+ <dd>Décrit un unique élément qui a été redimensionné, identifiant l'élément et ses nouvelles dimensions.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Vous trouverez plusieurs exemples basiques sur notre dépôt GitHub :</p>
+
+<ul>
+ <li><a href="https://mdn.github.io/dom-examples/resize-observer/resize-observer-border-radius.html">resize-observer-border-radius.html</a> (<a href="https://github.com/mdn/dom-examples/blob/master/resize-observer/resize-observer-border-radius.html">voir la source</a>): Un exemple simple avec une boîte verte, dont les dimensions sont proportionnelles à celles de la fenêtre du navigateur. Quand les dimensions de la fenêtre changent, l'arrondissement des angles du carré changent en proportion à la taille du carré. Nous pourrions seulement implanter celà en utilisant {{cssxref("border-radius")}} avec une valeur en pourcentage, mais celà mène vite à des angles elliptiques non esthétiques, tandis que la solution ci-avant vous donne un carré aux angles agréables qui s'adaptent à la taille du carré.</li>
+ <li><a href="https://mdn.github.io/dom-examples/resize-observer/resize-observer-text.html">resize-observer-text.html</a> (<a href="https://github.com/mdn/dom-examples/blob/master/resize-observer/resize-observer-text.html">voir la source</a>): Ici, nous utilisations l'observateur de redimensionnement pour changer la {{cssxref("font-size")}} d'un en-tête et d'un paragraphe quand la <code>&lt;div&gt;</code> extérieure change de taille selon la valeur d'une jauge de sélection. Celà montre que vous pouvez répondre à des changement de dimensions d'un élément même s'ils n'ont rien en rapport avec la fenêtre du navigateur.</li>
+</ul>
+
+<p>Le code suivra usuellement ce genre de modèle (tiré de resize-observer-border-radius.html):</p>
+
+<pre class="brush: js notranslate">const resizeObserver = new ResizeObserver(entries =&gt; {
+  for (let entry of entries) {
+    if(entry.contentBoxSize) {
+      entry.target.style.borderRadius = Math.min(100, (entry.contentBoxSize.inlineSize/10) +
+                                                      (entry.contentBoxSize.blockSize/10)) + 'px';
+    } else {
+      entry.target.style.borderRadius = Math.min(100, (entry.contentRect.width/10) +
+                                                      (entry.contentRect.height/10)) + 'px';
+    }
+  }
+});
+
+resizeObserver.observe(document.querySelector('div'));</pre>
+
+<h2 id="Spé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('Resize Observer')}}</td>
+   <td>{{Spec2('Resize Observer')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.ResizeObserver")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developers.google.com/web/updates/2016/10/resizeobserver">ResizeObserver: It’s Like document.onresize for Elements</a></li>
+</ul>
diff --git a/files/fr/web/api/response/index.html b/files/fr/web/api/response/index.html
new file mode 100644
index 0000000000..8721ef0493
--- /dev/null
+++ b/files/fr/web/api/response/index.html
@@ -0,0 +1,224 @@
+---
+title: Response
+slug: Web/API/Response
+tags:
+  - API
+  - Experimental
+  - Fetch
+  - Fetch API
+  - Interface
+  - Reference
+  - Response
+translation_of: Web/API/Response
+---
+<div>{{APIRef("Fetch API")}}</div>
+
+<p>L'interface <strong><code>Response</code></strong> de l'API de <a href="/en-US/docs/Web/API/Fetch_API">fetch</a> représente la réponse d'une requête initialisée.</p>
+
+<p>Vous pouvez créer un nouvel objet <code>Response</code> en utilisant le constructeur {{domxref("Response.Response()")}}. Cependant, vous rencontrerez plus fréquemment l'objet Response comme étant le résultat d'une opération de l'API, par exemple, un service worker {{domxref("Fetchevent.respondWith")}}, ou un simple {{domxref("GlobalFetch.fetch()")}}.</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("Response.Response","Response()")}}</dt>
+ <dd>Crée un nouvel objet <code>Response</code>.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("Response.headers")}} {{readonlyinline}}</dt>
+ <dd>Contient les objets {{domxref("Headers")}} associés à la réponse.</dd>
+ <dt>{{domxref("Response.ok")}} {{readonlyinline}}</dt>
+ <dd>Contient un booléen statuant s'il s'agit d'une réponse indiquant un succès (statut HTTP entre 200 et 299) ou non.</dd>
+ <dt>{{domxref("Response.redirected")}} {{ReadOnlyInline}}</dt>
+ <dd>Indique si oui ou non la réponse est le résultat d'une (ou plusieurs) redirection(s), c'est-à-dire que sa liste d'URLs a plus d'une entrée.</dd>
+ <dt>{{domxref("Response.status")}} {{readonlyinline}}</dt>
+ <dd>Contient le status code de la réponse (par exemple <code>200</code> en cas de réussite).</dd>
+ <dt>{{domxref("Response.statusText")}} {{readonlyinline}}</dt>
+ <dd>Contient le message du statut correspondant au status code (à savoir : <code>OK</code> pour le code <code>200</code> par exemple).</dd>
+ <dt>{{domxref("Response.type")}} {{readonlyinline}}</dt>
+ <dd>Contient le type de la réponse (par exemple, <code>basic</code>, <code>cors</code>).</dd>
+ <dt>{{domxref("Response.url")}} {{readonlyinline}}</dt>
+ <dd>Contient l'URL de la réponse.</dd>
+ <dt>{{domxref("Response.useFinalURL")}}</dt>
+ <dd>Contient un booléen statuant s'il s'agit de l'URL finale de la réponse.</dd>
+</dl>
+
+<p>Par ailleurs, <code>Response</code> implémente également une propriété {{domxref("Body")}}, voici les propriétés qui lui sont propres :</p>
+
+<dl>
+ <dt>{{domxref("Body.body")}} {{readonlyInline}}</dt>
+ <dd>Un simple getter utilisé afin d'exposer un {{domxref("ReadableStream")}} permettant de lire le contenu du body.</dd>
+ <dt>{{domxref("Body.bodyUsed")}} {{readonlyInline}}</dt>
+ <dd>Stocke un {{domxref("Boolean")}} qui indique si le body a déjà été utilisé dans la réponse ou non.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("Response.clone()")}}</dt>
+ <dd>Crée un clone de l'objet <code>Response</code>.</dd>
+ <dt>{{domxref("Response.error()")}}</dt>
+ <dd>Retourne un nouvel objet <code>Response</code> associé à une erreur réseau.</dd>
+ <dt>{{domxref("Response.redirect()")}}</dt>
+ <dd>Crée une nouvelle réponse avec une URL différente permettant de rediriger l'utilisateur.</dd>
+</dl>
+
+<p><code>Response</code> implémente {{domxref("Body")}}, voici les différentes méthodes qui sont disponibles:</p>
+
+<dl>
+ <dt>{{domxref("Body.arrayBuffer()")}}</dt>
+ <dd>Prend le stream de la {{domxref("Response")}} et le lit jusqu'à la fin. Renvoie une promise qui retourne un {{domxref("ArrayBuffer")}} lorsqu'elle est résolue.</dd>
+ <dt>{{domxref("Body.blob()")}}</dt>
+ <dd>Prend le stream de la {{domxref("Response")}} et le lit jusqu'à la fin. Renvoie une promise qui retourne un {{domxref("Blob")}} lorsqu'elle est résolue.</dd>
+ <dt>{{domxref("Body.formData()")}}</dt>
+ <dd>Prend le stream de la {{domxref("Response")}} et le lit jusqu'à la fin. Renvoie une promise qui retourne un {{domxref("FormData")}} lorsqu'elle est résolue.</dd>
+ <dt>{{domxref("Body.json()")}}</dt>
+ <dd>Prend le stream de la {{domxref("Response")}} et le lit jusqu'à la fin. Renvoie une promise qui retourne le résultat du parsing du body text, comme {{jsxref("JSON")}} ,lorsqu'elle est résolue.</dd>
+ <dt>{{domxref("Body.text()")}}</dt>
+ <dd>Prend le stream de la {{domxref("Response")}} et le lit jusqu'à la fin. Renvoie une promise qui est résolue avec un {{domxref("USVString")}} (text).</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans notre <a href="https://github.com/mdn/fetch-examples/tree/gh-pages/basic-fetch">exemple basique d'utilisation de fetch </a>(<a href="http://mdn.github.io/fetch-examples/basic-fetch/">exemple</a>), nous utilisons un simple appel <code>fetch()</code> pour récupérer une image et l'afficher dans un tag {{htmlelement("img")}}. L'appel <code>fetch()</code> retourne une promise qui est résolue avec un objet <code>Response</code> associé à l'opération de récupération de la ressource. Vous remarquerez que puisque nous récupérons une image, nous avons besoin d'utiliser {{domxref("Body.blob")}} (disponible dans le body de la {{domxref("Response")}}) pour attribuer le bon MIME type à la réponse.</p>
+
+<pre class="brush: js">var myImage = document.querySelector('.my-image');
+fetch('flowers.jpg').then(function(response) {
+  return response.blob();
+}).then(function(blob) {
+  var objectURL = URL.createObjectURL(blob);
+  myImage.src = objectURL;
+});</pre>
+
+<p>Vous pouvez également utiliser le constructeur {{domxref("Response.Response()")}} pour créer votre propre objet <code>Response</code>:</p>
+
+<pre class="brush: js">var myResponse = new Response();</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('Fetch','#response-class','Response')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(34)}} <sup>[1]</sup><br>
+    {{CompatGeckoDesktop(39)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(29)}}</td>
+   <td>10.1</td>
+  </tr>
+  <tr>
+   <td><code>Body.formData</code> attribute</td>
+   <td>{{CompatChrome(60)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(47)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>redirected</code> attribute</td>
+   <td>{{CompatChrome(57)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(49)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(44)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android Webview</th>
+   <th>Chrome pour Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(42)}}</td>
+   <td>{{CompatChrome(42)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(34)}} <sup>[1]</sup><br>
+    {{CompatGeckoMobile(39)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOperaMobile(29)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>Body.formData</code> attribute</td>
+   <td>{{CompatChrome(60)}}</td>
+   <td>{{CompatChrome(60)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOperaMobile(47)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>redirected</code> attribute</td>
+   <td>{{CompatChrome(57)}}</td>
+   <td>{{CompatChrome(57)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(49)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOperaMobile(44)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Disponible<span id="result_box" lang="fr"><span> comme préférence jusqu'à</span></span> Firefox 39.</p>
+
+<h2 id="Voir_aussi">Voir aussi</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/fr/web/api/rtciceserver/index.html b/files/fr/web/api/rtciceserver/index.html
new file mode 100644
index 0000000000..20b0619bcd
--- /dev/null
+++ b/files/fr/web/api/rtciceserver/index.html
@@ -0,0 +1,137 @@
+---
+title: RTCIceServer
+slug: Web/API/RTCIceServer
+translation_of: Web/API/RTCIceServer
+---
+<p>{{APIRef("WebRTC")}}</p>
+
+<p>RTCIceServer définit comment se connecter à un serveur ICE unique (comme un serveur {{Glossary("STUN")}} ou {{Glossary("TURN")}}). Il comprend à la fois l'URL et les éventuelle informations d'identification nécessaires pour se connecter au serveur.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("RTCIceServer.credential", "credential")}} {{optional_inline}}</dt>
+ <dd>Les informations d'identification à utiliser lors de la connexion au serveur. Celles‑ci sont utilisées uniquement si <code>RTCIceServer</code> est un serveur TURN.</dd>
+ <dt>{{domxref("RTCIceServer.credentialType", "credentialType")}} {{optional_inline}}</dt>
+ <dd>Si <code>RTCIceServer</code> est un serveur TURN, cet attribut spécifie quel type d'information d'identification doit être utilisé lors de la connexion. Ce doit être l'une des valeurs définies par l'énumération {{domxref("RTCIceCredentialType")}}. La valeur par défaut est <code>password</code>.</dd>
+ <dt>{{domxref("RTCIceServer.url", "url")}} {{obsolete_inline}}</dt>
+ <dd>Cette propriété obsolète est une chaîne spécifiant l'URL d'un serveur ICE unique. <strong>Ne pas utiliser cette propriété; utiliser plutôt {{domxref("RTCIceServer.urls")}}</strong>. Étant donné que de nombreux livres et exemples anciens l'utilisent encore, nous l'incluons pour aider les développeurs à mettre à jour leur code ou donner un sens a des exemples plus anciens.</dd>
+ <dt>{{domxref("RTCIceServer.urls", "urls")}}</dt>
+ <dd>Cette propriété est <strong>obligatoire</strong>, elle peut être soit une seule {{domxref("DOMString")}} ou un tableau de {{domxref("DOMString")}} , spécifiant chacun une URL qui peut être utilisée pour se connecter au serveur.</dd>
+ <dt>{{domxref("RTCIceServer.username", "username")}} {{optional_inline}}</dt>
+ <dd>Si <code>RTCIceServer</code> est un serveur TURN, alors ceci est le nom d'utilisateur à utiliser pendant le processus d'authentification.</dd>
+</dl>
+
+<p>Évitez de spécifier un nombre inutilement élevé d'URL dans la propriété <code>urls</code>; le temps de démarrage de votre connexion va augmenter sensiblement. Chaque serveur dans la liste sera contacté et testé avant d'en choisir un pour être utilisé pour la négociation.</p>
+
+<div class="note">
+<p>Les anciennes versions de la spécification WebRTC incluent une propriété <code>url</code> au lieu de <code>urls</code>; cela a été changé afin de vous permettre de spécifier plusieurs adresses pour chaque serveur dans la liste, comme le montre l'exemple ci-dessous.</p>
+</div>
+
+<h2 id="Constantes">Constantes</h2>
+
+<h3 id="Enumeration_RTCIceCredentialType">Enumeration RTCIceCredentialType </h3>
+
+<p>L'enumeration <code>RTCIceCredentialType</code> spécifie les valeurs qui peuvent être renvoyés par la propriété credentialType pour définir quel type d'authentification est fournie dans la propriété {{domxref("RTCIceServer.credential")}}. Cela peut être l'une des valeurs ci‑dessous.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Constante</th>
+   <th scope="col">Description</th>
+  </tr>
+  <tr>
+   <td><code>"password"</code></td>
+   <td>un mot de passe d'aithentification. Voir {{RFC (5389, "", 10.2)}} pour plus de détails.</td>
+  </tr>
+  <tr>
+   <td><code>"token"</code></td>
+   <td>The credential is an access token to be used with a third-party authentication system.</td>
+  </tr>
+ </thead>
+</table>
+
+<h2 id="Example">Example</h2>
+
+<p>The configuration below establishes two ICE servers. The first one, <code>stun:stun.services.mozilla.com</code>, requires authentication, so the username and password are provided. The second server has two URLs: <code>stun:stun.example.com</code> and <code>stun:stun-1.example.com</code>.</p>
+
+<pre class="brush: js notranslate">var configuration = { iceServers: [{
+                          urls: "stun:stun.services.mozilla.com",
+                          username: "louis@mozilla.com",
+                          credential: "webrtcdemo"
+                      }, {
+                          urls: [
+                                  "stun:stun.example.com",
+                                  "stun:stun-1.example.com"
+                          ]
+                      }]
+};
+
+var pc = new RTCPeerConnection(configuration);</pre>
+
+<p>Once the configuration object has been created, it is passed into the {{domxref("RTCPeerConnection.RTCPeerConnection", "RTCPeerConnection()")}} constructor to use it as the configuration for the new peer connection.</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(22)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(24)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("RTCPeerConnection")}}</li>
+ <li>{{domxref("RTCConfiguration")}}</li>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API/Session_lifetime">Lifetime of a WebRTC session</a></li>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API/Connectivity">WebRTC connectivity</a></li>
+</ul>
diff --git a/files/fr/web/api/rtcpeerconnection/index.html b/files/fr/web/api/rtcpeerconnection/index.html
new file mode 100644
index 0000000000..95b6e4434b
--- /dev/null
+++ b/files/fr/web/api/rtcpeerconnection/index.html
@@ -0,0 +1,359 @@
+---
+title: RTCPeerConnection
+slug: Web/API/RTCPeerConnection
+translation_of: Web/API/RTCPeerConnection
+---
+<div>{{APIRef('WebRTC')}}</div>
+
+<p><span class="seoSummary">L'interface <strong><code>RTCPeerConnection</code></strong> représente une connection WebRTC entre un ordinateur local et un homologue distant. </span></p>
+
+<p>Il fournit des méthodes pour se connecter à un homologue distant, entretenir et surveiller la connexion et fermer la connexion dès qu'elle n'est plus nécessaire.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<p>{{InterfaceOverview("WebRTC")}}</p>
+
+<h3 id="Méthode_obsolète">Méthode obsolète</h3>
+
+<p>La méthode suivante a été rendue obsolète il y a longtemps et n'a jamais été implémentée dans les principaux navigateurs.</p>
+
+<dl>
+ <dt>{{domxref("RTCPeerConnection.createDTMFSender()")}} {{obsolete_inline}}</dt>
+ <dd>Crées un nouveau {{domxref("RTCDTMFSender")}}, associé à un {{domxref("MediaStreamTrack")}} spécifique, qui pourra envoyer un signal téléphonique {{Glossary("DTMF")}} sur la connection.</dd>
+</dl>
+
+<h2 id="Événements">Événements</h2>
+
+<p>Écoutez ces événements en utilisant {{domxref("EventTarget.addEventListener", "addEventListener()")}} ou en assignant un récepteur d'événements à la propriété <code>on<em>eventname</em></code> de cette interface.</p>
+
+<dl>
+ <dt>{{domxref("RTCPeerConnection.connectionstatechange_event", "connectionstatechange")}}</dt>
+ <dd>Envoyé à l'objet <code>RTCPeerConnection</code> lorsque le statut de connectivité globale de <code>RTCPeerConnection</code> change.<br>
+ Aussi disponible au travers de la propriété de gestionnaire d'événements {{domxref("RTCPeerConnection.onconnectionstatechange", "onconnectionstatechange")}}.</dd>
+ <dt>{{domxref("RTCPeerConnection.datachannel_event", "datachannel")}}</dt>
+ <dd>Envoyé à l'objet <code>RTCPeerConnection</code> lorsque le pair distant ajoute un canal {{domxref("RTCDataChannel")}} à la connection.<br>
+ Aussi disponible au travers de la propriété de gestionnaire d'événements {{domxref("RTCPeerConnection.ondatachannel", "ondatachannel")}}.</dd>
+ <dt>{{domxref("RTCPeerConnection.icecandidate_event", "icecandidate")}}</dt>
+ <dd>Sent to the peer connection to request that the specified candidate be transmitted to the remote peer.<br>
+ Also available through the {{domxref("RTCPeerConnection.onicecandidate", "onicecandidate")}} event handler property.</dd>
+ <dt>{{domxref("RTCPeerConnection.icecandidateerror_event", "icecandidateerror")}}</dt>
+ <dd>An error of type {{domxref("RTCPeerConnectionIceErrorEvent")}} which is sent to the connection if an error occurred during ICE candidate gathering. The event's properties describe the error.<br>
+ Also available through the {{domxref("RTCPeerConnection.onicecandidateerror", "onicecandidateerror")}} event handler property.</dd>
+ <dt>{{domxref("RTCPeerConnection.iceconnectionstatechange_event", "iceconnectionstatechange")}}</dt>
+ <dd>Sent to the <code>RTCPeerConnection</code> when the state of the ICE connection changes, such as when it disconnects.<br>
+ Also available using the {{domxref("RTCPeerConnection.oniceconnectionstatechange", "oniceconnectionstatechange")}} event handler property.</dd>
+ <dt>{{domxref("RTCPeerConnection.icegatheringstatechange_event", "icegatheringstatechange")}}</dt>
+ <dd>Sent to the <code>RTCPeerConnection</code> when the ICE layer's gathering state, reflected by {{domxref("RTCPeerConnection.iceGatheringState", "iceGatheringState")}}, changes. This indicates whether ICE negotiation has not yet begun (<code>new</code>), has begun gathering candidates (<code>gathering</code>), or has completed (<code>complete</code>).<br>
+ Also available using the {{domxref("RTCPeerConnection.onicegatheringstatechange", "onicegatheringstatechange")}} event handler property.</dd>
+ <dt>{{domxref("RTCPeerConnection.isolationchange_event", "isolationchange")}}</dt>
+ <dd>Sent to the <code>RTCPeerConnection</code> when the {{domxref("MediaStreamTrack.isolated", "isolated")}} property on one of the {{domxref("MediaStreamTrack")}} objects associated with the connection changes value. A track is {{domxref("MediaStreamTrack.isolated", "isolated")}} if its content cannot be accessed by the owning document due to lack of authentication or if the track comes from a cross-origin source.<br>
+ Also available through the {{domxref("RTCPeerConnection.onisolationchange", "onisolationchange")}} event handler property.</dd>
+ <dt>{{domxref("RTCPeerConnection.negotiationneeded_event", "negotiationneeded")}}</dt>
+ <dd>Sent to the <code>RTCPeerConnection</code> when negotiation or renegotiation of the ICE connection needs to be performed; this can happen both when first opening a connection as well as when it's neccessary to adapt to changing network conditions. The receiver should respond by creating an offer and sending it to the other peer.<br>
+ Also available as the {{domxref("RTCPeerConnection.onnegotiationneeded", "onnegotiationneeded")}} event handler property.</dd>
+ <dt>{{domxref("RTCPeerConnection.signalingstatechange_event", "signalingstatechange")}}</dt>
+ <dd>The <code>signalingstatechange</code> event is sent to the <code>RTCPeerConnection</code> when the connection's ICE signaling state changes.<br>
+ Also available through the {{domxref("RTCPeerConnection.onsignalingstatechange", "onsignalingstatechange")}} event handler property.</dd>
+ <dt>{{domxref("RTCPeerConnection.statsended_event", "statsended")}}</dt>
+ <dd>The <code>statsended</code> event is sent when a statistics object being monitored is deleted. The {{domxref("RTCStatsEvent")}} includes the final report on the deleted object (or objects, if multiple objects have been deleted since the last report was delivered). A statistics object is deleted, for example, when the connection is closed and deleted.<br>
+ Available as the {{domxref("RTCPeerConnection.onstatsended", "onstatsended")}} event handler property.</dd>
+ <dt>{{domxref("RTCPeerConnection.track_event", "track")}}</dt>
+ <dd>The <code>track</code> event is sent after a new track has been added to one of the {{domxref("RTCRtpReceiver")}} instances which comprise the connection.<br>
+ Available as the {{domxref("RTCPeerConnection.ontrack", "ontrack")}} event handler property.</dd>
+</dl>
+
+<h3 id="Événements_obsolètes">Événements obsolètes</h3>
+
+<dl>
+ <dt>{{domxref("RTCPeerConnection.addstream_event", "addstream")}} {{obsolete_inline}}</dt>
+ <dd>Sent when a new {{domxref("MediaStream")}} has been added to the connection. Instead of watching for this obsolete event, you should watch each for {{domxref("RTCPeerConnection.track_event", "track")}} events; one is sent for each {{domxref("MediaStreamTrack")}} added to the connection.<br>
+ Available as the {{domxref("RTCPeerConnection.onaddstream", "onaddstream")}} event handler property.</dd>
+ <dt>{{domxref("RTCPeerConnection.identityresult_event", "identityresult")}} {{obsolete_inline}}</dt>
+ <dd>In old versions of the WebRTC specification, this event was used to indicate that an identity assertion is available. Now, you should instead wait for a the promise returned by {{domxref("RTCPeerConnection.peerIdentity", "peerIdentity")}} to resolve with an identity.<br>
+ Also available using the {{domxref("RTCPeerConnection.onidentityresult", "onidentityresult")}} event handler property.</dd>
+ <dt>{{domxref("RTCPeerConnection.idpassertionerror_event", "idpassertionerror")}} {{obsolete_inline}}</dt>
+ <dd>In old versions of the WebRTC specification, this event was used to indicate that an error occurred while attempting to generate an identity assertion. Now, you should instead wait for a the promise returned by {{domxref("RTCPeerConnection.peerIdentity", "peerIdentity")}} to be rejected with an error.<br>
+ Also available as the {{domxref("RTCPeerConnection.onidpassertionerror", "onidpinsertionerror")}} event handler property.</dd>
+ <dt>{{domxref("RTCPeerConnection.idpvalidationerror_event", "idpvalidationerror")}} {{obsolete_inline}}</dt>
+ <dd>In old versions of the WebRTC specification, this event was used to indicate that an error occurred while attempting to validate an identity assertion. Now, you should instead wait for a the promise returned by {{domxref("RTCPeerConnection.peerIdentity", "peerIdentity")}} to be rejected with an error.<br>
+ Also available using the {{domxref("RTCPeerConnection.onpeeridentity", "onpeerdentity")}} event handler property.</dd>
+ <dt>{{domxref("RTCPeerConnection.peeridentity_event", "peeridentity")}} {{obsolete_inline}}</dt>
+ <dd>In old versions of the WebRTC specification, this event was used to deliver a received identity. Now, you should instead wait for a the promise returned by {{domxref("RTCPeerConnection.peerIdentity", "peerIdentity")}} to resolve with an identity.</dd>
+ <dt>{{domxref("RTCPeerConnection.removestream_event", "removestream")}} {{obsolete_inline}}</dt>
+ <dd>Sent to the <code>RTCPeerConnection</code> when a {{domxref("MediaStream")}} is removed from the connection. Instead of watching for this obsolete event, you should watch each stream for {{domxref("MediaStream.removetrack_event", "removetrack")}} events on each stream within the <code>RTCPeerConnection</code>.<br>
+ Also available as the {{domxref("RTCPeerConnection.onremovestream", "onaddstream")}} event handler property.</dd>
+</dl>
+
+<h2 id="Constantes">Constantes</h2>
+
+<h3 id="RTCBundlePolicy_enum">RTCBundlePolicy enum</h3>
+
+<p>The <code>RTCBundlePolicy</code> enum defines string constants which are used to request a specific policy for gathering ICE candidates if the remote peer isn't compatible with the <a href="https://webrtcstandards.info/sdp-bundle/">SDP BUNDLE standard</a> for bundling multiple media streams on a single transport link.</p>
+
+<div class="note">
+<p><strong>Note:</strong> In technical terms, a BUNDLE lets all media flow between two peers flow across a single <strong>5-tuple</strong>; that is, from the same IP and port on one peer to the same IP and port on the other peer, using the same transport protocol.</p>
+</div>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Constante</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"balanced"</code></td>
+   <td>On BUNDLE-aware connections, the ICE agent should gather candidates for all of the media types in use (audio, video, and data). Otherwise, the ICE agent should only negotiate one audio and video track on separate transports.</td>
+  </tr>
+  <tr>
+   <td><code>"max-compat"</code></td>
+   <td>The ICE agent should gather candidates for each track, using separate transports to negotiate all media tracks for connections which aren't BUNDLE-compatible.</td>
+  </tr>
+  <tr>
+   <td><code>"max-bundle"</code></td>
+   <td>The ICE agent should gather candidates for just one track. If the connection isn't BUNDLE-compatible, then the ICE agent should negotiate just one media track.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="RTCIceConnectionState_enum">RTCIceConnectionState enum</h3>
+
+<p>The <code>RTCIceConnectionState</code> enum defines the string constants used to describe the current state of the ICE agent and its connection to the ICE server (that is, the {{Glossary("STUN")}} or {{Glossary("TURN")}} server).</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Constante</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"new"</code></td>
+   <td>The ICE agent is gathering addresses or is waiting to be given remote candidates through calls to {{domxref("RTCPeerConnection.addIceCandidate()")}} (or both).</td>
+  </tr>
+  <tr>
+   <td><code>"checking"</code></td>
+   <td>The ICE agent has been given one or more remote candidates and is checking pairs of local and remote candidates against one another to try to find a compatible match, but has not yet found a pair which will allow the peer connection to be made. It's possible that gathering of candidates is also still underway.</td>
+  </tr>
+  <tr>
+   <td><code>"connected"</code></td>
+   <td>A usable pairing of local and remote candidates has been found for all components of the connection, and the connection has been established. It's possible that gathering is still underway, and it's also possible that the ICE agent is still checking candidates against one another looking for a better connection to use.</td>
+  </tr>
+  <tr>
+   <td><code>"completed"</code></td>
+   <td>The ICE agent has finished gathering candidates, has checked all pairs against one another, and has found a connection for all components.</td>
+  </tr>
+  <tr>
+   <td><code>"failed"</code></td>
+   <td>The ICE candidate has checked all candidates pairs against one another and has failed to find compatible matches for all components of the connection. It is, however, possible that the ICE agent did find compatible connections for some components.</td>
+  </tr>
+  <tr>
+   <td><code>"disconnected"</code></td>
+   <td>Checks to ensure that components are still connected failed for at least one component of the {{domxref("RTCPeerConnection")}}. This is a less stringent test than <code>"failed"</code> and may trigger intermittently and resolve just as spontaneously on less reliable networks, or during temporary disconnections. When the problem resolves, the connection may return to the <code>"connected"</code> state.</td>
+  </tr>
+  <tr>
+   <td><code>"closed"</code></td>
+   <td>The ICE agent for this {{domxref("RTCPeerConnection")}} has shut down and is no longer handling requests.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="RTCIceGatheringState_enum">RTCIceGatheringState enum</h3>
+
+<p>The <code>RTCIceGatheringState</code> enum defines string constants which reflect the current status of ICE gathering, as returned using the {{domxref("RTCPeerConnection.iceGatheringState")}} property. You can detect when this value changes by watching for an event of type {{event("icegatheringstatechange")}}.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Constante</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"new"</code></td>
+   <td>The peer connection was just created and hasn't done any networking yet.</td>
+  </tr>
+  <tr>
+   <td><code>"gathering"</code></td>
+   <td>The ICE agent is in the process of gathering candidates for the connection.</td>
+  </tr>
+  <tr>
+   <td><code>"complete"</code></td>
+   <td>The ICE agent has finished gathering candidates. If something happens that requires collecting new candidates, such as a new interface being added or the addition of a new ICE server, the state will revert to "gathering" to gather those candidates.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="RTCIceTransportPolicy_enum">RTCIceTransportPolicy enum</h3>
+
+<p>The <code>RTCIceTransportPolicy</code> enum defines string constants which can be used to limit the transport policies of the ICE candidates to be considered during the connection process.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Constante</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"all"</code></td>
+   <td>All ICE candidates will be considered.</td>
+  </tr>
+  <tr>
+   <td><code>"public" </code>{{obsolete_inline}}</td>
+   <td>Only ICE candidates with public IP addresses will be considered. <em>Removed from the specification's May 13, 2016 working draft.</em></td>
+  </tr>
+  <tr>
+   <td><code>"relay"</code></td>
+   <td>Only ICE candidates whose IP addresses are being relayed, such as those being passed through a TURN server, will be considered.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="RTCPeerConnectionState_enum">RTCPeerConnectionState enum</h3>
+
+<p>The <code>RTCPeerConnectionState</code> enum defines string constants which describe states in which the <code>RTCPeerConnection</code> may be. These values are returned by the {{domxref("RTCPeerConnection.connectionState", "connectionState")}} property. This state essentially represents the aggregate state of all ICE transports (which are of type {{domxref("RTCIceTransport")}} or {{domxref("RTCDtlsTransport")}}) being used by the connection.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Constante</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"new"</code></td>
+   <td>At least one of the connection's ICE transports ({{domxref("RTCIceTransport")}}s or {{domxref("RTCDtlsTransport")}}s) are in the <code>"new"</code> state, and none of them are in one of the following states: <code>"connecting"</code>, <code>"checking"</code>, <code>"failed"</code>, or <code>"disconnected"</code>, <em>or</em> all of the connection's transports are in the <code>"closed"</code> state.</td>
+  </tr>
+  <tr>
+   <td><code>"connecting"</code></td>
+   <td>One or more of the ICE transports are currently in the process of establishing a connection; that is, their <code>RTCIceConnectionState</code> is either <code>"checking"</code> or <code>"connected"</code>, and no transports are in the <code>"failed"</code> state. <strong>&lt;&lt;&lt; Make this a link once I know where that will be documented</strong></td>
+  </tr>
+  <tr>
+   <td><code>"connected"</code></td>
+   <td>Every ICE transport used by the connection is either in use (state <code>"connected"</code> or <code>"completed"</code>) or is closed (state <code>"closed"</code>); in addition, at least one transport is either <code>"connected"</code> or <code>"completed"</code>.</td>
+  </tr>
+  <tr>
+   <td><code>"disconnected"</code></td>
+   <td>At least one of the ICE transports for the connection is in the <code>"disconnected"</code> state and none of the other transports are in the state <code>"failed"</code>, <code>"connecting"</code>, or <code>"checking"</code>.</td>
+  </tr>
+  <tr>
+   <td><code>"failed"</code></td>
+   <td>One or more of the ICE transports on the connection is in the <code>"failed"</code> state.</td>
+  </tr>
+  <tr>
+   <td><code>"closed"</code></td>
+   <td>
+    <p>The <code>RTCPeerConnection</code> is closed.</p>
+
+    <p>This value was in the <a href="#RTCSignalingState_enum"><code>RTCSignalingState</code> enum</a> (and therefore found by reading the value of the {{domxref("RTCPeerConnection.signalingState", "signalingState")}}) property until the May 13, 2016 draft of the specification.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="RTCRtcpMuxPolicy_enum">RTCRtcpMuxPolicy enum</h3>
+
+<p>The <code>RTCRtcpMuxPolicy</code> enum defines string constants which specify what ICE candidates are gathered to support non-multiplexed RTCP. <strong>&lt;&lt;&lt;add a link to info about multiplexed RTCP.</strong></p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Constante</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"negotiate"</code></td>
+   <td>Instructs the ICE agent to gather both {{Glossary("RTP")}} and {{Glossary("RTCP")}} candidates. If the remote peer can multiplex RTCP, then RTCP candidates are multiplexed atop the corresponding RTP candidates. Otherwise, both the RTP and RTCP candidates are returned, separately.</td>
+  </tr>
+  <tr>
+   <td><code>"require"</code></td>
+   <td>Tells the ICE agent to gather ICE candidates for only RTP, and to multiplex RTCP atop them. If the remote peer doesn't support RTCP multiplexing, then session negotiation fails.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="RTCSignalingState_enum">RTCSignalingState enum</h3>
+
+<p>The <code>RTCSignalingState</code> enum specifies the possible values of {{domxref("RTCPeerConnection.signalingState")}}, which indicates where in the process of signaling the exchange of offer and answer the connection currently is.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Constante</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"stable"</code></td>
+   <td>There is no ongoing exchange of offer and answer underway. This may mean that the {{domxref("RTCPeerConnection")}} object is new, in which case both the {{domxref("RTCPeerConnection.localDescription", "localDescription")}} and {{domxref("RTCPeerConnection.remoteDescription", "remoteDescription")}} are <code>null</code>; it may also mean that negotiation is complete and a connection has been established.</td>
+  </tr>
+  <tr>
+   <td><code>"have-local-offer"</code></td>
+   <td>The local peer has called {{domxref("RTCPeerConnection.setLocalDescription()")}}, passing in SDP representing an offer (usually created by calling {{domxref("RTCPeerConnection.createOffer()")}}), and the offer has been applied successfully.</td>
+  </tr>
+  <tr>
+   <td><code>"have-remote-offer"</code></td>
+   <td>The remote peer has created an offer and used the signaling server to deliver it to the local peer, which has set the offer as the remote description by calling {{domxref("RTCPeerConnection.setRemoteDescription()")}}.</td>
+  </tr>
+  <tr>
+   <td><code>"have-local-pranswer"</code></td>
+   <td>The offer sent by the remote peer has been applied and an answer has been created (usually by calling {{domxref("RTCPeerConnection.createAnswer()")}}) and applied by calling {{domxref("RTCPeerConnection.setLocalDescription()")}}. This provisional answer describes the supported media formats and so forth, but may not have a complete set of ICE candidates included. Further candidates will be delivered separately later.</td>
+  </tr>
+  <tr>
+   <td><code>"have-remote-pranswer"</code></td>
+   <td>A provisional answer has been received and successfully applied in response to an offer previously sent and established by calling <code>setLocalDescription()</code>.</td>
+  </tr>
+  <tr>
+   <td><code>"closed"</code> {{obsolete_inline}}</td>
+   <td>
+    <p>La connection est fermée.</p>
+
+    <div class="note">
+    <p><strong>Note :</strong> Cette valeur a été déplacée dans le <a href="#RTCPeerConnectionState_enum"><code>RTCPeerConnectionState</code> enum</a> dans le brouillon de cette spécification du 13 mai 2016, pour qu'il reflète l'état de <code>RTCPeerConnection</code>, et non la connection de signalisation. Vous pouvez maintenant détecter une connection fermée en vérifiant à la place que l'état de la connection {{domxref("RTCPeerConnection.connectionState", "connectionState")}} est indiquée <code>"closed"</code>.</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">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WebRTC 1.0', '#interface-definition', 'RTCPeerConnection')}}</td>
+   <td>{{Spec2('WebRTC 1.0')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateur">Compatibilité navigateur</h2>
+
+
+
+<p>{{Compat("api.RTCPeerConnection")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://github.com/jesup/nightly-gupshup/blob/master/static/js/chat.js">https://github.com/jesup/nightly-gupshup/blob/master/static/js/chat.js</a></li>
+ <li><a href="http://www.html5rocks.com/en/tutorials/webrtc/basics/#toc-simple">http://www.html5rocks.com/en/tutorials/webrtc/basics/#toc-simple</a></li>
+ <li><a href="https://github.com/chrisjohndigital/TutorRoom">TutorRoom</a>: Node.js HTML5 video capture, peer-to-peer video and filesharing application (<a href="https://github.com/chrisjohndigital/TutorRoom">source on GitHub</a>)</li>
+</ul>
diff --git a/files/fr/web/api/rtcpeerconnection/setconfiguration/index.html b/files/fr/web/api/rtcpeerconnection/setconfiguration/index.html
new file mode 100644
index 0000000000..8d4c85f582
--- /dev/null
+++ b/files/fr/web/api/rtcpeerconnection/setconfiguration/index.html
@@ -0,0 +1,105 @@
+---
+title: RTCPeerConnection.setConfiguration()
+slug: Web/API/RTCPeerConnection/setConfiguration
+tags:
+  - Experimental
+  - Méthode
+  - Reference
+  - WebRTC
+  - setConfiguration
+translation_of: Web/API/RTCPeerConnection/setConfiguration
+---
+<div>{{APIRef("WebRTC")}}{{SeeCompatTable}}</div>
+
+<p>La méthode <strong><code>RTCPeerConnection.setConfiguration()</code></strong> définit la configuration courante pour la connexion {{domxref("RTCPeerConnection")}} en fonction des valeurs des propriétés de l'objet {{domxref("RTCConfiguration")}} passé en argument. Cela permet de modifier les serveurs ICE et les règles de transport utilisés par la connexion.</p>
+
+<p>Le cas d'usage le plus probable (bien qu'il ne soit probablement pas répandu) est le remplacement des serveurs ICE à utiliser. Voici deux scénarios pour lesquels cela pourrait se produire :</p>
+
+<ul>
+ <li>L'objet {{domxref("RTCPeerConnection")}} a été instancié sans qu'un serveur ICE soit spécifié. Si le constructeur {{domxref("RTCPeerConnection.RTCPeerConnection()", "RTCPeerConnection()")}} a été appelé sans paramètre, on doit alors appeler <code>setConfiguration()</code> pour ajouter des serveurs ICE avant que la négociation ICE puisse avoir lieu.</li>
+ <li>La connexion doit être renégociée et il faut utiliser un autre ensemble de serveurs ICE pour une certaine raison (ex. l'utilisateur s'est déplacé dans une nouvelle région et il faut donc utiliser de nouveaux serveurs ICE régionaux). Dans ce cas, on pourra appeler <code>setConfiguration()</code> pour passer sur les serveurs régionaux puis initier <a href="/en-US/docs/Web/API/WebRTC_API/Session_lifetime#ICE_restart">un redémarrage ICE</a>.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note :</strong> On ne peut pas changer les informations d'identité d'une connexion une fois que celle-ci a été créée.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>RTCPeerConnection</em>.setConfiguration(<em>configuration</em>);</pre>
+
+<h3 class="syntaxbox" id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>configuration</code></dt>
+ <dd>Un objet {{domxref("RTCConfiguration")}} qui fournit les options à appliquer à la connexion. Les changements ne sont pas utilisés en addition mais remplacent les valeurs existantes.</dd>
+</dl>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<dl>
+ <dt><code>InvalidAccessError</code></dt>
+ <dd>Une ou plusieurs URL indiquées dans <code>configuration.iceServers</code> sont des serveurs {{Glossary("TURN")}} mais les informations d'authentification ne sont pas complètes (il manque {{domxref("RTCIceServer.username")}} ou {{domxref("RTCIceServer.credentials")}}). Cela empêche une connexion/identification correcte sur le serveur.</dd>
+ <dt><code>InvalidModificationError</code></dt>
+ <dd>L'objet <code>configuration</code> contient des changements relatifs à l'identité alors que la connexion a déjà ces informations indiquées. Cela se produit lorsque <code>configuration.peerIdentity</code> ou <code>configuration.certificates</code> sont définies et que leurs valeurs diffèrent de la configuration courante.</dd>
+ <dt><code>InvalidStateError</code></dt>
+ <dd>La connexion ({{domxref("RTCPeerConnection")}}) est fermée.</dd>
+ <dt><code>SyntaxError</code></dt>
+ <dd>Une ou plusieurs URL fournies dans la liste <code>configuration.iceServers</code> sont invalides.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, on a déjà determiné qu'un redémarrage ICE est nécessaire et que la négociation ICE doit se faire sur un nouveau serveur.</p>
+
+<pre class="brush: js">var restartConfig = { iceServers: [{
+                          urls: "turn:asia.myturnserver.net",
+                          username: "allie@oopcode.com",
+                          credential: "topsecretpassword"
+                      }]
+};
+
+myPeerConnection.setConfiguration(restartConfig);
+
+myPeerConnection.createOffer({"iceRestart": true}).then(function(offer) {
+  return myPeerConnection.setLocalDescription(offer);
+})
+.then(function() {
+  // send the offer to the other peer using the signaling server
+})
+.catch(reportError);</pre>
+
+<p>Pour commencer, on crée une {{domxref("RTCConfiguration")}}, <code>restartConfig</code>, en indiquant le nouveau serveur ICE et les informations de connexion associées. Cet objet est alors passé à <code>setConfiguration()</code>. La négociation ICE est redémarrée via {{domxref("RTCPeerConnection.createOffer()", "createOffer()")}} pour laquelle on indique <code>true</code> pour l'option <code>iceRestart</code>. Ensuite, on gère le processus habituel en définissant la description locale de l'offre et en envoyant cette offre à l'autre pair.</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('WebRTC 1.0', '#widl-RTCPeerConnection-setConfiguration-void-RTCConfiguration-configuration', 'setConfiguration()')}}</td>
+   <td>{{Spec2('WebRTC 1.0')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.RTCPeerConnection.setConfiguration")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("RTCPeerConnection.getConfiguration()")}}</li>
+ <li>{{domxref("RTCConfiguration")}}</li>
+ <li>{{domxref("RTCPeerConnection")}}</li>
+</ul>
diff --git a/files/fr/web/api/screen_capture_api/index.html b/files/fr/web/api/screen_capture_api/index.html
new file mode 100644
index 0000000000..6ba5ed0468
--- /dev/null
+++ b/files/fr/web/api/screen_capture_api/index.html
@@ -0,0 +1,141 @@
+---
+title: Screen Capture API
+slug: Web/API/Screen_Capture_API
+tags:
+  - API
+  - Capture
+  - Conference
+  - Media
+  - MediaDevices
+  - Overvew
+  - Screen Capture
+  - Screen Sharing
+  - Video
+  - Window
+  - display
+  - getDisplayMedia
+  - screen
+translation_of: Web/API/Screen_Capture_API
+---
+<div>{{DefaultAPISidebar("Screen Capture API")}}</div>
+
+<p><span class="seoSummary">The Screen Capture API introduces additions to the existing Media Capture and Streams API to let the user select a screen or portion of a screen (such as a window) to capture as a media stream.</span> This stream can then be recorded or shared with others over the network.</p>
+
+<h2 id="API_Screen_Capture_concepts_et_utilisation">API Screen Capture concepts et utilisation</h2>
+
+<p>L'API Screen Capture est relativement simple à utiliser. Sa seule méthode est {{domxref("MediaDevices.getDisplayMedia()")}} dont le but est de demander à l'utilisateur un écran ou une portion d'écran à capturer sous la forme de {{domxref("MediaStream")}}.</p>
+
+<p>Pour commencer à capturer une vidéo de l'écran, il faut appeler <code>getDisplayMedia()</code> dans une instance de <code>navigator.mediaDevices</code></p>
+
+<pre class="brush: js">captureStream = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);</pre>
+
+<p>La {{jsxref("Promise")}} retournée par <code>getDisplayMedia()</code> résout un {{domxref("MediaStream")}} qui diffuse le dédia capturé.</p>
+
+<p>Voir l'article <a href="/en-US/docs/Web/API/Screen_Capture_API/Using_Screen_Capture">Utiliser l'API Screen Capture</a> <span class="tlid-translation translation" lang="fr"><span title="">pour plus de détails sur l’utilisation de l’API pour capturer le contenu de l’écran sous forme de flux.</span></span></p>
+
+<h2 id="Ajouts_à_l'interface_actuelle">Ajouts à l'interface actuelle</h2>
+
+<p>L'API Screen Capture n'a pas sa propre interface. Cependant, elle ajoute une méthode à l'existante interface {{domxref("MediaDevices")}} .</p>
+
+<h3 id="Interface_MediaDevices">Interface MediaDevices</h3>
+
+<dl>
+ <dt>{{domxref("MediaDevices.getDisplayMedia()")}}</dt>
+ <dd>La méthode <code>getDisplayMedia()</code> est ajoutée à l'interface <code>MediaDevices</code>. Similaire à {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}}, cette méthode crée une promise qui  method creates a promise qui résout un {{domxref("MediaStream")}} contenant  la zone d'affichage sélectionnée par l'utilisateur, dans un format qui correspond aux options spécifiées.</dd>
+</dl>
+
+<h2 id="Ajouts_aux_dictionnaires_actuels">Ajouts aux dictionnaires actuels</h2>
+
+<p>L'API Screen Capture ajoute des propriétés au dictionnaire suivant définit par d'autres spécificités.</p>
+
+<h3 id="MediaTrackConstraints">MediaTrackConstraints</h3>
+
+<dl>
+ <dt>{{domxref("MediaTrackConstraints.cursor")}}</dt>
+ <dd>Un {{domxref("ConstrainDOMString")}}  indiquant si le curseur doit ou non être inclus dans le flux de la surface d'affichage capturée, et s'il doit toujours être visible ou s'il ne doit l'être que lorsque la souris est en mouvement.</dd>
+ <dt>{{domxref("MediaTrackConstraints.displaySurface")}}</dt>
+ <dd>Un {{domxref("ConstrainDOMString")}} indiquant quel type de surface d'affichage doit être capturé. La valeur peut être <code>application</code>, <code>browser</code>, <code>monitor</code>, ou <code>window</code>.</dd>
+ <dt>{{domxref("MediaTrackConstraints.logicalSurface")}}</dt>
+ <dd>Indique si la vidéo dans le flux représente ou non une surface d'affichage logique (c'est-à-dire une surface qui peut ne pas être entièrement visible à l'écran ou peut-être complètement hors écran). La valeur <code>true</code> indique qu'une surface d'affichage logique doit être capturée.</dd>
+</dl>
+
+<h3 id="MediaTrackSettings">MediaTrackSettings</h3>
+
+<dl>
+ <dt>{{domxref("MediaTrackSettings.cursor")}}</dt>
+ <dd>Une chaîne de caractères indiquant si la surface d'affichage en cours de capture comprend ou non le curseur de la souris et, dans l'affirmative, si elle est visible uniquement lorsque la souris est en mouvement ou si elle est toujours visible. La valeur peut être <code>always</code>, <code>motion</code>, ou <code>never</code>.</dd>
+ <dt>{{domxref("MediaTrackSettings.displaySurface")}}</dt>
+ <dd>Une chaîne indiquant le type de surface d'affichage en cours de capture. La valeur peut être<code>application</code>, <code>browser</code>, <code>monitor</code>, ou <code>window</code>.</dd>
+ <dt>{{domxref("MediaTrackSettings.logicalSurface")}}</dt>
+ <dd>Valeur booléenne valant <code>true</code> si la vidéo en cours de capture ne correspond pas directement à une seule zone d'affichage à l'écran.</dd>
+</dl>
+
+<h3 id="MediaTrackSupportedConstraints">MediaTrackSupportedConstraints</h3>
+
+<dl>
+ <dt>{{domxref("MediaTrackSupportedConstraints.cursor")}}</dt>
+ <dd>Valeur booléenne valant <code>true</code> si l'environnement actuel supporte la contrainte {{domxref("MediaTrackConstraints.cursor")}}.</dd>
+ <dt>{{domxref("MediaTrackSupportedConstraints.displaySurface")}}</dt>
+ <dd>Valeur booléenne valant <code>true</code> si l'environnement actuel supporte la contrainte {{domxref("MediaTrackConstraints.displaySurface")}}.</dd>
+ <dt>{{domxref("MediaTrackSupportedConstraints.logicalSurface")}}</dt>
+ <dd>Valeur booléenne valant <code>true</code> si l'environnement actuel supporte la contrainte {{domxref("MediaTrackConstraints.logicalSurface")}}.</dd>
+</dl>
+
+<h2 id="Dictionnaires">Dictionnaires</h2>
+
+<p>Le dictionnaire suivant est difinit par l'API Screen Capture.</p>
+
+<dl>
+ <dt><code>CursorCaptureConstraint</code></dt>
+ <dd>Un type de chaîne énuméré utilisé pour fournir la valeur de la propriété <code>cursor</code> aux paramètres et aux contraintes. La valeur peut être <code>always</code>, <code>motion</code>, ou <code>never</code>.</dd>
+ <dt><code>DisplayCaptureSurfaceType</code></dt>
+ <dd>Un type de chaîne énuméré utilisé pour identifier le type de surface d'affichage à capturer. ce type est utilisé pour la propriété <code>displaySurface</code> dans les objets contraints et paramètres, et a plusieurs valeurs possibles <code>application</code>, <code>browser</code>, <code>monitor</code>, and <code>window</code>.</dd>
+</dl>
+
+<h2 id="Validation_de_Feature_Policy">Validation de Feature Policy</h2>
+
+<p>{{Glossary("User agent", "User agents")}} qui supportent  Feature Policy (soit en utilisant les entetes HTTP {{HTTPHeader("Feature-Policy")}} ou l'attribut {{HTMLElement("iframe")}}{{htmlattrxref("allow", "iframe")}} peut spécifier la volonté d'utiliser l'API Screen Capture API en utilisant la directive Policy Controle <code>display-capture</code>:</p>
+
+<pre class="brush: html">&lt;iframe allow="display-capture" src="/some-other-document.html"&gt;</pre>
+
+<p>La liste d’autorisations par défaut est <code>self</code>, ce qui permet à tout contenu du document d’utiliser Screen Capture.</p>
+
+<p>Voir <a href="/en-US/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy">Utiliser Feature Policy</a> pour une explication plus en détail sur comment est utilisé Feature Policy.</p>
+
+<h2 id="Caracteristiques">Caracteristiques</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Caracteristiques</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Screen Capture')}}</td>
+   <td>{{Spec2('Screen Capture')}}</td>
+   <td>Définition Initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_Navigateurs">Compatibilité des Navigateurs</h2>
+
+<div>
+
+
+<div>
+
+
+<p>{{Compat("api.MediaDevices.getDisplayMedia")}}</p>
+</div>
+
+
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Screen_Capture_API/Using_Screen_Capture">Utiliser l'API Screen Capture</a></li>
+ <li>{{domxref("MediaDevices.getDisplayMedia()")}}</li>
+</ul>
diff --git a/files/fr/web/api/selection/collapse/index.html b/files/fr/web/api/selection/collapse/index.html
new file mode 100644
index 0000000000..9eff106240
--- /dev/null
+++ b/files/fr/web/api/selection/collapse/index.html
@@ -0,0 +1,119 @@
+---
+title: Selection.collapse()
+slug: Web/API/Selection/collapse
+tags:
+  - API
+  - Edition HTML
+  - Experimental
+  - Method
+  - Reference
+  - Selection
+translation_of: Web/API/Selection/collapse
+---
+<div>{{ApiRef("DOM")}}{{SeeCompatTable}}</div>
+
+<p>La méthode <strong><code>Selection.collapse()</code></strong> positionne la sélection en cours en un seul point. Le document n'est pas modifié. Si le focus est sur le contenu et est modifiable, le curseur d'édition s'y positionnera et sera visible.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>sel</var>.collapse(<var>parentNode</var>, <var>offset</var>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><em><code>parentNode</code></em></dt>
+ <dd>Le curseur d'édition sera placé à l'intérieur de ce noeud.</dd>
+</dl>
+
+<dl>
+ <dt><em><code>offset</code></em></dt>
+ <dd>Indique la position du curseur d'édition dans <code>parentNode</code>.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">/* Positionner le curseur au début de l'élément body d'un document HTML. */
+var body = document.getElementsByTagName("body")[0];
+window.getSelection().collapse(body,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('Selection API', '#widl-Selection-collapse-void-Node-node-unsigned-long-offset', 'Selection.collapse()')}}</td>
+   <td>{{Spec2('Selection API')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML Editing', '#dom-selection-collapse', 'Selection.collapse()')}}</td>
+   <td>{{Spec2('HTML Editing')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité">Compatibilité</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>1.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Selection")}}, l'interface à laquelle collapse appartient.</li>
+</ul>
diff --git a/files/fr/web/api/selection/index.html b/files/fr/web/api/selection/index.html
new file mode 100644
index 0000000000..b6dc3d0940
--- /dev/null
+++ b/files/fr/web/api/selection/index.html
@@ -0,0 +1,106 @@
+---
+title: selection
+slug: Web/API/Selection
+translation_of: Web/API/Selection
+---
+<p>{{ ApiRef() }}</p>
+
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+
+<p>La classe de l'objet retourné par <code><a href="Window/getSelection"> window.getSelection()</a></code>, <a href="https://developer.mozilla.org/fr/docs/Web/API/Document/getSelection" title="Cette méthode fonctionne de manière identique à la méthode Window.getSelection () ; elle renvoie un objet Selection représentant le texte actuellement sélectionné dans le document."><code>document.getSelection()</code></a> et d'autres méthodes.</p>
+
+<h3 id="Description" name="Description">Description</h3>
+
+<p>Un objet <code>selection</code> représente les <a href="range">plages</a> sélectionnées par l'utilisateur. Habituellement, il ne contient qu'une seule plage accessible comme ceci :</p>
+
+<pre class="eval">range = sel.getRangeAt(0);
+</pre>
+
+<p>L'appel de la méthode <code><a href="Selection/toString">toString()</a></code> renvoie le texte contenu dans la sélection. Cet appel peut être automatique, par exemple lorsque l'objet est passé à la fonction alert() : </p>
+
+<pre class="eval">selObj = window.getSelection();
+window.alert(selObj);
+</pre>
+
+<h3 id="Glossaire" name="Glossaire">Glossaire</h3>
+
+<p>Autres mots clés utilisés dans cette section.</p>
+
+<dl>
+ <dt>anchor (ancre)</dt>
+ <dd>L'« ancre » d'une sélection est son point de départ. Pour une sélection avec la souris, l'« ancre » correspond à l'endroit initialement pressé par le bouton de la souris. Quand l'utilisateur modifie la sélection à la souris ou au clavier, l'« ancre » ne change pas.</dd>
+ <dt>focus (focus)</dt>
+ <dd>Le « focus » d'une sélection est son point d'arrivée. Pour une sélection avec la souris, le « focus » correspond à l'endroit où le bouton de la souris est relaché. Quand l'utilisateur modifie la sélection à la souris ou au clavier, le « focus » pointe la fin de la sélection modifiée.</dd>
+ <dt>range (plage)</dt>
+ <dd>Une « plage » est une partie contigüe d'un document. Une « plage » peut contenir aussi bien des nœuds entiers que des portions de nœuds, comme un extrait de nœud texte. Habituellement, un utilisateur n'effectuera qu'une seule sélection à la fois, mais il lui est possible de sélectionner plusieurs « plages » (par ex. en utilisant la touche Ctrl). Une « plage » est obtenue depuis une sélection par l'objet <a href="range">range</a>. Les objets <code>range</code> peuvent également être créés via le DOM et ajoutés ou supprimés d'une sélection par programmation.</dd>
+</dl>
+
+<h3 id="Propri.C3.A9t.C3.A9s" name="Propri.C3.A9t.C3.A9s">Propriétés</h3>
+
+<dl>
+ <dt><a href="/fr/docs/Web/API/Selection/anchorNode">anchorNode</a></dt>
+ <dd>Renvoie le nœud d'où la sélection commence.</dd>
+ <dt><a href="/fr/docs/Web/API/Selection/anchorOffset">anchorOffset</a></dt>
+ <dd>Renvoie un nombre correspondant au décalage de l'« ancre » de la sélection au sein de l'<code>anchorNode</code>. Si l'<code>anchorNode</code> est un noeud texte, il s'agit du nombre de caractères précédants l'« ancre » au sein de l'<code>anchorNode</code>. Si l'<code>anchorNode</code> est un élément, il s'agit du nombre de noeuds enfants de l'<code>anchorNode</code> précédant l'« ancre ».</dd>
+ <dt><a href="/fr/docs/Web/API/Selection/focusNode">focusNode</a></dt>
+ <dd>Renvoie le nœud où la sélection se termine.</dd>
+ <dt><a href="/fr/docs/Web/API/Selection/focusOffset">focusOffset</a></dt>
+ <dd>Renvoie un nombre correspondant au décalage du « focus » de la sélection au sein du focus<code>Node</code>. Si le focus<code>Node</code> est un noeud texte, il s'agit du nombre de caractères précédants le « focus » au sein du focus<code>Node</code>. Si le focusNode est un élément, il s'agit du nombre de noeuds enfants du focus<code>Node</code> précédant le « focus ».</dd>
+ <dt><a href="/fr/docs/Web/API/Selection/isCollapsed">isCollapsed</a></dt>
+ <dd>Renvoie un booléen indiquant si le point de départ et d'arrivée sont à la même position.</dd>
+ <dt><a href="/fr/docs/Web/API/Selection/rangeCount">rangeCount</a></dt>
+ <dd>Renvoie le nombre de « plages » dans la sélection.</dd>
+</dl>
+
+<h3 id="M.C3.A9thodes" name="M.C3.A9thodes">Méthodes</h3>
+
+<dl>
+ <dt><a href="/fr/docs/Web/API/Selection/getRangeAt">getRangeAt</a></dt>
+ <dd>Renvoie un objet range représentant une des « plages » actuellement sélectionnée.</dd>
+ <dt><a href="/fr/docs/Web/API/Selection/collapse">collapse</a></dt>
+ <dd>Réduit la sélection courante à un simple point.</dd>
+ <dt><a href="/fr/docs/Web/API/Selection/extend">extend</a></dt>
+ <dd>Déplace le « focus » de la sélection à un endroit spécifié.</dd>
+ <dt><a href="/fr/docs/Web/API/Selection/collapseToStart">collapseToStart</a></dt>
+ <dd>Déplace le « focus » de la sélection au même point que l'« ancre ».</dd>
+ <dt><a href="/fr/docs/Web/API/Selection/collapseToEnd">collapseToEnd</a></dt>
+ <dd>Déplace l'« ancre » de la sélection au même point que le « focus ». Le « focus » ne bouge pas.</dd>
+ <dt><a href="/fr/docs/Web/API/Selection/selectAllChildren">selectAllChildren</a></dt>
+ <dd>Ajoute tous les enfants d'un nœud spécifié à la sélection.</dd>
+ <dt><a href="/fr/docs/Web/API/Selection/addRange">addRange</a></dt>
+ <dd>Un objet range devant être ajouté à la sélection.</dd>
+ <dt><a href="/fr/docs/Web/API/Selection/removeRange">removeRange</a></dt>
+ <dd>Supprime une « plage » de la sélection.</dd>
+ <dt><a href="/fr/docs/Web/API/Selection/removeAllRanges">removeAllRanges</a></dt>
+ <dd>Supprime toutes les « plages » de la sélection.</dd>
+ <dt><a href="/fr/docs/Web/API/Selection/deleteFromDocument">deleteFromDocument</a></dt>
+ <dd>Efface le contenu de la sélection du document.</dd>
+ <dt><a href="/fr/docs/Web/API/Selection/selectionLanguageChange">selectionLanguageChange</a></dt>
+ <dd> </dd>
+ <dt><a href="/fr/docs/Web/API/Selection/toString">toString</a></dt>
+ <dd>Renvoie une chaîne de caractères représentant l'actuel objet <code>selection</code>, i.e. le texte sélectionné.</dd>
+ <dt><a href="/fr/docs/Web/API/Selection/containsNode">containsNode</a></dt>
+ <dd>Indique si un nœud donné appartient à la sélection.</dd>
+</dl>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Selection")}}</p>
+
+<h3 id="Voir_aussi" name="Voir_aussi">Voir aussi</h3>
+
+<p><a href="Window/getSelection">window.getSelection</a>, <a href="https://developer.mozilla.org/fr/docs/Web/API/Document/getSelection" title="Cette méthode fonctionne de manière identique à la méthode Window.getSelection () ; elle renvoie un objet Selection représentant le texte actuellement sélectionné dans le document."><code>document.getSelection()</code></a>,<a href="range">Range</a></p>
+
+<h3 id="Liens_externes" name="Liens_externes">Liens externes</h3>
+
+<ul>
+ <li><a class="external" href="http://lxr.mozilla.org/mozilla/source/content/base/public/nsISelection.idl">Définition IDL dans Mozilla cross-reference</a></li>
+</ul>
+
+<p> </p>
+
+<div class="noinclude"> </div>
+
+<p>{{ languages( { "en": "en/DOM/Selection", "es": "es/DOM/Selection", "it": "it/DOM/Selection", "ja": "ja/DOM/selection", "pl": "pl/DOM/Selection" } ) }}</p>
diff --git a/files/fr/web/api/selection/tostring/index.html b/files/fr/web/api/selection/tostring/index.html
new file mode 100644
index 0000000000..760100faa5
--- /dev/null
+++ b/files/fr/web/api/selection/tostring/index.html
@@ -0,0 +1,31 @@
+---
+title: toString
+slug: Web/API/Selection/toString
+tags:
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/Selection/toString
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p>Renvoie une chaîne de caractères représentant l'actuel objet <code>selection</code>, i.e. le texte sélectionné.</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<pre class="eval"><i>string</i> =<i>sel</i>.toString()
+</pre>
+<ul>
+ <li><code>string</code> est la représentation sous la forme d'une chaîne de caractères de la sélection.</li>
+</ul>
+<h3 id="Param.C3.A8tres" name="Param.C3.A8tres">Paramètres</h3>
+<p>Aucun.</p>
+<h3 id="Description" name="Description">Description</h3>
+<p>Cette méthode renvoie le texte sélectionné.</p>
+<p>En <a href="fr/JavaScript">JavaScript</a>, cette méthode est appelée automatiquement pour des objets <code>selection</code> aux fonctions nécessitant un paramètre <code>string</code> :</p>
+<pre class="eval">alert(window.getSelection()) // Appel automatique
+alert(window.getSelection().toString())  // Appel explicite
+</pre>
+<h3 id="Voir_aussi" name="Voir_aussi">Voir aussi</h3>
+<ul>
+ <li><a href="fr/R%c3%a9f%c3%a9rence_de_JavaScript_1.5_Core/Objets_globaux/Object/toString">Object.toString</a></li>
+</ul>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "en": "en/DOM/Selection/toString", "es": "es/DOM/Selection/toString", "it": "it/DOM/Selection/toString", "pl": "pl/DOM/Selection/toString" } ) }}</p>
diff --git a/files/fr/web/api/selection/type/index.html b/files/fr/web/api/selection/type/index.html
new file mode 100644
index 0000000000..6f6032891a
--- /dev/null
+++ b/files/fr/web/api/selection/type/index.html
@@ -0,0 +1,70 @@
+---
+title: Selection.type
+slug: Web/API/Selection/type
+tags:
+  - API
+  - Experimental
+  - Propriété
+  - Reference
+  - Type
+translation_of: Web/API/Selection/type
+---
+<div>{{APIRef("DOM")}}{{SeeCompatTable}}</div>
+
+<p>La propriété en lecture simple <strong><code>type</code></strong> de l'interface {{domxref("Selection")}} retourne un {{domxref("DOMString")}} décrivant le type de la sélection courante.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>value</em> =<em> sel</em>.type
+</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>Une {{domxref("DOMString")}} décrivant le type de la sélection courante. Les valeurs possibles sont :</p>
+
+<ul>
+ <li><code>None</code>: Aucune sélection courante.</li>
+ <li><code>Caret</code>: La sélection est réduite (le curseur est dans un texte mais il n'y a pas de plage sélectionnée).</li>
+ <li><code>Range</code>: Une plage est sélectionnnée.</li>
+</ul>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans cet exemple le gestionnaire d'évènemenet est activé à chaque changement de la sélection. <code>console.log(selection.type)</code> retourne <code>Caret</code> ou <code>Range</code> selon que le curseur est sur un simple caractère ou qu'une plage est sélectionée.</p>
+
+<pre class="brush: js">var selection;
+
+document.onselectionchange = function() {
+  console.log('New selection made');
+  selection = document.getSelection();
+  console.log(selection.type);
+};</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>{{SpecName('Selection API', '#dom-selection-type', 'Selection.type')}}</td>
+   <td>{{Spec2('Selection API')}}</td>
+   <td>Courant</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Selection.type")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Selection")}}</li>
+</ul>
diff --git a/files/fr/web/api/selection_api/index.html b/files/fr/web/api/selection_api/index.html
new file mode 100644
index 0000000000..bca8077699
--- /dev/null
+++ b/files/fr/web/api/selection_api/index.html
@@ -0,0 +1,221 @@
+---
+title: Selection API
+slug: Web/API/Selection_API
+translation_of: Web/API/Selection_API
+---
+<p>{{APIRef}}</p>
+
+<div class="summary">
+<p>L’API Selection fournit des fonctionnalités pour lire et manipuler les plages (en anglais : <em lang="en-US">ranges</em>) de texte sélectionnées par l’utilisatrice ou l’utilisateur.</p>
+</div>
+
+<h2 id="Concepts_et_utilisation">Concepts et utilisation</h2>
+
+<p>Pour obtenir la plage de texte actuellement sélectionnée par l’utilisatrice ou l’utilisateur, vous pouvez utiliser la méthode {{domxref("Window.getSelection()")}} ou {{domxref("Document.getSelection()")}}, et stocker la valeur de retour – un objet {{domxref("Selection")}} – dans une variable pour une utilisation ultérieure.</p>
+
+<p>Une fois que votre sélection est dans une variable, vous pouvez effectuer différentes opérations dessus, par exemple :</p>
+
+<ul>
+ <li>copier la sélection dans une chaîne en utilisant {{domxref("Selection.toString()")}} ;</li>
+ <li>ajouter (ou enlever) une plage (representée par un objet {{domxref("Range")}} standard) à la sélection grâce à {{domxref("Selection.addRange()")}} / {{domxref("Selection.removeRange()")}} ;</li>
+ <li>modifier la sélection pour qu’elle devienne le contenu entier d’un nœud DOM grâce à {{domxref("Selection.selectAllChildren()")}}.</li>
+</ul>
+
+<p>Vous pouvez exécuter du code en réponse à un changement de sélection, ou au commencement d’une nouvelle sélection, en utilisant les gestionnaires d’évènements {{domxref("GlobalEventHandlers.onselectionchange")}} et {{domxref("GlobalEventHandlers.onselectstart")}}.</p>
+
+<h2 id="Interfaces_de_l’API_Selection">Interfaces de l’API Selection</h2>
+
+<dl>
+ <dt>{{domxref("Selection")}}</dt>
+ <dd>Représente la plage de texte sélectionnée ou la position actuelle du curseur.</dd>
+</dl>
+
+<h2 id="Extensions_à_d’autres_interfaces">Extensions à d’autres interfaces</h2>
+
+<dl>
+ <dt>{{domxref("Window.getSelection()")}}, {{domxref("Document.getSelection()")}}</dt>
+ <dd>Retourne un objet {{domxref("Selection")}} représentant la plage de texte sélectionnée ou la position actuelle du curseur. <code>Document.getSelection()</code> est en quelques sortes un alias de <code>Window.getSelection()</code>.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onselectstart")}}</dt>
+ <dd>Représente le gestionnaire d’évènement qui est appelé quand un évènement {{event("selectstart")}} est émis sur l’objet concerné (c’est-à-dire quand une nouvelle plage de texte est sur le point d’être sélectionnée).</dd>
+ <dt>{{domxref("GlobalEventHandlers.onselectionchange")}}</dt>
+ <dd>Représente le gestionnaire d’évènement qui est appelé quand un évènement {{event("selectionchange")}} est émis sur l’objet concerné (c’est-à-dire quand la plage de texte sélectionné change).</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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selection API', '#definition', 'Selection')}}</td>
+   <td>{{Spec2('Selection API')}}</td>
+   <td>La spécification de l’API Selection est basée sur la spécification de l’API Édition HTML et se concentre sur les fonctionnalités liées à la sélection.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML Editing', '#selection', 'Selection')}}</td>
+   <td>{{Spec2('HTML Editing')}}</td>
+   <td>Définition initiale (plus ancienne), à présent obsolète.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support de base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown()}}<br>
+    {{CompatGeckoDesktop(52)}}<sup>[1]</sup></td>
+   <td>9</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>modify()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(2)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>setBaseAndExtent()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(53)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>deleteFromDocument()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(55)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>empty()</code> comme alias de <code>removeAllRanges()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(55)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>setPosition()</code> comme alias de <code>collapse()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(55)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>
+    <p>{{CompatVersionUnknown()}}<br>
+     {{CompatGeckoMobile(52)}}<sup>[1]</sup></p>
+   </td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>modify()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(2)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>setBaseAndExtent()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(53)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>deleteFromDocument()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(55)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>empty()</code> comme alias de <code>removeAllRanges()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(55)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>setPosition()</code> comme alias de <code>collapse()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(55)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Les gestionnaires d’évènements {{domxref("GlobalEventHandlers.onselectionchange")}} et {{domxref("GlobalEventHandlers.onselectstart")}} sont supportés à partir de Firefox 52.</p>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://github.com/chrisdavidmills/selection-api-examples/tree/gh-pages#key-quote-generator" lang="en-US">Key quote generator</a>: Une démo simple montrant un usage typique de l’API Selection pour capturer la sélection actuelle à un instant donné et copier les sélections dans une liste (<a href="https://chrisdavidmills.github.io/selection-api-examples/">voir également en direct</a>).</li>
+ <li>L’objet {{domxref("Range")}}.</li>
+</ul>
diff --git a/files/fr/web/api/server-sent_events/index.html b/files/fr/web/api/server-sent_events/index.html
new file mode 100644
index 0000000000..6e128d7c6e
--- /dev/null
+++ b/files/fr/web/api/server-sent_events/index.html
@@ -0,0 +1,107 @@
+---
+title: Server-sent events
+slug: Web/API/Server-sent_events
+tags:
+  - Server-sent events
+  - TopicStub
+translation_of: Web/API/Server-sent_events
+---
+<p>Habituellement, une page web doit envoyer une requête au serveur pour obtenir de nouvelles données. Avec les server-Sent events, le serveur peut envoyer de nouvelles données vers une page web à n'importe quel moment. La page web reçoit alors ces nouveaux messages qui peuvent être traités comme des événements contenant des données.</p>
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h2 class="Documentation" id="Documentation" name="Documentation">Documentation</h2>
+
+    <dl>
+     <dt><a href="/en-US/docs/Server-sent_events/Using_server-sent_events" title="Server-sent events/Using server-sent events">Utilisation des événements envoyés par le serveur</a></dt>
+     <dd>Un tutoriel sur l'écriture d'une partie côté serveur et côté client d'une application d'événements envoyée par le serveur.</dd>
+     <dt><a href="/en-US/docs/Server-sent_events/EventSource" title="Server-sent events/EventSource">EventSource référence</a></dt>
+     <dd>Une référence à l'API EventSource côté client.</dd>
+    </dl>
+
+    <p><span class="alllinks"><a href="/en-US/docs/tag/Server-sent_events" title="tag/Server-sent events">Voir tout...</a></span></p>
+   </td>
+   <td>
+    <h2 class="Tools" id="Tools" name="Tools">Outils</h2>
+
+    <ul>
+     <li>Remy Sharp’s <a class="link-https" href="https://github.com/remy/polyfills/blob/master/EventSource.js">EventSource polyfill</a></li>
+     <li>Yaffle’s <a class="link-https" href="https://github.com/Yaffle/EventSource" title="https://github.com/Yaffle/EventSource">EventSource polyfill</a></li>
+     <li>Rick Waldron’s <a class="link-https" href="https://github.com/rwldrn/jquery.eventsource">jquery plugin</a></li>
+    </ul>
+
+    <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Rubriques connexes</h2>
+
+    <ul>
+     <li><a href="/en-US/docs/AJAX" title="AJAX">AJAX</a>, <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a>, <a href="/en-US/docs/WebSockets" title="WebSockets">WebSockets</a></li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>Une <a href="http://hacks.mozilla.org/2011/06/a-wall-powered-by-eventsource-and-server-sent-events/" title="http://hacks.mozilla.org/2011/06/a-wall-powered-by-eventsource-and-server-sent-events/">application de type Twitter</a> alimentée par des événements envoyés par le serveur et <a class="link-https" href="https://github.com/mozilla/webowonder-demos/tree/master/demos/friends%20timeline" title="https://github.com/mozilla/webowonder-demos/tree/master/demos/friends timeline">son code sur Github</a>.</li>
+ <li><a href="http://dsheiko.com/weblog/html5-and-server-sent-events" title="http://dsheiko.com/weblog/html5-and-server-sent-events">Événements HTML5 et envoyés par le serveur</a></li>
+ <li><a href="http://rajudasa.blogspot.in/2012/05/html5-server-sent-events-using-aspnet.html" title="http://rajudasa.blogspot.in/2012/05/html5-server-sent-events-using-aspnet.html">Événements envoyés par le serveur à l'aide d'Asp.Net</a></li>
+</ul>
+
+<h2 id="Spécification">Spécification</h2>
+
+<ul>
+ <li><a href="http://dev.w3.org/html5/eventsource/" title="http://dev.w3.org/html5/eventsource/">Événements envoyés par le serveur</a></li>
+</ul>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>EventSource support</td>
+   <td>9</td>
+   <td>{{CompatGeckoDesktop("6.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>11</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>EventSource support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fr/web/api/server-sent_events/using_server-sent_events/index.html b/files/fr/web/api/server-sent_events/using_server-sent_events/index.html
new file mode 100644
index 0000000000..3ca71f34a5
--- /dev/null
+++ b/files/fr/web/api/server-sent_events/using_server-sent_events/index.html
@@ -0,0 +1,264 @@
+---
+title: Utiliser les évènements envoyés par le serveur
+slug: Web/API/Server-sent_events/Using_server-sent_events
+translation_of: Web/API/Server-sent_events/Using_server-sent_events
+---
+<p>Développer une application web qui utilise des <em><a href="/fr/docs/Server-sent_events" title="/fr/docs/Server-sent_events">server-sent events</a></em> (évènements envoyés par le serveur) est assez facile. Vous aurez besoin d’un bout de code côté serveur pour transmettre des évènements en flux continu à l’application web ; mais côté client, les choses fonctionnent de manière quasiment identique à la gestion de n’importe quel autre type d’évènement.</p>
+
+<h2 id="Recevoir_des_évènements_du_serveur">Recevoir des évènements du serveur</h2>
+
+<p>L’API <em>server-sent events</em> est exposée par l’interface <a href="/fr/docs/Web/API/EventSource" title="/fr/docs/Web/API/EventSource"><code>EventSource</code></a> ; pour ouvrir une connexion vers le serveur afin de commencer à recevoir des évènements de celui-ci, vous devez créer un nouvel objet <code>EventSource</code>, en spécifiant l’URL d’un script côté serveur qui va générer les évènements. Par exemple :</p>
+
+<pre class="brush: php">var evtSource = new EventSource("ssedemo.php");
+</pre>
+
+<p>Si le script qui génère les évènements est hébergé sur un domaine différent, le nouvel objet <code>EventSource</code> doit être créé en spécifiant à la fois l’URI et un dictionnaire d’options. Par exemple, en supposant que le script client est sur example.com :</p>
+
+<pre class="brush: js">var evtSource = new EventSource("//api.example.com/ssedemo.php", { withCredentials: true } );</pre>
+
+<div class="note">
+<p><strong>Note :</strong> l’utilisation d’<code>EventSource</code> n’est pas supportée par tous les navigateurs. Veuillez vérifier la section {{ anch("Compatibilité des navigateurs") }}.</p>
+</div>
+
+<p>Une fois que vous avez instancié votre source d’évènement, vous pouvez commencer à surveiller les messages du serveur, en écoutant l’évènement <a href="/fr/docs/Web/API/MessageEvent" title="/fr/docs/Web/API/MessageEvent"><code>message</code></a> :</p>
+
+<pre class="brush: js">evtSource.onmessage = function(e) {
+  var newElement = document.createElement("li");
+
+  newElement.innerHTML = "message: " + e.data;
+  eventList.appendChild(newElement);
+}
+</pre>
+
+<p>Ce code écoute les messages entrants (plus précisément, les notifications venant du serveur qui n’ont pas de champ <code>event</code> attaché) et ajoute le texte des messages à une liste dans le HTML du document.</p>
+
+<p>Vous pouvez aussi écouter les évènements avec <code>addEventListener()</code> :</p>
+
+<pre class="brush: js">evtSource.addEventListener("ping", function(e) {
+  var newElement = document.createElement("li");
+
+  var obj = JSON.parse(e.data);
+  newElement.innerHTML = "ping at " + obj.time;
+  eventList.appendChild(newElement);
+}, false);
+</pre>
+
+<p>Ce code est similaire, à part qu’il sera appelé automatiquement si le serveur envoie un message dont le champ <code>event</code> est <code>ping</code> ; il analysera alors le JSON dans le champ <code>data</code> et l’affichera.</p>
+
+<h2 id="Envoyer_un_évènement_depuis_le_serveur">Envoyer un évènement depuis le serveur</h2>
+
+<p>Le script côté serveur qui envoie les évènements doit répondre en utilisant le type MIME <code>text/event-stream</code>. Chaque notification est envoyée sous la forme d’un bloc de texte se terminant par une paire de caractères <em>saut de ligne</em> (<code>\n</code>). Pour plus de détails sur le format du flux d’évènements, voir {{ anch("Format du flux d'évènements") }}.</p>
+
+<p>Voici le code {{ Glossary("PHP") }} que nous utilisons pour notre exemple :</p>
+
+<pre class="brush: php">date_default_timezone_set("America/New_York");
+header("Content-Type: text/event-stream\n\n");
+
+$counter = rand(1, 10);
+while (1) {
+  // Chaque seconde, envoi d’un évènement "ping".
+
+  echo "event: ping\n";
+  $curDate = date(DATE_ISO8601);
+  echo 'data: {"time": "' . $curDate . '"}';
+  // Paire de sauts de ligne
+  echo "\n\n";
+
+  // Envoie un message simple à des intervalles aléatoires.
+
+  $counter--;
+
+  if (!$counter) {
+    echo 'data: This is a message at time ' . $curDate . "\n\n";
+    $counter = rand(1, 10);
+  }
+
+  ob_end_flush();
+  flush();
+  sleep(1);
+}
+</pre>
+
+<p>Ce code génère un évènement de type « ping » à chaque seconde. La donnée de chaque évènement est un objet JSON contenant un horodatage ISO 8601 qui correspond à l’heure à laquelle l’évènement a été généré. À des intervalles aléatoires, un message simple (sans type d’évènement) est envoyé.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Vous pouvez trouver un exemple complet utilisant le code ci-dessus sur Github — voir <a href="https://github.com/mdn/dom-examples/tree/master/server-sent-events" lang="en-US">Simple SSE demo using PHP.</a></p>
+</div>
+
+<h2 id="Gestion_des_erreurs">Gestion des erreurs</h2>
+
+<p>Quand un problème survient (tel qu’un délai de réponse dépassé ou une erreur liée au <a href="/fr/docs/Web/HTTP/CORS">contrôle d’accès</a>), un évènement <code>error</code> est généré. Vous pouvez traiter ces cas d’erreur en implémentant la fonction de rappel <code>onerror</code> de l’objet <code>EventSource</code>.</p>
+
+<pre class="brush: js">evtSource.onerror = function(e) {
+  alert("EventSource failed.");
+};
+</pre>
+
+<p>À l’heure de Firefox 60, il ne semble pas exister de moyen de distinguer les différents types d’erreur.</p>
+
+<h2 id="Fermer_un_flux_d’évènements">Fermer un flux d’évènements</h2>
+
+<p>Par défaut, si la connexion entre le client et le serveur est rompue, elle sera relancée. Il est possible de la fermer explicitement à l’aide de la méthode <code>.close()</code>.</p>
+
+<pre>evtSource.close();</pre>
+
+<h2 id="Format_du_flux_d’évènements">Format du flux d’évènements</h2>
+
+<p>Le flux d’évènements est un simple flux de données de texte, qui doivent être encodées en UTF-8. Les messages dans le flux d’évènements sont séparés par une paire de sauts de ligne. Un caractère deux-points « : » en début de ligne est essentiellement un commentaire, et est ignoré.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Une ligne de commentaire peut être utilisée pour empêcher les connexions d’expirer. Un serveur peut envoyer périodiquement des commentaires afin de garder la connexion ouverte.</p>
+</div>
+
+<p>Chaque message consiste en une ou plusieurs lignes de texte décrivant les champs de ce message. Chaque champ est représenté par le nom du champ, suivi d’un « : », suivi des données de texte pour la valeur de ce champ.</p>
+
+<h3 id="Champs">Champs</h3>
+
+<p>Chaque message reçu a une combinaison quelconque des champs suivants, un par ligne ·</p>
+
+<dl>
+ <dt><code>event</code></dt>
+ <dd>Une chaîne identifiant le type d’évènement décrit. S’il est spécifié, un évènement sera envoyé dans le navigateur à l’écouteur défini pour l’évènement spécifié. Le code source de l’application doit utiliser <code>addEventListener()</code> pour écouter des évènements nommés. Le gestionnaire <code>onmessage</code> est appelé si aucun nom d’évènement n’est spécifié dans un message.</dd>
+ <dt><code>data</code></dt>
+ <dd>Le champ de données du message. Lorsque l’<code>EventSource</code> reçoit plusieurs lignes de message consécutives commençant par <code>data:</code>, <a href="http://www.w3.org/TR/eventsource/#dispatchMessage">il les concatène</a>, en ajoutant un caractère saut de ligne entre chacune d’elles. Les sauts de ligne en fin de message sont supprimés.</dd>
+ <dt><code>id</code></dt>
+ <dd>L’ID d’évènement, qui sera mémorisé comme valeur d’ID du dernier évènement de l’objet <code>EventSource</code>.</dd>
+</dl>
+
+<dl>
+ <dt><code>retry</code></dt>
+ <dd>Le délai de reconnexion à utiliser lors de la tentative d’envoi de l’évènement. Il doit être un nombre entier, spécifiant le temps de reconnexion en millisecondes. Si une valeur non entière est spécifiée, le champ est ignoré.</dd>
+</dl>
+
+<p>Tous les autres noms de champs sont ignorés.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Si une ligne ne contient aucun caractère deux-points, la ligne entière est considérée comme le nom du champ, avec un contenu vide.</p>
+</div>
+
+<h3 id="Exemples">Exemples</h3>
+
+<h4 id="Messages_de_données_seulement">Messages de données seulement</h4>
+
+<p>Dans l’exemple suivant, trois messages sont envoyés. Le premier est simplement un commentaire, car il débute par un caractère deux-points. Comme mentionné précédemment, cela peut être utile pour maintenir la connexion si des messages doivent être transmis de façon irrégulière.</p>
+
+<p>Le second message contient un champ <code>data</code> avec la valeur <code>"some text"</code>. Le troisième message contient un champ <code>data</code> avec la valeur <code>"another message\nwith two lines"</code>. Notez le caractère saut de ligne dans la valeur.</p>
+
+<pre>: this is a test stream
+
+data: some text
+
+data: another message
+data: with two lines
+</pre>
+
+<h4 id="Évènements_nommés">Évènements nommés</h4>
+
+<p>Cet exemple envoie une série d’évènements nommés. Chacun a un nom d’évènement spécifié par le champ <code>event</code>, et un champ <code>data</code> dont la valeur est une chaîne JSON appropriée avec les données nécéssaires au client pour réagir à l’évènement. Le champ <code>data</code> peut évidemment contenir n’importe quelles données de texte , il n’est pas obligatoirement au format JSON.</p>
+
+<pre>event: userconnect
+data: {"username": "bobby", "time": "02:33:48"}
+
+event: usermessage
+data: {"username": "bobby", "time": "02:34:11", "text": "Hi everyone."}
+
+event: userdisconnect
+data: {"username": "bobby", "time": "02:34:23"}
+
+event: usermessage
+data: {"username": "sean", "time": "02:34:36", "text": "Bye, bobby."}
+</pre>
+
+<h4 id="Mélanger_les_messages">Mélanger les messages</h4>
+
+<p>Il n’est pas obligatoire d’utiliser uniquement des messages sans nom ou des évènements nommés. Vous pouvez mélanger les deux dans un même flux d’évènements.</p>
+
+<pre>event: userconnect
+data: {"username": "bobby", "time": "02:33:48"}
+
+data: Ici un message système quelconque qui sera utilisé
+data: pour accomplir une tâche.
+
+event: usermessage
+data: {"username": "bobby", "time": "02:34:11", "text": "Hi everyone."}</pre>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support de EventSource</td>
+   <td>6</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatGeckoDesktop("6.0") }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>5</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les workers partagés et dédiés<sup>[1]</sup></td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatGeckoDesktop("53.0") }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de EventSource</td>
+   <td>4.4</td>
+   <td>45</td>
+   <td>{{ CompatNo }}</td>
+   <td>12</td>
+   <td>4.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les workers partagés et dédiés<sup>[1]</sup></td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatGeckoMobile("53.0") }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Mais <a href="https://github.com/w3c/ServiceWorker/issues/947">pas dans les service workers pour le moment</a>.</p>
+
+<h2 id="Références">Références</h2>
+
+<h4 id="Communauté_WHATWG">Communauté WHATWG</h4>
+
+<p><a href="https://html.spec.whatwg.org/multipage/comms.html#server-sent-events">https://html.spec.whatwg.org/multipage/comms.html#server-sent-events</a></p>
+
+<p><a href="http://www.html5rocks.com/profiles/#ericbidelman">Eric Bidelman</a> sur le blog HTML5 ROCKS</p>
+
+<p><a href="http://www.html5rocks.com/en/tutorials/eventsource/basics/?redirect_from_locale=fr">http://www.html5rocks.com/en/tutorials/eventsource/basics/?redirect_from_locale=fr</a></p>
diff --git a/files/fr/web/api/service_worker_api/index.html b/files/fr/web/api/service_worker_api/index.html
new file mode 100644
index 0000000000..dc15a4f63a
--- /dev/null
+++ b/files/fr/web/api/service_worker_api/index.html
@@ -0,0 +1,290 @@
+---
+title: Service Worker API
+slug: Web/API/Service_Worker_API
+tags:
+  - API
+  - Chargement
+  - Service Workers
+  - Workers
+  - hors-ligne
+translation_of: Web/API/Service_Worker_API
+---
+<div>
+<p>{{ServiceWorkerSidebar}}</p>
+
+<p>{{ SeeCompatTable() }}</p>
+
+<p class="summary">Les service workers jouent essentiellement le rôle de serveurs proxy placés entre une application web, et le navigateur ou le réseau (lorsque disponible.) Ils sont destinés (entre autres choses) à permettre la création d'expériences de navigation déconnectée efficaces, en interceptant les requêtes réseau et en effectuant des actions appropriées selon que le réseau est disponible et que des ressources mises à jour sont à disposition sur le serveur. Ils permettront aussi d'accéder aux APIs de notifications du serveur (push) et de synchronisation en arrière-plan.</p>
+</div>
+
+<h2 id="Service_worker_concepts_et_usage">Service worker, concepts et usage</h2>
+
+<p>Un service worker est un <a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker">worker</a> événementiel enregistré auprès d'une origine et d'un chemin. Il prend la forme d'un fichier JavaScript qui peut contrôler la page ou le site web auquel il est associé, en interceptant et en modifiant la navigation et les requêtes de ressources, et en mettant en cache les ressources selon une granularité très fine pour vous donner une maîtrise complète de la manière dont doit se comporter votre application dans certaines situations (l'une des plus évidentes étant l'indisponibilité du réseau.)</p>
+
+<p>Un service worker fonctionne dans le contexte d'un worker : il n'a donc pas d'accès au DOM, et s'exécute dans une tâche différente de celle du script principal de votre application, ainsi il est non-bloquant. Il est conçu pour être totalement asynchrone; en conséquence, des APIs telles que <a href="/fr/docs/Web/API/XMLHttpRequest">XHR</a> en synchrone et <a href="/fr/docs/Web/API/Web_Storage_API">localStorage</a> ne peuvent pas être utilisées au sein d'un service worker.</p>
+
+<p>Les service workers fonctionnent uniquement sur HTTPS, pour des raisons de sécurité. Laisser des requêtes réseau modifiées sans défense face aux attaques de l'homme du milieu est une bien mauvaise chose.</p>
+
+<div class="note">
+<p><strong>Remarque </strong>: les service workers ont rallié à eux des tentatives précédemment effectuées dans les mêmes domaines comme l'API <a class="external" href="http://alistapart.com/article/application-cache-is-a-douchebag">AppCache</a> parce qu'ils ne présument pas de ce que vous essayez de faire et ainsi s'interrompent quand ces suppositions ne sont pas tout à fait exactes; tout peut faire l'objet d'un contrôle d'une granularité très fine.</p>
+</div>
+
+<div class="note">
+<p><strong>Remarque </strong>: les service workers font un usage intensif des <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise" lang="fr">promesses</a>, comme généralement ils sont en attente de réponses, auxquelles ils réagissent alors différemment en cas de succès ou en cas d'erreur. L'architecture des promesses est idéale dans ces situations.</p>
+</div>
+
+<h3 id="Enregistrement">Enregistrement</h3>
+
+<p>Un service worker est d'abord enregistré en utilisant la méthode {{domxref("ServiceWorkerContainer.register()")}}. En cas de succès, votre service worker sera téléchargé par le client et tentera l'installation/l'activation (voir ci-dessous) des URLs accédées par l'utilisateur au sein du domaine complet, ou bien au sein d'un sous-ensemble spécifié par vos soins.</p>
+
+<h3 id="Télécharger_installer_et_activer">Télécharger, installer et activer</h3>
+
+<p>A cette étape, votre service worker observera le cycle de vie suivant :</p>
+
+<ol>
+ <li>Téléchargement</li>
+ <li>Installation</li>
+ <li>Activation</li>
+</ol>
+
+<p>Le service worker est immédiatement téléchargé lorsqu'un utilisateur accède pour la première fois à une page ou à un site contrôlé par un service worker.</p>
+
+<p>Après cela, il est téléchargé toutes les 24 heures environ. Il *peut* être téléchargé plus fréquemment, mais il <strong>doit </strong>être téléchargé toutes les 24 heures pour s'assurer que des scripts défectueux ne constitueraient pas une nuisance durable.</p>
+
+<p>Une tentative d'installation a lieu lorsque le fichier téléchargé se trouve être nouveau — soit qu'il est différent d'un service worker existant (comparaison bit à bit), soit qu'il s'agit du premier service worker rencontré pour cette page ou ce site.</p>
+
+<p>Si c'est la première fois qu'un service worker est rendu disponible, une tentative d'installation a lieu, puis en cas d'installation avec succès il est activé.</p>
+
+<p>S'il existait déjà un service worker, la nouvelle version est installée en arrière-plan, mais pas encore activée — à cette étape, on parle de <em>worker en attente</em>. Il n'est activé que lorsqu'il n'y a plus aucune page chargée faisant encore usage de l'ancien service worker. Aussitôt qu'il n'y a plus de telles pages chargées, le nouveau service worker est activé (devenant le <em>active worker</em>.)</p>
+
+<p>Vous pouvez guetter l'événement {{domxref("InstallEvent")}}; une action standard consiste à préparer l'usage de votre service worker quand cet événement est lancé, par exemple en créant un cache au moyen de l'API de stockage native, et en y plaçant les ressources dont vous avez besoin pour faire fonctionner de manière déconnectée votre application.</p>
+
+<p>Il y a aussi un événement <code>activate</code>. Lorsque cet événement se produit, c'est généralement le bon moment pour nettoyer les vieux caches et toutes les autres choses associées avec la version précédente de votre service worker.</p>
+
+<p>Votre service worker peut répondre aux requêtes en utilisant l'événement {{domxref("FetchEvent")}}. Vous pouvez modifier la réponse à ces requêtes de la manière que vous souhaitez, en utilisant la méthode {{domxref("FetchEvent.respondWith") }}.</p>
+
+<div class="note">
+<p><strong>Remarque </strong>: Parce que <code>oninstall</code>/<code>onactivate</code> pourraient prendre du temps à s'exécuter, la spec service worker fournit une méthode <code>waitUntil</code> qui, lorsque <code>oninstall</code> ou <code>onactivate</code> sont appelées, passe une promesse. Les événements fonctionnels ne sont pas envoyés au service worker tant que la promesse n'a pas été résolue avec succès.</p>
+</div>
+
+<p>Pour un tutoriel complet qui montre comment réaliser un premier exemple basique, il est conseillé de lire <a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les Services Workers</a>.</p>
+
+<h2 id="Autres_idées_de_cas_d'utilisation">Autres idées de cas d'utilisation</h2>
+
+<p>Les service workers sont aussi destinés à être utilisés pour des choses telles que :</p>
+
+<ul>
+ <li>Synchronisation de données en arrière-plan</li>
+ <li>Répondre à des requêtes de ressource provenant d'autres origines</li>
+ <li>Recevoir des mises à jour centralisées de données coûteuses à calculer telles que la géolocalisation ou le gyroscope, afin que de nombreuses pages puissent bénéficier du même ensemble de données</li>
+ <li>Compilation côté client et gestion des dépendances de CoffeeScript, less, modules CJS/AMD, etc. pour des besoins de développement</li>
+ <li>Branchements pour des services en arrière-plan</li>
+ <li>Personnalisation de gabarit en fonction de certains schémas d'URL</li>
+ <li>Amélioration des performances, par exemple en pré-chargeant des ressources dont l'utilisateur aura probablement besoin par la suite, comme de nouvelles images lors de la consultation d'un album photo.</li>
+</ul>
+
+<p>À l'avenir, les service workers seront capables de réaliser nombre d'autres tâches utiles au sein d'une plate-forme web, ce qui les rapprochera de la viabilité des applications natives. Il est intéressant de noter que d'autres spécifications peuvent ou commencent à faire usage du contexte des service workers, par exemple :</p>
+
+<ul>
+ <li><a class="external" href="https://github.com/slightlyoff/BackgroundSync">Synchronisation en arrière-plan</a> : démarrer un service worker même lorsqu'aucun utilisateur est sur le site, afin de mettre à jour les caches, etc.</li>
+ <li><a href="/fr/docs/Web/API/Push_API">Réagir à des messages de push </a>: démarrer un service worker pour envoyer aux utilisateurs un message leur signalant qu'un nouveau contenu est disponible.</li>
+ <li>Réagir à une date particulière</li>
+ <li>Enregistrer une géo-localisation</li>
+</ul>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<dl>
+ <dt>{{domxref("Cache") }}</dt>
+ <dd>Représente le stockage pour le couple d'objets {{domxref("Request")}} / {{domxref("Response")}} qui sont mis en cache comme partie du cycle de vie de {{domxref("ServiceWorker")}}.</dd>
+ <dt>{{domxref("CacheStorage") }}</dt>
+ <dd>Représente le stockage pour les objets {{domxref("Cache")}}. Il fournit un répertoire maître à tous les caches nommés auxquels un {{domxref("ServiceWorker")}} peut accéder et maintient une correspondance de noms avec les objets {{domxref("Cache")}} correspondants.</dd>
+ <dt>{{domxref("Client") }}</dt>
+ <dd>Représente la portée d'un service worker client. Un service worker client est soit un document dans le contexte d'un navigateur ou un {{domxref("SharedWorker")}}, qui est contrôlé par un active worker.</dd>
+ <dt>{{domxref("Clients") }}</dt>
+ <dd>Représente un conteneur pour une liste d'objets {{domxref("Client")}}; la façon principale d'accéder aux clients du service worker actif de l'origine en cours.</dd>
+ <dt>{{domxref("ExtendableEvent") }}</dt>
+ <dd>Étend la durée de vie des événements <code>install</code> et <code>activate</code> envoyés au {{domxref("ServiceWorkerGlobalScope")}} comme partie du cycle de vie d'un service worker. Cela garantit que tout événement fonctionnel (comme {{domxref("FetchEvent")}}) n'est pas envoyé au {{domxref("ServiceWorker")}} avant qu'il ne mette à jour des schémas de base de données, supprime des entrées de cache obsolètes, etc.</dd>
+ <dt>{{domxref("ExtendableMessageEvent") }}</dt>
+ <dd>L'objet événement d'un événement {{event("message_(ServiceWorker)","message")}} déclenché sur un service worker (lorsqu'un message est reçu par le {{domxref("ServiceWorkerGlobalScope")}} à partir d'un autre contexte) — étend la durée de vie de tels événements.</dd>
+ <dt>{{domxref("FetchEvent") }}</dt>
+ <dd>Le paramètre passé au gestionnaire {{domxref("ServiceWorkerGlobalScope.onfetch")}}, l'interface <code>FetchEvent</code> représente une action de recherche qui est envoyée au {{domxref("ServiceWorkerGlobalScope")}} d'un {{domxref("ServiceWorker")}}. Il contient des informations à propos de la requête et de la réponse résultante, et fournit la méthode {{domxref("FetchEvent.respondWith", "FetchEvent.respondWith()")}}, qui nous permet de produire une réponse arbitraire en retour à la page contrôlée.</dd>
+ <dt>{{domxref("InstallEvent") }}</dt>
+ <dd>Le paramètre passé au gestionnaire {{domxref("ServiceWorkerGlobalScope.oninstall", "oninstall")}}, l'interface <code>InstallEvent</code> représente une action d'installation qui est envoyée au {{domxref("ServiceWorkerGlobalScope")}} d'un {{domxref("ServiceWorker")}}. En tant qu'enfant de {{domxref("ExtendableEvent")}}, il garantit que les événements fonctionnels tels que {{domxref("FetchEvent")}} ne sont pas envoyés pendant l'installation. </dd>
+ <dt>{{domxref("Navigator.serviceWorker") }}</dt>
+ <dd>Retourne un objet {{domxref("ServiceWorkerContainer")}}, qui fournit un accès provides à l'enregistrement, la supression, la mise à jour, et la communication avec les objets {{domxref("ServiceWorker")}} pour le <a href="https://html.spec.whatwg.org/multipage/browsers.html#concept-document-window">document associé</a>.</dd>
+ <dt>{{domxref("NotificationEvent") }}</dt>
+ <dd>Le paramètre passé au gestionnaire {{domxref("ServiceWorkerGlobalScope.onnotificationclick", "onnotificationclick")}}, l'interface <code>NotificationEvent</code> représente un événement de notification au clic qui est envoyé au {{domxref("ServiceWorkerGlobalScope")}} d'un {{domxref("ServiceWorker")}}.</dd>
+ <dt>{{domxref("PeriodicSyncEvent")}} {{non-standard_inline}}</dt>
+ <dd>
+ <p>Le paramètre passé au gestionnaire sync, l'interface SyncEvent représente une action de synchronisation périodique qui est envoyée au  {{domxref("ServiceWorkerGlobalScope")}} d'un ServiceWorker. </p>
+ </dd>
+ <dt>{{domxref("PeriodicSyncManager")}} {{non-standard_inline}}</dt>
+ <dd>Fournit une interface pour l'enregistrement et la récupération des objets {{domxref("PeriodicSyncRegistration")}}.</dd>
+ <dt>{{domxref("PeriodicSyncRegistration")}} {{non-standard_inline}}</dt>
+ <dd>Fournit un objet pour la gestion d'une synchronisation périodique en arrière-plan. </dd>
+ <dt>{{domxref("ServiceWorker") }}</dt>
+ <dd>Représente un service worker. De multiples contextes de navigation (e.g. des pages, des workers, etc.) peuvent être associés au même objet <code>ServiceWorker</code>.</dd>
+ <dt>{{domxref("ServiceWorkerContainer") }}</dt>
+ <dd>Fournit un objet représentant le service worker comme une unité d'ensemble dans l'éco-système du réseau, en incluant des facilités d'enregistrement, de désinscription et de mise à jour des service workers, et d'accès à l'état des service workers et de leur enregistrement.</dd>
+ <dt>{{domxref("ServiceWorkerGlobalScope") }}</dt>
+ <dd>Représente le contexte global d'exécution d'un service worker.</dd>
+ <dt>{{domxref("ServiceWorkerMessageEvent")}}</dt>
+ <dd>Contient des informations à propos d'un événement envoyé à la cible d'un {{domxref("ServiceWorkerContainer")}}. </dd>
+ <dt>{{domxref("ServiceWorkerRegistration") }}</dt>
+ <dd>Représente l'enregistrement d'un service worker.</dd>
+ <dt>{{domxref("SyncEvent")}} {{non-standard_inline}}</dt>
+ <dd>
+ <p>Le paramètre passé au gestionnaire sync, l'interface SyncEvent représente une action de synchronisation qui est envoyée au {{domxref("ServiceWorkerGlobalScope")}} d'un ServiceWorker. </p>
+ </dd>
+ <dt>{{domxref("SyncManager")}} {{non-standard_inline}}</dt>
+ <dd>Fournit une interface pour l'enregistrement et la récupération des objets {{domxref("SyncRegistration")}}.</dd>
+ <dt>{{domxref("SyncRegistration")}} {{non-standard_inline}}</dt>
+ <dd>Fournit un objet pour la gestion d'une synchronisation en arrière-plan.</dd>
+ <dt>{{domxref("WindowClient") }}</dt>
+ <dd>Représente la portée d'un service worker client qui est un document dans le contexte d'un navigateur, contrôlé par un active worker. C'est un type spécial d'objet {{domxref("Client")}}, avec des propriété et des méthodes supplémentaires.</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">Commentaire</th>
+  </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>
+
+<div>{{ CompatibilityTable() }}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{ CompatGeckoDesktop("44.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>24</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td>install/activate events</td>
+   <td>{{ CompatChrome(40.0) }}</td>
+   <td>{{ CompatGeckoDesktop("44.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td>fetch event/request/<br>
+    <code>respondWith()</code></td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{ CompatGeckoDesktop("44.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td>caches/cache</td>
+   <td>
+    <p class="p1">{{CompatChrome(42.0)}}</p>
+   </td>
+   <td>{{ CompatGeckoDesktop("39.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td> </td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{ CompatGeckoMobile("44.0") }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td> install/activate events</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{ CompatGeckoMobile("44.0") }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td>fetch event/request/<br>
+    <code>respondWith()</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{ CompatGeckoMobile("44.0") }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td>caches/cache</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{ CompatGeckoMobile("39.0") }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div class="note">
+<p><strong>Remarque </strong>: pour une raison de rétrocompatibilité, vous pourriez choisir d'utiliser à la fois les service workers et AppCache sur la même application web pour réaliser des choses équivalentes (si AppCache permet de les réaliser, bien entendu.) Dans une telle situation, il y aura les navigateurs qui ne supportent pas les Service Workers et qui utiliseront alors AppCache, et ceux qui ignoreront AppCache au profit du service worker.</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="external" href="https://serviceworke.rs">ServiceWorker Cookbook</a></li>
+ <li><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers" lang="fr">Utilisation des Service Workers</a></li>
+ <li><a class="external" href="https://github.com/mdn/sw-test">Exemple basique de Service workers</a></li>
+ <li><a class="external" href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise">Promises</a></li>
+ <li><a href="/fr/docs/Utilisation_des_web_workers">Utilisation des web workers</a></li>
+</ul>
diff --git a/files/fr/web/api/service_worker_api/using_service_workers/index.html b/files/fr/web/api/service_worker_api/using_service_workers/index.html
new file mode 100644
index 0000000000..be23121f08
--- /dev/null
+++ b/files/fr/web/api/service_worker_api/using_service_workers/index.html
@@ -0,0 +1,522 @@
+---
+title: Utiliser les Service Workers
+slug: Web/API/Service_Worker_API/Using_Service_Workers
+tags:
+  - Guide
+  - Service
+  - ServiceWorker
+  - Workers
+  - basics
+translation_of: Web/API/Service_Worker_API/Using_Service_Workers
+---
+<p>{{ServiceWorkerSidebar}}</p>
+
+<p>{{ SeeCompatTable() }}</p>
+
+<div class="summary">
+<p>Cet article fournit des informations pour bien débuter avec les service workers, en présentant une architecture de base, l'inscription d'un service worker, l'installation et l'activation d'un processus pour un nouveau service worker, la mise à jour d'un service worker, le contrôle du cache et la personnalisation des réponses, le tout dans le contexte d'une application de base disponible en mode déconnecté.</p>
+</div>
+
+<h2 id="Le_préambule_aux_Service_Workers">Le préambule aux Service Workers</h2>
+
+<p>La perte de connexion est un problème majeur auquel sont confrontés les utilisateurs du web depuis des années. La meilleure application web au monde produirait un bien mauvais effet si vous ne pouviez pas la télécharger. Il y a eu de nombreuses tentatives pour mettre en place des technologies susceptibles de résoudre ce problème, comme le montre notre page <a href="/fr/Apps/Build/Hors-ligne">Offline</a>, et certains problèmes ont été résolus. Mais le problème principal reste l'absence d'un mécanisme de contrôle global pour la mise en cache des ressources et la personnalisation des requêtes réseau.<br>
+ <br>
+ La première tentative— AppCache — semblait être une bonne idée parce qu'elle permettait de spécifier les ressources à mettre en cache de manière très simple. Cependant, elle faisait beaucoup de suppositions sur la manière de le mettre en place et échouait implacablement si votre application ne se pliait pas exactement à ces suppositions. Lisez <a href="http://alistapart.com/article/application-cache-is-a-douchebag">Application Cache is a Douchebag</a> de Jake Archibald pour plus de détails.</p>
+
+<div class="note">
+<p><strong>Remarque </strong>: à partir de Firefox 44, lorsque <a href="/fr/docs/Web/HTML/Utiliser_Application_Cache">AppCache</a> est utilisé pour fournir un support déconnecté à une page, un message d'avertissement est alors affiché dans la console pour signaler aux développeurs d'utiliser plutôt les <a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service workers</a> ({{bug("1204581")}}.)</p>
+</div>
+
+<p>Les service workers devraient finalement résoudre ces problèmes. La syntaxe du service Worker est plus complexe que celle de l'AppCache, mais en contrepartie vous pouvez utiliser JavaScript pour contrôler les comportements induits par votre cache local avec une granularité beaucoup plus fine, vous permettant ainsi d'adresser ce problème et beaucoup d'autres. Avec l'aide d'un Service Worker, vous pouvez facilement configurer une application pour d'abord utiliser des ressources mises en cache, fournissant ainsi une première expérience par défaut même en mode déconnecté, avant de récupérer davantage de données depuis le réseau (principe connu généralement sous le nom de <a href="http://offlinefirst.org/">Offline First</a>). Cette façon de faire est déjà disponible avec les applications natives, ce qui est l'une des raisons principales de la préférence accordée à ces applications plutôt qu'aux applications web.</p>
+
+<h2 id="Préparatifs_aux_Service_Workers">Préparatifs aux Service Workers</h2>
+
+<p>De nombreuses fonctionnalités des service workers sont désormais disponibles par défaut dans les plus récentes versions des navigateurs qui les supportent. Cependant, si vous constatez que le code de la démo ne fonctionne pas dans votre version actuelle, vous pourriez avoir besoin d'activer une configuration :</p>
+
+<ul>
+ <li><strong>Firefox Nightly </strong>: rendez-vous sur <code>about:config</code> et configurer  <code>dom.serviceWorkers.enabled</code> à true; redémarrer le navigateur.</li>
+ <li><strong>Chrome Canary </strong>: rendez-vous sur <code>chrome://flags</code> et activer <code>experimental-web-platform-features</code>; redémarrer le navigateur (à noter que certaines fonctionnalités sont désormais activées par défaut dans Chrome.)</li>
+ <li><strong>Opera </strong>: rendez-vous sur <code>opera://flags</code> et activer <code>Support for ServiceWorker</code>; redémarrer le navigateur.</li>
+</ul>
+
+<p>Vous aurez aussi besoin de servir votre code via HTTPS — les Service Workers sont contraints à s'exécuter au travers d'HTTPS pour des raisons de sécurité. GitHub est donc un bon endroit pour héberger des expérimentations, puisqu'il supporte HTTPS. Et pour faciliter le développement en local, le <strong>localhost </strong>est considéré comme une origine sécurisée.</p>
+
+<h2 id="Architecture_de_base">Architecture de base</h2>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8241/flowchart-production-version.png" style="float: right; height: 600px; margin-left: 20px; width: 300px;"></p>
+
+<p>Avec les service workers, les étapes suivantes sont généralement observées pour une configuration simple :</p>
+
+<ol>
+ <li>L'URL du service worker URL est récupérée et enregistrée via {{domxref("serviceWorkerContainer.register()")}}.</li>
+ <li>En cas de succès, le service worker est exécuté dans un {{domxref("ServiceWorkerGlobalScope") }}; c'est en gros une sorte de contexte de worker spécial, fonctionnant hors du fil d'exécution du script principal, sans accès au DOM.</li>
+ <li>Le service worker est désormais prêt à traiter des événements.</li>
+ <li>Une tentative d'installation du worker a lieu lorsque les pages contrôlées par le service worker sont accédées par la suite. Un événement install est toujours le premier envoyé à un service worker (ça peut être le point de départ pour procéder au remplissage d'une base IndexedDB, et à la mise en cache de ressources du site). C'est tout à fait le même type de procédure que l'installation d'une application native ou Firefox OS — en mettant l'ensemble à disposition pour un usage déconnecté.</li>
+ <li>Lorsque le gestionnaire <code>oninstall</code> se termine, on considère que le service worker est installé.</li>
+ <li>L'étape suivante est l'activation. Lorsque le service worker est installé, il reçoit alors un événement activate. L'utilité première de <code>onactivate</code> est de nettoyer les ressources utilisées dans les versions précédentes du script du Service Worker.</li>
+ <li>Le Service Worker contrôle désormais les pages, mais seulement celles ouvertes après que le <code>register()</code> ait réussi. Ainsi un document à sa création s'accompagne ou non d'un Service Worker et conserve cet état tout au long de sa durée de vie. Ainsi les documents devront être rechargés pour réellement être contrôlés.</li>
+</ol>
+
+<h3 id="Promesses">Promesses</h3>
+
+<p><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise">Les Promesses</a> sont un puissant mécanisme pour exécuter des opérations asynchrones, dont le succès de l'une dépend du succès de l'autre. Ce mécanisme est au coeur du fonctionnement des service workers.<br>
+ <br>
+ Les promesses peuvent effectuer bien des choses, mais pour le moment il suffit de savoir que si une promesse est retournée, on peut lui attacher un <code>.then()</code> et inclure des fonctions de rappel en cas de succès, d'échec, etc., ou bien un <code>.catch()</code> et inclure une fonction de rappel en cas d'échec.</p>
+
+<p>Comparons la structure d'une fonction classique de rappel synchrone à la promesse asynchrone équivalente.</p>
+
+<h4 id="sync">sync</h4>
+
+<pre class="brush: js notranslate">try {
+  var value = myFunction();
+  console.log(value);
+} catch(err) {
+  console.log(err);
+}</pre>
+
+<h4 id="async">async</h4>
+
+<pre class="brush: js notranslate">myFunction().then(function(value) {
+  console.log(value);
+  }).catch(function(err) {
+  console.log(err);
+});</pre>
+
+<p>Dans le premier exemple, on doit attendre que l'exécution de <code>myFunction()</code> retourne <code>value</code> avant de poursuivre l'exécution de tout autre code. Dans le second exemple, <code>myFunction()</code> retourne une promesse pour <code>value</code>, ainsi le reste du code peut continuer à s'exécuter. Lorsque la promesse est résolue, le code à l'intérieur de <code>then</code> s'exécutera, de manière asynchrone.<br>
+ <br>
+ Qu'en est-il sur un exemple concret — qu'en est-il si, lors d'un chargement dynamique d'images, on veut être sûre qu'elles soient bien chargées avant de les afficher ? C'est une démarche standard à adopter, mais parfois problématique. On peut utiliser <code>.onload</code> pour n'afficher l'image qu'après qu'elle soit chargée, mais qu'en est-il des événements qui démarrent avant qu'on ne commence à les écouter ? On pourrait essayer un contournement en utilisant <code>.complete</code>, mais ce n'est toujours pas infaillible, et que faire en cas d'images multiples ? Et, ummm, tout cela reste synchrone, et bloque donc le fil d'exécution principal.<br>
+ <br>
+ Alternativement, on pourrait faire notre propre promesse pour gérer ce genre de cas. (Voir l'exemple du <a href="https://github.com/mdn/promises-test">test de promesses</a> pour le code source, ou <a href="https://mdn.github.io/promises-test/">le voir fonctionner en direct</a>.)</p>
+
+<div class="note">
+<p><strong>Remarque </strong>: la mise en place d'un véritable service worker utiliserait la mise en cache et onfetch plutôt que l'API obsolète XMLHttpRequest. Ces fonctionnalités ne sont pas utilisées ici afin de se concentrer sur la compréhension des promesses.</p>
+</div>
+
+<pre class="brush: js notranslate">function imgLoad(url) {
+  return new Promise(function(resolve, reject) {
+    var request = new XMLHttpRequest();
+    request.open('GET', url);
+    request.responseType = 'blob';
+
+    request.onload = function() {
+      if (request.status == 200) {
+        resolve(request.response);
+      } else {
+        reject(Error('Image didn\'t load successfully; error code:' + request.statusText));
+      }
+    };
+
+    request.onerror = function() {
+      reject(Error('There was a network error.'));
+    };
+
+    request.send();
+  });
+}</pre>
+
+<p>On retourne une nouvelle promesse en utilisant le constructeur <code>Promise()</code>, qui prend en argument une fonction de rappel avec les paramètres <code>resolve</code> et <code>reject</code>. Quelque part dans la fonction, on a besoin de définir à quoi correspond pour la promesse d'être résolue avec succès ou bien d'être rejetée — dans ce cas, retourner un statut 200 OK status ou pas — et donc appleler <code>resolve</code> en cas de succès, ou <code>reject</code> en cas d'échec. Le reste du contenu de cette fonction correspond à une utilisation plutôt classique d'XHR, et n'appelle pas de commentaires particuliers pour le moment.</p>
+
+<p>Lorsqu'on appelle la fonction <code>imgLoad()</code>, on l'appelle avec l'url de l'image à charger, comme on pourrait s'en douter, mais le reste du code est un peu différent :</p>
+
+<pre class="brush: js notranslate">var body = document.querySelector('body');
+var myImage = new Image();
+
+imgLoad('myLittleVader.jpg').then(function(response) {
+  var imageURL = window.URL.createObjectURL(response);
+  myImage.src = imageURL;
+  body.appendChild(myImage);
+}, function(Error) {
+  console.log(Error);
+});</pre>
+
+<p>A la fin de l'appel de la fonction, on ajoute la méthode <code>then()</code> de la promesse, qui contient deux fonctions — la première est exécutée lorsque la promesse est résolue avec succès, et la seconde est appelée lorsque la promesse est rejetée. Dans le cas d'une résolution, on affiche l'image dans : <code>myImage</code> et on l'ajoute au <code>body</code> (son argument est la valeur <code>request.response</code> contenue dans la méthode <code>resolve</code> de la promesse); en cas de rejet, on retourne une erreur dans la console.</p>
+
+<p>Le tout se déroule de manière asynchrone.</p>
+
+<div class="note">
+<p><strong>Remarque </strong>: il est possible d'assembler des appels de promesse, par exemple:<br>
+ <code>myPromise().then(success, failure).then(success).catch(failure);</code></p>
+</div>
+
+<div class="note">
+<p><strong>Remarque </strong>: pour en savoir plus sur les promesses, consulter l'excellent article de Jake Archibald <a href="http://www.html5rocks.com/en/tutorials/es6/promises/">JavaScript Promises: there and back again</a>.</p>
+</div>
+
+<h2 id="Démo_de_service_workers">Démo de service workers</h2>
+
+<p>Pour illustrer quelques principes de base de l'enregistrement et de l'installation d'un service worker, voici une simple démo appelée <a href="https://github.com/mdn/sw-test">sw-test</a>, qui présente juste une galerie d'images Star wars Lego. Elle utilise une fonction pilotée par une promesse pour lire les données d'une image à partir d'un objet JSON et charger les images en utilisant Ajax, avant d'afficher les images en bas de page. Les choses restent statiques et simples pour le moment. Elle enregistre aussi, installe et active un service worker, et lorsque la specification est davantage supportée par les navigateurs, elle met en cache tous les fichiers requis pour un fonctionnement déconnecté !</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8243/demo-screenshot.png" style="display: block; height: 410px; margin: 0px auto; width: 480px;"><br>
+ <br>
+ <br>
+ Vous pouvez consulter le <a href="https://github.com/mdn/sw-test/">code source sur GitHub</a>, et <a href="https://mdn.github.io/sw-test/">voir l'exemple en direct</a>. Le bout de code qui sera appelé est la promesse (voir <a href="https://github.com/mdn/sw-test/blob/gh-pages/app.js#L17-L42">app.js lines 17-42</a>), qui est une version modifiée du code présenté ci-dessus, dans la <a href="https://github.com/mdn/promises-test">démo du test de promesses</a>. Il en diffère de la façon suivante :</p>
+
+<ol>
+ <li>Dans l'original, on considère l'URL d'une image à charger. Dans cette version, on passe un fragment JSON contenant toutes les données d'une seule image (voir à quoi il ressemble dans <a href="https://github.com/mdn/sw-test/blob/gh-pages/image-list.js">image-list.js</a>). C'est parce que toutes les données pour que chaque promesse soit résolue doivent être passé avec la promesse, que c'est asynchrone. Si l'on passe juste l'url, et si l'on essaie alors d'accéder aux autres éléments dans le JSON séparément lorsqu'on itère plus tard avec la boucle <code>for()</code>, cela ne marchera pas, puisque la promesse ne se résolvera pas en même temps que les itérations sont faites (c'est un mécanisme synchrone.)</li>
+ <li>La promesse est résolue en réalité avec un tableau, puisqu'on veut rendre le blob de l'image chargée disponible à la fonction de résolution plus tard dans le code, mais aussi le nom de l'image, les crédits et le texte alternatif (voir <a href="https://github.com/mdn/sw-test/blob/gh-pages/app.js#L26-L29">app.js lines 26-29</a>). Les promesses se résolvent seulement avec un seul argument, aussi si l'on souhaite la résoudre avec des valeurs multiples, on a besoin d'utiliser un tableau ou un objet.</li>
+ <li>Pour accéder aux valeurs de la promesse résolue, on accède alors à cette fonction comme on peut s'y attendre (voir <a href="https://github.com/mdn/sw-test/blob/gh-pages/app.js#L55-L59">app.js lines 55-59</a>.) Cela peut sembler un peu étrange au premier abord, mais c'est la manière dont les promesses fonctionnent.</li>
+</ol>
+
+<h2 id="Introduction_aux_service_workers">Introduction aux service workers</h2>
+
+<p>Maintenant, c'est au tour des service workers !</p>
+
+<h3 id="Enregistrer_un_worker">Enregistrer un worker</h3>
+
+<p>Le premier bloc de code dans le fichier JavaScript de l'application — <code>app.js</code> — se présente comme suit. C'est le point d'entrée pour utiliser des service workers.</p>
+
+<pre class="brush: js notranslate">if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('/sw-test/sw.js', { scope: '/sw-test/' }).then(function(reg) {
+    // registration worked
+    console.log('Registration succeeded. Scope is ' + reg.scope);
+  }).catch(function(error) {
+    // registration failed
+    console.log('Registration failed with ' + error);
+  });
+};</pre>
+
+<ol>
+ <li>Le bloc extérieur effectue un test de détection de fonctionnalité pour s'assurer que les service workers sont supportés avant d'essayer d'en enregistrer un.</li>
+ <li>Ensuite, la fonction {{domxref("ServiceWorkerContainer.register()") }} est utilisée pour enregistrer le service worker de ce site, qui est juste un fichier JavaScript présent au sein de notre application (à noter qu'il s'agit de l'URL relative du fichier par rapport à l'origine, et non seulement le fichier JS qui le référence.)</li>
+ <li>Le paramètre <code>scope</code> est optionnel, et peut être utilisé pour spécifier le sous-ensemble du contenu qui doit être soumis au contrôle du service worker. Dans ce cas, on a spécifié '<code>/sw-test/'</code>, ce qui signifie tous les contenus présents sous l'origine de l'application. S'il n'est pas précisé, il correspondra de toute façon par défaut à cette valeur; il a été explicitement spécifié ici à titre d'illustration.</li>
+ <li>La fonction <code>.then()</code> de la promesse est utilisée pour chaîner un traitement en cas de succès à la structure de la promesse. Lorsque la promesse est résolue avec succès, le code qu'elle contient est exécuté.</li>
+ <li>Finalement, une fonction <code>.catch()</code> est chaînée à la fin, qui s'exécutera si la promesse est rejetée.</li>
+</ol>
+
+<p>A ce stade un service worker est enregistré, qui s'exécute dans le contexte d'un worker, et n'a donc aucun accès au DOM. Le code s'exécute ainsi dans le service worker, extérieurement aux pages normales dont il contrôle le chargement.<br>
+ <br>
+ Un seul service worker peut contrôler de nombreuses pages. Chaque fois qu'une page au sein du scope est chargée, le service worker est installé et opère sur la page. Attention, il faut faire un usage prudent des variables globales dans le script du service worker : chaque page ne dispose pas de son propre et unique worker.</p>
+
+<div class="note">
+<p><strong>Remarque </strong>: un service worker fonctionne comme un serveur proxy, permettant de modifier les requêtes et les réponses, de les remplacer par des éléments de son propre cache, et bien plus.</p>
+</div>
+
+<div class="note">
+<p><strong>Remarque </strong>: une chose importante à savoir au sujet des service workers est que si la détection de fonctionnalité est utilisée comme ci-dessus, les navigateurs qui ne supportent pas les service workers peuvent simplement utiliser l'application de la manière normalement attendue. De plus, si vous utilisez AppCache et SW sur une page, les navigateurs qui ne supportent pas SW mais supportent AppCache l'utiliseront, et les navigateurs qui supportent les deux ignoreront AppCache au profit de SW.</p>
+</div>
+
+<h4 id="Pourquoi_mon_service_worker_échoue_à_senregistrer">Pourquoi mon service worker échoue à s'enregistrer ?</h4>
+
+<p>Ce pourrait être pour les raisons suivantes :</p>
+
+<ol>
+ <li>L'application ne fonctionne pas au travers d'HTTPS</li>
+ <li>Le chemin du fichier du service worker file est syntaxiquement incorrect — il a besoin d'être exprimé relativement à l'origine, et non pas par rapport au répertoire racine. Dans l'exemple, le worker a comme emplacement <code>https://mdn.github.io/sw-test/sw.js</code>, et la racine de l'application est <code>https://mdn.github.io/sw-test/</code>. Mais la syntaxe du chemin s'écrit <code>/sw-test/sw.js</code>, <code>et non /sw.js</code>.</li>
+ <li>Le service worker considéré se trouve sur une origine différente de celle de l'application. Ce qui n'est pas permis.</li>
+</ol>
+
+<h3 id="Installer_et_activer_remplir_le_cache">Installer et activer : remplir le cache</h3>
+
+<p>Après l'enregistrement du service worker, le navigateur tente d'installer puis d'activer le service worker sur la page ou le site.<br>
+ <br>
+ L'événement install est déclenché lorsqu'une installation se termine avec succès. L'événement install est généralement utilisé pour remplir le cache local du navigateur avec les ressources nécessitées pour faire fonctionner l'application en mode déconnecté. A cet effet, la toute nouvelle API de stockage est utilisée — {{domxref("cache")}} — un espace global au niveau du service worker qui permet de stocker les ressources fournies par les réponses, et indexées par leurs requêtes. Cette API fonctionne d'une manière similaire au cache standard du navigateur, mais le cache demeure spécifique au domaine. Il persiste jusqu'à ce qu'il en soit décidé autrement — de nouveau, le contrôle reste total.</p>
+
+<div class="note">
+<p><strong>Remarque </strong>: L'API Cache n'est pas supportée par tous les navigateurs. (Voir la section {{anch("Compatibilité des navigateurs")}} pour plus d'informations.) Pour l'utiliser à l'heure actuelle, on peut envisager un polyfill comme celui fournit par la <a href="https://github.com/Polymer/topeka/blob/master/sw.js">démo Topeka de Google</a>, ou peut-être stocker les ressources dans <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a>.</p>
+</div>
+
+<p>Commençons cette section par l'examen d'un exemple de code — c'est le <a href="https://github.com/mdn/sw-test/blob/gh-pages/sw.js#L1-L18">premier bloc présent dans le 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>
+
+<ol>
+ <li>Un écouteur d'événement <code>install</code> est d'abord ajouté au service worker (d'où le  <code>this</code>), puis une méthode {{domxref("ExtendableEvent.waitUntil()") }} est chaînée à l'événement — cela garantit que le Service Worker ne s'installera pas tant que le code à l'intérieur de <code>waitUntil()</code> n'a pas été exécuté avec succès.</li>
+ <li>A l'intérieur de <code>waitUntil()</code> la méthode <a href="/en-US/docs/Web/API/CacheStorage/open"><code>caches.open()</code></a> est utilisée pour créer un nouveau cache appelé <code>v1</code>, ce qui constitue la version 1 du cache de ressources de notre site. Cette fonction retourne une promesse lorsque le cache est créé; une fois résolue, est appelée une fonction qui appelle elle-même <code>addAll()</code> sur le cache créé, avec pour paramètre un tableau d'URLs relatives à l'origine correspondant aux ressources à mettre en cache.</li>
+ <li>Si la promesse est rejetée, l'installation échoue, et le worker ne fait rien de plus. Le code peut être alors corrigé et l'opération retentée la prochaine fois que l'enregistrement survient.</li>
+ <li>Après une installation couronnée de succès, le service worker est activé. Cela ne fait pas une grande différence  la première fois que le service worker est installé/activé, mais cela fait plus sens lorsque le service worker est mis à jour (voir la section {{anch("Updating your service worker") }} plus bas.)</li>
+</ol>
+
+<div class="note">
+<p><strong>Remarque </strong>: <a href="/fr/docs/Web/API/Web_Storage_API">localStorage</a> fonctionne de la même façon que le cache du service worker, mais de manière synchrone, et il n'est donc pas autorisé dans les service workers.</p>
+</div>
+
+<div class="note">
+<p><strong>Remarque </strong>: <a href="/fr/docs/Web/API/API_IndexedDB">IndexedDB</a> peut être utilisé dans un service worker pour le stockage des donnés si nécessaire.</p>
+</div>
+
+<h3 id="Réponses_personnalisées_aux_requêtes">Réponses personnalisées aux requêtes</h3>
+
+<p>Une fois que les ressources du site sont mise en cache, les service workers doivent savoir quoi faire de ce contenu en cache. L'événement <code>fetch</code> permet de gérer cela facilement.</p>
+
+<p>Un événement <code>fetch</code> se déclenche à chaque fois qu'une ressource contrôlée par un service worker est retournée, ce qui inclut les documents à l'intérieur du contour spécifié, et toute ressource référencée dans ces documents (par exemple <code>si index.html</code> effectue une requête vers un autre domaine pour l'insertion d'une image, cela se fait encore au travers de son service worker.)</p>
+
+<p>On peut attacher un écouteur de l'événement <code>fetch</code> au service worker, puis appeler la méthode <code>respondWith()</code> sur l'événement pour détourner les réponses HTTP et les mettre à jour en leur jetant un sort particulier.</p>
+
+<pre class="brush: js notranslate">this.addEventListener('fetch', function(event) {
+  event.respondWith(
+    // la magie opère ici
+  );
+});</pre>
+
+<p>On peut déjà simplement répondre avec la ressource en cache dont l'url correspond à celle de la requête réseau, dans chaque cas :</p>
+
+<pre class="brush: js notranslate">this.addEventListener('fetch', function(event) {
+  event.respondWith(
+    caches.match(event.request)
+  );
+});</pre>
+
+<p><code>caches.match(event.request)</code> permet de mettre en correspondance chaque ressource demandée sur le réseau avec la ressource équivalente en cache, si elle se trouve être disponible. La comparaison est effectuée via l'url et diverses en-têtes, comme habituellement avec des requêtes HTTP normales.</p>
+
+<p>Voici quelques autres options disponibles pour que la magie opère (voir la <a href="/fr/docs/Web/API/Fetch_API">documentation de l'API Fetch </a>pour plus d'informations sur les objets {{domxref("Request")}} et {{domxref("Response")}}.)</p>
+
+<ol>
+ <li>
+  <p>Le constructeur <code>{{domxref("Response.Response","Response()")}}</code> permet de créer une réponse personnalisée. Dans cet exemple, une chaîne de caractères est simplement retournée :</p>
+
+  <pre class="brush: js notranslate">new Response('Hello from your friendly neighbourhood service worker!');</pre>
+ </li>
+ <li>
+  <p>La <code>Response</code> plus complexe ci-dessous montre qu'il est possible de passer optionnellement un ensemble d'en-têtes avec la réponse, émulant ainsi des en-têtes de réponse HTTP standards. Ici, on signale au navigateur quel est le type de contenu de notre réponse artificielle :</p>
+
+  <pre class="brush: js notranslate">new Response('&lt;p&gt;Hello from your friendly neighbourhood service worker!&lt;/p&gt;', {
+  headers: { 'Content-Type': 'text/html' }
+})</pre>
+ </li>
+ <li>
+  <p>Si une correspondance n'est pas trouvée en cache, on peut indiquer simplement au navigateur d'effectuer ({{domxref("GlobalFetch.fetch","fetch")}}) la requête réseau par défaut pour cette ressource, afin de récupérer cette nouvelle ressource sur le réseau si disponible :</p>
+
+  <pre class="brush: js notranslate">fetch(event.request)</pre>
+ </li>
+ <li>
+  <p>Si une correspondance n'est pas trouvée en cache et que le réseau n'est pas disponible, on peut alors faire correspondre la requête avec une page de rechange par défaut en guise de réponse en utilisant {{domxref("CacheStorage.match","match()")}}, comme suit :</p>
+
+  <pre class="brush: js notranslate">caches.match('/fallback.html');</pre>
+ </li>
+ <li>
+  <p>On peut récupérer beaucoup d'informations à propos de chaque requête en interrogeant les paramètres de l'objet {{domxref("Request")}} retourné par {{domxref("FetchEvent")}} :</p>
+
+  <pre class="brush: js notranslate">event.request.url
+event.request.method
+event.request.headers
+event.request.body</pre>
+ </li>
+</ol>
+
+<h2 id="Récupérer_des_requêtes_en_erreur">Récupérer des requêtes en erreur</h2>
+
+<p>On vient de voir que <code>caches.match(event.request)</code> est important lorsqu'il y a correspondance avec le cache du service worker, mais qu'en est-il des cas où rien ne correspond ? Si aucune sorte de gestionnaire d'erreur n'est fourni, la promesse est rejetée et une erreur réseau est retournée lorsqu'aucune correspondance n'est trouvée.</p>
+
+<p>Heureusement, la structure des service workers qui repose sur les promesses rend trivial la gestion des alternatives à une situation de succès. On pourrait faire ceci :</p>
+
+<pre class="brush: js notranslate">this.addEventListener('fetch', function(event) {
+  event.respondWith(
+    caches.match(event.request).catch(function() {
+      return fetch(event.request);
+    })
+  );
+});</pre>
+
+<p>Si la promesse est rejetée, la fonction <code>catch()</code> retourne à la place la requête réseau par défaut, ce qui signifie que si le réseau est disponible la ressource sera chargée à partir du serveur.</p>
+
+<p>Plus malin encore, on pourrait non seulement récupérer la ressource à partir du serveur, mais aussi la sauvegarder dans le cache afin que les requêtes ultérieures pour cette ressource puissent être disponibles aussi en mode déconnecté. Cela signifierait que toute image supplémentaire ajoutée à la galerie Star Wars pourrait être récupérée par l'application et mise en cache. Le code suivant illustre ce mécanisme :</p>
+
+<pre class="brush: js notranslate">this.addEventListener('fetch', function(event) {
+  event.respondWith(
+    caches.match(event.request).catch(function() {
+      return fetch(event.request).then(function(response) {
+        return caches.open('v1').then(function(cache) {
+          cache.put(event.request, response.clone());
+          return response;
+        });
+      });
+    })
+  );
+});</pre>
+
+<p>Ici on retourne la requête réseau par défaut au moyen de <code>return fetch(event.request)</code>, qui retourne lui-même une promesse. Lorsque cette promesse est résolue, on exécute une fonction qui sollicite le cache en utilisant <code>caches.open('v1')</code>; une promesse est de nouveau retournée. Lorsque cette promesse est résolue, <code>cache.put()</code> est utilisée pour ajouter la ressource au cache. La ressource est récupérée à partir de <code>event.request</code>, et la réponse est alors clonée avec <code>response.clone()</code> et ajoutée au cache. Le clone est placé dans le cache, et la réponse originale est retournée au navigateur et délivrée à la page qui la requiert.</p>
+
+<p>Pourquoi un clone ? Il se trouve que les flux de requête et de réponse peuvent seulement être lus une fois.  Afin de retourner la réponse au navigateur et de la mettre en cache, elle doit être clonée. Aussi, l'original est retourné au navigateur tandis que le clone est envoyé dans le cache. Ils sont chacun lus une seule fois.</p>
+
+<p>Le dernier problème qui demeure alors est l'échec de la requête au cas où elle n'a aucune correspondance dans le cache et que le réseau n'est pas disponible. Fournir un document de rechange par défaut permet quoiqu'il arrive, à l'utilisateur de récupérer quelque chose :</p>
+
+<pre class="brush: js notranslate">this.addEventListener('fetch', function(event) {
+  event.respondWith(
+    caches.match(event.request).catch(function() {
+      return fetch(event.request).then(function(response) {
+        return caches.open('v1').then(function(cache) {
+          cache.put(event.request, response.clone());
+          return response;
+        });
+      });
+    }).catch(function() {
+      return caches.match('/sw-test/gallery/myLittleVader.jpg');
+    })
+  );
+});</pre>
+
+<p>Une image de rechange a été choisie parce que les seules mises à jour susceptibles d'échouer sont les nouvelles images, puisque tous les autres éléments dépendent de l'installation comme vu précédemment dans la description de l'écouteur de l'événement <code>install</code>.</p>
+
+<h2 id="Suggestion_damélioration_dun_modèle_de_code">Suggestion d'amélioration d'un modèle de code</h2>
+
+<p>Ce code utilise un chaînage de promesses plus standard et retourne la réponse au document sans avoir à attendre que <code>caches.open()</code> soit résolue :</p>
+
+<pre class="brush: js notranslate">this.addEventListener('fetch', function(event) {
+  var response;
+  event.respondWith(caches.match(event.request).catch(function() {
+    return fetch(event.request);
+  }).then(function(r) {
+    response = r;
+    caches.open('v1').then(function(cache) {
+      cache.put(event.request, response);
+    });
+    return response.clone();
+  }).catch(function() {
+    return caches.match('/sw-test/gallery/myLittleVader.jpg');
+  }));
+});</pre>
+
+<h2 id="Mettre_à_jour_le_service_worker"><a id="Updating your service worker" name="Updating your service worker">Mettre à jour le service worker</a></h2>
+
+<p>Si le service worker a été précédemment installé, et qu'une nouvelle version du worker est disponible au chargement ou au rafraîchissement de la page, la nouvelle version est installée en arrière-plan, mais pas encore activée. Elle ne sera activé que lorsqu'il n'y aura plus aucune page chargée qui utilise encore l'ancien service worker. Dès lors qu'il n'y a plus de telles pages encore chargées, le nouveau service worker est activé.</p>
+
+<p>On souhaite mettre à jour l'écouteur d'événement <code>install</code> dans le nouveau service worker de la façon suivante (à noter le nouveau numéro de version) :</p>
+
+<pre class="brush: js notranslate">this.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v2').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',
+
+             …
+
+              // include other new resources for the new version...
+      ]);
+    });
+  );
+});</pre>
+
+<p>Tandis que la mise à jour se produit, la version précédente est encore en charge de récupérer des ressources. La nouvelle version est installée en arrière-plan. Le nouveau cache se nomme v2, et ainsi ne perturbe en rien le précédent cache nommé v1.</p>
+
+<p>Lorsque plus aucune page n'utilise la version actuelle, le nouveau worker est activé et prend en charge les requêtes.</p>
+
+<h3 id="Supprimer_les_anciens_caches">Supprimer les anciens caches</h3>
+
+<p>Il existe un événement <code>activate</code>. Il est généralement utilisé pour faire un travail qui aurait interrompu le fonctionnement d'une version précédente alors qu'elle était encore en cours d'utilisation, comme par exemple se débarrasser des anciens caches. Il est aussi utile pour supprimer des données qui ne sont plus nécessaires afin d'éviter de surcharger l'espace disque — chaque navigateur dispose d'une limite physique quant à la capacité de stockage en cache dont le service worker peut bénéficier. Le navigateur gère au mieux l'espace disque, mais il peut supprimer le stockage du Cache pour une origine. Le navigateur supprimera généralement toutes les données d'une origine ou bien aucune.</p>
+
+<p>Les promesses passées à <code>waitUntil()</code> bloqueront les autres événements jusqu'à réalisation complète, ainsi on a l'assurance que l'opération de nettoyage aura été menée à terme au moment où surviendra le premier événement <code>fetch</code> du nouveau cache.</p>
+
+<pre class="brush: js notranslate">this.addEventListener('activate', function(event) {
+  var cacheWhitelist = ['v2'];
+
+  event.waitUntil(
+    caches.keys().then(function(keyList) {
+      return Promise.all(keyList.map(function(key) {
+        if (cacheWhitelist.indexOf(key) === -1) {
+          return caches.delete(key);
+        }
+      }));
+    })
+  );
+});</pre>
+
+<h2 id="Outils_de_développement">Outils de développement</h2>
+
+<p>Chrome dispose de <code>chrome://inspect/#service-workers</code>, qui montre l'activité du service worker courant et le stockage sur l'appareil, et <code>chrome://serviceworker-internals</code>, qui offre plus de détails et permet de démarrer/arrêter/déboguer le processus du worker. A l'avenir, des modes dégradé/déconnecté seront ajoutés pour simuler des connexions mauvaises ou inexistantes, ce qui sera une bonne chose.</p>
+
+<p>Firefox a aussi commencé à implanter quelques outils utiles concernant les service workers :</p>
+
+<ul>
+ <li>Consulter <a>about:serviceworkers</a> pour voir quels SWs sont enregistrés et les mettre à jour ou les supprimer.</li>
+ <li>Lors de tests, il est possible de contourner la restriction HTTPS en cochant l'option "Activer les Service Workers via HTTP (lorsque la boîte à outils est ouverte)" dans les options des outils de développement de Firefox (la roue dentée dans le menu.)</li>
+</ul>
+
+<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('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>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{ CompatGeckoDesktop("33.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>24</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a></li>
+ <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li>
+</ul>
diff --git a/files/fr/web/api/serviceworker/index.html b/files/fr/web/api/serviceworker/index.html
new file mode 100644
index 0000000000..4a1aed9b56
--- /dev/null
+++ b/files/fr/web/api/serviceworker/index.html
@@ -0,0 +1,114 @@
+---
+title: ServiceWorker
+slug: Web/API/ServiceWorker
+tags:
+  - API
+  - Interface
+  - Reference
+  - Service Workers
+  - ServiceWorker
+  - Workers
+  - hors-ligne
+translation_of: Web/API/ServiceWorker
+---
+<div>{{APIRef("Service Workers API")}}</div>
+
+<p><span class="seoSummary">L'interface <strong><code>ServiceWorker</code></strong> de l'<a href="/en-US/docs/Web/API/ServiceWorker_API">API ServiceWorker</a> met à disposition une référence vers un service worker. Plusieurs  {{glossary("browsing context", "contextes de navigations")}} (par exemple une page, un <em>worker</em>, etc.) peuvent être associés au même service worker, chacun à travers un unique objet <code>ServiceWorker</code>.</span></p>
+
+<p>Un objet <code>ServiceWorker</code> est disponible dans les propriétés  {{domxref("ServiceWorkerRegistration.active")}} et {{domxref("ServiceWorkerContainer.controller")}} — c'est un service worker qui a été activé et qui contrôle la page (ce service worker a été bien enregistré, et la page contrôlée a été rechargée).</p>
+
+<p>L'interface <code>ServiceWorker</code> est distribuée à travers différents évènements de son cycle de vie — <code>install</code> et <code>activate</code> — et d'utilisation, comme <code>fetch</code>. Un objet <code style="font-style: normal; font-weight: normal; line-height: 1.5;">ServiceWorker</code> a un état associé <span style="line-height: 1.5;">{{domxref("ServiceWorker.state")}}, lié à son cycle de vie.</span></p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>L'interface <code>ServiceWorker</code> hérite des propriétés de son parent, le {{domxref("Worker")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("ServiceWorker.scriptURL")}} {{readonlyinline}}</dt>
+ <dd>Retourne la <code>scriptURL</code> sérialisée du <code>ServiceWorker</code>, définie comme une partie du {{domxref("ServiceWorkerRegistration")}}. Cette URL doit avoir la même origine que le document qui enregistre le  <code>ServiceWorker</code>.</dd>
+ <dt>{{domxref("ServiceWorker.state")}} {{readonlyinline}}</dt>
+ <dd>Retourne le status du service worker. Il retourne l'une des valeurs suivantes : <code>installing</code>, <code>installed,</code> <code>activating</code>, <code>activated</code>, or <code>redundant</code>.</dd>
+</dl>
+
+<h3 id="Gestionnaires_dévènements">Gestionnaires d'évènements</h3>
+
+<dl>
+ <dt>{{domxref("ServiceWorker.onstatechange")}} {{readonlyinline}}</dt>
+ <dd>Une propriété {{domxref("EventListener")}} est appelée quand un évènement de type <code>statechange</code> est déclenché; c'est le cas dès que le {{domxref("ServiceWorker.state")}} change.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p>L'interface du <em><code>ServiceWorker</code> hérite des méthodes de son parent, {{domxref("Worker")}}, avec l'exception de {{domxref("Worker.terminate")}}, qui ne doit pas être accessible depuis le service worker.</em></p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Ce fragment de code provient d'<a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/registration-events/index.html">un exemple d'enregistrement d'évènement pour le service worker</a> (<a href="https://googlechrome.github.io/samples/service-worker/registration-events/">démo en direct</a>). Le code écoute tout changement du {{domxref("ServiceWorker.state")}} et retourne sa valeur.</p>
+
+<pre class="brush: js notranslate">if ('serviceWorker' in navigator) {
+  navigator.serviceWorker
+    .register('service-worker.js', {
+      scope: './'
+    })
+    .then(({ installing, waiting, active }) =&gt; {
+      let serviceWorker
+      if (installing) {
+        serviceWorker = installing
+        document.querySelector('#kind').textContent = 'installé'
+      } else if (waiting) {
+        serviceWorker = waiting
+        document.querySelector('#kind').textContent = 'en attente'
+      } else if (active) {
+        serviceWorker = active
+        document.querySelector('#kind').textContent = 'actif'
+      }
+      if (serviceWorker) {
+        // logState(serviceWorker.state);
+        serviceWorker.addEventListener('statechange', (e) =&gt; {
+          // logState(e.target.state);
+        })
+      }
+    })
+    .catch((error) =&gt; {
+      // L'enregistrement s'est mal déroulé. Le fichier service-worker.js
+      // est peut-être indisponible ou contient une erreur.
+    })
+} else {
+  // Le navigateur ne supporte pas les service workers.
+}</pre>
+
+<h2 id="Spé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('Service Workers', '#service-worker-obj', 'ServiceWorker')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.ServiceWorker")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://serviceworke.rs">ServiceWorker Cookbook</a></li>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li>
+ <li><a href="https://github.com/mdn/sw-test">Service workers basic code example</a></li>
+ <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li>
+ <li>{{jsxref("Promise")}}</li>
+ <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li>
+</ul>
diff --git a/files/fr/web/api/serviceworker/onstatechange/index.html b/files/fr/web/api/serviceworker/onstatechange/index.html
new file mode 100644
index 0000000000..ae7d533316
--- /dev/null
+++ b/files/fr/web/api/serviceworker/onstatechange/index.html
@@ -0,0 +1,125 @@
+---
+title: ServiceWorker.onstatechange
+slug: Web/API/ServiceWorker/onstatechange
+tags:
+  - API
+  - Propriété
+  - Reference
+translation_of: Web/API/ServiceWorker/onstatechange
+---
+<div>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</div>
+
+<p>Une propriété {{domxref("EventListener")}} appelée quand un évenement de type <code>statechange</code> est déclenché; c'est le cas dès que le {{domxref("ServiceWorker.state")}} change.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">ServiceWorker.onstatechange = function(statechangeevent) { ... }
+ServiceWorker.addEventListener('statechange', function(statechangeevent) { ... } )</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<p>Ce fragment de code présente <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/registration-events/index.html">un exemple d'enregistrement d'évenements pour le service worker</a> (<a href="https://googlechrome.github.io/samples/service-worker/registration-events/">démo live</a>). Le code écoute pour tout changement du {{domxref("ServiceWorker.state")}} et retourne sa valeur.</p>
+
+<pre class="brush: js">var serviceWorker;
+if (registration.installing) {
+  serviceWorker = registration.installing;
+  document.querySelector('#kind').textContent = 'installé';
+} else if (registration.waiting) {
+  serviceWorker = registration.waiting;
+  document.querySelector('#kind').textContent = 'en attente';
+} else if (registration.active) {
+  serviceWorker = registration.active;
+  document.querySelector('#kind').textContent = 'actif';
+}
+
+if (serviceWorker) {
+  logState(serviceWorker.state);
+  serviceWorker.addEventListener('statechange', function(e) {
+  logState(e.target.state);
+  });
+}</pre>
+
+<p>Notez que quand l'évenement <code>statechange</code> est déclenché, la référence du service worker peut avoir changée. Par exemple :</p>
+
+<pre class="brush: js">navigator.serviceWorker.register(..).then(function(swr) {
+  swr.installing.state == "installé"
+  swr.installing.onstatechange = function() {
+    swr.installing == null;
+    // Ici, swr.waiting OU swr.active peuvent valoir true. Parce que l'évènement
+    // statechange est mis en queue, pendant que le worker sous jacent est peut être en
+    // état d'attente et sera immédiatement activé si possible.
+  }
+})</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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#service-worker-onstatechange-attribute', 'ServiceWorker.onstatechange')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition intiale</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>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support Basic</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{ CompatGeckoDesktop("44.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>24</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support basic</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("44.0") }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(40.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fr/web/api/serviceworkercontainer/getregistration/index.html b/files/fr/web/api/serviceworkercontainer/getregistration/index.html
new file mode 100644
index 0000000000..131b781087
--- /dev/null
+++ b/files/fr/web/api/serviceworkercontainer/getregistration/index.html
@@ -0,0 +1,57 @@
+---
+title: ServiceWorkerContainer.getRegistration()
+slug: Web/API/ServiceWorkerContainer/getRegistration
+translation_of: Web/API/ServiceWorkerContainer/getRegistration
+---
+<p>{{APIRef("Service Workers API")}}</p>
+
+<p>La méthode <strong><code>getRegistration()</code></strong> de l'interface {{domxref("ServiceWorkerContainer")}} fournis un objet {{domxref("ServiceWorkerRegistration")}} dont la porté inclue l'URL du document. Cette méthode retourne une {{jsxref("Promise")}} qui se résout avec un {{domxref("ServiceWorkerRegistration")}} ou <code>undefined</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><em>serviceWorkerContainer</em>.getRegistration(<em>scope</em>).then(function(<em>serviceWorkerRegistration</em>) { ... });</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>scope</code> {{optional_inline}}</dt>
+ <dd>Un identifiant unique pour l'enregistrement du service worker que vous voulez récupérer. L'URL de porté de l'enregistrement . C'est souvent une URL relative.</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Une {{domxref("Promise")}} qui est résolue avec un objet {{domxref("ServiceWorkerRegistration")}} ou <code>undefined</code>.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js notranslate">navigator.serviceWorker.getRegistration('/app').then(function(registration) {
+  if(registration){
+    document.querySelector('#status').textContent = 'ServiceWorkerRegistration found.';
+  }
+});
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statuts</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#dom-serviceworkercontainer-getregistration', 'ServiceWorkerContainer: getRegistration')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+
+
+<p>{{Compat("api.ServiceWorkerContainer.getRegistration")}}</p>
+</div>
diff --git a/files/fr/web/api/serviceworkercontainer/index.html b/files/fr/web/api/serviceworkercontainer/index.html
new file mode 100644
index 0000000000..cd759571e6
--- /dev/null
+++ b/files/fr/web/api/serviceworkercontainer/index.html
@@ -0,0 +1,149 @@
+---
+title: ServiceWorkerContainer
+slug: Web/API/ServiceWorkerContainer
+translation_of: Web/API/ServiceWorkerContainer
+---
+<p>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</p>
+
+<p>L’interface <code>ServiceWorkerContainer</code> de l’<a href="/fr/docs/Web/API/ServiceWorker_API">API ServiceWorker</a> fournit un objet représentant le service worker comme une unité globale de l’écosystème réseau, incluant des fonctionnalités pour enregistrer, désenregistrer et mettre à jour des services workers, et accéder à l’état des services workers et de leurs enregistrements.</p>
+
+<p>Parmi le plus important, cette interface expose la méthode {{domxref("ServiceWorkerContainer.register", "ServiceWorkerContainer.register(scriptURL, scope[, base])")}} utilisée pour enregistrer les services workers, et la propriété {{domxref("ServiceWorkerContainer.controller")}} utilisée pour déterminer si oui ou non la page courante est activement conrôlée.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("ServiceWorkerContainer.controller")}} {{readonlyinline}}</dt>
+ <dd>Retourne un objet {{domxref("ServiceWorker")}} si son état est <code>activated</code> (le même objet retourné par {{domxref("ServiceWorkerRegistration.active")}}). Cette propriété retourne <code style="font-style: normal;">null</code> si la requête est un rechargement forcé (<em>Majuscule</em> + rechargement) ou si il n'y a pas de worker actif.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("ServiceWorkerContainer.ready")}} {{readonlyinline}}</dt>
+ <dd>Détermine si oui ou non un service worker est prêt à contrôler la page. Cette propriété retourne une {{jsxref("Promise")}} qui ne sera jamais rejetée, et se résoudra en un {{domxref("ServiceWorkerRegistration")}} avec un worker en état {{domxref("ServiceWorkerRegistration.active")}}.</dd>
+</dl>
+
+<h3 id="Gestionnaires_d'événement">Gestionnaires d'événement</h3>
+
+<dl>
+ <dt>{{domxref("ServiceWorkerContainer.oncontrollerchange")}}</dt>
+ <dd>Un gestionnaire d’événement lancé quand un événement {{Event("controllerchange")}} se produit — quand le {{domxref("ServiceWorkerRegistration")}} associé au document ajoute un nouveau worker en état {{domxref("ServiceWorkerRegistration.active")}}.</dd>
+ <dt>{{domxref("ServiceWorkerContainer.onerror")}}</dt>
+ <dd>Un gestionnaire d’événement lancé quand un événement {{Event("error")}} se produit dans le service worker associé.</dd>
+ <dt>{{domxref("ServiceWorkerContainer.onmessage")}}</dt>
+ <dd>Un gestionnaire d’événement lancé quand un événement {{Event("message")}} se produit — quand des messages entrants sont reçus par l’objet {{domxref("ServiceWorkerContainer")}} (e.g. par un appel à {{domxref("MessagePort.postMessage()")}}.)</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("ServiceWorkerContainer.register", "ServiceWorkerContainer.register()")}} </dt>
+ <dd>Crée ou met à jour un {{domxref("ServiceWorkerRegistration")}} pour un <code>scriptURL</code> donné.</dd>
+ <dt>{{domxref("ServiceWorkerContainer.getRegistration()")}}</dt>
+ <dd>Récupère un objet {{domxref("ServiceWorkerRegistration")}} dont l’URL de la portée correspond à l’URL du document fourni.  Si la méthode ne peut retourner un {{domxref("ServiceWorkerRegistration")}}, elle retourne une <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" style="text-decoration: underline;" title="The Promise object is used for deferred and asynchronous computations. A Promise is in one of the three states:"><code>Promise</code></a>. </dd>
+ <dt>{{domxref("ServiceWorkerContainer.getRegistrations()")}}</dt>
+ <dd>Retourne tous les  {{domxref("ServiceWorkerRegistration")}} associés à un <code>ServiceWorkerContainer</code> dans un tableau. Si la méthode ne peut retourner les {{domxref("ServiceWorkerRegistration")}}, elle retourne une <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" style="text-decoration: underline;" title="The Promise object is used for deferred and asynchronous computations. A Promise is in one of the three states:"><code>Promise</code></a>. </dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Cet extrait de code provient de <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/fallback-response/index.html#L126">exemple service worker fallback-response</a> (voir <a href="http://googlechrome.github.io/samples/service-worker/fallback-response/">fallback-response live</a>). Le code test si le navigateur supporte les services workers. Alors le code enregistre le service worker et détermine si la page est activement contrôlée par le service worker. Si elle ne l’est pas, il invite l’utilisateur à recharger la page pour permettre au service worker de prendre le contrôle. Ce code indique aussi les échecs d’enregistrement.</p>
+
+<pre class="brush: js">if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('service-worker.js', {scope: './'}).then(function() {
+    if (navigator.serviceWorker.controller) {
+      document.querySelector('#status').textContent = 'The service worker is currently handling network operations.';
+      showRequestButtons();
+    } else {
+      document.querySelector('#status').textContent = 'Please reload this page to allow the service worker to handle network operations.';
+    }
+  }).catch(function(error) {
+    document.querySelector('#status').textContent = error;
+  });
+} else {
+  var aElement = document.createElement('a');
+  aElement.href = 'http://www.chromium.org/blink/serviceworker/service-worker-faq';
+  aElement.textContent = 'unavailable';
+  document.querySelector('#status').appendChild(aElement);
+}</pre>
+
+<h2 id="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">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#service-worker-container', 'ServiceWorkerContainer')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalités</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{ CompatGeckoDesktop("44.0") }}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>24</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoMobile("44.0") }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Les service workers (et le <a href="/en-US/docs/Web/API/Push_API">Push</a>) ont étés désactivé dans <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 and 52 Extended Support Releases</a> (ESR.)</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Utiliser les Service Workers</a></li>
+ <li><a class="external external-icon" href="https://github.com/mdn/sw-test">Service workers : exemple basique</a></li>
+ <li><a class="external external-icon" href="https://jakearchibald.github.io/isserviceworkerready/">Le ServiceWorker est-il prêt ?</a></li>
+ <li>{{jsxref("Promise")}}</li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/Guide/Performance/Using_web_workers">Utiliser les web workers</a></li>
+</ul>
diff --git a/files/fr/web/api/serviceworkercontainer/register/index.html b/files/fr/web/api/serviceworkercontainer/register/index.html
new file mode 100644
index 0000000000..c254aa2bd4
--- /dev/null
+++ b/files/fr/web/api/serviceworkercontainer/register/index.html
@@ -0,0 +1,137 @@
+---
+title: ServiceWorkerContainer.register()
+slug: Web/API/ServiceWorkerContainer/register
+tags:
+  - API
+  - Méthode
+  - Reference
+  - Service Workers
+  - Service worker API
+  - ServiceWorker
+  - ServicerWorkerContainer
+  - register
+translation_of: Web/API/ServiceWorkerContainer/register
+---
+<div>{{APIRef("Service Workers API")}}</div>
+
+<p><span class="seoSummary">La méthode <strong><code>register()</code></strong> de l'interface {{domxref("ServiceWorkerContainer")}} crée ou met à jour un {{domxref("ServiceWorkerRegistration")}} pour la <code>scriptURL</code> donnée.</span></p>
+
+<p>En cas de succès, un <code>ServiceWorkerRegistration</code> attache la <code>scriptURL</code> fournie à une portée, qui sera utilisé ensuite pour la correspondance de navigation. Vous pouvez appeler cette méthode en toutes circonstances depuis la page contrôlée. C'est-à-dire, vous <span class="tlid-translation translation" lang="fr"><span title="">n'avez pas besoin de vérifier </span></span><span class="tlid-translation translation" lang="fr"><span title="">si </span></span>un enregistrement existe déjà.</p>
+
+<p>Il y a une confusion fréquente autour de la signification et de l'utilisation de la portée. Puisque qu'un <code>ServiceWorker</code> ne peut pas avoir une portée plus large que son propre emplacement, utilisez uniquement l'option de la portée lorsque vous avez besoin d'une portée plus étroite que la valeur par défaut.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><em>serviceWorkerContainer</em>.register(<em>scriptURL</em>, <em>options</em>)
+  .then(function(<em>serviceWorkerRegistration</em>) { ... })</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>scriptURL</code></dt>
+ <dd>L' URL du script contenant le <code>ServiceWorker</code>. Le fichier qui a enregistré le <code>ServiceWorker</code> doit avoir un <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types#JavaScript_types">JavaScript MIME type</a> valide.</dd>
+ <dt><code>options</code> {{optional_inline}}</dt>
+ <dd>Un objet contenant les options d'<span class="tlid-translation translation" lang="fr"><span title="">enregistrement</span></span>. Les options sont:
+ <ul>
+  <li><code>scope</code>: Un {{domxref("USVString")}} représentant une URL qui définit la portée d'enregistrement d'un <code>ServiceWorker</code>; <span class="tlid-translation translation" lang="fr"><span title="">c'est-à-dire quelle plage d'URL</span></span> un <code>ServiceWorker</code> <span class="tlid-translation translation" lang="fr"><span title="">peut contrôler</span></span>. Il s'agit généralement d'une URL relative. Elle est relative à l'URL de base de l'application. Par défaut, la valeur de la portée de l'<span class="tlid-translation translation" lang="fr"><span title="">enregistrement</span></span> d'un <code>ServiceWorker</code> est limité au répertoire qui contient le script du <code>ServiceWorker</code>. Consultez la section <a href="#Exemples">Exemples</a> pour plus d'informations sur son fonctionnement.</li>
+  <li>{{non-standard_inline}} <code>type</code>: Un {{domxref("WorkerType")}}, il prend les valeurs "classic" ou "module". Par défaut, la valeur est fixé à "classic".</li>
+  <li>{{non-standard_inline}} <code>updateViaCache</code>: Un {{domxref("ServiceWorkerUpdateViaCache")}}, il prend les valeurs "imports" ou "all" ou "none". Par défaut, la valeur est fixé à "imports".</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une {{jsxref("Promise")}} <span class="tlid-translation translation" lang="fr"><span title=""> qui se résout avec un objet</span></span> {{domxref("ServiceWorkerRegistration")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Les exemples décrits ici doivent être pris ensemble pour obtenir une meilleure compréhension de comment la portée des <code>ServiceWorker</code> s'applique à une page.</p>
+
+<p>L'exemple suivant utilise la valeur par défaut de la portée (en l'omettant). Le code du <code>ServiceWorker</code> dans ce cas, s'il est inclus dans <code>example.com/index.html</code>, contrôlera <code>example.com/index.html</code>, ainsi que les pages en dessous, comme <code>example.com/product/description.html</code>.</p>
+
+<pre class="brush: js notranslate">if ('serviceWorker' in navigator) {
+  // Register a service worker hosted at the root of the
+  // site using the default scope.
+  navigator.serviceWorker.register('/sw.js').then(
+    (registration) =&gt; {
+      console.log('Service worker registration succeeded:', registration)
+    },
+    /*catch*/ (error) =&gt; {
+      console.log('Service worker registration failed:', error)
+    }
+  )
+} else {
+  console.log('Service workers are not supported.')
+}</pre>
+
+<p>Le code suivant, s'il est inclus dans <code>example.com/index.html</code>, à la racine d'un site, s'appliquerait exactement aux mêmes pages que l'exemple ci-dessus. N'oubliez pas que la portée, lorsqu'elle est incluse, utilise l'emplacement de la page comme base.</p>
+
+<p>Sinon, si ce code était inclus dans une page à <code>example.com/product/description.html</code>, avec le fichier Javascript résidant à <code>example.com/product/sw.js</code>, alors le service worker ne s'appliquerait qu'aux ressources sous <code>example.com /product</code>.</p>
+
+<pre class="brush: js notranslate">if ('serviceWorker' in navigator) {
+  // declaring scope manually
+  navigator.serviceWorker.register('/sw.js', { scope: './' }).then(
+    (registration) =&gt; {
+      console.log('Service worker registration succeeded:', registration)
+    },
+    /*catch*/ (error) =&gt; {
+      console.log('Service worker registration failed:', error)
+    }
+  )
+} else {
+  console.log('Service workers are not supported.')
+}
+</pre>
+
+<p>Il y a une confusion fréquente autour de la signification et de l'utilisation de la portée. Puisque qu'un <code>ServiceWorker</code> ne peut pas avoir une portée plus large que son propre emplacement, utilisez uniquement l'option de la portée lorsque vous avez besoin d'une portée plus étroite que la valeur par défaut.</p>
+
+<p>Le code suivant, s'il est inclus dans <code>example.com/index.html</code>, à la racine d'un site, ne s'appliquerait qu'aux ressources sous <code>example.com/product</code>.</p>
+
+<pre class="brush: js notranslate">if ('serviceWorker' in navigator) {
+  // declaring scope manually
+  navigator.serviceWorker.register('/sw.js', { scope: '/product/' }).then(
+    (registration) =&gt; {
+      console.log('Service worker registration succeeded:', registration)
+    },
+    /*catch*/ (error) =&gt; {
+      console.log('Service worker registration failed:', error)
+    }
+  )
+} else {
+  console.log('Service workers are not supported.')
+}</pre>
+
+<p>Toutefois, les serveurs peuvent supprimer cette restriction en définissant un en-tête <a href="https://w3c.github.io/ServiceWorker/#service-worker-allowed" id="ref-for-service-worker-allowed">Service-Worker-Allowed</a> sur le script du <code>ServiceWorker</code>, et alors vous pouvez spécifier une portée maximale pour ce <code>ServiceWorker</code> au-dessus de l'emplacement du <code>ServiceWorker</code>.</p>
+
+<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>{{SpecName('Service Workers', '#dom-serviceworkercontainer-register', 'ServiceWorkerContainer: register')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.ServiceWorkerContainer.register")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="https://www.w3.org/TR/service-workers/#navigator-service-worker-register">W3.org ServiceWorker Register</a></li>
+ <li><a href="https://w3c.github.io/ServiceWorker/#dom-serviceworkercontainer-register">W3c.github.io ServiceWorker Register</a></li>
+ <li><a href="https://www.w3.org/TR/service-workers/#enumdef-serviceworkerupdateviacache">W3.org option update via cache</a></li>
+ <li><a href="https://html.spec.whatwg.org/multipage/workers.html#workertype">WHATWG.org Worker Type</a></li>
+</ul>
diff --git a/files/fr/web/api/serviceworkerglobalscope/index.html b/files/fr/web/api/serviceworkerglobalscope/index.html
new file mode 100644
index 0000000000..a114ee3ee4
--- /dev/null
+++ b/files/fr/web/api/serviceworkerglobalscope/index.html
@@ -0,0 +1,152 @@
+---
+title: ServiceWorkerGlobalScope
+slug: Web/API/ServiceWorkerGlobalScope
+tags:
+  - API
+  - Interface
+  - NeedsTranslation
+  - Offline
+  - Reference
+  - Service Workers
+  - ServiceWorkerGlobalScope
+  - TopicStub
+translation_of: Web/API/ServiceWorkerGlobalScope
+---
+<div>{{APIRef("Service Workers API")}}</div>
+
+<p>The <strong><code>ServiceWorkerGlobalScope</code></strong> interface of the <a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker API</a> represents the global execution context of a service worker.</p>
+
+<p>Developers should keep in mind that the ServiceWorker state is not persisted across the termination/restart cycle, so each event handler should assume it's being invoked with a bare, default global state.</p>
+
+<p>Once successfully registered, a service worker can and will be terminated when idle to conserve memory and processor power. An active service worker is automatically restarted to respond to events, such as {{domxref("ServiceWorkerGlobalScope.onfetch")}} or {{domxref("ServiceWorkerGlobalScope.onmessage")}}.</p>
+
+<p>Additionally, synchronous requests are not allowed from within a service worker — only asynchronous requests, like those initiated via the {{domxref("GlobalFetch.fetch", "fetch()")}} method, can be used.</p>
+
+<p>This interface inherits from the {{domxref("WorkerGlobalScope")}} interface, and its parent {{domxref("EventTarget")}}, and therefore implements properties from {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, and {{domxref("WindowEventHandlers")}}.</p>
+
+<p>{{InheritanceDiagram(700, 85, 20)}}</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref("ServiceWorkerGlobalScope.caches")}} {{readonlyinline}}</dt>
+ <dd>Contains the {{domxref("CacheStorage")}} object associated with the service worker.</dd>
+ <dt>{{domxref("ServiceWorkerGlobalScope.clients")}} {{readonlyinline}}</dt>
+ <dd>Contains the {{domxref("Clients")}} object associated with the service worker.</dd>
+ <dt>{{domxref("ServiceWorkerGlobalScope.registration")}} {{readonlyinline}}</dt>
+ <dd>Contains the {{domxref("ServiceWorkerRegistration")}} object that represents the service worker's registration.</dd>
+</dl>
+
+<h2 id="Events">Events</h2>
+
+<dl>
+ <dt>{{domxref("ServiceWorkerGlobalScope/activate_event", "activate")}}</dt>
+ <dd>Occurs when a {{domxref("ServiceWorkerRegistration")}} acquires a new {{domxref("ServiceWorkerRegistration.active")}} worker.<br>
+ Also available via the {{domxref("ServiceWorkerGlobalScope.onactivate")}} property.</dd>
+ <dt>{{domxref("ServiceWorkerGlobalScope/contentdelete_event", "contentdelete")}}</dt>
+ <dd>Occurs when an item is removed from the {{domxref("ContentIndex", "Content Index")}}.<br>
+ Also available via the {{domxref("ServiceWorkerGlobalScope.oncontentdelete")}} property.</dd>
+ <dt><code>fetch</code></dt>
+ <dd>Occurs when a {{domxref("GlobalFetch.fetch", "fetch()")}} is called.<br>
+ Also available via the {{domxref("ServiceWorkerGlobalScope.onfetch")}} property.</dd>
+ <dt>{{domxref("ServiceWorkerGlobalScope/install_event", "install")}}</dt>
+ <dd>Occurs when a {{domxref("ServiceWorkerRegistration")}} acquires a new {{domxref("ServiceWorkerRegistration.installing")}} worker.<br>
+ Also available via the {{domxref("ServiceWorkerGlobalScope.oninstall")}} property.</dd>
+ <dt>{{domxref("ServiceWorkerGlobalScope/message_event", "message")}}</dt>
+ <dd>Occurs when incoming messages are received. Controlled pages can use the {{domxref("MessagePort.postMessage()")}} method to send messages to service workers. The service worker can optionally send a response back via the {{domxref("MessagePort")}} exposed in <a href="https://html.spec.whatwg.org/multipage/comms.html#messageport"><code>event.data.port</code></a>, corresponding to the controlled page.<br>
+ Also available via the {{domxref("ServiceWorkerGlobalScope.onmessage")}} property.</dd>
+ <dt>{{domxref("ServiceWorkerGlobalScope/notificationclick_event", "notificationclick")}}</dt>
+ <dd>Occurs when a user clicks on a displayed notification.<br>
+ Also available via the {{domxref("ServiceWorkerGlobalScope.onnotificationclick")}} property.</dd>
+ <dt><code>notificationclose</code></dt>
+ <dd>Occurs — when a user closes a displayed notification.<br>
+ Also available via the {{domxref("ServiceWorkerGlobalScope.onnotificationclose")}} property.</dd>
+ <dt>{{domxref("ServiceWorkerGlobalScope/push_event", "push")}}</dt>
+ <dd>Occurs when a server push notification is received.<br>
+ Also available via the {{domxref("ServiceWorkerGlobalScope.onpush")}} property.</dd>
+ <dt>{{domxref("ServiceWorkerGlobalScope/pushsubscriptionchange_event", "pushsubscriptionchange")}}</dt>
+ <dd>Occurs when a push subscription has been invalidated, or is about to be invalidated (e.g. when a push service sets an expiration time).<br>
+ Also available via the {{domxref("ServiceWorkerGlobalScope.onpushsubscriptionchange")}} property.</dd>
+ <dt><code>sync</code></dt>
+ <dd>Triggered when a call to {{domxref("SyncManager.register")}} is made from a service worker client page. The attempt to sync is made either immediately if the network is available or as soon as the network becomes available.<br>
+ Also available via the {{domxref("ServiceWorkerGlobalScope.onsync")}} property.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("ServiceWorkerGlobalScope.skipWaiting()")}}</dt>
+ <dd>Allows the current service worker registration to progress from waiting to active state while service worker clients are using it.</dd>
+</dl>
+
+<p><code>ServiceWorkerGlobalScope</code> implements {{domxref("WorkerGlobalScope")}} — which implements {{domxref("WindowOrWorkerGlobalScope")}}. Therefore it also has the following property available to it:</p>
+
+<dl>
+ <dt>{{domxref("GlobalFetch.fetch()")}}</dt>
+ <dd>Starts the process of fetching a resource. This returns a promise that resolves to the {{domxref("Response")}} object representing the response to your request. This algorithm is the entry point for the fetch handling handed to the service worker context.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>This code snippet is from the <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/prefetch/service-worker.js">service worker prefetch sample</a> (see <a href="https://googlechrome.github.io/samples/service-worker/prefetch/">prefetch example live</a>.) The {{domxref("ServiceWorkerGlobalScope.onfetch")}} event handler listens for the <code>fetch</code> event. When fired, the code returns a promise that resolves to the first matching request in the {{domxref("Cache")}} object. If no match is found, the code fetches a response from the network.</p>
+
+<p>The code also handles exceptions thrown from the {{domxref("GlobalFetch.fetch", "fetch()")}} operation. Note that an HTTP error response (e.g., 404) will not trigger an exception. It will return a normal response object that has the appropriate error code set.</p>
+
+<pre class="brush: js notranslate">self.addEventListener('fetch', function(event) {
+  console.log('Handling fetch event for', event.request.url);
+
+  event.respondWith(
+    caches.match(event.request).then(function(response) {
+      if (response) {
+        console.log('Found response in cache:', response);
+
+        return response;
+      }
+      console.log('No response found in cache. About to fetch from network...');
+
+      return fetch(event.request).then(function(response) {
+        console.log('Response from network is:', response);
+
+        return response;
+      }, function(error) {
+        console.error('Fetching failed:', error);
+
+        throw error;
+      });
+    })
+  );
+});</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('Service Workers', '#serviceworkerglobalscope-interface', 'ServiceWorkerGlobalScope')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.ServiceWorkerGlobalScope")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li>
+ <li><a class="external external-icon" href="https://github.com/mdn/sw-test">Service workers basic code example</a></li>
+ <li><a class="external external-icon" href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li>
+ <li>{{jsxref("Promise")}}</li>
+</ul>
diff --git a/files/fr/web/api/serviceworkerglobalscope/onnotificationclick/index.html b/files/fr/web/api/serviceworkerglobalscope/onnotificationclick/index.html
new file mode 100644
index 0000000000..d3c2e405b6
--- /dev/null
+++ b/files/fr/web/api/serviceworkerglobalscope/onnotificationclick/index.html
@@ -0,0 +1,77 @@
+---
+title: ServiceWorkerGlobalScope.onnotificationclick
+slug: Web/API/ServiceWorkerGlobalScope/onnotificationclick
+tags:
+  - API
+  - Experimental
+  - Interface
+  - Propriété
+  - Reference
+  - ServiceWorkerGlobalScope
+  - onnotificationclick
+translation_of: Web/API/ServiceWorkerGlobalScope/onnotificationclick
+---
+<p>{{APIRef("Service Workers API")}}</p>
+
+<p><span class="seoSummary">La propriété <strong><code>ServiceWorkerGlobalScope.onnotificationclick</code></strong> est un gestionnaire d'événements appelé chaque fois que l'événement {{Event("notificationclick")}} est envoyé sur l'objet {{domxref ("ServiceWorkerGlobalScope")}}, c'est-à-dire lorsqu'un utilisateur clique sur une notification affichée générée par {{domxref("ServiceWorkerRegistration.showNotification()")}}.</span></p>
+
+<p>Les notifications créées sur le thread principal ou dans un worker qui ne sont pas des service worker utilisant le constructeur {{domxref ("Notification.Notification", "Notification()")}} recevront à la place un événement {{Event("click")}} sur l'objet <code>Notification</code> lui-même.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Essayer de créer une notification dans le {{domxref ("ServiceWorkerGlobalScope")}} en utilisant le constructeur {{domxref ("Notification.Notification", "Notification()")}} générera une erreur.</p>
+</div>
+
+<h2 id="Syntaxe" style="line-height: 30px; font-size: 2.14285714285714rem;">Syntaxe</h2>
+
+<pre class="brush: js notranslate" style="font-size: 14px;">ServiceWorkerGlobalScope.onnotificationclick = function(NotificationEvent) { ... }
+ServiceWorkerGlobalScope.onnotificationclick = (NotificationEvent) =&gt; { ... }
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js notranslate">self.onnotificationclick = (event) =&gt; {
+  console.log('On notification click: ', event.notification.tag)
+  event.notification.close()
+
+  // This looks to see if the current is already open and
+  // focuses if it is
+  event.waitUntil(
+    clients
+      .matchAll({
+        type: 'window'
+      })
+      .then((clientList) =&gt; {
+        for (let i = 0; i &lt; clientList.length; i++) {
+          const client = clientList[i]
+          if (client.url == '/' &amp;&amp; 'focus' in client) return client.focus()
+        }
+        if (clients.openWindow) return clients.openWindow('/')
+      })
+  )
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col"><font face="Open Sans, sans-serif"><span style="font-weight: normal;">Spécification</span></font></th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Notifications','#dom-serviceworkerglobalscope-onnotificationclick','onnotificationclick')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Définition initiale. Cette propriété est spécifiée dans {{domxref ('Notifications_API')}} même si elle fait partie de {{domxref ('ServiceWorkerGlobalScope')}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.ServiceWorkerGlobalScope.onnotificationclick")}}</p>
+</div>
diff --git a/files/fr/web/api/serviceworkerregistration/active/index.html b/files/fr/web/api/serviceworkerregistration/active/index.html
new file mode 100644
index 0000000000..75c2c257a1
--- /dev/null
+++ b/files/fr/web/api/serviceworkerregistration/active/index.html
@@ -0,0 +1,59 @@
+---
+title: ServiceWorkerRegistration.active
+slug: Web/API/ServiceWorkerRegistration/active
+translation_of: Web/API/ServiceWorkerRegistration/active
+---
+<div>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</div>
+
+<p>La propriété <strong><code>active</code></strong> de l’interface {{domxref("ServiceWorkerRegistration")}} retourne un <em>service worker</em> dont le {{domxref("ServiceWorker.state")}} est <code style="font-style: normal;">activating</code> ou <code style="font-style: normal;">activated</code>. Cette propriété est initialement définie à <code style="font-style: normal;">null</code>.</p>
+
+<p>Un <em>worker</em> actif contrôle un {{domxref("ServiceWorkerClient")}} si l’URL du client appartient au domaine de l’inscription (l’option <code>scope</code> définie lorsque {{domxref("ServiceWorkerContainer.register")}} est initialement appelé.)</p>
+
+<div class="note">
+<p><strong>Note</strong> : Cette fonctionnalité est disponible dans les <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax" style="line-height: 30px; font-size: 2.14285714285714rem;">Syntaxe</h2>
+
+<pre class="syntaxbox" style="font-size: 14px;">sw = ServiceWorker.active
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un objet {{domxref("ServiceWorker")}}, si le <em>worker</em> est actuellement dans un état <code>activating</code> ou <code>activated</code>.</p>
+
+<h2 id="Spécifications" style="line-height: 30px; font-size: 2.14285714285714rem;">Spécifications</h2>
+
+<div> </div>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col"><font face="Open Sans, sans-serif"><span style="font-weight: normal;">Spécification</span></font></th>
+   <th scope="col"><font face="Open Sans, sans-serif"><span style="font-weight: normal;">Statut</span></font></th>
+   <th scope="col"><font face="Open Sans, sans-serif"><span style="font-weight: normal;">Commentaire</span></font></th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#service-worker-registration-active-attribute', 'ServiceWorkerRegistration.active')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale.<br>
+     </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">La table de compatibilité dans cette page est générée à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request.</em></div>
+
+<p>{{Compat("api.ServiceWorkerRegistration.active")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Utiliser les Service Workers</a></li>
+ <li><a href="https://github.com/mdn/sw-test">Service workers basic code example</a></li>
+ <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li>
+ <li>{{jsxref("Promise")}}</li>
+ <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Utilisation des web workers</a></li>
+</ul>
diff --git a/files/fr/web/api/serviceworkerregistration/getnotifications/index.html b/files/fr/web/api/serviceworkerregistration/getnotifications/index.html
new file mode 100644
index 0000000000..53f8b915d1
--- /dev/null
+++ b/files/fr/web/api/serviceworkerregistration/getnotifications/index.html
@@ -0,0 +1,74 @@
+---
+title: ServiceWorkerRegistration.getNotifications()
+slug: Web/API/ServiceWorkerRegistration/getNotifications
+tags:
+  - API
+  - API Service worker
+  - Expérimentale
+  - Méthode
+  - Notifications
+  - Reference
+  - Service Workers
+  - ServiceWorkerRegistration
+  - getNotifications
+translation_of: Web/API/ServiceWorkerRegistration/getNotifications
+---
+<div>{{APIRef("Service Workers API")}}</div>
+
+<p><span class="seoSummary">La méthode <strong><code>getNotifications()</code></strong> de l'interface {{domxref ("ServiceWorkerRegistration")}} renvoie une liste des notifications dans l'ordre dans lequel elles ont été créées à partir de l'origine actuelle via l'enregistrement actuel du service worker. Les origines peuvent avoir de nombreuses inscriptions de service worker actives mais de portée différente. Les notifications créées par un service worker sur la même origine ne seront pas disponibles pour les autres services workers actifs sur la même origine.</span></p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><em>s​erviceWorkerRegistration</em>.getNotifications(<em>options</em>)
+.then(function(<em>notificationsList</em>) { ... })</pre>
+
+<h3 id="Paramétres">Paramétres</h3>
+
+<dl>
+ <dt>options {{optional_inline}}</dt>
+ <dd>Un objet contenant des options pour filtrer les notifications renvoyées. Les options disponibles sont:
+ <ul>
+  <li><code>tag</code>: Un {{domxref ("DOMString")}} représentant un tag de notification. Si spécifié, seules les notifications contenant cette balise seront renvoyées.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une {{jsxref ("Promise", "Promesse")}} qui se résout en une liste d'objets {{domxref ("Notification")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js notranslate">navigator.serviceWorker.register('sw.js')
+
+const options = { tag: 'user_alerts' }
+
+navigator.serviceWorker.ready.then((registration) =&gt; {
+  registration.getNotifications(options).then((notifications) =&gt; {
+    // do something with your notifications
+  })
+})
+</pre>
+
+<h2 id="Spé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('Web Notifications', '#dom-serviceworkerregistration-getnotifications', 'ServiceWorkerRegistration.getNotifications()')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.ServiceWorkerRegistration.getNotifications")}}</p>
diff --git a/files/fr/web/api/serviceworkerregistration/index.html b/files/fr/web/api/serviceworkerregistration/index.html
new file mode 100644
index 0000000000..15606c9603
--- /dev/null
+++ b/files/fr/web/api/serviceworkerregistration/index.html
@@ -0,0 +1,150 @@
+---
+title: ServiceWorkerRegistration
+slug: Web/API/ServiceWorkerRegistration
+tags:
+  - API
+  - Interface
+  - NeedsTranslation
+  - Offline
+  - Reference
+  - Service Workers
+  - Service worker API
+  - ServiceWorkerRegistration
+  - TopicStub
+  - Workers
+translation_of: Web/API/ServiceWorkerRegistration
+---
+<div>
+<div>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</div>
+</div>
+
+<p><span class="seoSummary">The <code>ServiceWorkerRegistration</code> interface of the <a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a> represents the service worker registration. You register a service worker to control one or more pages that share the same origin.</span></p>
+
+<p>The lifetime of a service worker registration is beyond that of the <code>ServiceWorkerRegistration</code> objects that represent them within the lifetime of their corresponding service worker clients. The browser maintains a persistent list of active <code>ServiceWorkerRegistration</code> objects.</p>
+
+<div class="note">
+<p><strong>Note</strong>: This feature is available in <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
+</div>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>Also implements properties from its parent interface, </em>{{domxref("EventTarget")}}.</p>
+
+<dl>
+ <dt>{{domxref("ServiceWorkerRegistration.scope")}} {{readonlyinline}}</dt>
+ <dd>Returns a unique identifier for a service worker registration. This must be on the same origin as the document that registers the {{domxref("ServiceWorker")}}.</dd>
+ <dt>{{domxref("ServiceWorkerRegistration.installing")}} <strong style="font-weight: bold;">{{readonlyinline}}</strong></dt>
+ <dd>Returns a service worker whose state is <code>installing</code>. This is initially set to <code>null</code>.</dd>
+ <dt>{{domxref("ServiceWorkerRegistration.waiting")}} <strong style="font-weight: bold;">{{readonlyinline}}</strong></dt>
+ <dd>Returns a service worker whose state is <code>waiting</code>. This is initially set to <code>null</code>.</dd>
+ <dt>{{domxref("ServiceWorkerRegistration.active")}} <strong style="font-weight: bold;">{{readonlyinline}}</strong></dt>
+ <dd>Returns a service worker whose state is either <code>activating</code> or <code>activated</code>. This is initially set to <code>null</code>. An active worker will control a {{domxref("ServiceWorkerClient")}} if the client's URL falls within the scope of the registration (the <code>scope</code> option set when {{domxref("ServiceWorkerContainer.register")}} is first called.)</dd>
+ <dt>{{domxref("ServiceWorkerRegistration.navigationPreload")}} {{readonlyinline}}</dt>
+ <dd>Returns the instance of {{domxref("NavigationPreloadManager")}} associated with the current service worker registration.</dd>
+ <dt>{{domxref("ServiceWorkerRegistration.pushManager")}} {{readonlyinline}}</dt>
+ <dd>Returns a reference to the {{domxref("PushManager")}} interface for managing push subscriptions including subscribing, getting an active subscription, and accessing push permission status.</dd>
+ <dt>{{domxref("ServiceWorkerRegistration.sync")}} <strong style="font-weight: bold; line-height: 19.0909080505371px;">{{non-standard_inline}} </strong>{{readonlyinline}} </dt>
+ <dd>Returns a reference to the {{domxref("SyncManager")}} interface, which manages background synchronization processes.</dd>
+</dl>
+
+<h3 id="Unimplemented_properties">Unimplemented properties</h3>
+
+<dl>
+ <dt>{{domxref("serviceWorkerRegistration.periodicSync")}} {{non-standard_inline}} {{readonlyinline}}</dt>
+ <dd>Returns a reference to the {{domxref("PeriodicSyncManager")}} interface, which manages periodic background synchronization processes. This was mentioned as an idea in the SW explainer at some point, but as yet has not been implemented anywhere.</dd>
+</dl>
+
+<h3 id="Event_handlers">Event handlers</h3>
+
+<dl>
+ <dt>{{domxref("ServiceWorkerRegistration.onupdatefound")}} {{readonlyinline}}</dt>
+ <dd>An <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventListener" title="This method is called whenever an event occurs of the type for which the EventListener interface was registered."><code>EventListener</code></a> property called whenever an event of type <code>updatefound</code> is fired; it is fired any time the {{domxref("ServiceWorkerRegistration.installing")}} property acquires a new service worker.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>Also implements methods from its parent interface, </em>{{domxref("EventTarget")}}.</p>
+
+<dl>
+ <dt>{{domxref("ServiceWorkerRegistration.getNotifications()")}}</dt>
+ <dd>Returns a {{jsxref("Promise")}} that resolves to an array of {{domxref("Notification")}} objects.</dd>
+ <dt>{{domxref("ServiceWorkerRegistration.showNotification()")}}</dt>
+ <dd>Displays the notification with the requested title.</dd>
+ <dt>{{domxref("ServiceWorkerRegistration.update()")}}</dt>
+ <dd>Checks the server for an updated version of the service worker without consulting caches.</dd>
+ <dt>{{domxref("ServiceWorkerRegistration.unregister()")}}</dt>
+ <dd>Unregisters the service worker registration and returns a {{jsxref("Promise")}}. The service worker will finish any ongoing operations before it is unregistered.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>In this example, the code first checks whether the browser supports service workers and if so registers one. Next, it adds and <code>updatefound</code> event in which it uses the service worker registration to listen for further changes to the service worker's state. If the service worker hasn't changed since the last time it was registered, than the <code>updatefound</code> event will not be fired.</p>
+
+<pre class="brush: js">if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('/sw.js')
+  .then(function(registration) {
+    registration.addEventListener('updatefound', function() {
+      // If updatefound is fired, it means that there's
+      // a new service worker being installed.
+      var installingWorker = registration.installing;
+      console.log('A new service worker is being installed:',
+        installingWorker);
+
+      // You can listen for changes to the installing service worker's
+      // state via installingWorker.onstatechange
+    });
+  })
+  .catch(function(error) {
+    console.log('Service worker registration failed:', error);
+  });
+} else {
+  console.log('Service workers are not supported.');
+}</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#service-worker-registration-obj', 'ServiceWorkerRegistration')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Push API', '#widl-ServiceWorkerRegistration-pushManager', 'PushManager')}}</td>
+   <td>{{Spec2('Push API')}}</td>
+   <td>Adds the {{domxref("PushManager","pushManager")}} property.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Notifications')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Adds the {{domxref("ServiceWorkerRegistration.showNotification()","showNotification()")}} method and the {{domxref("ServiceWorkerRegistration.getNotifications()","getNotifications()")}} method.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Background Sync')}}</td>
+   <td>{{Spec2('Background Sync')}}</td>
+   <td>Adds the {{domxref("ServiceWorkerRegistration.sync","sync")}} property.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.ServiceWorkerRegistration")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li>
+ <li><a href="https://github.com/mdn/sw-test">Service workers basic code example</a></li>
+ <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li>
+ <li>{{jsxref("Promise")}}</li>
+ <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li>
+</ul>
diff --git a/files/fr/web/api/serviceworkerregistration/scope/index.html b/files/fr/web/api/serviceworkerregistration/scope/index.html
new file mode 100644
index 0000000000..80f8dea718
--- /dev/null
+++ b/files/fr/web/api/serviceworkerregistration/scope/index.html
@@ -0,0 +1,57 @@
+---
+title: ServiceWorkerRegistration.scope
+slug: Web/API/ServiceWorkerRegistration/scope
+tags:
+  - API
+  - Portée
+  - Propriété
+  - Reference
+  - Service Workers
+  - ServiceWorkerRegistration
+  - scope
+translation_of: Web/API/ServiceWorkerRegistration/scope
+---
+<div>{{APIRef("Service Workers API")}}</div>
+
+<p><span class="seoSummary">La propriété en lecture seule <strong><code>scope</code></strong> de l'interface {{domxref ("ServiceWorkerRegistration")}} renvoie un identifiant unique pour un enregistrement de service worker. Le service worker doit être sur la même origine que le document qui enregistre le {{domxref ("ServiceWorker")}}.</span></p>
+
+<div class="note">
+<p><strong>Note</strong>: Cette fonctionnalité est disponible dans <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><em>serviceWorkerRegistration</em>.scope</pre>
+
+<h2 id="Spé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('Service Workers', '#dom-serviceworkerregistration-scope', 'ServiceWorkerRegistration.scope')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.ServiceWorkerRegistration.scope")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utilisation des Service Workers</a></li>
+ <li><a href="https://github.com/mdn/sw-test">Exemple basique de code pour les Services workers</a></li>
+ <li><a href="https://jakearchibald.github.io/isserviceworkerready/">ServiceWorker est-il prêt?</a></li>
+ <li>{{jsxref("Promise","Promesse")}}</li>
+ <li><a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">Utilisation des web workers</a></li>
+</ul>
diff --git a/files/fr/web/api/serviceworkerregistration/shownotification/index.html b/files/fr/web/api/serviceworkerregistration/shownotification/index.html
new file mode 100644
index 0000000000..fb6a49f819
--- /dev/null
+++ b/files/fr/web/api/serviceworkerregistration/shownotification/index.html
@@ -0,0 +1,108 @@
+---
+title: ServiceWorkerRegistration.showNotification()
+slug: Web/API/ServiceWorkerRegistration/showNotification
+tags:
+  - API
+  - Experimental
+  - Méthode
+  - Reference
+  - Service Workers
+  - ServiceWorker
+  - ServiceWorkerRegistration
+  - showNotification
+translation_of: Web/API/ServiceWorkerRegistration/showNotification
+---
+<p>{{APIRef("Service Workers API")}}</p>
+
+<p><span class="seoSummary">La méthode <strong><code>showNotification()</code></strong> de l'interface {{domxref("ServiceWorkerRegistration")}} crée une notification dans un service worker actif.</span></p>
+
+<div class="note">
+<p><strong>Note</strong>: Cette fonctionnalité est disponible dans les <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><em>​serviceWorkerRegistration</em>.showNotification(<em>title</em>, [<em>options</em>])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>title</code></dt>
+ <dd>Définit un titre pour la notification, qui s'affiche en haut de la fenêtre de notification.</dd>
+ <dt><code>options</code> {{optional_inline}}</dt>
+ <dd>Un objet d'options contenant tous les paramètres personnalisés que vous souhaitez appliquer à la notification. Les options possibles sont:
+ <ul>
+  <li><code>actions</code>: Un tableau de {{domxref ("NotificationAction")}} représentant les actions disponibles pour l'utilisateur lorsque la notification est présentée. Ce sont des options parmi lesquelles l'utilisateur peut choisir pour agir sur l'action dans le contexte de la notification elle-même. Le nom de l'action est envoyé au gestionnaire de notifications du service worker pour lui faire savoir que l'action a été sélectionnée par l'utilisateur. Les membres du tableau doivent être un objet. Il peut contenir les valeurs suivantes:
+   <ul>
+    <li>action: Une {{domxref("DOMString")}}  représentant <span class="tlid-translation translation" lang="fr"><span title="">une action utilisateur à afficher sur la notification</span></span>.</li>
+    <li>title: Une {{domxref("DOMString")}} contenant le texte d'action à montrer à l'utilisateur.</li>
+    <li>icon: Une {{domxref("USVString")}} contenant l'URL d'une icône à afficher avec l'action.</li>
+   </ul>
+   Les réponses appropriées sont construites à l'aide de <code>event.action</code> dans l'événement {{event("notificationclick")}}.</li>
+  <li><code>badge</code>: Un {{domxref ("USVString")}} contenant l'URL de l'image utilisée pour représenter la notification lorsqu'il n'y a pas assez d'espace pour afficher la notification elle-même.</li>
+  <li><code>body</code>: Un {{domxref ("DOMString")}} représentant le corps du texte de la notification, qui est affiché sous le titre.</li>
+  <li><code>data</code>: Données arbitraires que vous souhaitez associer à la notification. Elles peuvent être de n'importe quel type de données.</li>
+  <li><code>dir</code>: La direction dans laquelle afficher la notification. La valeur par défaut est <code>auto</code>, qui adopte simplement le comportement du paramètre de langue du navigateur, mais vous pouvez remplacer ce comportement en définissant les valeurs de <code>ltr</code> et <code>rtl</code> (bien que la plupart des navigateurs semblent ignorer ces paramètres.)</li>
+  <li><code>icon</code>: Une {{domxref ("USVString")}} contenant l'URL d'une icône à afficher dans la notification.</li>
+  <li><code>image</code>: Une {{domxref ("USVString")}} contenant l'URL d'une image à afficher dans la notification.</li>
+  <li><code>lang</code>: La langue de la notification, telle que spécifiée à l'aide d'un {{domxref ("DOMString")}} représentant une <a href="http://www.rfc-editor.org/rfc/bcp/bcp47.txt">balise de langue BCP 47</a>. Consultez la page des <a href="http://www.sitepoint.com/web-foundations/iso-2-letter-language-codes/">codes de langue à 2 lettres ISO</a> de Sitepoint pour une référence simple.</li>
+  <li><code>renotify</code>: Un {{domxref ("Boolean", "Booléen")}} spécifiant si l'utilisateur doit être notifié après qu'une nouvelle notification remplace l'ancienne. La valeur par défaut est <code>false</code>, ce qui signifie qu'ils ne seront pas notifiés.</li>
+  <li><code>requireInteraction</code>: Un {{domxref ("Boolean", "Booléen")}} indiquant qu'une notification doit rester active jusqu'à ce que l'utilisateur clique dessus ou la rejette, plutôt que de se fermer automatiquement. La valeur par défaut est <code>false</code>.</li>
+  <li><code>silent</code>: Un {{domxref ("Boolean", "Booléen")}} spécifiant si la notification est silencieuse (aucun son ni vibration émis), quels que soient les paramètres de l'appareil. La valeur par défaut est <code>false</code>, ce qui signifie qu'il ne sera pas silencieux.</li>
+  <li><code>tag</code>: Un {{domxref ("DOMString")}} représentant un tag d'identification pour la notification.</li>
+  <li><code>timestamp</code>: Un {{domxref ("DOMTimeStamp")}} représentant l'heure à laquelle la notification a été créée. Il peut être utilisé pour indiquer l'heure à laquelle une notification est réelle. Par exemple, cela peut se produire dans le passé lorsqu'une notification est utilisée pour un message qui n'a pas pu être envoyé immédiatement parce que l'appareil était hors ligne, ou dans le futur pour une réunion sur le point de commencer.</li>
+  <li><code>vibrate</code>: Un <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Guide/API/Vibration#Vibration_patterns">modèle de vibration</a> que le matériel de vibration de l'appareil émet avec la notification. Un modèle de vibration peut être un réseau avec aussi peu qu'un membre. Les valeurs sont des temps en millisecondes où les indices pairs (0, 2, 4, etc.) indiquent la durée de vibration et les indices impairs indiquent la durée de la pause. Par exemple, [300, 100, 400] vibrerait 300 ms, mettrait en pause 100 ms, puis vibrerait 400 ms.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un {{jsxref('Promise')}} qui se résout en <code>undefined</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js notranslate">navigator.serviceWorker.register('sw.js')
+
+function showNotification() {
+  Notification.requestPermission((result) =&gt; {
+    if (result === 'granted') {
+      navigator.serviceWorker.ready.then((registration) =&gt; {
+        registration.showNotification('Vibration Sample', {
+          body: 'Buzz! Buzz!',
+          icon: '../images/touch/chrome-touch-icon-192x192.png',
+          vibrate: [200, 100, 200, 100, 200, 100, 200],
+          tag: 'vibration-sample'
+        })
+      })
+    }
+  })
+}
+</pre>
+
+<p>Pour appeler la fonction ci-dessus à un moment approprié, vous pouvez utiliser le gestionnaire d'événements {{domxref ("ServiceWorkerGlobalScope.onnotificationclick")}}.</p>
+
+<p>Vous pouvez également récupérer les détails des {{domxref ("Notification", "Notifications")}} qui ont été déclenchés par le service worker actuel en utilisant {{domxref ("ServiceWorkerRegistration.getNotifications()")}}.</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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Notifications','#dom-serviceworkerregistration-shownotification','showNotification()')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.ServiceWorkerRegistration.showNotification")}}</p>
diff --git a/files/fr/web/api/serviceworkerstate/index.html b/files/fr/web/api/serviceworkerstate/index.html
new file mode 100644
index 0000000000..661ee4602b
--- /dev/null
+++ b/files/fr/web/api/serviceworkerstate/index.html
@@ -0,0 +1,51 @@
+---
+title: ServiceWorkerState
+slug: Web/API/ServiceWorkerState
+tags:
+  - API
+  - Interface
+  - Service Workers
+  - ServiceWorkerState
+translation_of: Web/API/ServiceWorkerState
+---
+<div>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</div>
+
+<p><code><strong>ServiceWorkerState</strong></code> est associé à l'état du {{DOMxRef("ServiceWorker")}}.</p>
+
+<h2 id="Valeurs">Valeurs</h2>
+
+<dl>
+ <dt><code>installing</code></dt>
+ <dd>Cet état indique que le service worker est en train de s'installer. Dans cet état, {{DOMxRef("ExtendableEvent.waitUntil()")}} peut être appelé à l'intérieur du gestionnaire de l'événement <code>install</code> afin d'allonger la vie du worker en train de s'installer, jusqu'à ce que la promesse aboutisse avec succès. Le but de cette démarche est de s'assurer que le service worker ne s'active pas avant que tous les caches centraux soient peuplés.</dd>
+ <dt><code>installed</code></dt>
+ <dd>Dans cet état, le service worker est considéré comme en attente.</dd>
+ <dt><code>activating</code></dt>
+ <dd>Dans cet état, le service worker est considéré comme actif. Tant qu'il est actif, on peut appeler {{DOMxRef("ExtendableEvent.waitUntil()")}} à l'intérieur du gestionnaire de l'événement <code>onactivate</code> pour étendre la vie du service worker actif jusqu'à ce que toutes les promesses aboutissent avec succès. Aucun événement fonctionnel n'est dispatché tant que l'état n'est pas actif.</dd>
+ <dt><code>activated</code></dt>
+ <dd>Dans cet état, le service worker est considéré comme actif et prêt à gérer les événements fonctionnels.</dd>
+ <dt><code>redundant</code></dt>
+ <dd>Un nouveau service worker est en train de remplacer le service worker courant, ou bien le service worker courant est en train d'être rejeté à cause d'un échec d'installation.</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("Service Workers", "#service-worker-state-enum", "ServiceWorkerState")}}</td>
+   <td>{{Spec2("Service Workers")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>{{DOMxRef("ServiceWorker.state")}}</li>
+</ul>
diff --git a/files/fr/web/api/shadowroot/delegatesfocus/index.html b/files/fr/web/api/shadowroot/delegatesfocus/index.html
new file mode 100644
index 0000000000..91fd580c39
--- /dev/null
+++ b/files/fr/web/api/shadowroot/delegatesfocus/index.html
@@ -0,0 +1,46 @@
+---
+title: ShadowRoot.delegatesFocus
+slug: Web/API/ShadowRoot/delegatesFocus
+tags:
+  - API
+  - Non-standard
+  - Propriété
+  - Reference
+  - ShadowRoot
+translation_of: Web/API/ShadowRoot/delegatesFocus
+---
+<div>{{APIRef("Shadow DOM")}}</div>
+
+<p><strong><code>delegatesFocus</code></strong> est une propriété en lecture seule, rattachée à l'interface {{domxref("ShadowRoot")}} et qui renvoie un booléen indiquant si l'option <code>delegatesFocus</code> a été intialisée lors de l'attachement de la racine <em>shadow</em> (cf. {{domxref("Element.attachShadow()")}}).</p>
+
+<div class="blockIndicator warning">
+<p><strong>Attention !</strong> Cette fonctionnalité est expérimentale, non-standard et uniquement disponible dans Chrome.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <var>df</var> = <var>shadowRoot</var>.delegatesFocus</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un booléen : <code>true</code> si la racine <em>shadow</em> délègue la gestion du focus et <code>false</code> sinon.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">let customElem = document.querySelector('mon-element-shadow-dom');
+let shadow = customElem.shadowRoot;
+
+  ...
+
+// Est-ce que la racine gère la délégation du focus ?
+let hostElem = shadow.delegatesFocus;</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette fonctionnalité n'est actuellement décrite dans aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.ShadowRoot.delegatesFocus")}}</p>
diff --git a/files/fr/web/api/shadowroot/host/index.html b/files/fr/web/api/shadowroot/host/index.html
new file mode 100644
index 0000000000..724cf496ba
--- /dev/null
+++ b/files/fr/web/api/shadowroot/host/index.html
@@ -0,0 +1,57 @@
+---
+title: ShadowRoot.host
+slug: Web/API/ShadowRoot/host
+tags:
+  - API
+  - Propriété
+  - Reference
+  - ShadowRoot
+  - shadow dom
+translation_of: Web/API/ShadowRoot/host
+---
+<div>{{APIRef("Shadow DOM")}}</div>
+
+<p>La propriété <strong><code>host</code></strong> est une propriété en lecture seule, rattachée à l'interface {{domxref("ShadowRoot")}} et qui représente une référence à l'élément du DOM auquel la racine <code>ShadowRoot</code> est attachée.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>element</em> = <em>shadowRoot</em>.host</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un élément du DOM sous la forme d'un objet {{domxref('Element')}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">let customElem = document.querySelector('mon-element-shadow-dom');
+let shadow = customElem.shadowRoot;
+
+  ...
+
+// renvoie l'élément hôte
+let hostElem = shadow.host;</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('DOM WHATWG','#dom-shadowroot-host','ShadowRoot.host')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.ShadowRoot.host")}}</p>
diff --git a/files/fr/web/api/shadowroot/index.html b/files/fr/web/api/shadowroot/index.html
new file mode 100644
index 0000000000..3b84f53df6
--- /dev/null
+++ b/files/fr/web/api/shadowroot/index.html
@@ -0,0 +1,113 @@
+---
+title: ShadowRoot
+slug: Web/API/ShadowRoot
+tags:
+  - API
+  - Interface
+  - Reference
+  - ShadowRoot
+  - Web Components
+translation_of: Web/API/ShadowRoot
+---
+<div>{{APIRef('Shadow DOM')}}</div>
+
+<p>L'interface <code><strong>ShadowRoot</strong></code>, relative à l'API <em>Shadow DOM</em>, représente la racine d'un sous-arbre du DOM dont le rendu est effectué séparément de celui du DOM de l'arbre principal.</p>
+
+<p>Il est possible de récupérer une référence à la racine <em>shadow</em> d'un élément via la propriété {{domxref("Element.shadowRoot")}} si la racine a été créée avec la méthode {{domxref("Element.attachShadow()")}} et l'option <code>mode</code> qui valait <code>open</code>.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("ShadowRoot.delegatesFocus")}} {{readonlyinline}} {{non-standard_inline}}</dt>
+ <dd>Cette propriété renvoie un booléen qui indique si l'option <code>delegatesFocus</code> a été activée lors de la liaison avec la racine <em>shadow</em> (cf. {{domxref("Element.attachShadow()")}}).</dd>
+ <dt>{{domxref("ShadowRoot.host")}} {{readonlyinline}}</dt>
+ <dd>Cette propriété renvoie une référence à l'élément DOM auquel la racine <code>ShadowRoot</code> est attachée.</dd>
+ <dt>{{domxref("ShadowRoot.innerHTML")}} {{non-standard_inline}}</dt>
+ <dd>Cette propriété permet de définir ou de récupérer le sous-arbre DOM contenu à l'intérieur de la racine <code>ShadowRoot</code>.</dd>
+ <dt>{{domxref("ShadowRoot.mode")}} {{readonlyinline}}</dt>
+ <dd>Cette propriété renvoie le mode utilisé pour la racine <code>ShadowRoot</code> : <code>open</code> ou <code>closed</code>. Cette valeur indique si les fonctionnalités internes à la racine sont accessibles depuis JavaScript.</dd>
+</dl>
+
+<h3 id="Propriétés_incluses_via_DocumentOrShadowRoot">Propriétés incluses via <code>DocumentOrShadowRoot</code></h3>
+
+<p><em>L'interface <code>ShadowRoot</code> inclut les propriétés suivantes grâce au </em>mixin<em> {{domxref("DocumentOrShadowRoot")}}. Attention, ceci n'est actuellement (11/2019) implémenté qu'avec Chrome et les autres navigateurs continuent d'implémenter l'interface {{domxref("Document")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("DocumentOrShadowRoot.activeElement")}} {{readonlyInline}}</dt>
+ <dd>L'élément ({{domxref('Element')}}) au sein du sous-arbre <em>shadow</em> qui a le focus.</dd>
+ <dt>{{domxref("DocumentOrShadowRoot.styleSheets")}} {{readonlyInline}}</dt>
+ <dd>Une liste {{domxref('StyleSheetList')}} d'objets {{domxref('CSSStyleSheet')}} qui référencent les feuilles de styles liées explicitement ou embarquées dans le document.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>L'interface <code>ShadowRoot</code> inclut les méthodes suivantes qui proviennent du </em>mixin<em> {{domxref("DocumentOrShadowRoot")}}. Attention, ceci n'est actuellement (11/2019) implémenté qu'avec Chrome et les autres navigateurs continuent d'implémenter l'interface {{domxref("Document")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("DocumentOrShadowRoot.getSelection()")}}</dt>
+ <dd>Cette méthode renvoie un objet {{domxref('Selection')}} représentant le fragment de texte sélectionné par l'utilisateur ou la position courante du curseur.</dd>
+ <dt>{{domxref("DocumentOrShadowRoot.elementFromPoint()")}}</dt>
+ <dd>Cette méthode renvoie l'élément le plus haut situé aux coordonnées passées en arguments.</dd>
+ <dt>{{domxref("DocumentOrShadowRoot.elementsFromPoint()")}}</dt>
+ <dd>Cette méthode renvoie un tableau de tous les éléments situés aux coordonnées passées en arguments.</dd>
+ <dt>{{domxref("DocumentOrShadowRoot.caretPositionFromPoint()")}}</dt>
+ <dd>Cette méthode renvoie un objet {{domxref('CaretPosition')}} contenant le nœud DOM sur lequel est le curseur ainsi que la position du curseur sur ce nœud.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Les fragments de code suivants sont extraits de l'exemple <a href="https://github.com/mdn/web-components-examples/tree/master/life-cycle-callbacks">life-cycle-callbacks</a> (<a href="https://mdn.github.io/web-components-examples/life-cycle-callbacks">voir le résultat en <em>live</em></a>) qui crée un élément affichant un carré avec une taille et une couleur fournies par les attributs de l'élément.</p>
+
+<p>Dans la définition de la classe pour l'élément <code>&lt;custom-square&gt;</code>, on ajoute certains <em>callbacks</em> permettant de gérer le cycle de vie de l'élément avec un appel à une fonction externe <code>updateStyle()</code> qui applique la taille et la couleur à l'élément. On lui passe l'argument <code>this</code> (c'est-à-dire l'élément lui-même).</p>
+
+<pre class="brush: js">connectedCallback() {
+  console.log("Le carré personnalisé a été ajouté à la page.");
+  updateStyle(this);
+}
+
+attributeChangedCallback(nom, ancienneValeur, nouvelleValeur) {
+  console.log("Les attributs du carré ont changé.");
+  updateStyle(this);
+}</pre>
+
+<p>Quant à la fonction <code>updateStyle()</code>, voyons ici son fonctionnement. On récupère une référence au <em>shadow DOM</em> avec {{domxref("Element.shadowRoot")}}. Ensuite, on utilise un parcours pour le sous-arbre afin de trouver l'élément {{htmlelement("style")}} présent dans le <em>shadow DOM</em> et on met à jour le CSS pour cet élément :</p>
+
+<pre class="brush: js">function updateStyle(elem) {
+  var shadow = elem.shadowRoot;
+  var childNodes = shadow.childNodes;
+  for(var i = 0; i &lt; childNodes.length; i++) {
+    if(childNodes[i].nodeName === 'STYLE') {
+      childNodes[i].textContent =
+        'div {' +
+          'width: ' + elem.getAttribute('l') + 'px;' +
+          'height: ' + elem.getAttribute('l') + 'px;' +
+          'background-color: ' + elem.getAttribute('c') + ';' +
+        '}';
+    }
+  }
+}</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('DOM WHATWG','#interface-shadowroot','Interface ShadowRoot')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.ShadowRoot")}}</p>
diff --git a/files/fr/web/api/shadowroot/innerhtml/index.html b/files/fr/web/api/shadowroot/innerhtml/index.html
new file mode 100644
index 0000000000..2262621230
--- /dev/null
+++ b/files/fr/web/api/shadowroot/innerhtml/index.html
@@ -0,0 +1,42 @@
+---
+title: ShadowRoot.innerHTML
+slug: Web/API/ShadowRoot/innerHTML
+tags:
+  - API
+  - Propriété
+  - Reference
+  - ShadowRoot
+  - innerHTML
+  - shadow dom
+translation_of: Web/API/ShadowRoot/innerHTML
+---
+<div>{{APIRef("Shadow DOM")}}</div>
+
+<p>La propriété <strong><code>innerHTML</code></strong>, rattachée à l'interface {{domxref("ShadowRoot")}}, permet de définir ou de récupérer une référence à l'arbre DOM contenu dans la racine <code>ShadowRoot</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>domString</em> = <em>shadowRoot</em>.innerHTML
+<em>shadowRoot</em>.innerHTML = <em>domString</em>
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une chaîne de caractères {{domxref("DOMString")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">let customElem = document.querySelector('mon-element-shadow-dom');
+let shadow = customElem.shadowRoot;
+
+shadow.innerHTML = '&lt;strong&gt;Cet élément devrait être plus important !&lt;/strong&gt;';</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété ne fait pas encore partie d'une spécification. Voir <a href="https://github.com/w3c/DOM-Parsing/issues/21">cette <em>issue</em></a> pour le projet de spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.ShadowRoot.innerHTML")}}</p>
diff --git a/files/fr/web/api/shadowroot/mode/index.html b/files/fr/web/api/shadowroot/mode/index.html
new file mode 100644
index 0000000000..f9e3ac0ccd
--- /dev/null
+++ b/files/fr/web/api/shadowroot/mode/index.html
@@ -0,0 +1,63 @@
+---
+title: ShadowRoot.mode
+slug: Web/API/ShadowRoot/mode
+tags:
+  - API
+  - Propriété
+  - Reference
+  - ShadowRoot
+  - mode
+  - shadow dom
+translation_of: Web/API/ShadowRoot/mode
+---
+<div>{{APIRef("Shadow DOM")}}</div>
+
+<p>La propriété <strong><code>mode</code></strong>, rattachée à l'interface {{domxref("ShadowRoot")}}, indique son mode. Celui-ci peut valoir <code>open</code> ou <code>closed</code> et indique si les fonctionnalités internes de la racine sont accessibles en JavaScript.</p>
+
+<p>Lorsque le mode d'une racine <em>shadow</em> vaut <code>closed</code>, les détails d'implémentation internes sont inaccessibles et inchangeables avec JavaScript (de la même façon que les détails du fonctionnement de l'élément {{HTMLElement("video")}} sont inaccessibles et inchangeables en JavaScript).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>mode</em> = <em>shadowRoot</em>.mode</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une valeur définie via l'énumération <code><a href="https://dom.spec.whatwg.org/#enumdef-shadowrootmode">ShadowRootMode</a></code> : soit <code>open</code>, soit <code>closed</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">let customElem = document.querySelector('mon-element-shadow-dom');
+let shadow = customElem.shadowRoot;
+
+// Une autre façon de vérifier si la racine est ouverte :
+// on obtiendra null si elle est fermée
+if(shadow) {
+  // Si elle est ouverte, on ferme la racine pour
+  // cacher ce qu'il y a à l'intérieur.
+  shadow.mode = 'closed';
+}</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('DOM WHATWG','#dom-shadowroot-mode','ShadowRoot.mode')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.ShadowRoot.mode")}}</p>
diff --git a/files/fr/web/api/sharedworker/index.html b/files/fr/web/api/sharedworker/index.html
new file mode 100644
index 0000000000..bb9e9f5a39
--- /dev/null
+++ b/files/fr/web/api/sharedworker/index.html
@@ -0,0 +1,116 @@
+---
+title: SharedWorker
+slug: Web/API/SharedWorker
+tags:
+  - API
+  - Interface
+  - Reference
+  - Shared
+  - SharedWorker
+  - Worker
+translation_of: Web/API/SharedWorker
+---
+<div>{{APIRef("Web Workers API")}}</div>
+
+<p>L'interface <code><strong>SharedWorker</strong></code> représente un type spécifique de worker qui peut être <em>accédé</em> à partir de plusieurs contextes de navigation, tels que plusieurs fenêtres, iframes ou même workers. Ils implémentent une autre interface que les workers dédiés et ont un contexte global différent, {{domxref("SharedWorkerGlobalScope")}}.</p>
+
+<div class="note">
+<p><strong>Remarque :</strong> si un SharedWorker peut être accédé à partir de plusieurs contextes de navigation, tous ces contextes de navigation doivent partager exactement la même origine (même protocole, hôte et port.)</p>
+</div>
+
+<h2 id="Constructeurs">Constructeurs</h2>
+
+<dl>
+ <dt>{{domxref("SharedWorker.SharedWorker", "SharedWorker()")}}</dt>
+ <dd>Crée un web worker partagé qui exécute le script spécifié par l'URL.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Il hérite des propriétés de son parent, {{domxref("EventTarget")}}, et implémente les propriétés de {{domxref("AbstractWorker")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("AbstractWorker.onerror")}}</dt>
+ <dd>Est un {{ domxref("EventListener") }} qui est appelé à chaque fois qu'un {{domxref("ErrorEvent")}} de type <code>error</code> se propage à travers le worker.</dd>
+ <dt>{{domxref("SharedWorker.port")}} {{readonlyInline}}</dt>
+ <dd>Retourne un objet {{domxref("MessagePort")}} utilisé pour communiquer et contrôler le worker partagé.</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Hérite des méthodes de son parent, {{domxref("EventTarget")}}, et implémente les méthodes de {{domxref("AbstractWorker")}}.</em></p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans notre  <a class="external external-icon" href="https://github.com/mdn/simple-shared-worker">Exemple basique d'un worker partagé</a> (<a class="external external-icon" href="http://mdn.github.io/simple-shared-worker/">lancer le worker partagé</a>), nous avons deux pages HTML, qui chacune utilise du code JavaScript pour réaliser un calcul simple. Les différents scripts utilisent le même worker pour effectuer ce calcul — ils peuvent tous les deux y accéder, même si leurs pages s'exécutent à l'intérieur de fenêtres différentes.</p>
+
+<p>L'extrait de code suivant illustre la création d'un objet <code>SharedWorker</code> en utilisant le constructeur {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}}. Les deux scripts contiennent ceci :</p>
+
+<pre class="brush: js  language-js"><code class="language-js"><span class="keyword token">var</span> myWorker <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">SharedWorker</span><span class="punctuation token">(</span><span class="string token">"worker.js"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Les deux scripts accèdent alors au worker à travers un objet {{domxref("MessagePort")}} créé en utilisant la propriété {{domxref("SharedWorker.port")}} — le port est démarré au moyen de sa méthode <code>start()</code> :</p>
+
+<pre class="brush: js  language-js"><code class="language-js">myWorker<span class="punctuation token">.</span>port<span class="punctuation token">.</span><span class="function token">start<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Lorsque le port est démarré, les deux scripts envoient des messages au worker et gèrent les messages qu'il renvoie en utilisant respectivement <code>port.postMessage()</code> et <code>port.onmessage</code> :</p>
+
+<pre class="brush: js  language-js"><code class="language-js">first<span class="punctuation token">.</span>onchange <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>
+    myWorker<span class="punctuation token">.</span>port<span class="punctuation token">.</span><span class="function token">postMessage<span class="punctuation token">(</span></span><span class="punctuation token">[</span>first<span class="punctuation token">.</span>value<span class="punctuation token">,</span>second<span class="punctuation token">.</span>value<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 class="punctuation token">(</span></span><span class="string token">'Message envoyé au worker'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+
+  second<span class="punctuation token">.</span>onchange <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>
+    myWorker<span class="punctuation token">.</span>port<span class="punctuation token">.</span><span class="function token">postMessage<span class="punctuation token">(</span></span><span class="punctuation token">[</span>first<span class="punctuation token">.</span>value<span class="punctuation token">,</span>second<span class="punctuation token">.</span>value<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 class="punctuation token">(</span></span><span class="string token">'Message envoyé au worker'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+
+  myWorker<span class="punctuation token">.</span>port<span class="punctuation token">.</span>onmessage <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    result1<span class="punctuation token">.</span>textContent <span class="operator token">=</span> e<span class="punctuation token">.</span>data<span class="punctuation token">;</span>
+    console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">'Message reçu du worker'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span></code></pre>
+
+<p>Au sein du worker, nous utilisons le gestionnaire {{domxref("SharedWorkerGlobalScope.onconnect")}} pour se connecter au même port dont il a été question plus haut. Les ports associés au worker sont accessibles dans la propriété <code>ports</code> de l'événement {{event("connect")}} — nous utilisons alors la méthode {{domxref("MessagePort")}} <code>start()</code> pour démarrer le port, et le gestionnaire <code>onmessage</code> pour s'occuper des messages en provenance des threads principaux.</p>
+
+<pre class="brush: js  language-js"><code class="language-js">onconnect <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">var</span> port <span class="operator token">=</span> e<span class="punctuation token">.</span>ports<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
+
+    port<span class="punctuation token">.</span>onmessage <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="keyword token">var</span> workerResult <span class="operator token">=</span> <span class="string token">'Result: '</span> <span class="operator token">+</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>data<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span> <span class="operator token">*</span> e<span class="punctuation token">.</span>data<span class="punctuation token">[</span><span class="number token">1</span><span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      port<span class="punctuation token">.</span><span class="function token">postMessage<span class="punctuation token">(</span></span>workerResult<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+
+    port<span class="punctuation token">.</span><span class="function token">start<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#sharedworker", "SharedWorker")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Aucune modification de {{SpecName("Web Workers")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.SharedWorker")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{ domxref("Worker") }}</li>
+ <li><a class="internal" href="/fr/docs/Utilisation_des_web_workers">Utilisation des web workers</a></li>
+</ul>
diff --git a/files/fr/web/api/sharedworker/port/index.html b/files/fr/web/api/sharedworker/port/index.html
new file mode 100644
index 0000000000..80605091d8
--- /dev/null
+++ b/files/fr/web/api/sharedworker/port/index.html
@@ -0,0 +1,55 @@
+---
+title: SharedWorker.port
+slug: Web/API/SharedWorker/port
+translation_of: Web/API/SharedWorker/port
+---
+<div>{{APIRef("Web Workers API")}}</div>
+
+<p>La propriété <code><strong>port</strong></code> de l'interface {{domxref("SharedWorker")}} retourne un objet {{domxref("MessagePort")}} utilisé pour contrôler et communiquer avec le <em>worker</em> partagé.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">myWorker.port;</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un objet {{domxref("MessagePort")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'exemple de code suivant montre la création de l'objet <code>SharedWorker</code> en utilisant le constructeur {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}}. Plusieurs scriptes peuvent accéder au <em>worker</em> avec l'objet {{domxref("MessagePort")}} accessible grâce à la propriété <code>SharedWorker.port</code> — le port est ouvert avec la méthode <code>start()</code>.</p>
+
+<pre class="brush: js">var myWorker = new SharedWorker('worker.js');
+myWorker.port.start();</pre>
+
+<p>Pour un exemple complet, voir <a class="external external-icon" href="https://github.com/mdn/simple-shared-worker">(en) Exemple basique de <em>worker</em> partagé</a> (<a class="external external-icon" href="https://mdn.github.io/simple-shared-worker/">(en) démonstration d'un <em>worker</em> partagé</a>.)</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécifications</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#dom-sharedworker-port", "AbstractWorker.onerror")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.SharedWorker.port")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("SharedWorker")}} auquel il appartient.</li>
+ <li><a href="https://anlexn.github.io/shared-worker-mdn/">(en) Une autre démonstration de multiplication.</a></li>
+</ul>
diff --git a/files/fr/web/api/sharedworker/sharedworker/index.html b/files/fr/web/api/sharedworker/sharedworker/index.html
new file mode 100644
index 0000000000..fb98ecbe33
--- /dev/null
+++ b/files/fr/web/api/sharedworker/sharedworker/index.html
@@ -0,0 +1,101 @@
+---
+title: SharedWorker()
+slug: Web/API/SharedWorker/SharedWorker
+translation_of: Web/API/SharedWorker/SharedWorker
+---
+<div>{{APIRef("Web Workers API")}}</div>
+
+<p>Le constructeur <code><strong>SharedWorker()</strong></code> crée un objet {{domxref("SharedWorker")}} qui exécute le script depuis l'URL indiquée. Le script doit respecter la <a href="/fr/docs/Web/Security/Same-origin_policy">politique de même origine</a>.</p>
+
+<div class="note">
+<p><strong>Remarque</strong>: Il y a désaccord entre les fabricants de navigateur pour savoir si l'URI doit avoir la même origine ou non. Bien que Gecko 10.0 {{geckoRelease("10.0")}} et les version supérieurs acceptent des origines différentes, ce n'est pas le cas des autres navigateurs.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var monWorker = new SharedWorker(<em>uneURL</em>, <em>nom</em>);
+var monWorker = new SharedWorker(<em>uneURL</em>, <em>options</em>);</pre>
+
+<h3 id="Paramètre">Paramètre</h3>
+
+<dl>
+ <dt><em>uneURL</em></dt>
+ <dd>Une {{domxref("DOMString")}} qui représente l'URL du scripte du <em>worker</em> qui sera exécuté. Il doit obéir à la politique de même origine.</dd>
+ <dt>nom {{optional_inline}}</dt>
+ <dd>Une {{domxref("DOMString")}} indiquant un nom pour le {{domxref("SharedWorkerGlobalScope")}} représentant la portée du <em>worker</em>. Souvent utilisé pour le débogage.</dd>
+ <dt><em>options</em> {{optional_inline}}</dt>
+ <dd>Une objet contenant les propriétés qui peuvent être défini à la création. Les propriété possibles sont:
+ <ul>
+  <li><code>type</code>: Une {{domxref("DOMString")}} spécifiant le type de <em>worker</em> à créer. Les valeurs possibles sont: <code>classic</code> ou <code>module</code>. Si non spécifié, la valeur par défaut est <code>classic</code>.</li>
+  <li><code>credentials</code>: Une {{domxref("DOMString")}} spécifiant le type de crédit à utilisé pour le <em>worker</em>. La valeur peut être <dfn><code>omit</code></dfn>, <code><dfn>same-origin</dfn></code> ou <dfn><code>include</code>. Si non spécifié ou si le type est <code>classic</code>, la valeur par défaut sera <code>omit</code> (pas de crédit nécéssaire).</dfn></li>
+  <li><dfn><code>name</code>: Une </dfn>{{domxref("DOMString")}} spécifiant un identifiant pour le {{domxref("SharedWorkerGlobalScope")}} représentant la porté du <em>worker</em>, souvent utilisé pour déboguer.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Le <em>woker</em> créé.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<ul>
+ <li>Une <code>SecurityError</code> est levé si le document n'est pas autorisé à lancer le <em>worker</em>. Par exemple si l'URL a une syntaxe invalide ou si la politique de même origine est violée.</li>
+ <li>Une <code>NetworkError</code> est levé si le type MIME du script <em>worker</em> n'est pas correct. Le type MIME doit toujours être <code>text/javascript</code>.</li>
+ <li>Une <code>SyntaxError</code> est levée si <em>uneURL</em> ne peut pas être analysée.</li>
+</ul>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'extrait de code suivant montre la création d'un objet {{domxref("SharedWorker")}} en utilisant le contructeur <code>SharedWorker()</code> et l'usage qui en est fait.</p>
+
+<pre class="brush: js">var myWorker = new SharedWorker('worker.js');
+
+myWorker.port.start();
+
+first.onchange = function() {
+  myWorker.port.postMessage([first.value,second.value]);
+  console.log('Message posted to worker');
+}
+
+second.onchange = function() {
+  myWorker.port.postMessage([first.value,second.value]);
+  console.log('Message posted to worker');
+}
+
+myWorker.port.onmessage = function(e) {
+  result1.textContent = e.data;
+  console.log('Message received from worker');
+}</pre>
+
+<p>Pour l'exemple en complet, voir <a class="external-icon external" href="https://github.com/mdn/simple-shared-worker">Basic shared worker example</a> (<a class="external-icon external" href="http://mdn.github.io/simple-shared-worker/">run shared worker</a>.)</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statuts</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#dom-sharedworker", "SharedWorker()")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.SharedWorker.SharedWorker")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("SharedWorker")}} auquel il appartient.</li>
+ <li><a href="https://anlexn.github.io/shared-worker-mdn/">Une autre démonstration de multiplication.</a></li>
+</ul>
diff --git a/files/fr/web/api/sharedworkerglobalscope/applicationcache/index.html b/files/fr/web/api/sharedworkerglobalscope/applicationcache/index.html
new file mode 100644
index 0000000000..1d2fde68f1
--- /dev/null
+++ b/files/fr/web/api/sharedworkerglobalscope/applicationcache/index.html
@@ -0,0 +1,38 @@
+---
+title: SharedWorkerGlobalScope.applicationCache
+slug: Web/API/SharedWorkerGlobalScope/applicationCache
+translation_of: Web/API/SharedWorkerGlobalScope/applicationCache
+---
+<div>{{APIRef("Web Workers API")}}</div>
+
+<div class="warning">
+<p><strong>Important</strong>: Application Cache est déprécié depuis Firefox 44, et ne sera plus disponible dans des contextes non sécurisés avant Firefox 60 ({{bug(1354175)}}, currently uniquement sur les versions Nightly/Beta). Ne pas utiliser cette fonctionnalité sur des sites web en production, utilisez plutôt les <a href="/fr/docs/Web/API/Service_Worker_API">services workers.</a></p>
+</div>
+
+<p>La propriété en lecture seule <code><strong>applicationCache</strong></code> de l'interface {{domxref("SharedWorkerGlobalScope")}} retourne l'objet {{domxref("ApplicationCache")}} pour le <em>worker</em> (voir <a href="/fr/docs/Web/HTML/Using_the_application_cache">Utiliser le cache d'application</a>).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var nameObj = self.applicationCache;</pre>
+
+<h3 id="valeur">valeur</h3>
+
+<p>Un {{domxref("ApplicationCache")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Si un <em>worker</em> partagé a un AppCache, vous pouvez récupérer une référence en utilisant à l'intérieur d'un <em>worker</em> partagé:</p>
+
+<pre class="brush: js">self.applicationCache</pre>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.SharedWorkerGlobalScope.applicationCache")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("SharedWorkerGlobalScope")}}</li>
+</ul>
diff --git a/files/fr/web/api/sharedworkerglobalscope/index.html b/files/fr/web/api/sharedworkerglobalscope/index.html
new file mode 100644
index 0000000000..5be22e2bcb
--- /dev/null
+++ b/files/fr/web/api/sharedworkerglobalscope/index.html
@@ -0,0 +1,132 @@
+---
+title: SharedWorkerGlobalScope
+slug: Web/API/SharedWorkerGlobalScope
+tags:
+  - API
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - SharedWorkerGlobalScope
+  - TopicStub
+  - Web Workers
+translation_of: Web/API/SharedWorkerGlobalScope
+---
+<div>{{APIRef("Web Workers API")}}</div>
+
+<p>The <strong><code>SharedWorkerGlobalScope</code></strong> object (the {{domxref("SharedWorker")}} global scope) is accessible through the {{domxref("window.self","self")}} keyword. Some additional global functions, namespaces objects, and constructors, not typically associated with the worker global scope, but available on it, are listed in the <a href="/en-US/docs/Web/JavaScript/Reference">JavaScript Reference</a>. See the complete list of <a href="/en-US/docs/Web/API/Web_Workers_API/Functions_and_classes_available_to_workers">functions available to workers</a>.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>This interface inherits properties from the {{domxref("WorkerGlobalScope")}} interface, and its parent {{domxref("EventTarget")}}, and therefore implements properties from {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, and {{domxref("WindowEventHandlers")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("SharedWorkerGlobalScope.name")}} {{readOnlyinline}}</dt>
+ <dd>The name that the {{domxref("SharedWorker")}} was (optionally) given when it was created using the {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}} constructor. This is mainly useful for debugging purposes.</dd>
+ <dt>{{domxref("SharedWorkerGlobalScope.applicationCache")}} {{readOnlyinline}} {{deprecated_inline}}</dt>
+ <dd>This property returns the {{domxref("ApplicationCache")}} object for the worker (see <a href="/en-US/docs/Web/HTML/Using_the_application_cache">Using the application cache</a>).</dd>
+</dl>
+
+<h3 id="Properties_inherited_from_WorkerGlobalScope">Properties inherited from WorkerGlobalScope</h3>
+
+<dl>
+ <dt>{{domxref("WorkerGlobalScope.self")}}</dt>
+ <dd>Returns an object reference to the <code>DedicatedWorkerGlobalScope</code> object itself.</dd>
+ <dt>{{domxref("WorkerGlobalScope.console")}} {{readOnlyinline}}</dt>
+ <dd>Returns the {{domxref("Console")}} associated with the worker.</dd>
+ <dt>{{domxref("WorkerGlobalScope.location")}} {{readOnlyinline}}</dt>
+ <dd>Returns the {{domxref("WorkerLocation")}} associated with the worker. <code>WorkerLocation</code> is a specific location object, mostly a subset of the {{domxref("Location")}} for browsing scopes, but adapted to workers.</dd>
+ <dt>{{domxref("WorkerGlobalScope.navigator")}} {{readOnlyinline}}</dt>
+ <dd>Returns the {{domxref("WorkerNavigator")}} associated with the worker. <code>WorkerNavigator</code> is a specific navigator object, mostly a subset of the {{domxref("Navigator")}} for browsing scopes, but adapted to workers.</dd>
+ <dt>{{domxref("WorkerGlobalScope.performance")}} {{readOnlyinline}} {{Non-standard_inline}}</dt>
+ <dd>Returns the {{domxref("Performance")}} object associated with the worker, which is a regular performance object, but with a subset of its properties and methods available.</dd>
+</dl>
+
+<h3 id="Event_handlers">Event handlers</h3>
+
+<p><em>This interface inherits event handlers from the {{domxref("WorkerGlobalScope")}} interface, and its parent {{domxref("EventTarget")}}, and therefore implements event handlers from {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, and {{domxref("WindowEventHandlers")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("SharedWorkerGlobalScope.onconnect")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("connect")}} event is raised — that is, when a {{domxref("MessagePort")}} connection is opened between the associated {{domxref("SharedWorker")}} and the main thread.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>This interface inherits methods from the {{domxref("WorkerGlobalScope")}} interface, and its parent {{domxref("EventTarget")}}, and therefore implements methods from {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, and {{domxref("WindowEventHandlers")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("SharedWorkerGlobalScope.close()")}}</dt>
+ <dd>Discards any tasks queued in the <code>SharedWorkerGlobalScope</code>'s event loop, effectively closing this particular scope.</dd>
+</dl>
+
+<h3 id="Inherited_from_WorkerGlobalScope">Inherited from WorkerGlobalScope</h3>
+
+<dl>
+ <dt>{{domxref("WorkerGlobalScope.close()")}} {{deprecated_inline}}</dt>
+ <dd>Discards any tasks queued in the <code>WorkerGlobalScope</code>'s event loop, effectively closing this particular scope.</dd>
+ <dt>{{domxref("WorkerGlobalScope.dump()")}} {{non-standard_inline}}</dt>
+ <dd>Allows you to write a message to stdout — i.e. in your terminal. This is the same as Firefox's {{domxref("window.dump")}}, but for workers.</dd>
+ <dt>{{domxref("WorkerGlobalScope.importScripts()")}}</dt>
+ <dd>Imports one or more scripts into the worker's scope. You can specify as many as you'd like, separated by commas. For example:<code> importScripts('foo.js', 'bar.js');</code></dd>
+</dl>
+
+<h3 id="Implemented_from_other_places">Implemented from other places</h3>
+
+<dl>
+ <dt>{{domxref("WindowBase64.atob()")}}</dt>
+ <dd>Decodes a string of data which has been encoded using base-64 encoding.</dd>
+ <dt>{{domxref("WindowBase64.btoa()")}}</dt>
+ <dd>Creates a base-64 encoded ASCII string from a string of binary data.</dd>
+ <dt>{{domxref("WindowTimers.clearInterval()")}}</dt>
+ <dd>Cancels the repeated execution set using {{domxref("WindowTimers.setInterval()")}}.</dd>
+ <dt>{{domxref("WindowTimers.clearTimeout()")}}</dt>
+ <dd>Cancels the repeated execution set using {{domxref("WindowTimers.setTimeout()")}}.</dd>
+ <dt>{{domxref("WindowTimers.setInterval()")}}</dt>
+ <dd>Schedules the execution of a function every X milliseconds.</dd>
+ <dt>{{domxref("WindowTimers.setTimeout()")}}</dt>
+ <dd>Sets a delay for executing a function.</dd>
+</dl>
+
+<h2 id="Events">Events</h2>
+
+<p>Listen to this event using <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> or by assigning an event listener to the <code>on<em>eventname</em></code> property of this interface.</p>
+
+<dl>
+ <dt><code><a href="/en-US/docs/Web/API/SharedWorkerGlobalScope/connect_event">connect</a></code></dt>
+ <dd>Fired on shared workers when a new client connects.<br>
+ Also available via the <code><a href="/en-US/docs/Web/API/SharedWorkerGlobalScope/onconnect">onconnect</a></code> property.</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', '#sharedworkerglobalscope', 'SharedWorkerGlobalScope')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.SharedWorkerGlobalScope")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("SharedWorker")}}</li>
+ <li>{{domxref("WorkerGlobalScope")}}</li>
+ <li><a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">Using Web workers</a></li>
+ <li><a href="/en-US/docs/Web/Guide/Needs_categorization/Functions_available_to_workers">Functions available to workers</a></li>
+</ul>
diff --git a/files/fr/web/api/sharedworkerglobalscope/onconnect/index.html b/files/fr/web/api/sharedworkerglobalscope/onconnect/index.html
new file mode 100644
index 0000000000..1609e094ba
--- /dev/null
+++ b/files/fr/web/api/sharedworkerglobalscope/onconnect/index.html
@@ -0,0 +1,64 @@
+---
+title: SharedWorkerGlobalScope.onconnect
+slug: Web/API/SharedWorkerGlobalScope/onconnect
+translation_of: Web/API/SharedWorkerGlobalScope/onconnect
+---
+<p>{{APIRef("Web Workers API")}}</p>
+
+<p>La proriété <strong><code>onconnect</code></strong> de l'interface {{domxref("SharedWorkerGlobalScope")}} est un gestionnaire d'évènement pour l'évènement {{event("connect")}}, c'est à dire quand une connexion {{domxref("MessagePort")}} est ouverte entre le {{domxref("SharedWorker")}} et le <em>thread</em> principale.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">onconnect = function() { ... };</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Cet exemple montre le gestionnaire d'évènement <code>onconnect</code> quand une connection depuis le thread principal vers un fichier de <em>worker</em> partagé via un {{domxref("MessagePort")}}. L'objet évènement est un {{domxref("MessageEvent")}}.</p>
+
+<p>Le port de connexion peut-être récupéré avec la propriété <code>ports</code> de l'objet évènement. Le port a un gestionnaire d'évènement <code>onmessage</code> pour gérer les évènement venant de cet port et la méthode <code>postMessage()</code> peut-être utilisée pour répondre au <em>thread</em> principale qui utilise le <em>worker</em>.</p>
+
+<pre class="brush: js">onconnect = function(e) {
+    var port = e.ports[0];
+
+    port.onmessage = function(e) {
+      var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
+      port.postMessage(workerResult);
+    }
+
+    port.start();
+}</pre>
+
+<p>Pour l'exemple complet en fonctionnement, voir <a class="external-icon external" href="https://github.com/mdn/simple-shared-worker">Basic shared worker example</a> (<a class="external-icon external" href="http://mdn.github.io/simple-shared-worker/">run shared worker</a>.)</p>
+
+<div class="blockIndicator note">
+<p><strong>Remarque</strong>: La propriété <code>data</code> de l'objet évènement est <code>null</code> dans Firefox. À partir de la version 65, elle est initialisée comme une chaîne vide, selon les spécifications ({{bug(1508824)}}).</p>
+</div>
+
+<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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#handler-sharedworkerglobalscope-onconnect', 'onconnect')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.SharedWorkerGlobalScope.onconnect")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("SharedWorkerGlobalScope")}}</li>
+</ul>
diff --git a/files/fr/web/api/speechrecognition/index.html b/files/fr/web/api/speechrecognition/index.html
new file mode 100644
index 0000000000..fc92260a1c
--- /dev/null
+++ b/files/fr/web/api/speechrecognition/index.html
@@ -0,0 +1,221 @@
+---
+title: SpeechRecognition
+slug: Web/API/SpeechRecognition
+translation_of: Web/API/SpeechRecognition
+---
+<p>{{APIRef("Web Speech API")}}{{SeeCompatTable}}</p>
+
+<p><strong><code>SpeechRecognition</code></strong> est l'interface contrôleur du service de reconnaissance de la <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a>; elle gère également les {{domxref("SpeechRecognitionEvent")}} envoyés par le service de reconnaissance.</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("SpeechRecognition.SpeechRecognition()")}}</dt>
+ <dd>Crée un nouvel objet <code>SpeechRecognition</code></dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em><code>SpeechRecognition</code><code><em> </em></code>hérite également des propriétés de son interface parente, {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("SpeechRecognition.grammars")}}</dt>
+ <dd>Retourne et définit une collection d'objets {{domxref("SpeechGrammar")}} représentant les grammaires qui seront comprises par <code>SpeechRecognition</code>.</dd>
+ <dt>{{domxref("SpeechRecognition.lang")}}</dt>
+ <dd>Retourne et définit la langue de  <code>SpeechRecognition</code>. Si elle n'est pas spécifiée, prend la valeur par défaut du HTML {{htmlattrxref("lang","html")}} ou le paramètre de langue du user agent si celle-ci n'est pas défini non plus.</dd>
+ <dt>{{domxref("SpeechRecognition.continuous")}}</dt>
+ <dd>Contrôle si la reconnaissance est continue, ou retourne seulement un seul résultat. Par défaut retourne un seul résultat (<code>false</code>.)</dd>
+ <dt>{{domxref("SpeechRecognition.interimResults")}}</dt>
+ <dd>Contrôle si les résultats intermédiaires doivent être retournés (<code>true</code>) ou pas (<code>false</code>.) Les résultats intermédiaires sont des résultats qui ne sont pas encore définitifs. (e.x. ou la propriété {{domxref("SpeechRecognitionResult.isFinal")}}  est <code>false</code>.)</dd>
+ <dt>{{domxref("SpeechRecognition.maxAlternatives")}}</dt>
+ <dd>Règle le nombre maximum de {{domxref("SpeechRecognitionAlternative")}} (d'alternatives) fourni par résultat. La valeur par défaut est 1.</dd>
+ <dt>{{domxref("SpeechRecognition.serviceURI")}}</dt>
+ <dd>Spécifie l'emplacement du service de reconnaissance vocale utilisé par <code>SpeechRecognition</code> pour traiter la reconnaissance proprement dite. La valeur par défaut le chemin par défaut du user agent.</dd>
+</dl>
+
+<h3 id="Event_handlers">Event handlers</h3>
+
+<dl>
+ <dt>{{domxref("SpeechRecognition.onaudiostart")}}</dt>
+ <dd>Déclenché lorsque l'agent utilisateur commence à capturer le son.</dd>
+ <dt>{{domxref("SpeechRecognition.onaudioend")}}</dt>
+ <dd>Déclenché lorsque l'agent utilisateur a terminé la capture audio.</dd>
+ <dt>{{domxref("SpeechRecognition.onend")}}</dt>
+ <dd>Déclenché lorsque le service de reconnaissance vocale est déconnecté.</dd>
+ <dt>{{domxref("SpeechRecognition.onerror")}}</dt>
+ <dd>Déclenché en cas d'erreur de reconnaissance vocale.</dd>
+ <dt>{{domxref("SpeechRecognition.onnomatch")}}</dt>
+ <dd>Déclenché lorsque le service de reconnaissance vocale retourne un résultat final sans concordance significative. Il peut s'agir d'un certain degré de reconnaissance, qui ne correspond pas ou ne dépasse le seuil de {{domxref("SpeechRecognitionAlternative.confidence","confidence")}}.</dd>
+ <dt>{{domxref("SpeechRecognition.onresult")}}</dt>
+ <dd>Déclenché lorsque le service de reconnaissance vocale retourne un résultat - un mot ou une expression a donc été reconnu(e) positivement et cela a été communiqué à l'application.</dd>
+ <dt>{{domxref("SpeechRecognition.onsoundstart")}}</dt>
+ <dd>Déclenché lorsqu'un son - parole reconnaissable ou non - a été détecté.</dd>
+ <dt>{{domxref("SpeechRecognition.onsoundend")}}</dt>
+ <dd>Déclenché lorsque le son - parole reconnaissable ou non - n'est plus détecté.</dd>
+ <dt>{{domxref("SpeechRecognition.onspeechstart")}}</dt>
+ <dd>Déclenché lorsque du son à été reconnu par le service de reconnaissance vocale comme de la parole.</dd>
+ <dt>{{domxref("SpeechRecognition.onspeechend")}}</dt>
+ <dd>Déclenché lorsque la parole reconnue par le service de reconnaissance vocale a cesse d'être détectée.</dd>
+ <dt>{{domxref("SpeechRecognition.onstart")}}</dt>
+ <dd>Déclenché lorsque le service de reconnaissance vocale commence à écouter l'audio entrant, dans le but de reconnaître les grammaires associées à la (reconnaissance vocale) <code>SpeechRecognition</code> actuelle.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em><code>SpeechRecognition</code> also inherits methods from its parent interface, {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("SpeechRecognition.abort()")}}</dt>
+ <dd>Stops the speech recognition service from listening to incoming audio, and doesn't attempt to return a {{domxref("SpeechRecognitionResult")}}.</dd>
+ <dt>{{domxref("SpeechRecognition.start()")}}</dt>
+ <dd>Starts the speech recognition service listening to incoming audio with intent to recognize grammars associated with the current <code>SpeechRecognition</code>.</dd>
+ <dt>{{domxref("SpeechRecognition.stop()")}}</dt>
+ <dd>Stops the speech recognition service from listening to incoming audio, and attempts to return a {{domxref("SpeechRecognitionResult")}} using the audio captured so far.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>In our simple <a href="https://github.com/mdn/web-speech-api/tree/master/speech-color-changer">Speech color changer</a> example, we create a new <code>SpeechRecognition</code> object instance using the {{domxref("SpeechRecognition.SpeechRecognition", "SpeechRecognition()")}} constructor, create a new {{domxref("SpeechGrammarList")}}, and set it to be the grammar that will be recognised by the <code>SpeechRecognition</code> instance using the {{domxref("SpeechRecognition.grammars")}} property.</p>
+
+<p>After some other values have been defined, we then set it so that the recognition service starts when a click event occurs (see {{domxref("SpeechRecognition.start()")}}.) When a result has been successfully recognised, the {{domxref("SpeechRecognition.onresult")}} handler fires,  we extract the color that was spoken from the event object, and then set the background color of the {{htmlelement("html")}} element to that colour.</p>
+
+<pre class="brush: js">var grammar = '#JSGF V1.0; grammar colors; public &lt;color&gt; = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;'
+var recognition = new SpeechRecognition();
+var speechRecognitionList = new SpeechGrammarList();
+speechRecognitionList.addFromString(grammar, 1);
+recognition.grammars = speechRecognitionList;
+//recognition.continuous = false;
+recognition.lang = 'en-US';
+recognition.interimResults = false;
+recognition.maxAlternatives = 1;
+
+var diagnostic = document.querySelector('.output');
+var bg = document.querySelector('html');
+
+document.body.onclick = function() {
+  recognition.start();
+  console.log('Ready to receive a color command.');
+}
+
+recognition.onresult = function(event) {
+  var color = event.results[0][0].transcript;
+  diagnostic.textContent = 'Result received: ' + color;
+  bg.style.backgroundColor = color;
+}</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Speech API', '#speechreco-section', 'SpeechRecognition')}}</td>
+   <td>{{Spec2('Web Speech API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(33)}}{{property_prefix("webkit")}} <sup>[1]</sup></td>
+   <td>{{CompatNo}} <sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>continuous</code></td>
+   <td>{{CompatChrome(33)}} <sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}[1]</td>
+   <td>{{CompatGeckoMobile(44)}}</td>
+   <td>2.5</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>continuous</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}[1]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<ul>
+ <li>[1] Speech recognition interfaces are currently prefixed in Chrome, so you'll need to prefix interface names appropriately, e.g. <code>webkitSpeechRecognition</code>; You'll also need to serve your code through a web server for recognition to work.</li>
+ <li>[2] Can be enabled via the <code>media.webspeech.recognition.enable</code> flag in <a>about:config</a> on mobile. Not implemented at all on Desktop Firefox — see {{bug(1248897)}}.</li>
+</ul>
+
+<h3 id="Firefox_OS_permissions">Firefox OS permissions</h3>
+
+<p>To use speech recognition in an app, you need to specify the following permissions in your <a href="/en-US/docs/Web/Apps/Build/Manifest">manifest</a>:</p>
+
+<pre class="brush: json">"permissions": {
+  "audio-capture" : {
+    "description" : "Audio capture"
+  },
+  "speech-recognition" : {
+    "description" : "Speech recognition"
+  }
+}</pre>
+
+<p>You also need a privileged app, so you need to include this as well:</p>
+
+<pre class="brush: json">  "type": "privileged"</pre>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a></li>
+</ul>
diff --git a/files/fr/web/api/speechsynthesisutterance/index.html b/files/fr/web/api/speechsynthesisutterance/index.html
new file mode 100644
index 0000000000..65763a6bbd
--- /dev/null
+++ b/files/fr/web/api/speechsynthesisutterance/index.html
@@ -0,0 +1,179 @@
+---
+title: SpeechSynthesisUtterance
+slug: Web/API/SpeechSynthesisUtterance
+translation_of: Web/API/SpeechSynthesisUtterance
+---
+<p>{{APIRef("Web Speech API")}}{{SeeCompatTable}}</p>
+
+<p>L'interface <strong><code>SpeechSynthesisUtterance</code></strong> de l'<a href="/en-US/docs/Web/API/Web_Speech_API">API Web Speech</a> représente une requète de synthèse vocale. Elle contient le contenu du service permettant de définir la façon dont elle sera lu (langue, hauteur et volume).</p>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{domxref("SpeechSynthesisUtterance.SpeechSynthesisUtterance()")}}</dt>
+ <dd>Retourne une nouvelle instance de l'objet <code>SpeechSynthesisUtterance</code>.</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em><code>SpeechSynthesisUtterance</code> hérite également des propriétés de son interface parente, {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("SpeechSynthesisUtterance.lang")}}</dt>
+ <dd>Gets and sets the language of the utterance.</dd>
+ <dt>{{domxref("SpeechSynthesisUtterance.pitch")}}</dt>
+ <dd>Gets and sets the pitch at which the utterance will be spoken at.</dd>
+ <dt>{{domxref("SpeechSynthesisUtterance.rate")}}</dt>
+ <dd>Gets and sets the speed at which the utterance will be spoken at.</dd>
+ <dt>{{domxref("SpeechSynthesisUtterance.text")}}</dt>
+ <dd>Gets and sets the text that will be synthesised when the utterance is spoken.</dd>
+ <dt>{{domxref("SpeechSynthesisUtterance.voice")}}</dt>
+ <dd>Gets and sets the voice that will be used to speak the utterance.</dd>
+ <dt>{{domxref("SpeechSynthesisUtterance.volume")}}</dt>
+ <dd>Gets and sets the volume that the utterance will be spoken at.</dd>
+</dl>
+
+<h3 id="Event_handlers">Event handlers</h3>
+
+<dl>
+ <dt>{{domxref("SpeechSynthesisUtterance.onboundary")}}</dt>
+ <dd>Fired when the spoken utterance reaches a word or sentence boundary.</dd>
+ <dt>{{domxref("SpeechSynthesisUtterance.onend")}}</dt>
+ <dd>Fired when the utterance has finished being spoken.</dd>
+ <dt>{{domxref("SpeechSynthesisUtterance.onerror")}}</dt>
+ <dd>Fired when an error occurs that prevents the utterance from being succesfully spoken.</dd>
+ <dt>{{domxref("SpeechSynthesisUtterance.onmark")}}</dt>
+ <dd>Fired when the spoken utterance reaches a named SSML "mark" tag.</dd>
+ <dt>{{domxref("SpeechSynthesisUtterance.onpause")}}</dt>
+ <dd>Fired when the utterance is paused part way through.</dd>
+ <dt>{{domxref("SpeechSynthesisUtterance.onresume")}}</dt>
+ <dd>Fired when a paused utterance is resumed.</dd>
+ <dt>{{domxref("SpeechSynthesisUtterance.onstart")}}</dt>
+ <dd>Fired when the utterance has begun to be spoken.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>Dans notre exemple basique de <a href="https://github.com/mdn/web-speech-api/tree/master/speak-easy-synthesis">démonstration de synthèse vocale</a>, nous commençons par récupérer une référence du controller SpeechSynthesis en utilisant <code>window.speechSynthesis</code>.<br>
+ Après avoir définit les variables nécessaires, nous récupérons une liste des voix disponibles en utilisant {{domxref("SpeechSynthesis.getVoices()")}} puis nous alimentons un menu avec celle-ci.<br>
+ L'utilisateur pourra ensuite choisir la voix qu'il souhaite.<br>
+ <br>
+ À l'intérieur du handler <code>inputForm.onsubmit</code> :</p>
+
+<ul>
+ <li>Nous stoppons la soumission du formulaire avec <a href="/en-US/docs/Web/API/Event/preventDefault">preventDefault()</a>;</li>
+ <li>Nous utilisons le constructeur {{domxref("SpeechSynthesisUtterance.SpeechSynthesisUtterance()", "constructor")}} pour créer une nouvelle instance contenant le texte de l'{{htmlelement("input")}};</li>
+ <li>Nous positionnons {{domxref("SpeechSynthesisUtterance.voice","voice")}} sur la voix sélectionnée dans le {{htmlelement("select")}};</li>
+ <li>Nous démarrons la synthèse vocale via la méthode {{domxref("SpeechSynthesis.speak()")}}</li>
+</ul>
+
+<pre class="brush: js">var synth = window.speechSynthesis;
+
+var inputForm = document.querySelector('form');
+var inputTxt = document.querySelector('input');
+var voiceSelect = document.querySelector('select');
+
+var voices = synth.getVoices();
+
+for(i = 0; i &lt; voices.length ; i++) {
+  var option = document.createElement('option');
+  option.textContent = voices[i].name + ' (' + voices[i].lang + ')';
+  option.setAttribute('data-lang', voices[i].lang);
+  option.setAttribute('data-name', voices[i].name);
+  voiceSelect.appendChild(option);
+}
+
+inputForm.onsubmit = function(event) {
+  event.preventDefault();
+
+  var utterThis = new SpeechSynthesisUtterance(inputTxt.value);
+  var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');
+  for(i = 0; i &lt; voices.length ; i++) {
+    if(voices[i].name === selectedOption) {
+      utterThis.voice = voices[i];
+    }
+  }
+  synth.speak(utterThis);
+  inputTxt.blur();
+}</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Speech API', '#utterance-attributes', 'SpeechSynthesisUtterance')}}</td>
+   <td>{{Spec2('Web Speech API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(33)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(49)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>7</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>2.0</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>7.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a></li>
+</ul>
diff --git a/files/fr/web/api/storage/clear/index.html b/files/fr/web/api/storage/clear/index.html
new file mode 100644
index 0000000000..8d9d33100a
--- /dev/null
+++ b/files/fr/web/api/storage/clear/index.html
@@ -0,0 +1,67 @@
+---
+title: Storage.clear()
+slug: Web/API/Storage/clear
+tags:
+  - API
+  - Méthode
+  - Reference
+  - Stockage
+  - Stockage Web
+translation_of: Web/API/Storage/clear
+---
+<p>{{APIRef("Web Storage API")}}</p>
+
+<p>La méthode <code>clear()</code> de l'interface {{domxref("Storage")}},  lorsqu'elle est invoquée, vide toutes les clés stockées.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js"><em>storage</em>.clear();</pre>
+
+<h3 id="Retoune">Retoune</h3>
+
+<p>{{jsxref("undefined")}}</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>La fonction suivante crée trois entrées de données dans le stockage local, puis les supprime en utilisant clear().</p>
+
+<pre class="brush: js">function peuplerLeStockage() {
+  localStorage.setItem('bgcolor', 'red');
+  localStorage.setItem('font', 'Helvetica');
+  localStorage.setItem('image', 'monChat.png');
+
+  localStorage.clear();
+}</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Pour voir un exemple réel, vous pouvez visitez notre <a href="https://mdn.github.io/dom-examples/web-storage/">Démo de stockage web</a>. Les modifications sont visibles dans la console, vous pouvez actualiser la page et conserver les modifications.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-clear', 'Storage.clear')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Storage.clear")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utilisation de l'API de stockage web</a></li>
+</ul>
diff --git a/files/fr/web/api/storage/getitem/index.html b/files/fr/web/api/storage/getitem/index.html
new file mode 100644
index 0000000000..a81ccb0ccf
--- /dev/null
+++ b/files/fr/web/api/storage/getitem/index.html
@@ -0,0 +1,77 @@
+---
+title: Storage.getItem()
+slug: Web/API/Storage/getItem
+tags:
+  - API
+  - Méthode
+  - Stockage
+  - Stockage Web
+translation_of: Web/API/Storage/getItem
+---
+<p>{{APIRef("Web Storage API")}}<br>
+ La méthode <code>getItem()</code> de l'interface {{domxref("Storage")}} renvoie la valeur associée à la clé passée en paramètre.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate">var <em>aValue</em> = <em>storage</em>.getItem(<em>keyName</em>);
+</pre>
+
+<h3 id="Paramètre">Paramètre</h3>
+
+<dl>
+ <dt><em><code>keyName</code></em></dt>
+ <dd>Une {{domxref("DOMString")}} contenant le nom de la clé voulue.</dd>
+</dl>
+
+<h3 id="Renvoi">Renvoi</h3>
+
+<p>Une {{domxref("DOMString")}} contenant la valeur de la clé. <code>null</code> est renvoyé si aucune correspondance n'est trouvée.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>La fonction suivante récupère trois élément du stockage local, puis réutilise les valeurs renvoyés afin de modifier le style de la page .</p>
+
+<pre class="brush: js notranslate">function setStyles() {
+  var currentColor = localStorage.getItem('bgcolor');
+  var currentFont = localStorage.getItem('font');
+  var currentImage = localStorage.getItem('image');
+
+  document.getElementById('bgcolor').value = currentColor;
+  document.getElementById('font').value = currentFont;
+  document.getElementById('image').value = currentImage;
+
+  htmlElem.style.backgroundColor = '#' + currentColor;
+  pElem.style.fontFamily = currentFont;
+  imgElem.setAttribute('src', currentImage);
+}</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Pour voir cette fonction utilisée dans un exemple réel, dirigez-vous vers notre <a href="https://github.com/mdn/web-storage-demo">Demo de Stockage Web (en)</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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-getitem', 'Storage.getItem')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Storage.getItem")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p><a href="https://developer.mozilla.org/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utilisation de l'API de stockage web</a></p>
diff --git a/files/fr/web/api/storage/index.html b/files/fr/web/api/storage/index.html
new file mode 100644
index 0000000000..ed862cb650
--- /dev/null
+++ b/files/fr/web/api/storage/index.html
@@ -0,0 +1,105 @@
+---
+title: Storage
+slug: Web/API/Storage
+tags:
+  - API
+  - Interface
+  - Reference
+  - Stockage
+  - Storage
+translation_of: Web/API/Storage
+---
+<div>{{APIRef("Web Storage API")}}</div>
+
+<p>L'interface <strong><code>Storage</code></strong> de l'<a href="/fr/docs/Web/API/Web_Storage_API">API Web Storage</a> donne accès au stockage de session (<code>SessionStorage</code>) ou au stockage local (<code>LocalStorage</code>) pour un domaine donné, vous permettant par exemple d'ajouter, de modifier ou de supprimer des éléments enregistrés.</p>
+
+<p>Si vous voulez manipuler le stockage de session pour un domaine, appelez la méthode {{domxref("Window.sessionStorage")}}. Si vous voulez manipuler le stockage local pour un domaine, appelez la méthode {{domxref("Window.localStorage")}}.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("Storage.length")}} {{readonlyInline}}</dt>
+ <dd>Renvoie un entier représentant le nombre d'éléments contenus dans l'objet <code>Storage</code>.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("Storage.key()")}}</dt>
+ <dd>Lorsqu'on lui passe un nombre <code>n</code>, cette méthode renvoie le nom de la n-ième clé dans le stockage.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Storage.getItem()")}}</dt>
+ <dd>Lorqu'on lui passe le nom d'une clé, cette méthode renvoie la valeur de la clé correspondante.</dd>
+ <dt>{{domxref("Storage.setItem()")}}</dt>
+ <dd>Lorqu'on lui passe un nom de clé et une valeur, cette méthode ajoute cette clé et cette valeur dans le stockage. Si la clé existe déjà, elle met à jour la valeur.</dd>
+ <dt>{{domxref("Storage.removeItem()")}}</dt>
+ <dd>Lorqu'on lui passe le nom d'une clé, cette méthode supprime cette clé du stockage.</dd>
+ <dt>{{domxref("Storage.clear()")}}</dt>
+ <dd>Lorsqu'elle est appelée, cette méthode supprime toutes les clés du stockage.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Nous accédons ici à un objet <code>Storage</code> en appelant <code>localStorage</code>. Nous testons d'abord si le stockage local contient des éléments en utilisant <code>!localStorage.getItem('bgcolor')</code>. Si oui, nous exécutons une fonction appelée <code>setStyles()</code> qui récupère les éléments en utilisant {{domxref("Storage.getItem()")}}, et utilise ces valeurs pour mettre à jour les styles de page. Sinon, nous exécutons une autre fonction appelée <code>populateStorage()</code>, qui utilise {{domxref("Storage.setItem()")}} pour régler les valeurs des éléments, puis qui exécute <code>setStyles()</code>.</p>
+
+<pre class="brush: js">if(!localStorage.getItem('bgcolor')) {
+  populateStorage();
+} else {
+  setStyles();
+}
+
+function populateStorage() {
+  localStorage.setItem('bgcolor', document.getElementById('bgcolor').value);
+  localStorage.setItem('font', document.getElementById('font').value);
+  localStorage.setItem('image', document.getElementById('image').value);
+
+  setStyles();
+}
+
+function setStyles() {
+  var currentColor = localStorage.getItem('bgcolor');
+  var currentFont = localStorage.getItem('font');
+  var currentImage = localStorage.getItem('image');
+
+  document.getElementById('bgcolor').value = currentColor;
+  document.getElementById('font').value = currentFont;
+  document.getElementById('image').value = currentImage;
+
+  htmlElem.style.backgroundColor = '#' + currentColor;
+  pElem.style.fontFamily = currentFont;
+  imgElem.setAttribute('src', currentImage);
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="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', 'webstorage.html#the-storage-interface', 'Storage')}}</td>
+   <td>{{Spec2('Web Storage')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Storage")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utiliser l'API Web Storage</a></li>
+ <li>{{domxref("Window.localStorage")}}</li>
+ <li>{{domxref("Window.sessionStorage")}}</li>
+ <li>{{domxref("CacheStorage")}}</li>
+</ul>
diff --git a/files/fr/web/api/storage/key/index.html b/files/fr/web/api/storage/key/index.html
new file mode 100644
index 0000000000..8be18bf6ea
--- /dev/null
+++ b/files/fr/web/api/storage/key/index.html
@@ -0,0 +1,143 @@
+---
+title: Storage.key()
+slug: Web/API/Storage/key
+tags:
+  - API
+  - Méthode
+  - Reference
+  - Stockage
+  - Storage
+  - Web Storage
+translation_of: Web/API/Storage/key
+---
+<p>{{APIRef()}}</p>
+
+<p>La méthode <code>key()</code> de l'interface {{domxref("Storage")}} prend un nombre n en argument et retourne la n-ième clé contenue dans storage. L'ordre des clés étant définie par le navigateur, il est recommandé de ne pas s'y référer .</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <em>unNomDeCle</em> = <em>storage</em>.key(<em>cle</em>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><em>cle</em></dt>
+ <dd>Un entier représentant le numéro de la clé voulue. L'index débute à zero.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un {{domxref("DOMString")}} contenant le nom de la clé .</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>La fonction suivante parcours les éléments présents dans le local storage.</p>
+
+<pre class="brush: js">function forEachKey(callback) {
+  for (var i = 0; i &lt; localStorage.length; i++) {
+    callback(localStorage.key(i));
+  }
+}</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Pour un exemple plus poussé, consultez la <a href="https://mdn.github.io/dom-examples/web-storage/">Web Storage Demo</a>.</p>
+</div>
+
+<h2 id="Autre_exemple">Autre exemple</h2>
+
+<p>La fonction suivante parcourt chaque clé présente dans le localStorage et affiche les valeurs correspondantes.</p>
+
+<pre class="brush: js">for (var i = 0; i &lt; localStorage.length; i++) {
+   console.log(localStorage.getItem(localStorage.key(i)));
+}
+</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', 'webstorage.html#dom-storage-key', 'Storage.key')}}</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>Fonctionnalité</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>localStorage</td>
+   <td>4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>3.5</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>sessionStorage</td>
+   <td>5</td>
+   <td>{{CompatUnknown}}</td>
+   <td>2</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>2.1</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>8</td>
+   <td>11</td>
+   <td>iOS 3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Notez que les niveaux de capacités de localStorage et sessionStorage sont propres à chaque navigateur. Vous pourrez trouver ici <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">un article détaillé sur toutes les capacités de stockage de différents navigateurs</a>.</p>
+
+<div class="note">
+<p><strong>Note: </strong>Depuis iOS 5.1, Safari Mobile réalise ses enregistrements de données type localStorage dans le cache du navigateur, faisant objet de remises à zéro occasionelles gérés par l'OS, le plus souvent lorsque l'espace s'amoindrit.</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p><a href="https://developer.mozilla.org/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utilisation de l'API de stockage web</a></p>
diff --git a/files/fr/web/api/storage/length/index.html b/files/fr/web/api/storage/length/index.html
new file mode 100644
index 0000000000..2d32d4bae6
--- /dev/null
+++ b/files/fr/web/api/storage/length/index.html
@@ -0,0 +1,123 @@
+---
+title: Storage.length
+slug: Web/API/Storage/length
+tags:
+  - API
+  - Propriété
+  - Reference
+  - Stockage
+  - Web Stockage
+translation_of: Web/API/Storage/length
+---
+<p>{{APIRef("Web Storage API")}}</p>
+
+<p>La propriété en lecture seule de l'interface {{domxref("Storage")}} retourne un entier représentant le nombre d'items stockés dans l'objet <code>Storage</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>aLength</em> = <em>storage</em>.length;</pre>
+
+<h3 id="Retour">Retour</h3>
+
+<p>Un entier.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>La fonction suivante ajoute trois éléments au localStorage du domaine courant puis retourne le nombre d'éléments dans le storage:</p>
+
+<pre class="brush: js">function populateStorage() {
+  localStorage.setItem('bgcolor', 'yellow');
+  localStorage.setItem('font', 'Helvetica');
+  localStorage.setItem('image', 'cats.png');
+
+  localStorage.length; // retourne 3 si localStorage est vide au préalable
+}</pre>
+
+<div class="note">
+<p><strong>Note</strong> : Pour voir ceci utilisé dans un exemple concret, regardez notre <a href="https://mdn.github.io/dom-examples/web-storage/">Web Storage Demo</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">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-length', 'Storage.length')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité">Compatibilité</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>localStorage</td>
+   <td>4</td>
+   <td>3.5</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>sessionStorage</td>
+   <td>5</td>
+   <td>2</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>2.1</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>8</td>
+   <td>11</td>
+   <td>iOS 3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Tous les navigateurs ont des niveaux de capacité de stockage variables, que ce soit pour localStorage ou sessionStorage. Pour un test de l'ensemble des capacités des différents navigateurs <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">voir ici</a>.</p>
+
+<div class="note">
+<p><strong>Note : </strong>Depuis iOS 5.1, Safari Mobile stocke les données liées à localStorage dans un fichier de cache qui est sujet à un nettoyage occasionnel par ordre du système d'exploitation, surtout lorsqu'il reste peu de place.</p>
+</div>
+
+<h2 id="À_voir_également">À voir également</h2>
+
+<p><a href="https://developer.mozilla.org/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utilisation de l'API de stockage web</a></p>
diff --git a/files/fr/web/api/storage/localstorage/index.html b/files/fr/web/api/storage/localstorage/index.html
new file mode 100644
index 0000000000..d6286314d6
--- /dev/null
+++ b/files/fr/web/api/storage/localstorage/index.html
@@ -0,0 +1,134 @@
+---
+title: LocalStorage
+slug: Web/API/Storage/LocalStorage
+translation_of: Web/API/Window/localStorage
+---
+<p>{{APIRef()}}</p>
+
+<p>La propriété <code>localStorage</code> de l’objet <code>Window</code> est comparable à {{ DOMxRef("Window.sessionStorage", "sessionStorage") }} (la même {{ Glossary("same-origin_policy", "politique de même origine") }} est appliquée), mais les données enregistrées sont persistantes d’une session à l’autre. <code>localStorage</code> a été introduit dans Firefox 3.5.</p>
+
+<div class="note"><strong>Note :</strong> Quand le navigateur est en mode navigation privée, une nouvelle base de donnée temporaire est créée pour stocker les données locales ; cette base de données est vidée et supprimée quand le mode de navigation privée est arrêté.</div>
+
+<pre class="brush:js">// Sauvegarder les informations dans l’espace local courant
+localStorage.setItem("username", "John");
+
+// Accéder à des données enregistrées
+alert("username = " + localStorage.getItem("username"));</pre>
+
+<p class="note">La persistence de <code>localStorage</code> le rend utile pour une varitété d’usages, comprenant des compteurs de vues de page comme démontré dans ce <a href="http://codepen.io/awesom3/pen/Hlfma">tutoriel sur Codepen</a>.</p>
+
+<h2 id="Compatibilité">Compatibilité</h2>
+
+<p>Les objets {{ DOMxRef("Storage") }} sont un ajout récent au standard. Ainsi, ils pourraient ne pas être présents dans tous les navigateurs. Il est possible de contourner ce problème en insérant l’un des deux codes suivants au début de vos scripts. Cela vous permettra d’utiliser l’objet <code>localStorage</code> dans les navigateurs qui ne le supportent pas nativement.</p>
+
+<p>Cet algorithme est une imitation exacte de l’objet <code>localStorage</code>, mais utilise les cookies.</p>
+
+<pre class="brush:js">if (!window.localStorage) {
+  Object.defineProperty(window, "localStorage", new (function () {
+    var aKeys = [], oStorage = {};
+    Object.defineProperty(oStorage, "getItem", {
+      value: function (sKey) { return sKey ? this[sKey] : null; },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "key", {
+      value: function (nKeyId) { return aKeys[nKeyId]; },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "setItem", {
+      value: function (sKey, sValue) {
+        if(!sKey) { return; }
+        document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
+      },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "length", {
+      get: function () { return aKeys.length; },
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "removeItem", {
+      value: function (sKey) {
+        if(!sKey) { return; }
+        document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
+      },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    this.get = function () {
+      var iThisIndx;
+      for (var sKey in oStorage) {
+        iThisIndx = aKeys.indexOf(sKey);
+        if (iThisIndx === -1) { oStorage.setItem(sKey, oStorage[sKey]); }
+        else { aKeys.splice(iThisIndx, 1); }
+        delete oStorage[sKey];
+      }
+      for (aKeys; aKeys.length &gt; 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); }
+      for (var aCouple, iKey, nIdx = 0, aCouples = document.cookie.split(/\s*;\s*/); nIdx &lt; aCouples.length; nIdx++) {
+        aCouple = aCouples[nIdx].split(/\s*=\s*/);
+        if (aCouple.length &gt; 1) {
+          oStorage[iKey = unescape(aCouple[0])] = unescape(aCouple[1]);
+          aKeys.push(iKey);
+        }
+      }
+      return oStorage;
+    };
+    this.configurable = false;
+    this.enumerable = true;
+  })());
+}
+</pre>
+
+<div class="note"><strong>Note :</strong> La taille maximale des données est limitée par la capacité des cookies. Avec cet algorithme, utilisez les fonctions <code>localStorage.setItem()</code> et <code>localStorage.removeItem()</code> pour ajouter, changer ou supprimer une clé. L’utilisation des méthodes <code>localStorage.yourKey = yourValue;</code> et <code>delete localStorage.yourKey;</code> pour définir ou supprimer une clé n’est <strong>pas sécurisée avec ce code.</strong> Vous pouvez également changer son nom et l’utiliser pour gérer uniquement les cookies indépendamment de l’objet <code>localStorage</code>.</div>
+
+<div class="note"><strong>Note :</strong> En remplaçant <code>"; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"</code> par <code>"; path=/"</code> (et en changeant le nom de l’objet), cela deviendra un polyfill pour <code>sessionStorage</code> plutôt que pour <code>localStorage</code>. Cependant, cette implémentation partagera les valeurs stockées entre les fenêtres et onglets du navigateur (et sera nettoyée seulement quand toutes les fenêtres du navigateur sont fermées), tandis qu’une implémentation fidèle de <code>sessionStorage</code> restreint les valeurs stockées au {{ Glossary("Browsing_context", "contexte de navigation") }} actuel uniquement.</div>
+
+<p>Voici une autre imitation, moins exacte, de l’objet <code>localStorage</code>. Elle est plus simple que la version précédente, mais est compatible avec les navigateur plus anciens comme Internet Explorer &lt; 8 (<strong>testé et vérifié même avec Internet Explorer 6</strong>). Ce code utilise également les cookies.</p>
+
+<pre class="brush:js">if (!window.localStorage) {
+  window.localStorage = {
+    getItem: function (sKey) {
+      if (!sKey || !this.hasOwnProperty(sKey)) { return null; }
+      return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&amp;") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1"));
+    },
+    key: function (nKeyId) {
+      return unescape(document.cookie.replace(/\s*\=(?:.(?!;))*$/, "").split(/\s*\=(?:[^;](?!;))*[^;]?;\s*/)[nKeyId]);
+    },
+    setItem: function (sKey, sValue) {
+      if(!sKey) { return; }
+      document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
+      this.length = document.cookie.match(/\=/g).length;
+    },
+    length: 0,
+    removeItem: function (sKey) {
+      if (!sKey || !this.hasOwnProperty(sKey)) { return; }
+      document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
+      this.length--;
+    },
+    hasOwnProperty: function (sKey) {
+      return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&amp;") + "\\s*\\=")).test(document.cookie);
+    }
+  };
+  window.localStorage.length = (document.cookie.match(/\=/g) || window.localStorage).length;
+}
+</pre>
+
+<div class="note"><strong>Note :</strong> La taille maximale des données est limitée par les capacités des cookies. Avec cet algorithme, utilisez les fonctions <code>localStorage.getItem()</code>, <code>localStorage.setItem()</code>, et <code>localStorage.removeItem()</code> pour récupérer, ajouter, modifier ou supprimer une clé. L’utilsation de la méthode <code>localStorage.yourKey</code> pour récupérer, définir, ou supprimer une clé <strong>n’est pas possible avec ce code</strong>. Vous pouvez également changer son nom et l’utiliser pour gérer les cookies indépendamment de l’objet <code>localStorage</code>.</div>
+
+<div class="note"><strong>Note :</strong> En remplaçant la chaîne <code>"; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"</code> par <code>"; path=/"</code> (et en changeant le nom de l’objet), cela deviendra un polyfill pour <code>sessionStorage</code> plutôt que pour <code>localStorage</code>. Cependant, cette implémentation partagera les valeurs stockées au travers des onglets et fenêtres du navigateur (et seront supprimée uniquement quand toutes les fenêtres du navigateur seront fermées), alors qu’une implémentation pleinement compatible avec <code>sessionStorage</code> restreint les valeurs sauvegardées au {{ Glossary("Browsing_context", "contexte de navigation") }} actuel uniquement.</div>
+
+<h3 id="Compatibilité_et_relation_avec_globalStorage">Compatibilité et relation avec globalStorage</h3>
+
+<p><code>localStorage</code> est équivalent à <code>globalStorage[location.hostname]</code>, à la différence qu’il est rattaché à une {{ Glossary("origine") }} HTML5, et que <code>localStorage</code> est une instance de <code>Storage</code>, contrairement à <code>globalStorage[location.hostname]</code> qui est une instance de <code>StorageObsolete</code> (qui est abordé ci-dessous). Par exemple, <a class="external" href="http://example.com" rel="freelink">http://example.com</a> ne sera pas capable d’accéder au même objet <code>localStorage</code> que <a class="link-https" href="https://example.com" rel="freelink">https://example.com</a> mais il pourront accéder au même élément <code>globalStorage</code>. <code>localStorage</code> est une interface standard alors que <code>globalStorage</code> n’est pas standard. Ainsi, vous ne devriez pas vous fier à cette dernière.</p>
+
+<p>Veuillez noter que définir une propriété sur <code>globalStorage[location.hostname]</code> n’entraîne <strong>pas</strong> sa définition sur <code>localStorage</code>, et qu’étendre <code>Storage.prototype</code> n’affecte pas les objets <code>globalStorage</code> ; pour faire ainsi, c’est <code>StorageObsolete.prototype</code> qu’il faut étendre.</p>
+
+<h2 id="Format_de_stockage">Format de stockage</h2>
+
+<p>Les clés et les valeurs de <code>Storage</code> sont stockées au format {{ DOMxRef("DOMString") }} UTF-16, qui utilise 2 octets par caractère.</p>
diff --git a/files/fr/web/api/storage/removeitem/index.html b/files/fr/web/api/storage/removeitem/index.html
new file mode 100644
index 0000000000..f978fceb95
--- /dev/null
+++ b/files/fr/web/api/storage/removeitem/index.html
@@ -0,0 +1,83 @@
+---
+title: Storage.removeItem()
+slug: Web/API/Storage/removeItem
+tags:
+  - API
+  - Méthode
+  - Stockage
+  - Stockage Web
+translation_of: Web/API/Storage/removeItem
+---
+<p>{{APIRef("Web Storage API")}}</p>
+
+<p>La méthode <strong><code>removeItem()</code></strong> de l'interface {{domxref("Storage")}} , lorsque vous lui passez une clé en argument, va supprimer la ressource avec le nom de clé correspondant du storage. L'interface <strong><code>Storage</code></strong> de l'API <a href="/fr/docs/Web/API/Web_Storage_API">Web Storage API</a> fournit des accès particuliers dans les domaines des stockages locaux et de sessions.</p>
+
+<p>Si aucun élement n'est donné en paramètre <code>nomCle</code>, cette méthode ne fait rien.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><em>storage</em>.removeItem(<em>nomCle</em>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><em><u>nomCle</u></em></dt>
+ <dd>Un {{domxref("DOMString")}} contenant le nom de la clé que vous voulez supprimer.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>La fonction suivante crée trois données dans le stockage local, puis va supprimer la donnée image.</p>
+
+<pre class="brush: js notranslate">function populateStorage() {
+  localStorage.setItem('bgcolor', 'red');
+  localStorage.setItem('font', 'Helvetica');
+  localStorage.setItem('image', 'myCat.png');
+
+  localStorage.removeItem('image');
+}</pre>
+
+<p>Nous pouvons également faire ceci avec le stockage de session.</p>
+
+<pre class="brush: js notranslate">function populateStorage() {
+  <code>sessionStorage</code>.setItem('bgcolor', 'red');
+  <code>sessionStorage</code>.setItem('font', 'Helvetica');
+  <code>sessionStorage</code>.setItem('image', 'myCat.png');
+
+  <code>sessionStorage</code>.removeItem('image');
+}</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Pour voir ce code en fonctionnement, voir <a href="https://mdn.github.io/dom-examples/web-storage/">Web Storage Demo</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">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-removeitem', 'Storage.removeItem')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Storage.removeItem")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p><a href="https://developer.mozilla.org/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utilisation de l'API de stockage Web</a></p>
diff --git a/files/fr/web/api/storage/setitem/index.html b/files/fr/web/api/storage/setitem/index.html
new file mode 100644
index 0000000000..d36e170886
--- /dev/null
+++ b/files/fr/web/api/storage/setitem/index.html
@@ -0,0 +1,139 @@
+---
+title: Storage.setItem()
+slug: Web/API/Storage/setItem
+tags:
+  - API
+  - Méthode
+  - Stockage
+  - Stockage Web
+translation_of: Web/API/Storage/setItem
+---
+<p>{{APIRef("Web Storage API")}}</p>
+
+<p>La méthode <code>setItem()</code> de l'interface {{domxref("Storage")}}, lorsque lui sont passées le duo clé-valeur, les ajoute à l'emplacement de stockage, sinon elle met à jour la valeur si la clé existe déjà.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>storage</em>.setItem(<em>nomClé</em>, <em>valeurClé</em>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><em>nomClé</em></dt>
+ <dd>C'est une {{domxref("DOMString")}} contenant le nom de la clé que l'on souhaite créer/modifier.</dd>
+ <dt><em>valeurClé</em></dt>
+ <dd>C'est une {{domxref("DOMString")}} contenant la valeur associée à son nom de clé que l'on souhaite créer/modifier.</dd>
+</dl>
+
+<h3 id="Retourne">Retourne</h3>
+
+<p><em>Aucune valeur de retour.</em></p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p><code>setItem()</code> peut émettre une exception si l'emplacement de stockage est plein. En particulier pour Safari mobile (depuis iOS 5), elle émettra une exception si l'utilisateur passe en navigation privée (contrairement aux autres navigateur qui autorisent le stockage même en navigation privée en utilisant un conteneur de données séparé, Safari met son quota de stockage à 0 octets).<br>
+ Par conséquent les développeurs devraient être sûrs de toujours de <strong>systématiquement capturer toute possible exception venant de setItem().</strong></p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>La fonction suivante crée trois éléments à l'intérieur du stockage local.</p>
+
+<pre class="brush: js">function remplissageStockage() {
+  localStorage.setItem('bgcolor', 'red');
+  localStorage.setItem('font', 'Helvetica');
+  localStorage.setItem('image', 'myCat.png');
+}</pre>
+
+<div class="note">
+<p><strong>Note</strong> : Pour voir ceci utilisé dans un exemple concret, regardez notre <a href="https://mdn.github.io/dom-examples/web-storage/">Web Storage Demo</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">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-setitem', 'Storage.setItem')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité">Compatibilité</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>localStorage</td>
+   <td>4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>3.5</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>sessionStorage</td>
+   <td>5</td>
+   <td>{{CompatUnknown}}</td>
+   <td>2</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>2.1</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>8</td>
+   <td>11</td>
+   <td>iOS 3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Tous les navigateurs ont des niveaux de capacité de stockage variables, que ce soit pour localStorage ou sessionStorage. Pour un test de l'ensemble des capacités des différents navigateurs <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">voir ici</a>.</p>
+
+<div class="note">
+<p><strong>Note : </strong>Depuis iOS 5.1, Safari Mobile stocke les données liées à localStorage dans un fichier de cache qui est sujet à un nettoyage occasionnel par ordre du système d'exploitation, surtout lorsqu'il reste peu de place.</p>
+</div>
+
+<h2 id="À_voir_également">À voir également</h2>
+
+<p><a href="https://developer.mozilla.org/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utilisation de l'API de stockage web</a></p>
diff --git a/files/fr/web/api/storage_api/index.html b/files/fr/web/api/storage_api/index.html
new file mode 100644
index 0000000000..6ba5169e7e
--- /dev/null
+++ b/files/fr/web/api/storage_api/index.html
@@ -0,0 +1,118 @@
+---
+title: Storage API
+slug: Web/API/Storage_API
+translation_of: Web/API/Storage_API
+---
+<p>{{securecontext_header}}{{DefaultAPISidebar("Storage")}}</p>
+
+<p>Le standard <em>Storage</em> définit un système de stockage commun et partagé utilisable par toutes les API et technologies qui stockent des données accessibles par le contenu pour des sites web individuels. L’API Storage donne aux codes des sites la capacité de déterminer quelle quantité d’espace ils peuvent utiliser, combien ils utilisent déjà, et même contrôler s’ils ont besoin ou non d’être alertés avant que l’{{Glossary("user agent", "agent utilisateur")}} n’élimine des données de site afin de faire de la place pour autre chose.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<p>Le stockage de site — les données stockées pour un site web qui sont gérées par le standard Storage — inclut :</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/IndexedDB_API">les bases de données IndexedDB</a> ;</li>
+ <li><a href="/fr/docs/Web/API/Cache">les données de l’API Cache</a> ;</li>
+ <li><a href="/fr/docs/Web/API/Service_Worker_API">les enregistrements de Service Worker</a> ;</li>
+ <li><a href="/fr/docs/Web/API/Web_Storage_API">les données de l’API Web Storage</a> gérées via {{domxref("window.localStorage")}} ;</li>
+ <li>les informations de l’état d’historique enregistrées via {{domxref("History.pushState()")}} ;</li>
+ <li><a href="/fr/docs/Web/HTML/Using_the_application_cache">les caches d’application</a> ;</li>
+ <li><a href="/fr/docs/Web/API/Notifications_API">les données de notification</a> ;</li>
+ <li>d’autres types de données accessibles par le site et spécifiques au site qui pourraient être maintenues.</li>
+</ul>
+
+<h2 id="Unités_de_stockage_de_site">Unités de stockage de site</h2>
+
+<p>Le système de stockage de site décrit par le standard Storage, et avec lequel on interagit en utilisant l’API Storage, consiste en une seule <strong>unité de stockage de site</strong> pour chaque {{Glossary("origin", "origine")}}. In essence, chaque site web ou application web a sa propre unité de stockage dans laquelle ses données sont placées. Le diagramme ci-dessous présente un bassin de stockage de site contenant trois unités de stockage, montrant que les unités de stockage peuvent contenir différents types de données et avoir différents quotas (limites maximum de stockage).</p>
+
+<p><img alt="A diagram showing how the site storage pool consists of multiple storage units that contain data from various APIs as well as possible unused space left before the quota is reached." src="https://mdn.mozillademos.org/files/14379/StorageUnits.png" style="height: 412px; width: 600px;"></p>
+
+<ul>
+ <li>L’origine 1 a des données Web Storage ainsi que des données IndexedDB, mais a également un peu d’espace libre restant ; son utilisation actuelle n’a pas encore atteint son quota.</li>
+ <li>L’origine 2 n’a pas encore de données stockées ; c’est simplement une boîte vide en attente de contenu. Cette origine, toutefois, a un quota inférieur à celui des deux autres. Il peut s’agir d’un site visité moins souvent, ou d’un site connu pour avoir des besoins de stockage inférieurs.</li>
+ <li>L’unité de stockage de l’origine 3 est complètement remplie ; elle a atteint son quota et ne peut pas stocker de données supplémentaires sans que du contenu existant soit supprimé.</li>
+</ul>
+
+<p>Les {{Glossary("User agent", "agents utilisateur")}} sont susceptibles d’utiliser diverses techniques pour déterminer le quota de différentes origines. Une des méthodes les plus probables — une que la spécification encourage spécifiquement, en fait — est de considérer la popularité et les niveaux d’utilisation de sites individuels pour déterminer quels doivent être leurs quotas. Il est également concevable que le navigateur puisse offrir une interface utilisateur pour personnaliser ces quotas.</p>
+
+<h2 id="Modes_de_boîte">Modes de boîte</h2>
+
+<p>Le stockage de données en lui-même, au sein de chaque unité de stockage, est appelé sa <strong>boîte</strong>. Chaque unité de stockage de site a exactement une boîte dans laquelle toutes ses données sont placées, et a une <strong>mode de boîte</strong> qui décrit la politique de conservation de données pour cette boîte. Il existe deux modes :</p>
+
+<dl>
+ <dt><code>"best-effort"</code></dt>
+ <dd>L’agent utilisateur essayera de conserver les données contenues dans la boîte aussi longtemps qu’il peut, <em>mais n’avertira pas l’utilisateur ou l’utilisatrice</em> si l’espace de stockage approche sa limite et s’il devient nécessaire de nettoyer la boîte afin de réduire la pression de stockage.</dd>
+ <dt><code>"persistent"</code></dt>
+ <dd>L’agent utilisateur essayera de conserver les données aussi longtemps que possible, nettoyant toutes les boîtes <code>"best-effort"</code> avant de considérer le nettoyage d’une boîte marquée <code>"persistent"</code>. S’il devient nécessaire de considérer le nettoyage d’une boîte persistante, l’agent utilisateur notifiera l’utilisateur ou l’utilisatrice et fournira un moyen de nettoyer une ou plusieurs boîtes persistantes selon le besoin.</dd>
+</dl>
+
+<p>Modifier le mode de boîte d’une origine nécessite la permission d’utiliser la fonctionnalité <code>"persistent-storage"</code>.</p>
+
+<h2 id="Persistance_et_nettoyage_des_données">Persistance et nettoyage des données</h2>
+
+<p>Si le site ou l’application a la permission sur la fonctionnalité <strong><code>"persistent-storage"</code></strong>, il ou elle peut utiliser la méthode {{domxref("StorageManager.persist()")}} pour faire la requête que sa boîte devienne persistante. Il est également possible pour l’agent utilisateur de décider de rendre l’unité de stockage du site persistante sur la base de caractéristiques d’usage ou d’autres métriques. Les drapeaux (<em>flags</em>), algorithmes et types associés à la permission <code>"persistent-storage"</code>, sont tous positionnés sur les valeurs par défaut standard pour une permission, excepté que <strong>l’état de permission</strong> doit être le même sur l’ensemble de l’origine, et que si l’état de permission n’est pas <code>"granted"</code> (c’est-à-dire que si, pour une raison ou une autre, l’accès à la fonctionnalité de stockage persistant a été refusé), le mode de boîte de l’unité de stockage de site de l’origine est toujours <code>"best-effort"</code>.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Voir <a href="/fr/docs/Web/API/Permissions_API/Using_the_Permissions_API">Using the Permissions API</a> pour plus de détails sur l’obtension et la gestion des permissions.</p>
+</div>
+
+<p>Lors du nettoyage d’unités de stockage de site, la boîte d’une origine est traitée comme une seule entité ; si l’agent utilisateur a besoin de la nettoyer et si l’utilisateur ou l’utilisatrice approuve, le stockage de données entier est nettoyé plutôt que de fournir un moyen de nettoyer seulement les données d’une API individuelle.</p>
+
+<p>Si une boîte est marquée <code>"persistent"</code>, le contenu ne sera pas nettoyé par l’agent utilisateur sans que l’origine des données elle-même, ou l’utilisateur ou l’utilisatrice, ne le fasse spécifiquement. Cela inclut des scénarios tels que l’utilisateur ou l’utilisatrice choisissant une option « nettoyer le cache » or « nettoyer l’historique récent ». La permission de supprimer des unités de stockage persistantes sera spécifiquement demandée à l’utilisateur ou à l’utilisatrice.</p>
+
+<h2 id="Estimations_de_quota_et_d’usage">Estimations de quota et d’usage</h2>
+
+<p>L’agent utilisateur détermine, à l’aide du mécanisme de son choix, la quantité maximale de stockage qu’un site donné peut utiliser. Ce maximum est le <strong>quota</strong> de l’origine. La quantité de cet espace utilisée par le site est appelée son <strong>usage</strong>. Ces deux valeurs sont des estimations ; elles sont imprécise pour plusieurs raisons :</p>
+
+<ul>
+ <li>Les agents utilisateur sont encouragés à dissimuler la taille exacte des données utilisées par une origine donnée, pour empêcher que ces valeurs soient utilisées à des fins de fingerprinting.</li>
+ <li>La dé-duplication, la compression et d’autres méthodes pour réduire la taille physique des données stockées peuvent être utilisées.</li>
+ <li>Les quotas sont des estimations prudentes de l’espace disponible pour l’utilisation par l’origine, et devraient être inférieurs à l’espace disponible sur l’appareil pour tenter d’empêcher les débordements.</li>
+</ul>
+
+<p>Les agents utilisateurs peuvent utiliser toute méthode de leur choix pour déterminer la taille du quota de l’origine, et sont encouragés par la spécification à fournir de l’espace supplémentaire aux sites populaires ou fréquemment visités.</p>
+
+<p>Pour déterminer les valeurs de quota et d’usage estimées pour une origine donnée, utilisez la méthode {{domxref("StorageManager.estimate", "navigator.storage.estimate()")}}, qui retourne une promesse qui, une fois résolue, reçoit un {{domxref("StorageEstimate")}} qui contient ces nombres. Par exemple :</p>
+
+<pre class="brush: js">navigator.storage.estimate().then(estimate =&gt; {
+  // estimate.quota est le quota estimé
+  // estimate.usage est le nombre estimé d’octets utilisés
+});</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('Storage')}}</td>
+   <td>{{Spec2('Storage')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<h3 id="StorageManager"><code>StorageManager</code></h3>
+
+<div>
+<div class="hidden">La table de compatibilité sur cette page est générée à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.StorageManager")}}</p>
+</div>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("NavigatorStorage.storage", "navigator.storage")}}</li>
+ <li>{{domxref("StorageManager")}} (l’objet renvoyé par <code>navigator.storage</code>)</li>
+ <li><a href="/fr/docs/Web/API/Permissions_API/Using_the_Permissions_API">Utiliser l’API Permissions</a></li>
+</ul>
diff --git a/files/fr/web/api/storageestimate/index.html b/files/fr/web/api/storageestimate/index.html
new file mode 100644
index 0000000000..e29134eaea
--- /dev/null
+++ b/files/fr/web/api/storageestimate/index.html
@@ -0,0 +1,53 @@
+---
+title: StorageEstimate
+slug: Web/API/StorageEstimate
+translation_of: Web/API/StorageEstimate
+---
+<div>{{securecontext_header}}{{APIRef("Storage")}}</div>
+
+<p>Le dictionnaire <strong><code>StorageEstimate</code></strong> est utilisé par le {{domxref("StorageManager")}} pour fournir des estimations de taille du stockage de données d’un site ou d’une application et de la quantité actuellement utilisée. La méthod {{domxref("StorageManager.estimate", "estimate()")}} renvoie un objet qui se conforme à ce dictionnaire quand sa {{jsxref("Promise")}} se résoud.</p>
+
+<p>Ces valeurs sont seulement des estimations pour différentes raisons, telles que la performance, et la prévention de l’utilisation des informations de capacité de stockage à des fins de fingerprinting. Voir les pages de propriétés individuelles pour plus de détails.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Actuellement, ce dictionnaire a toujours les deux propriétés suivantes définies.</em></p>
+
+<dl>
+ <dt>{{domxref("StorageEstimate.quota", "quota")}} {{securecontext_inline}}</dt>
+ <dd>Une valeur numérique qui fournit une approximation prudente du stockage total que l’appareil ou l’ordinateur met à disposition de l’origine ou de l’application web. Il est possible que plus d’espace que la valeur indiquée soit disponible, cependant vous ne pouvez pas supposer que c’est le cas.</dd>
+ <dt>{{domxref("StorageEstimate.usage", "usage")}} {{securecontext_inline}}</dt>
+ <dd>Une valeur numérique donnant une approximation de la quantité de stockage actuellement utilisée par le site ou l’application, parmi l’espace disponible indiqué par <code>quota</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">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Storage', '#dictdef-storageestimate', 'StorageEstimate')}}</td>
+   <td>{{Spec2('Storage')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">La table de compatibilité sur cette page est générée à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request.</em></div>
+
+<p>{{Compat("api.StorageEstimate")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Storage_API">l’API Storage</a></li>
+ <li>{{domxref("StorageManager")}}</li>
+ <li>{{domxref("StorageManager.estimate()")}}</li>
+ <li>{{domxref("NavigatorStorage.storage", "navigator.storage")}}</li>
+</ul>
diff --git a/files/fr/web/api/storagemanager/estimate/index.html b/files/fr/web/api/storagemanager/estimate/index.html
new file mode 100644
index 0000000000..8094ee7560
--- /dev/null
+++ b/files/fr/web/api/storagemanager/estimate/index.html
@@ -0,0 +1,78 @@
+---
+title: StorageManager.estimate()
+slug: Web/API/StorageManager/estimate
+translation_of: Web/API/StorageManager/estimate
+---
+<p>{{securecontext_header}}{{APIRef("Storage")}}</p>
+
+<p>La méthode <strong><code>estimate()</code></strong> de l’interface {{domxref("StorageManager")}} demande au gestionnaire de stockage d’obtenir des informations de quota et d’usage pour l’origine actuelle. Cette méthode opère de manière asynchrone, elle renvoie donc une {{jsxref("Promise")}} qui se résoud une fois que l’information est disponible. La fonction gérant la résolution de la promesse reçoit en entrée un {{domxref("StorageEstimate")}} avec les données de quota et d’usage.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>estimatePromise</em> = <em>StorageManager</em>.estimate();</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Aucun.</p>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une {{jsxref('Promise')}} qui se résoud en un objet qui se conforme au dictionnaire {{domxref('StorageEstimate')}}. Ce dictionnaire contient des estimations de la quantité d’espace disponible à l’origine ou à l’application (dans {{domxref("StorageEstimate.quota")}}), ainsi que la quantité d’espace actuellement utilisé (dans {{domxref("StorageEstimate.usage")}}). Ces nombres ne sont pas exacts ; entre la compression, la dé-duplication, et l’obfuscation pour des raisons de sécurité, ils ne seront pas précis.</p>
+
+<p>Il est possible de constater que le <code>quota</code> varie d’application en application, basé sur des facteurs tels que la fréquence à laquelle l’utilisateur ou l’utilisatrice la visite, des données de popularité de sites bien connus, et ainsi de suite.</p>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<p>Dans cet exemple, nous obtenons des estimations d’usage et présentons le pourcentage de capacité de stockage actuellement utilisé à l’utilisateur ou à l’utilisatrice.</p>
+
+<h3 id="Contenu_HTML">Contenu HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  Vous utilisez actuellement environ &lt;span id="percent"&gt;
+  &lt;/span&gt;% de votre espace disponible.
+&lt;/p&gt;
+</pre>
+
+<h3 id="Contenu_JavaScript">Contenu JavaScript</h3>
+
+<pre class="brush: js">navigator.storage.estimate().then(function(estimate) {
+  document.getElementById("percent").textContent =
+      (estimate.usage / estimate.quota).toFixed(2);
+});
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{ EmbedLiveSample('Example', 600, 40) }}</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('Storage','#dom-storagemanager-estimate','estimate()')}}</td>
+   <td>{{Spec2('Storage')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">La table de compatibilité sur cette page est générée à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request.</em></div>
+
+<p>{{Compat("api.StorageManager.estimate")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>l’API Storage</li>
+ <li>{{domxref("Storage")}}, l’objet renvoyé par {{domxref("Window.localStorage")}}</li>
+ <li>{{domxref("StorageManager")}}</li>
+ <li>{{domxref("navigator.storage")}}</li>
+</ul>
diff --git a/files/fr/web/api/storagemanager/index.html b/files/fr/web/api/storagemanager/index.html
new file mode 100644
index 0000000000..afc0bd77ad
--- /dev/null
+++ b/files/fr/web/api/storagemanager/index.html
@@ -0,0 +1,55 @@
+---
+title: StorageManager
+slug: Web/API/StorageManager
+tags:
+  - API
+  - Interface
+  - NeedsTranslation
+  - Persistence
+  - Quotas
+  - Reference
+  - Secure context
+  - Storage
+  - Storage API
+  - StorageManager
+  - TopicStub
+  - Usage
+translation_of: Web/API/StorageManager
+---
+<p>{{securecontext_header}}{{SeeCompatTable}}{{APIRef("Storage")}}</p>
+
+<p>The <strong><code>StorageManager</code></strong> interface of the the <a href="/en-US/docs/Web/API/Storage_API">Storage API</a> provides an interface for managing persistance permissions and estimating available storage. You can get a reference to this interface using either {{domxref("navigator.storage")}} or {{domxref("WorkerNavigator.storage")}}.</p>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+	<dt>{{domxref("StorageManager.estimate()")}} {{securecontext_inline}}</dt>
+	<dd>Returns a {{domxref("StorageEstimate")}} object containing usage and quota numbers for your origin.</dd>
+	<dt>{{domxref("StorageManager.persist()")}} {{securecontext_inline}}</dt>
+	<dd>Returns a {{jsxref('Promise')}} that resolves to <code>true</code> if the user agent is able to persist your site's storage.</dd>
+	<dt>{{domxref("StorageManager.persisted()")}} {{securecontext_inline}}</dt>
+	<dd>Returns a {{jsxref('Promise')}} that resolves to <code>true</code> if persistence has already been granted for your site's storage.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+	<tbody>
+		<tr>
+			<th scope="col">Specification</th>
+			<th scope="col">Status</th>
+			<th scope="col">Comment</th>
+		</tr>
+		<tr>
+			<td>{{SpecName('Storage','#storagemanager','StorageManger')}}</td>
+			<td>{{Spec2('Storage')}}</td>
+			<td>Initial definition.</td>
+		</tr>
+	</tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.StorageManager")}}</p>
diff --git a/files/fr/web/api/storagemanager/persist/index.html b/files/fr/web/api/storagemanager/persist/index.html
new file mode 100644
index 0000000000..acb9fad8db
--- /dev/null
+++ b/files/fr/web/api/storagemanager/persist/index.html
@@ -0,0 +1,53 @@
+---
+title: StorageManager.persist()
+slug: Web/API/StorageManager/persist
+translation_of: Web/API/StorageManager/persist
+---
+<p>{{securecontext_header}}{{APIRef("Storage")}}{{SeeCompatTable}}</p>
+
+<p><span class="seoSummary">La méthode <strong><code>persist()</code></strong> de l’interface {{domxref("StorageManager")}} fait une demande de permission d’utiliser un stockage persistant, et renvoie une {{jsxref('Promise')}} qui se résoud en <code>true</code> si la permission est accordée et le mode de boîte est persistant, et <code>false</code> dans le cas contraire.</span></p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">navigator.storage.persist().then(function(persistent) { ... })</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Aucun.</p>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une {{jsxref('Promise')}} qui se résoud en un {{jsxref('Boolean')}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">if (navigator.storage &amp;&amp; navigator.storage.persist)
+  navigator.storage.persist().then(function(persistent) {
+    if (persistent)
+      console.log("Le stockage ne sera pas nettoyé sauf en cas d’action humaine explicite");
+    else
+      console.log("Le stockage peut être nettoyé par l’UA en cas de pression de stockage.");
+  });</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('Storage','#dom-storagemanager-persist','persist')}}</td>
+   <td>{{Spec2('Storage')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">La table de compatibilité sur cette page est générée à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request.</em></div>
+
+<p>{{Compat("api.StorageManager.persist")}}</p>
diff --git a/files/fr/web/api/storagemanager/persisted/index.html b/files/fr/web/api/storagemanager/persisted/index.html
new file mode 100644
index 0000000000..97b627fdcc
--- /dev/null
+++ b/files/fr/web/api/storagemanager/persisted/index.html
@@ -0,0 +1,53 @@
+---
+title: StorageManager.persisted()
+slug: Web/API/StorageManager/persisted
+translation_of: Web/API/StorageManager/persisted
+---
+<p>{{securecontext_header}}{{APIRef("Storage")}}{{SeeCompatTable}}</p>
+
+<p><span class="seoSummary">La propriété <strong><code>persisted</code></strong> de l’interface {{domxref("StorageManager")}} renvoie une {{jsxref('Promise')}} qui se résoud en <code>true</code> si le mode de boîte est est persistant pour le stockage de votre site.</span></p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">navigator.storage.persisted().then(function(persistent) { ... })</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Aucun.</p>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une {{jsxref('Promise')}} qui se résoud en un {{jsxref('Boolean')}}.</p>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js"><code>if (navigator.storage &amp;&amp; navigator.storage.persist)
+  navigator.storage.persisted().then(function(persistent) {
+    if (persistent)
+      console.log("Le stockage ne sera pas nettoyé sauf en cas d’action humaine explicite");
+    else
+      console.log("Le stockage peut être nettoyé par l’UA en cas de pression de stockage.");
+  });</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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Storage','#dom-storagemanager-persisted','persisted')}}</td>
+   <td>{{Spec2('Storage')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">La table de compatibilité sur cette page est générée à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request.</em></div>
+
+<p>{{Compat("api.StorageManager.persisted")}}</p>
diff --git a/files/fr/web/api/streams_api/index.html b/files/fr/web/api/streams_api/index.html
new file mode 100644
index 0000000000..4097ffcb7c
--- /dev/null
+++ b/files/fr/web/api/streams_api/index.html
@@ -0,0 +1,145 @@
+---
+title: Streams API
+slug: Web/API/Streams_API
+translation_of: Web/API/Streams_API
+---
+<div>{{SeeCompatTable}}{{APIRef("Streams")}}</div>
+
+<p class="summary">L'API Streams permet à JavaScript d'accèder par programmation aux flux de données reçus sur le réseau et de les traiter selon les souhaits du développeur.</p>
+
+<h2 id="Concepts_et_utilisation">Concepts et utilisation</h2>
+
+<p>Le Streaming implique de segmenter une ressource que vous souhaitez recevoir sur le réseau et de la séparer en plus petits morceaux, puis de la traiter petit à petit. C'est une chose que font les navigateurs quand ils reçoivent des ressources pour les afficher sur les pages web — le buffer d'une vidéo est progressivement disponible à la lecture, tout comme parfois vous verrez des images s'afficher progressivement durant leur chargement.</p>
+
+<p>Mais ceci n'a jamais été possible pour le javascript par le passé. Avant, si nous souhaitions traiter une ressource quel qu'en soit le type (qu'il s'agisse d'une vidéo, ou d'un fichier texte, etc.), il nous fallait télécharger le fichier en entier, attendre qu'il soit désérialisé en un format acceptable, pour alors traiter la totalité après l'avoir totalement reçu.</p>
+
+<p>Avec la mise à disposition des Streams en JavaScript, tout ceci a changé — vous pouvez maintenant commencer à traiter des données brutes petit à petit avec du Javascript dès qu'elles sont disponibles coté client, sans avoir besoin de générer un <em>buffer</em>, <em>string</em>, ou <em>blob</em>.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15817/Concept.png" style="display: block; height: 382px; margin: 0px auto; width: 1000px;"></p>
+
+<p>Il y a aussi d'autres avantages — vous pouvez détecter quand un flux commence ou prend fin, chaîner les flux entre eux, traiter les erreurs et annuler les flux si nécessaire et vous adapter à la vitesse de lecture du flux.</p>
+
+<p>L'usage basique des Streams s'articule autour de la mise à disposition des réponses sous forme de flux. Par exemple, la réponse {{domxref("Body")}} retourné par une requête <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch </a>réussie peut être exposée en tant que {{domxref("ReadableStream")}}, vous pourrez ainsi le lire en utilisant un lecteur créé par {{domxref("ReadableStream.getReader()")}}, l'annuler avec {{domxref("ReadableStream.cancel()")}}, etc.</p>
+
+<p>Un usage plus avancé consiste à créer son propre flux en utilisant le constructeur {{domxref("ReadableStream.ReadableStream", "ReadableStream()")}}, pour traiter par exemple les données à l'intérieur d'un <a href="/docs/Web/API/Service_Worker_API">service worker</a>.</p>
+
+<p>Vous pouvez aussi écrire des données vers les flux en utilisant {{domxref("WritableStream")}}.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Vous trouverez plus de détails sur la théorie et la mise en pratique des flux dans nos articles — <a href="/docs/Web/API/Streams_API/Concepts">Streams API concepts</a>, <a href="/docs/Web/API/Streams_API/Using_readable_streams">Using readable streams</a>, et <a href="/docs/Web/API/Streams_API/Using_writable_streams">Using writable streams</a>.</p>
+</div>
+
+<h2 id="Stream_interfaces">Stream interfaces</h2>
+
+<h3 id="Readable_streams">Readable streams</h3>
+
+<dl>
+ <dt>{{domxref("ReadableStream")}}</dt>
+ <dd>Correspond à un flux de données lisible. Il peut être utlisé afin de gérer les réponses des flux de l'<a href="/en-US/docs/Web/API/Fetch_API">API Fetch</a>, ou des flux définis par le développeur (cad. un constructeur  {{domxref("ReadableStream.ReadableStream", "ReadableStream()")}} personnalisé).</dd>
+ <dt>{{domxref("ReadableStreamDefaultReader")}}</dt>
+ <dd>Correspond à un lecteur par défaut pouvant être utilisé afin de lire un flux de données fourni par le réseau (cad. une requête fetch).</dd>
+ <dt>{{domxref("ReadableStreamDefaultController")}}</dt>
+ <dd>Correspond à un controlleur permettant de gérer l'état d'un {{domxref("ReadableStream")}} et le système de queue interne. Les controleurs par défaut sont à destination des flux qui ne sont pas des flux d'octets.</dd>
+</dl>
+
+<h3 id="Writable_streams">Writable streams</h3>
+
+<dl>
+ <dt>{{domxref("WritableStream")}}</dt>
+ <dd>Propose un standard d'abstraction afin d'écrire des flux de données vers une destination, ce qu'on appel un sink (un <em>aggregateur de flux</em>). Cet objet s'accompagne  d'un built-in backpressure et d'un système de queue.</dd>
+ <dt>{{domxref("WritableStreamDefaultWriter")}}</dt>
+ <dd>Correspond à un flux inscriptible par défaut pouvant être utilisé afin d'écire des chunks (plus petit morceaux) de données vers un flux inscriptible.</dd>
+ <dt>{{domxref("WritableStreamDefaultController")}}</dt>
+ <dd>Correspond à un controlleur permettant de gérer l'état d'un {{domxref("WritableStream")}}. Lors de la construction d'un <code>WritableStream</code>, le sink sous-jacent se voit attribuer une instance de <code>WritableStreamDefaultController</code> afin de pouvoir le manipuler.</dd>
+</dl>
+
+<h3 id="Related_stream_APIs_and_operations">Related stream APIs and operations</h3>
+
+<dl>
+ <dt>{{domxref("ByteLengthQueuingStrategy")}}</dt>
+ <dd>Fournit une stratégie intégrée de file d'attente basée sur la taille en octets, pouvant être utilisée lors de la construction de flux..</dd>
+ <dt>{{domxref("CountQueuingStrategy")}}</dt>
+ <dd>Fournit une stratégie intégrée de file d'attente basée sur le comptage des chunks, pouvant être utilisée lors de la construction de flux.</dd>
+</dl>
+
+<h3 id="Extensions_vers_dautres_APIs">Extensions vers d'autres APIs</h3>
+
+<dl>
+ <dt>{{domxref("Request")}}</dt>
+ <dd>Quand un nouvel objet <code>Request</code> est construit, vous pouvez lui passer un {{domxref("ReadableStream")}} dans la propriété <code>body</code> de son dictionnaire <code>RequestInit</code>. Cette <code>Request</code> peut alors être envoyée à un {{domxref("WindowOrWorkerGlobalScope.fetch()")}} pour initier l'appel vers le flux.</dd>
+ <dt>{{domxref("Body")}}</dt>
+ <dd>La réponse {{domxref("Body")}} retrouné par un <a href="/fr-FR/docs/Web/API/WindowOrWorkerGlobalScope/fetch">appel fetch</a> réussi est exposée par défaut comme un {{domxref("ReadableStream")}}, et peut être ratachée à un reader, etc.</dd>
+</dl>
+
+<h3 id="Interfaces_liées_aux_flux_doctets">Interfaces liées aux flux d'octets</h3>
+
+<div class="warning">
+<p><strong>Important</strong>: ces méthodes ne sont pas implémentés pour le moment, des questions ont été soulevées afin de déterminer si les détails des specs sont dans état suffisamment stable pour être implémentés. Ceci pourrait changer avec le temps.</p>
+</div>
+
+<dl>
+ <dt>{{domxref("ReadableStreamBYOBReader")}}</dt>
+ <dd>Correspond à un lecteur BYOB ("bring your own buffer") pouvant être utilisé pour lire des flux de données fourni par le développeur (c.a.d. un constructeur {{domxref("ReadableStream.ReadableStream", "ReadableStream()")}} personalisé).</dd>
+ <dt>{{domxref("ReadableByteStreamController")}}</dt>
+ <dd>Correspond à un controlleur permettant de manipuler l'état et la file d'attente interne d'un {{domxref("ReadableStream")}}. Les controlleurs de flux d'octets sont à usage des flux d'octets.</dd>
+ <dt>{{domxref("ReadableStreamBYOBRequest")}}</dt>
+ <dd>Correspond à un <em>pull</em> dans une requête {{domxref("ReadableByteStreamController")}}.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>We have created a directory of examples to go along with the Streams API documentation — see <a href="https://github.com/mdn/dom-examples/tree/master/streams">mdn/dom-examples/streams</a>. The examples are as follows:</p>
+
+<ul>
+ <li><a href="http://mdn.github.io/dom-examples/streams/simple-pump/">Simple stream pump</a>: This example shows how to consume a ReadableStream and pass its data to another.</li>
+ <li><a href="http://mdn.github.io/dom-examples/streams/grayscale-png/">Grayscale a PNG</a>: This example shows how a ReadableStream of a PNG can be turned into grayscale.</li>
+ <li><a href="http://mdn.github.io/dom-examples/streams/simple-random-stream/">Simple random stream</a>: This example shows how to use a custom stream to generate random strings, enqueue them as chunks, and then read them back out again.</li>
+ <li><a href="http://mdn.github.io/dom-examples/streams/simple-tee-example/">Simple tee example</a>: This example extends the Simple random stream example, showing how a stream can be teed and both resulting streams can be read independently.</li>
+ <li><a href="http://mdn.github.io/dom-examples/streams/simple-writer/">Simple writer</a>: This example shows how to to write to a writable stream, then decode the stream and write the contents to the UI.</li>
+ <li><a href="http://mdn.github.io/dom-examples/streams/png-transform-stream/">Unpack chunks of a PNG</a>: This example shows how <a href="https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream/pipeThrough"><code>pipeThrough()</code></a> can be used to transform a ReadableStream into a stream of other data types by transforming a data of a PNG file into a stream of PNG chunks.</li>
+</ul>
+
+<p>Examples from other developers:</p>
+
+<ul>
+ <li><a href="https://fetch-progress.anthum.com/">Progress Indicators with Streams, Service Workers, &amp; Fetch</a>.</li>
+</ul>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Streams')}}</td>
+   <td>{{Spec2('Streams')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<h3 id="ReadableStream">ReadableStream</h3>
+
+<p>{{Compat("api.ReadableStream")}}</p>
+
+<h3 id="WritableStream">WritableStream</h3>
+
+<p>{{Compat("api.WritableStream")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Streams_API/Concepts">Streams API concepts</a></li>
+ <li><a href="/en-US/docs/Web/API/Streams_API/Using_readable_streams">Using readable streams</a></li>
+ <li><a href="/en-US/docs/Web/API/Streams_API/Using_writable_streams">Using writable streams</a></li>
+</ul>
diff --git a/files/fr/web/api/stylesheet/disabled/index.html b/files/fr/web/api/stylesheet/disabled/index.html
new file mode 100644
index 0000000000..d338299bf1
--- /dev/null
+++ b/files/fr/web/api/stylesheet/disabled/index.html
@@ -0,0 +1,25 @@
+---
+title: StyleSheet.disabled
+slug: Web/API/StyleSheet/disabled
+translation_of: Web/API/StyleSheet/disabled
+---
+<div><font><font>{{APIRef("CSSOM")}}</font></font></div>
+
+<p><font><font>La </font></font><code><strong>StyleSheet.disabled</strong></code><font><font>propriété indique si la feuille de style est empêchée de demander le document. </font><font>Une feuille de style peut être désactivé en réglant manuellement cette propriété </font></font><code>true</code><font><font>ou si elle est une forme </font><font>inactive </font></font><a href="/en-US/docs/Web/CSS/Alternative_style_sheets"><font><font>feuille de style alternatif</font></font></a><font><font> . </font><font>Notez que </font></font><code>disabled == false</code><font><font>ne garantit pas la feuille de style est appliquée (il pourrait être supprimé du document, par exemple).</font></font></p>
+
+<h2 id="Syntax" name="Syntax"><font><font>Syntaxe</font></font></h2>
+
+<pre class="eval"><em><font><font>bool</font></font></em><font><font> = stylesheet.disabled
+</font></font></pre>
+
+<h2 id="Example" name="Example"><font><font>Exemple</font></font></h2>
+
+<pre><font><font>// si la feuille de style est désactivé ... </font></font><font><font>
+si (stylesheet.disabled) {</font></font><font><font>
+   // appliquer le style en ligne </font></font>
+}
+</pre>
+
+<h2 id="Specification" name="Specification"><font><font>spécification</font></font></h2>
+
+<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/stylesheets.html#StyleSheets-StyleSheet-disabled"><font><font>désactivée </font></font></a></p>
diff --git a/files/fr/web/api/stylesheet/href/index.html b/files/fr/web/api/stylesheet/href/index.html
new file mode 100644
index 0000000000..f1ff1da5ea
--- /dev/null
+++ b/files/fr/web/api/stylesheet/href/index.html
@@ -0,0 +1,51 @@
+---
+title: Stylesheet.href
+slug: Web/API/StyleSheet/href
+translation_of: Web/API/StyleSheet/href
+---
+<div><font><font>{{APIRef ("CSSOM")}}</font></font></div>
+
+<h2 id="Summary" name="Summary"><font><font>Résumé</font></font></h2>
+
+<p><font><font>Renvoie l'emplacement de la feuille de style.</font></font></p>
+
+<h2 id="Syntax" name="Syntax"><font><font>Syntaxe</font></font></h2>
+
+<pre class="eval"><em><font><font>Uri</font></font></em><font><font> = stylesheet.href
+</font></font></pre>
+
+<h3 id="Parameters" name="Parameters"><font><font>Paramètres</font></font></h3>
+
+<ul>
+ <li><code>uri</code><font><font> Est une chaîne contenant l'URI de la feuille de style.</font></font></li>
+</ul>
+
+<h2 id="Example" name="Example"><font><font>Exemple</font></font></h2>
+
+<pre><font><font> // sur une machine locale: </font></font><font><font>
+ &lt;Html&gt; </font></font><font><font>
+  &lt;Tête&gt; </font></font><font><font>
+   &lt;Link rel = "StyleSheet" href = "example.css" type = "text / css" /&gt; </font></font><font><font>
+   &lt;Script&gt; </font></font><font><font>
+    Function sref () { </font></font><font><font>
+     Alerte (document.styleSheets [0] .href); </font></font><font><font>
+    }</font></font><font><font>
+   &lt;/ Script&gt; </font></font><font><font>
+  &lt;/ Head&gt; </font></font><font><font>
+  &lt;Body&gt; </font></font><font><font>
+   &lt;Div class = "tonnerre"&gt; Thunder &lt;/ div&gt;</font></font><font><font>
+   &lt;Button onclick = "sref ()"&gt; ss &lt;/ button&gt;</font></font><font><font>
+  &lt;/ Body&gt; </font></font><font><font>
+ &lt;/ Html&gt;</font></font><font><font>
+// retourne "fichier: //// C: /Windows/Desktop/example.css</font></font>
+</pre>
+
+<h2 id="Notes" name="Notes"><font><font>Remarques</font></font></h2>
+
+<p><font><font>Si la feuille de style est une feuille de style liée, la valeur de son attribut est son emplacement. </font><font>Pour les feuilles de style en ligne, la valeur de cet attribut est </font></font><code>NULL</code><font><font>.</font></font></p>
+
+<p><font><font>Cette propriété est en lecture seule sur Firefox, Opera, Google Chrome et Safari, et elle est lue / écrite dans Internet Explorer.</font></font></p>
+
+<h2 id="Specification" name="Specification"><font><font>spécification</font></font></h2>
+
+<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/stylesheets.html#StyleSheets-StyleSheet-href"><font><font>Href </font></font></a></p>
diff --git a/files/fr/web/api/stylesheet/index.html b/files/fr/web/api/stylesheet/index.html
new file mode 100644
index 0000000000..3f79c427bc
--- /dev/null
+++ b/files/fr/web/api/stylesheet/index.html
@@ -0,0 +1,69 @@
+---
+title: StyleSheet
+slug: Web/API/StyleSheet
+tags:
+  - API
+  - CSS
+  - DOM
+  - Interface
+  - StyleSheet
+translation_of: Web/API/StyleSheet
+---
+<div>{{APIRef("CSSOM")}}</div>
+
+<p>Un objet qui implémente l'interface <code>StyleSheet</code> représente une seule feuille de style. Les feuilles de style CSS implémenteront également l'interface plus spécialisée {{domxref("CSSStyleSheet")}}.</p>
+
+<h2 id="Properties" name="Properties">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("StyleSheet.disabled")}}</dt>
+ <dd>Un booléen ({{domxref("Boolean")}}) indiquant si la feuille de style est appliquée ou non.</dd>
+ <dt>{{domxref("StyleSheet.href")}} {{readonlyInline}}</dt>
+ <dd>Une chaîne de caractères ({{domxref("DOMString")}}) représentant l'emplacement de la feuille de style.</dd>
+ <dt>{{domxref("StyleSheet.media")}} {{readonlyInline}}</dt>
+ <dd>Une {{domxref("MediaList")}} représentant le média de destination pour les informations de style.</dd>
+ <dt>{{domxref("StyleSheet.ownerNode")}} {{readonlyInline}}</dt>
+ <dd>Un objet {{domxref("Node")}} qui représente le nœud associant cette feuille de style avec le document courant.</dd>
+ <dt>{{domxref("StyleSheet.parentStyleSheet")}} {{readonlyInline}}</dt>
+ <dd>Un objet {{domxref("StyleSheet")}} qui inclut l'objet courant si ce dernier possède un parent ou <code>null</code> s'il n'y en a pas.</dd>
+ <dt>{{domxref("StyleSheet.title")}} {{readonlyInline}}</dt>
+ <dd>Une chaîne de caractères ({{domxref("DOMString")}}) indiquant le titre indicatif de la feuille de style courante.</dd>
+ <dt>{{domxref("StyleSheet.type")}} {{readonlyInline}}</dt>
+ <dd>Une chaîne de caractères {{domxref("DOMString")}} indiquant le langage de représentation pour cette feuille de style.</dd>
+</dl>
+
+<h2 id="Specification" name="Specification">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('CSSOM', '#stylesheet', 'StyleSheet')}}</td>
+   <td>{{Spec2('CSSOM')}}</td>
+   <td>Pas de changement depuis {{SpecName('DOM2 Style')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Style', 'stylesheets.html#StyleSheets-StyleSheet', 'StyleSheet')}}</td>
+   <td>{{Spec2('DOM2 Style')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.StyleSheet")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("CSSStyleSheet")}}</li>
+</ul>
diff --git a/files/fr/web/api/stylesheet/media/index.html b/files/fr/web/api/stylesheet/media/index.html
new file mode 100644
index 0000000000..89c03f7438
--- /dev/null
+++ b/files/fr/web/api/stylesheet/media/index.html
@@ -0,0 +1,35 @@
+---
+title: StyleSheet.media
+slug: Web/API/StyleSheet/media
+translation_of: Web/API/StyleSheet/media
+---
+<div><font><font>{{APIRef ("CSSOM")}}</font></font></div>
+
+<h2 id="Summary" name="Summary"><font><font>Résumé</font></font></h2>
+
+<p><strong><font><font>Media</font></font></strong><font><font> spécifie le support de destination prévu pour les informations de style.</font></font></p>
+
+<h2 id="Syntax" name="Syntax"><font><font>Syntaxe</font></font></h2>
+
+<pre class="eval"><em><font><font>Medium</font></font></em><font><font> = stylesheet.media</font></font><font><font>
+Stylesheet.media = </font></font><em><font><font>medium</font></font></em>
+</pre>
+
+<h2 id="Parameters" name="Parameters"><font><font>Paramètres</font></font></h2>
+
+<ul>
+ <li><code>medium</code><font><font> Est une chaîne décrivant un seul moyen ou une liste séparée par des virgules.</font></font></li>
+</ul>
+
+<h2 id="Example" name="Example"><font><font>Exemple</font></font></h2>
+
+<pre><font><font>&lt;Link rel = "StyleSheet" href = "document.css" type = "text / css" media = "screen" /&gt;
+</font></font></pre>
+
+<h2 id="Notes" name="Notes"><font><font>Remarques</font></font></h2>
+
+<p><font><font>La valeur par défaut pour les médias est "écran".</font></font></p>
+
+<h2 id="Specification" name="Specification"><font><font>spécification</font></font></h2>
+
+<p><font><font>DOM Styles de niveau 2 - FEUILLE DE STYLES</font></font></p>
diff --git a/files/fr/web/api/stylesheet/ownernode/index.html b/files/fr/web/api/stylesheet/ownernode/index.html
new file mode 100644
index 0000000000..b1f3d9c1e3
--- /dev/null
+++ b/files/fr/web/api/stylesheet/ownernode/index.html
@@ -0,0 +1,41 @@
+---
+title: StyleSheet.ownerNode
+slug: Web/API/StyleSheet/ownerNode
+translation_of: Web/API/StyleSheet/ownerNode
+---
+<div><font><font>{{APIRef ("CSSOM")}}</font></font></div>
+
+<h2 id="Summary" name="Summary"><font><font>Résumé</font></font></h2>
+
+<p><strong><font><font>OwnerNode</font></font></strong><font><font> renvoie le noeud qui associe cette feuille de style au document.</font></font></p>
+
+<h2 id="Syntax" name="Syntax"><font><font>Syntaxe</font></font></h2>
+
+<pre class="eval"><em><font><font>ObjRef</font></font></em><font><font> = stylesheet.ownerNode
+</font></font></pre>
+
+<h2 id="Example" name="Example"><font><font>Exemple</font></font></h2>
+
+<pre class="eval"><font><font>&lt;Html&gt;</font></font><font><font>
+ &lt;Tête&gt;</font></font><font><font>
+  &lt;Link rel = "StyleSheet" href = "example.css" type = "text / css" /&gt;</font></font><font><font>
+  &lt;Script&gt;</font></font><font><font>
+   Function stilo () {</font></font><font><font>
+    Alerte (document.styleSheets [0] .ownerNode);</font></font><font><font>
+   }</font></font><font><font>
+  &lt;/ Script&gt; </font></font><font><font>
+ &lt;/ Head&gt;</font></font><font><font>
+ &lt;Body&gt;</font></font><font><font>
+   &lt;Button onclick = "stilo ()"&gt; ss &lt;/ button&gt;</font></font><font><font>
+ &lt;/ Body&gt;</font></font><font><font>
+&lt;/ Html&gt;</font></font><font><font>
+// affiche "objet HTMLLinkElement"</font></font>
+</pre>
+
+<h2 id="Notes" name="Notes"><font><font>Remarques</font></font></h2>
+
+<p><font><font>Pour HTML, </font></font><strong><font><font>ownerNode</font></font></strong><font><font> peut être l' </font><font>élément </font></font><a href="en/LINK"><font><font>LINK</font></font></a><font><font> ou </font></font><a href="en/STYLE"><font><font>STYLE</font></font></a><font><font> correspondant </font><font>. </font><font>Pour XML, il peut s'agir des instructions de traitement de liaison. </font><font>Pour les feuilles de style qui sont incluses dans d'autres feuilles de style, la valeur de cet attribut est NULL.</font></font></p>
+
+<h2 id="Specification" name="Specification"><font><font>spécification</font></font></h2>
+
+<p><font><font>DOM Styles de niveau 2 - FEUILLE DE STYLES</font></font></p>
diff --git a/files/fr/web/api/stylesheet/parentstylesheet/index.html b/files/fr/web/api/stylesheet/parentstylesheet/index.html
new file mode 100644
index 0000000000..8db8ffbff9
--- /dev/null
+++ b/files/fr/web/api/stylesheet/parentstylesheet/index.html
@@ -0,0 +1,36 @@
+---
+title: StyleSheet.parentStyleSheet
+slug: Web/API/StyleSheet/parentStyleSheet
+translation_of: Web/API/StyleSheet/parentStyleSheet
+---
+<div>
+<div><font><font>{{APIRef ("CSSOM")}}</font></font></div>
+</div>
+
+<h2 id="Summary" name="Summary"><font><font>Résumé</font></font></h2>
+
+<p><font><font>Renvoie la feuille de style qui inclut celle-ci, le cas échéant.</font></font></p>
+
+<h2 id="Syntax" name="Syntax"><font><font>Syntaxe</font></font></h2>
+
+<pre class="syntaxbox"><em><font><font>ObjRef</font></font></em><font><font> = stylesheet.parentStyleSheet
+</font></font></pre>
+
+<h2 id="Example" name="Example"><font><font>Exemple</font></font></h2>
+
+<pre class="brush:js"><font><font>// trouve la feuille de style de niveau supérieur</font></font><font><font>
+If (stylesheet.parentStyleSheet) {</font></font><font><font>
+    Feuille = stylesheet.parentStyleSheet;</font></font><font><font>
+} autre {</font></font><font><font>
+    Feuille = feuille de style;</font></font><font><font>
+}</font></font></pre>
+
+<h2 id="Notes" name="Notes"><font><font>Remarques</font></font></h2>
+
+<p><font><font>Cette propriété renvoie NULL est la feuille de style actuelle est une feuille de style de haut niveau ou si l'inclusion de la feuille de style n'est pas prise en charge.</font></font></p>
+
+<h2 id="Specification" name="Specification"><font><font>spécification</font></font></h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/stylesheets.html#StyleSheets-StyleSheet-parentStyleSheet"><font><font>ParentStyleSheet </font></font></a></li>
+</ul>
diff --git a/files/fr/web/api/stylesheet/title/index.html b/files/fr/web/api/stylesheet/title/index.html
new file mode 100644
index 0000000000..a33fd45920
--- /dev/null
+++ b/files/fr/web/api/stylesheet/title/index.html
@@ -0,0 +1,22 @@
+---
+title: StyleSheet.title
+slug: Web/API/StyleSheet/title
+translation_of: Web/API/StyleSheet/title
+---
+<div>
+<div><font><font>{{APIRef ("CSSOM")}}</font></font></div>
+</div>
+
+<h2 id="Summary" name="Summary"><font><font>Résumé</font></font></h2>
+
+<p><code>title</code><font><font> Renvoie le titre de conseil de la feuille de style actuelle.</font></font></p>
+
+<h2 id="Notes" name="Notes"><font><font>Remarques</font></font></h2>
+
+<p><font><font>Le titre est souvent spécifié dans {{domxref ("StyleSheet / OwnerNode", "ownerNode")}}.</font></font></p>
+
+<h2 id="Specification" name="Specification"><font><font>spécification</font></font></h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/stylesheets.html#StyleSheets-StyleSheet-title"><font><font>Titre </font></font></a></li>
+</ul>
diff --git a/files/fr/web/api/stylesheet/type/index.html b/files/fr/web/api/stylesheet/type/index.html
new file mode 100644
index 0000000000..eb315e2871
--- /dev/null
+++ b/files/fr/web/api/stylesheet/type/index.html
@@ -0,0 +1,24 @@
+---
+title: StyleSheet.type
+slug: Web/API/StyleSheet/type
+translation_of: Web/API/StyleSheet/type
+---
+<div><font><font>{{APIRef ("CSSOM")}}</font></font></div>
+
+<h2 id="Summary" name="Summary"><font><font>Résumé</font></font></h2>
+
+<p><font><font>Type spécifie la langue de la feuille de style pour cette feuille de style.</font></font></p>
+
+<h2 id="Syntax" name="Syntax"><font><font>Syntaxe</font></font></h2>
+
+<pre class="eval"><em><font><font>String</font></font></em><font><font> = stylesheet.type
+</font></font></pre>
+
+<h2 id="Example" name="Example"><font><font>Exemple</font></font></h2>
+
+<pre><font><font> Ss.type = "text / css";
+</font></font></pre>
+
+<h2 id="Specification" name="Specification"><font><font>spécification</font></font></h2>
+
+<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/stylesheets.html#StyleSheets-StyleSheet-type"><font><font>type </font></font></a></p>
diff --git a/files/fr/web/api/stylesheetlist/index.html b/files/fr/web/api/stylesheetlist/index.html
new file mode 100644
index 0000000000..37436f0469
--- /dev/null
+++ b/files/fr/web/api/stylesheetlist/index.html
@@ -0,0 +1,31 @@
+---
+title: StyleSheetList
+slug: Web/API/StyleSheetList
+tags:
+  - API
+  - CSSDOM
+  - NeedsContent
+  - NeedsUpdate
+translation_of: Web/API/StyleSheetList
+---
+<p>{{APIRef("CSSOM")}}</p>
+
+<p>L'interface <span style="font-family: consolas,monaco,andale mono,monospace;">StyleSheetList représente une liste de </span>{{domxref("StyleSheet")}}.</p>
+
+<p>Il s'agit d'un objet de type array, mais qui ne peut pas être itéré à l'aide de la méthode {{jsxref("Array")}}. Il peut néanmoins être itéré dans une boucle {{jsxref("Statements/for", "for")}} standard en utilisant ses indices, ou converti en un {{jsxref("Array")}}. </p>
+
+<h2 id="Example" name="Example" style="line-height: 30px; font-size: 2.14285714285714rem;">Exemple</h2>
+
+<pre class="brush: js">// Récupère toutes les règles CSS du document en cours en utilisant les méthodes de Array
+var allCSS = [].slice.call(document.styleSheets)
+                     .reduce(function (prev, styleSheet) {
+        if (styleSheet.cssRules) {
+            return prev +
+                [].slice.call(styleSheet.cssRules)
+                        .reduce(function (prev, cssRule) {
+                    return prev + cssRule.cssText;
+                });
+        } else {
+            return prev;
+        }
+    });</pre>
diff --git a/files/fr/web/api/subtlecrypto/digest/index.html b/files/fr/web/api/subtlecrypto/digest/index.html
new file mode 100644
index 0000000000..091a59de28
--- /dev/null
+++ b/files/fr/web/api/subtlecrypto/digest/index.html
@@ -0,0 +1,135 @@
+---
+title: SubtleCrypto.digest()
+slug: Web/API/SubtleCrypto/digest
+translation_of: Web/API/SubtleCrypto/digest
+---
+<div>{{APIRef("Web Crypto API")}}{{SecureContext_header}}</div>
+
+<p>La méthode <code><strong>digest()</strong></code> de l'interface {{domxref("SubtleCrypto")}} génère un {{Glossary("digest")}} de la donnée fournie. Un condensé est une petite valeur de taille fixe issue d'une donnée de taille variable. Les condensés cryptographiques doivent résister à la collision, ce qui signifie qu'il doit être très difficile d'obtenir le même condensé à partir de deux entrés différentes.</p>
+
+<p>Il prend en argument un identifiant pour l'algorithme de condensé et les données à traiter. Il retourne une {{jsxref("Promise")}} qui contiendra le condensé.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">const digest = <em>crypto</em><code>.subtle.digest(<em>algorithm</em>, <em>data</em>)</code>;
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<ul>
+ <li><em><code>algorithm</code></em> est une {{domxref("DOMString")}} indiquant la fonction de condensé à utiliser. Les valeurs possibles sont:
+
+  <ul>
+   <li><code>SHA-1</code> (ne pas utiliser pour des applications cryptographiques)</li>
+   <li><code>SHA-256</code></li>
+   <li><code>SHA-384</code></li>
+   <li><code>SHA-512</code>.</li>
+  </ul>
+ </li>
+ <li><em><code>data</code></em> est un {{jsxref("ArrayBuffer")}} ou un {{domxref("ArrayBufferView")}} contenant les données à traiter.</li>
+</ul>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<ul>
+ <li><code><em>digest</em></code> est une {{jsxref("Promise")}} pour accéder {{jsxref("ArrayBuffer")}} au condensé.</li>
+</ul>
+
+<h2 id="Algorithmes_supportés">Algorithmes supportés</h2>
+
+<p>Les algorithmes de condensé, aussi connue sous le nom de <a href="/fr/docs/Glossaire/Fonction_de_hachage_cryptographique">fonctions de hachage cryptographique</a>, transforme un bloque de données de longueur arbitraire dans un résultat de taille fixe, souvent plus petit que l'entré. Ils ont de nombreuses utilisations en cryptographie.</p>
+
+<h3 id="SHA-1">SHA-1</h3>
+
+<p>Cet algorithme est spécifié dans <a href="https://nvlpubs.nist.gov/nistpubs/FIPS/NIST.FIPS.180-4.pdf">FIPS 180-4</a>, section 6.1, et produit un résultat de 160 bits de long.</p>
+
+<div class="blockIndicator warning">
+<p><strong>Avertissement:</strong> Cet algorithme est maintenant considérer comme vulnérable et ne doit pas être utilisé pour des applications cryptographiques.</p>
+</div>
+
+<h3 id="SHA-256">SHA-256</h3>
+
+<p>Cet algorithme est spécifié dans <a href="https://nvlpubs.nist.gov/nistpubs/FIPS/NIST.FIPS.180-4.pdf">FIPS 180-4</a>, section 6.2, et produit un résultat de 256 bits de long.</p>
+
+<h3 id="SHA-384">SHA-384</h3>
+
+<p>Cet algorithme est spécifié dans <a href="https://nvlpubs.nist.gov/nistpubs/FIPS/NIST.FIPS.180-4.pdf">FIPS 180-4</a>, section 6.5, et produit un résultat de 384 bits de long.</p>
+
+<h3 id="SHA-512">SHA-512</h3>
+
+<p>Cet algorithme est spécifié dans <a href="https://nvlpubs.nist.gov/nistpubs/FIPS/NIST.FIPS.180-4.pdf">FIPS 180-4</a>, section 6.4, et produit un résultat de 512 bits de long.</p>
+
+<div class="blockIndicator note">
+<p>Indice: Si vous cherchez à créer un condensé pour authentifié un message (<a href="/fr/docs/Glossary/HMAC">HMAC</a>), vous aurez plutôt besoin de <a href="/en-US/docs/Web/API/SubtleCrypto/sign#HMAC">SubtleCrypto.sign()</a>.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_basique">Exemple basique</h3>
+
+<p>Cet exemple encode un message, puis calcule le condensé avec SHA-256, enfin affiche la longueur du résultat.</p>
+
+<pre class="brush: js notranslate">const text = 'Un obscur message venant du le système S-K, votre majesté. Ses habitants le nomment la planète Terre.';
+
+async function digestMessage(message) {
+  const encoder = new TextEncoder();
+  const data = encoder.encode(message);
+  const hash = await crypto.subtle.digest('SHA-256', data);
+  return hash;
+}
+
+const digestBuffer = await digestMessage(text);
+console.log(digestBuffer.byteLength);
+</pre>
+
+<h3 id="Convertir_un_condensé_vers_une_chaîne_hexadécimale">Convertir un condensé vers une chaîne hexadécimale</h3>
+
+<p>Le condensé est retourné sous forme d'un <code>ArrayBuffer</code>, mais la comparaison et l'affichage se fait souvent avec des chaînes hexadécimales. Cet exemple calcule un condensé puis converti l'<code>ArrayBuffer</code> vers une chaîne hexadécimale.</p>
+
+<pre class="brush: js notranslate">const text = 'Un obscur message venant du le système S-K, votre majesté. Ses habitants le nomment la planète Terre.';
+
+async function digestMessage(message) {
+  const msgUint8 = new TextEncoder().encode(message);                           // encode comme (utf-8) Uint8Array
+  const hashBuffer = await crypto.subtle.digest('SHA-256', msgUint8);           // fait le condensé
+  const hashArray = Array.from(new Uint8Array(hashBuffer));                     // convertit le buffer en tableau d'octet
+  const hashHex = hashArray.map(b =&gt; b.toString(16).padStart(2, '0')).join(''); // convertit le tableau en chaîne hexadélimale
+  return hashHex;
+}
+
+const digestHex = await digestMessage(text);
+console.log(digestHex);
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécifications</th>
+   <th scope="col">Statue</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Crypto API', '#dfn-SubtleCrypto-method-digest', 'SubtleCrypto.digest()')}}</td>
+   <td>{{Spec2('Web Crypto API')}}</td>
+   <td>Définition intiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.SubtleCrypto.digest")}}</p>
+
+<div class="blockIndicator note">
+<p> Dans Chrome 60, une fonctionnalité a été ajoutée qui désactive <strong>crypto.subtle</strong> pour les connexions non TLS.</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://www.chromium.org/Home/chromium-security/prefer-secure-origins-for-powerful-new-features">(en) Chromium secure origins specification</a></li>
+ <li><a href="https://nvlpubs.nist.gov/nistpubs/FIPS/NIST.FIPS.180-4.pdf" rel="noopener">(en) FIPS 180-4</a> spécifie les algorithmes de condensé de la famille SHA.</li>
+</ul>
diff --git a/files/fr/web/api/subtlecrypto/index.html b/files/fr/web/api/subtlecrypto/index.html
new file mode 100644
index 0000000000..6788ee5bdb
--- /dev/null
+++ b/files/fr/web/api/subtlecrypto/index.html
@@ -0,0 +1,298 @@
+---
+title: SubtleCrypto
+slug: Web/API/SubtleCrypto
+tags:
+  - API
+  - Advanced
+  - Cryptography
+  - Encryption
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - SubtleCrypto
+  - TopicStub
+  - Web Crypto API
+translation_of: Web/API/SubtleCrypto
+---
+<div>{{APIRef("Web Crypto API")}}{{SecureContext_header}}</div>
+
+<p><span class="seoSummary">The <code><strong>SubtleCrypto</strong></code> interface of the <a href="/en-US/docs/Web/API/Web_Crypto_API">Web Crypto API</a> provides a number of low-level cryptographic functions. Access to the features of <code>SubtleCrypto</code> is obtained through the {{domxref("Crypto.subtle", "subtle")}} property of the {{domxref("Crypto")}} object you get from {{domxref("Window.crypto")}}.</span></p>
+
+<div class="warning">
+<p><strong>Warning:</strong> This API provides a number of low-level cryptographic primitives. It's very easy to misuse them, and the pitfalls involved can be very subtle.</p>
+
+<p>Even assuming you use the basic cryptographic functions correctly, secure key management and overall security system design are extremely hard to get right, and are generally the domain of specialist security experts.</p>
+
+<p>Errors in security system design and implementation can make the security of the system completely ineffective.</p>
+
+<p><strong>If you're not sure you know what you are doing, you probably shouldn't be using this API.</strong></p>
+</div>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>This interface doesn't inherit any properties, as it has no parent interface.</em></p>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>This interface doesn't inherit any methods, as it has no parent interface.</em></p>
+
+<dl>
+ <dt>{{domxref("SubtleCrypto.encrypt()")}}</dt>
+ <dd>Returns a {{jsxref("Promise")}} that fufills with the encrypted data corresponding to the clear text, algorithm, and key given as parameters.</dd>
+ <dt>{{domxref("SubtleCrypto.decrypt()")}}</dt>
+ <dd>Returns a {{jsxref("Promise")}} that fulfills with the clear data corresponding to the encrypted text, algorithm, and key given as parameters.</dd>
+ <dt>{{domxref("SubtleCrypto.sign()")}}</dt>
+ <dd>Returns a {{jsxref("Promise")}} that fulfills with the signature corresponding to the text, algorithm, and key given as parameters.</dd>
+ <dt>{{domxref("SubtleCrypto.verify()")}}</dt>
+ <dd>Returns a {{jsxref("Promise")}} that fulfills with a {{jsxref("Boolean")}} value indicating if the signature given as a parameter matches the text, algorithm, and key that are also given as parameters.</dd>
+ <dt>{{domxref("SubtleCrypto.digest()")}}</dt>
+ <dd>Returns a {{jsxref("Promise")}} that fulfills with a digest generated from the algorithm and text given as parameters.</dd>
+ <dt>{{domxref("SubtleCrypto.generateKey()")}}</dt>
+ <dd>Returns a {{jsxref("Promise")}} that fulfills with a newly-generated {{domxref("CryptoKey")}}, for symmetrical algorithms, or a {{domxref("CryptoKeyPair")}}, containing two newly generated keys, for asymmetrical algorithms. These will match the algorithm, usages, and extractability given as parameters.</dd>
+ <dt>{{domxref("SubtleCrypto.deriveKey()")}}</dt>
+ <dd>Returns a {{jsxref("Promise")}} that fulfills with a newly generated {{domxref("CryptoKey")}} derived from the master key and specific algorithm given as parameters.</dd>
+ <dt>{{domxref("SubtleCrypto.deriveBits()")}}</dt>
+ <dd>Returns a {{jsxref("Promise")}} that fulfills with a newly generated buffer of pseudo-random bits derived from the master key and specific algorithm given as parameters.</dd>
+ <dt>{{domxref("SubtleCrypto.importKey()")}}</dt>
+ <dd>Returns a {{jsxref("Promise")}} that fulfills with a {{domxref("CryptoKey")}} corresponding to the format, the algorithm, raw key data, usages, and extractability given as parameters.</dd>
+ <dt>{{domxref("SubtleCrypto.exportKey()")}}</dt>
+ <dd>Returns a {{jsxref("Promise")}} that fulfills with a buffer containing the key in the requested format.</dd>
+ <dt>{{domxref("SubtleCrypto.wrapKey()")}}</dt>
+ <dd>Returns a {{jsxref("Promise")}} that fulfills with a wrapped symmetric key for usage (transfer and storage) in insecure environments. The wrapped key matches the format specified in the given parameters, and wrapping is done by the given wrapping key, using the specified algorithm.</dd>
+ <dt>{{domxref("SubtleCrypto.unwrapKey()")}}</dt>
+ <dd>Returns a {{jsxref("Promise")}} that fulfills with a {{domxref("CryptoKey")}} corresponding to the wrapped key given in the parameter.</dd>
+</dl>
+
+<h2 id="Using_SubtleCrypto">Using SubtleCrypto</h2>
+
+<p>We can split the functions implemented by this API into two groups: cryptography functions and key management functions.</p>
+
+<h3 id="Cryptography_functions">Cryptography functions</h3>
+
+<p>These are the functions you can use to implement security features such as privacy and authentication in a system. The <code>SubtleCrypto</code> API provides the following cryptography functions:</p>
+
+<p>* {{DOMxRef("SubtleCrypto.sign","sign()")}} and {{DOMxRef("SubtleCrypto.verify","verify()")}}: create and verify digital signatures.<br>
+ * {{DOMxRef("SubtleCrypto.encrypt","encrypt()")}} and {{DOMxRef("SubtleCrypto.decrypt","decrypt()")}}: encrypt and decrypt data.<br>
+ * {{DOMxRef("SubtleCrypto.digest","digest()")}}: create a fixed-length, collision-resistant digest of some data.</p>
+
+<h3 id="Key_management_functions">Key management functions</h3>
+
+<p>Except for {{DOMxRef("SubtleCrypto.digest","digest()")}}, all the cryptography functions in the API use cryptographic keys. In the <code>SubtleCrypto</code> API a cryptographic key is represented using a {{DOMxRef("CryptoKey","CryptoKey")}} object. To perform operations like signing and encrypting, you pass a {{DOMxRef("CryptoKey","CryptoKey")}} object into the {{DOMxRef("SubtleCrypto.sign","sign()")}} or {{DOMxRef("SubtleCrypto.encrypt","encrypt()")}} function.</p>
+
+<h4 id="Generating_and_deriving_keys">Generating and deriving keys</h4>
+
+<p>The {{DOMxRef("SubtleCrypto.generateKey","generateKey()")}} and {{DOMxRef("SubtleCrypto.deriveKey","deriveKey()")}} functions both create a new {{DOMxRef("CryptoKey")}} object.</p>
+
+<p>The difference is that <code>generateKey()</code> will generate a new distinct key value each time you call it, while <code>deriveKey()</code> derives a key from some initial keying material. If you provide the same keying material to two separate calls to <code>deriveKey()</code>, you will get two <code>CryptoKey</code> objects that have the same underlying value. This is useful if, for example, you want to derive an encryption key from a password and later derive the same key from the same password to decrypt the data.</p>
+
+<h4 id="Importing_and_exporting_keys">Importing and exporting keys</h4>
+
+<p>To make keys available outside your app, you need to export the key, and that's what {{DOMxRef("SubtleCrypto.exportKey","exportKey()")}} is for. You can choose one of a number of export formats.</p>
+
+<p>The inverse of <code>exportKey()</code> is {{DOMxRef("SubtleCrypto.importKey","importKey()")}}. You can import keys from other systems, and support for standard formats like <a href="https://tools.ietf.org/html/rfc5208">PKCS #8</a> and <a href="https://tools.ietf.org/html/rfc7517">JSON Web Key</a> helps you do this. The <code>exportKey()</code> function exports the key in an unencrypted format.</p>
+
+<p>If the key is sensitive you should use {{DOMxRef("SubtleCrypto.wrapKey","wrapKey()")}}, which exports the key and then encrypts it using another key; the API calls a "key-wrapping key".</p>
+
+<p>The inverse of <code>wrapKey()</code> is {{DOMxRef("SubtleCrypto.unwrapKey","unwrapKey()")}}, which decrypts then imports the key.</p>
+
+<h4 id="Storing_keys">Storing keys</h4>
+
+<p><code>CryptoKey</code> objects can be stored using the <a href="/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm">structured clone algorithm</a>, meaning that you can store and retrieve them using standard web storage APIs. The specification expects that most developers will use the <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB API</a> to store <code>CryptoKey</code> objects.</p>
+
+<h3 id="Supported_algorithms">Supported algorithms</h3>
+
+<p>The cryptographic functions provided by the Web Crypto API can be performed by one or more different <em>cryptographic algorithms</em>: the <code>algorithm</code> argument to the function indicates which algorithm to use. Some algorithms need extra parameters: in these cases the <code>algorithm</code> argument is a dictionary object that includes the extra parameters.</p>
+
+<p>The table below summarises which algorithms are suitable for which cryptographic operations:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row"></th>
+   <th scope="col">
+    <p><a href="/en-US/docs/Web/API/SubtleCrypto/sign">sign()</a></p>
+
+    <p><a href="/en-US/docs/Web/API/SubtleCrypto/verify">verify()</a></p>
+   </th>
+   <th scope="col">
+    <p><a href="/en-US/docs/Web/API/SubtleCrypto/encrypt">encrypt()</a></p>
+
+    <p><a href="/en-US/docs/Web/API/SubtleCrypto/decrypt">decrypt()</a></p>
+   </th>
+   <th scope="col"><a href="/en-US/docs/Web/API/SubtleCrypto/digest">digest()</a></th>
+   <th scope="col">
+    <p><a href="/en-US/docs/Web/API/SubtleCrypto/deriveBits">deriveBits()</a></p>
+
+    <p><a href="/en-US/docs/Web/API/SubtleCrypto/deriveKey">deriveKey()</a></p>
+   </th>
+   <th scope="col">
+    <p><a href="/en-US/docs/Web/API/SubtleCrypto/wrapKey">wrapKey()</a></p>
+
+    <p><a href="/en-US/docs/Web/API/SubtleCrypto/unwrapKey">unwrapKey()</a></p>
+   </th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">RSASSA-PKCS1-v1_5</th>
+   <td>✓</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">RSA-PSS</th>
+   <td>✓</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">ECDSA</th>
+   <td>✓</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">HMAC</th>
+   <td>✓</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">RSA-OAEP</th>
+   <td></td>
+   <td>✓</td>
+   <td></td>
+   <td></td>
+   <td>✓</td>
+  </tr>
+  <tr>
+   <th scope="row">AES-CTR</th>
+   <td></td>
+   <td>✓</td>
+   <td></td>
+   <td></td>
+   <td>✓</td>
+  </tr>
+  <tr>
+   <th scope="row">AES-CBC</th>
+   <td></td>
+   <td>✓</td>
+   <td></td>
+   <td></td>
+   <td>✓</td>
+  </tr>
+  <tr>
+   <th scope="row">AES-GCM</th>
+   <td></td>
+   <td>✓</td>
+   <td></td>
+   <td></td>
+   <td>✓</td>
+  </tr>
+  <tr>
+   <th scope="row">SHA-1</th>
+   <td></td>
+   <td></td>
+   <td>✓</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">SHA-256</th>
+   <td></td>
+   <td></td>
+   <td>✓</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">SHA-384</th>
+   <td></td>
+   <td></td>
+   <td>✓</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">SHA-512</th>
+   <td></td>
+   <td></td>
+   <td>✓</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">ECDH</th>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td>✓</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">HKDF</th>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td>✓</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">PBKDF2</th>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td>✓</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">AES-KW</th>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td>✓</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{ SpecName('Web Crypto API', '#subtlecrypto-interface', 'SubtleCrypto') }}</td>
+   <td>{{ Spec2('Web Crypto API') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.SubtleCrypto")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Crypto_API">Web Crypto API</a></li>
+ <li><a href="/en-US/docs/Web/Security">Web security</a></li>
+ <li><a href="/en-US/docs/Web/Privacy">Privacy, permissions, and information security</a></li>
+ <li>{{domxref("Crypto")}} and {{domxref("Crypto.subtle")}}.</li>
+ <li><a href="https://www.crypto101.io/">Crypto 101</a>: an introductory course on cryptography.</li>
+</ul>
diff --git a/files/fr/web/api/svgaelement/index.html b/files/fr/web/api/svgaelement/index.html
new file mode 100644
index 0000000000..06d725d4ee
--- /dev/null
+++ b/files/fr/web/api/svgaelement/index.html
@@ -0,0 +1,107 @@
+---
+title: SVGAElement
+slug: Web/API/SVGAElement
+tags:
+  - API
+  - Reference
+  - SVG
+  - SVG DOM
+  - WebAPI
+translation_of: Web/API/SVGAElement
+---
+<h2 id="SVG_a_DOM_interface">SVG a DOM interface</h2>
+<p>L'interface <code>SVGAElement </code>fournit un accès aux propriétés des éléments {{ SVGElement("a") }} ainsi qu'aux méthodes pour les manipuler.</p>
+<h3 id="Interface_overview">Interface overview</h3>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Egalement implémenté</th>
+   <td>{{ domxref("SVGElement") }}, {{ domxref("SVGURIReference") }}, {{ domxref("SVGTests") }}, {{ domxref("SVGLangSpace") }}, {{ domxref("SVGExternalResourcesRequired") }}, {{ domxref("SVGStylable") }}, {{ domxref("SVGTransformable") }}</td>
+  </tr>
+  <tr>
+   <th scope="row">Methodes</th>
+   <td><em>Aucune</em></td>
+  </tr>
+  <tr>
+   <th scope="row">Propriétés</th>
+   <td>
+    <ul>
+     <li>lectureseule{{ domxref("SVGAnimatedString") }} <code>cible</code></li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Document Normative</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/linking.html#InterfaceSVGAElement" title="http://www.w3.org/TR/SVG11/linking.html#InterfaceSVGAElement">SVG 1.1 (2nd Edition)</a></td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Propriétés">Propriétés</h2>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Nom</th>
+   <th>Type</th>
+   <th>Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>cible</code></td>
+   <td>{{ domxref("SVGAnimatedString") }}</td>
+   <td>Correspond à attribuer {{ SVGAttr("cible") }} sur l'élément {{ SVGElement("a") }} donné.</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Methodes">Methodes</h2>
+<p>L'interface <code>SVGAElement</code> ne fournit aucune méthode spécifique.</p>
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité navigateurs</h2>
+<p>{{ CompatibilityTable() }}</p>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Caractéristiques</th>
+    <th>Chrome</th>
+    <th>Firefox (Gecko)</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari (WebKit)</th>
+   </tr>
+   <tr>
+    <td>Support basique</td>
+    <td>{{ CompatVersionUnknown() }}</td>
+    <td>{{ CompatVersionUnknown() }}</td>
+    <td>9.0</td>
+    <td>{{ CompatVersionUnknown() }}</td>
+    <td>{{ CompatVersionUnknown() }}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Caractéristiques</th>
+    <th>Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Support basique</td>
+    <td>{{ CompatUnknown() }}</td>
+    <td>{{ CompatVersionUnknown() }}</td>
+    <td>{{ CompatUnknown() }}</td>
+    <td>{{ CompatVersionUnknown() }}</td>
+    <td>{{ CompatVersionUnknown() }}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h2 id="A_voir_aussi">A voir aussi</h2>
+<ul>
+ <li>{{ SVGElement("a") }} SVG Element</li>
+</ul>
diff --git a/files/fr/web/api/svgdescelement/index.html b/files/fr/web/api/svgdescelement/index.html
new file mode 100644
index 0000000000..3400126dfe
--- /dev/null
+++ b/files/fr/web/api/svgdescelement/index.html
@@ -0,0 +1,59 @@
+---
+title: SVGDescElement
+slug: Web/API/SVGDescElement
+tags:
+  - API
+  - Reference
+  - SVG
+  - SVG DOM
+translation_of: Web/API/SVGDescElement
+---
+<div>{{APIRef("SVG")}}</div>
+
+<p>L'interface <strong><code>SVGDescElement</code></strong> correspond à l'élément {{SVGElement("desc")}}.</p>
+
+<p>{{InheritanceDiagram(600, 140)}}</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Cette interface hérite des propriétés fournies par son parent {{domxref("SVGGeometryElement")}}.</em></p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Cette interface n'a pas de méthode propre mais hérite des méthodes de son parent {{domxref("SVGGeometryElement")}}.</em></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("SVG2", "struct.html#InterfaceSVGDescElement", "SVGDescElement")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td>Retrait de l'héritage depuis {{domxref("SVGLangSpace")}} et {{domxref("SVGStylable")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "struct.html#InterfaceSVGDescElement", "SVGDescElement")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.SVGDescElement")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{SVGElement("desc")}}</li>
+</ul>
diff --git a/files/fr/web/api/svgelement/index.html b/files/fr/web/api/svgelement/index.html
new file mode 100644
index 0000000000..27685aa638
--- /dev/null
+++ b/files/fr/web/api/svgelement/index.html
@@ -0,0 +1,125 @@
+---
+title: SVGElement
+slug: Web/API/SVGElement
+tags:
+  - Reference
+translation_of: Web/API/SVGElement
+---
+<h2 id="Interface_d'élément_SVG">Interface d'élément SVG</h2>
+<p>Toutes les interfaces SVG DOM qui correspondent directement à des éléments du langage SVG dérivent de l'interface <code>SVGElement</code>.</p>
+<h3 id="Vue_d'ensemble_de_l'interface">Vue d'ensemble de l'interface</h3>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Implémente aussi</th>
+   <td>Voir l'interface générique DOM {{ domxref("Element") }}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Méthodes</th>
+   <td><em>Aucune</em></td>
+  </tr>
+  <tr>
+   <th scope="row">Propriétés</th>
+   <td>
+    <ul>
+     <li>readonly {{ domxref("DOMString") }} <code>id</code></li>
+     <li>readonly {{ domxref("DOMString") }} <code>xmlbase</code></li>
+     <li>readonly {{ domxref("SVGSVGElement") }} <code>ownerSVGElement</code></li>
+     <li>readonly {{ domxref("SVGElement") }} <code>viewportElement</code></li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Normative document</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/types.html#InterfaceSVGElement" title="http://www.w3.org/TR/SVG11/types.html#InterfaceSVGElement">SVG 1.1 (2nd Edition)</a></td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Properties">Properties</h2>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Nom</th>
+   <th>Type</th>
+   <th>Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>id</code></td>
+   <td>{{ domxref("DOMString") }}</td>
+   <td>La valeur de l'attribut {{ SVGAttr("id") }} de l'élément, ou une chaîne vide si <code>id</code> n'est pas présent.</td>
+  </tr>
+  <tr>
+   <td><code>xmlbase</code></td>
+   <td>{{ domxref("DOMString") }}</td>
+   <td>Correspond à l'attribut {{ SVGAttr("xml:base") }} de l'élément.</td>
+  </tr>
+  <tr>
+   <td><code>ownerSVGElement</code></td>
+   <td>{{ domxref("SVGSVGElement") }}</td>
+   <td>
+    <p>L'élément {{ SVGElement("svg") }} parent le plus près. <code>Null</code> si l'élément est l'élément svg le plus à l'extérieur.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>viewportElement</code></td>
+   <td>{{ domxref("SVGElement") }}</td>
+   <td>
+    <p>L'élément qui a établi la fenêtre actuelle. Souvent l'élément parent {{ SVGElement("svg") }} le plus prêt. <code>Null</code> si l'élément est l'élément svg le plus à l'extérieur.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Méthodes">Méthodes</h2>
+<p>L'interface <code>SVGElement</code> ne possède aucune méthode spécifique.</p>
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
+<p>{{ CompatibilityTable() }}</p>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Fonction</th>
+    <th>Chrome</th>
+    <th>Firefox (Gecko)</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari (WebKit)</th>
+   </tr>
+   <tr>
+    <td>Support de base</td>
+    <td>{{ CompatVersionUnknown() }}</td>
+    <td>{{ CompatVersionUnknown() }}</td>
+    <td>9.0</td>
+    <td>{{ CompatVersionUnknown() }}</td>
+    <td>{{ CompatVersionUnknown() }}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Fonction</th>
+    <th>Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Support de base</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatVersionUnknown() }}</td>
+    <td>{{ CompatUnknown() }}</td>
+    <td>{{ CompatVersionUnknown() }}</td>
+    <td>{{ CompatVersionUnknown() }}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h2 id="Voir_aussi">Voir aussi</h2>
+<ul>
+ <li>Référence DOM {{ SVGElement("element") }}</li>
+</ul>
diff --git a/files/fr/web/api/svgmatrix/index.html b/files/fr/web/api/svgmatrix/index.html
new file mode 100644
index 0000000000..98af82ee66
--- /dev/null
+++ b/files/fr/web/api/svgmatrix/index.html
@@ -0,0 +1,268 @@
+---
+title: SVGMatrix
+slug: Web/API/SVGMatrix
+tags:
+  - Matrice
+  - Reference
+translation_of: Web/API/SVGMatrix
+---
+<h2 id="Interface_SVG_matrix">Interface SVG matrix</h2>
+
+<p>Beaucoup d'opération graphiques de SVG utilisent des matrices 2x3 de la forme :</p>
+
+<pre>[a c e]
+[b d f]</pre>
+
+<p>laquelle, quand étendue en une matrice 3x3 à des fins d'arithmétique matricielle, devient :</p>
+
+<pre>[a c e]
+[b d f]
+[0 0 1]
+</pre>
+
+<p>Un objet <code>SVGMatrix</code> peut être marqué en lecture-seule, ce qui signifie que les tentatives de modification sur cet objet entraîneront un lancement d'exception.</p>
+
+<h3 id="Vue_d'ensemble_de_l'interface">Vue d'ensemble de l'interface</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Implémente aussi</th>
+   <td><em>Aucune</em></td>
+  </tr>
+  <tr>
+   <th scope="row">Méthodes</th>
+   <td>
+    <ul>
+     <li>{{ domxref("SVGMatrix") }} <code>multiply(in {{ domxref("SVGMatrix") }} <em>secondMatrix</em>)</code></li>
+     <li>{{ domxref("SVGMatrix") }} <code>inverse()</code></li>
+     <li>{{ domxref("SVGMatrix") }} <code>translate(in float <em>x</em>, in float <em>y</em>)</code></li>
+     <li>{{ domxref("SVGMatrix") }} <code>scale(in float <em>scaleFactor</em>)</code></li>
+     <li>{{ domxref("SVGMatrix") }} <code>scaleNonUniform(in float <span style="font-style: italic;">scaleFactorX</span>, in float <em>scaleFactorY</em>)</code></li>
+     <li>{{ domxref("SVGMatrix") }} <code>rotate(in float<code> <em>angle</em>)</code></code></li>
+     <li>{{ domxref("SVGMatrix") }} <code>rotateFromVector(in float <em>x</em>, in float <em>y</em>)</code></li>
+     <li>{{ domxref("SVGMatrix") }} <code>flipX()</code></li>
+     <li>{{ domxref("SVGMatrix") }} <code>flipY()</code></li>
+     <li>{{ domxref("SVGMatrix") }} <code>skewX(in float <em>angle</em>)</code></li>
+     <li>{{ domxref("SVGMatrix") }} <code>skewY(in float <em>angle</em>)</code></li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Propriétés</th>
+   <td>
+    <ul>
+     <li>float <code>a</code></li>
+     <li>float <code>b</code></li>
+     <li>float <code>c</code></li>
+     <li>float <code>d</code></li>
+     <li>float <code>e</code></li>
+     <li>float <code>f</code></li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Document normatif</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG/coords.html#InterfaceSVGMatrix" title="http://www.w3.org/TR/SVG/coords.html#InterfaceSVGMatrix">SVG 1.1 (2nd Edition)</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Nom</th>
+   <th>Type</th>
+   <th>Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>a</code></td>
+   <td>float</td>
+   <td>Le composant <em>a</em> de la matrice.</td>
+  </tr>
+  <tr>
+   <td><code>b</code></td>
+   <td>float</td>
+   <td>Le composant <em>b</em> de la matrice.</td>
+  </tr>
+  <tr>
+   <td><code>c</code></td>
+   <td>float</td>
+   <td>Le composant <span style="font-style: italic;">c</span> de la matrice.</td>
+  </tr>
+  <tr>
+   <td><code>d</code></td>
+   <td>float</td>
+   <td>Le composant <em>d</em> de la matrice.</td>
+  </tr>
+  <tr>
+   <td><code>e</code></td>
+   <td>float</td>
+   <td>Le composant <em>e</em> de la matrice.</td>
+  </tr>
+  <tr>
+   <td><code>f</code></td>
+   <td>float</td>
+   <td>Le composant <em>f</em> de la matrice.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Une {{ domxref("DOMException") }} avec le code <code>NO_MODIFICATION_ALLOWED_ERR</code> est levée lors d'une tentative de modification d'un attribut en lecture-seule ou quand l'objet lui-même est en lecture-seule.</p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Nom &amp; Arguments</th>
+   <th>Retourne</th>
+   <th>Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code><strong>multiply</strong>(in {{ domxref("SVGMatrix") }} <em>secondMatrix</em>)</code></td>
+   <td>{{ domxref("SVGMatrix") }}</td>
+   <td>Effectue une multiplication de matrices. Cette matrice est multipliée par une autre matrice, retournant la nouvelle matrice résultante.</td>
+  </tr>
+  <tr>
+   <td><code><strong>inverse</strong>()</code></td>
+   <td>{{ domxref("SVGMatrix") }}</td>
+   <td>
+    <p>Retourne la matrice inverse.</p>
+
+    <p><strong>Exceptions :</strong></p>
+
+    <ul>
+     <li>une {{ domxref("DOMException") }} avec le code <code>SVG_MATRIX_NOT_INVERTABLE</code> est levée si la matrice n'est pas inversible.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td><code><strong>translate</strong>(in float <em>x</em>, in float <em>y</em>)</code></td>
+   <td>{{ domxref("SVGMatrix") }}</td>
+   <td>
+    <div>Effectue une translation sur la matrice courante et retourne la matrice résultante.</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code><strong>scale</strong>(in float <em>scaleFactor</em>)</code></td>
+   <td>{{ domxref("SVGMatrix") }}</td>
+   <td>
+    <div>Effectue une mise à l'échelle uniforme sur la matrice courante et retourne la matrice résultante.</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code><strong>scaleNonUniform</strong>(in float <em>scaleFactorX</em>, in float <em>scaleFactorY</em>)</code></td>
+   <td>{{ domxref("SVGMatrix") }}</td>
+   <td>
+    <div>Effectue une mise à l'échelle non-uniforme sur la matrice courante et retourne la matrice résultante.</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code><strong>rotate</strong>(in float <em>angle</em>)</code></td>
+   <td>{{ domxref("SVGMatrix") }}</td>
+   <td>
+    <div>Effectue une rotation sur la matrice courante et retourne la matrice résultante.</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code><strong>rotateFromVector</strong>(in float <em>x</em>, in float <em>y</em>)</code></td>
+   <td>{{ domxref("SVGMatrix") }}</td>
+   <td>
+    <p>Effectue une rotation sur la matrice courante et retourne la matrice résultante. L'angle de rotation est déterminé en prenant (+/-) atan(y/x). La direction du vecteur (x, y) détermine si la valeur négative ou positive de l'angle est utilisée.</p>
+
+    <p><strong>Exceptions :</strong></p>
+
+    <ul>
+     <li>une {{ domxref("DOMException") }} avec le code <code>SVG_INVALID_VALUE_ERR </code>est levée si un de ces paramètres a une valeur invalide.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td><code><strong>flipX</strong>()</code></td>
+   <td>{{ domxref("SVGMatrix") }}</td>
+   <td>
+    <div>Effectue une transformation [-1 0 0 1 0 0] et retourne la matrice résultante.</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code><strong>flipY</strong>()</code></td>
+   <td>{{ domxref("SVGMatrix") }}</td>
+   <td>
+    <div>Effectue une transformation [1 0 0 -1 0 0] et retourne la matrice résultante.</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code><strong>skewX</strong>(in float <em>angle</em>)</code></td>
+   <td>{{ domxref("SVGMatrix") }}</td>
+   <td>
+    <div>Effectue une transformation de skewX sur la matrice courante et retourne la matrice résultante.</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code><strong>skewY</strong>(in float <em>angle</em>)</code></td>
+   <td>{{ domxref("SVGMatrix") }}</td>
+   <td>
+    <div>Effectue une transformation de skewY sur la matrice courante et retourne la matrice résultante.</div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité avec les navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>9</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
diff --git a/files/fr/web/api/svgrect/index.html b/files/fr/web/api/svgrect/index.html
new file mode 100644
index 0000000000..520fe67d48
--- /dev/null
+++ b/files/fr/web/api/svgrect/index.html
@@ -0,0 +1,134 @@
+---
+title: SVGRect
+slug: Web/API/SVGRect
+tags:
+  - Rectangle
+translation_of: Web/API/SVGRect
+---
+<h2 id="Interface_SVG_rect">Interface SVG rect</h2>
+
+<p><code>SVGRect</code> représente la géométrie rectangulaire. Les rectangles consistent en une paire de coordonnées (x,y) correspondant à une valeur X minimale, une valeur Y minimale, et une largeur et hauteur, lesquelles sont habituellement positives.</p>
+
+<p>Un objet <code>SVGRect </code>peut être marqué en lecture-seule, ce qui signifie que les tentatives de modification sur cet objet entraîneront un lancement d'exception.</p>
+
+<h3 id="Vue_d'ensemble_de_l'interface">Vue d'ensemble de l'interface</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Implémente aussi</th>
+   <td><em>Aucune</em></td>
+  </tr>
+  <tr>
+   <th scope="row">Méthodes</th>
+   <td><em>Aucune</em></td>
+  </tr>
+  <tr>
+   <th scope="row">Propriétés</th>
+   <td>
+    <ul>
+     <li>float <code>x</code></li>
+     <li>float <code>y</code></li>
+     <li>float <code>width</code></li>
+     <li>float <code>height</code></li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Document normatif</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/types.html#InterfaceSVGRect" title="http://www.w3.org/TR/SVG11/types.html#InterfaceSVGRect">SVG 1.1 (2nd Edition)</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Nom</th>
+   <th>Type</th>
+   <th>Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>x</code></td>
+   <td>float</td>
+   <td>La coordonnée <em>x</em> du rectangle, en unité utilisateur.</td>
+  </tr>
+  <tr>
+   <td><code>y</code></td>
+   <td>float</td>
+   <td>La coordonnée <em>y</em> du rectangle, en unité utilisateur.</td>
+  </tr>
+  <tr>
+   <td><code>width</code></td>
+   <td>float</td>
+   <td>La largeur <em>width</em> du rectangle, en unité utilisateur.</td>
+  </tr>
+  <tr>
+   <td><code>height</code></td>
+   <td>float</td>
+   <td>La hauteur <em>height</em> du rectangle, en unité utilisateur.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><strong>Exceptions à l'affectation :</strong> une <code><a href="DOMException" rel="custom">DOMException</a></code> avec le code <code>NO_MODIFICATION_ALLOWED_ERR</code> est levée lors d'une tentative de modification d'un attribut en lecture-seule.</p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p>L'interface <code>SVGRect</code> ne fournit pas de méthode spécifique.</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
diff --git a/files/fr/web/api/svgrectelement/index.html b/files/fr/web/api/svgrectelement/index.html
new file mode 100644
index 0000000000..98104ed8b1
--- /dev/null
+++ b/files/fr/web/api/svgrectelement/index.html
@@ -0,0 +1,69 @@
+---
+title: SVGRectElement
+slug: Web/API/SVGRectElement
+translation_of: Web/API/SVGRectElement
+---
+<div>{{APIRef("SVG")}}</div>
+
+<p>L'interface <code>SVGRectElement</code> fournit un accès aux propriétés et aux méthodes de l'élément {{SVGElement("rect")}}.</p>
+
+<p>{{InheritanceDiagram(600, 140)}}</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Cette interface hérite aussi des propriétés de </em><em>{{domxref("SVGGeometryElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("SVGRectElement.x")}} {{ReadOnlyInline}}</dt>
+ <dd>Retourne un {{domxref("SVGAnimatedLength")}} correspondant à l'attribut {{SVGAttr("x")}} de l'élément {{SVGElement("rect")}} donné.</dd>
+ <dt>{{domxref("SVGRectElement.x")}} {{ReadOnlyInline}}</dt>
+ <dd>Retourne un {{domxref("SVGAnimatedLength")}}  correspondant à l'attribut {{SVGAttr("x")}} de l'élément {{SVGElement("rect")}} donné.</dd>
+ <dt>{{domxref("SVGRectElement.y")}} {{ReadOnlyInline}}</dt>
+ <dd>Retourne un {{domxref("SVGAnimatedLength")}} correspondant à l'attribut {{SVGAttr("y")}} de l'élément {{SVGElement("rect")}} donné.</dd>
+ <dt>{{domxref("SVGRectElement.width")}} {{ReadOnlyInline}}</dt>
+ <dd>Retourne un {{domxref("SVGAnimatedLength")}} correspondant à l'attribut {{SVGAttr("width")}} de l'élément {{SVGElement("rect")}} donné.</dd>
+ <dt>{{domxref("SVGRectElement.height")}} {{ReadOnlyInline}}</dt>
+ <dd>Retourne un {{domxref("SVGAnimatedLength")}} correspondant à l'attribut {{SVGAttr("height")}} de l'élément {{SVGElement("rect")}} donné.</dd>
+ <dt>{{domxref("SVGRectElement.rx")}} {{ReadOnlyInline}}</dt>
+ <dd>Retourne un {{domxref("SVGAnimatedLength")}} correspondant à l'attribut {{SVGAttr("rx")}} de l'élément {{SVGElement("rect")}} donné.</dd>
+ <dt>{{domxref("SVGRectElement.ry")}} {{ReadOnlyInline}}</dt>
+ <dd>Retourne un {{domxref("SVGAnimatedLength")}} correspondant à l'attribut {{SVGAttr("ry")}} de l'élément {{SVGElement("rect")}} donné.</dd>
+</dl>
+
+<h2 id="Méthode">Méthode</h2>
+
+<p><em>Cette interface n'implémente pas de méthodes spécifiques mais elle hérite des méthodes parentes de <em>{{domxref("SVGGeometryElement")}}</em></em>.</p>
+
+<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>{{SpecName("SVG2", "shapes.html#InterfaceSVGRectElement", "SVGRectElement")}}</td>
+   <td>{{Spec2('SVG2')}}</td>
+   <td>Remplace l'héritage de {{domxref("SVGElement")}}{{domxref("SVGTests")}}, {{domxref("SVGLangSpace")}}, {{domxref("SVGExternalResourcesRequired")}}, {{domxref("SVGStylable")}} et {{domxref("SVGTransformable")}} par {{domxref("SVGGeometryElement")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "shapes.html#InterfaceSVGRectElement", "SVGRectElement")}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.SVGRectElement")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{SVGElement("rect")}}</li>
+</ul>
diff --git a/files/fr/web/api/svgstylable/index.html b/files/fr/web/api/svgstylable/index.html
new file mode 100644
index 0000000000..7bb1f743fa
--- /dev/null
+++ b/files/fr/web/api/svgstylable/index.html
@@ -0,0 +1,97 @@
+---
+title: SVGStylable
+slug: Web/API/SVGStylable
+tags:
+  - API
+  - Reference
+  - SVG
+  - SVG DOM
+translation_of: Web/API/SVGStylable
+---
+<div>{{APIRef("SVG")}}</div>
+
+<h2 id="Interface_SVG_stylisable">Interface SVG stylisable</h2>
+
+<p>L'interface <code>SVGStylable</code> est implémentée sur tout les objets SVG pouvant avoir des attributs {{ SVGAttr("style") }}, {{SVGAttr("class")}} ou d'autre attributs modifiants leur présentation, leur affichage.</p>
+
+<h3 id="Aperçu_de_l'interface">Aperçu de l'interface</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Implémente aussi</th>
+   <td><em>/</em></td>
+  </tr>
+  <tr>
+   <th scope="row">Métodes</th>
+   <td>
+    <ul>
+     <li>{{ domxref("CSSValue") }} <code>getPresentationAttribute(in {{ domxref("DOMString") }} name)</code></li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Propriétés</th>
+   <td>
+    <ul>
+     <li>readonly {{ domxref("SVGAnimatedString") }} <code>className</code></li>
+     <li>readonly {{ domxref("CSSStyleDeclaration") }} <code>style</code></li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Norme</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/types.html#InterfaceSVGStylable" title="http://www.w3.org/TR/SVG11/types.html#InterfaceSVGStylable">SVG 1.1 (2e Édition)</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Nom</th>
+   <th>Type</th>
+   <th>Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>className</code></td>
+   <td>{{ domxref("SVGAnimatedString") }}</td>
+   <td>Correspond à l'attribut {{ SVGAttr("class") }} de l'élément donné.</td>
+  </tr>
+  <tr>
+   <td><code>style</code></td>
+   <td>{{ domxref("CSSStyleDeclaration") }}</td>
+   <td>Correspond à l'attribut {{ SVGAttr("style") }} de l'élément donné.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Métodes">Métodes</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Nom &amp; Arguments</th>
+   <th>Retourne</th>
+   <th>Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code><strong>getPresentationAttribute</strong>(in {{ domxref("DOMString") }} <em>name</em>)</code></td>
+   <td>{{ domxref("CSSValue") }}</td>
+   <td>Retourne la valeur par défaut (ex: static) d'un attribut de présentation donné comme un objet de type {{ domxref("CSSValue") }}.<br>
+    The returned object is live; changes to the objects represent immediate changes to the objects to which the {{ domxref("CSSValue") }} is attached.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_entre_les_navigateurs">Compatibilité entre les navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.SVGStylable")}}</p>
diff --git a/files/fr/web/api/svgtitleelement/index.html b/files/fr/web/api/svgtitleelement/index.html
new file mode 100644
index 0000000000..407fc04f73
--- /dev/null
+++ b/files/fr/web/api/svgtitleelement/index.html
@@ -0,0 +1,98 @@
+---
+title: SVGTitleElement
+slug: Web/API/SVGTitleElement
+tags:
+  - Interface Title SVG
+  - SVG
+  - SVG DOM
+  - Title
+translation_of: Web/API/SVGTitleElement
+---
+<div>{{APIRef("SVG")}}</div>
+
+<h2 id="Interface_DOM_de_l'élément_SVG_title">Interface DOM de l'élément SVG <code>title</code></h2>
+
+<p>L'interface <code>SVGTitleElement</code> correspond à l'élément {{ SVGElement("title") }}.</p>
+
+<h3 id="Aperçu_de_l'interface">Aperçu de l'interface</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Implémente aussi</th>
+   <td>{{ domxref("SVGElement") }}, {{ domxref("SVGLangSpace") }}, {{ domxref("SVGStylable") }}</td>
+  </tr>
+  <tr>
+   <th scope="row">Metodes</th>
+   <td><em>Aucunes</em></td>
+  </tr>
+  <tr>
+   <th scope="row">Propritiétés</th>
+   <td><em>Aucunes</em></td>
+  </tr>
+  <tr>
+   <th scope="row">Norme</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#InterfaceSVGTitleElement" title="http://www.w3.org/TR/SVG11/struct.html#InterfaceSVGTitleElement">SVG 1.1 (2nd Edition)</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p>L'interface <code>SVGTitleElement</code> n'a pas de propriétés spécifiques.</p>
+
+<h2 id="Metodes">Metodes</h2>
+
+<p>L'interface <code>SVGTitleElement</code> n'a pas de métodes spécifiques.</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité entre les navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
diff --git a/files/fr/web/api/syncmanager/index.html b/files/fr/web/api/syncmanager/index.html
new file mode 100644
index 0000000000..42819bb886
--- /dev/null
+++ b/files/fr/web/api/syncmanager/index.html
@@ -0,0 +1,46 @@
+---
+title: SyncManager
+slug: Web/API/SyncManager
+translation_of: Web/API/SyncManager
+---
+<p>{{APIRef("Service Workers API")}}{{Non-standard_header}}</p>
+
+<p>L'interface <strong><code>SyncManager</code></strong> de l' <a href="/en-US/docs/Web/API/ServiceWorker_API">API ServiceWorker </a> fournit une interface pour l'enregistrement et la liste des sync registrations.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p>None.</p>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("SyncManager.register")}}</dt>
+ <dd>Créé une nouvelle sync registration et retourne une {{jsxref("Promise")}}</dd>
+ <dt>{{domxref("SyncManager.getTags")}}</dt>
+ <dd>Renvoie une liste d'identifiants définis par le développeur pour l'enregistrement  du SyncManager.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Background Sync','#sync-manager-interface','SyncManager')}}</td>
+   <td>{{Spec2('Background Sync')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility"><span style="font-size: 2.14285714285714rem;">Browser compatibility</span></h2>
+
+<div>
+
+
+<p>{{Compat("api.SyncManager")}}</p>
+</div>
diff --git a/files/fr/web/api/tcp_socket_api/index.html b/files/fr/web/api/tcp_socket_api/index.html
new file mode 100644
index 0000000000..c8b06f46c4
--- /dev/null
+++ b/files/fr/web/api/tcp_socket_api/index.html
@@ -0,0 +1,121 @@
+---
+title: API TCP Socket
+slug: Web/API/TCP_Socket_API
+translation_of: Archive/B2G_OS/API/TPC_Socket_API
+---
+<p>{{DefaultAPISidebar("TCP Socket API")}}</p>
+
+<p>{{ non-standard_header() }}</p>
+
+<p>{{ B2GOnlyHeader2('privileged') }}</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>L'API TCPSocket se propose d'ouvrir et d'utiliser une connexion TCP. Cela permet de mettre en œuvre des protocoles de la couche supérieure à TCP comme IMAP, IRC, POP, HTTP, etc., ou même d'en créer de nouveaux pour des besoins spécifiques.</p>
+
+<h2 id="Permission">Permission</h2>
+
+<p>Pour utiliser cette API, comme pour toutes les API privilégiées, il est nécessaire de demander l'autorisation de l'utiliser dans l'application <a href="/fr/Apps/Manifeste" title="/fr/docs/Web/Apps/Manifest">app manifeste</a>.</p>
+
+<pre class="brush: json">"permissions" : {
+  "tcp-socket" : {
+    "description" : "Create TCP sockets and communicate over them."
+  }
+}</pre>
+
+<h2 id="Aperçu">Aperçu</h2>
+
+<p>Cette API est disponible à travers la propriété {{domxref("Navigator.mozTCPSocket","mozTCPSocket")}} qui est elle-même un objet {{domxref("TCPSocket")}}.</p>
+
+<h3 id="Ouverture_d'un_socket">Ouverture d'un socket</h3>
+
+<p>L'ouverture d'un socket est fait avec la méthode {{domxref("TCPSocket.open()")}}. Cette méthode peut avoir jusqu'à trois paramètres:</p>
+
+<ol>
+ <li>Une chaîne représentant le nom du serveur auquel se connecter (il peut aussi être son adresse IP brute).</li>
+ <li>Un nombre représentant le port TCP à utiliser par la socket (certains protocoles ont un port standard, par exemple 80 pour HTTP, 447 pour SSL, 25 pour SMTP, etc. Les numéros de port au-delà de 1024 ne sont pas assignés à un protocole spécifique et peuvent être utilisés pour d'autres fins.)</li>
+ <li>Un objet optionnel contenant jusqu'à deux paramétres : un booléen nommé <code>useSecureTransport</code>, <code>false</code> par défaut, est nécessaire pour utiliser SSL, ; et une chaîne nommée <code>binaryType</code> permet d'indiquer le type de données récupérées par l'application à travers l'événement {{event("data")}}, avec les valeurs attendues <code>string</code> par défaut ou <code>arraybuffer</code>.</li>
+</ol>
+
+<pre class="brush: js">var socket = navigator.mozTCPSocket.open('localhost', 80);</pre>
+
+<div class="note">
+<p><strong>Note: </strong> Seulement les applications certifiées peuvent utiliser un port inférieur à 1024.</p>
+</div>
+
+<h3 id="Ecoute_des_connexions">Ecoute des connexions</h3>
+
+<p>L'écoute des connexions se fait avec les méthodes {{domxref("TCPSocket.listen()")}}. Cette méthode prévoit jusqu'à trois paramètres:</p>
+
+<ol>
+ <li>Un nombre représentant le port TCP à utiliser pour écouter les connexions.</li>
+ <li>Un objet facultatif spécifiant les détails de la réception. Cet objet attend une propriété appelée <code>binaryType</code>, qui est une chaîne qui peut avoir deux valeurs possibles: "string" ou "ArrayBuffer". Si la valeur est "ArrayBuffer" alors le {{domxref("TCPSocket.send()")}} utilise {{domxref("ArrayBuffer")}} et les données reçues seront également disponible dans ce format.</li>
+ <li>Un nombre représentant la longueur maximale de la file d'attente des connexions en attente.</li>
+</ol>
+
+<pre class="brush: js">var socket = navigator.mozTCPSocket.listen(8080);</pre>
+
+<div class="note">
+<p><strong>Note: </strong> Seulement applications certifiées peuvent écouter sur un port inférieur à 1024.</p>
+</div>
+
+<h3 id="Envoi_de_données">Envoi de données</h3>
+
+<p>L'envoi de données se fait en utilisant la méthode {{domxref("TCPSocket.send()")}}. Les données envoyées peuvent au format chaîne ou <code><a href="/fr/docs/JavaScript/Typed_arrays/Uint8Array" title="/fr/docs/JavaScript/Typed_arrays/Uint8Array">Uint8Array</a></code>; Cependant, rappelez-vous qu'un socket TCP travail avec les données binaires. Pour cette raison, il est beaucoup plus sûr d'utiliser <code><a href="/fr/docs/JavaScript/Typed_arrays/Uint8Array" title="/fr/docs/JavaScript/Typed_arrays/Uint8Array">Uint8Array</a></code> à la place d'une chaîne lors de l'envoi des données.</p>
+
+<p>Pout protocole TCP, il vaut mieux envoyer 64 Ko maximum de données en même temps. Quand moins de 64kb ont été tamponnés, un appel à la méthode {{domxref("TCPSocket.send()","send")}} retourne <code>true</code>. Si le tampon est plein, la méthode renverra <code>false</code> pour indiquer que l'application devra faire une pause pour vider le tampon. Chaque fois que le tampon est vidé, un événement {{event("drain")}} est déclenché et l'application peut reprendre envoi de données.</p>
+
+<p>Il est possible de connaître exactement la quantité de données en mémoire tampon avec la propriété {{domxref("TCPSocket.bufferedAmount")}} .</p>
+
+<pre class="brush: js">function getData() {
+  var data;
+
+  // récupérer les données
+
+  return data;
+}
+
+function pushData() {
+  var data;
+
+  do {
+    data = getData();
+  } while (data != null &amp;&amp; socket.send(data));
+}
+
+// Chaque fois que le tampon est vidé
+// Nous essayons à nouveau d'envoyer des données.
+socket.ondrain = pushData;
+
+// Lancer l'envoi de données.
+pushData();
+</pre>
+
+<h3 id="Recevoir_les_données">Recevoir les données</h3>
+
+<p>Chaque fois que le socket reçoit des données de l'hôte, il déclenche un événement {{event("data")}}. Cet événement donnera accès aux données du socket. Le type de données dépend de l'ensemble des options définies lorsque le socket a été ouvert (voir ci-dessus).</p>
+
+<pre class="brush: js">socket.ondata = function (event) {
+  if (typeof event.data === 'string') {
+    console.log('Get a string: ' + event.data);
+  } else {
+    console.log('Get a Uint8Array');
+  }
+}</pre>
+
+<p>Comme l'événement {{event("data")}} est déclenché autant que nécessaire, il peut parfois être nécessaire d'interrompre le flux de données entrants. À cette fin, l'appel de la méthode {{domxref("TCPSocket.suspend()")}} mettra en pause la lecture des données entrantes et cessera le déclenchement de {{event("data")}}. Il est possible de recommencer la lecture des données en appelant la méthode {{domxref("TCPSocket.resume()")}} .</p>
+
+<h3 id="Fermeture_d'un_socket">Fermeture d'un socket</h3>
+
+<p>La fermeture d'un socket se fait simplement en utilisant {{domxref("TCPSocket.close()")}}.</p>
+
+<h2 id="Standard">Standard</h2>
+
+<p>Ne fait partie d'aucune spécification; Toutefois, cette API est discuté au sein du W3C dans le cadre du <a href="http://www.w3.org/2012/sysapps/" title="http://www.w3.org/2012/sysapps/">groupe de travail Applications Système</a> sous la dénomination de <a href="http://www.w3.org/TR/2015/NOTE-tcp-udp-sockets-20150723/">RAW sockets</a>.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("TCPSocket")}}</li>
+ <li><a href="https://github.com/soapdog/firefoxos-sample-app-telnet-client" title="Firefox OS Simple Telnet Sample App">Firefox OS Simple Telnet Sample App</a></li>
+</ul>
diff --git a/files/fr/web/api/tcpsocket/index.html b/files/fr/web/api/tcpsocket/index.html
new file mode 100644
index 0000000000..c0413ef9fc
--- /dev/null
+++ b/files/fr/web/api/tcpsocket/index.html
@@ -0,0 +1,102 @@
+---
+title: TCPSocket
+slug: Web/API/TCPSocket
+translation_of: Archive/B2G_OS/API/TCPSocket
+---
+<p>{{APIRef("Firefox OS")}}</p>
+
+<p>{{ non-standard_header() }}</p>
+
+<p>{{ B2GOnlyHeader2('privileged') }}</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>L'interface <strong> <code>TCPSocket</code> </strong> permet d'accéder à un socket TCP brut.</p>
+
+<p>Le principal point de cette API d'entrée est la propriété{{domxref("navigator.mozTCPSocket")}} qui est un object <code>TCPSocket</code>.</p>
+
+<div class="note">
+<p><strong>Note: </strong> Seulement applications certifiées peuvent accepter des connexions entrantes sur un port en dessous de 1024.</p>
+</div>
+
+<h2 id="Aperçu_de_l'API">Aperçu de l'API</h2>
+
+<pre>interface TCPSocket{
+  readonly attribute DOMString host;
+  readonly attribute unsigned short port;
+  readonly attribute boolean ssl;
+  readonly attribute unsigned long bufferedAmount;
+  readonly attribute DOMString binaryType;
+  readonly attribute DOMString readyState;
+
+  TCPSocket open(DOMString host, unsigned short port, [object options]);
+  TCPServerSocket listen(unsigned short port, [object options, [unsigned short backlog]]);
+  void upgradeToSecure();
+  void suspend();
+  void resume();
+  void close();
+  boolean send(in jsval data);
+
+  attribute onopen;
+  attribute ondrain;
+  attribute ondata;
+  attribute onerror;
+  attribute onclose;
+};</pre>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("TCPSocket.host")}} {{readonlyinline}}</dt>
+ <dd>Une chaîne représentant le nom du serveur sur le quel le socket est connecté.</dd>
+ <dt>{{domxref("TCPSocket.port")}} {{readonlyinline}}</dt>
+ <dd>Un nombre représentant le port de connexion.</dd>
+ <dt>{{domxref("TCPSocket.ssl")}} {{readonlyinline}}</dt>
+ <dd>Une valeur booléenne indiquant si le socket est cryptée avec SSL (<code>true</code>) ou non (<code>false</code>).</dd>
+ <dt>{{domxref("TCPSocket.bufferedAmount")}} {{readonlyinline}}</dt>
+ <dd>Le nombre d'octets de données dans le tampon qui ne sont pas encore envoyés.</dd>
+ <dt>{{domxref("TCPSocket.binaryType")}} {{readonlyinline}}</dt>
+ <dd>Le type de données utilisé. Valeurs possibles : <code>arraybuffer</code> ou <code>string</code>.</dd>
+ <dt>{{domxref("TCPSocket.readyState")}} {{readonlyinline}}</dt>
+ <dd>L'état de socket. Valeurs possibles : <code>connecting</code>, <code>open</code>, <code>closing</code>, ou <code>closed</code>.</dd>
+</dl>
+
+<h3 id="Gestionnaires_d'Evénements">Gestionnaires d'Evénements</h3>
+
+<dl>
+ <dt>{{domxref("TCPSocket.onopen")}}</dt>
+ <dd>Gestionnaire d'événement {{event("open")}}. Après cet événement, le socket est prêt à envoyer et recevoir des données.</dd>
+ <dt>{{domxref("TCPSocket.ondrain")}}</dt>
+ <dd>Gestionnaire pour l'événement {{event("drain")}}. Cet événement est déclenché chaque fois que le tampon de données est vidé.</dd>
+ <dt>{{domxref("TCPSocket.onerror")}}</dt>
+ <dd>Gestionnaire pour l'événement {{event("error")}}.</dd>
+ <dt>{{domxref("TCPSocket.ondata")}}</dt>
+ <dd>Gestionnaire pour l'événement {{event("data")}}. Cet événement est déclenché chaque fois que les données ont été reçues.</dd>
+ <dt>{{domxref("TCPSocket.onclose")}}</dt>
+ <dd>Gestionnaire pour l'événement {{event("close")}}.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("TCPSocket.close()")}}</dt>
+ <dd>Ferme la connexion.</dd>
+ <dt>{{domxref("TCPSocket.open()","TCPSocket.open(host, port [, options])")}}</dt>
+ <dd>Renvoie un nouvel objet connecté <code>TCPSocket</code> aux <code>host</code> donnée et au <code>port</code> donné.</dd>
+ <dt>{{domxref("TCPSocket.resume()")}}</dt>
+ <dd>Information sur l'événement <code>data</code>.</dd>
+ <dt>{{domxref("TCPSocket.send()","TCPSocket.send(data)")}}</dt>
+ <dd>Données tampons à envoyer sur le réseau.</dd>
+ <dt>{{domxref("TCPSocket.suspend()")}}</dt>
+ <dd>Suspend l'événement <code>data</code>.</dd>
+</dl>
+
+<h2 id="Spécification">Spécification</h2>
+
+<p>Ne fait partie d'aucune spécification; Toutefois, cette API est discuté au sein du W3C dans le cadre du <a href="http://www.w3.org/2012/sysapps/" title="http://www.w3.org/2012/sysapps/">groupe de travail des applications  système</a> sous la dénomination <a href="http://www.w3.org/2012/sysapps/tcp-udp-sockets/" title="http://www.w3.org/2012/sysapps/tcp-udp-sockets/">API Socket TCP et UDP (anciennement connu sous le nom Raw Sockets API) </a>.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/TCP_Socket_API" title="/fr/docs/WebAPI/TCP_Socket_API">TCP Socket</a></li>
+</ul>
diff --git a/files/fr/web/api/text/index.html b/files/fr/web/api/text/index.html
new file mode 100644
index 0000000000..702acd9d54
--- /dev/null
+++ b/files/fr/web/api/text/index.html
@@ -0,0 +1,234 @@
+---
+title: Text
+slug: Web/API/Text
+tags:
+  - API
+  - DOM
+translation_of: Web/API/Text
+---
+<p>{{ApiRef("DOM")}}</p>
+
+<p>L'interface <strong><code>Text</code></strong> représente le contenu textuel d'un élément {{domxref("Element")}} ou d'un attribut {{domxref("Attr")}}. Si un élément n'a pas de balisage dans son contenu, il a un seul enfant implémentant <code>Text</code> qui contient le texte de l'élément.  Par contre, si l'élément contient un balisage, il est analysé par les éléments d'information et les noeuds <code>Text</code> qui sont ses enfants.</p>
+
+<p>Un nouveau document a un unique noeud <code>Text</code> pour chaque bloc de texte. Au fil du temps, d'autres noeuds peuvent être créés <code>Text</code> en temps que modification du contenu du document.  La méthode {{domxref("Node.normalize()")}}  fusionne les objets <code>Text</code>  dans un seul noeud pour chaque bloc de texte.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Methods" name="Methods">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("Text.Text", "Text()")}} {{experimental_inline}}</dt>
+ <dd>Retourne un noeud <code>Text</code> avec le paramètre comme contenu textuel.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Hérite des propriétés de son parent {{domxref("CharacterData")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("Text.isElementContentWhitespace")}} {{readonlyInline}}{{ obsolete_inline() }}</dt>
+ <dd>
+ <p>Renvoie une marque {{domxref("Boolean")}} indiquant si le noeud de texte contient uniquement des espaces.</p>
+ </dd>
+ <dt>{{domxref("Text.wholeText")}} {{readonlyInline}}</dt>
+ <dd>Renvoie une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) contenant le texte de tous les noeuds <code>Text</code> adjacents logiquement à ce {{domxref("Node")}}, concaténé dans l'ordre du document.</dd>
+ <dt>{{domxref("Text.assignedSlot")}} {{readonlyinline}}</dt>
+ <dd>Retourne l'objet {{domxref("HTMLSlotElement")}}  associé à l'élément.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Hérite des méthodes de son parent {{domxref("CharacterData")}}.</em></p>
+
+<dl>
+</dl>
+
+<dl>
+ <dt>{{domxref("Text.replaceWholeText")}} {{ obsolete_inline() }}</dt>
+ <dd>Remplace le texte du noeud en cours et tous les noeuds logiquement adjacents avec le texte spécifié.</dd>
+</dl>
+
+<dl>
+ <dt><span class="internal">{{domxref("Text.splitText")}}</span></dt>
+ <dd>Fractionne le noeud en deux noeuds selon un décalage spécifié.</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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#text', 'Text')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Suppression de la propriété <code>isElementContentWhitespace</code>.<br>
+    Suppression de la méthode <code>replaceWholeText()</code>.<br>
+    Ajout du constructeur <code>Text()</code>.<br>
+    Ajout de la propriété <code>assignedSlot</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-1312295772', 'Text')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Ajout des propriétés <code>isElementContentWhitespace</code> et <code>wholeText</code>.<br>
+    Ajout de la méthode <code>replaceWholeText()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-1312295772', 'Text')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Pas de changement depuis {{SpecName('DOM1')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-1312295772', 'Text')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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 [3]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}} [3]</td>
+   <td>{{CompatVersionUnknown}} [4]</td>
+  </tr>
+  <tr>
+   <td><code>wholeText</code></td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>isElementContentWhitespace</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<br>
+    Removed in {{CompatGeckoDesktop("10")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>replaceWholeText</code></td>
+   <td>{{CompatVersionUnknown}} [1] [2]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}<br>
+    Removed in {{CompatGeckoDesktop("10")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}} [1] [2]</td>
+   <td>{{CompatVersionUnknown}} [4]</td>
+  </tr>
+  <tr>
+   <td><code>Text()</code> constructor</td>
+   <td>28.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("24.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}} [3]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}} [3]</td>
+   <td>{{CompatVersionUnknown}} [4]</td>
+  </tr>
+  <tr>
+   <td><code>wholeText</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.9.1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>isElementContentWhitespace</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<br>
+    Removed in {{CompatGeckoMobile("10")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>replaceWholeText</code></td>
+   <td>{{CompatVersionUnknown}} [1] [2]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.9.1")}}<br>
+    Removed in {{CompatGeckoMobile("10")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}} [1] [2]</td>
+   <td>{{CompatVersionUnknown}} [4]</td>
+  </tr>
+  <tr>
+   <td><code>Text()</code> constructor</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("24.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Chromium envisage actuellement de laisser tomber son support.</p>
+
+<p>[2] Avant Chrome 30 et Opera 17, l'argument n'était pas obligatoire, comme requis par la spécification.</p>
+
+<p>[3] Avant Chrome 30 et Opera 17, l'argument <code>splitText()</code> n'était pas obligatoire, tel que requis par la spécification et mis en œuvre par les navigateurs IE et Gecko.</p>
+
+<p>[4] L'argument n'est pas obligatoire, bien que requis par la spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model" title="/en-US/docs/DOM/DOM_Reference">Référence du DOM</a></li>
+</ul>
diff --git a/files/fr/web/api/text/splittext/index.html b/files/fr/web/api/text/splittext/index.html
new file mode 100644
index 0000000000..034a953e46
--- /dev/null
+++ b/files/fr/web/api/text/splittext/index.html
@@ -0,0 +1,142 @@
+---
+title: Text.splitText()
+slug: Web/API/Text/splitText
+translation_of: Web/API/Text/splitText
+---
+<div>{{apiref("DOM")}}</div>
+
+<p>La méthode <strong><code>Text.splitText()</code></strong> sépare le nœud {{domxref("Text")}} en deux nœuds au niveau de l’indice spécifié, et conserve les deux nœuds dans l’arbre en tant que voisins.</p>
+
+<p>Après la séparation, le nœud actuel contient tout le texte jusqu’à l’indice spécifié, et un nœud nouvellement créé du même type contient le texte restant. Le nœud nouvellement créé est retourné à l’appelant. Si le nœud original avait un parent, le nouveau nœud est inséré en tant que voisin suivant du nœud original. Si l’indice est égal à la longueur du nœud original, le nœud nouvellement créé ne contient pas de données.</p>
+
+<p>Des nœuds texte séparés peuvent être concaténés en utilisant la méthode {{domxref("Node.normalize()")}}.</p>
+
+<p>Une {{domxref("DOMException")}} avec la valeur <code>INDEX_SIZE_ERR</code> est levée si l’indice spécifié est négatif ou est supérieur au nombre d’unités 16-bit dans le texte du nœud ; une {{domxref("DOMException")}} avec la valeur <code>NO_MODIFICATION_ALLOWED_ERR</code> est levée si le nœud est en lecture seule.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>noeudRemplacant</em> = <em>noeudTexte</em>.splitText(indice)
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans cet exemple, le nœud texte d’un {{HTMLElement("p")}} est séparé en deux nœuds texte et un {{HTMLElement("span")}} est inséré entre les deux.</p>
+
+<pre class="brush:html">&lt;body&gt;
+  &lt;p id="p"&gt;foobar&lt;/p&gt;
+
+  &lt;script type="text/javascript"&gt;
+    var p = document.getElementById('p');
+    var noeudTexte = p.firstChild;
+
+    // coupe entre foo et bar
+    var noeudRemplacant = noeudTexte.splitText(3);
+
+    // crée un span avec ' contenu du span '
+    var span = document.createElement('span');
+    span.appendChild(document.createTextNode(' contenu du span '));
+
+    // ajoute le span avant 'bar'
+    p.insertBefore(span, noeudRemplacant);
+
+    // le résultat est &lt;p id="p"&gt;foo&lt;span&gt; contenu du span &lt;/span&gt;bar&lt;/p&gt;
+  &lt;/script&gt;
+&lt;/body&gt;
+</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('DOM WHATWG', '#dom-text-splittext', 'Text.splitText')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Pas de changement depuis {{SpecName('DOM3 Core')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-38853C1D', 'Text.splitText')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Pas de changement depuis {{SpecName('DOM2 Core')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-38853C1D', 'Text.splitText')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Pas de changement depuis {{SpecName('DOM1')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-38853C1D', 'Text.splitText')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>1.0 [1]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}} [1]</td>
+   <td>{{CompatVersionUnknown}} [2]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatVersionUnknown}} [1]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}} [1]</td>
+   <td>{{CompatVersionUnknown}} [2]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Avant Chrome 30 et Opera 17, l’argument de <code>splitText()</code> n’était pas obligatoire, tel que requis par la spécification et implementé par IE et les navigateurs basés sur Gecko.</p>
+
+<p>[2] L’argument n’est pas obligatoire, bien que requis par la spec.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L’interface {{domxref("Text")}} à laquelle cette méthode appartient.</li>
+ <li>La méthode opposée : {{domxref("Node.normalize")}}.</li>
+</ul>
diff --git a/files/fr/web/api/textencoder/index.html b/files/fr/web/api/textencoder/index.html
new file mode 100644
index 0000000000..34f0803a9b
--- /dev/null
+++ b/files/fr/web/api/textencoder/index.html
@@ -0,0 +1,149 @@
+---
+title: TextEncoder
+slug: Web/API/TextEncoder
+tags:
+  - API
+  - Encoding
+  - Experimental
+  - Interface
+  - Reference
+  - TextEncoder
+translation_of: Web/API/TextEncoder
+---
+<p>{{APIRef("Encoding API")}}{{SeeCompatTable}}</p>
+
+<p><code><strong>TextEncoder</strong></code> prend un flux de points de code en entrée et émet un flux d'octets. Pour une bibliothèque non native plus extensible, voir <a href="/en-US/Add-ons/Code_snippets/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code> – une représentation des chaînes de caractères proche de celle de C basée sur les tableaux typés</a>.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Firefox, Chrome et Opera ont pour habitude de supporter les types d'encodage autres que <code>utf-8</code> (tels que <code>utf-16</code>, <code>iso-8859-2</code>, <code>koi8</code>, <code>cp1261</code>, et <code>gbk</code>). À partir de Firefox 48 ({{bug(1257877)}}), Chrome 54 (<a href="https://www.chromestatus.com/feature/5630760492990464">ticket</a>) et Opera 41, aucun type d'encodage autre que <code>utf-8</code> n'est disponible, de manière à être en accord avec la <a href="https://www.w3.org/TR/encoding/#dom-textencoder">spécification</a>. Dans tous les cas, passer un type d'encodage au constructeur sera ignoré et un TextEncoder utf-8 sera créé (le {{DOMxRef("TextDecoder")}} permet toujours d'autres types pour le décodage).</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Il y a une prothèse d'émulation d'implantation pour supporter tous les encodages hérités dans <a href="https://github.com/inexorabletash/text-encoding">GitHub</a>.</p>
+</div>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{DOMxRef("TextEncoder.TextEncoder", "TextEncoder()")}}</dt>
+ <dd>Retourne une nouvel objet <code>TextEncoder</code> qui génèrera un flux d'octets encodés en utf-8.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>L'interface <code>TextEncoder</code> n'hérite d'aucune propriété.</em></p>
+
+<dl>
+ <dt>{{DOMxRef("TextEncoder.encoding")}}{{ReadOnlyInline}}</dt>
+ <dd>{{DOMxRef("DOMString")}} contenant le nom de l'encodeur, qui est une chaîne de caractères décrivant la méthode que l'objet <code>TextEncoder</code> utilisera.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+</dl>
+
+<p><em><em>L'interface <code>TextEncoder</code> n'hérite d'aucune propriété</em></em>.</p>
+
+<dl>
+ <dt>{{DOMxRef("TextEncoder.encode()")}}</dt>
+ <dd>Retourne un <a href="/en-US/docs/Web/JavaScript/Typed_arrays/Uint8Array" title="/en-US/docs/Web/JavaScript/Typed_arrays/Uint8Array"><code>Uint8Array</code></a> conternant un texte encodé en utf-8.</dd>
+</dl>
+
+<h2 id="Prothèse_d'émulation">Prothèse d'émulation</h2>
+
+<p>La prothèse d'émulation ci-dessous va uniquement répondre aux spécifications données par le W3 (par d'autre type d'encodage que UTF-8 n'est supporté, malheureusement ☹️). Elle est conçue pour fonctionner "clé en main" avec IE5. Toutefois, de IE5 à IE9, elle retournera un tableau normal plutôt qu'un tableau typé. Dans de telles circonstances et avec des navigateurs si lents, cette prothèse (ou tout autre ayant le même objectif) serait inutilisable pour de longues chaînes de caractères avec ces vieux navigateurs. Enfin, notez que vous devriez exécuter le code ci-dessous avec un minifieur (et plus particulièrement un compilateur ) to turn sequences like <code>0x1e &lt;&lt; 3</code> into <code>0xf0</code>. These sequences are not already precomputed because they serve to aesthetically illustrate how the polyfill works.</p>
+
+<pre class="brush: js">if (typeof TextEncoder === "undefined") {
+    TextEncoder=function TextEncoder(){};
+    TextEncoder.prototype.encode = function encode(str) {
+        "use strict";
+        var Len = str.length, resPos = -1;
+        // The Uint8Array's length must be at least 3x the length of the string because an invalid UTF-16
+        //  takes up the equivelent space of 3 UTF-8 characters to encode it properly. However, Array's
+        //  have an auto expanding length and 1.5x should be just the right balance for most uses.
+        var resArr = typeof Uint8Array === "undefined" ? new Array(Len * 1.5) : new Uint8Array(Len * 3);
+        for (var point=0, nextcode=0, i = 0; i !== Len; ) {
+            point = str.charCodeAt(i), i += 1;
+            if (point &gt;= 0xD800 &amp;&amp; point &lt;= 0xDBFF) {
+                if (i === Len) {
+                    resArr[resPos += 1] = 0xef/*0b11101111*/; resArr[resPos += 1] = 0xbf/*0b10111111*/;
+                    resArr[resPos += 1] = 0xbd/*0b10111101*/; break;
+                }
+                // https://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae
+                nextcode = str.charCodeAt(i);
+                if (nextcode &gt;= 0xDC00 &amp;&amp; nextcode &lt;= 0xDFFF) {
+                    point = (point - 0xD800) * 0x400 + nextcode - 0xDC00 + 0x10000;
+                    i += 1;
+                    if (point &gt; 0xffff) {
+                        resArr[resPos += 1] = (0x1e/*0b11110*/&lt;&lt;3) | (point&gt;&gt;&gt;18);
+                        resArr[resPos += 1] = (0x2/*0b10*/&lt;&lt;6) | ((point&gt;&gt;&gt;12)&amp;0x3f/*0b00111111*/);
+                        resArr[resPos += 1] = (0x2/*0b10*/&lt;&lt;6) | ((point&gt;&gt;&gt;6)&amp;0x3f/*0b00111111*/);
+                        resArr[resPos += 1] = (0x2/*0b10*/&lt;&lt;6) | (point&amp;0x3f/*0b00111111*/);
+                        continue;
+                    }
+                } else {
+                    resArr[resPos += 1] = 0xef/*0b11101111*/; resArr[resPos += 1] = 0xbf/*0b10111111*/;
+                    resArr[resPos += 1] = 0xbd/*0b10111101*/; continue;
+                }
+            }
+            if (point &lt;= 0x007f) {
+                resArr[resPos += 1] = (0x0/*0b0*/&lt;&lt;7) | point;
+            } else if (point &lt;= 0x07ff) {
+                resArr[resPos += 1] = (0x6/*0b110*/&lt;&lt;5) | (point&gt;&gt;&gt;6);
+                resArr[resPos += 1] = (0x2/*0b10*/&lt;&lt;6)  | (point&amp;0x3f/*0b00111111*/);
+            } else {
+                resArr[resPos += 1] = (0xe/*0b1110*/&lt;&lt;4) | (point&gt;&gt;&gt;12);
+                resArr[resPos += 1] = (0x2/*0b10*/&lt;&lt;6)    | ((point&gt;&gt;&gt;6)&amp;0x3f/*0b00111111*/);
+                resArr[resPos += 1] = (0x2/*0b10*/&lt;&lt;6)    | (point&amp;0x3f/*0b00111111*/);
+            }
+        }
+        if (typeof Uint8Array !== "undefined") return resArr.subarray(0, resPos + 1);
+        // else // IE 6-9
+        resArr.length = resPos + 1; // trim off extra weight
+        return resArr;
+    };
+    TextEncoder.prototype.toString = function(){return "[object TextEncoder]"};
+    try { // Object.defineProperty only works on DOM prototypes in IE8
+        Object.defineProperty(TextEncoder.prototype,"encoding",{
+            get:function(){if(TextEncoder.prototype.isPrototypeOf(this)) return"utf-8";
+                           else throw TypeError("Illegal invocation");}
+        });
+    } catch(e) { /*IE6-8 fallback*/ TextEncoder.prototype.encoding = "utf-8"; }
+    if(typeof Symbol!=="undefined")TextEncoder.prototype[Symbol.toStringTag]="TextEncoder";
+}
+</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("Encoding", "#interface-textencoder", "TextEncoder")}}</td>
+   <td>{{Spec2("Encoding")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.TextEncoder")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The {{DOMxRef("TextDecoder")}} interface describing the inverse operation.</li>
+ <li><a href="/en-US/Add-ons/Code_snippets/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code></a> – a C-like representation of strings based on typed arrays</li>
+ <li>A <a href="https://github.com/inexorabletash/text-encoding" title="http://code.google.com/p/stringencoding/">shim</a> allowing to use this interface in browsers that don't support it.</li>
+ <li><code><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></code></li>
+</ul>
diff --git a/files/fr/web/api/textencoder/textencoder/index.html b/files/fr/web/api/textencoder/textencoder/index.html
new file mode 100644
index 0000000000..3c00dcf5c5
--- /dev/null
+++ b/files/fr/web/api/textencoder/textencoder/index.html
@@ -0,0 +1,66 @@
+---
+title: TextEncoder()
+slug: Web/API/TextEncoder/TextEncoder
+translation_of: Web/API/TextEncoder/TextEncoder
+---
+<p>{{APIRef("Encoding API")}}</p>
+
+<p>Le constructeur <code><strong>TextEncoder()</strong></code> retourne un nouvel objet {{DOMxRef("TextEncoder")}} utf-8.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><var>encoder</var> = new TextEncoder();
+</pre>
+
+<h3 id="Paramètre">Paramètre</h3>
+
+<ul>
+ <li><code>TextEncoder()</code> ne prend plus de paramètre depuis Firefox 48 et Chrome 53.</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Avant Firefox 48 et Chrome 53, le nom de l'encodage était accepté comme un paramètre pour l'objet <code>TextEncoder</code>, depuis ces deux navigateurs ont supprimé le support pour les encodages autres que l'<code>utf-8</code> afin de respecté les <a href="https://www.w3.org/TR/encoding/#dom-textencoder">spécifications</a>. N'importe quel indication d'encodage passé au constructeur sera ignoré et un <code>utf-8</code> <code>TextEncoder</code> sera créé.</p>
+</div>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<ul>
+ <li><code>TextEncoder()</code> ne lève plus d’exception depuis Firefox 48 et Chrome 53</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Avant Firefox 48 et Chrome 53, une exception était levée pour les types d'encodage inconnu.</p>
+</div>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statu</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Encoding", "#dom-textencoder", "TextEncoder()")}}</td>
+   <td>{{Spec2("Encoding")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+
+
+<p>{{Compat("api.TextEncoder.TextEncoder")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{DOMxRef("TextEncoder")}} appartenant à ce constructeur.</li>
+</ul>
diff --git a/files/fr/web/api/textmetrics/index.html b/files/fr/web/api/textmetrics/index.html
new file mode 100644
index 0000000000..f73fc61343
--- /dev/null
+++ b/files/fr/web/api/textmetrics/index.html
@@ -0,0 +1,182 @@
+---
+title: TextMetrics
+slug: Web/API/TextMetrics
+tags:
+  - API
+  - Canevas
+  - Reference
+  - TextMetrics
+translation_of: Web/API/TextMetrics
+---
+<div>{{APIRef("Canvas API")}}</div>
+
+<p>L'interface <strong>TextMetrics</strong> représente la dimension d'un texte dans le canevas, tel que créée par la méthode {{domxref ("CanvasRenderingContext2D.measureText()")}}.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("TextMetrics.width")}} {{readonlyInline}}</dt>
+ <dd>est un <code>double</code> donnant la largeur calculée en pixels CSS d'un segment de texte en ligne. Il prend en compte la police en cours du contexte.</dd>
+ <dt>{{domxref("TextMetrics.actualBoundingBoxLeft")}} {{readonlyInline}}</dt>
+ <dd>est un <code>double</code> donnant la distance en pixels CSS parallèlement à la ligne de base entre le point d'alignement donné par la propriété {{domxref ("CanvasRenderingContext2D.textAlign")}}, et le côté gauche du rectangle délimitant du texte donné.</dd>
+ <dt>{{domxref("TextMetrics.actualBoundingBoxRight")}} {{readonlyInline}}</dt>
+ <dd>est un <code>double</code> donnant la distance en pixels CSS parallèlement à la ligne de base entre le point d'alignement donné par la propriété {{domxref ("CanvasRenderingContext2D.textAlign")}}, et le côté droit du rectangle délimitant du texte donné.</dd>
+ <dt>{{domxref("TextMetrics.fontBoundingBoxAscent")}} {{readonlyInline}}</dt>
+ <dd>est un <code>double</code> donnant la distance en pixels CSS entre la ligne horizontale indiquée par l'attribut {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le haut du rectangle de délimitation le plus élevé de toutes les polices utilisées pour restituer le texte.</dd>
+ <dt>{{domxref("TextMetrics.fontBoundingBoxDescent")}} {{readonlyInline}}</dt>
+ <dd>est un <code>double</code> donnant la distance en pixels CSS entre la ligne horizontale indiquée par l'attribut {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le bas du rectangle délimitant de toutes les polices utilisées pour restituer le texte.</dd>
+ <dt>{{domxref("TextMetrics.actualBoundingBoxAscent")}} {{readonlyInline}}</dt>
+ <dd>est un <code>double</code> donnant la distance en pixels CSS entre la ligne horizontale indiquée par l'attribut {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le haut du rectangle de délimitation utilisé pour restituer le texte.</dd>
+ <dt>{{domxref("TextMetrics.actualBoundingBoxDescent")}} {{readonlyInline}}</dt>
+ <dd>est un <code>double</code> donnant la distance en pixels CSS entre la ligne horizontale indiquée par l'attribut {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et  le bas du rectangle de délimitation utilisé pour restituer le texte.</dd>
+ <dt>{{domxref("TextMetrics.emHeightAscent")}} {{readonlyInline}}</dt>
+ <dd>est un <code>double</code> donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le haut du carré <em>em</em> dans la boîte de ligne.</dd>
+ <dt>{{domxref("TextMetrics.emHeightDescent")}} {{readonlyInline}}</dt>
+ <dd>est un <code>double</code> donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le bas du carré <em>em</em> dans la boîte de ligne.</dd>
+ <dt>{{domxref("TextMetrics.hangingBaseline")}} {{readonlyInline}}</dt>
+ <dd>est un <code>double</code> donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et la ligne de base supérieure de la boîte de ligne.</dd>
+ <dt>{{domxref("TextMetrics.alphabeticBaseline")}} {{readonlyInline}}</dt>
+ <dd>est un <code>double</code> donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et la ligne de base alphabétique de la boîte de ligne.</dd>
+ <dt>{{domxref("TextMetrics.ideographicBaseline")}} {{readonlyInline}}</dt>
+ <dd>est un <code>double</code> donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et la ligne de base idéographique de la boîte de ligne.</dd>
+</dl>
+
+<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('HTML WHATWG', "the-canvas-element.html#textmetrics", "TextMetrics")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>4.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.8")}}</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td><code>width</code></td>
+   <td>4.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.8")}}</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td><code>actualBoundingBoxLeft</code>,<br>
+    <code>actualBoundingBoxRight</code>,<br>
+    <code>fontBoundingBoxAscent</code>,<br>
+    <code>fontBoundingBoxDescent</code>,<br>
+    <code>actualBoundingBoxAscent</code>,<br>
+    <code>actualBoundingBoxDescent</code>,<br>
+    <code>emHeightAscent</code>,<br>
+    <code>emHeightDescent</code>,<br>
+    <code>hangingBaseline</code>,<br>
+    <code>alphabeticBaseline</code>,<br>
+    <code>ideographicBaseline</code></td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}<sup>[2]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>2.1</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.8")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.0</td>
+   <td>3.2</td>
+  </tr>
+  <tr>
+   <td><code>width</code></td>
+   <td>2.1</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.8")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.0</td>
+   <td>3.2</td>
+  </tr>
+  <tr>
+   <td><code>actualBoundingBoxLeft</code>,<br>
+    <code>actualBoundingBoxRight</code>,<br>
+    <code>fontBoundingBoxAscent</code>,<br>
+    <code>fontBoundingBoxDescent</code>,<br>
+    <code>actualBoundingBoxAscent</code>,<br>
+    <code>actualBoundingBoxDescent</code>,<br>
+    <code>emHeightAscent</code>,<br>
+    <code>emHeightDescent</code>,<br>
+    <code>hangingBaseline</code>,<br>
+    <code>alphabeticBaseline</code>,<br>
+    <code>ideographicBaseline</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}<sup>[2]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Pour activer les métriques de texte avancées, positionner l'indiquateur <code>ExperimentalCanvasFeatures</code> à <code>true</code>.</p>
+
+<p>[2] Gecko n'implémente pas encore cette fonctionnalité. Voir le {{bug(1102584)}} apparenté.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La méthode de création dans {{domxref("CanvasRenderingContext2D")}}.</li>
+ <li>L'élément {{HTMLElement("canvas")}} et son interface associée, {{domxref("HTMLCanvasElement")}}</li>
+</ul>
diff --git a/files/fr/web/api/textmetrics/width/index.html b/files/fr/web/api/textmetrics/width/index.html
new file mode 100644
index 0000000000..b8eca27364
--- /dev/null
+++ b/files/fr/web/api/textmetrics/width/index.html
@@ -0,0 +1,111 @@
+---
+title: TextMetrics.width
+slug: Web/API/TextMetrics/width
+tags:
+  - API
+  - Canevas
+  - Propriété
+  - Référence(2)
+  - TextMetrics
+translation_of: Web/API/TextMetrics/width
+---
+<div>{{APIRef("Canvas API")}}</div>
+
+<p>La propriété en lecture seule <strong>TextMetrics.width</strong> contient en pixels CSS la largeur d'avance du texte (la largeur de la boîte de ligne).</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>readonly <em>metrics</em></var>.width;</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Étant donné cet élément {{HTMLElement("canvas")}} :</p>
+
+<pre class="brush: html">&lt;canvas id="canevas"&gt;&lt;/canvas&gt;
+</pre>
+
+<p>vous pouvez obtenir un objet {{domxref("TextMetrics")}} en utilisant le code suivant :</p>
+
+<pre class="brush: js;highlight:[5]">var canvas = document.getElementById("canevas");
+var ctx = canvas.getContext("2d");
+
+var texte = ctx.measureText("foo"); // objet TextMetrics
+texte.width; // 16;
+</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', "scripting.html#dom-textmetrics-width", "TextMetrics.width")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>4.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.8")}}</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>3.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>2.1</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.8")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.0</td>
+   <td>3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("TextMetrics")}}</li>
+</ul>
diff --git a/files/fr/web/api/timeranges/index.html b/files/fr/web/api/timeranges/index.html
new file mode 100644
index 0000000000..706c1a6757
--- /dev/null
+++ b/files/fr/web/api/timeranges/index.html
@@ -0,0 +1,62 @@
+---
+title: TimeRanges
+slug: Web/API/TimeRanges
+tags:
+  - API
+  - HTML DOM
+  - Interface
+  - NeedsBrowserCompatibility
+  - NeedsMarkupWork
+  - NeedsNewLayout
+  - NeedsSpecTable
+  - Reference
+  - Référence(2)
+translation_of: Web/API/TimeRanges
+---
+<p>{{ APIRef }}</p>
+
+<p>{{ gecko_minversion_header("2.0") }}</p>
+
+<p>L'interface TimeRanges est utilisée pour représenter un ensemble de plages de temps, principalement dans le but de savoir quelles portions du média ont été mises en mémoire tampon lors du chargement avec les éléments {{ HTMLElement("audio") }} et {{ HTMLElement("video") }}.</p>
+
+<p>Un objet TimeRanges comprend une ou plusieurs plages de temps, chacune définie par une position de début et de fin. On récupère ces valeurs en utilisant les méthodes start() et end(), en passant en paramètre l'index de la plage de temps que l'on souhaite récupérer.</p>
+
+<p>Le terme "<a class="external" href="http://www.w3.org/TR/html5/the-iframe-element.html#normalized-timeranges-object" title="http://www.w3.org/TR/html5/the-iframe-element.html#normalized-timeranges-object">normalized TimeRanges object</a>" (objet TimeRanges normalisé) indique que les plages dans un tel objet sont ordonnées, ne se chevauchent pas, ne sont pas vides, et ne se touchent pas (les plages adjacentes sont encapsulées dans une plage plus grande).</p>
+
+<h3 id="Properties" name="Properties">Propriétés</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Nom</th>
+   <th>Description</th>
+   <th>Type retourné</th>
+   <th>Disponibilité</th>
+  </tr>
+  <tr>
+   <td><a href="/en/DOM/TimeRanges.length" title="En/DOM/TimeRanges.length"><code>TimeRanges.length</code></a></td>
+   <td>
+    <p>Le nombre de plages de temps contenues dans l'objet TimeRanges. <strong>Lecture seule</strong>.</p>
+   </td>
+   <td>
+    <p>unsigned long</p>
+   </td>
+   <td>?</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Methods" name="Methods">Méthodes</h3>
+
+<dl>
+ <dt>{{ domxref("TimeRanges.start") }}</dt>
+ <dd>Retourne la position de début de la plage de temps. En paramètre, l'index de la plage de temps souhaitée.</dd>
+ <dt>{{ domxref("TimeRanges.end") }}</dt>
+ <dd>Retourne la position de fin de la plage de temps. En paramètre, l'index de la plage de temps souhaitée.</dd>
+</dl>
+
+<h3 id="Spécification">Spécification</h3>
+
+<ul>
+ <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#timeranges" title="http://www.whatwg.org/specs/web-apps/current-work/#timeranges">WHATWG Working Draft</a></li>
+</ul>
diff --git a/files/fr/web/api/transferable/index.html b/files/fr/web/api/transferable/index.html
new file mode 100644
index 0000000000..2b900b05cb
--- /dev/null
+++ b/files/fr/web/api/transferable/index.html
@@ -0,0 +1,68 @@
+---
+title: Transferable
+slug: Web/API/Transferable
+tags:
+  - API
+  - Interface
+  - Reference
+translation_of: Web/API/Transferable
+---
+<p>{{ ApiRef("HTML DOM") }}</p>
+
+<p>L'interface <code><strong>Transferable</strong></code> représente un objet qui peut être transféré entre différents contextes d'exécution, comme un thread principal et des web workers.</p>
+
+<p>C'est une interface abstraite et il n'y a aucun objet de ce type. Il ne définit pas non plus ni propriété ni méthode : c'est avant tout une étiquette pour signaler les objets qui peuvent être utilisés dans des conditions spécifiques, comme la possibilité d'être transféré à un {{domxref("Worker")}} au moyen de la méthode {{domxref("Worker.postMessage()")}}.</p>
+
+<div class="blockIndicator note">
+<p><strong>Remarque:</strong> L'interface <code>Transferable</code> n'existe plus pour longtemps. La fonctionnalité des objets <code>Transferable</code> existe toujours, cependant, l'inpléméentation est à un niveau plus fondamentale (techniquement parlant, utilisant l'attribut étendu <code>[Transferable]</code> {{Glossary("WebIDL")}})</p>
+</div>
+
+<p>Les interfaces {{domxref("ArrayBuffer")}}, {{domxref("MessagePort")}}, {{domxref("ImageBitmap")}} et {{domxref("OffscreenCanvas")}} l'implémentent.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>L'interface </em><em><code>Transferable</code></em><em> n'implémente ou n'hérite d'aucune propriété spécifique.</em></p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>L'interface </em><em><code>Transferable</code></em><em> n'implémente ou n'hérite d'aucune méthode spécifique.</em></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('HTML WHATWG', "infrastructure.html#transferable-objects", "Transferable")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>
+    <p>Remplace l'interface <code>Transferable</code> avec l'attribut étendue <code>[Transferable]</code> Web IDL.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "infrastructure.html#transferable-objects", "Transferable")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div>
+
+
+<p>{{Compat("api.Transferable")}}</p>
+</div>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les interfaces qui l'implémentent : {{jsxref("ArrayBuffer")}}, {{domxref("MessagePort")}} et {{domxref("ImageBitmap")}}.</li>
+</ul>
diff --git a/files/fr/web/api/transitionevent/index.html b/files/fr/web/api/transitionevent/index.html
new file mode 100644
index 0000000000..8a156255f3
--- /dev/null
+++ b/files/fr/web/api/transitionevent/index.html
@@ -0,0 +1,178 @@
+---
+title: TransitionEvent
+slug: Web/API/TransitionEvent
+translation_of: Web/API/TransitionEvent
+---
+<p>{{APIRef("CSSOM")}} {{SeeCompatTable}}</p>
+
+<p>L' <code><strong>Transition</strong></code><strong><code>Event</code></strong>interface représente des événements fournissant des informations relatives aux <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions" title="/ En-US / docs / Web / Guide / CSS / Using_CSS_transitions">transitions</a> .</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Hérite également des propriétés de son parent {{domxref("Event")}}</em> .</p>
+
+<dl>
+ <dt>{{domxref("TransitionEvent.propertyName")}} {{readonlyInline}}</dt>
+ <dd>Est-ce qu'un {{domxref("DOMString")}} contient le nom de la propriété CSS associée à la transition.</dd>
+ <dt>{{domxref("TransitionEvent.elapsedTime")}} {{readonlyInline}}</dt>
+ <dd>Est- <code>float</code>ce que la durée de l'exécution est en cours, en secondes, lorsque cet événement a été déclenché. Cette valeur n'est pas affectée par la propriété {{cssxref ("transition-delay")}}.</dd>
+ <dt>{{domxref("TransitionEvent.pseudoElement")}} {{readonlyInline}}</dt>
+ <dd>Est-ce qu'un {{domxref("DOMString")}}, commençant par <code>'::'</code>, contenant le nom du <a href="/en-US/docs/Web/CSS/Pseudo-elements" title="/ En-US / docs / Web / CSS / Pseudo-elements">pseudo-élément</a> sur lequel s'exécute l'animation. Si la transition ne s'exécute pas sur un pseudo-élément mais sur l'élément, une chaîne vide:<code>''</code><code>.</code></dd>
+</dl>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("TransitionEvent.TransitionEvent", "TransitionEvent ()")}}</dt>
+ <dd>Crée un <code>TransitionEvent</code>événement avec les paramètres donnés.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Hérite également des propriétés de son parent {{domxref("Event")}}</em> .</p>
+
+<dl>
+ <dt>{{domxref("TransitionEvent.initTransitionEvent ()")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Initialise un <code>TransitionEvent</code>créé en utilisant la méthode {{domxref("Document.createEvent ()")}} déconseillée.</dd>
+</dl>
+
+<h2 id="Caractéristiques">Caractéristiques</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 ('Transitions CSS3', '# Événements-TransitionEvent', 'TransitionEvent')}}</td>
+   <td>{{Spec2 ('Transitions CSS3')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_du_navigateur">Compatibilité du navigateur</h2>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>10.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Constructor</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("23.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>initTransitionEvent()</code> {{non-standard_inline}}{{deprecated_inline}}</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("6.0") }}<br>
+    Removed in {{ CompatGeckoDesktop("23.0") }}</td>
+   <td>10.0</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>pseudoelement</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("23.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("2.0") }}</td>
+   <td>10.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Constructor</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("23.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>initTransitionEvent()</code> {{non-standard_inline}}{{deprecated_inline}}</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("6.0") }}<br>
+    Removed in {{ CompatGeckoMobile("23.0") }}</td>
+   <td>10.0</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>pseudoelement</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("23.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Removal version unknown.</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">Utilisation des transitions CSS</a></li>
+ <li>Propriétés de CSS: {{cssxref ("transition")}}, {{cssxref ("transition-delay")}}, {{cssxref ("transition-duration")}}, {{cssxref ("transition-property") }}, {{Cssxref ("transition-timing-function")}}.</li>
+</ul>
diff --git a/files/fr/web/api/treewalker/currentnode/index.html b/files/fr/web/api/treewalker/currentnode/index.html
new file mode 100644
index 0000000000..a560d8b7db
--- /dev/null
+++ b/files/fr/web/api/treewalker/currentnode/index.html
@@ -0,0 +1,113 @@
+---
+title: TreeWalker.currentNode
+slug: Web/API/TreeWalker/currentNode
+tags:
+  - API
+  - Arborescence
+  - DOM
+  - Noeuds
+  - Propriété
+translation_of: Web/API/TreeWalker/currentNode
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>La propriété <code><strong>TreeWalker.currentNode</strong></code> représente le {{domxref("Node")}} (<em>noeud</em>) sur lequel le {{domxref("TreeWalker")}} est actuellement pointé.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>node</em> = <em>treeWalker</em>.currentNode;
+<code><em>treeWalker</em></code>.currentNode = <em>node</em>;
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">var treeWalker = document.createTreeWalker(
+    document.body,
+    NodeFilter.SHOW_ELEMENT,
+    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+    false
+);
+root = treeWalker.currentNode; // l'élément racine car c'est le premier élément!
+</pre>
+
+<h2 id="Specification" name="Specification">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('DOM WHATWG', '#dom-treewalker-currentnode', 'TreeWalker.currrentNode')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Pas de changement de {{SpecName('DOM2 Traversal_Range')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-currentNode', 'TreeWalker.currentNode')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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.8.1")}}</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>3.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.8.1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9.0</td>
+   <td>3.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("TreeWalker")}}.</li>
+</ul>
diff --git a/files/fr/web/api/treewalker/expandentityreferences/index.html b/files/fr/web/api/treewalker/expandentityreferences/index.html
new file mode 100644
index 0000000000..da1ee29383
--- /dev/null
+++ b/files/fr/web/api/treewalker/expandentityreferences/index.html
@@ -0,0 +1,115 @@
+---
+title: TreeWalker.expandEntityReferences
+slug: Web/API/TreeWalker/expandEntityReferences
+tags:
+  - API
+  - Arborescence
+  - DOM
+  - Noeuds
+  - Propriétés
+translation_of: Web/API/TreeWalker/expandEntityReferences
+---
+<p>{{ APIRef("DOM") }}{{obsolete_header}}</p>
+
+<p>La propriété en lecture seule <code><strong>TreeWalker.expandEntityReferences</strong></code> renvoie un {{domxref("Boolean")}} (<em>booléen</em>) indiquant si les enfants des nœuds de référence d'entité sont visibles ou non pour le {{domxref("TreeWalker")}}.</p>
+
+<p>Si la valeur est <code>false</code> (<em>faux</em>), les enfants des nœuds de référence d'entité (ainsi que tous leurs descendants) sont rejetés. Cela a préséance sur la valeur de la méthode  {{domxref("TreeWalker.whatToShow")}} et du filtre associé.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>expand</em> = <em>treeWalker</em>.expandEntityReferences;
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">var treeWalker = document.createTreeWalker(
+    document.body,
+    NodeFilter.SHOW_ELEMENT,
+    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+    false
+);
+expand = treeWalker.expandEntityReferences;</pre>
+
+<h2 id="Specification" name="Specification">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('DOM WHATWG', '#treewalker', 'Treewalker')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Suppression de la spécification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-expandEntityReferences', 'TreeWalker.expandEntityReferences')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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.9.1")}}<br>
+    Removed in {{CompatGeckoDesktop("21")}}</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>3.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.9.1")}}<br>
+    Removed in {{CompatGeckoMobile("21")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9.0</td>
+   <td>3.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface à laquelle la propriété appartient : {{domxref("TreeWalker")}}.</li>
+</ul>
diff --git a/files/fr/web/api/treewalker/filter/index.html b/files/fr/web/api/treewalker/filter/index.html
new file mode 100644
index 0000000000..f4dcd86d30
--- /dev/null
+++ b/files/fr/web/api/treewalker/filter/index.html
@@ -0,0 +1,114 @@
+---
+title: TreeWalker.filter
+slug: Web/API/TreeWalker/filter
+tags:
+  - API
+  - Arborescence
+  - DOM
+  - Noeuds
+  - Propriétés
+translation_of: Web/API/TreeWalker/filter
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>La propriété en lecture seule <strong><code>TreeWalker.filter</code></strong> renvoie un {{domxref("NodeFilter")}} (<em>filtre de noeuds</em>) qui est l'objet de filtrage associé à {{domxref("TreeWalker")}}.</p>
+
+<p>Lors de la création du <code>TreeWalker</code>, l'objet filtre est transmis comme 3ème paramètre et sa méthode {{domxref("NodeFilter.acceptNode()")}} est appelée sur tous les noeuds pour déterminer s'il doit ou non l'accepter.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>nodeFilter</em> = <em>treeWalker</em>.filter;
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">var treeWalker = document.createTreeWalker(
+    document.body,
+    NodeFilter.SHOW_ELEMENT,
+    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+    false
+);
+nodeFilter = treeWalker.filter; // document.body dans ce cas
+</pre>
+
+<h2 id="Specification" name="Specification">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('DOM WHATWG', '#dom-treewalker-filter', 'TreeWalker.filter')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Pas de changement de {{SpecName('DOM2 Traversal_Range')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-filter', 'TreeWalker.filter')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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.8.1")}}</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>3.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.8.1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9.0</td>
+   <td>3.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("TreeWalker")}} à laquelle elle appartient.</li>
+</ul>
diff --git a/files/fr/web/api/treewalker/firstchild/index.html b/files/fr/web/api/treewalker/firstchild/index.html
new file mode 100644
index 0000000000..ae722dacde
--- /dev/null
+++ b/files/fr/web/api/treewalker/firstchild/index.html
@@ -0,0 +1,112 @@
+---
+title: TreeWalker.firstChild()
+slug: Web/API/TreeWalker/firstChild
+tags:
+  - API
+  - Arborescence
+  - DOM
+  - Méthodes
+  - Noeuds
+translation_of: Web/API/TreeWalker/firstChild
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>La méthode <strong><code>TreeWalker.firstChild()</code></strong> déplace le {{domxref("Node")}} courant vers le premier enfant <em>visible</em> du noeud courant et renvoie l'enfant trouvé. Il déplace aussi le noeud courant vers cet enfant. Si aucun enfant n'existe, elle renvoie <code>null</code> et le noeud courant n'est pas modifié.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>node</em> = <em>treeWalker</em>.firstChild;</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">var treeWalker = document.createTreeWalker(
+    document.body,
+    NodeFilter.SHOW_ELEMENT,
+    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+    false
+);
+var node = treeWalker.firstChild(); // renvoie le premier enfant de l'élément racine ou null si aucun
+
+</pre>
+
+<h2 id="Specification" name="Specification">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('DOM WHATWG', '#dom-treewalker-firstchild', 'TreeWalker.firstChild')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Pas de changement de {{SpecName('DOM2 Traversal_Range')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-firstChild', 'TreeWalker.firstChild')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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.8.1")}}</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>3.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.8.1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9.0</td>
+   <td>3.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("TreeWalker")}} à laquelle elle appartient.</li>
+</ul>
diff --git a/files/fr/web/api/treewalker/index.html b/files/fr/web/api/treewalker/index.html
new file mode 100644
index 0000000000..6d300d066f
--- /dev/null
+++ b/files/fr/web/api/treewalker/index.html
@@ -0,0 +1,218 @@
+---
+title: TreeWalker
+slug: Web/API/TreeWalker
+tags:
+  - API
+  - Arborescence
+  - DOM
+  - Itérateur
+  - Noeuds
+translation_of: Web/API/TreeWalker
+---
+<div>
+<p>{{ APIRef("DOM") }}</p>
+</div>
+
+<p>L'objet <strong><code>TreeWalker</code></strong> représente les noeuds d'un sous-arbre de document et une position à l'intérieur.</p>
+
+<p>Un <code>TreeWalker</code> peut être créé en utilisant la méthode {{domxref("Document.createTreeWalker()")}}.</p>
+
+<h2 id="Properties" name="Properties">Propriétés</h2>
+
+<p><em>Cette interface n'hérite d'aucune propriété.</em></p>
+
+<dl>
+ <dt>{{domxref("TreeWalker.root")}} {{readonlyInline}}</dt>
+ <dd>Renvoie un {{domxref("Node")}} (<em>noeud</em>) représentant le noeud racine comme spécifié lors de la création du <code>TreeWalker</code>.</dd>
+ <dt>{{domxref("TreeWalker.whatToShow")}} {{readonlyInline}}</dt>
+ <dd>Renvoie un <code>unsigned long</code> (<em>long non signé</em>), celui-ci étant un masque constitué de constantes décrivant les types de {{domxref("Node")}} qui doivent être présentés. Les noeuds ne correspondants pas sont ignorés, mais leurs enfants peuvent être inclus, le cas échéant. Les valeurs possibles sont :
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td class="header">Constante</td>
+    <td class="header">Valeur numérique</td>
+    <td class="header">Description</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_ALL</code></td>
+    <td><code>-1</code> (c'est la valeur numérique maximale du <code>unsigned long</code> (<em>non signé long</em>))</td>
+    <td>Affiche tous les noeuds.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_ATTRIBUTE</code> {{deprecated_inline}}</td>
+    <td><code>2</code></td>
+    <td>Affiche l'attribut {{domxref("Attr")}} des noeuds. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Attr")}} comme racine ; dans ce cas, cela signifie que le nœud d'attribut apparaîtra dans la première position de l'itération ou de la traversée. Comme les attributs ne sont jamais des enfants d'autres nœuds, ils n'apparaissent pas lors de la traversée de l'arbre du document.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_CDATA_SECTION</code> {{deprecated_inline}}</td>
+    <td><code>8</code></td>
+    <td>Affiche les noeuds {{domxref("CDATASection")}}.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_COMMENT</code></td>
+    <td><code>128</code></td>
+    <td>Affiche les noeuds {{domxref("Comment")}}.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_DOCUMENT</code></td>
+    <td><code>256</code></td>
+    <td>Affiche les noeuds {{domxref("Document")}}.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_DOCUMENT_FRAGMENT</code></td>
+    <td><code>1024</code></td>
+    <td>Affiche les noeuds {{domxref("DocumentFragment")}}.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_DOCUMENT_TYPE</code></td>
+    <td><code>512</code></td>
+    <td>Affiche les noeuds {{domxref("DocumentType")}}.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_ELEMENT</code></td>
+    <td><code>1</code></td>
+    <td>Affiche les noeuds {{domxref("Element")}}.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_ENTITY</code> {{deprecated_inline}}</td>
+    <td><code>32</code></td>
+    <td>Affiche les noeuds {{domxref("Entity")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{ domxref("Entity") }} comme racine ; dans ce cas, il signifie que le noeud d'entité {{domxref("Entity") }} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_ENTITY_REFERENCE</code> {{deprecated_inline}}</td>
+    <td><code>16</code></td>
+    <td>Affiche les noeuds {{domxref("EntityReference")}}.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_NOTATION</code> {{deprecated_inline}}</td>
+    <td><code>2048</code></td>
+    <td>Affiche les noeuds {{domxref("Notation")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Notation")}} comme racine ; dans ce cas, il signifie que le noeud {{domxref("Notation")}} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_PROCESSING_INSTRUCTION</code></td>
+    <td><code>64</code></td>
+    <td>Affiche les noeuds {{domxref("ProcessingInstruction")}}.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_TEXT</code></td>
+    <td><code>4</code></td>
+    <td>Affiche les noeuds {{domxref("Text")}}.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt>{{domxref("TreeWalker.filter")}} {{readonlyInline}}</dt>
+ <dd>Renvoie un {{domxref("NodeFilter")}} utilisé pour sélectionner les noeuds pertinents.</dd>
+ <dt>{{domxref("TreeWalker.expandEntityReferences")}} {{readonlyInline}}{{obsolete_inline}}</dt>
+ <dd>est un {{domxref("Boolean")}} (<em>booléen</em>) indiquant si, lors de la suppression d'une {{domxref("EntityReference")}}, tout son sous-arbre doit être supprimé en même temps.</dd>
+ <dt>{{domxref("TreeWalker.currentNode")}}</dt>
+ <dd>est le {{domxref("Node")}} sur lequel le <code>TreeWalker</code> pointe actuellement.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Méthodes</h2>
+
+<p><em>Cette interface n'hérite d'aucune méthode.</em></p>
+
+<div class="note">
+<p><em>Notez que le TreeWalker considère uniquement les nœuds DOM visibles..</em></p>
+</div>
+
+<dl>
+ <dt>{{domxref("TreeWalker.parentNode()")}}</dt>
+ <dd>Déplace le {{domxref("Node")}} actuel vers le premier noeud ancêtre <em>visible</em> dans l'ordre du document et renvoie le noeud trouvé. Il déplace également le noeud actuel vers celui-ci. Si aucun noeud n'existe ou s'il est antérieur au <em>noeud racine</em> défini lors de la construction de l'objet, renvoie <code>null</code> et le noeud courant n'est pas modifié.</dd>
+ <dt>{{domxref("TreeWalker.firstChild()")}}</dt>
+ <dd>Déplace le {{domxref("Node")}} courant vers son premier enfant <em>visible</em> et renvoie l'enfant trouvé. Il déplace également le noeud courant vers cet enfant. Si aucun enfant n'existe, renvoie <code>null</code> et le noeud courant n'est pas modifié.</dd>
+ <dt>{{domxref("TreeWalker.lastChild()")}}</dt>
+ <dd>Déplace le {{domxref("Node")}} courant vers son dernier enfant <em>visible</em> et renvoie l'enfant trouvé. Il déplace également le noeud courant vers l'enfant. Si aucun enfant n'existe, renvoie <code>null</code> et le noeud courant n'est pas modifié.</dd>
+ <dt>{{domxref("TreeWalker.previousSibling()")}}</dt>
+ <dd>Déplace le {{domxref("Node")}} courant vers son frère précédent, le cas échéant, et renvoie le frère trouvé. Si aucun noeud frère n'existe, renvoie <code>null</code> et le noeud courant n'est pas modifié.</dd>
+ <dt>{{domxref("TreeWalker.nextSibling()")}}</dt>
+ <dd>Déplace le {{domxref("Node")}} courant vers son frère suivant, le cas échéant, et renvoie le frère trouvé. Si aucun noeud frère n'existe, renvoie <code>null</code> et le noeud courant n'est pas modifié.</dd>
+ <dt>{{domxref("TreeWalker.previousNode()")}}</dt>
+ <dd>Déplace le {{domxref("Node")}} courant vers le noeud <em>visible</em> précédent dans l'ordre du document et renvoie le noeud trouvé. Il déplace également le noeud courant vers celui-ci. Si aucun noeud n'existe ou s'il est avant le <em>noeud racine</em> défini lors de la construction de l'objet, renvoie <code>null</code> et le noeud courant n'est pas modifié.</dd>
+ <dt>{{domxref("TreeWalker.nextNode()")}}</dt>
+ <dd>Déplace le {{domxref("Node")}} courant vers le noeud <em>visible</em> suivant dans l'ordre du document et renvoie le noeud trouvé. Il déplace également le noeud courant vers celui-ci. Si aucun noeud n'existe ou s'il est avant le <em>noeud racine</em> défini lors de la construction de l'objet, renvoie <code>null</code> et le noeud courant n'est pas modifié.</dd>
+</dl>
+
+<h2 id="Specification" name="Specification">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('DOM WHATWG', '#treeWalker', 'TreeWalker')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Suppression de la propriété <code>expandEntityReferences</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker', 'TreeWalker')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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.8.1")}}</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>3.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.8.1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9.0</td>
+   <td>3.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La méthode de création : {{domxref("Document.createTreeWalker()")}}.</li>
+ <li>Interfaces connexes : {{domxref("NodeFilter")}}, {{domxref("NodeIterator")}}.</li>
+</ul>
diff --git a/files/fr/web/api/treewalker/lastchild/index.html b/files/fr/web/api/treewalker/lastchild/index.html
new file mode 100644
index 0000000000..676080ec43
--- /dev/null
+++ b/files/fr/web/api/treewalker/lastchild/index.html
@@ -0,0 +1,112 @@
+---
+title: TreeWalker.lastChild()
+slug: Web/API/TreeWalker/lastChild
+tags:
+  - API
+  - Arborescence
+  - DOM
+  - Méthodes
+  - Noeuds
+translation_of: Web/API/TreeWalker/lastChild
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>La méthode <strong><code>TreeWalker.lastChild()</code></strong> déplace le {{domxref("Node")}} courant au dernier enfant <em>visible</em> du noeud courant et renvoie l'enfant trouvé. Il déplace aussi le noeud courant vers cet enfant. Si aucun enfant n'existe, elle retourne <code>null</code> et le noeud courant reste inchangé.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>node</em> = <em>treeWalker</em>.lastChild();
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">var treeWalker = document.createTreeWalker(
+    document.body,
+    NodeFilter.SHOW_ELEMENT,
+    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+    false
+);
+var node = treeWalker.lastChild(); // renvoie le dernier enfant visible de l'élément racine
+</pre>
+
+<h2 id="Specification" name="Specification">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('DOM WHATWG', '#dom-treewalker-lastchild', 'TreeWalker.lastChild')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Pas de changement de {{SpecName('DOM2 Traversal_Range')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-lastChild', 'TreeWalker.lastChild')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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.8.1")}}</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>3.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.8.1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9.0</td>
+   <td>3.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("TreeWalker")}} à laquelle elle appartient.</li>
+</ul>
diff --git a/files/fr/web/api/treewalker/nextnode/index.html b/files/fr/web/api/treewalker/nextnode/index.html
new file mode 100644
index 0000000000..38c327e2f8
--- /dev/null
+++ b/files/fr/web/api/treewalker/nextnode/index.html
@@ -0,0 +1,113 @@
+---
+title: TreeWalker.nextNode()
+slug: Web/API/TreeWalker/nextNode
+tags:
+  - API
+  - Arborescence
+  - DOM
+  - Méthodes
+  - Noeuds
+translation_of: Web/API/TreeWalker/nextNode
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>La méthode <strong><code>TreeWalker.nextNode()</code></strong> déplace le {{domxref("Node")}} courant au noeud suivant <em>visible</em> dans l'ordre du document et renvoie le noeud trouvé. Elle déplace aussi le noeud courant vers celui-ci. Si aucun noeud n'existe, elle renvoie <code>null</code> et le noeud courant est inchangé.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>node</em> = <em>treeWalker</em>.nextNode();
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">var treeWalker = document.createTreeWalker(
+    document.body,
+    NodeFilter.SHOW_ELEMENT,
+    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+    false
+);
+var node = treeWalker.nextNode(); // renvoie le premier enfant de la racine, car il s'agit du noeud suivant dans l'ordre du document
+
+</pre>
+
+<h2 id="Specification" name="Specification">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('DOM WHATWG', '#dom-treewalker-nextnode', 'TreeWalker.nextNode')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Pas de changement de {{SpecName('DOM2 Traversal_Range')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-nextNode', 'TreeWalker.nextNode')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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.8.1")}}</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>3.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.8.1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9.0</td>
+   <td>3.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("TreeWalker")}} à laquelle elle appartient.</li>
+</ul>
diff --git a/files/fr/web/api/treewalker/nextsibling/index.html b/files/fr/web/api/treewalker/nextsibling/index.html
new file mode 100644
index 0000000000..9fc36b5678
--- /dev/null
+++ b/files/fr/web/api/treewalker/nextsibling/index.html
@@ -0,0 +1,114 @@
+---
+title: TreeWalker.nextSibling()
+slug: Web/API/TreeWalker/nextSibling
+tags:
+  - API
+  - Arborescence
+  - DOM
+  - Méthodes
+  - Noeuds
+translation_of: Web/API/TreeWalker/nextSibling
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>La méthode <strong><code>TreeWalker.nextSibling()</code></strong> déplace le {{domxref("Node")}} courant vers son frère suivant, le cas échéant, et renvoie le frère trouvé. Si aucun noeud frère n'est trouvé, elle renvoie <code>null</code> et le noeud courant reste inchangé.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>node</em> = <em>treeWalker</em>.nextSibling();
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">var treeWalker = document.createTreeWalker(
+    document.body,
+    NodeFilter.SHOW_ELEMENT,
+    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+    false
+);
+treeWalker.firstChild();
+var node = treeWalker.nextSibling(); // renvoie null si le premier enfant de l'élément racine n'a pas de frère
+
+</pre>
+
+<h2 id="Specification" name="Specification">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('DOM WHATWG', '#dom-treewalker-nextsibling', 'TreeWalker.nextSibling')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Pas de changement de {{SpecName('DOM2 Traversal_Range')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-nextSibling', 'TreeWalker.nextSibling')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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.8.1")}}</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>3.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.8.1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9.0</td>
+   <td>3.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("TreeWalker")}} à laquelle elle appartient.</li>
+</ul>
diff --git a/files/fr/web/api/treewalker/parentnode/index.html b/files/fr/web/api/treewalker/parentnode/index.html
new file mode 100644
index 0000000000..2215430520
--- /dev/null
+++ b/files/fr/web/api/treewalker/parentnode/index.html
@@ -0,0 +1,113 @@
+---
+title: TreeWalker.parentNode()
+slug: Web/API/TreeWalker/parentNode
+tags:
+  - API
+  - Arborescence
+  - DOM
+  - Méthodes
+  - Noeuds
+translation_of: Web/API/TreeWalker/parentNode
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>La méthode <strong><code>TreeWalker.parentNode()</code></strong> déplace le {{domxref("Node")}} courant vers le premier noeud ancêtre <em>visible</em> dans l'ordre du document et renvoie le noeud trouvé. Si aucun noeud n'existe ou s'il est au-dessus du <em>noeud racine</em> du <code>TreeWalker</code>, elle renvoie <code>null</code> et le noeud actuel reste inchangé.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>node</em> = <em>treeWalker</em>.parentNode();
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">var treeWalker = document.createTreeWalker(
+    document.body,
+    NodeFilter.SHOW_ELEMENT,
+    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+    false
+);
+var node = treeWalker.parentNode(); // returns null as there is no parent
+
+</pre>
+
+<h2 id="Specification" name="Specification">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('DOM WHATWG', '#dom-treewalker-parentnode', 'TreeWalker.parentNode')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Pas de changement de {{SpecName('DOM2 Traversal_Range')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-parentNode', 'TreeWalker.parentNode')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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.8.1")}}</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>3.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.8.1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9.0</td>
+   <td>3.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("TreeWalker")}} à laquelle elle appartient.</li>
+</ul>
diff --git a/files/fr/web/api/treewalker/previousnode/index.html b/files/fr/web/api/treewalker/previousnode/index.html
new file mode 100644
index 0000000000..1bc9d63925
--- /dev/null
+++ b/files/fr/web/api/treewalker/previousnode/index.html
@@ -0,0 +1,113 @@
+---
+title: TreeWalker.previousNode()
+slug: Web/API/TreeWalker/previousNode
+tags:
+  - API
+  - Arborescence
+  - DOM
+  - Méthodes
+  - Noeuds
+translation_of: Web/API/TreeWalker/previousNode
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>La méthode <strong><code>TreeWalker.previousNode()</code></strong> déplace le {{domxref("Node")}} courant vers le noeud précédent <em>visible</em> dans l'ordre du document et renvoie le noeud trouvé. Elle déplace aussi le noeud courant vers celui-ci. S'il n'en existe aucun ou s'il est avant le <em>noeud racine</em> défini lors de la construction de l'objet, elle renvoie <code>null</code> et le noeud actuel n'est pas changé.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>node</em> = <em>treeWalker</em>.previousNode();
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">var treeWalker = document.createTreeWalker(
+    document.body,
+    NodeFilter.SHOW_ELEMENT,
+    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+    false
+);
+var node = treeWalker.previousNode(); // renvoie null car il n'y a pas de parent
+
+</pre>
+
+<h2 id="Specification" name="Specification">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('DOM WHATWG', '#dom-treewalker-previousnode', 'TreeWalker.previousNode')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Pas de changement de {{SpecName('DOM2 Traversal_Range')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-previousNode', 'TreeWalker.previousNode')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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.8.1")}}</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>3.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.8.1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9.0</td>
+   <td>3.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("TreeWalker")}} à laquelle elle appartient.</li>
+</ul>
diff --git a/files/fr/web/api/treewalker/previoussibling/index.html b/files/fr/web/api/treewalker/previoussibling/index.html
new file mode 100644
index 0000000000..69b99d3c6d
--- /dev/null
+++ b/files/fr/web/api/treewalker/previoussibling/index.html
@@ -0,0 +1,113 @@
+---
+title: TreeWalker.previousSibling()
+slug: Web/API/TreeWalker/previousSibling
+tags:
+  - API
+  - Arborescence
+  - DOM
+  - Méthodes
+  - Noeuds
+translation_of: Web/API/TreeWalker/previousSibling
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>La méthode <strong><code>TreeWalker.previousSibling()</code></strong> déplace le {{domxref("Node")}} courant vers son frère précédent, le cas échéant, et renvoie le frère trouvé. S'il n'y en a pas, elle renvoie <code>null</code> et le noeud actuel est inchangé.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>node</em> = <em>treeWalker</em>.previousSibling();
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">var treeWalker = document.createTreeWalker(
+    document.body,
+    NodeFilter.SHOW_ELEMENT,
+    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+    false
+);
+var node = treeWalker.previousSibling(); // renvoie null car il n'y a pas de frère précédent
+
+</pre>
+
+<h2 id="Specification" name="Specification">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('DOM WHATWG', '#dom-treewalker-previoussibling', 'TreeWalker.previousSibling')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Pas de changement de {{SpecName('DOM2 Traversal_Range')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-previousSibling', 'TreeWalker.previousSibling')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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.8.1")}}</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>3.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.8.1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9.0</td>
+   <td>3.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("TreeWalker")}} à laquelle elle appartient.</li>
+</ul>
diff --git a/files/fr/web/api/treewalker/root/index.html b/files/fr/web/api/treewalker/root/index.html
new file mode 100644
index 0000000000..e79e7344be
--- /dev/null
+++ b/files/fr/web/api/treewalker/root/index.html
@@ -0,0 +1,111 @@
+---
+title: TreeWalker.root
+slug: Web/API/TreeWalker/root
+tags:
+  - API
+  - Arborescence
+  - DOM
+  - Noeuds
+  - Propriétés
+translation_of: Web/API/TreeWalker/root
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>La propriété en lecture seule <code><strong>TreeWalker.root</strong></code> renvoie le noeud qui est la racine de ce que TreeWalker doit traverser.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>root</em> = TreeWalker.root;</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">var treeWalker = document.createTreeWalker(
+    document.body,
+    NodeFilter.SHOW_ELEMENT,
+    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+    false
+);
+root = treeWalker.root; // document.body dans ce cas
+</pre>
+
+<h2 id="Specification" name="Specification">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('DOM WHATWG', '#dom-treewalker-root', 'TreeWalker.root')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Pas de changement de {{SpecName('DOM2 Traversal_Range')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-root', 'TreeWalker.root')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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.8.1")}}</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>3.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.8.1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9.0</td>
+   <td>3.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("TreeWalker")}}.</li>
+</ul>
diff --git a/files/fr/web/api/treewalker/whattoshow/index.html b/files/fr/web/api/treewalker/whattoshow/index.html
new file mode 100644
index 0000000000..c37d4f996c
--- /dev/null
+++ b/files/fr/web/api/treewalker/whattoshow/index.html
@@ -0,0 +1,143 @@
+---
+title: TreeWalker.whatToShow
+slug: Web/API/TreeWalker/whatToShow
+tags:
+  - API
+  - DOM
+  - Propriété
+  - Reference
+translation_of: Web/API/TreeWalker/whatToShow
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La propriété en lecture seule <code><strong>TreeWalker.whatToShow</strong></code> renvoie un <code>unsigned long</code> (<em>non signé long</em>) qui est un masque constitué de constantes décrivant les types de {{domxref("Node")}} à présenter. Les noeuds ne correspondant pas sont ignorés, mais leurs enfants peuvent être inclus s'ils sont pertinents. Les valeurs possibles sont :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Constante
+   </th><th scope="col">Valeur numérique
+   </th><th scope="col">Description
+  </th></tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>NodeFilter.SHOW_ALL</code></td>
+   <td><code>-1</code> (c'est la valeur numérique maximale du <code>unsigned long</code> (<em>non signé long</em>))</td>
+   <td>Affiche tous les noeuds.</td>
+  </tr>
+  <tr>
+   <td><code>NodeFilter.SHOW_ATTRIBUTE</code> {{deprecated_inline}}</td>
+   <td><code>2</code></td>
+   <td>Affiche l'attribut {{domxref("Attr")}} des noeuds. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Attr")}} comme racine ; dans ce cas, cela signifie que le nœud d'attribut apparaîtra dans la première position de l'itération ou de la traversée. Comme les attributs ne sont jamais des enfants d'autres nœuds, ils n'apparaissent pas lors de la traversée de l'arbre du document.</td>
+  </tr>
+  <tr>
+   <td><code>NodeFilter.SHOW_CDATA_SECTION</code> {{deprecated_inline}}</td>
+   <td><code>8</code></td>
+   <td>Affiche les noeuds {{domxref("CDATASection")}}.</td>
+  </tr>
+  <tr>
+   <td><code>NodeFilter.SHOW_COMMENT</code></td>
+   <td><code>128</code></td>
+   <td>Affiche les noeuds {{domxref("Comment")}}.</td>
+  </tr>
+  <tr>
+   <td><code>NodeFilter.SHOW_DOCUMENT</code></td>
+   <td><code>256</code></td>
+   <td>Affiche les noeuds {{domxref("Document")}}.</td>
+  </tr>
+  <tr>
+   <td><code>NodeFilter.SHOW_DOCUMENT_FRAGMENT</code></td>
+   <td><code>1024</code></td>
+   <td>Affiche les noeuds {{domxref("DocumentFragment")}}.</td>
+  </tr>
+  <tr>
+   <td><code>NodeFilter.SHOW_DOCUMENT_TYPE</code></td>
+   <td><code>512</code></td>
+   <td>Affiche les noeuds {{domxref("DocumentType")}}.</td>
+  </tr>
+  <tr>
+   <td><code>NodeFilter.SHOW_ELEMENT</code></td>
+   <td><code>1</code></td>
+   <td>Affiche les noeuds {{domxref("Element")}}.</td>
+  </tr>
+  <tr>
+   <td><code>NodeFilter.SHOW_ENTITY</code> {{deprecated_inline}}</td>
+   <td><code>32</code></td>
+   <td>Affiche les noeuds {{domxref("Entity")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{ domxref("Entity") }} comme racine ; dans ce cas, il signifie que le noeud d'entité {{domxref("Entity") }} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.</td>
+  </tr>
+  <tr>
+   <td><code>NodeFilter.SHOW_ENTITY_REFERENCE</code> {{deprecated_inline}}</td>
+   <td><code>16</code></td>
+   <td>Affiche les noeuds {{domxref("EntityReference")}}.</td>
+  </tr>
+  <tr>
+   <td><code>NodeFilter.SHOW_NOTATION</code> {{deprecated_inline}}</td>
+   <td><code>2048</code></td>
+   <td>Affiche les noeuds {{domxref("Notation")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Notation")}} comme racine ; dans ce cas, il signifie que le noeud {{domxref("Notation")}} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.</td>
+  </tr>
+  <tr>
+   <td><code>NodeFilter.SHOW_PROCESSING_INSTRUCTION</code></td>
+   <td><code>64</code></td>
+   <td>Affiche les noeuds {{domxref("ProcessingInstruction")}}.</td>
+  </tr>
+  <tr>
+   <td><code>NodeFilter.SHOW_TEXT</code></td>
+   <td><code>4</code></td>
+   <td>Affiche les noeuds {{domxref("Text")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>nodeTypes</em> = treeWalker.whatToShow;</pre>
+
+<h2 id="Example" name="Example">Exemples</h2>
+
+<pre class="brush: js">var treeWalker = document.createTreeWalker(
+    document.body,
+    NodeFilter.SHOW_ELEMENT + NodeFilter.SHOW_COMMENT + NodeFilter.SHOW_TEXT,
+    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+    false
+);
+if( (treeWalker.whatToShow == NodeFilter.SHOW_ALL) ||
+    (treeWalker.whatToShow % (NodeFilter.SHOW_COMMENT*2)) &gt;= NodeFilter.SHOW_COMMENT) {
+    // treeWalker affichera des commentaires
+}
+</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('DOM WHATWG', '#dom-treewalker-whattoshow', 'TreeWalker.whatToShow')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Pas de changement de {{SpecName('DOM2 Traversal_Range')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-whatToShow', 'TreeWalker.whatToShow')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.TreeWalker.whatToShow")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("TreeWalker")}}.</li>
+</ul>
diff --git a/files/fr/web/api/uievent/detail/index.html b/files/fr/web/api/uievent/detail/index.html
new file mode 100644
index 0000000000..633be9d943
--- /dev/null
+++ b/files/fr/web/api/uievent/detail/index.html
@@ -0,0 +1,47 @@
+---
+title: UIEvent.detail
+slug: Web/API/UIEvent/detail
+tags:
+  - API
+  - DOM
+  - Propriété
+  - Reference
+translation_of: Web/API/UIEvent/detail
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p><strong><code>UIEvent.detail</code> </strong>est une propriété en lecture seule, qui, lorsqu'elle ne vaut pas zéro, donne le nombre de clics courant (ou suivant en fonction de l'événement).</p>
+
+<p>Pour les événements {{event("click")}} ou {{event("dblclick")}}, <code>UIEvent.detail</code> donne le nombre de clics courant.</p>
+
+<p>Pour les événements {{event("mousedown")}} ou {{event("mouseup")}}, <code>UIEvent.detail</code> donne le nombre de clics courant <em>plus</em> un.</p>
+
+<p>Pour tous les autres objets {{domxref("UIEvent")}}, <code>UIEvent.detail</code> vaut toujours zéro.</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('DOM3 Events','#widl-UIEvent-detail','UIEvent.detail')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events','#Events-UIEvent-detail','UIEvent.detail')}}</td>
+   <td>{{Spec2('DOM2 Events')}}</td>
+   <td>Première définition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.UIEvent.detail")}}</p>
diff --git a/files/fr/web/api/uievent/index.html b/files/fr/web/api/uievent/index.html
new file mode 100644
index 0000000000..342b6ae2e3
--- /dev/null
+++ b/files/fr/web/api/uievent/index.html
@@ -0,0 +1,109 @@
+---
+title: UIEvent
+slug: Web/API/UIEvent
+tags:
+  - API
+  - DOM
+  - Event
+  - Evènement
+  - Interface
+  - Reference
+  - UIEvent
+translation_of: Web/API/UIEvent
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p><span class="seoSummary">L'interface <strong><code>UIEvent</code></strong> représente des évènements simples de l'interface utilisateur.</span></p>
+
+<p><code>UIEvent</code> dérive de {{domxref("Event")}}. Bien que la méthode {{domxref("UIEvent.initUIEvent()")}}  soit conservée pour la compatibilité ascendante, vous devez créer un objet <code>UIEvent</code> en utilisant le constructeur {{domxref("UIEvent.UIEvent", "UIEvent()")}}.</p>
+
+<p>Plusieurs interfaces descendent directement ou indirectement de celle-ci : {{domxref("MouseEvent")}}, {{domxref("FocusEvent")}}, {{domxref("KeyboardEvent")}}, {{domxref("WheelEvent")}}, {{domxref("InputEvent")}} et {{domxref("CompositionEvent")}}.</p>
+
+<h2 id="Constructeurs">Constructeurs</h2>
+
+<dl>
+ <dt>{{domxref("UIEvent.UIEvent()", "UIEvent()")}}</dt>
+ <dd>Crée un objet <code>UIEvent</code>.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Cette interface hérite également des propriétés de son parent {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("UIEvent.cancelBubble")}} {{Non-standard_inline}} {{Deprecated_inline}}</dt>
+ <dd>{{jsxref("Boolean")}} <em>(booléen)</em> indiquant si les conséquences de l'évènement ont été annulées ou non.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("UIEvent.detail")}}{{readonlyinline}}</dt>
+ <dd>Retourne un <code>long</code> qui donne quelques détails sur l'évènement, dépendant du type d'évènement.</dd>
+ <dt>{{domxref("UIEvent.isChar")}} {{obsolete_inline}} {{readonlyinline}}</dt>
+ <dd>Retourne un {{jsxref("Boolean")}} indiquant si l'évènement a produit un caractère clé ou non.</dd>
+ <dt>{{domxref("UIEvent.layerX")}} {{Non-standard_inline}} {{readonlyinline}}</dt>
+ <dd>Retourne la coordonnée horizontale de l'évènement par rapport à la couche actuelle.</dd>
+ <dt>{{domxref("UIEvent.layerY")}} {{Non-standard_inline}} {{readonlyinline}}</dt>
+ <dd>Retourne la coordonnée verticale de l'évènement par rapport à la couche actuelle.</dd>
+ <dt>{{domxref("UIEvent.pageX")}} {{Non-standard_inline}} {{readonlyinline}}</dt>
+ <dd>Retourne la coordonnée horizontale de l'évènement par rapport à l'ensemble du document.</dd>
+ <dt>{{domxref("UIEvent.pageY")}} {{Non-standard_inline}} {{readonlyinline}}</dt>
+ <dd>Retourne la coordonnée verticale de l'évènement par rapport à l'ensemble du document.</dd>
+ <dt>{{domxref("UIEvent.sourceCapabilities")}} {{non-standard_inline}} {{readonlyinline}}</dt>
+ <dd>Retourne une instance de l'interface <code>InputDeviceCapabilities</code> qui fournit des informations sur le périphérique physique responsable de l'évènement.</dd>
+ <dt>{{domxref("UIEvent.view")}}{{readonlyinline}}</dt>
+ <dd>Retourne un {{domxref("WindowProxy")}} qui contient la vue de la génération de l'évènement.</dd>
+ <dt>{{domxref("UIEvent.which")}} {{Non-standard_inline}} {{readonlyinline}}</dt>
+ <dd>Retourne l'identifiant <code>keyCode</code> de la touche pressée, ou le code du caractère (<code>charCode</code>) pour une touche alphanumérique enfoncée.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Cette interface hérite également des méthodes de son parent, {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("UIEvent.initUIEvent()")}} {{deprecated_inline}}</dt>
+ <dd>Initialise un objet <code>UIEvent</code>. <span id="result_box" lang="fr"><span>Si l'évènement a déjà été envoyé, cette méthode ne fait rien.</span></span></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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('InputDeviceCapabilities')}}</td>
+   <td>{{Spec2('InputDeviceCapabilities')}}</td>
+   <td>Ajoute la propriété <code>sourceCapabilities</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('UI Events')}}</td>
+   <td>{{Spec2('UI Events')}}</td>
+   <td>Extension de DOM3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', '#interface-UIEvent', 'UIEvent')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>Ajoute le constructeur <code>UIEvent()</code>, déprécie la méthode <code>initUIEvent()</code> et change le type de <code>view</code> de <code>AbstractView</code> vers <code>WindowProxy</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events', '#Events-UIEvent', 'UIEvent')}}</td>
+   <td>{{Spec2('DOM2 Events')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.UIEvent")}}</p>
+
+<h2 class="editable" id="Voir_aussi"><span>Voir aussi</span></h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a></li>
+ <li>{{ domxref("Event") }}</li>
+</ul>
diff --git a/files/fr/web/api/uievent/layerx/index.html b/files/fr/web/api/uievent/layerx/index.html
new file mode 100644
index 0000000000..85dffefb61
--- /dev/null
+++ b/files/fr/web/api/uievent/layerx/index.html
@@ -0,0 +1,154 @@
+---
+title: event.layerX
+slug: Web/API/UIEvent/layerX
+tags:
+  - API
+  - DOM
+  - Propriété
+  - Reference
+  - UIEvent
+  - lecture seule
+translation_of: Web/API/UIEvent/layerX
+---
+<p>{{APIRef("DOM Events")}} {{Non-standard_header}}</p>
+
+<p>La propriété en lecture seule <code><strong>UIEvent.layerX</strong></code> retourne la coordonnée horizontale de l'évènement relativement à la couche en cours.</p>
+
+<p>Cette propriété prend en compte le défilement de la page, et retourne une valeur relative à l'ensemble du document, à moins que l'évènement ne se soit produit à l'intérieur d'un élément positionné, auquel cas la valeur retournée est relative au coin supérieur gauche de l'élément positionné.</p>
+
+<h2 id="Syntax" name="Syntax"><strong>Syntaxe</strong></h2>
+
+<pre>var <em>posx</em> = <em>event</em>.layerX</pre>
+
+<ul>
+ <li><em><code>posx</code></em> est une valeur entière en pixels pour la coordonnée x du pointeur de la souris, lorsque l'évènement souris est déclenché.</li>
+</ul>
+
+<h2 id="Syntax" name="Syntax"><strong>Exemples</strong></h2>
+
+<pre class="eval">&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;Exemple pageX\pageY &amp; layerX\layerY&lt;/title&gt;
+
+&lt;script type="text/javascript"&gt;
+
+function montrerCoords(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="montrerCoords(event)"&gt;
+
+&lt;p&gt;Pour afficher les coordonnées de la souris, veuillez cliquer quelque part sur la page.&lt;/p&gt;
+
+&lt;div id="d1"&gt;
+&lt;span&gt;Cette div n'est pas positionnée : cliquer dedans renverra des valeurs layerX/layerY identiques à celles de pageX/PageY.&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;div id="d2"&gt;
+
+&lt;span&gt;Cette div est positionnée : cliquer dedans renverra des valeurs layerX/layerY
+relatives à son coin supérieur. Notez que les valeurs de pageX\pageY sont toujours relatives au document, ce qui inclue le défilement dans la page.&lt;/span&gt;
+
+&lt;span&gt;Un peu de défilement ! C'est un div positionné : le clic renverra des valeurs layerX/layerY relative à son coin supérieur gauche. Notez que les valeurs de pageX\pageY sont toujours relatives au document, ce qui inclue le défilement dans la page.&lt;/span&gt;
+
+&lt;/div&gt;
+
+&lt;div id="d3"&gt;
+&lt;form name="form_coords" id="form1"&gt;
+ Id de l'élément parent : &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="Spécifications">Spécifications</h2>
+
+<p><em>Cette propriété ne fait partie d'aucune spécification.</em></p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>9</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/api/ulongrange/index.html b/files/fr/web/api/ulongrange/index.html
new file mode 100644
index 0000000000..b902f46959
--- /dev/null
+++ b/files/fr/web/api/ulongrange/index.html
@@ -0,0 +1,64 @@
+---
+title: ULongRange
+slug: Web/API/ULongRange
+tags:
+  - API
+  - API Media Streams
+  - API de capture multimédia et de flux
+  - Contraintes
+  - Dictionnaire
+  - Interface
+  - LongRange
+  - Media
+  - Reference
+  - WebRTC
+translation_of: Web/API/ULongRange
+---
+<div>{{APIRef("Media Capture and Streams")}}</div>
+
+<p>Le dictionnaire <strong><code>ULongRange</code></strong> est utilisé pour définir une plage de valeurs entières autorisées pour une propriété, avec l'une ou les deux valeurs maximale et minimale spécifiées. Le dictionnaire {{domxref("ConstrainULongRange")}} est basé sur cela, en l'augmentant pour prendre également en charge les valeurs exactes et idéales.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt><code>max</code></dt>
+ <dd>Valeur numérique comprise dans la plage d'entiers 32 bits signés, spécifiant la plus grande valeur autorisée de la propriété qu'elle décrit.</dd>
+ <dt><code>min</code></dt>
+ <dd>Une valeur numérique dans la plage d'entiers 32 bits signés, spécifiant la plus petite valeur autorisée de la propriété qu'elle décrit.</dd>
+</dl>
+
+<p>Les valeurs <code>min</code> et/ou <code>max</code> spécifiées sont <em>obligatoires</em>. Si aucune correspondance ne peut être trouvée dans la plage donnée, une erreur se produit.</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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Capture', '#dom-ulongrange', 'ULongRange')}}</td>
+   <td>{{Spec2('Media Capture')}}</td>
+   <td>Définiton initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.ULongRange")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Media_Streams_API">API de capture multimédia et de flux</a></li>
+ <li><a href="/en-US/docs/Web/API/Media_Streams_API/Constraints">Capacités, contraintes et paramètres</a></li>
+ <li>{{domxref("ConstrainULongRange")}}</li>
+ <li>{{domxref("MediaTrackConstraints")}}</li>
+ <li>{{domxref("MediaTrackCapabilities")}}</li>
+ <li>{{domxref("MediaTrackSupportedConstraints")}}</li>
+</ul>
diff --git a/files/fr/web/api/url/createobjecturl/index.html b/files/fr/web/api/url/createobjecturl/index.html
new file mode 100644
index 0000000000..7fb1edca6b
--- /dev/null
+++ b/files/fr/web/api/url/createobjecturl/index.html
@@ -0,0 +1,96 @@
+---
+title: URL.createObjectURL
+slug: Web/API/URL/createObjectURL
+translation_of: Web/API/URL/createObjectURL
+---
+<h2 id="Summary" name="Summary">Résumé</h2>
+
+<p>{{APIRef("URL")}}<br>
+ La méthode statique <strong>URL.createObjectURL()</strong> crée une chaîne contenant une URL représentant l’objet passé en paramètre. La durée de vie de l’URL est liée au {{domxref("document")}} de la fenêtre depuis laquelle elle a été créée. La nouvelle URL d’objet représente l’objet {{domxref("File")}} ou {{domxref("Blob")}} spécifié.</p>
+
+<p>Pour libérer une URL d’objet, il faut appeler {{domxref("URL.revokeObjectURL", "revokeObjectURL()")}}</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Cette fonctionnalité n'est pas disponible dans les <a href="/fr/docs/Web/API/ServiceWorker">Service Workers</a> à cause de possible fuite mémoire.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>objectURL</em> = URL.createObjectURL(<em>object</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>object</code></dt>
+ <dd>Un objet {{domxref("File")}}, {{domxref("Blob")}} ou {{domxref("MediaSource")}} pour lequel créer une URL d’objet.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<dl>
+ <dd>Une {{domxref("DOMString")}} contenant une URL d’objet, pouvant être utilisée comme une référence vers l’objet source <code>object</code> spécifié.</dd>
+</dl>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<p>Voir <a href="/fr/docs/Web/API/File/Using_files_from_web_applications#Exemple_Utilisation_de_l'objet_URLs_pour_afficher_des_images" title="https://developer.mozilla.org/en/Using_files_from_web_applications#Example:_Using_object_URLs_to_display_images">Utilisation de l’objet URLs pour afficher des images</a>.</p>
+
+<h2 id="Notes" name="Notes">Notes d’utilisation</h2>
+
+<h3 id="Gestion_de_la_mémoire">Gestion de la mémoire</h3>
+
+<p>À chaque fois que vous appelez <code>createObjectURL()</code>, une nouvelle URL d’objet est créée, même si vous en avez déjà créée une pour le même objet. Chacune d’elles doit être libérée en appelant {{domxref("URL.revokeObjectURL()")}} lorsque vous n’en avez plus besoin.</p>
+
+<p>Les navigateurs libèrent automatiquement les URL d’objet lorsque le document est déchargé (<em>unload</em>) ; cependant, pour une performance et une utilisation de la mémoire optimales, si vous avez la possiblité de les libérer explictement sans danger, vous devriez le faire.</p>
+
+<h3 id="Utiliser_les_URL_d’objet_pour_les_flux_de_média">Utiliser les URL d’objet pour les flux de média</h3>
+
+<p>Dans d’anciennes versions de la spécification de Media Source, attacher un flux à un élément {{HTMLElement("video")}} requiérait de créer une URL d’objet pour le {{domxref("MediaStream")}}. Cela n’est plus nécessaire, et les navigateurs cessent progressivement de supporter cette pratique.</p>
+
+<div class="warning">
+<p><strong>Important :</strong> si vous avez toujours du code qui repose sur {{domxref("URL.createObjectURL")}} pour attacher des flux à des éléments média, vous devez mettre à jour votre code pour attacher simplement {{domxref("HTMLMediaElement.srcObject", "srcObject")}} directement au <code>MediaStream</code>.</p>
+</div>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">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("File API", "#dfn-createObjectURL", "createObjectURL()")}}</td>
+   <td>{{Spec2("File API")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Media Source Extensions", "#dom-url-createobjecturl", "URL")}}</td>
+   <td>{{Spec2("Media Source Extensions")}}</td>
+   <td>
+    <p>Extension MediaSource.<br>
+     Les anciennes versions de cette spécification utilisaient <code>createObjectURL()</code> pour les objets {{domxref("MediaStream")}} ; ce n’est plus supporté.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.URL.createObjectURL")}}</p>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/File/Using_files_from_web_applications" title="Using files from web applications">Utiliser des fichiers à partir d’applications web</a></li>
+ <li><a href="/fr/docs/Web/API/File/Using_files_from_web_applications#Exemple_Utilisation_de_l'objet_URLs_pour_afficher_des_images" title="https://developer.mozilla.org/en/Using_files_from_web_applications#Example:_Using_object_URLs_to_display_images">Utilisation de l’objet URLs pour afficher des images</a></li>
+ <li>{{domxref("URL.revokeObjectURL()")}}</li>
+ <li>{{domxref("HTMLMediaElement.srcObject")}}</li>
+ <li>{{domxref("FileReader.readAsDataURL()")}}</li>
+</ul>
diff --git a/files/fr/web/api/url/hash/index.html b/files/fr/web/api/url/hash/index.html
new file mode 100644
index 0000000000..df993c4a2f
--- /dev/null
+++ b/files/fr/web/api/url/hash/index.html
@@ -0,0 +1,62 @@
+---
+title: URL.hash
+slug: Web/API/URL/hash
+tags:
+  - API
+  - Hash
+  - Propriété
+  - Reference
+  - URL
+translation_of: Web/API/URL/hash
+---
+<div>{{ APIRef("URL API") }}</div>
+
+<p><span class="seoSummary">La propriété <strong><code>hash</code></strong> de l'interface {{domxref("URL")}} retourne un {{domxref("USVString")}} contenant le caractère <code>'#'</code> suivi par l'identificateur de fragment de URL.</span></p>
+
+<p>Le fragment n'est pas <a href="/en-US/docs/Glossary/percent-encoding">décodé en pourcent</a>. Si l'URL ne contient pas d'identificateur de fragment, la valeur de cette propriété est une chaîne de caractère vide — <code>""</code>.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>string</em> = <em>object</em>.hash;
+<em>object</em>.hash = <em>string</em>;
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un {{domxref("USVString")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: html">var url = new URL('https://developer.mozilla.org/en-US/docs/Web/API/URL/href#Examples');
+url.hash // Returns '#Examples'</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('URL', '#dom-url-hash', 'URL.hash')}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.URL.hash")}}</p>
+
+<h2 id="A_voir_également">A voir également</h2>
+
+<ul>
+ <li>L'interface {{domxref("URL")}} dont il est contenu.</li>
+</ul>
diff --git a/files/fr/web/api/url/index.html b/files/fr/web/api/url/index.html
new file mode 100644
index 0000000000..0036163e08
--- /dev/null
+++ b/files/fr/web/api/url/index.html
@@ -0,0 +1,275 @@
+---
+title: URL
+slug: Web/API/URL
+tags:
+  - API
+  - References
+  - URL
+translation_of: Web/API/URL
+---
+<div>{{ApiRef("URL API")}}</div>
+
+<p>L'interface <strong><code>URL</code></strong><strong> </strong>représente un objet qui fournit des méthodes statiques utilisées pour créer des URL d'objet.</p>
+
+<p><span id="result_box" lang="fr"><span>Lors de l'utilisation d'un agent utilisateur dans lequel aucun constructeur n'a encore été implémenté, il est possible d'accéder à un objet en utilisant les propriétés</span></span> {{domxref("Window.URL")}} (préfixées sur un navigateur basé sur Webkit tel que <code>Window.webkitURL</code>).</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Utilisation">Utilisation</h2>
+
+<p>Le constructeur <span id="result_box" lang="fr"><span>prend un paramètre url et un paramètre de base facultatif à utiliser comme base si le paramètre url est une URL relative :</span></span></p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">const</span> url <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">URL</span><span class="punctuation token">(</span><span class="string token">'../cats'</span><span class="punctuation token">,</span> <span class="string token">'http://www.example.com/dogs'</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>url<span class="punctuation token">.</span>hostname<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// "www.example.com"</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>url<span class="punctuation token">.</span>pathname<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// "/cats"</span></code></pre>
+
+<p>Les propriétés de l'URL peuvent être définies pour construire l'URL :</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">url<span class="punctuation token">.</span>hash <span class="operator token">=</span> <span class="string token">'tabby'</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>url<span class="punctuation token">.</span>href<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// "http://www.example.com/cats#tabby"</span></code></pre>
+
+<p>Les URL seront encodées selon la norme RFC 3986:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">url<span class="punctuation token">.</span>pathname <span class="operator token">=</span> <span class="string token">'démonstration.html'</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>url<span class="punctuation token">.</span>href<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// "http://www.example.com/d%C3%A9monstration.html"</span></code></pre>
+
+<p>L'interface {{domxref("URLSearchParams")}}  peut être utilisée pour construire et manipuler la chaîne de requête de l'URL.</p>
+
+<p><span id="result_box" lang="fr"><span>Pour obtenir les paramètres de recherche à partir de l'URL de la fenêtre en cours :</span></span></p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="comment token">// https://some.site/?id=123</span>
+<span class="keyword token">var</span> parsedUrl <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">URL</span><span class="punctuation token">(</span>window<span class="punctuation token">.</span>location<span class="punctuation token">.</span>href<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>parsedUrl<span class="punctuation token">.</span>searchParams<span class="punctuation token">.</span><span class="keyword token">get</span><span class="punctuation token">(</span><span class="string token">"id"</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// 123</span></code></pre>
+
+<p>La méthode <code>stringifier</code> de l' <code>URL</code> est la propriété <code>href</code> , ainsi le constructeur<span id="result_box" lang="fr"><span> peut être utilisé pour normaliser et encoder directement une URL :</span></span></p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">const</span> response <span class="operator token">=</span> <span class="keyword token">await</span> <span class="function token">fetch</span><span class="punctuation token">(</span><span class="keyword token">new</span> <span class="class-name token">URL</span><span class="punctuation token">(</span><span class="string token">'http://www.example.com/démonstration.html'</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("URL.URL", "URL()")}} {{experimental_inline}}</dt>
+ <dd>Crée et retourne un objet <code>URL</code>  composé des paramètres donnés.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("URL.hash")}}</dt>
+ <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> contenant un <code>'#'</code> <span class="short_text" id="result_box" lang="fr"><span>suivi de l'identifiant du fragment de l'URL.</span></span></dd>
+ <dt>{{domxref("URL.host")}}</dt>
+ <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> contenant l'hôte, c'est-à-dire le <em>hostname (nom d'hôte)</em>, <code>':'</code>et le <em>port</em> de l'URL.</dd>
+ <dt>{{domxref("URL.hostname")}}</dt>
+ <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> contenant le domaine de l'URL.</dd>
+ <dt>{{domxref("URL.href")}}</dt>
+ <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> contenant l'URL entière.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("URL.origin")}} {{readonlyInline}}</dt>
+ <dd>Retourne une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> contenant l'origine de l'URL, <span class="short_text" id="result_box" lang="fr"><span>c'est son schéma, son domaine et son port</span></span> .</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("URL.password")}}</dt>
+ <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> contenant le mot de passe spécifié avant le nom du domaine.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("URL.pathname")}}</dt>
+ <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> contenant une barre oblique initiale <code>'/'</code>suivie du chemin de l'URL.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("URL.port")}}</dt>
+ <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> contenant le numéro de port de l'URL.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("URL.protocol")}}</dt>
+ <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> contenant le schéma du protocole de l'URL, y compris le final <code>':'</code>.</dd>
+ <dt>{{domxref("URL.search")}}</dt>
+ <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> contenant un <code>'?'</code> suivi par les paramètres de l'URL.</dd>
+ <dt>{{domxref("URL.searchParams")}}</dt>
+ <dd>Retourne un objet {{domxref("URLSearchParams")}}  <span id="result_box" lang="fr"><span>permettant d'accéder aux arguments de requête GET contenus dans l'URL.</span></span></dd>
+ <dt>{{domxref("URL.username")}}</dt>
+ <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> contenant<span id="result_box" lang="fr"><span> le nom d'utilisateur spécifié avant le nom de domaine.</span></span></dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>L'interface <code>URL</code> </em> <span id="result_box" lang="fr"><span>implémente les méthodes définies dans </span></span><em>{{domxref("URLUtils")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("URLUtils.toString()")}}</dt>
+ <dd>Retourne une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> contenant l'URL entière. C'est un synonyme de {{domxref("URLUtils.href")}}, mais il ne peut pas être utilisé pour modifier la valeur.</dd>
+ <dt>{{domxref("URL.toJSON()")}} <sup>[disponible depuis FireFox v54]</sup></dt>
+ <dd>Retourne une {{domxref("DOMString")}}   <em>(chaîne de caractères)</em> contenant l'URL entière. Il retourne la même chaîne que la propriété <code>href</code> .</dd>
+</dl>
+
+<h2 id="Méthodes_statiques">Méthodes statiques</h2>
+
+<dl>
+ <dt>{{ domxref("URL.createObjectURL()") }}</dt>
+ <dd>Retourne une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> contenant un "blob URL" unique ; c'est une URL avec <code>blob :</code> <span id="result_box" lang="fr"><span>son schéma suivi d'une chaîne opaque identifiant de manière unique l'objet dans le navigateur.</span></span></dd>
+ <dt>{{ domxref("URL.revokeObjectURL()") }}</dt>
+ <dd><span id="result_box" lang="fr"><span>Révoque un objet URL précédemment créé avec {{domxref ("URL.createObjectURL ()")}}.</span></span></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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('File API', '#creating-revoking', 'URL')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Ajoute les méthodes statiques <code>URL.createObjectURL()</code> et <code>URL.revokeObjectURL</code><code>()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('URL', '#api', 'API')}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Définition initiale (implémente <code>URLUtils</code>).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalités</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>8.0<sup>[2]</sup><br>
+    32</td>
+   <td>In Development<sup>[5]</sup></td>
+   <td>{{CompatGeckoDesktop("2.0")}}<sup>[1][3][6]</sup><br>
+    {{CompatGeckoDesktop("19.0")}}</td>
+   <td>{{CompatNo}}<sup>[4]</sup></td>
+   <td>15.0<sup>[2]</sup><br>
+    19</td>
+   <td>6.0<sup>[2]</sup><br>
+    7.0</td>
+  </tr>
+  <tr>
+   <td><code>username</code>, <code>password</code>, and <code>origin</code></td>
+   <td>{{CompatChrome(52)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("26.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>19</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>searchParams</code></td>
+   <td>{{CompatChrome(51)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("29.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>36</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>toJSON</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("54")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile"> </div>
+
+<div>
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalités</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>4<sup>[2]</sup><br>
+    4.4</td>
+   <td>8.0<sup>[2]</sup><br>
+    32</td>
+   <td>{{CompatGeckoMobile("14.0")}}<sup>[1][3][6]</sup><br>
+    {{CompatGeckoMobile("19.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>15.0<sup>[2]</sup></td>
+   <td>6.0<sup>[2]</sup></td>
+  </tr>
+  <tr>
+   <td><code>username</code>, <code>password</code>, and <code>origin</code></td>
+   <td>{{CompatChrome(52)}}</td>
+   <td>{{CompatChrome(52)}}</td>
+   <td>{{CompatGeckoDesktop("26.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>searchParams</code></td>
+   <td>{{CompatChrome(51)}}</td>
+   <td>{{CompatChrome(51)}}</td>
+   <td>{{CompatGeckoMobile("29.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div> </div>
+</div>
+
+<p>[1] De Gecko 2 (Firefox 4) à Gecko 18 inclus, Gecko a mis en oeuvre cette interface avec le type interne non-standard <code>nsIDOMMozURLProperty</code> . <span class="short_text" id="result_box" lang="fr"><span>Comme le seul accès à ce type d'objet était à travers</span></span> {{domxref("window.URL")}}, <span class="short_text" id="result_box" lang="fr"><span>en pratique, cela ne faisait aucune différence.</span></span></p>
+
+<p>[2] Cette fonctionnalité est implémentée sous le nom non-standard <code>webkitURL</code>.</p>
+
+<p>[3] <span id="result_box" lang="fr"><span>Pour Firefox, à utiliser à partir du code chrome, portée JSM et Bootstrap, vous devez l'importer comme ceci :</span></span></p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">Cu<span class="punctuation token">.</span><span class="function token">importGlobalProperties</span><span class="punctuation token">(</span><span class="punctuation token">[</span><span class="string token">'URL'</span><span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p><code>URL</code> est disponible pour les portées du "Worker" .</p>
+
+<p>[4] <span id="result_box" lang="fr"><span>Depuis IE11, l'instanciation de nouveaux objets URL n'est pas prise en charge,</span> c'est-à-dire que la <span>nouvelle </span></span> <code>URL()</code> <span lang="fr"><span> ne fonctionne pas.</span></span></p>
+
+<p>[5] Edge en développement : voir <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/urlapi/">https://developer.microsoft.com/en-us/microsoft-edge/platform/status/urlapi/</a>  et <a href="https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6263638-url-api">https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6263638-url-api</a>.</p>
+
+<p>[6] Firefox a un bogue <span id="result_box" lang="fr"><span>dans lequel les apostrophes contenues dans les URL s'échappent lorsqu'elles sont accessibles par les URL des API </span></span> ({{bug(1386683)}}). <span class="short_text" id="result_box" lang="fr"><span>Cela a été corrigé à partir de Firefox 57</span></span> .</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><span class="short_text" id="result_box" lang="fr"><span>Propriété permettant d'obtenir cet objet</span></span> : {{domxref("Window.URL")}}.</li>
+ <li>{{domxref("URLSearchParams")}}.</li>
+ <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties (en)</a></li>
+</ul>
diff --git a/files/fr/web/api/url/protocol/index.html b/files/fr/web/api/url/protocol/index.html
new file mode 100644
index 0000000000..a67e867df9
--- /dev/null
+++ b/files/fr/web/api/url/protocol/index.html
@@ -0,0 +1,61 @@
+---
+title: URL.protocol
+slug: Web/API/URL/protocol
+tags:
+  - API
+  - Propriété
+  - Reference
+  - URL
+  - protocole
+translation_of: Web/API/URL/protocol
+---
+<div>{{ApiRef("URL API")}}</div>
+
+<p>La propriété <strong><code>protocol</code></strong> de l'interface {{domxref("URL")}} est une {{domxref("USVString")}} représentant le schéma protocolaire de URL, incluant <code>':'</code> à la fin.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>string</em> = <em>object</em>.protocol;
+<em>object</em>.protocol = <em>string</em>;
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un {{domxref("USVString")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var url = new URL('https://developer.mozilla.org/en-US/docs/Web/API/URL/protocol');
+var result = url.protocol; // Retourne:"https:"
+</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('URL', '#dom-url-protocol', 'protocol')}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.URL.protocol")}}</p>
+
+<h2 id="A_voir_également">A voir également</h2>
+
+<ul>
+ <li>L'interface {{domxref("URL")}} dont il est contenu.</li>
+</ul>
diff --git a/files/fr/web/api/url/revokeobjecturl/index.html b/files/fr/web/api/url/revokeobjecturl/index.html
new file mode 100644
index 0000000000..a0e9f0980e
--- /dev/null
+++ b/files/fr/web/api/url/revokeobjecturl/index.html
@@ -0,0 +1,64 @@
+---
+title: URL.revokeObjectURL()
+slug: Web/API/URL/revokeObjectURL
+translation_of: Web/API/URL/revokeObjectURL
+---
+<div>{{ApiRef("URL")}}</div>
+
+<p><span class="seoSummary">La méthode statique <strong><code>URL.revokeObjectURL()</code></strong> libère une URL d’objet existante précédemment créée par un appel à {{domxref("URL.createObjectURL()") }}.</span> Appelez cette méthode quand vous n’utilisez plus une URL d’objet pour indiquer au navigateur qu’il ne doit plus garder de référence sur l’objet.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>window</em>.URL.revokeObjectURL(<em>objectURL</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>objectURL </code></dt>
+ <dd>Une {{domxref("DOMString")}} représentant une URL d’objet qui a été précédemment créée par un appel à {{domxref("URL.createObjectURL", "createObjectURL()") }}.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p><code>undefined</code>.</p>
+
+<ul>
+</ul>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Voir <a href="/fr/docs/Web/API/File/Using_files_from_web_applications#Exemple_Utilisation_de_l'objet_URLs_pour_afficher_des_images">Utilisation de l’objet URLs pour afficher des images</a>.</p>
+
+<h2 id="Spécification">Spécification</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('File API', '#dfn-revokeObjectURL', 'revokeObjectURL()')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.URL.revokeObjectURL")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/File/Using_files_from_web_applications">Utiliser des fichiers à partir d’applications web</a></li>
+ <li><a href="/fr/docs/Web/API/File/Using_files_from_web_applications#Exemple_Utilisation_de_l'objet_URLs_pour_afficher_des_images">Utilisation de l’objet URLs pour afficher des images</a></li>
+ <li>{{domxref("URL.createObjectURL()") }}</li>
+</ul>
diff --git a/files/fr/web/api/url/search/index.html b/files/fr/web/api/url/search/index.html
new file mode 100644
index 0000000000..403f38959d
--- /dev/null
+++ b/files/fr/web/api/url/search/index.html
@@ -0,0 +1,63 @@
+---
+title: URL.search
+slug: Web/API/URL/search
+tags:
+  - API
+  - Propriété
+  - Recherche
+  - Reference
+  - URL
+translation_of: Web/API/URL/search
+---
+<div>{{ApiRef("URL API")}}</div>
+
+<p>La propriété <strong><code>search</code></strong> de l'interface {{domxref("URL")}} est une chaine d'interrogation, aussi appellée une chaine de recherche, c'est un {{domxref("USVString")}} contenant le caractère <code>'?'</code> suivi des paramètres de l'URL.</p>
+
+<p>Les navigateurs récents fournissent la propriété {{domxref("URL.searchParams")}} qui permet d'analyser plus facilement les paramètres passés à la chaîne de recherche.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>chaineDeCaractere</em> = <em>objet</em>.search;
+<em>object</em>.search = <em>chaineDeCaractere</em>;
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un {{domxref("USVString")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var url = new URL('https://developer.mozilla.org/en-US/docs/Web/API/URL/search?q=123');
+var queryString = url.search; // Retourne:"?q=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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('URL', '#dom-url-search', 'URL.search')}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.URL.search")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("URL")}} associée.</li>
+</ul>
diff --git a/files/fr/web/api/url/searchparams/index.html b/files/fr/web/api/url/searchparams/index.html
new file mode 100644
index 0000000000..9fab62581f
--- /dev/null
+++ b/files/fr/web/api/url/searchparams/index.html
@@ -0,0 +1,65 @@
+---
+title: URL.searchParams
+slug: Web/API/URL/searchParams
+tags:
+  - API
+  - Lecture-seule
+  - Propriété
+  - Reference
+  - URL
+  - URLSearchParameters
+translation_of: Web/API/URL/searchParams
+---
+<div>{{APIRef("URL API")}}</div>
+
+<div> </div>
+
+<div>La propriété en lecture seule <strong><code>searchParams</code></strong> de l'interface {{domxref("URL")}} retourne</div>
+
+<div>un objet {{domxref("URLSearchParams")}} permettant d'accéder aux arguments décodés</div>
+
+<div>de la requête GET contenu dans l'URL.</div>
+
+<div> </div>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var urlSearchParams = URL.searchParams;</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>Un objet {{domxref("URLSearchParams")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Si l'URL de votre page est <code>https://example.com/?nom=Jonathan%20Smith&amp;age=18</code><br>
+ vous pouvez extraire les paramètres 'nom' et 'age' en utilisant:</p>
+
+<pre class="brush: js">let params = (new URL(document.location)).searchParams;
+let name = params.get('nom'); // la chaine de caractère "Jonathan Smith".
+let age = parseInt(params.get('age')); // le nombre 18</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('URL', '#dom-url-searchparams', 'searchParams')}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilités_des_navigateurs">Compatibilités des navigateurs</h2>
+
+
+
+<p>{{Compat("api.URL.searchParams")}}</p>
diff --git a/files/fr/web/api/url/tojson/index.html b/files/fr/web/api/url/tojson/index.html
new file mode 100644
index 0000000000..8c34a37e42
--- /dev/null
+++ b/files/fr/web/api/url/tojson/index.html
@@ -0,0 +1,57 @@
+---
+title: URL.toJSON()
+slug: Web/API/URL/toJSON
+tags:
+  - API
+  - Méthode
+  - Reference
+  - URL
+  - toJSON()
+translation_of: Web/API/URL/toJSON
+---
+<div>{{APIRef("URL API")}}</div>
+
+<p>La méthode <strong><code>toJSON()</code></strong> de l'interface {{domxref("URL")}} retourne un {{domxref("USVString")}} contenant une version sérialisé de l'URL, même si dans la pratique, il semble avoir le même effet que {{domxref("URL.toString()")}}.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">json = url.toJSON();</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Aucun.</p>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>A {{domxref("USVString")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="cm-keyword">const</span> <span class="cm-def">url</span> <span class="cm-operator">=</span> <span class="cm-keyword">new</span> <span class="cm-variable">URL</span>(<span class="cm-string">"https://developer.mozilla.org/en-US/docs/Web/API/URL/toString"</span>);
+<span class="cm-variable">url</span>.<span class="cm-property">toJSON</span>()</span></span></span>
+</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('URL', '#dom-url-tojson', 'toJSON()')}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.URL.toJSON")}}</p>
diff --git a/files/fr/web/api/url/tostring/index.html b/files/fr/web/api/url/tostring/index.html
new file mode 100644
index 0000000000..fa5fca18b2
--- /dev/null
+++ b/files/fr/web/api/url/tostring/index.html
@@ -0,0 +1,63 @@
+---
+title: URL.toString()
+slug: Web/API/URL/toString
+tags:
+  - API
+  - Méthode
+  - Reference
+  - URL
+  - toString()
+translation_of: Web/API/URL/toString
+---
+<div>{{ApiRef("URL API")}}</div>
+
+<p>La méthode <strong><code>URL.toString()</code></strong> retourne un {{domxref("USVString")}} contenant tout l'URL. C'est en effet, une version de {{domxref("URL.href")}} en lecture seule.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>string</em> = <em>url</em>.toString();</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Aucun.</p>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un {{domxref("USVString")}}.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js"><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="cm-keyword">const</span> <span class="cm-def">url</span> <span class="cm-operator">=</span> <span class="cm-keyword">new</span> <span class="cm-variable">URL</span>(<span class="cm-string">"https://developer.mozilla.org/en-US/docs/Web/API/URL/toString"</span>);
+<span class="cm-variable">url</span>.<span class="cm-property">toString</span>() // doit retourner l'URL en tant que chaîne</span></span></span>
+</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('URL', '#URL-stringification-behavior', 'stringifier')}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter  <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.URL.toString")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("URL")}} à laquelle elle appartient.</li>
+</ul>
diff --git a/files/fr/web/api/url/url/index.html b/files/fr/web/api/url/url/index.html
new file mode 100644
index 0000000000..af93288484
--- /dev/null
+++ b/files/fr/web/api/url/url/index.html
@@ -0,0 +1,105 @@
+---
+title: URL()
+slug: Web/API/URL/URL
+tags:
+  - API
+  - Constructeur
+  - Reference
+  - URL
+  - URL API
+translation_of: Web/API/URL/URL
+---
+<p>{{APIRef("URL API")}}</p>
+
+<p><span id="result_box" lang="fr"><span>Le constructeur </span></span><strong><code>URL()</code></strong><span lang="fr"><span> renvoie un nouvel objet </span></span>{{domxref("URL")}}<span lang="fr"><span> représentant l'URL définie par les paramètres.</span><br>
+ <br>
+ <span>Si l'URL de base donnée ou l'URL résultante ne sont pas des URL valides, une </span></span>{{domxref("DOMException")}}<span lang="fr"><span> de type </span></span><code>SYNTAX_ERROR</code><span lang="fr"><span> est levée.</span></span></p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>url</em> = new URL(<em>url</em>, [<em>base</em>])
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><em>url</em></dt>
+ <dd>
+ <div id="gt-res-content">
+ <div class="trans-verified-button-small" dir="ltr" id="gt-res-dir-ctr"><span id="result_box" lang="fr"><span>Un  </span></span>{{domxref("USVString")}}<span lang="fr"><span> représentant une URL absolue ou relative.</span> <span>Si l'URL est une URL relative, la base est obligatoire et sera utilisée comme URL de base.</span> <span>Si url est une URL absolue, une base donnée sera ignorée.</span></span></div>
+ </div>
+ </dd>
+ <dt><em>base </em>{{optional_inline}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Un </span></span>{{domxref("USVString")}}<span lang="fr"><span> représentant l'URL de base à utiliser dans le cas où l'URL est une URL relative.</span></span> <span id="result_box" lang="fr"><span>Si non spécifié, il est par défaut à </span></span><code>''</code><span lang="fr"><span>.</span></span></dd>
+</dl>
+
+<div class="note">
+<p><strong>Remarque </strong>: <span id="result_box" lang="fr"><span>Vous pouvez toujours utiliser un objet {{domxref ("URL")}} existant pour la base, qui se stringifie en attribut {{domxref ("DOMString.href", "href")}} de l'objet.</span></span></p>
+</div>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Exception</th>
+   <th scope="col">Explication</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>TypeError</code></td>
+   <td><span id="result_box" lang="fr"><span>url (dans le cas d'URL absolues) ou base + URL (dans le cas d'URL relatives) n'est pas une URL valide.</span></span></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js  language-js">var a = new URL("/", "https://developer.mozilla.org"); // <span class="short_text" id="result_box" lang="fr"><span>Crée une URL pointant vers</span></span> 'https://developer.mozilla.org/'
+var b = new URL("https://developer.mozilla.org");      // <span class="short_text" id="result_box" lang="fr"><span>Crée une URL pointant vers</span></span> 'https://developer.mozilla.org/'
+var c = new URL('en-US/docs', b);                      // <span class="short_text" id="result_box" lang="fr"><span>Crée une URL pointant vers</span></span> 'https://developer.mozilla.org/en-US/docs'
+var d = new URL('/en-US/docs', b);                     // <span class="short_text" id="result_box" lang="fr"><span>Crée une URL pointant vers</span></span> 'https://developer.mozilla.org/en-US/docs'
+var f = new URL('/en-US/docs', d);                     // <span class="short_text" id="result_box" lang="fr"><span>Crée une URL pointant vers</span></span> 'https://developer.mozilla.org/en-US/docs'
+var g = new URL('/en-US/docs', "https://developer.mozilla.org/fr-FR/toto");
+                                                       // <span class="short_text" id="result_box" lang="fr"><span>Crée une URL pointant vers</span></span> 'https://developer.mozilla.org/en-US/docs'
+var h = new URL('/en-US/docs', a);                     // <span class="short_text" id="result_box" lang="fr"><span>Crée une URL pointant vers</span></span> 'https://developer.mozilla.org/en-US/docs'
+var i = new URL('/en-US/docs', '');                    // <span id="result_box" lang="fr"><span>Déclenche une exception TypeError car '' n'est pas une URL valide</span></span>
+var j = new URL('/en-US/docs');                        // <span id="result_box" lang="fr"><span>Déclenche une exception TypeError car '/ fr-US / docs' n'est pas une URL valide</span></span>
+var k = new URL('http://www.example.com', 'https://developers.mozilla.com');
+                                                       // <span class="short_text" id="result_box" lang="fr"><span>Crée une URL pointant vers</span></span> 'http://www.example.com/'
+var l = new URL('http://www.example.com', b);          // <span class="short_text" id="result_box" lang="fr"><span>Crée une URL pointant vers</span></span> 'http://www.example.com/'
+</pre>
+
+<h2 id="Specification" name="Specification">Spécification</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('URL', '#constructors', 'URL.URL()')}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>initialisation.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden"><span id="result_box" lang="fr"><span>Le tableau de compatibilité sur cette page est généré à partir de données structurées.</span></span> <span id="result_box" lang="fr"><span>Si vous souhaitez contribuer aux données, consultez https://github.com/mdn/browser-compat-data et envoyez-nous une demande d'extraction.</span></span></div>
+
+<p>{{Compat("api.URL.URL")}}</p>
+
+<h2 id="À_voir_également">À voir également</h2>
+
+<ul>
+ <li><span class="short_text" id="result_box" lang="fr"><span>L'interface à laquelle il appartient</span></span> : {{domxref("URL")}}.</li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/web/api/urlsearchparams/entries/index.html b/files/fr/web/api/urlsearchparams/entries/index.html
new file mode 100644
index 0000000000..af1a117d18
--- /dev/null
+++ b/files/fr/web/api/urlsearchparams/entries/index.html
@@ -0,0 +1,67 @@
+---
+title: URLSearchParams.entries()
+slug: Web/API/URLSearchParams/entries
+translation_of: Web/API/URLSearchParams/entries
+---
+<p>{{APIRef("URL API")}}{{SeeCompatTable}}</p>
+
+<p>La méthode <code><strong>URLSearchParams.entries()</strong></code> retourne  un itérateur( {{jsxref("Iteration_protocols",'iterator')}}) permettant de parcourir les paires de clé/valeur contenues dans cet objet. La clé et la valeur de chaque paire est un objet  {{domxref("USVString")}} .</p>
+
+<div class="note">
+<p><strong>Note</strong>: This method is available in <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">searchParams.entries();</pre>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>Returns an {{jsxref("Iteration_protocols","iterator")}}.</p>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js;highlight:[5]">// Create a test URLSearchParams object
+var searchParams = new URLSearchParams("key1=value1&amp;key2=value2");
+
+// Display the key/value pairs
+for(var pair of searchParams.entries()) {
+   console.log(pair[0]+ ', '+ pair[1]);
+}
+</pre>
+
+<p>The result is:</p>
+
+<pre>key1, value1
+key2, value2</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('URL', '#urlsearchparams','entries() (as iterator&lt;&gt;)')}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.URLSearchParams.entries")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Other URL-related interfaces: {{domxref("URL")}}, {{domxref("URLUtils")}}.</li>
+</ul>
diff --git a/files/fr/web/api/urlsearchparams/index.html b/files/fr/web/api/urlsearchparams/index.html
new file mode 100644
index 0000000000..d5dd97ba18
--- /dev/null
+++ b/files/fr/web/api/urlsearchparams/index.html
@@ -0,0 +1,220 @@
+---
+title: URLSearchParams
+slug: Web/API/URLSearchParams
+translation_of: Web/API/URLSearchParams
+---
+<p>{{ApiRef("URL API")}}</p>
+
+<p>L’interface <strong><code>URLSearchParams</code></strong> définit des méthodes utilitaires pour travailler avec la <em>chaîne de requête</em> (les paramètres <code>GET</code>) d’une URL.</p>
+
+<p>Un objet implémentant <code>URLSearchParams</code> peut être directement utilisé dans une structure {{jsxref("Statements/for...of", "for...of")}}, au lieu de {{domxref('URLSearchParams.entries()', 'entries()')}} : <code>for (var p of mySearchParams)</code> ou son équivalent <code>for (var p of mySearchParams.entries())</code>.</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("URLSearchParams.URLSearchParams", 'URLSearchParams()')}}</dt>
+ <dd>Constructeur renvoyant un objet <code>URLSearchParams</code>.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Cette interface n’hérite d’aucune propriété.</em></p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Cette interface n’hérite d’aucune méthode.</em></p>
+
+<dl>
+ <dt>{{domxref("URLSearchParams.append()")}}</dt>
+ <dd>Ajoute une paire clé / valeur spécifiée en tant que nouveau paramètre de recherche.</dd>
+ <dt>{{domxref("URLSearchParams.delete()")}}</dt>
+ <dd>Supprime le paramètre de recherche donné et sa valeur associée de la liste de tous les paramètres de recherche.</dd>
+ <dt>{{domxref("URLSearchParams.entries()")}}</dt>
+ <dd>Retourne un {{jsxref("Iteration_protocols","iterator")}} permettant de parcourir toutes les paires clé / valeur contenues dans cet objet.</dd>
+ <dt>{{domxref("URLSearchParams.get()")}}</dt>
+ <dd>Retourne la première valeur associée au paramètre de recherche donné.</dd>
+ <dt>{{domxref("URLSearchParams.getAll()")}}</dt>
+ <dd>Retourne toutes les valeurs associées au paramètre de recherche donné.</dd>
+ <dt>{{domxref("URLSearchParams.has()")}}</dt>
+ <dd>Retourne un {{jsxref("Boolean")}} indiquant si un tel paramètre de recherche existe.</dd>
+ <dt>{{domxref("URLSearchParams.keys()")}}</dt>
+ <dd>Retourne un {{jsxref("Iteration_protocols", "iterator")}} permettant de parcourir toutes les <strong>clés</strong> des paires clé / valeur contenues dans cet objet.</dd>
+ <dt>{{domxref("URLSearchParams.set()")}}</dt>
+ <dd>Définit la valeur associée à un paramètre de recherche donné à la valeur donnée. S’il y avait plusieurs valeurs, les autres sont supprimées.</dd>
+ <dt>{{domxref("URLSearchParams.sort()")}}</dt>
+ <dd>Trie toutes les paires clé / valeur, s’il y en a, par leurs clés.</dd>
+ <dt>{{domxref("URLSearchParams.toString()")}}</dt>
+ <dd>Retourne une chaîne contenant une chaîne de requête pouvant être utilisée dans une URL.</dd>
+ <dt>{{domxref("URLSearchParams.values()")}}</dt>
+ <dd>Retourne un {{jsxref("Iteration_protocols", "iterator")}} permettant de parcourir toutes les <strong>valeurs</strong> des paires clé / valeur contenues dans cet objet.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">var paramsString = "q=URLUtils.searchParams&amp;topic=api";
+var searchParams = new URLSearchParams(paramsString);
+
+// Itère sur les paramètres de recherche.
+for (let p of searchParams) {
+  console.log(p);
+}
+
+searchParams.has("topic") === true; // true
+searchParams.get("topic") === "api"; // true
+searchParams.getAll("topic"); // ["api"]
+searchParams.get("foo") === null; // true
+searchParams.append("topic", "webdev");
+searchParams.toString(); // "q=URLUtils.searchParams&amp;topic=api&amp;topic=webdev"
+searchParams.set("topic", "More webdev");
+searchParams.toString(); // "q=URLUtils.searchParams&amp;topic=More+webdev"
+searchParams.delete("topic");
+searchParams.toString(); // "q=URLUtils.searchParams"
+</pre>
+
+<h2 id="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('URL', '#urlsearchparams', "URLSearchParams")}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatChrome(49)}}</td>
+   <td>{{CompatGeckoDesktop("29.0")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(36)}}</td>
+   <td>10.1</td>
+  </tr>
+  <tr>
+   <td><code>entries()</code>, <code>keys()</code>, <code>values()</code>, et support de <code>for...of</code></td>
+   <td>{{CompatChrome(49)}}</td>
+   <td>{{CompatGeckoDesktop("44.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(36)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>USVString</code> comme argument <code>init</code> du constructeur</td>
+   <td>{{CompatChrome(61)}}</td>
+   <td>{{CompatGeckoDesktop("53.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(48)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Objet littéral comme argument <code>init</code> du constructeur</td>
+   <td>{{CompatChrome(61)}}</td>
+   <td>{{CompatGeckoDesktop("54.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(48)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>sort()</code></td>
+   <td>{{CompatChrome(61)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(48)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android Webview</th>
+   <th>Chrome pour Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatChrome(49)}}</td>
+   <td>{{CompatChrome(49)}}</td>
+   <td>{{CompatGeckoMobile("29.0")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOperaMobile(36)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>entries()</code>, <code>keys()</code>, <code>values()</code>, et support de <code>for...of</code></td>
+   <td>{{CompatChrome(49)}}</td>
+   <td>{{CompatChrome(49)}}</td>
+   <td>{{CompatGeckoMobile("44.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOperaMobile(36)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>USVString</code> comme argument <code>init</code> du constructeur</td>
+   <td>{{CompatChrome(61)}}</td>
+   <td>{{CompatChrome(61)}}</td>
+   <td>{{CompatGeckoMobile("53.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOperaMobile(48)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Objet littéral comme argument <code>init</code> du constructeur</td>
+   <td>{{CompatChrome(61)}}</td>
+   <td>{{CompatChrome(61)}}</td>
+   <td>{{CompatGeckoMobile("54.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOperaMobile(48)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>sort()</code></td>
+   <td>{{CompatChrome(61)}}</td>
+   <td>{{CompatChrome(61)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOperaMobile(48)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Firefox a un bug qui fait que les guillemets simples contenus dans les URLs sont échappés quand on y accède via les API d’URL ({{bug(1386683)}}). Cela a été corrigé à partir de Firefox 57.</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>Autres interfaces liées aux URL : {{domxref("URL")}}, {{domxref("URLUtils")}}.</li>
+ <li><a href="https://developers.google.com/web/updates/2016/01/urlsearchparams?hl=en">Google Developers: Easy URL manipulation with URLSearchParams</a></li>
+</ul>
diff --git a/files/fr/web/api/urlutils/index.html b/files/fr/web/api/urlutils/index.html
new file mode 100644
index 0000000000..7bbe88b470
--- /dev/null
+++ b/files/fr/web/api/urlutils/index.html
@@ -0,0 +1,213 @@
+---
+title: URLUtils
+slug: Web/API/URLUtils
+tags:
+  - API
+  - Experimental
+  - JavaScript
+  - Reference
+  - URL
+translation_of: Web/API/HTMLHyperlinkElementUtils
+---
+<p>{{APIRef}}{{SeeCompatTable}}</p>
+<p>L'interface <strong><code>URLUtils</code></strong> définit des méthodes utilitaires pour travailler avec les URL.</p>
+<p>il n'y a pas d'objets de ce type, mais quelques objets l'implémentent, comme {{domxref("Location")}}, {{domxref("URL")}}, {{domxref("HTMLAnchorElement")}}, et {{domxref("HTMLAreaElement")}}.</p>
+<h2 id="Propriétés">Propriétés</h2>
+<p><em>Cette interface n'hérite d'aucune propriété.</em></p>
+<dl>
+ <dt>
+  {{domxref("URLUtils.href")}}</dt>
+ <dd>
+  Une {{domxref("DOMString")}} contenant l'URL entière.</dd>
+ <dt>
+  {{domxref("URLUtils.protocol")}}</dt>
+ <dd>
+  Une {{domxref("DOMString")}} contenant le schéma de protocole de l'URL, incluant le <code>':'</code> final.</dd>
+ <dt>
+  {{domxref("URLUtils.host")}}</dt>
+ <dd>
+  Une {{domxref("DOMString")}} contenant <em>l'hôte,</em> c'est-à-dire le <em>domaine</em>, et, si le <em>port</em> de l'URL n'est pas vide (ce qui peut arriver s'il n'a pas été spécifié ou si la valeur spécifiée est celle du port par défaut du schéma de l'URL), un <code>':'</code>, et le <em>port</em> de l'URL.</dd>
+ <dt>
+  {{domxref("URLUtils.hostname")}}</dt>
+ <dd>
+  Une {{domxref("DOMString")}} contenant le domaine de l'URL.</dd>
+ <dt>
+  {{domxref("URLUtils.port")}}</dt>
+ <dd>
+  Une {{domxref("DOMString")}} contenant le numéro de port de l'URL.</dd>
+ <dt>
+  {{domxref("URLUtils.pathname")}}</dt>
+ <dd>
+  Une {{domxref("DOMString")}} contenant un <code>'/'</code> initial suivi du chemin de l'URL.</dd>
+ <dt>
+  {{domxref("URLUtils.search")}}</dt>
+ <dd>
+  Une {{domxref("DOMString")}} contenant un <code>'?'</code> suivi des paramètres de l'URL.</dd>
+ <dt>
+  {{domxref("URLUtils.hash")}}</dt>
+ <dd>
+  Une {{domxref("DOMString")}} contenant un <code>'#'</code> suivi de <em>l'identifiant de fragment</em> de l'URL.</dd>
+ <dt>
+  {{domxref("URLUtils.username")}}</dt>
+ <dd>
+  Une {{domxref("DOMString")}} contenant le nom d'utilisateur spécifié devant le nom de domaine.</dd>
+ <dt>
+  {{domxref("URLUtils.password")}}</dt>
+ <dd>
+  Une {{domxref("DOMString")}} contenant le mot de passe spécifié devant le nom de domaine.</dd>
+ <dt>
+  {{domxref("URLUtils.origin")}} {{readonlyInline}}</dt>
+ <dd>
+  Retourne une {{domxref("DOMString")}} contenant l'origine de l'URL, c'est-à-dire son schéma, son domaine et son port.</dd>
+ <dt>
+  {{domxref("URLUtils.searchParams")}}</dt>
+ <dd>
+  Retourne un objet {{domxref("URLSearchParams")}} permettant d'accéder aux arguments de requête GET contenus dans l'URL.</dd>
+</dl>
+<h2 id="Méthodes">Méthodes</h2>
+<p><em>Cette interface n'hérite d'aucune méthode.</em></p>
+<dl>
+ <dt>
+  {{domxref("URLUtils.toString()")}}</dt>
+ <dd>
+  Retourne une {{domxref("DOMString")}} contenant l'URL entière. C'est un synonyme de {{domxref("URLUtils.href")}}, sauf qu'il ne peut être utilisé pour modifier la valeur.</dd>
+</dl>
+<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('URL', '#urlutils', 'URLUtils')}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Compatibilité">Compatibilité</h2>
+<p>{{ CompatibilityTable() }}</p>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Fonctionnalité</th>
+    <th>Chrome</th>
+    <th>Firefox (Gecko)</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari</th>
+   </tr>
+   <tr>
+    <td>Support de base</td>
+    <td>{{CompatNo}} [1]</td>
+    <td>{{CompatGeckoDesktop("22")}} [1]</td>
+    <td>{{CompatNo}} [1]</td>
+    <td>{{CompatNo}} [1]</td>
+    <td>{{CompatNo}} [1]</td>
+   </tr>
+   <tr>
+    <td>searchParams</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatGeckoDesktop("29")}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+   </tr>
+   <tr>
+    <td><code>username</code> et <code>password</code></td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatGeckoDesktop("26")}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+   </tr>
+   <tr>
+    <td><code>origin</code></td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatGeckoDesktop("26")}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+   </tr>
+   <tr>
+    <td><code>origin</code> sur <code>Window.location</code></td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatGeckoDesktop("21")}}</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>Fonctionnalité</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>Support de base</td>
+    <td>{{CompatNo}} [1]</td>
+    <td>{{CompatNo}} [1]</td>
+    <td>{{CompatGeckoMobile("22")}} [1]</td>
+    <td>{{CompatNo}} [1]</td>
+    <td>{{CompatNo}} [1]</td>
+    <td>{{CompatNo}} [1]</td>
+   </tr>
+   <tr>
+    <td>searchParams</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+   </tr>
+   <tr>
+    <td><code>username</code> et <code>password</code></td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatGeckoMobile("26")}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+   </tr>
+   <tr>
+    <td><code>origin</code></td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatGeckoMobile("26")}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+   </tr>
+   <tr>
+    <td><code>origin</code> sur <code>Window.location</code></td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatGeckoMobile("21")}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<p>[1] Bien qu'elles ne soient pas groupées dans une seule interface abstraite, ces méthodes sont directement disponibles sur les interfaces qui les implémentent, si cette interface est supportée.</p>
+<h2 id="Voir_aussi">Voir aussi</h2>
+<ul>
+ <li>Autres interfaces associées aux URL : {{domxref("URL")}}, {{domxref("URLUtils")}}, et {{domxref("URLSearchParams")}}.</li>
+ <li>Interfaces qui implémentent celle-ci : {{domxref("Location")}}, {{domxref("HTMLAnchorElement")}}, {{domxref("HTMLAreaElement")}}.</li>
+</ul>
diff --git a/files/fr/web/api/urlutilsreadonly/index.html b/files/fr/web/api/urlutilsreadonly/index.html
new file mode 100644
index 0000000000..5ff2c29256
--- /dev/null
+++ b/files/fr/web/api/urlutilsreadonly/index.html
@@ -0,0 +1,93 @@
+---
+title: URLUtilsReadOnly
+slug: Web/API/URLUtilsReadOnly
+tags:
+  - API
+  - Expérimentale
+  - URL API
+translation_of: Web/API/URLUtilsReadOnly
+---
+<p>{{ApiRef("URL API")}}{{SeeCompatTable}}</p>
+
+<p>L'interface <strong><code>URLUtilsReadOnly</code></strong> définie les méthodes utilitaires permettant de travailler sur les URLs. Cette dernière définie seulement les méthodes sans modifier le contenu dont l'usage se fait sur des données qui ne peuvent être changées.</p>
+
+<p>Il n'existe aucun objet de ce type, mais certaines interfaces l'implémente, comme {{domxref("WorkerLocation")}}.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Cette interface n'hérite d'aucune propriété.</em></p>
+
+<dl>
+ <dt>{{domxref("URLUtilsReadOnly.href")}} {{readOnlyInline}}</dt>
+ <dd>Un {{domxref("DOMString")}} contenant l'URL entier.</dd>
+ <dt>{{domxref("URLUtilsReadOnly.protocol")}} {{readOnlyInline}}</dt>
+ <dd>Un {{domxref("DOMString")}} contenant le schéma protocolaire de l'URL, incluant le caractère <code>':'</code> à la fin.</dd>
+ <dt>{{domxref("URLUtilsReadOnly.host")}} {{readOnlyInline}}</dt>
+ <dd>Un {{domxref("DOMString")}} contenant le hôte, qui est le <em>nom d'hôte</em>, un caractère <code>':'</code>, et le <em>port</em> de l'URL.</dd>
+ <dt>{{domxref("URLUtilsReadOnly.hostname")}} {{readOnlyInline}}</dt>
+ <dd>Un {{domxref("DOMString")}} contenant le domaine de l'URL.</dd>
+ <dt>{{domxref("URLUtilsReadOnly.origin")}} {{readOnlyInline}}</dt>
+ <dd>Retourne un {{domxref("DOMString")}} contenant sous la forme canonique l'origine de l'emplacement spécifique.</dd>
+ <dt>{{domxref("URLUtilsReadOnly.port")}} {{readOnlyInline}}</dt>
+ <dd>Un {{domxref("DOMString")}} contenant le numéro du port de l'URL.</dd>
+ <dt>{{domxref("URLUtilsReadOnly.pathname")}} {{readOnlyInline}}</dt>
+ <dd>Un {{domxref("DOMString")}} contenant au début <code>'/'</code> suivi du chemin de l'URL.</dd>
+ <dt>{{domxref("URLUtilsReadOnly.search")}} {{readOnlyInline}}</dt>
+ <dd>Un {{domxref("DOMString")}} contenant le caractère <code>'?'</code> suivi par les paramètres de l'URL.</dd>
+ <dt>{{domxref("URLUtilsReadOnly.hash")}} {{readOnlyInline}}</dt>
+ <dd>Un {{domxref("DOMString")}} contenant le caractère <code>'#'</code> suivi par le fragement d'identification de l'URL.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Cette interface n'hérite d'aucune méthode.</em></p>
+
+<dl>
+ <dt>{{domxref("URLUtilsReadOnly.toString()")}}</dt>
+ <dd>Un {{domxref("DOMString")}} contenant l'URL entier. C'est un synonyme de {{domxref("URLUtilsReadOnly.href")}}.</dd>
+</dl>
+
+<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('URL', '#urlutilsreadonly', 'URLUtilsReadOnly')}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.URLUtilsReadOnly")}}</p>
+
+<h2 id="A_voir_également">A voir également</h2>
+
+<ul>
+ <li>Les autres interfaces relatif à URL: {{domxref("URL")}}, {{domxref("URLUtils")}}, et {{domxref("URLQuery")}}.</li>
+ <li>Interfaces implémentant cette dernière: {{domxref("WorkerLocation")}}.</li>
+</ul>
+
+<dl><br>
+ <br>
+ <br>
+ <br>
+ <br>
+ <br>
+
+ <dd> </dd>
+ <dd> </dd>
+ <dd> </dd>
+ <dd> </dd>
+</dl>
diff --git a/files/fr/web/api/usvstring/index.html b/files/fr/web/api/usvstring/index.html
new file mode 100644
index 0000000000..9fb2f745bd
--- /dev/null
+++ b/files/fr/web/api/usvstring/index.html
@@ -0,0 +1,40 @@
+---
+title: USVString
+slug: Web/API/USVString
+tags:
+  - API
+  - DOM
+  - Reference
+  - String
+  - WedIDL
+translation_of: Web/API/USVString
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><code>USVString</code> correspond à l'ensemble de toutes les séquences possibles de valeurs scalaires unicode. <code>USVString</code> correspond à une {{JSxRef("String", "chaîne de caractères")}} lorsqu'elle est renvoyée en JavaScript ; elle n'est généralement utilisée que pour les API qui effectuent un traitement de texte et ont besoin d'une chaîne de valeurs scalaires unicode pour fonctionner. <code>USVString</code> est équivalent à {{DOMxRef("DOMString")}} sauf qu'il n'autorise pas les points de code de substitution non appariés. Les points de code de substitution non appariés présents dans <code>USVString</code> sont convertis par le navigateur en "caractère de remplacement" Unicode <code>U+FFFD</code>, (�).</p>
+
+<h2 id="Specification" name="Specification">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("WebIDL", "#idl-USVString", "USVString")}}</td>
+   <td>{{Spec2("WebIDL")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{JSxRef("String")}}</li>
+ <li>{{DOMxRef("DOMString")}}</li>
+ <li>{{DOMxRef("CSSOMString")}}</li>
+ <li><a href="/fr/docs/Web/API/DOMString/Binary">Chaîne de caractères binaires</a></li>
+</ul>
diff --git a/files/fr/web/api/vibration_api/index.html b/files/fr/web/api/vibration_api/index.html
new file mode 100644
index 0000000000..d1b0d548ef
--- /dev/null
+++ b/files/fr/web/api/vibration_api/index.html
@@ -0,0 +1,146 @@
+---
+title: API de Vibration
+slug: Web/API/Vibration_API
+tags:
+  - Débutant
+  - Firefox OS
+  - Vibration
+translation_of: Web/API/Vibration_API
+---
+<h2 id="Description_des_vibrations">Description des vibrations</h2>
+
+<p>La vibration est décrite comme une série de marche-arrêt des impulsions, qui peuvent être de durées différentes. La série peut être soit un entier décrivant le nombre de millisecondes à vibrer ou un tableau d'entiers décrivant une série de pauses et de vibrations. La vibration est contrôlée par une seule méthode: {{domxref("Navigator.vibrate()")}}.</p>
+
+<h3 id="Une_seule_vibration">Une seule vibration</h3>
+
+<p>Vous pouvez effectuer une seule vibration du matériel en spécifiant soit une valeur de type "entier", soit un tableau d'entiers.</p>
+
+<pre class="brush:js">window.navigator.vibrate(200);
+window.navigator.vibrate([200]);
+</pre>
+
+<p>Ces deux exemples illustrent tout deux la vibration de l'appareil pendant 200 millisecondes.</p>
+
+<h3 id="Série_de_vibrations">Série de vibrations</h3>
+
+<p>Un tableau de valeurs décrit des périodes de temps durant lesquelles le dispositif effectue des vibrations alternées (marche-arrêt répété). Chaque valeur dans le tableau est convertie en entier puis est interprétée alternativement comme le nombre de millisecondes pour lequel le dispositif devrait vibrer et le nombre de millisecondes dont il ne le devrait pas. Par exemple:</p>
+
+<p> </p>
+
+<pre class="brush: js">window.navigator.vibrate([200, 100, 200]);
+</pre>
+
+<p>Cela fera vibrer l'appareil pendant 200ms, puis fait une pause de 100ms avant de le faire vibrer à nouveau pendant 200ms.</p>
+
+<p>Vous pouvez spécifier autant de paires vibration/pause que vous voulez. Vous pouvez également fournir soit un nombre pair ou impair. Il est à noter que vous ne devez pas fournir de pause avant que la dernière vibration ait lieu.</p>
+
+<h3 id="Annuler_les_vibrations_existantes">Annuler les vibrations existantes</h3>
+
+<p>Faire appel à {{domxref("Navigator.vibrate()")}} avec une valeur 0, un tableau vide, ou encore un tableau composé uniquement de 0 annulera toutes series de vibrations actives.</p>
+
+<h3 id="Vibrations_continues">Vibrations continues</h3>
+
+<p>Quelques codes de base comme  <code>setInterval</code> et <code>clearInterval</code> vont vous permettre de créer une vibration persistante:</p>
+
+<pre class="brush: js">var vibrateInterval;
+
+// Démarre une vibration avec une durée
+function startVibrate(duration) {
+    navigator.vibrate(duration);
+}
+
+// Arrête la vibration
+function stopVibrate() {
+    // Vide l'intervalle et annule les vibrations persistantes
+    if(vibrateInterval) clearInterval(vibrateInterval);
+    navigator.vibrate(0);
+}
+
+// Démarre la vibration persistante avec un intervalle et une durée donnée
+function startPeristentVibrate(duration, interval) {
+    vibrateInterval = setInterval(function() {
+        startVibrate(duration);
+    }, interval);
+}</pre>
+
+<p>Bien sûr, l'extrait de code ci-dessus ne prends pas en compte la méthode du tableau de vibration ; les vibrations persistantes devront se faire en calculant la somme des éléments du tableau et créer un intervalle basé sur ce nombre (avec, probablement, un délai supplémentaire).</p>
+
+<h3 id="Pourquoi_utiliser_l'API_de_vibration">Pourquoi utiliser l'API de vibration?</h3>
+
+<p>Cette APi est dédiée pour les appareils mobiles. Il peut être indispensable pour les alertes au sein des applications mobiles et est particulièrement utile lorsqu'il est associé à des jeux ou des applications multimédia lourdes. Imaginez lorsque vous êtes en train de regarder une vidéo sur votre appareil mobile et pendant une scène d'explosion, votre téléphone vibre un peu. Ou jouer à Bomberman et sentir une petite vibration lorsqu'un bloc explose.</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">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Vibration API')}}</td>
+   <td>{{Spec2('Vibration API')}}</td>
+   <td>Linked to spec is the latest editor's draft; W3C version is a REC.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{Compatibilitytable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("webkit")}}</td>
+   <td>11.0 {{property_prefix("moz")}}<br>
+    16</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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("webkit")}}</td>
+   <td>11.0 {{property_prefix("moz")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Navigator.vibrate()")}}</li>
+</ul>
diff --git a/files/fr/web/api/videotrack/id/index.html b/files/fr/web/api/videotrack/id/index.html
new file mode 100644
index 0000000000..27a83048d8
--- /dev/null
+++ b/files/fr/web/api/videotrack/id/index.html
@@ -0,0 +1,43 @@
+---
+title: VideoTrack.id
+slug: Web/API/VideoTrack/id
+translation_of: Web/API/VideoTrack/id
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p><span class="seoSummary">La propriété <code>id</code> contient une chaîne qui identifie de manière unique une piste représentée par {{domxref("VideoTrack")}}.</span> Cet ID peut être utilisé avec la méthode {{domxref("VideoTrackList.getTrackById()")}} pour localiser une piste spécifique dans le media associé à l'élément media.</p>
+
+<p>Cet ID peut aussi être utilisé comme un fragement d'URL pour charger une piste (si le media supporte les fragments de media).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>trackID</em> = <em>VideoTrack</em>.id;</pre>
+
+<p>Valeur</p>
+
+<p>Une {{domxref("DOMString")}} qui identifie la piste, utilisable par la suite pour l'appel de {{domxref("VideoTrackList.getTrackById", "getTrackById()")}} sur une {{domxref("VideoTrackList")}} tel que spécifié par la propriété {{domxref("HTMLMediaElement.videoTracks", "videoTracks")}} d'un élément media.</p>
+
+<h2 id="Spécifications">Spécifications</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-videotrack-id', 'VideoTrack: id')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.VideoTrack.id")}}</p>
diff --git a/files/fr/web/api/videotrack/index.html b/files/fr/web/api/videotrack/index.html
new file mode 100644
index 0000000000..b380c49939
--- /dev/null
+++ b/files/fr/web/api/videotrack/index.html
@@ -0,0 +1,86 @@
+---
+title: VideoTrack
+slug: Web/API/VideoTrack
+tags:
+  - HTML
+  - HTML DOM
+  - Interface
+  - Media
+  - Reference
+  - TopicStub
+  - Video
+  - VideoTrack
+  - track
+translation_of: Web/API/VideoTrack
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><span class="seoSummary">L'interface {{domxref("VideoTrack")}} représente une seule piste vidéo d'un élément {{HTMLElement("video")}}.</span> L'utilisation la plus courante à un objet <code>VideoTrack</code> est de basculer sa propriété {{domxref("VideoTrack.selected", "selected")}} afin d'en faire la piste vidéo active pour l'élément {{HTMLElement("video")}}.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("VideoTrack.selected", "selected")}}</dt>
+ <dd>Une valeur booléenne qui contrôle si la piste vidéo est active ou non. Seule une seule piste vidéo peut être active à un moment donné, donc la définition de cette propriété sur <code>true</code> pour une piste pendant qu'une autre piste est active rendra cette autre piste inactive.</dd>
+ <dt>{{domxref("VideoTrack.id", "id")}} {{ReadOnlyInline}}</dt>
+ <dd>Un {{domxref("DOMString")}} qui identifie de manière unique la piste dans le média. Cet identifiant peut être utilisé pour localiser une piste spécifique dans une liste de pistes vidéo en appelant {{domxref("VideoTrackList.getTrackById()")}}. L'identifiant peut également être utilisé comme partie fragment de l'URL si le support prend en charge la recherche par fragment de support conformément à la <a href="https://www.w3.org/TR/media-frags/">spécification UR de fragments de média</a>.</dd>
+ <dt>{{domxref("VideoTrack.kind", "kind")}} {{ReadOnlyInline}}</dt>
+ <dd>Un {{domxref("DOMString")}} spécifiant la catégorie dans laquelle appartient la piste. Par exemple, la piste vidéo principale aurait un <code>type</code> <code>"principale"</code>.</dd>
+ <dt>{{domxref("VideoTrack.label", "label")}} {{ReadOnlyInline}}</dt>
+ <dd>Un {{domxref("DOMString")}} fournissant une étiquette lisible par l'homme pour la piste. Par exemple, une piste dont le <code>type</code> est <code>"signe"</code> peut avoir l'<code>étiquette</code> <code>"Une interprétation en langue des signes"</code>. Cette chaîne est vide si aucune étiquette n'est fournie.</dd>
+ <dt>{{domxref("VideoTrack.language", "language")}} {{ReadOnlyInline}}</dt>
+ <dd>Un {{domxref("DOMString")}} spécifiant la langue principale de la piste vidéo, ou une chaîne vide si elle est inconnue. La langue est spécifié en tant que code de langue BCP 47 ({{RFC(5646)}}), tel que <code>"en-US"</code> ou <code>"pt-BR"</code>.</dd>
+ <dt>{{domxref("VideoTrack.sourceBuffer", "sourceBuffer")}} {{ReadOnlyInline}}</dt>
+ <dd>Le {{domxref("SourceBuffer")}} qui a créé la piste. Renvoie null si la piste n'a pas été créée par un {{domxref("SourceBuffer")}} ou le {{domxref("SourceBuffer")}} a été supprimé de l'attribut {{domxref("MediaSource.sourceBuffers")}} de sa source média parent.</dd>
+</dl>
+
+<h2 id="Notes_dutilisation">Notes d'utilisation</h2>
+
+<p>Pour obtenir un <code>VideoTrack</code> pour un élément multimédia donné, utilisez la propriété {{domxref("HTMLMediaElement.videoTracks", "videoTracks")}}, qui renvoie un objet {{domxref("VideoTrackList")}} à partir duquel vous pouvez obtenir les pistes individuelles contenues dans le média:</p>
+
+<pre class="brush: js notranslate">var el = document.querySelector("video");
+var tracks = el.videoTracks;
+</pre>
+
+<p>Vous pouvez ensuite accéder aux pistes individuelles du média en utilisant soit la syntaxe de tableau, soit des fonctions telles que {{jsxref("Array.forEach", "forEach()")}}.</p>
+
+<p>Ce premier exemple obtient la première piste vidéo sur le média:</p>
+
+<pre class="brush: js notranslate">var firstTrack = tracks[0];</pre>
+
+<p>L'exemple suivant parcourt toutes les pistes vidéo du média, activant la première piste vidéo qui est dans la langue préférée de l'utilisateur (tirée d'une variable <code>userLanguage</code>).</p>
+
+<pre class="brush: js notranslate">for (var i = 0; i &lt; tracks.length; i++) {
+  if (tracks[i].language === userLanguage) {
+    tracks[i].selected = true;
+    break;
+  }
+});
+</pre>
+
+<p>Le {{domxref("VideoTrack.language", "language")}} est au format standard ({{RFC(5646)}}). Pour l'anglais américain, ce serait <code>"en-US"</code>, par exemple.</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">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#videotrack', 'VideoTrack')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.VideoTrack")}}</p>
diff --git a/files/fr/web/api/vrdisplaycapabilities/index.html b/files/fr/web/api/vrdisplaycapabilities/index.html
new file mode 100644
index 0000000000..5ab3937cbe
--- /dev/null
+++ b/files/fr/web/api/vrdisplaycapabilities/index.html
@@ -0,0 +1,105 @@
+---
+title: VRDisplayCapabilities
+slug: Web/API/VRDisplayCapabilities
+translation_of: Web/API/VRDisplayCapabilities
+---
+<div>{{APIRef("WebVR API")}}{{SeeCompatTable}}</div>
+
+<p>L'interface <strong><code>VRDisplayCapabilities</code></strong> de <a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a> décrit les capacités d'un appareil {{domxref("VRDisplay")}} — ses fonctionalités peuvent être utilisée pour tester les capacités de l'appareil, par exemple il peut retourner de l'information sur la position.</p>
+
+<p>Cet interface est accessible à partir de la propriété {{domxref("VRDisplay.capabilities")}}.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref("VRDisplayCapabilities.canPresent")}} {{readonlyInline}}</dt>
+ <dd>Retourne un objet {{domxref("Boolean")}} qui décrit si l'écran RV est capable de présenter du contenu (e.g. en utilisant un visiocasque).</dd>
+ <dt>{{domxref("VRDisplayCapabilities.hasExternalDisplay")}} {{readonlyInline}}</dt>
+ <dd>Retourne un objet {{domxref("Boolean")}} indiquant si l'écran RV est séparé de l'écran primaire de l'appareil.</dd>
+ <dt>{{domxref("VRDisplayCapabilities.hasOrientation")}} {{readonlyInline}}</dt>
+ <dd>Retourne un objet {{domxref("Boolean")}} indiquant si l'écran RV peut suivre le mouvement de l'appareil et retourne de l'information sur l'orientation.</dd>
+ <dt>{{domxref("VRDisplayCapabilities.hasPosition")}} {{readonlyInline}}</dt>
+ <dd>Retourne un objet {{domxref("Boolean")}} indiquant si l'écran RV peut suivre le mouvement de l'appareil et retourne de l'information sur l'orientation.</dd>
+ <dt>{{domxref("VRDisplayCapabilities.maxLayers")}} {{readonlyInline}}</dt>
+ <dd>Retourne un nombre indiquant le nombre maximal de {{domxref("VRLayer")}}s que l'écran RV peut présenter en même temps (e.g. la longueur maximale du tableau que {{domxref("Display.requestPresent()")}} peut accepter.)</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<pre>TBD.</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebVR', '#interface-vrdisplaycapabilities', 'VRDisplayCapabilities')}}</td>
+   <td>{{Spec2('WebVR')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>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>{{CompatVersionUnknown}}</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/WebVR_API">WebVR API homepage</a>.</li>
+ <li><a href="http://mozvr.com/">MozVr.com</a> — demos, downloads, and other resources from the Mozilla VR team.</li>
+</ul>
diff --git a/files/fr/web/api/web_animations_api/index.html b/files/fr/web/api/web_animations_api/index.html
new file mode 100644
index 0000000000..fac19092e5
--- /dev/null
+++ b/files/fr/web/api/web_animations_api/index.html
@@ -0,0 +1,78 @@
+---
+title: Web Animations API
+slug: Web/API/Web_Animations_API
+translation_of: Web/API/Web_Animations_API
+---
+<p><font><font>{{DefaultAPISidebar ("Web Animations")}}</font></font></p>
+
+<p><font><font>L' </font></font><strong><font><font>API Web Animations</font></font></strong><font><font> permet de synchroniser et de chronométrer les changements de présentation d'une page Web, c'est-à-dire l'animation d'éléments DOM. </font><font>Pour ce faire, il combine deux modèles: le modèle de synchronisation et le modèle d'animation.</font></font></p>
+
+<h2 id="Concepts_et_utilisation"><font><font>Concepts et utilisation</font></font></h2>
+
+<p><font><font>L'API Web Animations fournit un langage commun aux navigateurs et aux développeurs pour décrire les animations sur les éléments DOM. </font><font>Pour obtenir plus d'informations sur les concepts derrière l'API et comment l'utiliser, lisez </font></font><a href="/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API"><font><font>Utilisation de l'API Web Animations</font></font></a><font><font> .</font></font></p>
+
+<h2 id="Interfaces_danimations_Web"><font><font>Interfaces d'animations Web</font></font></h2>
+
+<dl>
+ <dt><font><font>{{domxref ("Animation")}}</font></font></dt>
+ <dd><font><font>Fournit des commandes de lecture et une chronologie pour un nœud ou une source d'animation. </font><font>Peut prendre un objet créé avec le constructeur {{domxref ( "KeyframeEffect.KeyframeEffect", "KeyframeEffect ()")}}.</font></font></dd>
+ <dt><font><font>{{domxref ("KeyframeEffect")}}</font></font></dt>
+ <dd><font><font>Décrit des ensembles de propriétés et de valeurs animables, appelées </font></font><strong><font><font>images clés</font></font></strong><font><font> et leurs </font></font><a href="/en-US/docs/Web/API/Web_Animations_API/Animation_timing_options"><font><font>options de minutage</font></font></a><font><font> . </font><font>Ceux-ci peuvent ensuite être lus en utilisant le constructeur {{domxref ("Animation.Animation", "Animation ()")}}.</font></font></dd>
+ <dt><font><font>{{domxref ("AnimationTimeline")}}</font></font></dt>
+ <dd><font><font>Représente la chronologie de l'animation. </font><font>Cette interface existe pour définir les fonctionnalités de la chronologie (héritées par {{domxref ("DocumentTimeline")}} et les futurs objets de chronologie) et n'est pas elle-même accessible par les développeurs.</font></font></dd>
+ <dt><font><font>{{domxref ("AnimationEvent")}}</font></font></dt>
+ <dd><font><font>Fait actuellement partie des animations CSS.</font></font></dd>
+ <dt><font><font>{{domxref ("DocumentTimeline")}}</font></font></dt>
+ <dd><font><font>Représente les chronologies d'animation, y compris la chronologie du document par défaut (accessible à l'aide de la propriété {{domxref ("Document.timeline")}}).</font></font></dd>
+ <dt><font><font>{{domxref ("EffectTiming")}}</font></font></dt>
+ <dd><font><font>{{domxref ("Element.animate ()")}}, {{domxref ("KeyframeEffectReadOnly.KeyframeEffectReadOnly ()")}} et {{domxref ("KeyframeEffect.KeyframeEffect ()")}} acceptent tous un dictionnaire facultatif objet des propriétés de synchronisation.</font></font></dd>
+</dl>
+
+<h2 id="Extensions_à_dautres_interfaces"><font><font>Extensions à d'autres interfaces</font></font></h2>
+
+<p><font><font>L'API Web Animations ajoute de nouvelles fonctionnalités à {{domxref ("document")}} et {{domxref ("element")}}.</font></font></p>
+
+<h3 id="Extensions_à_l_Documentinterface"><font><font>Extensions à l' </font></font><code>Document</code><font><font>interface</font></font></h3>
+
+<dl>
+ <dt><font><font>{{domxref ("document.timeline")}}</font></font></dt>
+ <dd><font><font>L' </font></font><code>DocumentTimeline</code><font><font>objet représentant la chronologie du document par </font><font>défaut.</font></font></dd>
+ <dt><font><font>{{domxref ("document.getAnimations ()")}}</font></font></dt>
+ <dd><font><font>Renvoie un tableau d'objets {{domxref ("Animation")}} actuellement en vigueur sur les éléments du </font></font><code>document</code><font><font>.</font></font></dd>
+ <dt>
+ <h3 id="Extensions_à_l_Elementinterface"><font><font>Extensions à l' </font></font><code>Element</code><font><font>interface</font></font></h3>
+ </dt>
+ <dt><font><font>{{domxref ("Element.animate ()")}}</font></font></dt>
+ <dd><font><font>Une méthode de raccourci pour créer et lire une animation sur un élément. </font><font>Il renvoie l'instance d'objet {{domxref ("Animation")}} créée.</font></font></dd>
+ <dt><font><font>{{domxref ("Element.getAnimations ()")}}</font></font></dt>
+ <dd><font><font>Renvoie un tableau d'objets {{domxref ("Animation")}} affectant actuellement un élément ou qui sont programmés pour le faire à l'avenir.</font></font></dd>
+</dl>
+
+<h2 id="Caractéristiques"><font><font>Caractéristiques</font></font></h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col"><font><font>spécification</font></font></th>
+   <th scope="col"><font><font>Statut</font></font></th>
+   <th scope="col"><font><font>Commentaire</font></font></th>
+  </tr>
+  <tr>
+   <td><font><font>{{SpecName ('Web Animations')}}</font></font></td>
+   <td><font><font>{{Spec2 ('Web Animations')}}</font></font></td>
+   <td><font><font>Définition initiale</font></font></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_également"><font><font>Voir également</font></font></h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API"><font><font>Utilisation de l'API Web Animations</font></font></a></li>
+ <li><a href="https://mozdevs.github.io/Animation-examples/"><font><font>Démos d'animations Web</font></font></a></li>
+ <li><a href="https://github.com/web-animations/web-animations-js"><font><font>Polyfill</font></font></a></li>
+ <li><font><a href="https://birtles.github.io/areweanimatedyet/"><font>Implémentation</font></a><font> actuelle de Firefox: </font></font><a href="https://birtles.github.io/areweanimatedyet/"><font><font>AreWeAnimatedYet</font></font></a></li>
+ <li>
+  <p><a href="http://codepen.io/danwilson/pen/xGBKVq"><font><font>Test de prise en charge du navigateur</font></font></a></p>
+ </li>
+</ul>
diff --git a/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.html b/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.html
new file mode 100644
index 0000000000..bf0a5112b8
--- /dev/null
+++ b/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.html
@@ -0,0 +1,346 @@
+---
+title: Les concepts de base de la Web Audio API
+slug: Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API
+translation_of: Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API
+---
+<div class="summary">
+<p><span class="seoSummary">Cet article explique une partie de la théorie sur laquelle s'appuient les fonctionnalités de la Web Audio API. Il ne fera pas de vous un ingénieur du son, mais vous donnera les bases nécessaires pour comprendre pourquoi la Web Audio API fonctionne de cette manière, et vous permettre de mieux l'utiliser.</span></p>
+</div>
+
+<h2 id="Graphes_audio">Graphes audio</h2>
+
+<p>La Web Audio API implique d'effectuer le traitement du son dans un <strong>contexte </strong> <strong>audio</strong>; elle a été conçue sur le principe de <strong>routage modulaire</strong>. Les opérations basiques sont effectuées dans <strong>noeuds audio</strong>, qui sont liés entre eux pour former un <strong>graphe de routage audio</strong>. Un seul contexte peut supporter plusieurs sources — avec différentes configurations de canaux. Cette architecture modulaire assure la flexibilité nécessaire pour créer des fonctions audio complexes avec des effets dynamiques.</p>
+
+<p>Les noeuds audio sont liés au niveau de leur entrée et leur sortie, formant une chaîne qui commence avec une ou plusieurs sources, traverse un ou plusieurs noeuds, et se termine avec une sortie spécifique (bien qu'il ne soit pas nécessaire de spécifier une sortie si, par exemple, vous souhaitez seulement visualiser des données audio). Un scénario simple, représentatif de la Web Audio API, pourrait ressembler à ceci :</p>
+
+<ol>
+ <li>Création d'un contexte audio</li>
+ <li>Dans ce contexte, création des sources — telles que <code>&lt;audio&gt;</code>, oscillateur, flux</li>
+ <li>Création des noeuds d'effets, tels que réverb, filtres biquad, balance,  compresseur</li>
+ <li>Choix final de la sortie audio, par exemple les enceintes du système </li>
+ <li>Connection des sources aux effets, et des effets à la sortie.</li>
+</ol>
+
+<p><img alt="Diagramme simple composé de trois rectangles intitulés Sources, Effets et Sortie, reliés par des flèches, de gauche à droite, qui indiquent le sens du flux d'informations audio." src="https://mdn.mozillademos.org/files/12525/webaudioAPI.svg" style="display: block; height: 143px; margin: 0px auto; width: 643px;"></p>
+
+<p>Chaque entrée ou sortie est composée de plusieurs <strong>canaux, </strong>chacun correspondant à une configuration audio spécifique. Tout type de canal discret est supporté, y compris <em>mono</em>, <em>stereo</em>, <em>quad</em>, <em>5.1</em>, etc.</p>
+
+<p><img alt="Diagramme qui montre comment les AudioNodes sont reliés par leurs entrées et sorties, et la configuration des canaux à l'intérieur de ces entrées/sorties." src="https://mdn.mozillademos.org/files/12235/audionodes.svg" style="display: block; height: 360px; margin: 0px auto; width: 630px;"></p>
+
+<p>Les sources audio peuvent être de provenance variée :</p>
+
+<ul>
+ <li>générées directement en JavaScript avec un noeud audio (tel qu'un oscillateur)</li>
+ <li>créées à partir de données PCM brutes (le contexte audio a des méthodes pour décoder les formats audio supportés)</li>
+ <li>fournies par une balise HTML media (telle que {{HTMLElement("video")}} ou {{HTMLElement("audio")}})</li>
+ <li>récupérées directement avec <a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> {{domxref("MediaStream")}} (une webcam ou un microphone)</li>
+</ul>
+
+<h2 id="Données_audio_ce_qu'on_trouve_dans_un_échantillon">Données audio: ce qu'on trouve dans un échantillon</h2>
+
+<p>Lors du traitement d'un signal audio, <strong>l'échantillonage</strong> désigne la conversion d'un <a href="http://en.wikipedia.org/wiki/Continuous_signal" title="Continuous signal">signal continu</a> en <a class="mw-redirect" href="http://en.wikipedia.org/wiki/Discrete_signal" title="Discrete signal">signal discret</a>; formulé autrement, une onde de son continue, comme un groupe qui joue en live, est convertie en une séquence d'échantillons (un signal temporel discret) qui permet à l'ordinateur de traiter le son en blocs distincts.</p>
+
+<p>On peut trouver davantage de détails sur la page Wikipedia <a href="https://fr.wikipedia.org/wiki/%C3%89chantillonnage_(signal)">Echantillonage (signal)</a>.</p>
+
+<h2 id="Mémoire_tampon_trames_échantillons_et_canaux">Mémoire tampon : trames, échantillons et canaux</h2>
+
+<p>Un {{ domxref("AudioBuffer") }} prend comme paramètres un nombre de canaux (1 pour mono, 2 pour stéréo, etc), une longueur, qui correspond au nombre de trames d'échantillon dans la mémoire tampon, et un taux d'échantillonage, qui indique le nombre de trames d'échantillons lues par seconde.</p>
+
+<p>Un échantillon est une valeur float32 unique, qui correspond à la valeur du flux audio à un point précis dans le temps, sur un canal spécifique (gauche ou droit dans le cas de la stéréo). Une trame, ou trame d'échantillon est l'ensemble de toutes les valeurs pour tous les canaux (deux pour la stéréo, six pour le 5.1, etc.)  à un point précis dans le temps.</p>
+
+<p>Le taux d'échantillonage est le nombre d'échantillons (ou de trames, puisque tous les échantillons d'une trame jouent en même temps) qui sont joués en une seconde, exprimés en Hz. Plus le taux d'échantillonage est élevé, meilleure est la qualité du son.</p>
+
+<p>Prenons deux {{ domxref("AudioBuffer") }}, l'un en mono et l'autre en stéréo, chacun d'une durée de 1 seconde et d'une fréquence de 44100Hz:</p>
+
+<ul>
+ <li>le mono aura 44100 échantillons, et 44100 trames. Sa propriété <code>length</code> vaudra 44100.</li>
+ <li>le stéréo aura 88200 échantillons, et 44100 trames. Sa propriété <code>length</code> vaudra aussi 44100, puisqu'elle correspond au nombre de trames.</li>
+</ul>
+
+<p><img alt="Le diagramme montre une succession de tames dans un buffer audio. Comme le buffer est composé de deux canaux (stéréo), chaque trame contient deux échantillons." src="https://mdn.mozillademos.org/files/12489/sampleframe.svg" style="height: 110px; width: 622px;"></p>
+
+<p>Lorsqu'un noeud de mémoire tampon est lu, on entend d'abord la trame la trame la plus à gauche, puis celle qui la suit à droite, etc. Dans le cas de la stéréo, on entend les deux canaux en même temps. Les trames d'échantillon sont très utiles, car elles représentent le temps indépendamment du nombre de canaux.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Pour obtenir le temps en secondes à partir du nombre de trames, diviser le nombre de trames par le taux d'échantillonage. Pour obtenir le nombre de trames à partir du nombre d'échantillons, diviser le nombre d'échantillons par le nombre de canaux.</p>
+</div>
+
+<p>Voici quelques exemples simples:</p>
+
+<pre class="brush: js">var contexte = new AudioContext();
+var memoireTampon = contexte.createBuffer(2, 22050, 44100);</pre>
+
+<div class="note">
+<p><strong>Note</strong>: <strong>44,100 <a href="https://en.wikipedia.org/wiki/Hertz" title="Hertz">Hz</a></strong> (que l'on peut aussi écrire <strong>44.1 kHz</strong>) est un <a href="https://en.wikipedia.org/wiki/Sampling_frequency" title="Sampling frequency">taux d'échantillonage</a> couramment utilisé. Pourquoi 44.1kHz ?<br>
+ <br>
+ D'abord, parce ce que le <a href="https://en.wikipedia.org/wiki/Hearing_range" title="Hearing range">champ auditif</a> qui peut être perçu par des oreilles humaines se situe à peu près entre 20 Hz et 20,000 Hz, et que selon le <a href="https://en.wikipedia.org/wiki/Nyquist%E2%80%93Shannon_sampling_theorem" title="Nyquist–Shannon sampling theorem">théorème d'échantillonage de Nyquist–Shannon</a> la fréquence d'échantillonage doit être supérieure à deux fois la fréquence maximum que l'on souhaite reproduire; le taux d'échantillonage doit donc être supérieur à 40 kHz.<br>
+ <br>
+ De plus, le signal doit être traité par un <a href="https://en.wikipedia.org/wiki/Low-pass_filter" title="Low-pass filter">filtre passe-bas</a> avant d'être échantilloné, afin d'éviter le phénomène d'<a href="https://en.wikipedia.org/wiki/Aliasing" title="Aliasing">aliasing</a>, et, si en théorie un  filtre passe-bas idéal devrait être capable de laisser passer les fréquences inférieures à 20 kHz (sans les atténuer) et de couper parfaitement les fréquences supérieures à 20 kHz, en pratique une <a href="https://en.wikipedia.org/wiki/Transition_band" title="Transition band">bande de transition</a> dans laquelle les fréquences sont partiellement atténuées est nécessaire. Plus la bande de transition est large, plus il est facile et économique de faire un <a href="https://en.wikipedia.org/wiki/Anti-aliasing_filter" title="Anti-aliasing filter">filtre anti-aliasing</a>. Le taux d'échantillonage 44.1 kHz laisse une bande de transition de 2.05 kHz.</p>
+</div>
+
+<p>Ce code génère une mémoire tampon stéréo (deux canaux) qui, lorsqu'elle est lue dans un AudioContext à 44100Hz (configuration répandue, la plupart des cartes sons tournant à cette fréquence), dure 0.5 secondes: 22050 trames / 44100Hz = 0.5 secondes.</p>
+
+<pre class="brush: js">var contexte = new AudioContext();
+var memoireTampon = context.createBuffer(1, 22050, 22050);</pre>
+
+<p>Ce code génère une mémoire tampon mono (un seul canal) qui, lorsqu'elle est lue dans un AudioContext à 44100Hzz, est automatiquement *rééchantillonnée* à 44100Hz (et par conséquent produit 44100 trames), et dure 1.0 seconde: 44100 frames / 44100Hz = 1 seconde.</p>
+
+<div class="note">
+<p><strong>Note</strong>: le rééchantillonnage audio est très similaire à la redimension d'une image : imaginons que vous ayiez une image de 16 x 16, mais que vous vouliez remplir une surface de 32x32: vous la redimensionnez (rééchantillonnez). Le résultat est de qualité inférieure (il peut être flou ou crénelé, en fonction de l'algorithme de redimensionnement), mais cela fonctionne, et l'image redimensionnée prend moins de place que l'originale. C'est la même chose pour le rééchantillonnage audio — vous gagnez de la place, mais en pratique il sera difficle de reproduire correctement des contenus de haute fréquence (c'est-à-dire des sons aigus).</p>
+</div>
+
+<h3 id="Mémoire_tampon_linéaire_ou_entrelacée">Mémoire tampon linéaire ou entrelacée</h3>
+
+<p>La Web Audio API utilise un format de mémoire tampon linéaire : les canaux gauche et droite sont stockés de la façon suivante :</p>
+
+<pre>LLLLLLLLLLLLLLLLRRRRRRRRRRRRRRRR (pour un buffer de 16 trames)</pre>
+
+<p>C'est assez courant dans le traitement audio, car cela permet de traiter facilement chaque canal de façon indépendante.</p>
+
+<p>L'alternative est d'utiliser un format entrelacé:</p>
+
+<pre>LRLRLRLRLRLRLRLRLRLRLRLRLRLRLRLR (pour un buffer de 16 trames)</pre>
+
+<p>Ce format est communément utilisé pour stocker et lire du son avec très peu de traitement, comme par exemple pour un flux de  MP3 décodé.<br>
+ <br>
+ La Web Audio API expose *uniquement* des buffer linéaires, car elle est faite pour le traitement du son. Elle fonctionne en linéaire, mais convertit les données au format entrelacé au moment de les envoyer à la carte son pour qu'elles soient jouées. A l'inverse, lorsqu'un MP3 est décodé, le format d'origine entrelacé est converti en linéaire pour le traitement.</p>
+
+<h2 id="Canaux_audio">Canaux audio</h2>
+
+<p>Une mémoire tampon audio peut contenir différents nombres de canaux, depuis les configurations simple mono (un seul canal) ou stéréo (canal gauche et canal droit) en allant jusquà des configurations plus complexe comme le quad ou le 5.1, pour lesquels chaque canal contient plusieurs échantillons de sons, ce qui permet une expérience sonore plus riche. Les canaux sont généralement représentés par les abbréviations standard  détaillées dans le tableau ci-après :</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><em>Mono</em></td>
+   <td><code>0: M: mono</code></td>
+  </tr>
+  <tr>
+   <td><em>Stereo</em></td>
+   <td><code>0: L: gauche<br>
+    1: R: droit</code></td>
+  </tr>
+  <tr>
+   <td><em>Quad</em></td>
+   <td><code>0: L: gauche<br>
+    1: R: droit<br>
+    2: SL: surround gauche<br>
+    3: SR: surround droit</code></td>
+  </tr>
+  <tr>
+   <td><em>5.1</em></td>
+   <td><code>0: L: gauche<br>
+    1: R: droit<br>
+    2: C: centre<br>
+    3: LFE: subwoofer<br>
+    4: SL: surround gauche<br>
+    5: SR: surround droit</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Conversion_ascendante_et_descendante">Conversion ascendante et descendante</h3>
+
+<p>Lorsque le nombre de canaux n'est pas le même en entrée et en sortie, on effectue une conversion ascendante ou descendante selon les règles suivantes. Cela peut être plus ou moins controllé en assignant la valeur <code>speakers</code> ou <code>discrete</code> à la propriété {{domxref("AudioNode.channelInterpretation")}} .</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row">Interprétation</th>
+   <th scope="col">Canaux d'entrée</th>
+   <th scope="col">Canaux de sortie</th>
+   <th scope="col">Règles de conversion</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th colspan="1" rowspan="13" scope="row"><code>speakers</code></th>
+   <td><code>1</code> <em>(Mono)</em></td>
+   <td><code>2</code> <em>(Stéréo)</em></td>
+   <td><em>Conversion ascendante de mono vers stéréo</em>.<br>
+    Le canal d'entrée <code>M</code> est utilisé pour les deux canaux de sortie (<code>L</code> et <code>R</code>).<br>
+    <code>output.L = input.M<br>
+    output.R = input.M</code></td>
+  </tr>
+  <tr>
+   <td><code>1</code> <em>(Mono)</em></td>
+   <td><code>4</code> <em>(Quad)</em></td>
+   <td><em>Conversion ascendante de mono vers quad.</em><br>
+    Le canal d'entrée <code>M</code> est utilisé pour les canaux de sortie autres que surround (<code>L</code> et <code>R</code>). Les canaux de sortie surround (<code>SL</code> et <code>SR</code>) sont silencieux.<br>
+    <code>output.L = input.M<br>
+    output.R = input.M<br>
+    output.SL = 0<br>
+    output.SR = 0</code></td>
+  </tr>
+  <tr>
+   <td><code>1</code> <em>(Mono)</em></td>
+   <td><code>6</code> <em>(5.1)</em></td>
+   <td><em>Conversion ascendante de mono vers 5.1.</em><br>
+    Le canal d'entrée <code>M</code> est utilisé pour le canal de sortie central (<code>C</code>). Tous les autres canaux (<code>L</code>, <code>R</code>, <code>LFE</code>, <code>SL</code>, et <code>SR</code>) sont silencieux.<br>
+    <code>output.L = 0<br>
+    output.R = 0</code><br>
+    <code>output.C = input.M<br>
+    output.LFE = 0<br>
+    output.SL = 0<br>
+    output.SR = 0</code></td>
+  </tr>
+  <tr>
+   <td><code>2</code> <em>(Stéréo)</em></td>
+   <td><code>1</code> <em>(Mono)</em></td>
+   <td><em>Conversion descendante de stéréo vers mono</em>.<br>
+    Les deux canaux d'entrée (<code>L</code> et <code>R</code>) sont combinées pour produire l'unique canal de sortie (<code>M</code>).<br>
+    <code>output.M = 0.5 * (input.L + input.R)</code></td>
+  </tr>
+  <tr>
+   <td><code>2</code> <em>(Stéréo)</em></td>
+   <td><code>4</code> <em>(Quad)</em></td>
+   <td><em>Conversion ascendante de stéréo vers quad.</em><br>
+    Les canaux d'entrée <code>L</code> et <code>R </code>input sont utilisés pour leurs équivalents respectifs non-surround en sortie (<code>L</code> et <code>R</code>). Les canaux de sortie surround (<code>SL</code> et <code>SR</code>) sont silencieux.<br>
+    <code>output.L = input.L<br>
+    output.R = input.R<br>
+    output.SL = 0<br>
+    output.SR = 0</code></td>
+  </tr>
+  <tr>
+   <td><code>2</code> <em>(Stéréo)</em></td>
+   <td><code>6</code> <em>(5.1)</em></td>
+   <td><em>Conversion ascendante de stéréo vers 5.1.</em><br>
+    Les canaux d'entrée <code>L</code> et <code>R </code>sont utilisés pour leurs équivalents respectifs non-surround en sortie (<code>L</code> et <code>R</code>). Les canaux de sortie surround (<code>SL</code> et <code>SR</code>), ainsi que le canal central (<code>C</code>) et le canal subwoofer (<code>LFE</code>) restent silencieux.<br>
+    <code>output.L = input.L<br>
+    output.R = input.R<br>
+    output.C = 0<br>
+    output.LFE = 0<br>
+    output.SL = 0<br>
+    output.SR = 0</code></td>
+  </tr>
+  <tr>
+   <td><code>4</code> <em>(Quad)</em></td>
+   <td><code>1</code> <em>(Mono)</em></td>
+   <td><em>Conversion descendante de quad vers mono</em>.<br>
+    Les quatre canaux de sortie (<code>L</code>, <code>R</code>, <code>SL</code>, et <code>SR</code>) sont  combinés pour produire l'unique canal de sortie (<code>M</code>).<br>
+    <code>output.M = 0.25 * (input.L + input.R + </code><code>input.SL + input.SR</code><code>)</code></td>
+  </tr>
+  <tr>
+   <td><code>4</code> <em>(Quad)</em></td>
+   <td><code>2</code> <em>(Stéréo)</em></td>
+   <td><em>Conversion descendante de quad vers stéréo</em>.<br>
+    Les deux canaux d'entrée à gauche (<code>L</code> and <code>SL</code>) sont combinés pour produire l'unique canal de sortie à gauche (<code>L</code>). De la même façon, les deux canaux d'entrée à droite (<code>R</code> et <code>SR</code>) sont combinés pour produire l'unique canal de sortie à droite (<code>R</code>).<br>
+    <code>output.L = 0.5 * (input.L + input.SL</code><code>)</code><br>
+    <code>output.R = 0.5 * (input.R + input.SR</code><code>)</code></td>
+  </tr>
+  <tr>
+   <td><code>4</code> <em>(Quad)</em></td>
+   <td><code>6</code> <em>(5.1)</em></td>
+   <td><em>Conversion ascendante de quad vers 5.1.</em><br>
+    Les canaux d'entrée <code>L</code>, <code>R</code>, <code>SL</code>, et <code>SR</code> sont utilisés pour leur canaux de sortie équivalents respectifs (<code>L</code> and <code>R</code>). Le canal central (<code>C</code>) et le canal subwoofer (<code>LFE</code>) restent silencieux.<br>
+    <code>output.L = input.L<br>
+    output.R = input.R<br>
+    output.C = 0<br>
+    output.LFE = 0<br>
+    output.SL = input.SL<br>
+    output.SR = input.SR</code></td>
+  </tr>
+  <tr>
+   <td><code>6</code> <em>(5.1)</em></td>
+   <td><code>1</code> <em>(Mono)</em></td>
+   <td><em>Conversion descendante de 5.1 vers mono.</em><br>
+    Les canaux de gauche (<code>L</code> et <code>SL</code>), de droite (<code>R</code> et <code>SR</code>) et central sont tous mixés ensemble. Les canaux surround sont légèrement atténués et la puissance des canaux latéraux est compensée pour la faire compter comme un seul canal en la multipliant par <code>√2/2</code>. Le canal subwoofer (<code>LFE</code>) est perdu.<br>
+    <code>output.M = 0.7071 * (input.L + input.R) + input.C + 0.5 * (input.SL + input.SR)</code></td>
+  </tr>
+  <tr>
+   <td><code>6</code> <em>(5.1)</em></td>
+   <td><code>2</code> <em>(Stéréo)</em></td>
+   <td><em>Conversion descendante de 5.1 vers stéréo.</em><br>
+    Le canal central (<code>C</code>) est additionné avec chacun des canaux latéraux  (<code>SL</code> et <code>SR</code>) puis combiné avec chacun des canaux latéraux (L et R). Comme il est converti en deux canaux, il est mixé à une puissance inférieure : multiplié par <code>√2/2</code>. Le canal subwoofer (<code>LFE</code>) est perdu.<br>
+    <code>output.L = input.L + 0.7071 * (input.C + input.SL)<br>
+    output.R = input.R </code><code>+ 0.7071 * (input.C + input.SR)</code></td>
+  </tr>
+  <tr>
+   <td><code>6</code> <em>(5.1)</em></td>
+   <td><code>4</code> <em>(Quad)</em></td>
+   <td><em>Conversion descendante de 5.1 vers quad.</em><br>
+    Le canal central (<code>C</code>) est combiné avec les canaux latéraux non-surround (<code>L</code> et <code>R</code>). Comme il est converti en deux canaux, il est mixé à une puissance inférieure : multiplié par <code>√2/2</code>. Les canaux surround restent inchangés. Le canal subwoofer (<code>LFE</code>) est perdu.<br>
+    <code>output.L = input.L + 0.7071 * input.C<br>
+    output.R = input.R + 0.7071 * input.C<br>
+    <code>output.SL = input.SL<br>
+    output.SR = input.SR</code></code></td>
+  </tr>
+  <tr>
+   <td colspan="2" rowspan="1">Autres configurations non-standard</td>
+   <td>Les configurations non-standard sont traitées comme si la propriété <code>channelInterpretation</code> avait la valeur <code>discrete</code>.<br>
+    La spécification autorise explicitement la définition à venir de nouvelles configurations de sortie pour les enceintes. Ce cas de figure  n'est par conséquent pas garanti dans le futur, car le comportement des navigateurs pour un nombre spécifique de canaux pourrait être amené à changer.</td>
+  </tr>
+  <tr>
+   <th colspan="1" rowspan="2" scope="row"><code>discrete</code></th>
+   <td rowspan="1">tout (<code>x</code>)</td>
+   <td rowspan="1">tout (<code>y</code>) pour lequel <code>x&lt;y</code></td>
+   <td><em>Conversion ascendante de canaux discrets.</em><br>
+    Remplit chaque canal de sortie avec son équivalent en entrée, c'est-à-dire le canal qui a le même index. Les canaux de sortie qui n'ont pas d'équivalent en entrée restent silencieux.</td>
+  </tr>
+  <tr>
+   <td rowspan="1">tout (<code>x</code>)</td>
+   <td rowspan="1">tout (<code>y</code>) pour lequel <code>x&gt;y</code></td>
+   <td><em>Conversion descendante de canaux discrets.</em><br>
+    Remplit chaque canal de sortie avec son équivalent en entrée, c'est-à-dire le canal qui a le même index. Les canaux d'entrée qui n'ont pas d'équivalent en sortie sont perdus.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Visualisations">Visualisations</h2>
+
+<p>Une visualisation audio consiste en général à utiliser un flux de données audio dans le temps (souvent des informations de gain ou de fréquence) pour générer un affichage graphique (comme un graphe). La Web Audio API possède un {{domxref("AnalyserNode")}} qui n'altère pas le signal audio qui le traverse, permettant de générer des données qui peuvent être utilisées par une technologie de visualisation telle que {{htmlelement("canvas")}}.</p>
+
+<p><img alt="Le noeud permet de récupérer la fréquence et le domaine temporel en utilisant FFT, et ce sans modifier le flux audio" src="https://mdn.mozillademos.org/files/12493/fttaudiodata.svg" style="height: 206px; width: 693px;"></p>
+
+<p>On peut accéder aux données en utilisant les méthodes suivantes:</p>
+
+<dl>
+ <dt>{{domxref("AnalyserNode.getFloatFrequencyData()")}}</dt>
+ <dd>Copie les données de fréquence dans le tableau {{domxref("Float32Array")}} passé en argument.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("AnalyserNode.getByteFrequencyData()")}}</dt>
+ <dd>Copies les données de fréquence dans le tableau d'octets non signés {{domxref("Uint8Array")}} passé en argument.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("AnalyserNode.getFloatTimeDomainData()")}}</dt>
+ <dd>Copie les données de l'onde de forme, ou domaine temporel, dans le {{domxref("Float32Array")}} passé en argument.</dd>
+ <dt>{{domxref("AnalyserNode.getByteTimeDomainData()")}}</dt>
+ <dd>Copie les données de l'onde de forme, ou domaine temporel, dans le tableau d'octets non signés {{domxref("Uint8Array")}} passé en argument.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note</strong>: Pour plus d'informations, voir notre article <a href="/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Visualizations with Web Audio API</a>.</p>
+</div>
+
+<h2 id="Spatialisations">Spatialisations</h2>
+
+<div>
+<p>Une spatialisation audio (gérée par les noeuds {{domxref("PannerNode")}} et {{domxref("AudioListener")}} dans la Web Audio API) permet de modéliser la position et le comportement d'un signal audio situé dans l'espace, ainsi que l'auditeur qui perçoit ce signal.</p>
+
+<p>La position du panoramique est décrite avec des coodonnées cartésiennes selon la règle de la main droite, son mouvement à l'aide d'un vecteur de vélocité (nécessaire pour la création d'effets Doppler) et sa direction avec un cone de direction. Le cone peut être très large, par exemple dans le cas de sources omnidirectionnelles.</p>
+</div>
+
+<p><img alt="Le PannerNode donne la position dans l'espace, la vélocité et la direction d'un signal donné" src="https://mdn.mozillademos.org/files/12495/pannernode.svg" style="height: 340px; width: 799px;"></p>
+
+<div>
+<p>La position de l'auditeur est décrite avec des coodonnées cartésiennes selon la règle de la main droite,  son mouvement à l'aide d'un vecteur de vélocité et la direction vers laquelle elle pointe en utilisant deux vecteurs de direction : haut et face. Ceux-ci définissent respectivement la direction vers laquelle pointent le haut de la tête et le bout du nez de l'auditeur, et forment un angle droit entre eux.</p>
+</div>
+
+<p><img alt="On voit la position d'un auditeur, ainsi que les vecteurs de direction haut et de face qui forment un angle de 90°" src="https://mdn.mozillademos.org/files/12497/listener.svg" style="height: 249px; width: 720px;"></p>
+
+<div class="note">
+<p><strong>Note</strong>: For more information, see our <a href="/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics">Web audio spatialization basics</a> article.</p>
+</div>
+
+<h2 id="Fan-in_et_Fan-out">Fan-in et Fan-out</h2>
+
+<p>En audio, <strong>fan-in</strong> désigne le processus par lequel un {{domxref("ChannelMergerNode")}} prend une série d'entrées mono entrée et restitue un seul signal multi-canaux :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12505/fanin.svg" style="height: 258px; width: 325px;"></p>
+
+<p><strong>Fan-out</strong> désigne le processus opposé, par lequel un {{domxref("ChannelSplitterNode")}} prend une source multi-canaux en entrée et restitue plusieurs signaux mono en sortie:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12507/fanout.svg" style="height: 258px; width: 325px;"></p>
diff --git a/files/fr/web/api/web_audio_api/index.html b/files/fr/web/api/web_audio_api/index.html
new file mode 100644
index 0000000000..1c7af0c519
--- /dev/null
+++ b/files/fr/web/api/web_audio_api/index.html
@@ -0,0 +1,488 @@
+---
+title: Web Audio API
+slug: Web/API/Web_Audio_API
+translation_of: Web/API/Web_Audio_API
+---
+<div>
+<p><span style="line-height: 1.5;">La Web Audio API propose un système puissant et flexible pour contrôler les données audio sur internet. Elle permet notamment de sélectionner des sources audio (microphone, flux media), d'y ajouter des effets, de créer des visualisations, d'appliquer des effets de spatialisation (comme la balance), etc.</span></p>
+</div>
+
+<h2 id="Concepts_et_usages">Concepts et usages</h2>
+
+<p><span style="line-height: 1.5;">La Web Audio API effectue des opérations dans un <strong>contexte audio</strong>; elle a été conçue pour supporter le <strong>routing modulaire</strong>. Les opérations audio basiques sont réalisées via des <strong>noeuds audio</strong> reliés entre eux pour former un <strong>graphe de routage audio</strong>. Plusieurs sources - avec différents types d'agencements de canaux - peuvent être supportées, même dans un seul contexte. Ce design modulaire et flexible permet de créer des fonctions audio complexes avec des effets dynamiques.</span></p>
+
+<p><span style="line-height: 1.5;">Les noeuds audio sont reliés au niveau de leurs entrées et sorties, formant des chaînes ou des réseaux simples. Il peut y avoir une ou plusieurs sources. Les sources fournissent des tableaux d'intensités sonores (échantillons), souvent plusieurs dizaines de milliers par seconde. Ceux-ci peuvent être calculées mathématiquement </span>(avec un {{domxref("OscillatorNode")}}), ou peuvent provenir de fichiers sons ou vidéos (comme {{domxref("AudioBufferSourceNode")}} ou {{domxref("MediaElementAudioSourceNode")}}) ou de flux audio ({{domxref("MediaStreamAudioSourceNode")}}). En réalité, les fichiers sons sont eux-même des enregistrements d'intensités sonores, qui viennent de microphones ou d'instruments électriques, et sont mixés dans une seule onde complexe.</p>
+
+<p>Les sorties de ces noeuds peuvent être liées aux entrées d'autres noeuds, qui mixent ces flux d'échantillons sonores ou les séparent en différents flux. Une modification courante est la multiplications des échantillons par une valeur afin d'en augmenter ou diminuer le volume sonore (comme c'est le cas pour le {{domxref("GainNode")}}). Le son est ensuite lié à une destination ({{domxref("AudioContext.destination")}}), qui l'envoie aux enceintes ou au casque audio. Cette dernière connexion n'est utile que si le son doit être entendu.<br>
+ <br>
+ Un processus de développement typique avec web audio ressemble à ceci :</p>
+
+<ol>
+ <li>Création d'un contexte audio</li>
+ <li>Dans ce contexte, création des sources — comme <code>&lt;audio&gt;</code>, oscillator, stream</li>
+ <li>Création de noeuds d'effets, comme la réverbération, les filtres biquad, la balance, le compresseur</li>
+ <li>Choix de la sortie audio (appelée destination), par exemple les enceintes du système</li>
+ <li>Connection des sources aux effets, et des effets à la destination</li>
+</ol>
+
+<p><img alt="A simple box diagram with an outer box labeled Audio context, and three inner boxes labeled Sources, Effects and Destination. The three inner boxes have arrow between them pointing from left to right, indicating the flow of audio information." src="https://mdn.mozillademos.org/files/12523/webaudioAPI.svg" style="display: block; height: 143px; margin: 0px auto; width: 643px;"></p>
+
+<p>Le timing est contrôlé avec une grande précision et une latence faible, ce qui permet aux développeurs d'écrire un code qui réagit précisément aux événements et qui est capable de traiter des échantillons précis, même avec un taux d'échantillonnage élevé. Cela permet d'envisager des applications telles que des boîtes à rythme ou des séquenceurs.</p>
+
+<p>La Web Audio API permet également de contrôler la <em>spatialisation</em> du son. En utilisant un système basé sur le modèle <em>émetteur - récepteur, </em>elle permet le contrôle de la balance ainsi que la gestion de l'atténuation du son en fonction de la distance, ou effet doppler, induite par un déplacement de la source sonore (ou de l'auditeur).</p>
+
+<div class="note">
+<p><strong>Note</strong>: Vous pouvez lire d'avantage de détails sur la Web Audio API en vous rendant sur notre article<a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API"> Concepts de base de la Web Audio API</a>.</p>
+</div>
+
+<h2 id="Interface_de_la_Web_Audio_API">Interface de la Web Audio API</h2>
+
+<p>La Web Audio API expose 28 interfaces avec des événements associés, classés selon leur fonction en 9 catégories.</p>
+
+<h3 id="Définition_du_graphe_audio">Définition du graphe audio</h3>
+
+<p>Conteneurs et définitions qui donnent sa forme au graphe audio</p>
+
+<dl>
+ <dt>{{domxref("AudioContext")}}</dt>
+ <dd>Un objet <strong><code>AudioContext</code></strong> désigne un graphe de traitement audio construit à partir de modules reliés entre eux, chacun représenté par un noeud audio ({{domxref("AudioNode")}}). Le contexte audio contrôle la création des noeuds qu'il contient, ainsi que l'exécution du traitement audio, et du décodage. Il est nécessaire de créer un <code>AudioContext</code> avant de faire quoi que ce soit d'autre, puisque tout se passe dans un contexte.</dd>
+ <dt>{{domxref("AudioNode")}}</dt>
+ <dd>Un objet <strong><code>AudioNode</code></strong><strong> </strong>est un module de traitement audio, tel qu'une <em>source audio</em> (c'est-à-dire un élément HTML {{HTMLElement("audio")}} ou {{HTMLElement("video")}}), une <em>destination audio</em>, un <em>module de traitement intermédiaire</em> (par exemple un filtre {{domxref("BiquadFilterNode")}}), ou un contrôle du volume {{domxref("GainNode")}}).</dd>
+ <dt>{{domxref("AudioParam")}}</dt>
+ <dd>Un objet <strong><code>AudioParam</code></strong><strong> </strong>est un paramètre audio, qui est lié à un {{domxref("AudioNode")}}. On peut lui assigner une valeur ou un changement de valeur, que l'on peut programmer à un moment spécifique et/ou selon un motif particulier.</dd>
+ <dt>{{event("ended_(Web_Audio)", "ended")}} (event)</dt>
+ <dd>L'évènement <code>ended</code> est diffusé lorsque la lecture s'arrête en arrivant à la fin d'un media.</dd>
+</dl>
+
+<h3 id="Définition_des_sources_audio">Définition des sources audio</h3>
+
+<dl>
+ <dt>{{domxref("OscillatorNode")}}</dt>
+ <dd>Un objet <strong><code style="font-size: 14px;">OscillatorNode</code></strong><strong> </strong>est un module de traitement audio qui génère la création d'une onde sinusoïdale d'une certaine fréquence.</dd>
+ <dt>{{domxref("AudioBuffer")}}</dt>
+ <dd>Un objet <strong><code>AudioBuffer</code></strong> est un petit morceau de contenu audio monté en mémoire. Il peut être créé à partir d'un fichier audio avec la méthode {{ domxref("AudioContext.decodeAudioData()") }}, ou à partir de données brutes en utilisant {{ domxref("AudioContext.createBuffer()") }}. Une fois décodé sous cette forme, la source audio peut être placée dans un {{ domxref("AudioBufferSourceNode") }}.</dd>
+ <dt>{{domxref("AudioBufferSourceNode")}}</dt>
+ <dd>Un objet <strong><code>AudioBufferSourceNode</code></strong> est une source audio composée de données audio montées en mémoire dans un {{domxref("AudioBuffer")}}. C'est un {{domxref("AudioNode")}} qui se comporte comme une source audio.</dd>
+ <dt>{{domxref("MediaElementAudioSourceNode")}}</dt>
+ <dd>Un objet <code><strong>MediaElementAudio</strong></code><strong><code>SourceNode</code></strong> est une source audio composée d'un élément  HTML5 {{ htmlelement("audio") }} ou {{ htmlelement("video") }}. C'est un {{domxref("AudioNode")}} qui se comporte comme une source audio.</dd>
+ <dt>{{domxref("MediaStreamAudioSourceNode")}}</dt>
+ <dd>Un objet <code><strong>MediaStreamAudio</strong></code><strong><code>SourceNode</code></strong> est une source audio composée d'un <a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> {{domxref("MediaStream")}} (tel qu'une webcam ou un microphone). C'est un {{domxref("AudioNode")}} qui se comporte comme une source audio.</dd>
+</dl>
+
+<h3 id="Définition_des_filtres_d'effets_audio">Définition des filtres d'effets audio</h3>
+
+<dl>
+ <dt>{{domxref("BiquadFilterNode")}}</dt>
+ <dd>Un objet <strong><code>BiquadFilterNode</code> </strong>est un simple filtre de bas niveau. Il peut s'agir de différents types de filtres, contrôle du volume ou égaliseurs graphiques. Un <code>BiquadFilterNode</code> a toujours exactement une entrée et une sortie.</dd>
+ <dt>{{domxref("ConvolverNode")}}</dt>
+ <dd>Un objet <code><strong>Convolver</strong></code><strong><code>Node</code></strong><strong> </strong>est un {{domxref("AudioNode")}} qui exécute une circonvolution linéaire sur un AudioBuffer donné, souvent utilisé pour créer un effet de réverbération.</dd>
+ <dt>{{domxref("DelayNode")}}</dt>
+ <dd>Un objet <strong><code>DelayNode</code></strong><strong> </strong>est une ligne à retard numérique, c'est-à-dire un module de traitement automatique qui provoque un délai entre l'arrivée du son en entrée et sa propagation en sortie.</dd>
+ <dt>{{domxref("DynamicsCompressorNode")}}</dt>
+ <dd>Un objet <strong><code>DynamicsCompressorNode</code></strong> permet un effet de compression, qui réduit le volume des parties les plus fortes du signal de façon à éviter les effets de clipping et la distortion qui peuvent se produire lorsque des sons multiples sont diffusés simultanément.</dd>
+ <dt>{{domxref("GainNode")}}</dt>
+ <dd>Un objet <strong><code>GainNode</code></strong><strong> </strong> représente une modification du volume sonore. C'est un module de traitement audio qui provoque l'application d'un <em>gain</em> aux données récupérées en entrée avant leur propagation vers la sortie.</dd>
+ <dt>{{domxref("WaveShaperNode")}}</dt>
+ <dd>Un objet <strong><code>WaveShaperNode</code></strong> représente une distortion non linéaire. C'est un {{domxref("AudioNode")}} qui utilise une courbe pour appliquer au signal une distortion de mise en forme des ondes. En dehors de l'effet de distortion évident, il est souvent utilisé pour donner un caractère plus chaleureux au son. </dd>
+ <dt>{{domxref("PeriodicWave")}}</dt>
+ <dd>Un objet {{domxref("PeriodicWave")}} est utilisé pour définir une forme d'onde périodique qui peut être utilisée pour façonner la sortie d'un {{ domxref("OscillatorNode") }}.</dd>
+</dl>
+
+<h3 id="Définition_des_destinations_audio">Définition des destinations audio</h3>
+
+<p>Une fois que le signal audio a été traité, ces interfaces définissent sa destination.</p>
+
+<dl>
+ <dt>{{domxref("AudioDestinationNode")}}</dt>
+ <dd>Un noeud <strong><code>AudioDestinationNode</code></strong> représente la destination finale d'une source audio source dans un contexte donné — en général les enceintes du matériel.</dd>
+ <dt>{{domxref("MediaStreamAudioDestinationNode")}}</dt>
+ <dd>Un noeud <code><strong>MediaStreamAudio</strong></code><strong><code>DestinationNode</code></strong> représente une destination audio constituée d'un {{domxref("MediaStream")}} <a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> à une seule piste <code>AudioMediaStreamTrack</code>; il peut être utilisé de façon similaire à un {{domxref("MediaStream")}} obtenu avec {{ domxref("Navigator.getUserMedia") }}. C'est un {{domxref("AudioNode")}} qui se comporte comme une destination audio.</dd>
+</dl>
+
+<h3 id="Analyse_des_données_et_visualisation">Analyse des données et visualisation</h3>
+
+<dl>
+ <dt>{{domxref("AnalyserNode")}}</dt>
+ <dd>Un objet <strong><code>AnalyserNode</code></strong> fournit en temps réel des informations concernant la fréquence et le temps, afin de les analyser et les visualiser.</dd>
+</dl>
+
+<h3 id="Division_et_fusion_des_pistes_audio">Division et fusion des pistes audio</h3>
+
+<dl>
+ <dt>{{domxref("ChannelSplitterNode")}}</dt>
+ <dd>Un noeud <code><strong>ChannelSplitterNode</strong></code> prend en entrée une source audio et sépare ses différentes pistes en une série de sorties <em>mono</em>.</dd>
+ <dt>{{domxref("ChannelMergerNode")}}</dt>
+ <dd>Un noeud <code><strong>ChannelMergerNode</strong></code> réunit différentes entrées mono en une seule sortie. Chaque entrée devient une des pistes de la sortie unique.</dd>
+</dl>
+
+<h3 id="Spatialisation_audio">Spatialisation audio</h3>
+
+<dl>
+ <dt>{{domxref("AudioListener")}}</dt>
+ <dd>Un objet <strong><code>AudioListener</code></strong><strong> </strong>représente la position et l'orientation de l'unique personne écoutant la scene audio utilisée dans la spatialisation audio.</dd>
+ <dt>{{domxref("PannerNode")}}</dt>
+ <dd>Un noeud <strong><code>PannerNode</code></strong> représente le comportement d'un signal dans l'espace. C'est un module de traitement audio qui décrit sa position avec des coordonnées cartésiennes fondées sur la règle de la main droite; ses mouvements utilisent un vecteur de vélocité et sa directionnalité un cône de direction.</dd>
+</dl>
+
+<h3 id="Traitement_audio_avec_JavaScript">Traitement audio avec JavaScript</h3>
+
+<div class="note">
+<p><strong>Note</strong>: Au jour de la publication de la spécification Web Audio API le 29 août 2014, ces fonctionnalités sont dépréciées, et seront bientôt remplacées par {{ anch("Audio_Workers") }}.</p>
+</div>
+
+<dl>
+ <dt>{{domxref("ScriptProcessorNode")}}</dt>
+ <dd>Un noeud <strong><code>ScriptProcessorNode</code></strong><strong> </strong>permet de générer, traiter ou analyser du son avec JavaScript. C'est un module de traitement audio qui est lié à deux buffers, l'un en entrée, et l'autre en sortie. Un évènement implémentant {{domxref("AudioProcessingEvent")}} est envoyé à l'objet à chaque fois que le buffer d'entrée reçoit de nouvelles données, et le gestionnaire d'évènement prend fin lorsque les nouvelles données ont été communiquées au buffer de sortie. </dd>
+ <dt>{{event("audioprocess")}} (event)</dt>
+ <dd>L'évènement <code>audioprocess</code> est émis lorsque le buffer d'entrée d'un {{domxref("ScriptProcessorNode")}} de la Web Audio API est prêt à être traité.</dd>
+ <dt>{{domxref("AudioProcessingEvent")}}</dt>
+ <dd>L'objet  <code>AudioProcessingEvent </code>est envoyé aux fonctions de callback qui écoutent l'évènement <code>audioprocess.</code></dd>
+</dl>
+
+<h3 id="Traitement_audio_hors_ligne_ou_en_tâche_de_fond">Traitement audio hors ligne ou en tâche de fond</h3>
+
+<p>Il est possible de traiter et exporter un graphe audio très rapidement en tâche de fond — en l'exportant dans un {{domxref("AudioBuffer")}} plutôt que sur les enceintes du matériel — grâce aux objets suivants.</p>
+
+<dl>
+ <dt>{{domxref("OfflineAudioContext")}}</dt>
+ <dd>Un objet <strong><code>OfflineAudioContext</code></strong> est un {{domxref("AudioContext")}} qui représente un graphe de traitement audio construit à partir de noeuds audio. A la différence du <code>AudioContext </code>standard, un <code>OfflineAudioContext</code> n'exporte pas vraiment le son, mais le génère, aussi vite que possible, dans un buffer.</dd>
+ <dt>{{event("complete")}} (event)</dt>
+ <dd>Un évènement <code>complete</code> est émis lorsque le rendu d'un {{domxref("OfflineAudioContext")}} est terminé.</dd>
+ <dt>{{domxref("OfflineAudioCompletionEvent")}}</dt>
+ <dd>The <code>OfflineAudioCompletionEvent</code> est envoyé aux fonctions de callback qui écoutent l'évènement {{event("complete")}} event implements this interface.</dd>
+</dl>
+
+<h3 id="Audio_Workers" name="Audio_Workers">Audio Workers</h3>
+
+<p>Les Audio workers offrent la possibilité de traiter le son directement dans le contexte d'un <a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">web worker</a>. En date du 29 August 2014, ils ne sont encore implémentés par aucun navigateur. Lorsqu'ils seront implémentés, ils remplaceront {{domxref("ScriptProcessorNode")}}, et les autres fonctionnalités mentionnées dans la section <a href="#Audio_processing_via_JavaScript">Traitement audio avec JavaScript</a> ci-avant.</p>
+
+<dl>
+ <dt>{{domxref("AudioWorkerNode")}}</dt>
+ <dd>Un objet AudioWorkerNode représente un {{domxref("AudioNode")}} qui interagit avec le thread d'un worker pour générer, traiter, ou analyse le son directement.</dd>
+ <dt>{{domxref("AudioWorkerGlobalScope")}}</dt>
+ <dd>Un objet <code>AudioWorkerGlobalScope</code> est un objet dérivé d'un objet <code>DedicatedWorkerGlobalScope</code>. Il représente le contexte d'un worker dans lequel un script de traitement audio est lancé; il est conçu pour permettre la génération, le traitement, et l'analyse de données audio directement avec JavaScript dans le thread d'un worker.</dd>
+ <dt>{{domxref("AudioProcessEvent")}}</dt>
+ <dd>UN objet <code>Event</code> est transmis aux objets {{domxref("AudioWorkerGlobalScope")}} pour effectuer un traitement audio.</dd>
+</dl>
+
+<h2 id="Example" name="Example">Objets obsolètes</h2>
+
+<p>Les objets suivants étaient définis dans les versions précédentes de la spécification, mais sont maintenant obsolètes et ont été remplacés.</p>
+
+<dl>
+ <dt>{{domxref("JavaScriptNode")}}</dt>
+ <dd>Utilisé pour le traitement du son directement en Javascript. Cet objet est obsolète, et a été remplacé par {{domxref("ScriptProcessorNode")}}.</dd>
+ <dt>{{domxref("WaveTableNode")}}</dt>
+ <dd>Utilisé pour définir une forme d'onde périodique. Cet objet est obsolète, et a été remplacé par {{domxref("PeriodicWave")}}.</dd>
+</dl>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<p>Cet exemple montre l'utilisation d'un grand nombre de fonctions Web Audio. La démo est disponible en ligne sur <a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-o-matic</a> (voir aussi le <a href="https://github.com/mdn/voice-change-o-matic"> code source complet sur Github</a>) —c'est une démo expérimentale d'application pour modifier la voix; baissez le son de vos enceintes pour l'utiliser, au moins au début !</p>
+
+<p>Les lignes qui concernent la Web Audio API sont surlignées; si vous voulez en savoir davantage sur les différentes méthodes, consultez la documentation.</p>
+
+<pre class="brush: js; highlight:[1,2,9,10,11,12,36,37,38,39,40,41,62,63,72,114,115,121,123,124,125,147,151]">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); // définition du contexte audio
+// les navigateurs avec un moteur Webkit/blink demandent un préfixe
+
+var voixSelectionnee = document.getElementById("voice"); // case à cocher pour la sélection d'effets de voix
+var visualisationSelectionnee = document.getElementById("visual"); // case à cocher pour la sélection d'options de visualisation audio
+var silence = document.querySelector('.mute'); // bouton pour couper le son
+var renduVisuel; // requestAnimationFrame
+
+var analyseur = contexteAudio.createAnalyser();
+var distorsion = contexteAudio.createWaveShaper();
+var gainVolume = contexteAudio.createGain();
+var filtreAccordable = contexteAudio.createBiquadFilter();
+
+function creerCourbeDistorsion(taille) { // fonction qui crée une forme de courbe qui sera utilisée par le générateur de l'onde de distorsion
+  var k = typeof taille === 'number' ? taille : 50,
+    nombre_echantillons = 44100,
+    courbe = new Float32Array(nombre_echantillons),
+    angle = Math.PI / 180,
+    i = 0,
+    x;
+  for ( ; i &lt; nombre_echantillons; ++i ) {
+    x = i * 2 / nombre_echantillons - 1;
+    courbe[i] = ( 3 + k ) * x * 20 * angle / ( Math.PI + k * Math.abs(x) );
+  }
+  return courbe;
+};
+
+navigator.getUserMedia (
+  // contraintes - uniquement audio dans cet exemple
+  {
+    audio: true
+  },
+
+  // callback de succès
+  function(flux) {
+    source = contexteAudio.createMediaStreamSource(flux);
+    source.connect(analyseur);
+    analyseur.connect(distorsion);
+    distorsion.connect(filtreAccordable);
+    filtreAccordable.connect(gainVolume);
+    gainVolume.connect(contexteAudio.destination); // connecte les différents noeuds de graphes audio entre eux
+
+    genererVisualisation(flux);
+    voiceChange();
+
+  },
+
+  // callback d'erreur
+  function(err) {
+    console.log("L'erreur GUM suivante a eu lieu : " + err);
+  }
+);
+
+function genererVisualisation(flux) {
+  const LARGEUR = canvas.width;
+  const HAUTEUR = canvas.height;
+
+  var parametreVisualisation = visualisationSelectionnee.value;
+  console.log(parametreVisualisation);
+
+  if(parametreVisualisation == "sinewave") {
+    analyseur.fftSize = 2048;
+    var tailleBuffer = analyseur.frequencyBinCount; // la moitié de la valeur FFT (Transformation de Fourier rapide)
+    var tableauDonnees = new Uint8Array(tailleBuffer); // crée un tableau pour stocker les données
+
+    canvasCtx.clearRect(0, 0, LARGEUR, HAUTEUR);
+
+    function draw() {
+
+      renduVisuel = requestAnimationFrame(draw);
+
+      analyseur.getByteTimeDomainData(tableauDonnees); // récupère les données de l'onde de forme et les met dans le tableau créé
+
+      canvasCtx.fillStyle = 'rgb(200, 200, 200)'; // dessine une onde dans le canvas
+      canvasCtx.fillRect(0, 0, LARGEUR, HAUTEUR);
+
+      canvasCtx.lineWidth = 2;
+      canvasCtx.strokeStyle = 'rgb(0, 0, 0)';
+
+      canvasCtx.beginPath();
+
+      var sliceWidth = LARGEUR * 1.0 / tailleBuffer;
+      var x = 0;
+
+      for(var i = 0; i &lt; tailleBuffer; i++) {
+
+        var v = tableauDonnees[i] / 128.0;
+        var y = v * HAUTEUR/2;
+
+        if(i === 0) {
+          canvasCtx.moveTo(x, y);
+        } else {
+          canvasCtx.lineTo(x, y);
+        }
+
+        x += sliceWidth;
+      }
+
+      canvasCtx.lineTo(canvas.width, canvas.height/2);
+      canvasCtx.stroke();
+    };
+
+    draw();
+
+  } else if(parametreVisualisation == "off") {
+    canvasCtx.clearRect(0, 0, LARGEUR, HAUTEUR);
+    canvasCtx.fillStyle = "red";
+    canvasCtx.fillRect(0, 0, LARGEUR, HAUTEUR);
+  }
+
+}
+
+function modifierVoix() {
+  distorsion.curve = new Float32Array;
+  filtreAccordable.gain.value = 0; // reset les effets à chaque fois que la fonction modifierVoix est appelée
+
+  var choixVoix = voixSelectionnee.value;
+  console.log(choixVoix);
+
+  if(choixVoix == "distortion") {
+    distorsion.curve = creerCourbeDistorsion(400); // applique la distorsion au son en utilisant le noeud d'onde de forme
+  } else if(choixVoix == "biquad") {
+    filtreAccordable.type = "lowshelf";
+    filtreAccordable.frequency.value = 1000;
+    filtreAccordable.gain.value = 25; // applique le filtre lowshelf aux sons qui utilisent le filtre accordable
+  } else if(choixVoix == "off") {
+    console.log("Choix de la voix désactivé"); // ne fait rien, quand l'option off est sélectionnée
+  }
+
+}
+
+// écouteurs d'évènements pour les changements de visualisation et de voix
+
+visualisationSelectionnee.onchange = function() {
+  window.cancelAnimationFrame(renduVisuel);
+  genererVisualisation(flux);
+}
+
+voixSelectionnee.onchange = function() {
+  modifierVoix();
+}
+
+silence.onclick = muterVoix;
+
+function muterVoix() { // allumer / éteindre le son
+  if(silence.id == "") {
+    gainVolume.gain.value = 0; // gain à 0 pour éteindre le son
+    silence.id = "activated";
+    silence.innerHTML = "Unmute";
+  } else {
+    gainVolume.gain.value = 1; // gain à 1 pour allumer le son
+    silence.id = "";
+    silence.innerHTML = "Mute";
+  }
+}
+</pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</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>Support basique</td>
+   <td>14 {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>23</td>
+   <td>{{CompatNo}}</td>
+   <td>15 {{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>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>Support basique</td>
+   <td>{{CompatNo}}</td>
+   <td>28 {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>25</td>
+   <td>1.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Visualizations with Web Audio API</a></li>
+ <li><a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic example</a></li>
+ <li><a href="http://mdn.github.io/violent-theremin/">Violent Theremin example</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialisation_basics">Web audio spatialisation basics</a></li>
+ <li><a href="http://www.html5rocks.com/tutorials/webaudio/positional_audio/" title="http://www.html5rocks.com/tutorials/webaudio/positional_audio/">Mixing Positional Audio and WebGL</a></li>
+ <li><a href="http://www.html5rocks.com/tutorials/webaudio/games/" title="http://www.html5rocks.com/tutorials/webaudio/games/">Developing Game Audio with the Web Audio API</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext" title="/en-US/docs/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext">Porting webkitAudioContext code to standards based AudioContext</a></li>
+ <li><a href="https://github.com/bit101/tones">Tones</a>: a simple library for playing specific tones/notes using the Web Audio API.</li>
+ <li><a href="https://github.com/goldfire/howler.js/">howler.js</a>: a JS audio library that defaults to <a href="https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html">Web Audio API</a> and falls back to <a href="http://www.whatwg.org/specs/web-apps/current-work/#the-audio-element">HTML5 Audio</a>, as well as providing other useful features.</li>
+ <li><a href="https://github.com/mattlima/mooog">Mooog</a>: jQuery-style chaining of AudioNodes, mixer-style sends/returns, and more.</li>
+</ul>
+
+<section id="Quick_Links">
+<h3 id="Quicklinks">Quicklinks</h3>
+
+<ol>
+ <li data-default-state="open"><strong><a href="#">Guides</a></strong>
+
+  <ol>
+   <li><a href="/fr/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API">Les concepts de base de la Web Audio API</a></li>
+   <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+   <li><a href="/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Visualizations with Web Audio API</a></li>
+   <li><a href="/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialisation_basics">Web audio spatialisation basics</a></li>
+   <li><a href="/en-US/docs/Web/API/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext" title="/en-US/docs/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext">Porting webkitAudioContext code to standards based AudioContext</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><strong><a href="#">Exemples</a></strong>
+  <ol>
+   <li><a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a></li>
+   <li><a href="http://mdn.github.io/violent-theremin/">Violent Theremin</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><strong><a href="#">Objets</a></strong>
+  <ol>
+   <li>{{domxref("AnalyserNode")}}</li>
+   <li>{{domxref("AudioBuffer")}}</li>
+   <li>{{domxref("AudioBufferSourceNode")}}</li>
+   <li>{{domxref("AudioContext")}}</li>
+   <li>{{domxref("AudioDestinationNode")}}</li>
+   <li>{{domxref("AudioListener")}}</li>
+   <li>{{domxref("AudioNode")}}</li>
+   <li>{{domxref("AudioParam")}}</li>
+   <li>{{event("audioprocess")}} (event)</li>
+   <li>{{domxref("AudioProcessingEvent")}}</li>
+   <li>{{domxref("BiquadFilterNode")}}</li>
+   <li>{{domxref("ChannelMergerNode")}}</li>
+   <li>{{domxref("ChannelSplitterNode")}}</li>
+   <li>{{event("complete")}} (event)</li>
+   <li>{{domxref("ConvolverNode")}}</li>
+   <li>{{domxref("DelayNode")}}</li>
+   <li>{{domxref("DynamicsCompressorNode")}}</li>
+   <li>{{event("ended_(Web_Audio)", "ended")}} (event)</li>
+   <li>{{domxref("GainNode")}}</li>
+   <li>{{domxref("MediaElementAudioSourceNode")}}</li>
+   <li>{{domxref("MediaStreamAudioDestinationNode")}}</li>
+   <li>{{domxref("MediaStreamAudioSourceNode")}}</li>
+   <li>{{domxref("OfflineAudioCompletionEvent")}}</li>
+   <li>{{domxref("OfflineAudioContext")}}</li>
+   <li>{{domxref("OscillatorNode")}}</li>
+   <li>{{domxref("PannerNode")}}</li>
+   <li>{{domxref("PeriodicWave")}}</li>
+   <li>{{domxref("ScriptProcessorNode")}}</li>
+   <li>{{domxref("WaveShaperNode")}}</li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/fr/web/api/web_audio_api/using_web_audio_api/index.html b/files/fr/web/api/web_audio_api/using_web_audio_api/index.html
new file mode 100644
index 0000000000..f32d382574
--- /dev/null
+++ b/files/fr/web/api/web_audio_api/using_web_audio_api/index.html
@@ -0,0 +1,280 @@
+---
+title: Utiliser la Web Audio API
+slug: Web/API/Web_Audio_API/Using_Web_Audio_API
+translation_of: Web/API/Web_Audio_API/Using_Web_Audio_API
+---
+<div class="summary">
+<p><span class="seoSummary">La <a href="/en-US/docs/Web_Audio_API">Web Audio API</a> offre un méchanisme à la fois simple et puissant pour implémenter et manipuler le contenu audio dans une application web. Elle permet de manipuler mixages audio, effets, balance, etc. Cet article donne les bases pour l'utiliser, à travers quelques exemples simples..</span></p>
+</div>
+
+<div>
+<p>La Web Audio API ne vient pas remplacer l'élément <a href="/en-US/docs/Web/HTML/Element/audio">&lt;audio&gt;</a>, mais plutôt le compléter, de même que l'API Canvas 2D coexiste avec l'élément <a href="/en-US/docs/Web/HTML/Element/Img">&lt;video&gt;</a>. Si vous avez seulement besoin de contrôler la lecture d'un fichier audio, &lt;audio&gt; est probablement une meilleure solution, plus rapide. Si vous voulez procéder à un traitement audio plus complexe et à la lecture d'une source, la Web Audio API offre davantage de possibilités en termes de puissance et de contrôle.</p>
+
+<p>L'une des particularités de la Web Audio API est qu'elle n'a pas de limites au niveau de la programmation du son. Par exemple, le nombre de sons que l'on peut appeler en même temps n'est pas plafonnée. Certains processeurs sont potentiellement capables de jouer plus d'un millier de sons simultanément sans saccades.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Afin d'expliquer l'utilisation de la Web Audio API, nous avons créé un certain nombre d'exemples qui seront étoffés au fur et à mesure. N'hésitez pas à en ajouter d'autres et à suggérer des améliorations !</p>
+
+<p>Notre premier exemple est <a href="http://github.com/mdn/voice-change-o-matic">Voice-change-O-matic</a>, une application web de déformation de la voix, qui permet de choisir différents effets et modes de visualisation. Cette application est rudimentaire, mais elle permet de montrer l'utilisation de plusieurs fonctionnalités de la Web Audio API combinées ensemble  (<a href="http://mdn.github.io/voice-change-o-matic/">run the Voice-change-O-matic live</a>).</p>
+
+<p><img alt="A UI with a sound wave being shown, and options for choosing voice effects and visualizations." src="https://mdn.mozillademos.org/files/7921/voice-change-o-matic.png" style="display: block; height: 500px; margin: 0px auto; width: 640px;"></p>
+
+<p>Un autre exemple pour illustrer la Web Audio API est le <a href="http://mdn.github.io/violent-theremin/">Violent Theremin</a>, une application simple qui permet de changer le pitch et le volume d'un son en fonction du déplacement de la souris. Elle génère également des animations psychédéliques (<a href="https://github.com/mdn/violent-theremin">see Violent Theremin source code</a>).</p>
+
+<p><img alt="A page full of rainbow colours, with two buttons labeled Clear screen and mute. " src="https://mdn.mozillademos.org/files/7919/violent-theremin.png" style="display: block; height: 458px; margin: 0px auto; width: 640px;"></p>
+
+<h2 id="Concepts_de_base">Concepts de base</h2>
+
+<div class="note">
+<p><strong>Note</strong>: la plupart des extraits de code dans cette section viennent de l'exemple <a href="https://github.com/mdn/violent-theremin">Violent Theremin</a>.</p>
+</div>
+
+<p>La Web Audio API impliqe de réaliser les opérations de traitement audio dans un <strong>contexte audio</strong>, et elle a été conçue pour permettre le <strong>routage modulaire</strong>. Les opérations de traitement de base sont réalisées par des <strong> noeuds audio</strong>, qui sont reliés entre eux pour former un<strong> graphe de routage audio</strong>. Plusieurs sources — avec différentes configuration de canaux — peuvent cohabiter dans un seul contexte. Ce design modulaire offre la flexibilité nécessaire pour créer des fonctions complexes avec des effets dynamiques.</p>
+
+<p>Les noeuds audio sont reliés au niveau de leurs entrées et sorties. Ils forment une chaîne qui commence avec une ou plusieurs sources, traverse un ou plusieurs noeuds de traitement, et se termine par une destination (bien qu'il ne soit pas néessaire d'avoir une destination si l'on souhaite simplement visualiser des données audio). Un scénario simple, représentatif de la Web Audio API, pourrait ressembler à ceci :</p>
+
+<ol>
+ <li>Création d'un contexte audio</li>
+ <li>Dans ce contexte, création des sources — telles que <code>&lt;audio&gt;</code>, oscillateur, flux</li>
+ <li>Création des noeuds d'effets, tels que réverb, filtres biquad, balance,  compresseur</li>
+ <li>Choix final de la sortie audio, par exemple les enceintes du système </li>
+ <li>Connection des sources aux effets, et des effets à la sortie.</li>
+</ol>
+
+<h3 id="Création_d'un_contexte_audio">Création d'un contexte audio</h3>
+
+<p>Commencez par créer une instance de <a href="/en-US/docs/Web/API/AudioContext"><code>AudioContext</code></a> sur laquelle vous allez créer un graphe audio. L'exemple le plus simple ressemblerait à ceci:</p>
+
+<pre class="brush: js">var contexteAudio = new AudioContext();
+</pre>
+
+<div class="note">
+<p><strong>Note</strong>: On peut créer plusieurs contextes audio dans le même document, bien que ce soit probablement superflu dans la plupart des cas.</p>
+</div>
+
+<p>Il faut rajouter une version préfixée pour les navigateurs Webkit/Blink browsers, tout en conservant la version non préfixée pour Firefox (desktop/mobile/OS). Ce qui donne :</p>
+
+<pre class="brush: js">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+</pre>
+
+<div class="note">
+<p><strong>Note</strong>: <span style="line-height: 1.5;">Safari risque de planter si l'objet </span><code style="line-height: 1.5; font-style: normal;">window</code><span style="line-height: 1.5;"> n'est pas explicitement mentionné lors de la création d'un contexte audio</span></p>
+</div>
+
+<h3 id="Création_d'une_source_audio">Création d'une source audio</h3>
+
+<p>Maintenant que nous avons créé un contexte, nous allons utiliser les méthodes de ce contexte pour quasiment tout ce qui nous reste à faire. La première étape consiste à créer une source audio. Les sources peuvent être de provenance diverse :</p>
+
+<ul>
+ <li>générées en JavaScript par un noeud audio tel qu'un oscillateur. Pour créer un {{domxref("OscillatorNode")}} on utilise la méthode {{domxref("AudioContext.createOscillator")}}.</li>
+ <li>créées à partir de données PCM brutes: le contexte audio a des méthodes pour décoder lesformats supportés; voir {{ domxref("AudioContext.createBuffer()") }}, {{domxref("AudioContext.createBufferSource()")}}, et {{domxref("AudioContext.decodeAudioData()")}}.</li>
+ <li>récupérées dans des élements HTML tels que {{HTMLElement("video")}} ou {{HTMLElement("audio")}}: voir {{domxref("AudioContext.createMediaElementSource()")}}.</li>
+ <li>prises dans un <a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> {{domxref("MediaStream")}} comme une webcam ou un microphone. Voir {{ domxref("AudioContext.createMediaStreamSource()") }}.</li>
+</ul>
+
+<p>Pour notre exemple nous nous contenterons de créer un oscillateur pour générer un son simple comme source, et un noeud de gain pour contrôler le volume:</p>
+
+<pre class="brush: js">var oscillateur = contexteAudio.createOscillator();
+var noeudGain = contexteAudio.createGain();
+</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Pour jouer un fichier audio directement, il faut charger le fichier en XHR, le décoder en mémoire tampon, puis associer le tampon à une source. Voir l'exemple <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L48-L68">Voice-change-O-matic</a>.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: Scott Michaud a écrit la librairie <a href="https://github.com/ScottMichaud/AudioSampleLoader">AudioSampleLoader</a>, très pratique pour charger et décoder un ou plusieurs extraits audio. Elle peut aider à simplifier le processus de chargement XHR / mémoire tampon décrit dans la note précédente.</p>
+</div>
+
+<h3 id="Lien_entre_les_noeuds_source_et_destination">Lien entre les noeuds source et destination</h3>
+
+<p>Pour faire sortir le son dans vos enceintes, il faut relier la source et la destination. Pour cela on appelle la méthode <code>connect</code> sur le noeud source, le noeud de destination étant passé en argument. La méthode <code>connect</code> est disponible sur la plupart des types de noeuds.<code> </code></p>
+
+<p>La sortie par défaut du matériel (en général les enceintes) est accessible via {{ domxref("AudioContext.destination") }}. Pour connecter l'oscillateur, le noeud de gain et la destination, on écrirait les lignes suivantes:</p>
+
+<pre class="brush: js">oscillateur.connect(noeudGain);
+noeudGain.connect(contexteAudio.destination);
+</pre>
+
+<p>On peut connecter autant de noeuds qu'on le souhaite (cf. <a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a>). Par exemple:</p>
+
+<pre class="brush: js">source = contexteAudio.createMediaStreamSource(stream);
+source.connect(analyser);
+analyser.connect(distortion);
+distortion.connect(biquadFilter);
+biquadFilter.connect(convolver);
+convolver.connect(noeudGain);
+noeudGain.connect(contexteAudio.destination);
+</pre>
+
+<p>Ce code créerait le graphe audio suivant :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7949/voice-change-o-matic-graph.png" style="display: block; height: 563px; margin: 0px auto; width: 232px;">Il est possible de connecter plusieurs noeuds à un seul noeud, par exemple pour mixer plusieurs sources ensemble, et les passer dans un seul noeud d'effet, tel qu'un noeud de gain.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Depuis Firefox 32, les outils de développement intégrés incluent un <a href="/en-US/docs/Tools/Web_Audio_Editor">éditeur audio</a>,  très utile pour débugger les graphes audio.</p>
+</div>
+
+<h3 id="Lecture_du_son_et_définition_du_pitch">Lecture du son et définition du pitch</h3>
+
+<p>Maintenant que le graphe audio est en place, nous pouvons ajuster certains aspects du son en définissant la valeur de certaines propriétés ou en utilsant ses méthodes. L'exemple suivant spécifie un pitch en hertz pour un oscillateur, lui assigne un type, et demande à l'oscillateur de jouer le son.</p>
+
+<pre class="brush: js">oscillateur.type = 'sine'; // onde sinusoïdale — les autres valeurs possible sont : 'square', 'sawtooth', 'triangle' et 'custom'
+oscillateur.frequency.value = 2500; // valeur en hertz
+oscillateur.start();
+</pre>
+
+<p>Le code suivant, qui vient de l'exemple <a href="http://mdn.github.io/violent-theremin/">Violent Theremin</a>, spécifie une valeur maximum pour le gain, et une valeur pour la fréquence:</p>
+
+<pre class="brush: js">var largeur = window.innerWidth;
+var hauteur = window.innerHeight;
+
+var frequenceMax = 6000;
+var volumeMax = 1;
+
+var frequenceInitiale = 3000;
+var volumeInitial = 0.5;
+
+// paramètres de l'oscillateur
+
+oscillateur.type = 'sine'; // onde sinusoïdale — les autres valeurs possible sont : 'square', 'sawtooth', 'triangle' et 'custom'
+oscillateur.frequency.value = frequenceInitiale; // valeur en hertz
+oscillateur.start();
+
+noeudGain.gain.value = volumeInitial;
+</pre>
+
+<p>On peut aussi réassigner les valeurs de fréquence et de pitch à chaque mouvement de la souris, en utilisant la position pour calculer un pourcentage des valeurs maximum de fréquence et de gain :</p>
+
+<pre class="brush: js">// coordonnées de la souris
+
+var positionX;
+var positionY;
+
+// récupère les nouvelles coordonnées de la souris quand elle bouge
+// puis assigne les nouvelles valeurs de gain et de pitch
+
+document.onmousemove = updatePage;
+
+function updatePage(e) {
+    positionX = (window.Event) ? e.pageX : e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
+    positionY = (window.Event) ? e.pageY : e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
+
+    oscillateur.frequency.value = (positionX/largeur) * frequenceMax;
+    noeudGain.gain.value = (positionY/hauteur) * volumeMax;
+
+    canvasDraw();
+}
+</pre>
+
+<h3 id="Simple_visualisation_avec_canvas">Simple visualisation avec canvas</h3>
+
+<p>On appelle une fonction <code>canvasDraw()</code> à chaque mouvement de la souris. Elle dessine une grappe de cercles à l'endroit où se trouve la souris, leur taille et couleur étant basées sur les valeurs de fréquence et de gain.</p>
+
+<pre class="brush: js">function aleatoire(number1, number2) {
+  return number1 + (Math.floor(Math.random() * (number2 - number1)) + 1);
+}
+
+var canvas = document.querySelector('.canvas');
+canvas.width = largeur;
+canvas.height = hauteur;
+
+var contexteCanvas = canvas.getContext('2d');
+
+function canvasDraw() {
+  rX = positionX;
+  rY = positionY;
+  rC = Math.floor((noeudGain.gain.value / volumeMax) * 30);
+
+  canvasCtx.globalAlpha = 0.2;
+
+  for(i=1;i&lt;=15;i=i+2) {
+    contexteCanvas.beginPath();
+    var chaineStyle = 'rgb(' + 100 + (i * 10) + ',' + Math.floor((noeudGain.gain.value / volumeMax) * 255);
+    chaineStyle += ',' + Math.floor((oscillateur.frequency.value / frequenceMax) * 255) + ')';
+    contexteCanvas.fillStyle = chaineStyle;
+    contexteCanvas.arc(rX + aleatoire(0, 50), rY + aleatoire(0, 50), rC / 2 + i, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);
+    contexteCanvas.fill();
+    contexteCanvas.closePath();
+  }
+}</pre>
+
+<h3 id="Couper_le_son_du_theremin">Couper le son du theremin</h3>
+
+<p>Quand on appuie sur le bouton pour couper le son, la fonction ci-dessous est appelée, qui déconnecte le noeud de gain du noeud de destination, cassant ainsi le graphe de façon à ce qu'aucun son ne soit produit. Appuyer de nouveau sur le bouton a l'effet inverse.</p>
+
+<pre class="brush: js">var coupeSon = document.querySelector('.mute');
+
+coupeSon.onclick = function() {
+  if(coupeSon.id == "") {
+    noeudGain.disconnect(contexteAudio.destination);
+    coupeSon.id = "activated";
+    coupeSon.innerHTML = "Unmute";
+  } else {
+    noeudGain.connect(contexteAudio.destination);
+    coupeSon.id = "";
+    coupeSon.innerHTML = "Mute";
+  }
+}
+</pre>
+
+<h2 id="Autres_options_des_noeuds">Autres options des noeuds</h2>
+
+<p>On peut créer un grand nombre d'autres noeuds avec la Web Audio API. De façon générale, ils fonctionnent de façon très similaire à ceux que nous venons de voir: on crée un noeud, le connecte avec d'autres noeuds, et on manipule ensuite ses propriétés et méthodes pour agir sur la source.</p>
+
+<p>Ce document passe en revue quelques-uns des outils et effets disponibles; vous trouverez davantage de détails sur les pages de référence de la {{ domxref("Web_Audio_API") }}.</p>
+
+<h3 id="Noeuds_modulateurs_d'onde">Noeuds modulateurs d'onde</h3>
+
+<p>On peut créer un noeud modulatur d'onde avec la méthode {{ domxref("AudioContext.createWaveShaper") }} :</p>
+
+<pre class="brush: js">var distortion = contexteAudio.createWaveShaper();
+</pre>
+
+<p>On associe ensuite à cet objet une forme d'onde définie mathématiquement, qui est appliquée à l'onde de base pour créer un effet de distortion. Ecrire son propre algorithme n'est pas si simple, et pour commencer le mieux est encore d'en chercher un sur le Web. Par exemple, nous avons trouvé celui-ci sur <a href="http://stackoverflow.com/questions/22312841/waveshaper-node-in-webaudio-how-to-emulate-distortion">Stack Overflow</a>:</p>
+
+<pre class="brush: js">function genererCourbeDistortion(amount) {
+  var k = typeof amount === 'number' ? amount : 50,
+    n_samples = 44100,
+    curve = new Float32Array(n_samples),
+    deg = Math.PI / 180,
+    i = 0,
+    x;
+  for ( ; i &lt; n_samples; ++i ) {
+    x = i * 2 / n_samples - 1;
+    curve[i] = ( 3 + k ) * x * 20 * deg / ( Math.PI + k * Math.abs(x) );
+  }
+  return curve;
+};
+</pre>
+
+<p>L'exemple suivant, qui vient de <a href="https://github.com/mdn/voice-change-o-matic">Voice-change-O-matic</a>, connecte un noeud de  <code>distortion</code> à un graphe audio, puis applique l'algorithme de forme d'onde précédent au noeud de distortion :</p>
+
+<pre class="brush: js">source.connect(analyser);
+analyser.connect(distortion);
+distortion.connect(biquadFilter);
+
+...
+
+distortion.curve = genererCourbeDistortion(400);
+</pre>
+
+<h3 id="Filtre_biquad">Filtre biquad</h3>
+
+<p>Les filtres biquad ont de nombreuses options. Nous montrons ici comment créer un filtre biquad avec la méthode {{domxref("AudioContext.createBiquadFilter")}}.</p>
+
+<pre class="brush: js">var filtreBiquad = contexteAudio.createBiquadFilter();
+</pre>
+
+<p>Le filtre utilisé dans la démo Voice-change-o-matic est un filtre lowshelf, qui amplifie le son au niveau des basses. Ici on augmente de 25 décibels toutes les fréquences en dessous de 1000.</p>
+
+<pre class="brush: js">filtreBiquad.type = "lowshelf";
+filtreBiquad.frequency.value = 1000;
+filtreBiquad.gain.value = 25;
+</pre>
+
+<h2 id="Autres_usages_de_la_Web_Audio_API">Autres usages de la Web Audio API</h2>
+
+<p>La Web Audio API peut avoir bien d'autres applications que la visualisation ou la spatialisation audio (comme gérer la balance d'un son). Nous détaillerons d'autres options dans des articles séparés.</p>
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
new file mode 100644
index 0000000000..e8891925b5
--- /dev/null
+++ b/files/fr/web/api/web_audio_api/visualizations_with_web_audio_api/index.html
@@ -0,0 +1,184 @@
+---
+title: Visualisations avec la Web Audio API
+slug: Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API
+translation_of: Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API
+---
+<div class="summary">
+<p>L'une des fonctionnalités les plus intéressantes de la Web Audio API est la possibilité d'extraire de la source audio la fréquence, la forme d'onde et d'autres données, qui permettent de créer des visualisations. Cet article explique comment, et fournit quelques exemples basiques.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: Vous pouvez trouver des exemples de tous les extraits de the code dans notre démo <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a>.</p>
+</div>
+
+<h2 id="Concepts_de_base">Concepts de base</h2>
+
+<p>Pour extraire les données d'une source audio, il faut un {{ domxref("AnalyserNode") }}, que l'on peut créer à l'aide de la méthode {{ domxref("AudioContext.createAnalyser()") }}, par exemple:</p>
+
+<pre class="brush: js">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+var analyseur = contexteAudio.createAnalyser();</pre>
+
+<p>Ce noeud est ensuite connecté à la source audio :</p>
+
+<pre class="brush: js">source = contexteAudio.createMediaStreamSource(stream);
+source.connect(analyseur);
+analyseur.connect(distortion);
+// etc.</pre>
+
+<div class="note">
+<p><strong>Note</strong>: il n'est pas nécessaire de connecter la sortie de l'analyseur à un noeud pour qu'il fonctionne, il suffit que l'entrée soit connectée à la source, directement ou via un autre noeud.</p>
+</div>
+
+<p>L'analyseur va alors capturer les données audio en usant une Transformation de Fourier Rapide (fft) à une certaine fréquence, en fonction de ce qui est spécifié dans la propriété {{ domxref("AnalyserNode.fftSize") }} (la valeur par défaut est 2048).</p>
+
+<div class="note">
+<p><strong>Note</strong>: Vous pouvez aussi spécifier des valeurs de puissance minimum et maximum pour la plage de mise à l'échelle fft, en utilisant {{ domxref("AnalyserNode.minDecibels") }} et {{ domxref("AnalyserNode.maxDecibels") }}, et plusieurs valeurs de transition en utilisant {{ domxref("AnalyserNode.smoothingTimeConstant") }}.</p>
+</div>
+
+<p>Pour capturer des données, il faut utiliser les méthodes {{ domxref("AnalyserNode.getFloatFrequencyData()") }} et {{ domxref("AnalyserNode.getByteFrequencyData()") }} pour la fréquence, et {{ domxref("AnalyserNode.getByteTimeDomainData()") }} et {{ domxref("AnalyserNode.getFloatTimeDomainData()") }} pour la forme d'onde.</p>
+
+<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>
+
+<pre class="brush: js">analyseur.fftSize = 2048;
+var tailleMemoireTampon = analyseur.frequencyBinCount;
+var tableauDonnees = new Uint8Array(tailleMemoireTampon);</pre>
+
+<p>Pour récupérer les données et les copier dans notre tableau, nous appelons ensuite la méthode de notre choix, en passant le tableau comme argument. Par exemple :</p>
+
+<pre class="brush: js">analyseur.getByteTimeDomainData(tableauDonnees);</pre>
+
+<p>Nous avons maintenant les données audio qui correspondent à ce laps de temps capturées dans notre tableau, et pouvons procéder à la visualisation, par exemple en les dessinant dans un élément HTML5 {{ htmlelement("canvas") }}.</p>
+
+<p>Regardons quelques exemples précis.</p>
+
+<h2 id="Création_d'une_forme_d'onde_oscilloscope">Création d'une forme d'onde / oscilloscope</h2>
+
+<p>Pour visualiser un oscilloscope (chapeau à <a href="http://soledadpenades.com/">Soledad Penadés</a> pour le code original sur <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L123-L167">Voice-change-O-matic</a>), nous commençons par suivre la procédure standard décrite dans le paragraphe précédent pour mettre en place le tampon :</p>
+
+<pre class="brush: js">analyseur.fftSize = 2048;
+var tailleMemoireTampon = analyseur.frequencyBinCount;
+var tableauDonnees = new Uint8Array(tailleMemoireTampon);</pre>
+
+<p>Ensuite nous effaçons ce qui est dessiné sur le canvas , avant le nouvel affichage :</p>
+
+<pre class="brush: js">contexteCanvas.clearRect(0, 0, LARGEUR, HAUTEUR);</pre>
+
+<p>Puis nous définissons la fonction <code>dessiner()</code> :</p>
+
+<pre class="brush: js">function <code>dessiner</code>() {</pre>
+
+<p>Dans cette fonction, nous utilisons <code>requestAnimationFrame()</code> pour faire boucler la fonction une fois qu'elle a été appelée :</p>
+
+<pre class="brush: js">      dessin = requestAnimationFrame(<code>dessiner</code>);</pre>
+
+<p>Ensuite, nous récupérons les données et les passons dans notre tableau :</p>
+
+<pre class="brush: js">      analyseur.getByteTimeDomainData(tableauDonnees);</pre>
+
+<p>Nous remplissons le canvas avec une couleur de fond :</p>
+
+<pre class="brush: js">      contexteCanvas.fillStyle = 'rgb(200, 200, 200)';
+      contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR);</pre>
+
+<p>Nous définissons l'épaisseur et la couleur du trait pour la forme d'onde que nous allons dessiner, et commençons le tracé :</p>
+
+<pre class="brush: js">      contexteCanvas.lineWidth = 2;
+      contexteCanvas.strokeStyle = 'rgb(0, 0, 0)';
+
+      contexteCanvas.beginPath();</pre>
+
+<p>Pour déterminer la largeur de chacun des segments qui composent la ligne, nous divisons la largeur du canvas par la taille du tableau de données (laquelle est égale à FrequencyBinCount, comme nous l'avons dit plus haut), puis nous définissons une variable x pour stocker la position à laquelle il faut se déplacer pour chaque segment.</p>
+
+<pre class="brush: js">      var largeurSegment = LARGEUR * 1.0 / tailleMemoireTampon;
+      var x = 0;</pre>
+
+<p>Nous parcourons une boucle, qui définit la position du segment de l'onde pour chaque valeur du tableau: la hauteur (y) est basée sur cette valeur, tandis que la position en x correspond à une largeur de segment supplémentaire à chaque itération :</p>
+
+<pre class="brush: js">      for(var i = 0; i &lt; tailleMemoireTampon; i++) {
+
+        var v = tableauDonnees[i] / 128.0;
+        var y = v * HAUTEUR/2;
+
+        if(i === 0) {
+          contexteCanvas.moveTo(x, y);
+        } else {
+          contexteCanvas.lineTo(x, y);
+        }
+
+        x += largeurSegment;
+      }</pre>
+
+<p>Finally, quand le tracé de la ligne a atteint le bord droit du canvas, nous l'affichons:</p>
+
+<pre class="brush: js">      contexteCanvas.lineTo(canvas.width, canvas.height/2);
+      contexteCanvas.stroke();
+    };</pre>
+
+<p>Nous pouvons maintenant appeler la fonction <code>draw()</code> que nous venons de définir pour lancer le processus:</p>
+
+<pre class="brush: js">    <code>dessiner</code>();</pre>
+
+<p>Ce qui nous donne un affichage de forme d'onde, actualisé plusieurs fois par seconde :</p>
+
+<p><img alt="a black oscilloscope line, showing the waveform of an audio signal" src="https://mdn.mozillademos.org/files/7977/wave.png" style="display: block; height: 96px; margin: 0px auto; width: 640px;"></p>
+
+<h2 id="Création_d'un_graphique_à_barres_représentant_la_fréquence">Création d'un graphique à barres représentant la fréquence</h2>
+
+<p>Un autre exemple de visualisation assez simple à créer est le graphique à barres dans le style de Winamp. Il y en a un dans la démo Voice-change-O-matic; regardons comment il est fait.</p>
+
+<p>Tout d'abord, nous mettons de nouveau en place notre analyseur et notre tableau de données, et nous effaçons le contenu du canvas avec <code>clearRect()</code>. La seule différence est que la valeur de la propriété fftSize est beaucoup plus petite, de façon à ce que chaque barre soit assez grosse pour ressembler à une barre et non à un fil.</p>
+
+<pre class="brush: js">    analyseur.fftSize = 256;
+    var tailleMemoireTampon = analyseur.frequencyBinCount;
+    console.log(tailleMemoireTampon);
+    var tableauDonnees = new Uint8Array(tailleMemoireTampon);
+
+    canvasCtx.clearRect(0, 0, LARGEUR, HAUTEUR);</pre>
+
+<p>Ensuite, nous passons à la fonction <code>dessiner()</code>, là encore avec une boucle <code>requestAnimationFrame()</code> qui efface l'affichage et le met à jour.</p>
+
+<pre class="brush: js">    function <code>dessiner</code>() {
+      dessin = requestAnimationFrame(<code>dessiner</code>);
+
+      analyseur.getByteFrequencyData(tableauDonnees);
+
+      contexteCanvas.fillStyle = 'rgb(0, 0, 0)';
+      contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR);</pre>
+
+<p>A présent nous calculons la largeur d'une barre, à savoir la largeur du canvas divisée par le nombre de barres (par la taille du buffer). Et nous multiplions cette valeur par 2.5, en prévision du fait que la plupart des fréquences ne contiendront pas de son, car les sons que nous entendons se situent dans un intervalle de fréquence plutôt bas. Nous ne voulons pas afficher des barres vides, nous ne gardons donc que celles qui ont une hauteur suffisante.</p>
+
+<p>Nous déclarons une variable <code>hauteurBarre</code>, ainsi qu'une variable <code>x</code> pour mémoriser la posiiton à laquelle il faudra dessiner la barre.</p>
+
+<pre class="brush: js">      var largeurBarre = (LARGEUR / tailleMemoireTampon) * 2.5;
+      var hauteurBarre;
+      var x = 0;</pre>
+
+<p>Nous créons maintenant une boucle et itérons sur chaque valeur de <code>tableauDonnees</code> : <code>hauteurBarre</code> correspond à la valeur du tableau, la couleur de fond est aussi basée sur cette valeur (plus elle est grande plus la barre est lumineuse), et la barre est placée à <code>x</code> pixels du bord gauche du canvas, sa largeur est <code>largeurBarre</code> et sa hauteur est <code>hauteurBarre/2</code> (nous avons finalement décidé de diviser cette valeur par deux pour que les barres rentrent mieux dans le canvas).</p>
+
+<p>La position verticale de la barre est calculée comme tel : <code>HAUTEUR-hauteurBarre/2</code>, parce que nous voulons que les barres s'alignent en bas du canvas, et non pas en haut (auquel cas nous aurions positionné la barre à 0).</p>
+
+<pre class="brush: js">      for(var i = 0; i &lt; tailleMemoireTampon; i++) {
+        hauteurBarre = tableauDonnees[i]/2;
+
+        contexteCanvas.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)';
+        contexteCanvas.fillRect(x,HAUTEUR-hauteurBarre/2,largeurBarre,hauteurBarre);
+
+        x += largeurBarre + 1;
+      }
+    };</pre>
+
+<p>Là encore, nous invoquons la fonction <code>dessiner</code>() pour lancer le processus.</p>
+
+<pre class="brush: js">    <code>dessiner</code>();</pre>
+
+<p>Ce code donne le résultat suivant:</p>
+
+<p><img alt="a series of red bars in a bar graph, showing intensity of different frequencies in an audio signal" src="https://mdn.mozillademos.org/files/7975/bar-graph.png" style="height: 157px; width: 1260px;"></p>
+
+<div class="note">
+<p><strong>Note</strong>: Les examples de cet article montrent l'utilisation de {{ domxref("AnalyserNode.getByteFrequencyData()") }} et {{ domxref("AnalyserNode.getByteTimeDomainData()") }}. Pour des exemples montrant {{ domxref("AnalyserNode.getFloatFrequencyData()") }} et {{ domxref("AnalyserNode.getFloatTimeDomainData()") }}, voir notre démo <a href="http://mdn.github.io/voice-change-o-matic-float-data/">Voice-change-O-matic-float-data</a> (et son <a href="https://github.com/mdn/voice-change-o-matic-float-data">code source</a>) — elle est identique à la <a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic </a>originale, à ceci près qu'elle utilise des données à virgule flottante, au lieu de données non signées.</p>
+</div>
+
+<p> </p>
diff --git a/files/fr/web/api/web_audio_api/web_audio_spatialization_basics/index.html b/files/fr/web/api/web_audio_api/web_audio_spatialization_basics/index.html
new file mode 100644
index 0000000000..3c90e6ecc5
--- /dev/null
+++ b/files/fr/web/api/web_audio_api/web_audio_spatialization_basics/index.html
@@ -0,0 +1,273 @@
+---
+title: Web audio spatialization basics
+slug: Web/API/Web_Audio_API/Web_audio_spatialization_basics
+translation_of: Web/API/Web_Audio_API/Web_audio_spatialization_basics
+---
+<div class="summary">
+<p><span class="seoSummary">En plus de sa grande variété de fonctionnalités et d'options, la Web Audio API permet aussi d'émuler la différence dans l'écoute d'un son lorsqu'un auditeur se déplace par rapport à une source, par exemple un panoramique lorsqu'il se déplace de gauche à droite de la source. On parle alors de spatialisation. Cet article expose les notions de base pour implémenter ce type de système.</span></p>
+</div>
+
+<p>Le cas d'utilisation le plus simple est la simulation des altérations d'un son de façon réaliste pour imaginer comment une source se comportera pour un personnage qui se déplace dans un environnement 3D.</p>
+
+<h2 id="Concepts_de_base">Concepts de base</h2>
+
+<p>Créer une spatialisation audio comporte deux principaux aspects :</p>
+
+<ol>
+ <li>L'objet {{ domxref("AudioListener") }} représente la position dans l'espace 3D d'une personne qui écoute la source audio; on y accède avec la propriété {{ domxref("AudioContext.listener") }}. On peut paramétrer la position et l'orientation de l'auditeur, entre autres.</li>
+ <li>L'objet {{ domxref("PannerNode") }} représente la position dans l'espace 3D d'une source audio; on le crée avec la méthode {{ domxref("AudioContext.createPanner()") }}. On peut paramétrer un certain nombre d'options comme la position, l'orientation, la vitesse, et l'angle s'un cône qui indique dans quelle direction le son peut être entendu (s'il n'est pas omnidirectionnel).</li>
+</ol>
+
+<p>Vous devez créer et paramétrer ces deux objects, et le navigateur fait le reste er génère le rendu audio. Le diagramme ci-dessous montre les différentes choses qui peuvent être contrôlés pour un {{ domxref("PannerNode") }}.</p>
+
+<p><img alt="The PannerNode brings a spatial position and velocity and a directionality for a given signal." src="https://mdn.mozillademos.org/files/5087/WebAudioPannerNode.png" style="display: block; height: 228px; margin: 0px auto; width: 568px;"></p>
+
+<p>Dans cet article nous allons nous concentrer sur la position de l'auditeur et du panoramique, tous deux paramétrés à l'aide de la méthode <code>setPosition(). </code>Celle-co accepte trois valeurs qui correspondent à X, Y, et Z dans un système de coordonnées cartésien.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Trouver les bonnes valeurs pour que le cas d'utilisation fonctionne bien et semble réaliste n'est pas toujours évident et peur prendre du temps, et il faut souvent continuer à modifier les valeurs par la suite. Nous discuterons ceci plus en détail en parcourant le code qui suit.</p>
+</div>
+
+<p>Les autres options  disponibles, que nous ne traiterons pas ici, sont :</p>
+
+<ul>
+ <li><code>setOrientation()</code>: disponible à la fois pour l'auditeur et le panoramique for both the listener and panner, cette méthode paramètre l'orientation. Elle prend six valeurs: les trois premières représentent un vecteur frontal dans l'espace 3D  (imaginez une personne et la direction dans laquelle pointe son nez) and les trois autre un vecteur de direction verticale  dans l'espace 3D space (imaginez la même personne et la direction vers laquelle pointe le haut de sa tête)</li>
+ <li><code>setVelocity()</code>: disponible uniquement pour le panoramique; permet de paramétrer la vitesse à laquelle une source audio se déplace, à l'aide d'un vecteur de vitesse dans l'espace 3D (valeurs X, Y, et Z). When set, the browser will apply a doppler shift effect.</li>
+ <li><code>coneInnerAngle</code>, <code>coneOuterAngle</code>, and <code>coneOuterGain</code>: Available for the panner only, these allow you to set an angle inside/outside of which the volume will be reduced by the specified gain value. This is done to specify directional audio sources, but the default is 360/360/0, respectively, meaning that by default you get an omnidirectional sound source.</li>
+</ul>
+
+<h2 id="A_simple_demo_Room_of_metal">A simple demo: Room of metal</h2>
+
+<p>In our demo, you can move left and right past a 2.5D stereo that can be made to play a groovy tune, and you can also move towards the stereo. As you move left and right, the tune will pan to emulate how the tune will sound as you change your position proportional to the sound source. When you zoom in and out, the sound will get louder and quieter to suit.<br>
+ <br>
+ <img alt="a minimal UI with a portable stereo in the center of it, and buttons marked play, stop, left arrow, right arrow, zoom in and zoom out. It says Room of Metal at the top." src="https://mdn.mozillademos.org/files/8141/room-of-metal.png" style="display: block; height: 298px; margin: 0px auto; width: 640px;"></p>
+
+<div class="note">
+<p><strong>Note</strong>: You can see this example <a href="https://mdn.github.io/webaudio-examples/panner-node/">running live</a>, and <a href="https://github.com/mdn/panner-node">view the source code</a>.</p>
+</div>
+
+<p>Let's walk through the code and see how this was actually done.</p>
+
+<h3 id="Defining_basic_variables">Defining basic variables</h3>
+
+<p>First we define a new audio context, panner, listener, and source:</p>
+
+<pre class="brush: js">var AudioContext = window.AudioContext || window.webkitAudioContext;
+var audioCtx = new AudioContext();
+
+var panner = audioCtx.createPanner();
+var listener = audioCtx.listener;
+var source;</pre>
+
+<p>Next we grab the objects on the page we are using for our demo. First the <code>play</code> and <code>stop</code> buttons to control the audio, then the <code>boomBox</code>, which is just the graphic of the stereo that we are moving around. After that, we grab a reference to two paragraphs that are used to output the position of the <code>listener</code> and <code>panner</code>, for debugging purposes.</p>
+
+<pre class="brush: js">var play = document.querySelector('.play');
+var stop = document.querySelector('.stop');
+
+var boomBox = document.querySelector('.boom-box');
+
+var listenerData = document.querySelector('.listener-data');
+var pannerData = document.querySelector('.panner-data');</pre>
+
+<h3 id="Working_out_listener_and_panner_positions">Working out listener and panner positions</h3>
+
+<p>Next comes a little bit of slightly fiddly maths. We want to make the <code>boomBox</code>, <code>listener</code>, and <code>panner</code> appear in the center of the screen initially, so we work out the width and height of the viewport, and divide both by two to get our X and Y values for those things. The <code>zPos</code> is only used on the panner, and is updated as the zoom controls are used (see later on); the initial value of 295 was decided on fairly arbitrarily — it sounded good. As long as you set the position of the panner appropriately in relation to the listener position, you will be ok.</p>
+
+<p>Next for this section, we set a <code>leftBound</code> and <code>rightBound</code>, which is the furthest we want our stereo graph to travel left and right. For the layout, we are using <a href="/en-US/docs/Web/Guide/CSS/Flexible_boxes">Flexbox</a> to initially place the <code>boomBox</code> right in the center of the viewport, after which we then use iterative transforms and {{domxref("window.requestAnimationFrame()")}} to apply the <code>boomBox</code> movement. Therefore the "0" position is in the center of the viewport so the rightmost position is that position plus half the viewport, but minus 50 (pixels) so the <code>boomBox</code> can't shoot all the way off the right of the screen, and the leftmost position is that position minus half the viewport, but plus 50 (pixels), so the <code>boomBox</code> can't shoot all the way off the left of the screen.</p>
+
+<p>The last part of this code is the <code>xIterator</code> — we set this to a 150th of the screen width, and then move the <code>boomBox</code> left and right by this amount when the left and right controls are pressed. We use this rather than a constant so that the app is a little more responsive.</p>
+
+<pre class="brush: js">var WIDTH = window.innerWidth;
+var HEIGHT = window.innerHeight;
+
+var xPos = WIDTH/2;
+var yPos = HEIGHT/2;
+var zPos = 295;
+
+leftBound = (-xPos) + 50;
+rightBound = xPos - 50;
+
+xIterator = WIDTH/150;</pre>
+
+<p>Next we set the position of the <code>listener</code> and output the coordinates to the <code>listenerData</code> paragraph. It is always going to be in the same place, in a good position relative to the panner.</p>
+
+<pre class="brush: js">listener.setPosition(xPos,yPos,300);
+listenerData.innerHTML = 'Listener data: X ' + xPos + ' Y ' + yPos + ' Z ' + 300;</pre>
+
+<p>In the <code>positionPanner()</code> function, we set the position of the panner, and output the coordinates to the <code>pannerData</code> paragraph. This function is called with each animation frame as the <code>boomBox</code> is moved, so the panner position updates accordingly:</p>
+
+<pre class="brush: js">function positionPanner() {
+  panner.setPosition(xPos,yPos,zPos);
+  pannerData.innerHTML = 'Panner data: X ' + xPos + ' Y ' + yPos + ' Z ' + zPos;
+}</pre>
+
+<h3 id="Loading_and_playing_our_music">Loading and playing our music</h3>
+
+<p>Next we use XHR to load an audio track, and <code>decodeAudioData()</code> to decode it and stick it in a buffer. Then we put the buffer into an {{domxref("AudioBufferSourceNode") }}:</p>
+
+<pre class="brush: js">function getData() {
+  source = audioCtx.createBufferSource();
+  request = new XMLHttpRequest();
+
+  request.open('GET', 'viper.ogg', true);
+
+  request.responseType = 'arraybuffer';
+
+
+  request.onload = function() {
+    var audioData = request.response;
+
+    audioCtx.decodeAudioData(audioData, function(buffer) {
+        myBuffer = buffer;
+        source.buffer = myBuffer;
+
+        source.connect(panner);
+        panner.connect(audioCtx.destination);
+        positionPanner();
+        source.loop = true;
+      },
+
+      function(e){"Error with decoding audio data" + e.err});
+
+  }
+
+  request.send();
+}</pre>
+
+<p>The next stage is to wire up the buttons to stop and play the audio. The pulse wrapper is an extra wrapper {{ htmlelement("div") }} wrapped around the <code>boomBox</code>. We apply the pulsating (<code>scaleY</code>) animation to this element when the play button is clicked, not the <code>boomBox</code> itself, because the <code>boomBox</code> already has animations applied to it throughout the course of the app's running.</p>
+
+<pre class="brush: js">var pulseWrapper = document.querySelector('.pulse-wrapper');
+
+play.onclick = function() {
+  getData();
+  source.start(0);
+  play.setAttribute('disabled', 'disabled');
+  pulseWrapper.classList.add('pulsate');
+}
+
+stop.onclick = function() {
+  source.stop(0);
+  play.removeAttribute('disabled');
+  pulseWrapper.classList.remove('pulsate');
+}</pre>
+
+<h3 id="Moving_the_boom_box_and_the_panner">Moving the boom box and the panner</h3>
+
+<p>The next section of code grabs references to the left, right, zoom in, and zoom out buttons, and defines initial X, Y, and scale amounts for the <code>boomBox</code> to be positioned by when the transforms first start to be applied.</p>
+
+<pre class="brush: js">var leftButton = document.querySelector('.left');
+var rightButton = document.querySelector('.right');
+var zoomInButton = document.querySelector('.zoom-in');
+var zoomOutButton = document.querySelector('.zoom-out');
+
+var boomX = 0;
+var boomY = 0;
+var boomZoom = 0.25;</pre>
+
+<p>Now we get to the four functions that control the left, right, zoom in, and zoom out functionality: <code>moveRight()</code>, <code>moveLeft()</code>, <code>zoomIn()</code>, and <code>zoomOut()</code>. Each is a little different, but works in a similar way:</p>
+
+<ol>
+ <li>The <code>boomX</code> or <code>boomZoom</code> variables are updated in order to change the <code>boomBox</code>'s position on the screen.</li>
+ <li>The <code>xPos</code> or <code>zPos</code> variables are updated in order to change the {{domxref("PannerNode") }}'s position in 3D space. The changes are quite small, but these are the values we found to work.</li>
+ <li>A check is done to see if the upper bounds of movement have been reached (a <code>boomX</code> equal or less than <code>leftBound</code> or greater than <code>rightBound</code>, or a <code>boomZoom</code> greater than 4 or equal or less than 0.25.) If so, the values are updated to force the <code>boomBox</code> to stay in certain constraints, and to force the <code>xPos</code> and <code>zPos</code> variables to also stay within certain constrants. These are, respectively, 5 greater or less than <code>WIDTH/2</code>, and a <code>zPos</code> between 295 and 299.9. These are the values we found produced a relatively realistic sounding panning and volume adjustment as the <code>boomBox</code> was moved around.</li>
+ <li><code>boomBox</code> is transformed (translated and scaled) by the new values of <code>boomX</code>, <code>boomY</code>, and <code>boomZoom</code> to move it around the screen.</li>
+ <li>The <code>positionPanner()</code> function is run to update the position of the panner.</li>
+ <li>A {{domxref("window.requestAnimationFrame") }} instance is called to keep running the function for as long as the mouse button is pressed down.</li>
+ <li>The <code>requestAnimationFrame</code> ID is returned out of the function so that it can be cancelled when the mouse button is released.</li>
+</ol>
+
+<pre class="brush: js">function moveRight() {
+  boomX += -xIterator;
+  xPos += -0.066;
+
+  if(boomX &lt;= leftBound) {
+    boomX = leftBound;
+    xPos = (WIDTH/2) - 5;
+  }
+
+  boomBox.style.webkitTransform = "translate(" + boomX + "px , " + boomY + "px) scale(" + boomZoom + ")";
+  boomBox.style.transform = "translate(" + boomX + "px , " + boomY + "px) scale(" + boomZoom + ")";
+  positionPanner();
+  rightLoop = requestAnimationFrame(moveRight);
+  return rightLoop;
+}
+
+function moveLeft() {
+  boomX += xIterator;
+  xPos += 0.066;
+
+  if(boomX &gt; rightBound) {
+    boomX = rightBound;
+    xPos = (WIDTH/2) + 5;
+  }
+
+  positionPanner();
+  boomBox.style.webkitTransform = "translate(" + boomX + "px , " + boomY + "px) scale(" + boomZoom + ")";
+  boomBox.style.transform = "translate(" + boomX + "px , " + boomY + "px) scale(" + boomZoom + ")";
+  leftLoop = requestAnimationFrame(moveLeft);
+  return leftLoop;
+}
+
+function zoomIn() {
+  boomZoom += 0.05;
+  zPos += 0.066;
+
+  if(boomZoom &gt; 4) {
+    boomZoom = 4;
+    zPos = 299.9;
+  }
+
+  positionPanner();
+  boomBox.style.webkitTransform = "translate(" + boomX + "px , " + boomY + "px) scale(" + boomZoom + ")";
+  boomBox.style.transform = "translate(" + boomX + "px , " + boomY + "px) scale(" + boomZoom + ")";
+  zoomInLoop = requestAnimationFrame(zoomIn);
+  return zoomInLoop;
+}
+
+function zoomOut() {
+  boomZoom += -0.05;
+  zPos += -0.066;
+
+  if(boomZoom &lt;= 0.25) {
+    boomZoom = 0.25;
+    zPos = 295;
+  }
+
+  positionPanner();
+  boomBox.style.webkitTransform = "translate(" + boomX + "px , " + boomY + "px) scale(" + boomZoom + ")";
+  boomBox.style.transform = "translate(" + boomX + "px , " + boomY + "px) scale(" + boomZoom + ")";
+  zoomOutLoop = requestAnimationFrame(zoomOut);
+  return zoomOutLoop;
+}</pre>
+
+<p>In the final block of code, we simply wire up event handlers to control the movement when the buttons are pressed. For each button, the relevant function is invoked <code>onmousedown</code>; then <code>onmouseup</code>, {{domxref("window.cancelAnimationFrame") }} is called along with the returned <code>requestAnimationFrame()</code> ID to stop the animation happening.</p>
+
+<pre class="brush: js">leftButton.onmousedown = moveLeft;
+leftButton.onmouseup = function () {
+  window.cancelAnimationFrame(leftLoop);
+}
+
+rightButton.onmousedown = moveRight;
+rightButton.onmouseup = function () {
+  window.cancelAnimationFrame(rightLoop);
+}
+
+zoomInButton.onmousedown = zoomIn;
+zoomInButton.onmouseup = function () {
+  window.cancelAnimationFrame(zoomInLoop);
+}
+
+zoomOutButton.onmousedown = zoomOut;
+zoomOutButton.onmouseup = function () {
+  window.cancelAnimationFrame(zoomOutLoop);
+}</pre>
+
+<h2 id="Summary">Summary</h2>
+
+<p>As you can see, the actual panner code is pretty simple — specify the positions, and the browser takes care of the rest. It is working out the surrounding code, and the values to use for positioning, which takes a bit more time.</p>
+
+<div class="note">
+<p><strong>Note</strong>: You are probably thinking "why didn't you move the listener and keep the panner still instead: surely that is a bit more obvious?" Well, perhaps, but we felt that since the panner has more methods and properties available to it, moving it would allow more control in the long term.</p>
+</div>
+
+<p> </p>
diff --git a/files/fr/web/api/web_speech_api/index.html b/files/fr/web/api/web_speech_api/index.html
new file mode 100644
index 0000000000..2de8e886ab
--- /dev/null
+++ b/files/fr/web/api/web_speech_api/index.html
@@ -0,0 +1,116 @@
+---
+title: L'API Web Speech
+slug: Web/API/Web_Speech_API
+tags:
+  - API
+  - API Web Speech
+  - Experimental
+  - reconnaissance vocale
+  - synthèse vocale
+translation_of: Web/API/Web_Speech_API
+---
+<div>{{DefaultAPISidebar("Web Speech API")}}{{seecompattable}}</div>
+
+<div class="summary">
+<p>L'API <em lang="en">Web Speech</em> permet d'intégrer des données liées à la voix dans des applications web. L'API <em lang="en">Web Speech</em> se compose de deux parties : <em lang="en">SpeechSynthesis</em> (synthèse vocale) et <em lang="en">SpeechRecognition</em> (reconnaissance vocale asynchrone).</p>
+</div>
+
+<h2 id="Concepts_et_usages_de_lAPI_Web_Speech">Concepts et usages de l'API Web Speech</h2>
+
+<p>L'API <em lang="en">Web Speech</em> rend les applications web capables de manipuler des données liées à la voix. Cette API se compose de deux parties :</p>
+
+<ul>
+ <li>La reconnaissance vocale (<em lang="en">Speech recognition</em>) est accessible via l'interface {{domxref("SpeechRecognition")}} qui fournit la capacité de reconnaitre la voix dans une source audio (normalement grâce à l'outil par défaut de reconnaissance vocale de l'appareil) et de réagir de façon pertinente. En général, on utilisera le constructeur de l'interface pour créer un nouvel objet {{domxref("SpeechRecognition")}} qui a un nombre de gestionnaires d'événements disponibles pour détecter lorsque de la parole arrive dans le micro de l'appareil. L'interface {{domxref("SpeechGrammar")}} représente un conteneur pour une série de règles de grammaire que votre application devrait reconnaître. La grammaire est définie en utilisant <a href="http://www.w3.org/TR/jsgf/">JSpeech Grammar Format</a> (<strong>JSGF</strong>).</li>
+ <li>La synthèse vocale (<em lang="en">Speech synthesis</em>) est disponible via l'interface {{domxref("SpeechSynthesis")}}, un composant qui permet aux programmes de vocaliser leur contenu textuel (normalement grâce au synthétiseur vocal par défaut de l'appareil). Differents types de voix sont disponibles dans les objets {{domxref("SpeechSynthesisVoice")}}, et les différentes parties de texte à vocaliser sont interprétés par les objets {{domxref("SpeechSynthesisUtterance")}}. On peut les faire vocaliser en les passant à la méthode {{domxref("SpeechSynthesis.speak()")}}.</li>
+</ul>
+
+<p>Pour plus de détails concernant ces fonctionnalités, voir <a href="https://developer.mozilla.org/fr/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API">Using the Web Speech API.</a></p>
+
+<h2 id="Les_interfaces_de_lAPI_Web_Speech">Les interfaces de l'API Web Speech</h2>
+
+<h3 id="Le_reconnaissance_vocale">Le reconnaissance vocale</h3>
+
+<dl>
+ <dt>{{domxref("SpeechRecognition")}}</dt>
+ <dd>L'interface de contrôle de l'outil de reconnaissance; elle traite aussi le {{domxref("SpeechRecognitionEvent")}} reçu de l'outil de reconnaissance.</dd>
+ <dt>{{domxref("SpeechRecognitionAlternative")}}</dt>
+ <dd>Représente un mot unique qui a été reconnu par l'outil de reconnaissane vocale.</dd>
+ <dt>{{domxref("SpeechRecognitionError")}}</dt>
+ <dd>Répresente les messages d'erreur de l'outil de reconnaissance vocale.</dd>
+ <dt>{{domxref("SpeechRecognitionEvent")}}</dt>
+ <dd>L'objet événement pour les événements {{event("result")}} et {{event("nomatch")}}, et contient toutes les données associées avec un résultat de reconnaissance vocale intermédiaire ou définitif.</dd>
+ <dt>{{domxref("SpeechGrammar")}}</dt>
+ <dd>Les mots ou schémas de mots que l'on demande à l'outil de reconnaissance vocale de reconnaître.</dd>
+ <dt>{{domxref("SpeechGrammarList")}}</dt>
+ <dd>Répresente une liste des objets {{domxref("SpeechGrammar")}}.</dd>
+ <dt>{{domxref("SpeechRecognitionResult")}}</dt>
+ <dd>Répresente une unique reconnaissance réussie, qui peut contenir plusieurs objets {{domxref("SpeechRecognitionAlternative")}}.</dd>
+ <dt>{{domxref("SpeechRecognitionResultList")}}</dt>
+ <dd>Répresente une liste d'objets {{domxref("SpeechRecognitionResult")}}, ou bien un seul si les résultats sont récupérés en mode {{domxref("SpeechRecognition.continuous","continuous")}}.</dd>
+</dl>
+
+<h3 id="La_synthèse_vocale">La synthèse vocale</h3>
+
+<dl>
+ <dt>{{domxref("SpeechSynthesis")}}</dt>
+ <dd>L'interface de contrôle de l'outil de vocalisation; elle peut être utiliser pour rechercher des informations concernant les voix de synthèse disponible dans l'appareil, le démarrage et l'interruption de la vocalisation, et les commandes complémentaires.</dd>
+ <dt>{{domxref("SpeechSynthesisErrorEvent")}}</dt>
+ <dd>Contient les informations concernant toutes les erreurs qui se produisent pendant le traitement des objets {{domxref("SpeechSynthesisUtterance")}} dans l'outil de synthèse vocale.</dd>
+ <dt>{{domxref("SpeechSynthesisEvent")}}</dt>
+ <dd>Contient les informations concernant l'état actuel des objets {{domxref("SpeechSynthesisUtterance")}} qui ont été traités par l'outil de synthèse vocale.</dd>
+ <dt>{{domxref("SpeechSynthesisUtterance")}}</dt>
+ <dd>Répresente une requête de synthèse vocale. Il contient le contenu que l'outil de synthèse vocale devrait vocaliser et les informations sur comment le vocaliser (e.g. langue, ton et volume).</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("SpeechSynthesisVoice")}}</dt>
+ <dd>Représente une voix qui est supportée par le système. Chaque <code>SpeechSynthesisVoice</code> a son propre outil de synthèse vocale incluant les informations concernant la langue, le nom et l'URI.</dd>
+ <dt>{{domxref("Window.speechSynthesis")}}</dt>
+ <dd>Spécifiée comme une partie de l'interface <code>[NoInterfaceObject]</code> intitulée <code>SpeechSynthesisGetter</code>, et implémentée par l'objet <code>Window</code>, la propriété <code>speechSynthesis</code> fournit l'accès au controleur {{domxref("SpeechSynthesis")}}, et de ce fait un point d'entrée à la fonctionnalité de synthèse vocale.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Le <a href="https://github.com/mdn/web-speech-api/">Web Speech API repo</a> sur GitHub contient des démos qui illustrent la reconnaissance vocale et la synthèse vocale.</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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Speech API')}}</td>
+   <td>{{Spec2('Web Speech API')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<h3 id="SpeechRecognition"><em lang="en"><code>SpeechRecognition</code></em></h3>
+
+<div>
+<div class="hidden">La table de compatibilité sur cette page est générée à partir de données structurées. Si vous souhaitez contribuer aux données, merci de consulter la page <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et d'envoyer une pull request.</div>
+
+<p>{{Compat("api.SpeechRecognition", 0)}}</p>
+
+<h3 id="SpeechSynthesis"><em lang="en"><code>SpeechSynthesis</code></em></h3>
+
+<div class="hidden">La table de compatibilité sur cette page est générée à partir de données structurées. Si vous souhaitez contribuer aux données, merci de consulter la page <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et d'envoyer une pull request.</div>
+
+<p>{{Compat("api.SpeechSynthesis", 0)}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API">Using the Web Speech API</a></li>
+ <li><a href="http://www.sitepoint.com/talking-web-pages-and-the-speech-synthesis-api/">Article sur le site SitePoint</a></li>
+ <li><a href="http://updates.html5rocks.com/2014/01/Web-apps-that-talk---Introduction-to-the-Speech-Synthesis-API">Article HTML5Rocks</a></li>
+ <li><a href="http://aurelio.audero.it/demo/speech-synthesis-api-demo.html">Demo</a> [aurelio.audero.it]</li>
+</ul>
+</div>
diff --git a/files/fr/web/api/web_speech_api/using_the_web_speech_api/index.html b/files/fr/web/api/web_speech_api/using_the_web_speech_api/index.html
new file mode 100644
index 0000000000..ffaa924aa3
--- /dev/null
+++ b/files/fr/web/api/web_speech_api/using_the_web_speech_api/index.html
@@ -0,0 +1,310 @@
+---
+title: Utiliser l'API Web Speech
+slug: Web/API/Web_Speech_API/Using_the_Web_Speech_API
+tags:
+  - API
+  - API Web Speech
+  - Guide
+  - Tutoriel
+  - Utilisation
+  - reconnaissance
+  - synthèse
+  - vocale
+translation_of: Web/API/Web_Speech_API/Using_the_Web_Speech_API
+---
+<p class="summary">L'API Web Speech fournit deux fonctionnalités différentes — la reconnaissance vocale, et la synthèse vocale (aussi appelée "text to speech", ou tts) — qui ouvrent de nouvelles possibiités d'accessibilité, et de mécanismes de contrôle. Cet article apporte une simple introduction à ces deux domaines, accompagnée de démonstrations.</p>
+
+<h2 id="Reconnaissance_vocale">Reconnaissance vocale</h2>
+
+<p>La reconnaissance vocale implique de recevoir de la voix à travers un dispositif de capture du son, tel qu'un microphone, qui est ensuite vérifiée par un service de reconnaissance vocale utilisant une "grammaire" (le vocabulaire que vous voulez faire reconnaître par une application donnée). Quand un mot ou une phrase sont reconnus avec succès, ils sont retournés comme résultat (ou une liste de résultats) sous la forme d'une chaîne de caractères, et d'autres actions peuvent être initiées à la suite de ce résultat.</p>
+
+<p>L'API Web Speech a une interface principale de contrôle  — {{domxref("SpeechRecognition")}} — plus un nombre d'interfaces inter-reliées pour représenter une grammaire, des résultats, etc. Généralement, le système de reconnaissance vocale par défaut disponible sur le dispositif matériel sera utilisé pour la reconnaissance vocale  — la plupart des systèmes d'exploitation modernes ont un système de reonnaissance vocale pour transmettre des commandes vocales. On pense à Dictation sur macOS, Siri sur iOS, Cortana sur Windows 10, Android Speech, etc.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Sur certains navigateurs, comme Chrome, utiliser la reconnaissance vocale sur une page web implique de disposer d'un moteur de reconnaissance basé sur un serveur. Votre flux audio est envoyé à un service web pour traitement, le moteur ne fonctionnera donc pas hors ligne.</p>
+</div>
+
+<h3 id="Demo">Demo</h3>
+
+<p>Pour montrer une simple utilisation de la reconnaissance vocale Web speech, nous avons écrit une demo appelée  <a href="https://github.com/mdn/web-speech-api/tree/master/speech-color-changer">Speech color changer</a>. Quand l'écran est touché ou cliqué, vous pouvez dire un mot clé de couleur HTML et la couleur d'arrière plan de l'application sera modifié par la couleur choisie.</p>
+
+<p><img alt="The UI of an app titled Speech Color changer. It invites the user to tap the screen and say a color, and then it turns the background of the app that colour. In this case it has turned the background red." src="https://mdn.mozillademos.org/files/11975/speech-color-changer.png" style="border: 1px solid black; display: block; height: 533px; margin: 0px auto; width: 300px;"></p>
+
+<p>Pour lancer la demo, vous pouvez cloner (ou <a href="https://github.com/mdn/web-speech-api/archive/master.zip">directement télécharger</a>) le dépôt Github dont elle fait partie, ouvrir le fichier d'index HTML dans un navigateur pour ordinateur de bureau le supportant comme Chrome, ou naviguer vers <a href="https://mdn.github.io/web-speech-api/speech-color-changer/">l'URL de démonstration live</a>, sur un navigateur pour mobile le supportant comme Chrome.</p>
+
+<h3 id="Support_des_navigateurs">Support des navigateurs</h3>
+
+<p>Le support de la reconnaissance vocale via l'API Web Speech est actuellement limité à Chrome pour ordinateur de bureau et pour mobiles sur Android — Chrome le supporte depuis la version 33 mais avec des interfaces préfixées spécifiques, donc vous avez besoin d'inclure des versions d'interfaces préfixées définies, comme : <code>webkitSpeechRecognition</code>.</p>
+
+<h3 id="HTML_and_CSS">HTML and CSS</h3>
+
+<p>The HTML and CSS for the app is really trivial. We simply have a title, instructions paragraph, and a div into which we output diagnostic messages.</p>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Speech color changer&lt;/h1&gt;
+&lt;p&gt;Tap/click then say a color to change the background color of the app.&lt;/p&gt;
+&lt;div&gt;
+  &lt;p class="output"&gt;&lt;em&gt;...diagnostic messages&lt;/em&gt;&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<p>The CSS provides a very simple responsive styling so that it looks ok across devices.</p>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p>Let's look at the JavaScript in a bit more detail.</p>
+
+<h4 id="Chrome_support">Chrome support</h4>
+
+<p>As mentioned earlier, Chrome currently supports speech recognition with prefixed properties, therefore at the start of our code we include these lines to feed the right objects to Chrome, and any future implementations that might support the features without a prefix:</p>
+
+<pre class="brush: js notranslate">var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition
+var SpeechGrammarList = SpeechGrammarList || webkitSpeechGrammarList
+var SpeechRecognitionEvent = SpeechRecognitionEvent || webkitSpeechRecognitionEvent</pre>
+
+<h4 id="The_grammar">The grammar</h4>
+
+<p>The next part of our code defines the grammar we want our app to recognise. The following variable is defined to hold our grammar:</p>
+
+<pre class="brush: js notranslate">var colors = [ 'aqua' , 'azure' , 'beige', 'bisque', 'black', 'blue', 'brown', 'chocolate', 'coral' ... ];
+var grammar = '#JSGF V1.0; grammar colors; public &lt;color&gt; = ' + colors.join(' | ') + ' ;'</pre>
+
+<p>The grammar format used is <a class="external external-icon" href="http://www.w3.org/TR/jsgf/">JSpeech Grammar Format</a> (<strong>JSGF</strong>) — you can find a lot more about it at the previous link to its spec. However, for now let's just run through it quickly:</p>
+
+<ul>
+ <li>The lines are separated by semi-colons, just like in JavaScript.</li>
+ <li>The first line — <code>#JSGF V1.0;</code> — states the format and version used. This always needs to be included first.</li>
+ <li>The second line indicates a type of term that we want to recognise. <code>public</code> declares that it is a public rule, the string in angle brackets defines the recognised name for this term (<code>color</code>), and the list of items that follow the equals sign are the alternative values that will be recognised and accepted as appropriate values for the term. Note how each is separated by a pipe character.</li>
+ <li>You can have as many terms defined as you want on separate lines following the above structure, and include fairly complex grammar definitions. For this basic demo, we are just keeping things simple. </li>
+</ul>
+
+<h4 id="Plugging_the_grammar_into_our_speech_recognition">Plugging the grammar into our speech recognition</h4>
+
+<p>The next thing to do is define a speech recogntion instance to control the recognition for our application. This is done using the {{domxref("SpeechRecognition.SpeechRecognition()","SpeechRecognition()")}} constructor. We also create a new speech grammar list to contain our grammar, using the {{domxref("SpeechGrammarList.SpeechGrammarList()","SpeechGrammarList()")}} constructor.</p>
+
+<pre class="brush: js notranslate">var recognition = new SpeechRecognition();
+var speechRecognitionList = new SpeechGrammarList();</pre>
+
+<p>We add our <code>grammar</code> to the list using the {{domxref("SpeechGrammarList.addFromString()")}} method. This accepts as parameters the string we want to add, plus optionally a weight value that specifies the importance of this grammar in relation of other grammars available in the list (can be from 0 to 1 inclusive.) The added grammar is available in the list as a {{domxref("SpeechGrammar")}} object instance.</p>
+
+<pre class="brush: js notranslate">speechRecognitionList.addFromString(grammar, 1);</pre>
+
+<p>We then add the {{domxref("SpeechGrammarList")}} to the speech recognition instance by setting it to the value of the {{domxref("SpeechRecognition.grammars")}} property. We also set a few other properties of the recognition instance before we move on:</p>
+
+<ul>
+ <li>{{domxref("SpeechRecognition.continuous")}}: Controls whether continuous results are captured (<code>true</code>), or just a single result each time recognition is started (<code>false</code>).</li>
+ <li>{{domxref("SpeechRecognition.lang")}}: Sets the language of the recognition. Setting this is good practice, and therefore recommended.</li>
+ <li>{{domxref("SpeechRecognition.interimResults")}}: Defines whether the speech recognition system should return interim results, or just final results. Final results are good enough for this simple demo.</li>
+ <li>{{domxref("SpeechRecognition.maxAlternatives")}}: Sets the number of alternative potential matches that should be returned per result. This can sometimes be useful, say if a result is not completely clear and you want to display a list if alternatives for the user to choose the correct one from. But it is not needed for this simple demo, so we are just specifying one (which is actually the default anyway.)</li>
+</ul>
+
+<pre class="brush: js notranslate">recognition.grammars = speechRecognitionList;
+recognition.continuous = false;
+recognition.lang = 'en-US';
+recognition.interimResults = false;
+recognition.maxAlternatives = 1;</pre>
+
+<h4 id="Starting_the_speech_recognition">Starting the speech recognition</h4>
+
+<p>After grabbing references to the output {{htmlelement("div")}} and the HTML element (so we can output diagnostic messages and update the app background color later on), we implement an onclick handler so that when the screen is tapped/clicked, the speech recognition service will start. This is achieved by calling {{domxref("SpeechRecognition.start()")}}. The <code>forEach()</code> method is used to output colored indicators showing what colors to try saying.</p>
+
+<pre class="brush: js notranslate">var diagnostic = document.querySelector('.output');
+var bg = document.querySelector('html');
+var hints = document.querySelector('.hints');
+
+var colorHTML= '';
+colors.forEach(function(v, i, a){
+  console.log(v, i);
+  colorHTML += '&lt;span style="background-color:' + v + ';"&gt; ' + v + ' &lt;/span&gt;';
+});
+hints.innerHTML = 'Tap/click then say a color to change the background color of the app. Try ' + colorHTML + '.';
+
+document.body.onclick = function() {
+  recognition.start();
+  console.log('Ready to receive a color command.');
+}</pre>
+
+<h4 id="Receiving_and_handling_results">Receiving and handling results</h4>
+
+<p>Once the speech recognition is started, there are many event handlers that can be used to retrieve results, and other pieces of surrounding information (see the <a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition#Event_handlers"><code>SpeechRecognition</code> event handlers list</a>.) The most common one you'll probably use is {{domxref("SpeechRecognition.onresult")}}, which is fired once a successful result is received:</p>
+
+<pre class="brush: js notranslate">recognition.onresult = function(event) {
+  var color = event.results[0][0].transcript;
+  diagnostic.textContent = 'Result received: ' + color + '.';
+  bg.style.backgroundColor = color;
+  console.log('Confidence: ' + event.results[0][0].confidence);
+}</pre>
+
+<p>The second line here is a bit complex-looking, so let's explain it step by step. The {{domxref("SpeechRecognitionEvent.results")}} property returns a {{domxref("SpeechRecognitionResultList")}} object containing {{domxref("SpeechRecognitionResult")}} objects. It has a getter so it can be accessed like an array — so the first <code>[0]</code> returns the <code>SpeechRecognitionResult</code> at position 0. Each <code>SpeechRecognitionResult</code> object contains {{domxref("SpeechRecognitionAlternative")}} objects that contain individual recognised words. These also have getters so they can be accessed like arrays — the second <code>[0]</code> therefore returns the <code>SpeechRecognitionAlternative</code> at position 0. We then return its <code>transcript</code> property to get a string containing the individual recognised result as a string, set the background color to that color, and report the color recognised as a diagnostic message in the UI.</p>
+
+<p>We also use a {{domxref("SpeechRecognition.onspeechend")}} handler to stop the speech recognition service from running (using {{domxref("SpeechRecognition.stop()")}}) once a single word has been recognised and it has finished being spoken:</p>
+
+<pre class="brush: js notranslate">recognition.onspeechend = function() {
+  recognition.stop();
+}</pre>
+
+<h4 id="Handling_errors_and_unrecognised_speech">Handling errors and unrecognised speech</h4>
+
+<p>The last two handlers are there to handle cases where speech was recognised that wasn't in the defined grammar, or an error occured. {{domxref("SpeechRecognition.onnomatch")}} seems to be supposed to handle the first case mentioned, although note that at the moment it doesn't seem to fire correctly; it just returns whatever was recognised anyway:</p>
+
+<pre class="brush: js notranslate">recognition.onnomatch = function(event) {
+  diagnostic.textContent = 'I didnt recognise that color.';
+}</pre>
+
+<p>{{domxref("SpeechRecognition.onerror")}} handles cases where there is an actual error with the recognition successfully — the {{domxref("SpeechRecognitionError.error")}} property contains the actual error returned:</p>
+
+<pre class="brush: js notranslate">recognition.onerror = function(event) {
+  diagnostic.textContent = 'Error occurred in recognition: ' + event.error;
+}</pre>
+
+<h2 id="Speech_synthesis">Speech synthesis</h2>
+
+<p>Speech synthesis (aka text-to-speech, or tts) involves receiving synthesising text contained within an app to speech, and playing it out of a device's speaker or audio output connection.</p>
+
+<p>The Web Speech API has a main controller interface for this — {{domxref("SpeechSynthesis")}} — plus a number of closely-related interfaces for representing text to be synthesised (known as utterances), voices to be used for the utterance, etc. Again, most OSes have some kind of speech synthesis system, which will be used by the API for this task as available.</p>
+
+<h3 id="Demo_2">Demo</h3>
+
+<p>To show simple usage of Web speech synthesis, we've provided a demo called <a href="https://mdn.github.io/web-speech-api/speak-easy-synthesis/">Speak easy synthesis</a>. This includes a set of form controls for entering text to be synthesised, and setting the pitch, rate, and voice to use when the text is uttered. After you have entered your text, you can press <kbd>Enter</kbd>/<kbd>Return</kbd> to hear it spoken.</p>
+
+<p><img alt="UI of an app called speak easy synthesis. It has an input field in which to input text to be synthesised, slider controls to change the rate and pitch of the speech, and a drop down menu to choose between different voices." src="https://mdn.mozillademos.org/files/11977/speak-easy-synthesis.png" style="border: 1px solid black; display: block; height: 533px; margin: 0px auto; width: 300px;"></p>
+
+<p>To run the demo, you can clone (or <a href="https://github.com/mdn/web-speech-api/archive/master.zip">directly download</a>) the Github repo it is part of, open the HTML index file in a supporting desktop browser, or navigate to the <a href="https://mdn.github.io/web-speech-api/speak-easy-synthesis/">live demo URL</a> in a supporting mobile browser like Chrome, or Firefox OS.</p>
+
+<h3 id="Browser_support">Browser support</h3>
+
+<p>Support for Web Speech API speech synthesis is still getting there across mainstream browsers, and is currently limited to the following:</p>
+
+<ul>
+ <li>
+  <p>Firefox desktop and mobile support it in Gecko 42+ (Windows)/44+, without prefixes, and it can be turned on by flipping the <code>media.webspeech.synth.enabled</code> flag to <code>true</code> in <code>about:config</code>.</p>
+ </li>
+ <li>
+  <p>Firefox OS 2.5+ supports it, by default, and without the need for any permissions.</p>
+ </li>
+ <li>
+  <p>Chrome for Desktop and Android have supported it since around version 33, without prefixes.</p>
+ </li>
+</ul>
+
+<h3 id="HTML_and_CSS_2">HTML and CSS</h3>
+
+<p>The HTML and CSS are again pretty trivial, simply containing a title, some instructions for use, and a form with some simple controls. The {{htmlelement("select")}} element is initially empty, but is populated with {{htmlelement("option")}}s via JavaScript (see later on.)</p>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Speech synthesiser&lt;/h1&gt;
+
+&lt;p&gt;Enter some text in the input below and press return to hear it. change voices using the dropdown menu.&lt;/p&gt;
+
+&lt;form&gt;
+  &lt;input type="text" class="txt"&gt;
+  &lt;div&gt;
+    &lt;label for="rate"&gt;Rate&lt;/label&gt;&lt;input type="range" min="0.5" max="2" value="1" step="0.1" id="rate"&gt;
+    &lt;div class="rate-value"&gt;1&lt;/div&gt;
+    &lt;div class="clearfix"&gt;&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="pitch"&gt;Pitch&lt;/label&gt;&lt;input type="range" min="0" max="2" value="1" step="0.1" id="pitch"&gt;
+    &lt;div class="pitch-value"&gt;1&lt;/div&gt;
+    &lt;div class="clearfix"&gt;&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;select&gt;
+
+  &lt;/select&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="JavaScript_2">JavaScript</h3>
+
+<p>Let's investigate the JavaScript that powers this app.</p>
+
+<h4 id="Setting_variables">Setting variables</h4>
+
+<p>First of all, we capture references to all the DOM elements involved in the UI, but more interestingly, we capture a reference to {{domxref("Window.speechSynthesis")}}. This is API's entry point — it returns an instance of {{domxref("SpeechSynthesis")}}, the controller interface for web speech synthesis.</p>
+
+<pre class="brush: js notranslate">var synth = window.speechSynthesis;
+
+var inputForm = document.querySelector('form');
+var inputTxt = document.querySelector('.txt');
+var voiceSelect = document.querySelector('select');
+
+var pitch = document.querySelector('#pitch');
+var pitchValue = document.querySelector('.pitch-value');
+var rate = document.querySelector('#rate');
+var rateValue = document.querySelector('.rate-value');
+
+var voices = [];
+</pre>
+
+<h4 id="Populating_the_select_element">Populating the select element</h4>
+
+<p>To populate the {{htmlelement("select")}} element with the different voice options the device has available, we've written a <code>populateVoiceList()</code> function. We first invoke {{domxref("SpeechSynthesis.getVoices()")}}, which returns a list of all the available voices, represented by {{domxref("SpeechSynthesisVoice")}} objects. We then loop through this list — for each voice we create an {{htmlelement("option")}} element, set its text content to display the name of the voice (grabbed from {{domxref("SpeechSynthesisVoice.name")}}), the language of the voice (grabbed from {{domxref("SpeechSynthesisVoice.lang")}}), and <code>-- DEFAULT</code> if the voice is the default voice for the synthesis engine (checked by seeing if {{domxref("SpeechSynthesisVoice.default")}} returns <code>true</code>.)</p>
+
+<p>We also create <code>data-</code> attributes for each option, containing the name and language of the associated voice, so we can grab them easily later on, and then append the options as children of the select.</p>
+
+<pre class="brush: js notranslate">function populateVoiceList() {
+  voices = synth.getVoices();
+
+  for(i = 0; i &lt; voices.length ; i++) {
+    var option = document.createElement('option');
+    option.textContent = voices[i].name + ' (' + voices[i].lang + ')';
+
+    if(voices[i].default) {
+      option.textContent += ' -- DEFAULT';
+    }
+
+    option.setAttribute('data-lang', voices[i].lang);
+    option.setAttribute('data-name', voices[i].name);
+    voiceSelect.appendChild(option);
+  }
+}</pre>
+
+<p>When we come to run the function, we do the following. This is because Firefox doesn't support {{domxref("SpeechSynthesis.onvoiceschanged")}}, and will just return a list of voices when {{domxref("SpeechSynthesis.getVoices()")}} is fired. With Chrome however, you have to wait for the event to fire before populating the list, hence the if statement seen below.</p>
+
+<pre class="brush: js notranslate">populateVoiceList();
+if (speechSynthesis.onvoiceschanged !== undefined) {
+  speechSynthesis.onvoiceschanged = populateVoiceList;
+}</pre>
+
+<h4 id="Speaking_the_entered_text">Speaking the entered text</h4>
+
+<p>Next, we create an event handler to start speaking the text entered into the text field. We are using an <a href="/en-US/docs/Web/API/GlobalEventHandlers/onsubmit">onsubmit</a> handler on the form so that the action happens when <kbd>Enter</kbd>/<kbd>Return</kbd> is pressed. We first create a new {{domxref("SpeechSynthesisUtterance.SpeechSynthesisUtterance()", "SpeechSynthesisUtterance()")}} instance using its constructor — this is passed the text input's value as a parameter.</p>
+
+<p>Next, we need to figure out which voice to use. We use the {{domxref("HTMLSelectElement")}} <code>selectedOptions</code> property to return the currently selected {{htmlelement("option")}} element. We then use this element's <code>data-name</code> attribute, finding the {{domxref("SpeechSynthesisVoice")}} object whose name matches this attribute's value. We set the matching voice object to be the value of the {{domxref("SpeechSynthesisUtterance.voice")}} property.</p>
+
+<p>Finally, we set the {{domxref("SpeechSynthesisUtterance.pitch")}} and {{domxref("SpeechSynthesisUtterance.rate")}} to the values of the relevant range form elements. Then, with all necessary preparations made, we start the utterance being spoken by invoking {{domxref("SpeechSynthesis.speak()")}}, passing it the {{domxref("SpeechSynthesisUtterance")}} instance as a parameter.</p>
+
+<pre class="brush: js notranslate">inputForm.onsubmit = function(event) {
+  event.preventDefault();
+
+  var utterThis = new SpeechSynthesisUtterance(inputTxt.value);
+  var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');
+  for(i = 0; i &lt; voices.length ; i++) {
+    if(voices[i].name === selectedOption) {
+      utterThis.voice = voices[i];
+    }
+  }
+  utterThis.pitch = pitch.value;
+  utterThis.rate = rate.value;
+  synth.speak(utterThis);</pre>
+
+<p>In the final part of the handler, we include an {{domxref("SpeechSynthesisUtterance.onpause")}} handler to demonstrate how {{domxref("SpeechSynthesisEvent")}} can be put to good use. When {{domxref("SpeechSynthesis.pause()")}} is invoked, this returns a message reporting the character number and name that the speech was paused at.</p>
+
+<pre class="brush: js notranslate">   utterThis.onpause = function(event) {
+    var char = event.utterance.text.charAt(event.charIndex);
+    console.log('Speech paused at character ' + event.charIndex + ' of "' +
+    event.utterance.text + '", which is "' + char + '".');
+  }</pre>
+
+<p>Finally, we call <a href="/en-US/docs/Web/API/HTMLElement/blur">blur()</a> on the text input. This is mainly to hide the keyboard on Firefox OS.</p>
+
+<pre class="brush: js notranslate">  inputTxt.blur();
+}</pre>
+
+<h4 id="Updating_the_displayed_pitch_and_rate_values">Updating the displayed pitch and rate values</h4>
+
+<p>The last part of the code simply updates the <code>pitch</code>/<code>rate</code> values displayed in the UI, each time the slider positions are moved.</p>
+
+<pre class="brush: js notranslate">pitch.onchange = function() {
+  pitchValue.textContent = pitch.value;
+}
+
+rate.onchange = function() {
+  rateValue.textContent = rate.value;
+}</pre>
diff --git a/files/fr/web/api/web_storage_api/index.html b/files/fr/web/api/web_storage_api/index.html
new file mode 100644
index 0000000000..c1d30beeb9
--- /dev/null
+++ b/files/fr/web/api/web_storage_api/index.html
@@ -0,0 +1,104 @@
+---
+title: Web Storage API
+slug: Web/API/Web_Storage_API
+tags:
+  - API
+  - Reference
+  - Storage
+  - Web Storage
+  - localStorage
+  - sessionStorage
+translation_of: Web/API/Web_Storage_API
+---
+<p>{{DefaultAPISidebar("Web Storage API")}}</p>
+
+<p>L'API <strong>Web Storage</strong> fournit des mécanismes par lesquels les navigateurs peuvent stocker des paires clé / valeur, d'une manière beaucoup plus intuitive que l'utilisation de cookies.</p>
+
+<h2 id="Web_Storage_concepts_et_utilisations">Web Storage, concepts et utilisations</h2>
+
+<p>Les deux mécanismes au sein du web storage sont les suivantes:</p>
+
+<ul>
+ <li><code>sessionStorage</code> maintient une zone de stockage distinct pour chaque origine donnée qui est disponible pour la durée de la session de la page (tant que le navigateur est ouvert, y compris les rechargements et restaure)</li>
+ <li><code>localStorage</code> fait la même chose, mais persiste même lorsque le navigateur est fermé et rouvert.</li>
+</ul>
+
+<p>Ces mécanismes sont disponibles via les propriétés {{domxref("Window.sessionStorage")}} et {{domxref("Window.localStorage")}} (pour être plus précis, pour le support des navigateurs, l'objet <code>Window</code> implemente le <code>WindowLocalStorage</code> et l'object <code>WindowSessionStorage</code>, dont les propriétés <code>localStorage</code> et <code>sessionStorage</code> dépendent) — L'appel de l'une de ces propriétés va créer une instance de l'objet {{domxref("Storage")}},  à travers de laquelle les éléments de données peuvent être définis, récupérés et éliminés. Un objet de stockage différent est utilisé pour le sessionStorage et le localStorage pour chaque origine — ils fonctionnent et sont contrôlés séparément.</p>
+
+<div class="note">
+<p><strong>Note</strong>: À partir de Firefox 45, lorsque le navigateur se bloque / redémarre, la quantité de données sauvegardées par origine est limitée à 10 Mo. Cela a été mis en place pour éviter les problèmes de mémoire causés par une utilisation excessive du stockage Web.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: L'accès au Web Storage à partir d'iframes externes est interdit si l'utilisateur a <a href="https://support.mozilla.org/en-US/kb/disable-third-party-cookies">désactivé les cookies tierce-partie</a> (Firefox a adopté ce comportement à partir de la <a href="/en-US/docs/Mozilla/Firefox/Releases/43">version 43</a> et suivantes.)</p>
+</div>
+
+<div class="note">
+<p><strong>Note:</strong> Le Web Storage n'est pas identique au <a href="/en-US/docs/Storage" title="Storage">mozStorage</a> (interfaces XPCOM de Mozilla vers SQLite) ou l'<a href="/en-US/docs/Session_store_API" title="Session_store_API">API Session store </a> (un utilitaire de stockage <a href="/en-US/docs/XPCOM" title="XPCOM">XPCOM</a> utilisable par des extensions).</p>
+</div>
+
+<h2 id="Web_Storage_interfaces">Web Storage interfaces</h2>
+
+<dl>
+ <dt>{{domxref("Storage")}}</dt>
+ <dd>Vous permet d'ajouter, modifier, lire ou supprimer des données pour un domaine et un type de stockage (session ou local) donnés.</dd>
+ <dt>{{domxref("Window")}}</dt>
+ <dd>L'API Web Storage dérive de l'objet {{domxref("Window")}} avec 2 nouvelles propriétés — {{domxref("Window.sessionStorage")}} et {{domxref("Window.localStorage")}} — lesquelles donnent accès, pour le domaine courant, aux objets session et local {{domxref("Storage")}} respectivement.</dd>
+ <dt>{{domxref("StorageEvent")}}</dt>
+ <dd>L'événement <code title="event-storage">storage</code> est déclenché sur l'objet <code>Window</code> du document en cas de changement dans un espace de stockage.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Pour illustrer une utilisation typique du stockage Web, nous avons créé un exemple simple, appelé de manière imaginative <a href="https://github.com/mdn/dom-examples/tree/master/web-storage">Web Storage Demo</a>. La <a href="https://mdn.github.io/dom-examples/web-storage/">landing page</a> fournit des commandes permettant de personnaliser la couleur, la police et l'image décorative. Lorsque vous choisissez différentes options, la page est instantanément mise à jour. De plus, vos choix sont stockés dans <code>localStorage</code>. Ainsi, lorsque vous quittez la page puis la rechargez plus tard, vos choix sont mémorisés. En outre, nous avons fourni une <a href="https://mdn.github.io/dom-examples/web-storage/event.html">event output page</a> — Si vous chargez cette page dans un autre onglet, puis modifiez vos choix dans la page d'arrivée, vous verrez les informations de stockage mises à jour générées lors du déclenchement de {{event("StorageEvent")}}.</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', 'webstorage.html#webstorage')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<h3 id="Window.localStorage"><code>Window.localStorage</code></h3>
+
+<div>
+
+
+<p>{{Compat("api.Window.localStorage")}}</p>
+
+<h3 id="Window.sessionStorage"><code>Window.sessionStorage</code></h3>
+
+<div>
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("api.Window.sessionStorage")}}</p>
+</div>
+</div>
+
+<h2 id="Navigation_privée_Modes_incognito">Navigation privée / Modes incognito</h2>
+
+<p>De nos jours, la plupart des navigateurs prennent en charge une option de confidentialité appelée "mode Incognito" ou "navigation privée", qui permet de s'assurer que la session de navigation privée ne laisse aucune trace après la fermeture du navigateur. Ceci est fondamentalement incompatible avec le stockage Web pour des raisons évidentes. En tant que tels, les éditeurs de navigateurs expérimentent différents scénarios pour gérer cette incompatibilité.</p>
+
+<p>La plupart des navigateurs ont opté pour une stratégie dans laquelle les API de stockage sont toujours disponibles et apparemment totalement fonctionnelles, à la différence près que toutes les données stockées sont effacées après la fermeture du navigateur. Pour ces navigateurs, il existe toujours différentes interprétations de ce qui devrait être fait avec les données stockées existantes (à partir d'une session de navigation normale). Devrait-il être disponible en lecture en mode privé? Certains navigateurs, notamment Safari, ont opté pour une solution dans laquelle le stockage est disponible, vide et doté d'un quota de 0 octets, ce qui rend impossible l'écriture de données.</p>
+
+<p>Les développeurs doivent connaître ces différentes implémentations et en tenir compte lors du développement de sites Web en fonction des API de stockage Web. Pour plus d'informations, consultez <a href="https://blog.whatwg.org/tag/localstorage"> cet article de blog du WHATWG </a> qui traite spécifiquement de ce sujet</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utiliser l'API Web Storage</a></li>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Browser_storage_limits_and_eviction_criteria">Limites de stockage du navigateur et critères d'éviction</a></li>
+ <li><a href="https://medium.com/@ramsunvtech/onfocus-html5-storage-apis-b45d92aa424b">HTML5 Storage API By Venkatraman</a></li>
+</ul>
diff --git a/files/fr/web/api/web_storage_api/using_the_web_storage_api/index.html b/files/fr/web/api/web_storage_api/using_the_web_storage_api/index.html
new file mode 100644
index 0000000000..53e5b29a1d
--- /dev/null
+++ b/files/fr/web/api/web_storage_api/using_the_web_storage_api/index.html
@@ -0,0 +1,223 @@
+---
+title: Utiliser l'API Web Storage
+slug: Web/API/Web_Storage_API/Using_the_Web_Storage_API
+tags:
+  - API
+  - Guide
+  - Stockage
+  - Stockage Web
+  - localStorage
+translation_of: Web/API/Web_Storage_API/Using_the_Web_Storage_API
+---
+<div class="summary">
+<p>L'API "Web Storage" fournit des mécanismes par lesquels les navigateurs web peuvent stocker des paires de clé-valeur, d'une manière plus intuitive qu'en utilisant des cookies. Cet article décrit pas à pas comment se servir de cette technologie facile d'utilisation.</p>
+</div>
+
+<h2 id="Concepts_de_base">Concepts de base</h2>
+
+<p>Les objets de stockages sont de simples magasins clé-valeur, similaires aux objets, mais restant intacts après des chargements de page. La clé peut être une chaîne de caractères ou des entiers, mais la valeur sera toujours une chaîne. Vous pouvez accéder à ces valeurs comme pour un objet ou avec les méthodes getItem() et setItem(). Les trois lignes suivantes vont enregistrer la couleur de la même façon :</p>
+
+<pre class="brush: js">localStorage.colorSetting = '#a4509b';
+localStorage['colorSetting'] = '#a4509b';
+localStorage.setItem('colorSetting', '#a4509b');
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Il est recommandé d'utiliser l'API "Web Storage" (<code>setItem</code>, <code>getItem</code>, <code>removeItem</code>, <code>key</code>, <code>length</code>) pour prévenir les <a href="http://www.2ality.com/2012/01/objects-as-maps.html">embûches</a> associées à l'utilisation d'objets capable de stocker des couples clé-valeur.</p>
+</div>
+
+<p>Les deux principaux mécanismes internes du Stockage Web sont :</p>
+
+<ul>
+ <li><strong><code>sessionStorage</code></strong> qui maintient un espace de stockage, séparé pour chaque origine différente, disponible le temps de la session de la page (tant que le navigateur reste lancé, incluant les rechargements de la page et les restaurations).</li>
+ <li><strong><code>localStorage</code></strong> qui tient le même rôle mais persiste même après le redémarrage du navigateur web.</li>
+</ul>
+
+<p>Ces mécanismes sont disponibles via les propriétés {{domxref("Window.sessionStorage")}} et {{domxref("Window.localStorage")}}  (plus précisément, dans les navigateurs web le supportant, l'objet <code>Window</code>  implémente les objets <code>WindowLocalStorage</code> et <code>WindowSessionStorage</code>, sur lesquels les propriétés <code>localStorage</code> et <code>sessionStorage</code> se basent) — l'appel d'un des deux va créer une instance de l'objet {{domxref("Storage")}}, dans lequel des données pourront être ajoutées, récupérées et supprimées. Pour <code>sessionStorage</code> et <code>localStorage</code>, un objet de stockage différent est utilisé pour chaque origine — ils fonctionnent et sont contrôlés séparément.</p>
+
+<p>Donc, par exemple, un appel initial de <code>localStorage</code> sur un document va retourner un objet {{domxref("Storage")}} ; un appel de <code>sessionStorage</code> sur un document va retourner un objet {{domxref("Storage")}} différent. Les deux peuvent se manipuler de la même façon, mais séparément.</p>
+
+<h2 id="Détection_de_la_fonction_localStorage">Détection de la fonction localStorage</h2>
+
+<p>Pour être capable d'utiliser localStorage, nous devons d'abord vérifier qu'il est supporté et disponible dans la session de navigation actuelle.</p>
+
+<h3 id="Test_du_support_et_disponibilité">Test du support et disponibilité</h3>
+
+<p>Les navigateurs qui supportent localStorage ont sur l'objet windows une propriété nommée localStorage. Cependant, pour différentes raisons, la vérification seule de l'existnce de cette propriété peut provoquer des erreurs. .Son absence n'est pas non plus une garantie de son indisponibilité, certains navigateurs offrent un paramètre pour désactiver localStorage. Donc un navigateur <em>peut</em> supporter localStorage, mais peut ne pas le rendre <em>disponible</em> aux scripts de la page. Un exemple de cela est Safari, qui en mode de navigation privée fournit un objet localStorage vide dont le quota est nul, le rendant inutilisable. Notre fonction de détection doit prendre en compte ces scénarios.</p>
+
+<p>Voici une fonction qui va détecter que localStorage est supporté mais aussi disponible:</p>
+
+<pre class="brush: js">function storageAvailable(type) {
+    try {
+        var storage = window[type],
+            x = '__storage_test__';
+        storage.setItem(x, x);
+        storage.removeItem(x);
+        return true;
+    }
+    catch(e) {
+        return e instanceof DOMException &amp;&amp; (
+            // everything except Firefox
+            e.code === 22 ||
+            // Firefox
+            e.code === 1014 ||
+            // test name field too, because code might not be present
+            // everything except Firefox
+            e.name === 'QuotaExceededError' ||
+            // Firefox
+            e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &amp;&amp;
+            // acknowledge QuotaExceededError only if there's something already stored
+            storage.length !== 0;
+    }
+}</pre>
+
+<p>Et voici comment l'utiliser :</p>
+
+<pre class="brush: js">if (storageAvailable('localStorage')) {
+	// Nous pouvons utiliser localStorage
+}
+else {
+	// Malheureusement, localStorage n'est pas disponible
+}</pre>
+
+<p>Au lieu de cela, vous pouvez tester la disponibilité de sessionStorage en appelant <code>storageAvailable('sessionStorage')</code>. </p>
+
+<p>Vous pouvez retrouver ici <a class="external" href="https://gist.github.com/paulirish/5558557">une brève histoire de la détection de localStorage</a>.</p>
+
+<h2 id="Un_exemple_simple">Un exemple simple</h2>
+
+<p>Pour illustrer certains usages typiques du Stockage Web, nous avons créé un exemple simple ingénieusement appelé <strong>Web Storage Demo</strong>. La <a class="external" href="https://mdn.github.io/dom-examples/web-storage/">page de lancement</a> fournit des contrôles afin de personnaliser la couleur, la police de caractère et l'image de décoration:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9685/landing.png" style="display: block; height: 482px; margin: 0px auto; width: 700px;">Quand vous choisissez une option différente, la page est mise à jour instantanément; de plus, vos choix sont stockés avec localStorage, donc quand vous quitterez la page et la rechargerez plus tard, vos choix auront été mémorisés.</p>
+
+<p>Nous avons aussi fournit une <a class="external" href="https://mdn.github.io/dom-examples/web-storage/event.html">page pour l'événement émis</a> - Si vous chargez cette page dans un autre onglet, puis faite les changements de votre choix sur la page de démarrage, vous allez voir une information liée à l'événement {{domxref("StorageEvent")}} qui a été lancé.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9687/event-output.png" style="display: block; height: 482px; margin: 0px auto; width: 700px;"></p>
+
+<div class="note">
+<p><strong>Note</strong>: En plus de l'affichage en temps réel des pages en utilisant les liens ci-dessus, vous pouvez aussi <a class="external" href="https://github.com/mdn/dom-examples/tree/master/web-storage">regarder le code-source</a>.</p>
+</div>
+
+<h2 id="Tester_si_le_stockage_a_déjà_été_rempli">Tester si le stockage a déjà été rempli</h2>
+
+<p>Pour démarrer avec <a class="external" href="https://github.com/mdn/dom-examples/blob/master/web-storage/main.js">main.js</a>, nous allons tester que l'objet de stockage a bien été rempli (c-à-d, que l'on a déjà accédé à la page):</p>
+
+<pre class="brush: js">if(!localStorage.getItem('bgcolor')) {
+  populateStorage();
+} else {
+  setStyles();
+}</pre>
+
+<p>La méthode {{domxref("Storage.getItem()")}} est utilisée pour obtenir les données de l'élément depuis le stockage ; dans ce cas nous testons l'existence de l'élément <code>bgcolor</code>; si il n'existe pas nous lançons <code>populateStorage()</code> pour ajouter des valeurs personnalisées dans le stockage. Si il y a déjà des valeurs ici, nous lançons <code>setStyles()</code> pour mettre à jour le style de la page avec les valeurs stockées.</p>
+
+<p><strong>Note</strong>: Vous pouvez aussi utiliser {{domxref("Storage.length")}} pour tester si l'objet de stockage est vide ou non.</p>
+
+<h2 id="Obtenir_les_valeurs_du_stockage">Obtenir les valeurs du stockage</h2>
+
+<p>Comme vu ci dessus, les valeurs peuvent être recupérées du stockage en utilisant {{domxref("Storage.getItem()")}}. La méthode prend en argument la clé de l'élément, et retourne la valeur. Par exemple:</p>
+
+<pre class="brush: js">function setStyles() {
+  var currentColor = localStorage.getItem('bgcolor');
+  var currentFont = localStorage.getItem('font');
+  var currentImage = localStorage.getItem('image');
+
+  document.getElementById('bgcolor').value = currentColor;
+  document.getElementById('font').value = currentFont;
+  document.getElementById('image').value = currentImage;
+
+  htmlElem.style.backgroundColor = '#' + currentColor;
+  pElem.style.fontFamily = currentFont;
+  imgElem.setAttribute('src', currentImage);
+}</pre>
+
+<p>Ici, les trois premières lignes vont chercher les valeurs dans le stockage local. Puis, nous définissons les valeurs exposées par le formulaire avec ces valeurs, afin qu'elles persistent quand on recharge la page. Enfin, nous mettons à jour le style et l'image de décoration de la page, ainsi nos options de personnalisation reviennent lors du rechargement de la page.</p>
+
+<h2 id="Enregistrer_une_valeur_dans_le_stockage">Enregistrer une valeur dans le stockage</h2>
+
+<p>{{domxref("Storage.setItem()")}} est aussi bien utilisée pour la création d'une donnée,  que pour la modification d'une donnée existante (si cette donnée existe déja). Elle prend deux arguments — la clé de l'élément à créer/modifier, et la valeur associée à stocker.</p>
+
+<pre class="brush: js">function populateStorage() {
+  localStorage.setItem('bgcolor', document.getElementById('bgcolor').value);
+  localStorage.setItem('font', document.getElementById('font').value);
+  localStorage.setItem('image', document.getElementById('image').value);
+
+  setStyles();
+}</pre>
+
+<p>La fonction <code>populateStorage()</code> définit trois éléments dans le stockage local — la couleur de fond, la police de caractère et le chemin de l'image. Ensuite elle lance la fonction <code>setStyles()</code> pour mettre à jour le style de la page, etc.</p>
+
+<p>Nous avons aussi inclu un handler <code>onchange</code> sur chaque élément du formulaire, ainsi les données et le style sont mis à jour quelque soit la valeur du formulaire qui a changé:</p>
+
+<pre class="brush: js">bgcolorForm.onchange = populateStorage;
+fontForm.onchange = populateStorage;
+imageForm.onchange = populateStorage;</pre>
+
+<h2 id="Répondre_aux_changements_du_stockage_avec_StorageEvent">Répondre aux changements du stockage avec StorageEvent</h2>
+
+<p>L'événement {{event("StorageEvent")}} est lancé dès lors qu'un changement est fait sur l'objet {{domxref("Storage")}}. Cela ne va pas marcher sur la même page qui a provoqué le changement: c'est vraiment un moyen pour que les autres pages du domaine qui utilisent le stockage local puissent se synchroniser avec tous les changements qui ont été fait.</p>
+
+<p>Les pages des autres domaines ne peuvent pas accéder aux mêmes objets de stockage.</p>
+
+<p>Sur la page d'événement (voir <a class="external" href="https://github.com/mdn/web-storage-demo/blob/gh-pages/event.js">events.js</a>) le seul JavaScript est :</p>
+
+<pre class="brush: js">window.addEventListener('storage', function(e) {
+  document.querySelector('.my-key').textContent = e.key;
+  document.querySelector('.my-old').textContent = e.oldValue;
+  document.querySelector('.my-new').textContent = e.newValue;
+  document.querySelector('.my-url').textContent = e.url;
+  document.querySelector('.my-storage').textContent = e.storageArea;
+});</pre>
+
+<p>Ici nous avons ajouté un event listener à l'objet <code>window </code>qui se lance quand l'objet {{domxref("Storage")}}, associée à l'origine courante, est modifié. Comme vous pouvez le voir ci-dessus, l'objet événement associé à cet événement a de nombreuses propriétés contenant des informations utiles: la clé de la donnée qui a changé, l'ancienne valeur avant le changement, la nouvelle valeur après le changement, l'URL du document qui a changé le stockage et l'objet stockage lui-même.</p>
+
+<h2 id="Supprimer_des_données">Supprimer des données</h2>
+
+<p>l'API de Stockage Web fournit aussi un couple de méthodes simples pour supprimer des données. Nous ne les utilisons pas dans notre démo, mais elles sont simples à ajouter dans votre projet :</p>
+
+<ul>
+ <li>{{domxref("Storage.removeItem()")}} prend un seul argument — la clé de l'élément que vous souhaitez supprimer — et le supprime de l'objet de stockage pour le domaine.</li>
+ <li>{{domxref("Storage.clear()")}} ne prend pas d'argument, et vide l'ensemble des données de l'objet de stockage pour le domaine.</li>
+</ul>
+
+<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('Web Storage')}}</td>
+   <td>{{Spec2('Web Storage')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<h3 id="Window.localStorage"><code>Window.localStorage</code></h3>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Window.localStorage")}}</p>
+
+<h3 id="Window.sessionStorage"><code>Window.sessionStorage</code></h3>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Window.sessionStorage")}}</p>
+
+<p>Tous les navigateurs ont des niveaux de capacité différents pour localStorage et sessionStorage. Voici un <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">détail des capacités de stockage pour différents navigateurs</a>.</p>
+
+<div class="note">
+<p><strong>Note: </strong>depuis iOS 5.1, Safari Mobile stocke les données de localStorage dans le repertoire de cache, qui est parfois sujet à des nettoyages, à la demande de l'OS, typiquement quand l'espace restant est faible.</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Web_Storage_API">Page API du Stockage Web</a></li>
+</ul>
diff --git a/files/fr/web/api/web_workers_api/advanced_concepts_and_examples/index.html b/files/fr/web/api/web_workers_api/advanced_concepts_and_examples/index.html
new file mode 100644
index 0000000000..44716be46c
--- /dev/null
+++ b/files/fr/web/api/web_workers_api/advanced_concepts_and_examples/index.html
@@ -0,0 +1,422 @@
+---
+title: Concepts avancés et exemples
+slug: Web/API/Web_Workers_API/Advanced_concepts_and_examples
+translation_of: Web/API/Web_Workers_API/Using_web_workers
+---
+<div class="summary">
+<p>Cet article fournit de nombreux détails et maints exemples pour illustrer les concepts avancés des web workers.</p>
+</div>
+
+<h2 id="Passage_de_données_copie_et_non_partage">Passage de données : copie, et non partage</h2>
+
+<p>Les données passées entre la page principale et les workers sont <strong>copiées</strong>, et non partagées. Les objets sont sérialisées au moment où ils sont confiés au worker, et consécutivement désérialisés à l'autre bout. La page et le worker <strong>ne partagent pas la même instance</strong>, ainsi au final <strong>une copie</strong> est créée de chaque côté. La plupart des navigateurs implémentent cette caractéristique en tant que <a href="/en/DOM/The_structured_clone_algorithm" title="The structured clone algorithm">clonage structuré</a>.</p>
+
+<p>Avant de poursuivre, créons à des fins didactiques une fonction nommée <code>emulateMessage()</code>, avec pour objectif de simuler le comportement d'une valeur qui est <em>clonée et non partagée</em> durant le passage du <code>worker</code> à la page principale ou inversement :</p>
+
+<pre class="brush: js">function emulateMessage (vVal) {
+    return eval("(" + JSON.stringify(vVal) + ")");
+}
+
+// Tests
+
+// test #1
+var example1 = new Number(3);
+alert(typeof example1); // objet
+alert(typeof emulateMessage(example1)); // nombre
+
+// test #2
+var example2 = true;
+alert(typeof example2); // booléen
+alert(typeof emulateMessage(example2)); // booléen
+
+// test #3
+var example3 = new String("Hello World");
+alert(typeof example3); // objet
+alert(typeof emulateMessage(example3)); // chaîne de caractères
+
+// test #4
+var example4 = {
+    "name": "John Smith",
+    "age": 43
+};
+alert(typeof example4); // objet
+alert(typeof emulateMessage(example4)); // objet
+
+// test #5
+function Animal (sType, nAge) {
+    this.type = sType;
+    this.age = nAge;
+}
+var example5 = new Animal("Cat", 3);
+alert(example5.constructor); // Animal
+alert(emulateMessage(example5).constructor); // Objet</pre>
+
+<p>Une valeur qui est clonée et non partagée est appelée <em>message</em>. Comme vous le savez probablement dès à présent, les <em>messages</em> peuvent être envoyés à et à partir du thread principal en utilisant <code>postMessage()</code>, et l'attribut {{domxref("MessageEvent.data", "data")}} de l'événement <code>message</code> contient les données retournées par le worker.</p>
+
+<p><strong>example.html </strong>(la page principale) :</p>
+
+<pre class="brush: js">var myWorker = new Worker("my_task.js");
+
+myWorker.onmessage = function (oEvent) {
+  console.log("Worker said : " + oEvent.data);
+};
+
+myWorker.postMessage("ali");</pre>
+
+<p><strong>my_task.js</strong> (leworker) :</p>
+
+<pre class="brush: js">postMessage("I\'m working before postMessage(\'ali\').");
+
+onmessage = function (oEvent) {
+  postMessage("Hi " + oEvent.data);
+};</pre>
+
+<p>L'algorithme de <a href="/en-US/docs/Web/Guide/DOM/The_structured_clone_algorithm" style="line-height: 1.572;" title="The structured clone algorithm">clonage structurée</a> peut accepter du JSON et quelques autres choses impossibles en JSON — comme les références circulaires.</p>
+
+<h3 id="Exemples_de_passages_de_données">Exemples de passages de données</h3>
+
+<h4 id="Exemple_1_Créer_un_eval()_asynchrone_générique">Exemple #1 : Créer un "<code>eval() </code>asynchrone" générique</h4>
+
+<p>L'exemple suivant montre comment utiliser un worker afin d'exécuter <strong>de manière asynchrone</strong> n'importe quel code JavaScript permis dans un worker, au moyen d'une méthode <a href="/en-US/docs/JavaScript/Reference/Global_Objects/eval" title="/en-US/docs/JavaScript/Reference/Global_Objects/eval"><code>eval()</code></a> appelée dans le worker :</p>
+
+<pre class="brush: js">// Syntaxe : asyncEval(code[, listener])
+
+var asyncEval = (function () {
+
+  var aListeners = [], oParser = new Worker("data:text/javascript;charset=US-ASCII,onmessage%20%3D%20function%20%28oEvent%29%20%7B%0A%09postMessage%28%7B%0A%09%09%22id%22%3A%20oEvent.data.id%2C%0A%09%09%22evaluated%22%3A%20eval%28oEvent.data.code%29%0A%09%7D%29%3B%0A%7D");
+
+  oParser.onmessage = function (oEvent) {
+    if (aListeners[oEvent.data.id]) { aListeners[oEvent.data.id](oEvent.data.evaluated); }
+    delete aListeners[oEvent.data.id];
+  };
+
+
+  return function (sCode, fListener) {
+    aListeners.push(fListener || null);
+    oParser.postMessage({
+      "id": aListeners.length - 1,
+      "code": sCode
+    });
+  };
+
+})();</pre>
+
+<p>La data URI est équivalente à une requête réseau, avec la réponse suivante :</p>
+
+<pre>onmessage = function (oEvent) {
+	postMessage({
+		"id": oEvent.data.id,
+		"evaluated": eval(oEvent.data.code)
+	});
+}</pre>
+
+<p>Exemples d'utilisation :</p>
+
+<pre class="brush: js">// message d'alerte asynchrone...
+asyncEval("3 + 2", function (sMessage) {
+    alert("3 + 2 = " + sMessage);
+});
+
+// affichage asynchrone d'un message...
+asyncEval("\"Hello World!!!\"", function (sHTML) {
+    document.body.appendChild(document.createTextNode(sHTML));
+});
+
+// néant asynchrone...
+asyncEval("(function () {\n\tvar oReq = new XMLHttpRequest();\n\toReq.open(\"get\", \"http://www.mozilla.org/\", false);\n\toReq.send(null);\n\treturn oReq.responseText;\n})()");</pre>
+
+<h4 id="Exemple_2_passage_avancé_de_données_JSON_et_création_d'un_système_d'échange">Exemple #2 : passage avancé de données JSON et création d'un système d'échange</h4>
+
+<p>Si vous devez passer des données complexes et appeler différentes fonctions à la fois dans la page principale et dans le worker, vous pouvez créer un système comme suit.</p>
+
+<p><strong>example.html</strong> (la page principale) :</p>
+
+<pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta charset="UTF-8"  /&gt;
+&lt;title&gt;MDN Example - Queryable worker&lt;/title&gt;
+&lt;script type="text/javascript"&gt;
+  /*
+    QueryableWorker instances methods:
+     * sendQuery(queryable function name, argument to pass 1, argument to pass 2, etc. etc): calls a Worker's queryable function
+     * postMessage(string or JSON Data): see Worker.prototype.postMessage()
+     * terminate(): terminates the Worker
+     * addListener(name, function): adds a listener
+     * removeListener(name): removes a listener
+    QueryableWorker instances properties:
+     * defaultListener: the default listener executed only when the Worker calls the postMessage() function directly
+  */
+  function QueryableWorker (sURL, fDefListener, fOnError) {
+    var oInstance = this, oWorker = new Worker(sURL), oListeners = {};
+    this.defaultListener = fDefListener || function () {};
+    oWorker.onmessage = function (oEvent) {
+      if (oEvent.data instanceof Object &amp;&amp; oEvent.data.hasOwnProperty("vo42t30") &amp;&amp; oEvent.data.hasOwnProperty("rnb93qh")) {
+        oListeners[oEvent.data.vo42t30].apply(oInstance, oEvent.data.rnb93qh);
+      } else {
+        this.defaultListener.call(oInstance, oEvent.data);
+      }
+    };
+    if (fOnError) { oWorker.onerror = fOnError; }
+    this.sendQuery = function (/* nom de la fonction requêtable, argument à passer 1, argument à passer 2, etc. etc */) {
+      if (arguments.length &lt; 1) { throw new TypeError("QueryableWorker.sendQuery - not enough arguments"); return; }
+      oWorker.postMessage({ "bk4e1h0": arguments[0], "ktp3fm1": Array.prototype.slice.call(arguments, 1) });
+    };
+    this.postMessage = function (vMsg) {
+      //Je ne pense pas qu'il y ait besoin d'appeler la méthode call()
+      //que diriez-vous tout simplement de oWorker.postMessage(vMsg);
+      //le même cas se pose avec terminate
+      //bien, juste un peu plus vite, aucune recherche dans la chaîne des prototypes
+      Worker.prototype.postMessage.call(oWorker, vMsg);
+    };
+    this.terminate = function () {
+      Worker.prototype.terminate.call(oWorker);
+    };
+    this.addListener = function (sName, fListener) {
+      oListeners[sName] = fListener;
+    };
+    this.removeListener = function (sName) {
+      delete oListeners[sName];
+    };
+  };
+
+  // votre worker "queryable" personnalisé
+  var oMyTask = new QueryableWorker("my_task.js" /* , votreEcouteurDeMessageParDefautIci [optional], votreEcouteurDErreurIci [optional] */);
+
+  // vos "écouteurs" personnalisés
+
+  oMyTask.addListener("printSomething", function (nResult) {
+    document.getElementById("firstLink").parentNode.appendChild(document.createTextNode(" The difference is " + nResult + "!"));
+  });
+
+  oMyTask.addListener("alertSomething", function (nDeltaT, sUnit) {
+    alert("Worker waited for " + nDeltaT + " " + sUnit + " :-)");
+  });
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;ul&gt;
+    &lt;li&gt;&lt;a id="firstLink" href="javascript:oMyTask.sendQuery('getDifference', 5, 3);"&gt;What is the difference between 5 and 3?&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="javascript:oMyTask.sendQuery('waitSomething');"&gt;Wait 3 seconds&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="javascript:oMyTask.terminate();"&gt;terminate() the Worker&lt;/a&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p><strong>my_task.js</strong> (le worker) :</p>
+
+<pre class="brush: js">// vos fonctions PRIVEES personnalisées
+
+function myPrivateFunc1 () {
+  // instructions à exécuter
+}
+
+function myPrivateFunc2 () {
+  // instructions à exécuter
+}
+
+// etc. etc.
+
+// vos fonctions PUBLIQUES personnalisées (i.e. requêtables depuis la page principale)
+
+var queryableFunctions = {
+  // exemple #1 : obtenir la différence entre deux nombres :
+  getDifference: function (nMinuend, nSubtrahend) {
+      reply("printSomething", nMinuend - nSubtrahend);
+  },
+  // exemple #2 : attendre trois secondes
+  waitSomething: function () {
+      setTimeout(function() { reply("alertSomething", 3, "seconds"); }, 3000);
+  }
+};
+
+// fonctions système
+
+function defaultQuery (vMsg) {
+  // votre fonction PUBLIQUE par défaut est exécutée seulement lorsque la page principale appelle la méthode queryableWorker.postMessage() directement
+  // instructions à exécuter
+}
+
+function reply (/* listener name, argument to pass 1, argument to pass 2, etc. etc */) {
+  if (arguments.length &lt; 1) { throw new TypeError("reply - not enough arguments"); return; }
+  postMessage({ "vo42t30": arguments[0], "rnb93qh": Array.prototype.slice.call(arguments, 1) });
+}
+
+onmessage = function (oEvent) {
+  if (oEvent.data instanceof Object &amp;&amp; oEvent.data.hasOwnProperty("bk4e1h0") &amp;&amp; oEvent.data.hasOwnProperty("ktp3fm1")) {
+    queryableFunctions[oEvent.data.bk4e1h0].apply(self, oEvent.data.ktp3fm1);
+  } else {
+    defaultQuery(oEvent.data);
+  }
+};</pre>
+
+<p>Il est possible d'échanger le contenu de chaque message page principale -&gt; worker et worker -&gt; page principale.</p>
+
+<h3 id="Passage_de_données_par_transfert_de_propriété_(objets_transférables)">Passage de données par transfert de propriété (objets transférables)</h3>
+
+<p>Google Chrome 17+ et Firefox 18+ proposent une manière additionnelle de passer certains types d'objets (les objets <span class="external">transférables, c'est-à-dire les objets implémentant l'interface {{domxref("Transferable")}}</span>) vers ou à partir d'un worker avec une haute performance. Les objets transférables sont transférés d'un contexte vers un autre sans aucune opération de copie, ce qui conduit à d'énormes gains de performance lorsque de gros ensembles de données sont envoyés. Considérez la chose comme un passage par référence si vous venez du monde C/C++. Cependant, contrairement au passage par référence, la 'version' issue du contexte appelant n'est plus disponible une fois transférée. Sa propriété est transférée au nouveau contexte. Par exemple, lors du transfert d'un {{domxref("ArrayBuffer")}} à partir de votre application principale vers le script d'un worker, le {{domxref("ArrayBuffer")}} original est nettoyé et définitivement inutilisable. Son contenu est (tout à fait littéralement) transféré au contexte du worker.</p>
+
+<pre class="brush: js">// Crée un "fichier" de 32MB et le remplit.
+var uInt8Array = new Uint8Array(1024*1024*32); // 32MB
+for (var i = 0; i &lt; uInt8Array.length; ++i) {
+  uInt8Array[i] = i;
+}
+
+worker.postMessage(uInt8Array.buffer, [uInt8Array.buffer]);
+</pre>
+
+<div class="note">
+<p><strong>Remarque </strong>: pour plus d'information sur les objets transférables, la performance et la détection de fonctionnalité de cette méthode, lisez <a href="http://updates.html5rocks.com/2011/12/Transferable-Objects-Lightning-Fast">Transferable Objects: Lightning Fast!</a> sur HTML5 Rocks.</p>
+</div>
+
+<h2 id="Workers_embarqués">Workers embarqués</h2>
+
+<p>Il n'y a pas une manière "officielle" d'embarquer le code d'un worker dans une page web, comme les éléments {{ HTMLElement("script") }} le font pour les scripts normaux. Mais un élément {{ HTMLElement("script") }} qui n'aurait pas d'attribut <code>src</code> et dont l'attribut <code>type</code> n'identifierait pas un type MIME exécutable peut être considéré comme un élément de bloc de données dont JavaScript peut faire usage.  Les "blocs de données" sont une caractéristique plus générale d'HTML5 qui peuvent contenir presque n'importe quelles données textuelles. Ainsi, un worker pourrait être embarqué de cette façon :</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta charset="UTF-8" /&gt;
+&lt;title&gt;MDN Example - Embedded worker&lt;/title&gt;
+&lt;script type="text/js-worker"&gt;
+  // Ce script NE SERA PAS traité par les moteurs JS parce que son type MIME est text/js-worker.
+  var myVar = "Hello World!";
+  // Le reste du code de votre worker commence ici.
+&lt;/script&gt;
+&lt;script type="text/javascript"&gt;
+  // Ce script SERA analysé par les moteurs JS engines parce que son type MIME est text/javascript.
+  function pageLog (sMsg) {
+    // Utilisation d'un fragment : le navigateur réaffichera/réorganisera le DOM seulement une fois.
+    var oFragm = document.createDocumentFragment();
+    oFragm.appendChild(document.createTextNode(sMsg));
+    oFragm.appendChild(document.createElement("br"));
+    document.querySelector("#logDisplay").appendChild(oFragm);
+  }
+&lt;/script&gt;
+&lt;script type="text/js-worker"&gt;
+  // Ce script NE SERA PAS traité par les moteurs JS parce que son type MIME est text/js-worker.
+  onmessage = function (oEvent) {
+    postMessage(myVar);
+  };
+  // Le reste du code de votre worker commence ici.
+&lt;/script&gt;
+&lt;script type="text/javascript"&gt;
+  // Ce script SERA analysé par les moteurs JS engines parce que son type MIME est text/javascript.
+
+  // Dans le passé... :
+  // blob builder a existé
+  // ...mais nous utilisons désormais Blob...:
+  var blob = new Blob(Array.prototype.map.call(document.querySelectorAll("script[type=\"text\/js-worker\"]"), function (oScript) { return oScript.textContent; }),{type: "text/javascript"});
+
+  // Création d'une nouvelle propriété document.worker contenant tous nos scripts "text/js-worker".
+  document.worker = new Worker(window.URL.createObjectURL(blob));
+
+  document.worker.onmessage = function (oEvent) {
+    pageLog("Received: " + oEvent.data);
+  };
+
+  // Démarrage du worker.
+  window.onload = function() { document.worker.postMessage(""); };
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;&lt;div id="logDisplay"&gt;&lt;/div&gt;&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Le worker embarqué est maintenant imbriqué dans une nouvelle propriété personnalisée <code>document.worker</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Cette section fournit plusieurs exemples sur la façon d'utiliser les workers DOM.</p>
+
+<h3 id="Réaliser_des_calculs_en_arrière-plan">Réaliser des calculs en arrière-plan</h3>
+
+<p>Les workers sont principalement utiles pour permettre à votre code de réaliser des calculs très consommateur en CPU sans bloquer le thread de l'interface utilisateur. Dans cet exemple, un worker est utilisé pour calculer la suite de Fibonacci.</p>
+
+<h4 id="Le_code_JavaScript">Le code JavaScript</h4>
+
+<p>Le code JavaScript suivant est stocké dans le fichier "fibonacci.js" référencé par le fichier HTML dans la prochaine section.</p>
+
+<pre class="brush: js">var results = [];
+
+function resultReceiver(event) {
+  results.push(parseInt(event.data));
+  if (results.length == 2) {
+    postMessage(results[0] + results[1]);
+  }
+}
+
+function errorReceiver(event) {
+  throw event.data;
+}
+
+onmessage = function(event) {
+  var n = parseInt(event.data);
+
+  if (n == 0 || n == 1) {
+    postMessage(n);
+    return;
+  }
+
+  for (var i = 1; i &lt;= 2; i++) {
+    var worker = new Worker("fibonacci.js");
+    worker.onmessage = resultReceiver;
+    worker.onerror = errorReceiver;
+    worker.postMessage(n - i);
+  }
+ };</pre>
+
+<p>Le worker affecte à la propriété <code>onmessage</code>  une fonction qui recevra les messages envoyés lorsque la méthode  <code>postMessage()</code> de l'objet worker est appelée (remarquez que cela diffère de définir une <em>variable</em> globale de ce nom, ou de définir une <em>fonction</em> avec ce nom.   <code>var onmessage</code> <code>et function onmessage</code> définissent des propriétés globales avec ces noms, mais elles n'enregistrent pas la fonction pour recevoir les messages envoyés par la page web qui a créé le worker). Au démarrage de la récursion, il engendre ainsi de nouvelles copies de lui-même pour gérer chacune des itérations du calcul.</p>
+
+<h4 id="Le_code_HTML">Le code HTML</h4>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="UTF-8"  /&gt;
+    &lt;title&gt;Test threads fibonacci&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+  &lt;div id="result"&gt;&lt;/div&gt;
+
+  &lt;script language="javascript"&gt;
+
+    var worker = new Worker("fibonacci.js");
+
+    worker.onmessage = function(event) {
+      document.getElementById("result").textContent = event.data;
+      dump("Got: " + event.data + "\n");
+    };
+
+    worker.onerror = function(error) {
+      dump("Worker error: " + error.message + "\n");
+      throw error;
+    };
+
+    worker.postMessage("5");
+
+  &lt;/script&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>La page web crée un élément <code>div</code> avec l'ID  <code>result</code> , qui sera utilisé pour afficher le résultat, puis engendre le worker.  Après création du worker, le gestionnaire <code>onmessage</code> est configuré pour afficher les résultats en renseignant le contenu de l'élément <code>div</code>, et le gestionnaire <code>onerror</code> est configuré pour <a class="external" href="/en/Debugging_JavaScript#dump()" title="https://developer.mozilla.org/editor/fckeditor/core/editor/en/Debugging_JavaScript#dump()">capturer</a> le message d'erreur.</p>
+
+<p>Finalement, un message est envoyé au worker pour le démarrer.</p>
+
+<p><a class="external" href="/samples/workers/fibonacci" title="https://developer.mozilla.org/samples/workers/fibonacci/">Tester cet exemple</a>.</p>
+
+<h3 id="Réaliser_des_ES_web_en_arrière-plan">Réaliser des E/S web en arrière-plan</h3>
+
+<p>Vous pouvez trouver un tel exemple dans l'article <a class="internal" href="/En/Using_workers_in_extensions" title="En/Using workers in extensions">Using workers in extensions</a> .</p>
+
+<h3 id="Répartir_des_tâches_entre_plusieurs_workers">Répartir des tâches entre plusieurs workers</h3>
+
+<p>Les ordinateurs multi-coeur étant de plus en plus répandus, il est souvent utile de répartir le calcul de tâches complexes entre différents workers afin de tirer partie des coeurs de ces multiprocesseurs.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Workers_API">API Web Workers</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Workers_API/basic_usage">Utilisation des web workers</a></li>
+</ul>
diff --git a/files/fr/web/api/web_workers_api/algorithme_clonage_structure/index.html b/files/fr/web/api/web_workers_api/algorithme_clonage_structure/index.html
new file mode 100644
index 0000000000..dfb8c20bf9
--- /dev/null
+++ b/files/fr/web/api/web_workers_api/algorithme_clonage_structure/index.html
@@ -0,0 +1,153 @@
+---
+title: L’algorithme de clonage structuré
+slug: Web/API/Web_Workers_API/algorithme_clonage_structure
+translation_of: Web/API/Web_Workers_API/Structured_clone_algorithm
+---
+<p>L’algorithme de clonage structuré est un nouvel algorithme <a class="external" href="http://www.w3.org/html/wg/drafts/html/master/infrastructure.html#safe-passing-of-structured-data" title="http://www.w3.org/TR/html5/common-dom-interfaces.html#safe-passing-of-structured-data">défini par la spécification HTML5</a> pour sérialiser les objets JavaScript complexes. Il est plus puissant que <a href="/en/JSON" title="en/JSON">JSON</a> en cela qu’il supporte la sérialisation d’objets contenant des graphes cycliques — des objets peuvent faire référence à des objets faisant référence à d’autres objets dans le même graphe. De plus, dans certains cas, l’algorithme de clonage structuré peut être plus efficace que JSON.</p>
+
+<p>L’algorithme, essentiellement, parcourt tous les champs de l’objet original, copiant les valeurs de chaque champ dans un nouvel objet. Si un champ est lui-même un objet avec des champs, ces champs sont parcourus de manière récursive jusqu’à ce que chaque champ et sous-champ aient été copié dans le nouvel objet.</p>
+
+<h2 id="Avantages_par_rapport_à_JSON">Avantages par rapport à JSON</h2>
+
+<p>Il y a quelques avantages notables à utiliser l’algorithme de clonage structuré plutôt que JSON :</p>
+
+<ul>
+ <li>Le clonage structuré peut copier des objets <a href="/en/JavaScript/Reference/Global_Objects/RegExp" title="en/JavaScript/Reference/Global Objects/regexp"><code>RegExp</code></a>.</li>
+ <li>Le clonage structuré peut copier des objets {{ domxref("Blob") }}, {{ domxref("File") }} et {{ domxref("FileList") }}.</li>
+ <li>Le clonage structuré peut copier des objets {{ domxref("ImageData") }}. Les dimensions du {{ domxref("CanvasPixelArray") }} du clone correspondront à celles de l’original, et il recevra une copie des mêmes données de pixels.</li>
+ <li>Le clonage structuré copie correctement les objets contenant des graphes de références cycliques.</li>
+</ul>
+
+<h2 id="Ce_qui_ne_marche_pas_avec_le_clonage_structuré">Ce qui ne marche pas avec le clonage structuré</h2>
+
+<ul>
+ <li>Les objets <a href="/en/JavaScript/Reference/Global_Objects/Error" title="en/JavaScript/Reference/Global Objects/Error"><code>Error</code></a> et <a href="/en/JavaScript/Reference/Global_Objects/Function" title="en/JavaScript/Reference/Global Objects/Function"><code>Function</code></a> ne peuvent pas être copiés par l’algorithme de clonage structuré ; toute tentative de le faire émettra une exception <code>DATA_CLONE_ERR</code>.</li>
+ <li>De la même manière, toute tentative de cloner des nœuds DOM émettra une exception <code>DATA_CLONE_ERR</code>.</li>
+ <li>Certains paramètres d’objets ne sont pas préservés :
+  <ul>
+   <li>Le champ <code>lastIndex</code> des objets <a href="/en/JavaScript/Reference/Global_Objects/RegExp" title="en/JavaScript/Reference/Global Objects/regexp"><code>RegExp</code></a> n’est pas préservé.</li>
+   <li>Les descripteurs de propriétés, accesseurs et mutateurs (ainsi que les fonctionnalités de métadonnées similaires) ne sont pas copiés. Par exemple, si un objet est marqué en lecture seule <em>via</em> un descripteur de propriété, il sera en lecture et écriture dans le clone, car c’est la condition par défaut.</li>
+   <li>La chaîne de prototypes n’est ni parcourue, ni copiée.</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Types_supportés">Types supportés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Type d’objet</th>
+   <th scope="col">Notes</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Data_structures#Primitive_values">Tous types primitifs</a></td>
+   <td>À l’exception des symboles</td>
+  </tr>
+  <tr>
+   <td>Objet <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Booléen</a></td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>Objet String</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date</a></td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp">RegExp</a></td>
+   <td>Le champ <code>lastIndex</code> n’est pas préservé</td>
+  </tr>
+  <tr>
+   <td>{{ domxref("Blob") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ domxref("File") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ domxref("FileList") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/API/ArrayBuffer">ArrayBuffer</a></td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/API/ArrayBufferView">ArrayBufferView</a></td>
+   <td>Ce qui implique tous les <a href="/en-US/docs/Web/JavaScript/Typed_arrays">tableaux typés</a> tels que <code>Int32Array</code>, etc.</td>
+  </tr>
+  <tr>
+   <td>{{ domxref("ImageData") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></td>
+   <td>Inclut seulement les objets plats (par ex. depuis un objet littéral)</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map">Map</a></td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set">Set</a></td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Alternative_copie_profonde">Alternative : copie profonde</h2>
+
+<p>Si vous voulez une <strong>copie profonde</strong> d’un objet (c’est-à-dire une copie récursive de toutes les propriétés imbriquées, en parcourant la chaîne des prototypes), vous devez employer une autre approche. Ce qui suit est un exemple possible.</p>
+
+<pre class="brush: js">function clone(objectToBeCloned) {
+  // Cas basique.
+  if (!(objectToBeCloned instanceof Object)) {
+    return objectToBeCloned;
+  }
+
+  var objectClone;
+
+  // Filtre les objets spéciaux.
+  var Constructor = objectToBeCloned.constructor;
+  switch (Constructor) {
+    // Implémenter d’autres objets spéciaux ici.
+    case RegExp:
+      objectClone = new Constructor(objectToBeCloned);
+      break;
+    case Date:
+      objectClone = new Constructor(objectToBeCloned.getTime());
+      break;
+    default:
+      objectClone = new Constructor();
+  }
+
+  // Clone chaque propriété.
+  for (var prop in objectToBeCloned) {
+    objectClone[prop] = clone(objectToBeCloned[prop]);
+  }
+
+  return objectClone;
+}
+</pre>
+
+<div class="note"><strong>  Note :</strong> Cet algorithme ne prend en charge que les objets spéciaux <a href="/en/JavaScript/Reference/Global_Objects/RegExp" title="RegExp"><code>RegExp</code></a>, <a href="/en/JavaScript/Reference/Global_Objects/Array" title="Array"><code>Array</code></a> et <a href="/en/JavaScript/Reference/Global_Objects/Date" title="Date"><code>Date</code></a>. Vous pouvez implémenter d’autres cas spéciaux selon vos besoins.</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/html5/infrastructure.html#safe-passing-of-structured-data" title="http://www.w3.org/TR/html5/common-dom-interfaces.html#safe-passing-of-structured-data">Spécification HTML5 : Passage sécurisé de données structurées</a></li>
+ <li>{{ domxref("window.history") }}</li>
+ <li>{{ domxref("window.postMessage()") }}</li>
+ <li><a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a></li>
+ <li><a href="/en-US/docs/Components.utils.cloneInto">Components.utils.cloneInto</a></li>
+</ul>
diff --git a/files/fr/web/api/web_workers_api/index.html b/files/fr/web/api/web_workers_api/index.html
new file mode 100644
index 0000000000..e218058f53
--- /dev/null
+++ b/files/fr/web/api/web_workers_api/index.html
@@ -0,0 +1,96 @@
+---
+title: API Web Workers
+slug: Web/API/Web_Workers_API
+tags:
+  - API
+  - DOM
+translation_of: Web/API/Web_Workers_API
+---
+<article class="approved">
+<header>{{DefaultAPISidebar("Web Workers API")}}</header>
+</article>
+
+<p>Les <strong>Web Workers</strong> sont un mécanisme grâce auquel les instructions d'un script peuvent être exécutés dans un thread en arrière-plan séparé du thread d'exécution principal d'une application web. Cela a pour avantage qu'un traitement laborieux peut être réalisé dans un thread séparé, permettant au thread principal (généralement l'interface utilisateur) de fonctionner sans blocage ni ralentissement.</p>
+
+<h2 id="Concepts_et_utilisation_des_Web_Workers">Concepts et utilisation des Web Workers</h2>
+
+<p>Un worker est un objet créé en utilisant un constructeur (e.g. {{domxref("Worker.Worker", "Worker()")}}) qui exécute un fichier JavaScript nommé — ce fichier contient le code que doit exécuter le thread du worker; les workers s'exécutent dans un autre contexte global qui est différent du contexte actuel {{domxref("window")}}. Ce contexte est représenté par un objet {{domxref("DedicatedWorkerGlobalScope")}} dans le cas des workers dédiés (workers standards utilisés par un script unique; les workers partagés utilisent {{domxref("SharedWorkerGlobalScope")}}).</p>
+
+<p>Vous pouvez exécuter quelque code que ce soit à l'intérieur du thread du worker, avec quelques exceptions cependant. Par exemple, vous ne pouvez pas directement manipuler le DOM à partir d'un worker, ou utiliser des méthodes et des propriétés par défaut de l'objet {{domxref("window")}}. Mais vous pouvez utiliser un grand nombre des éléments disponibles sous <code>window</code>, comprenant les <a href="/fr/docs/WebSockets">WebSockets</a>, et les mécanismes de stockage de données tels qu'<a href="/fr/docs/IndexedDB">IndexedDB</a> et l'<a href="/en-US/docs/Web/API/Data_Store_API">API Data Store</a> spécifique à Firefox OS. Consultez <a href="/fr/docs/Web/API/Worker/Functions_and_classes_available_to_workers">Les fonctions et classes accessibles aux workers</a> pour plus de détails.</p>
+
+<p>Les données sont envoyées entre les workers et le thread principal au moyen d'un sytème de messages — des deux côtés les messages sont envoyés en utilisant la méthode <code>postMessage()</code>, et la réponse leur parvient au moyen du gestionnaire d'événement <code>onmessage</code> (le message est contenu dans l'attribut <code>data</code> de l'événement {{event("Message")}}.) Les données sont copiées plutôt que partagées.</p>
+
+<p>Les workers peuvent à leur tour engendrer de nouveaux workers, aussi longtemps que ces workers partagent la même origine que la page parente.  De plus, les workers peuvent utiliser <a class="internal" href="/fr/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a> pour les E/S réseau, à l'exception que les attributs <code>responseXML</code> et <code>channel</code> de <code>XMLHttpRequest</code> retournent toujours <code>null</code>.</p>
+
+<p>En plus des workers dédiés, il y a d'autres types de worker :</p>
+
+<ul>
+ <li>Les workers partagés sont des workers qui peuvent être utilisés par de multiples scripts s'exécutant dans différentes fenêtres, IFrames, etc., aussi longtemps qu'ils sont dans le même domaine que le worker. Leur fonctionnement est un petit plus complexe que les workers dédiés — les scripts doivent communiquer via un port actif. Consultez {{domxref("SharedWorker")}} pour plus de détails.</li>
+ <li>Les <a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorkers</a> fonctionnent essentiellement comme des serveurs proxy placés entre des applications web, et le navigateur et le réseau (lorsque disponibles). Ils sont destinés (entre autres choses) à permettre la création de véritables expériences déconnectées, interceptant les requêtes du réseau et prenant des décisions appropriées en fonction de la disponibilité du réseau et de la mise à jours des ressources situées sur le serveur. Ils permettront aussi d'accéder à des notifications poussées (push) et à des APIs synchronisées en arrière-plan.</li>
+ <li>Les Workers Chrome sont un type de worker spécifique à Firefox que vous pouvez utiliser si vous développez des extensions et que vous voulez y utiliser des workers et avoir accès aux <a href="/fr/docs/Mozilla/js-ctypes">js-ctypes</a> dans votre worker. Consulter {{domxref("ChromeWorker")}} pour plus de détails. </li>
+ <li>Les <a href="/fr/docs/Web/API/Web_Audio_API#Audio_Workers">Audio Workers</a> donne la possibilité d'effectuer directement dans le contexte d'un worker web un traitement audio scripté.</li>
+</ul>
+
+<div class="blockIndicator note">
+<p>Remarque: Selon les <a href="https://html.spec.whatwg.org/multipage/workers.html#runtime-script-errors-2">Spécifications de Web Worker</a>, les erreurs dans les workers ne devraient pas déborder (voir {{bug(1188141)}}). Cela a été implémenté dans Firefox 42.</p>
+</div>
+
+<h2 id="Les_interfaces_Web_Worker">Les interfaces Web Worker</h2>
+
+<dl>
+ <dt>{{domxref("AbstractWorker")}}</dt>
+ <dd>Propriétés et méthodes abstraites communes à tous les types de workers (i.e. {{domxref("Worker")}} ou {{domxref("SharedWorker")}}).</dd>
+ <dt>{{domxref("Worker")}}</dt>
+ <dd>Représente le thread d'un worker en cours d'exécution, vous permettant de passer des messages au code du worker en cours d'exécution.</dd>
+ <dt>{{DOMxRef("WorkerLocation")}}</dt>
+ <dd>Défini la localisation du scripte exécuté par le <a href="/fr/docs/Web/API/Worker">Worker</a>.</dd>
+ <dt>{{domxref("SharedWorker")}}</dt>
+ <dd>Représente un type spécifique de worker qui peut être <em>accédé</em> à partir de plusieurs contextes de navigation, à savoir plusieurs fenêtres, iframes ou même workers.</dd>
+ <dt>{{domxref("WorkerGlobalScope")}}</dt>
+ <dd>Représente le contexte générique de tout worker (il joue le même rôle que {{domxref("Window")}} pour un contenu web normal). Les différents types de worker ont un contexte d'objets qui hérite de cette interface et ajoute des fonctionnalités supplémentaires.</dd>
+ <dt>{{domxref("DedicatedWorkerGlobalScope")}}</dt>
+ <dd>Représente le contexte d'un worker dédié, héritant de {{domxref("WorkerGlobalScope")}} et ajoutant des fonctionnalités spécifiques.</dd>
+ <dt>{{domxref("SharedWorkerGlobalScope")}}</dt>
+ <dd>Représente le contexte d'un worker partagé, héritant de {{domxref("WorkerGlobalScope")}} et ajoutant des fonctionnalités spécifiques.</dd>
+ <dt>{{domxref("WorkerNavigator")}}</dt>
+ <dd>Représente l'identité et l'état de l'agent utilisateur (le client):</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Nous avons créé deux simples démos pour illustrer des usages basiques :</p>
+
+<ul>
+ <li><a href="https://github.com/mdn/simple-web-worker">Exemple basique d'un worker dédié</a> (<a href="http://mdn.github.io/simple-web-worker/">lancer le worker dédié</a>).</li>
+ <li><a href="https://github.com/mdn/simple-shared-worker">Exemple basique d'un worker partagé</a> (<a href="http://mdn.github.io/simple-shared-worker/">lancer le worker partagé</a>).</li>
+</ul>
+
+<p>Vous pouvez obtenir plus d'informations sur le fonctionnement de ces démos dans notre <a href="/fr/docs/Utilisation_des_web_workers">guide d'utilisation des web workers</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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "workers.html#workers", "Web Workers")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Utilisation_des_web_workers">Utilisation des web workers</a></li>
+ <li><a href="/fr/docs/Web/API/Worker">L'interface Worker</a></li>
+ <li><a href="/fr/docs/Web/API/SharedWorker">L'interface SharedWorker</a></li>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">L'API ServiceWorker</a></li>
+ <li><a href="/fr/docs/Web/API/Worker/Functions_and_classes_available_to_workers">Les fonctions et classes accessibles aux workers</a></li>
+ <li><a href="/en-US/docs/Web/API/ChromeWorker">ChromeWorker</a> : pour l'utilisation des workers dans un code privilégié (chrome)</li>
+</ul>
diff --git a/files/fr/web/api/web_workers_api/utilisation_des_web_workers/index.html b/files/fr/web/api/web_workers_api/utilisation_des_web_workers/index.html
new file mode 100644
index 0000000000..b1330f34bf
--- /dev/null
+++ b/files/fr/web/api/web_workers_api/utilisation_des_web_workers/index.html
@@ -0,0 +1,633 @@
+---
+title: Utilisation des web workers
+slug: Web/API/Web_Workers_API/Utilisation_des_web_workers
+tags:
+  - Avancé
+  - Guide
+  - JavaScript
+  - Web Workers
+translation_of: Web/API/Web_Workers_API/Using_web_workers
+---
+<div>{{DefaultAPISidebar("Web Workers API")}}</div>
+
+<p><span class="seoSummary">Les <em>Web Workers</em> sont un outil permettant au contenu web d'exécuter des scripts dans des tâches (<em>threads</em>) d'arrière-plan. Le <em>thread</em> associé au <em>worker</em> peut réaliser des tâches sans qu'il y ait d'interférence avec l'interface utilisateur. De plus, les <em>web workers</em> peuvent réaliser des opérations d'entrée/sortie grâce à <code><a class="internal" href="/fr/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> (bien que les attributs <code>responseXML</code> et <code>channel</code> soient nécessairement vides dans ces cas). Une fois créé, un <em>worker</em> peut envoyer des messages au code JavaScript qui l'a créé. De même, le script initial peut envoyer des messages au <em>worker</em>. Cette communication s'effectue grâce à des gestionnaires d'évènements.</span> Dans cet article, nous verrons une introduction à l'utilisation des <em>web workers</em>.</p>
+
+<h2 id="LAPI_Web_Workers">L'API Web Workers</h2>
+
+<p>Un <em>worker</em> est un objet créé à l'aide d'un constructeur (par exemple {{domxref("Worker.Worker", "Worker()")}}) et qui exécute un fichier JavaScript donné. Ce fichier contient le code qui sera exécuté par le <em>thread</em> du <em>worker</em>. Les <em>workers</em> sont exécutés dans un contexte global qui n'est pas celui du document (généralement {{domxref("window")}}). Aussi, si, dans un <em>worker</em>, on utilise {{domxref("window")}} pour accéder à la portée globale (plutôt que {{domxref("window.self","self")}}), cela provoquera une erreur.</p>
+
+<p>Le contexte du <em>worker</em> est représenté par un objet {{domxref("DedicatedWorkerGlobalScope")}} pour les <em>workers</em> dédiés et par un objet {{domxref("SharedWorkerGlobalScope")}} sinon. Un <em>worker</em> dédié est uniquement accessible au travers du script qui l'a déclenché tandis qu'un <em>worker</em> partagé peut être utilisé par différents scripts.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Voir <a href="/fr/docs/Web/API/Web_Workers_API">la page d'entrée pour l'API Web Workers</a> pour consulter la documentation de référence sur les <em>workers</em> et d'autres guides.</p>
+</div>
+
+<p>Il est possible d'exécuter n'importe quel code JavaScript dans le <em>thread</em> du <em>worker</em>, à l'exception des méthodes de manipulation du DOM ou de certaines propriétés et méthodes rattachées à {{domxref("window")}}. On notera cependant qu'on peut tout à fait utiliser certaines API rendues disponibles via <code>window</code> comme les <a href="/fr/docs/Web/API/WebSockets_API">WebSockets</a>, les API de stockage de données telles que <a href="/fr/docs/Web/API/API_IndexedDB">IndexedDB</a>. Pour plus de détails, voir <a href="/fr/docs/Web/API/Worker/Functions_and_classes_available_to_workers">les fonctions et classes disponibles au sein des <em>workers</em></a>.</p>
+
+<p>Les données sont échangées entre le <em>thread</em> du <em>worker</em> et le <em>thread</em> principal par l'intermédiaire de messages. Chaque partie peut envoyer des messages à l'aide de la méthode <code>postMessage()</code> et réagir aux messages reçus grâce au gestionnaire d'évènement <code>onmessage</code> (le message sera contenu dans l'attribut <code>data</code> de l'évènement {{event("Message")}} associé). Les données sont copiées dans le message, elles ne sont pas partagées.</p>
+
+<p>Les <em>workers</em> peuvent également déclencher la création d'autres <em>workers</em> tant que ceux-ci restent hébergés sur la même origine que la page parente. De plus, les <em>workers</em> pourront utiliser <a class="internal" href="/fr/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a> pour effectuer des opérations réseau mais les attributs <code>responseXML</code> et <code>channel</code> de <code>XMLHttpRequest</code> renverront nécessairement <code>null</code>.</p>
+
+<h2 id="Les_workers_dédiés">Les <em>workers</em> dédiés</h2>
+
+<p>Comme indiqué plus haut, un <em>worker</em> dédié n'est accessible qu'au travers du script qui l'a initié. Dans cette section, nous étudierons le code JavaScript de <a href="https://github.com/mdn/simple-web-worker">notre exemple de <em>worker</em> dédié simple</a>. Dans cet exemple, nous souhaitons multiplier deux nombres. Ces nombres sont envoyés à un <em>worker</em> dédié puis le résultat est renvoyé à la page et affiché.</p>
+
+<p>Cet exemple est assez simple mais permet d'introduire les concepts de base autour des <em>workers</em>. Nous verrons certains détails plus avancés dans la suite de cet article.</p>
+
+<h3 id="Détecter_la_possibilité_dutiliser_les_workers">Détecter la possibilité d'utiliser les <em>workers</em></h3>
+
+<p>Afin de gérer une meilleure amélioration progressive, une rétro-compatibilité et de présenter des messages d'erreur adéquats, il pourra être utile d'envelopper le code relatif au <em>worker</em> de la façon suivante (<a href="https://github.com/mdn/simple-web-worker/blob/gh-pages/main.js">main.js</a>) :</p>
+
+<pre class="brush: js">if (window.Worker) {
+  ...
+}</pre>
+
+<h3 id="Initier_un_worker_dédié">Initier un <em>worker</em> dédié</h3>
+
+<p>La création d'un nouveau <em>worker</em> est assez simple. On appellera le constructeur {{domxref("Worker.Worker", "Worker()")}} en indiquant l'URI du script à exécuter dans le <em>thread</em> associé au <em>worker</em> (<a href="https://github.com/mdn/simple-web-worker/blob/gh-pages/main.js">main.js</a>) :</p>
+
+<div style="overflow: hidden;">
+<pre class="brush: js">var monWorker = new Worker('worker.js');
+</pre>
+</div>
+
+<h3 id="Envoyer_des_messages_au_worker_et_y_réagir">Envoyer des messages au <em>worker</em> et y réagir</h3>
+
+<p>L'intérêt principal des <em>workers</em> repose sur l'échange de messages à l'aide de la méthode {{domxref("Worker.postMessage", "postMessage()")}} et grâce au gestionnaire d'évènement {{domxref("Worker.onmessage", "onmessage")}}. Lorsqu'on souhaite envoyer un message au <em>worker</em>, on enverra des messages de la façon suivante (<a href="https://github.com/mdn/simple-web-worker/blob/gh-pages/main.js">main.js</a>) :</p>
+
+<pre class="brush: js">premierNombre.onchange = function() {
+  monWorker.postMessage([premierNombre.value, deuxiemeNombre.value]);
+  console.log('Message envoyé au worker');
+}
+
+deuxiemeNombre.onchange = function() {
+  monWorker.postMessage([premierNombre.value, deuxiemeNombre.value]);
+  console.log('Message envoyé au worker');
+}</pre>
+
+<p>Ici, nous disposons de deux éléments {{htmlelement("input")}} représentés par les variables <code>premierNombre</code> et <code>deuxiemeNombre</code>. Lorsque l'un de ces deux champs est modifié, on utilise <code>monWorker.postMessage([premierNombre.value, deuxiemeNombre.value])</code> afin d'envoyer les deux valeurs au <em>worker</em> dans un tableau. Les messages peuvent être utilisés pour échanger n'importe quel type de valeur.</p>
+
+<p>Dans le <em>worker</em>, on peut réagir au message reçu grâce à un gestionnaire d'évènement comme celui-ci (<a href="https://github.com/mdn/simple-web-worker/blob/gh-pages/worker.js">worker.js</a>) :</p>
+
+<pre class="brush: js">onmessage = function(e) {
+  console.log('Message reçu depuis le script principal.');
+  var workerResult = 'Résultat : ' + (e.data[0] * e.data[1]);
+  console.log('Envoi du message de retour au script principal');
+  postMessage(workerResult);
+}</pre>
+
+<p>Le gestionnaire <code>onmessage</code> permet d'exécuter du code lorsqu'un message est reçu. Le message même est disponible grâce à l'attribut <code>data</code> de l'évènement. Dans cet exemple, nous multiplions simplement les deux nombres avant d'utiliser <code>postMessage()</code> à nouveau afin d'envoyer le résultat via un message destiné au <em>thread</em> principal.</p>
+
+<p>De retour dans le <em>thread</em> principal, nous pouvons utiliser <code>onmessage</code> à nouveau pour réagir à la réponse provenant du <em>worker</em> :</p>
+
+<pre class="brush: js">monWorker.onmessage = function(e) {
+  resultat.textContent = e.data;
+  console.log('Message reçu depuis le worker');
+}</pre>
+
+<p>Ici, nous récupérons les données grâce à l'attribut <code>data</code> de l'évènement et nous mettons à jour le contenu du paragraphe avec l'attribut <code>textContent</code> de l'élément. Ainsi, l'utilisateur peut visualiser le résultat du calcul.</p>
+
+<div class="note"><strong>Note :</strong> On notera que <code>onmessage</code> et <code>postMessage()</code> doivent être rattachés à un objet <code>Worker</code> lorsqu'ils sont utilisés depuis le <em>thread</em> principal (ici, c'était <code>monWorker</code>) mais pas lorsqu'ils sont employés depuis le <em>worker</em>. En effet, dans le <em>worker</em>, c'est le <em>worker</em> qui constitue la portée globale et qui met à disposition ces méthodes.</div>
+
+<div class="note"><strong>Note :</strong> Lorsqu'un message est envoyé d'un <em>thread</em> à l'autre, ses données sont copiées. Elles ne sont pas partagées. Voir <a href="#échange">ci-après</a> pour plus d'explications à ce sujet.</div>
+
+<h3 id="Clôturer_un_worker">Clôturer un <em>worker</em></h3>
+
+<p>Si on doit arrêter un <em>worker</em> immédiatement, on pourra utiliser la méthode {{domxref("Worker", "terminate")}} depuis le <em>thread</em> principal :</p>
+
+<pre class="brush: js">monWorker.terminate();</pre>
+
+<p>Lorsque cette méthode exécuté, le <em>thread</em> associé au <em>worker</em> est tué immédiatement.</p>
+
+<h3 id="Gérer_les_erreurs">Gérer les erreurs</h3>
+
+<p>Lorsqu'une erreur d'exécution se produit avec le <em>worker</em>, son gestionnaire d'évènement <code>onerror</code> est appelé et reçoit un évènement <code>error</code> qui implémente l'interface <code>ErrorEvent</code>.</p>
+
+<p>Cet évènement ne bouillonne (<em>bubble</em>) pas et peut être annulé. Pour empêcher les conséquences par défaut, on pourra utiliser la méthode <a class="internal" href="/fr/docs/Web/API/Event/preventDefault"> <code>preventDefault()</code></a> rattachée à l'évènement d'erreur.</p>
+
+<p>L'évènement décrivant l'erreur possède notamment trois propriétés intéressantes :</p>
+
+<dl>
+ <dt><code>message</code></dt>
+ <dd>Un message d'erreur compréhensible par un humain.</dd>
+ <dt><code>filename</code></dt>
+ <dd>Le nom du fichier pour lequel l'erreur s'est produite.</dd>
+ <dt><code>lineno</code></dt>
+ <dd>Le numéro de ligne au sein du fichier responsable de l'erreur.</dd>
+</dl>
+
+<h3 id="Initier_des_workers_fils">Initier des <em>workers</em> fils</h3>
+
+<p>Les <em>workers</em> peuvent également engendrer d'autres <em>workers</em>. Ces <em>workers</em>-fils doivent être hébergés sur la même origine que la page initiale. De plus, les URI des <em>workers-</em>fils sont résolues relativement à l'emplacement du <em>worker</em> père (plutôt que par rapport à la page parente). Ces contraintes permettent de simplifier le suivi des dépendances.</p>
+
+<h3 id="Importer_des_scripts_et_des_bibliothèques">Importer des scripts et des bibliothèques</h3>
+
+<p>Les <em>threads</em> d'exécution des <em>workers</em> peuvent accéder à la fonction globale <code>importScripts()</code>, qui leur permet d'importer des scripts. Cette fonction prend zéro à plusieurs URL en paramètres et importe les ressources associées. Voici quelques exemples valides :</p>
+
+<pre class="brush: js">importScripts();                         /* n'importe rien */
+importScripts('toto.js');                /* importe uniquement "toto.js" */
+importScripts('toto.js', 'truc.js');     /* importe deux scripts */
+importScripts('//example.com/hello.js'); /* importe un script d'une autre origine */</pre>
+
+<p>Lors d'un import, le navigateur chargera chacun des scripts puis l'exécutera. Chaque script pourra ainsi mettre à disposition des objets globaux qui pourront être utilisés par le <em>worker</em>. Si le script ne peut pas être chargé, une exception <code>NETWORK_ERROR</code> sera levée et le code assicé ne sera pas exécuté. Le code exécuté précédemment (y compris celui-ci reporté à l'aide de {{domxref("window.setTimeout()")}}) continuera cependant d'être fonctionnel. Les déclarations de fonction situées <strong>après</strong> <code>importScripts()</code> sont également exécutées car évaluées avant le reste du code.</p>
+
+<div class="note"><strong>Note :</strong> Les scripts peuvent être téléchargés dans n'importe quel ordre mais ils seront exécutés dans l'ordre des arguments passés à <code>importScripts()</code> . Cet exécution est effectuée de façon synchrone et <code>importScripts()</code> ne rendra pas la main tant que l'ensemble des scripts n'auront pas été chargés et exécutés.</div>
+
+<h2 id="Les_workers_partagés">Les <em>workers</em> partagés</h2>
+
+<p>Un <em>worker</em> partagé est accessible par plusieurs scripts (même si ceux-ci proviennent de différentes fenêtres, <em>iframes</em> voire d'autres <em>workers</em>). Dans cette section, nous illustrerons les concepts à l'aide de <a href="https://github.com/mdn/simple-shared-worker">l'exemple simple d'un <em>worker</em> partagé.</a> Cet exemple est semblable à l'exemple utilisé pour le <em>worker</em> dédié. Il diffère car il possède deux fonctions, gérées par deux fichiers de script distincts : une fonction permettant de multiplier deux nombres et une fonction permettant d'élever un nombre au carré. Les deux scripts utilisent le même <em>worker</em> pour réaliser le calcul demandé.</p>
+
+<p>Ici, nous nous intéresserons particulièrement aux différences entre les <em>workers</em> dédiés et les <em>workers</em> partagés. Dans cet exemple, nous aurons deux pages HTML, chacune utilisant du code JavaScript employant le même <em>worker</em>.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Si on peut accéder à un <em>worker</em> partagé depuis différents contextes de navigations, ces contextes de navigation doivent néanmoins partager la même origine (même protocole, même hôte, même port).</p>
+</div>
+
+<div class="note">
+<p><strong>Note :</strong> Dans Firefox, les <em>workers</em> partagés ne peuvent pas être partagés entre les documents chargés en navigation privée et les documents chargés en navigation classique ({{bug(1177621)}}).</p>
+</div>
+
+<h3 id="Initier_un_worker_partagé">Initier un <em>worker</em> partagé</h3>
+
+<p>La création d'un nouveau <em>worker</em> partagé est assez semblable à la création d'un <em>worker</em> dédié. On utilise alors un constructeur différent :</p>
+
+<pre class="brush: js">var monWorker = new SharedWorker('worker.js');</pre>
+
+<p>Une différence fondamentale avec les <em>workers</em> dédiés est l'utilisation d'un objet <code>port</code> pour la communication. Un port sera explicitement ouvert pour être utilisé afin de communiquer avec le <em>worker</em> (dans le cas des <em>workers</em> dédiés, ce port est ouvert implicitement).</p>
+
+<p>La connexion au port doit être démarrée implicitement avec l'utilisation du gestionnaire d'évènement <code>onmessage</code> ou explicitement avec la méthode <code>start()</code> avant qu'un message soit envoyé. On utilisera uniquement <code>start()</code> si l'évènement <code>message</code> est détecté avec la méthode <code>addEventListener()</code>.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Lorsqu'on utilise la méthode <code>start()</code> afin d'ouvrir le port de connexion, celle-ci doit être appelée de part et d'autre (depuis le <em>thread</em> parent <strong>et</strong> depuis le <em>worker</em>) si on souhaite disposer d'une connexion bidirectionnelle.</p>
+</div>
+
+<h3 id="Échanger_des_messages_avec_un_worker_partagé_et_y_réagir">Échanger des messages avec un <em>worker</em> partagé et y réagir</h3>
+
+<p>On peut alors envoyer des messages au <em>worker</em>. Dans le cas d'un <em>worker</em> partagé, la méthode <code>postMessage()</code> doit être appelée via l'objet <code>port</code> (là aussi, vous pouvez étudier le code de <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/multiply.js">multiply.js</a> et <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/square.js">square.js</a>) :</p>
+
+<pre class="brush: js">carreNombre.onchange = function() {
+  monWorker.port.postMessage([carreNombre.value, carreNombre.value]);
+  console.log('Message envoyé au worker');
+}</pre>
+
+<p>Du côté du <em>worker</em>, les choses sont également légèrement plus compliquées (voir <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/worker.js">worker.js</a>) :</p>
+
+<pre class="brush: js">onconnect = function(e) {
+  var port = e.ports[0];
+
+  port.onmessage = function(e) {
+    var workerResult = 'Résultat : ' + (e.data[0] * e.data[1]);
+    port.postMessage(workerResult);
+  }
+}</pre>
+
+<p>On commence par utiliser le gestionnaire <code>onconnect</code> afin de déclencher du code à la connexion au port (c'est-à-dire lorsque le gestionnaire <code>onmessage</code> est déclaré depuis le <em>thread</em> parent ou lorsque la méthode <code>start()</code> est invoquée explicitement depuis le <em>thread</em> parent).</p>
+
+<p>On utilise l'attribut <code>ports</code> de l'évènement afin de récupérer le port utilisé et on le place dans une variable.</p>
+
+<p>Ensuite, sur ce port, on ajoute un gestionnaire d'évènement pour l'évènement <code>message</code> afin de faire les calculs et de renvoyer le résultat au <em>thread</em> principal. En définissant ce gestionnaire pour <code>message</code> dans le <em>thread</em> du <em>worker</em>, on ouvre implicitement le port pour la connexion au <em>thread</em> parent : il n'est donc pas nécessaire d'invoquer <code>port.start()</code>.</p>
+
+<p>Enfin, dans le script de la page, on gère le message du résultat (voir <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/multiply.js">multiply.js</a> et <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/square.js">square.js</a>):</p>
+
+<pre class="brush: js">monWorker.port.onmessage = function(e) {
+  result2.textContent = e.data;
+  console.log('Message reçu depuis le worker');
+}</pre>
+
+<p>Lorsqu'un message provient du port associé au <em>worker</em>, on vérifie son type puis on insère le résultat dans le paragraphe associé.</p>
+
+<h2 id="Sûreté_des_threads">Sûreté des <em>threads</em></h2>
+
+<p>L'interface {{domxref("Worker")}} engendre des <em>threads</em> au sens du système d'exploitation. Certains développeurs avertis pourront se demander si cette communication à base de <em>threads</em> ne peut pas générer d'effets indésirables tels que des situations de compétition (<em>race conditions</em>).</p>
+
+<p>Toutefois, la communication entre les <em>web workers</em> est contrôlée explicitement dans les scripts et il n'y a pas d'accès aux composants ou au DOM qui ne seraient pas sûrs à ce niveau. De plus, la communication entre les <em>threads</em> s'effectue par recopie de données. Aussi, s'il n'est théoriquement pas impossible de ne pas avoir de tels problèmes, il faudrait les chercher pour les provoquer.</p>
+
+<h2 id="Règles_de_sécurité_du_contenu_content_security_policy_CSP">Règles de sécurité du contenu (<em>content security policy</em>, CSP)</h2>
+
+<p>Les <em>workers</em> disposent de leur propre contexte d'exécution, distinct de celui du document qui les a créés. Aussi, en général, les <em>workers</em> ne sont pas gérés par la <a href="/fr/docs/Web/HTTP/CSP">politique de sécurité de contenu</a> du document (ou du <em>worker</em> parent) responsable de leur création. Ainsi, si un document est servi avec l'en-tête suivant :</p>
+
+<pre>Content-Security-Policy: script-src 'self'</pre>
+
+<div>Cette règle empêchera n'importe quel script inclus dans le document d'utiliser <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/eval">eval()</a></code>. Toutefois, si le script génère un <em>worker</em>, le code exécuté par ce <em>worker</em> pourra utiliser <code>eval()</code>.<br>
+<br>
+Pour appliquer une règle de sécurité au <em>worker</em>, il faudra fournir un en-tête <a href="/fr/docs/Web/HTTP/Headers/Content-Security-Policy">Content-Security-Policy</a> approprié pour la requête responsable du service du script du <em>worker</em>.<br>
+<br>
+Si l'origine du script du <em>worker</em> est un identifiant global unique (si son URL utilise le schéma <code>data://</code> ou <code>blob://</code> par exemple), le <em>worker</em> héritera du CSP associé au document responsable de sa création.</div>
+
+<div></div>
+
+<h2 id="Échanger_des_données_avec_les_workers_plus_de_détails"><a id="échange" name="échange">Échanger des données avec les <em>workers</em> : plus de détails</a></h2>
+
+<p>Les données échangées entre le document principal et les <em>workers</em> sont <strong>copiées</strong> et non partagées. Lorsqu'ils sont envoyés au <em>worker</em>, les objets sont sérialisés (puis désérialisés à leur réception). La page et le <em>worker</em> <strong>ne partagent pas le même exemplaire </strong>et on a donc deux versions d'une part et d'autre. La plupart des navigateurs implémentent cette approche avec <a href="/fr/docs/Web/API/Web_Workers_API/algorithme_clonage_structure">une clonage structurel</a>.</p>
+
+<p>Pour illustrer ce point, on prendra une fonction intitulée <code>emulateMessage()</code> et qui simule le comportement d'une valeur clonée (pas partagée) avec un <em>worker</em> attaché à la page principale et réciproquement :</p>
+
+<pre class="brush: js">function emulateMessage(vVal) {
+    return eval('(' + JSON.stringify(vVal) + ')');
+}
+
+// Tests
+
+// test #1
+var example1 = new Number(3);
+console.log(typeof example1); // object
+console.log(typeof emulateMessage(example1)); // number
+
+// test #2
+var example2 = true;
+console.log(typeof example2); // boolean
+console.log(typeof emulateMessage(example2)); // boolean
+
+// test #3
+var example3 = new String('Hello World');
+console.log(typeof example3); // object
+console.log(typeof emulateMessage(example3)); // string
+
+// test #4
+var example4 = {
+    'name': 'John Smith',
+    "age": 43
+};
+console.log(typeof example4); // object
+console.log(typeof emulateMessage(example4)); // object
+
+// test #5
+function Animal(sType, nAge) {
+    this.type = sType;
+    this.age = nAge;
+}
+var example5 = new Animal('Cat', 3);
+console.log(example5.constructor); // Animal
+console.log(emulateMessage(example5).constructor); // Object</pre>
+
+<p>Une valeur qui est clonée et non partagée est appelée un message. Les messages peuvent être envoyés et reçus grâce à <code>postMessage()</code> et au gestionnaire d'évènement pour <code>message</code> (dont l'attribut {{domxref("MessageEvent.data", "data")}} contiendra les données copiées).</p>
+
+<p><strong>example.html</strong> (page principale) :</p>
+
+<pre class="brush: js">var myWorker = new Worker('my_task.js');
+
+myWorker.onmessage = function(oEvent) {
+  console.log('Worker said : ' + oEvent.data);
+};
+
+myWorker.postMessage('ali');</pre>
+
+<p><strong>my_task.js</strong> (le code du <em>worker</em>) :</p>
+
+<pre class="brush: js">postMessage("I\'m working before postMessage(\'ali\').");
+
+onmessage = function(oEvent) {
+  postMessage('Hi ' + oEvent.data);
+};</pre>
+
+<p>L'<a href="/fr/docs/Web/API/Web_Workers_API/algorithme_clonage_structure">algorithme de clonage structurel</a> permet de sérialiser aussi bien des données JSON que d'autres formats et permet notamment de gérer les références circulaires (ce que JSON ne permet pas de gérer nativement).</p>
+
+<h3 id="Les_objets_transférables_-_échanger_des_données_avec_transfert_de_la_propriété">Les objets transférables - échanger des données avec transfert de la propriété</h3>
+
+<p>Chrome 17+ et Firefox 18+ permettent également d'échanger certains types d'objet (qualifiés de transférables et qui implémentent l'interface {{domxref("Transferable")}}) avec des <em>workers</em> et à haute performance. Les objets transférables sont passés d'un contexte à l'autre avec une opération <em><a href="https://en.wikipedia.org/wiki/Zero-copy">zero-copy</a> </em>qui permet d'obtenir des améliorations sensibles lors de l'échange de données volumineuses. On peut voir cela comme un passage de référence du monde C/C++ mais les données qui sont transférées depuis le contexte appelant ne sont plus disponibles dans ce contexte après le transfert. La propriété des données est transférée au nouveau contexte. Ainsi, lorsqu'on transfère un objet {{domxref("ArrayBuffer")}} depuis l'application principale vers le <em>worker</em>, l'objet {{domxref("ArrayBuffer")}} de départ est nettoyé et ne peut plus être utilisé, son contenu est (littéralement) transféré au contexte du <em>worker</em>.</p>
+
+<pre class="brush: js">// Créer un fichier de 32MB et le remplir.
+var uInt8Array = new Uint8Array(1024 * 1024 * 32); // 32MB
+for (var i = 0; i &lt; uInt8Array.length; ++i) {
+  uInt8Array[i] = i;
+}
+
+worker.postMessage(uInt8Array.buffer, [uInt8Array.buffer]);
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Pour plus d'informations quant aux objets transférables, aux performances associées et à la détection de ces fonctionnalités, on pourra lire <a href="https://developers.google.com/web/updates/2011/12/Transferable-Objects-Lightning-Fast">Transferable Objects: Lightning Fast</a>.</p>
+</div>
+
+<h2 id="Workers_embarqués"><em>Workers</em> embarqués</h2>
+
+<p>Il n'existe pas de méthode standard pour embarquer le code d'un worker dans une page web à la façon des éléments {{HTMLElement("script")}}. Toutefois, un élément {{HTMLElement("script")}}, qui ne possède pas d'attribut <code>src</code>, qui possède un attribut <code>type</code> ne correspondant pas à un type MIME exécutable pourra être considéré comme un bloc de données pouvant être utilisé par JavaScript. Ces blocs de données sont une fonctionnalité HTML5 qui permet de transporter n'importe quelle donnée textuelle. On pourrait donc embarquer un <em>worker</em> de cette façon :</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta charset="UTF-8" /&gt;
+&lt;title&gt;Exemple MDN - Worker embarqué&lt;/title&gt;
+&lt;script type="text/js-worker"&gt;
+  // Ce script ne sera pas analysé par le moteur JS car
+  // son type MIME est text/js-worker.
+  var maVar = 'Coucou monde !';
+  // Reste du code du worker.
+&lt;/script&gt;
+&lt;script type="text/javascript"&gt;
+  // Ce script sera analysé par le moteur JS car son type MIME
+  // est text/javascript.
+  function pageLog(sMsg) {
+    // On utilise un fragment afin que le navigateur ne rende/peigne
+    // qu'une seule fois.
+    var oFragm = document.createDocumentFragment();
+    oFragm.appendChild(document.createTextNode(sMsg));
+    oFragm.appendChild(document.createElement('br'));
+    document.querySelector('#logDisplay').appendChild(oFragm);
+  }
+&lt;/script&gt;
+&lt;script type="text/js-worker"&gt;
+  // Ce script ne sera pas analysé par le moteur JS car son type
+  // MIME est text/js-worker.
+  onmessage = function(oEvent) {
+    postMessage(myVar);
+  };
+  // Reste du code du worker
+&lt;/script&gt;
+&lt;script type="text/javascript"&gt;
+  // Ce script sera analysé par le moteur JS car son type MIME est
+  // text/javascript
+
+  var blob = new Blob(Array.prototype.map.call(document.querySelectorAll('script[type=\'text\/js-worker\']'), function (oScript) { return oScript.textContent; }),{type: 'text/javascript'});
+
+  // On crée une nouvelle propriété document.worker qui contient
+  // tous les scripts "text/js-worker".
+  document.worker = new Worker(window.URL.createObjectURL(blob));
+
+  document.worker.onmessage = function(oEvent) {
+    pageLog('Received: ' + oEvent.data);
+  };
+
+  // On démarre le worker.
+  window.onload = function() { document.worker.postMessage(''); };
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;&lt;div id="logDisplay"&gt;&lt;/div&gt;&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Le <em>worker</em> embarqué est désormais injecté dans la propriété <code>document.worker</code>.</p>
+
+<p>On notera également qu'on peut convertir une fonction en un <code>Blob</code> et générer une URL d'objet vers ce blob. Par exemple :</p>
+
+<pre class="brush: js">function fn2workerURL(fn) {
+  var blob = new Blob(['('+fn.toString()+')()'], {type: 'application/javascript'})
+  return URL.createObjectURL(blob)
+}</pre>
+
+<h2 id="Autres_exemples">Autres exemples</h2>
+
+<p>Dans cette section nous voyons d'autres exemples d'application.</p>
+
+<h3 id="Effectuer_des_calculs_en_arrière-plan">Effectuer des calculs en arrière-plan</h3>
+
+<p>Les <em>workers</em> sont notamment utiles pour réaliser des opérations de traitement intensives sans bloquer pour autant le <em>thread</em> responsable de l'interface utilisateur. Dans cet exemple, on utilise un<em> </em><em>worker</em> afin de calculer la suite de Fibonacci.</p>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<p>Le code JavaScript suivant sera enregistré dans le fichier "fibonacci.js" auquel on fera référence dans le document HTML ci-après.</p>
+
+<pre class="brush: js">var results = [];
+
+function resultReceiver(event) {
+  results.push(parseInt(event.data));
+  if (results.length == 2) {
+    postMessage(results[0] + results[1]);
+  }
+}
+
+function errorReceiver(event) {
+  throw event.data;
+}
+
+onmessage = function(event) {
+  var n = parseInt(event.data);
+
+  if (n == 0 || n == 1) {
+    postMessage(n);
+    return;
+  }
+
+  for (var i = 1; i &lt;= 2; i++) {
+    var worker = new Worker('fibonacci.js');
+    worker.onmessage = resultReceiver;
+    worker.onerror = errorReceiver;
+    worker.postMessage(n - i);
+  }
+ };</pre>
+
+<p>On a défini la propriété <code>onmessage</code> avec une fonction qui recevra les messages envoyés au <em>worker</em> via <code>postMessage()</code>. On initie alors la récursion et on déclenche des copies du <em>worker</em> afin de gérer chacune des itérations liées au calcul.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="UTF-8"  /&gt;
+    &lt;title&gt;Test threads fibonacci&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+  &lt;div id="result"&gt;&lt;/div&gt;
+
+  &lt;script language="javascript"&gt;
+
+    var worker = new Worker('fibonacci.js');
+
+    worker.onmessage = function(event) {
+      document.getElementById('result').textContent = event.data;
+      dump('Got: ' + event.data + '\n');
+    };
+
+    worker.onerror = function(error) {
+      console.error('Worker error: ' + error.message + '\n');
+      throw error;
+    };
+
+    worker.postMessage('5');
+
+  &lt;/script&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>Dans la page web, on crée un élément <code>div</code> avec l'identifiant <code>result</code>. C'est cet élément qui sera utilisé afin d'afficher le résultat.</p>
+
+<p>Ensuite, on lance le <em>worker</em>. Après avoir initié le <em>worker</em>, on configure le gestionnaire d'évènement <code>onmessage</code> afin d'afficher le résultat via le <code>div</code>. On configure également le gestionnaire <code>onerror</code> afin d'afficher l'erreur de la console.</p>
+
+<p>Enfin, on envoie un message au <em>worker</em> afin de le démarrer.</p>
+
+<p><a href="https://mdn.github.io/fibonacci-worker/">Essayer cet exemple</a>.</p>
+
+<h3 id="Répartir_des_tâches_entre_plusieurs_workers">Répartir des tâches entre plusieurs <em>workers</em></h3>
+
+<p>Les ordinateurs dotés de plusieurs coeurs se généralisent et il peut s'avérer utile de fragmenter une tâche complexe entre différents <em>workers</em> afin de tirer parti des différents coeurs du processeur.</p>
+
+<h2 id="Autres_workers">Autres <em>workers</em></h2>
+
+<p>En plus des web <em>workers</em> (dédiés et partagés), il existe d'autres types de <em>workers </em>:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">Les service <em>workers</em></a> peuvent notamment servir de serveurs mandataires (<em>proxy</em>) entre les applications web, le navigateur et le réseau (lorsque celui-ci est disponible). Ces <em>workers</em> sont conçus afin de permettre des utilisations hors-ligne en interceptant les requêtes réseau et en déclenchant les actions nécessaires selon que le réseau est disponible ou non et que les ressources souhaitées sont disponibles sur le serveur. Ces <em>workers</em> permettent de déclencher des notifications <em>push</em> et d'utiliser des API de synchronisation en arrière-plan.</li>
+ <li><a href="/fr/docs/Web/API/Web_Audio_API#Audio_processing_in_JavaScript">Les <em>worklets </em>audio</a> permettent de traiter des signaux audios en arrière-plan (fonctionnalité expérimentale).</li>
+</ul>
+
+<h2 id="Fonctions_et_interfaces_disponibles_pour_les_workers">Fonctions et interfaces disponibles pour les <em>workers</em></h2>
+
+<p>La plupart des fonctionnalités JavaScript standard peuvent être utilisées dans les <em>web workers</em>, dont :</p>
+
+<ul>
+ <li>{{domxref("Navigator")}}</li>
+ <li>{{domxref("XMLHttpRequest")}}</li>
+ <li>{{jsxref("Objets_globaux/Array", "Array")}}, {{jsxref("Objets_globaux/Date", "Date")}}, {{jsxref("Objets_globaux/Math", "Math")}} et {{jsxref("Objets_globaux/String", "String")}}</li>
+ <li>{{domxref("WindowTimers.setTimeout")}} et {{domxref("WindowTimers.setInterval")}}</li>
+</ul>
+
+<p>En revanche, un <em>worker</em> ne pourra pas directement manipuler la page parente et notamment le DOM et les objets de la page. Il faudra effectuer ce traitement indirectement, via des messages.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Pour avoir une liste exhaustive des fonctionnalités disponibles pour les <em>workers</em>, voir  <a href="/fr/docs/Web/API/Worker/Functions_and_classes_available_to_workers">les fonctions et interfaces disponibles pour les <em>workers</em></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('HTML WHATWG', '#workers', 'Web workers')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4<sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>10.0</td>
+   <td>10.6<sup>[1]</sup></td>
+   <td>4<sup>[2][5]</sup></td>
+  </tr>
+  <tr>
+   <td><em>Workers</em> partagés</td>
+   <td>4<sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop(29)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10.6</td>
+   <td>5<br>
+    {{CompatNo}} 6.1<sup>[4]</sup></td>
+  </tr>
+  <tr>
+   <td>Echange de données via le clonage structuré</td>
+   <td>13</td>
+   <td>{{CompatGeckoDesktop(8)}}</td>
+   <td>10.0</td>
+   <td>11.5</td>
+   <td>6</td>
+  </tr>
+  <tr>
+   <td>Echange de données via les objets transférables</td>
+   <td>17 {{property_prefix("webkit")}}<br>
+    21</td>
+   <td>{{CompatGeckoDesktop(18)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15</td>
+   <td>6</td>
+  </tr>
+  <tr>
+   <td>Variable globale {{domxref("window.URL", "URL")}}</td>
+   <td>10<sup>[3]</sup><br>
+    23</td>
+   <td>{{CompatGeckoDesktop(21)}}</td>
+   <td>11</td>
+   <td>15</td>
+   <td>6<sup>[3]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome pour Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>4<sup>[1]</sup></td>
+   <td>3.5</td>
+   <td>1.0.1</td>
+   <td>10.0</td>
+   <td>11.5<sup>[1]</sup></td>
+   <td>5.1<sup>[2][5]</sup></td>
+  </tr>
+  <tr>
+   <td>Shared workers</td>
+   <td>{{CompatNo}}</td>
+   <td>4<sup>[1]</sup></td>
+   <td>8</td>
+   <td>1.0.1</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Echange de données via le clonage structuré</td>
+   <td>{{CompatNo}}</td>
+   <td>4</td>
+   <td>8</td>
+   <td>1.0.1</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Echange de données via les objets transférables</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>18</td>
+   <td>1.0.1</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Chrome et Opera provoquent une erreur "<code>Uncaught SecurityError: Failed to construct 'Worker': Script at 'file:///Path/to/worker.js' cannot be accessed from origin 'null'.</code>" lorsqu'on souhaite accéder au <em>worker</em> en local. Il faut un domaine <em>réel</em> pour le faire.</p>
+
+<p>[2] Avec Safari 7.1.2, on peut appeler <code>console.log</code> depuis un <em>worker</em> mais cela n'affichera rien dans la console. Les versions antérieures ne permettent pas d'appeler <code>console.log</code> depuis un <em>worker</em>.</p>
+
+<p>[3] Cette fonctionnalité est préfixée : <code>webkitURL</code>.</p>
+
+<p>[4] Safari a <a href="https://bugs.webkit.org/show_bug.cgi?id=116359">retiré la prise en charge de SharedWorker</a>.</p>
+
+<p>[5] Avec Safari v.12+ (iOS &amp; MacOS), les <em>web workers</em> sont uniquement démarrés après une interaction utilisateur (un clic par exemple). Les <em>workers</em> pourront être créés mais ne seront pas exécutés tant qu'ils n'y aura pas eu d'interaction.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Worker">L'interface <code>Worker</code></a></li>
+ <li><a href="/fr/docs/Web/API/SharedWorker">L'interface <code>SharedWorker</code></a></li>
+ <li><a href="/fr/docs/Web/API/Worker/Functions_and_classes_available_to_workers">Les fonctions disponibles dans les <em>workers</em></a></li>
+</ul>
diff --git a/files/fr/web/api/webgl2renderingcontext/index.html b/files/fr/web/api/webgl2renderingcontext/index.html
new file mode 100644
index 0000000000..a22f6e72b9
--- /dev/null
+++ b/files/fr/web/api/webgl2renderingcontext/index.html
@@ -0,0 +1,280 @@
+---
+title: WebGL2RenderingContext
+slug: Web/API/WebGL2RenderingContext
+tags:
+  - API
+  - Experimental
+  - Reference
+  - WebGL
+  - WebGL2
+translation_of: Web/API/WebGL2RenderingContext
+---
+<div>{{APIRef("WebGL")}} {{SeeCompatTable}}</div>
+
+<p>L'interface <strong>WebGL2RenderingContext</strong> fournit le contexte de rendu OpenGL ES 3.0 pour la surface de dessin d'un élément HTML {{HTMLElement("canvas")}}.</p>
+
+<p>Pour obtenir un objet de cette interface, appelez {{domxref ("HTMLCanvasElement.getContext()", "getContext()")}} sur un élément <code>&lt;canvas&gt;</code>, en fournissant "webgl2" comme argument :</p>
+
+<pre class="brush: js">var canevas = document.getElementById('monCanevas');
+var gl = canevas.getContext('webgl2');
+</pre>
+
+<div class="note">
+<p>WebGL 2 est une extension de WebGL 1. L'interface <code>WebGL2RenderingContext</code> implémente tous les membres de l'interface {{domxref("WebGLRenderingContext")}}. Certaines méthodes du contexte WebGL 1 peuvent accepter des valeurs supplémentaires lorsqu'elles sont utilisées dans un contexte WebGL 2. Vous trouverez cette information sur les pages de référence WebGL 1.</p>
+</div>
+
+<p>Le <a href="/fr-FR/docs/Web/API/WebGL_API/Tutorial">didacticiel WebGL</a> contient plus d'informations, d'exemples et de ressources sur la façon de démarrer avec WebGL.</p>
+
+<h2 id="Constantes">Constantes</h2>
+
+<p>Voir la page des <a href="/fr-FR/docs/Web/API/WebGL_API/Constants">constantes WebGL</a>.</p>
+
+<h2 id="Informations_d'état">Informations d'état</h2>
+
+<dl>
+ <dt>{{domxref("WebGL2RenderingContext.getIndexedParameter()")}}</dt>
+ <dd>Retourne la valeur indexée pour la <code>cible</code> donnée.</dd>
+</dl>
+
+<h2 id="Tampons">Tampons</h2>
+
+<dl>
+ <dt>{{domxref("WebGL2RenderingContext.bufferData()")}}</dt>
+ <dd>Initialise et crée le magasin de données de l'objet tampon.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.bufferSubData()")}}</dt>
+ <dd>Met à jour un sous-ensemble d'un magasin de données d'un objet tampon.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.copyBufferSubData()")}}</dt>
+ <dd>Copie une partie des données d'un tampon vers un autre tampon.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.getBufferSubData()")}}</dt>
+ <dd>Lit les données d'un tampon et les écrit dans un {{jsxref ("ArrayBuffer")}} ou un {{jsxref ("SharedArrayBuffer")}}.</dd>
+</dl>
+
+<h2 id="Tampons_d'image">Tampons d'image</h2>
+
+<dl>
+ <dt>{{domxref("WebGL2RenderingContext.blitFramebuffer()")}}</dt>
+ <dd>Transfère un bloc de pixels du tampon d'image lu vers le tampon d'image de dessin.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.framebufferTextureLayer()")}}</dt>
+ <dd>Attache une seule couche de texture à un tampon d'image.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.invalidateFramebuffer()")}}</dt>
+ <dd>Invalide le contenu des éléments joints dans un tampon d'image.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.invalidateSubFramebuffer()")}}</dt>
+ <dd>Invalide le contenu des éléments joints dans un tampon d'image.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.readBuffer()")}}</dt>
+ <dd>Sélectionne un tampon de couleur comme source pour les pixels.</dd>
+</dl>
+
+<h2 id="Tampons_de_rendu">Tampons de rendu</h2>
+
+<dl>
+ <dt>{{domxref("WebGL2RenderingContext.getInternalformatParameter()")}}</dt>
+ <dd>Retourne des informations sur le support, dépendant de l'implémentation, des formats internes.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.renderbufferStorageMultisample()")}}</dt>
+ <dd>Crée et initialise le magasin de données d'un objet tampon de rendu et permet de d'indiquer le nombre d'échantillons à utiliser.</dd>
+</dl>
+
+<h2 id="Textures">Textures</h2>
+
+<dl>
+ <dt>{{domxref("WebGL2RenderingContext.texStorage2D()")}}</dt>
+ <dd>Spécifie tous les niveaux d'un stockage de texture bidimensionnelle.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.texStorage3D()")}}</dt>
+ <dd>Spécifie tous les niveaux d'une texture tridimensionnelle ou d'une texture de tableau bidimensionnelle.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.texImage3D()")}}</dt>
+ <dd>Spécifie une image de texture tridimensionnelle.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.texSubImage3D()")}}</dt>
+ <dd>Spécifie un sous-rectangle de la texture 3D en cours.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.copyTexSubImage3D()")}}</dt>
+ <dd>Copie des pixels du tampon WebGLFrame en cours dans une sous-image de texture 3D existante.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.compressedTexImage3D()")}}</dt>
+ <dd>Spécifie une image de texture tridimensionnelle dans un format compressé.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.compressedTexSubImage3D()")}}</dt>
+ <dd>Spécifie un sous-rectangle tridimensionnel pour une image de texture dans un format compressé.</dd>
+</dl>
+
+<h2 id="Programmes_et_shaders">Programmes et shaders</h2>
+
+<dl>
+ <dt>{{domxref("WebGL2RenderingContext.getFragDataLocation()")}}</dt>
+ <dd>Retourne la liaison des numéros de couleur aux variables de sortie varying définies par l'utilisateur.</dd>
+</dl>
+
+<h2 id="Uniforms_et_attributs">Uniforms et attributs</h2>
+
+<dl>
+ <dt>{{domxref("WebGL2RenderingContext.uniform()", "WebGL2RenderingContext.uniform[1234][uif][v]()")}}</dt>
+ <dd>Méthodes spécifiant les valeurs des variables uniform.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.uniformMatrix()", "WebGL2RenderingContext.uniformMatrix[234]x[234]fv()")}}</dt>
+ <dd>Méthodes spécifiant les valeurs matricielles pour les variables uniform.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.vertexAttribI()", "WebGL2RenderingContext.vertexAttribI4[u]i[v]()")}}</dt>
+ <dd>Méthodes spécifiant les valeurs entières des attributs de sommet génériques.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.vertexAttribIPointer()")}}</dt>
+ <dd>Spécifie les formats et les emplacements des données entières des attributs de sommet dans un tableau d'attributs de sommet.</dd>
+</dl>
+
+<h2 id="Tampons_de_dessin">Tampons de dessin</h2>
+
+<dl>
+ <dt>{{domxref("WebGL2RenderingContext.vertexAttribDivisor()")}}</dt>
+ <dd>Modifie la vitesse à laquelle les attributs de sommet génériques progressent lors du rendu de plusieurs instances de primitives avec {{domxref ("WebGL2RenderingContext.drawArraysInstanced()", "gl.drawArraysInstanced()")}} et {{domxref("WebGL2RenderingContext.drawElementsInstanced()" , "gl.drawElementsInstanced()")}}.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.drawArraysInstanced()")}}</dt>
+ <dd>Affiche des primitives à partir des données d'un tableau. En outre, elle peut exécuter plusieurs instances de la plage d'éléments.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.drawElementsInstanced()")}}</dt>
+ <dd>Affiche des primitives à partir des données d'un tableau. En outre, elle peut exécuter plusieurs instances d'un ensemble d'éléments.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.drawRangeElements()")}}</dt>
+ <dd>Affiche des primitives à partir des données d'un tableau dans la plage donnée.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.drawBuffers()")}}</dt>
+ <dd>Spécifie une liste de tampons de couleur dans lesquels dessiner.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.clearBuffer()", "WebGL2RenderingContext.clearBuffer[fiuv]()")}}</dt>
+ <dd>Efface les tampons du tampon d'image actuellement lié.</dd>
+</dl>
+
+<h2 id="Objets_requêtes">Objets requêtes</h2>
+
+<p>Méthodes pour travailler avec les objets {{domxref("WebGLQuery")}}.</p>
+
+<dl>
+ <dt>{{domxref("WebGL2RenderingContext.createQuery()")}}</dt>
+ <dd>Crée un nouvel objet {{domxref("WebGLQuery")}}.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.deleteQuery()")}}</dt>
+ <dd>Supprime l'objet {{domxref("WebGLQuery")}} donné.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.isQuery()")}}</dt>
+ <dd>Retourne <code>true</code> si l'objet donné est un objet {{domxref("WebGLQuery")}} valide.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.beginQuery()")}}</dt>
+ <dd>Commence une requête asynchrone.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.endQuery()")}}</dt>
+ <dd>Marque la fin d'une requête asynchrone.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.getQuery()")}}</dt>
+ <dd>Retourne un objet {{domxref("WebGLQuery")}} pour la cible donnée.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.getQueryParameter()")}}</dt>
+ <dd>Retourne des informations sur une requête.</dd>
+</dl>
+
+<h2 id="Objets_échantilloneurs">Objets échantilloneurs</h2>
+
+<dl>
+ <dt>{{domxref("WebGL2RenderingContext.createSampler()")}}</dt>
+ <dd>Crée un nouvel objet {{domxref("WebGLSampler")}}.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.deleteSampler()")}}</dt>
+ <dd>Supprime l'objet {{domxref("WebGLSampler")}} donné.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.bindSampler()")}}</dt>
+ <dd>Lie le {{domxref("WebGLSampler")}} donné à une unité de texture.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.isSampler()")}}</dt>
+ <dd>Retourne <code>true</code> si l'objet donné est un objet {{domxref("WebGLSampler")}} valide.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.samplerParameter()", "WebGL2RenderingContext.samplerParameter[if]()")}}</dt>
+ <dd>Définit les paramètres de l'échantillonneur.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.getSamplerParameter()")}}</dt>
+ <dd>Retourne les informations de paramètres de l'échantillonneur.</dd>
+</dl>
+
+<h2 id="Objets_sync">Objets sync</h2>
+
+<dl>
+ <dt>{{domxref("WebGL2RenderingContext.fenceSync()")}}</dt>
+ <dd>Crée un nouvel objet {{domxref("WebGLSync")}} et l'insère dans le flux de commandes GL.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.isSync()")}}</dt>
+ <dd>Retourne <code>true</code> si l'objet transmis est un objet {{domxref("WebGLSync")}} valide.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.deleteSync()")}}</dt>
+ <dd>Supprime l'objet {{domxref("WebGLSync")}} donné.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.clientWaitSync()")}}</dt>
+ <dd>
+ <p>Bloque et attend qu'un objet {{domxref ("WebGLSync")}} reçoive un signal ou que l'expiration du délai donné soit reçue.</p>
+ </dd>
+ <dt>{{domxref("WebGL2RenderingContext.waitSync()")}}</dt>
+ <dd>Retourne immédiatement, mais attend le serveur GL jusqu'à ce que l'objet {{domxref("WebGLSync")}} donné reçoive un signal.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.getSyncParameter()")}}</dt>
+ <dd>Retourne les informations de paramètres d'un objet {{domxref("WebGLSync")}}.</dd>
+</dl>
+
+<h2 id="Retour_de_transformations">Retour de transformations</h2>
+
+<dl>
+ <dt>{{domxref("WebGL2RenderingContext.createTransformFeedback()")}}</dt>
+ <dd>Crée et initialise les objets {{domxref("WebGLTransformFeedback")}}.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.deleteTransformFeedback()")}}</dt>
+ <dd>Supprime l'objet {{domxref ("WebGLTransformFeedback")}} donné.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.isTransformFeedback()")}}</dt>
+ <dd>Retourne <code>true</code> si l'objet transmis est un objet {{domxref("WebGLTransformFeedback")}} valide.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.bindTransformFeedback()")}}</dt>
+ <dd>Lie l'objet {{domxref("WebGLTransformFeedback")}} transmis à l'état GL en cours.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.beginTransformFeedback()")}}</dt>
+ <dd>Démarre une opération de retour de transformations.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.endTransformFeedback()")}}</dt>
+ <dd>Termine une opération de retour de transformations.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.transformFeedbackVaryings()")}}</dt>
+ <dd>Indique les valeurs à enregistrer dans les tampons {{domxref("WebGLTransformFeedback")}}.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.getTransformFeedbackVarying()")}}</dt>
+ <dd>Retourne des informations sur les variables varying à partir des tampons {{domxref("WebGLTransformFeedback")}}.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.pauseTransformFeedback()")}}</dt>
+ <dd>Suspend une opération de retour de transformations.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.resumeTransformFeedback()")}}</dt>
+ <dd>Reprend une opération de retour de transformations.</dd>
+</dl>
+
+<h2 id="Objets_tampons_uniforms">Objets tampons uniforms</h2>
+
+<dl>
+ <dt>{{domxref("WebGL2RenderingContext.bindBufferBase()")}}</dt>
+ <dd>Lie le {{domxref("WebGLBuffer")}} donné au point de liaison donné (<code>cible</code>) à l'<code>indice</code> donné.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.bindBufferRange()")}}</dt>
+ <dd>Lie une plage du {{domxref("WebGLBuffer")}} donné au point de liaison donné (<code>cible</code>) à l'<code>indice</code> donné.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.getUniformIndices()")}}</dt>
+ <dd>
+ <p>Récupère les indices d'un certain nombre d'uniforms dans un {{domxref("WebGLProgram")}}.</p>
+ </dd>
+ <dt>{{domxref("WebGL2RenderingContext.getActiveUniforms()")}}</dt>
+ <dd>Récupère des informations sur les uniforms actifs dans un {{domxref("WebGLProgram")}}.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.getUniformBlockIndex()")}}</dt>
+ <dd>Récupère l'indice d'un bloc uniform dans un {{domxref("WebGLProgram")}}.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.getActiveUniformBlockParameter()")}}</dt>
+ <dd>Récupère des informations d'un bloc uniform actif dans un {{domxref("WebGLProgram")}}.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.getActiveUniformBlockName()")}}</dt>
+ <dd>Récupère le nom du bloc uniform actif à l'indice donné dans un {{domxref("WebGLProgram")}}.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.uniformBlockBinding()")}}</dt>
+ <dd>Affecte des points de liaison aux blocs uniforms actifs.</dd>
+</dl>
+
+<h2 id="Objets_de_tableaux_de_sommets">Objets de tableaux de sommets</h2>
+
+<p>Méthodes pour travailler avec les objets {{domxref("WebGLVertexArrayObject")}} (VAO).</p>
+
+<dl>
+ <dt>{{domxref("WebGL2RenderingContext.createVertexArray()")}}</dt>
+ <dd>Crée un nouveau {{domxref("WebGLVertexArrayObject")}}.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.deleteVertexArray()")}}</dt>
+ <dd>Supprime le {{domxref("WebGLVertexArrayObject")}} donné.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.isVertexArray()")}}</dt>
+ <dd>Retourne <code>true</code> si l'objet donné est un {{domxref ("WebGLVertexArrayObject")}} valide.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.bindVertexArray()")}}</dt>
+ <dd>Lie le {{domxref ("WebGLVertexArrayObject")}} donné au tampon.</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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL2', "#3.7", "WebGL2RenderingContext")}}</td>
+   <td>{{Spec2('WebGL2')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</p>
+
+<p>{{Compat("api.WebGL2RenderingContext")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("HTMLCanvasElement")}}</li>
+ <li>{{domxref("WebGLRenderingContext")}}</li>
+</ul>
diff --git a/files/fr/web/api/webgl_api/by_example/appliquer_des_couleurs/index.html b/files/fr/web/api/webgl_api/by_example/appliquer_des_couleurs/index.html
new file mode 100644
index 0000000000..1d8db41a20
--- /dev/null
+++ b/files/fr/web/api/webgl_api/by_example/appliquer_des_couleurs/index.html
@@ -0,0 +1,100 @@
+---
+title: Appliquer des couleurs
+slug: Web/API/WebGL_API/By_example/Appliquer_des_couleurs
+tags:
+  - Apprendre
+  - Débutant
+  - Exemple
+  - Graphisme
+  - Tutoriel
+  - WebGL
+translation_of: Web/API/WebGL_API/By_example/Clearing_with_colors
+---
+<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+
+<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Détecter_WebGL","Apprendre/WebGL/Par_exemple/Appliquer_une_couleur_%C3%A0_la_souris")}}</p>
+
+<p class="summary">Dans cet article, on voit comment appliquer une couleur unie dans le contexte de rendu.</p>
+
+<p>{{EmbedLiveSample("Appliquer_une_couleur_unie_dans_le_contexte_WebGL",660,300)}}</p>
+
+<h3 id="Appliquer_une_couleur_unie_dans_le_contexte_WebGL">Appliquer une couleur unie dans le contexte WebGL</h3>
+
+<p>Voici l'application la plus simple de {{Glossary("WebGL")}} : appliquer un vert uni dans le {{domxref("WebGLRenderingContext","contexte de rendu")}}. On notera que la feuille de style {{Glossary("CSS")}} définit l'arrière-plan comme étant noir. Ainsi, quand le canevas s'affiche en vert, on sait que {{Glossary("WebGL")}} a fonctionné comme il fallait.</p>
+
+<p>Par ailleurs, vous pouvez remarquer que, pour appliquer une couleur unie sur le tampon (<em>buffer</em>) de dessin, on utilise deux étapes. Tout d'abord, on applique la couleur verte grâce à la méthode {{domxref("WebGLRenderingContext.clearColor()","clearColor()")}}. Cette opération ne modifie que l'état interne de {{Glossary("WebGL")}}, rien n'est peint/affiché pour le moment. Ensuite, on dessine « réellement » avec la méthode {{domxref("WebGLRenderingContext.clear()","clear()")}}. C'est la méthode classique pour dessiner avec WebGL. Il y a seulement quelques méthodes qui « dessinent » (dont <code>clear()</code>), toutes les autres méthodes permettent d'obtenir ou de modifier les variables liées aux états de WebGL (dont la couleur à appliquer).</p>
+
+<p>Il existe de nombreuses options pour modifier les états {{Glossary("WebGL")}}. La couleur à appliquer en est une parmi d'autres.{{Glossary("WebGL")}}/{{Glossary("OpenGL")}} est souvent qualifié d'automate à états. En fait, lorsque vous manipulez ces variables internes, ces « interrupteurs », vous modifiez l'état interne de WebGL, qui modifie à son tour la façon dont la sortie est retranscrite (dans cet exemple, cela correspond à l'étape où les pixels sont passés en vert).</p>
+
+<p>Enfin, vous pouvez voir que les couleurs manipulées en WebGL sont décrites avec le format {{Glossary("RGBA")}}. Ce format décrit quatre composantes numériques pour les intensités respectives des tons rouge (R), vert (<em>green</em> G), bleu (B) et alpha (qui correspond à l'opacité). C'est pour ça que <code>clearColor()</code> prend quatre arguments.</p>
+
+<pre class="brush: html">&lt;p&gt;Un programme WebGL très simple qui affiche une couleur.&lt;/p&gt;
+&lt;!-- Le texte d'un élément canvas est affiché uniquement
+    si canvas n'est pas supporté. --&gt;
+&lt;canvas&gt;Il semblerait que votre navigateur ne supporte pas
+    le canevas HTML5&lt;/canvas&gt;
+</pre>
+
+<pre class="brush: css">body {
+  text-align : center;
+}
+canvas {
+  display : block;
+  width : 280px;
+  height : 210px;
+  margin : auto;
+  padding : 0;
+  border : none;
+  background-color : black;
+}
+</pre>
+
+<pre class="brush: js">// On exécute tout dans le gestionnaire d'événement
+// correspondant au chargement de la fenêtre. De cette
+// façon, le DOM est complètement chargé et mis en forme
+// avant de le manipuler et d'encombrer la portée globale.
+// On donne un nom au gestionnaire (setupWebGL) afin de
+// pouvoir y faire référence par la suite.
+window.addEventListener("load", function setupWebGL (evt) {
+  "use strict"
+
+  // On fait le ménage : le gestionnaire se supprime lui-
+  // même car il n'a besoin d'être exécuté qu'une fois.
+  window.removeEventListener(evt.type, setupWebGL, false);
+
+  // On fait référence aux éléments du document.
+  var paragraph = document.querySelector("p"),
+    canvas = document.querySelector("canvas");
+
+  // On récupère le contexte de rendu WebGL.
+  var gl = canvas.getContext("webgl")
+    || canvas.getContext("experimental-webgl");
+
+  // Si cela échoue, on informe l'utilisateur.
+  // Sinon, on initialise la zone de dessin et on
+  // applique une couleur dans le contexte.
+  if (!gl) {
+    paragraph.innerHTML = "Échec de la récupération du "
+      + "contexte WebGL. Votre navigateur peut ne pas "
+      + " supporter WebGL.";
+    return;
+  }
+  paragraph.innerHTML =
+    "Félicitations, votre navigateur supporte WebGL. ";
+  gl.viewport(0, 0,
+    gl.drawingBufferWidth, gl.drawingBufferHeight);
+
+  // On définit la couleur qu'on veut appliquer
+  // (ici un vert foncé).
+  gl.clearColor(0.0, 0.5, 0.0, 1.0);
+
+  // Enfin, on applique la couleur dans le contexte. C'est
+  // cette fonction qui « dessine » réellement quelque chose.
+  gl.clear(gl.COLOR_BUFFER_BIT);
+
+}, false);
+</pre>
+
+<p>Le code source de cet exemple est également disponible sur <a href="https://github.com/idofilin/webgl-by-example/tree/master/clearing-with-colors">GitHub</a>.</p>
+
+<div>{{PreviousNext("Apprendre/WebGL/Par_exemple/Détecter_WebGL","Apprendre/WebGL/Par_exemple/Appliquer_une_couleur_%C3%A0_la_souris")}}</div>
diff --git a/files/fr/web/api/webgl_api/by_example/appliquer_des_découpes_simples/index.html b/files/fr/web/api/webgl_api/by_example/appliquer_des_découpes_simples/index.html
new file mode 100644
index 0000000000..3995861e83
--- /dev/null
+++ b/files/fr/web/api/webgl_api/by_example/appliquer_des_découpes_simples/index.html
@@ -0,0 +1,90 @@
+---
+title: Appliquer des découpes simples
+slug: Web/API/WebGL_API/By_example/Appliquer_des_découpes_simples
+tags:
+  - Apprendre
+  - Débutant
+  - Exemple
+  - Graphisme
+  - Tutoriel
+  - WebGL
+translation_of: Web/API/WebGL_API/By_example/Basic_scissoring
+---
+<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+
+<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Masque_de_couleur","Apprendre/WebGL/Par_exemple/Tailles_de_canvas_et_WebGL")}}</p>
+
+<p class="summary">Dans cet article, on illustre comment dessiner des rectangles et des carrés grâce à des opérations de découpe simple (<em>scissoring</em>).</p>
+
+<p>{{EmbedLiveSample("Appliquer_les_changements_sur_le_buffer_lors_de_la_découpe",660,330)}}</p>
+
+<h3 id="Appliquer_les_changements_sur_le_buffer_lors_de_la_découpe">Appliquer les changements sur le <em>buffer</em> lors de la découpe</h3>
+
+<p>Voici une démonstration simple des opérations appliquées sur le contexte de rendu avec la méthode {{domxref("WebGLRenderingContext.scissor","scissor")}}.</p>
+
+<p>La commande {{domxref("WebGLRenderingContext.clear","clear()")}} permet de dessiner la couleur d'applique (définie à l'aide de {{domxref("WebGLRenderingContext.clearColor","clearColor()")}}) sur tous les pixels du tampon (<em>buffer</em>) de dessin. La commande  {{domxref("WebGLRenderingContext.scissor","scissor()")}} permet quant à elle de définir un masque qui permet de ne modifier que les pixels contenus dans un rectangle donné.</p>
+
+<p>Cet article représente une excellente occasion pour distinguer les <em>pixels</em> des <em>fragments</em>. Un pixel est un élément d'une image (en pratique c'est un point) sur l'écran ou un élément unique du tampon de dessin (l'espace mémoire qui contient les données relatives aux pixels comme les différentes composantes couleur). Un <em>fragment</em> fait référence au pixel manipulé par les processus {{Glossary("WebGL")}}.</p>
+
+<p>Cette distinction existe car la couleur d'un fragment (et ses autres caractéristiques comme la profondeur) peut être manipulée et modifiée à plusieurs reprises avant d'être écrite à l'écran. On a déjà vu comment la couleur d'un fragment pouvait être modifiée au cours des opérations graphiques en appliquant un {{domxref("WebGLRenderingContext.colorMask()","masque de couleur", "", 1)}}. Il existe d'autres cas où les fragments sont ignorés (le pixel n'est pass mis à jour) ou d'autres où ils interagissent avec la valeur du pixel existant (afin de fusionner les couleurs pour les éléments transparents qui composent une scène).</p>
+
+<p>Ici, on voit une autre distinction entre les fragments et les pixels. La découpe est une étape distincte du processus graphique de  {{Glossary("WebGL")}}/{{Glossary("OpenGL")}} (elle est traitée après l'applique de couleur et avant le masque de couleur). Avant que les pixels réels soient mis à jour, les fragments doivent passer le test de la découpe. S'ils réussissent ce test, ils continuent dans le processus de traitement et les pixels correspondants sont mis à jours. S'ils échouent, le processus rejette les fragments et ils ne sont plus gérés pour les traitements ultérieurs, les pixels correspondants ne seront pas mis à jour. Seuls les fragments appartenant à la zone rectangulaire donnée réussissent le test et seuls les pixels correspondants sont mis à jour. Au final, on obtient un rectangle qui est dessiné à l'écran.</p>
+
+<p>Par défaut, l'étape de découpe est désactivée dans le processus. Ici, on l'active avec la méthode  {{domxref("WebGLRenderingContext.enable","enable()")}} (<code>enable()</code> sera utilisée pour activer de nombreuses autres fonctionnalités liées à WebGL) avec la constante <code>SCISSOR_TEST</code>. Là aussi, on voit l'ordre généralement utilisé pour les commandes {{Glossary("WebGL")}}. Tout d'abord, on modifie l'état de WebGL (ici on active le test de découpe et on crée un masque rectangulaire). Une fois que l'état a bien été modifié, on exécute les commandes de dessin (ici <code>clear()</code>) pour commencer le processus de traitement des fragments.</p>
+
+<pre class="brush: html">&lt;p&gt;Le résultat de la découpe.&lt;/p&gt;
+&lt;canvas&gt;Il semblerait que votre navigateur
+    ne supporte pas l'élément canvas.&lt;/canvas&gt;
+</pre>
+
+<pre class="brush: css">body {
+  text-align : center;
+}
+canvas {
+  display : block;
+  width : 280px;
+  height : 210px;
+  margin : auto;
+  padding : 0;
+  border : none;
+  background-color : black;
+}
+</pre>
+
+<pre class="brush: js" id="livesample-js">window.addEventListener("load", function setupWebGL (evt) {
+  "use strict"
+  window.removeEventListener(evt.type, setupWebGL, false);
+  var paragraph = document.querySelector("p");
+  var canvas = document.querySelector("canvas");
+
+  // Les deux lignes suivantes définissent la taille,
+  // en pixels CSS, du buffer de dessin qui est la même
+  // que celle du canevas (définie avec CSS).
+  canvas.width = canvas.clientWidth;
+  canvas.height = canvas.clientHeight;
+
+  var gl = canvas.getContext("webgl")
+    || canvas.getContext("experimental-webgl");
+  if (!gl) {
+    paragraph.innerHTML = "Échec de la récupération du "
+      + "contexte WebGL. Votre navigateur pourrait ne pas "
+      + "supporter WebGL.";
+    return;
+  }
+  gl.viewport(0, 0,
+    gl.drawingBufferWidth, gl.drawingBufferHeight);
+
+  // On applique une découpe et on définit la taille de
+  // la zone de découpe.
+  gl.enable(gl.SCISSOR_TEST);
+  gl.scissor(40, 20, 60, 170);
+
+  // On applique un jaune uni dans le contexte de rendu.
+  gl.clearColor(1.0, 1.0, 0.0, 1.0);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+}, false);
+</pre>
+
+<p>Le code source de cet exemple est également disponible sur <a href="https://github.com/idofilin/webgl-by-example/tree/master/basic-scissoring">GitHub</a>.</p>
+
+<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Masque_de_couleur","Apprendre/WebGL/Par_exemple/Tailles_de_canvas_et_WebGL")}}</p>
diff --git a/files/fr/web/api/webgl_api/by_example/appliquer_une_couleur_à_la_souris/index.html b/files/fr/web/api/webgl_api/by_example/appliquer_une_couleur_à_la_souris/index.html
new file mode 100644
index 0000000000..7ca07c36e6
--- /dev/null
+++ b/files/fr/web/api/webgl_api/by_example/appliquer_une_couleur_à_la_souris/index.html
@@ -0,0 +1,122 @@
+---
+title: Appliquer une couleur à la souris
+slug: Web/API/WebGL_API/By_example/Appliquer_une_couleur_à_la_souris
+tags:
+  - Apprendre
+  - Débutant
+  - Exemple
+  - Graphisme
+  - Tutoriel
+  - WebGL
+translation_of: Web/API/WebGL_API/By_example/Clearing_by_clicking
+---
+<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+
+<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_des_couleurs","Apprendre/WebGL/Par_exemple/Cr%C3%A9er_une_animation_color%C3%A9e")}}</p>
+
+<p class="summary">Dans cet article, on voit comment combiner les interactions de l'utilisateur et les opérations graphiques. Plus précisément, dans cet exemple, chaque clic de l'utilisateur déclenchera l'application d'une couleur aléatoire dans le contexte de rendu.</p>
+
+<p>{{EmbedLiveSample("Appliquer_des_couleurs_aléatoires_dans_le_contexte_de_rendu",660,410)}}</p>
+
+<h3 id="Appliquer_des_couleurs_aléatoires_dans_le_contexte_de_rendu">Appliquer des couleurs aléatoires dans le contexte de rendu</h3>
+
+<p>Cet exemple illustre simplement comment associer WebGL aux interactions utilisateur. Chaque fois que l'utilisateur cliquera sur le canevas ou sur le bouton, une couleur aléatoire sera appliquée sur le contexte de rendu.</p>
+
+<p>Ici, on montre comment on place les appels aux fonctions WebGL dans la fonction qui gère les événements :</p>
+
+<pre class="brush: html">&lt;p&gt;Un programme WebGL très simple qui affiche des couleurs
+    suite aux interactions utilisateur.&lt;/p&gt;
+&lt;p&gt;Vous pouvez cliquer sur le canevas ou sur le bouton pour
+    modifier la couleur.&lt;/p&gt;
+&lt;canvas id="canvas-view"&gt;Il semblerait que votre navigateur
+    ne supporte pas l'élément canvas.&lt;/canvas&gt;
+&lt;button id="color-switcher"&gt;Cliquez ici pour changer la couleur&lt;/button&gt;
+</pre>
+
+<pre class="brush: css">body {
+  text-align : center;
+}
+button {
+  display : inline-block;
+  font-size : inherit;
+  margin : auto;
+  padding : 0.6em;
+}
+canvas {
+  display : block;
+  width : 280px;
+  height : 210px;
+  margin : auto;
+  padding : 0;
+  border : none;
+  background-color : black;
+}
+</pre>
+
+<pre class="brush: js">// On exécute tout dans le gestionnaire d'événement
+// correspondant au chargement de la fenêtre. De cette
+// façon, le DOM est complètement chargé et mis en forme
+// avant de le manipuler et d'encombrer la portée globale.
+// On donne un nom au gestionnaire (setupWebGL) afin de
+// pouvoir y faire référence par la suite.
+window.addEventListener("load", function setupWebGL (evt) {
+  "use strict"
+
+  // On fait le ménage : le gestionnaire se supprime lui-
+  // même car il n'a besoin d'être exécuté qu'une fois.
+  window.removeEventListener(evt.type, setupWebGL, false);
+
+  // On ajoute le même gestionnaire de clic sur le canevas
+  // et sur le bouton.
+  var canvas = document.querySelector("#canvas-view");
+  var button = document.querySelector("#color-switcher");
+  canvas.addEventListener("click", switchColor, false);
+  button.addEventListener("click", switchColor, false);
+
+  // On crée une variable qui contiendra WebGLRenderingContext.
+  var gl;
+
+  // La déclaration du gestionnaire d'événement pour le clic.
+  function switchColor () {
+
+    // On utilise la variable gl définie en dehors.
+    // Si elle n'est pas définie, on récupère WebGLRenderingContext.
+    // Si cela échoue, on avertit l'utilisateur. Sinon, on
+    // initialise la zone de dessin (viewport)
+    if (!gl) {
+      gl = canvas.getContext("webgl")
+        || canvas.getContext("experimental-webgl");
+      if (!gl) {
+        alert("Échec de la récupération du \n"
+          + "contexte WebGL. Votre navigateur peut ne pas \n"
+          + " supporter WebGL.");
+        return;
+      }
+      gl.viewport(0, 0,
+        gl.drawingBufferWidth, gl.drawingBufferHeight);
+    }
+
+    // On obtient une couleur aléatoire grâce
+    // à une fonction auxiliaire.
+    var color = getRandomColor();
+
+    // On choisit cette couleur comme couleur à appliquer.
+    gl.clearColor(color[0], color[1], color[2], 1.0);
+
+    // On applique la nouvelle couleur dans le contexte.
+    // C'est cette fonction qui effectue « réellement »
+    // le dessin sur la zone.
+    gl.clear(gl.COLOR_BUFFER_BIT);
+  }
+
+  // Une fonction auxiliaire pour créer une couleur aléatoire.
+  function getRandomColor() {
+    return [Math.random(), Math.random(), Math.random()];
+  }
+
+}, false);
+</pre>
+
+<p>Le code source de cet exemple est également disponible sur <a href="https://github.com/idofilin/webgl-by-example/tree/master/clearing-by-clicking">GitHub</a>.</p>
+
+<div>{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_des_couleurs","Apprendre/WebGL/Par_exemple/Cr%C3%A9er_une_animation_color%C3%A9e")}}</div>
diff --git a/files/fr/web/api/webgl_api/by_example/créer_une_animation_avec_découpe_et_applique/index.html b/files/fr/web/api/webgl_api/by_example/créer_une_animation_avec_découpe_et_applique/index.html
new file mode 100644
index 0000000000..8eb25287ab
--- /dev/null
+++ b/files/fr/web/api/webgl_api/by_example/créer_une_animation_avec_découpe_et_applique/index.html
@@ -0,0 +1,162 @@
+---
+title: Créer une animation avec découpe et applique
+slug: Web/API/WebGL_API/By_example/Créer_une_animation_avec_découpe_et_applique
+tags:
+  - Apprendre
+  - Débutant
+  - Exemple
+  - Graphisme
+  - Tutoriel
+  - WebGL
+translation_of: Web/API/WebGL_API/By_example/Scissor_animation
+---
+<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+
+<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Modèle_1","Apprendre/WebGL/Par_exemple/Une_pluie_de_rectangle")}}</p>
+
+<p class="summary">Dans cet article, on voit comment créer des animations grâce à des opérations de découpe et d'applique.</p>
+
+<p>{{EmbedLiveSample("Une_animation_grâce_à_des_découpes",660,425)}}</p>
+
+<h3 id="Une_animation_grâce_à_des_découpes">Une animation grâce à des découpes</h3>
+
+<p>Dans cet exemple, on anime des carrés grâce aux méthodes {{domxref("WebGLRenderingContext.scissor()","scissor()")}} et {{domxref("WebGLRenderingContext.clear()","clear()")}}. Ensuite, on crée à nouveau une boucle d'animation grâce aux <em>timers</em>. Cette fois-ci, la position du carré (la zone de découpe) est mise à jour à chaque <em>frame </em>(on a environ une frame rafraîchie toutes les 17 millisecondes, ce qui correspond environ à 60fps (<em>frame per second</em> ou <em>frame </em>par seconde).</p>
+
+<p>En revanche, la couleur du carré (définie avec {{domxref("WebGLRenderingContext.clearColor()","clearColor")}}) est uniquement mise à jour lorsqu'un nouveau carré est créé. On voit ici que {{Glossary("WebGL")}} est un automate. Pour chaque carré, on définit sa couleur une fois puis on met à jour sa position à chaque <em>frame</em>. L'état lié à la couleur reste tel quel jusqu'à ce qu'un nouveau carré soit créé.</p>
+
+<pre class="brush: html hidden">&lt;p&gt;Une animation WebGL obtenue en appliquant des couleurs
+unies sur le buffer de dessin et en utilisant des tests de découpe.&lt;/p&gt;
+&lt;button id="animation-onoff"&gt;
+  Cliquez ici pour
+&lt;strong&gt;[verbe ici]&lt;/strong&gt;
+  l'animation&lt;/button&gt;
+&lt;canvas&gt;Il semblerait que votre navigateur
+    ne supporte pas l'élément HTML5 canvas.&lt;/canvas&gt;
+</pre>
+
+<pre class="brush: css hidden">body {
+  text-align : center;
+}
+canvas {
+  width : 280px;
+  height : 210px;
+  margin : auto;
+  padding : 0;
+  border : none;
+  background-color : black;
+}
+button {
+  display : block;
+  font-size : inherit;
+  margin : auto;
+  padding : 0.6em;
+}
+</pre>
+
+<pre class="brush: js hidden">;(function(){
+</pre>
+
+<pre class="brush: js">"use strict"
+window.addEventListener("load", setupAnimation, false);
+// Voici les variables qui permettront de
+// manipuler le contexte WebGL, la couleur
+// et la position des carrés.
+var gl,
+  color = getRandomColor(),
+  position;
+
+function setupAnimation (evt) {
+  window.removeEventListener(evt.type, setupAnimation, false);
+  if (!(gl = getRenderingContext()))
+    return;
+
+  gl.enable(gl.SCISSOR_TEST);
+  gl.clearColor(color[0], color[1], color[2], 1.0);
+
+  // À la différence de la fenêtre du navigateur,
+  // l'axe vertical de WebGL va dans le sens croissant
+  // du bas vers le haut. Dans cette position, on indique
+  // que la position initiale du carré est en haut à gauche
+  // du contexte de dessin
+  position = [0, gl.drawingBufferHeight];
+
+  var button = document.querySelector("button");
+  var timer;
+  function startAnimation(evt) {
+    button.removeEventListener(evt.type, startAnimation, false);
+    button.addEventListener("click", stopAnimation, false);
+    document.querySelector("strong").innerHTML = "arrêter";
+    timer = setInterval(drawAnimation, 17);
+    drawAnimation();
+  }
+  function stopAnimation(evt) {
+    button.removeEventListener(evt.type, stopAnimation, false);
+    button.addEventListener("click", startAnimation, false);
+    document.querySelector("strong").innerHTML = "lancer";
+    clearInterval(timer);
+  }
+  stopAnimation({type: "click"});
+}
+
+// Les variables qui permettront de stocker la taille
+// et la vitesse du carré.
+var size = [60, 60],
+  velocity = 3.0;
+function drawAnimation () {
+  gl.scissor(position[0], position[1], size[0] , size[1]);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+  // À chaque frame, on définit une position plus basse
+  // pour le carré, c'est cela qui crée une illusion
+  // de mouvement.
+  position[1] -= velocity;
+  // Lorsque le carré atteint le bas, on crée un nouveau
+  // carré avec une nouvelle vitesse et une nouvelle
+  // couleur.
+  if (position[1] &lt; 0) {
+    // La position horizontale est choisie aléatoirement.
+    // La position verticale correspond au haut
+    // du buffer de dessin.
+    position = [
+      Math.random()*(gl.drawingBufferWidth - size[0]),
+      gl.drawingBufferHeight
+    ];
+    // Ici on détermine une vitesse aléatoire
+    // comprise entre 1.0 et 7.0
+    velocity = 1.0 + 6.0*Math.random();
+    color = getRandomColor();
+    gl.clearColor(color[0], color[1], color[2], 1.0);
+  }
+}
+
+function getRandomColor() {
+  return [Math.random(), Math.random(), Math.random()];
+}
+</pre>
+
+<pre class="brush: js hidden">function getRenderingContext() {
+  var canvas = document.querySelector("canvas");
+  canvas.width = canvas.clientWidth;
+  canvas.height = canvas.clientHeight;
+  var gl = canvas.getContext("webgl")
+    || canvas.getContext("experimental-webgl");
+  if (!gl) {
+    var paragraph = document.querySelector("p");
+    paragraph.innerHTML = "Échec de l'obtention du contexte "
+      + "WebGL. Votre navigateur ne supporte peut-être pas "
+      + "WebGL.";
+    return null;
+  }
+  gl.viewport(0, 0,
+    gl.drawingBufferWidth, gl.drawingBufferHeight);
+  gl.clearColor(0.0, 0.0, 0.0, 1.0);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+  return gl;
+}
+</pre>
+
+<pre class="brush: js hidden">})();
+</pre>
+
+<p>Le code source de cet exemple est également disponible sur <a href="https://github.com/idofilin/webgl-by-example/tree/master/scissor-animation">GitHub</a>.</p>
+
+<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Modèle_1","Apprendre/WebGL/Par_exemple/Une_pluie_de_rectangle")}}</p>
diff --git a/files/fr/web/api/webgl_api/by_example/créer_une_animation_colorée/index.html b/files/fr/web/api/webgl_api/by_example/créer_une_animation_colorée/index.html
new file mode 100644
index 0000000000..a38d174808
--- /dev/null
+++ b/files/fr/web/api/webgl_api/by_example/créer_une_animation_colorée/index.html
@@ -0,0 +1,139 @@
+---
+title: Créer une animation colorée
+slug: Web/API/WebGL_API/By_example/Créer_une_animation_colorée
+tags:
+  - Apprendre
+  - Débutant
+  - Exemple
+  - Graphisme
+  - Tutoriel
+  - WebGL
+translation_of: Web/API/WebGL_API/By_example/Simple_color_animation
+---
+<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+
+<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_une_couleur_à_la_souris","Apprendre/WebGL/Par_exemple/Masque_de_couleur")}}</p>
+
+<p class="summary">Dans cet exemple, on crée une animation avec des couleurs en appliquant chaque seconde une couleur aléatoire dans le contexte de rendu {{Glossary("WebGL")}}.</p>
+
+<p>{{EmbedLiveSample("Créer_une_animation_avec_clear",660,425)}}</p>
+
+<h3 id="Créer_une_animation_avec_clear">Créer une animation avec <code> clear</code></h3>
+
+<p>Cet exemple illustre comment lancer une animation avec WebGL et gérer les interactions de l'utilisateur. L'utilisateur peut lancer, arrêter et reprendre l'animation en cliquant sur le bouton.</p>
+
+<p>Cette fois, on place les appels à la fonction WebGL à l'intérieur d'un gestionnaire d'événement de <em>timer</em>. Un gestionnaire d'événements pour les clics permet de gérer les interactions simples (lancer et arrêter l'animation). Le <em>timer</em> et la fonction de gestion du <em>timer</em> créent une boucle d'animation qui permet d'exécuter un ensemble de commandes pour le dessin à des intervalles réguliers (généralement, pour chaque <em>frame</em>, dans ce cas, on a une fréquence d'une <em>frame </em>par seconde).</p>
+
+<pre class="brush: html">&lt;p&gt;Un programme WebGL simple qui crée une animation colorée.&lt;/p&gt;
+&lt;p&gt;Vous pouvez sur le bouton pour activer/désactiver l'animation.&lt;/p&gt;
+&lt;canvas id="canvas-view"&gt;Il semblerait que votre navigateur ne
+    supporte pas l'élément canvas.&lt;/canvas&gt;
+&lt;button id="animation-onoff"&gt;
+  Cliquez ici pour
+&lt;strong&gt;[le verbe de l'action]&lt;/strong&gt;
+  l'animation
+&lt;/button&gt;
+</pre>
+
+<pre class="brush: css">body {
+  text-align : center;
+}
+button {
+  display : inline-block;
+  font-size : inherit;
+  margin : auto;
+  padding : 0.6em;
+}
+canvas {
+  display : block;
+  width : 280px;
+  height : 210px;
+  margin : auto;
+  padding : 0;
+  border : none;
+  background-color : black;
+}
+</pre>
+
+<pre class="brush: js" id="livesample-js">window.addEventListener("load", function setupAnimation (evt) {
+  "use strict"
+  window.removeEventListener(evt.type, setupAnimation, false);
+
+  // Une variable pour gérer le timer qui contrôle
+  // l'animation.
+  var timer;
+
+  // On ajoute un gestionnaire d'événement pour le clic.
+  var button = document.querySelector("#animation-onoff");
+  var verb = document.querySelector("strong");
+  function startAnimation(evt) {
+    button.removeEventListener(evt.type, startAnimation, false);
+    button.addEventListener("click", stopAnimation, false);
+    verb.innerHTML="arrêter";
+
+    // On place une boucle d'animation : on repeint
+    // environ chaque seconde.
+    timer = setInterval(drawAnimation, 1000);
+
+    // On dessine une frame d'animation afin de
+    // fournir un feedback à l'utilisateur.
+    drawAnimation();
+  }
+
+  function stopAnimation(evt) {
+    button.removeEventListener(evt.type, stopAnimation, false);
+    button.addEventListener("click", startAnimation, false);
+    verb.innerHTML="lancer";
+    // On arrête l'animation en réinitialisant le timer.
+    clearInterval(timer);
+  }
+
+  // On appelle stopAnimation() une fois pour mettre en place
+  // les gestionnaires d'événement pour le canevas et le bouton.
+  stopAnimation({type: "click"});
+
+  var gl;
+  function drawAnimation () {
+    if (!gl) {
+      var canvas = document.getElementById("canvas-view");
+      gl = canvas.getContext("webgl")
+        ||canvas.getContext("experimental-webgl");
+      if (!gl) {
+
+        // On ne veut pas avoir plusieurs messages d'alerte
+        // donc on arrête l'animation en réinitialisant le
+        // timer.
+        clearInterval(timer);
+        alert("Échec du chargement du contexte WebGL.\n"
+          + "Votre navigateur peut ne pas supporter WebGL.");
+        return;
+
+      }
+      gl.viewport(0, 0,
+        gl.drawingBufferWidth, gl.drawingBufferHeight);
+    }
+
+    // On génère une couleur aléatoire avec une fonction
+    // auxiliaire.
+    var color = getRandomColor();
+
+    // On applique la couleur obtenue dans le
+    // contexte WebGLRenderingContext
+    gl.clearColor(color[0], color[1], color[2], 1.0);
+
+    // On propage le changement dans le contexte
+    // avec la méthode clear.
+    gl.clear(gl.COLOR_BUFFER_BIT);
+  }
+
+  // Une fonction auxiliaire qui fournit une
+  // couleur aléatoire.
+  function getRandomColor() {
+    return [Math.random(), Math.random(), Math.random()];
+  }
+}, false);
+</pre>
+
+<p>Le code source de cet exemple est également disponible sur <a href="https://github.com/idofilin/webgl-by-example/tree/master/simple-color-animation">GitHub</a>.</p>
+
+<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_une_couleur_à_la_souris","Apprendre/WebGL/Par_exemple/Masque_de_couleur")}}</p>
diff --git a/files/fr/web/api/webgl_api/by_example/détecter_webgl/index.html b/files/fr/web/api/webgl_api/by_example/détecter_webgl/index.html
new file mode 100644
index 0000000000..fec1fd88a0
--- /dev/null
+++ b/files/fr/web/api/webgl_api/by_example/détecter_webgl/index.html
@@ -0,0 +1,79 @@
+---
+title: Détecter WebGL
+slug: Web/API/WebGL_API/By_example/Détecter_WebGL
+tags:
+  - Apprendre
+  - Débutant
+  - Exemple
+  - Graphisme
+  - Tutoriel
+  - WebGL
+translation_of: Web/API/WebGL_API/By_example/Detect_WebGL
+---
+<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+
+<div>{{PreviousNext("Apprendre/WebGL/Par_exemple","Apprendre/WebGL/Par_exemple/Appliquer_des_couleurs")}}</div>
+
+<p class="summary">Dans cet exemple, on voit comment détecter un contexte de rendu {{Glossary("WebGL")}} et afficher le résultat à l'utilisateur.</p>
+
+<p>{{EmbedLiveSample("Détecter_le_support_WebGL",660,150)}}</p>
+
+<h3 id="Détecter_le_support_WebGL">Détecter le support WebGL</h3>
+
+<p>Dans ce premier exemple, on vérifie si le navigateur prend en charge {{Glossary("WebGL")}}. Pour cela, on essaye d'obtenir le {{domxref("WebGLRenderingContext","contexte de rendu WebGL","",1)}} à partir d'un élément {{domxref("HTMLCanvasElement","canvas")}}. Le {{domxref("WebGLRenderingContext","contexte de rendu WebGL", "", 1)}} est une interface qui permet de connaître et de modifier l'état du moteur graphique WebGL, d'envoyer des données à WebGL et d'exécuter des commandes de dessin.</p>
+
+<p>La gestion d'une machine graphique au sein d'une seule interface n'est pas propre à {{Glossary("WebGL")}}. Les autres {̣{Glossary("API")}} graphiques comme {{domxref("CanvasRenderingContext2D","le contexte de rendu 2D du canevas", "", 1)}}. Cependant, les propriétés et variables qui peuvent être manipulées changent d'une API à l'autre.</p>
+
+<pre class="brush: html">&lt;p&gt;[ On affichera ici le résultat de la détection du support WebGL ]&lt;/p&gt;
+&lt;button&gt;Cliquez ici pour détecter WebGLRenderingContext&lt;/button&gt;
+</pre>
+
+<pre class="brush: css">body {
+  text-align : center;
+}
+button {
+  display : block;
+  font-size : inherit;
+  margin : auto;
+  padding : 0.6em;
+}
+</pre>
+
+<pre class="brush: js">// On exécute tout dans le gestionnaire d'événement
+// correspondant au chargement de la fenêtre. De cette
+// façon, le DOM est complètement chargé et mis en forme
+// avant de le manipuler.
+window.addEventListener("load", function() {
+  var paragraph = document.querySelector("p"),
+    button = document.querySelector("button");
+
+  // On ajoute un gestionnaire d'événement pour
+  // le clic sur le bouton
+  button.addEventListener("click", detectWebGLContext, false);
+  function detectWebGLContext () {
+
+    // On crée un élément canvas. Le canvas n'est pas
+    // ajouté au document et il n'est donc jamais
+    // affiché dans la fenêtre du navigateur
+    var canvas = document.createElement("canvas");
+
+    // On récupère le contexte WebGLRenderingContext
+    // depuis l'élément canvas.
+    var gl = canvas.getContext("webgl")
+      || canvas.getContext("experimental-webgl");
+
+    // On affiche le résultat.
+    if (gl &amp;&amp; gl instanceof WebGLRenderingContext) {
+      paragraph.innerHTML =
+        "Félicitations, votre navigateur supporte WebGL.";
+    } else {
+      paragraph.innerHTML = "Échec du contexte WebGL. "
+        + "Votre navigateur peut ne pas supporter WebGL.";
+    }
+  }
+}, false);
+</pre>
+
+<p>Le code source de cet exemple est également disponible sur <a href="https://github.com/idofilin/webgl-by-example/tree/master/detect-webgl">GitHub</a>.</p>
+
+<div>{{PreviousNext("Apprendre/WebGL/Par_exemple","Apprendre/WebGL/Par_exemple/Appliquer_des_couleurs")}}</div>
diff --git a/files/fr/web/api/webgl_api/by_example/générer_des_textures_avec_du_code/index.html b/files/fr/web/api/webgl_api/by_example/générer_des_textures_avec_du_code/index.html
new file mode 100644
index 0000000000..cd7d71f0c5
--- /dev/null
+++ b/files/fr/web/api/webgl_api/by_example/générer_des_textures_avec_du_code/index.html
@@ -0,0 +1,164 @@
+---
+title: Générer des textures avec du code
+slug: Web/API/WebGL_API/By_example/Générer_des_textures_avec_du_code
+tags:
+  - Apprendre
+  - Débutant
+  - Exemple
+  - Graphisme
+  - Tutoriel
+  - WebGL
+translation_of: Web/API/WebGL_API/By_example/Textures_from_code
+---
+<div>{{draft}}{{IncludeSubnav("/fr/Apprendre")}}</div>
+
+<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Introduction_aux_attributs_vertex","Apprendre/WebGL/Par_exemple/Les_textures_vidéos")}}</p>
+
+<p class="summary">Dans cet article, on illustre simplement comment générer des textures procédurales avec des fragments de <em>shader</em><em>s</em>.</p>
+
+<p>{{EmbedLiveSample("Dessiner_des_textures_avec_du_code",660,350)}}</p>
+
+<h3 id="Dessiner_des_textures_avec_du_code">Dessiner des textures avec du  code</h3>
+
+<p>Il est possible d'appliquer des textures en effectuant des calculs pour chaque pixel du fragment de <em>shader</em>.</p>
+
+<pre class="brush: html hidden">&lt;p&gt;Génération d'une texture à partir de code. Simple demonstration
+    de la génération de textures procédurale&lt;/p&gt;
+&lt;canvas&gt;Il semblerait que votre navigateur ne supporte
+    pas l'élément canvas.&lt;/canvas&gt;
+</pre>
+
+<pre class="brush: css hidden">body {
+  text-align : center;
+}
+canvas {
+  width : 280px;
+  height : 210px;
+  margin : auto;
+  padding : 0;
+  border : none;
+  background-color : black;
+}
+button {
+  display : block;
+  font-size : inherit;
+  margin : auto;
+  padding : 0.6em;
+}
+</pre>
+
+<pre class="brush: html">&lt;script type="x-shader/x-vertex" id="vertex-shader"&gt;
+#version 100
+precision highp float;
+void main() {
+  gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
+  gl_PointSize = 128.0;
+}
+&lt;/script&gt;
+</pre>
+
+<pre class="brush: html">&lt;script type="x-shader/x-fragment" id="fragment-shader"&gt;
+#version 100
+precision mediump float;
+// On définit une variation radiale (à partir du centre)
+void main() {
+  vec2 fragmentPosition = 2.0*gl_PointCoord - 1.0;
+  float distance = length(fragmentPosition);
+  float distanceSqrd = distance * distance;
+  gl_FragColor = vec4(
+    0.2/distanceSqrd,
+    0.1/distanceSqrd,
+    0.0, 1.0 );
+}
+&lt;/script&gt;
+</pre>
+
+<pre class="brush: js hidden">;(function(){
+</pre>
+
+<pre class="brush: js">"use strict"
+window.addEventListener("load", setupWebGL, false);
+var gl,
+  program;
+function setupWebGL (evt) {
+  window.removeEventListener(evt.type, setupWebGL, false);
+  if (!(gl = getRenderingContext()))
+    return;
+
+  var source = document.querySelector("#vertex-shader").innerHTML;
+  var vertexShader = gl.createShader(gl.VERTEX_SHADER);
+  gl.shaderSource(vertexShader,source);
+  gl.compileShader(vertexShader);
+  source = document.querySelector("#fragment-shader").innerHTML
+  var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
+  gl.shaderSource(fragmentShader,source);
+  gl.compileShader(fragmentShader);
+  program = gl.createProgram();
+  gl.attachShader(program, vertexShader);
+  gl.attachShader(program, fragmentShader);
+  gl.linkProgram(program);
+  gl.detachShader(program, vertexShader);
+  gl.detachShader(program, fragmentShader);
+  gl.deleteShader(vertexShader);
+  gl.deleteShader(fragmentShader);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    var linkErrLog = gl.getProgramInfoLog(program);
+    cleanup();
+    document.querySelector("p").innerHTML =
+      "La liaison du programme de shader a échoué. "
+      + "Journal d'erreur : " + linkErrLog;
+    return;
+  }
+  initializeAttributes();
+  gl.useProgram(program);
+  gl.drawArrays(gl.POINTS, 0, 1);
+  cleanup();
+}
+
+var buffer;
+function initializeAttributes() {
+  gl.enableVertexAttribArray(0);
+  buffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([0.0, 0.0]), gl.STATIC_DRAW);
+  gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+}
+
+function cleanup() {
+gl.useProgram(null);
+if (buffer)
+  gl.deleteBuffer(buffer);
+if (program)
+  gl.deleteProgram(program);
+}
+</pre>
+
+<pre class="brush: js hidden">function getRenderingContext() {
+  var canvas = document.querySelector("canvas");
+  canvas.width = canvas.clientWidth;
+  canvas.height = canvas.clientHeight;
+  var gl = canvas.getContext("webgl")
+    || canvas.getContext("experimental-webgl");
+  if (!gl) {
+    var paragraph = document.querySelector("p");
+    paragraph.innerHTML = "Échec de l'obtention du contexte"
+      + " WebGL. Votre navigateur ne supporte peut-être"
+      + " pas WebGL.";
+    return null;
+  }
+  gl.viewport(0, 0,
+    gl.drawingBufferWidth, gl.drawingBufferHeight);
+  gl.clearColor(0.0, 0.0, 0.0, 1.0);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+  return gl;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: js">})();
+</pre>
+</div>
+
+<p>Le code source de cet exemple est également disponible sur <a href="https://github.com/idofilin/webgl-by-example/tree/master/textures-from-code">GitHub</a>.</p>
+
+<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Introduction_aux_attributs_vertex","Apprendre/WebGL/Par_exemple/Les_textures_vidéos")}}</p>
diff --git a/files/fr/web/api/webgl_api/by_example/hello_glsl/index.html b/files/fr/web/api/webgl_api/by_example/hello_glsl/index.html
new file mode 100644
index 0000000000..b26df25f0f
--- /dev/null
+++ b/files/fr/web/api/webgl_api/by_example/hello_glsl/index.html
@@ -0,0 +1,159 @@
+---
+title: Hello GLSL
+slug: Web/API/WebGL_API/By_example/Hello_GLSL
+tags:
+  - Apprendre
+  - Débutant
+  - Exemple
+  - Graphisme
+  - Tutoriel
+  - WebGL
+translation_of: Web/API/WebGL_API/By_example/Hello_GLSL
+---
+<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+
+<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Une_pluie_de_rectangle","Apprendre/WebGL/Par_exemple/Introduction_aux_attributs_vertex")}}</p>
+
+<p class="summary">Dans cet article, on décrit un programme de manipulation de <em>shaders</em> qui dessine un carré de couleur.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Cet exemple devrait fonctionner pour l'ensemble des navigateurs récents. Cependant, pour les versions anciennes ou mobiles, il peut y avoir des dysfonctionnements. Si le canevas reste blanc, vous pouvez vérifier le résultat avec l'exemple suivant qui dessine exactement la même chose. Assurez-vous de bien lire les explications et le code présent sur cette page avant de passer à la suivante.</p>
+</div>
+
+<p>{{EmbedLiveSample("Hello_World_en_GLSL",660,425)}}</p>
+
+<h3 id="Hello_World_en_GLSL"><em>Hello World</em> en GLSL</h3>
+
+<p>Voici un exemple de premier programme qu'on peut écrire pour manipuler des <em>shaders</em>.</p>
+
+<pre class="brush: html hidden">&lt;p&gt;Hello World! Hello GLSL!&lt;/p&gt;
+&lt;canvas&gt;Votre navigateur semble ne pas
+    supporter l'élément HTML5.&lt;/canvas&gt;
+</pre>
+
+<pre class="brush: css hidden">body {
+  text-align : center;
+}
+canvas {
+  width : 280px;
+  height : 210px;
+  margin : auto;
+  padding : 0;
+  border : none;
+  background-color : black;
+}
+
+button {
+  display : block;
+  font-size : inherit;
+  margin : auto;
+  padding : 0.6em;
+}
+</pre>
+
+<pre class="brush: html">&lt;script type="x-shader/x-vertex" id="vertex-shader"&gt;
+#version 100
+void main() {
+  gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
+  gl_PointSize = 64.0;
+}
+&lt;/script&gt;
+</pre>
+
+<pre class="brush: html">&lt;script type="x-shader/x-fragment" id="fragment-shader"&gt;
+#version 100
+void main() {
+  gl_FragColor = vec4(0.18, 0.54, 0.34, 1.0);
+}
+&lt;/script&gt;
+</pre>
+
+<pre class="brush: js hidden">;(function(){
+</pre>
+
+<pre class="brush: js">"use strict"
+window.addEventListener("load", setupWebGL, false);
+var gl,
+  program;
+function setupWebGL (evt) {
+  window.removeEventListener(evt.type, setupWebGL, false);
+  if (!(gl = getRenderingContext()))
+    return;
+
+  var source = document.querySelector("#vertex-shader").innerHTML;
+  var vertexShader = gl.createShader(gl.VERTEX_SHADER);
+  gl.shaderSource(vertexShader,source);
+  gl.compileShader(vertexShader);
+  source = document.querySelector("#fragment-shader").innerHTML
+  var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
+  gl.shaderSource(fragmentShader,source);
+  gl.compileShader(fragmentShader);
+  program = gl.createProgram();
+  gl.attachShader(program, vertexShader);
+  gl.attachShader(program, fragmentShader);
+  gl.linkProgram(program);
+  gl.detachShader(program, vertexShader);
+  gl.detachShader(program, fragmentShader);
+  gl.deleteShader(vertexShader);
+  gl.deleteShader(fragmentShader);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    var linkErrLog = gl.getProgramInfoLog(program);
+    cleanup();
+    document.querySelector("p").innerHTML =
+      "La liaison du programme a échoué."
+      + "Journal d'erreur : " + linkErrLog;
+    return;
+  }
+
+  initializeAttributes();
+
+  gl.useProgram(program);
+  gl.drawArrays(gl.POINTS, 0, 1);
+
+  cleanup();
+}
+
+var buffer;
+function initializeAttributes() {
+  gl.enableVertexAttribArray(0);
+  buffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+  gl.vertexAttribPointer(0, 1, gl.FLOAT, false, 0, 0);
+}
+
+function cleanup() {
+gl.useProgram(null);
+if (buffer)
+  gl.deleteBuffer(buffer);
+if (program)
+  gl.deleteProgram(program);
+}
+</pre>
+
+<pre class="brush: js hidden">function getRenderingContext() {
+  var canvas = document.querySelector("canvas");
+  canvas.width = canvas.clientWidth;
+  canvas.height = canvas.clientHeight;
+  var gl = canvas.getContext("webgl")
+    || canvas.getContext("experimental-webgl");
+  if (!gl) {
+    var paragraph = document.querySelector("p");
+    paragraph.innerHTML = "Échec de l'obtention du contexte"
+      + " WebGL. Votre navigateur ne supporte peut-être"
+      + " pas WebGL.";
+    return null;
+  }
+  gl.viewport(0, 0,
+    gl.drawingBufferWidth, gl.drawingBufferHeight);
+  gl.clearColor(0.0, 0.0, 0.0, 1.0);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+  return gl;
+}
+</pre>
+
+<pre class="brush: js hidden">})();
+</pre>
+
+<p>Le code source de cet exemple est également disponible sur <a href="https://github.com/idofilin/webgl-by-example/tree/master/hello-glsl">GitHub</a>.</p>
+
+<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Une_pluie_de_rectangle","Apprendre/WebGL/Par_exemple/Introduction_aux_attributs_vertex")}}</p>
diff --git a/files/fr/web/api/webgl_api/by_example/index.html b/files/fr/web/api/webgl_api/by_example/index.html
new file mode 100644
index 0000000000..b7741c417f
--- /dev/null
+++ b/files/fr/web/api/webgl_api/by_example/index.html
@@ -0,0 +1,72 @@
+---
+title: WebGL par l'exemple
+slug: Web/API/WebGL_API/By_example
+tags:
+  - Apprendre
+  - Débutant
+  - Graphisme
+  - WebGL
+translation_of: Web/API/WebGL_API/By_example
+---
+<div>{{IncludeSubnav("/fr/docs/Apprendre")}}</div>
+
+<p>{{Next("Apprendre/WebGL/Par_exemple/Détecter_WebGL")}}</p>
+
+<div class="summary">
+<p id="webgl-by-example-summary"><em>WebGL par l'exemple</em> est une série d'articles illustrant les concepts et les possibilités offertes par WebGL. Chaque exemple est accompagné d'explications. Ces démonstrations sont triés par sujet et par niveau de difficulté. Les concepts abordés sont, entre autres, le contexte de rendu, la programmation avec les <em>shaders</em>, les textures, la géométrie et l'interaction avec les utilisateurs.</p>
+</div>
+
+<h2 id="Les_exemples_par_catégorie">Les exemples, par catégorie</h2>
+
+<p>Les exemples de cette section sont triés par ordre de difficulté croissante. Plutôt que de les présenter sous la forme d'une longue liste, ils sont également répartis selon différentes catégories. Un sujet peut être abordé dans plusieurs exemples afin de couvrir des notions simples, intermédiaires ou avancées.</p>
+
+<p>Plutôt que de manipuler des <em>shaders</em>, optimiser des géométrie et gérer la mémoire {{Glossary("GPU")}} dans le premier exemple, la progression se fera étape par étape afin que les exemples et les concepts puissent mieux être compris.</p>
+
+<p>Les exemples sont expliqués, avec des commentaires dans le code et des paragraphes dédiés. Nous vous invitons à lire l'ensemble des commentaires au fur et à mesure, notamment pour les exemples plus avancés où ce qui a été vu auparavant ne sera pas expliqué à nouveau.</p>
+
+<h3 id="Apprendre_à_connaître_le_contexte_de_rendu">Apprendre à connaître le contexte de rendu</h3>
+
+<dl>
+ <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Détecter_WebGL">Détecter WebGL</a></dt>
+ <dd>Dans cet exemple, on montre comment détecter un contexte de rendu {{Glossary("WebGL")}} et l'afficher pour l'utilisateur.</dd>
+ <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Appliquer_des_couleurs">Appliquer des couleurs</a></dt>
+ <dd>Dans cet exemple, on illustre comment appliquer une couleur unie dans un contexte de rendu.</dd>
+ <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Appliquer_une_couleur_à_la_souris">Appliquer une couleur à la souris</a></dt>
+ <dd>Ici, on montre comment combiner des interactions utilisateurs avec des opérations graphiques (là, on appliquera une couleur aléatoire dans le contexte à chaque clic de l'utilisateur).</dd>
+ <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Créer_une_animation_colorée">Créer une animation colorée</a></dt>
+ <dd>Dans cet exemple, on crée une animation simple avec des couleurs en appliquant chaque seconde une couleur aléatoire dans le contexte de rendu WebGL.</dd>
+ <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Masque_de_couleur">Avoir un masque de couleur</a></dt>
+ <dd>Modifier des couleurs aléatoires avec des masques de couleur pour limiter l'intervalle de couleurs qu'on souhaite utiliser.</dd>
+ <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Appliquer_des_découpes_simples">Appliquer des découpes simples</a></dt>
+ <dd>Dans cet exemple, on dessine des rectangles et des carrés simples grâce à des opérations de découpage (<em>scissoring</em>).</dd>
+ <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Tailles_de_canvas_et_WebGL">La taille du canevas et WebGL</a></dt>
+ <dd>Dans cet exemple, on observe ce qui se produit quand on définit (ou pas) la taille de l'élément <code>canvas</code> associé.</dd>
+ <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Modèle_1">Modèle 1</a></dt>
+ <dd>Dans cet exemple, on évoque les fragments de code qui seront utilisés pour les exemples qui suivent (et dans lesquels ils seront cachés car identiques). On définiera également une fonction JavaScript utilitaire pour initialiser WebGL plus facilement.</dd>
+ <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Créer_une_animation_avec_découpe_et_applique">Créer une animation avec du découpage et de l'applique</a></dt>
+ <dd>Avec cet article, on illustre comment créer des animations grâce aux opérations de découpe et d'applique.</dd>
+ <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Une_pluie_de_rectangle">Une pluie de rectangle</a></dt>
+ <dd>On voit ici un jeu, simple, qui mélange les découpes, les animations et les interactions utilisateurs.</dd>
+</dl>
+
+<div>
+<h3 id="Les_bases_de_la_programmation_avec_les_shaders">Les bases de la programmation avec les <em>shaders</em></h3>
+
+<dl>
+ <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Hello_GLSL">Hello GLSL</a></dt>
+ <dd>Un programme de manipulation des shaders simple qui dessine un carré.</dd>
+ <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Introduction_aux_attributs_vertex">Introduction aux attributs de vertex</a></dt>
+ <dd>Ici, on combine la programmation des shaders et les interactions utilisateurs grâce aux attributs de vertex.</dd>
+ <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Générer_des_textures_avec_du_code">Générer des textures avec du code</a></dt>
+ <dd>Une démonstration simple sur l'utilisation des <em>shaders</em> et des textures procédurales.</dd>
+</dl>
+
+<h3 id="Divers_exemples_avancés">Divers exemples avancés</h3>
+
+<dl>
+ <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Les_textures_vidéos">Les textures vidéos</a></dt>
+ <dd>Dans cet exemple, on voit comment utiliser des fichiers vidéos comme des textures.</dd>
+</dl>
+
+<p>{{Next("Apprendre/WebGL/Par_exemple/Détecter_WebGL")}}</p>
+</div>
diff --git a/files/fr/web/api/webgl_api/by_example/introduction_aux_attributs_vertex/index.html b/files/fr/web/api/webgl_api/by_example/introduction_aux_attributs_vertex/index.html
new file mode 100644
index 0000000000..612dbad79c
--- /dev/null
+++ b/files/fr/web/api/webgl_api/by_example/introduction_aux_attributs_vertex/index.html
@@ -0,0 +1,171 @@
+---
+title: Introduction aux attributs de vertex
+slug: Web/API/WebGL_API/By_example/Introduction_aux_attributs_vertex
+tags:
+  - Apprendre
+  - Débutant
+  - Exemple
+  - Graphisme
+  - Tutoriel
+  - WebGL
+translation_of: Web/API/WebGL_API/By_example/Hello_vertex_attributes
+---
+<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+
+<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Hello_GLSL","Apprendre/WebGL/Par_exemple/Générer_des_textures_avec_du_code")}}</p>
+
+<p class="summary">Avec cet exemple, on voit comment combiner la programmation des <em>shaders</em> et les interactions utilisateurs grâce aux attributs des <em>vertex</em>.</p>
+
+<p>{{EmbedLiveSample("Un_Hello_World_en_GLSL",660,425)}}</p>
+
+<h3 id="Un_Hello_World_en_GLSL">Un <em>Hello World</em> en GLSL</h3>
+
+<p>Voici comment envoyer des données saisies à un programme de manipulation des <em>shaders</em> en utilisant la mémoire GPU.</p>
+
+<pre class="brush: html hidden">&lt;p&gt;Voici le premier exemple où on manipule des attributs et où
+on envoie des données au GPU. Cliquez sur le canevas pour modifier
+la position horizontale du carré.&lt;/p&gt;
+&lt;canvas&gt;Il semblerait que votre navigateur ne supporte pas
+    l'élément HTML5 canvas.&lt;/canvas&gt;
+</pre>
+
+<pre class="brush: css hidden">body {
+  text-align : center;
+}
+canvas {
+  width : 280px;
+  height : 210px;
+  margin : auto;
+  padding : 0;
+  border : none;
+  background-color : black;
+}
+button {
+  display : block;
+  font-size : inherit;
+  margin : auto;
+  padding : 0.6em;
+}
+</pre>
+
+<pre class="brush: html">&lt;script type="x-shader/x-vertex" id="vertex-shader"&gt;
+#version 100
+precision highp float;
+
+attribute float position;
+
+void main() {
+  gl_Position = vec4(position, 0.0, 0.0, 1.0);
+  gl_PointSize = 64.0;
+}
+&lt;/script&gt;
+</pre>
+
+<pre class="brush: html">&lt;script type="x-shader/x-fragment" id="fragment-shader"&gt;
+#version 100
+precision mediump float;
+void main() {
+  gl_FragColor = vec4(0.18, 0.54, 0.34, 1.0);
+}
+&lt;/script&gt;
+</pre>
+
+<pre class="brush: js hidden">;(function(){
+</pre>
+
+<pre class="brush: js">"use strict"
+window.addEventListener("load", setupWebGL, false);
+var gl,
+  program;
+function setupWebGL (evt) {
+  window.removeEventListener(evt.type, setupWebGL, false);
+  if (!(gl = getRenderingContext()))
+    return;
+
+  var source = document.querySelector("#vertex-shader").innerHTML;
+  var vertexShader = gl.createShader(gl.VERTEX_SHADER);
+  gl.shaderSource(vertexShader,source);
+  gl.compileShader(vertexShader);
+  source = document.querySelector("#fragment-shader").innerHTML
+  var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
+  gl.shaderSource(fragmentShader,source);
+  gl.compileShader(fragmentShader);
+  program = gl.createProgram();
+  gl.attachShader(program, vertexShader);
+  gl.attachShader(program, fragmentShader);
+  gl.linkProgram(program);
+  gl.detachShader(program, vertexShader);
+  gl.detachShader(program, fragmentShader);
+  gl.deleteShader(vertexShader);
+  gl.deleteShader(fragmentShader);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    var linkErrLog = gl.getProgramInfoLog(program);
+    cleanup();
+    document.querySelector("p").innerHTML =
+      "Shader program did not link successfully. "
+      + "Error log: " + linkErrLog;
+    return;
+  }
+
+  initializeAttributes();
+  gl.useProgram(program);
+  gl.drawArrays(gl.POINTS, 0, 1);
+
+  document.querySelector("canvas").addEventListener("click",
+    function (evt) {
+      var clickXrelativToCanvas =
+          evt.pageX - evt.target.offsetLeft;
+      var clickXinWebGLCoords =
+          2.0 * (clickXrelativToCanvas- gl.drawingBufferWidth/2)
+          / gl.drawingBufferWidth;
+      gl.bufferData(gl.ARRAY_BUFFER,
+        new Float32Array([clickXinWebGLCoords]), gl.STATIC_DRAW);
+      gl.drawArrays(gl.POINTS, 0, 1);
+    }, false);
+}
+
+var buffer;
+function initializeAttributes() {
+  gl.enableVertexAttribArray(0);
+  buffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([0.0]), gl.STATIC_DRAW);
+  gl.vertexAttribPointer(0, 1, gl.FLOAT, false, 0, 0);
+}
+
+window.addEventListener("beforeunload", cleanup, true);
+function cleanup() {
+  gl.useProgram(null);
+  if (buffer)
+    gl.deleteBuffer(buffer);
+  if (program)
+    gl.deleteProgram(program);
+}
+</pre>
+
+<pre class="brush: js hidden">function getRenderingContext() {
+  var canvas = document.querySelector("canvas");
+  canvas.width = canvas.clientWidth;
+  canvas.height = canvas.clientHeight;
+  var gl = canvas.getContext("webgl")
+    || canvas.getContext("experimental-webgl");
+  if (!gl) {
+    var paragraph = document.querySelector("p");
+    paragraph.innerHTML = "Failed to get WebGL context."
+      + "Your browser or device may not support WebGL.";
+    return null;
+  }
+  gl.viewport(0, 0,
+    gl.drawingBufferWidth, gl.drawingBufferHeight);
+  gl.clearColor(0.0, 0.0, 0.0, 1.0);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+  return gl;
+}
+</pre>
+
+<pre class="brush: js hidden">})();
+</pre>
+
+<p>Le code source de cet exemple est également disponible sur <a href="https://github.com/idofilin/webgl-by-example/tree/master/hello-vertex-attributes">GitHub</a>.</p>
+
+<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Hello_GLSL","Apprendre/WebGL/Par_exemple/Générer_des_textures_avec_du_code")}}</p>
diff --git a/files/fr/web/api/webgl_api/by_example/les_textures_vidéos/index.html b/files/fr/web/api/webgl_api/by_example/les_textures_vidéos/index.html
new file mode 100644
index 0000000000..ab1ea5a388
--- /dev/null
+++ b/files/fr/web/api/webgl_api/by_example/les_textures_vidéos/index.html
@@ -0,0 +1,23 @@
+---
+title: Les textures vidéos
+slug: Web/API/WebGL_API/By_example/Les_textures_vidéos
+tags:
+  - Apprendre
+  - Avancé
+  - Exemple
+  - Graphisme
+  - Tutoriel
+  - WebGL
+translation_of: Web/API/WebGL_API/By_example/Video_textures
+---
+<div>{{draft}}{{IncludeSubnav("/fr/Apprendre")}}</div>
+
+<p>{{Previous("Apprendre/WebGL/Par_exemple/Générer_des_textures_avec_du_code")}}</p>
+
+<p class="summary">Cet exemple illustre comment utiliser des fichiers vidéos comme textures.</p>
+
+<h3 id="Des_textures_à_partir_de_vidéos">Des textures à partir de vidéos</h3>
+
+<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample8/index.html', 670, 510)}}</p>
+
+<p>{{Previous("Apprendre/WebGL/Par_exemple/Générer_des_textures_avec_du_code")}}</p>
diff --git a/files/fr/web/api/webgl_api/by_example/masque_de_couleur/index.html b/files/fr/web/api/webgl_api/by_example/masque_de_couleur/index.html
new file mode 100644
index 0000000000..ad5e0dd461
--- /dev/null
+++ b/files/fr/web/api/webgl_api/by_example/masque_de_couleur/index.html
@@ -0,0 +1,136 @@
+---
+title: Masque de couleur
+slug: Web/API/WebGL_API/By_example/Masque_de_couleur
+tags:
+  - Apprendre
+  - Débutant
+  - Exemple
+  - Graphisme
+  - Tutoriel
+  - WebGL
+translation_of: Web/API/WebGL_API/By_example/Color_masking
+---
+<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+
+<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Créer_une_animation_colorée","Apprendre/WebGL/Par_exemple/Appliquer_des_découpes_simples")}}</p>
+
+<div id="color-masking">
+<div class="summary">
+<p>Dans cet article, on modifie des couleurs aléatoires grâce à un masque de couleur. Cela permet de limiter la plage de couleurs affichées à certains tons.</p>
+</div>
+
+<p>{{EmbedLiveSample("color-masking-source",660,425)}}</p>
+
+<div id="color-masking-intro">
+<h3 id="Appliquer_un_masque_sur_des_couleurs_aléatoires">Appliquer un masque sur des couleurs aléatoires</h3>
+
+<p>Dans cet exemple, on modifie les couleurs aléatoires utilisées pour une animation grâce à l'opération {{domxref("WebGLRenderingContext.colorMask()","colorMask()")}}. D'une certaine façon, cette opération est analogue à la modification qu'on obtient lorsqu'on regarde à travers du verre teinté ou derrière une filtre coloré. Ainsi, en masquant les canaux vert et bleu, on ne pourra recevoir que les composantes rouges des pixels et cela donnera l'impression de regarder à travers du verre teinté de rouge.</p>
+
+<p>Les masques de couleur nous permettent d'illustrer quelques concepts de base <a href="https://en.wikipedia.org/wiki/Color_theory">de la théorie des couleurs</a>. En masquant certaines composantes, on rapproche les couleurs affichées de la couleur complémentaire. Ainsi, en masquant le bleu et le rouge, on obtiendrait des tons de vert. En masquant uniquement le canal bleu, on obtiendra des tons de jaune (dont orange, marron, olive, etc.) qui est la couleur complémentaire du bleu. De la même façon, en masquant uniquement le vert, on obtiendrait des tons magenta (pourpres, rouges, etc.) et en masquant uniquement le rouge, on obtiendrait des tons cyan.</p>
+
+<p>On voit que les appels à <code>colorMask()</code> sont uniquement déclenchés lorsque l'utilisateur clique sur l'un des boutons. En revanche, le rendu est fait chaque seconde grâce au timer. L'état du masque de couleur lié à {{Glossary("WebGL")}} est conservé et il n'est donc pas nécessaire d'appeler <code>colorMask()</code> à chaque frame pour régler le masque. Cela illustre la manière dont WebGL est un automate a état. Dans un premier temps, on initialise l'état de WebGL et ensuite, à chaque frame, on déclenche uniquement les opérations de dessin.</p>
+
+<p>Les masques de couleurs permettent d'avoir un contrôle précis pour mettre à jour les pixels à l'écran. En limitant les canaux de couleur qui sont utilisés à chaque commande de dessin, on peut utiliser chaque canal à bon escient et on peut par exemple stocler une image en ton de gris.</p>
+
+<p>Enfin, l'application d'un masque de couleur nous montre que {{Glossary("WebGL")}} n'est pas seulement un automate à états mais aussi un <em>processus</em> graphique. Cela signifie que les opérations graphiques liées à WebGL sont effectuées dans un ordre donné et que le résultat de chaque opération sert de point d'entrée pour l'opération suivante. Ainsi, l'opération d'applique définit la valeur pour chaque pixel. L'application du masque se produit plus tard dans le processus et modifie la couleur. Ainsi, le résultat final affiché à l'écran est teinté par la couleur du masque.</p>
+</div>
+
+<div id="color-masking-source">
+<pre class="brush: html">&lt;p&gt;Tinting the displayed colors with color masking.&lt;/p&gt;
+&lt;canvas&gt;Il semblerait que votre navigateur ne supporte pas
+    l'élément HTML5 canvas.&lt;/canvas&gt;
+&lt;button id="red-toggle"&gt;On&lt;/button&gt;
+&lt;button id="green-toggle"&gt;On&lt;/button&gt;
+&lt;button id="blue-toggle"&gt;On&lt;/button&gt;
+</pre>
+
+<pre class="brush: css">body {
+  text-align : center;
+}
+canvas {
+  display : block;
+  width : 280px;
+  height : 210px;
+  margin : auto;
+  padding : 0;
+  border : none;
+  background-color : black;
+}
+button {
+  display : inline-block;
+  font-family : serif;
+  font-size : inherit;
+  font-weight : 900;
+  color : white;
+  margin : auto;
+  padding : 0.6em 1.2em;
+}
+#red-toggle {
+  background-color : red;
+}
+#green-toggle {
+  background-color : green;
+}
+#blue-toggle {
+  background-color : blue;
+}
+</pre>
+
+<pre class="brush: js" id="livesample-js">window.addEventListener("load", function setupAnimation (evt) {
+  "use strict"
+  window.removeEventListener(evt.type, setupAnimation, false);
+
+  var canvas = document.querySelector("canvas");
+  var gl = canvas.getContext("webgl")
+      || canvas.getContext("experimental-webgl");
+  if (!gl) {
+    document.querySelector("p").innerHTML =
+      "Échec lors de l'obtention du contexte WebGL."
+      + "Votre navigateur ou appareil ne supporte "
+      + "peut-être pas WebGL.";
+    return;
+  }
+  gl.viewport(0, 0,
+    gl.drawingBufferWidth, gl.drawingBufferHeight);
+
+  var timer = setInterval(drawAnimation, 1000);
+
+  var mask = [true, true, true];
+  var redtoggle = document.querySelector("#red-toggle"),
+    greentoggle = document.querySelector("#green-toggle"),
+    bluetoggle = document.querySelector("#blue-toggle");
+  redtoggle.addEventListener("click", setColorMask, false);
+  greentoggle.addEventListener("click", setColorMask, false);
+  bluetoggle.addEventListener("click", setColorMask, false);
+
+  function setColorMask(evt) {
+    var index =
+      evt.target === greentoggle &amp;&amp; 1
+      || evt.target === bluetoggle &amp;&amp; 2
+      || 0;
+    mask[index] = !mask[index];
+    if (mask[index] === true)
+      evt.target.innerHTML="On";
+    else
+      evt.target.innerHTML="Off";
+    gl.colorMask(mask[0], mask[1], mask[2], true);
+    drawAnimation();
+  };
+
+  function drawAnimation () {
+    var color = getRandomColor();
+    gl.clearColor(color[0], color[1], color[2], 1.0);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+  }
+
+  function getRandomColor() {
+    return [Math.random(), Math.random(), Math.random()];
+  }
+}, false);
+</pre>
+
+<p>Le code source de cet exemple est également disponible sur <a href="https://github.com/idofilin/webgl-by-example/tree/master/color-masking">GitHub</a>.</p>
+</div>
+</div>
+
+<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Créer_une_animation_colorée","Apprendre/WebGL/Par_exemple/Appliquer_des_découpes_simples")}}</p>
diff --git a/files/fr/web/api/webgl_api/by_example/modèle_1/index.html b/files/fr/web/api/webgl_api/by_example/modèle_1/index.html
new file mode 100644
index 0000000000..a055a358c8
--- /dev/null
+++ b/files/fr/web/api/webgl_api/by_example/modèle_1/index.html
@@ -0,0 +1,97 @@
+---
+title: Modèle 1
+slug: Web/API/WebGL_API/By_example/Modèle_1
+tags:
+  - Apprendre
+  - Débutant
+  - Exemple
+  - Tutoriel
+  - WebGL
+translation_of: Web/API/WebGL_API/By_example/Boilerplate_1
+---
+<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+
+<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Tailles_de_canvas_et_WebGL","Apprendre/WebGL/Par_exemple/Créer_une_animation_avec_découpe_et_applique")}}</p>
+
+<p class="summary">Dans cet article, on décrit les fragments de code qui seront réutilisés pour les exemples suivants (où ils seront masqués pour une meilleur lisibilité). Parmi ce code, on définit une fonction JavaScript utilitaire qui permet de simplifier l'initialisation de WebGL.</p>
+
+<p>{{EmbedLiveSample("Socle_pour_l'initialisation_du_contexte_WebGL",660,400)}}</p>
+
+<h2 id="Socle_pour_l'initialisation_du_contexte_WebGL">Socle pour l'initialisation du contexte WebGL</h2>
+
+<p>Nous avons vu plusieurs fois les mêmes morceaux de {{Glossary("HTML")}}, {{Glossary("CSS")}} et {{Glossary("JavaScript")}}. Nous allons donc les cacher par la suite afin de mieux nous concentrer sur les parties du code qui sont pertinentes pour l'apprentissage de {{Glossary("WebGL")}}.</p>
+
+<p>Plus précisément, le code HTML contiendra</p>
+
+<ul>
+ <li>Un élément {{HTMLElement("p")}} qui décrira l'exemple et qui permettra d'afficher des messages d'erreur</li>
+ <li>Un élément {{HTMLElement("canvas")}}</li>
+ <li>Un bouton (élément {{HTMLElement("button")}})</li>
+</ul>
+
+<p>Les règles CSS s'appliqueront aux éléments <code>body</code>, <code>canvas</code> et <code>button</code>. Les éléments supplémentaires pour le code CSS et HTML seront détaillés dans les pages des exemples concernés.</p>
+
+<p>Dans les exemples suivants, on utilisera la fonction utilitaire JavaScript <code>getRenderingContext</code> pour initialiser {{domxref("WebGLRenderingContext","le contexte de rendu WebGL", "", 1)}}. Grâce aux exemples précédents, vous devriez pouvoir comprendre le rôle de cette fonction. Pour résumer, celle-ci</p>
+
+<ul>
+ <li>Obtient le contexte de rendu de la part de l'élément <code>canvas</code></li>
+ <li>Initialise le buffer de dessin</li>
+ <li>Nettoie le buffer avec <code>clear</code></li>
+ <li>Applique le contexte initialisé</li>
+</ul>
+
+<p>S'il y a une erreur, la fonction affiche un message d'erreur et renvoie <code>null</code>.</p>
+
+<p>Enfin, tout le code JavaScript est exécuté par une fonction immédiatement appelée (une technique plutôt commune avec JavaScript). La déclaration de la fonction et son invocation seront cachées.</p>
+
+<pre class="brush: html">&lt;p&gt;[ Un texte qui décrit l'exemple. ]&lt;/p&gt;
+&lt;button&gt;[ Un bouton optionnel pour les interactions. ]&lt;/button&gt;
+&lt;canvas&gt;Il semblerait que votre navigateur ne supporte
+    pas le canevas HTML5.&lt;/canvas&gt;
+</pre>
+
+<pre class="brush: css">body {
+  text-align : center;
+}
+canvas {
+  display : block;
+  width : 280px;
+  height : 210px;
+  margin : auto;
+  padding : 0;
+  border : none;
+  background-color : black;
+}
+button {
+  display : block;
+  font-size : inherit;
+  margin : auto;
+  padding : 0.6em;
+}
+</pre>
+
+<pre class="brush: js">function getRenderingContext() {
+  var canvas = document.querySelector("canvas");
+  canvas.width = canvas.clientWidth;
+  canvas.height = canvas.clientHeight;
+  var gl = canvas.getContext("webgl")
+    || canvas.getContext("experimental-webgl");
+  if (!gl) {
+    var paragraph = document.querySelector("p");
+    paragraph.innerHTML = "Échec de l'obtention du "
+      + "contexte WebGL."
+      + "Votre navigateur ou appareil ne supporte "
+      + "peut-être pas WebGL.";
+    return null;
+  }
+  gl.viewport(0, 0,
+    gl.drawingBufferWidth, gl.drawingBufferHeight);
+  gl.clearColor(0.0, 0.0, 0.0, 1.0);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+  return gl;
+}
+</pre>
+
+<p>Le code source de cet exemple est également disponible sur <a href="https://github.com/idofilin/webgl-by-example/tree/master/boilerplate-1">GitHub</a>.</p>
+
+<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Tailles_de_canvas_et_WebGL","Apprendre/WebGL/Par_exemple/Créer_une_animation_avec_découpe_et_applique")}}</p>
diff --git a/files/fr/web/api/webgl_api/by_example/tailles_de_canvas_et_webgl/index.html b/files/fr/web/api/webgl_api/by_example/tailles_de_canvas_et_webgl/index.html
new file mode 100644
index 0000000000..086e0394a7
--- /dev/null
+++ b/files/fr/web/api/webgl_api/by_example/tailles_de_canvas_et_webgl/index.html
@@ -0,0 +1,82 @@
+---
+title: Tailles de canvas et WebGL
+slug: Web/API/WebGL_API/By_example/Tailles_de_canvas_et_WebGL
+tags:
+  - Apprendre
+  - Débutant
+  - Exemple
+  - Tutoriel
+  - WebGL
+translation_of: Web/API/WebGL_API/By_example/Canvas_size_and_WebGL
+---
+<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+
+<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_des_découpes_simples","Apprendre/WebGL/Par_exemple/Modèle_1")}}</p>
+
+<p>{{EmbedLiveSample("Les_effets_liés_à_la_taille_du_canevas_sur_le_rendu_avec_WebGL",660,180)}}</p>
+
+<p class="summary">Dans cet exemple, on observe l'effet obtenu quand on définit (ou non) la taille du canevas HTML avec sa taille {{Glossary("CSS")}} (exprimée en pixels CSS), tel qu'il apparaît dans la fenêtre du navigateur.</p>
+
+<h3 id="Les_effets_liés_à_la_taille_du_canevas_sur_le_rendu_avec_WebGL">Les effets liés à la taille du canevas sur le rendu avec WebGL</h3>
+
+<p>Grâce aux méthodes {{domxref("WebGLRenderingContext.scissor()","scissor()")}} et {{domxref("WebGLRenderingContext.clear()","clear()")}} on peut démontrer que le tampon (<em>buffer</em>) de dessin WebGL est affecté par la taille du canevas (l'élément HTML <code>canvas</code>).</p>
+
+<p>La taille du premier canevas est définie avec la taille de l'élément, mis en forme, qui est déterminée par {{Glossary("CSS")}}. Pour cela, on affecte respectivement les valeurs {{domxref("Element.clientWidth","clientWidth")}} and {{domxref("Element.clientHeight","clientHeight")}} aux propriétés {{domxref("HTMLCanvasElement.width","width")}} et {{domxref("HTMLCanvasElement.height","height")}}.</p>
+
+<p>Pour le deuxième canevas, on n'applique pas ce traitement, c'est donc les dimensions internes du canevas : {{domxref("HTMLCanvasElement.width","width")}} et {{domxref("HTMLCanvasElement.height","height")}} qui sont prises en compte. Celles-ci sont différentes des dimensions de l'élément <code>canvas</code> affiché dans le fenêtre du navigateur.</p>
+
+<p>L'effet devient visible quand on utilise les méthodes {{domxref("WebGLRenderingContext.scissor()","scissor()")}} et {{domxref("WebGLRenderingContext.clear()","clear()")}} pour dessiner un carré au centre du canevas en définissant sa position et sa taille en pixels. Dans le premier canevas, on obtient bien le bon résultat et dans le deuxième, on a la mauvaise forme, la mauvaise taille et la mauvaise position.</p>
+
+<pre class="brush: html">&lt;p&gt;On compare les deux canevas.&lt;/p&gt;
+&lt;canvas&gt;Votre navigateur ne semble pas
+    supporter l'élément HTML5 canvas.&lt;/canvas&gt;
+&lt;canvas&gt;Votre navigateur ne semble pas
+    supporter l'élément HTML5 canvas.&lt;/canvas&gt;
+</pre>
+
+<pre class="brush: css">body {
+  text-align : center;
+}
+canvas {
+  width : 120px;
+  height : 80px;
+  margin : auto;
+  padding : 0;
+  border : none;
+  background-color : black;
+}
+</pre>
+
+<pre class="brush: js">window.addEventListener("load", function() {
+  "use strict"
+  var firstCanvas = document.getElementsByTagName("canvas")[0],
+    secondCanvas = document.getElementsByTagName("canvas")[1];
+
+  // Ici on applique le traitement spécifique au premier
+  // canevas
+  firstCanvas.width = firstCanvas.clientWidth;
+  firstCanvas.height = firstCanvas.clientHeight;
+
+  // Ensuite on traite les deux canevas de la même façon
+  [firstCanvas, secondCanvas].forEach(function(canvas) {
+    var gl = canvas.getContext("webgl")
+      || canvas.getContext("experimental-webgl");
+    if (!gl) {
+      document.querySelector("p").innerHTML =
+        "Échec de l'obtention du contexte WebGL. "
+        + "Votre navigateur peut ne pas supporter WebGL.";
+      return;
+    }
+    gl.viewport(0, 0,
+      gl.drawingBufferWidth, gl.drawingBufferHeight);
+    gl.enable(gl.SCISSOR_TEST);
+    gl.scissor(30, 10, 60, 60);
+    gl.clearColor(1.0, 1.0, 0.0, 1.0);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+  });
+}, false);
+</pre>
+
+<p>Le code source de cet exemple est également disponible sur <a href="https://github.com/idofilin/webgl-by-example/tree/master/canvas-size-and-webgl">GitHub</a>.</p>
+
+<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_des_découpes_simples","Apprendre/WebGL/Par_exemple/Modèle_1")}}</p>
diff --git a/files/fr/web/api/webgl_api/by_example/une_pluie_de_rectangle/index.html b/files/fr/web/api/webgl_api/by_example/une_pluie_de_rectangle/index.html
new file mode 100644
index 0000000000..e9f9bcdf8c
--- /dev/null
+++ b/files/fr/web/api/webgl_api/by_example/une_pluie_de_rectangle/index.html
@@ -0,0 +1,176 @@
+---
+title: Une pluie de rectangle
+slug: Web/API/WebGL_API/By_example/Une_pluie_de_rectangle
+tags:
+  - Apprendre
+  - Débutant
+  - Exemple
+  - Graphisme
+  - Tutoriel
+  - WebGL
+translation_of: Web/API/WebGL_API/By_example/Raining_rectangles
+---
+<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+
+<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Créer_une_animation_avec_découpe_et_applique","Apprendre/WebGL/Par_exemple/Hello_GLSL")}}</p>
+
+<p class="summary">Cet exemple permet de créer un jeu simple qui illustre ce qu'il est possible de faire avec du « découpage », des animations et des interactions utilisateur.</p>
+
+<p>{{EmbedLiveSample("Utiliser_des_animations_et_des_interactions_grâce_à_des_découpes",660,425)}}</p>
+
+<h3 id="Utiliser_des_animations_et_des_interactions_grâce_à_des_découpes">Utiliser des animations et des interactions grâce à des découpes</h3>
+
+<p>Voici un jeu simple où il faut essayer de cliquer sur les rectangles qui tombent pour en attraper le plus possible. Dans cet exemple, on utilise un approche orientée objet pour représenter les rectangles. Cela permet de mieux gérer l'état du rectangle (sa position, sa couleur, etc.) et cela rend le code plus compact et plus facile à réutiliser.</p>
+
+<p>Dans cet exemple, on combine l'applique de couleurs unis dans le tampon de dessin et des opérations de découpe. C'est un aperçu d'une application graphique complète qui manipule les différentes phases des processus {{Glossary("WebGL")}} et de son automate.</p>
+
+<p>De plus, cet exmple illustre comment intégrer des fonctions WebGL dans une boucle de jeu. La boucle de jeu est responsable du dessin pour l'animation, de la gestion des entrées utilisateur et de la réactivité de l'ensemble. Voici comment la boucle de jeu est implémentée avec des  <code>setTimeout</code>.</p>
+
+<pre class="brush: html hidden">&lt;p&gt;Vous en avez attrapé
+&lt;strong&gt;0&lt;/strong&gt;.
+  Vous en avez loupé
+&lt;strong&gt;0&lt;/strong&gt;.&lt;/p&gt;
+&lt;canvas&gt;Il semblerait que votre
+    navigateur ne supporte pas l'élément
+    HTML5 canvas.&lt;/canvas&gt;
+</pre>
+
+<pre class="brush: css hidden">body {
+  text-align : center;
+}
+canvas {
+  display : block;
+  width : 280px;
+  height : 210px;
+  margin : auto;
+  padding : 0;
+  border : none;
+  background-color : black;
+}
+button {
+  display : block;
+  font-size : inherit;
+  margin : auto;
+  padding : 0.6em;
+}
+</pre>
+
+<pre class="brush: js hidden">;(function(){
+</pre>
+
+<pre class="brush: js" id="livesample-js">"use strict"
+window.addEventListener("load", setupAnimation, false);
+var gl,
+  timer,
+  rainingRect,
+  scoreDisplay,
+  missesDisplay;
+function setupAnimation (evt) {
+  window.removeEventListener(evt.type, setupAnimation, false);
+  if (!(gl = getRenderingContext()))
+    return;
+  gl.enable(gl.SCISSOR_TEST);
+
+  rainingRect = new Rectangle();
+  timer = setTimeout(drawAnimation, 17);
+  document.querySelector("canvas")
+      .addEventListener("click", playerClick, false);
+  var displays = document.querySelectorAll("strong");
+  scoreDisplay = displays[0];
+  missesDisplay = displays[1];
+}
+
+var score = 0,
+  misses = 0;
+function drawAnimation () {
+  gl.scissor(rainingRect.position[0], rainingRect.position[1],
+      rainingRect.size[0] , rainingRect.size[1]);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+  rainingRect.position[1] -= rainingRect.velocity;
+  if (rainingRect.position[1] &lt; 0) {
+    misses += 1;
+    missesDisplay.innerHTML = misses;
+    rainingRect = new Rectangle();
+  }
+  // On utilise la fonction setTimeout pour l'animation
+  // et on appelle ainsi la fonction drawAnimation toutes
+  // les 17ms, sinon, on n'aurait pas d'animation.
+  timer = setTimeout(drawAnimation, 17);
+}
+
+function playerClick (evt) {
+  // Il est nécessaire de transfomer la position de l'événement
+  // déclenché par le clic, exprimée dans le repèree de la fenêtre
+  // pour obtenir la position relative au canevas.
+  // De plus, on rappelle qu'avec WebGL les ordonnées croissent
+  // selon l'axe vertical, c'est-à-dire l'inverse du système
+  // utilisé pour la fenêtre du navigateur.
+  var position = [
+      evt.pageX - evt.target.offsetLeft,
+      gl.drawingBufferHeight - (evt.pageY - evt.target.offsetTop),
+    ];
+  // si le clic est sur un rectangle, on l'attrape.
+  // On incrémente donc le score et on crée un nouveau rectangle
+  var diffPos = [ position[0] - rainingRect.position[0],
+      position[1] - rainingRect.position[1] ];
+  if ( diffPos[0] &gt;= 0 &amp;&amp; diffPos[0] &lt; rainingRect.size[0]
+      &amp;&amp; diffPos[1] &gt;= 0 &amp;&amp; diffPos[1] &lt; rainingRect.size[1] ) {
+    score += 1;
+    scoreDisplay.innerHTML = score;
+    rainingRect = new Rectangle();
+  }
+}
+
+function Rectangle () {
+  // On garde une référence au nouvel objet Rectangle
+  // plutôt que de risquer une confusion avec this.
+  var rect = this;
+  // On prend trois nombres aléatoires pour la taille
+  // et la position du nouveau rectangle. On utilise
+  // un nombre différent pour la position et la taille
+  // car on veut que celles-ci soient indépendantes.
+  var randNums = getRandomVector();
+  rect.size = [
+    5 + 120 * randNums[0],
+    5 + 120 * randNums[1]
+  ];
+  rect.position = [
+    randNums[2]*(gl.drawingBufferWidth - rect.size[0]),
+    gl.drawingBufferHeight
+  ];
+  rect.velocity = 1.0 + 6.0*Math.random();
+  rect.color = getRandomVector();
+  gl.clearColor(rect.color[0], rect.color[1], rect.color[2], 1.0);
+  function getRandomVector() {
+    return [Math.random(), Math.random(), Math.random()];
+  }
+}
+</pre>
+
+<pre class="brush: js hidden">function getRenderingContext() {
+  var canvas = document.querySelector("canvas");
+  canvas.width = canvas.clientWidth;
+  canvas.height = canvas.clientHeight;
+  var gl = canvas.getContext("webgl")
+    || canvas.getContext("experimental-webgl");
+  if (!gl) {
+    var paragraph = document.querySelector("p");
+    paragraph.innerHTML = "Échec de l'obtention du contexte."
+      + " WebGL. Votre navigateur ne supporte peut-être pas "
+      + " WebGL.";
+    return null;
+  }
+  gl.viewport(0, 0,
+    gl.drawingBufferWidth, gl.drawingBufferHeight);
+  gl.clearColor(0.0, 0.0, 0.0, 1.0);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+  return gl;
+}
+</pre>
+
+<pre class="brush: js hidden">})();
+</pre>
+
+<p>Le code source de cet exemple est également disponible sur <a href="https://github.com/idofilin/webgl-by-example/tree/master/raining-rectangles">GitHub</a>.</p>
+
+<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Créer_une_animation_avec_découpe_et_applique","Apprendre/WebGL/Par_exemple/Hello_GLSL")}}</p>
diff --git a/files/fr/web/api/webgl_api/données/index.html b/files/fr/web/api/webgl_api/données/index.html
new file mode 100644
index 0000000000..f41b0e2f1d
--- /dev/null
+++ b/files/fr/web/api/webgl_api/données/index.html
@@ -0,0 +1,56 @@
+---
+title: Les données en WebGL
+slug: Web/API/WebGL_API/Données
+tags:
+  - 3D
+  - API WebGL
+  - Attributs
+  - BesoinDExemple
+  - BesoinDeContenu
+  - Graphismes
+  - Graphismes 3D
+  - Guide
+  - Intermédiaire
+  - Uniformes
+  - Variants
+  - WebGL
+  - dessin
+translation_of: Web/API/WebGL_API/Data
+---
+<div>{{WebGLSidebar}}{{draft}}</div>
+
+<p>Les programmes shaders ont accès à trois types de stockage de données, chacun d'entre eux ayant un usage particulier. Chaque type de variable est accessible par l'un des types de programmes de shader ou par les deux (en fonction du type de stockage de données), et éventuellement, par le code JavaScript du site, suivant le type de variable particulier.</p>
+
+<h2 id="Types_de_données_GLSL">Types de données GLSL</h2>
+
+<p>&lt;&lt;documenter les types de base, les vecteurs, etc. ; voir <a href="https://www.khronos.org/opengl/wiki/Data_Type_(GLSL)">Data Type (GLSL)</a>  sur le wiki WebGL de Khronos &gt;&gt;</p>
+
+<h2 id="Variables_GLSL">Variables GLSL</h2>
+
+<p>Il existe trois types de stockage "variable" ou de stockage de données dans GLSL, chacun ayant son propre but et ses propres cas d'utilisation : <strong>{{anch("Attributes", "attributes")}}</strong>, <strong>{{anch("Varyings", "varyings")}}</strong>, et <strong>{{anch("Uniforms", "uniforms")}}</strong>.</p>
+
+<h3 id="Attributes">Attributes</h3>
+
+<p>Les <strong>attributes</strong> sont des variables GLSL qui ne sont disponibles que pour le shader de sommet (en tant que variables) et le code JavaScript. Les attributs sont généralement utilisés pour stocker des informations de couleur, des coordonnées de texture et toutes les autres données calculées ou récupérées qui doivent être partagées entre le code JavaScript et le shader de sommet.</p>
+
+<p>&lt;&lt;add how to use them&gt;&gt;</p>
+
+<h3 id="Varyings">Varyings</h3>
+
+<p>Les <strong>varyings</strong> sont des variables déclarées par le shader de sommet et elle sont utilisées pour transmettre des données du shader de sommet au shader de fragment. Ceci est communément utilisé pour partager un sommet {{interwiki ("wikipedia", "Normal_ (géométrie)", "vecteur normal")}} après qu'il a été calculé par le shader de sommet.</p>
+
+<p>&lt;&lt;how to use&gt;&gt;</p>
+
+<h3 id="Uniforms">Uniforms</h3>
+
+<p>Les <strong>uniforms</strong> sont définis par le code JavaScript et sont disponibles à la fois pour le shader de sommet et pour celui de fragment. Ils sont utilisés pour fournir des valeurs qui seront les mêmes pour tout ce qui est dessiné dans le cadre, telles que les positions et les intensités d'éclairage, la transformation globale et les détails de la perspective, et ainsi de suite.</p>
+
+<p>&lt;&lt;add details&gt;&gt;</p>
+
+<h2 id="Tampons">Tampons</h2>
+
+<p>&lt;&lt;add information&gt;&gt;</p>
+
+<h2 id="Textures">Textures</h2>
+
+<p>&lt;&lt;add information&gt;&gt;</p>
diff --git a/files/fr/web/api/webgl_api/index.html b/files/fr/web/api/webgl_api/index.html
new file mode 100644
index 0000000000..27bb717381
--- /dev/null
+++ b/files/fr/web/api/webgl_api/index.html
@@ -0,0 +1,303 @@
+---
+title: 'L''API WebGL : graphismes 2D et 3D pour le web'
+slug: Web/API/WebGL_API
+tags:
+  - 3D
+  - API WebGL
+  - Avancé
+  - Graphiques
+  - Graphiques 3D
+  - Media
+  - Vue d'ensemble
+  - WebGL
+translation_of: Web/API/WebGL_API
+---
+<div>{{WebGLSidebar}}</div>
+
+<div class="summary">
+<p>WebGL (Bibliothèque de Graphismes Web) est une API JavaScript pour l'affichage de graphismes 2D et 3D dans n'importe quel navigateur web compatible sans utilisation de modules complémentaires. WebGl réalise cela en introduisant une API qui se conforme de façon très proche à OpenGL ES 2.0 et qui peut être utilisée dans les éléments <a href="/fr/docs/HTML/Canvas" title="/fr/docs/HTML/Canvas">canvas </a>d'HTML5.</p>
+</div>
+
+<p>Le support pour WebGL est présent dans <a href="https://developer.mozilla.org/fr-FR/Firefox" title="Firefox 4 for developers">Firefox</a> 4+, <a href="http://www.google.com/chrome/" title="http://www.google.com/chrome/">Google Chrome</a> 9+, <a href="http://www.opera.com/" title="http://www.opera.com/">Opera</a> 12+, <a href="http://www.apple.com/safari/" title="http://www.apple.com/fr/safari/">Safari </a>5.1+ and <a href="http://windows.microsoft.com/fr-fr/internet-explorer/browser-ie" title="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a> 11+ ; toutefois, l'appareil de l'utilisateur doit aussi avoir le matériel qui supporte ces fonctionnalités.</p>
+
+<p>L'élément {{HTMLElement("canvas")}} est aussi utilisé par <a href="https://developer.mozilla.org/fr-FR/docs/Web/API/Canvas_API">Canvas 2D</a> pour faire des graphismes 2D sur les pages web.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Interfaces_standard">Interfaces standard</h3>
+
+<div class="index">
+<ul>
+ <li>{{domxref("WebGLRenderingContext")}}</li>
+ <li>{{domxref("WebGL2RenderingContext")}} {{experimental_inline}}</li>
+ <li>{{domxref("WebGLActiveInfo")}}</li>
+ <li>{{domxref("WebGLBuffer")}}</li>
+ <li>{{domxref("WebGLContextEvent")}}</li>
+ <li>{{domxref("WebGLFramebuffer")}}</li>
+ <li>{{domxref("WebGLProgram")}}</li>
+ <li>{{domxref("WebGLQuery")}} {{experimental_inline}}</li>
+ <li>{{domxref("WebGLRenderbuffer")}}</li>
+ <li>{{domxref("WebGLSampler")}} {{experimental_inline}}</li>
+ <li>{{domxref("WebGLShader")}}</li>
+ <li>{{domxref("WebGLShaderPrecisionFormat")}}</li>
+ <li>{{domxref("WebGLSync")}} {{experimental_inline}}</li>
+ <li>{{domxref("WebGLTexture")}}</li>
+ <li>{{domxref("WebGLTransformFeedback")}} {{experimental_inline}}</li>
+ <li>{{domxref("WebGLUniformLocation")}}</li>
+ <li>{{domxref("WebGLVertexArrayObject")}} {{experimental_inline}}</li>
+</ul>
+</div>
+
+<h3 id="Extensions">Extensions</h3>
+
+<div class="index">
+<ul>
+ <li>{{domxref("ANGLE_instanced_arrays")}}</li>
+ <li>{{domxref("EXT_blend_minmax")}}</li>
+ <li>{{domxref("EXT_color_buffer_float")}}</li>
+ <li>{{domxref("EXT_color_buffer_half_float")}}</li>
+ <li>{{domxref("EXT_disjoint_timer_query")}}</li>
+ <li>{{domxref("EXT_frag_depth")}}</li>
+ <li>{{domxref("EXT_sRGB")}}</li>
+ <li>{{domxref("EXT_shader_texture_lod")}}</li>
+ <li>{{domxref("EXT_texture_filter_anisotropic")}}</li>
+ <li>{{domxref("OES_element_index_uint")}}</li>
+ <li>{{domxref("OES_standard_derivatives")}}</li>
+ <li>{{domxref("OES_texture_float")}}</li>
+ <li>{{domxref("OES_texture_float_linear")}}</li>
+ <li>{{domxref("OES_texture_half_float")}}</li>
+ <li>{{domxref("OES_texture_half_float_linear")}}</li>
+ <li>{{domxref("OES_vertex_array_object")}}</li>
+ <li>{{domxref("WEBGL_color_buffer_float")}}</li>
+ <li>{{domxref("WEBGL_compressed_texture_astc")}}</li>
+ <li>{{domxref("WEBGL_compressed_texture_atc")}}</li>
+ <li>{{domxref("WEBGL_compressed_texture_etc")}}</li>
+ <li>{{domxref("WEBGL_compressed_texture_etc1")}}</li>
+ <li>{{domxref("WEBGL_compressed_texture_pvrtc")}}</li>
+ <li>{{domxref("WEBGL_compressed_texture_s3tc")}}</li>
+ <li>{{domxref("WEBGL_compressed_texture_s3tc_srgb")}}</li>
+ <li>{{domxref("WEBGL_debug_renderer_info")}}</li>
+ <li>{{domxref("WEBGL_debug_shaders")}}</li>
+ <li>{{domxref("WEBGL_depth_texture")}}</li>
+ <li>{{domxref("WEBGL_draw_buffers")}}</li>
+ <li>{{domxref("WEBGL_lose_context")}}</li>
+</ul>
+</div>
+
+<h3 id="Evènements">Evènements</h3>
+
+<ul>
+ <li>{{Event("webglcontextlost")}}</li>
+ <li>{{Event("webglcontextrestored")}}</li>
+ <li>{{Event("webglcontextcreationerror")}}</li>
+</ul>
+
+<h3 id="Constantes_et_types">Constantes et types</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL_API/Constants">Constantes WebGL</a></li>
+ <li><a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL_API/Types">Types WebGL </a></li>
+</ul>
+
+<h3 id="WebGL_2">WebGL 2</h3>
+
+<p>WebGL 2 est une mise à jour majeure de WebGL, qui est fournie à travers l'interface {{domxref("WebGL2RenderingContext")}}. Elle est basée sur OpenGL ES 3.0, et ses nouvelles fonctionnalités comprennent :</p>
+
+<ul>
+ <li>les <a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL2RenderingContext/texImage3D">textures 3D</a>,</li>
+ <li>les <a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGLSampler">objets Sampler</a>,</li>
+ <li>les <a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL2RenderingContext#Uniform_buffer_objects">objets de tampon Uniform</a>,</li>
+ <li>les <a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGLSync">objets Sync</a>,</li>
+ <li>les <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGLQuery">objets Query</a>,</li>
+ <li>les <a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGLTransformFeedback">objets Tranform Feedback</a>,</li>
+ <li>des extensions promues, qui sont maintenant essentielles pour WebGL 2 : les <a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGLVertexArrayObject">objets Vertex Array</a>, l'<a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL2RenderingContext/drawArraysInstanced">instanciation</a>, les <a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL2RenderingContext/drawBuffers">cibles de rendu multiples</a>, la <a href="https://developer.mozilla.org/fr-FR/docs/Web/API/EXT_frag_depth">profondeur de fragment</a>.</li>
+</ul>
+
+<p>Voir aussi le post de blog <a href="https://hacks.mozilla.org/2017/01/webgl-2-lands-in-firefox/">"WebGL 2 lands in Firefox"</a> et <a href="http://webglsamples.org/WebGL2Samples/">webglsamples.org/WebGL2Samples</a> pour quelques démos.</p>
+
+<h2 id="Guides_et_tutoriels">Guides et tutoriels</h2>
+
+<p>Ci-dessous, vous pourrez trouver divers guides pour vous aider à apprendre les concepts WebGL, et des tutoriels qui proposent des leçons et des exemples pas-à-pas.</p>
+
+<h3 id="Guides">Guides</h3>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL_API/Data">Données en WebGL</a></dt>
+ <dd>Un guide pour les variables, les tampons et autres types de données utilisés lors de l'écriture de code WebGL.</dd>
+ <dt><a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL_API/WebGL_best_practices">Meilleures pratiques WebGL</a></dt>
+ <dd>Des indications et des suggestions pour vous aider à améliore la qualité, les performances et la fiabilité de votre contenu WebGL.</dd>
+ <dt><a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL_API/Using_Extensions">Utilisation des extensions</a></dt>
+ <dd>Un guide pour l'utilisation des extensions WebGL.</dd>
+</dl>
+
+<h3 id="Tutoriels">Tutoriels</h3>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL_API/Tutorial">Tutoriel WebGL</a></dt>
+ <dd>Un guide pour les débutants sur les concepts essentiels de WebGL. Un bon endroit pour démarrer si vous n'avez pas d'expérience antérieure de WebGL.</dd>
+</dl>
+
+<h3 id="Exemples">Exemples</h3>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL_API/Basic_2D_animation_example">Un exemple de base d'animation WebGL 2D</a></dt>
+ <dd>Cet exemple montre l'animation simple d'une forme monochrome. Les sujets abordés sont l'adaptation aux différences de ratio d'aspect, une fonction pour construire des programmes de shader à partir d'ensembles de plusieurs shaders, et les bases du dessin dans WebGL.</dd>
+</dl>
+
+<h3 id="Tutoriels_avancés">Tutoriels avancés</h3>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL_API/WebGL_model_view_projection">Projection de vue de modèle WebGL</a></dt>
+ <dd>Une explication détaillée des trois matrices de base qui sont typiquement utilisées pour représenter une vue d'un objet 3D : les matrices de modèle, de vue et de projection.</dd>
+ <dt><a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL_API/Matrix_math_for_the_web">Mathématiques matricielles pour le web</a></dt>
+ <dd>Un guide utile sur le fonctionnement des matrices de transformation 3D, qui peut être utilisé sur le web - à la fois pour les calculs WebGL et dans les transformations CSS3.</dd>
+</dl>
+
+<h2 id="Ressources">Ressources</h2>
+
+<ul>
+ <li><a href="https://www.youtube.com/embed/H4c8t6myAWU/?feature=player_detailpage">Raw WebGL: An introduction to WebGL</a> Une conférence de Nick Desaulniers qui présente les bases de WebGL. C'est un bon endroit pour commencer si vous n'avez jamais fait de programmation graphique de bas niveau.</li>
+ <li><a href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">Khronos WebGL site</a> Le site principal pour WebGL chez le groupe Khronos.</li>
+ <li><a href="http://learningwebgl.com/blog/?page_id=1217" title="http://learningwebgl.com/blog/">Learning WebGL</a> Un site proposant des tutoriels sur la façon d'utiliser WebGL.</li>
+ <li><a href="http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/" title="http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/">WebGL Fundamentals</a> Un tutoriel de base sur les fondamentaux de WebGL.</li>
+ <li><a href="http://webglplayground.net/" title="http://webglplayground.net">WebGL playground</a> Un outil en ligne pour créer et partager des projets WebGL. Bon pour le prototypage rapide et l'expérimentation.</li>
+ <li><a href="http://www.webglacademy.com/" title="http://www.webglacademy.com">WebGL Academy</a> Un éditeur HTML / JavaScript proposant des tutoriels pour apprendre les bases de la programmation webgl.</li>
+ <li><a href="http://webglstats.com/">WebGL Stats</a> Un site proposant des statistiques sur les possibilités WebGL des navigateurs sur différentes plates-formes.</li>
+</ul>
+
+<h3 id="Bibliothèques">Bibliothèques</h3>
+
+<ul>
+ <li><a href="https://github.com/toji/gl-matrix" title="https://github.com/toji/gl-matrix">glMatrix</a> Bibliothèque matricielle et vectorielle JavaScript pour les applications WebGL hautes performances</li>
+ <li><a href="http://sylvester.jcoglan.com/" title="http://sylvester.jcoglan.com/">Sylvester</a> Une bibliothèque open source pour manipuler des vecteurs et des matrices. Non optimisée pour WebGL mais extrêmement robuste.</li>
+</ul>
+
+<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('WebGL')}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Définition. Basée sur OpenGL ES 2.0</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL2')}}</td>
+   <td>{{Spec2('WebGL2')}}</td>
+   <td>Construite au-dessus de WebGL 1. Basée sur OpenGL ES 3.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0')}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 3.0')}}</td>
+   <td>{{Spec2('OpenGL ES 3.0')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>9</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>11</td>
+   <td>12</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td>WebGL 2</td>
+   <td>56</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("51")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>43</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome pour 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>Support de base</td>
+   <td>25</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>4</td>
+   <td>{{CompatNo}}</td>
+   <td>12</td>
+   <td>8.1</td>
+  </tr>
+  <tr>
+   <td>WebGL 2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Notes_de_compatibilité">Notes de compatibilité</h3>
+
+<p>En plus du navigateur, la GPU elle-même doit également prendre en charge la fonctionnalité. Ainsi, par exemple, S3 Texture Compression (S3TC) n'est disponible que sur les tablettes à base de Tegra. La plupart des navigateurs rendent le contexte WebGL disponible via le nom de contexte <code>webgl</code>, mais les plus anciens ont aussi besoin d'<code>experimental-webgl</code>. De plus, le prochain <a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL2RenderingContext">WebGL 2</a> sera entièrement rétrocompatible et comprendra le nom de contexte <code>webgl2</code>.</p>
+
+<h3 id="Notes_Gecko">Notes Gecko</h3>
+
+<h4 id="Débogage_et_test_WebGL">Débogage et test WebGL</h4>
+
+<p>À partir de Gecko 10.0 {{geckoRelease("10.0")}}, deux préférences sont disponibles pour vous permettre de contrôler les fonctionnalités de WebGL à des fins de test :</p>
+
+<dl>
+ <dt><code>webgl.min_capability_mode</code></dt>
+ <dd>Propriété booléenne qui, lorsqu'elle est <code>true</code>, active un mode de possibilités minimales. Dans ce mode, WebGL est configuré pour prendre en charge uniquement le jeu de fonctionnalités minimal et les fonctionnalités requises par la spécification WebGL. Cela vous permet de vous assurer que votre code WebGL fonctionnera sur n'importe quel appareil ou navigateur, indépendamment de leurs possibilités. Elle est <code>false</code> par défaut.</dd>
+ <dt><code>webgl.disable_extensions</code></dt>
+ <dd>Propriété booléenne qui, lorsqu'elle est <code>true</code>, désactive toutes les extensions WebGL. Elle est <code>false</code> par défaut.</dd>
+</dl>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr-FR/docs/Web/API/Canvas_API">Canvas</a></li>
+ <li><a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGLRenderingContext/getSupportedExtensions#Browser_compatibility">Informations de compatibilité à propos des extensions WebGL</a></li>
+</ul>
diff --git a/files/fr/web/api/webgl_api/tutorial/ajouter_des_couleurs_avec_les_shaders/index.html b/files/fr/web/api/webgl_api/tutorial/ajouter_des_couleurs_avec_les_shaders/index.html
new file mode 100644
index 0000000000..2bd786c015
--- /dev/null
+++ b/files/fr/web/api/webgl_api/tutorial/ajouter_des_couleurs_avec_les_shaders/index.html
@@ -0,0 +1,117 @@
+---
+title: Ajouter des couleurs avec les nuanceurs
+slug: Web/API/WebGL_API/Tutorial/Ajouter_des_couleurs_avec_les_shaders
+tags:
+  - Tutoriel
+  - WebGL
+translation_of: Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL
+---
+<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context", "Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL")}}</p>
+
+<p>Dans la <a href="/fr/docs/WebGL/Ajouter_du_contenu_à_WebGL" title="/fr/docs/WebGL/Ajouter_du_contenu_à_WebGL">démonstration précédente</a>, nous avons créé un carré 2D, la prochaine étape évidente consiste à lui appliquer de la couleur. Nous allons faire cela en révisant les nuanceurs.</p>
+
+<h2 id="Application_de_couleur_aux_sommets">Application de couleur aux sommets</h2>
+
+<p>En WebGL, les objets sont construits en utilisant des sommets, chacun d'entre eux ayant une position et une couleur ; par défaut, les couleurs des autres sommets (et tous leurs autres attributs, incluant leur position) sont calculés en utilisant une interpolation linéaire, créant ainsi automatiquement des dégradés. Précédemment, notre nuanceur de sommet n'appliquait aucunes couleurs spécifiques aux sommets ; entre cela et le fait que le nuanceur de fragment assignait la valeur blanche à chaque pixel, le carré entier était rendu en blanc uni.</p>
+
+<p>Supposons que nous voulions faire un rendu en dégradé dans lequel chaque coin du carré est de couleur différente : rouge, bleu, vert et blanc. La première chose à faire est de définir ces couleurs pour les quatre sommets. Pour ce faire, nous devons d'abord créer un tableau des couleurs des sommets, puis le stocker dans un tampon WebGL ; nous le ferons en ajoutant le code suivant à notre fonction <code>initBuffers()</code> :</p>
+
+<pre><code>  const colors = [
+    1.0,  1.0,  1.0,  1.0,    // blanc
+    1.0,  0.0,  0.0,  1.0,    // rouge
+    0.0,  1.0,  0.0,  1.0,    // vert
+    0.0,  0.0,  1.0,  1.0,    // bleu
+  ];
+
+  const colorBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
+
+  return {
+    position: positionBuffer,
+    color: colorBuffer,
+  };
+}</code></pre>
+
+<p>Ce code commence par créer un tableau JavaScript contenant des vecteurs à 4 valeurs, un pour chaque couleur de sommet. Un tampon WebGL est alors alloué pour stocker ces couleurs, et le tableau est converti en flottants et stocké dans le tampon.</p>
+
+<p>Pour que ces couleurs soient effectivement utilisées, le nuanceur de sommet doit être mis à jour pour extraire la couleur appropriée du tampon des couleurs :</p>
+
+<pre><code>  const vsSource = `
+    attribute vec4 aVertexPosition;
+    attribute vec4 aVertexColor;
+
+    uniform mat4 uModelViewMatrix;
+    uniform mat4 uProjectionMatrix;
+
+    varying lowp vec4 vColor;
+
+    void main(void) {
+      gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
+      vColor = aVertexColor;
+    }
+  `;</code></pre>
+
+<p>La différence clé est ici que, pour chaque sommet, nous passons sa couleur au nuanceur de fragment en utilisant un <code>varying</code>.</p>
+
+<h2 id="Coloriage_des_fragments">Coloriage des fragments</h2>
+
+<p>Pour mémoire, voici à quoi ressemblait précédemment notre nuanceur de fragment :</p>
+
+<pre><code>  const fsSource = `
+    void main() {
+      gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
+    }
+  `;</code></pre>
+
+<p>Afin de choisir la couleur interpolée pour chaque pixel, nous devons le changer pour récupérer la valeur depuis le varying <code>vColor</code> :</p>
+
+<pre><code>  const fsSource = `
+    varying lowp vec4 vColor;
+
+    void main(void) {
+      gl_FragColor = vColor;
+    }
+  `;</code></pre>
+
+<p>La principale différence ici c'est que pour chaque sommet, on assigne la valeur correspondant à sa couleur dans le tableau.</p>
+
+<h2 id="Dessiner_en_utilisant_les_couleurs">Dessiner en utilisant les couleurs</h2>
+
+<p>Ensuite, il est nécessaire d'ajouter le code recherchant les couleurs dans l'emplacement de l'attribut, et de configurer cet attribut pour le programme nuanceur :</p>
+
+<pre><code>  const programInfo = {
+    program: shaderProgram,
+    attribLocations: {
+      vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
+      vertexColor: gl.getAttribLocation(shaderProgram, 'aVertexColor'),
+    },
+    ...</code></pre>
+
+<p>Ensuite, <code>drawScene()</code> peut être modifié pour utiliser réellement ces couleurs lors du dessin du carré :</p>
+
+<pre><code>  // Indiquer à WebGL comment transférer les couleurs du tampon des couleurs
+  // dans l'attribut vertexColor.
+  {
+    const numComponents = 4;
+    const type = gl.FLOAT;
+    const normalize = false;
+    const stride = 0;
+    const offset = 0;
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffers.color);
+    gl.vertexAttribPointer(
+        programInfo.attribLocations.vertexColor,
+        numComponents,
+        type,
+        normalize,
+        stride,
+        offset);
+    gl.enableVertexAttribArray(
+        programInfo.attribLocations.vertexColor);
+  }</code></pre>
+
+<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample3/index.html', 670, 510) }}</p>
+
+<p><a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample3">Voir le code complet</a> | <a href="http://mdn.github.io/webgl-examples/tutorial/sample3/">Ouvrir cette démo dans une nouvelle page</a></p>
+
+<p>{{PreviousNext("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context", "Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL")}}</p>
diff --git a/files/fr/web/api/webgl_api/tutorial/ajouter_du_contenu_à_webgl/index.html b/files/fr/web/api/webgl_api/tutorial/ajouter_du_contenu_à_webgl/index.html
new file mode 100644
index 0000000000..c7afe5f9ae
--- /dev/null
+++ b/files/fr/web/api/webgl_api/tutorial/ajouter_du_contenu_à_webgl/index.html
@@ -0,0 +1,307 @@
+---
+title: Ajouter du contenu à WebGL
+slug: Web/API/WebGL_API/Tutorial/Ajouter_du_contenu_à_WebGL
+tags:
+  - 3D
+  - API WebGL
+  - Graphismes
+  - Graphismes 2D
+  - Graphismes 3D
+  - Intermédiaire
+  - Shaders
+  - Tutoriel
+  - WebGL
+  - dessin
+translation_of: Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context
+---
+<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL")}}</p>
+
+<p>Une fois que vous avez correctement <a title="Commencer avec le WebGL">créé un contexte WebGL</a>, vous pouvez commencer à y dessiner. Une chose simple que nous pouvons faire est de dessiner un simple carré 2D sans texture, commençons donc par là, en construisant un code pour dessiner un carré 2D.</p>
+
+<h2 id="Dessiner_la_scène">Dessiner la scène</h2>
+
+<p>La chose la plus importante à comprendre avant que nous ne commencions est que, bien que nous dessinions seulement un carré 2D dans cet exemple, nous sommes toujours en train de dessiner dans un espace 3D. Nous dessinons juste un carré et nous le mettons exactement en face de la caméra, perpendiculairement à la direction de vision. Nous avons besoin de définir les shaders qui créeront la couleur pour notre scène simple, et qui dessineront notre objet. Cela définira comment notre carré 2D apparaîtra à l'écran.</p>
+
+<h3 id="Les_shaders">Les shaders</h3>
+
+<p>Un shader est un programme, écrit en utilisant le <a class="external" href="https://www.khronos.org/files/opengles_shading_language.pdf" title="https://www.khronos.org/files/opengles_shading_language.pdf">OpenGL ES Shading Language</a> (GLSL), qui utilise les informations des sommets constituant une forme, et qui génère les données nécessaires pour faire un rendu des pixels à l'écran : nommément, les positions des pixels et leurs couleurs.</p>
+
+<p>Deux fonctions de shader sont exécutées lors du dessin d'un contenu WebGL : le <strong>shader  de sommet</strong> et le <strong>shader de fragment</strong>. Vous les écrivez en GLSL et vous passez le texte du code à WebGL pour qu'il soit compilé pour exécution dans la GPU. Pris conjointement, un ensemble de shaders de sommet et de fragment sont appelés un <strong>programme shader</strong>.</p>
+
+<p>Jetons un coup d'œil rapide aux deux types de shaders, en gardant présent à l'esprit l'exemple du dessin d'une forme 2D dans le contexte WebGL.</p>
+
+<h4 id="Le_shader_de_sommet">Le shader de sommet</h4>
+
+<p>Chaque fois qu'une forme est rendue, le shader de sommet est exécuté pour chaque sommet de la forme. Son travail consiste à effectuer les transformations souhaitées sur la position du sommet.</p>
+
+<p>Les informations de position sont stockées dans une variable spéciale fournie par GLSL, appelée <code>gl_Position</code>.</p>
+
+<p>Le shader de sommet peut, au besoin, aussi faire des choses comme déterminer les coordonnées dans la texture des faces du {{interwiki ("wikipedia", "texel")}} à appliquer au sommet, appliquer les normales pour déterminer le facteur d'éclairage à appliquer au sommet, et ainsi de suite. Ces informations peuvent alors être stockées dans des variations ou des attributs comme approprié, pour être partagées avec le shader de fragment.</p>
+
+<p>Notre shader de sommet ci-dessous reçoit des valeurs de position de sommet à partir d'un attribut que nous définissons, appelé <code>aVertexPosition</code>. Cette position est ensuite multipliée par deux matrices 4x4 que nous fournissons, appelées <code>uProjectionMatrix</code> et <code>uModelMatrix</code> ; <code>gl_Position</code> est définie comme étant le résultat. Pour plus d'informations sur la projection et autres matrices, <a href="https://webglfundamentals.org/webgl/lessons/webgl-3d-perspective.html">vous pourriez trouver cet article utile</a>.</p>
+
+<pre><code>// Programme shader de sommet
+
+const vsSource = `
+  attribute vec4 aVertexPosition;
+
+  uniform mat4 uModelViewMatrix;
+  uniform mat4 uProjectionMatrix;
+
+  void main() {
+    gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
+  }
+`;</code></pre>
+
+<p>Dans cet exemple, nous ne calculons pas d'éclairage du tout, puisque nous n'en avons pas encore appliqué à la scène. Cela viendra plus tard, dans l'exemple <a href="/fr-FR/docs/Web/API/WebGL_API/Tutorial/Lighting_in_WebGL">Éclairage en WebGL</a>. Notez également l'absence de tout travail sur les textures ici ; cela sera ajouté dans <a href="/fr-FR/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL">Utilisation de textures en WebGL</a>.</p>
+
+<h4 id="Le_shader_de_fragment">Le shader de fragment</h4>
+
+<p>Le <strong>shader de fragment</strong> est appelé une fois pour chaque pixel de chaque forme à dessiner, une fois que les sommets de la forme ont été traités par le shader de sommet. Son travail consiste à déterminer la couleur de ce pixel en déterminant quel texel (c'est-à-dire le pixel de la texture de la forme) appliquer au pixel, à obtenir la couleur de ce texel, puis à appliquer l'éclairage approprié à la couleur. La couleur est ensuite renvoyée à la couche WebGL en la stockant dans la variable spéciale <code>gl_FragColor</code>. Cette couleur est alors dessinée à l'écran dans la position correcte pour le pixel correspondant de la forme.</p>
+
+<p>Dans ce cas, nous retournons simplement du blanc à chaque fois, car nous sommes seulement en train de dessiner un carré blanc, sans éclairage.</p>
+
+<pre><code>  const fsSource = `
+    void main() {
+      gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
+    }
+  `;</code>
+</pre>
+
+<h3 id="Initialisation_des_shaders">Initialisation des shaders</h3>
+
+<p>Maintenant que nous avons défini les deux shaders, nous devons les transmettre à WebGL, les compiler et les lier ensemble. Le code ci-dessous crée les deux shaders en appelant <code>loadShader()</code>, lui passant le type et la source du shader. Il crée alors un programme, attache les shaders et les relie ensemble. Si la compilation ou la liaison échoue, le code affiche une alerte.</p>
+
+<pre><code>//
+// Initialiser un programme shader, de façon à ce que WebGL sache comment dessiner nos données
+//
+function initShaderProgram(gl, vsSource, fsSource) {
+  const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
+  const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
+
+  // Créer le programme shader
+
+  const shaderProgram = gl.createProgram();
+  gl.attachShader(shaderProgram, vertexShader);
+  gl.attachShader(shaderProgram, fragmentShader);
+  gl.linkProgram(shaderProgram);
+
+  // Si la création du programme shader a échoué, alerte
+
+  if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
+    alert('Impossible d'initialiser le programme shader : ' + gl.getProgramInfoLog(shaderProgram));
+    return null;
+  }
+
+  return shaderProgram;
+}
+
+//
+// Crée un shader du type fourni, charge le source et le compile.
+//
+function loadShader(gl, type, source) {
+  const shader = gl.createShader(type);
+
+  // Envoyer le source à l'objet shader
+
+  gl.shaderSource(shader, source);
+
+  // Compiler le programme shader
+
+  gl.compileShader(shader);
+
+  // Vérifier s'il a ét compilé avec succès
+
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    alert('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));
+    gl.deleteShader(shader);
+    return null;
+  }
+
+  return shader;
+}</code></pre>
+
+<p>La fonction <code>loadShader()</code> prend en entrée le contexte WebGL, le type de shader et le code source, puis crée et compile le shader comme suit :</p>
+
+<ol>
+ <li>un nouveau shader est créé en appelant {{domxref("WebGLRenderingContext.createShader", "gl.createShader()")}} ;</li>
+ <li>le code source du shader est envoyé au shader en appelant {{domxref("WebGLRenderingContext.shaderSource", "gl.shaderSource()")}} ;</li>
+ <li>une fois que le shader a le code source, il est compilé en utilisant {{domxref("WebGLRenderingContext.compileShader", "gl.compileShader()")}} ;</li>
+ <li>pour vérifier que le shader a été compilé avec succès, le paramètre <code>gl.COMPILE_STATUS</code> du shader est vérifié ; pour obtenir sa valeur, nous appelons {{domxref("WebGLRenderingContext.getShaderParameter", "gl.getShaderParameter()")}}, en indiquant le shader et le nom du paramètre que nous voulons vérifier (<code>gl.COMPILE_STATUS</code>) ; si c'est <code>false</code>, nous savons que le shader n'a pas pu être compilé, aussi nous affichons une alerte avec les informations du journalisation obtenues du compilateur en utilisant {{domxref ("WebGLRenderingContext.getShaderInfoLog", "gl.getShaderInfoLog()")}}, puis nous supprimons le shader et nous renvoyons <code>null</code> pour indiquer l'échec du chargement du shader ;</li>
+ <li>si le shader a été chargé et compilé avec succès, le shader compilé est renvoyé à l'appelant.</li>
+</ol>
+
+<p>Pour utiliser ce code, nous l'appelons de la façon suivante :</p>
+
+<pre><code> const shaderProgram = initShaderProgram(gl, vsSource, fsSource);</code>
+</pre>
+
+<p>Après avoir créé un programme de shaders, nous devons rechercher les emplacements que WebGL a assignés à nos entrées. Dans ce cas, nous avons un attribut et deux uniformes. Les attributs reçoivent des valeurs des tampons. Chaque itération du shader des sommets reçoit la valeur suivante du tampon affecté à cet attribut. Les uniformes sont similaires aux variables globales JavaScript. Ils conservent la même valeur pour toutes les itérations d'un shader. Du fait que les attributs et les emplacements des uniformes sont spécifiques à un programme de shader donné, nous les stockerons ensemble pour les rendre plus faciles à transmettre.</p>
+
+<pre><code>  const programInfo = {
+    program: shaderProgram,
+    attribLocations: {
+      vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
+    },
+    uniformLocations: {
+      projectionMatrix: gl.getUniformLocation(shaderProgram, 'uProjectionMatrix'),
+      modelViewMatrix: gl.getUniformLocation(shaderProgram, 'uModelViewMatrix'),
+    },
+  };</code>
+</pre>
+
+<h2 id="Création_du_carré_2D">Création du carré 2D</h2>
+
+<p>Avant de pouvoir faire un rendu de notre carré 2D, nous devons créer le tampon qui contiendra les positions de ses sommets et y placer les positions des sommets. Nous ferons cela en utilisant une fonction que nous appelerons <code>initBuffers()</code> ; à mesure que nous explorerons des concepts WebGL plus avancés, cette routine sera augmentée pour créer plus d'objets 3D, et plus complexes.</p>
+
+<pre><code>function initBuffers(gl) {
+
+  // Créer un tampon des positions pour le carré.
+
+  const positionBuffer = gl.createBuffer();
+
+  // Définir le positionBuffer comme étant celui auquel appliquer les opérations
+  // de tampon à partir d'ici.
+
+  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+
+  // Créer maintenant un tableau des positions pour le carré.
+
+  const positions = [
+     1.0,  1.0,
+    -1.0,  1.0,
+     1.0, -1.0,
+    -1.0, -1.0,
+  ];
+
+  // Passer mainenant la liste des positions à WebGL pour construire la forme.
+  // Nous faisons cela en créant un Float32Array à partir du tableau JavaScript,
+  // puis en l'utilisant pour remplir le tampon en cours.
+
+  gl.bufferData(gl.ARRAY_BUFFER,
+                new Float32Array(positions),
+                gl.STATIC_DRAW);
+
+  return {
+    position: positionBuffer,
+  };
+}</code></pre>
+
+<p>Cette routine est assez simpliste du fait de la nature basique de la scène dans cet exemple. Elle commence par appeler la méthode {{domxref ("WebGLRenderingContext.createBuffer()", "createBuffer()")}} de l'objet gl pour obtenir un tampon dans lequel nous stockerons les positions des sommets. Ce dernier est ensuite lié au contexte en appelant la méthode {{domxref ("WebGLRenderingContext.bindBuffer()", "bindBuffer()")}}.</p>
+
+<p>Une fois que cela est fait, nous créons un tableau JavaScript contenant la position de chaque sommet du carré 2D. Ce dernier est ensuite converti en un tableau de flottants et transmis à la méthode {{domxref ("WebGLRenderingContext.bufferData()", "bufferData()")}} de l'objet <code>gl</code> pour définir les positions des sommets de l'objet.</p>
+
+<h2 id="Rendu_de_la_scène">Rendu de la scène</h2>
+
+<p>Une fois que les shaders sont définis, que les emplacements sont retrouvés, et que les positions des sommets du carré 2D sont stockées dans le tampon, nous pouvons faire effectivement le rendu de la scène. Puisque nous n'animons rien dans cet exemple, notre fonction <code>drawScene()</code> est très simple. Elle utilise quelques routines utilitaires que nous décrirons sous peu.</p>
+
+<div class="blockIndicator note">
+<p>Vous pourriez obtenir une erreur JavaScript indiquant <em>"mat4 n'est pas défini"</em>. Cela signifie qu'il existe une dépendance à <strong>glmatrix</strong>. Vous pouvez inclure <a href="https://mdn.github.io/webgl-examples/tutorial/gl-matrix.js">gl-matrix.js</a> pour résoudre ce problème, comme suggéré <a href="https://github.com/mdn/webgl-examples/issues/20">ici</a>.</p>
+</div>
+
+<pre><code>function drawScene(gl, programInfo, buffers) {
+  gl.clearColor(0.0, 0.0, 0.0, 1.0);  // effacement en noir, complètement opaque
+  gl.clearDepth(1.0);                 // tout effacer
+  gl.enable(gl.DEPTH_TEST);           // activer le test de profondeur
+  gl.depthFunc(gl.LEQUAL);            // les choses proches cachent les choses lointaines
+
+  // Effacer le canevas avant que nous ne commencions à dessiner dessus.
+
+  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+
+  // Créer une matrice de perspective, une matrice spéciale qui est utilisée pour
+  // simuler la distorsion de la perspective dans une caméra.
+  // Notre champ de vision est de 45 degrés, avec un rapport largeur/hauteur qui
+  // correspond à la taille d'affichage du canvas ;
+  // et nous voulons seulement voir les objets situés entre 0,1 unité et 100 unités
+  // à partir de la caméra.
+
+  const fieldOfView = 45 * Math.PI / 180;   // en radians
+  const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
+  const zNear = 0.1;
+  const zFar = 100.0;
+  const projectionMatrix = mat4.create();
+
+  // note: glmatrix.js a toujours comme premier argument la destination
+  // où stocker le résultat.
+  mat4.perspective(projectionMatrix,
+                   fieldOfView,
+                   aspect,
+                   zNear,
+                   zFar);
+
+  // Définir la position de dessin comme étant le point "origine", qui est
+  // le centre de la scène.
+  const modelViewMatrix = mat4.create();
+
+  // Commencer maintenant à déplacer la position de dessin un peu vers là où
+  // nous voulons commencer à dessiner le carré.
+
+  mat4.translate(modelViewMatrix,     // matrice de destination
+                 modelViewMatrix,     // matrice de déplacement
+                 [-0.0, 0.0, -6.0]);  // quantité de déplacement
+
+  // Indiquer à WebGL comment extraire les positions à partir du tampon des
+  // positions pour les mettre dans l'attribut vertexPosition.
+  {
+    const numComponents = 2;  // extraire 2 valeurs par itération
+    const type = gl.FLOAT;    // les données dans le tampon sont des flottants 32bit
+    const normalize = false;  // ne pas normaliser
+    const stride = 0;         // combien d'octets à extraire entre un jeu de valeurs et le suivant
+                              // 0 = utiliser le type et numComponents ci-dessus
+    const offset = 0;         // démarrer à partir de combien d'octets dans le tampon
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
+    gl.vertexAttribPointer(
+        programInfo.attribLocations.vertexPosition,
+        numComponents,
+        type,
+        normalize,
+        stride,
+        offset);
+    gl.enableVertexAttribArray(
+        programInfo.attribLocations.vertexPosition);
+  }
+
+  // Indiquer à WebGL d'utiliser notre programme pour dessiner
+
+  gl.useProgram(programInfo.program);
+
+  // Définir les uniformes du shader
+
+  gl.uniformMatrix4fv(
+      programInfo.uniformLocations.projectionMatrix,
+      false,
+      projectionMatrix);
+  gl.uniformMatrix4fv(
+      programInfo.uniformLocations.modelViewMatrix,
+      false,
+      modelViewMatrix);
+
+  {
+    const offset = 0;
+    const vertexCount = 4;
+    gl.drawArrays(gl.TRIANGLE_STRIP, offset, vertexCount);
+  }
+}</code></pre>
+
+<p>La première étape consiste à effacer le canevas avec notre arrière plan ; ensuite, nous établissons la perspective de la caméra. Nous définissons un champ de vision de 45°, avec un rapport largeur sur hauteur qui correspond aux dimensions d'affichage de notre canevas. Nous indiquons également que seuls les objets situés entre 0,1 et 100 unités à partir de la caméra doivent être rendus.</p>
+
+<p>Ensuite, nous établissons la position du carré 2D en chargeant la position de l'origine et en nous déplaçant de 6 unités à partir de la caméra. Après cela, nous lions le tampon des sommets du carré à l'attribut que le shader utilise comme <code>aVertexPosition</code> et nous indiquons à WebGL comment en extraire les données. Enfin, nous dessinons l'objet en appelant la méthode {{domxref ("WebGLRenderingContext.drawArrays()", "drawArrays()")}}.</p>
+
+<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample2/index.html', 670, 510) }}</p>
+
+<p><a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample2">Voir le code complet</a> | <a href="http://mdn.github.io/webgl-examples/tutorial/sample2/">Ouvrir cette démo dans une nouvelle page</a></p>
+
+<h2 id="Opérations_utilitaires_matricielles">Opérations utilitaires matricielles</h2>
+
+<p>Les opérations matricielles peuvent sembler compliquées, mais <a href="https://webglfundamentals.org/webgl/lessons/webgl-2d-matrices.html">elles sont en fait assez simples si vous en prenez une à la fois</a>. En général, les gens utilisent une bibliothèque matricielle plutôt que d'écrire la leur. Dans notre cas, nous utilisons la bibliothèque populaire <a href="http://glmatrix.net/">glMatrix</a>.</p>
+
+<p>Voir aussi :</p>
+
+<ul>
+ <li>les <a href="https://webglfundamentals.org/webgl/lessons/webgl-2d-matrices.html">matrices</a> sur WebGLFundamentals ;</li>
+ <li>les <a href="http://mathworld.wolfram.com/Matrix.html">matrices</a> sur Wolfram MathWorld ;</li>
+ <li>l'article <a href="https://fr.wikipedia.org/wiki/Matrice_(math%C3%A9matiques)">matrice</a> sur Wikipedia.</li>
+</ul>
+
+<p>{{PreviousNext("Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL")}}</p>
diff --git a/files/fr/web/api/webgl_api/tutorial/animation_de_textures_en_webgl/index.html b/files/fr/web/api/webgl_api/tutorial/animation_de_textures_en_webgl/index.html
new file mode 100644
index 0000000000..1c9efb8966
--- /dev/null
+++ b/files/fr/web/api/webgl_api/tutorial/animation_de_textures_en_webgl/index.html
@@ -0,0 +1,144 @@
+---
+title: Animation de textures en WebGL
+slug: Web/API/WebGL_API/Tutorial/Animation_de_textures_en_WebGL
+tags:
+  - Media
+  - Tutoriel
+  - Video
+  - WebGL
+translation_of: Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL
+---
+<p>{{WebGLSidebar("Tutorial") }} {{Previous("Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}</p>
+
+<p>Dans cette démonstration, nous construisons sur l'exemple précédent en remplaçant nos textures statiques par les images d'un fichier vidéo mp4 en cours de lecture. C'est en fait assez facile à faire, mais c'est amusant à regarder, alors commençons. Un code similaire peut être réalisé pour utiliser n'importe quel type de données (comme un {{HTMLElement ("canvas")}}) comme source pour vos textures..</p>
+
+<h2 id="Accéder_à_la_vidéo">Accéder à la vidéo</h2>
+
+<p>La première étape consiste à créer l'élément {{HTMLElement("video")}} que nous utiliserons pour récupérer les images vidéo :</p>
+
+<pre class="brush: js">// sera mis à true quand la vidéo pourra être copiée dans la texture
+var copierVideo = false;
+
+function configurerVideo(url) {
+  const video = document.createElement('video');
+
+  var playing = false;
+  var timeupdate = false;
+
+  video.autoplay = true;
+  video.muted = true;
+  video.loop = true;
+
+  <code>// </code>Le fait d'attendre ces 2 évènements assure<code>
+  // </code>qu'il y a des données dans la vidéo
+
+  video.addEventListener('playing', function() {
+     playing = true;
+     verifierPret();
+  }, true);
+
+  video.addEventListener('timeupdate', function() {
+     timeupdate = true;
+     verifierPret();
+  }, true);
+
+  video.src = url;
+  video.play();
+
+  function verifierPret() {
+    if (playing &amp;&amp; timeupdate) {
+      copierVideo = true;
+    }
+  }
+
+  return video;
+}
+</pre>
+
+<p>D'abord, nous créons un élément vidéo. Nous le mettons en lecture automatique, nous coupons le son et nous faisons tourner la vidéo en boucle. Nous configurons ensuite 2 événements pour voir que la vidéo est en cours de lecture et que le temps a été mis à jour. Nous avons besoin de ces deux vérifications, car c'est une erreur que d'essayer de télécharger sur WebGL une vidéo qui n'a pas encore de données disponibles. La vérification de ces deux événements garantit que des données sont disponibles et que l'on peut démarrer en toute sécurité le chargement de la vidéo dans une texture WebGL. Dans le code ci-dessus, nous vérifions si nous avons reçu ces deux événements et si c'est le cas, nous mettons une variable globale, <code>copierVideo</code>, à true pour nous dire qu'il est possible de commencer à copier la vidéo dans une texture.</p>
+
+<p>Et enfin, nous définissons l'attribut <code>src</code> pour commencer, et nous appelons <code>play</code> pour démarrer le chargement et la lecture de la vidéo.</p>
+
+<h2 id="Utilisation_des_images_vidéo_comme_texture">Utilisation des images vidéo comme texture</h2>
+
+<p>La prochaine modification porte sur <code>initTexture()</code>, qui devient beaucoup plus simple, car elle n'a plus besoin de charger un fichier image. A la place, tout ce qu'elle fait est de créer un objet texture vide, d'y mettre un unique pixel et de définir son filtrage pour une utilisation ultérieure :</p>
+
+<pre class="brush: js">function initTexture(gl, url) {
+  const texture = gl.createTexture();
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+
+<code>  // </code>Parce que la vidéo doit être téléchargée depuis sur Internet,<code>
+  // </code>cela peut prendre un certain temps jusqu'à ce qu'elle soit prête, donc<code>
+  // </code>mettre un seul pixel dans la texture, de façon à ce que nous puissions<code>
+  // </code>l'utiliser immédiatement.
+  const niveau = 0;
+  const formatInterne = gl.RGBA;
+  const largeur = 1;
+  const hauteur = 1;
+  const bordure = 0;
+  const formatSrc = gl.RGBA;
+  const typeSrc = gl.UNSIGNED_BYTE;
+  const pixel = new Uint8Array([0, 0, 255, 255]);  // bleu opaque
+  gl.texImage2D(gl.TEXTURE_2D, niveau, formatInterne,
+                largeur, hauteur, bordure, formatSrc, typeSrc,
+                pixel);
+
+  // Désactiver mips et définir l'emballage comme accroché au bord afin qu'il
+  // fonctionne indépendamment des dimensions de la vidéo.
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+
+  return texture;
+}
+</pre>
+
+<div>Voici à quoi ressemble la fonction <code>mettreAJourTexture()</code> ; c'est là où le vrai travail est fait :</div>
+
+<pre class="brush: js">function mettreAJourTexture(gl, texture, video) {
+  const niveau = 0;
+  const formatInterne = gl.RGBA;
+  const formatSrc = gl.RGBA;
+  const typeSrc = gl.UNSIGNED_BYTE;
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+  gl.texImage2D(gl.TEXTURE_2D, niveau, formatInterne,
+                formatSrc, typeSrc, video);
+}
+</pre>
+
+<p>Vous avez déjà vu ce code. Il est presque identique à la fonction onload de l'image dans l'exemple précédent, sauf quand nous appellons <code>texImage2D()</code>, au lieu de passer un objet <code>Image</code>, nous passons l'élément {{HTMLElement ("video")}}. WebGL sait comment extraire l'image en cours et l'utiliser comme texture.</p>
+
+<p>Si <code>copierVideo</code> est true, alors <code>mettreAJourTexture()</code> est appelé à chaque fois juste avant que nous appellions la fonction <code>dessinerScene()</code>.</p>
+
+<pre class="brush: js">  var alors = 0;
+
+  // Dessiner la scène répétitivement
+  function dessiner(maintenant) {
+    maintenant *= 0.001;  // convertir en seconds
+    const ecartTemps = maintenant - alors;
+    alors = maintenant;
+
+    if (copierVideo) {
+      <code>mettreAJour</code>Texture(gl, texture, video);
+    }
+
+    dessinerScene(gl, programInfo, buffers, texture, ecartTemps);
+
+    requestAnimationFrame(dessiner);
+  }
+  requestAnimationFrame(dessiner);
+</pre>
+
+<p>C'est tout pour ce qu'il y a à faire pour cela !</p>
+
+<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample8/index.html', 670, 510) }}</p>
+
+<p><a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample8">Voir le code complet</a> | <a href="http://mdn.github.io/webgl-examples/tutorial/sample8/">Ouvrir cette démo dans une nouvelle page</a></p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/Using_HTML5_audio_and_video" title="En/Using audio and video in Firefox">Utilisation de l'audio et de la video dans Firefox</a></li>
+</ul>
+
+<p>{{Previous("Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}</p>
diff --git a/files/fr/web/api/webgl_api/tutorial/animer_des_objets_avec_webgl/index.html b/files/fr/web/api/webgl_api/tutorial/animer_des_objets_avec_webgl/index.html
new file mode 100644
index 0000000000..534d6ef995
--- /dev/null
+++ b/files/fr/web/api/webgl_api/tutorial/animer_des_objets_avec_webgl/index.html
@@ -0,0 +1,59 @@
+---
+title: Animer des objets avec WebGL
+slug: Web/API/WebGL_API/Tutorial/Animer_des_objets_avec_WebGL
+tags:
+  - Tutoriel
+  - WebGL
+translation_of: Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL
+---
+<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL", "Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL") }}</p>
+
+<p>Dans cet exemple, nous allons faire tourner notre carré 2D.</p>
+
+<h2 id="Faire_tourner_le_carré">Faire tourner le carré</h2>
+
+<p>Commençons par faire tourner le carré. La première chose dont nous avons besoin est une variable pour mémoriser la rotation courante du carré :</p>
+
+<pre class="brush: js">var <code>squareRotation</code> = 0.0;
+</pre>
+
+<p>Maintenant, nous devons modifier la fonction <code>drawScene() </code>pour appliquer la rotation courante du carré quand on le dessine. Après déplacement à la position de dessin initiale du carré, nous appliquons la rotation comme suit :  </p>
+
+<pre><code>  mat4.rotate(modelViewMatrix,  // matrice de destination
+              modelViewMatrix,  // matrice de rotation
+              squareRotation,   // rotation en radians
+              [0, 0, 1]);       // axe autour duquel tourner</code></pre>
+
+<p>Ceci fait tourner la modelViewMatrix de la valeur courante de <code>squareRotation</code>, autour de l'axe Z.</p>
+
+<p>Pour réaliser effectivement l'animation, nous avons besoin d'ajouter du code qui change la valeur de <code>squareRotation</code> au fil du temps. Nous pouvons faire cela en créant une nouvelle variable pour mémoriser l'instant auquel nous avons réalisé l'animation pour la dernière fois (appelons le <code>then</code>), puis en ajoutant le code suivant à la fin de la fonction principale :</p>
+
+<pre><code>var then = 0;
+
+// Dessiner la scène répétitivement
+function render(now) {
+  now *= 0.001;  // conversion en secondes
+  const deltaTime = now - then;
+  then = now;
+
+  drawScene(gl, programInfo, buffers, deltaTime);
+
+  requestAnimationFrame(render);
+}
+requestAnimationFrame(render);</code></pre>
+
+<p>Ce code utilise <code>requestAnimationFrame</code> pour demander au navigateur d'appeler la fonction "<code>render</code>" à chaque image. <code>requestAnimationFrame</code> nous transmet le temps en millisecondes depuis le chargement de la page. Nous le convertissons en secondes, puis nous lui soustrayons le dernier instant pour calculer <code>deltaTime</code>, qui est le nombre de secondes depuis le rendu de la dernière image. À la fin de drawscene, nous ajoutons le code pour mettre à jour <code>squareRotation</code>.</p>
+
+<pre><code>  squareRotation += deltaTime;</code></pre>
+
+<p>Ce code utilise le laps de temps qui s'est écoulé depuis la dernière fois que nous avons mis à jour la valeur <code>squareRotation</code> pour déterminer de combien faire tourner le carré.</p>
+
+<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample4/index.html', 670, 510) }}</p>
+
+<p><a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample4">Voir le code complet</a> | <a href="http://mdn.github.io/webgl-examples/tutorial/sample4/">Ouvrir cette démo dans une nouvelle page</a></p>
+
+<p>{{PreviousNext("Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL", "Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL") }}</p>
+
+<p> </p>
+
+<p> </p>
diff --git a/files/fr/web/api/webgl_api/tutorial/commencer_avec_webgl/index.html b/files/fr/web/api/webgl_api/tutorial/commencer_avec_webgl/index.html
new file mode 100644
index 0000000000..4388934aeb
--- /dev/null
+++ b/files/fr/web/api/webgl_api/tutorial/commencer_avec_webgl/index.html
@@ -0,0 +1,73 @@
+---
+title: Commencer avec WebGL
+slug: Web/API/WebGL_API/Tutorial/Commencer_avec_WebGL
+tags:
+  - Tutoriel
+  - WebGL
+translation_of: Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL
+---
+<p>{{WebGLSidebar("Tutorial")}} {{Next("Web/API/WebGL_API/Tutorial/Ajouter_du_contenu_à_WebGL")}}<a class="external" href="http://www.khronos.org/webgl/" rel="external" title="http://www.khronos.org/webgl/">WebGL</a> permet à un contenu web d'utiliser l'API basée sur <a class="external" href="http://www.khronos.org/opengles/" rel="external" title="http://www.khronos.org/opengles/">OpenGL ES</a> 2.0 pour effectuer un rendu 2D et 3D dans un <a class="internal" href="/fr/HTML/Canvas" title="fr/HTML/Canvas">canvas</a> dans les navigateurs qui le supportent, sans utilisation d'un module complémentaire. Les programmes WebGL sont constitués de code de contrôle écrit en JavaScript, et le code d'ombrage (GLSL) est exécuté dans l'Unité de Traitement Graphique (GPU) de l'ordinateur. Les éléments WebGL peuvent être mélangés avec d'autres éléments HTML, et composés d'autres parties de la page ou de l'arrière-plan de la page.</p>
+
+<p>Cet article va vous donner une introduction aux bases de l'utilisation de WebGL. Il est supposé que vous avez déjà une compréhension des mathématiques impliquées dans les graphismes 3D, et cet article ne prétend pas vous enseigner les concepts des graphismes 3D par eux-mêmes.</p>
+
+<p>Les exemples de code de ce tutoriel peuvent aussi être trouvés dans le <a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial">webgl-examples GitHub repository</a>.</p>
+
+<h2 class="editable" id="Préparation_au_rendu_3D"><span>Préparation au rendu 3D</span></h2>
+
+<p>La première chose dont vous avez besoin pour utiliser WebGL pour faire un rendu est un canvas. Le fragment d'HTML ci-dessous déclare un canvas dans lequel notre exemple se dessinera.</p>
+
+<pre class="brush: html"><span class="plain"><code>&lt;body&gt;
+  &lt;canvas id="glCanvas" width="640" height="480"&gt;&lt;/canvas&gt;
+&lt;/body&gt;</code></span>
+</pre>
+
+<div id="section_2">
+<h3 class="editable" id="Préparation_du_contexte_WebGL"><span>Préparation du contexte WebGL</span></h3>
+
+<p>La fonction <code>main()</code> dans notre code JavaScript est appelée quand notre script est chargé. Son but est de créer le contexte WebGL et de commencer à rendre du contenu.</p>
+
+<pre class="brush: js"><code>main();
+
+//
+// Début ici
+//
+function main() {
+ </code> const canvas = document.querySelector("#glCanvas");
+  // Initialisation du contexte WebGL
+  const gl = canvas.getContext("webgl");
+
+  // Continuer seulement si WebGL est disponible et fonctionnel
+  if (!gl) {
+    alert("Impossible d'initialiser WebGL. Votre navigateur ou votre machine peut ne pas le supporter.");
+    return;
+  }
+
+  // Définir la couleur d'effacement comme étant le noir, complètement opaque
+  gl.clearColor(0.0, 0.0, 0.0, 1.0);
+  // Effacer le tampon de couleur avec la couleur d'effacement spécifiée
+  gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);
+}
+</pre>
+
+<p>La première chose que nous faisons ici est d'obtenir une référence au canvas, en l'affectant à une variable dénommée <code>canvas</code>.</p>
+
+<p>Une fois que nous avons le canvas, nous essayons de lui obtenir un <a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGLRenderingContext">WebGLRenderingContext</a>, en appelant <a href="https://developer.mozilla.org/fr-FR/docs/Web/API/HTMLCanvasElement/getContext">getContext</a> et en lui passant la chaîne <code>"webgl"</code>. Si le navigateur ne supporte pas WebGL, <code>getContext</code> retournera <code>null</code>, auquel cas nous afficherons un message pour l'utilisateur, et nous sortirons.</p>
+
+<p>Si le contexte est initialisé avec succès, la variable <code>gl</code> sera notre référence à celui-ci. Dans ce cas, nous définissons la couleur d'effacement comme étant le noir, et nous effaçons le contexte avec cette couleur (redessin du canvas avec la couleur d'arrière-plan).</p>
+
+<p>A ce stade, votre code est suffisant pour que le contexte WebGL puisse s'initialiser avec succès, et vous devriez vous retrouver avec une grande boîte noire et vide, prête à - et attendant de - recevoir du contenu.</p>
+
+<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample1/index.html', 670, 510) }}</p>
+
+<p><a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample1">Voir le code complet</a> | <a href="http://mdn.github.io/webgl-examples/tutorial/sample1/">Ouvrir cette démo dans une nouvelle page</a></p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://dev.opera.com/articles/introduction-to-webgl-part-1/">An introduction to WebGL</a> : écrite par Luz Caballero, publiée sur dev.opera.com. Cet article traite de ce qu'est WebGL, explique comment WebGL fonctionne (incluant le concept de pipeline de rendu), et présente quelques bibliothèques WebGL.</li>
+ <li><a href="http://webglfundamentals.org/">WebGL Fundamentals</a></li>
+ <li><a href="http://duriansoftware.com/joe/An-intro-to-modern-OpenGL.-Table-of-Contents.html">An intro to modern OpenGL :</a> une série de bons articles sur OpenGL écrits par Joe Groff, fournissant une introduction claire à OpenGL, depuis son histoire jusqu'au concept important de pipeline de graphismes, qui comprend aussi quelques exemples montrant comment OpenGL fonctionne. Si vous n'avez aucune idée de ce qu'est OpenGL, c'est un bon endroit pour commencer.</li>
+</ul>
+
+<p>{{Next("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context")}}</p>
+</div>
diff --git a/files/fr/web/api/webgl_api/tutorial/creer_des_objets_3d_avec_webgl/index.html b/files/fr/web/api/webgl_api/tutorial/creer_des_objets_3d_avec_webgl/index.html
new file mode 100644
index 0000000000..ccbff1a2d6
--- /dev/null
+++ b/files/fr/web/api/webgl_api/tutorial/creer_des_objets_3d_avec_webgl/index.html
@@ -0,0 +1,167 @@
+---
+title: Créer des objets 3D avec WebGL
+slug: Web/API/WebGL_API/Tutorial/Creer_des_objets_3D_avec_WebGL
+tags:
+  - Tutoriel
+  - WebGL
+translation_of: Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL
+---
+<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL")}}</p>
+
+<p>Transformons notre carré en trois dimensions en lui ajoutant cinq faces supplémentaires pour créer un cube. Pour faire cela efficacement, nous allons passer du dessin de sommets par l'appel direct de la méthode {{domxref("WebGLRenderingContext.drawArrays()", "gl.drawArrays()")}}, à l'utilisation du tableau des sommets comme une table, et à référencer les sommets individuels dans cette table pour définir les positions des sommets de chaque face, en appelant directement {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}}.</p>
+
+<p>Notez que chaque face nécessite quatre sommets pour la définir, mais que chaque sommet est partagé entre trois faces. Nous pouvons donc passer beaucoup moins de données en faisant un tableau des 24 sommets, puis en référençant chaque sommet par son indice dans ce tableau, au lieu de passer des ensembles complets de coordonnées. Si vous vous demandez pourquoi nous avons besoin de 24 sommets, et non pas seulement de 8, c'est parce que chaque coin appartient à trois faces de couleurs différentes, et qu'un sommet donné doit avoir une couleur spécifique - c'est pourquoi nous allons créer 3 copies de chaque sommet dans les trois couleurs différentes, une pour chaque face.</p>
+
+<h2 id="Définir_la_position_des_sommets_du_cube">Définir la position des sommets du cube</h2>
+
+<p>Tout d'abord, construisons le tampon des sommets du cube en mettant à jour le code de <code>initBuffer()</code>. C'est sensiblement le même que pour le carré, mais en plus long, du fait qu'il y a 24 sommets (4 par côté) :</p>
+
+<pre class="brush: js">  const positions = [
+    // Face avant
+    -1.0, -1.0,  1.0,
+     1.0, -1.0,  1.0,
+     1.0,  1.0,  1.0,
+    -1.0,  1.0,  1.0,
+
+    // Face arrière
+    -1.0, -1.0, -1.0,
+    -1.0,  1.0, -1.0,
+     1.0,  1.0, -1.0,
+     1.0, -1.0, -1.0,
+
+    // Face supérieure
+    -1.0,  1.0, -1.0,
+    -1.0,  1.0,  1.0,
+     1.0,  1.0,  1.0,
+     1.0,  1.0, -1.0,
+
+    // Face inférieure
+    -1.0, -1.0, -1.0,
+     1.0, -1.0, -1.0,
+     1.0, -1.0,  1.0,
+    -1.0, -1.0,  1.0,
+
+    // Face droite
+     1.0, -1.0, -1.0,
+     1.0,  1.0, -1.0,
+     1.0,  1.0,  1.0,
+     1.0, -1.0,  1.0,
+
+    // Face gauche
+    -1.0, -1.0, -1.0,
+    -1.0, -1.0,  1.0,
+    -1.0,  1.0,  1.0,
+    -1.0,  1.0, -1.0
+  ];
+</pre>
+
+<p>Du fait que nous avons ajouté une composante z à nos sommets, nous avons besoin de changer en 3 le <code>numComponents</code> de notre attribut <code>vertexPosition</code>.</p>
+
+<pre><code>// Indiquer à WebGL comment extraire les positions du tampon des
+// positions dans l'attribut vertexPosition
+{
+  const numComponents = 3;
+  ...
+  gl.vertexAttribPointer(
+      programInfo.attribLocations.vertexPosition,
+      numComponents,
+      type,
+      normalize,
+      stride,
+      offset);
+  gl.enableVertexAttribArray(
+      programInfo.attribLocations.vertexPosition);
+}</code></pre>
+
+<h2 id="Définir_les_couleurs_des_sommets">Définir les couleurs des sommets</h2>
+
+<p>Nous avons aussi besoin de construire un tableau des couleurs pour chacun des 24 sommets. Ce code commence par définir une couleur pour chaque face, puis il utilise une boucle pour assembler le tableau de toutes les couleurs pour chacun des sommets.</p>
+
+<pre class="brush: js">  const <code>faceColors </code>= [
+    [1.0,  1.0,  1.0,  1.0],    // Face avant : blanc
+    [1.0,  0.0,  0.0,  1.0],    // Face arrière : rouge
+    [0.0,  1.0,  0.0,  1.0],    // Face supérieure : vert
+    [0.0,  0.0,  1.0,  1.0],    // Face infiérieure : bleu
+    [1.0,  1.0,  0.0,  1.0],    // Face droite : jaune
+    [1.0,  0.0,  1.0,  1.0]     // Face gauche : violet
+  ];
+
+  // Conversion du tableau des couleurs en une table pour tous les sommets
+
+  var <code>colors </code>= [];
+
+  for (j=0; j&lt;<code>faceColors</code>.length; j++) {
+    const c = faceColors[j];
+
+    // Répéter chaque couleur quatre fois pour les quatre sommets d'une face
+    colors = colors<code>.concat(c, c, c, c);
+  </code>}
+
+  const colorBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
+</pre>
+
+<h2 id="Définir_le_tableau_des_éléments">Définir le tableau des éléments</h2>
+
+<p>Une fois que les tableaux des sommets sont générés, nous devons construire le tableau des éléments.</p>
+
+<pre class="brush: js">  <code>const indexBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
+
+  // Ce tableau définit chaque face comme deux triangles, en utilisant les
+  // indices dans le tableau des sommets pour spécifier la position de chaque
+  // triangle.
+
+  const indices = [
+    0,  1,  2,      0,  2,  3,    // avant
+    4,  5,  6,      4,  6,  7,    // arrière
+    8,  9,  10,     8,  10, 11,   // haut
+    12, 13, 14,     12, 14, 15,   // bas
+    16, 17, 18,     16, 18, 19,   // droite
+    20, 21, 22,     20, 22, 23,   // gauche
+  ];
+
+  // Envoyer maintenant le tableau des éléments à GL
+
+  gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,
+      new Uint16Array(indices), gl.STATIC_DRAW);
+
+  return {
+    position: positionBuffer</code><code>,
+    color: colorBuffer</code><code>,
+    indices: indexBuffer</code><code>,
+  };
+}</code></pre>
+
+<p>Le tableau <code>indices</code> définit chaque face comme étant une paire de triangles, en spécifiant chaque sommet du triangle comme un indice dans les tableaux des sommets du cube. Ainsi le cube est décrit comme une collection de 12 triangles.</p>
+
+<h2 id="Dessiner_le_cube">Dessiner le cube</h2>
+
+<p>Ensuite, nous devons ajouter du code à notre fonction <code>drawScene()</code> pour dessiner le tampon des indices du cube, en ajoutant de nouveaux appels à {{domxref("WebGLRenderingContext.bindBuffer()", "gl.bindBuffer()")}} et {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}} :</p>
+
+<pre><code>  // Indiquer à WebGL quels indices utiliser pour indexer les sommets
+  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, tampons.indices);
+
+...
+
+  {
+    const vertexCount = 36;
+    const type = gl.UNSIGNED_SHORT;
+    const offset = 0;
+    gl.drawElements(gl.TRIANGLES, vertexCount, type, offset);
+  }</code></pre>
+
+<p>Du fait que chaque face de notre cube est composée de deux triangles, il y a 6 sommets par côté, soit 36 sommets au total dans le cube, même si beaucoup d'entre eux sont des doublons.</p>
+
+<p>Finalement, remplaçons notre variable <code>squareRotation</code> par <code>cubeRotation</code> et ajoutons une seconde rotation autour de l'axe des x :</p>
+
+<pre><code>mat4.rotate(modelViewMatrix, modelViewMatrix, cubeRotation * .7, [0, 1, 0]);</code></pre>
+
+<p>À ce stade, nous avons un cube animé en rotation, ses six faces ayant des couleurs assez vives.</p>
+
+<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample5/index.html', 670, 510) }}</p>
+
+<p><a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample5">Voir le code complet</a> | <a href="http://mdn.github.io/webgl-examples/tutorial/sample5/">Ouvrir cette démo dans une nouvelle page</a></p>
+
+<p>{{PreviousNext("Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL")}}</p>
diff --git a/files/fr/web/api/webgl_api/tutorial/eclairage_en_webgl/index.html b/files/fr/web/api/webgl_api/tutorial/eclairage_en_webgl/index.html
new file mode 100644
index 0000000000..db767fe9bb
--- /dev/null
+++ b/files/fr/web/api/webgl_api/tutorial/eclairage_en_webgl/index.html
@@ -0,0 +1,175 @@
+---
+title: Éclairage en WebGL
+slug: Web/API/WebGL_API/Tutorial/Eclairage_en_WebGL
+translation_of: Web/API/WebGL_API/Tutorial/Lighting_in_WebGL
+---
+<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Utiliser_les_textures_avec_WebGL", "Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL")}}</p>
+
+<p>La première chose à comprendre à propos de WebGL est que contrairement au standard OpenGL, WebGL n'a pas de support pour l'éclairage. Vous avez à le faire par vous même. Heureusement ce n'est pas si dur à faire, et cet article va vous expliquer quelques bases.</p>
+
+<h2 id="Simuler_l'éclairage_et_les_ombres_en_3D">Simuler l'éclairage et les ombres en 3D</h2>
+
+<p>Rentrer dans les détails de la théorie derrière la simulation de l'éclairage 3D est assez loin du sujet de cet article mais il vaut mieux en connaitre un minimum le sujet. Au lieu de rentrer dans le vif du sujet ici, jetez un coup d'oeil sur <a href="https://fr.wikipedia.org/wiki/Ombrage_de_Phong">l'ombrage de Phong</a> sur Wikipédia, qui fourni une bonne vue d'ensemble comme modèle d'éclairage.</p>
+
+<p>Il y a trois types basiques d'éclairage :</p>
+
+<ol>
+ <li><strong>Ambient light (Lumière Ambiante) </strong>est la lumière qui imprègne, qui se répand sur la scène. Elle n'a pas de direction et s'applique sur toutes les faces de la scène de la même façon.</li>
+ <li><strong>Directional light (Lumière Directionnelle)</strong> est une lumière émise depuis une direction spécifique. Par exemple le soleil, est une lumière directionnelle.</li>
+ <li><strong>Point light</strong> <strong>(Point de lumière) </strong>est une lumière émise depuis un point, éméttant une lumière dans toutes les directions, contrairement à la Lumière Directionnelle. C'est comme ceci que les lumières fonctionnent principalement dans notre monde, comme par exemple une ampoule.</li>
+</ol>
+
+<p>Pour notre tutorial, nous allons simplifier le model d'éclairage, en considérant seulement une unique lumière directionnelle et une lumière ambiante. Nous allons réutiliser notre <a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL">précédent exemple avec le cube en rotation</a>.</p>
+
+<p>Une fois que nous avons appréhendé le concept de source et de réfléction de la lumière, il y a deux choses que nous avons besoin d'implémenter pour nos lumières directionnelles.</p>
+
+<ol>
+ <li>Nous avons besoin d'associer la <strong>surface normale</strong> avec chaque sommet. C'est un vecteur qui est perpendiculaire à la face associé à ce sommet.</li>
+ <li>Nous avons besoin de connaître la direction dans laquelle la lumière arrive. Ceci est défini par la direction du vecteur.</li>
+</ol>
+
+<p>Puis nous mettons à jour le vertex shader pour ajuster la couleur de chaque sommet. en prenant en compte la lumière ambiante ainsi que l'effet de la lumière directionnelle donné par l'angle qui rencontre la face du cube. Nous allons voir comment faire avec les shaders.</p>
+
+<h2 id="Créer_les_normales_pour_les_sommets">Créer les normales pour les sommets</h2>
+
+<p>La première chose dont nous avons besoin, est de générer le tableau des <strong>normales</strong> pour tous les sommets que constituent notre cube. Comme un cube est un simple objet, c'est plutôt simple à faire, évidemment pour des objets plus complexe, calculer les normales sera plus compliqué.</p>
+
+<pre class="brush: js">cubeVerticesNormalBuffer = gl.createBuffer();
+gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesNormalBuffer);
+
+var vertexNormals = [
+  // Front
+   0.0,  0.0,  1.0,
+   0.0,  0.0,  1.0,
+   0.0,  0.0,  1.0,
+   0.0,  0.0,  1.0,
+
+  // Back
+   0.0,  0.0, -1.0,
+   0.0,  0.0, -1.0,
+   0.0,  0.0, -1.0,
+   0.0,  0.0, -1.0,
+
+  // Top
+   0.0,  1.0,  0.0,
+   0.0,  1.0,  0.0,
+   0.0,  1.0,  0.0,
+   0.0,  1.0,  0.0,
+
+  // Bottom
+   0.0, -1.0,  0.0,
+   0.0, -1.0,  0.0,
+   0.0, -1.0,  0.0,
+   0.0, -1.0,  0.0,
+
+  // Right
+   1.0,  0.0,  0.0,
+   1.0,  0.0,  0.0,
+   1.0,  0.0,  0.0,
+   1.0,  0.0,  0.0,
+
+  // Left
+  -1.0,  0.0,  0.0,
+  -1.0,  0.0,  0.0,
+  -1.0,  0.0,  0.0,
+  -1.0,  0.0,  0.0
+];
+
+gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(vertexNormals), gl.STATIC_DRAW);
+</pre>
+
+<p>Ceci doit vous être plutôt familier maintenant. Nous créons un nouveau buffer, on le lie avec le tableau sur lequel nous allons travailler, puis nous allons envoyer l'ensemble de notre tableau au buffer en appelant la méthode <code>bufferData()</code>.</p>
+
+<p>Ensuite nous allons ajouter le code à la fonction <code>drawScene() </code>pour attacher le tableau de normales à l'attribut du shader, comme ça le code du shader y aura accès:</p>
+
+<pre class="brush: js">gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesNormalBuffer);
+gl.vertexAttribPointer(vertexNormalAttribute, 3, gl.FLOAT, false, 0, 0);
+</pre>
+
+<p>Enfin, nous avons besoin de mettre à jour le code qui construit les matrices uniformes pour générer et livrer au shader une matrice normale, qui sera utilisée pour transformer les normales en fonction de l'orientation actuelle du cube par rapport à la source de lumière.</p>
+
+<pre class="brush: js">var normalMatrix = mvMatrix.inverse();
+normalMatrix = normalMatrix.transpose();
+var nUniform = gl.getUniformLocation(shaderProgram, 'uNormalMatrix');
+gl.uniformMatrix4fv(nUniform, false, new WebGLFloatArray(normalMatrix.flatten()));
+</pre>
+
+<h2 id="Mettre_à_jour_les_shaders">Mettre à jour les shaders</h2>
+
+<p>Maintenant que les shaders ont toutes les données dont ils ont besoin, nous mettons à jour leur code.</p>
+
+<h3 id="Le_vertex_shader">Le vertex shader</h3>
+
+<p>La première chose à faire est de mettre à jour le vertex shader en générant une valeur pour l'ombre de chaque sommet, en se basant sur l'éclairage ambiant ainsi que la direction de la lumière. Jettons un oeil sur le code suivant:</p>
+
+<pre class="brush: html">&lt;script id="shader-vs" type="x-shader/x-vertex"&gt;
+  attribute highp vec3 aVertexNormal;
+  attribute highp vec3 aVertexPosition;
+  attribute highp vec2 aTextureCoord;
+
+  uniform highp mat4 uNormalMatrix;
+  uniform highp mat4 uMVMatrix;
+  uniform highp mat4 uPMatrix;
+
+  varying highp vec2 vTextureCoord;
+  varying highp vec3 vLighting;
+
+  void main(void) {
+    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
+    vTextureCoord = aTextureCoord;
+
+    // Apply lighting effect
+
+    highp vec3 ambientLight = vec3(0.6, 0.6, 0.6);
+    highp vec3 directionalLightColor = vec3(0.5, 0.5, 0.75);
+    highp vec3 directionalVector = vec3(0.85, 0.8, 0.75);
+
+    highp vec4 transformedNormal = uNormalMatrix * vec4(aVertexNormal, 1.0);
+
+    highp float directional = max(dot(transformedNormal.xyz, directionalVector), 0.0);
+    vLighting = ambientLight + (directionalLightColor * directional);
+  }
+&lt;/script&gt;
+</pre>
+
+<p>Une fois que la position du sommet est calculée, et que nous obtenons les coordonnées des texels (tas de pixel pour une texture) correspondant au sommet, nous pouvons travailler sur le calcul de l'ombre de chaque sommet.</p>
+
+<p>La première chose que nous allons faire est de transformer la base normale sur la position actuelle et l'orientation du cube, en calculant les normales des sommets par la matrice normale. Nous pouvons alors calculer la quantité d'éclairage qui doit être appliquée au sommet en calculant le produit de la normale transformée et du vecteur directionnel (la direction d'où la lumière vient). Si le résultat est inférieur à zéro, alors on le met à 0. Car une lumière négative n'a pas de sens dans notre cas.</p>
+
+<p>Une fois la quantité de lumière directionnelle calculée, nous pouvons générer la valeur d'éclairage en prenant l'éclairage ambiant et en y ajoutant le produit de la couleur de la lumière directionnelle, et aussi la quantité de la lumière directionnelle à fournir. Comme résultat, nous avons maintenant une valeur RGB qui sera utilisé par le fragment shader pour ajuster la couleur de chaque pixel.</p>
+
+<h3 id="Le_fragment_shader">Le fragment shader</h3>
+
+<p>Le fragment shader a maintenant besoin d'être mis à jour en prenant en compte la quantité de lumière calculée précédemment par le vertex shader:</p>
+
+<pre class="brush: js">&lt;script id="shader-fs" type="x-shader/x-fragment"&gt;
+  varying highp vec2 vTextureCoord;
+  varying highp vec3 vLighting;
+
+  uniform sampler2D uSampler;
+
+  void main(void) {
+    mediump vec4 texelColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
+
+    gl_FragColor = vec4(texelColor.rgb * vLighting, texelColor.a);
+  }
+&lt;/script&gt;
+</pre>
+
+<p>Ici nous récupérons la couleur de chaque texel (tas de pixel pour une texture) , comme nous avons fait pour l'exemple précédent, mais avant d'ajuster la couleur du fragment, nous multiplions la couleur des pixels par la quantité de lumière, pour appliquer l'effet d'éclairage.</p>
+
+<p>Et c'est tout !</p>
+
+<p> </p>
+
+<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample7/index.html', 670, 510) }}</p>
+
+<p><a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample7">Voir le code complet</a> | <a href="http://mdn.github.io/webgl-examples/tutorial/sample7/">Ouvrir cette démo dans une nouvelle page</a></p>
+
+<h2 id="Exercices">Exercices</h2>
+
+<p>Évidemment, ceci est un simple exemple, une implémentation basique de calcul de lumière par sommet. Pour aller plus loin, nous voulons implémenter un calcul de lumière par pixel, mais ceci vous mènera dans la bonne direction. </p>
+
+<p>Vous pouvez aussi implémenter avec la direction de source de lumière, la couleur de la source, la distance, etc..</p>
+
+<p>{{PreviousNext("Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL", "Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL")}}</p>
diff --git a/files/fr/web/api/webgl_api/tutorial/index.html b/files/fr/web/api/webgl_api/tutorial/index.html
new file mode 100644
index 0000000000..92a4c9f119
--- /dev/null
+++ b/files/fr/web/api/webgl_api/tutorial/index.html
@@ -0,0 +1,42 @@
+---
+title: Tutoriel WebGL
+slug: Web/API/WebGL_API/Tutorial
+tags:
+  - API WebGL
+  - Tutoriel
+  - Vue d'ensemble
+  - WebGL
+translation_of: Web/API/WebGL_API/Tutorial
+---
+<div>{{WebGLSidebar}}</div>
+
+<div class="summary">
+<p><a class="external" href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">WebGL</a> permet au contenu web d'utiliser une API basée sur <a class="external" href="http://www.khronos.org/opengles/" title="http://www.khronos.org/opengles/">OpenGL ES</a> 2.0 pour effectuer des rendus 3D dans un {{HTMLElement("canvas")}} HTML dans les navigateurs qui le supportent, sans avoir recours à des modules complémentaires. Les programmes WebGL sont constitués de code de contrôle rédigé en JavaScript, et de code d'effets spéciaux (code shader) qui est exécuté sur l'Unité de Traitement Graphique (GPU) d'un ordinateur. Les éléments WebGL peuvent être mélangés avec d'autres éléments HTML et composés avec d'autres parties de la page ou du fond de la page.</p>
+</div>
+
+<p><span class="seoSummary">Ce tutoriel décrit comment utiliser l'élément <code>&lt;canvas&gt;</code> pour dessiner des graphiques WebGL, en commençant par les bases. Les exemples suivants devraient vous donner des idées de ce que vous pouvez faire avec WebGL et vont vous fournir des fragments de code qui pourraient vous aider à construire votre propre contenu.</span></p>
+
+<h2 id="Avant_que_vous_ne_commenciez">Avant que vous ne commenciez</h2>
+
+<p>L'utilisation de l'élément <code>&lt;canvas&gt;</code> n'est pas très difficile, mais vous avez besoin d'une compréhension de base de l'<a href="/en-US/docs/Web/HTML" title="HTML">HTML</a> et du <a href="/en-US/docs/Web/JavaScript" title="JavaScript">JavaScript</a>. L'élément <code>&lt;canvas&gt;</code> et WebGL ne sont pas supportés par certains anciens navigateurs, mais ils sont supportés dans les versions récentes de tous les principaux navigateurs. Pour dessiner des graphiques sur le canevas, on utilise un objet de contexte Javascript, qui crée des graphiques à la volée.</p>
+
+<h2 id="Dans_ce_tutoriel">Dans ce tutoriel</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/API/WebGL_API/Tutorial/Commencer_avec_WebGL">Commencer avec WebGL</a></dt>
+ <dd>Comment mettre en place un contexte WebGL.</dd>
+ <dt><a href="/fr/docs/Web/API/WebGL_API/Tutorial/Ajouter_du_contenu_à_WebGL">Ajouter du contenu à WebGL</a></dt>
+ <dd>Comment faire un rendu simple de figures planes avec WebGL.</dd>
+ <dt><a href="/fr/docs/Web/API/WebGL_API/Tutorial/Ajouter_des_couleurs_avec_les_shaders">Ajouter des couleurs avec les nuanceurs</a></dt>
+ <dd>Démontre comment ajouter de la couleur aux formes avec des nuanceurs.</dd>
+ <dt><a href="/fr/docs/Web/API/WebGL_API/Tutorial/Animer_des_objets_avec_WebGL">Animer des objets avec WebGL</a></dt>
+ <dd>Montre comment tourner et déplacer des objets pour créer des animations simples.</dd>
+ <dt><a href="/fr/docs/Web/API/WebGL_API/Tutorial/Creer_des_objets_3D_avec_WebGL">Créer des objets 3D avec WebGL</a></dt>
+ <dd>Montre comment créer et animer un objet 3D (dans ce cas, un cube).</dd>
+ <dt><a href="/fr/docs/Web/API/WebGL_API/Tutorial/Utiliser_les_textures_avec_WebGL">Utilisation des textures dans WebGL</a></dt>
+ <dd>Démontrer comment appliquer des textures sur les faces d'un objet.</dd>
+ <dt><a href="/fr/docs/Web/API/WebGL_API/Tutorial/Eclairage_en_WebGL"> Éclairage en WebGL</a></dt>
+ <dd>Comment simuler des effets d'illumination dans votre contexte WebGL.</dd>
+ <dt><a href="/fr/docs/Web/API/WebGL_API/Tutorial/Animation_de_textures_en_WebGL">Animation de textures en WebGL</a></dt>
+ <dd>Montre comment animer des textures ; dans ce cas, en appliquant une vidéo Ogg sur les faces d'un cube en rotation.</dd>
+</dl>
diff --git a/files/fr/web/api/webgl_api/tutorial/utiliser_les_textures_avec_webgl/index.html b/files/fr/web/api/webgl_api/tutorial/utiliser_les_textures_avec_webgl/index.html
new file mode 100644
index 0000000000..6e1d7bb67d
--- /dev/null
+++ b/files/fr/web/api/webgl_api/tutorial/utiliser_les_textures_avec_webgl/index.html
@@ -0,0 +1,278 @@
+---
+title: Utilisation des textures en WebGL
+slug: Web/API/WebGL_API/Tutorial/Utiliser_les_textures_avec_WebGL
+tags:
+  - Tutoriel
+  - WebGL
+translation_of: Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL
+---
+<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL", "Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}</p>
+
+<p>Maintenant que notre programme peut faire tourner un cube 3D, appliquons lui une texture, au lieu d'avoir des couleurs unies pour ses faces.</p>
+
+<h2 id="Chargement_des_textures">Chargement des textures</h2>
+
+<p>La première chose à faire est d'ajouter le code pour charger les textures. Dans notre cas, nous utiliserons une texture unique, appliquée à chacune des six faces de notre cube en rotation ; mais la même technique peut être utilisée un nombre quelconque de textures.</p>
+
+<div class="note"><strong>Note :</strong> il est important de noter que le chargement des textures suit les <a href="/fr-FR/docs/Web/HTTP/CORS" title="en/HTTP access control">règles inter-domaines</a> ; donc vous pouvez seulement charger des textures depuis les sites pour lesquels votre contenu a l'approbation CORS. Voir les textures inter-domaines ci-dessous pour plus de détails.</div>
+
+<p>Le code qui charge la texture ressemble à ce qui suit : </p>
+
+<pre><code>//
+// Initialiser une texture et charger une image.
+// Quand le chargement d'une image est terminé, la copier dans la texture.
+//
+function loadTexture(gl, url) {
+  const texture = gl.createTexture();
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+
+  // Du fait que les images doivent être téléchargées depuis l'internet,
+  // il peut s'écouler un certain temps avant qu'elles ne soient prêtes.
+  // Jusque là, mettre un seul pixel dans la texture, de sorte que nous puissions
+  // l'utiliser immédiatement. Quand le téléchargement de la page sera terminé,
+  // nous mettrons à jour la texture avec le contenu de l'image.
+  const level = 0;
+  const internalFormat = gl.RGBA;
+  const width = 1;
+  const height = 1;
+  const border = 0;
+  const srcFormat = gl.RGBA;
+  const srcType = gl.UNSIGNED_BYTE;
+  const pixel = new Uint8Array([0, 0, 255, 255]);  // bleu opaque
+  gl.texImage2D(gl.TEXTURE_2D, level, internalFormat,
+                width, height, border, srcFormat, srcType,
+                pixel);
+
+  const image = new Image();
+  image.onload = function() {
+    gl.bindTexture(gl.TEXTURE_2D, texture);
+    gl.texImage2D(gl.TEXTURE_2D, level, internalFormat,
+                  srcFormat, srcType, image);
+
+    // WebGL1 a des spécifications différentes pour les images puissances de 2
+    // par rapport aux images non puissances de 2 ; aussi vérifier si l'image est une
+    // puissance de 2 sur chacune de ses dimensions.
+    if (isPowerOf2(image.width) &amp;&amp; isPowerOf2(image.height)) {
+       // Oui, c'est une puissance de 2. Générer les mips.
+       gl.generateMipmap(gl.TEXTURE_2D);
+    } else {
+       // Non, ce n'est pas une puissance de 2. Désactiver les mips et définir l'habillage
+       // comme "accrocher au bord"
+       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    }
+  };
+  image.src = url;
+
+  return texture;
+}
+
+function isPowerOf2(value) {
+  return (value &amp; (value - 1)) == 0;
+}</code></pre>
+
+<p>La routine <code>loadTexture()</code> commence par créer un objet texture WebGL <code>texture</code> en appelant la fonction WebGL {{domxref ("WebGLRenderingContext.createTexture()", "createTexture()")}}. Il téléverse ensuite un seul pixel bleu en utilisant {{domxref ("WebGLRenderingContext.texImage2D()", "texImage2D()")}}. Cela rend la texture immédiatement utilisable comme une couleur bleue unie, alors que cela peut prendre quelques instants pour télécharger notre image.</p>
+
+<p>Pour charger la texture à partir du fichier image, elle crée ensuite un objet Image et en affecte le src à l'URL de l'image que nous souhaitons utiliser comme texture. La fonction que nous affectons à <code>image.onload</code> sera appelée une fois terminé le téléchargement de l'image. À ce stade, nous appelons à nouveau {{domxref ("WebGLRenderingContext.texImage2D()", "texImage2D()")}}, cette fois en utilisant l'image comme source pour la texture. Après cela, nous configurons le filtrage et l'habillage de la texture suivant que l'image que nous téléchargeons a ou non une puissance de 2 selon ses deux dimensions.</p>
+
+<p>WebGL1 ne peut utiliser que des textures non puissances de 2 avec d'un filtrage défini à NEAREST ou LINEAR, et il ne peut pas générer de mipmap pour elles. Leur mode d'habillage doit également être défini à CLAMP_TO_EDGE. Inversement, si la texture est une puissance de 2 dans les deux dimensions, alors WebGL peut faire un filtrage de meilleure qualité, il peut utiliser mipmap, et il peut définir le mode d'habillage à REPEAT ou MIRRORED_REPEAT.</p>
+
+<p>Un exemple de texture répétée est le pavage d'une image par quelques briques pour couvrir un mur de briques.</p>
+
+<p>Le mipmapping et la répétition UV peuvent être désactivés avec {{domxref ("WebGLRenderingContext.texParameter()", "texParameteri()")}}. Cela permettra des textures non-puissances-de-deux (NPOT) au prix du mipmapping, de l'habillage UV, du pavage UV, et de votre contrôle sur la manière dont le périphérique gérera votre texture.</p>
+
+<pre><code>// gl.NEAREST est aussi permis, au lieu de gl.LINEAR, du fait qu'aucun ne fait de mipmap.
+gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+// Empêcher l'habillage selon la coordonnée s (répétition).
+gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+// Empêcher l'habillage selon la coordonnée t (répétition).
+gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);</code></pre>
+
+<p>A nouveau, avec ces paramètres, les appareils WebGL compatibles accepteront automatiquement toute résolution pour cette texture (jusqu'à leurs dimensions maximum). A défaut de la configuration ci-dessus, WebGL requiert que tous les échantillons de textures NPOT échouent, en retournant du noir transparent : <code>rgba (0,0,0,0)</code>.</p>
+
+<p>Pour charger l'image, ajoutons un appel à notre fonction <code>loadTexture()</code> dans notre fonction <code>main()</code>. Cela peut être ajouté après l'appel <code>initBuffers(gl)</code>.</p>
+
+<pre><code>// Charger la texture
+const texture = loadTexture(gl, 'cubetexture.png');</code>
+</pre>
+
+<h2 id="Application_de_la_texture_sur_les_faces">Application de la texture sur les faces</h2>
+
+<p>À ce stade, la texture est chargée et prête à être utilisée. Mais avant de pouvoir l'utiliser, nous devons définir l'application des coordonnées de texture aux sommets des faces de notre cube. Cela remplace tout le code précédemment existant pour la configuration des couleurs pour chacune des faces du cube dans <code>initBuffers()</code>.</p>
+
+<pre><code> const textureCoordBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, textureCoordBuffer);
+
+  const textureCoordinates = [
+    // Front
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0,
+    // Back
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0,
+    // Top
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0,
+    // Bottom
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0,
+    // Right
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0,
+    // Left
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0,
+  ];
+
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoordinates),
+                gl.STATIC_DRAW);
+
+...
+  return {
+    position: positionBuffer,
+    textureCoord: textureCoordBuffer,
+    indices: indexBuffer,
+  };</code></pre>
+
+<p>Tout d'abord, ce code crée un tampon WebGL dans lequel nous stockerons les coordonnées de texture pour chaque face, puis nous lions ce tampon comme étant le tableau dans lequel nous allons écrire.</p>
+
+<p>Le tableau <code>textureCoordinates</code> définit les coordonnées de texture correspondant à chaque sommet de chaque face. Notez que les coordonnées de texture vont de 0,0 à 1,0 ; les dimensions des textures sont normalisées dans une plage de 0,0 à 1,0 quelque soit leur taille réelle, aux fins d'application de la texture.</p>
+
+<p>Une fois que nous avons mis en place le tableau d'application de la texture, nous l'envoyons dans le tampon, de sorte que WebGL ait ces données prêtes pour son utilisation.</p>
+
+<h2 id="Mise_à_jour_des_shaders">Mise à jour des shaders</h2>
+
+<p>Le programme shader doit également être mis à jour pour utiliser des textures au lieu de couleurs unies.</p>
+
+<h3 id="Le_shader_de_sommet">Le shader de sommet</h3>
+
+<p>Nous avons besoin de remplacer le shader de sommet de façon à ce qu'au lieu de récupérer des données de couleur, il récupère à la place des données de coordonnées de texture.</p>
+
+<pre><code>const vsSource = `
+    attribute vec4 aVertexPosition;
+    attribute vec2 aTextureCoord;
+
+    uniform mat4 uModelViewMatrix;
+    uniform mat4 uProjectionMatrix;
+
+    varying highp vec2 vTextureCoord;
+
+    void main(void) {
+      gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
+      vTextureCoord = aTextureCoord;
+    }
+  `;</code></pre>
+
+<p>Le changement clé est ici qu'au lieu d'aller chercher la couleur du sommet, nous récupérons les coordonnées de la texture, et nous les transmettons au shader de sommet ; ceci indiquera l'emplacement dans la texture correspondant au sommet.</p>
+
+<h3 id="Le_shader_de_fragment">Le shader de fragment</h3>
+
+<p>Le shader de fragment doit également être mis à jour :</p>
+
+<pre><code>const fsSource = `
+    varying highp vec2 vTextureCoord;
+
+    uniform sampler2D uSampler;
+
+    void main(void) {
+      gl_FragColor = texture2D(uSampler, vTextureCoord);
+    }
+  `;</code></pre>
+
+<p>Au lieu d'attribuer une valeur de couleur à la couleur du fragment, la couleur du fragment est calculée en récupérant le <strong>texel</strong> (c'est-à-dire, le pixel dans la texture) sur la base de la valeur de <code>vTextureCoord</code>, qui est interpolée comme les sommets.</p>
+
+<h3 id="Emplacements_des_attributs_et_des_uniformes">Emplacements des attributs et des uniformes</h3>
+
+<p>Du fait que nous avons changé un attribut et ajouté un uniforme, nous devons rechercher leurs emplacements :</p>
+
+<pre><code>  const programInfo = {
+    program: shaderProgram,
+    attribLocations: {
+      vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
+      textureCoord: gl.getAttribLocation(shaderProgram, 'aTextureCoord'),
+    },
+    uniformLocations: {
+      projectionMatrix: gl.getUniformLocation(shaderProgram, 'uProjectionMatrix'),
+      modelViewMatrix: gl.getUniformLocation(shaderProgram, 'uModelViewMatrix'),
+      uSampler: gl.getUniformLocation(shaderProgram, 'uSampler'),
+    },
+  };</code>
+</pre>
+
+<h2 id="Dessin_du_cube_texturé">Dessin du cube texturé</h2>
+
+<p>Les modifications apportées à la fonction <code>drawScene()</code> sont simples.</p>
+
+<p>Tout d'abord, le code pour spécifier le tampon de couleurs a disparu, remplacé par ce qui suit :</p>
+
+<pre><code>// Indiquer à WebGL comment extraire les coordonnées de texture du tampon
+{
+    const num = 2; // chaque coordonnée est composée de 2 valeurs
+    const type = gl.FLOAT; // les données dans le tampon sont des flottants 32 bits
+    const normalize = false; // ne pas normaliser
+    const stride = 0; // combien d'octets à récupérer entre un jeu et le suivant
+    const offset = 0; // à combien d'octets du début faut-il commencer
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffers.textureCoord);
+    gl.vertexAttribPointer(programInfo.attributeLocations.textureCoord, num, type, normalize, stride, offset);
+    gl.enableVertexAttribArray(programInfo.attributeLocations.textureCoord);
+}</code></pre>
+
+<p>Ajoutez alors le code pour spécifier la texture à appliquer sur les faces, juste avant de dessiner :</p>
+
+<pre><code>  // Indiquer à WebGL que nous voulons affecter l'unité de texture 0
+  gl.activeTexture(gl.TEXTURE0);
+
+  // Lier la texture à l'unité de texture 0
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+
+  // Indiquer au shader que nous avons lié la texture à l'unité de texture 0
+  gl.uniform1i(programInfo.uniformLocations.uSampler, 0);</code></pre>
+
+<p>WebGL fournit un minimum de 8 unités de texture ; la première d'entre elles est <code>gl.TEXTURE0</code>. Nous indiquons à WebGL que nous voulons affecter l'unité 0. Nous appelons alors {{domxref ("WebGLRenderingContext.bindTexture()", "bindTexture()")}}, qui lie la texture au point de liaison <code>TEXTURE_2D</code> de l'unité de texture 0. Nous indiquons alors au shader que pour l'<code>uSampler</code>, il faut utiliser l'unité de texture 0.</p>
+
+<p>Finalement, ajoutez <code>texture</code> comme paramètre de la fonction <code>drawScene()</code>, où elle est à la fois définie et appelée.</p>
+
+<pre><code>drawScene(gl, programInfo, buffers, texture, deltaTime);
+...
+function drawScene(gl, programInfo, buffers, texture, deltaTime) {</code></pre>
+
+<p>Arrivés ce point, le cube en rotation devrait être prêt à fonctionner.</p>
+
+<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample6/index.html', 670, 510) }}</p>
+
+<p><a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample6">Voir le code complet</a> | <a href="http://mdn.github.io/webgl-examples/tutorial/sample6/">Ouvrir cette démo dans une nouvelle page</a></p>
+
+<h2 id="Textures_inter-domaines">Textures inter-domaines</h2>
+
+<p>Le chargement des textures WebGL est soumis aux contrôles d'accès inter-domaines. Pour que votre contenu puisse charger une texture d'un autre domaine, une approbation CORS doit être obtenue. Voir le <a href="https://developer.mozilla.org/fr/docs/HTTP/Access_control_CORS">Contrôle d'accès HTTP</a> pour plus de détails sur CORS.</p>
+
+<p>Voir cet <a href="http://hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/">article sur hacks.mozilla.org</a> pour une explication de l'utilisation des images approuvées CORS comme textures WebGL, avec <a href="http://people.mozilla.org/~bjacob/webgltexture-cors-js.html">un exemple complet</a>.</p>
+
+<div class="note">
+<p><strong>Note :</strong> le support CORS pour les texture WebGL et l'attribut <code>crossOrigin</code> pour les éléments image est implémenté dans {{Gecko("8.0")}}.</p>
+</div>
+
+<p>Les canevas 2D dégradés (en écriture seule) ne peuvent pas être utilisés comme des textures WebGL. Un {{HTMLElement ("canvas")}} 2D devient dégradé par exemple lorsqu'il est utilisé pour dessiner une image inter-domaine.</p>
+
+<div class="note">
+<p><strong>Note :</strong> le support CORS pour <code>drawImage</code> de Canvas 2D est implémenté dans {{Gecko ("9.0")}}. Cela signifie que l'utilisation d'une image inter-domaine ayant l'approbation CORS ne dégrade plus le canevas 2D, de sorte que le canevas 2D reste utilisable comme source d'une texture WebGL.</p>
+</div>
+
+<div class="note">
+<p><strong>Note :</strong> le support CORS pour les vidéos inter-domaines et l'attribut <code>crossorigin</code> pour les éléments {{HTMLElement ("video")}} est implémenté dans {{Gecko ("12.0")}}.</p>
+</div>
+
+<p>{{PreviousNext("Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL", "Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}</p>
diff --git a/files/fr/web/api/webgl_api/types/index.html b/files/fr/web/api/webgl_api/types/index.html
new file mode 100644
index 0000000000..8c7156a119
--- /dev/null
+++ b/files/fr/web/api/webgl_api/types/index.html
@@ -0,0 +1,167 @@
+---
+title: Types WebGL
+slug: Web/API/WebGL_API/Types
+tags:
+  - Reference
+  - Types
+  - WebGL
+translation_of: Web/API/WebGL_API/Types
+---
+<div>{{WebGLSidebar}}</div>
+
+<p>Les types suivants sont utilisés dans les interfaces <a href="/fr-FR/docs/Web/API/WebGL_API">WebGL</a>.</p>
+
+<h2 id="WebGL_1">WebGL 1</h2>
+
+<p>Ces types sont utilisés à l'intérieur d'un {{domxref("WebGLRenderingContext")}}.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Type</td>
+   <td class="header">Type Web IDL</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>GLenum</code></td>
+   <td><code>unsigned long</code></td>
+   <td>Utilisé pour les enums. Voir aussi la liste des <a href="/fr-FR/docs/Web/API/WebGL_API/Constants">constantes</a>.</td>
+  </tr>
+  <tr>
+   <td><code>GLboolean</code></td>
+   <td><code>boolean</code></td>
+   <td>Un {{jsxref("Boolean")}}.</td>
+  </tr>
+  <tr>
+   <td><code>GLbitfield</code></td>
+   <td><code>unsigned long</code></td>
+   <td>Un champ de bits stockant plusieurs bits logiques. Utilisé par exemple dans {{domxref("WebGLRenderingContext.clear()")}}.</td>
+  </tr>
+  <tr>
+   <td><code>GLbyte</code></td>
+   <td><code>byte</code></td>
+   <td>Entier signé en complément à deux sur 8 bits.</td>
+  </tr>
+  <tr>
+   <td><code>GLshort</code></td>
+   <td><code>short</code></td>
+   <td>Entier signé en complément à deux sur 16 bits.</td>
+  </tr>
+  <tr>
+   <td><code>GLint</code></td>
+   <td><code>long</code></td>
+   <td>Entier signé en complément à deux sur 32 bits.</td>
+  </tr>
+  <tr>
+   <td><code>GLsizei</code></td>
+   <td><code>long</code></td>
+   <td>Utilisé pour les tailles (par ex., la largeur et la hauteur du tampon de dessin).</td>
+  </tr>
+  <tr>
+   <td><code>GLintptr</code></td>
+   <td><code>long long</code></td>
+   <td>Type spécial pour l'arithmétique de pointeur.</td>
+  </tr>
+  <tr>
+   <td><code>GLsizeiptr</code></td>
+   <td><code>long long</code></td>
+   <td>Type spécial pour l'arithmétique de pointeur.</td>
+  </tr>
+  <tr>
+   <td><code>GLubyte</code></td>
+   <td><code>octet</code></td>
+   <td>Entier non signé en complément à deux sur 8 bits.</td>
+  </tr>
+  <tr>
+   <td><code>GLushort</code></td>
+   <td><code>unsigned short</code></td>
+   <td>Entier non signé en complément à deux sur 16 bits.</td>
+  </tr>
+  <tr>
+   <td><code>GLuint</code></td>
+   <td><code>unsigned long</code></td>
+   <td>Entier non signé en complément à deux sur 32 bits.</td>
+  </tr>
+  <tr>
+   <td><code>GLfloat</code></td>
+   <td><code>unrestricted float</code></td>
+   <td>Nombre en virgule flottante IEEE sur 32 bits.</td>
+  </tr>
+  <tr>
+   <td><code>GLclampf</code></td>
+   <td><code>unrestricted float</code></td>
+   <td>Nombre en virgule flottante IEEE sur 32 bits borné.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="WebGL_2">WebGL 2</h2>
+
+<p>Ces types sont utilisés à l'intérieur d'un {{domxref("WebGL2RenderingContext")}}. Tous les types WebGL 1 sont également utilisés.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Type</td>
+   <td class="header">Type Web IDL</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>GLint64</code></td>
+   <td><code>long long</code></td>
+   <td>Nombre entier sur 64 bits signé.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Extensions_WebGL">Extensions WebGL</h2>
+
+<p>Ces types sont utilisés à l'intérieur des <a href="/fr-FR/docs/Web/API/WebGL_API/Using_Extensions">extensions WebGL</a>.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Type</td>
+   <td class="header">Type Web IDL</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>GLuint64EXT</code></td>
+   <td><code>long long</code></td>
+   <td>Nombre entier sur 64 bits non signé.</td>
+  </tr>
+ </tbody>
+</table>
+
+<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('WebGL', "#5.1", "Types")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL2', "#3.1", "Types")}}</td>
+   <td>{{Spec2('WebGL2')}}</td>
+   <td>Définit des types supplémentaires.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('EXT_disjoint_timer_query', "", "GLuint64EXT")}}</td>
+   <td>{{Spec2('EXT_disjoint_timer_query')}}</td>
+   <td>Ajoute <code>GLuint64EXT</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglbuffer/index.html b/files/fr/web/api/webglbuffer/index.html
new file mode 100644
index 0000000000..fc663571c6
--- /dev/null
+++ b/files/fr/web/api/webglbuffer/index.html
@@ -0,0 +1,67 @@
+---
+title: WebGLBuffer
+slug: Web/API/WebGLBuffer
+tags:
+  - API
+  - Reference
+  - WebGL
+translation_of: Web/API/WebGLBuffer
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>L'interface <strong>WebGLBuffer</strong> fait partie de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> et représente un objet tampon opaque stockant des données telles que des sommets ou des couleurs.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>L'objet <code>WebGLBuffer</code> ne définit aucune méthode ou propriété en propre, et son contenu n'est pas directement accessible. Lorsque vous travaillez avec des objets <code>WebGLBuffer</code>, les méthodes suivantes du {{domxref ("WebGLRenderingContext")}} sont utiles :</p>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.bindBuffer()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.createBuffer()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.deleteBuffer()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isBuffer()")}}</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Création_d'un_tampon">Création d'un tampon</h3>
+
+<pre class="brush: js">var canevas = document.getElementById('canevas');
+var gl = canevas.getContext('webgl');
+var tampon = gl.createBuffer();
+</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('WebGL', "#5.4", "WebGLBuffer")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>
+    <p>Définition initiale.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</p>
+
+<p>{{Compat("api.WebGLBuffer")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.bindBuffer()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.createBuffer()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.deleteBuffer()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isBuffer()")}}</li>
+ <li>Autres tampons : {{domxref("WebGLFramebuffer")}}, {{domxref("WebGLRenderbuffer")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglframebuffer/index.html b/files/fr/web/api/webglframebuffer/index.html
new file mode 100644
index 0000000000..807eb9190a
--- /dev/null
+++ b/files/fr/web/api/webglframebuffer/index.html
@@ -0,0 +1,65 @@
+---
+title: WebGLFramebuffer
+slug: Web/API/WebGLFramebuffer
+tags:
+  - API
+  - Reference
+  - WebGL
+translation_of: Web/API/WebGLFramebuffer
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>L'interface <strong>WebGL Framebuffer</strong> fait partie de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> et représente une collection de tampons servant de destination de rendu.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>L'objet <code>WebGLFramebuffer</code> ne définit aucune méthode ou propriété en propre, et son contenu n'est pas directement accessible. Lorsque vous travaillez avec des objets <code>WebGLFramebuffer</code>, les méthodes suivantes du {{domxref("WebGLRenderingContext")}} sont utiles :</p>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.bindFramebuffer()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.createFramebuffer()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.deleteFramebuffer()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isFramebuffer()")}}</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Création_d'un_tampon_d'image">Création d'un tampon d'image</h3>
+
+<pre class="brush: js">var canevas = document.getElementById('canevas');
+var gl = canevas.getContext('webgl');
+var tampon = gl.createFramebuffer();
+</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('WebGL', "#5.5", "WebGLFramebuffer")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</p>
+
+<p>{{Compat("api.WebGLFramebuffer")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.bindFramebuffer()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.createFramebuffer()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.deleteFramebuffer()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isFramebuffer()")}}</li>
+ <li>Autres tampon : {{domxref("WebGLBuffer")}}, {{domxref("WebGLRenderbuffer")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglprogram/index.html b/files/fr/web/api/webglprogram/index.html
new file mode 100644
index 0000000000..1602a4efc6
--- /dev/null
+++ b/files/fr/web/api/webglprogram/index.html
@@ -0,0 +1,101 @@
+---
+title: WebGLProgram
+slug: Web/API/WebGLProgram
+tags:
+  - WebGL
+  - WebGLProgram
+translation_of: Web/API/WebGLProgram
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>Le <strong>WebGLProgram</strong> fait partie de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> et il est une combinaison de deux {{domxref ("WebGLShader")}} compilés constitués d'un shader de sommet et d'un shader de fragment (tous deux écrits en GLSL). Ces dernier sont ensuite liés dans un programme utilisable.</p>
+
+<pre class="brush: js">var programme = gl.createProgram();
+
+// Lier les shaders préexistants
+gl.attachShader(programme, shaderDeSommet);
+gl.attachShader(programme, shaderDeFragment);
+
+gl.linkProgram(programme);
+
+if ( !gl.getProgramParameter( programme, gl.LINK_STATUS) ) {
+  var info = gl.getProgramInfoLog(programme);
+  throw 'Impossible de compiler le program WebGL.\n\n' + info;
+}
+</pre>
+
+<p>Voir {{domxref("WebGLShader")}} pour des informations sur la création de <code>shaderDeSommet</code> et de <code>shaderDeFragment</code> dans le programme ci-dessus.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_du_programme">Utilisation du programme</h3>
+
+<p>Les étapes pour travailler effectivement avec le programme impliquent d'indiquer à la GPU d'utiliser le programme, de lier les données et les options de configuration appropriées, et enfin, de dessiner quelque chose à l'écran.</p>
+
+<pre class="brush: js">// Utiliser le programme
+gl.useProgram(programme);
+
+// Lier les données d'attribut existantes
+gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+gl.enableVertexAttribArray(attributeLocation);
+gl.vertexAttribPointer(attributeLocation, 3, gl.FLOAT, false, 0, 0);
+
+// Dessiner un unique triangle
+gl.drawArrays(gl.TRIANGLES, 0, 3);
+</pre>
+
+<h3 id="Suppression_du_programme">Suppression du programme</h3>
+
+<p>S'il y a une erreur lors de l'édition de liens du programme, ou si vous voulez supprimer un programme existant, alors c'est tout simple, il suffit d'exécuter {{domxref ("WebGLRenderingContext.deleteProgram()")}}. Cela libère la mémoire du programme lié.</p>
+
+<pre class="brush: js">gl.deleteProgram(programme);
+</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('WebGL', "#5.6", "WebGLProgram")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Définition initale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">La table de compatibilité dans cette page est générée à partir de données structurées. Si vous voulez contribuer aux données, jettez un œil à <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez nous une pull request.</p>
+
+<p>{{Compat("api.WebGLProgram")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WebGLShader")}}</li>
+ <li>{{domxref("WebGLRenderingContext.attachShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.compileShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.createProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.createShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.deleteProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.deleteShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.detachShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getAttachedShaders()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getProgramParameter()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getShaderParameter()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getShaderInfoLog()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getShaderSource()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.linkProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.shaderSource()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.useProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.validateProgram()")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglrenderingcontext/activer/index.html b/files/fr/web/api/webglrenderingcontext/activer/index.html
new file mode 100644
index 0000000000..4d3b41d6c0
--- /dev/null
+++ b/files/fr/web/api/webglrenderingcontext/activer/index.html
@@ -0,0 +1,145 @@
+---
+title: WebGLRenderingContext.enable()
+slug: Web/API/WebGLRenderingContext/activer
+tags:
+  - API
+  - Méthode
+  - Reference
+  - WebGL
+  - WebGLRenderingContext
+translation_of: Web/API/WebGLRenderingContext/enable
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>La méthode <code>WebGLRenderingContext.enable()</code> de l'API WebGL active des fonctionnalités WebGL particulières pour ce contexte.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var>gl</var>.enable(<em>fon</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>fon</code></dt>
+ <dd>Un {{domxref("GLenum")}} indiquant quelle fonctionnalité WebGL activer. Valeurs possibles :</dd>
+ <dd>
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col">Constante</th>
+    <th scope="col">Description</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td><code>gl.BLEND</code></td>
+    <td>Active le mélange des valeurs de couleur de fragment calculées. Voir {{domxref("WebGLRenderingContext.blendFunc()")}}.</td>
+   </tr>
+   <tr>
+    <td><code>gl.CULL_FACE</code></td>
+    <td>Active le masquage des polygones. Voir {{domxref("WebGLRenderingContext.cullFace()")}}.</td>
+   </tr>
+   <tr>
+    <td><code>gl.DEPTH_TEST</code></td>
+    <td>Active les comparaisons et les mises à jour dans le tampon de profondeur. Voir {{domxref("WebGLRenderingContext.depthFunc()")}}.</td>
+   </tr>
+   <tr>
+    <td><code>gl.DITHER</code></td>
+    <td>Active le tramage des composantes de couleur avant qu'elles ne soient écrites dans le tampon de couleur.</td>
+   </tr>
+   <tr>
+    <td><code>gl.POLYGON_OFFSET_FILL</code></td>
+    <td>Active l'ajout d'un décalage aux valeurs de profondeur des fragments de polygone. Voir {{domxref("WebGLRenderingContext.polygonOffset()")}}.</td>
+   </tr>
+   <tr>
+    <td><code>gl.SAMPLE_ALPHA_TO_COVERAGE</code></td>
+    <td>Active le calcul d'une valeur de couverture temporaire déterminée par la valeur alpha.</td>
+   </tr>
+   <tr>
+    <td><code>gl.SAMPLE_COVERAGE</code></td>
+    <td>Active le ET de la couverture des fragments avec la valeur de couverture temporaire. Voir {{domxref("WebGLRenderingContext.sampleCoverage()")}}.</td>
+   </tr>
+   <tr>
+    <td><code>gl.SCISSOR_TEST</code></td>
+    <td>Active le test de détourage qui supprime les fragments se trouvant en dehors du rectangle de détourage. Voir {{domxref("WebGLRenderingContext.scissor()")}}.</td>
+   </tr>
+   <tr>
+    <td><code>gl.STENCIL_TEST</code></td>
+    <td>Active le test et les mises à jour stencil dans le stencil buffer. Voir {{domxref("WebGLRenderingContext.stencilFunc()")}}.</td>
+   </tr>
+  </tbody>
+ </table>
+ Lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, les valeurs suivantes sont en outre disponibles :
+
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col">Constante</th>
+    <th scope="col">Description</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td><code>gl.RASTERIZER_DISCARD</code></td>
+    <td>Les primitives sont supprimées immédiatement après l'étape de rastérisation, mais après l'étape de renvoi de transformation optionnelle. Les commandes <code>gl.clear()</code> sont ignorées.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Aucune.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">gl.enable(gl.DITHER);
+</pre>
+
+<p>Pour vérifier que cette fonctionnalité est activée, utilisez la méthode {{domxref("WebGLRenderingContext.isEnabled()")}} :</p>
+
+<pre class="brush: js">gl.isEnabled(gl.DITHER);
+// 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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.14.3", "enable")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Définition initiale pour WebGL.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glEnable.xml", "glEnable")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>Page man de l'API OpenGL ES 2.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 3.0', "glEnable.xhtml", "glEnable")}}</td>
+   <td>{{Spec2('OpenGL ES 3.0')}}</td>
+   <td>Page man de l'API OpenGL ES 3.0 API.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">La table de compatibilité de cette page est générée à partir de données structurées. SI vous souhaitez contribuer aux données, merci de regarder<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.enable")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.disable()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isEnabled()")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglrenderingcontext/activetexture/index.html b/files/fr/web/api/webglrenderingcontext/activetexture/index.html
new file mode 100644
index 0000000000..4d2733b6eb
--- /dev/null
+++ b/files/fr/web/api/webglrenderingcontext/activetexture/index.html
@@ -0,0 +1,87 @@
+---
+title: WebGLRenderingContext.activeTexture()
+slug: Web/API/WebGLRenderingContext/activeTexture
+tags:
+  - API
+  - Méthode
+  - Reference
+  - WebGL
+  - WebGLRenderingContext
+translation_of: Web/API/WebGLRenderingContext/activeTexture
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>La méthode <strong><code>WebGLRenderingContext.activeTexture()</code></strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> indique quelle unité de texture doit être rendue active.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var><em>void gl</em>.activeTexture</var><var>(texture);</var>
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>texture</code></dt>
+ <dd>L'unité de texture à rendre active. La valueur est une <code>gl.TEXTURE<em>I</em></code> où <em>I</em> est dans la plage de 0 à<code>gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS - 1</code>.</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Aucune.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Si <em>texture</em> n'est pas l'une des <code>gl.TEXTURE<em>I</em></code>, où <em>I</em> est dans la plage de 0 à<code>gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS - 1</code>, une erreur <code>gl.INVALID_ENUM</code> est déclenchée.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>L'appel suivant choisit <code>gl.TEXTURE1</code> comme texture en cours. Les appels suivants qui modifient l'état de la texture affecteront cette texture.</p>
+
+<pre class="brush: js">gl.activeTexture(gl.TEXTURE1);
+</pre>
+
+<p>Le nombre d'unités de texture dépend de l'implémentation, vous pouvez obtenir ce nombre à l'aide de la constante <code>MAX_COMBINED_TEXTURE_IMAGE_UNITS</code>. Il est, de par la spécification, d'au moins 8.</p>
+
+<pre class="brush: js">gl.getParameter(gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS);
+</pre>
+
+<p>Pour obtenir la texture en cours, faire une requête sur la constante <code>ACTIVE_TEXTURE</code>.</p>
+
+<pre class="brush: js">gl.activeTexture(gl.TEXTURE0);
+gl.getParameter(gl.ACTIVE_TEXTURE);
+// retourne "33984" (0x84C0, valeur enum pour gl.TEXTURE0)
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statué</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.14.3", "activeTexture")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glActiveTexture.xml", "glActiveTexture")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>Page man de l'API OpenGL.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.activeTexture")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.getParameter()")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglrenderingcontext/attachshader/index.html b/files/fr/web/api/webglrenderingcontext/attachshader/index.html
new file mode 100644
index 0000000000..6aaac592aa
--- /dev/null
+++ b/files/fr/web/api/webglrenderingcontext/attachshader/index.html
@@ -0,0 +1,98 @@
+---
+title: WebGLRenderingContext.attachShader()
+slug: Web/API/WebGLRenderingContext/attachShader
+tags:
+  - Méthode
+  - WebGL
+translation_of: Web/API/WebGLRenderingContext/attachShader
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>La méthode <strong>WebGLRenderingContext.attachShader()</strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> attache un {{domxref("WebGLShader")}} de fragment ou de sommet à un {{domxref("WebGLProgram")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var><em>gl</em>.attach</var>Shader<var>(programme, shader);</var>
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>programme</code></dt>
+ <dd>Un {{domxref("WebGLProgram")}}.</dd>
+ <dt><code>shader</code></dt>
+ <dd>Un {{domxref("WebGLShader")}} de fragment ou de sommet.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Le code suivant attache des shaders pré-existants à un {{domxref("WebGLProgram")}}.</p>
+
+<pre class="brush: js">var programme = gl.createProgram();
+
+// Attacher des shaders pré-existants
+gl.attachShader(programme, shaderDeSommet);
+gl.attachShader(programme, shaderDeFragment);
+
+gl.linkProgram(programme);
+
+if ( !gl.getProgramParameter( programme, gl.LINK_STATUS) ) {
+  var info = gl.getProgramInfoLog(programme);
+  throw 'Impossible de compiler le program WebGL. \n\n' + info;
+}
+</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('WebGL', "#5.14.9", "attachShader")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glAttachShader.xml", "glAttachShader")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>Page man OpenGL.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">La table de compatibilité fans this page est générée à partir de données structurées. Si vous souahaitez contribuer aux données, merci de regarder sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et de nous envoyer une pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.attachShader")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WebGLProgram")}}</li>
+ <li>{{domxref("WebGLShader")}}</li>
+ <li>{{domxref("WebGLRenderingContext.attachShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.compileShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.createProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.createShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.deleteProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.deleteShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.detachShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getAttachedShaders()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getProgramParameter()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getShaderParameter()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getShaderInfoLog()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getShaderSource()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.linkProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.shaderSource()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.useProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.validateProgram()")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglrenderingcontext/bindbuffer/index.html b/files/fr/web/api/webglrenderingcontext/bindbuffer/index.html
new file mode 100644
index 0000000000..af21b2932f
--- /dev/null
+++ b/files/fr/web/api/webglrenderingcontext/bindbuffer/index.html
@@ -0,0 +1,132 @@
+---
+title: WebGLRenderingContext.bindBuffer()
+slug: Web/API/WebGLRenderingContext/bindBuffer
+tags:
+  - API
+  - Méthode
+  - Reference
+  - WebGL
+  - WebGLRenderingContext
+translation_of: Web/API/WebGLRenderingContext/bindBuffer
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>La méthode <strong><code>WebGLRenderingContext.bindBuffer()</code></strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> lie un {{domxref("WebGLBuffer")}} donné à une cible.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var>gl</var>.bindBuffer(<var>cible</var>, <var>tampon</var>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>cible</dt>
+ <dd>Un {{domxref ("GLenum")}} spécifiant le point de liaison (cible). Valeurs possibles :</dd>
+</dl>
+
+<ul>
+ <li><code>gl.ARRAY_BUFFER</code> : tampon contenant des attributs de sommet, tels que des coordonnées de vertex, des données de coordonnées de texture ou des données de couleurs de sommet ;</li>
+ <li><code>gl.ELEMENT_ARRAY_BUFFER</code> : tampon utilisé pour les indices d'éléments ;</li>
+ <li>Lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL context 2", "", 1)}}, les valeurs suivantes sont disponibles en plus :
+  <ul>
+   <li><code>gl.COPY_READ_BUFFER</code> : tampon pour la copie d'un objet tampon à un autre ;</li>
+   <li><code>gl.COPY_WRITE_BUFFER</code> : tampon pour la copie d'un objet tampon à un autre ;</li>
+   <li><code>gl.TRANSFORM_FEEDBACK_BUFFER</code> : tampon pour les opérations de retour de la transformation ;</li>
+   <li><code>gl.UNIFORM_BUFFER</code> : tampon utilisé pour stocker des blocs uniformes ;</li>
+   <li><code>gl.PIXEL_PACK_BUFFER</code> : tampon utilisé pour les opérations de transfert de pixels ;</li>
+   <li><code>gl.PIXEL_UNPACK_BUFFER</code> : tampon utilisé pour les opérations de transfert de pixels.</li>
+  </ul>
+ </li>
+</ul>
+
+<dl>
+ <dt>tampon</dt>
+ <dd>Un {{domxref ("WebGLBuffer")}} à lier.</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Aucune.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Une seule cible peut être liée à un {{domxref ("WebGLBuffer")}} donné. Une tentative de lier le tampon à une autre cible déclenchera une erreur <code>INVALID_OPERATION</code> et la liaison du tampon en cours restera la même.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Liaison_d'un_tampon_à_une_cible">Liaison d'un tampon à une cible</h3>
+
+<pre class="brush: js">var canevas = document.getElementById('canevas');
+var gl = canevas.getContext('webgl');
+var tampon = gl.createBuffer();
+
+gl.bindBuffer(gl.ARRAY_BUFFER, tampon);
+</pre>
+
+<h3 id="Récupération_des_liaisons_en_cours">Récupération des liaisons en cours</h3>
+
+<p>Pour vérifier les liaisons de tampon en cours, interrogez les constantes ARRAY_BUFFER_BINDING et ELEMENT_ARRAY_BUFFER_BINDING.</p>
+
+<pre class="brush: js">gl.getParameter(gl.ARRAY_BUFFER_BINDING);
+gl.getParameter(gl.ELEMENT_ARRAY_BUFFER_BINDING);
+</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('WebGL', "#5.14.5", "bindBuffer")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>
+    <p>Définition initiale pour WebGL.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glBindBuffer.xml", "glBindBuffer")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>Page man de l’API OpenGL ES 2 (similaire).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL2', "#3.7.1", "bindBuffer")}}</td>
+   <td>{{Spec2('WebGL2')}}</td>
+   <td>
+    <p>Définition mise à jour pour WebGL 2.</p>
+
+    <p>Ajoute de nouveaux tampons <code>cible</code> :<br>
+     <code>gl.COPY_READ_BUFFER</code>,<br>
+     <code>gl.COPY_WRITE_BUFFER</code>,<br>
+     <code>gl.TRANSFORM_FEEDBACK_BUFFER</code>,<br>
+     <code>gl.UNIFORM_BUFFER</code>,<br>
+     <code>gl.PIXEL_PACK_BUFFER</code>,<br>
+     <code>gl.PIXEL_UNPACK_BUFFER</code></p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 3.0', "glBindBuffer.xhtml", "glBindBuffer")}}</td>
+   <td>{{Spec2('OpenGL ES 3.0')}}</td>
+   <td>Page man de l’API OpenGL ES 3 (similaire).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.bindBuffer")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.createBuffer()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.deleteBuffer()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isBuffer()")}}</li>
+ <li>Autres tampons : {{domxref("WebGLFramebuffer")}}, {{domxref("WebGLRenderbuffer")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglrenderingcontext/bindtexture/index.html b/files/fr/web/api/webglrenderingcontext/bindtexture/index.html
new file mode 100644
index 0000000000..1a009bed62
--- /dev/null
+++ b/files/fr/web/api/webglrenderingcontext/bindtexture/index.html
@@ -0,0 +1,121 @@
+---
+title: WebGLRenderingContext.bindTexture()
+slug: Web/API/WebGLRenderingContext/bindTexture
+tags:
+  - API
+  - Méthode
+  - Reference
+  - Textures
+  - WebGL
+  - WebGLRenderingContext
+translation_of: Web/API/WebGLRenderingContext/bindTexture
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>La méthode <strong><code>WebGLRenderingContext.bindTexture()</code></strong> de l'API WebGL lie la {{domxref("WebGLTexture")}} donnée à une cible (point de liaison).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var>gl</var>.bindTexture(<var>cible</var>, <var>texture</var>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>cible</dt>
+ <dd>Un {{domxref ("GLenum")}} indiquant le point de liaison (cible). Valeurs possibles :
+ <ul>
+  <li><code>gl.TEXTURE_2D</code> : une texture bidimensionnelle ;</li>
+  <li><code>gl.TEXTURE_CUBE_MAP</code> : une texture mappée sur un cube ;</li>
+  <li>lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, les valeurs suivantes sont en outre disponibles :
+   <ul>
+    <li><code>gl.TEXTURE_3D</code> : une texture tridimensionnelle ;</li>
+    <li><code>gl.TEXTURE_2D_ARRAY</code> : une texture en tableau bidimensionnelle.</li>
+   </ul>
+  </li>
+ </ul>
+ </dd>
+ <dt>texture</dt>
+ <dd>Un objet {{domxref ("WebGLTexture")}} à lier.</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Aucune.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Une erreur <code>gl.INVALID_ENUM</code> est déclenchée si <code>cible</code> n'est pas <code>gl.TEXTURE_2D</code>, <code>gl.TEXTURE_CUBE_MAP</code>, <code>gl.TEXTURE_3D</code>, ou <code>gl.TEXTURE_2D_ARRAY</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Liaison_d'une_texture">Liaison d'une texture</h3>
+
+<pre class="brush: js">var canevas = document.getElementById('canevas');
+var gl = canevas.getContext('webgl');
+var texture = gl.createTexture();
+
+gl.bindTexture(gl.TEXTURE_2D, texture);
+</pre>
+
+<h3 id="Obtention_des_liaisons_en_cours">Obtention des liaisons en cours</h3>
+
+<p>Pour vérifier la liaison de texture en cours, interrogez les constantes <code>gl.TEXTURE_BINDING_2D</code> ou <code>gl.TEXTURE_BINDING_CUBE_MAP</code>.</p>
+
+<pre class="brush: js">gl.getParameter(gl.TEXTURE_BINDING_2D);
+</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('WebGL', "#5.14.8", "bindTexture")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>
+    <p>Définition initiale pour WebGL.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glBindTexture.xml", "glBindTexture")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>
+    <p>Page man de l’API OpenGL ES 2.0 (similaire).</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL2', "#3.7.1", "bindTexture")}}</td>
+   <td>{{Spec2('WebGL2')}}</td>
+   <td>Définition mise à jour pour WebGL 2.<br>
+    Ajoute : <code>gl.TEXTURE_3D</code> et  <code>gl.TEXTURE_2D_ARRAY</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 3.0', "glBindTexture.xhtml", "glBindTexture")}}</td>
+   <td>{{Spec2('OpenGL ES 3.0')}}</td>
+   <td>Page man de l’API OpenGL ES 3.0 (similaire).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request</p>
+
+<p>{{Compat("api.WebGLRenderingContext.bindTexture")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+</ul>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.createTexture()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.deleteTexture()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isTexture()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.texImage2D()")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglrenderingcontext/bufferdata/index.html b/files/fr/web/api/webglrenderingcontext/bufferdata/index.html
new file mode 100644
index 0000000000..d3fa1f224a
--- /dev/null
+++ b/files/fr/web/api/webglrenderingcontext/bufferdata/index.html
@@ -0,0 +1,163 @@
+---
+title: WebGLRenderingContext.bufferData()
+slug: Web/API/WebGLRenderingContext/bufferData
+tags:
+  - API
+  - Méthode
+  - Reference
+  - WebGL
+  - WebGLRenderingContext
+translation_of: Web/API/WebGLRenderingContext/bufferData
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>La méthode <strong><code>WebGLRenderingContext.bufferData()</code></strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> initialise et crée le magasin de données de l'objet tampon.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">// WebGL1:
+void gl.bufferData(cible, taille, utilisation);
+void gl.bufferData(cible, ArrayBuffer? donneesSrc, utilisation);
+void gl.bufferData(cible, ArrayBufferView donneesSrc, utilisation);
+
+// WebGL2:
+void gl.bufferData(cible, ArrayBufferView donneesSrc, utilisation, decalageSrc, longueur);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>cible</dt>
+ <dd>Un {{domxref ("GLenum")}} spécifiant le point de liaison (cible). Valeurs possibles :
+ <ul>
+  <li><code>gl.ARRAY_BUFFER</code> : tampon contenant des attributs de sommet, tels que des coordonnées de sommet, des données de coordonnées de texture ou des données de couleurs de sommet ;</li>
+  <li><code>gl.ELEMENT_ARRAY_BUFFER</code> : tampon utilisé pour les indices d'éléments ;</li>
+  <li>lors de l'utilisation d'un {{domxref ("WebGL2RenderingContext", "WebGL context 2", "", 1)}}, les valeurs suivantes sont en outre disponibles :
+   <ul>
+    <li><code>gl.COPY_READ_BUFFER</code> : tampon pour la copie d'un objet tampon à un autre ;</li>
+    <li><code>gl.COPY_WRITE_BUFFER</code> : tampon pour la copie d'un objet tampon à un autre ;</li>
+    <li><code>gl.TRANSFORM_FEEDBACK_BUFFER</code> : tampon pour les opérations de retour de transformation ;</li>
+    <li><code>gl.UNIFORM_BUFFER</code> : tampon utilisé pour stocker des blocs uniform ;</li>
+    <li><code>gl.PIXEL_PACK_BUFFER</code> : tampon utilisé pour les opérations de transfert de pixels ;</li>
+    <li><code>gl.PIXEL_UNPACK_BUFFER</code> : tampon utilisé pour les opérations de transfert de pixels.</li>
+   </ul>
+  </li>
+ </ul>
+ </dd>
+ <dt>taille</dt>
+ <dd>Un {{domxref("GLsizeiptr")}} définissant la taille du magasin de données de l'objet tampon.</dd>
+ <dt>donneesSrc {{optional_inline}}</dt>
+ <dd>Un {{jsxref("ArrayBuffer")}}, {{jsxref("SharedArrayBuffer")}} ou l'un des types de tableau typés {{domxref("ArrayBufferView")}} à copier dans le magasin de données. Si <code>null</code>, un magasin de données est quand même créé, mais son contenu n'est ni initialisé, ni défini.</dd>
+ <dt>utilisation</dt>
+ <dd>Un {{domxref("GLenum")}} indiquant le modèle d'utilisation du magasin de données. Valeurs possibles :
+ <ul>
+  <li><code>gl.STATIC_DRAW</code> : le contenu du tampon est susceptible d'être utilisé souvent mais de ne pas changer souvent ; du contenu est écrit dans le tampon, mais non lu ;</li>
+  <li><code>gl.DYNAMIC_DRAW</code> : le contenu du tampon est susceptible d'être souvent utilisé et de changer souvent ; du contenu est écrit dans le tampon, mais non lu ;</li>
+  <li><code>gl.STREAM_DRAW</code> : le contenu du tampon est susceptible de ne pas être utilisé souvent ; du contenu est écrit dans le tampon, mais non lu ;</li>
+  <li>lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, les valeurs suivantes the following values sont en outre disponibles :
+   <ul>
+    <li><code>gl.STATIC_READ</code> : le contenu du tampon est susceptible d'être utilisé souvent et de ne pas changer souvent ; du contenu est lu depuis le tampon, mais non écrit ;</li>
+    <li><code>gl.DYNAMIC_READ</code> : le contenu du tampon est susceptible d'être utilisé souvent et de changer souvent ; du contenu est lu depuis le tampon, mais non écrit ;</li>
+    <li><code>gl.STREAM_READ</code> : le contenu du tampon est susceptible de ne pas être utilisé souvent ; du contenu est lu depuis le tampon, mais non écrit ;</li>
+    <li><code>gl.STATIC_COPY</code> : le contenu du tampon est susceptible d'être utilisé souvent et de ne pas changer souvent ; aucun contenu n'est écrit ou lu par l'utilisateur ;</li>
+    <li><code>gl.DYNAMIC_COPY</code> : le contenu du tampon est susceptible d'être utilisé souvent et de changer souvent ; aucun contenu n'est écrit ou lu par l'utilisateur ;</li>
+    <li><code>gl.STREAM_COPY</code> : le contenu du tampon est susceptible d'être utilisé souvent et de ne pas changer souvent ; aucun contenu n'est écrit ou lu par l'utilisateur.</li>
+   </ul>
+  </li>
+ </ul>
+ </dd>
+ <dt>decalageSrc</dt>
+ <dd>Un {{domxref("GLuint")}} indiquant le décalage d'indice d'élément où commencer à lire dans le tampon.</dd>
+ <dt><code>longueur</code> {{optional_inline}}</dt>
+ <dd>Un {{domxref("GLuint")}} valant 0 par défaut.</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Aucune.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<ul>
+ <li>Une erreur <code>gl.OUT_OF_MEMORY</code> est déclenchée si le contexte ne peut pas créer un magasin de données de la <code>taille</code> indiquée.</li>
+ <li>Une erreur<code>gl.INVALID_VALUE</code> est déclenchée si <code>taille</code> est négative.</li>
+ <li>Une erreur <code>gl.INVALID_ENUM</code> est déclenchée si <code>cible</code> ou<code>utilisation</code> ne sont pas l'un des enums autorisés.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_bufferData">Utilisation de <code>bufferData</code></h3>
+
+<pre class="brush: js">var canevas = document.getElementById('canevas');
+var gl = canevas.getContext('webgl');
+var tampon = gl.createBuffer();
+gl.bindBuffer(gl.ARRAY_BUFFER, tampon);
+gl.bufferData(gl.ARRAY_BUFFER, 1024, gl.STATIC_DRAW);
+</pre>
+
+<h3 id="Récupération_de_l'information_de_tampon">Récupération de l'information de tampon</h3>
+
+<p>Pour vérifier l'utilisation du tampon en cours et la taille du tampon, utiliser la méthode {{domxref("WebGLRenderingContext.getBufferParameter()")}}.</p>
+
+<pre class="brush: js">gl.getBufferParameter(gl.ARRAY_BUFFER, gl.BUFFER_SIZE);
+gl.getBufferParameter(gl.ARRAY_BUFFER, gl.BUFFER_USAGE);
+</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('WebGL', "#5.14.5", "bufferData")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glBufferData.xml", "glBufferData")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>
+    <p>Page man de l’API OpenGL.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 3.0', "glBufferData.xhtml", "glBufferData")}}</td>
+   <td>{{Spec2('OpenGL ES 3.0')}}</td>
+   <td>
+    <p>Page man de l’API OpenGL ES 3 (similaire).</p>
+    Ajoute les noouveaux tampons <code>cible</code> :<br>
+    <code>gl.COPY_READ_BUFFER</code>,<br>
+    <code>gl.COPY_WRITE_BUFFER</code>,<br>
+    <code>gl.TRANSFORM_FEEDBACK_BUFFER</code>,<br>
+    <code>gl.UNIFORM_BUFFER</code>,<br>
+    <code>gl.PIXEL_PACK_BUFFER</code>,<br>
+    <code>gl.PIXEL_UNPACK_BUFFER</code><br>
+    <br>
+    Ajoute les nouvelles indications d'<code>utilisation</code> :<br>
+    <code>gl.STATIC_READ</code>,<br>
+    <code>gl.DYNAMIC_READ</code>,<br>
+    <code>gl.STREAM_READ</code>,<br>
+    <code>gl.STATIC_COPY</code>,<br>
+    <code>gl.DYNAMIC_COPY</code>,<br>
+    <code>gl.STREAM_COPY</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.bufferData")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.createBuffer()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.bufferSubData()")}}</li>
+ <li>Autres tampons : {{domxref("WebGLFramebuffer")}}, {{domxref("WebGLRenderbuffer")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglrenderingcontext/canevas/index.html b/files/fr/web/api/webglrenderingcontext/canevas/index.html
new file mode 100644
index 0000000000..6b7965a1d7
--- /dev/null
+++ b/files/fr/web/api/webglrenderingcontext/canevas/index.html
@@ -0,0 +1,75 @@
+---
+title: WebGLRenderingContext.canvas
+slug: Web/API/WebGLRenderingContext/canevas
+tags:
+  - Propriété
+  - WebGL
+  - WebGLRenderingContext
+  - lecture seule
+translation_of: Web/API/WebGLRenderingContext/canvas
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>La propriété <code>WebGLRenderingContext.canvas</code> est une référence en lecture seule à l'objet {{domxref("HTMLCanvasElement")}} ou {{domxref("OffscreenCanvas")}} associé au contexte. Il peut s'agir de {{jsxref("null")}} s'il n'est pas associé à un élément {{HTMLElement("canvas")}} ou à un objet {{domxref("OffscreenCanvas")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var><em>gl</em></var>.canvas;</pre>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Soit un objet {{domxref("HTMLCanvasElement")}} ou {{domxref("OffscreenCanvas")}}, soit {{jsxref("null")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Élément_canevas">Élément canevas</h3>
+
+<p>Étant donné cet élément {{HTMLElement("canvas")}} :</p>
+
+<pre class="brush: html">&lt;canvas id="canevas"&gt;&lt;/canvas&gt;
+</pre>
+
+<p>Vous pouvez en récupérer une référence à partir du <code>WebGLRenderingContext</code> en utilisant la propriété <code>canvas</code> :</p>
+
+<pre class="brush: js">var canevas = document.getElementById('canevas');
+var gl = canevas.getContext('webgl');
+gl.canvas; // HTMLCanvasElement
+</pre>
+
+<h3 id="Canevas_hors_écran">Canevas hors écran</h3>
+
+<p>Exemple d'utilisation de l'objet expérimental {{domxref("OffscreenCanvas")}}.</p>
+
+<pre class="brush: js">var horsEcran = new OffscreenCanvas(256, 256);
+var gl = horsEcran.getContext('webgl');
+gl.canvas; // OffscreenCanvas</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('WebGL', "#DOM-WebGLRenderingContext-canvas", "WebGLRenderingContext.canvas")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">La table de compatibilité de cette page est générée à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.canvas")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("CanvasRenderingContext2D.canvas")}}</li>
+ <li>{{domxref("OffscreenCanvas")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglrenderingcontext/clear/index.html b/files/fr/web/api/webglrenderingcontext/clear/index.html
new file mode 100644
index 0000000000..30ac2f90a7
--- /dev/null
+++ b/files/fr/web/api/webglrenderingcontext/clear/index.html
@@ -0,0 +1,95 @@
+---
+title: WebGLRenderingContext.clear()
+slug: Web/API/WebGLRenderingContext/clear
+tags:
+  - API
+  - Méthode
+  - Reference
+  - WebGL
+  - WebGLRenderingContext
+translation_of: Web/API/WebGLRenderingContext/clear
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>La méthode <strong><code>WebGLRenderingContext.clear()</code></strong> de <a href="/fr/docs/Web/API/WebGL_API">l'API WebGL</a> efface les tampons avec des valeurs prédéfinies.</p>
+
+<p>Ces valeurs prédéfinies peuvent être affectées par {{domxref("WebGLRenderingContext.clearColor", "clearColor()")}}, {{domxref("WebGLRenderingContext.clearDepth", "clearDepth()")}} ou {{domxref("WebGLRenderingContext.clearStencil", "clearStencil()")}}.</p>
+
+<p>Les masques d'écriture, de détourage, de tramage et de tampon peuvent affecter la méthode <code>clear()</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var>gl</var>.clear(<var>masque</var>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>masque</code></dt>
+ <dd>Un masque OU par bits {{domxref("GLbitfield")}} qui indique les tampons à effacer. Les valeurs possibles sont :
+ <ul>
+  <li><code>gl.COLOR_BUFFER_BIT</code></li>
+  <li><code>gl.DEPTH_BUFFER_BIT</code></li>
+  <li><code>gl.STENCIL_BUFFER_BIT</code></li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Aucune.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Si <em>masque</em> n'est pas l'une des valeurs possibles listées, une erreur <code>gl.INVALID_ENUM</code> est déclenchée.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>La méthode <code>clear()</code> accepte des valeurs multiples.</p>
+
+<pre class="brush: js">gl.clear(gl.DEPTH_BUFFER_BIT);
+gl.clear(gl.DEPTH_BUFFER_BIT | gl.COLOR_BUFFER_BIT);
+</pre>
+
+<p>Pour obtenir les valeurs d'effacement courantes, interrogez les constantes <code>COLOR_CLEAR_VALUE</code>, <code>DEPTH_CLEAR_VALUE</code> et <code>STENCIL_CLEAR_VALUE</code> grâce à la méthode <code>getParameter()</code>.</p>
+
+<pre class="brush: js">gl.getParameter(gl.COLOR_CLEAR_VALUE);
+gl.getParameter(gl.DEPTH_CLEAR_VALUE);
+gl.getParameter(gl.STENCIL_CLEAR_VALUE);
+</pre>
+
+<h2 id="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('WebGL', "#5.14.11", "clear")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glClear.xml", "glClear")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>Page man de l'API OpenGL.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cetee page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, regardez<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.clear")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.clearColor()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.clearDepth()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.clearStencil()")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglrenderingcontext/compileshader/index.html b/files/fr/web/api/webglrenderingcontext/compileshader/index.html
new file mode 100644
index 0000000000..4ed08424b7
--- /dev/null
+++ b/files/fr/web/api/webglrenderingcontext/compileshader/index.html
@@ -0,0 +1,87 @@
+---
+title: WebGLRenderingContext.compileShader()
+slug: Web/API/WebGLRenderingContext/compileShader
+tags:
+  - API
+  - Méthode
+  - Reference
+  - WebGL
+  - WebGLRenderingContext
+translation_of: Web/API/WebGLRenderingContext/compileShader
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>La méthode <strong>WebGLRenderingContext.compileShader()</strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> compile un shader GLSL en données binaires, de sorte qu'il puisse être utilisé par un {{domxref("WebGLProgram")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var><em>gl</em>.compileShader</var><var>(shader);</var>
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>shader</code></dt>
+ <dd>Un {{domxref("WebGLShader")}} de fragments ou de sommets.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var shader = gl.createShader(gl.VERTEX_SHADER);
+gl.shaderSource(shader, sourceShader);
+gl.compileShader(shader);
+</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('WebGL', "#5.14.9", "compileShader")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glCompileShader.xml", "glCompileShader")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>Page man OpenGL.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurée. Si vous souhaitez contribuer eux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.compileShader")}}</p>
+
+<h2 id="Voire_aussi">Voire aussi</h2>
+
+<ul>
+ <li>{{domxref("WebGLProgram")}}</li>
+ <li>{{domxref("WebGLShader")}}</li>
+ <li>{{domxref("WebGLRenderingContext.attachShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.createProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.createShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.deleteProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.deleteShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.detachShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getAttachedShaders()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getProgramParameter()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getShaderParameter()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getShaderInfoLog()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getShaderSource()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.linkProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.shaderSource()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.useProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.validateProgram()")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglrenderingcontext/createbuffer/index.html b/files/fr/web/api/webglrenderingcontext/createbuffer/index.html
new file mode 100644
index 0000000000..90ed1bac1e
--- /dev/null
+++ b/files/fr/web/api/webglrenderingcontext/createbuffer/index.html
@@ -0,0 +1,77 @@
+---
+title: WebGLRenderingContext.createBuffer()
+slug: Web/API/WebGLRenderingContext/createBuffer
+tags:
+  - API
+  - Méthode
+  - Reference
+  - WebGL
+  - WebGLRenderingContext
+translation_of: Web/API/WebGLRenderingContext/createBuffer
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>La méthode <strong><code>WebGLRenderingContext.createBuffer() </code></strong>de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> crée et initialise un {{domxref ("WebGLBuffer")}} stockant des données telles que des sommets ou des couleurs.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">WebGLBuffer <var>gl</var>.createBuffer();
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Aucun.</p>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Un {{domxref("WebGLBuffer")}} stockant des données telles que des sommets ou des couleurs.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Création_d'un_tampon">Création d'un tampon</h3>
+
+<pre class="brush: js">var canevas = document.getElementById('canevas');
+var gl = canevas.getContext('webgl');
+var tampon = gl.createBuffer();
+</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('WebGL', "#5.14.5", "createBuffer")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>
+    <p>Définition initiale.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glGenBuffers.xml", "glGenBuffers")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>
+    <p>Page man de l’API OpenGL (similaire).</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.createBuffer")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.bindBuffer()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.deleteBuffer()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isBuffer()")}}</li>
+ <li>Autres tampons : {{domxref("WebGLFramebuffer")}}, {{domxref("WebGLRenderbuffer")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglrenderingcontext/createprogram/index.html b/files/fr/web/api/webglrenderingcontext/createprogram/index.html
new file mode 100644
index 0000000000..2cf95743c7
--- /dev/null
+++ b/files/fr/web/api/webglrenderingcontext/createprogram/index.html
@@ -0,0 +1,87 @@
+---
+title: WebGLRenderingContext.createProgram()
+slug: Web/API/WebGLRenderingContext/createProgram
+tags:
+  - API
+  - Méthode
+  - Reference
+  - WebGL
+  - WebGLRenderingContext
+translation_of: Web/API/WebGLRenderingContext/createProgram
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>La méthode <code><strong>WebGLRenderingContext.createProgram()</strong></code> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> crée et initialise un objet {{domxref("WebGLProgram")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">WebGLProgram <var>gl</var>.createProgram();
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Aucun.</p>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Un objet {{domxref("WebGLProgram")}} qui est une combinaison de deux {{domxref("WebGLShader")}}s compilés, constitués d'un shader de sommet et d'un shader de fragment (tous deux écrits en GLSL). Ceux-ci sont ensuite liés en un programme utilisable.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Création_d'un_programme_WebGL">Création d'un programme WebGL</h3>
+
+<pre class="brush: js">var programme = gl.createProgram();
+
+// Attacher les shaders pré-existants
+gl.attachShader(programme, shaderDeSommet);
+gl.attachShader(programme, shaderDeFragment);
+
+gl.linkProgram(programme);
+
+if ( !gl.getProgramParameter( programme, gl.LINK_STATUS) ) {
+  var info = gl.getProgramInfoLog(program);
+  throw 'Impossible de compiler le programme WebGL. \n\n' + info;
+}
+</pre>
+
+<p>Voir {{domxref ("WebGLShader")}} pour plus d'informations sur la création du <code>shaderDeSommet</code> et du <code>shaderDeFragment</code> dans l'exemple ci-dessus.</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('WebGL', "#5.14.9", "createProgram")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glCreateProgram.xml", "glCreateProgram")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>Page man de l'API OpenGL (similaire).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.createProgram")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.deleteProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.linkProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.useProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.validateProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getProgramParameter()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglrenderingcontext/createshader/index.html b/files/fr/web/api/webglrenderingcontext/createshader/index.html
new file mode 100644
index 0000000000..2d6f836232
--- /dev/null
+++ b/files/fr/web/api/webglrenderingcontext/createshader/index.html
@@ -0,0 +1,87 @@
+---
+title: WebGLRenderingContext.createShader()
+slug: Web/API/WebGLRenderingContext/createShader
+tags:
+  - API
+  - Graphiques
+  - Méthode
+  - Reference
+  - Shader
+  - WebGL
+translation_of: Web/API/WebGLRenderingContext/createShader
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>La méthode <strong>WebGLRenderingContext.createShader() de l'</strong><a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> crée un {{domxref("WebGLShader")}}, qui peut alors être configuré davantage en utilisant {{domxref("WebGLRenderingContext.shaderSource()")}} et {{domxref("WebGLRenderingContext.compileShader()")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">WebGLShader <var><em>gl</em>.</var>createShader<var>(type);</var>
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>type</code></dt>
+ <dd>Soit <code>gl.VERTEX_SHADER</code>, soit <code>gl.FRAGMENT_SHADER</code></dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Voir {{domxref("WebGLShader")}} pour l'utilisation et des exemples.</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('WebGL', "#5.14.9", "createShader")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glCreateShader.xml", "glCreateShader")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>Page man OpenGL.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.createShader")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WebGLProgram")}}</li>
+ <li>{{domxref("WebGLShader")}}</li>
+ <li>{{domxref("WebGLRenderingContext.attachShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.bindAttribLocation()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.compileShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.createProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.createShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.deleteProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.deleteShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.detachShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getAttachedShaders()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getProgramParameter()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getShaderParameter()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getShaderInfoLog()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getShaderSource()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.linkProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.shaderSource()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.useProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.validateProgram()")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglrenderingcontext/createtexture/index.html b/files/fr/web/api/webglrenderingcontext/createtexture/index.html
new file mode 100644
index 0000000000..a2ea8939ab
--- /dev/null
+++ b/files/fr/web/api/webglrenderingcontext/createtexture/index.html
@@ -0,0 +1,78 @@
+---
+title: WebGLRenderingContext.createTexture()
+slug: Web/API/WebGLRenderingContext/createTexture
+tags:
+  - API
+  - Méthode
+  - Reference
+  - Textures
+  - WebGL
+  - WebGLRenderingContext
+translation_of: Web/API/WebGLRenderingContext/createTexture
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>La méthode <strong><code>WebGLRenderingContext.createTexture()</code></strong> de l'API WebGL crée et initialise un objet {{domxref("WebGLTexture")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">WebGLTexture <var>gl</var>.createTexture();
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Aucun.</p>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Un objet {{domxref("WebGLTexture")}} auquel des images peuvent être liées.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Voir aussi le <a href="/fr-FR/docs/Web/API/WebGL_API/Tutorial">tutoriel WebGL</a> sur l'<a href="/fr-FR/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL">Utilisation de textures en WebGL</a>.</p>
+
+<h3 id="Création_d'une_texture">Création d'une texture</h3>
+
+<pre class="brush: js">var canevas = document.getElementById('canevas');
+var gl = canevas.getContext('webgl');
+var texture = gl.createTexture();
+</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('WebGL', "#5.14.8", "createTexture")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>
+    <p>Définition initiale.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glGenTextures.xml", "glGenTextures")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>Page man de l’API OpenGL (similaire).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.createTexture")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.bindTexture()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.deleteTexture()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isTexture()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.texImage2D()")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglrenderingcontext/deletebuffer/index.html b/files/fr/web/api/webglrenderingcontext/deletebuffer/index.html
new file mode 100644
index 0000000000..a7bc9b857a
--- /dev/null
+++ b/files/fr/web/api/webglrenderingcontext/deletebuffer/index.html
@@ -0,0 +1,79 @@
+---
+title: WebGLRenderingContext.deleteBuffer()
+slug: Web/API/WebGLRenderingContext/deleteBuffer
+tags:
+  - API
+  - Méthode
+  - Reference
+  - WebGL
+  - WebGLRenderingContext
+translation_of: Web/API/WebGLRenderingContext/deleteBuffer
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>La méthode <strong><code>WebGLRenderingContext.deleteBuffer()</code></strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> supprime le {{domxref ("WebGLBuffer")}} indiqué. Cette méthode n'a aucun effet si le tampon a déjà été supprimé.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var>gl</var>.deleteBuffer(<em>tampon</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>tampon</dt>
+ <dd>Un objet {{domxref("WebGLBuffer")}} à supprimer.</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Aucune.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Suppression_d'un_tampon">Suppression d'un tampon</h3>
+
+<pre class="brush: js">var canevas = document.getElementById('canevas');
+var gl = canevas.getContext('webgl');
+var tampon = gl.createBuffer();
+
+// ...
+
+gl.deleteBuffer(tampon);</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('WebGL', "#5.14.5", "deleteBuffer")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glDeleteBuffers.xml", "glDeleteBuffers")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>Page man de l’API OpenGL (similaire).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.deleteBuffer")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.bindBuffer()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.createBuffer()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isBuffer()")}}</li>
+ <li>Autres tampons : {{domxref("WebGLFramebuffer")}}, {{domxref("WebGLRenderbuffer")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglrenderingcontext/deleteshader/index.html b/files/fr/web/api/webglrenderingcontext/deleteshader/index.html
new file mode 100644
index 0000000000..935c400d56
--- /dev/null
+++ b/files/fr/web/api/webglrenderingcontext/deleteshader/index.html
@@ -0,0 +1,72 @@
+---
+title: WebGLRenderingContext.deleteShader()
+slug: Web/API/WebGLRenderingContext/deleteShader
+tags:
+  - API
+  - Méthode
+  - Reference
+  - WebGL
+  - WebGLRenderingContext
+translation_of: Web/API/WebGLRenderingContext/deleteShader
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>La méthode <strong><code>WebGLRenderingContext.deleteShader()</code></strong> de l'API WebGL marque l'objet {{domxref("WebGLShader")}} indiqué pour suppression. Il sera ensuite supprimé dès que le shader ne sera plus utilisé. Cette méthode n'a aucun effet si le shader a déjà été supprimé, et le {{domxref ("WebGLShader")}} est automatiquement marqué pour la suppression lorsqu'il est détruit par le garbage collector.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var>gl</var>.deleteShader(<var>shader</var>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>shader</dt>
+ <dd>Un objet {{domxref("WebGLShader")}} à détruire.</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Aucune.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Suppression_d'un_shader">Suppression d'un shader</h3>
+
+<pre class="brush: js">gl.deleteShader(shader);</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('WebGL', "#5.14.9", "deleteShader")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glDeleteShader.xml", "glDeleteShader")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>Page man de l'API OpenGL (similaire).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tbleau de compatibilité de cette page est généré à partir de données structurée. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez nous une pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.deleteShader")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.createShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getAttachedShaders()")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglrenderingcontext/drawarrays/index.html b/files/fr/web/api/webglrenderingcontext/drawarrays/index.html
new file mode 100644
index 0000000000..7822633a54
--- /dev/null
+++ b/files/fr/web/api/webglrenderingcontext/drawarrays/index.html
@@ -0,0 +1,101 @@
+---
+title: WebGLRenderingContext.drawArrays()
+slug: Web/API/WebGLRenderingContext/drawArrays
+tags:
+  - API
+  - Méthode
+  - Reference
+  - WebGL
+  - WebGLRenderingContext
+translation_of: Web/API/WebGLRenderingContext/drawArrays
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>La méthode <strong><code>WebGLRenderingContext.drawArrays()</code></strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> dessine des primitives à partir de données tabulaires.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var>gl</var>.drawArrays(<var>mode</var>, <em>premier</em>, <var>compte</var>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>mode</code></dt>
+ <dd>Un {{domxref ("GLenum")}} indiquant la primitive de type à dessiner. Les valeurs possibles sont :
+ <ul>
+  <li><code>gl.POINTS</code> : dessine un seul point ;</li>
+  <li><code>gl.LINE_STRIP</code> : dessine une ligne droite jusqu'au sommet suivant ;</li>
+  <li><code>gl.LINE_LOOP</code> : dessine une ligne droite jusqu'au sommet suivant, et relie le dernier sommet au premier ;</li>
+  <li><code>gl.LINES</code> : dessine une ligne entre une paire de sommets ;</li>
+  <li><code><a href="https://en.wikipedia.org/wiki/Triangle_strip">gl.TRIANGLE_STRIP</a></code></li>
+  <li><code><a href="https://en.wikipedia.org/wiki/Triangle_fan">gl.TRIANGLE_FAN</a></code></li>
+  <li><code>gl.TRIANGLES</code> : dessine un triangle pour un groupe de trois sommets.</li>
+ </ul>
+ </dd>
+ <dt><code>premier</code></dt>
+ <dd>Un {{domxref("GLint")}} indiquant de l'indice de départ dans le tableau des points des vecteurs.</dd>
+ <dt><code>compte</code></dt>
+ <dd>Un {{domxref("GLsizei")}} indiquant le nombre d'indices à dessiner.</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>None.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<ul>
+ <li>Si <code>mode</code> n'est pas l'une des valeurs acceptables, une erreur <code>gl.INVALID_ENUM</code> est déclenchée.</li>
+ <li>Si <code>premier</code> ou <code>compte</code> sont négatifs, une erreur <code>gl.INVALID_VALUE</code> est déclenchée.</li>
+ <li>Si <code>gl.CURRENT_PROGRAM</code> est {{jsxref("null")}}, une erreur <code>gl.INVALID_OPERATION</code> est déclenchée.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">gl.drawArrays(gl.POINTS, 0, 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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.14.11", "drawArrays")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>
+    <p> </p>
+    Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glDrawArrays.xml", "glDrawArrays")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>
+    <p>Page man de l’API OpenGL.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.drawArrays")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.drawElements()")}}</li>
+ <li>{{domxref("ANGLE_instanced_arrays.drawArraysInstancedANGLE()", "ext.drawArraysInstancedANGLE()")}}</li>
+ <li>{{domxref("ANGLE_instanced_arrays.drawElementsInstancedANGLE()", "ext.drawElementsInstancedANGLE()")}}</li>
+ <li>{{domxref("ANGLE_instanced_arrays.vertexAttribDivisorANGLE()", "ext.vertexAttribDivisorANGLE()")}}</li>
+ <li>{{domxref("WebGL2RenderingContext.drawArraysInstanced()")}}</li>
+ <li>{{domxref("WebGL2RenderingContext.drawElementsInstanced()")}}</li>
+ <li>{{domxref("WebGL2RenderingContext.vertexAttribDivisor()")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglrenderingcontext/enablevertexattribarray/index.html b/files/fr/web/api/webglrenderingcontext/enablevertexattribarray/index.html
new file mode 100644
index 0000000000..c9fca5e6f6
--- /dev/null
+++ b/files/fr/web/api/webglrenderingcontext/enablevertexattribarray/index.html
@@ -0,0 +1,123 @@
+---
+title: WebGLRenderingContext.enableVertexAttribArray()
+slug: Web/API/WebGLRenderingContext/enableVertexAttribArray
+tags:
+  - 3D
+  - API
+  - API WebGL
+  - Attributs des Sommets
+  - Graphiques
+  - Méthode
+  - Reference
+  - Tableau des Attributs
+  - WebGL
+  - WebGLRenderingContext
+  - enableVertexAttribArray
+  - shader de sommet
+  - sommet
+translation_of: Web/API/WebGLRenderingContext/enableVertexAttribArray
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>La méthode {{domxref ("WebGLRenderingContext")}} <strong><code>enableVertexAttribArray()</code> -</strong> qui fait partie de l'API WebGL - active le tableau générique des attributs de sommet à l'indice spécifié dans la liste des tableaux d'attributs.</p>
+
+<div class="note">
+<p>Vous pouvez désactiver le tableau d'attributs en appelant {{domxref("WebGLRenderingContext.disableVertexAttribArray", "disableVertexAttribArray()")}}.</p>
+</div>
+
+<p>Dans WebGL, les valeurs s'appliquant à un sommet particulier sont stockées dans des attributs. Ceux-ci ne sont disponibles que pour le code JavaScript et le shader de sommet. Les attributs sont référencés par un numéro d'indice dans la liste des attributs gérés par la GPU. Certains indices d'attributs de sommet peuvent avoir des buts prédéfinis, suivant la plate-forme et/ou la GPU. D'autres sont affectés par la couche WebGL lorsque vous créez les attributs.</p>
+
+<p>De toute façon, puisque les attributs ne peuvent pas être utilisés sauf s'ils sont activés, et ils sont activés par défaut, vous devez appeler <code>enableVertexAttribArray()</code> pour activer les attributs individuels, afin qu'ils puissent être utilisés. Ceci fait, d'autres méthodes peuvent être utilisées pour accéder à l'attribut, y compris {{domxref("WebGLRenderingContext.vertexAttribPointer", "vertexAttribPointer()")}}, {{domxref("WebGLRenderingContext.vertexAttrib", "vertexAttrib*()")}}, et {{domxref("WebGLRenderingContext.getVertexAttrib"," getVertexAttrib()")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var>gl</var>.enableVertexAttribArray(<var>indice</var>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>indice</code></dt>
+ <dd>Un {{domxref("GLuint")}} indiquant le numéro d'indice identifiant de façon unique l'attribut de sommet à activer. Si vous connaissez le nom de l'attribut mais pas son indice, vous pouvez obtenir l'indice en appelant {{domxref ("WebGLRenderingContext.getAttribLocation", "getAttribLocation()")}}.</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p><code>undefined</code>.</p>
+
+<h3 id="Erreurs">Erreurs</h3>
+
+<p>Pour vérifier d'éventuelles erreurs  après l'appel à <code>enableVertexAttribArray()</code>, appelez {{domxref("WebGLRenderingContext.getError", "getError()")}}.</p>
+
+<dl>
+ <dt><code>WebGLRenderingContext.INVALID_VALUE</code></dt>
+ <dd>L'<code>indice</code> spécifié est invalide, c'est-à-dire qu'il est supérieur ou égal au nombre maximal d'entrées autorisées dans la liste des attributs de sommet du contexte, comme indiqué par la valeur de <code>WebGLRenderingContext.MAX_VERTEX_ATTRIBS</code>.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Ce code — un extrait de l'exemple complet <a href="/fr-FR/docs/Web/API/WebGL_API/Basic_2D_animation_example">Un exemple d'animation 2D WebGL de base</a> — montre l'utilisation de <code>enableVertexArray()</code> pour activer l'attribut qui sera utilisé par la couche WebGL pour passer des sommets individuels depuis le tampon des sommets à la fonction shader de sommet.</p>
+
+<pre class="brush: js highlight[6]">gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
+
+aVertexPosition =
+    gl.getAttribLocation(programmeShader, "aVertexPosition");
+
+gl.enableVertexAttribArray(aVertexPosition);
+gl.vertexAttribPointer(aVertexPosition, vertexNumComponents,
+      gl.FLOAT, false, 0, 0);
+
+gl.drawArrays(gl.TRIANGLES, 0, vertexCount);</pre>
+
+<div class="callout-box">Cet extrait de code provient de <a href="/fr-FR/docs/Web/API/WebGL_API/Basic_2D_animation_example#Drawing_and_animating_the_scene">la fonction animateScene()</a> dans "Un exemple d'animation WebGL 2D de base". Voir cet article pour l'exemple complet et pour voir l'animation résultante en action.</div>
+
+<p> </p>
+
+<p>Ce code définit le tampon des sommets qui sera utilisé pour dessiner les triangles de la forme en appelant {{domxref("WebGLRenderingContext.bindBuffer", "bindBuffer()")}}. Ensuite, l'indice de l'attribut de position des sommets est obtenu à partir du programme shader en appelant {{domxref("WebGLRenderingContext.getAttribLocation", "getAttribLocation()")}}.</p>
+
+<p>Avec l'indice de l'attribut de position des sommets maintenant disponible dans <code>aVertexPosition</code>, nous appelons <code>enableVertexAttribArray()</code> pour activer l'attribut de position afin qu'il puisse être utilisé par le programme shader (en particulier, par le shader de sommet).</p>
+
+<p>Le tampon des sommets est alors lié à l'attribut <code>aVertexPosition</code> en appelant {{domxref("WebGLRenderingContext.vertexAttribPointer", "vertexAttribPointer()")}}. Cette étape n'est pas évidente, puisque cette liaison est presque un effet de biais. Mais cela a pour résultat qu'un accès à <code>aVertexPosition</code> récupére désormais des données à partir du tampon des sommets.</p>
+
+<p>Avec l'association définie entre le tampon des sommets de notre forme et l'attribut <code>aVertexPosition</code> utilisé pour fournir les sommets un par un dans le shader de sommet, nous sommes prêts à dessiner la forme en appelant {{domxref ("WebGLRenderingContext.drawArrays", "drawArrays()")}}.</p>
+
+<p> </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('WebGL', "#5.14.10", "enableVertexAttribArray")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glEnableVertexAttribArray.xml", "glEnableVertexAttribArray")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>
+    <p>Page man de l’API OpenGL.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.enableVertexAttribArray")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr-FR/docs/Web/API/WebGL_API/Data">Données en WebGL</a></li>
+ <li><a href="/fr-FR/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context">Ajout de contenu 2D à un contexte WebGL</a></li>
+ <li><a href="/fr-FR/docs/Web/API/WebGL_API/Basic_2D_animation_example">Un exemple d'animation WebGL 2D de base</a></li>
+ <li>{{domxref("WebGLRenderingContext.disableVertexAttribArray", "disableVertexAttribArray()")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglrenderingcontext/generatemipmap/index.html b/files/fr/web/api/webglrenderingcontext/generatemipmap/index.html
new file mode 100644
index 0000000000..cd07f92c21
--- /dev/null
+++ b/files/fr/web/api/webglrenderingcontext/generatemipmap/index.html
@@ -0,0 +1,93 @@
+---
+title: WebGLRenderingContext.generateMipmap()
+slug: Web/API/WebGLRenderingContext/generateMipmap
+tags:
+  - API
+  - Méthode
+  - Reference
+  - Textures
+  - WebGL
+  - WebGLRenderingContext
+translation_of: Web/API/WebGLRenderingContext/generateMipmap
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>La méthode <strong><code>WebGLRenderingContext.generateMipmap()</code></strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> génère un ensemble de mipmaps pour un objet {{domxref("WebGLTexture")}}.</p>
+
+<p>Les mipmaps sont utilisées pour créer de la distance avec des objets. Une mipmap de haute résolution est utilisée pour les objets qui sont proches, et une mipmap de résolution inférieure est utilisée pour les objets qui sont plus éloignés. Elles commencent avec la résolution de l'image de texture, puis la résolution est divisée par deux jusqu'à ce qu'une image de texture de dimension 1x1 soit créée.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var>gl</var>.generateMipmap(<em>cible</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>cible</dt>
+ <dd>Un {{domxref("GLenum")}} indiquant le point de liaison (cible) de la texture active dont les mipmaps seront générées. Valeurs possibles :
+ <ul>
+  <li><code>gl.TEXTURE_2D</code> : une  texture bi-dimensionnelle.</li>
+  <li><code>gl.TEXTURE_CUBE_MAP</code> : une texture appliquée sur un cube.</li>
+  <li>Lorsqu'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}} est utilisé, les valeurs suivantes sont en outre disponibles :
+   <ul>
+    <li><code>gl.TEXTURE_3D</code> : une texture tri-dimensionnelle.</li>
+    <li><code>gl.TEXTURE_2D_ARRAY</code> : une texture bi-dimensionnelle en tableau.</li>
+   </ul>
+  </li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Aucune.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">gl.generateMipmap(gl.TEXTURE_2D);
+</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('WebGL', "#5.14.8", "generateMipmap")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Définition initiale pour WebGL.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glGenerateMipmap.xml", "glGenerateMipmap")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>Page man de l'API (similaire) d'OpenGL ES 2.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 3.0', "glGenerateMipmap.xhtml", "glGenerateMipmap")}}</td>
+   <td>{{Spec2('OpenGL ES 3.0')}}</td>
+   <td>Page man de l'API (similaire) d'OpenGL ES 3.0<br>
+    Ajoute : <code>gl.TEXTURE_3D</code> et <code>gl.TEXTURE_2D_ARRAY</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.generateMipmap")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.createTexture()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.bindTexture()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getTexParameter()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.texParameter", "WebGLRenderingContext.texParameterf()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.texParameter", "WebGLRenderingContext.texParameteri()")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglrenderingcontext/getattriblocation/index.html b/files/fr/web/api/webglrenderingcontext/getattriblocation/index.html
new file mode 100644
index 0000000000..a5977cc61f
--- /dev/null
+++ b/files/fr/web/api/webglrenderingcontext/getattriblocation/index.html
@@ -0,0 +1,71 @@
+---
+title: WebGLRenderingContext.getAttribLocation()
+slug: Web/API/WebGLRenderingContext/getAttribLocation
+tags:
+  - API
+  - Méthode
+  - Reference
+  - WebGL
+  - WebGLRenderingContext
+translation_of: Web/API/WebGLRenderingContext/getAttribLocation
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>La méthode <strong><code>WebGLRenderingContext.getAttribLocation()</code></strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> retourne l'emplacement d'une variable d'attribut dans le {{domxref("WebGLProgram")}} indiqué.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">GLint <var>gl</var>.getAttribLocation(<var>programme</var>, <var>nom</var>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>programme</dt>
+ <dd>Un {{domxref("WebGLProgram")}} contenant la variable d'attribut.</dd>
+ <dt>nom</dt>
+ <dd>Un {{domxref("DOMString")}} indiquant le nom de la variable d'attribut dont l'emplacement est à retourner.</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Un nombre {{domxref("GLint")}} indiquant l'emplacement du nom de la variable si trouvé. Retourne -1 sinon.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">gl.getAttribLocation(programme, 'vColor');
+</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('WebGL', "#5.14.10", "getAttribLocation")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glGetAttribLocation.xml", "glGetAttribLocation")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>Page principale de l'API OpenGL.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.getAttribLocation")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.getUniformLocation()")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglrenderingcontext/geterror/index.html b/files/fr/web/api/webglrenderingcontext/geterror/index.html
new file mode 100644
index 0000000000..aca512ff06
--- /dev/null
+++ b/files/fr/web/api/webglrenderingcontext/geterror/index.html
@@ -0,0 +1,107 @@
+---
+title: WebGLRenderingContext.getError()
+slug: Web/API/WebGLRenderingContext/getError
+tags:
+  - API
+  - Méthode
+  - Reference
+  - WebGL
+  - WebGLRenderingContext
+translation_of: Web/API/WebGLRenderingContext/getError
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>La méthode <strong><code>WebGLRenderingContext.getError()</code></strong> de l'<a href="/fr-Fr/docs/Web/API/WebGL_API">API WebGL</a> retourne des informations d'erreur.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">GLenum <var>gl</var>.getError();
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Aucun.</p>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Constante</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>gl.NO_ERROR</code></td>
+   <td>Aucune erreur n'a été enregistrée. La valeur de cette constante est 0.</td>
+  </tr>
+  <tr>
+   <td><code>gl.INVALID_ENUM</code></td>
+   <td>Une valeur non acceptable a été spécifiée pour un argument énuméré. La commande est ignorée et l'indicateur d'erreur est positionné.</td>
+  </tr>
+  <tr>
+   <td><code>gl.INVALID_VALUE</code></td>
+   <td>Un argument numérique est hors de sa plage. La commande est ignorée et l'indicateur d'erreur est positionné.</td>
+  </tr>
+  <tr>
+   <td><code>gl.INVALID_OPERATION</code></td>
+   <td>La commande indiquée n'est pas permise dans l'état courant. La commande est ignorée et l'indicateur d'erreur est positionné.</td>
+  </tr>
+  <tr>
+   <td><code>gl.INVALID_FRAMEBUFFER_OPERATION</code></td>
+   <td>Le tampon d'images actuellement lié n'est pas complet lors d'une tentative de rendu ou de relecture.</td>
+  </tr>
+  <tr>
+   <td><code>gl.OUT_OF_MEMORY</code></td>
+   <td>Plus assez de mémoire restante pour exécuter la commande.</td>
+  </tr>
+  <tr>
+   <td><code>gl.CONTEXT_LOST_WEBGL</code></td>
+   <td>Si le contexte WebGL est perdu, cette erreur est retournée lors du premier appel à <code>getError</code>. Après cela et jusqu'à ce que le contexte soit restauré, elle retourne <code>gl.NO_ERROR</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">gl.getError(); // gl.NO_ERROR (0)
+
+gl.enable(gl.MACHINTRUC);
+gl.getError(); // gl.INVALID_ENUM;
+</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('WebGL', "#5.14.3", "getError")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glGetError.xml", "glGetError")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>Page man de l'API OpenGL.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité dans cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.getError")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext")}}</li>
+ <li>{{domxref("WebGLContextEvent")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglrenderingcontext/getshaderparameter/index.html b/files/fr/web/api/webglrenderingcontext/getshaderparameter/index.html
new file mode 100644
index 0000000000..8d5b2d3599
--- /dev/null
+++ b/files/fr/web/api/webglrenderingcontext/getshaderparameter/index.html
@@ -0,0 +1,77 @@
+---
+title: WebGLRenderingContext.getShaderParameter()
+slug: Web/API/WebGLRenderingContext/getShaderParameter
+tags:
+  - API
+  - Méthode
+  - Reference
+  - WebGL
+  - WebGLRenderingContext
+translation_of: Web/API/WebGLRenderingContext/getShaderParameter
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>La méthode <code>WebGLRenderingContext.getShaderParameter()</code> de l'API WebGL retourne des informations sur le shader donné.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">quelconque <var>gl</var>.getShaderParameter(<var>shader</var>, <var>nomp</var>);
+</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt>shader</dt>
+ <dd>Un {{domxref("WebGLShader")}} depuis lequel obtenir une information de paramètre.</dd>
+ <dt>nomp</dt>
+ <dd>Un {{domxref("Glenum")}} indiquant l'information à retrouver. Valeurs possibles :
+ <ul>
+  <li><code>gl.DELETE_STATUS</code> : retourne un {{domxref("GLboolean")}} indicating si le shader est marqué pour suppression ou non.</li>
+  <li><code>gl.COMPILE_STATUS</code> : retourne un {{domxref("GLboolean")}} indiquant si la dernière compilation du shader a réussi ou non.</li>
+  <li><code>gl.SHADER_TYPE</code> : retourne un {{domxref("GLenum")}} indiquant si le shader est un objet shader de sommets (<code>gl.VERTEX_SHADER</code>) ou shader de fragment (<code>gl.FRAGMENT_SHADER</code>).</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Retourne l'information de shader demandée (telle qu'indiquée par <code>nomp</code>).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">gl.getShaderParameter(shader, gl.SHADER_TYPE);
+</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('WebGL', "#5.14.9", "getShaderParameter")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glGetShaderiv.xml", "glGetShaderiv")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>Page man de l'API OpenGL (similaire).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité dans cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez nous une pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.getShaderParameter")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.getProgramParameter()")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglrenderingcontext/gettexparameter/index.html b/files/fr/web/api/webglrenderingcontext/gettexparameter/index.html
new file mode 100644
index 0000000000..ecce9e54ee
--- /dev/null
+++ b/files/fr/web/api/webglrenderingcontext/gettexparameter/index.html
@@ -0,0 +1,201 @@
+---
+title: WebGLRenderingContext.getTexParameter()
+slug: Web/API/WebGLRenderingContext/getTexParameter
+tags:
+  - API
+  - Méthode
+  - Reference
+  - Textures
+  - WebGL
+  - WebGLRenderingContext
+translation_of: Web/API/WebGLRenderingContext/getTexParameter
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>La méthode <strong><code>WebGLRenderingContext.getTexParameter()</code></strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> retourne des informations concernant la texture indiquée.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">quelconque <var>gl</var>.getTexParameter(<var>cible</var>, <var>nomp</var>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>cible</dt>
+ <dd>Un {{domxref("GLenum")}} indiquant le point de liaison (cible). Valeurs possibles :
+ <ul>
+  <li><code>gl.TEXTURE_2D</code> : une texture bi-dimensionnelle.</li>
+  <li><code>gl.TEXTURE_CUBE_MAP</code> : une texture appliquée à un cube.</li>
+  <li>Lorsqu' un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}} est utilisé, les valeurs suivantes sont en outre disponibles :
+   <ul>
+    <li><code>gl.TEXTURE_3D</code> : une texture tri-dimensionnelle.</li>
+    <li><code>gl.TEXTURE_2D_ARRAY</code> : une texture bi-dimensionnelle en tableau.</li>
+   </ul>
+  </li>
+ </ul>
+ </dd>
+ <dt>nomp</dt>
+ <dd>Un {{domxref("Glenum")}} indiquant l'information à obtenir. Valeurs possibles :
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col">nomp</th>
+    <th scope="col">Type retourné</th>
+    <th scope="col">Description</th>
+    <th scope="col">Valeurs retournées possibles</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <th colspan="4">Disponible dans un contexte WebGL 1</th>
+   </tr>
+   <tr>
+    <td><code>gl.TEXTURE_MAG_FILTER</code></td>
+    <td>{{domxref("GLenum")}}</td>
+    <td>Filtre de grossissement de texture</td>
+    <td><code>gl.LINEAR</code> (valeur par défaut), <code>gl.NEAREST</code>.</td>
+   </tr>
+   <tr>
+    <td><code>gl.TEXTURE_MIN_FILTER</code></td>
+    <td>{{domxref("GLenum")}}</td>
+    <td>Filtre de réduction de texture</td>
+    <td><code>gl.LINEAR</code>, <code>gl.NEAREST</code>, <code>gl.NEAREST_MIPMAP_NEAREST</code>, <code>gl.LINEAR_MIPMAP_NEAREST</code>, <code>gl.NEAREST</code>_MIPMAP_LINEAR (valeur par défaut), <code>gl.LINEAR_MIPMAP_LINEAR</code>.</td>
+   </tr>
+   <tr>
+    <td><code>gl.TEXTURE_WRAP_S</code></td>
+    <td>{{domxref("GLenum")}}</td>
+    <td>Fonction d'emballage pour la coordonnée de texture <code>s</code></td>
+    <td><code>gl.REPEAT</code> (valeur par défaut), <code>gl.CLAMP_TO_EDGE</code>, <code>gl.MIRRORED_REPEAT</code>.</td>
+   </tr>
+   <tr>
+    <td><code>gl.TEXTURE_WRAP_T</code></td>
+    <td>{{domxref("GLenum")}}</td>
+    <td>Fonction d'emballage pour la coordonnée de texture <code>t</code></td>
+    <td><code>gl.REPEAT</code> (valeur par défaut), <code>gl.CLAMP_TO_EDGE</code>, <code>gl.MIRRORED_REPEAT</code>.</td>
+   </tr>
+   <tr>
+    <th colspan="4">Disponible en outre lorsque l'extension {{domxref("EXT_texture_filter_anisotropic")}} est utilisée</th>
+   </tr>
+   <tr>
+    <td><code>ext.TEXTURE_MAX_ANISOTROPY_EXT</code></td>
+    <td>{{domxref("GLfloat")}}</td>
+    <td>Anisotropie maximum pour une texture</td>
+    <td>Toutes valeurs float.</td>
+   </tr>
+   <tr>
+    <th colspan="4">Disponible en outre lorsqu'un contexte WebGL 2 est utilisé</th>
+   </tr>
+   <tr>
+    <td><code>gl.TEXTURE_BASE_LEVEL</code></td>
+    <td>{{domxref("GLint")}}</td>
+    <td>Niveau  de mipmap de texture</td>
+    <td>Toutes valeurs int.</td>
+   </tr>
+   <tr>
+    <td><code>gl.TEXTURE_COMPARE_FUNC</code></td>
+    <td>{{domxref("GLenum")}}</td>
+    <td>Fonction de comparaison</td>
+    <td><code>gl.LEQUAL</code> (valeurs par défaut), <code>gl.GEQUAL</code>, <code>gl.LESS</code>, <code>gl.GREATER</code>, <code>gl.EQUAL</code>, <code>gl.NOTEQUAL</code>, <code>gl.ALWAYS</code>, <code>gl.NEVER</code>.</td>
+   </tr>
+   <tr>
+    <td><code>gl.TEXTURE_COMPARE_MODE</code></td>
+    <td>{{domxref("GLenum")}}</td>
+    <td>Mode de comparaison de texture</td>
+    <td><code>gl.NONE</code> (valeur par défaut), <code>gl.COMPARE_REF_TO_TEXTURE</code>.</td>
+   </tr>
+   <tr>
+    <td><code>gl.TEXTURE_IMMUTABLE_FORMAT</code></td>
+    <td>{{domxref("GLboolean")}}</td>
+    <td>Immuabilité du format et de la taille de la texture</td>
+    <td>true ou false.</td>
+   </tr>
+   <tr>
+    <td><code>gl.TEXTURE_IMMUTABLE_LEVELS</code></td>
+    <td>{{domxref("GLuint")}}</td>
+    <td>?</td>
+    <td>Toutes valeurs uint.</td>
+   </tr>
+   <tr>
+    <td><code>gl.TEXTURE_MAX_LEVEL</code></td>
+    <td>{{domxref("GLint")}}</td>
+    <td>Niveau maximum  de mipmap de texture en tableau</td>
+    <td>Toutes valeurs int.</td>
+   </tr>
+   <tr>
+    <td><code>gl.TEXTURE_MAX_LOD</code></td>
+    <td>{{domxref("GLfloat")}}</td>
+    <td>Valeur de niveau-de-détail maximum de texture</td>
+    <td>Toutes valeurs float.</td>
+   </tr>
+   <tr>
+    <td><code>gl.TEXTURE_MIN_LOD</code></td>
+    <td>{{domxref("GLfloat")}}</td>
+    <td>Valeur de niveau-de-détail minimum de texture</td>
+    <td>Toutes valeurs float.</td>
+   </tr>
+   <tr>
+    <td><code>gl.TEXTURE_WRAP_R</code></td>
+    <td>{{domxref("GLenum")}}</td>
+    <td>Fonction d'emballage pour la coordonnée de texture  <code>r</code></td>
+    <td><code>gl.REPEAT</code> (valeur par défaut), <code>gl.CLAMP_TO_EDGE</code>, <code>gl.MIRRORED_REPEAT</code>.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Retourne l'information de texture demandée (telle qu'indiquée par <code>nomp</code>). Si une erreur se produit, {{jsxref("null")}} est retourné.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">gl.getTexParameter(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER);
+</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('WebGL', "#5.14.8", "getTexParameter")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Définition initiale pour WebGL.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glGetTexParameter.xml", "glGetTexParameter")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>Page man de l'API OpenGL ES 2.0 (similaire).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL2', "#3.7.6", "getTexParameter")}}</td>
+   <td>{{Spec2('WebGL2')}}</td>
+   <td>Définition mise à jour pour WebGL.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 3.0', "glGetTexParameter.xhtml", "glGetTexParameter")}}</td>
+   <td>{{Spec2('OpenGL ES 3.0')}}</td>
+   <td>Page man de l'API OpenGL ES 3.0 (similaire).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.getTexParameter")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.texParameter", "WebGLRenderingContext.texParameterf()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.texParameter", "WebGLRenderingContext.texParameteri()")}}</li>
+ <li>{{domxref("EXT_texture_filter_anisotropic")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglrenderingcontext/getuniformlocation/index.html b/files/fr/web/api/webglrenderingcontext/getuniformlocation/index.html
new file mode 100644
index 0000000000..17eeec89cc
--- /dev/null
+++ b/files/fr/web/api/webglrenderingcontext/getuniformlocation/index.html
@@ -0,0 +1,142 @@
+---
+title: WebGLRenderingContext.getUniformLocation()
+slug: Web/API/WebGLRenderingContext/getUniformLocation
+tags:
+  - API
+  - Méthode
+  - Reference
+  - Uniform Variables
+  - Uniforms
+  - Variables
+  - Variables en WebGL
+  - WebGL
+  - WebGLRenderingContext
+  - getUniformLocation
+translation_of: Web/API/WebGLRenderingContext/getUniformLocation
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<div>Faisant partie de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a>, la méthode {{domxref("WebGLRenderingContext")}} <code><strong>getUniformLocation()</strong></code> retourne l'emplacement d'une variable <strong>uniform</strong> particulière appartenant au {{domxref ("WebGLProgram")}} indiqué. La variable uniform est retournée sous la forme d'un objet {{domxref("WebGLUniformLocation")}}, qui est un identificateur opaque utilisé pour indiquer où se trouve la variable uniform dans la mémoire de la GPU.</div>
+
+<div> </div>
+
+<div>Une fois que vous avez l'emplacement de l'uniform, vous pouvez accéder à l'uniform lui-même en utilisant l'une des autres méthodes d'accès uniform, en passant l'emplacement de l'uniform comme l'une des entrées :</div>
+
+<div> </div>
+
+<dl>
+ <dt><span class="seoSummary">{{domxref ("WebGLRenderingContext.getUniform", "getUniform()")}}</span></dt>
+ <dd><span class="seoSummary">Retourne la valeur de l'uniform à l'emplacement indiqué.</span></dd>
+ <dt><br>
+ <span class="seoSummary">{{domxref ("WebGLRenderingContext.uniform", "uniform[1234] [fi] [v]()")}}</span></dt>
+ <dd><span class="seoSummary">Affecte à la valeur de l'uniform la valeur spécifiée, qui peut être un nombre flottant ou entier unique, ou un vecteur de 2 à 4 composantes spécifié soit comme une liste de valeurs, soit comme un {{jsxref ("Float32Array")}} ou un {{ jsxref ("Int32Array")}}.</span></dd>
+ <dt><br>
+ <span class="seoSummary">{{domxref ("WebGLRenderingContext.uniformMatrix", "uniformMatrix[234][fv]()")}}</span></dt>
+ <dd><span class="seoSummary">Affecte à la valeur de l'uniforme la matrice spécifiée, éventuellement avec transposition. La valeur est représentée comme une suite de valeurs GLfloat ou comme un Float32Array.</span></dd>
+</dl>
+
+<p><br>
+ <span class="seoSummary">L'uniform lui-même est déclaré dans le programme shader en utilisant GLSL.</span></p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>WebGLUniformLocation</em> = <em>WebGLRenderingContext</em>.getUniformLocation(<em>programme</em>, <em>nom</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>programme</code></dt>
+ <dd>Le {{domxref ("WebGLProgram")}} dans lequel localiser la variable uniform indiquée.</dd>
+ <dt><code>nom</code></dt>
+ <dd>Une {{domxref ("DOMString")}} indiquant le nom de la variable uniform dont l'emplacement doit être retourné. Le nom ne peut contenir aucun espace, et vous ne pouvez pas utiliser cette fonction pour obtenir l'emplacement d'aucun uniform commençant par la chaîne réservée <code>"gl_"</code>, du fait que ceux-ci sont internes à la couche WebGL.</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Une valeur {{domxref ("WebGLUniformLocation")}} indiquant l'emplacement de la variable nommée, si elle existe. Si la variable indiquée n'existe pas, {{jsxref("null")}} est retourné à la place.</p>
+
+<p><code>WebGLUniformLocation</code> est une valeur opaque utilisée pour identifier de manière unique l'emplacement dans la mémoire de la GPU auquel se trouve la variable uniform. Avec cette valeur en main, vous pouvez appeler d'autres méthodes WebGL pour accéder à la valeur de la variable uniform.</p>
+
+<div class="note">
+<p>Le type <code>WebGLUniformLocation</code> est compatible avec le type <code>GLint</code> pour indiquer l'indice ou l'emplacement d'un attribut uniform.</p>
+</div>
+
+<h3 id="Erreurs">Erreurs</h3>
+
+<p>Les erreurs suivantes peuvent se produire ; pour vérifier les erreurs après le retour de getUniformLocation(), appelez {{domxref ("WebGLRenderingContext.getError", "getError()")}}.</p>
+
+<dl>
+ <dt>GL_INVALID_VALUE</dt>
+ <dd>Le paramètre <code>programme</code> n'est pas une valeur ou un objet généré par WebGL.</dd>
+ <dt>GL_INVALID_OPERATION</dt>
+ <dd>Le paramètre <code>programme</code> ne correspond pas à un programme GLSL généré par WebGL, ou le programme indiqué n'a pas été lié avec succès.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans cet exemple, extrait de la méthode <code>animateScene()</code> dans l'article <a href="/fr-FR/docs/Web/API/WebGL_API/Basic_2D_animation_example#Drawing_and_animating_the_scene">Un exemple d'animation 2D WebGL de base</a>, retrouve les emplacements de trois uniforms du programme d'ombrage, puis définit la valeur de chacun des trois uniforms.</p>
+
+<pre class="brush: js highlight[3-8]">gl.useProgram(programmeShader);
+
+uScalingFactor =
+    gl.getUniformLocation(programmeShader, "uScalingFactor");
+uGlobalColor =
+    gl.getUniformLocation(programmeShader, "uGlobalColor");
+uRotationVector =
+    gl.getUniformLocation(programmeShader, "uRotationVector")
+
+gl.uniform2fv(uScalingFactor, currentScale);
+gl.uniform2fv(uRotationVector, currentRotation);
+gl.uniform4fv(uGlobalColor, [0.1, 0.7, 0.2, 1.0]);</pre>
+
+<div class="callout-box">Cet extrait de code provient de <a href="/fr-FR/docs/Web/API/WebGL_API/Basic_2D_animation_example#Drawing_and_animating_the_scene">la fonction animateScene()</a> dans "Un exemple d'animation WebGL 2D de base". Voir cet article pour l'exemple complet et pour voir l'animation résultante en action.</div>
+
+<p>Après avoir défini le programme d'ombrage en cours comme <code>programmeShader</code>, ce code récupère les trois uniforms <code>"uScalingFactor"</code>, <code>"uGlobalColor"</code> et <code>"uRotationVector"</code>, en appelant <code>getUniformLocation()</code> une fois pour chaque uniform.</p>
+
+<p>Ensuite, les valeurs des trois uniforms sont définies :</p>
+
+<ul>
+ <li>L'uniform <code>uScalingFactor</code> - un sommet à 2 composantes - reçoit les facteurs d'échelle horizontale et verticale à partir de la variable <code>currentScale</code>.</li>
+ <li>L'uniform <code>uRotationVector</code> reçoit le contenu de la variable <code>currentRotation</code>. C'est également un sommet à deux composantes.</li>
+ <li>Enfin, l'uniform <code>uGlobalColor</code> reçoit la couleur <code>[0.1, 0.7, 0.2, 1.0]</code>, les composants de ce vecteur à quatre composants représentant respectivement les valeurs rouge, vert, bleu et alpha.</li>
+</ul>
+
+<p>Cela fait, la prochaine fois que les fonctions d'ombrage seront appelées, leurs propres variables nommées <code>uScalingFactor</code>, <code>uGlobalColor</code> et <code>uRotationVector</code> auront toutes les valeurs fournies par le code JavaScript.</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('WebGL', "#5.14.10", "getUniformLocation")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>
+    <p>Définition initiale.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glGetUniformLocation.xml", "glGetUniformLocation")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>Page man de l’API OpenGL.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.getUniformLocation")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.getAttribLocation()")}}</li>
+ <li>{{domxref("WebGLUniformLocation")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglrenderingcontext/index.html b/files/fr/web/api/webglrenderingcontext/index.html
new file mode 100644
index 0000000000..e44f406e7c
--- /dev/null
+++ b/files/fr/web/api/webglrenderingcontext/index.html
@@ -0,0 +1,369 @@
+---
+title: WebGLRenderingContext
+slug: Web/API/WebGLRenderingContext
+tags:
+  - NeedsTranslation
+  - TopicStub
+  - WebGL
+  - WebGLRenderingContext
+translation_of: Web/API/WebGLRenderingContext
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<div>L'interface <strong>WebGLRenderingContext</strong> fournit le contexte de rendu OpenGL ES 2.0 pour le dessin d'une suface dans un élément HTML {{HTMLElement("canvas")}}<strong>.</strong></div>
+
+<div> </div>
+
+<p>Pour obtenir une instance de cette interface, appelez {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} sur un élément <code>&lt;canvas&gt;</code>, en spécifiant "webgl" en paramètre :</p>
+
+<pre class="brush: js">var canvas = document.getElementById('myCanvas');
+var gl = canvas.getContext('webgl');
+</pre>
+
+<p>Une fois que avez le contexte de rendu WebGL, vous pouvez dessiner à l'intérieur.</p>
+
+<p>Le <a href="/fr/docs/Web/API/WebGL_API/Tutorial" title="Tutoriel WebGL">tutoriel WebGL</a> contient plus d'informations, d'exemples, et de ressources sur comment débuter en WebGL.</p>
+
+<h2 id="Constants">Constants</h2>
+
+<p>See the <a href="/en-US/docs/Web/API/WebGL_API/Constants">WebGL constants</a> page.</p>
+
+<h2 id="The_WebGL_context">The WebGL context</h2>
+
+<p>The following properties and methods provide general information and functionality to deal with the WebGL context:</p>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContext.canvas")}}</dt>
+ <dd>A read-only back-reference to the {{domxref("HTMLCanvasElement")}}. Might be {{jsxref("null")}} if it is not associated with a {{HTMLElement("canvas")}} element.</dd>
+ <dt>{{domxref("WebGLRenderingContext.commit()")}} {{experimental_inline}}</dt>
+ <dd>
+ <p>Pushes frames back to the original {{domxref("HTMLCanvasElement")}}, if the context is not directly fixed to a specific canvas.</p>
+ </dd>
+ <dt>{{domxref("WebGLRenderingContext.drawingBufferWidth")}}</dt>
+ <dd>The read-only width of the current drawing buffer. Should match the width of the canvas element associated with this context.</dd>
+ <dt>{{domxref("WebGLRenderingContext.drawingBufferHeight")}}</dt>
+ <dd>The read-only height of the current drawing buffer. Should match the height of the canvas element associated with this context.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getContextAttributes()")}}</dt>
+ <dd>Returns a <code>WebGLContextAttributes</code> object that contains the actual context parameters. Might return {{jsxref("null")}}, if the context is lost.</dd>
+ <dt>{{domxref("WebGLRenderingContext.isContextLost()")}}</dt>
+ <dd>Returns <code>true</code> if the context is lost, otherwise returns <code>false</code>.</dd>
+</dl>
+
+<h2 id="Viewing_and_clipping">Viewing and clipping</h2>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContext.scissor()")}}</dt>
+ <dd>Defines the scissor box.</dd>
+ <dt>{{domxref("WebGLRenderingContext.viewport()")}}</dt>
+ <dd>Sets the viewport.</dd>
+</dl>
+
+<h2 id="State_information">State information</h2>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContext.activeTexture()")}}</dt>
+ <dd>Selects the active texture unit.</dd>
+ <dt>{{domxref("WebGLRenderingContext.blendColor()")}}</dt>
+ <dd>Sets the source and destination blending factors.</dd>
+ <dt>{{domxref("WebGLRenderingContext.blendEquation()")}}</dt>
+ <dd>Sets both the RGB blend equation and alpha blend equation to a single equation.</dd>
+ <dt>{{domxref("WebGLRenderingContext.blendEquationSeparate()")}}</dt>
+ <dd>Sets the RGB blend equation and alpha blend equation separately.</dd>
+ <dt>{{domxref("WebGLRenderingContext.blendFunc()")}}</dt>
+ <dd>Defines which function is used for blending pixel arithmetic.</dd>
+ <dt>{{domxref("WebGLRenderingContext.blendFuncSeparate()")}}</dt>
+ <dd>Defines which function is used for blending pixel arithmetic for RGB and alpha components separately.</dd>
+ <dt>{{domxref("WebGLRenderingContext.clearColor()")}}</dt>
+ <dd>Specifies the color values used when clearing color buffers.</dd>
+ <dt>{{domxref("WebGLRenderingContext.clearDepth()")}}</dt>
+ <dd>Specifies the depth value used when clearing the depth buffer.</dd>
+ <dt>{{domxref("WebGLRenderingContext.clearStencil()")}}</dt>
+ <dd>Specifies the stencil value used when clearing the stencil buffer.</dd>
+ <dt>{{domxref("WebGLRenderingContext.colorMask()")}}</dt>
+ <dd>Sets which color components to enable or to disable when drawing or rendering to a {{domxref("WebGLFramebuffer")}}.</dd>
+ <dt>{{domxref("WebGLRenderingContext.cullFace()")}}</dt>
+ <dd>Specifies whether or not front- and/or back-facing polygons can be culled.</dd>
+ <dt>{{domxref("WebGLRenderingContext.depthFunc()")}}</dt>
+ <dd>Specifies a function that compares incoming pixel depth to the current depth buffer value.</dd>
+ <dt>{{domxref("WebGLRenderingContext.depthMask()")}}</dt>
+ <dd>Sets whether writing into the depth buffer is enabled or disabled.</dd>
+ <dt>{{domxref("WebGLRenderingContext.depthRange()")}}</dt>
+ <dd>Specifies the depth range mapping from normalized device coordinates to window or viewport coordinates.</dd>
+ <dt>{{domxref("WebGLRenderingContext.disable()")}}</dt>
+ <dd>Disables specific WebGL capabilities for this context.</dd>
+ <dt>{{domxref("WebGLRenderingContext.enable()")}}</dt>
+ <dd>Enables specific WebGL capabilities for this context.</dd>
+ <dt>{{domxref("WebGLRenderingContext.frontFace()")}}</dt>
+ <dd>Specifies whether polygons are front- or back-facing by setting a winding orientation.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getParameter()")}}</dt>
+ <dd>Returns a value for the passed parameter name.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getError()")}}</dt>
+ <dd>Returns error information.</dd>
+ <dt>{{domxref("WebGLRenderingContext.hint()")}}</dt>
+ <dd>Specifies hints for certain behaviors. The interpretation of these hints depend on the implementation.</dd>
+ <dt>{{domxref("WebGLRenderingContext.isEnabled()")}}</dt>
+ <dd>Tests whether a specific WebGL capability is enabled or not for this context.</dd>
+ <dt>{{domxref("WebGLRenderingContext.lineWidth()")}}</dt>
+ <dd>Sets the line width of rasterized lines.</dd>
+ <dt>{{domxref("WebGLRenderingContext.pixelStorei()")}}</dt>
+ <dd>Specifies the pixel storage modes</dd>
+ <dt>{{domxref("WebGLRenderingContext.polygonOffset()")}}</dt>
+ <dd>Specifies the scale factors and units to calculate depth values.</dd>
+ <dt>{{domxref("WebGLRenderingContext.sampleCoverage()")}}</dt>
+ <dd>Specifies multi-sample coverage parameters for anti-aliasing effects.</dd>
+ <dt>{{domxref("WebGLRenderingContext.stencilFunc()")}}</dt>
+ <dd>Sets the both front and back function and reference value for stencil testing.</dd>
+ <dt>{{domxref("WebGLRenderingContext.stencilFuncSeparate()")}}</dt>
+ <dd>Sets the front and/or back function and reference value for stencil testing.</dd>
+ <dt>{{domxref("WebGLRenderingContext.stencilMask()")}}</dt>
+ <dd>Controls enabling and disabling of both the front and back writing of individual bits in the stencil planes.</dd>
+ <dt>{{domxref("WebGLRenderingContext.stencilMaskSeparate()")}}</dt>
+ <dd>Controls enabling and disabling of front and/or back writing of individual bits in the stencil planes.</dd>
+ <dt>{{domxref("WebGLRenderingContext.stencilOp()")}}</dt>
+ <dd>Sets both the front and back-facing stencil test actions.</dd>
+ <dt>{{domxref("WebGLRenderingContext.stencilOpSeparate()")}}</dt>
+ <dd>Sets the front and/or back-facing stencil test actions.</dd>
+</dl>
+
+<h2 id="Buffers">Buffers</h2>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContext.bindBuffer()")}}</dt>
+ <dd>Binds a <code>WebGLBuffer</code> object to a given target.</dd>
+ <dt>{{domxref("WebGLRenderingContext.bufferData()")}}</dt>
+ <dd>Updates buffer data.</dd>
+ <dt>{{domxref("WebGLRenderingContext.bufferSubData()")}}</dt>
+ <dd>Updates buffer data starting at a passed offset.</dd>
+ <dt>{{domxref("WebGLRenderingContext.createBuffer()")}}</dt>
+ <dd>Creates a <code>WebGLBuffer</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.deleteBuffer()")}}</dt>
+ <dd>Deletes a <code>WebGLBuffer</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getBufferParameter()")}}</dt>
+ <dd>Returns information about the buffer.</dd>
+ <dt>{{domxref("WebGLRenderingContext.isBuffer()")}}</dt>
+ <dd>Returns a Boolean indicating if the passed buffer is valid.</dd>
+</dl>
+
+<h2 id="Framebuffers">Framebuffers</h2>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContext.bindFramebuffer()")}}</dt>
+ <dd>Binds a <code>WebGLFrameBuffer</code> object to a given target.</dd>
+ <dt>{{domxref("WebGLRenderingContext.checkFramebufferStatus()")}}</dt>
+ <dd>Returns the status of the framebuffer.</dd>
+ <dt>{{domxref("WebGLRenderingContext.createFramebuffer()")}}</dt>
+ <dd>Creates a <code>WebGLFrameBuffer</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.deleteFramebuffer()")}}</dt>
+ <dd>Deletes a <code>WebGLFrameBuffer</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.framebufferRenderbuffer()")}}</dt>
+ <dd>Attaches a <code>WebGLRenderingBuffer</code> object to a <code>WebGLFrameBuffer</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.framebufferTexture2D()")}}</dt>
+ <dd>Attaches a textures image to a <code>WebGLFrameBuffer</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getFramebufferAttachmentParameter()")}}</dt>
+ <dd>Returns information about the framebuffer.</dd>
+ <dt>{{domxref("WebGLRenderingContext.isFramebuffer()")}}</dt>
+ <dd>Returns a Boolean indicating if the passed <code>WebGLFrameBuffer</code> object is valid.</dd>
+ <dt>{{domxref("WebGLRenderingContext.readPixels()")}}</dt>
+ <dd>Reads a block of pixels from the <code>WebGLFrameBuffer</code>.</dd>
+</dl>
+
+<h2 id="Renderbuffers">Renderbuffers</h2>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContext.bindRenderbuffer()")}}</dt>
+ <dd>Binds a <code>WebGLRenderBuffer</code> object to a given target.</dd>
+ <dt>{{domxref("WebGLRenderingContext.createRenderbuffer()")}}</dt>
+ <dd>Creates a <code>WebGLRenderBuffer</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.deleteRenderbuffer()")}}</dt>
+ <dd>Deletes a <code>WebGLRenderBuffer</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getRenderbufferParameter()")}}</dt>
+ <dd>Returns information about the renderbuffer.</dd>
+ <dt>{{domxref("WebGLRenderingContext.isRenderbuffer()")}}</dt>
+ <dd>Returns a Boolean indicating if the passed <code>WebGLRenderingBuffer</code> is valid.</dd>
+ <dt>{{domxref("WebGLRenderingContext.renderbufferStorage()")}}</dt>
+ <dd>Creates a renderbuffer data store.</dd>
+</dl>
+
+<h2 id="Textures">Textures</h2>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContext.bindTexture()")}}</dt>
+ <dd>Binds a <code>WebGLTexture</code> object to a given target.</dd>
+ <dt>{{domxref("WebGLRenderingContext.compressedTexImage2D()")}}</dt>
+ <dd>Specifies a 2D texture image in a compressed format.</dd>
+ <dt>{{domxref("WebGLRenderingContext.compressedTexSubImage2D()")}}</dt>
+ <dd>Specifies a 2D texture sub-image in a compressed format.</dd>
+ <dt>{{domxref("WebGLRenderingContext.copyTexImage2D()")}}</dt>
+ <dd>Copies a 2D texture image.</dd>
+ <dt>{{domxref("WebGLRenderingContext.copyTexSubImage2D()")}}</dt>
+ <dd>Copies a 2D texture sub-image.</dd>
+ <dt>{{domxref("WebGLRenderingContext.createTexture()")}}</dt>
+ <dd>Creates a <code>WebGLTexture</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.deleteTexture()")}}</dt>
+ <dd>Deletes a <code>WebGLTexture</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.generateMipmap()")}}</dt>
+ <dd>Generates a set of mipmaps for a <code>WebGLTexture</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getTexParameter()")}}</dt>
+ <dd>Returns information about the texture.</dd>
+ <dt>{{domxref("WebGLRenderingContext.isTexture()")}}</dt>
+ <dd>Returns a Boolean indicating if the passed <code>WebGLTexture</code> is valid.</dd>
+ <dt>{{domxref("WebGLRenderingContext.texImage2D()")}}</dt>
+ <dd>Specifies a 2D texture image.</dd>
+ <dt>{{domxref("WebGLRenderingContext.texSubImage2D()")}}</dt>
+ <dd>Updates a sub-rectangle of the current <code>WebGLTexture</code>.</dd>
+ <dt>{{domxref("WebGLRenderingContext.texParameter", "WebGLRenderingContext.texParameterf()")}}</dt>
+ <dd>Sets texture parameters.</dd>
+ <dt>{{domxref("WebGLRenderingContext.texParameter", "WebGLRenderingContext.texParameteri()")}}</dt>
+ <dd>Sets texture parameters.</dd>
+</dl>
+
+<h2 id="Programs_and_shaders">Programs and shaders</h2>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContext.attachShader()")}}</dt>
+ <dd>Attaches a <code>WebGLShader</code> to a <code>WebGLProgram</code>.</dd>
+ <dt>{{domxref("WebGLRenderingContext.bindAttribLocation()")}}</dt>
+ <dd>Binds a generic vertex index to a named attribute variable.</dd>
+ <dt>{{domxref("WebGLRenderingContext.compileShader()")}}</dt>
+ <dd>Compiles a <code>WebGLShader</code>.</dd>
+ <dt>{{domxref("WebGLRenderingContext.createProgram()")}}</dt>
+ <dd>Creates a <code>WebGLProgram</code>.</dd>
+ <dt>{{domxref("WebGLRenderingContext.createShader()")}}</dt>
+ <dd>Creates a <code>WebGLShader</code>.</dd>
+ <dt>{{domxref("WebGLRenderingContext.deleteProgram()")}}</dt>
+ <dd>Deletes a <code>WebGLProgram</code>.</dd>
+ <dt>{{domxref("WebGLRenderingContext.deleteShader()")}}</dt>
+ <dd>Deletes a <code>WebGLShader</code>.</dd>
+ <dt>{{domxref("WebGLRenderingContext.detachShader()")}}</dt>
+ <dd>Detaches a <code>WebGLShader</code>.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getAttachedShaders()")}}</dt>
+ <dd>Returns a list of <code>WebGLShader</code> objects attached to a <code>WebGLProgram</code>.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getProgramParameter()")}}</dt>
+ <dd>Returns information about the program.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}</dt>
+ <dd>Returns the information log for a <code>WebGLProgram</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getShaderParameter()")}}</dt>
+ <dd>Returns information about the shader.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}</dt>
+ <dd>Returns a <code>WebGLShaderPrecisionFormat</code> object describing the precision for the numeric format of the shader.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getShaderInfoLog()")}}</dt>
+ <dd>Returns the information log for a <code>WebGLShader</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getShaderSource()")}}</dt>
+ <dd>Returns the source code of a <code>WebGLShader</code> as a string.</dd>
+ <dt>{{domxref("WebGLRenderingContext.isProgram()")}}</dt>
+ <dd>Returns a Boolean indicating if the passed <code>WebGLProgram</code> is valid.</dd>
+ <dt>{{domxref("WebGLRenderingContext.isShader()")}}</dt>
+ <dd>Returns a Boolean indicating if the passed <code>WebGLShader</code> is valid.</dd>
+ <dt>{{domxref("WebGLRenderingContext.linkProgram()")}}</dt>
+ <dd>Links the passed <code>WebGLProgram</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.shaderSource()")}}</dt>
+ <dd>Sets the source code in a <code>WebGLShader</code>.</dd>
+ <dt>{{domxref("WebGLRenderingContext.useProgram()")}}</dt>
+ <dd>Uses the specified <code>WebGLProgram</code> as part the current rendering state.</dd>
+ <dt>{{domxref("WebGLRenderingContext.validateProgram()")}}</dt>
+ <dd>Validates a <code>WebGLProgram</code>.</dd>
+</dl>
+
+<h2 id="Uniforms_and_attributes">Uniforms and attributes</h2>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContext.disableVertexAttribArray()")}}</dt>
+ <dd>Disables a vertex attribute array at a given position.</dd>
+ <dt>{{domxref("WebGLRenderingContext.enableVertexAttribArray()")}}</dt>
+ <dd>Enables a vertex attribute array at a given position.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getActiveAttrib()")}}</dt>
+ <dd>Returns information about an active attribute variable.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getActiveUniform()")}}</dt>
+ <dd>Returns information about an active uniform variable.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getAttribLocation()")}}</dt>
+ <dd>Returns the location of an attribute variable.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getUniform()")}}</dt>
+ <dd>Returns the value of a uniform variable at a given location.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getUniformLocation()")}}</dt>
+ <dd>Returns the location of a uniform variable.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getVertexAttrib()")}}</dt>
+ <dd>Returns information about a vertex attribute at a given position.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getVertexAttribOffset()")}}</dt>
+ <dd>Returns the address of a given vertex attribute.</dd>
+ <dt>{{domxref("WebGLRenderingContext.uniform()", "WebGLRenderingContext.uniform[1234][fi][v]()")}}</dt>
+ <dd>Specifies a value for a uniform variable.</dd>
+ <dt>{{domxref("WebGLRenderingContext.uniformMatrix()", "WebGLRenderingContext.uniformMatrix[234]fv()")}}</dt>
+ <dd>Specifies a matrix value for a uniform variable.</dd>
+ <dt>{{domxref("WebGLRenderingContext.vertexAttrib()", "WebGLRenderingContext.vertexAttrib[1234]f[v]()")}}</dt>
+ <dd>Specifies a value for a generic vertex attribute.</dd>
+ <dt>{{domxref("WebGLRenderingContext.vertexAttribPointer()")}}</dt>
+ <dd>Specifies the data formats and locations of vertex attributes in a vertex attributes array.</dd>
+</dl>
+
+<h2 id="Drawing_buffers">Drawing buffers</h2>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContext.clear()")}}</dt>
+ <dd>Clears specified buffers to preset values.</dd>
+ <dt>{{domxref("WebGLRenderingContext.drawArrays()")}}</dt>
+ <dd>Renders primitives from array data.</dd>
+ <dt>{{domxref("WebGLRenderingContext.drawElements()")}}</dt>
+ <dd>Renders primitives from element array data.</dd>
+ <dt>{{domxref("WebGLRenderingContext.finish()")}}</dt>
+ <dd>Blocks execution until all previously called commands are finished.</dd>
+ <dt>{{domxref("WebGLRenderingContext.flush()")}}</dt>
+ <dd>Empties different buffer commands, causing all commands to be executed as quickly as possible.</dd>
+</dl>
+
+<h2 id="Working_with_extensions">Working with extensions</h2>
+
+<p>These methods manage WebGL extensions:</p>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContext.getSupportedExtensions()")}}</dt>
+ <dd>Returns an {{jsxref("Array")}} of {{domxref("DOMString")}} elements with all the supported WebGL extensions.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getExtension()")}}</dt>
+ <dd>Returns an extension object.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="WebGL_context_feature_detection">WebGL context feature detection</h3>
+
+<p>{{page("/en-US/Learn/WebGL/By_example/Detect_WebGL", "summary")}}</p>
+
+<p>{{page("/en-US/Learn/WebGL/By_example/Detect_WebGL", "detect-webgl-source")}}</p>
+
+<p>{{EmbedLiveSample("detect-webgl-source", 660,150 ,"" , "Learn/WebGL/By_example/Detect_WebGL")}}</p>
+
+<h3 id="Effect_of_canvas_size_on_rendering_with_WebGL">Effect of canvas size on rendering with WebGL</h3>
+
+<p>{{page("/en-US/Learn/WebGL/By_example/Canvas_size_and_WebGL", "canvas-size-and-webgl-intro")}}</p>
+
+<p>{{page("/en-US/Learn/WebGL/By_example/Canvas_size_and_WebGL", "canvas-size-and-webgl-source")}}</p>
+
+<p>{{EmbedLiveSample("canvas-size-and-webgl-source", 660,180 ,"" , "Learn/WebGL/By_example/Canvas_size_and_WebGL")}}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.14", "WebGLRenderingContext")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api/WebGLRenderingContext", "WebGLRenderingContext")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("HTMLCanvasElement")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglrenderingcontext/isbuffer/index.html b/files/fr/web/api/webglrenderingcontext/isbuffer/index.html
new file mode 100644
index 0000000000..907a86ab2d
--- /dev/null
+++ b/files/fr/web/api/webglrenderingcontext/isbuffer/index.html
@@ -0,0 +1,79 @@
+---
+title: WebGLRenderingContext.isBuffer()
+slug: Web/API/WebGLRenderingContext/isBuffer
+tags:
+  - API
+  - Méthode
+  - WebGL
+  - WebGLRenderingContext
+translation_of: Web/API/WebGLRenderingContext/isBuffer
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>La méthode <strong><code>WebGLRenderingContext.isBuffer()</code></strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> renvoie <code>true</code> si le {{domxref ("WebGLBuffer")}} passé est valide et <code>false</code> dans le cas contraire.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">GLboolean <var>gl</var>.isBuffer(<var>tampon</var>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>tampon</dt>
+ <dd>Un {{domxref("WebGLBuffer")}} à vérifier.</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Un {{domxref("GLboolean")}} indiquant si le tampon est ou non valide.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Création_d'un_tampon">Création d'un tampon</h3>
+
+<pre class="brush: js">var canevas = document.getElementById('canevas');
+var gl = canevas.getContext('webgl');
+var tampon = gl.createBuffer();
+
+gl.isBuffer(tampon);
+</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('WebGL', "#5.14.5", "isBuffer")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glIsBuffer.xml", "glIsBuffer")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>
+    <p>Page man de l’API OpenGL.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.isBuffer")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.bindBuffer()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.createBuffer()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.deleteBuffer()")}}</li>
+ <li>Autres tampons : {{domxref("WebGLFramebuffer")}}, {{domxref("WebGLRenderbuffer")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglrenderingcontext/shadersource/index.html b/files/fr/web/api/webglrenderingcontext/shadersource/index.html
new file mode 100644
index 0000000000..fb65393984
--- /dev/null
+++ b/files/fr/web/api/webglrenderingcontext/shadersource/index.html
@@ -0,0 +1,76 @@
+---
+title: WebGLRenderingContext.shaderSource()
+slug: Web/API/WebGLRenderingContext/shaderSource
+tags:
+  - API
+  - Méthode
+  - Reference
+  - WebGL
+  - WebGLRenderingContext
+translation_of: Web/API/WebGLRenderingContext/shaderSource
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>La méthode <strong><code>WebGLRenderingContext.shaderSource()</code></strong> de l'<a href="/en-US/docs/Web/API/WebGL_API">API WebGL</a> définit le code source d'un {{domxref("WebGLShader")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var>gl</var>.shaderSource(<var>shader</var>, <var>source</var>);
+</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt>shader</dt>
+ <dd>Un objet {{domxref("WebGLShader")}} dans lequel définir le code source.</dd>
+ <dt>source</dt>
+ <dd>Une {{domxref("DOMString")}} contenant le code source GLSL à définir.</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Aucune.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">var shader = gl.createShader(gl.VERTEX_SHADER);
+gl.shaderSource(shader, originalSource);
+
+var source = gl.getShaderSource(shader);</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('WebGL', "#5.14.9", "shaderSource")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glShaderSource.xml", "glShaderSource")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>Page man de l'API OpenGL (similaire).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.shaderSource")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.createShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.deleteShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getShaderSource()")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglrenderingcontext/teximage2d/index.html b/files/fr/web/api/webglrenderingcontext/teximage2d/index.html
new file mode 100644
index 0000000000..902985faf4
--- /dev/null
+++ b/files/fr/web/api/webglrenderingcontext/teximage2d/index.html
@@ -0,0 +1,249 @@
+---
+title: WebGLRenderingContext.texImage2D()
+slug: Web/API/WebGLRenderingContext/texImage2D
+tags:
+  - API
+  - Méthode
+  - Reference
+  - Textures
+  - WebGL
+  - WebGLRenderingContext
+translation_of: Web/API/WebGLRenderingContext/texImage2D
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>La méthode <strong><code>WebGLRenderingContext.texImage2D()</code></strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> spécifie une image de texture bidimensionnelle.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">// WebGL1:
+void <var>gl</var>.texImage2D(<var>cible</var>, <var>niveau</var>, <var>formatinterne</var>, <var>largeur</var>, <var>hauteur</var>, <var>bordure</var>, <var>format</var>, <var>type</var>, ArrayBufferView? <var>pixels</var>);
+void <var>gl</var>.texImage2D(<var>cible</var>, <var>niveau</var>, <var>formatinterne</var>, <var>format</var>, <var>type</var>, ImageData? <var>pixels</var>);
+void <var>gl</var>.texImage2D(<var>cible</var>, <var>niveau</var>, <var>formatinterne</var>, <var>format</var>, <var>type</var>, HTMLImageElement? <var>pixels</var>);
+void <var>gl</var>.texImage2D(<var>cible</var>, <var>niveau</var>, <var>formatinterne</var>, <var>format</var>, <var>type</var>, HTMLCanvasElement? <var>pixels</var>);
+void <var>gl</var>.texImage2D(<var>cible</var>, <var>niveau</var>, <var>formatinterne</var>, <var>format</var>, <var>type</var>, HTMLVideoElement? <var>pixels</var>);
+void <var>gl</var>.texImage2D(<var>cible</var>, <var>niveau</var>, <var>formatinterne</var>, <var>format</var>, <var>type</var>, ImageBitmap? <var>pixels</var>);
+
+// WebGL2:
+void gl.texImage2D(<var>cible</var>, <var>niveau</var>, <var>formatinterne</var>, <var>largeur</var>, <var>hauteur</var>, <var>bordure</var>, <var>format</var>, <var>type</var>, GLintptr <em>decalage</em>);
+void gl.texImage2D(<var>cible</var>, <var>niveau</var>, <var>formatinterne</var>, <var>largeur</var>, <var>hauteur</var>, <var>bordure</var>, <var>format</var>, <var>type</var>, HTMLCanvasElement <em>source</em>);
+void gl.texImage2D(<var>cible</var>, <var>niveau</var>, <var>formatinterne</var>, <var>largeur</var>, <var>hauteur</var>, <var>bordure</var>, <var>format</var>, <var>type</var>, HTMLImageElement <em>source</em>);
+void gl.texImage2D(<var>cible</var>, <var>niveau</var>, <var>formatinterne</var>, <var>largeur</var>, <var>hauteur</var>, <var>bordure</var><em>, format, type</em>, HTMLVideoElement <em>source</em>);
+void gl.texImage2D(<var>cible</var>, <var>niveau</var>, <var>formatinterne</var>, <var>largeur</var>, <var>hauteur</var>, <var>bordure</var><em>, format, type</em>, ImageBitmap <em>source</em>);
+void gl.texImage2D(<var>cible</var>, <var>niveau</var>, <var>formatinterne</var>, <var>largeur</var>, <var>hauteur</var>, <var>bordure</var><em>, format, type</em>, ImageData <em>source</em>);
+void gl.texImage2D(<var>cible</var>, <var>niveau</var>, <var>formatinterne</var>, <var>largeur</var>, <var>hauteur</var>, <var>bordure</var><em>, format, type</em>, ArrayBufferView <em>donneesSrc</em>, <em>decalageSrc</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>cible</code></dt>
+ <dd>Un {{domxref ("GLenum")}} indiquant le point de liaison (cible) de la texture active. Valeurs possibles :
+ <ul>
+  <li><code>gl.TEXTURE_2D</code> : une texture bidimensionnelle ;</li>
+  <li><code>gl.TEXTURE_CUBE_MAP_POSITIVE_X</code> : face X positive pour une texture mappée sur un cube ;</li>
+  <li><code>gl.TEXTURE_CUBE_MAP_NEGATIVE_X</code> : face X négative pour une texture mappée sur un cube ;</li>
+  <li><code>gl.TEXTURE_CUBE_MAP_POSITIVE_Y</code> : face Y positive pour une texture mappée sur un cube ;</li>
+  <li><code>gl.TEXTURE_CUBE_MAP_NEGATIVE_Y</code> : face Y négative pour une texture mappée sur un cube ;</li>
+  <li><code>gl.TEXTURE_CUBE_MAP_POSITIVE_Z</code> : face Z positive pour une texture mappée sur un cube ;</li>
+  <li><code>gl.TEXTURE_CUBE_MAP_NEGATIVE_Z</code> : face Z négative pour une texture mappée sur un cube.</li>
+ </ul>
+ </dd>
+</dl>
+
+<dl>
+ <dt><code>niveau</code></dt>
+ <dd>Un {{domxref ("GLint")}} indiquant le niveau de détail. Le niveau 0 est le niveau de l'image de base et le niveau n est le n-ième niveau de réduction du mipmap.</dd>
+ <dt><code>formatinterne</code></dt>
+ <dd>Un {{domxref ("GLint")}} indiquant les composantes de couleur dans la texture. Valeurs possibles :
+ <ul>
+  <li><code>gl.ALPHA</code> : ignore les composantes rouge, vert et bleu, et lit la composante alpha ;</li>
+  <li><code>gl.RGB</code> : ignore la composante alpha et lit les composantes rouge, vert et bleu ;</li>
+  <li><code>gl.RGBA</code> : les composantes rouge, vert, bleu et alpha sont lues à partir du tampon des couleurs ;</li>
+  <li><code>gl.LUMINANCE</code> : chaque composante de couleur est une composante de luminance, alpha vaut 1,0 ;</li>
+  <li><code>gl.LUMINANCE_ALPHA</code> : chaque composante est une composante de luminance/alpha ;</li>
+  <li>lors de l'utilisation de l'extension {{domxref("WEBGL_depth_texture")}} :
+   <ul>
+    <li><code>gl.DEPTH_COMPONENT</code></li>
+    <li><code>gl.DEPTH_STENCIL</code></li>
+   </ul>
+  </li>
+  <li>lors de l'utilisation de l'extension {{domxref("EXT_sRGB")}} :
+   <ul>
+    <li><code>ext.SRGB_EXT</code></li>
+    <li><code>ext.SRGB_ALPHA_EXT</code></li>
+   </ul>
+  </li>
+  <li>Lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, les valeurs suivantes sont en outre disponibles :
+   <ul>
+    <li><code>gl.R8</code></li>
+    <li><code>gl.R16F</code></li>
+    <li><code>gl.R32F</code></li>
+    <li><code>gl.R8UI</code></li>
+    <li><code>gl.RG8</code></li>
+    <li><code>gl.RG16F</code></li>
+    <li><code>gl.RG32F</code></li>
+    <li><code>gl.RG8UI</code></li>
+    <li><code>gl.RG16UI</code></li>
+    <li><code>gl.RG32UI</code></li>
+    <li><code>gl.RGB8</code></li>
+    <li><code>gl.SRGB8</code></li>
+    <li><code>gl.RGB565</code></li>
+    <li><code>gl.R11F_G11F_B10F</code></li>
+    <li><code>gl.RGB9_E5</code></li>
+    <li><code>gl.RGB16F</code></li>
+    <li><code>gl.RGB32F</code></li>
+    <li><code>gl.RGB8UI</code></li>
+    <li><code>gl.RGBA8</code></li>
+    <li><code>gl.SRGB8_APLHA8</code></li>
+    <li><code>gl.RGB5_A1</code></li>
+    <li><code>gl.RGB10_A2</code></li>
+    <li><code>gl.RGBA4</code></li>
+    <li><code>gl.RGBA16F</code></li>
+    <li><code>gl.RGBA32F</code></li>
+    <li><code>gl.RGBA8UI</code></li>
+   </ul>
+  </li>
+ </ul>
+ </dd>
+ <dt><code>largeur</code></dt>
+ <dd>Un {{domxref ("GLsizei")}} indiquant la largeur de la texture.</dd>
+ <dt><code>hauteur</code></dt>
+ <dd>Un {{domxref ("GLsizei")}} indiquant la hauteur de la texture.</dd>
+ <dt><code>bordure</code></dt>
+ <dd>Un {{domxref("GLint")}} indiquant la largeur de la bordure. Doit être 0.</dd>
+ <dt><code>format</code></dt>
+ <dd>Un {{domxref("GLenum")}} indiquant le format des données de texel. En WebGL 1, cela doit être identique à <code>formatinterne</code> (voir ci-dessus). En WebGL 2, les combinaisons sont répertoriées dans <a href="https://www.khronos.org/registry/webgl/specs/latest/2.0/#TEXTURE_TYPES_FORMATS_FROM_DOM_ELEMENTS_TABLE">ce tableau</a>.</dd>
+ <dt><code>type</code></dt>
+ <dd>Un {{domxref("GLenum")}} indiquant le type de données des données de texel. Valeurs possibles :
+ <ul>
+  <li><code>gl.UNSIGNED_BYTE</code> : 8 bits par canal pour <code>gl.RGBA</code> ;</li>
+  <li><code>gl.UNSIGNED_SHORT_5_6_5</code> : 5 bits de rouge, 6 bits de vert, 5 bits de bleu ;</li>
+  <li><code>gl.UNSIGNED_SHORT_4_4_4_4</code> : 4 bits de rouge, 4 bits de vert, 4 bits de bleu, 4 bits d'alpha ;</li>
+  <li><code>gl.UNSIGNED_SHORT_5_5_5_1</code> : 5 bits de rouge, 5 bits de vert, 5 bits de bleu, 1 bit d'alpha ;</li>
+  <li>lors de l'utilisation de l'extension {{domxref ("WEBGL_depth_texture")}} :
+   <ul>
+    <li><code>gl.UNSIGNED_SHORT</code></li>
+    <li><code>gl.UNSIGNED_INT</code></li>
+    <li><code>ext.UNSIGNED_INT_24_8_WEBGL</code> (constante fournie par l'extension)</li>
+   </ul>
+  </li>
+  <li>lors de l'utilisation de l'extension {{domxref("OES_texture_float")}} :
+   <ul>
+    <li><code>gl.FLOAT</code></li>
+   </ul>
+  </li>
+  <li>lors de l'utilisation de l'extension {{domxref("OES_texture_half_float")}} :
+   <ul>
+    <li><code>ext.HALF_FLOAT_OES</code> (constante fournie par l'extension)</li>
+   </ul>
+  </li>
+  <li>lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, les valeurs suivantes sont en outre disponibles :
+   <ul>
+    <li><code>gl.BYTE</code></li>
+    <li><code>gl.UNSIGNED_SHORT</code></li>
+    <li><code>gl.SHORT</code></li>
+    <li><code>gl.UNSIGNED_INT</code></li>
+    <li><code>gl.INT</code></li>
+    <li><code>gl.HALF_FLOAT</code></li>
+    <li><code>gl.FLOAT</code></li>
+    <li><code>gl.UNSIGNED_INT_2_10_10_10_REV</code></li>
+    <li><code>gl.UNSIGNED_INT_10F_11F_11F_REV</code></li>
+    <li><code>gl.UNSIGNED_INT_5_9_9_9_REV</code></li>
+    <li><code>gl.UNSIGNED_INT_24_8</code></li>
+    <li><code>gl.FLOAT_32_UNSIGNED_INT_24_8_REV</code> (les pixels doivent être {{jsxref("null")}})</li>
+   </ul>
+  </li>
+ </ul>
+ </dd>
+ <dt><code>pixels</code></dt>
+ <dd>L'un des objets suivants peut être utilisé comme source de pixels pour la texture :
+ <ul>
+  <li>{{domxref("ArrayBufferView")}},
+   <ul>
+    <li>un {{jsxref("Uint8Array")}} doit être utilisé si <code>type</code> est <code>gl.UNSIGNED_BYTE</code> ;</li>
+    <li>un {{jsxref("Uint16Array")}} doit être utilisé si <code>type</code> est <code>gl.UNSIGNED_SHORT_5_6_5</code>, <code>gl.UNSIGNED_SHORT_4_4_4_4</code>, <code>gl.UNSIGNED_SHORT_5_5_5_1</code>, <code>gl.UNSIGNED_SHORT</code> ou <code>ext.HALF_FLOAT_OES</code> ;</li>
+    <li>un {{jsxref("Uint32Array")}} doit être utilisé si <code>type</code> est <code>gl.UNSIGNED_INT</code> ou <code>ext.UNSIGNED_INT_24_8_WEBGL</code> ;</li>
+    <li>un {{jsxref("Float32Array")}} doit être utilisé si <code>type</code> est <code>gl.FLOAT</code> ;</li>
+   </ul>
+  </li>
+  <li>{{domxref("ImageData")}},</li>
+  <li>{{domxref("HTMLImageElement")}},</li>
+  <li>{{domxref("HTMLCanvasElement")}},</li>
+  <li>{{domxref("HTMLVideoElement")}},</li>
+  <li>{{domxref("ImageBitmap")}}.</li>
+ </ul>
+ </dd>
+ <dt><code><strong>decalage</strong></code></dt>
+ <dd>(WebGL 2 seulement) Un décalage en octets {{domxref("GLintptr")}} dans le magasin de données du {{domxref("WebGLBuffer")}}. Utilisé pour télécharger des données vers la {{domxref ("WebGLTexture")}} liée, depuis le <code>WebGLBuffer</code> lié à la cible <code>PIXEL_UNPACK_BUFFER</code>.</dd>
+ <dd>
+ <ul>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Aucune.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
+</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('WebGL', "#5.14.8", "texImage2D")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>
+    <p>Définition initiale pour WebGL.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glTexImage2D.xml", "glTexImage2D")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>
+    <p>Page man de l’API OpenGL ES 2.0 (similaire).</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL2', "#3.7.6", "texImage2D")}}</td>
+   <td>{{Spec2('WebGL2')}}</td>
+   <td>Définition mise à jour pour WebGL.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 3.0', "glTexImage2D.xhtml", "glTexImage2D")}}</td>
+   <td>{{Spec2('OpenGL ES 3.0')}}</td>
+   <td>Page man de l’API OpenGL ES 3.0 (similaire).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.texImage2D")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.createTexture()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.bindTexture()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.texSubImage2D()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.compressedTexImage2D()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.copyTexImage2D()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getTexParameter()")}}</li>
+ <li>{{domxref("WEBGL_depth_texture")}}</li>
+ <li>{{domxref("OES_texture_float")}}</li>
+ <li>{{domxref("OES_texture_half_float")}}</li>
+ <li>{{domxref("EXT_sRGB")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglrenderingcontext/texparameter/index.html b/files/fr/web/api/webglrenderingcontext/texparameter/index.html
new file mode 100644
index 0000000000..221c3fdae9
--- /dev/null
+++ b/files/fr/web/api/webglrenderingcontext/texparameter/index.html
@@ -0,0 +1,179 @@
+---
+title: 'WebGLRenderingContext.texParameter[fi]()'
+slug: Web/API/WebGLRenderingContext/texParameter
+tags:
+  - API
+  - Méthode
+  - Reference
+  - Textures
+  - WebGL
+  - WebGLRenderingContext
+translation_of: Web/API/WebGLRenderingContext/texParameter
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>Les méthodes <strong><code>WebGLRenderingContext.texParameter[fi]()</code></strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> définissent les paramètres de texture.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var>gl</var>.texParameterf(GLenum <var>cible</var>, GLenum <var>nomp</var>, GLfloat <var>param</var>);
+void <var>gl</var>.texParameteri(GLenum <var>cible</var>, GLenum <var>nomp</var>, GLint <var>param</var>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>cible</dt>
+ <dd>Un {{domxref("GLenum")}} indiquant le point de liaison (cible). Valeurs possibles :
+ <ul>
+  <li><code>gl.TEXTURE_2D</code> : une texture bi-dimensionelle.</li>
+  <li><code>gl.TEXTURE_CUBE_MAP</code> : une texte appliquée sur un cube.</li>
+  <li>Lorsqu'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}} est utilisé, les valeurs suivantes sont en outre disponibles :
+   <ul>
+    <li><code>gl.TEXTURE_3D</code> : une texture tri-dimensionnelle.</li>
+    <li><code>gl.TEXTURE_2D_ARRAY</code> : une texture bi-dimensionnelle en tableau.</li>
+   </ul>
+  </li>
+ </ul>
+ </dd>
+</dl>
+
+<p>Le paramètre <code>nomp</code> est un {{domxref("Glenum")}} indiquant le paramètre de texture à définir. Le paramètre <code>param</code> est un {{domxref("GLfloat")}} ou un {{domxref("GLint")}} indiquant la valeur pour le paramètre <code>nomp</code> indiqué.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><code>pnom</code></th>
+   <th scope="col">Description</th>
+   <th scope="col"><code>param</code></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th colspan="3">Disponible en WebGL 1</th>
+  </tr>
+  <tr>
+   <td><code>gl.TEXTURE_MAG_FILTER</code></td>
+   <td>Filtre de grossissement de texture</td>
+   <td><code>gl.LINEAR</code> (valeur par défaut), <code>gl.NEAREST</code>.</td>
+  </tr>
+  <tr>
+   <td><code>gl.TEXTURE_MIN_FILTER</code></td>
+   <td>Filtre de réduction de texture</td>
+   <td><code>gl.LINEAR</code>, <code>gl.NEAREST</code>, <code>gl.NEAREST_MIPMAP_NEAREST</code>, <code>gl.LINEAR_MIPMAP_NEAREST</code>, <code>gl.NEAREST_MIPMAP_LINEAR</code> (valeur par défaut), <code>gl.LINEAR_MIPMAP_LINEAR</code>.</td>
+  </tr>
+  <tr>
+   <td><code>gl.TEXTURE_WRAP_S</code></td>
+   <td>Fonction d'emballage pour la coordonnée de texture <code>s</code></td>
+   <td><code>gl.REPEAT</code> (valeur par défaut),<code>gl.CLAMP_TO_EDGE</code>, <code>gl.MIRRORED_REPEAT</code>.</td>
+  </tr>
+  <tr>
+   <td><code>gl.TEXTURE_WRAP_T</code></td>
+   <td>Fonction d'emballage pour la coordonnée de texture <code>t</code></td>
+   <td><code>gl.REPEAT</code> (valeur par défaut),<code>gl.CLAMP_TO_EDGE</code>, <code>gl.MIRRORED_REPEAT</code>.</td>
+  </tr>
+  <tr>
+   <th colspan="3">Disponible en outre quand l'extension {{domxref("EXT_texture_filter_anisotropic")}} est utilisée</th>
+  </tr>
+  <tr>
+   <td><code>ext.TEXTURE_MAX_ANISOTROPY_EXT</code></td>
+   <td>Anisotropie maximum pour une texture</td>
+   <td>Une valeur {{domxref("GLfloat")}}.</td>
+  </tr>
+  <tr>
+   <th colspan="3">Disponible en outre quand un contexte WebGL 2 est utilisé</th>
+  </tr>
+  <tr>
+   <td><code>gl.TEXTURE_BASE_LEVEL</code></td>
+   <td>Niveau de mipmap de texture</td>
+   <td>Toutes valeurs int.</td>
+  </tr>
+  <tr>
+   <td><code>gl.TEXTURE_COMPARE_FUNC</code></td>
+   <td>Fonction de comparaison de texture</td>
+   <td><code>gl.LEQUAL</code> (valeur par défaut), <code>gl.GEQUAL</code>, <code>gl.LESS</code>, <code>gl.GREATER</code>, <code>gl.EQUAL</code>, <code>gl.NOTEQUAL</code>, <code>gl.ALWAYS</code>, <code>gl.NEVER</code>.</td>
+  </tr>
+  <tr>
+   <td><code>gl.TEXTURE_COMPARE_MODE</code></td>
+   <td>Mode de comparaison de texture</td>
+   <td><code>gl.NONE</code> (valeur défaut), <code>gl.COMPARE_REF_TO_TEXTURE</code>.</td>
+  </tr>
+  <tr>
+   <td><code>gl.TEXTURE_MAX_LEVEL</code></td>
+   <td>Niveau maximum de mipmap de texture en tableau</td>
+   <td>Toutes valeurs int.</td>
+  </tr>
+  <tr>
+   <td><code>gl.TEXTURE_MAX_LOD</code></td>
+   <td>
+    <p>Valeur de niveau-de-détail maximum de texture</p>
+   </td>
+   <td>Toutes valeurs float.</td>
+  </tr>
+  <tr>
+   <td><code>gl.TEXTURE_MIN_LOD</code></td>
+   <td>Valeur de niveau-de-détail minimum de texture</td>
+   <td>Toutes valeurs float.</td>
+  </tr>
+  <tr>
+   <td><code>gl.TEXTURE_WRAP_R</code></td>
+   <td>Fonction d'emballage pour la coordonnée de texture  <code>r</code></td>
+   <td><code>gl.REPEAT</code> (valeur par défaut), <code>gl.CLAMP_TO_EDGE</code>, <code>gl.MIRRORED_REPEAT</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Aucune.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
+</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('WebGL', "#5.14.8", "texParameter[fi]")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Définition initiale pour WebGL.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glTexParameter.xml", "glTexParameter")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>Page man de l’API OpenGL ES 2.0 API (similaire).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL2', "#3.7.6", "texParameter[fi]")}}</td>
+   <td>{{Spec2('WebGL2')}}</td>
+   <td>Définition mise à jour pour WebGL.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 3.0', "glTexParameter.xhtml", "glTexParameter")}}</td>
+   <td>{{Spec2('OpenGL ES 3.0')}}</td>
+   <td>Page man de l’API OpenGL ES 3.0 API (similaire).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request</p>
+
+<p>{{Compat("api.WebGLRenderingContext.texParameterf")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.getTexParameter()")}}</li>
+ <li>{{domxref("EXT_texture_filter_anisotropic")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglrenderingcontext/uniform/index.html b/files/fr/web/api/webglrenderingcontext/uniform/index.html
new file mode 100644
index 0000000000..56c97559ed
--- /dev/null
+++ b/files/fr/web/api/webglrenderingcontext/uniform/index.html
@@ -0,0 +1,99 @@
+---
+title: 'WebGLRenderingContext.uniform[1234][fi][v]()'
+slug: Web/API/WebGLRenderingContext/uniform
+tags:
+  - API
+  - Méthode
+  - Reference
+  - WebGL
+  - WebGLRenderingContext
+translation_of: Web/API/WebGLRenderingContext/uniform
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>Les méthodes <strong><code>WebGLRenderingContext.uniform[1234][fi][v]()</code></strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> indiquent les valeurs des variables uniform.</p>
+
+<div class="note">
+<p>Beaucoup des fonctions décrites ici ont des interfaces WebGL 2 étendues, qui peuvent être trouvées en {{domxref("WebGL2RenderingContext.uniform","WebGL2RenderingContext.uniform[1234][uif][v]()")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var>gl</var>.uniform1f(<var>emplacement</var>, <var>v0</var>);
+void <var>gl</var>.uniform1fv(<var>emplacement</var>, <var>valeur</var>);
+void <var>gl</var>.uniform1i(<var>emplacement</var>, <var>v0</var>);
+void <var>gl</var>.uniform1iv(<var>emplacement</var>, <var>valeur</var>);
+
+void <var>gl</var>.uniform2f(<var>emplacement</var>, <var>v0</var>, <var>v1</var>);
+void <var>gl</var>.uniform2fv(<var>emplacement</var>, <var>valeur</var>);
+void <var>gl</var>.uniform2i(<var>emplacement</var>, <var>v0</var>, <var>v1</var>);
+void <var>gl</var>.uniform2iv(<var>emplacement</var>, <var>valeur</var>);
+
+void <var>gl</var>.uniform3f(<var>emplacement</var>, <var>v0</var>, <var>v1</var>, <var>v2</var>);
+void <var>gl</var>.uniform3fv(<var>emplacement</var>, <var>valeur</var>);
+void <var>gl</var>.uniform3i(<var>emplacement</var>, <var>v0</var>, <var>v1</var>, <var>v2</var>);
+void <var>gl</var>.uniform3iv(<var>emplacement</var>, <var>valeur</var>);
+
+void <var>gl</var>.uniform4f(<var>emplacement</var>, <var>v0</var>, <var>v1</var>, <var>v2</var>, <var>v3</var>);
+void <var>gl</var>.uniform4fv(<var>emplacement</var>, <var>valeur</var>);
+void <var>gl</var>.uniform4i(<var>emplacement</var>, <var>v0</var>, <var>v1</var>, <var>v2</var>, <var>v3</var>);
+void <var>gl</var>.uniform4iv(<var>emplacement</var>, <var>valeur</var>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>emplacement</dt>
+ <dd>Un objet {{domxref("WebGLUniformLocation")}} contenant l'emplacement de l'attribut uniform à modifier.</dd>
+ <dt><code>valeur, v0, v1, v2, v3</code></dt>
+ <dd>La nouvelle valeur à utiliser pour la variable uniform. Types possibles :
+ <ul>
+  <li>Un {{jsxref("Number")}} flottant pour les valeurs flottantes (méthodes avec "f").</li>
+  <li>Une suite de nombres flottants (par exemple, un {{jsxref("Float32Array")}} ou un {{jsxref("Array")}} de nombres) pour les méthodes de vecteurs de flottants (méthodes avec "fv").</li>
+  <li>Un {{jsxref("Number")}} entier pour les valeurs entières (méthodes avec "i").</li>
+  <li>Un {{jsxref("int32Array")}} pour les méthodes de vecteur d'entiers (méthodes avec "iv").</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Aucune.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">gl.uniform1f(u_alpha, 0.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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.14.10", "uniform")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glUniform.xml", "glUniform")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>Page man de l'API OpenGL.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.uniform1f")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.uniformMatrix()")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglrenderingcontext/uniformmatrix/index.html b/files/fr/web/api/webglrenderingcontext/uniformmatrix/index.html
new file mode 100644
index 0000000000..ec173f0e68
--- /dev/null
+++ b/files/fr/web/api/webglrenderingcontext/uniformmatrix/index.html
@@ -0,0 +1,90 @@
+---
+title: 'WebGLRenderingContext.uniformMatrix[234]fv()'
+slug: Web/API/WebGLRenderingContext/uniformMatrix
+tags:
+  - API
+  - Matrice
+  - Reference
+  - Uniforms
+  - Variables Uniform
+  - WebGL
+  - WebGLAPI
+  - WebGLRenderingContext
+  - matrices
+  - uniformMatrix2fv
+  - uniformMatrix3fv
+  - uniformMatrix4fv
+translation_of: Web/API/WebGLRenderingContext/uniformMatrix
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>Les méthodes <strong><code>WebGLRenderingContext.uniformMatrix[234]fv()</code></strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> définissent des valeurs matricielles pour les variables uniform.</p>
+
+<p>Les trois versions de cette méthode (<code>uniformMatrix2fv()</code>, <code>uniformMatrix3fv()</code> et <code>unifomMatrix4fv()</code>) prennent comme valeur d'entrée des vecteurs à 2, 3 et 4 composantes, respectivement.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>WebGLRenderingContext</em>.uniformMatrix2fv(<em>emplacement</em>, <em>transposer</em>, <em>valeur</em>);
+<em>WebGLRenderingContext</em>.uniformMatrix3fv(<em>emplacement</em>, <em>transposer</em>, <em>valeur</em>);
+<em>WebGLRenderingContext</em>.uniformMatrix4fv(<em>emplacement</em>, <em>transposer</em>, <em>valeur</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>emplacement</code></dt>
+ <dd>Un objet {{domxref("WebGLUniformLocation")}} contenant l'emplacement de l'attribut uniform à modifier. L'emplacement est obtenu en utilisant {{domxref("WebGLRenderingContext.getAttribLocation", "getAttribLocation()")}}.</dd>
+ <dt><code>transposer</code></dt>
+ <dd>Un {{domxref("GLboolean")}} indiquant si la matrice doit être transposée. Doit être <code>false</code>.</dd>
+ <dt><code>valeur</code></dt>
+ <dd>
+ <p>Un {{jsxref("Float32Array")}} ou une suite de valeurs <code>GLfloat</code>.</p>
+ </dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p><code>undefined</code></p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">gl.uniformMatrix2fv(loc, false, [2.1, 2.2]);</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('WebGL', "#5.14.10", "uniformMatrix")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>
+    <p>Définition initiale.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glUniform.xml", "glUniform")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>
+    <p>Page man de l’API OpenGL.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.uniformMatrix2fv")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.uniform()")}}</li>
+ <li>{{domxref("WebGL2RenderingContext.uniformMatrix()")}} – versions WebGL 2 de ces méthodes.</li>
+</ul>
diff --git a/files/fr/web/api/webglrenderingcontext/useprogram/index.html b/files/fr/web/api/webglrenderingcontext/useprogram/index.html
new file mode 100644
index 0000000000..fe6f54a90c
--- /dev/null
+++ b/files/fr/web/api/webglrenderingcontext/useprogram/index.html
@@ -0,0 +1,82 @@
+---
+title: WebGLRenderingContext.useProgram()
+slug: Web/API/WebGLRenderingContext/useProgram
+tags:
+  - API
+  - Méthode
+  - Reference
+  - WebGL
+  - WebGLRenderingContext
+translation_of: Web/API/WebGLRenderingContext/useProgram
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>La méthode <strong><code>WebGLRenderingContext.useProgram()</code></strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> définit le {{domxref("WebGLProgram")}} spécifié comme faisant partie de l'état de rendu en cours.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var>gl</var>.useProgram(<var>programme</var>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>programme</dt>
+ <dd>Un {{domxref("WebGLProgram")}} à utiliser.</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Aucune.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var programme = gl.createProgram();
+
+// Attacher les shaders pré-existants
+gl.attachShader(programme, vertexShader);
+gl.attachShader(programme, fragmentShader);
+
+gl.linkProgram(programme);
+gl.useProgram(programme);
+</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('WebGL', "#5.14.9", "useProgram")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glUseProgram.xml", "glUseProgram")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>Page man de l'API OpenGL.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibilité_des_navigateurs">Browser compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.useProgram")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.createProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.deleteProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.linkProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.validateProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getProgramParameter()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglrenderingcontext/vertexattribpointer/index.html b/files/fr/web/api/webglrenderingcontext/vertexattribpointer/index.html
new file mode 100644
index 0000000000..e163e5bd32
--- /dev/null
+++ b/files/fr/web/api/webglrenderingcontext/vertexattribpointer/index.html
@@ -0,0 +1,256 @@
+---
+title: WebGLRenderingContext.vertexAttribPointer()
+slug: Web/API/WebGLRenderingContext/vertexAttribPointer
+tags:
+  - API
+  - Méthode
+  - Reference
+  - WebGL
+  - WebGLRenderingContext
+translation_of: Web/API/WebGLRenderingContext/vertexAttribPointer
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p class="summary">La méthode <strong><code>WebGLRenderingContext.vertexAttribPointer()</code> </strong>de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> spécifie la disposition en mémoire de l'objet de tampon vertex. Elle doit être appelée une fois pour chaque attribut de sommet.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <em>gl</em>.vertexAttribPointer(<em>indice</em>, <em>taille</em>, <em>type</em>, <em>normalise</em>, <em>pas</em>, <em>decalage</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>indice</code></dt>
+ <dd>Un {{domxref("GLuint")}} indiquant l'indice de l'attribut de sommet à modifier.</dd>
+ <dt><code>taille</code></dt>
+ <dd>Un {{domxref("GLint")}} indiquant le nombre de composantes par attribut de sommet. Doit être 1, 2, 3 ou 4.</dd>
+ <dt><code>type</code></dt>
+ <dd>Un {{domxref ("GLenum")}} spécifiant le type de données de chaque composante dans le tableau. Valeurs possibles :
+ <ul>
+  <li><code>gl.BYTE</code> : entier signé sur 8 bits, à valeurs dans [-128, 127]</li>
+  <li><code>gl.SHORT</code> : entier signé sur 16 bits, à valeurs dans [-32768, 32767]</li>
+  <li><code>gl.UNSIGNED_BYTE</code> : entier non signé sur 8 bits, à valeurs dans [0, 255]</li>
+  <li><code>gl.UNSIGNED_SHORT</code> : entier non signé sur 16 bits, à valeurs dans [0, 65535]</li>
+  <li><code>gl.FLOAT</code> : nombre flottant IEEE 32 bits</li>
+  <li>lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL context 2", "", 1)}}, la valeur suivante est en outre disponible :
+   <ul>
+    <li><code>gl.HALF_FLOAT</code> : nombre flottant IEEE 16 bits</li>
+   </ul>
+  </li>
+ </ul>
+ </dd>
+ <dt><code>normalise</code></dt>
+ <dd>Un {{domxref("GLboolean")}} indiquant si les valeurs des données entières doivent être normalisées dans une certaine plage lorsqu'elles sont converties en flottant.
+ <ul>
+  <li>Pour les types <code>gl.BYTE</code> et <code>gl.SHORT</code>, normalise les valeurs à [-1, 1] si <code>true</code>.</li>
+  <li>Pour les types <code>gl.UNSIGNED_BYTE</code> et <code>gl.UNSIGNED_SHORT</code>, normalise les valeurs à [0, 1] si <code>true</code>.</li>
+  <li>Pour les types <code>gl.FLOAT</code> et <code>gl.HALF_FLOAT</code>, ce paramètre est sans effet.</li>
+ </ul>
+ </dd>
+ <dt><code>pas</code></dt>
+ <dd>Un {{domxref ("GLsizei")}} spécifiant le décalage en octets entre le début des attributs de sommets consécutifs. Ne peut être supérieur à 255. Si la valeur de <code>pas</code> est 0, l'attribut est supposé être étroitement compacté, c'est-à-dire que les attributs ne sont pas entrelacés mais que chaque attribut se trouve dans un bloc distinct et que l'attribut du sommet suivant suit immédiatement le sommet en cours.</dd>
+ <dt><code>decalage</code></dt>
+ <dd>Un {{domxref ("GLintptr")}} spécifiant le décalage en octets de la première composante dans le tableau d'attributs de sommets. Doit être un multiple de <code>type</code>.</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Aucune.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<ul>
+ <li>Une erreur <code>gl.INVALID_VALUE</code> est déclenchée si <code>decalage</code> est négatif.</li>
+ <li>Une erreur <code>gl.INVALID_OPERATION</code> est déclenchée si  <code>pas</code> et <code>decalage</code> ne sont pas des multiples de la taille du type de données.</li>
+ <li>Une erreur  <code>gl.INVALID_OPERATION</code> est déclenchée si aucun WebGLBuffer n'est lié à la cible ARRAY_BUFFER.</li>
+ <li>Lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, une erreur  <code>gl.INVALID_OPERATION</code> est déclenchée si l'attribut du sommet est défini comme entier dans le shader de sommet (par ex., <code>uvec4</code> or <code>ivec4</code>, iau lieu de <code>vec4</code>).</li>
+</ul>
+
+<h2 id="Description">Description</h2>
+
+<p>Supposons que nous voulions afficher une géométrie 3D, et que pour cela, nous ayons besoin de fournir nos sommets au Shader de Sommet. Chaque sommet a un certain nombre d'attributs, tels que la position, le vecteur normal ou les coordonnées de texture, qui sont définis dans un {{jsxref("ArrayBuffer")}} et qui seront fournis à l'Objet de Tampon de Sommets (OTS). Grâce à cette méthode <code>gl.vertexAttribPointer()</code>, nous spécifions dans quel ordre les attributs sont stockés, et quel est leur type de données. De plus, nous devons inclure le pas, qui est la longueur totale en octets de tous les attributs pour un sommet. Également, nous devons appeler {{domxref("WebGLRenderingContext/enableVertexAttribArray", "gl.enableVertexAttribArray()")}} pour indiquer à WebGL que cet attribut doit être rempli avec les données de notre tampon de tableaux.</p>
+
+<p>Habituellement, votre géométrie 3D se trouve déjà dans un certain format binaire, de sorte que vous devez lire la spécification de ce format particulier pour comprendre la disposition en mémoire. Cependant, si vous concevez le format vous-même, ou si votre géométrie se trouve dans des fichiers texte (comme les fichiers Wavefront .obj) et doit être convertie en <code>ArrayBuffer</code> à l'exécution, vous êtes libre de choisir comment structurer la mémoire. Pour des performances optimales, entrelacez les attributs et utilisez le plus petit type de données représentant néanmoins fidèlement votre géométrie.</p>
+
+<p>Le nombre maximum d'attributs de vertex dépend de la carte graphique, et vous pouvez appeler <code>gl.getParameter(gl.MAX_VERTEX_ATTRIBS)</code> pour obtenir cette valeur. Sur les cartes graphiques haut de gamme, le maximum est de 16, sur les cartes graphiques de bas de gamme, la valeur sera inférieure.</p>
+
+<h3 id="Indice_d'attribut">Indice d'attribut</h3>
+
+<p>Pour chaque attribut, vous devez spécifier son indice. Cela est indépendant de l'emplacement à l'intérieur de la mémoire tampon de tableaux, de sorte que vos attributs peuvent être envoyés dans un ordre différent de celui dans lequel ils sont stockés dans le tampon de tableaux. Vous avez deux options :</p>
+
+<ul>
+ <li>Soit vous spécifiez l'index vous-même. Dans ce cas, vous appelerez {{domxref("WebGLRenderingContext.bindAttribLocation()", "gl.bindAttribLocation()")}} pour connecter un attribut nommé du shader de sommet à l'index que vous voulez utiliser. Cela doit être fait avant d'appeler {{domxref("WebGLRenderingContext.linkProgram()", "gl.linkProgram()")}}. Vous pouvez alors fournir ce même index à <code>gl.vertexAttribPointer()</code>.</li>
+ <li>En variante, vous pouvez utiliser l'index affecté par la carte graphique lors de la compilation du shader de sommet. Suivant la carte graphique, l'index varie, aussi devrez-vous appeler {{domxref("WebGLRenderingContext.getAttribLocation()", "gl.getAttribLocation()")}} pour trouver l'index, puis le fournir à <code>gl.vertexAttribPointer()</code>.<br>
+  Si vous utilisez WebGL 2, vous pouvez spécifier l'index vous-même dans le code du shader de sommet et remplacer la valeur par défaut utilisée par la carte graphique, par ex. <code>layout(location = 3) in vec4 position;</code> définirait l'attribut <code>"position"</code> à l'indice 3.</li>
+</ul>
+
+<h3 id="Attributs_entiers">Attributs entiers</h3>
+
+<p>Bien que le <code>ArrayBuffer</code> puisse être rempli à la fois d'entiers et de flottants, les attributs seront toujours convertis en flottant lorsqu'ils seront envoyés au shader de sommet. Si vous avez besoin d'utiliser des entiers dans votre code de shader de sommet, vous pouvez, soit reconvertir les flottants en entiers dans le shader de sommet (par exemple, <code>(int) floatNumber</code>), soit utiliser {{domxref("WebGL2RenderingContext.vertexAttribIPointer()", "gl.vertexAttribIPointer()")}} à partir de WebGL2.</p>
+
+<h3 id="Valeurs_d'attribut_par_défaut">Valeurs d'attribut par défaut</h3>
+
+<p>Le code de vertex shader peut inclure un certain nombre d'attributs, mais nous n'avons pas besoin de spécifier les valeurs pour chaque attribut. A la place, nous pouvons fournir une valeur par défaut qui sera identique pour tous les sommets. Nous pouvons appeler <code>{{domxref("WebGLRenderingContext.disableVertexAttribArray()", "gl.disableVertexAttribArray()")}}</code> pour indiquer à WebGL d'utiliser la valeur par défaut, tandis que l'appel à {{domxref("WebGLRenderingContext.enableVertexAttribArray ()", "gl.enableVertexAttribArray () ")}} lira les valeurs du buffer du tableau comme spécifié avec <code>gl.vertexAttribPointer()</code>.</p>
+
+<p>De façon similaire, si notre shader de sommet attend par ex. un attribut à 4 composantes avec <code>vec4</code>, mais que dans notre appel à <code>gl.vertexAttribPointer()</code>, nous définissons la taille à 2, alors WebGL définira les deux premières composantes en se basant sur le tampon des tableaux, tandis que les troisième et quatrième composantes prendront la valeur par défaut.</p>
+
+<p>La valeur par défaut est <code>vec4(0.0, 0.0, 0.0, 1.0)</code> par défaut, mais nous pouvons spécifier une valeur par défaut différente avec <code>{{domxref ("WebGLRenderingContext.vertexAttrib()", "gl.vertexAttrib[1234]f[v]()")}}</code>.</p>
+
+<p>Par exemple, votre shader de sommet peut utiliser une position et un attribut de couleur. La plupart des maillages ont leur couleur spécifiée au niveau des sommets, mais certains maillages ont une teinte uniforme. Pour ces maillages, il n'est pas nécessaire de définir la même couleur pour chaque sommet dans le tampon des tableaux, aussi vous utiliserez <code>gl.vertexAttrib4fv()</code> pour définir une couleur constante.</p>
+
+<h3 id="Interrogation_des_paramètres_en_cours">Interrogation des paramètres en cours</h3>
+
+<p>Vous pouvez appeler {{domxref ("WebGLRenderingContext.getVertexAttrib()", "gl.getVertexAttrib()")}} et {{domxref ("WebGLRenderingContext.getVertexAttribOffset()", "gl.getVertexAttribOffset()")}} pour obtenir les paramètres en cours d'un attribut, par ex., le type de données ou si l'attribut doit être normalisé. Gardez présent à l'esprit que ces fonctions WebGL ont des performances faibles et qu'il est préférable de stocker l'état dans votre application JavaScript. Cependant, ces fonctions sont idéales pour déboguer un contexte WebGL sans toucher au code de l'application.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Cet exemple montre comment envoyer vos attributs de sommet au programme shader. Nous utilisons une structure de données imaginaire, dans laquelle les attributs de chaque sommet sont stockés entrelacés avec une longueur de 20 octets par sommet :</p>
+
+<ol>
+ <li><strong>position :</strong> nous devons stocker les coordonnées X, Y et Z. Pour une précision maximale, nous utilisons des flottants 32 bits ; au total, cela utilise 12 octets ;</li>
+ <li><strong>vecteur normal :</strong> nous avons besoin de stocker les composantes X, Y et Z du vecteur normal, mais comme la précision n'est pas si importante que cela, nous utilisons des entiers signés sur 8 bits. Pour de meilleures performances, nous alignons les données sur 32 bits en stockant également une quatrième composante de valeur zéro, ce qui porte la taille totale à 4 octets. Également, nous indiquons à WebGL de normaliser les valeurs, car nos normales sont toujours dans la plage [-1, 1] ;</li>
+ <li><strong>coordonnées de texture :</strong> nous avons besoin de stocker les coordonnées U et V ; pour que ces nombres entiers non signés sur 16 bits offrent suffisamment de précision, la taille totale est de 4 octets. Nous indiquons également à WebGL de normaliser les valeurs à [0, 1].</li>
+</ol>
+
+<p>Par exemple, le sommet suivant :</p>
+
+<pre class="brush: json">{
+  "position": [1.0, 2.0, 1.5],
+  "normale": [1.0, 0.0, 0.0],
+  "coordTex": [0.5, 0.25]
+}
+</pre>
+
+<p>sera stocké dans le tampon des tableaux comme suit :</p>
+
+<table style="width: auto;">
+ <tbody>
+  <tr>
+   <td style="background-color: #ccf;">00 00 80 3F</td>
+   <td style="background-color: #ddf;">00 00 00 40</td>
+   <td style="background-color: #ccf;">00 00 0C 3F</td>
+   <td style="background-color: #cfc;">7F</td>
+   <td style="background-color: #dfd;">00</td>
+   <td style="background-color: #cfc;">00</td>
+   <td style="background-color: #dfd;">00</td>
+   <td style="background-color: #fcc;">7F FF</td>
+   <td style="background-color: #fdd;">3F FF</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Création_du_tampon_des_tableaux">Création du tampon des tableaux</h3>
+
+<p>Tout d'abord, nous créons dynamiquement le tampon des tableaux à partir de données JSON en utilisant un {{domxref("DataView")}}. Notez l'utilisation de <code>true</code>, car WebGL s'attend à ce que nos données soient en little-endian.</p>
+
+<pre class="brush: js">// Charger la géometrie avec fetch() et Response.json()
+const response = await fetch('assets/geometry.json');
+const sommets = await response.json();
+
+// Créer le tampon des tableaux
+const tampon = new ArrayBuffer(20 * sommets.length);
+// Remplir le tampon des tableaux
+const dv = new DataView(tampon);
+for (let i = 0; i &lt; sommets.length; i++) {
+  dv.setFloat32(20 * i, sommets[i].position[0], true);
+  dv.setFloat32(20 * i + 4, sommets[i].position[1], true);
+  dv.setFloat32(20 * i + 8, sommets[i].position[2], true);
+  dv.setInt8(20 * i + 12, sommets[i].normale[0] * 0x7F);
+  dv.setInt8(20 * i + 13, sommets[i].normale[1] * 0x7F);
+  dv.setInt8(20 * i + 14, sommets[i].normale[2] * 0x7F);
+  dv.setInt8(20 * i + 15, 0);
+  dv.setUint16(20 * i + 16, sommets[i].coordTex[0] * 0xFFFF, true);
+  dv.setUint16(20 * i + 18, sommets[i].coordTex[1] * 0xFFFF, true);
+}</pre>
+
+<p>Pour de meilleures performances, nous pourrions également effectuer la conversion JSON vers ArrayBuffer précédente du côté serveur, par ex. avec Node.js. Nous pourrions alors charger le fichier binaire et l'interpréter comme un tampon de tableaux :</p>
+
+<pre class="brush: js">const response = await fetch('assets/geometry.bin');
+const tampon = await response.arrayBuffer();
+</pre>
+
+<h3 id="Utiliser_le_tampon_de_tableaux_avec_WebGL">Utiliser le tampon de tableaux avec WebGL</h3>
+
+<p>Tout d'abord, nous créons un nouvel Objet Tampon de Sommets (OTS) et nous l'alimentons avec notre tampon de tableaux :</p>
+
+<pre class="brush: js">// Lier le tampon de tableaux à l'Objet Tampon de Sommets
+const ots = gl.createBuffer();
+gl.bindBuffer(gl.ARRAY_BUFFER, ots);
+gl.bufferData(gl.ARRAY_BUFFER, buffer, gl.STATIC_DRAW);
+</pre>
+
+<p>Ensuite, nous spécifions la disposition en mémoire du tampon de tableaux, soit en définissant nous-mêmes l'indice :</p>
+
+<pre class="brush: js, highlight:[3, 6, 9]">// Décrire la disposition du tampon :
+//1. position, non normalisé
+gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 20, 0);
+gl.enableVertexAttribArray(0);
+//2. vecteur normal, normalisé à [-1, 1]
+gl.vertexAttribPointer(1, 4, gl.BYTE, true, 20, 12);
+gl.enableVertexAttribArray(1);
+//3. coordonnées de texture, normalisées à [0, 1]
+gl.vertexAttribPointer(2, 2, gl.UNSIGNED_SHORT, true, 20, 16);
+gl.enableVertexAttribArray(2);
+
+// Définir les attributs dans le shader de sommet aux mêmes indices
+gl.bindAttribLocation(shaderProgram, 0, 'position');
+gl.bindAttribLocation(shaderProgram, 1, 'normal');
+gl.bindAttribLocation(shaderProgram, 2, 'texUV');
+// Du fait que indices des attributs ont changé, nous devons refaire l'édition de liens du shader
+// Noter que cela réinitialisera tous les uniforms qui avaient été précédemment définis.
+gl.linkProgram(shaderProgram);
+</pre>
+
+<p>soit en utilisant l'indice fourni par la carte graphique, au lieu de le définir nous-mêmes ; cela évite la réédition des liens du programme shader.</p>
+
+<pre class="brush: js, highlight:[2, 6, 10]">const positionLoc = gl.getAttribLocation(shaderProgram, 'position');
+gl.vertexAttribPointer(positionLoc, 3, gl.FLOAT, false, 20, 0);
+gl.enableVertexAttribArray(positionLoc);
+
+const normalLoc = gl.getAttribLocation(shaderProgram, 'normal');
+gl.vertexAttribPointer(normalLoc, 4, gl.BYTE, true, 20, 12);
+gl.enableVertexAttribArray(normalLoc);
+
+const texUVLoc = gl.getAttribLocation(shaderProgram, 'texUV');
+gl.vertexAttribPointer(texUVLoc, 2, gl.UNSIGNED_SHORT, true, 20, 16);
+gl.enableVertexAttribArray(texUVLoc);
+</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('WebGL', "#5.14.10", "vertexAttribPointer")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>
+    <p>Définition initiale.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glVertexAttribPointer.xml", "glVertexAttribPointer")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>
+    <p>Page man de l’API OpenGL.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.vertexAttribPointer")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://www.khronos.org/opengl/wiki/Vertex_Specification">Vertex Specification</a> sur le wiki OpenGL</li>
+</ul>
diff --git a/files/fr/web/api/webglrenderingcontext/viewport/index.html b/files/fr/web/api/webglrenderingcontext/viewport/index.html
new file mode 100644
index 0000000000..48458a42c5
--- /dev/null
+++ b/files/fr/web/api/webglrenderingcontext/viewport/index.html
@@ -0,0 +1,94 @@
+---
+title: WebGLRenderingContext.viewport()
+slug: Web/API/WebGLRenderingContext/viewport
+tags:
+  - API
+  - Méthode
+  - Reference
+  - WebGL
+  - WebGLRenderingContext
+translation_of: Web/API/WebGLRenderingContext/viewport
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>La méthode <strong><code>WebGLRenderingContext.viewport()</code></strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> définit le viewport, qui indique la transformation affine de x et de y, de coordonnées d'appareil normalisées en coordonnées de fenêtre.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var><em>void gl</em>.viewport</var><var>(x, y, largeur, hauteur);</var>
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Un {{domxref("GLint")}} indiquant la coordonnée horizontale du coin inférieur gauche de l'origine du viewport. Valeur par défaut : 0.</dd>
+ <dt><code>y</code></dt>
+ <dd>Un {{domxref("GLint")}} indiquant la coordonnée verticale du coin inférieur gauche de l'origine du viewport. Valeur par défaut : 0.</dd>
+ <dt>largeur</dt>
+ <dd>Un {{domxref("Glsizei")}} non négatif indiquant la largeur du viewport. Valeur par défaut : la largeur du canevas.</dd>
+ <dt>height</dt>
+ <dd>Un {{domxref("Glsizei")}} non négatif indiquant la hauteur du viewport. Valeur par défaut : la hauteur du canevas.</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Aucune.</p>
+
+<h3 id="Erreurs_déclenchées">Erreurs déclenchées</h3>
+
+<p>Si <em>largeur</em> ou <em>hauteur</em> est une valeur négative, une erreur <code>gl.INVALID_VALUE</code> est déclenchée.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Lorsque vous créez un contexte WebGL pour la première fois, la taille de la fenêtre correspondra à celle du canevas. Toutefois, si vous redimensionnez le canevas, vous devrez indiquer au contexte de WebGL une nouvelle définition de viewport. Dans cette situation, vous pouvez utiliser <code>gl.viewport</code>.</p>
+
+<pre class="brush: js">gl.viewport(0, 0, canevas.width, canevas.height);
+</pre>
+
+<p>La largeur et la hauteur de la fenêtre sont limitées à une plage dépendante de l'implémentation. Pour obtenir cette plage, vous pouvez utiliser la constante <code>MAX_VIEWPORT_DIMS</code>, qui renvoie un {{jsxref ("Int32Array")}}.</p>
+
+<pre class="brush: js">gl.getParameter(gl.MAX_VIEWPORT_DIMS);
+// Par ex., Int32Array[16384, 16384]
+</pre>
+
+<p>Pour obtenir le viewport en cours, faites une requête sur la constante <code>VIEWPORT</code>.</p>
+
+<pre class="brush: js">gl.getParameter(gl.VIEWPORT);
+// e.g. Int32Array[0, 0, 640, 480]
+</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('WebGL', "#5.14.4", "viewport")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glViewport.xml", "glViewport")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>Page man de l'API OpenGL.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">La table de compatibilité dans cette page est générée à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.viewport")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.scissor()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getParameter()")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglshader/index.html b/files/fr/web/api/webglshader/index.html
new file mode 100644
index 0000000000..45fa736678
--- /dev/null
+++ b/files/fr/web/api/webglshader/index.html
@@ -0,0 +1,109 @@
+---
+title: WebGLShader
+slug: Web/API/WebGLShader
+tags:
+  - Reference
+  - WebGL
+  - WebGLShader
+translation_of: Web/API/WebGLShader
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>Le <strong>WebGLShader</strong> fait partie de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> et peut être un shader de sommet ou de fragment. Un {{domxref ("WebGLProgram")}} requiert les deux types de shaders.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Pour créer un <strong>WebGLShader,</strong> utiliser {{domxref("WebGLRenderingContext.createShader")}}, puis reliez-y le code source GLSL en utilisant {{domxref("WebGLRenderingContext.shaderSource()")}}, et enfin, appelez {{domxref ("WebGLRenderingContext.compileShader()")}} pour terminer et compiler le shader. À ce stade, le WebGLShader n'est toujours pas sous une forme utilisable et doit toujours être relié à un {{domxref ("WebGLProgram")}}.</p>
+
+<pre class="brush: js">function creerShader (gl, codeSource, type) {
+  // Compile un shader de type soit gl.VERTEX_SHADER, soit gl.FRAGMENT_SHADER
+  var shader = gl.createShader( type );
+  gl.shaderSource( shader, codeSource );
+  gl.compileShader( shader );
+
+  if ( !gl.getShaderParameter(shader, gl.COMPILE_STATUS) ) {
+    var info = gl.getShaderInfoLog( shader );
+    throw 'Impossible de compiler le programme WebGL.\n\n' + info;
+  }
+  return shader;
+}
+</pre>
+
+<p>Voir {{domxref("WebGLProgram")}} pour des informations sur la liaison de shaders.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Création_d'un_shader_de_sommet">Création d'un shader de sommet</h3>
+
+<p>Notez qu'il existe de nombreuses autres stratégies pour écrire des chaînes de code source de shader et y accéder. Ces exemples sont à titre d'illustration seulement.</p>
+
+<pre class="brush: js">var sourceShaderDeSommet =
+  'attribute vec4 position;\n' +
+  'void main() {\n' +
+  '  gl_Position = position;\n' +
+  '}\n';
+
+// Utilisez la function creerShader de l'exemple ci-dessus
+var shaderDeSommet = creerShader(gl, sourceShaderDeSommet, gl.VERTEX_SHADER)
+</pre>
+
+<h3 id="Création_d'un_shader_de_fragment">Création d'un shader de fragment</h3>
+
+<pre class="brush: js">var sourceShaderDeFragment =
+  'void main() {\n' +
+  '  gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);\n' +
+  '}\n';
+
+// Utilisez la fonction creerShader de l'exemple ci-dessus
+var shaderDeFragment = creerShader(gl, sourceShaderDeFragment, gl.FRAGMENT_SHADER)
+</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('WebGL', "#5.8", "WebGLShader")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">La table de compatibilité de cette page est générée à partir de données structurées. Si vous souhaitez contribuer aux données, voyez <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez nous une pull request.</p>
+
+<p>{{Compat("api.WebGLShader.WebGLShader")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WebGLProgram")}}</li>
+ <li>{{domxref("WebGLRenderingContext.attachShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.bindAttribLocation()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.compileShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.createProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.createShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.deleteProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.deleteShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.detachShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getAttachedShaders()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getProgramParameter()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getShaderParameter()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getShaderInfoLog()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getShaderSource()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.linkProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.shaderSource()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.useProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.validateProgram()")}}</li>
+</ul>
diff --git a/files/fr/web/api/webgltexture/index.html b/files/fr/web/api/webgltexture/index.html
new file mode 100644
index 0000000000..e6aa357f6d
--- /dev/null
+++ b/files/fr/web/api/webgltexture/index.html
@@ -0,0 +1,74 @@
+---
+title: WebGLTexture
+slug: Web/API/WebGLTexture
+tags:
+  - API
+  - Reference
+  - WebGL
+translation_of: Web/API/WebGLTexture
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>L'interface WebGLTexture fait partie de l'<a href="/fr/docs/Web/API/WebGL_API">API WebGL</a> et représente un objet de texture opaque fournissant un stockage et un état pour les opérations de texturation.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>L'objet WebGLTexture ne définit aucune méthode ou propriété propre, et son contenu n'est pas directement accessible. Lors du travail avec des objets WebGLTexture, les méthodes suivantes du {{domxref("WebGLRenderingContext")}} sont utiles :</p>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.bindTexture()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.createTexture()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.deleteTexture()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isTexture()")}}</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Création_d'une_texture">Création d'une texture</h3>
+
+<pre class="brush: js">var canevas = document.getElementById('canvas');
+var gl = canevas.getContext('webgl');
+var texture = gl.createTexture();
+</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('WebGL', "#5.9", "WebGLTexture")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">La table de compatibilité des navigateurs de cette page est générée à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et de nous envoyer une "a pull request".</p>
+
+<p>{{Compat("api.WebGLTexture")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.bindTexture()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.createTexture()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.deleteTexture()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isTexture()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.compressedTexImage2D()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.compressedTexSubImage2D()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.copyTexImage2D()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.copyTexSubImage2D()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.generateMipmap()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getTexParameter()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.texImage2D()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.texSubImage2D()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.texParameterf()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.texParameteri()")}}</li>
+</ul>
diff --git a/files/fr/web/api/webrtc_api/index.html b/files/fr/web/api/webrtc_api/index.html
new file mode 100644
index 0000000000..a03e5682bc
--- /dev/null
+++ b/files/fr/web/api/webrtc_api/index.html
@@ -0,0 +1,209 @@
+---
+title: L'API WebRTC
+slug: Web/API/WebRTC_API
+tags:
+  - API
+  - API WebRTC
+  - Atterrissage
+  - Audio
+  - Conference
+  - Media
+  - Réseau
+  - Video
+  - WebRTC
+  - diffusion
+translation_of: Web/API/WebRTC_API
+---
+<div>{{APIRef("WebRTC")}}</div>
+
+<p><span class="seoSummary"><strong>WebRTC</strong> (Web Real-Time Communications) est une technologie qui permet aux applications et sites web de capturer et éventuellement de diffuser des médias audio et/ou vidéo, ainsi que d'échanger des données arbitraires entre les navigateurs sans passer par un intermédiaire.</span> L'ensemble de normes qui comprend WebRTC permet de partager des données et d'effectuer des téléconférences peer-to-peer, sans exiger que l'utilisateur installe des plug-ins ou tout autre logiciel tiers.</p>
+
+<p>WebRTC se compose de plusieurs API et protocoles interdépendants qui fonctionnent ensemble pour y parvenri. La documentation que vous trouverez ici vous aidera à comprendre les principes de base de WebRTC, comment configurer et utiliser les connexions de données et multimédias, et plus encore.</p>
+
+<h2 id="Concepts_et_utilisation_du_WebRTC">Concepts et utilisation du WebRTC</h2>
+
+<p>WebRTC a plusieurs objectifs et chevauche considérablement l'API Media Capture and Streams. Ensemble, ils offrent de puissantes capacités multimédias au web, notamment la prise en charge des conférences audio et vidéo, l'échange de fichiers, la gestion des idendités et l'interfaçage avec les systèmes téléphoniques hérités en envoyant des signaux {{Glossary("DTMF")}}. Les connexions entre pairs peuvent être établies sans nécessiter de pilotes ou de plug-ins spéciaux, et peuvent souvent être établies sans aucun serveur intermédiaire.</p>
+
+<p>Les connexions entre deux pairs sont créées à l'aide de - et représentées par - l'interface {{domxref("RTCPeerConnection")}}. Une fois la connexion établie et ouverte, des flux multimédias ({{domxref("MediaStream")}}s) et/ou des canaux de données ({{domxref("RTCDataChannel")}}s) peuvent être ajoutés à la connexion.</p>
+
+<p>Les flux multimédias peuvent être constitués de n'importe quel nombre de pistes d'informations multimédias; les pistes, qui sont représentées par des objets basés sur l'interface {{domxref("MediaStreamTrack")}}, peuvent contenir l'un des nombreux types de données multimédias, y compris audio, vidéo et texte (comme des sous-titres ou même des noms de chapitre). La plupart des flux se composent d'au moins une piste audio et probablement également d'une piste vidéo, et peuvent être utilisés pour envoyer et recevoir à la fois des médias en direct ou des informations multimédias stockées (comme un film diffusé en continu).</p>
+
+<p>Vous pouvez également utiliser la connexion entre deux pairs pour échanger des données binaires arbitraires à l'aide de l'interface {{domxref("RTCDataChannel")}}. Cela peut être utilisé pour les informations de canal arrière, l'échange de métadonnées, les paquets d'état du jeu, les transferts de fichiers ou même comme canal principal pour le transfert de données.</p>
+
+<p><em><strong>plus de détails et de liens vers des guides et didacticiels pertinents nécessaires</strong></em></p>
+
+<h2 id="Interfaces_WebRTC">Interfaces WebRTC</h2>
+
+<p>Étant donné que WebRTC fournit des interfaces qui fonctionnent ensemble pour accomplir une variété de tâches, nous avons divisé les interfaces dans la liste ci-dessous par catégorie. Veuillez consulter la barre latérale pour une liste alphabétique.</p>
+
+<h3 id="Configuration_et_gestion_de_la_connexion">Configuration et gestion de la connexion</h3>
+
+<p>Ces interfaces sont utilisées pour configurer, ouvrir et gérer les connexions WebRTC.</p>
+
+<dl>
+ <dt>{{domxref("RTCPeerConnection")}}</dt>
+ <dd>Représente une connexion WebRTC entre l'ordinateur local et un homologue distant. Il est utilisé pour gérer un flux de données efficace entre les deux pairs.</dd>
+ <dt>{{domxref("RTCDataChannel")}}</dt>
+ <dd>Représente un canal de données bidirectionnel entre deux homologues d'une connexion.</dd>
+ <dt>{{domxref("RTCDataChannelEvent")}}</dt>
+ <dd>Représente les événements qui se produisent lors de l'attachement d'un {{domxref("RTCDataChannel")}} à un {{domxref("RTCPeerConnection")}}. Le seul événement envoyé avec cette interface est {{event("datachannel")}}.</dd>
+ <dt>{{domxref("RTCSessionDescription")}}</dt>
+ <dd>Représente les paramètres d'une session. Chaque <code>RTCSessionDescription</code> se compose d'une description {{domxref("RTCSessionDescription.type", "type")}} indiquant quelle partie du processus de négociation offre / réponse elle décrit et du descripteur {{Glossary("SDP")}} du session.</dd>
+ <dt>{{domxref("RTCSessionDescriptionCallback")}}</dt>
+ <dd>Le RTCSessionDescriptionCallback est passé dans l'objet {{domxref("RTCPeerConnection")}} lors de la demande de création d'offres ou de réponses.</dd>
+ <dt>{{domxref("RTCStatsReport")}}</dt>
+ <dd>Fournit des informations détaillant les statistiques pour une connexion ou pour une piste individuelle sur la connexion; le rapport peut être obtenu en appelant {{domxref("RTCPeerConnection.getStats()")}}.</dd>
+ <dt>{{domxref("RTCIceCandidate")}}</dt>
+ <dd>Représente un serveur d'établissement de connectivité Internet (ICE) candidat pour l'établissement d'un {{domxref("RTCPeerConnection")}}.</dd>
+ <dt>{{domxref("RTCIceTransport")}}</dt>
+ <dd>Représente des informations sur un transport d'établissement de connectivité Internet (ICE).</dd>
+ <dt>{{domxref("RTCIceServer")}}</dt>
+ <dd>Définit comment se connecter à un seul serveur ICE (tel qu'un serveur STUN ou TURN).</dd>
+ <dt>{{domxref("RTCPeerConnectionIceEvent")}}</dt>
+ <dd>Représente les événements qui se produisent en relation avec les candidats ICE avec la cible, généralement un {{domxref("RTCPeerConnection")}}. Un seul événement est de ce type: {{event("icecandidate")}}.</dd>
+ <dt>{{domxref("RTCRtpSender")}}</dt>
+ <dd>Gère l'encodage et la transmission des données pour un {{domxref("MediaStreamTrack")}} sur un {{domxref("RTCPeerConnection")}}.</dd>
+ <dt>{{domxref("RTCRtpReceiver")}}</dt>
+ <dd>Gère la réception et le décodage des données pour un {{domxref("MediaStreamTrack")}} sur un {{domxref("RTCPeerConnection")}}.</dd>
+ <dt>{{domxref("RTCRtpContributingSource")}}</dt>
+ <dd>Contient des informations sur une source contributive donnée (CSRC), y compris l'heure la plus récente où un paquet que la source a contribué a été lu.</dd>
+ <dt>{{domxref("RTCTrackEvent")}}</dt>
+ <dd>Indique qu'un nouvel {{domxref("MediaStreamTrack")}} entrant a été créé et qu'un objet {{domxref("RTCRtpReceiver")}} associé a été ajouté à l'objet {{domxref("RTCPeerConnection")}}.</dd>
+ <dt>{{domxref("RTCConfiguration")}}</dt>
+ <dd>Utilisé pour fournir des options de configuration pour un <a href="/fr/docs/Web/API/RTCPeerConnection" title="The RTCPeerConnection interface represents a WebRTC connection between the local computer and a remote peer. It provides methods to connect to a remote peer, maintain and monitor the connection, and close the connection once it's no longer needed."><code>RTCPeerConnection</code></a>.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("RTCSctpTransport")}}</dt>
+ <dd>Fournit des informations qui décrivent un transport Stream Control Transmission Protocol (<strong>{{Glossary("SCTP")}}</strong>) et fournit aussi un moeyn d'accéder au transport Datagram Transport Layer Security (<strong>{{Glossary("DTLS")}}</strong>) sur lequel les paquets SCTP pour tous les canaux de données d'un <a href="/fr/docs/Web/API/RTCPeerConnection" title="The RTCPeerConnection interface represents a WebRTC connection between the local computer and a remote peer. It provides methods to connect to a remote peer, maintain and monitor the connection, and close the connection once it's no longer needed."><code>RTCPeerConnection</code></a> sont envoyés et reçus.</dd>
+</dl>
+
+<h3 id="Identité_et_sécurité">Identité et sécurité</h3>
+
+<p>L'API WebRTC comprend un certain nombre d'interfaces pour gérer la sécurité et l'identité.</p>
+
+<dl>
+ <dt>{{domxref("RTCIdentityProvider")}}</dt>
+ <dd>Permet à un agent utilisateur de demander qu'une assertion d'identité soit générée ou validée.</dd>
+ <dt>{{domxref("RTCIdentityAssertion")}}</dt>
+ <dd>Représente l'identité de l'homologue distant de la connexion actuelle. Si aucun pair n'a encore été défini et vérifié, cette interface renvoie <code>null</code>. Une fois défini, il ne peut pas être modifié.</dd>
+ <dt>{{domxref("RTCIdentityProviderRegistrar")}}</dt>
+ <dd>Enregistre un fournisseur d'identité (idP).</dd>
+ <dt>{{domxref("RTCIdentityEvent")}}</dt>
+ <dd>Représente une assertion d'identité générée par un fournisseur d'identité (idP). C'est généralement pour un {{domxref("RTCPeerConnection")}}. Le seul événement envoyé avec ce type est {{event("identityresult")}}.</dd>
+ <dt>{{domxref("RTCIdentityErrorEvent")}}</dt>
+ <dd>Représente une erreur associée au fournisseur d'identité (idP). C'est généralement pour un {{domxref("RTCPeerConnection")}}. Deux événements sont envoyés avec ce type: {{event("idpassertionerror")}} et {{event("idpvalidationerror")}}.</dd>
+ <dt>{{domxref("RTCCertificate")}}</dt>
+ <dd>Représente un certificat qu'un {{domxref("RTCPeerConnection")}} utilise pour s'authentifier.</dd>
+</dl>
+
+<h3 id="Téléphonie">Téléphonie</h3>
+
+<p>Ces interfaces sont liées à l'interactivité avec les réseaux téléphoniques publics commutés (RTPC).</p>
+
+<dl>
+ <dt>{{domxref("RTCDTMFSender")}}</dt>
+ <dd>Gère le codage et la transmission de la signalisation DTMF (Dual-tone multi-frequency) pour une {{domxref("RTCPeerConnection")}}.</dd>
+ <dt>{{domxref("RTCDTMFToneChangeEvent")}}</dt>
+ <dd>Indique l'occurence d'une multi-fréquence bicolore (DTMF). Cet événement ne bouillonne pas (sauf indication contraire) et n'est pas annulable (sauf indication contraire).</dd>
+</dl>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/WebRTC_API/Protocols">Introduction aux protocoles WebRTC</a></dt>
+ <dd>Cet article présente les protocoles sur lesquels l'API WebRTC est construite.</dd>
+ <dt><a href="/fr/docs/Web/Guide/API/WebRTC/WebRTC_architecture">Connectivité WebRTC</a></dt>
+ <dd>Un guide sur le fonctionnement des connexions WebRTC et sur la manière dont les différents protocoles et interfaces peuvent être utilisés ensemble pour créer de puissantes applications de communication.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebRTC_API/Session_lifetime">Durée de vie d'une session WebRTC</a></dt>
+ <dd>WebRTC vous permet de créer une communication d'égal à égal de données arbitraires, audio ou vidéo - ou toute combinaison de celles-ci - dans une application de navigateur. Dans cet article, nous examinerons la durée de vie d'une session WebRTC, de l'établissement de la connexion à la fermeture de la connexion lorsqu'elle n'est plus nécessaire.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling">Signalisation et appel vidéo bidirectionnel</a></dt>
+ <dd>Un tutoriel et un exemple qui transforme un système de chat basé sur WebSocket créé pour un exemple précédent et ajoute la prise en charge de l'ouverture d'appels vidéo entre les participants. La connexion WebSocket du serveur de discussion est utilisée pour la signalisation WebRTC.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebRTC_API/Using_data_channels">Utilisation des canaux de données WebRTC</a></dt>
+ <dd>Ce guide explique comment utiliser une connexion homologue et un {{domxref("RTCDataChannel")}} associé pour échanger des données arbitraires entre deux homologues.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebRTC_API/Using_DTMF">Utilisation de DTMF avec WebRTC</a></dt>
+ <dd>La prise en charge de WebRTC pour l'interaction avec les passerelles reliées aux systèmes téléphoniques de la vieille école inclut la prise en charge de l'envoi de tonalités DTMF à l'aide de l'interface {{domxref("RTCDTMFSender")}}. Ce guide montre comment procéder.</dd>
+</dl>
+
+<h2 id="Tutoriels">Tutoriels</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/WebRTC_API/adapter.js">Amélioration de la compatibilité à l'aide de WebRTC adapter.js</a></dt>
+ <dd>L'organisation WebRTC <a href="https://github.com/webrtc/adapter/">fournit sur GitHub l'adaptateur WebRTC</a> pour contourner les problèmes de compatibilité dans les implémentations WebRTC de différents navigateurs. L'adaptateur est un shim JavaScript qui permet à votre code d'être écrit selon la spécification afin qu'il "fonctionne simplement" dans tous les navigateurs prenant en charge WebRTC.</dd>
+ <dt><a href="/fr/docs/WebRTC/Prendre_des_photos_avec_la_webcam">Prendre des photos fixes avec WebRTC</a></dt>
+ <dd>Cet article explique comment utiliser WebRTC pour accéder à l'appareil photo sur un ordinateur ou un téléphone mobile avec prise en charge WebRTC et prendre une photo avec.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebRTC_API/Simple_RTCDataChannel_sample">Un exemple RTCDataChannel simple</a></dt>
+ <dd>L'interface {{domxref("RTCDataChannel")}} est une fonctionnalité qui vous permet d'ouvrir un canal entre deux pairs sur lequel vous pouvez envoyer et recevoir des données arbitraires. L'API est intentionnellement similaire à l'<a href="/fr/docs/Web/API/WebSockets_API">API WebSocket</a>, de sorte que le même modèle de programmation peut être utilisé pour chacun.</dd>
+</dl>
+
+<h2 id="Ressources">Ressources</h2>
+
+<h3 id="Protocoles">Protocoles</h3>
+
+<h4 id="Protocoles_propres_au_WebRTC">Protocoles propres au WebRTC</h4>
+
+<ul>
+ <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-alpn/"><cite>Négociation de protocole de couche application pour les communications Web en temps réel</cite></a></li>
+ <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-audio/"><cite>Codec audio WebRTC et exigences de traitement</cite></a></li>
+ <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-data-channel/"><cite>Canaux de données RTCWeb</cite></a></li>
+ <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-data-protocol/"><cite>Protocole de canal de données RTCWeb</cite></a></li>
+ <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-rtp-usage/"><cite>Communication Web en temps réel (WebRTC): transport multimédia et utilisation de RTP</cite></a></li>
+ <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-security-arch/"><cite>Architecture de sécurité WebRTC</cite></a></li>
+ <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-transports/"><cite>Transports pour RTCWEB</cite></a></li>
+</ul>
+
+<h4 id="Protocoles_de_support_associés">Protocoles de support associés</h4>
+
+<ul>
+ <li><a href="https://tools.ietf.org/html/rfc5245">Établissement de connectivité interactif (ICE): un protocole pour la traversée du traducteur d'adresses réseau (NAT) pour le protocole offre / réponse</a></li>
+ <li><a href="https://tools.ietf.org/html/rfc5389"><cite>Utilitaires de traversée de session pour NAT (STUN)</cite></a></li>
+ <li><a href="https://tools.ietf.org/html/rfc7064"><cite>Schéma d'URI pour les utilitaires de traversée de session pour le protocole NAT (STUN)</cite></a></li>
+ <li><a href="https://tools.ietf.org/html/rfc7065"><cite>Traversée à l'aide de relais autour des identificateurs de ressources uniformes NAT (TURN)</cite></a></li>
+ <li><a href="https://tools.ietf.org/html/rfc3264"><cite>Un modèle d'offre / réponse avec protocole de description de session (SDP)</cite></a></li>
+ <li><a href="https://datatracker.ietf.org/doc/draft-ietf-tram-turn-third-party-authz/"><cite>Extension des utilitaires de traversée de session pour NAT (STUN) pour l'autorisation de tiers</cite></a></li>
+</ul>
+
+<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('WebRTC 1.0')}}</td>
+   <td>{{Spec2('WebRTC 1.0')}}</td>
+   <td>La définition initiale de l'API de WebRTC.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Capture')}}</td>
+   <td>{{Spec2('Media Capture')}}</td>
+   <td>La définition initiale de l'objet véhiculant le flux de contenu multimédia.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Capture DOM Elements')}}</td>
+   <td>{{Spec2('Media Capture DOM Elements')}}</td>
+   <td>La définition initiale sur la façon d'obtenir un flux de contenu à partir d'éléments DOM</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>En plus de ces spécifications définissant l'API nécessaire pour utiliser WebRTC, il existe plusieurs protocoles, répertoriés sous <a href="#Protocols">ressources</a>.</p>
+
+<h2 class="Related_Topics" id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("MediaDevices")}}</li>
+ <li>{{domxref("MediaStreamEvent")}}</li>
+ <li>{{domxref("MediaStreamConstraints")}}</li>
+ <li>{{domxref("MediaStreamTrack")}}</li>
+ <li>{{domxref("MessageEvent")}}</li>
+ <li>{{domxref("MediaStream")}}</li>
+ <li><a href="https://hacks.mozilla.org/2015/06/firefox-multistream-and-renegotiation-for-jitsi-videobridge/">Firefox multi-flux et renégociation pour Jitsi Videobridge</a></li>
+ <li><a href="https://hacks.mozilla.org/2015/04/peering-through-the-webrtc-fog-with-socketpeer/">Peering via le brouillard WebRTC avec SocketPeer</a></li>
+ <li><a href="https://hacks.mozilla.org/2014/04/inside-the-party-bus-building-a-web-app-with-multiple-live-video-streams-interactive-graphics/">À l'intérieur du bus de fête: création d'une application Web avec plusieurs flux vidéo en direct + graphiques interactifs</a></li>
+</ul>
diff --git a/files/fr/web/api/websocket/close_event/index.html b/files/fr/web/api/websocket/close_event/index.html
new file mode 100644
index 0000000000..f1ed8b2ff0
--- /dev/null
+++ b/files/fr/web/api/websocket/close_event/index.html
@@ -0,0 +1,72 @@
+---
+title: close
+slug: Web/API/WebSocket/close_event
+translation_of: Web/API/WebSocket/close_event
+---
+<p>Le gestionnaire de fermuture (<strong>close</strong>) est exécuté lorsqu'une connexion avec un socket Web est fermée.</p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/websockets/">WebSocket</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">Event</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;"><a href="/en-US/docs/WebSockets/WebSockets_reference/WebSocket" title="/en-US/docs/WebSockets/WebSockets_reference/WebSocket">WebSocket</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Aucune</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Evénements_liés">Evénements liés</h2>
+
+<ul>
+ <li>{{event("open")}}</li>
+ <li>{{event("close")}}</li>
+ <li>{{event("error")}}</li>
+ <li>{{event("message")}}</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/WebSockets/Writing_WebSocket_client_applications">Ecrire des applications client WebSocket</a></li>
+</ul>
diff --git a/files/fr/web/api/websocket/index.html b/files/fr/web/api/websocket/index.html
new file mode 100644
index 0000000000..61d34d0086
--- /dev/null
+++ b/files/fr/web/api/websocket/index.html
@@ -0,0 +1,374 @@
+---
+title: WebSocket
+slug: Web/API/WebSocket
+tags:
+  - API
+  - WebSocket
+  - WebSockets
+translation_of: Web/API/WebSocket
+---
+<p>{{APIRef("Web Sockets API")}}{{ SeeCompatTable() }}</p>
+
+<p>L'objet WebSocket fournit une API permettant la création et la gestion d'une <span style="background-color: rgba(212, 221, 228, 0.14902); font-size: 14.4444446563721px; line-height: 23.3333339691162px;">connexion</span> <a href="/en/WebSockets" title="en/WebSockets">WebSocket</a> avec un serveur, ainsi que l'émission et la réception de données par l'intermédiaire de cette <span style="background-color: rgba(212, 221, 228, 0.14902); font-size: 14.4444446563721px; line-height: 23.3333339691162px;">connexion</span>.</p>
+
+<p>Le constructeur WebSocket accepte deux paramètres, un paramètre obligatoire et un facultatif:</p>
+
+<pre>WebSocket WebSocket(
+  in DOMString url,
+  in optional DOMString protocols
+);
+
+WebSocket WebSocket(
+  in DOMString url,
+  in optional DOMString[] protocols
+);
+</pre>
+
+<dl>
+ <dt><code>url</code></dt>
+ <dd>URL à laquelle se connecter; ce devrait être l'URL à laquelle le serveur WebSocket répondra.</dd>
+ <dt><code>protocols</code> {{ optional_inline() }}</dt>
+ <dd>Une chaîne de caractères spécifiant un protocole, ou <span style="font-size: 14.4444446563721px; line-height: 23.3333339691162px;">un tableau de chaîne de caractères (plusieurs protocoles)</span>. Ces chaînes sont utilisées pour indiquer les sous-protocoles, afin qu'un même serveur puisse implémenter de multiples sous-protocoles WebSocket (par exemple, vous pourriez souhaiter qu'un serveur soit capable de gérer différents types d'intéractions en fonction du protocole spécifié). Si vous ne passez aucune chaîne de caractères pour le(s) protocole(s), une chaîne vide est utilisée.</dd>
+</dl>
+
+<p>Le constructeur peut lancer des exceptions:</p>
+
+<dl>
+ <dt><code>SECURITY_ERR</code></dt>
+ <dd>Le port vers lequel la <span style="background-color: rgba(212, 221, 228, 0.14902); font-size: 14.4444446563721px; line-height: 23.3333339691162px;">connexion</span> est tentée est actuellement bloqué.</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h2 id="Method_overview" name="Method_overview">Vue d'ensemble des méthodes</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>void <a href="#close()">close</a>(in optional unsigned long code, in optional DOMString reason);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#send()">send</a>(in DOMString data);</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attributes" name="Attributes">Attributs</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Attribut</td>
+   <td class="header">Type</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>binaryType</code></td>
+   <td>{{DOMXref("DOMString")}}</td>
+   <td>Une chaîne de caractères indiquant le type de données binaires transmises par la connexion. Les valeurs possibles sont soit "blob" si des objets DOM {{ domxref("Blob") }} sont utilisés ou "arraybuffer" si des objets <a href="/en/JavaScript_typed_arrays/ArrayBuffer" title="en/JavaScript typed arrays/ArrayBuffer"><code>ArrayBuffer</code></a> sont utilisés.</td>
+  </tr>
+  <tr>
+   <td><code>bufferedAmount</code></td>
+   <td><code><a href="/en/unsigned_long" title="en/unsigned long">unsigned long</a></code></td>
+   <td>Le nombre d'octets de données mis en fil d'attente (n'étant pas encore transmis sur le réseau) en effectuant des appels à {{ manch("send") }}. Cette valeur n'est pas remise à zéro quand la connexion est fermée; elle continue d'augmenter si les appels à {{ manch("send") }} persistent. <strong>Lecture seule.</strong></td>
+  </tr>
+  <tr>
+   <td><code>extensions</code></td>
+   <td>{{DOMXref("DOMString")}}</td>
+   <td>Extensions sélectionnées par le serveur. Actuellement, c'est une chaîne de caractères vide ou une liste des extensions telle que décidée par la connexion.</td>
+  </tr>
+  <tr>
+   <td><code>onclose</code></td>
+   <td>{{DOMXref("EventListener")}}</td>
+   <td>Un gestionnaire d'évènement à appeler quand la valeur de l'attribut <code>readyState</code> de la connexion WebSocket devient <code>CLOSED</code>. Le gestionnaire reçoit un évènement <a href="/en/WebSockets/WebSockets_reference/CloseEvent" title="en/WebSockets/WebSockets reference/CloseEvent"><code>CloseEvent</code></a> nommé "close".</td>
+  </tr>
+  <tr>
+   <td><code>onerror</code></td>
+   <td>{{DOMXref("EventListener")}}</td>
+   <td><span style="background-color: rgba(212, 221, 228, 0.14902); font-size: 14.4444446563721px; line-height: 23.3333339691162px;">Un gestionnaire d'évènement à appeler quand une erreur survient</span>. L'évènement est un évènement de base, nommé "error".</td>
+  </tr>
+  <tr>
+   <td><code>onmessage</code></td>
+   <td>{{DOMXref("EventListener")}}</td>
+   <td><span style="background-color: rgba(212, 221, 228, 0.14902); font-size: 14.4444446563721px; line-height: 23.3333339691162px;">Un gestionnaire d'évènement à appeler</span> quand un message émis par le serveur est reçu. Le gestionnaire reçoit un évènement <a href="/en/WebSockets/WebSockets_reference/MessageEvent" title="en/WebSockets/WebSockets reference/MessageEvent"><code>MessageEvent</code></a> nommé "message".</td>
+  </tr>
+  <tr>
+   <td><code>onopen</code></td>
+   <td>{{DOMXref("EventListener")}}</td>
+   <td><span style="background-color: rgba(212, 221, 228, 0.14902); font-size: 14.4444446563721px; line-height: 23.3333339691162px;">Un gestionnaire d'évènement à appeler</span> quand la valeur de l'attribut <code>readyState</code> de la connexion WebSocket devient <code>OPEN</code>; cela indique que la connexion est prête à recevoir et émettre des données. L'évènement est un évènement de base nommé "open".</td>
+  </tr>
+  <tr>
+   <td><code>protocol</code></td>
+   <td>{{DOMXref("DOMString")}}</td>
+   <td>Une chaîne de caractères indiquant le nom du sous-protocole que le serveur a choisi; ce sera l'une des chaînes spécifiées dans le paramètre <code>protocols</code> lors de la création de l'objet WebSocket.</td>
+  </tr>
+  <tr>
+   <td><code>readyState</code></td>
+   <td><code><a href="/en/unsigned_short" title="en/unsigned short">unsigned short</a></code></td>
+   <td>Le statut (actuel) de la connexion; c'est une  valeur de {{ anch("Constantes de statut") }}. <strong>Lecture Seule.</strong></td>
+  </tr>
+  <tr>
+   <td><code>url</code></td>
+   <td>{{DOMXref("DOMString")}}</td>
+   <td>L'URL telle que déterminée par le constructeur. C'est toujours une URL absolue. <strong>Lecture Seule.</strong></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Constants" name="Constants">Constantes</h2>
+
+<h3 id="Constantes_de_statut">Constantes de statut</h3>
+
+<p>Ces constantes sont utilisées par l'attribut <code>readyState</code> pour décrire le statut de la connexion WebSocket.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Constant</td>
+   <td class="header">Value</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>CONNECTING</code></td>
+   <td><code>0</code></td>
+   <td>La connexion n'est pas encore établie.</td>
+  </tr>
+  <tr>
+   <td><code>OPEN</code></td>
+   <td><code>1</code></td>
+   <td>La connexion est établie et prête pour la communication.</td>
+  </tr>
+  <tr>
+   <td><code>CLOSING</code></td>
+   <td><code>2</code></td>
+   <td>La connexion est en train de se fermer.</td>
+  </tr>
+  <tr>
+   <td><code>CLOSED</code></td>
+   <td><code>3</code></td>
+   <td>La connexion est fermée ou n'a pas pu être établie.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Methods" name="Methods">Méthodes</h2>
+
+<h3 id="close()" name="close()">close()</h3>
+
+<p>Ferme la connexion Websocket ou abandonne la tentative de connexion. Si la connexion est déjà fermée (statut <code>CLOSED)</code>, cette méthode est sans effet.</p>
+
+<pre class="eval">void close(
+  in optional unsigned short code,
+  in optional DOMString reason
+);
+</pre>
+
+<h6 id="Parameters" name="Parameters">Paramètres</h6>
+
+<dl>
+ <dt><code>code</code> {{ optional_inline() }}</dt>
+ <dd>Une valeur numérique indiquant le code du statut décrivant pourquoi la connexion est fermée. Si ce paramètre n'est pas spécifié, une valeur par défaut de 1000 est utilisée (indiquant une fermeture standard de "transaction terminée"). Voir la <a href="/en/WebSockets/WebSockets_reference/CloseEvent#Status_codes" title="en/WebSockets/WebSockets reference/CloseEvent#Status codes">liste des codes de statut</a> sur la page de l'évènement <a href="/en/WebSockets/WebSockets_reference/CloseEvent" title="en/WebSockets/WebSockets reference/CloseEvent"><code>CloseEvent</code></a> pour les valeurs autorisées.</dd>
+ <dt><code>reason</code> {{ optional_inline() }}</dt>
+ <dd>Une chaîne de caractère <em>humainement-compréhensible</em> expliquant pourquoi la connexion est fermée. Cette chaîne ne doit pas excéder 123 octets <span style="font-size: 14.4444446563721px; line-height: 23.3333339691162px;">(et non </span><strong style="font-size: 14.4444446563721px; line-height: 23.3333339691162px;">pas</strong><span style="font-size: 14.4444446563721px; line-height: 23.3333339691162px;"> caractères) </span>de texte UTF-8.</dd>
+</dl>
+
+<h6 id="Exceptions_lancées">Exceptions lancées</h6>
+
+<dl>
+ <dt><code>INVALID_ACCESS_ERR</code></dt>
+ <dd>Un code invalide a été spécifié.</dd>
+ <dt><code>SYNTAX_ERR</code></dt>
+ <dd>La chaîne de caractères (paramètre <strong>reason</strong>) est trop longue ou contient des données invalides.</dd>
+</dl>
+
+<h6 id="Notes">Notes</h6>
+
+<p>Concernant Gecko: Cette méthode ne supporte aucun paramètre avant Gecko 8.0 {{ geckoRelease("8.0") }}.</p>
+
+<h3 id="send()" name="send()">send()</h3>
+
+<p>Émet des données vers le serveur via la connexion WebSocket.</p>
+
+<pre class="eval">void send(
+  in DOMString data
+);
+
+void send(
+  in ArrayBuffer data
+);
+
+void send(
+  in Blob data
+);
+</pre>
+
+<h6 id="Parameters" name="Parameters">Paramètres</h6>
+
+<dl>
+ <dt><code>data</code></dt>
+ <dd>Une chaîne de caractères à envoyer au serveur.</dd>
+</dl>
+
+<h6 id="Exceptions_lancées_2">Exceptions lancées</h6>
+
+<dl>
+ <dt><code>INVALID_STATE_ERR</code></dt>
+ <dd>La connexion n'est pas actuellent ouverte (valeur de l'attribut <em>readyState</em> <code>OPEN)</code>.</dd>
+ <dt><code>SYNTAX_ERR</code></dt>
+ <dd>La chaîne de caractères contient des données invalides.</dd>
+</dl>
+
+<h6 id="Remarques">Remarques</h6>
+
+<div class="note">
+<p><strong>Note:</strong> L'implémentation de la méthode <code>send()</code> dans Gecko diffère quelques peu des spécifications dans {{Gecko("6.0")}}; Gecko retourne une valeur booléenne (<code>boolean)</code> indiquant si la connexion est toujours ouverte (et, par extension, que les données ont bien été mise en fil d'émission ou émises); cette différence est corrigée dans {{Gecko("8.0")}}.</p>
+
+<p>Sur {{Gecko("11.0")}}, le support d'<code><a href="/en/JavaScript_typed_arrays/ArrayBuffer" title="en/JavaScript typed arrays/ArrayBuffer">ArrayBuffer</a></code> est implémenté, mais pas le type de données {{ domxref("Blob") }}.</p>
+</div>
+
+<h2 id="See_also" name="See_also">Exemple</h2>
+
+<pre class="brush: js">var socket = null;
+try {
+    // Connexion vers un serveur HTTP
+    // prennant en charge le protocole WebSocket ("ws://").
+    socket = new WebSocket("ws://localhost");
+
+    // ----- OU -----
+
+    // Connexion vers un serveur HTTPS
+    // prennant en charge le protocole WebSocket over SSL ("wss://").
+    socket = new WebSocket("wss://localhost");
+} catch (exception) {
+    console.error(exception);
+}
+
+// Récupération des erreurs.
+// Si la connexion ne s'établie pas,
+// l'erreur sera émise ici.
+socket.onerror = function(error) {
+    console.error(error);
+};
+
+// Lorsque la connexion est établie.
+socket.onopen = function(event) {
+    console.log("Connexion établie.");
+
+    // Lorsque la connexion se termine.
+    this.onclose = function(event) {
+        console.log("Connexion terminé.");
+    };
+
+    // Lorsque le serveur envoi un message.
+    this.onmessage = function(event) {
+        console.log("Message:", event.data);
+    };
+
+    // Envoi d'un message vers le serveur.
+    this.send("Hello world!");
+};
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Websockets", "#the-websocket-interface", "WebSocket")}}</td>
+   <td>{{Spec2("Websockets")}}</td>
+   <td>Definition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en/WebSockets/Writing_WebSocket_client_applications" title="en/WebSockets/Writing WebSocket client applications">Writing WebSocket client applications</a></li>
+ <li><a class="external" href="http://dev.w3.org/html5/websockets/" title="http://dev.w3.org/html5/websockets/">HTML5: WebSockets</a></li>
+</ul>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Support des sous-protocoles</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("6.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th><span style="font-family: open sans light,sans-serif; font-size: 15.5555562973022px; line-height: 16px;">Fonctionnalité</span></th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td><span style="font-size: 12.222222328186px; line-height: 20px;">Support basique</span></td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("7.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><span style="font-size: 12.222222328186px; line-height: 20px;">Support des sous-protocoles</span></td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("7.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Notes_pour_Gecko">Notes pour Gecko</h3>
+
+<p>Avec Gecko 6.0, le constructeur est préfixé; il vous faudra utiliser <code>MozWebSocket()</code>:</p>
+
+<pre class="brush: js">var socket = new MozWebSocket("ws<span class="plain">://www.example.com/socketserver</span>");
+</pre>
+
+<p>L'attribut <code>extensions</code> n'est pas supporté par Gecko avant Gecko 8.0.</p>
+
+<div class="note"><strong>Note:</strong> Avant {{Gecko("11.0")}}, les messages (sur le point d'être émis) envoyés avec la méthode {{ manch("send") }} étaient limités à 16 Mo. Leur taille peut maintenant atteindre 2 Go.</div>
+
+<p>{{ languages ( {"zh-tw": "zh_tw/WebSockets/WebSockets_reference/WebSocket"} ) }}</p>
diff --git a/files/fr/web/api/websockets_api/index.html b/files/fr/web/api/websockets_api/index.html
new file mode 100644
index 0000000000..56a1aab33f
--- /dev/null
+++ b/files/fr/web/api/websockets_api/index.html
@@ -0,0 +1,318 @@
+---
+title: WebSockets
+slug: Web/API/WebSockets_API
+translation_of: Web/API/WebSockets_API
+---
+<p>{{DefaultAPISidebar("Websockets API")}}</p>
+
+<p><strong>WebSocket</strong> est une technologie évoluée qui permet d'ouvrir un canal de communication bidirectionnelle entre un navigateur (côté client) et un serveur. Avec cette API vous pouvez envoyer des messages à un serveur et recevoir ses réponses de manière événementielle sans avoir à aller consulter le serveur pour obtenir une réponse.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note: </strong> Bien que les connexions WebSocket soient fonctionnellement similaires aux sockets standard de type Unix, elles ne sont pas liées.</p>
+</div>
+
+<h2 id="Interfaces">Interfaces  </h2>
+
+<dl>
+ <dt><a href="/fr/docs/WebSockets/Writing_WebSocket_client_applications" title="WebSockets/Writing WebSocket client applications">WebSocket</a></dt>
+ <dd>Interface principale pour se connecter à un serveur WebSocket. Il permet d'envoyer et de recevoir des données sur la connexion.</dd>
+ <dt><a href="/fr/docs/Web/API/CloseEvent">CloseEvent</a></dt>
+ <dd>Evénement envoyé par l'objet WebSocket lors de la fermeture de la connexion.</dd>
+ <dt><a href="/fr/docs/Web/API/MessageEvent">MessageEvent</a></dt>
+ <dd>Evénement envoyé par l'objet WebSocket lorsqu'un message est reçu par le serveur.</dd>
+</dl>
+
+
+
+<h2 id="Outils">Outils</h2>
+
+<div class="cleared row topicpage-table">
+<ul>
+ <li> <a href="https://humblenet.github.io/" style="">HumbleNet</a><span style=""> :Bibliothèque de réseau multiplateforme qui fonctionne dans un navigateur. Il s'agit bibliothèque écrite en C qui enveloppe WebSockets et WebRTC. Elle gomme toutes les différences qui existent entre les navigateurs et les logiciels, ce qui facilite la création d'une fonctionnalité de réseau multi-joueurs pour les jeux, par exemple,  et autres applications.</span></li>
+ <li><a href="https://github.com/uWebSockets/uWebSockets">µWebSockets</a>: Déclinaison plus légère et plus performante de WebSocket et écrite en <a href="https://isocpp.org/">C++11</a> et en <a href="https://nodejs.org/fr/">Node.js</a>.</li>
+ <li><a href="https://github.com/ClusterWS/ClusterWS">ClusteWS</a>: Framework léger, rapide et puissant qui permet de construire des application en <a href="https://nodejs.org/fr/">Node.js</a>.</li>
+ <li><a class="external" href="http://socket.io" title="http://socket.io/">Socket.IO</a>: API WebSocket puissante et multiplateformes en <a class="external" href="http://nodejs.org" title="http://nodejs.org/">Node.js</a>.</li>
+ <li><a href="https://socketcluster.io/#!/">SocketCluster</a>: Framework open source en temps réel en <a class="external" href="http://nodejs.org" title="http://nodejs.org/">Node.js</a>. Il prend en charge à la fois la communication directe client-serveur et la communication de groupe via les pub/sub canaux. Il est conçu pour s'adapter facilement à n'importe quel nombre de processus/hôtes et est idéal pour construire de chat de discution.</li>
+ <li><a class="link-https" href="https://github.com/Worlize/WebSocket-Node" title="https://github.com/Worlize/WebSocket-Node">WebSocket-Node</a>: API WebSocket coté serveur en <a class="external" href="http://nodejs.org" title="http://nodejs.org/">Node.js</a>.</li>
+ <li><a href="https://www.totaljs.com/">Total.js</a>: FrameWork pour web application en <a class="external" href="http://nodejs.org" title="http://nodejs.org/">Node.js</a>.</li>
+ <li><a href="https://www.npmjs.com/package/faye-websocket">Faye</a>: Combine WebSocket(bidirectionnelle) et EventSource(unidirectionnelle) , côté serveur et côté client en <a class="external" href="http://nodejs.org" title="http://nodejs.org/">Node.js</a>.</li>
+ <li><a href="http://signalr.net/">SignalR</a>: SignalR est une nouvelle bibliothèque pour les développeurs <a href="https://dotnet.microsoft.com/apps/aspnet">ASP.NET</a>. Elle simplifie l'ajout des WebSockets dans les applications. SignalR utilise les canaux  de WebSockets lorsqu'elles sont disponibles,  dans le cas contraire elle utilise d'autres technos, sans modifier votre application.</li>
+ <li><a href="https://caddyserver.com/docs/websocket">Caddy</a>: Serveur web capable de créer des WebSockets serveur/proxy(stdin/stdout, echo, cat, ...).</li>
+ <li><a href="https://github.com/websockets/ws">ws</a>: La plus populaire des WebSockets pour client &amp; serveur en <a class="external" href="http://nodejs.org" title="http://nodejs.org/">Node.js</a>.</li>
+ <li><a href="https://github.com/bigstepinc/jsonrpc-bidirectional">jsonrpc-bidirectional</a>: Asynchronous RPC which, on a single connection, may have functions exported on the server and, and the same time, on the client (client may call server, server may also call client).</li>
+ <li><a href="https://github.com/ninenines/cowboy">cowboy</a>: Cowboy est un petit serveur HTTP rapide et moderne pour Erlang/OTP basé sur WebSocket.</li>
+</ul>
+</div>
+
+<h2 id="Ressources_liées">Ressources liées</h2>
+
+<ul>
+ <li>
+  <p><a href="/en-US/docs/AJAX" title="AJAX">AJAX</a></p>
+ </li>
+ <li>
+  <p><a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a></p>
+ </li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>
+  <p><a class="external" href="http://tools.ietf.org/html/rfc6455">RFC 6455 - Le protocole WebSocket</a></p>
+ </li>
+ <li>
+  <p><a class="external" href="http://www.w3.org/TR/websockets/">Les spécifications de l'API WebSocket</a></p>
+ </li>
+ <li>
+  <p><a href="/en-US/docs/Server-sent_events" title="Server-sent_events">Server-Sent Events</a></p>
+ </li>
+</ul>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>
+    <p>Caractéristiques</p>
+   </th>
+   <th>
+    <p>Chrome</p>
+   </th>
+   <th>
+    <p>Firefox (Gecko)</p>
+   </th>
+   <th>
+    <p>Internet Explorer</p>
+   </th>
+   <th>
+    <p>Opera</p>
+   </th>
+   <th>
+    <p>Safari</p>
+   </th>
+  </tr>
+  <tr>
+   <td>
+    <p>Support de la version -76 {{obsolete_inline}}</p>
+   </td>
+   <td>
+    <p>6</p>
+   </td>
+   <td>
+    <p>{{CompatGeckoDesktop("2.0")}}</p>
+   </td>
+   <td>
+    <p>{{CompatNo}}</p>
+   </td>
+   <td>
+    <p>11.00 (désactivé)</p>
+   </td>
+   <td>
+    <p>5.0.1</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>Support de la version du protocole 7 {{obsolete_inline}}</p>
+   </td>
+   <td>
+    <p>{{CompatNo}}</p>
+   </td>
+   <td>
+    <p>{{CompatGeckoDesktop("6.0")}}<br>
+     {{property_prefix("Moz")}}</p>
+   </td>
+   <td>
+    <p>{{CompatNo}}</p>
+   </td>
+   <td>
+    <p>{{CompatNo}}</p>
+   </td>
+   <td>
+    <p>{{CompatNo}}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>Support de la version du Protocole 10 {{obsolete_inline}}</p>
+   </td>
+   <td>
+    <p>14</p>
+   </td>
+   <td>
+    <p>{{CompatGeckoDesktop("7.0")}}<br>
+     {{property_prefix("Moz")}}</p>
+   </td>
+   <td>
+    <p>HTML5 Labs</p>
+   </td>
+   <td>
+    <p>{{CompatUnknown}}</p>
+   </td>
+   <td>
+    <p>{{CompatUnknown}}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>Standard - RFC 6455 Support</p>
+   </td>
+   <td>
+    <p>16</p>
+   </td>
+   <td>
+    <p>{{CompatGeckoDesktop("11.0")}}</p>
+   </td>
+   <td>
+    <p>10</p>
+   </td>
+   <td>
+    <p>12.10</p>
+   </td>
+   <td>
+    <p>6.0</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>
+    <p>Caractéristiques</p>
+   </th>
+   <th>
+    <p>Android</p>
+   </th>
+   <th>
+    <p>Firefox Mobile (Gecko)</p>
+   </th>
+   <th>
+    <p>IE Mobile</p>
+   </th>
+   <th>
+    <p>Opera Mobile</p>
+   </th>
+   <th>
+    <p>Safari Mobile</p>
+   </th>
+  </tr>
+  <tr>
+   <td>
+    <p>Support de la version -76 {{obsolete_inline}}</p>
+   </td>
+   <td>
+    <p>{{CompatUnknown}}</p>
+   </td>
+   <td>
+    <p>{{CompatUnknown}}</p>
+   </td>
+   <td>
+    <p>{{CompatUnknown}}</p>
+   </td>
+   <td>
+    <p>{{CompatUnknown}}</p>
+   </td>
+   <td>
+    <p>{{CompatUnknown}}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>Support de la version du protocole 7 {{obsolete_inline}}</p>
+   </td>
+   <td>
+    <p>{{CompatUnknown}}</p>
+   </td>
+   <td>
+    <p>{{CompatUnknown}}</p>
+   </td>
+   <td>
+    <p>{{CompatUnknown}}</p>
+   </td>
+   <td>
+    <p>{{CompatUnknown}}</p>
+   </td>
+   <td>
+    <p>{{CompatUnknown}}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>Support de la version du protocole 8 (IETF draft 10) {{obsolete_inline}}</p>
+   </td>
+   <td>
+    <p>{{CompatUnknown}}</p>
+   </td>
+   <td>
+    <p>{{CompatGeckoMobile("7.0")}}</p>
+   </td>
+   <td>
+    <p>{{CompatUnknown}}</p>
+   </td>
+   <td>
+    <p>{{CompatUnknown}}</p>
+   </td>
+   <td>
+    <p>{{CompatUnknown}}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>Support du Standard - RFC 6455</p>
+   </td>
+   <td>
+    <p>16 (Chrome)</p>
+   </td>
+   <td>
+    <p>{{CompatGeckoDesktop("11.0")}}</p>
+   </td>
+   <td>
+    <p>{{CompatUnknown}}</p>
+   </td>
+   <td>
+    <p>12.10</p>
+   </td>
+   <td>
+    <p>6.0</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Notes_pour_Gecko">Notes pour Gecko</h3>
+
+<p>Le support des WebSockets dans Firefox suit les évolutions continuelles de la spécification WebSocket. Firefox 6 met en œuvre la version 7 du protocole sous-jacent, tandis que Firefox 7 mets en œuvre la version 8 (comme spécifié dans le draft 10 de l'IETF). Firefox mobile supporte WebSocket à partir de la version Firefox mobile 7.0.</p>
+
+<h4 id="Gecko_6.0">Gecko 6.0</h4>
+
+<p>Avant Gecko 6.0 {{geckoRelease("6.0")}}, il y avait un objet <code>WebSocket</code>, mal nommé, qui a fait supposer à certains sites que les services<code>WebSocket</code> services n'étaient pas prefixés ; cet objet a été renommé en <code>MozWebSocket</code>.</p>
+
+<h4 id="Gecko_7.0">Gecko 7.0</h4>
+
+<p>À partir de la version 7.0 de Gecko {{geckoRelease("7.0")}}, la préférence <code>network.websocket.max-connections</code> est utilisée pour déterminer le nombre maximum de connexions Websockets qui peuvent être ouvertes en même temps. La valeur par défaut est de 200.</p>
+
+<h4 id="Gecko_8.0">Gecko 8.0</h4>
+
+<p>À partir de la version 8.0 de Gecko {{geckoRelease("8.0")}}, l'extension "deflate-stream" du protocole WebSocket a été désactivée, car elle a été rendu obsolète dans les spécifications. Cela corrige des problèmes d'incompatibilité avec certains sites.</p>
+
+<h4 id="Gecko_11.0">Gecko 11.0</h4>
+
+<p>Avant la version 11.0 de Gecko, la taille maximum des messages entrants et sortants était limitée à 16 Mo. Elle peut maintenant atteindre une taille de 2 Go. Ce maximum est pourtant plus théorique que pratique à cause des limitations de mémoire de certains appareils (principalement avec les appareils mobiles). En pratique, des transferts de cette taille maximum vont échouer sur les appareils qui n'ont pas assez de mémoire.</p>
+
+<p>En outre, le support de l'envoi et la reception d'ArrayBuffer pour les données binaires à été réalisé.</p>
+
+<p>A partir de la veriosn 11.0 de Gecko 11.0, l'API WebSocket n'est plus préfixée.</p>
+
+<div class="warning"><strong>Attention:</strong> WebSocket a été désactivé dans les versions 4 et 5 de Firefox, principalement en raison de la découverte d'un <a class="external" href="http://www.ietf.org/mail-archive/web/hybi/current/msg04744.html" title="http://www.ietf.org/mail-archive/web/hybi/current/msg04744.html">problème de sécurité dans la conception du protocole</a>. Cela a été corrigé dans la version 6 de Firefox qui met en œuvre une nouvelle version du protocole.</div>
+
+<div></div>
diff --git a/files/fr/web/api/websockets_api/writing_a_websocket_server_in_java/index.html b/files/fr/web/api/websockets_api/writing_a_websocket_server_in_java/index.html
new file mode 100644
index 0000000000..ccd9f5ce9c
--- /dev/null
+++ b/files/fr/web/api/websockets_api/writing_a_websocket_server_in_java/index.html
@@ -0,0 +1,219 @@
+---
+title: Écrire un serveur WebSocket en Java
+slug: Web/API/WebSockets_API/Writing_a_WebSocket_server_in_Java
+translation_of: Web/API/WebSockets_API/Writing_a_WebSocket_server_in_Java
+---
+<h2 id="Introduction">Introduction</h2>
+
+<p>Cet exemple montre comment cérer une serveur d'API WebSocket API utilisant Java d'Oracle.</p>
+
+<p>Bien que d'autres languages exécutés côté serveur peuvent être utilisés pour créer un serveur de WebSocket, cet exemple utilise Java d'Oracle pour simplifier le code en exemple.</p>
+
+<p>Ce seveur respecte la <a href="http://tools.ietf.org/html/rfc6455" title="http://tools.ietf.org/html/rfc6455">RFC 6455</a>, dont il prend uniquement en charge les connexions depuis Chrome 16, Firefox 11, IE 10 et au delà.</p>
+
+<h2 id="Premiers_pas">Premiers pas</h2>
+
+<p>WebSockets communique via une connexion <a href="http://en.wikipedia.org/wiki/Transmission_Control_Protocol" title="http://en.wikipedia.org/wiki/Transmission_Control_Protocol">TCP (Transmission Control Protocol)</a>. La classe Java <a href="http://docs.oracle.com/javase/8/docs/api/java/net/ServerSocket.html">ServerSocket</a> est située dans le paquet <em>java.net</em>.</p>
+
+<h3 id="ServerSocket">ServerSocket</h3>
+
+<p>Constructeur :</p>
+
+<pre class="brush: java"><code><span class="memberNameLink">ServerSocket</span>(int port)</code></pre>
+
+<p>Lors de l'instanciation de la classe ServerSocket, celle-ci est liée au numéro de port renseigné par le paramètre <em>port</em>.</p>
+
+<p><span style="line-height: 1.572;">Voici comment implémenter ce que nous venons d'apprendre :</span></p>
+
+<pre class="brush: java">import java.net.ServerSocket;
+import java.net.Socket;
+
+public class Server{
+    public static void main(String[] args){
+        ServerSocket server = new ServerSocket(80);
+
+        System.out.println("Démarrage du serveur sur 127.0.0.1:80.\r\nAttente d’une connexion...");
+
+        Socket client = server.accept();
+
+        System.out.println("Un client s’est connecté.");
+    }
+}</pre>
+
+<h3 id="Socket">Socket</h3>
+
+<p>Méthodes :</p>
+
+<ul>
+ <li><code>java.net.</code><a href="http://docs.oracle.com/javase/8/docs/api/java/net/Socket.html" title="class in java.net">Socket</a><code> <span class="memberNameLink"><a href="http://docs.oracle.com/javase/8/docs/api/java/net/Socket.html#getInputStream--">getInputStream</a></span>()</code><br>
+  Renvoie un flux d’entrée pour ce socket.</li>
+ <li><code>java.net.</code><a href="http://docs.oracle.com/javase/8/docs/api/java/net/Socket.html" title="class in java.net">Socket</a><code> <span class="memberNameLink"><a href="http://docs.oracle.com/javase/8/docs/api/java/net/Socket.html#getOutputStream--">getOutputStream</a></span>()</code><br>
+  Renvoie un flux sortant pour ce socket.</li>
+</ul>
+
+<h3 id="OutputStream">OutputStream</h3>
+
+<p>Méthode :</p>
+
+<pre class="brush: java">write<code>(byte[] b, int off, int len)</code></pre>
+
+<p>En débutant à partir de la position <em>off</em>, écrit <em><code>len</code></em> octets du tableau d'octets fourni.</p>
+
+<h3 id="InputStream">InputStream</h3>
+
+<p>Méthodes :</p>
+
+<pre class="brush: java"><span class="brush: cpp" style="line-height: 1.572;">read</span><code>(byte[] b, int off, int len)</code></pre>
+
+<p>Reads up to <em>len</em> bytes of data from the input stream into an array of bytes.<em> </em></p>
+
+<p>Lit jusqu'à <em>len</em> octets de données depuis source d'entrée dans un tableau d'octets.</p>
+
+<p>Développons notre exemple.</p>
+
+<pre class="brush: java">Socket client = server.accept();
+
+System.out.println("Un client s’est connecté.");
+
+InputStream in = client.getInputStream();
+
+OutputStream out = client.getOutputStream();
+
+new Scanner(in, "UTF-8").useDelimiter("\\r\\n\\r\\n").next();</pre>
+
+<h2 id="Établissement_d‘une_liaison_(handshaking)">Établissement d‘une liaison (handshaking)</h2>
+
+<p>Quand un client se connecte à un serveur, il envoit une requête GET pour passer à une connexion WebSocket à partir d'une simple connexion HTTP. Ceci est appelé l’établissement d’une liaison.</p>
+
+<pre class="brush: java">import java.util.Scanner;
+import java.util.regex.Matcher;
+import java.util.regex.Pattern;
+
+//translate bytes of request to string
+String data = new Scanner(in,"UTF-8").useDelimiter("\\r\\n\\r\\n").next();
+
+Matcher get = Pattern.compile("^GET").matcher(data);
+
+if (get.find()) {
+
+} else {
+
+}</pre>
+
+<p>Créer une réponse est plus facile que de comprendre pourquoi vous devez le faire comme ça.</p>
+
+<p>Vous devez,</p>
+
+<ol>
+ <li>obtenir la valeur de la requête d’entête <em>Sec-WebSocket-Key</em> sans aucun espacement;</li>
+ <li>la lier avec « 258EAFA5-E914-47DA-95CA-C5AB0DC85B11 »;</li>
+ <li>en calculer les codes SHA-1 et Base64;</li>
+ <li>renvoyer le résultat comme valeur de l'entête de réponse <em>Sec-WebSocket-Accept</em> qui sera une partie d’une réponse HTTP.</li>
+</ol>
+
+<pre class="brush: java">if (get.find()) {
+    Matcher match = Pattern.compile("Sec-WebSocket-Key: (.*)").matcher(data);
+    match.find();
+    byte[] response = ("HTTP/1.1 101 Switching Protocols\r\n"
+            + "Connection: Upgrade\r\n"
+            + "Upgrade: websocket\r\n"
+            + "Sec-WebSocket-Accept: "
+            + DatatypeConverter
+            .printBase64Binary(
+                    MessageDigest
+                    .getInstance("SHA-1")
+                    .digest((match.group(1) + "258EAFA5-E914-47DA-95CA-C5AB0DC85B11")
+                            .getBytes("UTF-8")))
+            + "\r\n\r\n")
+            .getBytes("UTF-8");
+
+    out.write(response, 0, response.length);
+}
+</pre>
+
+<h2 id="Décoder_les_messages">Décoder les messages</h2>
+
+<p>Après l’établissement réussie d’une liaison, le client peut transmettre des messages au serveur, ils seront désormais encodés.</p>
+
+<p>Si nous envoyons « abcdef », nous obtenons :</p>
+
+<table>
+ <tbody>
+  <tr>
+   <td>129</td>
+   <td>134</td>
+   <td>167</td>
+   <td>225</td>
+   <td>225</td>
+   <td>210</td>
+   <td>198</td>
+   <td>131</td>
+   <td>130</td>
+   <td>182</td>
+   <td>194</td>
+   <td>135</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>- 129:</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">FIN (est-ce la totalité du message ?)</th>
+   <th scope="col">RSV1</th>
+   <th scope="col">RSV2</th>
+   <th scope="col">RSV3</th>
+   <th scope="col">Opcode</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>1</td>
+   <td>0</td>
+   <td>0</td>
+   <td>0</td>
+   <td>0x1=0001</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>FIN : votre message peut être transmis en plusieurs morceaux, mais restons simple pour l’instant.<br>
+ <span style="line-height: 1.572;">Opcode </span><em>0x1</em><span style="line-height: 1.572;"> signifie que ceci est un texte. </span><a href="http://tools.ietf.org/html/rfc6455#section-5.2" style="line-height: 1.572;" title="http://tools.ietf.org/html/rfc6455#section-5.2">Liste exhaustive des Opcodes</a></p>
+
+<p>- 134:</p>
+
+<p>If the second byte minus 128 is between 0 and 125, this is the length of the message. If it is 126, the following 2 bytes (16-bit unsigned integer), if 127, the following 8 bytes (64-bit unsigned integer, the most significant bit MUST be 0) are the length.</p>
+
+<p>Si le second octet moins 128 est entre 0 et 125, alors il s’agit de la longueur du message. Si c’est 126, les deux octets suivants (entier non signé de 16-bits), si c’est 127, les huit octets suivants (entier non signé de 64-bis, dont le poid ford doit être 0) sont la longueur.</p>
+
+<div class="note">
+<p>Je peux prendre 128 car le premier bit est toujours 1.</p>
+</div>
+
+<p>- 167, 225, 225 et 210 sont les octets de la clef à décoder. Cela change en permanence.</p>
+
+<p>- Les octets encodés restants constituent le message.</p>
+
+<h3 id="Algorithme_de_décodage">Algorithme de décodage</h3>
+
+<p>octet décodé = octet encodé XOR (position de l’octet ET LOGIQUE 0x3)th octet de la clef</p>
+
+<p>Exemple en Java :</p>
+
+<pre class="brush: java">byte[] decoded = new byte[6];
+byte[] encoded = new byte[] {198, 131, 130, 182, 194, 135};
+byte[] key = byte[4] {167, 225, 225, 210};
+
+for (int i = 0; i &lt; encoded.length; i++) {
+    decoded[i] = (byte)(encoded[i] ^ key[i &amp; 0x3]);
+}</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/WebSockets/Writing_WebSocket_servers">Écriture de serveurs WebSocket</a></li>
+</ul>
+
+<div id="cke_pastebin" style="position: absolute; top: 2209.23px; width: 1px; height: 1px; overflow: hidden; left: -1000px;"> </div>
diff --git a/files/fr/web/api/websockets_api/writing_websocket_client_applications/index.html b/files/fr/web/api/websockets_api/writing_websocket_client_applications/index.html
new file mode 100644
index 0000000000..92c3179ee8
--- /dev/null
+++ b/files/fr/web/api/websockets_api/writing_websocket_client_applications/index.html
@@ -0,0 +1,187 @@
+---
+title: Ecrire des applications client WebSocket
+slug: Web/API/WebSockets_API/Writing_WebSocket_client_applications
+translation_of: Web/API/WebSockets_API/Writing_WebSocket_client_applications
+---
+<p>Les WebSockets représentent une technologie, basée sur le protocole web socket, qui permet d'établir une session de communication bilatérale entre un navigateur web et un serveur. Un navigateur web est un exemple typique de client websocket typique mais le protocole n'est  dépendant d'aucune plateforme.</p>
+
+<div class="note"><strong>Note:</strong> Un exemple d'utilisation des WebSockets à travers un système de chat sera mis à disposition sous forme de code dès que nos infrastructures seront en mesure de supporter les WebSockets.</div>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Création_d'un_objet_WebSocket">Création d'un objet WebSocket</h2>
+
+<p>Pour utiliser le protocole WebSocket, il faut créer un objet <a href="/en/WebSockets/WebSockets_reference/WebSocket" title="en/WebSockets/WebSockets reference/WebSocket"><code>WebSocket</code></a> ; celui-ci essaiera automatiquement d'ouvrir une connexion avec le server.</p>
+
+<p>Le constructeur WebSocket accepte un paramètre obligatoire et un paramètre optionnel :</p>
+
+<pre>WebSocket WebSocket(
+  in DOMString url,
+  in optional DOMString protocols
+);
+
+WebSocket WebSocket(
+  in DOMString url,
+  in optional DOMString[] protocols
+);
+</pre>
+
+<dl>
+ <dt><code>url</code></dt>
+ <dd>L'URL à laquelle le client se connecte, et le serveur répond.</dd>
+ <dt><code>protocols</code> {{ optional_inline() }}</dt>
+ <dd>Soit une chaîne décrivant un protocole unique, soit une liste de chaînes décrivant chacune un protocole. Ces chaînes permettent d'indiquer des sous-protocoles, de façon à ce qu'un serveur puisse implémenter plusieurs sous-protocoles WebSocket (par example, on pourrait vouloir qu'un serveur soit capable de traiter différents types d'interactions en fonction du protocole spécifié). Si aucun protocole n'est spécifié, l'argument prend la valeur d'une chaîne vide.</dd>
+</dl>
+
+<p>Le constructeur peut renvoyer des exceptions:</p>
+
+<dl>
+ <dt><code>SECURITY_ERR</code></dt>
+ <dd>Le port sur lequel on essaie d'établir la connexion est bloqué.</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h3 id="Erreurs_de_connexion">Erreurs de connexion</h3>
+
+<p>Si une erreur se produit lors de la tentative de connexion, un  évènement nommé "error" est d'abord renvoyé à l'objet  <a href="/en/WebSockets/WebSockets_reference/WebSocket" title="WebSocket"><code>WebSocket</code></a> (invoquant ainsi son gestionnaire d'évènement <code>onerror</code>) suivi d'un évènement <a href="/en/WebSockets/WebSockets_reference/CloseEvent" title="CloseEvent"><code>CloseEvent</code></a> (qui invoque alors son gestionnaire d'évènement <code>onclose</code>) indiquant la raison de la clôture.</p>
+
+<p>A partir de Firefox 11, un message d'erreur descriptif est envoyé à la console de la plateforme Mozilla, et un code de fermeture tel que défini dans la <a class="external" href="http://tools.ietf.org/html/rfc6455#section-7.4" title="RFC 6455 Section 7.4">RFC 6455, Section 7.4</a> est envoyé à travers l'évènement <a href="/en/WebSockets/WebSockets_reference/CloseEvent" title="CloseEvent"><code>CloseEvent</code></a>.</p>
+
+<h3 id="Exemples">Exemples</h3>
+
+<p>Cet  exemple simple crée un nouvel objet WebSocket, qui se connecte au serveur à l'adresse <code><span class="nowiki">ws://www.example.com/socketserver</span></code>. Un protocole spécifique "protocolOne" est indiqué dans cette exemple, bien qu'il ne soit pas obligatoire.</p>
+
+<pre class="brush: js">var exampleSocket = new WebSocket("ws://www.example.com/socketserver", "protocolOne");
+</pre>
+
+<p>Lorsque la connexion est établie, la propriété <code>readyState</code> de l'objet <code>exampleSocket </code>prend la valeur <code>CONNECTING</code>. Sa valeur devient  <code>OPEN</code> une fois que la connexion est prête à transférer des données.</p>
+
+<p>Pour ouvrir une connexion flexible quant aux protocoles supportés, on spécifie une liste de protocoles:</p>
+
+<pre class="brush: js">var exampleSocket = new WebSocket("ws://www.example.com/socketserver", ["protocolOne", "protocolTwo"]);
+</pre>
+
+<p>Une fois la connexion établie (c'est-à-dire quand <code>readyState</code> a la valeur <code>OPEN</code>), la propriété <code>protocol</code> indique quel protocole le server a sélectionné.</p>
+
+<p>Dans les exemples ci-dessus on a remplacé  <code>http</code> par <code>ws</code>, et de la même façon on peut remplacer <code>https</code> par  <code>wss</code> . L'établissement d'une connexion WebSocket repose sur le méchanisme HTTP Upgrade, donc la requête pour l'upgrade de protocole est implicite lorsqu'on s'adresse au server HTTP avec <code><span class="nowiki">ws://www.example.com</span></code> ou <code><span class="nowiki">wss://www.example.com</span></code>.</p>
+
+<h2 id="Envoi_de_données_vers_le_serveur">Envoi de données vers le serveur</h2>
+
+<p>Une fois la connexion ouverte on peut commencer à tranférer des données vers le serveur en appelant la méthode  <a href="/en/WebSockets/WebSockets_reference/WebSocket#send()" title="en/WebSockets/WebSockets reference/WebSocket#send()"><code>send()</code></a> de l'objet <code>WebSocket</code> pour chaque message que l'on veut envoyer :</p>
+
+<p>Les données peuvent être envoyées sous forme de chaîne {{ domxref("Blob") }} ou de  <a href="/en/JavaScript_typed_arrays/ArrayBuffer" title="en/JavaScript typed arrays/ArrayBuffer"><code>ArrayBuffer</code></a>.</p>
+
+<div class="note"><strong>Note:</strong> Avant la version 11, Firefox supportait l'envoi de données uniquement sous forme de chaîne.</div>
+
+<p>Comme l'établissement d'une connexion est asynchrone, et peut potentiellemet échouer, appeler la méthode <code>send()</code> juste après la création d'un objet WebSocket peut ne pas fonctionner. Il est plus sûr de définir un gestionnaire d'évènement <code>onopen</code>, et de n'essayer d'envoyer des données que lorsqu'il est appelé.</p>
+
+<pre class="brush: js">exampleSocket.onopen = function (event) {
+  exampleSocket.send("Voici un texte que le serveur attend de recevoir dès que possible !");
+};
+</pre>
+
+<h3 id="Utilisation_de_JSON_pour_transmettres_des_objets">Utilisation de JSON pour transmettres des objets</h3>
+
+<p>Il peut être utile d'utiliser <a href="/en/JSON" title="en/JSON">JSON</a> pour envoyer des données complexes au serveur. Par exemple, un programme de chat peut interagir avec un serveur en utilisant un protocole qui implémente l'échange de paquets contenant des données encapsulées en JSON:</p>
+
+<pre class="brush: js">// Envoi d'un texte à tous les utilisateurs à travers le serveur
+function sendText() {
+  // Création d'un objet msg qui contient les données
+  // dont le serveur a besoin pour traiter le message
+  var msg = {
+    type: "message",
+    text: document.getElementById("text").value,
+    id:   clientID,
+    date: Date.now()
+  };
+
+  // Envoi de l'objet msg à travers une chaîne formatée en JSON
+  exampleSocket.send(JSON.stringify(msg));
+
+  // Efface le texte de l'élément input
+  // afin de recevoir la prochaine ligne de texte
+  // que l'utilisateur va saisir
+  document.getElementById("text").value = "";
+}
+</pre>
+
+<h2 id="Réception_de_données_du_serveur">Réception de données du serveur</h2>
+
+<p>WebSockets est une API orientée évènement; lorsqu'elle reçoit un message, un évènement "message" est envoyé au gestionnaire d'évènement <code>onmessage</code>. Pour écouter les données reçues, on peut écrire quelque chose comme:</p>
+
+<pre class="brush: js">exampleSocket.onmessage = function (event) {
+  console.log(event.data);
+}
+</pre>
+
+<h3 id="Réception_et_interprétation_d'objets_JSON">Réception et interprétation d'objets JSON</h3>
+
+<p>Considérons l'application de chatr évoquée dans {{ anch("Using JSON to transmit objects") }}. Le client peut recevoir différents tupes de paquets de données, tels que:</p>
+
+<ul>
+ <li>établissement d'une liaison (handshaking)</li>
+ <li>message texte</li>
+ <li>mise à jour de la liste d'utilisateurs</li>
+</ul>
+
+<p>Le code qui interprète ces messages entrants pourrait être:</p>
+
+<pre class="brush: js">exampleSocket.onmessage = function(event) {
+  var f = document.getElementById("chatbox").contentDocument;
+  var text = "";
+  var msg = JSON.parse(event.data);
+  var time = new Date(msg.date);
+  var timeStr = time.toLocaleTimeString();
+
+  switch(msg.type) {
+    case "id":
+      clientID = msg.id;
+      setUsername();
+      break;
+    case "username":
+      text = "&lt;b&gt;User &lt;em&gt;" + msg.name + "&lt;/em&gt; signed in at " + timeStr + "&lt;/b&gt;&lt;br&gt;";
+      break;
+    case "message":
+      text = "(" + timeStr + ") &lt;b&gt;" + msg.name + "&lt;/b&gt;: " + msg.text + "&lt;br&gt;";
+      break;
+    case "rejectusername":
+      text = "&lt;b&gt;Your username has been set to &lt;em&gt;" + msg.name + "&lt;/em&gt; because the name you chose is in use.&lt;/b&gt;&lt;br&gt;"
+      break;
+    case "userlist":
+      var ul = "";
+      for (i=0; i &lt; msg.users.length; i++) {
+        ul += msg.users[i] + "&lt;br&gt;";
+      }
+      document.getElementById("userlistbox").innerHTML = ul;
+      break;
+  }
+
+  if (text.length) {
+    f.write(text);
+    document.getElementById("chatbox").contentWindow.scrollByPages(1);
+  }
+};
+</pre>
+
+<p>Ici nous utilisons <a href="/en/JavaScript/Reference/Global_Objects/JSON/parse" title="en/JavaScript/Reference/Global Objects/JSON/parse"><code>JSON.parse()</code></a> pour convertir l'objet JSON en l'objet original, avant de l'examiner et le traiter.</p>
+
+<h3 id="Encodage_du_texte">Encodage du texte</h3>
+
+<p>Le texte reçu à travers une connexion WebSocket est encodé au format UTF-8.</p>
+
+<p>Avant Gecko 9.0 {{ geckoRelease("9.0") }}, certains charactères spéciaux dans une chaîne UTF-8 provoquaient l'interruption de la connexion. Maintenant Gecko accepte ces caractères.</p>
+
+<h2 id="Fermeture_de_la_connexion">Fermeture de la connexion</h2>
+
+<p>Quand on n'a plus besoin de la connexion WebSocket, on appelle la méthode <a href="/en/WebSockets/WebSockets_reference/WebSocket#close()" title="en/WebSockets/WebSockets reference/WebSocket#close()"><code>close()</code></a> de l'objet WebSocket:</p>
+
+<pre class="brush: js">exampleSocket.close();
+</pre>
+
+<p>Il peut être utile de vérifier la valeur de l'attribut <code>bufferedAmount</code> avant de fermer la connexion, pour s'assurer qu'il ne reste pas des données qui n'ont pas été transmises.</p>
+
+<h2 id="Considérations_de_sécurité">Considérations de sécurité</h2>
+
+<p>Il est déconseillé d'utiliser les WebSockets dans un environnement mixte, c'est-à-dire qu'il ne faut pas établir de connexion Websocket non sécurisée depuis une page chargée en HTTPS, et inversement. Certains navigateurs l'interdisent explicitement, comme Firefox à partir de la version 8.</p>
diff --git a/files/fr/web/api/websockets_api/writing_websocket_servers/index.html b/files/fr/web/api/websockets_api/writing_websocket_servers/index.html
new file mode 100644
index 0000000000..d3797e4f46
--- /dev/null
+++ b/files/fr/web/api/websockets_api/writing_websocket_servers/index.html
@@ -0,0 +1,254 @@
+---
+title: Écriture de serveurs WebSocket
+slug: Web/API/WebSockets_API/Writing_WebSocket_servers
+translation_of: Web/API/WebSockets_API/Writing_WebSocket_servers
+---
+<p>Un serveur WebSocket est une application TCP qui écoute sur n'importe quel port d'un serveur et suit un protocole spécifique, c'est aussi simple que cela. La création de son propre serveur TCP est quelque chose qui a tendance à effrayer alors qu'il n'est pas forcément très complexe de créer un serveur WebScoket sur la plateforme de votre choix.</p>
+
+<p>Un serveur WebSocket peut être écrit dans n'importe quel language de programmation qui supporte les "<a href="https://fr.wikipedia.org/wiki/Berkeley_sockets">Berkeley sockets</a>", par exemple C(++), python ou même PHP et JavaScript (avec nodejs). Ceci n'est pas un tutoriel destiné à un language particulier mais un guide aidant à l'écriture de votre propre serveur.</p>
+
+<p>Avant de débuter, vous <strong>devez</strong> connaître précisément le fonctionnement du protocole HTTP et disposer d'une certaine expérience sur celui-ci. Des connaissances sur les sockets TCP dans votre langage de développement est également précieux. Ce guide ne présente ainsi que le <u><em>minimum</em></u><em> </em>des connaissances requises et non un guide ultime.</p>
+
+<div class="note">
+<p>Lire la dernière spécification officielle sur les WebSockets <a href="http://datatracker.ietf.org/doc/rfc6455/?include_text=1">RFC 6455</a>. Les sections 1 et 4-7 sont particulièrement intéressantes pour ce qui nous occupe. La section 10 évoque la sécurité et doit être connue et mise en oeuvre avant d'exposer votre serveur au-delà du réseau local / lors de la mise en production. </p>
+</div>
+
+<p>Un serveur WebSocket est compris ici en "bas niveau" (<em>c'est-à-dire plus proche du langage machine que du langage humain</em>. Les WebSockets sont souvent séparés et spécialisés vis-à-vis de leurs homologues serveurs (pour des questions de montées en charge ou d'autres raisons), donc vous devez souvent utiliser un <a href="https://fr.wikipedia.org/wiki/Proxy_inverse">proxy inverse</a> (<em>c'est-à-dire de l'extérieur vers l'intérieur du réseau local, comme pour un serveur HTTP classique</em>) pour détecter les "poignées de mains" spécifiques au WebSocket, qui précédent l'échange et permettent d'aiguiller les clients vers le bon logiciel. Dans ce cas, vous ne devez pas ajouter à votre serveur des <em>cookies</em> et d'autres méthodes d'authentification. </p>
+
+<h2 id="La_poignée_de_mains_du_WebSocket"><a id="PoignéeDeMain" name="PoignéeDeMain">La "poignée de mains" du WebSocket</a></h2>
+
+<p>En tout premier lieu, le serveur doit écouter les connexions sockets entrantes utilisant le protocole TCP standard. Suivant votre plateforme, celui-ci peut déjà le faire pour vous. Pour l'exemple qui suit, nous prenons pour acquis que votre serveur écoute le domaine <em>exemple.com</em> sur le port 8000 et votre serveur socket répond aux requêtes de type GET sur le chemin <em>/chat</em>. </p>
+
+<div class="warning">
+<p><strong>Attention:</strong> Si le serveur peut écouter n'importe quel port, mais que vous décidez de ne pas utiliser un port standard (80 ou 443 pour SSL), cela peut créer en avant des problèmes avec les parefeux et/ou les proxys. De plus, gardez en mémoire que certains navigateur Web (notablement Firefox 8+), n'autorisent pas les connexions WebSocket non-SSL sur une page SSL. </p>
+</div>
+
+<p>La <em>poignée de mains</em> est la partie "Web" dans les WebSockets : c'est le pont entre le protocole HTTP et le WebSocket. Durant cette poignée, les détails (les paramètres) de la connexion sont négociés et l'une des parties peut interromptre la transaction avant la fin si l'un des termes ne lui est pas autorisé / ne lui est pas possible. Le serveur doit donc être attentif à comprendre parfaitement les demandes et attentes du client, sans quoi des procédures de sécurité seront déclenchées. </p>
+
+<h3 id="La_requête_de_poignée_de_mains_côté_client">La requête de <em>poignée de mains</em> côté client </h3>
+
+<p>Même si vous construisez votre serveur au profit des WebSockets, votre client doit tout de même démarrer un processus dit de <em>poignée de main</em>. Vous devez donc savoir comment interprêter cette requête. En premier, le <strong>client </strong>enverra tout d'abord une requête HTTP correctement formée. La requête <strong>doit </strong>être à la version 1.1 ou supérieure et la méthode <strong>doit </strong>être de type GET : </p>
+
+<pre>GET /chat HTTP/1.1
+Host: exemple.com:8000
+<strong>Upgrade: websocket</strong>
+<strong>Connection: Upgrade</strong>
+Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
+Sec-WebSocket-Version: 13
+
+</pre>
+
+<p>Le client peut solliciter des extensions de protocoles ou des sous-protocoles à cet instant ; voir <a href="#Miscellaneous">Miscellaneous</a> pour les détails. En outre, des en-têtes communs tel que <em>User-Agent</em>, <em>Referer</em>, <em>Cookie</em> ou des en-têtes d'authentification peuvent être envoyés par la même requête : leur usage est laissé libre car ils ne se rapportent pas directement au WebSocket et au processus de poignée de main. A ce titre il semble préférable de les ignorer : d'ailleurs dans de nombreuses configurations communes, un proxy inverse les aura finalement déjà traitées. </p>
+
+<p>Si un des entêtes n'est pas compris ou sa valeur n'est pas correcte, le serveur devrait envoyer une réponse  "<a href="https://developer.mozilla.org/en-US/docs/HTTP/Response_codes#400">400 Bad Request</a>" (<em>erreur 400 : la requête est incorrecte</em>) et clore immédiatement la connexion. Il peut par ailleurs indiquer la raison pour laquelle la poignée de mains a échoué dans le corps de réponse HTTP, mais le message peut ne jamais être affiché par le navigateur (<em>en somme, tout dépend du comportement du client</em>). Si le serveur ne comprend pas la version de WebSockets présentée, il doit envoyer dans la réponse un entête <em>Sec-WebSocket-Version</em> correspondant à la ou les version-s supportée-s. Ici le guide explique la version 13, la plus récente à l'heure de l'écriture du tutoriel (<em>voir le tutoriel en version anglaise pour la date exacte ; il s'agit là d'une traduction</em>). Maintenant, nous allons passer à l'entête attendu : <em>Sec-WebSocket-Key</em>.</p>
+
+<div class="note">
+<p><strong>Astuce:</strong>  Un grand nombre de navigateurs enverront un  <a href="https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS#Origin"><code>Entête d'origine</code></a>. Vous pouvez alors l'utiliser pour vérifier la sécurité de la transaction (par exemple vérifier la similitude des domaines, listes blanches ou noires, etc.) et éventuellement retourner une réponse <a href="https://developer.mozilla.org/en-US/docs/HTTP/Response_codes#403">403 Forbidden</a> si l'origine ne vous plaît pas. Toutefois garder à l'esprit que cet entête peut être simulé ou trompeur (il peut être ajouté manuellement ou lors du transfert). De nombreuses applications refusent les transactions sans celui-ci. </p>
+</div>
+
+<div class="note">
+<p><strong>Astuce:</strong> L'URI de la requête (<code>/chat </code>dans notre cas), n'a pas de signification particulièrement dans les spécifications en usage : elle permet simplement, par convention, de disposer d'une multitude d'applications en parallèle grâce à WebSocket. Par exemple <code>exemple.com/chat</code> peut être associée à une API/une application de dialogue multiutilisateurs lorsque <code>/game</code> invoquera son homologue pour un jeu. </p>
+</div>
+
+<div class="note">
+<p><strong>Note:</strong> <a href="https://developer.mozilla.org/en-US/docs/HTTP/Response_codes">Les codes réguliers (<em>c-à-d défini par le protocole standard</em>) HTTP</a> ne peuvent être utilisés qu'<strong><em>avant</em></strong> la poignée : ceux après la poignée, sont définis d'une manière spécifique dans la section 7.4 de la documentation sus-nommée. </p>
+</div>
+
+<h3 id="La_réponse_du_serveur_lors_de_la_poignée_de_mains">La réponse du serveur lors de la poignée de mains </h3>
+
+<p>Lorsqu'il reçoit la requête du client, le serveur doit envoyer une réponse correctement formée dans un format non-standard HTTP et qui ressemble au code ci-dessous. Gardez à l'esprit que chaque entête se termine par un saut de ligne : <em>\r\n</em> ; un saut de ligne doublé lors de l'envoi du dernier entête pour séparer du reste du corps (même si celui-ci est vide). </p>
+
+<pre><strong>HTTP/1.1 101 Switching Protocols</strong>
+Upgrade: websocket
+Connection: Upgrade
+<strong>Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
+
+</strong></pre>
+
+<p>En sus, le serveur peut décider de proposer des extensions de protocoles ou des sous-protocoles à cet instant ; voir <a href="#Miscellaneous">Miscellaneous</a> pour les détails. L'entête Sec-WebSocket-Accept nous intéresse ici : le serveur doit la former depuis l'entête Sec-WebSocket-Key envoyée précédemment par le client. Pour l'obtenir, vous devez concaténater (<em>rassembler</em>) la valeur de <em>Sec-WebSocket-Key</em> et "<em>258EAFA5-E914-47DA-95CA-C5AB0DC85B11</em>" (valeur fixée par défaut : c'est une "<a href="https://en.wikipedia.org/wiki/Magic_string" style="line-height: 1.5em;">magic string</a>") puis procéder au hash par la méthode <a href="https://en.wikipedia.org/wiki/SHA-1" style="line-height: 1.5em;">SHA-1</a> du résultat et retourner le format au format <a href="https://en.wikipedia.org/wiki/Base64" style="line-height: 1.5em;">base64</a>. </p>
+
+<div class="note">
+<p><strong>Pour information / pour mémoire :</strong> Ce processus qui peut paraître inutilement complexe, permet de certifier que le serveur et le client sont bien sur une base WebSocket et non une requête HTTP  (qui serait alors mal interprétée). </p>
+</div>
+
+<p>Ainsi si la clé (la valeur de l'entête du client) était "<code>dGhlIHNhbXBsZSBub25jZQ==</code>", le retour (<em><u>Accept</u> * dans la version d'origine du tutoriel</em>) sera : "<code>s3pPLMBiTxaQ9kYGzzhZRbK+xOo=</code>". Une fois que le serveur a envoyé les entêtes attendues, alors la poignée de mains est considérée comme effectuée et vous pouvez débuter l'échange de données ! </p>
+
+<div class="note">
+<p>Le serveur peut envoyer à ce moment, d'autres entêtes comme par exemple Set-Cookie, ou demander une authenficiation ou encore une redirection via les codes standards HTTP et ce <em><strong>avant </strong></em>la fin du processus de poignée de main. </p>
+</div>
+
+<h3 id="Suivre_les_clients_confirmés">Suivre les clients confirmés </h3>
+
+<p>Cela ne concerne pas directement le protocole WebSocket, mais mérite d'être mentionné maintenant : votre serveur pourra suivre le socket client : il ne faut donc pas tenter une poignée de mains supplémentaire avec un client déjà confirmé. Un même client avec la même IP pourrait alors se connecter à de multiples reprises, mais être finalement rejeté et dénié par le serveur si les tentatives sont trop nombreuses selon les règles pouvant être édictées pour éviter les attaques dites de <a href="https://en.wikipedia.org/wiki/Denial_of_service">déni de service</a>. </p>
+
+<h2 id="L'échange_de_trames_de_données">L'échange de trames de données </h2>
+
+<p>Le client ou le serveur peuvent choisir d'envoyer un message à n'importe quel moment à partir de la fin du processus de poignée de mains : c'est la magie des WebSockets (une connexion permanente). Cependant, l'extraction d'informations à partir des trames de données n'est pas une expérience si... magique. Bien que toutes les trames suivent un même format spécifique, les données allant du client vers le serveur sont masquées en utilisant le <a href="https://en.wikipedia.org/wiki/XOR_cipher">cryptage XOR</a> (avec une clé de 32 bits). L'article 5 de la spécification décrit en détail ce processus. </p>
+
+<h3 id="Format">Format</h3>
+
+<div class="warning">
+<p><strong>Note du traducteur</strong> : Dans cette partie, <code>payload </code>équivaut en bon français à <em>charge utile</em>. C'est-à-dire les données qui ne font pas partie du fonctionnement de la trame mais de l'échange entre le serveur et le client. Ainsi j'ai traduit <code>payload data comme des <em>données utiles. </em></code></p>
+</div>
+
+<p>Chaque trame (dans un sens ou dans un autre) suit le schéma suivant : </p>
+
+<pre style="float: left; margin-right: 20px;"> <strong>0</strong>               <strong>1</strong>               <strong>2</strong>               3
+ 0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7
++-+-+-+-+-------+-+-------------+-------------------------------+
+|F|R|R|R| opcode|M| Payload len |    Extended payload length    |
+|I|S|S|S|  (4)  |A|     (7)     |             (16/64)           |
+|N|V|V|V|       |S|             |   (if payload len==126/127)   |
+| |1|2|3|       |K|             |                               |
++-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - +
+ 4               5               6               7
++ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
+|     Extended payload length continued, if payload len == 127  |
++ - - - - - - - - - - - - - - - +-------------------------------+
+ 8               9               <strong>10</strong>              11
++ - - - - - - - - - - - - - - - +-------------------------------+
+|                               |Masking-key, if MASK set to 1  |
++-------------------------------+-------------------------------+
+ 12              13              <strong>14</strong>              15
++-------------------------------+-------------------------------+
+| Masking-key (continued)       |          Payload Data         |
++-------------------------------- - - - - - - - - - - - - - - - +
+:                     Payload Data continued ...                :
++ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
+|                     Payload Data continued ...                |
++---------------------------------------------------------------+</pre>
+
+<p>RSV1-3 peuvent être ignorés, ils concernent les extensions. </p>
+
+<p>Le masquage de bits indique simplement si le message a été codé. Les messages du client doivent être masquée, de sorte que votre serveur doit attendre qu'il soit à 1. (<em>l'article 5.1 de la spécification prévoit que votre serveur doit se déconnecter d'un client si celui-ci envoie un message non masqué</em>). Lors de l'envoi d'une trame au client, ne masquez pas et ne réglez pas le bit de masque - cela sera expliqué plus tard.</p>
+
+<p>Note: Vous devez masquer les messages même lorsque vous utilisez un socket sécurisé.</p>
+
+<p>Le champ <code>opcode</code> définit comment est interpêtée la <em>charge utile</em> (<code>payload data</code>) : ainsi <code>0x0</code> indique la consigne "continuer", <code>0x1</code> indique du texte (qui est systématiquement encodé en UTF-8), <code>0x2</code> pour des données binaires, et d'autres "codes de contrôle" qui seront évoqués plus tard. Dans cette version des WebSockets, <code>0x3</code> à 0x7 et <code>0xB</code> à <code>0xF</code> n'ont pas de significations particulières. </p>
+
+<p>Le bit FIN indique si c'est le dernier message de la série [<em>NDT : pour la concaténation, pas la fin de la connexion elle-même</em>]. S'il est à 0, alors le serveur doit attendre encore une ou plusieurs parties. Sinon le message est considéré comme complet. </p>
+
+<h3 id="Connaître_la_taille_des_données_utiles">Connaître la taille des <em>données utiles </em></h3>
+
+<p>Pour (pouvoir) lire les <em>données utiles</em>, vous devez savoir quand arrêter la lecture dans le flux des trames entrantes vers le serveur. C'est pourquoi il est important de connaître la taille des <em>données utiles</em>. Et malheureusement ce n'est pas toujours simple. Voici quelques étapes essentielles à connaître : </p>
+
+<ol>
+ <li>(<em>étape 1</em>) Lire tout d'abord les bits 9 à 15 (inclu) et les interprêter comme un entier non-signé. S'il équivaut à 125 ou moins, alors il correspond à la taille totale de la charge utile.<br>
+  S'il vaut à 126, allez à l'étape 2 ou sinon, s'il vaut 127, allez à l'étape 3. </li>
+ <li>(<em>étape 2</em>) Lire les 16 bits supplémentaires et les interprêter comme précédent (entier non-signé). Vous avez alors la taille des données utiles. </li>
+ <li>(<em>étape 3</em>) Lire les 64 bits supplémentaires et les interprêter comme précédent (entier non-signé). Vous avez alors la taille des données utiles. Attention, le bit le plus significatif doit rester à 0.</li>
+</ol>
+
+<h3 id="Lire_et_démasquer_les_données">Lire et démasquer les données </h3>
+
+<p>Si le bit MASK a été fixé (et il devrait l'être, pour les messages client-serveur), vous devez lire les 4 prochains octets (32 bits) : ils sont la clé de masquage. Une fois la longueur de charge utile connue et la clé de masquage décodée, vous pouvez poursuivre la lecture des autres bits comme étant les données utiles masquées. Par convention pour le reste du paragraphe, appelons-les <em>données encodées</em>, et la clé <em>masque</em>. Pour décoder les données, bouclez les octets du texte reçu en XOR avec l'octet du (<em>i modulo 4</em>) ième octet du <em>masque</em>. En voici le pseudo-code (<em>JavaScript valide</em>) : </p>
+
+<pre>var DECODED = "";
+for (var i = 0; i &lt; ENCODED.length; i++) {
+    DECODED[i] = ENCODED[i] ^ MASK[i % 4];
+<span style="line-height: 1.5;">}</span></pre>
+
+<div class="note">
+<p>Ici la variable <code>DECODED</code> correspond aux données utiles à votre application - en fonction de l'utilisation ou non d'un sous-protocole (<em>si c'est <code>json</code>, vous devez encore décoder les données utiles reçues avec le parseur JSON</em>). </p>
+</div>
+
+<h3 id="La_fragmentation_des_messages">La fragmentation des messages </h3>
+
+<p>Les champs FIN et opcodes fonctionnent ensemble pour envoyer un message découpé en une multitude de trames. C'est ce que l'on appele la <em>fragmentation des messages</em>. La fragmentation est seulement possible avec les opcodes de <code>0x0 </code>à <code>0x2</code>. </p>
+
+<p>Souvenez-vous de l'intérêt de l'opcode et ce qu'il implique dans l'échange des trames. Pour <em>0x1 </em>c'est du texte, pour <em>0x2 </em>des données binaires, etc. Toutefois pour <em>0x0</em>, la frame est dite "continue" (elle s'ajoute à la précédente). En voici un exemple plus clair, où il y a en réalité deux textes de message (sur 4 trames différentes) : </p>
+
+<pre style="font-size: 14px;"><strong>Client:</strong> FIN=1, opcode=0x1, msg="hello"
+<strong>Server:</strong> <em>(process complete message immediately) </em>Hi.
+<strong>Client:</strong> FIN=0, opcode=0x1, msg="and a"
+<strong>Server:</strong> <em>(listening, new message containing text started)</em>
+<strong>Client:</strong> FIN=0, opcode=0x0, msg="happy new"
+<strong>Server:</strong> <em>(listening, payload concatenated to previous message)</em>
+<strong>Client:</strong> FIN=1, opcode=0x0, msg="year!"
+<strong>Server:</strong> <em>(process complete message) </em>Happy new year to you too!</pre>
+
+<p>La première trame dispose d'un message en entier (FIN = 1 et optcode est différent de 0x0) : le serveur peut traiter la requête reçue et y répondre. A partir de la seconde trame et pour les deux suivantes (soit trois trames), l'opcode à 0x1 puis 0x0 signifie qu'il s'agit d'un texte suivi du reste du contenu (0x1 = texte ; 0x0 = la suite). La 3e trame à FIN = 1 indique la fin de la requête. <br>
+ Voir la <a href="http://tools.ietf.org/html/rfc6455#section-5.4">section 5.4</a> de la spécification pour les détails de cette partie. </p>
+
+<h2 id="Pings-Pongs_le_coeur_des_WebSockets">Pings-Pongs : le "coeur" des WebSockets</h2>
+
+<p>A n'importe quel moment après le processus de poignée de mains, le client ou le serveur peut choisir d'envoyer un <em>ping </em>à l'autre partie. Lorsqu'il est reçu, l'autre partie doit renvoyer dès possible un <em>pong</em>. Cette pratique permet de vérifier et de maintenir la connexion avec le client par exemple. </p>
+
+<p>Le <em>ping </em>ou le <em>pong </em>sont des trames classiques dites <strong>de contrôle</strong>. Les <em>pings </em>disposent d'un opcode à <code>0x9</code> et les <em>pongs </em>à <code>0xA</code>. Lorsqu'un <em>ping </em>est envoyé, le <em>pong </em>doit disposer de la même donnée utile en réponse que le ping (et d'une taille maximum autorisé de 125). Le <em>pong </em>seul (c-à-d sans <em>ping</em>) est ignoré. </p>
+
+<div class="note">
+<p>Lorsque plusieurs pings sont envoyés à la suite, un <strong>seul </strong>pong suffit en réponse (<em>le plus récent pour la donnée utile renvoyée</em>). </p>
+</div>
+
+<h2 id="Clore_la_connexion">Clore la connexion </h2>
+
+<p>La connexion peut être close à l'initiative du client ou du serveur grâce à l'envoi d'une trame de contrôle contenant des données spécifiques permettant d'interrompre la poignée de main (de lever définitivement le masque pour être plus précis ; voir la <a href="http://tools.ietf.org/html/rfc6455#section-5.5.1">section 5.5.1</a>). Dès la réception de la trame, le récepteur envoit une trame spécifique de fermeture en retour (pour signifier la bonne compréhension de la fin de connexion). C'est l'émetteur à l'origine de la fermeture qui doit clore la connexion ; toutes les données supplémentaires sont éliminés / ignorés. </p>
+
+<h2 id="Diverses_informations_utiles"><a id="Miscellaneous" name="Miscellaneous">Diverses informations utiles</a></h2>
+
+<div class="note">
+<p>L'ensemble des codes, extensions et sous-protocoles liés aux WebSocket sont enregistrés dans le (registre) <a href="http://www.iana.org/assignments/websocket/websocket.xml">IANA WebSocket Protocol Registry</a>.</p>
+</div>
+
+<p>Les extensions et sous-protocoles des WebSockets sont négociés durant <a href="#PoignéeDeMain">l'échange des entêtes de la poignée de mains</a>. Si l'on pourrait croire qu'extensions et sous-protocles sont finalement la même chose, il n'en est rien : <strong>le contrôle des extensions agit sur les trames</strong> ce qui modifie la charge utile ; <strong>alors que les sous-protocoles modifient uniquement la charge utile,</strong> et rien d'autre. Les extensions sont optionnelles et généralisées (par exemple pour la compression des données) ; les sous-protocoles sont souvent obligatoires et ciblés (par exemple dans le cadre d'une application de chat ou d'un jeu MMORPG). </p>
+
+<div class="warning">
+<p><strong>NDT : </strong>Les sous-extensions ou les sous-protocoles ne sont pas obligatoires pour l'échange de données par WebSockets ; mais l'esprit développé ici est de rendre soit plus efficace ou sécurisée la transmission (l'esprit d'une extension) ; soit de délimiter et de normaliser le contenu de l'échange (l'esprit d'un sous-protocole ; qui étend donc le protocole par défaut des WebSockets qu'est l'échange de texte simple au format UTF-8). </p>
+</div>
+
+<h3 id="Les_extensions">Les extensions</h3>
+
+<div class="note">
+<p><strong>Cette section mériterait d'être étendue et complétée. Merci de le faire si vous disposez des moyens pour le faire. </strong></p>
+</div>
+
+<p>L'idée des extensions pourrait être, par exemple, la compression d'un fichier avant de l'envoyer par courriel / email à quelqu'un : les données transférées ne changent pas de contenu, mais leur format oui (et leur taille aussi...). Ce n'est donc pas le format du contenu qui change que le mode transmission - c'est le principe des extensions en WebSockets, dont le principe de base est d'être un protocole simple d'échange de données. </p>
+
+<div class="note">
+<p>Les extensions sont présentées et expliquées dans les sections 5.8, 9, 11.3.2, and 11.4 de la documentation sus-nommées. </p>
+</div>
+
+<h3 id="Les_sous-protocoles">Les sous-protocoles </h3>
+
+<p>Les sous-protocoles sont à comparer à <a href="https://en.wikipedia.org/wiki/XML_schema">un schéma XML</a> ou <a href="https://en.wikipedia.org/wiki/Document_Type_Definition">une déclaration de DocType</a>. Ainsi vous pouvez utiliser seulement du XML et sa syntaxe et, imposer par le biais des sous-protocoles, son utilisation durant l'échange WebSocket. C'est l'intérêt de ces sous-protocoles : établir une structure définie (<em>et intangible : le client se voit imposer la mise en oeuvre par le serveur</em>), bien que les deux doivent l'accepter pour communiquer ensemble. </p>
+
+<div class="note">
+<p>Les sous-protocoles sont expliqués dans les sections 1.9, 4.2, 11.3.4, and 11.5 de la documentation sus-nommés. </p>
+</div>
+
+<p>Exemple : un client souhaite demander un sous-protocole spécifique. Pour se faire, il envoie dans les entêtes d'origine du processus de poignées de mains : </p>
+
+<pre>GET /chat HTTP/1.1
+...
+Sec-WebSocket-Protocol: soap, wamp
+</pre>
+
+<p>Ou son équivalent : </p>
+
+<pre>...
+Sec-WebSocket-Protocol: soap
+Sec-WebSocket-Protocol: wamp
+</pre>
+
+<p>Le serveur doit désormais choisir l'un des protocoles suggérés par le client et qu'il peut prendre en charge. S'il peut en prendre plus d'un, le premier envoyé par le client sera privilégié. Dans notre exemple, le client envoit <code>soap </code>et <code>wamp</code>, le serveur qui supporte les deux enverra donc : </p>
+
+<pre>Sec-WebSocket-Protocol: soap
+</pre>
+
+<div class="warning">
+<p>Le serveur ne peut (ne doit) envoyer plus d'un entête <code>Sec-Websocket-Protocol</code>. <strong>S'il n'en supporte aucun, il ne doit pas renvoyer l'entête <code>Sec-WebSocket-Protocol</code> (l'entête vide n'est pas correct). </strong>Le client peut alors interrompre la connexion s'il n'a pas le sous-protocole qu'il souhaite (ou qu'il supporte). </p>
+</div>
+
+<p>Si vous souhaitez que votre serveur puisse supporter certains sous-protocoles, vous pourriez avoir besoin d'une application ou de scripts supplémentaires sur le serveur. Imaginons par exemple que vous utilisiez le sous-protocole json - où toutes les données échangées par WebSockets sont donc formatés suivant le format <a href="https://fr.wikipedia.org/wiki/JavaScript_Object_Notation">JSON</a>. Si le client sollicite ce sous-protocole et que le serveur souhaite l'accepter, vous <u><strong>devez disposer</strong></u> d'un parseur (d'un décodeur) JSON et décoder les données par celui-ci. </p>
+
+<div class="note">
+<p><strong>Astuce:</strong> Pour éviter des conflits d'espaces de noms, il est recommandé d'utiliser le sous-protocole comme un sous-domaine de celui utilisé. Par exemple si vous utilisez un sous-protocole propriétaire qui utilise un format d'échange de données non-standard pour une application de <em>chat </em>sur le domaine <em>exemple.com</em>, vous devrirez utiliser : <code>Sec-WebSocket-Protocol: chat.exemple.com</code>. S'il y a différentes versions possibles, modifiez le chemin pour faire correspondre le path à votre version comme ceci : <code>chat.exemple.com/2.0</code>. Notez que ce n'est pas obligatoire, c'est une convention d'écriture optionnel et qui peut être utilisée d'une toute autre façon. </p>
+</div>
+
+<h2 id="Contenus_associés">Contenus associés</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebSockets/Writing_WebSocket_server" title="/en-US/docs/WebSockets/Writing_WebSocket_server">Tutorial: Websocket server in C#</a></li>
+ <li><a href="/en-US/docs/WebSockets/Writing_WebSocket_client_applications">Writing WebSocket client applications</a></li>
+ <li><a href="/en-US/docs/WebSockets/WebSocket_Server_Vb.NET">Tutorial: Websocket server in VB.NET</a></li>
+</ul>
diff --git a/files/fr/web/api/webvr_api/index.html b/files/fr/web/api/webvr_api/index.html
new file mode 100644
index 0000000000..a23eac2f67
--- /dev/null
+++ b/files/fr/web/api/webvr_api/index.html
@@ -0,0 +1,148 @@
+---
+title: WebVR API
+slug: Web/API/WebVR_API
+translation_of: Web/API/WebVR_API
+---
+<div>{{draft("Attention, la traduction de cette page n'est pas terminée. De plus, la documentation de l'API WebVR est en cours de mise à jour pour couvrir la version v1.0, par conséquent certaines des ses informations vont être obsolètes. Contactez ~~chrisdavidmills si vous avez des questions à propos de cette documentation.")}}{{DefaultAPISidebar("WebVR API")}}{{SeeCompatTable}}</div>
+
+<p class="summary">WebVR fournit un support pour les dispositifs de réalité virtuelle - par exemple pour les casques de réalité virtuelle comme l'Oculus Rift - aux applications Web, permettant aux développeurs de traduire les informations de position et de mouvement de l'appareil en mouvements autour d'une scène 3D. Cela a de nombreuses applications très intéressantes, des visites de produits virtuels aux applications de formation interactive en passant par des jeux en première personne dans un environnement immersif.</p>
+
+<h2 id="Concepts_et_usage">Concepts et usage</h2>
+
+<p><img alt='Sketch of a person in a chair with wearing goggles labelled "Head mounted display (HMD)" facing a monitor with a webcam labelled "Position sensor"' src="https://mdn.mozillademos.org/files/11035/hw-setup.png" style="display: block; height: 78px; margin: 0px auto; width: 60%;"></p>
+
+<p>Tous les périphériques de réalité virtuelle connectés à votre ordinateur seront donné grâce à la méthode {{domxref("Navigator.getVRDisplays()")}}. Cela retournera un tableau d'objets représentant les périphériques, qui auront l'héritage de l'objet {{domxref("VRDevice")}} — généralement un casque de réalité virtuelle renverra deux périphériques — le casque lui-même, représenté par {{domxref("HMDVRDevice")}}, et la caméra capteur de position qui suit la position de votre tête, représenté par {{domxref("PositionSensorVRDevice")}}.</p>
+
+<p>L'objet {{domxref("PositionSensorVRDevice")}} contient la méthode {{domxref("PositionSensorVRDevice.getState","getState()")}}, qui retourne un objet {{domxref("VRPositionState")}} — cela représente l'état du capteur à un timecode donné, et inclus les propriétés avec des données utiles tel que la vélocité, l'accélération et l'orientation, utiles pour mettre à jour le rendu de la scène pour chaque image en accord avec le mouvement du casque de réalité virtuelle.</p>
+
+<p>La méthode {{domxref("HMDVRDevice.getEyeParameters()")}} retourne un objet {{domxref("VREyeParameters")}}, qui peut être utilisé pour obtenir l'information du champ de vision — combien le casque de réalité virtuel peut afficher de la scène. Le {{domxref("VREyeParameters.currentFieldOfView")}} retourne un objet {{domxref("VRFieldOfView")}} qui contient quatre angles décrivant le champ de vision actuel depuis le point central. Vous pouvez aussi changer le champ de vision en utilisant {{domxref("HMDVRDevice.setFieldOfView()")}}.</p>
+
+<h2 id="Interfaces_WebVR">Interfaces WebVR</h2>
+
+<dl>
+ <dt>{{domxref("VRDisplay")}}</dt>
+ <dd>Représente un périphérique de réalité virtuelle supporté par cette API. Il inclut des informations générales comme les IDs et des descriptions de l'appareil, ainsi que des méthodes pour commencer à présenter une scène RV, récupérer les paramètres visuels, les capacités d'affichage et d'autres fonctionnalités importantes.</dd>
+ <dt>{{domxref("VRDisplayCapabilities")}}</dt>
+ <dd>Décrit les capacités d'un appareil {{domxref("VRDisplay")}} — ses fonctionalités peuvent être utilisée pour tester les capacités du périphérique, par exemple peut-il retourner l'information de position.</dd>
+ <dt>{{domxref("VRPose")}}</dt>
+ <dd>Représente l'état de la position à un timecode donné (qui inclut l'orientation, la position, la vélocité et l'accélération).</dd>
+ <dt>{{domxref("VREyeParameters")}}</dt>
+ <dd>Donne accès à l'ensemble des informations requises pour faire le rendu d'une scène pour l'oeil indiqué, dont les informations de champ de vision.</dd>
+ <dt>{{domxref("VRFieldOfView")}}</dt>
+ <dd>Représente le champ de vision actuel définit par quatre angles décrivant la vue depuis le point central.</dd>
+ <dt>{{domxref("VRLayer")}}</dt>
+ <dd>Représente un calque d'un objet {{domxref("VRDisplay")}}.</dd>
+ <dt>{{domxref("VRStageParameters")}}</dt>
+ <dd>Représente les données décrivant l'espace physique disponible pour les périphériques de réalité virtuelle pouvant offrir une expérience dans une pièce réelle.</dd>
+</dl>
+
+<h3 id="Extensions_à_d'autres_interfaces">Extensions à d'autres interfaces</h3>
+
+<dl>
+ <dt>{{domxref("Gamepad.displayId")}} {{readonlyInline}}</dt>
+ <dd><dfn>Retourne l'ID {{domxref("VRDisplay.displayId")}} du périphérique {{domxref("VRDisplay")}} associé — l'appareil RV où la manette de jeu contrôle la scene affichée.</dfn></dd>
+ <dt>{{domxref("Navigator.activeVRDisplays")}} {{readonlyInline}}</dt>
+ <dd>Retourne un tableau contenant tous les périphériques (objet {{domxref("VRDisplay")}}) qui sont actifs (quand {{domxref("VRDisplay.ispresenting")}} est à <code>true</code>).</dd>
+ <dt>{{domxref("Navigator.getVRDisplays()")}}</dt>
+ <dd>Retourne un tableau contenant tous les périphériques (objet {{domxref("VRDisplay")}}) disponibles qui sont connectés à l'ordinateur.</dd>
+ <dt>{{domxref("Window.onvrdisplayconnected")}}</dt>
+ <dd>Représente un gestionaire d'événements qui s'exécute lorsqu'un appareil RV compatible a été connecté à l'ordinateur (quand l'événement {{event("vrdisplayconnected")}} est déclenché).</dd>
+ <dt>{{domxref("Window.onvrdisplaydisconnected")}}</dt>
+ <dd>Représente un gestionaire d'événements qui s'exécute lorsqu'un appareil RV compatible a été déconnecté de l'ordinateur  (quand l'événement {{event("vrdisplaydisconnected")}} est déclenché).</dd>
+ <dt>{{domxref("Window.onvrdisplaypresentchange")}}</dt>
+ <dd>Représente un gestionaire d'événements qui s'exécute lorsque l'état de présentation d'un appareil change — i.e. un changement de l'état "présente" à "ne présente pas", ou vice versa (quand l'événement {{event("onvrdisplaypresentchange")}} est déclenché).</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>Vous pouvez retrouver plusieurs exemples dans ces repos Github:</p>
+
+<ul>
+ <li><a href="https://github.com/aframevr/aframe">A-Frame</a>: un framework web Open source pour construire des expériences RV. Plusieurs exemples.</li>
+ <li><a href="https://github.com/mdn/webvr-tests">mdn/webvr-tests</a>: Démos simples conçus pour illustrer des fonctionalités d'usage de base.</li>
+ <li><a href="https://github.com/MozVR/">MozVR team</a>: Plus de démos avancés, la source de la spec WebVR, et plus!</li>
+</ul>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebVR')}}</td>
+   <td>{{Spec2('WebVR')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+   <th>Samsung Internet for GearVR</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}<br>
+     </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://webvr.info">webvr.info</a> - Up-to-date information about WebVR, browser setup, and community.</li>
+ <li><a href="https://iswebvrready.com">Is WebVR Ready?</a> - Up-to-date information about WebVR browser support (including experimental builds).</li>
+ <li><a href="http://mozvr.com/">MozVr.com</a> — demos, downloads, and other resources from the Mozilla VR team.</li>
+ <li><a href="https://aframe.io">A-Frame</a> — a web framework for building VR experiences (with HTML), from the Mozilla VR team.</li>
+ <li><a href="http://dsmu.me/ConsoleGameOnWeb/">Console Game on Web</a> — a collection of interesting game concept demos, some of which include WebVR.</li>
+ <li><a href="https://github.com/MozVR/vr-web-examples/tree/master/threejs-vr-boilerplate">threejs-vr-boilerplate</a> — a very useful starter template for writing WebVR apps into.</li>
+ <li><a href="https://developer.oculus.com/">Oculus Rift homepage</a></li>
+</ul>
diff --git a/files/fr/web/api/webvr_api/utiliser_des_contrôleurs_de_realite_virtuelle_pour_du_webvr/index.html b/files/fr/web/api/webvr_api/utiliser_des_contrôleurs_de_realite_virtuelle_pour_du_webvr/index.html
new file mode 100644
index 0000000000..36b68601ff
--- /dev/null
+++ b/files/fr/web/api/webvr_api/utiliser_des_contrôleurs_de_realite_virtuelle_pour_du_webvr/index.html
@@ -0,0 +1,257 @@
+---
+title: Utiliser des contrôleurs de réalité virtuelle pour du WebVR
+slug: Web/API/WebVR_API/Utiliser_des_contrôleurs_de_realite_virtuelle_pour_du_WebVR
+translation_of: Web/API/WebVR_API/Using_VR_controllers_with_WebVR
+---
+<div>{{APIRef("WebVR API")}}</div>
+
+<p class="summary">La plupart des matériels de WebVR possède des contrôleurs qui viennent avec le casque de réalité virtuelle. Ceux-ci peuvent être utilisés dans les application WebVR grâce à l'<a href="https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API">API Gamepad</a>, et plus spécifiquement avec l'<a href="https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API#Experimental_Gamepad_extensions">API Gamepad Extensions</a> qui ajoute des API pour accéder, entre autres, à la <a href="https://developer.mozilla.org/en-US/docs/Web/API/GamepadPose">position du controller</a>, au <a href="https://developer.mozilla.org/en-US/docs/Web/API/GamepadHapticActuator">retour haptique</a>, etc.. Cet article fournit les bases pour utiliser ces API.</p>
+
+<h2 id="L'API_WebVR">L'API WebVR</h2>
+
+<p>L'<a href="/en-US/docs/Web/API/WebVR_API">API WebVR</a> est jeune mais possède déjà des fonctionnalités très interressantes pour le web et pour que les développeur·euse·s puisse créer des expériences de réalité virtuelle sur le web. Cela est possible grâce à un accès aux données des casques de réalité virtuelle connectés à votre ordinateur. Ceux-ci seront indentifié comme des objets {{domxref("VRDisplay")}},que vous pourrez manipuler pour commencer et arrêter l'affichage dans le casque, récupérer des données de mouvement (orientation, position...) qui pourront être utilisés pour mettre à jour l'affichage d'une animation, par exemple.</p>
+
+<p>Avant de commencer, vous devriez être déjà avoir des bases de l'API WebVR. Si ce n'est pas le cas, allez lire l'article <a href="/en-US/docs/Web/API/WebVR_API/Using_the_WebVR_API">Utiliser l'API WebVR</a>, vous aurez également des détails sur la compatibilité des navigateurs web ou du matériel nécessaire.</p>
+
+<h2 id="L'API_Gamepad">L'API Gamepad</h2>
+
+<p>L'<a href="/en-US/docs/Web/API/Gamepad_API">API Gamepad</a> est une API assez bien compatible, qui donne aux développeur·euse·s l'accès aux manettes de jeu, connectés à leur ordinateur et de les utilisé dans dans applications web. Les contrôleurs peuvent basiquement être accessible comme des objets {{domxref("Gamepad")}}, avec lesquels nous pouvons faire des requêtes pour savoir quels boutons sont appuyés ou quels joystick sont actionnés, etc..</p>
+
+<p>Vous pouvez avoir plus d'information sur l'usage de API de base des Gamepad avec l'article <a href="/en-US/docs/Web/API/Gamepad_API/Using_the_Gamepad_API">Utilisez l'API Gamepad</a>, et <a href="/en-US/docs/Games/Techniques/Controls_Gamepad_API">Implementer des contrôles en utilisant l'API Gamepad</a>.</p>
+
+<p>Dans cet article, nous allons nous attardez sur les nouvelles fonctionnalités offertes dans l'API {{specname("GamepadExtensions")}}, laquelle donne accès à des informations avancés comme des données de position ou d'orientation, ou encore contrôler les retours haptiques (vibrations), et bien plus. Cette API est toute nouvelle et, pour l'instant, seulement disponible dans les versions Beta ou Nightly de Firefox 55 (et suppérieur).</p>
+
+<h2 id="Types_de_contrôlleurs">Types de contrôlleurs</h2>
+
+<p>Il y a deux principaux types de contrôleurs utilisés pour la réalité virtuelle :</p>
+
+<ul>
+ <li>les "6DoF" (six degrés de liberté) sont des contrôleurs qui donne accès aux informations de position et d'orientation. Un exemple notable serait les manettes du HTC Vive.</li>
+ <li>les "3DoF" (trois degrés de liberté) sont des contrôleurs qui donne uniquement accès aux informations d'orientation. Un exemple notable serait la manette du Google Daydream, qui peut être tourné pour sélectionner des objets 3D comme un pointeur laser, mais ne peux être bougé dans la scène 3D.</li>
+</ul>
+
+<h2 id="Basic_controller_access">Basic controller access</h2>
+
+<p>Now onto some code. Let's look first at the basics of how we get access to VR controllers with the Gamepad API. There are a few strange nuances to bear in mind here, so it is worth taking a look.</p>
+
+<p>We've written up a simple example to demonstrate — see our <a href="https://github.com/mdn/webvr-tests/blob/master/vr-controller-basic-info/index.html">vr-controller-basic-info</a> source code (<a href="https://mdn.github.io/webvr-tests/vr-controller-basic-info/">see it running live here also</a>). This demo simply outputs information on the VR displays and gamepads connected to your computer.</p>
+
+<h3 id="Getting_the_display_information">Getting the display information</h3>
+
+<p>The first notable code is as follows:</p>
+
+<pre class="brush: js">var initialRun = true;
+
+if(navigator.getVRDisplays &amp;&amp; navigator.getGamepads) {
+  info.textContent = 'WebVR API and Gamepad API supported.'
+  reportDisplays();
+} else {
+  info.textContent = 'WebVR API and/or Gamepad API not supported by this browser.'
+}</pre>
+
+<p>Here we first use a tracking variable, <code>initialRun</code>, to note that this is the first time we have loaded the page. You'll find out more about this later on. Next, we detect to see if the WebVR and Gamepad APIs are supported by cheking for the existence of the {{domxref("Navigator.getVRDisplays()")}} and {{domxref("Navigator.getGamepads()")}} methods. If so, we run our <code>reportDisplays()</code> custom function to start the process off. This function looks like so:</p>
+
+<pre class="brush: js">function reportDisplays() {
+  navigator.getVRDisplays().then(function(displays) {
+      console.log(displays.length + ' displays');
+    for(var i = 0; i &lt; displays.length; i++) {
+      var cap = displays[i].capabilities;
+      // cap is a VRDisplayCapabilities object
+      var listItem = document.createElement('li');
+      listItem.innerHTML = '&lt;strong&gt;Display ' + (i+1) + '&lt;/strong&gt;'
+                   + '&lt;br&gt;VR Display ID: ' + displays[i].displayId
+                   + '&lt;br&gt;VR Display Name: ' + displays[i].displayName
+                   + '&lt;br&gt;Display can present content: ' + cap.canPresent
+                   + '&lt;br&gt;Display is separate from the computer\'s main display: ' + cap.hasExternalDisplay
+                   + '&lt;br&gt;Display can return position info: ' + cap.hasPosition
+                   + '&lt;br&gt;Display can return orientation info: ' + cap.hasOrientation
+                   + '&lt;br&gt;Display max layers: ' + cap.maxLayers;
+      list.appendChild(listItem);
+    }
+
+    setTimeout(reportGamepads, 1000);
+    // For VR, controllers will only be active after their corresponding headset is active
+  });
+}</pre>
+
+<p>This function first uses the promise-based {{domxref("Navigator.getVRDisplays()")}} method, which resolves with an array containing {{domxref("VRDisplay")}} objects representing the connected displays. Next, it prints out each display's {{domxref("VRDisplay.displayId")}} and {{domxref("VRDisplay.displayName")}} values, and a number of useful values contained in the display's associated {{domxref("VRCapabilities")}} object. The most useful of these are {{domxref("VRCapabilities.hasOrientation","hasOrientation")}} and {{domxref("VRCapabilities.hasPosition","hasPosition")}}, which allow you to detect whether the device can return orientation and position data and set up your app accordingly.</p>
+
+<p>The last line contained in this function is a {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}} call, which runs the <code>reportGamepads()</code> function after a 1 second delay. Why do we need to do this? First of all, VR controllers will only be ready after their associated VR headset is active, so we need to invoke this after <code>getVRDisplays()</code> has been called and returned the display information. Second, the Gamepad API is much older than the WebVR API, and not promise-based. As you'll see later, the <code>getGamepads()</code> method is synchronous, and just returns the <code>Gamepad</code> objects immediately — it doesn't wait for the controller to be ready to report information. Unless you wait for a little while, returned information may not be accurate (at least, this is what we found in our tests).</p>
+
+<h3 id="Getting_the_Gamepad_information">Getting the Gamepad information</h3>
+
+<p>The <code>reportGamepads()</code> function looks like this:</p>
+
+<pre class="brush: js">function reportGamepads() {
+    var gamepads = navigator.getGamepads();
+    console.log(gamepads.length + ' controllers');
+    for(var i = 0; i &lt; gamepads.length; ++i) {
+        var gp = gamepads[i];
+    var listItem = document.createElement('li');
+    listItem.classList = 'gamepad';
+    listItem.innerHTML = '&lt;strong&gt;Gamepad ' + gp.index + '&lt;/strong&gt; (' + gp.id + ')'
+                 + '&lt;br&gt;Associated with VR Display ID: ' + gp.displayId
+                 + '&lt;br&gt;Gamepad associated with which hand: ' + gp.hand
+                 + '&lt;br&gt;Available haptic actuators: ' + gp.hapticActuators.length
+                 + '&lt;br&gt;Gamepad can return position info: ' + gp.pose.hasPosition
+                 + '&lt;br&gt;Gamepad can return orientation info: ' + gp.pose.hasOrientation;
+    list.appendChild(listItem);
+  }
+  initialRun = false;
+}</pre>
+
+<p>This works in a similar manner to <code>reportDisplays()</code> — we get an array of {{domxref("Gamepad")}} objects using the non-promise-based <code>getGamepads()</code> method, then cycle through each one and print out information on each:</p>
+
+<ul>
+ <li>The {{domxref("Gamepad.displayId")}} property is the same as the <code>displayId</code> of the headet the controller is associated with, and therefore useful for tying controller and headset information together.</li>
+ <li>The {{domxref("Gamepad.index")}} property is unique numerical index that identifies each connected controller.</li>
+ <li>{{domxref("Gamepad.hand")}} returns which hand the controller is expected to be held in.</li>
+ <li>{{domxref("Gamepad.hapticActuators")}} returns an array of the haptic actuators available in the controller. Here we are returning its length so we can see how many each has available.</li>
+ <li>Finally, we return {{domxref("GamepadPose.hasPosition")}} and {{domxref("GamepadPose.hasOrientation")}} to show whether the controller can return position and orientation data. This works just the same as for the displays, except that in the case of gamepads these values are available on the pose object, not the capabilities object.</li>
+</ul>
+
+<p>Note that we also gave each list item containing controller information a class name of <code>gamepad</code>. We'll explain what this is for later.</p>
+
+<p>The last thing to do here is set the <code>initialRun</code> variable to <code>false</code>, as the initial run is now over.</p>
+
+<h3 id="Gamepad_events">Gamepad events</h3>
+
+<p>To finish off this section, we'll look at the gamepad-associated events. There are two we need concern ourselves with — {{event("gamepadconnected")}} and {{event("gamepaddisconnected")}} — and it is fairly obvious what they do.</p>
+
+<p>At the end of our example we first include the <code>removeGamepads()</code> function:</p>
+
+<pre class="brush: js">function removeGamepads() {
+    var gpLi = document.querySelectorAll('.gamepad');
+    for(var i = 0; i &lt; gpLi.length; i++) {
+    list.removeChild(gpLi[i]);
+    }
+
+    reportGamepads();
+}</pre>
+
+<p>This function simply grabs references to all list items with a class name of <code>gamepad</code>, and removes them from the DOM. Then it re-runs <code>reportGamepads()</code> to populate the list with the updated list of connected controllers.</p>
+
+<p><code>removeGamepads()</code> will be run each time a gamepad is connected or disconnected, via the following event handlers:</p>
+
+<pre class="brush: js">window.addEventListener('gamepadconnected', function(e) {
+  info.textContent = 'Gamepad ' + e.gamepad.index + ' connected.';
+  if(!initialRun) {
+      setTimeout(removeGamepads, 1000);
+  }
+});
+
+window.addEventListener('gamepaddisconnected', function(e) {
+  info.textContent = 'Gamepad ' + e.gamepad.index + ' disconnected.';
+  setTimeout(removeGamepads, 1000);
+});</pre>
+
+<p>We have <code>setTimeout()</code> calls in place here — like we did with the initialization code at the top of the script — to make sure that the gamepads are ready to report their information when <code>reportGamepads()</code> is called in each case.</p>
+
+<p>But there's one more thing to note — you'll see that inside the <code>gamepadconnected</code> handler, the timeout is only run if <code>initialRun</code> is <code>false</code>. This is because if your gamepads are connected when the document first loads, <code>gamepadconnected</code> is fired once for each gamepad, therefore <code>removeGamepads()</code>/<code>reportGamepads()</code> will be run several times. This could lead to inaccurate results, therefore we only want to run <code>removeGamepads()</code> inside the <code>gamepadconnected</code> handler after the initial run, not during it. This is what <code>initialRun</code> is for.</p>
+
+<h2 id="Introducing_a_real_demo">Introducing a real demo</h2>
+
+<p>Now let's look at the Gamepad API being used inside a real WebVR demo. You can find this demo at <a href="https://github.com/mdn/webvr-tests/tree/master/raw-webgl-controller-example">raw-webgl-controller-example</a> (<a href="https://mdn.github.io/webvr-tests/raw-webgl-controller-example/">see it live here also</a>).</p>
+
+<p>In exactly the same way as our <a href="https://github.com/mdn/webvr-tests/tree/master/raw-webgl-example">raw-webgl-example</a> (see <a href="/en-US/docs/Web/API/WebVR_API/Using_the_WebVR_API">Using the WebVR API</a> for details), this renders a spinning 3D cube, which you can choose to present in a VR display. The only difference is that, while in VR presenting mode, this demo allows you to move the cube by moving a VR controller (the original demo moves the cube as you move your VR headset).</p>
+
+<p>We'll explore the code differences in this version below — see <a href="https://github.com/mdn/webvr-tests/blob/master/raw-webgl-controller-example/webgl-demo.js">webgl-demo.js</a>.</p>
+
+<h3 id="Accessing_the_gamepad_data">Accessing the gamepad data</h3>
+
+<p>Inside the <code>drawVRScene()</code> function, you'll find this bit of code:</p>
+
+<pre class="brush: js">var gamepads = navigator.getGamepads();
+var gp = gamepads[0];
+
+if(gp) {
+  var gpPose = gp.pose;
+  var curPos = gpPose.position;
+  var curOrient = gpPose.orientation;
+  if(poseStatsDisplayed) {
+    displayPoseStats(gpPose);
+  }
+}</pre>
+
+<p>Here we get the connected gamepads with {{domxref("Navigator.getGamepads")}}, then store the first gamepad detected in the <code>gp</code> variable. As we only need one gamepad for this demo, we'll just ignore the others.</p>
+
+<p>The next thing we do is to get the {{domxref("GamepadPose")}} object for the controller stored in gpPose (by querying {{domxref("Gamepad.pose")}}), and also store the current gamepad position and orientation for this frame in variables so they are easuy to access later. We also display the post stats for this frame in the DOM using the <code>displayPoseStats()</code> function. All of this is only done if <code>gp</code> actually has a value (if a gamepad is connected), which stops the demo erroring if we don't have our gamepad connected.</p>
+
+<p>Slightly later in the code, you can find this block:</p>
+
+<pre class="brush: js">if(gp &amp;&amp; gpPose.hasPosition) {
+  mvTranslate([
+                0.0 + (curPos[0] * 15) - (curOrient[1] * 15),
+                0.0 + (curPos[1] * 15) + (curOrient[0] * 15),
+                -15.0 + (curPos[2] * 25)
+             ]);
+} else if(gp) {
+  mvTranslate([
+                0.0 + (curOrient[1] * 15),
+                0.0 + (curOrient[0] * 15),
+                -15.0
+             ]);
+} else {
+  mvTranslate([
+                0.0,
+                0.0,
+                -15.0
+             ]);
+}</pre>
+
+<p>Here we alter the position of the cube on the screen according to the {{domxref("GamepadPose.position","position")}} and {{domxref("GamepadPose.orientation","orientation")}} data received from the connected controller. These values (stored in <code>curPos</code> and <code>curOrient</code>) are {{domxref("Float32Array")}}s containing the X, Y, and Z values (here we are just using [0] which is X, and [1] which is Y).</p>
+
+<p>If the <code>gp</code> variable has a <code>Gamepad</code> object inside it and it can return position values (<code>gpPose.hasPosition</code>), indicating a 6DoF controller, we modify the cube position using position and orientation values. If only the former is true, indicating a 3DoF controller, we modify the cube position using the orientation values only. If there is no gamepad connected, we don't modify the cube position at all.</p>
+
+<h3 id="Displaying_the_gamepad_pose_data">Displaying the gamepad pose data</h3>
+
+<p>In the <code>displayPoseStats()</code> function, we grab all of the data we want to display out of the {{domxref("GamepadPose")}} object passed into it, then print them into the UI panel that exists in the demo for displaying such data:</p>
+
+<pre class="brush: js">function displayPoseStats(pose) {
+  var pos = pose.position;
+  var orient = pose.orientation;
+  var linVel = pose.linearVelocity;
+  var linAcc = pose.linearAcceleration;
+  var angVel = pose.angularVelocity;
+  var angAcc = pose.angularAcceleration;
+
+  if(pose.hasPosition) {
+    posStats.textContent = 'Position: x ' + pos[0].toFixed(3) + ', y ' + pos[1].toFixed(3) + ', z ' + pos[2].toFixed(3);
+  } else {
+    posStats.textContent = 'Position not reported';
+  }
+
+  if(pose.hasOrientation) {
+    orientStats.textContent = 'Orientation: x ' + orient[0].toFixed(3) + ', y ' + orient[1].toFixed(3) + ', z ' + orient[2].toFixed(3);
+  } else {
+    orientStats.textContent = 'Orientation not reported';
+  }
+
+  linVelStats.textContent = 'Linear velocity: x ' + linVel[0].toFixed(3) + ', y ' + linVel[1].toFixed(3) + ', z ' + linVel[2].toFixed(3);
+  angVelStats.textContent = 'Angular velocity: x ' + angVel[0].toFixed(3) + ', y ' + angVel[1].toFixed(3) + ', z ' + angVel[2].toFixed(3);
+
+  if(linAcc) {
+    linAccStats.textContent = 'Linear acceleration: x ' + linAcc[0].toFixed(3) + ', y ' + linAcc[1].toFixed(3) + ', z ' + linAcc[2].toFixed(3);
+  } else {
+    linAccStats.textContent = 'Linear acceleration not reported';
+  }
+
+  if(angAcc) {
+    angAccStats.textContent = 'Angular acceleration: x ' + angAcc[0].toFixed(3) + ', y ' + angAcc[1].toFixed(3) + ', z ' + angAcc[2].toFixed(3);
+  } else {
+    angAccStats.textContent = 'Angular acceleration not reported';
+  }
+}</pre>
+
+<h2 id="Summary">Summary</h2>
+
+<p>This article has given you a very basic idea of how to use the Gamepad Extensions to use VR controllers inside WebVR apps. In a real app you'd probably have a much more complex control system in effect, with controls assigned to the buttons on the VR controllers, and the display being affected by both the display pose and the controller poses simultaneously. Here however, we just wanted to isolate the pure Gamepad Extensions parts of that.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a></li>
+ <li><a href="/en-US/docs/Web/API/Gamepad_API">Gamepad API</a></li>
+ <li><a href="/en-US/docs/Web/API/WebVR_API/Using_the_WebVR_API">Using the WebVR API</a></li>
+ <li><a href="/en-US/docs/Games/Techniques/Controls_Gamepad_API">Implementing controls using the Gamepad API</a></li>
+</ul>
diff --git a/files/fr/web/api/webvtt_api/index.html b/files/fr/web/api/webvtt_api/index.html
new file mode 100644
index 0000000000..0b6885d7a1
--- /dev/null
+++ b/files/fr/web/api/webvtt_api/index.html
@@ -0,0 +1,900 @@
+---
+title: Web Video Text Tracks Format (WebVTT)
+slug: Web/API/WebVTT_API
+translation_of: Web/API/WebVTT_API
+---
+<div>{{DefaultAPISidebar("WebVTT")}}</div>
+
+<p><span class="seoSummary"><strong>Web Video Text Tracks Format</strong> (<strong>WebVTT</strong>) est un format pour afficher du texte en fonction du temps (comme des sous-titres ou des légendes) en utilisant l'élément HTML {{HTMLElement("track")}}. L'objectif de ce format est d'afficher du texte sur </span>{{HTMLElement("video")}}. WebVTT est un format texte codé en {{Glossary("UTF-8")}}. On peut utiliser aussi bien des espaces que des tabulations. Il y a aussi une petite API capable de représenter et de modifier ces pistes ainsi que les données nécéssaires à la synchornisation du texte.</p>
+
+<h2 id="Les_fichiers_WebVTT">Les fichiers WebVTT</h2>
+
+<p>Les fichiers WebVTT ont pour type MIME <code>text/vtt</code>.</p>
+
+<p>Un fichier WebVTT (<code>.vtt</code>) contient les répliques qui peuvent être sur une ou plusieurs lignes.</p>
+
+<pre class="notranslate">WEBVTT
+
+00:01.000 --&gt; 00:04.000
+Ne jamais boire de l'azote liquide.
+
+00:05.000 --&gt; 00:09.000
+- Cela peut perforer l'estomac.
+- On peut en mourir.
+</pre>
+
+<h2 id="Le_corps_WebVTT">Le corps WebVTT</h2>
+
+<p>La structure d'un fichier WebVTT consiste en une série de composants, certains d'entre-eux sont optionnels. Dans l'ordre:</p>
+
+<ul>
+ <li>Indicateur d'ordre des octets {{optional_inline}}</li>
+ <li>La chaîne de caractères "<code>WEBVTT</code>".</li>
+ <li>Titre à droite de "<code>WEBVTT</code>". {{optional_inline}}
+  <ul>
+   <li>Il doit y avoir au moins un espace après "<code>WEBVTT</code>".</li>
+   <li>Vous pouvez l'utiliser pour mettre une description.</li>
+   <li>Vous pouvez utiliser n'importe quoi à part une nouvelle ligne ou la chaîne "<code>--&gt;</code>".</li>
+  </ul>
+ </li>
+ <li>Une ligne vide équivalente à deux lignes consécutives.</li>
+ <li>Zéros ou plusieurs répliques ou commenatiaires.</li>
+ <li>Zéro ou plusieurs lignes vides.</li>
+</ul>
+
+<h5 id="Exemple_1_-_Plus_petit_fichier_WebVTT">Exemple 1 - Plus petit fichier WebVTT</h5>
+
+<pre class="eval notranslate">WEBVTT
+</pre>
+
+<h5 id="Exemple_2_-_Simple_fichier_WebVTT_contenant_un_entête">Exemple 2 - Simple fichier WebVTT contenant un entête</h5>
+
+<pre class="eval notranslate">WEBVTT - Ce fichier ne possède pas de réplique.</pre>
+
+<h5 id="Exemple_3_-_Fichier_WebVTT_courant_avec_un_entête_et_des_répliques">Exemple 3 - Fichier WebVTT courant avec un entête et des répliques</h5>
+
+<pre class="eval notranslate">WEBVTT - Ce fichier possède des répliques.
+
+14
+00:01:14.815 --&gt; 00:01:18.114
+- Quoi?
+- Où sommes-nous?
+
+15
+00:01:18.171 --&gt; 00:01:20.991
+- C'est le pays des grandes chauves-souris.
+
+16
+00:01:21.058 --&gt; 00:01:23.868
+- [ Cris perçant de chauves-souris ]
+- Elles ne veulent pas aller dans vos cheveux. Elles attrapent les insectes.
+</pre>
+
+<h3 id="Structure_interne_dun_fichier_WebVTT">Structure interne d'un fichier WebVTT</h3>
+
+<p>Réexaminons le premier exemple, et observons la structure plus précisément.</p>
+
+<pre class="notranslate">WEBVTT
+
+00:01.000 --&gt; 00:04.000
+Ne jamais boire de l'azote liquide.
+
+00:05.000 --&gt; 00:09.000
+- Cela peut perforer l'estomac.
+- On peut en mourir.
+
+NOTE Cette ligne est la dernière ligne du fichier
+</pre>
+
+<p>Dans chaque réplique:</p>
+
+<ul>
+ <li>La première ligne commence par un temps correspondant au moment où il apparait.</li>
+ <li>Sur la même ligne nous avons une chaîne <code>--&gt;</code>.</li>
+ <li>Nous finissions la ligne par un second temps indiquant la fin de l'affichage du texte.</li>
+ <li>Nous pouvons alors afficher une ou plusieurs lignes commençant par un tiret (-), chacune contenant une partie du texte à afficher.</li>
+</ul>
+
+<p>Nous pouvons aussi mettre des commentaires dans notre fichier <code>.vtt</code> afin de nous aider à nous remémorer des informations importantes à propos du fichier. Ils doivent être séparés par une ligne vide et commencer par <code>NOTE</code>. Nous en reparlerons dans la prochaine section.</p>
+
+<p>Il est important de ne pas utiliser de ligne vide sans réplique, par exemple entre la ligne indiquant le temps et le texte en lui même. WebVTT est basé sur les lignes, une ligne vide ferme la réplique.</p>
+
+<h2 id="Les_commentaires_WebVTT">Les commentaires WebVTT</h2>
+
+<p>Les commentaires sont des composants optionels qui peuvent être utilisés pour ajouter des informations à un fichier WebVTT. Les commentaires sont prévus pour ceux qui liront le fichier, ils ne seront pas vus par les utilisateurs. Les commentaires peuvent contenir de nouvelles ligne mais ne peuvent pas contenir de ligne vide ce qui équivaut à deux nouvelles lignes. Une ligne vide correspond à la fin d'un commentaire.</p>
+
+<p>Un  commentaire ne peut contenir la chaîne "<code>--&gt;</code>", l'esperluette <code>&amp;</code> ou bien le symbole plus-petit que <code>&lt;</code>. Si vous voulez utiliser ces caractères, vous devez utiliser les caractères échapés comme <code>&amp;amp;</code>pour l'esperluette et <code>&amp;lt;</code> pour le plus petit que. Il est aussi recommandé <code>&amp;gt;</code> pour le plus grand que, afin d'éviter toutes confusions.</p>
+
+<p>Un commentaire est constitué de ces trois composants:</p>
+
+<ul>
+ <li>La chaîne <code>NOTE</code>.</li>
+ <li>Un espace ou une nouvelle ligne.</li>
+ <li>Aucun ou plusieurs caractères sauf ceux indiqué ci-dessus.</li>
+</ul>
+
+<h5 id="Exemple_4_-_Simple_commentaire_WebVTT">Exemple 4 - Simple commentaire WebVTT</h5>
+
+<pre class="eval notranslate">NOTE Ceci est un simple commentaire</pre>
+
+<h5 id="Exemple_5_-_Multi-line_comment">Exemple 5 - Multi-line comment</h5>
+
+<pre class="eval notranslate">NOTE
+Un autre commentaire qui est
+coupé sur plusieurs lignes.
+
+NOTE Vous pouvez aussi faire un commentaire
+sur plusieurs lignes de cette façon.
+</pre>
+
+<h5 id="Exemple_6_-_Usage_commun_des_commentaires">Exemple 6 - Usage commun des commentaires</h5>
+
+<pre class="eval notranslate">WEBVTT - Traduction de ce film que j'aime
+
+NOTE
+Cette traduction a été faite par Kyle pour que
+ses amis puissent la voir avec leurs parents.
+
+1
+00:02:15.000 --&gt; 00:02:20.000
+- Ta en kopp varmt te.
+- Det är inte varmt.
+
+2
+00:02:20.000 --&gt; 00:02:25.000
+- Har en kopp te.
+- Det smakar som te.
+
+NOTE Cette dernière ligne n'est pas forcément bien traduite.
+
+3
+00:02:25.000 --&gt; 00:02:30.000
+- Ta en kopp
+</pre>
+
+<h2 id="Styliser_les_répliques_WebTT">Styliser les répliques WebTT</h2>
+
+<p>Vous pouvez styliser des répliques WebVTT en cherchant les éléments qui correspondent à la pseudo-classe {{cssxref("::cue")}}.</p>
+
+<h3 id="Avec_du_CSS">Avec du CSS</h3>
+
+<pre class="brush: css notranslate">video::cue {
+  background-image: linear-gradient(to bottom, dimgray, lightgray);
+  color: papayawhip;
+}
+
+video::cue(b) {
+  color: peachpuff;
+}
+</pre>
+
+<p>Here, all video elements are styled to use a gray linear gradient as their backgrounds, with a foreground color of <code>"papayawhip"</code>. In addition, text boldfaced using the {{HTMLElement("b")}} element are colored <code>"peachpuff"</code>.</p>
+
+<p>The HTML snippet below actually handles displaying the media itself.</p>
+
+<pre class="brush: html notranslate">&lt;video controls autoplay src="video.webm"&gt;
+ &lt;track default src="track.vtt"&gt;
+&lt;/video&gt;
+</pre>
+
+<h3 id="Dans_le_fichier_WebVTT">Dans le fichier WebVTT</h3>
+
+<p>You can also define the style directly in the WebVTT file. In this case, you insert your CSS rules into the file with each rule preceded by the string <code>"STYLE"</code> all by itelf on a line of text, as shown below:</p>
+
+<pre class="notranslate">WEBVTT
+
+STYLE
+::cue {
+  background-image: linear-gradient(to bottom, dimgray, lightgray);
+  color: papayawhip;
+}
+/* Style blocks cannot use blank lines nor "dash dash greater than" */
+
+NOTE comment blocks can be used between style blocks.
+
+STYLE
+::cue(b) {
+  color: peachpuff;
+}
+
+00:00:00.000 --&gt; 00:00:10.000
+- Hello &lt;b&gt;world&lt;/b&gt;.
+
+NOTE style blocks cannot appear after the first cue.</pre>
+
+<p>We can also use identifiers inside WebVTT file, which can be used for defining a new style for some particular cues in the file. The example where we wanted the transcription text to be red highlighted and the other part to remain normal, we can define it as follows using CSS. Where it must be noted that the CSS uses escape sequences the way they are used in HTML pages:</p>
+
+<pre class="notranslate">WEBVTT
+
+1
+00:00.000 --&gt; 00:02.000
+That’s an, an, that’s an L!
+
+crédit de transcription
+00:04.000 --&gt; 00:05.000
+Transcrit par Célestes™
+</pre>
+
+<pre class="brush: css notranslate">::cue(#\31) { color: lime; }
+::cue(#crédit\ de\ transcription) { color: red; }</pre>
+
+<p>Positioning of text tracks is also supported, by including positioning information after the timings in a cue, as seen below (see {{anch("Cue settings")}} for more information):</p>
+
+<pre class="notranslate">WEBVTT
+
+00:00:00.000 --&gt; 00:00:04.000 position:10%,line-left align:left size:35%
+Where did he go?
+
+00:00:03.000 --&gt; 00:00:06.500 position:90% align:right size:35%
+I think he went down this lane.
+
+00:00:04.000 --&gt; 00:00:06.500 position:45%,line-right align:center size:35%
+What are you waiting for?</pre>
+
+<h2 id="Les_répliques_WebVTT">Les répliques WebVTT</h2>
+
+<p>A cue is a single subtitle block that has a single start time, end time, and textual payload. Example 6 consists of the header, a blank line, and then five cues separated by blank lines. A cue consists of five components:</p>
+
+<ul>
+ <li>An optional cue identifier followed by a newline.</li>
+ <li>Cue timings.</li>
+ <li>Optional cue settings with at least one space before the first and between each setting.</li>
+ <li>One or more newlines.</li>
+ <li>The cue payload text.</li>
+</ul>
+
+<h5 id="Exemple_7_-_Exemple_de_réplique">Exemple 7 - Exemple de réplique</h5>
+
+<pre class="eval notranslate">1 - Title Crawl
+00:00:05.000 --&gt; 00:00:10.000 line:0 position:20% size:60% align:start
+Some time ago in a place rather distant....</pre>
+
+<h3 id="Cue_identifier">Cue identifier</h3>
+
+<p>The identifier is a name that identifies the cue. It can be used to reference the cue from a script. It must not contain a newline and cannot contain the string "<code>--&gt;"</code>. It must end with a single newline. They do not have to be unique, although it is common to number them (e.g., 1, 2, 3, ...).</p>
+
+<h5 id="Example_8_-_Cue_identifier_from_Example_7">Example 8 - Cue identifier from Example 7</h5>
+
+<pre class="eval notranslate">1 - Title Crawl</pre>
+
+<h5 id="Example_9_-_Common_usage_of_identifiers">Example 9 - Common usage of identifiers</h5>
+
+<pre class="eval notranslate">WEBVTT
+
+1
+00:00:22.230 --&gt; 00:00:24.606
+This is the first subtitle.
+
+2
+00:00:30.739 --&gt; 00:00:34.074
+This is the second.
+
+3
+00:00:34.159 --&gt; 00:00:35.743
+Third
+</pre>
+
+<h3 id="Cue_timings">Cue timings</h3>
+
+<p>A cue timing indicates when the cue is shown. It has a start and end time which are represented by timestamps. The end time must be greater than the start time, and the start time must be greater than or equal to all previous start times. Cues may have overlapping timings.</p>
+
+<p>If the WebVTT file is being used for chapters ({{HTMLElement("track")}} {{htmlattrxref("kind")}} is <code>chapters</code>) then the file cannot have overlapping timings.</p>
+
+<p>Each cue timing contains five components:</p>
+
+<ul>
+ <li>Timestamp for start time.</li>
+ <li>At least one space.</li>
+ <li>The string "<code>--&gt;".</code></li>
+ <li>At least one space.</li>
+ <li>Timestamp for end time.
+  <ul>
+   <li>Which must be greater than the start time.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>The timestamps must be in one of two formats:</p>
+
+<ul>
+ <li><code>mm:ss.ttt</code></li>
+ <li><code>hh:mm:ss.ttt</code></li>
+</ul>
+
+<p>Where the components are defined as follows:</p>
+
+<ul>
+ <li><code>hh</code> is hours.
+
+  <ul>
+   <li>Must be at least two digits.</li>
+   <li>Hours can be greater than two digits (e.g., 9999:00:00.000).</li>
+  </ul>
+ </li>
+ <li><code>mm</code> is minutes.
+  <ul>
+   <li>Must be between 00 and 59 inclusive.</li>
+  </ul>
+ </li>
+ <li><code>ss</code> is seconds.
+  <ul>
+   <li>Must be between 00 and 59 inclusive.</li>
+  </ul>
+ </li>
+ <li><code>ttt</code> is miliseconds.
+  <ul>
+   <li>Must be between 000 and 999 inclusive.</li>
+  </ul>
+ </li>
+</ul>
+
+<h5 id="Example_10_-_Basic_cue_timing_examples">Example 10 - Basic cue timing examples</h5>
+
+<pre class="eval notranslate">00:22.230 --&gt; 00:24.606
+00:30.739 --&gt; 00:00:34.074
+00:00:34.159 --&gt; 00:35.743
+00:00:35.827 --&gt; 00:00:40.122</pre>
+
+<h5 id="Example_11_-_Overlapping_cue_timing_examples">Example 11 - Overlapping cue timing examples</h5>
+
+<pre class="eval notranslate">00:00:00.000 --&gt; 00:00:10.000
+00:00:05.000 --&gt; 00:01:00.000
+00:00:30.000 --&gt; 00:00:50.000</pre>
+
+<h5 id="Example_12_-_Non-overlapping_cue_timing_examples">Example 12 - Non-overlapping cue timing examples</h5>
+
+<pre class="eval notranslate">00:00:00.000 --&gt; 00:00:10.000
+00:00:10.000 --&gt; 00:01:00.581
+00:01:00.581 --&gt; 00:02:00.100
+00:02:01.000 --&gt; 00:02:01.000</pre>
+
+<h3 id="Cue_settings">Cue settings</h3>
+
+<p>Cue settings are optional components used to position where the cue payload text will be displayed over the video. This includes whether the text is displayed horizontally or vertically. There can be zero or more of them, and they can be used in any order so long as each setting is used no more than once.</p>
+
+<p>The cue settings are added to the right of the cue timings. There must be one or more spaces between the cue timing and the first setting and between each setting. A setting's name and value are separated by a colon. The settings are case sensitive so use lower case as shown. There are five cue settings:</p>
+
+<ul>
+ <li><strong>vertical</strong>
+
+  <ul>
+   <li>Indicates that the text will be displayed vertically rather than horizontally, such as in some Asian languages.</li>
+  </ul>
+
+  <table>
+   <thead>
+    <tr>
+     <th colspan="2">Table 1 - vertical values</th>
+    </tr>
+   </thead>
+   <tbody>
+    <tr>
+     <th><code>vertical:rl</code></th>
+     <td>writing direction is right to left</td>
+    </tr>
+    <tr>
+     <th><code>vertical:lr</code></th>
+     <td>writing direction is left to right</td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+ <li><strong>line</strong>
+  <ul>
+   <li>Specifies where text appears vertically. If vertical is set, line specifies where text appears horizontally.</li>
+   <li>Value can be a line number.
+    <ul>
+     <li>The line height is the height of the first line of the cue as it appears on the video.</li>
+     <li>Positive numbers indicate top down.</li>
+     <li>Negative numbers indicate bottom up.</li>
+    </ul>
+   </li>
+   <li>Or value can be a percentage.
+    <ul>
+     <li>Must be an integer (i.e., no decimals) between 0 and 100 inclusive.</li>
+     <li>Must be followed by a percent sign (%).</li>
+    </ul>
+   </li>
+  </ul>
+
+  <table>
+   <thead>
+    <tr>
+     <th colspan="4">Table 2 - line examples</th>
+    </tr>
+   </thead>
+   <tbody>
+    <tr>
+     <th></th>
+     <th><code>vertical</code> omitted</th>
+     <th><code>vertical:rl</code></th>
+     <th><code>vertical:lr</code></th>
+    </tr>
+    <tr>
+     <th><code>line:0</code></th>
+     <td>top</td>
+     <td>right</td>
+     <td>left</td>
+    </tr>
+    <tr>
+     <th><code>line:-1</code></th>
+     <td>bottom</td>
+     <td>left</td>
+     <td>right</td>
+    </tr>
+    <tr>
+     <th><code>line:0%</code></th>
+     <td>top</td>
+     <td>right</td>
+     <td>left</td>
+    </tr>
+    <tr>
+     <th><code>line:100%</code></th>
+     <td>bottom</td>
+     <td>left</td>
+     <td>right</td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+ <li><strong>position</strong>
+  <ul>
+   <li>Specifies where the text will appear horizontally. If vertical is set, position specifies where the text will appear vertically.</li>
+   <li>Value is a percentage.</li>
+   <li>Must be an integer (no decimals) between 0 and 100 inclusive.</li>
+   <li>Must be followed by a percent sign (%).</li>
+  </ul>
+
+  <table>
+   <thead>
+    <tr>
+     <th colspan="4">Table 3 - position examples</th>
+    </tr>
+   </thead>
+   <tbody>
+    <tr>
+     <th></th>
+     <th><code>vertical</code> omitted</th>
+     <th><code>vertical:rl</code></th>
+     <th><code>vertical:lr</code></th>
+    </tr>
+    <tr>
+     <th><code>position:0%</code></th>
+     <td>left</td>
+     <td>top</td>
+     <td>top</td>
+    </tr>
+    <tr>
+     <th><code>position:100%</code></th>
+     <td>right</td>
+     <td>bottom</td>
+     <td>bottom</td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+ <li><strong>size</strong>
+  <ul>
+   <li>Specifies the width of the text area. If vertical is set, size specifies the height of the text area.</li>
+   <li>Value is a percentage.</li>
+   <li>Must be an integer (i.e., no decimals) between 0 and 100 inclusive.</li>
+   <li>Must be followed by a percent sign (%).</li>
+  </ul>
+
+  <table>
+   <thead>
+    <tr>
+     <th colspan="4">Table 4 - size examples</th>
+    </tr>
+   </thead>
+   <tbody>
+    <tr>
+     <th></th>
+     <th><code>vertical</code> omitted</th>
+     <th><code>vertical:rl</code></th>
+     <th><code>vertical:lr</code></th>
+    </tr>
+    <tr>
+     <th><code>size:100%</code></th>
+     <td>full width</td>
+     <td>full height</td>
+     <td>full height</td>
+    </tr>
+    <tr>
+     <th><code>size:50%</code></th>
+     <td>half width</td>
+     <td>half height</td>
+     <td>half height</td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+ <li><strong>align</strong>
+  <ul>
+   <li>Specifies the alignment of the text. Text is aligned within the space given by the size cue setting if it is set.</li>
+  </ul>
+
+  <table>
+   <thead>
+    <tr>
+     <th colspan="4">Table 5 - align values</th>
+    </tr>
+   </thead>
+   <tbody>
+    <tr>
+     <th></th>
+     <th><code>vertical</code> omitted</th>
+     <th><code>vertical:rl</code></th>
+     <th><code>vertical:lr</code></th>
+    </tr>
+    <tr>
+     <th><code>align:start</code></th>
+     <td>left</td>
+     <td>top</td>
+     <td>top</td>
+    </tr>
+    <tr>
+     <th><code>align:middle</code></th>
+     <td>centred horizontally</td>
+     <td>centred vertically</td>
+     <td>centred vertically</td>
+    </tr>
+    <tr>
+     <th><code>align:end</code></th>
+     <td>right</td>
+     <td>bottom</td>
+     <td>bottom</td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+</ul>
+
+<h5 id="Example_13_-_Cue_setting_examples">Example 13 - Cue setting examples</h5>
+
+<p>The first line demonstrates no settings. The second line might be used to overlay text on a sign or label. The third line might be used for a title. The last line might be used for an Asian language.</p>
+
+<pre class="eval notranslate">00:00:05.000 --&gt; 00:00:10.000
+00:00:05.000 --&gt; 00:00:10.000 line:63% position:72% align:start
+00:00:05.000 --&gt; 00:00:10.000 line:0 position:20% size:60% align:start
+00:00:05.000 --&gt; 00:00:10.000 vertical:rt line:-1 align:end
+</pre>
+
+<h3 id="Cue_payload">Cue payload</h3>
+
+<p>The payload is where the main information or content is located. In normal usage the payload contains the subtitles to be displayed. The payload text may contain newlines but it cannot contain a blank line, which is equivalent to two consecutive newlines. A blank line signifies the end of a cue.</p>
+
+<p>A cue text payload cannot contain the string "<code>--&gt;"</code>, the ampersand character (&amp;), or the less-than sign (&lt;). Instead use the escape sequence "&amp;amp;" for ampersand and "&amp;lt;" for less-than. It is also recommended that you use the greater-than escape sequence "&amp;gt;" instead of the greater-than character (&gt;) to avoid confusion with tags. If you are using the WebVTT file for metadata these restrictions do not apply.</p>
+
+<p>In addition to the three escape sequences mentioned above, there are fours others. They are listed in the table below.</p>
+
+<table>
+ <thead>
+  <tr>
+   <th colspan="3">Table 6 - Escape sequences</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th>Name</th>
+   <th>Character</th>
+   <th>Escape Sequence</th>
+  </tr>
+  <tr>
+   <td>Ampersand</td>
+   <td>&amp;</td>
+   <td><code>&amp;amp;</code></td>
+  </tr>
+  <tr>
+   <td>Less-than</td>
+   <td>&lt;</td>
+   <td><code>&amp;lt;</code></td>
+  </tr>
+  <tr>
+   <td>Greater-than</td>
+   <td>&gt;</td>
+   <td><code>&amp;gt;</code></td>
+  </tr>
+  <tr>
+   <td>Left-to-right mark</td>
+   <td></td>
+   <td><code>&amp;lrm;</code></td>
+  </tr>
+  <tr>
+   <td>Right-to-left mark</td>
+   <td></td>
+   <td><code>&amp;rlm;</code></td>
+  </tr>
+  <tr>
+   <td>Non-breaking space</td>
+   <td><code> </code></td>
+   <td><code>&amp;nbsp;</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Cue_payload_text_tags">Cue payload text tags</h3>
+
+<p>There are a number of tags, such as <code>&lt;bold&gt;</code>, that can be used. However, if the WebVTT file is used in a {{HTMLElement("track")}} element where the attribute {{htmlattrxref("kind")}} is <code>chapters</code> then you cannot use tags.</p>
+
+<ul>
+ <li><strong>Timestamp tag</strong>
+
+  <ul>
+   <li>The timestamp must be greater that the cue's start timestamp, greater than any previous timestamp in the cue payload, and less than the cue's end timestamp. The <em>active text</em> is the text between the timestamp and the next timestamp or to the end of the payload if there is not another timestamp in the payload. Any text before the <em>active text</em> in the payload is <em>previous text</em> . Any text beyond the <em>active text</em> is <em>future text</em> . This enables karaoke style captions.</li>
+  </ul>
+
+  <div>
+  <h5 id="Example_12_-_Karaoke_style_text">Example 12 - Karaoke style text</h5>
+
+  <pre class="eval notranslate">1
+00:16.500 --&gt; 00:18.500
+When the moon &lt;00:17.500&gt;hits your eye
+
+1
+00:00:18.500 --&gt; 00:00:20.500
+Like a &lt;00:19.000&gt;big-a &lt;00:19.500&gt;pizza &lt;00:20.000&gt;pie
+
+1
+00:00:20.500 --&gt; 00:00:21.500
+That's &lt;00:00:21.000&gt;amore
+</pre>
+  </div>
+ </li>
+</ul>
+
+<p>The following tags are the HTML tags allowed in a cue and require opening and closing tags (e.g., <code>&lt;b&gt;text&lt;/b&gt;</code>).</p>
+
+<ul>
+ <li><strong>Class tag</strong> (<code>&lt;c&gt;&lt;/c&gt;</code>)
+
+  <ul>
+   <li>Style the contained text using a CSS class.</li>
+  </ul>
+
+  <div>
+  <h5 id="Example_14_-_Class_tag">Example 14 - Class tag</h5>
+
+  <pre class="notranslate">&lt;c.classname&gt;text&lt;/c&gt;</pre>
+  </div>
+ </li>
+ <li><strong>Italics tag</strong> (<code>&lt;i&gt;&lt;/i&gt;</code>)
+  <ul>
+   <li>Italicize the contained text.</li>
+  </ul>
+
+  <div>
+  <h5 id="Example_15_-_Italics_tag">Example 15 - Italics tag</h5>
+
+  <pre class="notranslate">&lt;i&gt;text&lt;/i&gt;</pre>
+  </div>
+ </li>
+ <li><strong>Bold tag</strong> (<code>&lt;b&gt;&lt;/b&gt;</code>)
+  <ul>
+   <li>Bold the contained text.</li>
+  </ul>
+
+  <div>
+  <h5 id="Example_16_-_Bold_tag">Example 16 - Bold tag</h5>
+
+  <pre class="notranslate">&lt;b&gt;text&lt;/b&gt;</pre>
+  </div>
+ </li>
+ <li><strong>Underline tag</strong> (<code>&lt;u&gt;&lt;/u&gt;</code>)
+  <ul>
+   <li>Underline the contained text.</li>
+  </ul>
+
+  <div>
+  <h5 id="Example_17_-_Underline_tag">Example 17 - Underline tag</h5>
+
+  <pre class="notranslate">&lt;u&gt;text&lt;/u&gt;</pre>
+  </div>
+ </li>
+ <li><strong>Ruby tag</strong> (<code>&lt;ruby&gt;&lt;/ruby&gt;</code>)
+  <ul>
+   <li>Used with ruby text tags to display <a href="http://en.wikipedia.org/wiki/Ruby_character">ruby characters</a> (i.e., small annotative characters above other characters).</li>
+  </ul>
+
+  <div>
+  <h5 id="Example_18_-_Ruby_tag">Example 18 - Ruby tag</h5>
+
+  <pre class="notranslate">&lt;ruby&gt;WWW&lt;rt&gt;World Wide Web&lt;/rt&gt;oui&lt;rt&gt;yes&lt;/rt&gt;&lt;/ruby&gt;</pre>
+  </div>
+ </li>
+ <li><strong>Ruby text tag</strong> (<code>&lt;rt&gt;&lt;/rt&gt;</code>)
+  <ul>
+   <li>Used with ruby tags to display <a href="http://en.wikipedia.org/wiki/Ruby_character">ruby characters</a> (i.e., small annotative characters above other characters).</li>
+  </ul>
+
+  <div>
+  <h5 id="Example_19_-_Ruby_text_tag">Example 19 - Ruby text tag</h5>
+
+  <pre class="notranslate">&lt;ruby&gt;WWW&lt;rt&gt;World Wide Web&lt;/rt&gt;oui&lt;rt&gt;yes&lt;/rt&gt;&lt;/ruby&gt;</pre>
+  </div>
+ </li>
+ <li><strong>Voice tag</strong> (<code>&lt;v&gt;&lt;/v&gt;</code>)
+  <ul>
+   <li>Similar to class tag, also used to style the contained text using CSS.</li>
+  </ul>
+
+  <div>
+  <h5 id="Example_20_-_Voice_tag">Example 20 - Voice tag</h5>
+
+  <pre class="notranslate">&lt;v Bob&gt;text&lt;/v&gt;</pre>
+  </div>
+ </li>
+</ul>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<p>There are two interfaces or APIs used in WebVTT which are:</p>
+
+<h3 id="VTTCue_interface">VTTCue interface</h3>
+
+<p>It is used for providing an interface in Document Object Model API, where different attributes supported by it can be used to prepare and alter the cues in number of ways.</p>
+
+<p>Constructor is the first point for starting the Cue which is defined using the default constructor VTTCue(startTime, endTime, text) where starting time, ending time and text for cue can be adjusted. After that we can set the region for that particular cue to which this cue belongs using cue.region. Vertical, horizontal, line, lineAlign, Position, positionAlign, text, size and Align can be used to alter the cue and its formation, just like we can alter the objects form, shape and visibility in HTML using CSS. But the VTTCue interface is within the WebVTT provides the vast range of adjustment variables which can be used directly to alter the Cue. Following interface can be used to expose WebVTT cues in DOM API:</p>
+
+<pre class="idl def notranslate">enum <dfn>AutoKeyword</dfn> { <dfn>"auto"</dfn> };
+enum <dfn>DirectionSetting</dfn> { <dfn>""</dfn> /* horizontal */, <dfn>"rl"</dfn>, <dfn>"lr"</dfn> };
+enum <dfn>LineAlignSetting</dfn> { <dfn>"start"</dfn>, <dfn>"center"</dfn>, <dfn>"end"</dfn> };
+enum <dfn>PositionAlignSetting</dfn> { <dfn>"line-left"</dfn>, <dfn>"center"</dfn>, <dfn>"line-right"</dfn>, <dfn>"auto"</dfn> };
+enum <dfn>AlignSetting</dfn> { <dfn>"start"</dfn>, <dfn>"center"</dfn>, <dfn>"end"</dfn>, <dfn>"left"</dfn>, <dfn>"right"</dfn> };
+[<a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-vttcue" id="ref-for-dom-vttcue-vttcue-1">Constructor</a>(double <dfn>startTime</dfn>, double <dfn>endTime</dfn>, DOMString <dfn>text</dfn>)]
+interface <dfn>VTTCue</dfn> : <a href="https://html.spec.whatwg.org/multipage/embedded-content.html#texttrackcue">TextTrackCue</a> {
+  attribute <a href="https://w3c.github.io/webvtt/#vttregion" id="ref-for-vttregion-1">VTTRegion</a>? <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-region" id="ref-for-dom-vttcue-region-1">region</a>;
+  attribute <a href="https://w3c.github.io/webvtt/#enumdef-directionsetting" id="ref-for-enumdef-directionsetting-1">DirectionSetting</a> <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-vertical" id="ref-for-dom-vttcue-vertical-1">vertical</a>;
+  attribute boolean <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-snaptolines" id="ref-for-dom-vttcue-snaptolines-2">snapToLines</a>;
+  attribute (double or <a href="https://w3c.github.io/webvtt/#enumdef-autokeyword" id="ref-for-enumdef-autokeyword-1">AutoKeyword</a>) <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-line" id="ref-for-dom-vttcue-line-2">line</a>;
+  attribute <a href="https://w3c.github.io/webvtt/#enumdef-linealignsetting" id="ref-for-enumdef-linealignsetting-1">LineAlignSetting</a> <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-linealign" id="ref-for-dom-vttcue-linealign-1">lineAlign</a>;
+  attribute (double or <a href="https://w3c.github.io/webvtt/#enumdef-autokeyword" id="ref-for-enumdef-autokeyword-2">AutoKeyword</a>) <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-position" id="ref-for-dom-vttcue-position-1">position</a>;
+  attribute <a href="https://w3c.github.io/webvtt/#enumdef-positionalignsetting" id="ref-for-enumdef-positionalignsetting-1">PositionAlignSetting</a> <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-positionalign" id="ref-for-dom-vttcue-positionalign-1">positionAlign</a>;
+  attribute double <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-size" id="ref-for-dom-vttcue-size-1">size</a>;
+  attribute <a href="https://w3c.github.io/webvtt/#enumdef-alignsetting" id="ref-for-enumdef-alignsetting-1">AlignSetting</a> <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-align" id="ref-for-dom-vttcue-align-1">align</a>;
+  attribute DOMString <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-text" id="ref-for-dom-vttcue-text-1">text</a>;
+  <a href="https://dom.spec.whatwg.org/#documentfragment">DocumentFragment</a> <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-getcueashtml" id="ref-for-dom-vttcue-getcueashtml-2">getCueAsHTML</a>();
+};</pre>
+
+<h3 id="VTTRegion_interface">VTTRegion interface</h3>
+
+<p>This is the second interface in WebVTT API.</p>
+
+<p>The new keyword can be used for defining a new VTTRegion object which can then be used for containing the multiple cues. There are several properties of VTTRegion which are width, lines, regionAnchorX, RegionAnchorY, viewportAnchorX, viewportAnchorY and scroll that can be used to specify the look and feel of this VTT region. The interface code is given below which can be used to expose the WebVTT regions in DOM API:</p>
+
+<pre class="idl def notranslate">enum <dfn>ScrollSetting</dfn> { <dfn>""</dfn> /* none */, <dfn>"up"</dfn> };
+[<a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-vttregion" id="ref-for-dom-vttregion-vttregion-1">Constructor</a>]
+interface <dfn>VTTRegion</dfn> {
+  attribute double <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-width" id="ref-for-dom-vttregion-width-1">width</a>;
+  attribute long <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-lines" id="ref-for-dom-vttregion-lines-1">lines</a>;
+  attribute double <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-regionanchorx" id="ref-for-dom-vttregion-regionanchorx-1">regionAnchorX</a>;
+  attribute double <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-regionanchory" id="ref-for-dom-vttregion-regionanchory-1">regionAnchorY</a>;
+  attribute double <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-viewportanchorx" id="ref-for-dom-vttregion-viewportanchorx-1">viewportAnchorX</a>;
+  attribute double <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-viewportanchory" id="ref-for-dom-vttregion-viewportanchory-1">viewportAnchorY</a>;
+  attribute <a href="https://w3c.github.io/webvtt/#enumdef-scrollsetting" id="ref-for-enumdef-scrollsetting-1">ScrollSetting</a> <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-scroll" id="ref-for-dom-vttregion-scroll-1">scroll</a>;
+};</pre>
+
+<h2 id="Methods_and_properties">Methods and properties</h2>
+
+<p>The methods used in WebVTT are those which are used to alter the cue or region as the attributes for both interfaces are different. We can categorize them for better understanding relating to each interface in WebVTT:</p>
+
+<ul style="list-style-type: circle;">
+ <li>
+  <h3 id="VTTCue">VTTCue</h3>
+
+  <ul>
+   <li>The methods which are available in this interface are:
+    <ul style="list-style-type: circle;">
+     <li>GetCueAsHTML to get the HTML of that Cue.</li>
+     <li>VTT Constructor for creating new objects of Cues.</li>
+     <li>Autokeyword.</li>
+     <li>DirectionSetting: to set the direction of caption or text in a file.</li>
+     <li>LineAlignment: to adjust the line alignment.</li>
+     <li>PositionAlignSetting: to adjust the position of text.</li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+ <li>
+  <h3 id="VTTRegion">VTTRegion</h3>
+
+  <ul>
+   <li>The methods used for region are listed below along with description of their functionality:
+    <ul style="list-style-type: circle;">
+     <li>ScrollSetting: For adjusting the scrolling setting of all nodes present in given region.</li>
+     <li>VTT Region Constructor: for construction of new VTT Regions.</li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Tutorial_on_how_to_write_a_WebVTT_file">Tutorial on how to write a WebVTT file</h2>
+
+<p>There are few steps that can be followed to write a simple webVTT file. Before start, it must be noted that you can make use of a notepad and then save the file as ‘.vtt’ file. Steps are given below:</p>
+
+<ol>
+ <li>Open a notepad.</li>
+ <li>The first line of WebVTT is standardized similar in the way some other languages require you to put headers as the file starts to indicate the file type. One the very first line you have to write.</li>
+</ol>
+
+<pre class="notranslate">WEBVTT</pre>
+
+<p>      3. Leave the second line blank, and on the third line the time for first cue is to be specified. For example, for a first cue starting at time 1 second and ending at 5 seconds, it is written as:</p>
+
+<pre class="notranslate">00:01.000 --&gt; 00:05.000</pre>
+
+<ol>
+ <li>On the next line you can write the caption for this cue which will run from 1<sup>st</sup> second to the 5<sup>th</sup> second, inclusive.</li>
+ <li>Following the similar steps, a complete WebVTT file for specific video or audio file can be made.</li>
+</ol>
+
+<h2 id="CSS_pseudo-classes">CSS pseudo-classes</h2>
+
+<p>CSS pseudo classes allow us to classify the type of object which we want to differentiate from other types of objects. It works in similar manner in WebVTT files as it works in HTML file.</p>
+
+<p>It is one of the good features supported by WebVTT is the localization and use of class elements which can be used in same way they are used in HTML and CSS to classify the style for particular type of objects, but here these are used for styling and classifying the Cues as shown below:</p>
+
+<pre class="notranslate">WEBVTT
+
+04:02.500 --&gt; 04:05.000
+J’ai commencé le basket à l'âge de 13, 14 ans
+
+04:05.001 --&gt; 04:07.800
+Sur les &lt;i.foreignphrase&gt;&lt;lang en&gt;playground&lt;/lang&gt;&lt;/i&gt;, ici à Montpellier</pre>
+
+<p>In the above example it can be observed that we can use the identifier and pseudo class name for defining the language of caption, where <code>&lt;i&gt;</code> tag is for italics.</p>
+
+<p>The type of pseudo class is determined by the selector it is using and working is similar in nature as it works in HTML. Following CSS pseudo classes can be used:</p>
+
+<ul>
+ <li>Lang (Lanugage): e.g., p:lang(it).</li>
+ <li>Link: e.g., a:link.</li>
+ <li>Nth-last-child: e.g., p:nth-last-child(2).</li>
+ <li>Nth-child(n): e.g., p:nth-child(2).</li>
+</ul>
+
+<p>Where p and a are the tags which are used in HTML for paragraph and link, respectively and they can be replaced by identifiers which are used for Cues in WebVTT file.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("WebVTT")}}</td>
+   <td>{{Spec2("WebVTT")}}</td>
+   <td>Définition initiales</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<h3 id="VTTCue_interface_2"><code>VTTCue</code> interface</h3>
+
+<div>
+
+
+<p>{{Compat("api.VTTCue", 0)}}</p>
+
+<h3 id="TextTrack_interface"><code>TextTrack</code> interface</h3>
+
+<div>
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("api.TextTrack", 0)}}</p>
+
+<h3 id="Notes">Notes</h3>
+</div>
+</div>
+
+<p>Prior to Firefox 50, the <code>AlignSetting</code> enum (representing possible values for {{domxref("VTTCue.align")}}) incorrectly included the value <code>"middle"</code> instead of <code>"center"</code>. This has been corrected.</p>
+
+<p>WebVTT was implemented in Firefox 24 behind the preference {{pref("media.webvtt.enabled")}}, which is disabled by default; you can enable it by setting this preference to <code>true</code>. WebVTT is enabled by default starting in Firefox 31 and can be disabled by setting the preference to <code>false</code>.</p>
+
+<p>Prior to Firefox 58, the <code>REGION</code> keyword was creating {{domxref("VTTRegion")}} objects, but they were not being used. Firefox 58 now fully supports <code>VTTRegion</code> and its use; however, this feature is disabled by default behind the preference <code>media.webvtt.regions.enabled</code>; set it to <code>true</code> to enable region support in Firefox 58. Regions are enabled by default starting in Firefox 59 (see bugs {{bug(1338030)}} and {{bug(1415805)}}).</p>
diff --git a/files/fr/web/api/webxr_device_api/index.html b/files/fr/web/api/webxr_device_api/index.html
new file mode 100644
index 0000000000..ee041f0429
--- /dev/null
+++ b/files/fr/web/api/webxr_device_api/index.html
@@ -0,0 +1,205 @@
+---
+title: L'API de périphérique WebXR
+slug: Web/API/WebXR_Device_API
+tags:
+  - API
+  - AR
+  - Réalité augmentée
+  - Réalité virtuelle
+  - VR
+  - WebXR
+  - WebXR API
+translation_of: Web/API/WebXR_Device_API
+---
+<p>{{DefaultAPISidebar("WebXR Device API")}}</p>
+
+<p><span class="seoSummary"><strong>WebXR</strong> est un ensemble de standards utilisés pour supporter le rendu de scènes 3D vers du matériel conçu pour présenter des mondes virtuels (<strong>Réalité Virtuelle</strong>, ou <strong>VR</strong>), ou pour ajouter des contenus graphiques dans le monde réel, (<strong>Réalité Augmentée</strong>, ou <strong>AR</strong>).</span> L'<strong>API de périphérique WebXR </strong>implémente le coeur des fonctionnalités WebXR, gère la sélection de périphériques de sortie, affiche la scène 3D sur le périphérique choisi à la fréquence d'images appropriée, et gère les vecteurs de mouvement créés en utilisant les contrôleurs d'entrée.</p>
+
+<p>Les périphèriques compatibles WebXR comprennent les casques 3D entièrement immersifs avec le suivi du mouvement et de l'orientation, les lunettes qui supperposent des contenus graphiques par dessus la scène du monde réel au travers des images, et les smartphones qui augmentent la realité en capturant le monde via une camera et en qui augmentent la scène avec des images générées par ordinateur.</p>
+
+<p>Pour accomplir toutes ces choses, l'API de périphériques WebXR fournit les fonctionnalités clés suivantes:</p>
+
+<ul>
+ <li>Trouver un périphérique de sortie VR ou AR compatible</li>
+ <li>Afficher une scène 3D sur le périphérique à la fréquence d'images appropriée</li>
+ <li>(Optionellement) refléter la sortie sur un affichage 2D</li>
+ <li>Créer des vecteurs représentant les mouvements des commandes d'entrée</li>
+</ul>
+
+<p>Au niveau le plus basique, une scène est présentée en 3D en calculant la perspective à appliquer à la scène dans le but de l'afficher du point de vue de chacun des yeux de l'utilisateur en calculant la position de chaque oeil et en affichant la scène de cette position, regardant dans la même direction que l'utilisateur. Ces deux images sont conçuent à l'intérieur d'une seule mémoire tampon, avec l'image de rendu pour l'oeil gauche dans la partie gauche et l'image de rendu de l'oeil droit dans la partie droite de la mémoire tampon. Une fois que les perspectives des deux yeux sur la scène ont été conçues, la mémoire résultante est délivrée au périphérique WebXR pour être présentée à l'utilisateur via son casque ou tout autre périphérique d'affichage approprié.</p>
+
+<h2 id="Les_concepts_et_lutilisation_des_périphériques_WebXR">Les concepts et l'utilisation des périphériques WebXR</h2>
+
+<figure style="background: #eee; padding: 0.5em; border: 1px solid #aaa; border-radius: 1em; max-width: 20em; margin-bottom: 1em; margin-right: 2em; float: left;">
+<figcaption><strong>Exemple de configuration matérielle WebXR</strong></figcaption>
+<img alt='Sketch of a person in a chair with wearing goggles labelled "Head mounted display (HMD)" facing a monitor with a webcam labeled "Position sensor"' src="https://mdn.mozillademos.org/files/11035/hw-setup.png"></figure>
+
+<p>Alors que l'ancienne <a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a> avait été conçue uniquement pour le support de la réalité virtuelle (VR), l'API WebXR supporte à la fois la VR et la réalité augmentée (AR) sur le web. Le support pour la fonctionnalité de réalité augmentée est ajouté par le module WebXR Augmented Reality.</p>
+
+<p>Un périphérique XR typique peut avoir aussi bien 3 que 6 degrés de liberté et peut ou non posséder un capteur de position externe.</p>
+
+<p>L'équipement peut également inclure un accéléromètre, un baromètre, ou d'autres capteurs qui sont utilisés pour détecter lorsque l'utilisateur se déplace dans l'espace, tourne sa tête, ou similaires.</p>
+
+<h2 id="Accéder_à_lAPI_WebXR">Accéder à l'API WebXR</h2>
+
+<p>Pour accéder à l'API WebXR à l'intérieur du contexte d'une fenêtre donnée, utiliser la propriété {{domxref("navigator.xr")}}, qui retourne un objet {{domxref("XRSystem")}} au travers duquel toute l'API de périphérique WebXR Device API est alors exposée.</p>
+
+<dl>
+ <dt>{{domxref("navigator.xr")}} {{ReadOnlyInline}}</dt>
+ <dd>Cette propriété, ajoutée à l'interface {{domxref("Navigator")}}, retourne l'objet  {{domxref("XRSystem")}} au travers duquel l'API WebXR est exposée. Si cette propriété est missing ou <code>null</code>, WebXR n'est pas disponible.</dd>
+</dl>
+
+<h2 id="Les_interfaces_WebXR">Les interfaces WebXR</h2>
+
+<dl>
+ <dt>{{DOMxRef("XRSystem")}}</dt>
+ <dd>La propriété {{domxref("Navigator.xr", "navigator.xr")}} retourne l'instance de la fenêtre de {{domxref("XRSystem")}}, qui est le mécanisme par lequel votre code acède à l'API WebXR. En utilisant l'interface <code>XRSystem</code>, vous pouvez créer {{domxref("XRSession")}} pour représenter les sessions AR et/ou VR actuelles.</dd>
+ <dt>{{DOMxRef("XRFrame")}}</dt>
+ <dd>Lors de la présentation d'une session XR, l'état de tous les objets suivis qui composent la session sont représentés par une <code>XRFrame</code>. Pour obtenir un <code>XRFrame</code>, appeler la méthode {{domxref("XRSession.requestAnimationFrame", "requestAnimationFrame()")}} de la session, en fournissant un callback qui sera appelé avec le <code>XRFrame</code> une fois disponible. Les événements qui communiquent avec des états de suivi utiliseront aussi <code>XRFrame</code> pour contenir ces informations.</dd>
+ <dt>{{DOMxRef("XRRenderState")}}</dt>
+ <dd>Fournis un ensemble de propriétés configurables qui changent la façon dont les images produites par une <code>XRSession</code> sont composées.</dd>
+ <dt>{{DOMxRef("XRSession")}}</dt>
+ <dd>Fournit l'interface pour interagir avec le matériel XR. Une fois que la <code>XRSession</code> est obtenue depuis {{domxref("XRSystem.requestSession", "navigator.xr.requestSession()")}}, la session peut être utilisée pour vérifier la position et l'orientation du visualiseur, interroger le périphérique pour obtenir des informations sur l'environnement, et présenter le monde virtuel ou augmenté à l'utilisateur.</dd>
+ <dt>{{DOMxRef("XRSpace")}}</dt>
+ <dd><code>XRSpace</code> est une classe de base opaque sur laquelle toutes les interfaces de système de coordonnées virtuelles sont basées. Les positions dans WebXR sotn toujours exprimées par rapport à un <code>XRSpace</code> particulier au moment où un {{domxref("XRFrame")}} a lieu. Ce système de coordonnées dans l'espace a son origine à une position physique donnée.</dd>
+ <dt>{{DOMxRef("XRReferenceSpace")}}</dt>
+ <dd>Une sous classe de {{domxref("XRSpace")}} qui est utilisée pour identifier une relation spatiale en relation avec l'environnement physique de l'utilisateur. Le système de coordonées <code>XRReferenceSpace</code> devrait rester inchangé pendant toute la durée de vie du {{domxref("XRSession")}}. Le monde n'a pas de frontières et s'étend infiniment dans toutes les directions.</dd>
+ <dt>{{DOMxRef("XRBoundedReferenceSpace")}}</dt>
+ <dd><code>XRBoundedReferenceSpace</code> étend le système de coordonées {{domxref("XRReferenceSpace")}} pour inclure en plus la prise en charge d'un monde aux limites définies. Contrairement à <code>XRReferenceSpace</code>, l'origine doit être localisée au niveau du sol (c'est à dire <em>y</em> = 0). Les composantes x et z de l'origine sont présumées être localisées au centre ou à proximité du centre de la pièce ou de la surface.</dd>
+ <dt>{{DOMxRef("XRView")}}</dt>
+ <dd>Représente une vue unique dans la scène XR pour une image particulière. Chaque XRView correspond à la surface d'affichage vidéo utilisée pour présenter la scène à l'utilisateur. Par exemple, un appareil XR donné peut avoir deux vues: une pour l'œil gauche et une pour la droite. Chaque vue a un décalage utilisé pour déplacer la position de la vue par rapport à la caméra, afin de permettre la création d'effets stéréographiques.</dd>
+ <dt>{{DOMxRef("XRViewport")}}</dt>
+ <dd>Décrit un viewport. Un viewport est une partie rectangulaire d'une surface graphique. Dans WebXR, un viewport représente la zone d'une surface de dessin correspondant à un {{domxref ("XRView")}} particulier, tel que la partie de l'image tampon WebGL utilisée pour rendre l'une des perspectives des deux yeux sur la scène.</dd>
+ <dt>{{DOMxRef("XRRigidTransform")}}</dt>
+ <dd>Une transformation définie en utilisant une position et une orientation dans le système de coordonnées de l'espace virtuel comme décrit par le {{domxref ("XRSpace")}}.</dd>
+ <dt>{{DOMxRef("XRPose")}}</dt>
+ <dd>Décrit une position et une orientation dans l'espace par rapport à un {{domxref ("XRSpace")}}.</dd>
+ <dt>{{DOMxRef("XRViewerPose")}}</dt>
+ <dd>Basé sur {{domxref("XRPose")}}, <code>XRViewerPose</code> spécifie l'état d'un spectateur de la scène WebXR comme indiqué par le périphérique XR. Un tableau d'objets {{domxref ("XRView")}} est inclus, chacun représentant une perspective de la scène. Par exemple, il faut deux vues pour créer la vue stéréoscopique telle que perçue par la vision humaine: une pour l'œil gauche et une seconde pour l'œil droit. Une vue est légèrement décalée vers la gauche par rapport à la position du visualiseur et l'autre vue est décalée vers la droite de la même distance. La liste de vues peut également être utilisée pour représenter les perspectives de chacun des spectateurs d'une scène, dans un environnement multi-utilisateurs.</dd>
+ <dt>{{DOMxRef("XRInputSource")}}</dt>
+ <dd>Représente tout périphérique d'entrée que l'utilisateur peut utiliser pour effectuer des actions ciblées dans le même espace virtuel que le visualiseur. Les sources d'entrée peuvent inclure des dispositifs tels que des contrôleurs manuels, des systèmes de suivi optique et d'autres dispositifs explicitement associés au dispositif XR. Les autres périphériques d'entrée tels que les claviers, les souris et les manettes de jeu ne sont pas présentés comme des instances <code>XRInputSource</code>.</dd>
+ <dt>{{DOMxRef("XRWebGLLayer")}}</dt>
+ <dd>Une couche qui sert de tampon d'image <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> dans lequel la vue d'une scène est rendue. L'utilisation de WebGL pour afficher la scène offre des avantages de performances substantiels grâce à l'accélération graphique.</dd>
+</dl>
+
+<h3 id="Interfaces_événementielles">Interfaces événementielles</h3>
+
+<p>Les interfaces suivantes sont utilisées pour représenter les événements utilisés par l'API WebXR.</p>
+
+<dl>
+ <dt>{{domxref("XRInputSourceEvent")}}</dt>
+ <dd>Envoyé lorsque l'état d'un {{domxref ("XRInputSource")}} change. Cela peut se produire, par exemple, lorsque la position et/ou l'orientation de l'appareil change, ou lorsque des boutons sont enfoncés ou relâchés.</dd>
+ <dt>{{domxref("XRInputSourcesChangeEvent")}}</dt>
+ <dd>Envoyé pour indiquer que l'ensemble des sources d'entrée disponibles a changé pour le {{domxref ("XRSession")}}.</dd>
+ <dt>{{domxref("XRReferenceSpaceEvent")}}</dt>
+ <dd>Envoyé lorsque l'état d'un {{domxref ("XRReferenceSpace")}} change.</dd>
+ <dt>{{domxref("XRSessionEvent")}}</dt>
+ <dd>Envoyé pour indiquer que l'état d'un {{domxref ("XRSession")}} a changé. <s>Par exemple, si la position et/ou l'orientation </s></dd>
+</dl>
+
+<h2 id="Extensions_de_lAPI_WebGL">Extensions de l'API WebGL</h2>
+
+<p>L'API WebGL est étendue par la spécification WebXR pour augmenter le contexte WebGL afin de lui permettre d'être utilisée pour afficher des vues dans un périphérique WebXR.</p>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContextBase.makeXRCompatibile","WebGLRenderingContextBase.makeXRCompatibile()")}}</dt>
+ <dd>Configure le contexte WebGL pour qu'il soit compatible avec WebXR. Si le contexte n'a pas été créé initialement avec la propriété {{domxref ("WebGLContextAttributes.xrCompatible", "xrCompatible")}} définie sur <code>true</code>, vous devez appeler <code>makeXRCompatible()</code> avant d'essayer d'utiliser le contexte WebGL pour le rendu WebXR. Renvoie un {{jsxref ("Promise")}} qui se résout une fois que le contexte a été préparé, ou est rejeté si le contexte ne peut pas être configuré pour être utilisé par WebXR.</dd>
+</dl>
+
+<h2 id="Guides_et_tutoriels">Guides et tutoriels</h2>
+
+<p>Les guides et didacticiels suivants sont une excellente ressource pour apprendre à comprendre WebXR et les concepts graphiques 3D/VR/AR sous-jacents.</p>
+
+<h3 id="Les_bases">Les bases</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Fundamentals">Fundamentals of WebXR</a></dt>
+ <dd>Avant de plonger dans les détails de la création de contenu à l'aide de WebXR, il peut être utile de lire cet aperçu de la technologie, qui comprend des introductions à une terminologie qui peut ne pas vous être familière ou qui peut être utilisée d'une nouvelle manière.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Matrix_math_for_the_web">Matrix math for the web</a></dt>
+ <dd>Un guide expliquant comment les matrices peuvent être utilisées sur le Web, y compris pour les transformations CSS et à des fins WebGL, ainsi que pour gérer le positionnement et l'orientation des objets dans des contextes WebXR.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Lifecycle">WebXR application life cycle </a></dt>
+ <dd>An overview of the overall life cycle of a WebXR application, from startup to shutdown. This article serves as an introduction to the basics of what's involved in creating a WebXR experience without diving into the code in detail. It's a good way to prepare for the next steps.Un aperçu du cycle de vie global d'une application WebXR, du démarrage à l'arrêt. Cet article sert d'introduction aux bases de ce qu'implique la création d'une expérience WebXR sans plonger dans le code en détail. C'est un bon moyen de se préparer aux prochaines étapes.</dd>
+</dl>
+
+<h3 id="Créer_une_expérience_de_réalité_mixte">Créer une expérience de réalité mixte</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Startup_and_shutdown">Starting up and shutting down a WebXR session</a></dt>
+ <dd>Avant de présenter une scène à l'aide d'un appareil XR tel qu'un casque ou des lunettes, vous avez besoin de créer une session WebXR liée à une couche de rendu qui dessine la scène pour la présentation dans chacun des écrans de l'appareil XR pour que l'effet 3D puisse être présenté à l'utilisateur. Ce guide explique comment créer et arrêter des sessions WebXR.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Geometry">Geometry and reference spaces in WebXR</a></dt>
+ <dd>Dans ce guide, les concepts requis de la géométrie 3D sont brièvement passés en revue, et les fondamentaux de cette géométrie représentés dans WebXR sont détaillés. Apprenez comment les espaces de référence sont utilisés pour positionner les objets - et le visualiseur - et les différences entre les types d'espace de référence disponibles, ainsi que leurs cas d'utilisation.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Spatial_tracking">Spatial tracking in WebXR</a></dt>
+ <dd>Ce guide décrit comment les objets—incluant le corps de l'utilisateur et ses parties—sont situés dans l'espace, et comment leur mouvement et leur orientation les uns par rapport aux autres sont surveillés et gérés au fil du temps. Cet article explique la relation entre les espaces, les poses/attitudes, les spectateurs et les vues.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Rendering">Rendering and the WebXR frame animation callback</a></dt>
+ <dd>En commençant par la planification des images à afficher, ce guide explique ensuite comment déterminer le placement des objets dans la vue et comment les afficher dans la mémoire tampon WebGL utilisée pour chacune des deux vues de la scène pour les deux yeux.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Cameras">Viewpoints and viewers: Simulating cameras in WebXR </a></dt>
+ <dd> through a world in which the viewer doesn't really move.WebGL (et donc WebXR) n'a pas vraiment de concept de caméra, qui est le concept traditionnel utilisé pour représenter un point de vue dans les graphiques 3D. Dans cet article, nous voyons comment simuler une caméra et comment créer l'illusion de déplacer un spectateur dans un monde même si ce n'est pas le cas.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Lighting">Lighting a WebXR setting</a></dt>
+ <dd>Le rendu WebXR étant basé sur WebGL, les mêmes techniques d'éclairage utilisées pour toute application 3D sont appliquées aux scènes WebXR. Cependant, il existe des problèmes spécifiques à la création de paramètres de réalité augmentée et virtuelle qui doivent être pris en compte lors de l'écriture de votre code d'éclairage. Cet article traite de ces problèmes.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Bounded_reference_spaces">Using bounded reference spaces</a></dt>
+ <dd>Dans cet article, nous examinons comment utiliser un espace de référence <code>bounded-floor</code> pour définir les limites des endroits où le spectateur peut se déplacer en toute sécurité sans quitter la zone suivie par son matériel XR ou entrer en collision avec un obstacle physique. Sur les appareils qui le prennent en charge, le <code>bounded-floor</code> peut être un outil utile dans votre répertoire.</dd>
+</dl>
+
+<h3 id="Rendre_interactif">Rendre interactif</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Movement_and_motion">Movement, orientation, and motion: A WebXR example</a></dt>
+ <dd>Dans cet exemple et tutoriel, nous utilisons les informations apprises tout au long de la documentation WebXR pour créer une scène contenant un cube et l'utilisateur peut déplacer autour en utilisant à la fois le casque VR, le clavier et la souris.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Inputs">Inputs and input sources</a></dt>
+ <dd>Un guide sur les sources d'entrée et comment gérer efficacement les périphériques d'entrée utilisés pour contrôler la session WebXR, et comment recevoir et traiter les entrées utilisateur de ces périphériques.</dd>
+ <dt><a href="/en-US/docs/Web/API/Web_Audio_API/Targeting">Targeting and hit detection </a></dt>
+ <dd>Comment utiliser le mode rayon de ciblage et l'espace de rayon de ciblage d'une source d'entrée pour afficher un rayon de ciblage, identifier les surfaces ou les objets ciblés et effectuer des tâches associées.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Input_profiles">Using WebXR input profiles</a></dt>
+ <dd>Un guide pour interpréter les données {{Glossary ("JSON")}} fournies par le <a href="https://github.com/immersive-web/webxr-input-profiles/tree/master/packages/registry">WebXR Input Profiles Registry</a>, qui peut être utilisé pour déterminer les options et commandes disponibles sur les périphériques d'entrée de l'utilisateur.</dd>
+ <dt><a href="/en-US/docs/Web/WebXR_Device_API/Gamepads">Supporting advanced controllers and gamepads in WebXR applications</a></dt>
+ <dd>WebXR utilise l'objet {{domxref ("Gamepad")}} pour décrire les commandes disponibles sur les périphériques d'entrée complexes (tels que les manettes avec plusieurs boutons et/ou axes) et les périphériques tels que les manettes de jeu. Dans ce guide, découvrez comment faire usage des commandes de ces périphériques.</dd>
+</dl>
+
+<h3 id="Performance_and_sécurité">Performance and sécurité</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Performance">WebXR performance guide</a></dt>
+ <dd>Recommandations et astuces pour vous aider à optimiser les performances de votre application WebXR.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Permissions_and_security">Permissions and security for WebXR</a></dt>
+ <dd>L'API de périphérique WebXR doit faire face à de nombreux domaines de sécurité, de l'établissement d'une politique de fonctionnalité à l'assurance que l'utilisateur a l'intention d'utiliser la présentation en réalité mixte avant de l'activer.</dd>
+</dl>
+
+<h3 id="Inclure_dautres_médias">Inclure d'autres médias</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/Media/3D_audio">Positional audio in a 3D environment</a></dt>
+ <dd>Dans les environnements 3D, qui peuvent être soit des scènes 3D rendues à l'écran, soit une expérience de réalité mixte expérimentée à l'aide d'un casque, il est important que l'audio soit exécuté de sorte qu'il semble provenir de la direction de sa source. Ce guide explique comment y parvenir.</dd>
+ <dt><a href="/en-US/docs/Web/Media/3D_video">Playing video in a 3D environment</a></dt>
+ <dd>Dans ce guide, nous examinons comment lire une vidéo dans une scène 3D. Cette technique peut être utilisée à la fois dans des applications <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> standard présentées sur un écran plat d'ordinateur, ou dans un environnement de réalité virtuelle ou augmentée généré par <a href="/en-US/docs/Web/API/WebXR_Device_API">WebXR</a>.</dd>
+</dl>
+
+<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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("WebXR")}}</td>
+   <td>{{Spec2("WebXR")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Navigator.xr")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/Graphics">Graphics on the web</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing graphics</a></li>
+ <li><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a>: Graphiques 2D et 3D sur le web</li>
+ <li><a href="/en-US/docs/Web/API/Canvas_API">Canvas API</a>: Le dessin en 2D pour le web</li>
+ <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a></li>
+</ul>
diff --git a/files/fr/web/api/wheelevent/deltax/index.html b/files/fr/web/api/wheelevent/deltax/index.html
new file mode 100644
index 0000000000..b5b0e251f6
--- /dev/null
+++ b/files/fr/web/api/wheelevent/deltax/index.html
@@ -0,0 +1,57 @@
+---
+title: WheelEvent.deltaX
+slug: Web/API/WheelEvent/deltaX
+tags:
+  - API
+  - DOM
+  - Lecture seulement
+  - Propriété
+  - Reference
+  - Référence(2)
+  - WheelEvent
+translation_of: Web/API/WheelEvent/deltaX
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p>La propriété en lecture seule <code><strong>WheelEvent.deltaX</strong></code> est un <code>double</code> représentant la quantité de défilement horizontal dans l'unité {{domxref("WheelEvent.deltaMode")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">var <code><em>dX</em> = <em>event</em>.deltaX;</code></pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js notranslate">var syntheticEvent = new WheelEvent("syntheticWheel", {"deltaX": 4, "deltaMode": 0});
+
+console.log(syntheticEvent.deltaX);
+</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">Commantaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events','#widl-WheelEvent-deltaX','WheelEvent.deltaX')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>Définiton initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.WheelEvent.deltaX")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{ event("wheel") }}</li>
+ <li>{{domxref("WheelEvent")}}</li>
+</ul>
diff --git a/files/fr/web/api/wheelevent/deltay/index.html b/files/fr/web/api/wheelevent/deltay/index.html
new file mode 100644
index 0000000000..2da3e51624
--- /dev/null
+++ b/files/fr/web/api/wheelevent/deltay/index.html
@@ -0,0 +1,57 @@
+---
+title: WheelEvent.deltaY
+slug: Web/API/WheelEvent/deltaY
+tags:
+  - API
+  - DOM
+  - Lecture seulement
+  - Propriété
+  - Reference
+  - Référence(2)
+  - WheelEvent
+translation_of: Web/API/WheelEvent/deltaY
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p>La propriété en lecture seule <code><strong>WheelEvent.deltaY</strong></code> est un <code>double</code> représentant la quantité de défilement vertical dans l'unité {{domxref("WheelEvent.deltaMode")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">var <code><em>dY</em> = <em>event</em>.deltaY;</code></pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js notranslate">var syntheticEvent = new WheelEvent("syntheticWheel", {"deltaY": 4, "deltaMode": 0});
+
+console.log(syntheticEvent.deltaY);
+</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">Commantaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events','#widl-WheelEvent-deltaY','WheelEvent.deltaY')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.WheelEvent.deltaY")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{ event("wheel") }}</li>
+ <li>{{domxref("WheelEvent")}}</li>
+</ul>
diff --git a/files/fr/web/api/wheelevent/deltaz/index.html b/files/fr/web/api/wheelevent/deltaz/index.html
new file mode 100644
index 0000000000..2113eb437d
--- /dev/null
+++ b/files/fr/web/api/wheelevent/deltaz/index.html
@@ -0,0 +1,58 @@
+---
+title: WheelEvent.deltaZ
+slug: Web/API/WheelEvent/deltaZ
+tags:
+  - API
+  - DOM
+  - Interface
+  - Lecture seulement
+  - Propriété
+  - Reference
+  - Référence(2)
+  - WheelEvent
+translation_of: Web/API/WheelEvent/deltaZ
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p>La propriété en lecture seule <code><strong>WheelEvent.deltaZ</strong></code> est un <code>double</code> représentant la quantité de défilement le long de l'axe z, dans l'unité {{domxref("WheelEvent.deltaMode")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">var <code><em>dZ</em> = <em>event</em>.deltaZ;</code></pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js notranslate">var syntheticEvent = new WheelEvent("syntheticWheel", {"deltaZ": 4, "deltaMode": 0});
+
+console.log(syntheticEvent.deltaZ);
+</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('DOM3 Events','#widl-WheelEvent-deltaZ','WheelEvent.deltaZ')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.WheelEvent.deltaZ")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{ event("wheel") }}</li>
+ <li>{{domxref("WheelEvent")}}</li>
+</ul>
diff --git a/files/fr/web/api/wheelevent/index.html b/files/fr/web/api/wheelevent/index.html
new file mode 100644
index 0000000000..5b45f1363a
--- /dev/null
+++ b/files/fr/web/api/wheelevent/index.html
@@ -0,0 +1,119 @@
+---
+title: WheelEvent
+slug: Web/API/WheelEvent
+tags:
+  - API
+  - DOM
+  - Interface
+  - Reference
+  - WheelEvent
+translation_of: Web/API/WheelEvent
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p>L'interface <strong><code>WheelEvent</code></strong> représente les évènements qui se produisent lorsque l'utilisateur déplace la molette de la souris ou un périphérique d'entrée similaire.</p>
+
+<div class="blockIndicator warning">
+<p><strong>Important: Il s'agit de l'interface d'évènement de roue standard à utiliser.</strong> Les anciennes versions des navigateurs implémentaient les interfaces {{DOMxRef("MouseWheelEvent")}} et {{DOMxRef("MouseScrollEvent")}} non standard et non compatibles avec plusierus navigateurs. Utilisez cette interface et évitez les non standard.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Ne confondez pas l'évènement {{domxref("Element/wheel_event", "wheel")}} avec l'énénement {{domxref("Element/scroll_event", "scroll")}} :</strong> L'action par défaut d'un évènement <code>wheel</code> est définie par l'implantation. Ainsi, un évènement <code>wheel</code> ne distribue pas nécessairement un évènement <code>scroll</code>. Même lorsque c'est le cas, cela ne signifie pas que les valeurs <code>delta*</code> dans l'évènement <code>wheel</code> reflètent nécessairement la direction de défilement du contenu. Par conséquent, ne comptez pas sur les propriétés <code>delta*</code> pour obtenir la direction de défilement du contenu. Au lieu de cela, détectez les changements de valeurs de {{DOMxRef("Element.scrollLeft", "scrollLeft")}} et {{DOMxRef("Element.scrollTop", "scrollTop")}} de la cible dans l'évènement <code>scroll</code>.</p>
+</div>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{DOMxRef("WheelEvent.WheelEvent", "WheelEvent()")}}</dt>
+ <dd>Crée un objet <code>WheelEvent</code>.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Cette interface hérite des propriétés de ses ancêtres, {{DOMxRef("MouseEvent")}}, {{DOMxRef("UIEvent")}}, et {{DOMxRef("Event")}}.</em></p>
+
+<dl id="raw_prop">
+ <dt>{{DOMxRef("WheelEvent.deltaX")}}{{ReadOnlyInline}}</dt>
+ <dd>Renvoie un <code>double</code> représentant le montant du défilement horizontal.</dd>
+ <dt>{{DOMxRef("WheelEvent.deltaY")}}{{ReadOnlyInline}}</dt>
+ <dd>Renvoie un <code>double</code> représentant le montant du défilement vertical.</dd>
+ <dt>{{DOMxRef("WheelEvent.deltaZ")}}{{ReadOnlyInline}}</dt>
+ <dd>Renvoie un <code>double</code> représentant le montant du défilement pour l'axe z.</dd>
+ <dt>{{DOMxRef("WheelEvent.deltaMode")}}{{ReadOnlyInline}}</dt>
+ <dd>Revnoie un <code>unsigned long</code> représentant l'unité du montant de défilement des valeurs <code>delta*</code>. Les valeurs autorisées sont :
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <td class="header">Constant</td>
+    <td class="header">Valeur</td>
+    <td class="header">Description</td>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td><code>WheelEvent.DOM_DELTA_PIXEL</code></td>
+    <td><code>0x00</code></td>
+    <td>Les valeurs <code>delta*</code> sont spécifiées en pixels.</td>
+   </tr>
+   <tr>
+    <td><code>WheelEvent.DOM_DELTA_LINE</code></td>
+    <td><code>0x01</code></td>
+    <td>Les valeurs <code>delta*</code> sont spécifiées en lignes.</td>
+   </tr>
+   <tr>
+    <td><code>WheelEvent.DOM_DELTA_PAGE</code></td>
+    <td><code>0x02</code></td>
+    <td>Les valeurs <code>delta*</code> sont spécifiées dans les pages.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Cette interface ne définit aucune méthode spécifique, mais hérite des méthodes de ses ancêtres, {{DOMxRef("MouseEvent")}}, {{DOMxRef("UIEvent")}}, et {{DOMxRef("Event")}}.</em></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">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("UI Events", "#interface-wheelevent", "The <code>WheelEvent</code> interface")}}</td>
+   <td>{{Spec2("UI Events")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', '#interface-wheelevent', 'WheelEvent')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.WheelEvent")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Évènement {{domxref("Element/wheel_event", "wheel")}}</li>
+ <li>Interfaces remplacées par celle-ci :
+  <ul>
+   <li>Objet d'évènement de roulette de souris hérité de Gecko: {{DOMxRef("MouseScrollEvent")}}</li>
+   <li>Objet d'évènement de roulette de souris hérité des navigateurs non gecko: {{DOMxRef("MouseWheelEvent")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/api/wifimanager/associate/index.html b/files/fr/web/api/wifimanager/associate/index.html
new file mode 100644
index 0000000000..e19b143cf8
--- /dev/null
+++ b/files/fr/web/api/wifimanager/associate/index.html
@@ -0,0 +1,65 @@
+---
+title: WifiManager.associate()
+slug: Web/API/WifiManager/associate
+tags:
+  - API
+  - B2G
+  - Non Standard
+  - WebAPI
+translation_of: Archive/B2G_OS/API/WifiManager/associate
+---
+<div>{{APIRef("Firefox OS")}}{{non-standard_header}}</div>
+
+<p>{{B2GOnlyHeader2('certified')}}</p>
+
+<p>La méthode <strong><code>associate</code></strong> est utilisée pour associer (et connecter) un appareil avec un réseau WiFi donné.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre>var request = navigator.mozWifiManager.associate(network);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>network</code></dt>
+ <dd>Un objet réseau fournies par les méthode {{domxref("WifiManager.getNetworks","getNetworks")}} ou {{domxref("WifiManager.getKnownNetworks","getKnownNetworks")}}.</dd>
+</dl>
+
+<p>Association d'un réseau sécurisé avec un dispositif nécessitant la mise en oeuvre de propriétés supplémentaires sur l'objet <code>network</code> est passé à la méthode:</p>
+
+<ul>
+ <li>Pour le réseau avec la méthode de chiffrement WEP:
+  <ul>
+   <li><code>wep</code> : Cette propriété doit être définie avec le bon mot de passe pour accéder au réseau.</li>
+  </ul>
+ </li>
+ <li>Pour le réseau avec la méthode de chiffrement WPA-PSK:
+  <ul>
+   <li><code>psk</code> : Cette propriété doit être définie avec le bon mot de passe pour accéder au réseau.</li>
+  </ul>
+ </li>
+ <li>Pour le réseau avec la méthode de chiffrement WPA-EAP:
+  <ul>
+   <li><code>eap</code> : Une chaîne représentant la <a class="external external-icon" href="https://fr.wikipedia.org/wiki/Extensible_Authentication_Protocol#M.C3.A9thodes" title="http://en.wikipedia.org/wiki/Extensible_Authentication_Protocol#Methods">méthode EAP</a> à utiliser.</li>
+   <li><code>password</code> : Une chaîne représentant le mot de passe pour accéder au réseau.</li>
+   <li><code>identity</code> : Une chaîne représentant l'identité pour accéder au réseau.</li>
+   <li><code>pin</code> : Une chaîne représentant le code PIN requis pour accéder au réseau.</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Résultats">Résultats</h3>
+
+<p>Elle renvoie un objet <a href="https://developer.mozilla.org/fr/docs/Web/API/DOMRequest"><code>DOMRequest</code></a> gérant le succès ou l'echec de l'opération. Une opération réussie signifie que le dispositif entre dans le <a href="https://fr.wikipedia.org/wiki/Workflow">workflow</a> de connexion au réseau fourni. Le succès ou l'échec de la connexion elle-même peuvent être suivis à travers l'événement <code><a href="https://developer.mozilla.org/fr/docs/Web/Events/statuschange">statuschange</a></code> en attachant un gestionnaire d'événements à <a href="https://developer.mozilla.org/fr/docs/Web/API/WifiManager/onstatuschange" title="Indique un écouteur d'événement pour recevoir les événements de statuschange.  Ces événements se produisent lorsque la connexion WiFi changements d'état de l'appareil."><code>WifiManager.onstatuschange</code></a>.</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<p>Ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WifiManager")}}</li>
+ <li>{{domxref("MozWifiStatusChangeEvent")}}</li>
+ <li><a href="/fr/docs/WebAPI/WiFi_Information">WifI Information API</a></li>
+</ul>
diff --git a/files/fr/web/api/wifimanager/connection/index.html b/files/fr/web/api/wifimanager/connection/index.html
new file mode 100644
index 0000000000..928ab6af4e
--- /dev/null
+++ b/files/fr/web/api/wifimanager/connection/index.html
@@ -0,0 +1,44 @@
+---
+title: WifiManager.connection
+slug: Web/API/WifiManager/connection
+tags:
+  - API
+  - B2G
+  - Non-standard
+  - Propriété
+  - Reference
+  - WebAPI
+  - Wi-Fi
+translation_of: Archive/B2G_OS/API/WifiManager/connection
+---
+<div>{{APIRef("Firefox OS")}}{{non-standard_header}}</div>
+
+<div>{{B2GOnlyHeader2('certified')}}</div>
+
+<p>La valeur de la propriété <strong><code>connection</code></strong> offre le statut et le réseau actuel utilisé par l'adaptateur WiFi.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var mac = navigator.mozWifiManager.connection</pre>
+
+<h2 id="Valeur">Valeur</h2>
+
+<p>Renvoie un objet avec les propriétés suivantes:</p>
+
+<dl>
+ <dt><code>status</code> {{readonlyinline}}</dt>
+ <dd>Une chaîne représentant l'état actuel de la connexion, l'un des <code>disconnected</code>, <code>connecting</code>,<code> associated</code> ou <code>connected</code> (voir {{domxref("MozWifiStatusChangeEvent.status")}} pour plus d'informations sur chacun de ces statuts).</dd>
+ <dt><code>network</code> {{readonlyinline}}</dt>
+ <dd>Un objet network représentant le réseau en cours d'utilisation ou <code>null</code> si l'appareil n'est connecté à aucun réseau (voir {{domxref("WifiManager.getNetworks()")}} pour plus d'informations).</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WifiManager")}}</li>
+ <li><a href="/fr/docs/WebAPI/WiFi_Information">WifI Information API</a></li>
+</ul>
diff --git a/files/fr/web/api/wifimanager/connectioninformation/index.html b/files/fr/web/api/wifimanager/connectioninformation/index.html
new file mode 100644
index 0000000000..0252bb7b15
--- /dev/null
+++ b/files/fr/web/api/wifimanager/connectioninformation/index.html
@@ -0,0 +1,52 @@
+---
+title: WifiManager.connectionInformation
+slug: Web/API/WifiManager/connectionInformation
+tags:
+  - API
+  - B2G
+  - Firefox OS
+  - Non-standard
+  - Propriété
+  - Reference
+  - WebAPI
+  - Wi-Fi
+translation_of: Archive/B2G_OS/API/WifiManager/connectionInformation
+---
+<div>{{APIRef("Firefox OS")}}{{non-standard_header}}</div>
+
+<div>{{B2GOnlyHeader2('certified')}}</div>
+
+<p>La valeur de la propriété <strong><code>connectionInformation</code></strong> fournit des informations supplémentaires sur la connexion en cours.</p>
+
+<p>La valeur de cette propriété est mise à jour chaque fois que l'événement {{event("connectionInfoUpdate")}} est déclenché.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var info = navigator.mozWifiManager.connectionInformation</pre>
+
+<h2 id="Valeur">Valeur</h2>
+
+<p>Retourne un objet avec les propriétés suivantes:</p>
+
+<dl>
+ <dt><code>signalStrength</code>{{readonlyinline}}</dt>
+ <dd>Un nombre indiquant la force absolue du signal en <a href="https://fr.wikipedia.org/wiki/DBm">dBm</a> .</dd>
+ <dt><code>relSignalStrength</code>{{readonlyinline}}</dt>
+ <dd>Un certain nombre dans l'intervalle [0, 100] indiquant la force relative du signal.</dd>
+ <dt><code>LinkSpeed</code>{{readonlyinline}}</dt>
+ <dd>Un nombre représentant la vitesse de liaison en <code>Mb/s.</code></dd>
+ <dt><code>ipAddress</code>{{readonlyinline}}</dt>
+ <dd>Une chaîne représentant l'adresse IP de l'appareil dans la <a href="https://fr.wikipedia.org/wiki/Notation_d%C3%A9cimale_%C3%A0_point">notation décimale à point</a>.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WifiManager")}}</li>
+ <li>{{domxref("MozWifiConnectionInfoEvent")}}</li>
+ <li><a href="/fr/docs/WebAPI/WiFi_Information">WifI Information API</a></li>
+</ul>
diff --git a/files/fr/web/api/wifimanager/enabled/index.html b/files/fr/web/api/wifimanager/enabled/index.html
new file mode 100644
index 0000000000..53f046b621
--- /dev/null
+++ b/files/fr/web/api/wifimanager/enabled/index.html
@@ -0,0 +1,39 @@
+---
+title: WifiManager.enabled
+slug: Web/API/WifiManager/enabled
+tags:
+  - API
+  - B2G
+  - Non Standard
+  - WebAPI
+translation_of: Archive/B2G_OS/API/WifiManager/enabled
+---
+<div>{{APIRef("Firefox OS")}}{{non-standard_header}}</div>
+
+<div>{{ B2GOnlyHeader2('certified') }}</div>
+
+<p>La valeur de la propriété <strong><code>enabled</code></strong> indique si le wifi est activé ( <code>true</code> ) ou désactivé (<code>false</code>).</p>
+
+<div class="note">
+<p><strong>Note :</strong> Activer ou désactiver le WiFi ne peut être fait en utilisant les <a href="https://developer.mozilla.org/fr/docs/WebAPI/Settings">paramètres API</a> pour changer le <code>wifi.enabled</code> réglage. Chaque fois que ce réglage change, l'objet<code> </code>{{domxref("WifiManager")}} enverra un événement<em> </em>{{event("enabled")}}<em> ou </em>{{event("disabled")}} Ces événements peuvent être traitées en utilisant les gestionnaires d'événements {{domxref("WifiManager.onenabled")}} et {{domxref("WifiManager.ondisabled")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var enabled = navigator.mozWifiManager.enabled</pre>
+
+<h2 id="Valeur">Valeur</h2>
+
+<p>Retourne un booléen.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WifiManager")}}</li>
+ <li><a href="/fr/docs/WebAPI/WiFi_Information">WifI Information API</a></li>
+ <li><a href="/fr/docs/WebAPI/Settings">Settings API</a></li>
+</ul>
diff --git a/files/fr/web/api/wifimanager/forget/index.html b/files/fr/web/api/wifimanager/forget/index.html
new file mode 100644
index 0000000000..a88abba4dc
--- /dev/null
+++ b/files/fr/web/api/wifimanager/forget/index.html
@@ -0,0 +1,44 @@
+---
+title: WifiManager.forget()
+slug: Web/API/WifiManager/forget
+tags:
+  - API
+  - B2G
+  - Non Standard
+  - WebAPI
+translation_of: Archive/B2G_OS/API/WifiManager/forget
+---
+<div>{{APIRef("Firefox OS")}} {{non-standard_header}}</div>
+
+<div>{{B2GOnlyHeader2('certified')}}</div>
+
+<p>La méthode <strong><code>forget</code></strong> est utilisée pour « oublier » un réseau WiFi. Cela permettra d'éliminer le réseau de la liste des réseaux connus et de supprimer tous les paramètres de configuration liés à ce réseau.</p>
+
+<p>Si le dispositif est connecté à ce réseau, il en est déconnecté.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre>var request = navigator.mozWifiManager.forget(network);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>network</code></dt>
+ <dd>Un objet réseau fournit par les méthodes {{domxref("WifiManager.getNetworks","getNetworks")}} ou {{domxref("WifiManager.getKnownNetworks","getKnownNetworks")}}.</dd>
+</dl>
+
+<h3 id="Résultats">Résultats</h3>
+
+<p>Elle renvoie un objet <a href="https://developer.mozilla.org/fr/docs/Web/API/DOMRequest"><code>DOMRequest</code></a> gérant le succès ou l'échec de l'opération.</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<p>Ne fait pas partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WifiManager")}}</li>
+ <li>{{domxref("MozWifiStatusChangeEvent")}}</li>
+ <li>The <a href="/fr/docs/WebAPI/WiFi_Information">WifI Information API</a></li>
+</ul>
diff --git a/files/fr/web/api/wifimanager/getknownnetworks/index.html b/files/fr/web/api/wifimanager/getknownnetworks/index.html
new file mode 100644
index 0000000000..36f48007d0
--- /dev/null
+++ b/files/fr/web/api/wifimanager/getknownnetworks/index.html
@@ -0,0 +1,35 @@
+---
+title: WifiManager.getKnownNetworks()
+slug: Web/API/WifiManager/getKnownNetworks
+tags:
+  - API
+  - B2G
+  - Non Standard
+  - WebAPI
+translation_of: Archive/B2G_OS/API/WifiManager/getKnownNetworks
+---
+<div>{{APIRef("Firefox OS")}}{{non-standard_header}}</div>
+
+<div>{{B2GOnlyHeader2('certified') }}</div>
+
+<p>La méthode <strong><code>getKnownNetworks</code></strong> est utilisée pour récupérer la liste des réseaux WiFi connus, peu importe si ils sont disponibles ou non dans la zone entourant le dispositif. Un réseau connu est tout réseau précédemment associée au dispositif à l'aide de la méthode <a href="https://developer.mozilla.org/fr/docs/Web/API/WifiManager/associate" title="La méthode associée est utilisée pour associer (et connexion) un appareil avec un réseau WiFi donné."><code>WifiManager.associate()</code></a>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre>var request = navigator.mozWifiManager.getKnownNetworks();</pre>
+
+<h3 id="Returns">Returns</h3>
+
+<p>Elle retourne un handle <a href="https://developer.mozilla.org/fr/docs/Web/API/DOMRequest"><code>DOMRequest</code></a> de succès ou d'échec. Si l'opération est réussie, <code>result</code> est un Array d'objets <a href="https://developer.mozilla.org/fr/docs/Web/API/WifiManager/getNetworks">network</a>.</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<p>Ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WifiManager")}}</li>
+ <li>{{domxref("MozWifiStatusChangeEvent")}}</li>
+ <li><a href="/fr/docs/WebAPI/WiFi_Information" title="/en-US/docs/WebAPI/WiFi_Information">WifI Information API</a></li>
+</ul>
diff --git a/files/fr/web/api/wifimanager/getnetworks/index.html b/files/fr/web/api/wifimanager/getnetworks/index.html
new file mode 100644
index 0000000000..bdde0246c3
--- /dev/null
+++ b/files/fr/web/api/wifimanager/getnetworks/index.html
@@ -0,0 +1,58 @@
+---
+title: WifiManager.getNetworks()
+slug: Web/API/WifiManager/getNetworks
+tags:
+  - API
+  - B2G
+  - Non Standard
+  - WebAPI
+translation_of: Archive/B2G_OS/API/WifiManager/getNetworks
+---
+<div>{{APIRef("Firefox OS")}}{{non-standard_header}}</div>
+
+<div>{{B2GOnlyHeader2('certified')}}</div>
+
+<p>La méthode <code>getNetworks</code> est utilisée pour récupérer de la liste des réseaux WiFi disponibles autour de l'appareil.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre>var request = navigator.mozWifiManager.getNetworks();</pre>
+
+<h3 id="Résultats">Résultats</h3>
+
+<p>Elle renvoie un handle <a href="https://developer.mozilla.org/fr/docs/Web/API/DOMRequest"><code>DOMRequest</code></a> de succès ou d'échec de l'opération. Si l'opération réussit, <code>result</code> est un Array d'objet {{Anch("Network")}}.</p>
+
+<h4 id="Network">Network</h4>
+
+<p>Ce sont des objets JavaScript régulières avec les propriétés suivantes:</p>
+
+<dl>
+ <dt><code>ssid</code> {{readonlyinline}}</dt>
+ <dd>Une chaîne représentant le <a href="https://fr.wikipedia.org/wiki/Service_set_identifier" title="http://en.wikipedia.org/wiki/Service_set_%28802.11_network%29">ssid</a> du réseau.</dd>
+ <dt><code>bssid</code>{{readonlyinline}}</dt>
+ <dd>Une chaîne représentant le <a href="https://fr.wikipedia.org/wiki/Service_set_identifier" title="http://en.wikipedia.org/wiki/Service_set_%28802.11_network%29">bssid</a> du réseau.</dd>
+ <dt><code>capabilities</code>{{readonlyinline}}</dt>
+ <dd>Un tableau de chaînes représentant les capacités spéciales du réseau (actuellement, seulement <code><a href="https://fr.wikipedia.org/wiki/Wi-Fi_Protected_Setup" title="http://en.wikipedia.org/wiki/Wi-Fi_Protected_Setup">WPS</a></code> est pris en charge).</dd>
+ <dt><code><strong>security</strong></code>{{readonlyinline}}</dt>
+ <dd>Un tableau de chaînes représentant le modèle du réseau de sécurité (prend actuellement en charge <a href="http://fr.wikipedia.org/wiki/Wired_Equivalent_Privacy" title="http://en.wikipedia.org/wiki/Wired_Equivalent_Privacy"><code>WEP</code></a> , <a href="https://fr.wikipedia.org/wiki/Wi-Fi_Protected_Access" title="http://en.wikipedia.org/wiki/Wi-Fi_Protected_Access"><code>WPA-PSK</code></a> et <a href="https://fr.wikipedia.org/wiki/Extensible_Authentication_Protocol" title="http://en.wikipedia.org/wiki/Extensible_Authentication_Protocol"><code>WPA-EAP</code></a> ).</dd>
+ <dt><code>signalStrength</code>{{readonlyinline}}</dt>
+ <dd>Un nombre indiquant la force absolue du signal en <a href="https://fr.wikipedia.org/wiki/DBm">dBm</a> .</dd>
+ <dt><code>relSignalStrength</code>{{readonlyinline}}</dt>
+ <dd>Une valeure dans l'intervalle [0, 100] indiquant la force relative du signal.</dd>
+ <dt><code><strong>connected</strong></code>{{readonlyinline}}</dt>
+ <dd>Un booléen indiquant si l'appareil est connecté à ce réseau.</dd>
+ <dt><code><strong>known</strong></code>{{readonlyinline}}</dt>
+ <dd>Une valeur booléenne indiquant si le réseau est déjà connu par le dispositif (si il a déjà été utilisée).</dd>
+</dl>
+
+<h2 id="Spécification">Spécification</h2>
+
+<p>Ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WifiManager")}}</li>
+ <li>{{domxref("MozWifiStatusChangeEvent")}}</li>
+ <li><a href="/fr/docs/WebAPI/WiFi_Information" title="/en-US/docs/WebAPI/WiFi_Information">WifI Information API</a></li>
+</ul>
diff --git a/files/fr/web/api/wifimanager/index.html b/files/fr/web/api/wifimanager/index.html
new file mode 100644
index 0000000000..51804c74f8
--- /dev/null
+++ b/files/fr/web/api/wifimanager/index.html
@@ -0,0 +1,100 @@
+---
+title: WifiManager
+slug: Web/API/WifiManager
+translation_of: Archive/B2G_OS/API/WifiManager
+---
+<p>{{APIRef("Firefox OS")}}{{ non-standard_header() }}</p>
+
+<p>{{ B2GOnlyHeader2('certified') }}</p>
+
+<h2 id="Sommaire">Sommaire</h2>
+
+<p>Le manager Wifi (WifiManager) donne un accès aux périphriques wifi</p>
+
+<h2 id="Interface">Interface</h2>
+
+<pre>interface WifiManager {
+  readonly attribute boolean enabled;
+  readonly attribute string macAddress;
+  readonly attribute object connection;
+  readonly attribute object connectionInformation;
+
+  attribute nsIDOMEventListener onenabled;
+  attribute nsIDOMEventListener ondisabled;
+  attribute nsIDOMEventListener onstatuschange;
+  attribute nsIDOMEventListener onconnectioninfoupdate;
+  attribute nsIDOMEventListener onstationinfoupdate
+
+  DOMRequest getNetworks();
+  DOMRequest getKnownNetworks();
+  DOMRequest associate(object network);
+  DOMRequest forget(object network);
+  DOMRequest wps(object detail);
+  DOMRequest setPowerSavingMode(boolean enabled);
+  DOMRequest setStaticIpMode(object network, object info)
+};
+</pre>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("WifiManager.enabled")}} {{readonlyinline}}</dt>
+ <dd>Un booléen qui indique si le wifi est en marche (<code>true</code>) ou pas (<code>false</code>).</dd>
+ <dt>{{domxref("WifiManager.macAddress")}} {{readonlyinline}}</dt>
+ <dd>Une chaine de caractères représentant l' <a href="http://en.wikipedia.org/wiki/MAC_address" title="http://en.wikipedia.org/wiki/MAC_address">adresse MAC </a>de l'adaptateur wifi</dd>
+ <dt>{{domxref("WifiManager.connection")}} {{readonlyinline}}</dt>
+ <dd>Un objet donnant des informations a propos de la connexion en cours (statut et réseau en cours d'utilisation).</dd>
+ <dt>{{domxref("WifiManager.connectionInformation")}} {{readonlyinline}}</dt>
+ <dd>Un objet donnant des informations supplémentaires a propos de la connexion en cours ou <code>null</code> si le périphérique n'est pas connecté en wifi.</dd>
+</dl>
+
+<h3 id="Gestion_des_évènements">Gestion des évènements</h3>
+
+<dl>
+ <dt>{{domxref("WifiManager.onenabled")}}</dt>
+ <dd>Signal {{event("enabled")}} ; Ce signal est déclenché quand le wifi est allumé.</dd>
+ <dt>{{domxref("WifiManager.ondisabled")}}</dt>
+ <dd>Signal {{event("disabled")}} ; Ce signal est déclenché quand le wifi est arrêté.</dd>
+ <dt>{{domxref("WifiManager.onstatuschange")}}</dt>
+ <dd>Signal {{event("statuschange")}} ; L'objet retourné correspondant à l'évènement est une instance de {{domxref("MozWifiStatusChangeEvent")}}.</dd>
+ <dt>{{domxref("WifiManager.connectionInfoUpdate")}}</dt>
+ <dt>{{domxref("WifiManager.onconnectionInfoUpdate")}}</dt>
+ <dt>{{domxref("WifiManager.onconnectioninfoupdate")}}</dt>
+ <dd>Signal {{event("connectioninfoupdate")}} ; Déclenché à chaque fois que les informations de connexion changent. L'objet retourné correspondant à l'évènement est une instance de {{domxref("MozWifiConnectionInfoEvent")}}.</dd>
+ <dt>{{domxref("WifiManager.onstationInfoUpdate")}}</dt>
+ <dt>{{domxref("WifiManager.onstationinfoupdate")}}</dt>
+ <dd>TBD</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("WifiManager.associate()")}}</dt>
+ <dd>Permet d'associer (et de connecter) un périphérique avec un réseau donné. Retourne un {{domxref("DOMRequest")}}.</dd>
+ <dt>{{domxref("WifiManager.forget()")}}</dt>
+ <dd>permet de créer un périphérique non associé à un réseau donné. Retourne un {{domxref("DOMRequest")}}.</dd>
+ <dt>{{domxref("WifiManager.getKnownNetworks()")}}</dt>
+ <dd>Permet de récupérer la liste de tous les réseaux avec lesquels le périphérique est associé. Retourne un {{domxref("DOMRequest")}}.</dd>
+ <dt>{{domxref("WifiManager.getNetworks()")}}</dt>
+ <dd>Permet de récupérer la liste de tous les réseaux disponibles dans la zone couverte par le périphérique. Retourne un {{domxref("DOMRequest")}}.</dd>
+ <dt>{{domxref("WifiManager.setPowerSavingMode()")}}</dt>
+ <dd>Permet à l'adaptateur wifi d'entrer/de sortir du <u>mode d'enregistrement allumé</u>  "power saving mode". Retourne un {{domxref("DOMRequest")}}.</dd>
+ <dt>{{domxref("WifiManager.setStaticIpMode()")}}</dt>
+ <dd>Permet de configurer une adresse IP statique pour le périphérique dans un réseau donné. Retourne un {{domxref("DOMRequest")}}.</dd>
+ <dt>{{domxref("WifiManager.wps()")}}</dt>
+ <dd>Permet de connecter le périphérique à un réseau en utilisant le système réseau <a href="http://en.wikipedia.org/wiki/Wi-Fi_Protected_Setup" title="http://en.wikipedia.org/wiki/Wi-Fi_Protected_Setup">WPS</a> (si disponible). Retourne un {{domxref("DOMRequest")}}.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Il n'y a pas de spécifications pour ce module</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("window.navigator.mozWifiManager","navigator.mozWifiManager")}}</li>
+ <li>{{domxref("MozWifiConnectionInfoEvent")}}</li>
+ <li>{{domxref("MozWifiStatusChangeEvent")}}</li>
+ <li>L'article à propos de l'<a href="/en-US/docs/WebAPI/WiFi_Information" title="/en-US/docs/WebAPI/WiFi_Information">API Wifi</a></li>
+ <li>les pages ayant le Tag {{Tag("WiFi")}}</li>
+</ul>
diff --git a/files/fr/web/api/wifimanager/macaddress/index.html b/files/fr/web/api/wifimanager/macaddress/index.html
new file mode 100644
index 0000000000..9c930a0548
--- /dev/null
+++ b/files/fr/web/api/wifimanager/macaddress/index.html
@@ -0,0 +1,34 @@
+---
+title: WifiManager.macAddress
+slug: Web/API/WifiManager/macAddress
+tags:
+  - API
+  - B2G
+  - Non Standard
+  - WebAPI
+translation_of: Archive/B2G_OS/API/WifiManager/macAddress
+---
+<div>{{APIRef("Firefox OS")}}{{non-standard_header}}</div>
+
+<div>{{ B2GOnlyHeader2('certified') }}</div>
+
+<p>La valeur de la propriété <code>macAddress</code> est l'<a href="https://fr.wikipedia.org/wiki/Adresse_MAC">adresse MAC</a> fournie par l'adaptateur wifi.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var mac = navigator.mozWifiManager.macAddress</pre>
+
+<h2 id="Valeur">Valeur</h2>
+
+<p>Retourne une chaîne.</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<p>Ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WifiManager")}}</li>
+ <li><a href="/fr/docs/WebAPI/WiFi_Information">WifI Information API</a></li>
+</ul>
diff --git a/files/fr/web/api/wifimanager/onconnectioninfoupdate/index.html b/files/fr/web/api/wifimanager/onconnectioninfoupdate/index.html
new file mode 100644
index 0000000000..887dac48dc
--- /dev/null
+++ b/files/fr/web/api/wifimanager/onconnectioninfoupdate/index.html
@@ -0,0 +1,33 @@
+---
+title: WifiManager.onconnectioninfoupdate
+slug: Web/API/WifiManager/onconnectioninfoupdate
+tags:
+  - API
+  - B2G
+  - Non Standard
+  - WebAPI
+translation_of: Archive/B2G_OS/API/WifiManager/onconnectioninfoupdate
+---
+<div>{{APIRef("Firefox OS")}}{{non-standard_header}}</div>
+
+<div>{{B2GOnlyHeader2('certified')}}</div>
+
+<p>Pointe vers un écouteur d'événement pour recevoir l'événement {{event("connectioninfoupdate")}}. Ces événements se produisent lorsque les informations de connexion WiFi de l'appareil change.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">navigator.mozWifiManager.onconnectioninfoupdate = <em>funcRef</em></pre>
+
+<p>Où <code><em>f</em></code><code><em>uncRef</em></code> est une fonction à appeler lorsque l'événement {{event("connectioninfoupdate")}} se produit. Cette fonction de rappel reçoit un objet<code> </code>{{domxref("MozWifiConnectionInfoEvent")}} comme premier paramètre.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WifiManager")}}</li>
+ <li>{{domxref("MozWifiConnectionInfoEvent")}}</li>
+ <li><a href="/fr/docs/WebAPI/WiFi_Information" title="/en-US/docs/WebAPI/WiFi_Information">WifI Information API</a></li>
+</ul>
diff --git a/files/fr/web/api/wifimanager/ondisabled/index.html b/files/fr/web/api/wifimanager/ondisabled/index.html
new file mode 100644
index 0000000000..c853d8d328
--- /dev/null
+++ b/files/fr/web/api/wifimanager/ondisabled/index.html
@@ -0,0 +1,32 @@
+---
+title: WifiManager.ondisabled
+slug: Web/API/WifiManager/ondisabled
+tags:
+  - API
+  - B2G
+  - Non Standard
+  - WebAPI
+translation_of: Archive/B2G_OS/API/WifiManager/ondisabled
+---
+<div>{{APIRef("Firefox OS")}}{{non-standard_header}}</div>
+
+<p>{{B2GOnlyHeader2('certified')}}</p>
+
+<p>Pointe sur un écouteur d'événement pour recevoir l'événement {{event("disabled")}}. Cet événement se produit lorsque la WiFi de l'appareil est éteinte.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">navigator.mozWifiManager.ondisabled = funcRef</pre>
+
+<p>Où <code><em>funcRef</em></code> est une fonction à appeler lorsque l'événement {{event("disabled")}} se produit.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WifiManager")}}</li>
+ <li><a href="/fr/docs/WebAPI/WiFi_Information" title="/en-US/docs/WebAPI/WiFi_Information">WifI Information API</a></li>
+</ul>
diff --git a/files/fr/web/api/wifimanager/onenabled/index.html b/files/fr/web/api/wifimanager/onenabled/index.html
new file mode 100644
index 0000000000..b0ca2ac382
--- /dev/null
+++ b/files/fr/web/api/wifimanager/onenabled/index.html
@@ -0,0 +1,32 @@
+---
+title: WifiManager.onenabled
+slug: Web/API/WifiManager/onenabled
+tags:
+  - API
+  - B2G
+  - Non Standard
+  - WebAPI
+translation_of: Archive/B2G_OS/API/WifiManager/onenabled
+---
+<div>{{APIRef("Firefox OS")}}{{non-standard_header}}</div>
+
+<div>{{ B2GOnlyHeader2('certified') }}</div>
+
+<p>Pointe sur un écouteur d'événement pour recevoir l'événement {{event("enabled")}}. Cet événement se produit lorsque la WiFi de l'appareil est allumée.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">navigator.mozWifiManager.onenabled = funcRef</pre>
+
+<p>Où <code><em>funcRef</em></code> est une fonction à appeler lorsque l'événement {{event("enabled")}} se produit.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WifiManager")}}</li>
+ <li><a href="/fr/docs/WebAPI/WiFi_Information">WifI Information API</a></li>
+</ul>
diff --git a/files/fr/web/api/wifimanager/onstatuschange/index.html b/files/fr/web/api/wifimanager/onstatuschange/index.html
new file mode 100644
index 0000000000..fa27f2742b
--- /dev/null
+++ b/files/fr/web/api/wifimanager/onstatuschange/index.html
@@ -0,0 +1,33 @@
+---
+title: WifiManager.onstatuschange
+slug: Web/API/WifiManager/onstatuschange
+tags:
+  - API
+  - B2G
+  - Non Standard
+  - WebAPI
+translation_of: Archive/B2G_OS/API/WifiManager/onstatuschange
+---
+<div>{{APIRef("Firefox OS")}}{{non-standard_header}}</div>
+
+<div>{{B2GOnlyHeader2('certified')}}</div>
+
+<p>Pointe sur un écouteur d'événement pour recevoir l'événement {{event("statuschange")}}. Cet événement se produit lorsque la connexion WiFi change d'état.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">navigator.mozWifiManager.onstatuschange = funcRef</pre>
+
+<p>Où <code><em>funcRef</em></code> est une fonction à appeler lorsque l'événement {{event("statuschange")}} se produit. Cette fonction de rappel reçoit un objet {{domxref("MozWifiStatusChangeEvent")}} comme premier paramètre.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WifiManager")}}</li>
+ <li>{{domxref("MozWifiStatusChangeEvent")}}</li>
+ <li><a href="/fr/docs/WebAPI/WiFi_Information">WifI Information API</a></li>
+</ul>
diff --git a/files/fr/web/api/wifimanager/setpowersavingmode/index.html b/files/fr/web/api/wifimanager/setpowersavingmode/index.html
new file mode 100644
index 0000000000..5735b5944a
--- /dev/null
+++ b/files/fr/web/api/wifimanager/setpowersavingmode/index.html
@@ -0,0 +1,39 @@
+---
+title: WifiManager.setPowerSavingMode()
+slug: Web/API/WifiManager/setPowerSavingMode
+tags:
+  - API
+  - B2G
+  - Non Standard
+  - WebAPI
+translation_of: Archive/B2G_OS/API/WifiManager/setPowerSavingMode
+---
+<div>{{APIRef("Firefox OS")}}{{ non-standard_header() }}</div>
+
+<div>{{B2GOnlyHeader2('certified') }}</div>
+
+<p>La méthode <code>setPowerSavingMode</code> est utilisée pour que l'adaptateur WiFi active ou désactive le mode économie d'énergie.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre>var request = navigator.mozWifiManager.setPowerSavingMode(enabled);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>enabled</dt>
+ <dd>Un booléen indiquant si le dispositif doit activer (<code>true</code>) ou désactiver (<code>false</code>) le mode économie d'énergie.</dd>
+</dl>
+
+<h3 id="Résultats">Résultats</h3>
+
+<p>Elle renvoie un handle <a href="https://developer.mozilla.org/fr/docs/Web/API/DOMRequest"><code>DOMRequest</code></a>  qui indique le succès ou l'echec de l'opération.</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<p>Ne fait partie d'aucune spécification.</p>
+
+<ul>
+ <li>{{domxref("WifiManager")}}</li>
+ <li><a href="/fr/docs/WebAPI/WiFi_Information" title="/en-US/docs/WebAPI/WiFi_Information">WifI Information API</a></li>
+</ul>
diff --git a/files/fr/web/api/wifimanager/setstaticipmode/index.html b/files/fr/web/api/wifimanager/setstaticipmode/index.html
new file mode 100644
index 0000000000..f88e2433eb
--- /dev/null
+++ b/files/fr/web/api/wifimanager/setstaticipmode/index.html
@@ -0,0 +1,51 @@
+---
+title: WifiManager.setStaticIpMode()
+slug: Web/API/WifiManager/setStaticIpMode
+tags:
+  - API
+  - B2G
+  - Non Standard
+  - WebAPI
+translation_of: Archive/B2G_OS/API/WifiManager/setStaticIpMode
+---
+<div>{{APIRef("Firefox OS")}}{{non-standard_header}}</div>
+
+<div>{{B2GOnlyHeader2('certified')}}</div>
+
+<p>La méthode <code>setStaticIpMod</code> est utilisée pour définir une adresse IP statique ou dynamique pour l'appareil sur un réseau donné (si le réseau dispose d'un serveur DHCP).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre>var request = navigator.mozWifiManager.setStaticIpMode(param);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>param</dt>
+ <dd>Un objet de configuration avec les propriétés suivantes:
+ <ul>
+  <li><code>enabled</code> : Un booléen demandant si le mode IP statique doit être activé (<code>true</code>) ou désactivé (<code>false</code>). Si il est désactivé et un réseau WiFi DHCP activé, l'appareil obtiendra une adresse IP dynamique.</li>
+  <li><code>ipaddr</code> : Une chaîne représentant l'adresse IP de l'appareil dans le format de quad en pointillés.</li>
+  <li><code>proxy</code> : Une chaîne représentant l'adresse du serveur proxy (le cas échéant, sinon une chaîne vide).</li>
+  <li><code>maskLength</code> : Un nombre représentant la longueur du masque réseau.</li>
+  <li><code>gateway</code> : Une chaîne représentant une adresse de passerelle (le cas échéant, sinon une chaîne vide).</li>
+  <li><code>dns1</code> : Une chaîne représentant la première adresse du serveur DNS.</li>
+  <li><code>dns2</code> : Une chaîne représentant la deuxième adresse du serveur DNS.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Résultats">Résultats</h3>
+
+<p>Elle renvoie un handle <a href="https://developer.mozilla.org/fr/docs/Web/API/DOMRequest"><code>DOMRequest</code></a>  qui indique le succès ou l'echec de l'opération.</p>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<p>Ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WifiManager")}}</li>
+ <li><a href="/fr/docs/WebAPI/WiFi_Information" title="/en-US/docs/WebAPI/WiFi_Information">WifI Information API</a></li>
+</ul>
diff --git a/files/fr/web/api/wifimanager/wps/index.html b/files/fr/web/api/wifimanager/wps/index.html
new file mode 100644
index 0000000000..b1b232f9a7
--- /dev/null
+++ b/files/fr/web/api/wifimanager/wps/index.html
@@ -0,0 +1,112 @@
+---
+title: WifiManager.wps()
+slug: Web/API/WifiManager/wps
+tags:
+  - API
+  - B2G
+  - Method
+  - Non Standard
+  - WebAPI
+translation_of: Archive/B2G_OS/API/WifiManager/wps
+---
+<div>{{APIRef("Firefox OS")}}{{non-standard_header}}</div>
+
+<div>{{ B2GOnlyHeader2('certified') }}</div>
+
+<p>La méthode <code>wps</code> est utilisée pour traiter un handle de connexion<a class="external external-icon" href="http://fr.wikipedia.org/wiki/Wi-Fi_Protected_Setup" title="http://en.wikipedia.org/wiki/Wi-Fi_Protected_Setup">WPS</a> avec les réseaux qui soutiennent cette fonctionnalité.</p>
+
+<p>Un réseau suportant une connexion WPS à la chaîne <code>WPS</code> disponible dans le tableau {{domxref("WifiManager.capabilities")}}.</p>
+
+<p>Une <a class="external external-icon" href="http://fr.wikipedia.org/wiki/Wi-Fi_Protected_Setup" title="http://en.wikipedia.org/wiki/Wi-Fi_Protected_Setup">connexion WPS</a> est un moyen simple de connecter un périphérique à un réseau. Il nécessite moins de connaissances de l'utilisateur et rend les choses plus faciles pour lui.Fondamentalement, quand un utilisateur a un routeur WiFi compatible WPS, il peut choisir cette méthode pour connecter son appareil sur le réseau au lieu de saisir son mot de passe.</p>
+
+<p>Il existe deux façons de lancer une connexion WPS:</p>
+
+<ul>
+ <li>La plus simple est d'appuyer sur un bouton dédié du routeur WiFi.</li>
+ <li>Une alternative est d'indiquer un code PIN fourni par le routeur WiFi. Il y a alors deux cas d'utilisation :
+  <ol>
+   <li>Le routeur WiFi enverra un code PIN à l'appareil que l'utilisateur doit saisir sur l'interface de routeur WiFi.</li>
+   <li>Le routeur WiFi attend que l'utilisateur saisisse un code PIN sur son périphérique (généralement, un tel code PIN est affiché sur le routeur WiFi lui-même).</li>
+  </ol>
+ </li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre>var request = navigator.mozWifiManager.wps(param);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>param</dt>
+ <dd>Un objet de configuration avec les propriétés suivantes :
+ <ul>
+  <li><code>method</code> : l'une des chaînes suivantes :
+   <ul>
+    <li><code>cancel</code> pour annuler une tentative de connexion WPS.</li>
+    <li><code>pbs</code> pour tenter une connexion en appuyant sur ​​le bouton physique du routeur WiFi.</li>
+    <li><code>pin</code> pour tenter une connexion avec un code pin.</li>
+   </ul>
+  </li>
+  <li><code>bssid</code> : une chaîne représentant le bssid du réseau pour se connecter. Il est obligatoire si la propriété <code>method</code> est définie à <code>pin</code> .</li>
+  <li><code>pin </code>: une chaîne représentant le code pin saisi par l'utilisateur. Il est obligatoire si la propriété <code>method</code> est définie à <code>pin</code>.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Résultats">Résultats</h3>
+
+<p>Elle renvoie un handle <a href="https://developer.mozilla.org/fr/docs/Web/API/DOMRequest"><code>DOMRequest</code></a>qui indique le succès ou l'échec de l'opération.</p>
+
+<p>Lorsque la propriété <code>method</code> est définie à <code>pin</code>, si l'opération est réussie et si l'utilisateur doit saisir un numéro d'identification sur son interface de routeur WiFi, le résultat de la requête est une chaîne représentant le code PIN.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">var wifi = navigator.mozWifiManager;
+
+var request = wifi.getNetworks();
+
+request.onsuccess = function () {
+  // <code>Utilisons</code><code class="language-js"><span class="comment token"> du premier réseau.</span></code>
+  var network = this.result[0];
+  var isWPSEnabled = network.capabilities.indexOf('WPS') &gt; -1;
+  var wpsRequest;
+
+  if (isWPSEnabled) {
+    if (comfirm(<code>'</code><code class="language-js"><span class="string token">Voulez-vous utiliser le bouton poussoir pour connecter votre appareil ?</span></code>')) {
+      wpsRequest = wifi.wps({
+        method : 'pbs'
+      });
+    }
+
+    else if (confirm('<code class="language-js"><span class="string token">Voulez-vous saisir un numéro de code PIN sur votre interface de routeur wifi ?</span></code>')){
+      wpsRequest = wifi.wps({
+        method : 'pin',
+        bssid: network.bssid
+      })
+
+      wpsRequest.onsuccess = function () {
+        alert('<code class="language-js"><span class="string token">Veuillez saisir ce numéro sur votre interface de routeur WiFi:</span></code>' + this.result)
+      }
+    }
+
+    else {
+      wpsRequest = wifi.wps({
+        method : 'pin',
+        bssid: network.bssid
+        pin: prompt('<code class="language-js"><span class="string token">Veuillez indiquer le code PIN de votre routeur WiFi.</span></code>')
+      })
+    }
+  }
+}</pre>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<p>Ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WifiManager")}}</li>
+ <li><a href="/fr/docs/WebAPI/WiFi_Information" title="/en-US/docs/WebAPI/WiFi_Information">WifI Information API</a></li>
+</ul>
diff --git a/files/fr/web/api/window/alert/index.html b/files/fr/web/api/window/alert/index.html
new file mode 100644
index 0000000000..cacd0d33db
--- /dev/null
+++ b/files/fr/web/api/window/alert/index.html
@@ -0,0 +1,37 @@
+---
+title: window.alert
+slug: Web/API/Window/alert
+tags:
+  - DOM
+  - DOM_0
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/Window/alert
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p>Affiche un dialogue d'alerte contenant le texte spécifié.</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<pre class="eval">window.alert(<i>message</i>);
+</pre>
+<ul>
+ <li><code>message</code> est une chaîne contenant le texte à afficher dans le dialogue d'alerte.</li>
+</ul>
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+<pre class="eval">window.alert("Bonjour !");
+</pre>
+<p>produira :</p>
+<p><img alt="Image:AlertHelloWorld.png"></p>
+<h3 id="Notes" name="Notes">Notes</h3>
+<p>Le dialogue d'alerte doit être utilisé pour les messages qui ne demandent aucune réponse de la part de l'utilisateur, à part son acceptation du message.</p>
+<p><span class="comment">Le texte suivant est commun à cet article, DOM:window.prompt et DOM:window.confirm</span> Les boîtes de dialogue sont des fenêtres modales : elles empêchent l'utilisateur d'accéder au reste de l'interface du programme tant qu'elles ne sont pas fermées. C'est pourquoi il ne faut pas abuser des fonctions créant une boîte de dialogue (ou fenêtre modale).</p>
+<p>Les applications utilisant le chrome (par exemple les extensions) devront plutôt utiliser les méthodes de <a href="fr/NsIPromptService">nsIPromptService</a>.</p>
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+<p>{{ DOM0() }}</p>
+<h3 id="Voir_aussi" name="Voir_aussi">Voir aussi</h3>
+<ul>
+ <li><a href="/fr/DOM/window.confirm" title="Affiche un dialogue modal avec un message et deux boutons, OK et Annuler.">confirm</a></li>
+ <li><a href="/fr/DOM/window.prompt" title="Affiche un dialogue avec un message demandant à l'utilisateur d'entrer une réponse sous forme de texte.">prompt</a></li>
+</ul>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "en": "en/DOM/window.alert", "ja": "ja/DOM/window.alert", "pl": "pl/DOM/window.alert" } ) }}</p>
diff --git a/files/fr/web/api/window/applicationcache/index.html b/files/fr/web/api/window/applicationcache/index.html
new file mode 100644
index 0000000000..1999a31f7f
--- /dev/null
+++ b/files/fr/web/api/window/applicationcache/index.html
@@ -0,0 +1,37 @@
+---
+title: Window.applicationCache
+slug: Web/API/Window/applicationCache
+translation_of: Web/API/Window/applicationCache
+---
+<div class="blockIndicator warning">
+<p><strong>Important</strong>: Le cache d'application est obsolète depuis Firefox 44, et n'est plus disponible dans un contexte non sécurisé depuis Firefox 60 ({{bug(1354175)}}, actuellemet Nightly/Beta seulement). Ne pas l'utiliser sur des sites hors lignes — envisager l'utilisation de <a href="https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API">service workers</a> à la place.</p>
+</div>
+
+<p>{{APIRef}}</p>
+
+<h2 id="Summary" name="Summary">Sommaire</h2>
+
+<p>Retourne une référence à l'objet du cache d'application pour la fenêtre.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>cache</var> = window.applicationCache
+</pre>
+
+<h3 id="Parameters" name="Parameters">Paramètres</h3>
+
+<ul>
+ <li><code>cache</code> est une référence objet pour un {{domxref("OfflineResourceList")}}.</li>
+</ul>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<ul>
+ <li>{{spec("http://www.w3.org/TR/2008/WD-html5-20080122/#appcache","HTML 5","WD")}}</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/HTML/Using_the_application_cache">Using Application Cache</a></li>
+</ul>
diff --git a/files/fr/web/api/window/back/index.html b/files/fr/web/api/window/back/index.html
new file mode 100644
index 0000000000..653d5b9d61
--- /dev/null
+++ b/files/fr/web/api/window/back/index.html
@@ -0,0 +1,59 @@
+---
+title: Window.back()
+slug: Web/API/Window/back
+tags:
+  - API
+  - Firefox
+  - Gecko
+  - HTML DOM
+  - Méthode
+  - Non-standard
+  - Obsolete
+  - Window
+  - back
+translation_of: Web/API/Window/back
+---
+<div>{{APIRef}}{{ Non-standard_header() }}{{deprecated_header}}</div>
+
+<p>La méthode obsolète et non standard <code>back()</code> sur l'objet {{domxref("window")}} renvoie la fenêtre à l'élément précédent de l'historique. Il s'agissait d'une méthode spécifique à Firefox et a été supprimée dans Firefox 31.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> Utilisez plutôt la méthode standard {{domxref("history.back")}}.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">window.back();</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Aucun.</p>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p><code>undefined</code>.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Cet exemple simple gère un clic sur un bouton "Retour" en rappelant <code>back()</code>.</p>
+
+<pre class="brush:js notranslate">function boutonRetour() {
+  if (peutRevenirEnArriere) {
+    window.back();
+  }
+}</pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<p>Cela ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Cette méthode non standard n'a été implémentée que dans Firefox et a été supprimée dans Firefox 31.</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>{{domxref("History.back()")}}</li>
+ <li>{{domxref("History.forward()")}}</li>
+</ul>
diff --git a/files/fr/web/api/window/blur/index.html b/files/fr/web/api/window/blur/index.html
new file mode 100644
index 0000000000..ecfd8ee20b
--- /dev/null
+++ b/files/fr/web/api/window/blur/index.html
@@ -0,0 +1,48 @@
+---
+title: Window.blur()
+slug: Web/API/Window/blur
+tags:
+  - API
+  - DOM
+  - Gecko
+  - Méthode
+translation_of: Web/API/Window/blur
+---
+<p>{{APIRef}}</p>
+
+<p>Éloigne la mise au point de la fenêtre.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><code>window.blur()</code></pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush:js notranslate">window.blur();</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>La méthode window.blur () est l'équivalent programmatique du déplacement du focus de l'utilisateur loin de la fenêtre courante.</p>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentair</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','interaction.html#dom-window-blur','Window.blur()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.Window.blur")}}</p>
diff --git a/files/fr/web/api/window/cancelanimationframe/index.html b/files/fr/web/api/window/cancelanimationframe/index.html
new file mode 100644
index 0000000000..53e22003a2
--- /dev/null
+++ b/files/fr/web/api/window/cancelanimationframe/index.html
@@ -0,0 +1,79 @@
+---
+title: window.cancelAnimationFrame()
+slug: Web/API/Window/cancelAnimationFrame
+tags:
+  - API
+  - Animation
+  - DOM
+  - Experimental
+  - Méthode
+  - Reference
+  - Window
+translation_of: Web/API/Window/cancelAnimationFrame
+---
+<div>{{APIRef}}</div>
+
+<div>La méthode <code><strong>window.cancelAnimationFrame()</strong></code> met fin à une animation précédement configurée par un appel à {{domxref("window.requestAnimationFrame()")}}.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox" id="window.cancelAnimationFramerequestID_Paramètres">window.cancelAnimationFrame(<em>requestID</em>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>requestID</code></dt>
+ <dd>L'identifiant retourné par l'appel à {{domxref("window.requestAnimationFrame()")}} qui a généré la fonction de rappel (callback)</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
+                            window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
+
+var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;
+
+var start = window.mozAnimationStartTime;  // Seulement supporté par Firefox. Les autre navigateurs peuvent utiliser quelque chose comme Date.now()..
+
+var myReq; // Déclarer la variable globalement avant de lancer l'animation
+
+function step(timestamp) {
+  var progress = timestamp - start;
+  d.style.left = Math.min(progress / 10, 200) + 'px';
+  if (progress &lt; 2000) {
+    // Ne pas oublier de récupérer l'identifiant à chaque appel de la fonction
+    myReq = requestAnimationFrame(step);
+  }
+}
+myReq = requestAnimationFrame(step);
+// L'annulation utilise le dernier identifiant
+cancelAnimationFrame(myReq);
+</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>{{spec("https://www.w3.org/TR/html51/webappapis.html#animation-frames", "Timing control for script-based animations: cancelAnimationFrame", "WD")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Window.cancelAnimationFrame")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("window.mozAnimationStartTime")}}</li>
+ <li>{{domxref("window.requestAnimationFrame()")}}</li>
+</ul>
diff --git a/files/fr/web/api/window/cancelidlecallback/index.html b/files/fr/web/api/window/cancelidlecallback/index.html
new file mode 100644
index 0000000000..e09d66e88b
--- /dev/null
+++ b/files/fr/web/api/window/cancelidlecallback/index.html
@@ -0,0 +1,94 @@
+---
+title: window.cancelIdleCallback()
+slug: Web/API/Window/cancelIdleCallback
+translation_of: Web/API/Window/cancelIdleCallback
+---
+<div>{{APIRef}}{{SeeCompatTable}}</div>
+
+<h2 id="Summary" name="Summary">Résumé</h2>
+
+<p>La méthode <strong><code>window.cancelIdleCallback()</code></strong> annule une fonction précedemment planifiée via {{domxref("window.requestIdleCallback()")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox">window.cancelIdleCallback(<em>idleCallbackId</em>);</pre>
+
+<h3 id="Parameters" name="Parameters">Paramètres</h3>
+
+<dl>
+ <dt><font face="Consolas, Liberation Mono, Courier, monospace">idleCallbackId</font></dt>
+ <dd>L'entier long non-signé retourné par {{domxref("window.requestIdleCallback()")}}.</dd>
+</dl>
+
+<h2 id="Specifications" name="Specifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Spécification</th>
+   <th>Status</th>
+   <th>Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Background Tasks')}}</td>
+   <td>{{Spec2('Background Tasks')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité avec les navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(47)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(47)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(47)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fr/web/api/window/captureevents/index.html b/files/fr/web/api/window/captureevents/index.html
new file mode 100644
index 0000000000..20774b49a8
--- /dev/null
+++ b/files/fr/web/api/window/captureevents/index.html
@@ -0,0 +1,57 @@
+---
+title: Window.captureEvents()
+slug: Web/API/Window/captureEvents
+tags:
+  - API
+  - Gecko
+  - HTML DOM
+  - Méthode
+  - Non-standard
+translation_of: Web/API/Window/captureEvents
+---
+<div>{{ ApiRef() }} {{deprecated_header(1.9)}} {{Non-standard_header}}</div>
+
+<p>La méthode <code><strong>Window.captureEvents()</strong></code> enregistre la fenêtre pour capturer tous les événements du type spécifié.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">window.captureEvents(<em>eventType</em>)
+</pre>
+
+<p><code>eventType</code> est une combinaison des valeurs suivantes: <code>Event.ABORT</code>, <code>Event.BLUR</code>, <code>Event.CLICK</code>, <code>Event.CHANGE</code>, <code>Event.DBLCLICK</code>, <code>Event.DRAGDDROP</code>, <code>Event.ERROR</code>, <code>Event.FOCUS</code>, <code>Event.KEYDOWN</code>, <code>Event.KEYPRESS</code>, <code>Event.KEYUP</code>, <code>Event.LOAD</code>, <code>Event.MOUSEDOWN</code>, <code>Event.MOUSEMOVE</code>, <code>Event.MOUSEOUT</code>, <code>Event.MOUSEOVER</code>, <code>Event.MOUSEUP</code>, <code>Event.MOVE</code>, <code>Event.RESET</code>, <code>Event.RESIZE</code>, <code>Event.SELECT</code>, <code>Event.SUBMIT</code>, <code>Event.UNLOAD</code>.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush:html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html lang="fr"&gt;
+&lt;head&gt;
+&lt;!-- ... --&gt;
+&lt;script&gt;
+function reg() {
+  window.captureEvents(Event.CLICK);
+  window.onclick = page_click;
+}
+
+function page_click() {
+  alert('événement de clic sur la page détecté!');
+}
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body onload="reg();"&gt;
+&lt;p&gt;cliquez n'importe où sur cette page.&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Les événements déclenchés dans le DOM par l'activité de l'utilisateur (tels que cliquer sur des boutons ou déplacer le focus loin du document actuel) passent généralement par la <a href="/en-US/docs/Web/API/Window"><code>window</code></a> de haut niveau et les objets de<code> </code><a href="/en-US/docs/Web/API/document"><code>document</code></a> avant d'arriver à l'objet qui a déclenché l'événement.</p>
+
+<p>Lorsque vous appelez la méthode <code>captureEvents()</code> sur <a href="/en-US/docs/Web/API/Window"><code>window</code></a>, événements du type que vous spécifier (par exemple, <code>Event.CLICK</code>) ne passe plus par les objets "inférieurs" de la hiérarchie. Pour que les événements "bouillonnent" comme ils le font normalement, vous devez appeler<code> </code><a href="/en-US/docs/Web/API/window.releaseEvents"><code>window.releaseEvents()</code></a> ({{deprecated_inline}}) sur la fenêtre pour l'empêcher de piéger les événements.</p>
+
+<p>Notez que vous pouvez transmettre une liste d'événements à cette méthode en utilisant la syntaxe suivante : <code>window.captureEvents(Event.KEYPRESS | Event.KEYDOWN | Event.KEYUP)</code>.</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<p>Cela ne fait partie d'aucune spécification.</p>
diff --git a/files/fr/web/api/window/clearimmediate/index.html b/files/fr/web/api/window/clearimmediate/index.html
new file mode 100644
index 0000000000..dca567cf36
--- /dev/null
+++ b/files/fr/web/api/window/clearimmediate/index.html
@@ -0,0 +1,68 @@
+---
+title: Window.clearImmediate()
+slug: Web/API/Window/clearImmediate
+tags:
+  - API
+  - HTML DOM
+  - Méthode
+  - Window
+translation_of: Web/API/Window/clearImmediate
+---
+<p>{{APIRef("HTML DOM")}}{{Non-standard_header}}</p>
+
+<p>Cette méthode efface l'action spécifiée par {{DOMxRef("window.setImmediate")}}.</p>
+
+<div class="blockIndicator note">
+<p>Cette méthode ne devrait pas devenir standard et n'est implémentée que par les versions récentes d'Internet Explorer et de Node.js 0.10+. Il rencontre la résistance à la fois de <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=686201" title="https://bugzilla.mozilla.org/show_bug.cgi?id=686201">Gecko</a> (Firefox) et <a href="http://code.google.com/p/chromium/issues/detail?id=146172" title="http://code.google.com/p/chromium/issues/detail?id=146172">Webkit</a> (Google/Apple).</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><var>window</var>.clearImmediate( <var>immediateID</var> )
+</pre>
+
+<p>où immediateID est un ID retourné par {{DOMxRef("window.setImmediate")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js notranslate">let immediateID = setImmediate(() =&gt; {
+  // Exécute du code
+}
+
+document.getElementById("bouton")
+  .addEventListener(() =&gt; {
+  clearImmediate(immediateID);
+});
+</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><a class="external" href="https://w3c.github.io/setImmediate/#si-setImmediate" hreflang="en" lang="en">Efficient Script Yielding<br>
+    <small lang="en-US">The definition of '<code>setImmediate</code>' in that specification.</small></a></td>
+   <td><span class="spec-ED">Editor's Draft</span></td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux donées, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.Window.clearImmediate")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>{{DOMxRef("Window.setImmediate()")}}</li>
+</ul>
diff --git a/files/fr/web/api/window/close/index.html b/files/fr/web/api/window/close/index.html
new file mode 100644
index 0000000000..7ed74d3242
--- /dev/null
+++ b/files/fr/web/api/window/close/index.html
@@ -0,0 +1,49 @@
+---
+title: window.close
+slug: Web/API/Window/close
+tags:
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/Window/close
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p>Ferme la fenêtre référencée.</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<pre>window.close();
+</pre>
+<h3 id="Description" name="Description">Description</h3>
+<p>Lorsque cette méthode est appelée, la fenêtre référencée est fermée.</p>
+<p>Cette méthode est uniquement autorisée à être appelée pour des fenêtres qui ont été ouvertes par un script à l'aide de la méthode <a href="fr/DOM/window.open">window.open</a>. Si la fenêtre n'a pas été ouverte par un script, l'erreur suivante apparaît dans la console JavaScript : <code>Scripts may not close windows that were not opened by script.</code></p>
+<h4 id="Exemples" name="Exemples">Exemples</h4>
+<h5 id="Fermeture_d.27une_fen.C3.AAtre_ouverte_avec_window.open.28.29" name="Fermeture_d.27une_fen.C3.AAtre_ouverte_avec_window.open.28.29">Fermeture d'une fenêtre ouverte avec window.open()</h5>
+<pre>&lt;script type="text/javascript"&gt;
+// Variable globale pour stocker une référence vers la fenêtre ouverte
+var fenetreOuverte;
+
+function ouvrirFenetre()
+{
+  fenetreOuverte = window.open('details.html');
+}
+function fermerFenetreOuverte()
+{
+  fenetreOuverte.close();
+}
+&lt;/script&gt;
+</pre>
+<h5 id="Fermeture_de_la_fen.C3.AAtre_courante" name="Fermeture_de_la_fen.C3.AAtre_courante">Fermeture de la fenêtre courante</h5>
+<pre>&lt;script type="text/javascript"&gt;
+function fermerFenetreCourante()
+{
+  window.close();
+}
+&lt;/script&gt;
+</pre>
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+<p>DOM Level 0. <code>window.close()</code> ne fait partie d'aucune spécification ni recommandation technique du W3C.</p>
+<h3 id="R.C3.A9f.C3.A9rence_additionnelle" name="R.C3.A9f.C3.A9rence_additionnelle">Référence additionnelle</h3>
+<ul>
+ <li><a class="external" href="http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/methods/close_0.asp">window.close() sur MSDN</a></li>
+</ul>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "en": "en/DOM/window.close", "ja": "ja/DOM/window.close" } ) }}</p>
diff --git a/files/fr/web/api/window/closed/index.html b/files/fr/web/api/window/closed/index.html
new file mode 100644
index 0000000000..62038b80ae
--- /dev/null
+++ b/files/fr/web/api/window/closed/index.html
@@ -0,0 +1,59 @@
+---
+title: window.closed
+slug: Web/API/Window/closed
+tags:
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/Window/closed
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p>Cette propriété indique si la fenêtre référencée est fermée ou non.</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<pre>isClosed = window.closed;
+</pre>
+<p>Cette propriété est en lecture seule.</p>
+<h3 id="Valeur_renvoy.C3.A9e" name="Valeur_renvoy.C3.A9e">Valeur renvoyée</h3>
+<dl>
+ <dt>
+  <code>isClosed</code></dt>
+ <dd>
+  Un booléen. Les valeurs possibles sont :</dd>
+</dl>
+<ul>
+ <li><code>false</code> : La fenêtre est ouverte.</li>
+ <li><code>true</code> : La fenêtre a été fermée.</li>
+</ul>
+<h3 id="Exemples" name="Exemples">Exemples</h3>
+<h4 id="Chargement_d.27une_page_dans_la_fen.C3.AAtre_principale_depuis_un_popup" name="Chargement_d.27une_page_dans_la_fen.C3.AAtre_principale_depuis_un_popup">Chargement d'une page dans la fenêtre principale depuis un popup</h4>
+<p>L'exemple suivant montre comment un popup peut transmettre un choix de l'utilisateur à la fenêtre principale en y ouvrant une URL différente. Mais il faut d'abord vérifier que la fenêtre principale et encore ouverte.</p>
+<pre>if (!window.opener.closed) {
+  // La fenêtre principale est encore là,
+  // on peut donc y charger une autre page
+  window.opener.location.href = newURL;
+}
+</pre>
+<h4 id="Appel_d.27une_fonction_dans_un_popup_ouvert_pr.C3.A9c.C3.A9demment" name="Appel_d.27une_fonction_dans_un_popup_ouvert_pr.C3.A9c.C3.A9demment">Appel d'une fonction dans un popup ouvert précédemment</h4>
+<p>Dans cette exemple, la fonction <code>refreshPopupWindow()</code> appelle une fonction dans le popup pour rafraichir son contenu. Cependant, si le popup n'a pas encore été ouvert ou si l'utilisateur l'a fermé, un nouveau popup est ouvert.</p>
+<pre>var popupWindow = null;
+
+function refreshPopupWindow() {
+  if (popupWindow &amp;&amp; !popupWindow.closed) {
+    // Le popup a déjà été ouvert et il l'est encore.
+    // On peut donc appeler sa fonction doRefresh().
+    popupWindow.doRefresh();
+  } else {
+    // Il est nécessaire d'ouvrir d'abord le popup.
+    popupWindow = window.open("popup.html");
+  }
+}
+</pre>
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+<p>DOM Level 0. <code>window.closed</code> ne fait partie d'aucune spécification ou recommandation technique du W3C.</p>
+<h3 id="R.C3.A9f.C3.A9rence_suppl.C3.A9mentaire" name="R.C3.A9f.C3.A9rence_suppl.C3.A9mentaire">Référence supplémentaire</h3>
+<ul>
+ <li><a class="external" href="http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/closed.asp">window.closed sur MSDN</a></li>
+</ul>
+<p> </p>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "en": "en/DOM/window.closed", "ja": "ja/DOM/window.closed", "pl": "pl/DOM/window.closed" } ) }}</p>
diff --git a/files/fr/web/api/window/confirm/index.html b/files/fr/web/api/window/confirm/index.html
new file mode 100644
index 0000000000..099cfdaac8
--- /dev/null
+++ b/files/fr/web/api/window/confirm/index.html
@@ -0,0 +1,51 @@
+---
+title: window.confirm
+slug: Web/API/Window/confirm
+tags:
+  - DOM
+  - DOM_0
+translation_of: Web/API/Window/confirm
+---
+<p>{{ApiRef("Window")}}</p>
+
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+
+<p>Affiche un dialogue modal avec un message et deux boutons, OK et Annuler.</p>
+
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+
+<pre class="eval"><em>resultat</em> = window.confirm(<em>message</em>);
+</pre>
+
+<ul>
+ <li><code>message</code> est la chaîne contenant le texte à afficher dans le dialogue.</li>
+ <li><code>resultat</code> est une valeur booléenne indiquant si OK ou Annuler a été sélectionné (<code>true</code> signifie OK).</li>
+</ul>
+
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+
+<pre class="eval">if (window.confirm("Une nouvelle fenêtre va s'ouvrir.")) {
+    window.open("fenetre.html", "Nouvelle fenêtre", "");
+}
+</pre>
+
+<h3 id="Notes" name="Notes">Notes</h3>
+
+<p><span class="comment">Le texte suivant est commun à cet article, DOM:window.prompt et DOM:window.confirm</span> Les boîtes de dialogue sont des fenêtres modales : elles empêchent l'utilisateur d'accéder au reste de l'interface du programme tant qu'elles ne sont pas fermées. C'est pourquoi il ne faut pas abuser des fonctions créant une boîte de dialogue (ou fenêtre modale).</p>
+
+<p>Les applications utilisant le chrome (par exemple les extensions) devront plutôt utiliser les méthodes de <a href="fr/NsIPromptService">nsIPromptService</a>.</p>
+
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+
+<p>{{ DOM0() }}</p>
+
+<h3 id="Voir_aussi" name="Voir_aussi">Voir aussi</h3>
+
+<ul>
+ <li><a href="/fr/docs/DOM/window.alert" title="Affiche un dialogue d'alerte contenant le texte spécifié.">alert</a></li>
+ <li><a href="/fr/docs/DOM/window.prompt" title="Affiche un dialogue avec un message demandant à l'utilisateur d'entrer une réponse sous forme de texte.">prompt</a></li>
+</ul>
+
+<div class="noinclude"> </div>
+
+<p>{{ languages( { "en": "en/DOM/window.confirm", "ja": "ja/DOM/window.confirm" } ) }}</p>
diff --git a/files/fr/web/api/window/console/index.html b/files/fr/web/api/window/console/index.html
new file mode 100644
index 0000000000..6d0bc951dd
--- /dev/null
+++ b/files/fr/web/api/window/console/index.html
@@ -0,0 +1,56 @@
+---
+title: Window.console
+slug: Web/API/Window/console
+tags:
+  - API
+  - Propriété
+  - Reference
+  - Window
+  - console
+  - lecture seule
+translation_of: Web/API/Window/console
+---
+<p>{{ APIRef }}</p>
+
+<p>La propriété <strong><code>Window.console</code></strong> en lecture seule retourne une référence à l'objet {{domxref("Console")}}, qui founit des méthodes pour afficher des information sur la console du navigateur. Ces méthodes ont pour seul but le débogage et ne devraient pas servir à présenter des informations au utilisateurs.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>var consoleObj</em> = <em>window</em>.console;
+</pre>
+
+<h2 id="Example" name="Example">Exemples</h2>
+
+<h3 id="Afficher_dans_la_console">Afficher dans la console</h3>
+
+<p>Le premier exemple affiche du texte dans la console.</p>
+
+<pre class="brush: js">console.log("An error occurred while loading the content");
+</pre>
+
+<p>L'exemple suivant affiche un objet dans la console, et les champs de l'objet y sont écrit:</p>
+
+<pre class="brush: js">console.dir(someObject);</pre>
+
+<p>Voir {{SectionOnPage("/en-US/docs/Web/API/Console", "Usage")}} pour plus d'exemples appronfondit.</p>
+
+<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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Console API')}}</td>
+   <td>{{Spec2('Console API')}}</td>
+   <td>Définition Initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p>Actuellement il y a beaucoup de différences d'implémentation entre les navigateurs, mais ils sont en train d'être standardisés pour les rendre plus consistants entre eux.</p>
+</div>
diff --git a/files/fr/web/api/window/content/index.html b/files/fr/web/api/window/content/index.html
new file mode 100644
index 0000000000..befde3636a
--- /dev/null
+++ b/files/fr/web/api/window/content/index.html
@@ -0,0 +1,29 @@
+---
+title: window.content
+slug: Web/API/Window/content
+tags:
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/Window/content
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p>Renvoie un objet <a href="fr/DOM/window">Window</a> pour la fenêtre de contenu principale. C'est utile pour les fenêtres XUL qui ont un <code>&lt;browser&gt;</code> (ou <code>tabbrowser</code> ou <code>&lt;iframe&gt;</code>) avec l'attribut <code>type="content-primary"</code> défini - l'exemple le plus célèbre étant la fenêtre principale de Firefox, <code>browser.xul</code>. Dans de tels cas, <code>content</code> renvoie une référence à l'objet <code>Window</code> pour le document actuellement affiché dans le navigateur. Il s'agit d'un raccourci pour <code><var>browserRef</var>.contentWindow</code>.</p>
+<p>Dans du contenu non privilégié (des pages Web), <code>content</code> est normalement équivalent à <a href="fr/DOM/window.top">top</a> (sauf dans le cas d'une page chargée dans un panneau latéral, où <code>content</code> se réfère à l'objet <code>Window</code> de l'onglet sélectionné).</p>
+<p>Certains exemples utilisent <code>_content</code> à la place de <code>content</code>. Cette forme est dépréciée depuis un long moment, et vous devriez toujours utiliser <code>content</code> dans du nouveau code.</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<pre class="eval">var <var>windowObject</var> = window.content;
+</pre>
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+<p>L'exécution du code suivant dans une fenêtre chrome XUL contenant un élement <code>&lt;browser type="content-primary"/&gt;</code> dessine une bordure rouge autour du premier élément div de la page actuellement affichée dans le navigateur :</p>
+<pre class="eval">content.document.getElementsByTagName("div")[0].style.border = "solid red 1px";
+</pre>
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+<p>Ne fait partie d'aucune spécification du W3C.</p>
+<h3 id="Voir_aussi" name="Voir_aussi">Voir aussi</h3>
+<ul>
+ <li><a href="fr/Travailler_avec_des_fen%c3%aatres_dans_le_chrome">Travailler avec des fenêtres dans le chrome</a></li>
+ <li>Lorsque vous accédez à des documents depuis du code privilégié, faites attention aux <a href="fr/XPCNativeWrapper">XPCNativeWrapper</a>.</li>
+</ul>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "en": "en/DOM/window.content", "ja": "ja/DOM/window.content", "pl": "pl/DOM/window.content" } ) }}</p>
diff --git a/files/fr/web/api/window/controllers/index.html b/files/fr/web/api/window/controllers/index.html
new file mode 100644
index 0000000000..1b91ba0937
--- /dev/null
+++ b/files/fr/web/api/window/controllers/index.html
@@ -0,0 +1,46 @@
+---
+title: Window.controllers
+slug: Web/API/Window/controllers
+tags:
+  - API
+  - HTML DOM
+  - NeedMarkupWork
+  - NeedSpecTavle
+  - NeedsCompatTable
+  - Property
+  - Reference
+  - Window
+translation_of: Web/API/Window/controllers
+---
+<div>{{APIRef}}{{non-standard_header}}</div>
+
+<h2 id="Summary" name="Summary">Résumé</h2>
+
+<p>Retourne les contrôleurs XUL de la fenêtre chrome.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>controleurs</var> = window.controllers
+</pre>
+
+<ul>
+ <li><code>controleurs</code> est un objet de type <a href="/en-US/docs/XULControllers"><code>XULControllers</code></a> (<a href="/en-US/docs/XPCOM_Interface_Reference/nsIControllers"><code>nsIControllers</code></a>).</li>
+</ul>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<p>Spécifique à XUL. Ne fait pas partie de la spécification.</p>
+
+<div class="note">
+<p>Par défaut, le contrôleur d'une fenêtre contient le code qui prend en charge les commandes globales de la fenêtre.</p>
+
+<p>Le code Chrome peut ajouter des contrôleurs (à utiliser conjointement avec les fonctions goDoCommand et goUpdateCommand dans globalOverlay.js).</p>
+
+<p>Cependant, les contrôleurs ajoutés doivent être explicitement supprimés lorsque la fenêtre est déchargée, car cela n'est pas fait automatiquement.<br>
+ Chaque suppression manquante peut provoquer le</p>
+<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=415775">bug 415775</a>:
+
+<pre class="bz_comment_text" id="comment_text_0">ASSERTION: XPConnect is being called on a scope without a 'Components' property!</pre>
+</div>
+
+<p> </p>
diff --git a/files/fr/web/api/window/copy_event/index.html b/files/fr/web/api/window/copy_event/index.html
new file mode 100644
index 0000000000..c99af609ed
--- /dev/null
+++ b/files/fr/web/api/window/copy_event/index.html
@@ -0,0 +1,77 @@
+---
+title: 'Window: copy event'
+slug: Web/API/Window/copy_event
+tags:
+  - API
+  - Clippboard API
+  - Copie
+  - Event
+  - Evènement
+  - Reference
+  - Window
+  - copy
+translation_of: Web/API/Window/copy_event
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary">L'événement <strong><code>copy</code></strong> se déclenche lorsque l'utilisateur lance une action de copie via l'interface utilisateur du nagivateur.</span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Bulles</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Annulable</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("ClipboardEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Propriété de gestionnaire d'événement</th>
+   <td>{{domxref("HTMLElement/oncopy", "oncopy")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>La cible d'origine de cet événement est le {{domxref ("Element")}} qui était la cible prévue de l'action de copie. Vous pouvez écouter cet événement sur l'interface {{domxref ("Window")}} pour le gérer dans les phases de capture ou de bullage. Pour plus de détails sur cet événement, veuillez consulter la page sur le <a href="/en-US/docs/Web/API/Element/copy_event">Element: copy event</a>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js notranslate">window.addEventListener('copy', (event) =&gt; {
+    console.log('action de copie lancée')
+});</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>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Clipboard API', '#clipboard-event-copy')}}</td>
+   <td>{{Spec2('Clipboard API')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.Window.copy_event")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>Événements liés: {{domxref("Window/cut_event", "cut")}}, {{domxref("Window/paste_event", "paste")}}</li>
+ <li>Cet événement sur {{domxref("Element")}} cible: {{domxref("Element/copy_event", "copy")}}</li>
+ <li>Cet événement sur {{domxref("Document")}} cible: {{domxref("Document/copy_event", "copy")}}</li>
+</ul>
diff --git a/files/fr/web/api/window/crypto/index.html b/files/fr/web/api/window/crypto/index.html
new file mode 100644
index 0000000000..dadf4b3518
--- /dev/null
+++ b/files/fr/web/api/window/crypto/index.html
@@ -0,0 +1,88 @@
+---
+title: Window.crypto
+slug: Web/API/Window/crypto
+translation_of: Web/API/Window/crypto
+---
+<p>{{APIRef}}</p>
+
+<p>La propriété, en lecture seule, {{domxref("Window.crypto")}} retourne l'objet {{domxref("Crypto")}}  associé à l'objet global. Cet objet permet aux pages web d'avoir un accès à certains services liés à cryptographie.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>cryptoObj</em> = window.crypto || window.msCrypto; // pour IE 11
+</pre>
+
+<h2 id="Specification" name="Specification">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("Web Crypto API", "#dfn-GlobalCrypto", "Window.crypto")}}</td>
+   <td>{{Spec2("Web Crypto API")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateur">Compatibilité navigateur</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer / Edge</th>
+   <th>Chrome Opera Vivaldi</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>44 {{ CompatVersionUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>6 {{ property_prefix("-ms") }}</td>
+   <td>19</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Gecko Mobile</th>
+   <th>Firefox OS</th>
+   <th>Internet Explorer / Edge</th>
+   <th>Opera for Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>2 {{ CompatVersionUnknown() }}</td>
+   <td>10 {{ CompatVersionUnknown() }}</td>
+   <td>37 {{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'objet global {{domxref("Window")}}</li>
+</ul>
diff --git a/files/fr/web/api/window/customelements/index.html b/files/fr/web/api/window/customelements/index.html
new file mode 100644
index 0000000000..cc57a29618
--- /dev/null
+++ b/files/fr/web/api/window/customelements/index.html
@@ -0,0 +1,116 @@
+---
+title: Window.customElements
+slug: Web/API/Window/customElements
+tags:
+  - API
+  - CustomElementRegistry
+  - Property
+  - Reference
+  - Web Components
+  - Window
+  - custom elements
+translation_of: Web/API/Window/customElements
+---
+<div>{{APIRef}}</div>
+
+<p>La propriété en lecture seule <code>customElements</code> de l'interface {{domxref("Window")}} renvoie une référence à l'objet {{domxref("CustomElementRegistry")}}, qui peut être utilisée pour enregistrer de nouveaux <a href="/fr-FR/docs/Web/Web_Components/Using_custom_elements">éléments personnalisés</a> et obtenir des informations sur des éléments personnalisés enregistrés.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre>let registreElementsPersonnalises = window.customElements;</pre>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Une instance d'objet {{domxref("CustomElementRegistry")}} représentant le registre des éléments personnalisés pour la fenêtre en cours.</p>
+
+<h2 id="Examples" name="Examples">Exemples</h2>
+
+<p>L'exemple le plus courant d'utilisation de cette propriété que vous verrez sera d'obtenir l'accès à la méthode {{domxref ("CustomElementRegistry.define()")}} pour définir et enregistrer un nouvel élément personnalisé, par exemple :</p>
+
+<pre>let registreElementsPersonnalises = window.customElements;
+registreElementsPersonnalises.define('mon-element-personnalise', MonElementPersonnalise);</pre>
+
+<p>Cependant, il est généralement raccourci en quelque chose comme :</p>
+
+<pre>customElements.define('details-element',
+  class extends HTMLElement {
+    constructor() {
+      super();
+      const modele = document
+        .getElementById('modele-details-element')
+        .content;
+      const racineOmbre = this.attachShadow({mode: 'open'})
+        .appendChild(template.cloneNode(true));
+  }
+});</pre>
+
+<p>Voir notre repo <a href="https://github.com/mdn/web-components-examples/">web-components-examples</a> pour davantage d'exemples d'utilisation.</p>
+
+<h2 id="Specification" name="Specification">Spécification</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", "custom-elements.html#dom-window-customelements", "window.customElements")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>window.customElements</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Chrome for Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>window.customElements</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fr/web/api/window/cut_event/index.html b/files/fr/web/api/window/cut_event/index.html
new file mode 100644
index 0000000000..422705fc68
--- /dev/null
+++ b/files/fr/web/api/window/cut_event/index.html
@@ -0,0 +1,76 @@
+---
+title: 'Window: cut event'
+slug: Web/API/Window/cut_event
+tags:
+  - API
+  - API Presse-papiers
+  - Cut
+  - Evènement
+  - Reference
+  - Web
+  - Window
+translation_of: Web/API/Window/cut_event
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary">L'événement <strong><code>cut</code></strong> est déclenché lorsque l'utilisateur a lancé une action de "cut" via l'interface utilisateur du navigateur.</span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Bulles</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Annulable</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("ClipboardEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Propriété de gestionnaire d'événements</th>
+   <td>{{domxref("HTMLElement/oncut", "oncut")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>La cible d'origine de cet événement est le {{domxref("Element")}} qui était la cible prévue de l'action cut. Vous pouvez écouter cet événement sur l'interface {{domxref("Window")}} pour le gérer dans les phases de capture ou de bullage. Pour plus de détails sur cet événement, veuillez consulter la page sur l'événement <a href="/en-US/docs/Web/API/Element/cut_event">Element: cut event</a>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js notranslate">window.addEventListener('cut', (event) =&gt; {
+    console.log('cut action initiated')
+});</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>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Clipboard API', '#clipboard-event-cut')}}</td>
+   <td>{{Spec2('Clipboard API')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.Window.cut_event")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>Événements liés: {{domxref("Window/copy_event", "copy")}}, {{domxref("Window/paste_event", "paste")}}</li>
+ <li>Cet événement sur {{domxref("Element")}} targets: {{domxref("Element/cut_event", "cut")}}</li>
+ <li>Cet événement sur {{domxref("Document")}} targets: {{domxref("Document/cut_event", "cut")}}</li>
+</ul>
diff --git a/files/fr/web/api/window/defaultstatus/index.html b/files/fr/web/api/window/defaultstatus/index.html
new file mode 100644
index 0000000000..9a991ac4fb
--- /dev/null
+++ b/files/fr/web/api/window/defaultstatus/index.html
@@ -0,0 +1,52 @@
+---
+title: Window.defaultStatus
+slug: Web/API/Window/defaultStatus
+tags:
+  - API
+  - HTML DOM
+  - NeedsCompatTable
+  - NeedsExample
+  - NeedsMarkupWork
+  - NeedsSpecTable
+  - Obsolete
+  - Propriété
+  - Reference
+  - Window
+translation_of: Web/API/Window/defaultStatus
+---
+<p>{{ obsolete_header(23) }}</p>
+
+<p>{{ APIRef() }}</p>
+
+<h2 id="Summary" name="Summary">Résumé</h2>
+
+<p>Obtient / définit le texte de la barre d'état pour la fenêtre donnée.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="eval notranslate"><em>var sMsg</em> = window.defaultStatus;
+window.defaultStatus = <em>sMsg;</em>
+</pre>
+
+<h3 id="Parameters" name="Parameters">Paramètres</h3>
+
+<ul>
+ <li><code>sMsg</code> est une chaîne contenant le texte à afficher par défaut dans la barre d'état.</li>
+</ul>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="notranslate">&lt;html&gt;
+ &lt;body onload="window.defaultStatus='salut!';"/&gt;
+  &lt;button onclick="window.confirm('Êtes-vous sûr de vouloir quitter?');"&gt;confirmer&lt;/button&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Pour définir le statut une fois la fenêtre ouverte, utilisez {{domxref("window.status")}}.</p>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<p>HTML5</p>
diff --git a/files/fr/web/api/window/devicepixelratio/index.html b/files/fr/web/api/window/devicepixelratio/index.html
new file mode 100644
index 0000000000..e232a571d3
--- /dev/null
+++ b/files/fr/web/api/window/devicepixelratio/index.html
@@ -0,0 +1,91 @@
+---
+title: Window.devicePixelRatio
+slug: Web/API/Window/devicePixelRatio
+translation_of: Web/API/Window/devicePixelRatio
+---
+<p>{{APIRef}}</p>
+
+<p>La propriété en lecture seule <code>Window.devicePixelRatio</code> retourne le rapport entre la taille (verticale) d'un pixel physique sur le périphérique d'affichage et la taille d'un pixel indépendant du matériel (abrégé en anglais "dips").</p>
+
+<p>Aucun rappel ni événement ne se déclenche lorsque la valeur change (par exemple, si vous glissez la fenêtre entre deux écrans à densités de pixels différentes).</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em><var>valeur</var></em> = window.devicePixelRatio;
+</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("CSSOM View", "#dom-window-devicepixelratio", "Window.devicePixelRatio")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/@media/resolution">CSS <code>resolution</code> media query</a></li>
+ <li>PPK a effectué des <a href="http://www.quirksmode.org/blog/archives/2012/06/devicepixelrati.html">recherches sur devicePixelRatio</a></li>
+</ul>
diff --git a/files/fr/web/api/window/dialogarguments/index.html b/files/fr/web/api/window/dialogarguments/index.html
new file mode 100644
index 0000000000..e79536d5cf
--- /dev/null
+++ b/files/fr/web/api/window/dialogarguments/index.html
@@ -0,0 +1,28 @@
+---
+title: Window.dialogArguments
+slug: Web/API/Window/dialogArguments
+tags:
+  - API
+  - Déprécié
+  - HTML DOM
+  - NeedsExample
+  - NeedsMarkupWork
+  - NeedsSpecTable
+  - Property
+  - Reference
+  - Window
+translation_of: Web/API/Window/dialogArguments
+---
+<p>{{ Fx_minversion_header(3) }} {{ deprecated_header() }}{{APIRef}}</p>
+
+<p><span class="seoSummary">La propriété <code>dialogArguments</code> renvoie les paramètres qui ont été transmis à la méthode {{domxref("window.showModalDialog()")}} method.</span> Cela vous permet de déterminer quels paramètres ont été spécifiés lors de la boîte de dialogue modale.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><var>valeur</var> = window.dialogArguments;</pre>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.Window.dialogArguments")}}</p>
diff --git a/files/fr/web/api/window/directories/index.html b/files/fr/web/api/window/directories/index.html
new file mode 100644
index 0000000000..a4ea62e3a8
--- /dev/null
+++ b/files/fr/web/api/window/directories/index.html
@@ -0,0 +1,45 @@
+---
+title: Window.directories
+slug: Web/API/Window/directories
+tags:
+  - API
+  - HTML DOM
+  - NeedsCompatTable
+  - NeedsExample
+  - NeedsMarkupWork
+  - NeedsSpecTable
+  - Obsolete
+  - Propriété
+  - Reference
+  - Window
+translation_of: Web/API/Window/directories
+---
+<p>{{ obsolete_header("2.0") }}</p>
+
+<p>{{ APIRef() }}</p>
+
+<h3 id="Summary" name="Summary">Résumé</h3>
+
+<p>Retourne l'objet de la barre d'outils de la barre personnelle de la fenêtre. Utilisez plutôt {{ domxref("window.personalbar") }}.</p>
+
+<h3 id="Syntax" name="Syntax">Syntaxe</h3>
+
+<pre class="javascript notranslate">var <var>dirBar</var> = window.directories;
+</pre>
+
+<h3 id="Parameters" name="Parameters">Paramètres</h3>
+
+<p><var>dirBar</var> est un objet du type <code>BarProp</code>.</p>
+
+<h3 id="Example" name="Example">Exemple</h3>
+
+<pre class="notranslate">&lt;script&gt;
+ function dirs() {
+  alert(window.directories);
+ }
+&lt;/script&gt;
+</pre>
+
+<h3 id="Specification" name="Specification">Spécification</h3>
+
+<p>Ne fait pas partie des spécifications.</p>
diff --git a/files/fr/web/api/window/document/index.html b/files/fr/web/api/window/document/index.html
new file mode 100644
index 0000000000..8fb5e6967e
--- /dev/null
+++ b/files/fr/web/api/window/document/index.html
@@ -0,0 +1,47 @@
+---
+title: Window.document
+slug: Web/API/Window/document
+tags:
+  - API
+  - HTML DOM
+  - Propriété
+  - Reference
+  - Window
+translation_of: Web/API/Window/document
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary"><strong><code>window.document</code></strong> renvoie une référence au <a href="/en-US/docs/Web/API/document">document</a> contenu dans la fenêtre.</span></p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js notranslate">console.log(window.document.title);
+</pre>
+
+<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('HTML WHATWG', '#dom-document-2', 'Window.document')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-document-0', 'Window.document')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.Window.document")}}</p>
diff --git a/files/fr/web/api/window/dump/index.html b/files/fr/web/api/window/dump/index.html
new file mode 100644
index 0000000000..c1821d4daa
--- /dev/null
+++ b/files/fr/web/api/window/dump/index.html
@@ -0,0 +1,26 @@
+---
+title: window.dump
+slug: Web/API/Window/dump
+tags:
+  - DOM
+  - DOM_0
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/Window/dump
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p>Affiche des messages dans la console (native).</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<pre class="eval">dump(<em>message</em>);
+</pre>
+<ul>
+ <li><code>message</code> est le message texte à afficher.</li>
+</ul>
+<h3 id="Notes" name="Notes">Notes</h3>
+<p><code>dump</code> est habituellement utilisé pour débogage du JavaScript. Du code avec permissions peut également utiliser <a href="/fr/Components.utils.reportError" title="fr/Components.utils.reportError">Components.utils.reportError</a> et <a href="/fr/nsIConsoleService" title="fr/nsIConsoleService">nsIConsoleService</a> pour afficher des messages dans la <a href="/fr/Console_JavaScript" title="fr/Console_JavaScript">console JavaScript</a>.</p>
+<p>Dans <a href="/fr/Gecko" title="fr/Gecko">Gecko</a>, <code>dump</code> est désactivé par défaut – il ne fait rien mais ne génère aucune erreur. Pour que <code>dump</code> écrive dans le flux standard de sortie, vous devez l'activer en mettant la préférence <code>browser.dom.window.dump.enabled</code> à <code>true</code>. Vous pouvez définir cette préférence dans <a class="external" href="http://kb.mozillazine.org/About:config">about:config</a> ou dans un <a class="external" href="http://kb.mozillazine.org/User.js_file">fichier user.js</a>.</p>
+<p>Vous aurez besoin d'une console pour voir quelque chose. Si vous n'en avez pas déjà une, fermez et réouvrez le programme en ajoutant le paramètre <code>-console</code> à la ligne de commande.</p>
+<p><code>dump</code> est également disponible au composants XPCOM implémentés en JavaScript, même si <a href="/fr/DOM/window" title="fr/DOM/window">window</a> n'est pas l'objet global dans ce contexte.</p>
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+<p>{{ DOM0() }}</p>
+<p>{{ languages( { "en": "en/DOM/window.dump", "ja": "ja/DOM/window.dump", "pl": "pl/DOM/window.dump" } ) }}</p>
diff --git a/files/fr/web/api/window/event/index.html b/files/fr/web/api/window/event/index.html
new file mode 100644
index 0000000000..18344b068c
--- /dev/null
+++ b/files/fr/web/api/window/event/index.html
@@ -0,0 +1,51 @@
+---
+title: Window.event
+slug: Web/API/Window/event
+tags:
+  - API
+  - Evènement
+  - Gestionnaire d'évènements
+  - HTML DOM
+  - Lecture seulement
+  - Propriété
+  - Window
+translation_of: Web/API/Window/event
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>L'événement de propriété {{domxref("Window")}} en lecture seule renvoie le {{domxref("Event")}} qui est actuellement géré par le code du site. En dehors du contexte d'un gestionnaire d'événements, la valeur est toujours <code>undefined</code>.</p>
+
+<p>Vous devez éviter d'utiliser cette propriété dans un nouveau code et utiliser à la place le {{domxref ("Event")}} transmis à la fonction de gestionnaire d'événements. Cette propriété n'est pas prise en charge universellement et même lorsqu'elle est prise en charge, elle introduit une fragilité potentielle dans votre code.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Cette propriété peut être fragile, dans la mesure où il peut y avoir des situations dans lesquelles <code>l'événement</code> renvoyé n'est pas la valeur attendue. De plus, <code>Window.event</code> n'est pas précis pour les événements distribués dans {{Glossary("shadow tree", "shadow trees")}}.</p>
+</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('DOM WHATWG', "#dom-window-event", "Window.event")}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.Window.event")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>{{domxref("Event.srcElement")}}</li>
+</ul>
diff --git a/files/fr/web/api/window/find/index.html b/files/fr/web/api/window/find/index.html
new file mode 100644
index 0000000000..9ce279fc62
--- /dev/null
+++ b/files/fr/web/api/window/find/index.html
@@ -0,0 +1,78 @@
+---
+title: Window.find()
+slug: Web/API/Window/find
+tags:
+  - API
+  - HTML DOM
+  - Méthode
+  - NeedsCompatTable
+  - NeedsContent
+  - Non-standard
+  - Reference
+  - Window
+  - find
+translation_of: Web/API/Window/find
+---
+<div>{{ApiRef}}{{Non-standard_Header}}</div>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> La prise en charge de <code>Window.find()</code> pourrait changer dans les futures versions de Gecko. Voir {{Bug("672395")}}.</p>
+</div>
+
+<p>La méthode <code><strong>Window.find()</strong></code> trouve une chaîne dans une fenêtre.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><em>window</em>.find(<em>aString</em>, <em>aCaseSensitive</em>, <em>aBackwards</em>, <em>aWrapAround</em>,
+            <em>aWholeWord</em>, <em>aSearchInFrames</em>, <em>aShowDialog</em>);</pre>
+
+<dl>
+ <dt><code>aString</code></dt>
+ <dd>La chaîne de caractère à rechercher.</dd>
+ <dt><code>aCaseSensitive</code></dt>
+ <dd>{{jsxref("Boolean")}}. Si <code>true</code>, spécifie une recherche sensible à la casse.</dd>
+ <dt><code>aBackwards</code></dt>
+ <dd>{{jsxref("Boolean")}}. Si <code>true</code>, spécifie une recherche vers l'arrière.</dd>
+ <dt><code>aWrapAround</code></dt>
+ <dd>{{jsxref("Boolean")}}. Si <code>true</code>, spécifie une recherche enveloppante.</dd>
+ <dt><code>aWholeWord</code> {{Unimplemented_Inline}}</dt>
+ <dd>{{jsxref("Boolean")}}. Si <code>true</code>, spécifie une recherche de mot entier. Ceci n'est pas implémenté; voir {{bug(481513)}}.</dd>
+ <dt><code>aSearchInFrames</code></dt>
+ <dd>{{jsxref("Boolean")}}. Si <code>true</code>, spécifie une recherche dans les cadres.</dd>
+</dl>
+
+<h3 id="Retourne">Retourne</h3>
+
+<p><code>true</code> si la chaîne est trouvé; autrement, <code>false</code>.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">findString = function findText(text) {
+  alert("String \x22" + text + "\x22 found? " + window.find(text));
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;Apples, Bananas, and Oranges.&lt;/p&gt;
+&lt;button type="button" onClick='findString("Apples")'&gt;Search for Apples&lt;/button&gt;
+&lt;button type="button" onClick='findString("Banana")'&gt;Search for Banana&lt;/button&gt;
+&lt;button type="button" onClick='findString("Orange")'&gt;Search for Orange&lt;/button&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Example")}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Dans certains navigateurs, <code>Window.find()</code> sélectionne (met en évidence) le contenu trouvé sur le site.</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<p id="comment_text_2">Cela ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Cette méthode fonctionne dans de nombreux navigateurs modernes, notamment Firefox, Chrome, et Safari.</p>
diff --git a/files/fr/web/api/window/focus/index.html b/files/fr/web/api/window/focus/index.html
new file mode 100644
index 0000000000..51d55e804a
--- /dev/null
+++ b/files/fr/web/api/window/focus/index.html
@@ -0,0 +1,39 @@
+---
+title: Window.focus()
+slug: Web/API/Window/focus
+translation_of: Web/API/Window/focus
+---
+<p>{{APIRef}}</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Demande la mise au premier plan de la fenêtre. Cet appel peut échouer en fonction des réglages utilisateurs, et ne garantit pas que la fenêtre sera au-dessus des autres au retour de cette méthode.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="eval">window.focus()
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="eval">if (clicked) { window.focus(); }
+</pre>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','interaction.html#dom-window-focus','Window.focus()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{ languages( { "ja": "ja/DOM/window.focus", "pl": "pl/DOM/window.focus" } ) }}</p>
diff --git a/files/fr/web/api/window/frameelement/index.html b/files/fr/web/api/window/frameelement/index.html
new file mode 100644
index 0000000000..46193efe10
--- /dev/null
+++ b/files/fr/web/api/window/frameelement/index.html
@@ -0,0 +1,70 @@
+---
+title: Window.frameElement
+slug: Web/API/Window/frameElement
+tags:
+  - API
+  - DOM
+  - Propriété
+  - Reference
+  - Window
+translation_of: Web/API/Window/frameElement
+---
+<div>{{ApiRef}}</div>
+
+<p><span class="seoSummary">La propriété <code><strong>Window.frameElement</strong></code> renvoie l'élément (tel que {{HTMLElement("iframe")}} ou {{HTMLElement("object")}}) dans lequel la fenêtre est intégrée.</span></p>
+
+<div class="note">
+<p><strong>Note:</strong> Malgré le nom de cette propriété, elle fonctionne pour les documents intégrés dans n'importe quel point d'incorporation, y compris {{HTMLElement("object")}}, {{HTMLElement("iframe")}}, ou {{HTMLElement("embed")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">const <em>frameEl</em> = window.frameElement
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>L'élément dans lequel la fenêtre est intégrée. Si la fenêtre n'est pas intégrée dans un autre document, ou si le document dans lequel elle est intégrée a un {{glossary("origin")}}, la valeur est {{jsxref("null")}} à la place.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush:js notranslate">const frameEl = window.frameElement;
+// Si nous sommes incorporés, modifiez l'URL de l'élément contenant en 'http://mozilla.org/'
+if (frameEl) {
+  frameEl.src = 'http://mozilla.org/';
+}
+</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('HTML WHATWG', 'browsers.html#dom-frameelement', 'Window.frameElement')}}</td>
+   <td>{{ Spec2('WebRTC 1.0') }}</td>
+   <td>Spécification initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.Window.frameElement")}}</p>
+</div>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>{{domxref("window.frames")}} renvoie un objet de type tableau, listant les sous-cadres directs de la fenêtre courante.</li>
+ <li>{{domxref("window.parent")}} renvoie la fenêtre parente, qui est la fenêtre contenant le <code>frameElement</code> de la fenêtre enfant.</li>
+</ul>
diff --git a/files/fr/web/api/window/frames/index.html b/files/fr/web/api/window/frames/index.html
new file mode 100644
index 0000000000..3823eba20d
--- /dev/null
+++ b/files/fr/web/api/window/frames/index.html
@@ -0,0 +1,49 @@
+---
+title: Window.frames
+slug: Web/API/Window/frames
+tags:
+  - API
+  - DOM
+  - DOM Reference
+  - DOM_0
+  - Gecko
+  - NeedsContent
+  - NeedsUpdate
+  - Property
+  - Reference
+translation_of: Web/API/Window/frames
+---
+<p>{{ApiRef("Window")}}</p>
+
+<p> </p>
+
+<h2 id="Summary" name="Summary">Résumé</h2>
+
+<p>Renvoie la fenêtre elle-même, qui est semblable à un objet de type Array, listant les frames présentes dans la fenêtre courante.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="eval"><em>frameList</em> = window.frames;
+</pre>
+
+<ul>
+ <li><code>frameList</code> est une liste d'objets frame, semblable à un tableau grâce à la propriété <code>length</code> . Ses éléments sont accessibles en utilisant la notation  <code>{{ mediawiki.external('i') }}</code>.</li>
+ <li><code>frameList === window</code> est évalué à <code>true</code>.</li>
+ <li>Chaque élément de window.frames est un pseudo tableau représentant l'objet <a class="internal" href="/en/DOM/window" title="en/DOM/window">window</a> correspondant au contenu de la  <a class="internal" href="/en/HTML/Element/frame" title="en/HTML/Element/frame">&lt;frame&gt;</a> ou <a class="internal" href="/en/HTML/Element/iframe" title="en/HTML/Element/iframe">&lt;iframe&gt;</a> , et non au DOM element (i)frame (ex., <code>window.frames[ 0 ]</code> équivaut à <code>document.getElementsByTagName( "iframe" )[ 0 ].contentWindow</code>).</li>
+ <li>pour plus de détails sur la valeur retournée, se référer au <a class="external external-icon" href="http://groups.google.com/group/mozilla.dev.platform/browse_thread/thread/5628c6f346859d4f/169aa7004565066?hl=en&amp;ie=UTF-8&amp;oe=utf-8&amp;q=window.frames&amp;pli=1" title="http://groups.google.com/group/mozilla.dev.platform/browse_thread/thread/5628c6f346859d4f/169aa7004565066?hl=en&amp;ie=UTF-8&amp;oe=utf-8&amp;q=window.frames&amp;pli=1">fil de discussion sur mozilla.dev.platform</a>.</li>
+</ul>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">var frames = window.frames; // ou // var frames = window.parent.frames;
+for (var i = 0; i &lt; frames.length; i++) {
+  // faire quelque chose avec chaque subframe en tant que frames[i]
+  frames[i].document.body.style.background = "red";
+}
+</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<p id="comment_text_2">{{SpecName('HTML WHATWG','browsers.html#dom-frames','Window.frames')}}</p>
+
+<p> </p>
diff --git a/files/fr/web/api/window/fullscreen/index.html b/files/fr/web/api/window/fullscreen/index.html
new file mode 100644
index 0000000000..32fe1cb9bb
--- /dev/null
+++ b/files/fr/web/api/window/fullscreen/index.html
@@ -0,0 +1,36 @@
+---
+title: window.fullScreen
+slug: Web/API/Window/fullScreen
+tags:
+  - DOM
+  - DOM_0
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/Window/fullScreen
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p>Cette propriété indique si la fenêtre est affichée en mode plein écran ou non. Elle n'est fiable qu'à partir de Gecko 1.9 (Firefox 3), voir les Notes plus bas.</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<pre class="eval">var <var>isInFullScreen</var> = <var>windowRef</var>.fullScreen;
+</pre>
+<p>Avec les privilèges chrome, la propriété est modifiable ; autrement elle est en lecture seule. Souvenez-vous que si vous essayez de définir cette propriété sans les privilèges chrome, aucune exception ne sera déclenchée et l'appel échouera juste silencieusement. Cela permet d'empêcher que des scripts conçus pour utiliser cette propriété dans Internet Explorer cessent de fonctionner.</p>
+<h3 id="Valeur_de_retour" name="Valeur_de_retour">Valeur de retour</h3>
+<dl>
+ <dt>
+  <code>isInFullScreen</code></dt>
+ <dd>
+  Une valeur booléenne. Signification des valeurs :</dd>
+</dl>
+<ul>
+ <li><code>true</code> : La fenêtre est en mode plein écran.</li>
+ <li><code>false</code> : La fenêtre n'est pas en mode plein écran.</li>
+</ul>
+<h3 id="Exemples" name="Exemples">Exemples</h3>
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+<p>{{ DOM0() }}</p>
+<h3 id="Notes" name="Notes">Notes</h3>
+<p>Cette propriété n'est fiable qu'à partir de Mozilla 1.9 (Firefox 3). Mozilla 1.8 et les versions antérieures disposent de cette propriété, mais elle renvoie toujours <code>false</code>, même quand la fenêtre est en mode plein écran ({{ Bug(127013) }}).</p>
+<p> </p>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "en": "en/DOM/window.fullScreen", "es": "es/DOM/window.fullScreen", "ja": "ja/DOM/window.fullScreen" } ) }}</p>
diff --git a/files/fr/web/api/window/gamepadconnected_event/index.html b/files/fr/web/api/window/gamepadconnected_event/index.html
new file mode 100644
index 0000000000..0f68232b6c
--- /dev/null
+++ b/files/fr/web/api/window/gamepadconnected_event/index.html
@@ -0,0 +1,86 @@
+---
+title: gamepadconnected
+slug: Web/API/Window/gamepadconnected_event
+translation_of: Web/API/Window/gamepadconnected_event
+---
+<p>L'événement gamepadconnected est déclenché lorsque le navigateur détecte quand une manette a été connecté ou qu'un button/axe de la manette a été utilisé pour la première fois.<br>
+  </p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/gamepad/#the-gamepadconnected-event">Gamepad</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">Event</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">DefaultView (<code>&lt;window&gt;</code>)</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Aucune</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+  <tr>
+   <td><code>gamepad</code> {{readonlyInline}}</td>
+   <td>{{domxref("Gamepad")}}</td>
+   <td>The single gamepad attribute provides access to the associated gamepad data for this event.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush:js;">// Noter que l'API a toujours des préfixes vendeur dans les navigateurs l'implémentant
+window.addEventListener("gamepadconnected", function( event ) {
+
+    // Toutes la valeurs d'axes et les buttons sont accessibles à travers:
+    event.gamepad;
+
+});
+</pre>
+
+<h2 id="Evénements_liés">Evénements liés</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Reference/Events/gamepaddisconnected">gamepaddisconnected</a></li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/API/Gamepad/Using_Gamepad_API">Utilisation de l'API Gamepad</a></li>
+</ul>
diff --git a/files/fr/web/api/window/gamepaddisconnected_event/index.html b/files/fr/web/api/window/gamepaddisconnected_event/index.html
new file mode 100644
index 0000000000..f62baa963a
--- /dev/null
+++ b/files/fr/web/api/window/gamepaddisconnected_event/index.html
@@ -0,0 +1,74 @@
+---
+title: gamepaddisconnected
+slug: Web/API/Window/gamepaddisconnected_event
+translation_of: Web/API/Window/gamepaddisconnected_event
+---
+<p>L'événement <code>gamepaddisconnected</code> est déclenché lorsque le navigateur détecte le fait qu'une manette ait été débranchée.</p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/gamepad/#the-gamepaddisconnected-event">Gamepad</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("Event")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">DefaultView (<code>&lt;window&gt;</code>)</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Aucune</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+  <tr>
+   <td><code>gamepad</code> {{readonlyInline}}</td>
+   <td>{{domxref("Gamepad")}}</td>
+   <td>The single gamepad attribute provides access to the associated gamepad data for this event.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Evénements_liés">Evénements liés</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/Reference/Events/gamepadconnected">gamepadconnected</a></li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/API/Gamepad/Using_Gamepad_API">Utilisation de l'API Gamepad</a></li>
+</ul>
diff --git a/files/fr/web/api/window/getcomputedstyle/index.html b/files/fr/web/api/window/getcomputedstyle/index.html
new file mode 100644
index 0000000000..028dc774a8
--- /dev/null
+++ b/files/fr/web/api/window/getcomputedstyle/index.html
@@ -0,0 +1,164 @@
+---
+title: window.getComputedStyle
+slug: Web/API/Window/getComputedStyle
+translation_of: Web/API/Window/getComputedStyle
+---
+<p>{{ ApiRef() }}</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p><code>La méthode window.getComputedStyle() </code>donne la  <a href="/en/CSS/used_value" title="https://developer.mozilla.org/en/CSS/used_value">valeur calculée finale</a> de toutes les propriétés CSS sur un élément.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="eval">var <em>style</em> = window.getComputedStyle(<em>element</em>[, <em>pseudoElt</em>]);</pre>
+
+<dl>
+ <dt>element</dt>
+ <dd>L’{{ domxref("Element") }} pour lequel vous voulez obtenir une valeur calculée.</dd>
+ <dt>pseudoElt {{ optional_inline() }}</dt>
+ <dd>Chaîne de caractère spécifiant le pseudo-élément à cibler. Doit être <code>null</code> (ou non spécifiée) pour les éléments communs.</dd>
+</dl>
+
+<div class="note"><strong>Note:</strong> Avant Gecko 2.0 {{ geckoRelease("2.0") }}, le paramètre <code>pseudoElt</code> était obligatoire. Aucun autre navigateur majeur ne requiert que ce paramètre soit renseigné si il est null. Gecko a été modifié pour se comporter comme les autres navigateurs.</div>
+
+<p>La valeur de retour <code>style</code> est un objet <a href="/en/DOM/CSSStyleDeclaration" title="en/DOM/CSSStyleDeclaration"><code>CSSStyleDeclaration</code></a>.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">var elem1 = document.getElementById("elemId");
+var style = window.getComputedStyle(elem1, null);
+
+// Ce qui équivaut à :
+// var style = document.defaultView.getComputedStyle(elem1, null);
+</pre>
+
+<pre class="brush: js">&lt;style&gt;
+ #elem-container{
+   position: absolute;
+   left:     100px;
+   top:      200px;
+   height:   100px;
+ }
+&lt;/style&gt;
+
+&lt;div id="elem-container"&gt;dummy&lt;/div&gt;
+&lt;div id="output"&gt;&lt;/div&gt;
+
+&lt;script&gt;
+  function getTheStyle(){
+    var elem = document.getElementById("elem-container");
+    var theCSSprop = window.getComputedStyle(elem,null).getPropertyValue("height");
+    document.getElementById("output").innerHTML = theCSSprop;
+   }
+  getTheStyle();
+&lt;/script&gt;
+</pre>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="function token">function dumpComputedStyles</span><span class="punctuation token">(</span>elem<span class="punctuation token">,</span>prop<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+
+  <span class="keyword token">var</span> cs <span class="operator token">=</span> window<span class="punctuation token">.</span><span class="function token">getComputedStyle</span><span class="punctuation token">(</span>elem<span class="punctuation token">,</span><span class="keyword token">null</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span>prop<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>prop<span class="operator token">+</span><span class="string token">" : "</span><span class="operator token">+</span>cs<span class="punctuation token">.</span><span class="function token">getPropertyValue</span><span class="punctuation token">(</span>prop<span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">return</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+  <span class="keyword token">var</span> len <span class="operator token">=</span> cs<span class="punctuation token">.</span>length<span class="punctuation token">;</span>
+  <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i<span class="operator token">=</span><span class="number token">0</span><span class="punctuation token">;</span>i<span class="operator token">&lt;</span>len<span class="punctuation token">;</span>i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+
+    <span class="keyword token">var</span> style <span class="operator token">=</span> cs<span class="punctuation token">[</span>i<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>style<span class="operator token">+</span><span class="string token">" : "</span><span class="operator token">+</span>cs<span class="punctuation token">.</span><span class="function token">getPropertyValue</span><span class="punctuation token">(</span>style<span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+
+<span class="punctuation token">}</span></code></pre>
+
+<h2 id="Description">Description</h2>
+
+<p>L'objet retourné est du même type que celui de la propriété {{domxref("HTMLElement.style", "style")}} de l'élément ciblé. Toutefois les deux objets ont des buts distincts. L'objet retourné par la méthode <code>getComputedStyle</code> est en lecture seule et peut être utilisée pour inspecter le style de l'élément y compris ceux ajoutés via un élément <code>&lt;style&gt;</code> ou une feuille de style externe. L'objet <code>elt.style</code> doit quant à lui être utilisé pour mettre à jour une propriété de style sur un élément donné.</p>
+
+<p>Le premier argument doit être un Element, sinon, si par exemple un #text Node est utilisé, une exception sera lancée. Depuis la version 1.9.2 de Gecko {{geckoRelease("1.9.2")}}, les URLs renvoyées ont désormais des guillemets autour de celles-ci: <code>url("http://foo.com/bar.jpg")</code>.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>pseudo-element support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9</td>
+   <td>15</td>
+   <td>{{CompatVersionUnknown}} </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>WP7 Mango</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>pseudo-element support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Spécification">Spécification</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSview-getComputedStyle">DOM Level 2 Style: getComputedStyle</a></li>
+ <li><a href="http://dev.w3.org/csswg/cssom/#resolved-values" title="http://dev.w3.org/csswg/cssom/#resolved-values">CSS Object Model specification</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("window.getDefaultComputedStyle")}}</li>
+ <li>{{cssxref("resolved_value", "Resolved Value")}}</li>
+</ul>
diff --git a/files/fr/web/api/window/getdefaultcomputedstyle/index.html b/files/fr/web/api/window/getdefaultcomputedstyle/index.html
new file mode 100644
index 0000000000..de387ec600
--- /dev/null
+++ b/files/fr/web/api/window/getdefaultcomputedstyle/index.html
@@ -0,0 +1,149 @@
+---
+title: Window.getDefaultComputedStyle()
+slug: Web/API/Window/getDefaultComputedStyle
+tags:
+  - API
+  - CSS
+  - Method
+  - Reference
+translation_of: Web/API/window/getDefaultComputedStyle
+---
+<div>{{APIRef("CSSOM")}}{{Non-standard_header}}</div>
+
+<p><code>getDefaultComputedStyle()</code> fournit les valeurs calculées par défaut de toutes les propriétés CSS d'un élément, en ignorant la mise en forme de l'auteur. C'est-à-dire que seules les mises en forme de l'agent utilisateur et de l'utilisateur sont pris en compte.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>miseEnForme</em> = window.getDefaultComputedStyle(<em>element</em>[, <em>pseudoElt</em>]);
+</pre>
+
+<dl>
+ <dt>element</dt>
+ <dd>L'{{domxref("Element")}} dont on veut obtenir la mise en forme calculée.</dd>
+ <dt>pseudoElt {{optional_inline}}</dt>
+ <dd>Une chaîne indiquant le pseudo-élément à rechercher. Doit être <code>null</code> (ou non indiqué) pour les éléments ordinaires.</dd>
+</dl>
+
+<p>Le <code>style</code> retourné est un objet <a href="/fr-FR/docs/Web/API/CSSStyleDeclaration"><code>CSSStyleDeclaration</code></a>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var elem1 = document.getElementById("IdElem");
+var miseEnForme = window.getDefaultComputedStyle(elem1);
+</pre>
+
+<pre class="brush: js">&lt;style&gt;
+#conteneur-elem {
+   position: absolute;
+   left:     100px;
+   top:      200px;
+   height:   100px;
+ }
+&lt;/style&gt;
+
+&lt;div id="conteneur-elem"&gt;factice&lt;/div&gt;
+&lt;div id="sortie"&gt;&lt;/div&gt;
+
+&lt;script&gt;
+    var elem = document.getElementById("conteneur-elem");
+    var laPropCSS = window.getDefaultComputedStyle(elem).position;
+    document.getElementById("sortie").innerHTML = laPropCSS; // affichera "static"
+&lt;/script&gt;   </pre>
+
+<h2 id="Description">Description</h2>
+
+<p>L'objet retourné est du même type que l'objet retourné par <code>getComputedStyle</code>, mais il ne prend en compte que les règles user-agent et user.</p>
+
+<h2 id="Utilisation_avec_des_pseudo-éléments">Utilisation avec des pseudo-éléments</h2>
+
+<p><code>getDefaultComputedStyle</code> peut extraire des informations de mise en forme à partir de pseudo-éléments (par exemple, ::after, ::before).</p>
+
+<pre class="brush: html">&lt;style&gt;
+ h3:after {
+   content: ' déchire !';
+ }
+&lt;/style&gt;
+
+&lt;h3&gt;contenu généré&lt;/h3&gt;
+
+&lt;script&gt;
+  var h3       = document.querySelector('h3'),
+      resultat = getDefaultComputedStyle(h3, ':after').content;
+
+  console.log('le contenu généré est : ', resultat); // retourne 'none'
+&lt;/script&gt;
+</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>La valeur retournée est, dans certains cas connus, expressément incorrecte par intention délibérée. En particulier, pour éviter le problème de sécurité appelé CSS History Leak, les navigateurs peuvent "mentir" sur la valeur utilisée pour un lien et toujours retourner des valeurs comme si l'utilisateur n'avait jamais visité le site concerné, et/ou limiter les styles qui peuvent être appliqués via l'utilisation du pseudo-sélecteur <code>:visited</code>. Voir <a href="http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/">http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/</a> et <a href="http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/">http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-visited/</a> pour le détail des exemples de la manière dont cela est implémenté.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Proposé au groupe de travail CSS.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>19</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>pseudo-element support</td>
+   <td>{{CompatNo}}</td>
+   <td>19</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>19</td>
+   <td>7.5</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>pseudo-element support</td>
+   <td>{{CompatNo}}</td>
+   <td>19</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fr/web/api/window/getselection/index.html b/files/fr/web/api/window/getselection/index.html
new file mode 100644
index 0000000000..9e2bfde703
--- /dev/null
+++ b/files/fr/web/api/window/getselection/index.html
@@ -0,0 +1,47 @@
+---
+title: window.getSelection
+slug: Web/API/Window/getSelection
+translation_of: Web/API/Window/getSelection
+---
+<p>{{ ApiRef() }}</p>
+
+<p>Renvoie un objet selection représentant le ou les objets sélectionnés.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="eval"><em>selection</em> = window.getSelection()
+</pre>
+
+<h2 id="Param.C3.A8tres" name="Param.C3.A8tres">Paramètres</h2>
+
+<ul>
+ <li><code>selection</code> est un objet de type {{DOMxRef("Selection")}}.</li>
+</ul>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre class="eval">function foo() {
+   var selObj = window.getSelection();
+   alert(selObj);
+   var selRange = selObj.getRangeAt(0);
+   // travailler avec la sélection
+}
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>En <a href="fr/JavaScript">JavaScript</a>, lorsqu'un objet de type Selection est passé à une fonction, c'est une représentation sous forme de chaîne (string), c'est-à-dire le texte sélectionné, qui lui est passée à la place. L'objet selection apparaît donc comme une chaîne, alors qu'il s'agit en réalité d'un objet possédant ses propres propriétés et méthodes. En pratique, c'est donc la valeur renvoyée par la méthode <code><a href="fr/DOM/Selection/toString">toString</a></code> de l'objet Selection qui est passée. Dans l'exemple ci-dessus, <code>selObj</code> est automatiquement « convertie » lorsqu'elle est passée à <a href="fr/DOM/window.alert">window.alert</a>. Cependant, pour utiliser une propriété ou méthode JavaScript de <a href="fr/JS/String">String</a> comme <code><a href="fr/JS/String.prototype.length">length</a></code> ou <code><a href="fr/JS/String.prototype.substr">substr</a></code>, il est nécessaire d'appeler manuellement la méthode <code>toString</code>. <span class="comment">I'm treading carefully with the word "convert" here because it could be misinterpreted as a permanent convert - Maian</span></p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
+
+<p>DOM Level 0. Ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi" name="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="../Selection_API">Selection API</a></li>
+ <li><a href="../Selection" title="Un objet Sélection représente la plage de texte sélectionnée par l'utilisateur ou la position actuelle du signe d'insertion. Pour obtenir un objet Sélection pour examen ou modification, appelez Window.getSelection()"><code>Selection</code></a></li>
+ <li><a href="../Range" title="L'interface Range représente un fragment d'un document qui peut contenir des nœuds et des parties de nœuds texte."><code>Range</code></a></li>
+ <li><a href="../Document/getSelection" title="La propriété getSelection() de l'interface DocumentOrShadowRoot renvoie un objet Selection, représentant l'étendue du texte sélectionné par l'utilisateur, ou la position actuelle du curseur."><code>Document.getSelection()</code></a></li>
+ <li><a href="../HTMLInputElement/setSelectionRange" title="La méthode HTMLInputElementElement.setSelectionRange() définit les positions de début et de fin de la sélection de texte courante dans un élément &lt;input&amp;gt ;."><code>HTMLInputElement.setSelectionRange()</code></a></li>
+</ul>
diff --git a/files/fr/web/api/window/hashchange_event/index.html b/files/fr/web/api/window/hashchange_event/index.html
new file mode 100644
index 0000000000..39926c03f5
--- /dev/null
+++ b/files/fr/web/api/window/hashchange_event/index.html
@@ -0,0 +1,193 @@
+---
+title: hashchange
+slug: Web/API/Window/hashchange_event
+tags:
+  - Reference
+  - Web
+translation_of: Web/API/Window/hashchange_event
+---
+<p>L'événement <code>hashchange</code> est déclenché lorsque l'identificateur de fragment de l'URL a changé (la partie de l'URL qui suit le symbole #, y compris le symbole # lui-même).</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td>Bulles</td>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <td>Annulable</td>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <td>Objets cibles</td>
+   <td>{{domxref("Window")}}</td>
+  </tr>
+  <tr>
+   <td>Interface</td>
+   <td>{{domxref("HashChangeEvent")}}</td>
+  </tr>
+  <tr>
+   <td>Action par défaut</td>
+   <td>Aucune</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Propriété</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The browsing context (<code>window</code>).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Type de l'évènement</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+  <tr>
+   <td><code>oldURL</code> {{readonlyInline}}</td>
+   <td>{{jsxref("String")}}</td>
+   <td>The previous URL from which the window was navigated.</td>
+  </tr>
+  <tr>
+   <td>newURL {{readonlyInline}}</td>
+   <td>{{jsxref("String")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Il existe plusieurs scripts de secours listés sur <a href="https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills">cette page</a>. Fondamentalement, ces scripts vérifient le <code>location.hash</code> à intervalles réguliers. Voici une version qui n'autorise qu'un seul gestionnaire à être lié à la propriété <code>window.onhashchange</code>:</p>
+
+<pre class="brush:js;">;(function(window) {
+
+  // Sortir si le navigateur implémente cet événement
+  if ("onhashchange" in window) { return; }
+
+  var location = window.location,
+    oldURL = location.href,
+    oldHash = location.hash;
+
+  // Vérifie la hash de la barre d'adresse toutes les 100ms
+  setInterval(function() {
+    var newURL = location.href,
+      newHash = location.hash;
+
+    // Si le hash a été changé et qu'un gestionnaire a été lié...
+    if (newHash != oldHash &amp;&amp; typeof window.onhashchange === "function") {
+      // exécute le gestionnaire
+      window.onhashchange({
+        type: "hashchange",
+        oldURL: oldURL,
+        newURL: newURL
+      });
+
+      oldURL = newURL;
+      oldHash = newHash;
+    }
+  }, 100);
+
+})(window);
+</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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'indices.html#event-hashchange', 'hashchange')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>5.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}<sup>[1]</sup></td>
+   <td>8.0<sup>[2]</sup></td>
+   <td>10.6</td>
+   <td>5.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>2.2</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.9.2")}}</td>
+   <td>9.0</td>
+   <td>11.0</td>
+   <td>5.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Support pour les attributs <code>oldURL</code>/<code>newURL</code> ajouté à  Firefox 6.</p>
+
+<p>[2] Les attributs <code>oldURL</code>/<code>newURL</code> ne sont pas supportés.</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Mozilla_event_reference/popstate"><code>popstate</code></a></li>
+ <li><a href="/en-US/docs/Web/API/WindowEventHandlers/onhashchange">WindowEventHandlers.onhashchange</a></li>
+</ul>
diff --git a/files/fr/web/api/window/history/index.html b/files/fr/web/api/window/history/index.html
new file mode 100644
index 0000000000..65ab9cfe4e
--- /dev/null
+++ b/files/fr/web/api/window/history/index.html
@@ -0,0 +1,53 @@
+---
+title: Window.history
+slug: Web/API/Window/history
+translation_of: Web/API/Window/history
+---
+<div>{{APIRef}}</div>
+
+<p>La propriété en lecture seule <strong style="font-family: 'Courier New','Andale Mono',monospace; line-height: inherit;">Window.history</strong> renvoie une référence à l'objet <span style="line-height: inherit;">{{domxref("History")}}, qui offre la possibilité de manipuler l'historique de session du navigateur (pages visitées dans l'onglet ou le cadre dans lesquels la page courante est chargée).</span></p>
+
+<p>L'objet <code style="font-size: 14px; line-height: inherit;">History</code><span style="line-height: inherit;"> obtenu a les méthodes suivantes : voir </span><a href="/en/DOM/Manipulating_the_browser_history" style="line-height: inherit;" title="en/DOM/Manipulating the browser history">la manipulation de l'historique du navigateur</a><span style="line-height: inherit;"> pour avoir plus de détails ainsi que des exemples.<br>
+ En particulier, cet article explique les caractéristiques des méthodes </span><code style="font-size: 14px; line-height: inherit;">pushState()</code><span style="line-height: inherit;"> et </span><code style="font-size: 14px; line-height: inherit;">replaceState()</code><span style="line-height: inherit;">qu'il est utile de connaître avant de les utiliser.</span></p>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">history.back();     // similaire au bouton de retour
+history.go(-1);     // similaire à history.back();
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Pour les pages de niveau supérieur, vous pourrez voir la liste des pages dans l'historique des sessions, accessibles grâce à l'objet <code style="font-size: 14px; line-height: inherit;">History</code><span style="line-height: inherit;">, situé dans le menu déroulant près des boutons précédent et suivant.</span></p>
+
+<p><span style="line-height: inherit;">Pour des raisons de sécurité, l'objet </span><code style="font-size: 14px; line-height: inherit;">History</code><span style="line-height: inherit;"> n'autorise pas l'accès au URL d'autres pages présentes dans l'historique de la session mais autorise d'y naviguer.</span></p>
+
+<p>Il n'y a pas de possibilité de nettoyer l'historique de la session ou de désactiver les boutons précédent et suivant. La solution éventuelle la plus proche serait la méthode <a href="/en/DOM/window.location#replace" style="line-height: inherit; font-family: 'Courier New', 'Andale Mono', monospace;" title="en/DOM/window.location#replace">location.replace()</a>, permettant de remplacer l'élément actuel de l'historique de la session par l'URL fournie.</p>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'browsers.html#the-history-interface', 'The History interface')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'browsers.html#the-history-interface', 'The History interface')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Window.history")}}</p>
diff --git a/files/fr/web/api/window/home/index.html b/files/fr/web/api/window/home/index.html
new file mode 100644
index 0000000000..45d11a4ad5
--- /dev/null
+++ b/files/fr/web/api/window/home/index.html
@@ -0,0 +1,38 @@
+---
+title: Window.home()
+slug: Web/API/Window/home
+tags:
+  - API
+  - Gecko
+  - HTML DOM
+  - Méthode
+  - Obsolete
+  - Reference
+  - Window
+translation_of: Web/API/Window/home
+---
+<div>{{APIRef}}{{ Non-standard_header() }} {{ obsolete_header(31) }}</div>
+
+<p>La méthode <code><strong>Window.home()</strong></code> renvoie la fenêtre à la page d'accueil.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><em>window</em>.home();
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js notranslate">function goHome() {
+  window.home();
+}
+</pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<p>DOM Niveau 0. Ne fait pas partie de la spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.Window.home")}}</p>
diff --git a/files/fr/web/api/window/importdialog/index.html b/files/fr/web/api/window/importdialog/index.html
new file mode 100644
index 0000000000..8b870f39d6
--- /dev/null
+++ b/files/fr/web/api/window/importdialog/index.html
@@ -0,0 +1,64 @@
+---
+title: window.importDialog
+slug: Web/API/Window/importDialog
+tags:
+  - Traduction_à_relire
+translation_of: Archive/Web/Window.importDialog
+---
+<p>{{ ApiRef() }}</p>
+<div class="note">
+ Cette page vient d'être traduite, mais elle a besoin d'un relecteur différent du traducteur. Pensez également à toujours vérifier le contenu avec sa toute dernière version en anglais.</div>
+<h2 id="Résumé">Résumé</h2>
+<p>Puisque ouvrir une nouvelle fenêtre sur une plateforme mobile n'est pas vraiment approprié, l'équipe de Firefox Mobile a créé la méthode <code>importDialog()</code> pour remplacer {{ domxref("window.openDialog()") }}. Au lieu d'ouvrir une nouvelle fenêtre, elle fusionne l'élément XUL <code>dialog</code> spécifié avec la fenêtre principale.</p>
+<h2 id="Syntaxe">Syntaxe</h2>
+<pre><em>newDialog</em> = importDialog(<em>aParent</em>, <span style="font-style: italic;">aSrc</span>, aArguments)
+</pre>
+<dl>
+ <dt>
+  <code>newDialog</code></dt>
+ <dd>
+  La fenêtre ouverte.</dd>
+ <dt>
+  <code>aParent</code></dt>
+ <dd>
+  L'élément parent de la boîte de dialogue. Peut être <code>null</code>.</dd>
+ <dt>
+  <code>aSrc</code></dt>
+ <dd>
+  L'URL chrome vers la boîte de dialogue XUL.</dd>
+ <dt>
+  <code>aArguments</code></dt>
+ <dd>
+  Un objet JavaScript contenant les données à passer à la boîte de dialogue.</dd>
+</dl>
+<h2 id="Exemple">Exemple</h2>
+<pre class="eval language-html"><em>newDialog</em> = importDialog(<em>aParent</em>, <span style="font-style: italic;">aSrc</span>, aArguments)
+</pre>
+<dl>
+ <dt>
+  <code>newDialog</code></dt>
+ <dd>
+  La fenêtre ouverte</dd>
+ <dt>
+  <code>aParent</code></dt>
+ <dd>
+  La parent de la fenêtre, éventuellement <code>null</code>.</dd>
+ <dt>
+  <code>aSrc</code></dt>
+ <dd>
+  L'URL chrome  de la boîte de dialogue XUL.</dd>
+ <dt>
+  <code>aArguments</code></dt>
+ <dd>
+  Un objet JavaScript contenant les données à transférer à la boîte de dialogue.</dd>
+</dl>
+<h2 id="Notes">Notes</h2>
+<p>Le XUL passé à la méthode <code>importDialog()</code> est très similaire à celui passé à la méthode {{ domxref("window.openDialog()") }}, avec cependant quelques limitations et mises en garde :</p>
+<ul>
+ <li>La racine doit être un élément <code>&lt;dialog&gt;</code>.</li>
+ <li>Les scripts ne doivent pas être chargés via la balise <code>&lt;script&gt;</code>, mais depuis un attribut de l'élément <code>&lt;dialog&gt;</code> .</li>
+</ul>
+<p>Le XUL est fusionné avec la fenêtre spécifiée, un peu à la manière d'un overlay. En conséquence, des conflits entre les identifiants (attributs <code>id</code>) et les scripts JavaScript sont possibles, comme avec les overlays. Prenez cela en considération.</p>
+<h2 id="Spécification">Spécification</h2>
+<p>{{ DOM0() }}</p>
+<p>{{ languages( { "en": "en/DOM/window.importDialog", "fr": "fr/DOM/window.importDialog" } ) }}</p>
diff --git a/files/fr/web/api/window/index.html b/files/fr/web/api/window/index.html
new file mode 100644
index 0000000000..17a9f19ab8
--- /dev/null
+++ b/files/fr/web/api/window/index.html
@@ -0,0 +1,665 @@
+---
+title: window
+slug: Web/API/Window
+tags:
+  - API
+  - DOM
+  - Interface
+  - JavaScript
+  - Reference
+  - Window
+translation_of: Web/API/Window
+---
+<p>{{APIRef}}</p>
+
+<p><span class="seoSummary">L'objet <code>window</code> représente une fenêtre contenant un document DOM ; la propriété <code>document</code> pointe vers le <a href="/fr-FR/docs/DOM/document">document DOM</a> chargé dans cette fenêtre.</span> Une fenêtre pour un document donné peut être obtenue en utilisant la propriété {{Domxref("document.defaultView")}}.</p>
+
+<p>Cette section fournit une brève référence pour toutes les méthodes, propriétés et événements disponibles via l'objet DOM <code>window</code>. L'objet <code>window</code> implémente l'interface <code>Window</code>, qui à son tour hérite de l'interface <code><a href="http://www.w3.org/TR/DOM-Level-2-Views/views.html#Views-AbstractView">AbstractView</a></code>. Certaines fonctions globales supplémentaires, espaces de noms, objets, interfaces et constructeurs, non typiquement associés à la fenêtre, mais disponibles sur celle-ci, sont répertoriés dans la <a href="/fr-FR/docs/JavaScript/Reference">Référence JavaScript</a> et la <a href="/fr-FR/docs/Web/API/Document_Object_Model" title="/fr-FR/docs/Web/API/Document_Object_Model">Référence DOM</a>.</p>
+
+<p>Dans un navigateur utilisant des onglets, comme Firefox, chaque onglet contient son propre objet <code>window</code> (et si vous écrivez une extension, la fenêtre du navigateur elle-même est un objet <code>window</code> séparé — consultez <a href="/fr/docs/Mozilla/Working_with_windows_in_chrome_code#Fen.C3.AAtres_de_contenu">Travailler avec des fenêtres dans du code chrome</a> pour plus d'informations). C'est-à-dire que l'objet <code>window</code> n'est pas partagé entre les onglets dans la même fenêtre. Certaines méthodes, notamment {{ Domxref("window.resizeTo") }} et {{ Domxref("window.resizeBy") }}, s'appliquent à la fenêtre entière et non à l'onglet spécifique auquel l'objet <code>window</code> appartient. En général, ce qui ne peut raisonnablement pas concerner un onglet se rapporte à la fenêtre à la place.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Cette interface hérite des propriétés de l'interface {{domxref("EventTarget")}} et implémente les propriétés des mixins {{domxref("WindowOrWorkerGlobalScope")}} et {{domxref("WindowEventHandlers")}}.</em></p>
+
+<p>Notez que les propriétés qui sont des objets (par exemple, pour redéfinir le prototype d'éléments intrinsèques) sont répertoriées dans une section distincte ci-dessous.</p>
+
+<dl>
+ <dt>{{domxref("Window.closed")}} {{Non-standard_inline}}{{readOnlyInline}}</dt>
+ <dd>Cette propriété indique si la fenêtre en cours est fermée ou non.</dd>
+ <dt>{{domxref("Window.console")}} {{ReadOnlyInline}}</dt>
+ <dd>Renvoie une référence à l'objet console qui fournit l'accès à la console de débogage du navigateur.</dd>
+ <dt>{{domxref("Window.content")}} et Window._content {{Non-standard_inline}} {{obsolete_inline}}{{ReadOnlyInline}}</dt>
+ <dd>Renvoie une référence à l'élément de contenu dans la fenêtre en cours. Depuis Firefox 57 (initialement Nightly uniquement), les deux versions sont uniquement disponibles à partir du code chrome (privilégié) et ne sont plus disponibles sur le Web.</dd>
+ <dt>{{domxref("Window.controllers")}}{{non-standard_inline}}{{ReadOnlyInline}}</dt>
+ <dd>Renvoie les objets du contrôleur XUL pour la fenêtre chrome en cours.</dd>
+ <dt>{{domxref("Window.customElements")}}{{ReadOnlyInline}}</dt>
+ <dd>renvoie une référence à l'objet {{domxref("CustomElementRegistry")}}, qui peut être utilisée pour enregistrer de nouveaux <a href="https://developer.mozilla.org/fr-FR/docs/Web/Web_Components/Using_custom_elements">éléments personnalisés</a> et obtenir des informations à propos d'éléments personnalisés précédemment enregistrés.</dd>
+ <dt>{{domxref("Window.crypto")}} {{readOnlyInline}}</dt>
+ <dd>Retourne l'objet crypto du navigateur.</dd>
+ <dt>{{domxref("Window.defaultStatus")}} {{Obsolete_inline("gecko23")}}</dt>
+ <dd>Récupère / définit le texte de la barre d'état pour la fenêtre donnée.</dd>
+ <dt>{{domxref("Window.devicePixelRatio")}} {{non-standard_inline}}{{ReadOnlyInline}}</dt>
+ <dd>Renvoie le rapport entre les pixels physiques et les pixels indépendants du périphérique dans l'affichage en cours.</dd>
+ <dt>{{domxref("Window.dialogArguments")}} {{Fx_minversion_inline(3)}} {{ReadOnlyInline}}</dt>
+ <dd>Récupère les arguments passés à la fenêtre (si c'est une boîte de dialogue) au moment où {{domxref ("window.showModalDialog()")}} a été appelé. C'est un {{Interface("nsIArray")}}.</dd>
+ <dt>{{domxref("Window.directories")}} {{obsolete_inline}}</dt>
+ <dd>Synonyme de {{domxref("window.personalbar")}}</dd>
+ <dt>{{domxref("Window.document")}} {{ReadOnlyInline}}</dt>
+ <dd>Renvoie une référence au document que la fenêtre contient.</dd>
+ <dt>{{domxref("Window.DOMMatrix")}} {{readOnlyInline}} {{experimental_inline}}</dt>
+ <dd>Renvoie une référence à un objet {{domxref("DOMMatrix")}} représentant des matrices 4x4, adapté aux opérations 2D et 3D.</dd>
+ <dt>{{domxref("Window.DOMMatrixReadOnly")}} {{readOnlyInline}} {{experimental_inline}}</dt>
+ <dd>Renvoie une référence à un objet {{domxref("DOMMatrixReadOnly")}} représentant des matrices 4x4, adapté aux opérations 2D et 3D.</dd>
+ <dt>{{domxref("Window.DOMPoint")}} {{readOnlyInline}} {{experimental_inline}}</dt>
+ <dd>Renvoie une référence à un objet {{domxref("DOMPoint")}} représentant un point 2D ou 3D dans un système de coordonnées.</dd>
+ <dt>{{domxref("Window.DOMPointReadOnly")}} {{readOnlyInline}} {{experimental_inline}}</dt>
+ <dd>Renvoie une référence à un objet {{domxref("DOMPointReadOnly")}} représentant un point 2D ou 3D dans un système de coordonnées.</dd>
+ <dt>{{domxref("Window.DOMQuad")}} {{readOnlyInline}} {{experimental_inline}}</dt>
+ <dd>Renvoie une référence à un objet {{domxref("DOMQuad")}}, qui fournit un objet quadrilatère, c'est-à-dire, ayant quatre coins et quatre côtés.</dd>
+ <dt>{{domxref("Window.DOMRect")}} {{readOnlyInline}} {{experimental_inline}}</dt>
+ <dd>Returns a reference to a {{domxref("DOMRect")}} object, which represents a rectangle.</dd>
+ <dt>{{domxref("Window.DOMRectReadOnly")}} {{readOnlyInline}} {{experimental_inline}}</dt>
+ <dd>Renvoie une référence à un objet {{domxref("DOMRectReadOnly")}} représentant un rectangle.</dd>
+ <dt>{{domxref("Window.frameElement")}} {{readOnlyInline}}</dt>
+ <dd>Renvoie l'élément dans lequel la fenêtre est intégrée, ou null si la fenêtre n'est pas intégrée.</dd>
+ <dt>{{domxref("Window.frames")}} {{readOnlyInline}}</dt>
+ <dd>Renvoie un tableau des sous-cadres dans la fenêtre en cours.</dd>
+ <dt>{{domxref("Window.fullScreen")}} {{gecko_minversion_inline("1.9")}}</dt>
+ <dd>Cette propriété indique si la fenêtre est affichée en plein écran ou non.</dd>
+ <dt>{{domxref("Window.globalStorage")}} {{gecko_minversion_inline("1.8.1")}} {{Non-standard_inline}} {{Obsolete_inline("gecko13")}}</dt>
+ <dd>Non supporté depuis Gecko 13 (Firefox 13). Utilisez {{domxref("Window.localStorage")}} à la place.<br>
+ Était : divers objets de stockage utilisés pour stocker des données sur plusieurs pages.</dd>
+ <dt>{{domxref("Window.history")}} {{ReadOnlyInline}}</dt>
+ <dd>Retourne une référence à l'objet d'historique.</dd>
+ <dt>{{domxref("Window.innerHeight")}} {{readOnlyInline}}</dt>
+ <dd>Récupère la hauteur de la zone de contenu de la fenêtre du navigateur, y compris, si affichée, la barre de défilement horizontale.</dd>
+ <dt>{{domxref("Window.innerWidth")}} {{readOnlyInline}}</dt>
+ <dd>Récupère la largeur de la zone de contenu de la fenêtre du navigateur, y compris, si affichée, la barre de défilement verticale.</dd>
+ <dt>{{domxref("Window.isSecureContext")}} {{readOnlyInline}}</dt>
+ <dd>Indique si un contexte est capable d'utiliser des fonctionnalités nécessitant des contextes sécurisés.</dd>
+ <dt>{{domxref("Window.length")}} {{readOnlyInline}}</dt>
+ <dd>Renvoie le nombre de cadres dans la fenêtre. Voir également {{domxref("window.frames")}}.</dd>
+ <dt>{{domxref("Window.location")}}</dt>
+ <dd>Récupère/définit l'emplacement, ou l'URL en cours, de l'objet de fenêtre.</dd>
+ <dt>{{domxref("Window.locationbar")}} {{ReadOnlyInline}}</dt>
+ <dd>Renvoie l'objet de la barre d'adresse, dont la visibilité peut être inversée dans la fenêtre.</dd>
+ <dt>{{domxref("Window.localStorage")}} {{readOnlyInline}}{{gecko_minversion_inline("1.9.1")}}</dt>
+ <dd>Renvoie une référence à l'objet de stockage local utilisé pour stocker les données accessibles uniquement par l'origine qui les a créées.</dd>
+ <dt>{{domxref("Window.menubar")}} {{ReadOnlyInline}}</dt>
+ <dd>Renvoie l'objet barre de menus, dont la visibilité peut être inversée dans la fenêtre.</dd>
+ <dt>{{domxref("Window.messageManager")}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Renvoie l'objet <a href="/fr-FR/docs/The_message_manager">gestionnaire de messages</a> pour cette fenêtre.</dd>
+ <dt>{{domxref("Window.mozAnimationStartTime")}} {{ReadOnlyInline}}{{gecko_minversion_inline("2.0")}} {{Deprecated_inline}}</dt>
+ <dd>Le temps en millisecondes depuis l'instant auquel le cycle d'animation en cours a commencé.</dd>
+ <dt>{{domxref("Window.mozInnerScreenX")}} {{ReadOnlyInline}}{{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}</dt>
+ <dd>Renvoie la coordonnée horizontale (X) du coin supérieur gauche du point de vue de la fenêtre, en coordonnées d'écran. Cette valeur est restituée en pixels CSS. Voir <code>mozScreenPixelsPerCSSPixel</code> dans {{interface("nsIDOMWindowUtils")}} pour un facteur de conversion pour s'adapter aux pixels de l'écran si nécessaire.</dd>
+ <dt>{{domxref("Window.mozInnerScreenY")}} {{ReadOnlyInline}} {{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}</dt>
+ <dd>Renvoie la coordonnée verticale (Y) du coin supérieur gauche du point de vue de la fenêtre, en coordonnées d'écran. Cette valeur est indiquée en pixels CSS. Voir <code>mozScreenPixelsPerCSSPixel</code> pour un facteur de conversion pour s'adapter aux pixels de l'écran si nécessaire.</dd>
+ <dt>{{domxref("Window.mozPaintCount")}} {{non-standard_inline}}{{ReadOnlyInline}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Renvoie le nombre de fois où le document en cours a été réaffiché à l'écran dans cette fenêtre. Cela peut être utilisé pour calculer les performances d'affichage.</dd>
+ <dt>{{domxref("Window.name")}}</dt>
+ <dd>Récupère / définit le nom de la fenêtre.</dd>
+ <dt>{{domxref("Window.navigator")}} {{readOnlyInline}}</dt>
+ <dd>Renvoie une référence à l'objet navigateur.</dd>
+ <dt>{{domxref("Window.NetworkInformation")}} {{readOnlyInline}} {{experimental_inline}}</dt>
+ <dd>Renvoie une référence à l'interface {{domxref("NetworkInformation")}}, qui fournit des informations sur la connexion qu'un périphérique est en train d'utiliser pour communiquer avec le réseau et fournit un moyen pour les scripts d'être notifiés si le type de connexion change. </dd>
+ <dt>{{domxref("Window.opener")}}</dt>
+ <dd>Renvoie une référence à la fenêtre qui a ouvert la fenêtre en cours.</dd>
+ <dt>{{domxref("Window.orientation")}}{{non-standard_inline}}{{deprecated_inline}}{{readOnlyInline}}</dt>
+ <dd>Renvoie l'orientation en degrés (par incréments de 90 degrés) du point de vue par rapport à l'orientation naturelle du périphérique.</dd>
+ <dt>{{domxref("Window.outerHeight")}} {{readOnlyInline}}</dt>
+ <dd>Récupère la hauteur de l'extérieur de la fenêtre du navigateur.</dd>
+ <dt>{{domxref("Window.outerWidth")}} {{readOnlyInline}}</dt>
+ <dd>Récupère la largeur de l'extérieur de la fenêtre du navigateur.</dd>
+ <dt>{{domxref("Window.scrollX","Window.pageXOffset")}} {{readOnlyInline}}</dt>
+ <dd>Un alias pour {{domxref("window.scrollX")}}.</dd>
+ <dt>{{domxref("Window.scrollY","Window.pageYOffset")}}{{readOnlyInline}}</dt>
+ <dd>Un alias pour {{domxref("window.scrollY")}}</dd>
+ <dt>{{domxref("Window.sessionStorage")}} {{readOnlyInline}}</dt>
+ <dd>Renvoie une référence à l'objet de stockage de session utilisé pour stocker les données accessibles uniquement par l'origine qui les a créées..</dd>
+ <dt>{{domxref("Window.parent")}} {{readOnlyInline}}</dt>
+ <dd>Renvoie une référence au parent de la fenêtre ou du sous-cadre en cours.</dd>
+ <dt>{{domxref("Window.performance")}} {{readOnlyInline}}</dt>
+ <dd>Renvoie un objet {{domxref("Performance")}}, qui inclut les attributs {{domxref("Performance.timing", "timing")}} et {{domxref("Performance.navigation", "navigation")}}, dont chacun est un objet fournissant des données liées aux performances. Voir aussi <a href="/fr-FR/docs/Web/API/Navigation_timing_API/Using_Navigation_Timing">Utilisation de Chronométrage de Navigation</a> pour plus d'informations et d'exemples.</dd>
+ <dt>{{domxref("Window.personalbar")}} {{readOnlyInline}}</dt>
+ <dd>Renvoie l'objet barre personnelle, dont la visibilité peut être inversée dans la fenêtre.</dd>
+ <dt>{{domxref("Window.pkcs11")}} {{obsolete_inline(29)}}</dt>
+ <dd>Fournissait précédemment un accès pour installer et supprimer des modules PKCS11.</dd>
+ <dt>{{domxref("Window.returnValue")}} {{Fx_minversion_inline(3)}}</dt>
+ <dd>La valeur de retour à renvoyer à la fonction qui a appelé {{domxref("window.showModalDialog()")}} pour afficher la fenêtre comme boîte de dialogue modale.</dd>
+ <dt>{{domxref("Window.screen")}} {{readOnlyInline}}</dt>
+ <dd>Renvoie une référence à l'objet écran associé à la fenêtre.</dd>
+ <dt>{{domxref("Window.screenX")}} {{readOnlyInline}}</dt>
+ <dd>Renvoie la distance horizontale de la bordure gauche du navigateur de l'utilisateur à partir du côté gauche de l'écran.</dd>
+ <dt>{{domxref("Window.screenY")}} {{readOnlyInline}}</dt>
+ <dd>Renvoie la distance verticale de la bordure supérieure du navigateur de l'utilisateur à partir du haut de l'écran.</dd>
+ <dt>{{domxref("Window.scrollbars")}} {{readOnlyInline}}</dt>
+ <dd>Renvoie l'objet barres de défilement, dont la visibilité peut être modifiée dans la fenêtre.</dd>
+ <dt>{{domxref("Window.scrollMaxX")}}{{non-standard_inline}}{{ReadOnlyInline}}</dt>
+ <dd>Le décalage maximal dont la fenêtre peut étre décalée horizontalement, c'est-à-dire la largeur du document moins la largeur du point de vue.</dd>
+ <dt>{{domxref("Window.scrollMaxY")}}{{non-standard_inline}}{{ReadOnlyInline}}</dt>
+ <dd>Le décalage maximal dont la fenêtre peut étre décalée verticalement (c'est-à-dire, la hauteur du document moins la hauteur du point de vue).</dd>
+ <dt>{{domxref("Window.scrollX")}} {{readOnlyInline}}</dt>
+ <dd>Renvoie le nombre de pixels dont le document a déjà été décalé horizontalement.</dd>
+ <dt>{{domxref("Window.scrollY")}} {{readOnlyInline}}</dt>
+ <dd>Renvoie le nombre de pixels dont le document a déjà été décalé verticalement.</dd>
+ <dt>{{domxref("Window.self")}} {{ReadOnlyInline}}</dt>
+ <dd>Renvoie une référence d'objet à l'objet fenêtre lui-même.</dd>
+ <dt>{{domxref("Window.sessionStorage")}} {{Fx_minversion_inline("2.0")}}</dt>
+ <dd>Renvoie un objet de stockage pour stocker des données dans une session de page unique.</dd>
+ <dt>{{domxref("Window.sidebar")}} {{non-standard_inline}}{{ReadOnlyInline}}</dt>
+ <dd>Renvoie une référence à l'objet fenêtre de la barre latérale.</dd>
+ <dt>{{domxref("Window.speechSynthesis")}} {{ReadOnlyInline}}</dt>
+ <dd>Renvoie un objet {{domxref("SpeechSynthesis")}}, qui est le point d'entrée pour l'utilisation de la fonctionnalité de synthèse vocale de l'<a href="/fr-FR/docs/Web/API/Web_Speech_API">API Web Speech</a>.</dd>
+ <dt>{{domxref("Window.status")}}</dt>
+ <dd>Récupère/définit le texte dans la barre d'état en bas du navigateur.</dd>
+ <dt>{{domxref("Window.statusbar")}} {{readOnlyInline}}</dt>
+ <dd>Renvoie l'objet barre d'état, dont la visibilité peut être inversée dans la fenêtre.</dd>
+ <dt>{{domxref("Window.toolbar")}} {{readOnlyInline}}</dt>
+ <dd>Renvoie l'objet barre d'outils, dont la visibilité peut être inversée dans la fenêtre.</dd>
+ <dt>{{domxref("Window.top")}} {{readOnlyInline}}</dt>
+ <dd>Renvoie une référence à la fenêtre la plus haute dans la hiérarchie des fenêtres. Cette propriété est en lecture seule.</dd>
+ <dt>{{domxref("Window.visualViewport")}} {{readOnlyInline}}</dt>
+ <dd>Renvoie un objet {{domxref("VisualViewport")}} représentant le point de vue visuel pour une fenêtre donnée.</dd>
+ <dt>{{domxref("Window.window")}} {{ReadOnlyInline}}</dt>
+ <dd>Renvoie une référence à la fenêtre en cours.</dd>
+ <dt><code>window[0]</code>,<code> window[1]</code>, etc.</dt>
+ <dd>Renvoie une référence à l'objet <code>window</code> dans les cadres. Voir {{domxref("Window.frames")}}} pour plus de détails.</dd>
+</dl>
+
+<h3 id="Propriétés_implémentées_depuis_ailleurs">Propriétés implémentées depuis ailleurs</h3>
+
+<dl>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.caches")}} {{readOnlyinline}}</dt>
+ <dd>Renvoie l'objet {{domxref("CacheStorage")}} associé au contexte en cours. Cet objet active des fonctionnalités telles que le stockage des ressources pour une utilisation hors connexion, et la génération de réponses personnalisées aux requêtes.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.indexedDB")}} {{readonlyInline}}</dt>
+ <dd>Fournit un mécanisme permettant aux applications d'accéder de manière asynchrone à des bases de données indexées ; renvoie un objet {{domxref("IDBFactory")}}.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.isSecureContext")}} {{readOnlyinline}}</dt>
+ <dd>Renvoie un booléen indiquant si le contexte actuel est sécurisé (<code>true</code>) ou non (<code>false</code>).</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.origin")}} {{readOnlyinline}}</dt>
+ <dd>Renvoie l'origine de l'objet global, sérialisé comme une chaîne. (Cela ne semble pas encore être implémenté dans aucun navigateur.)</dd>
+</dl>
+
+<h2 id="M.C3.A9thodes" name="M.C3.A9thodes">Méthodes</h2>
+
+<p><em>Cette interface hérite des méthodes de l'interface {{domxref("EventTarget")}} et implémente les méthodes de {{domxref("WindowOrWorkerGlobalScope")}} et {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("Window.alert()")}}</dt>
+ <dd>Affiche une boîte de message d'alerte.</dd>
+</dl>
+
+<p><span class="comment">base64 func <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=287112" rel="freelink">https://bugzilla.mozilla.org/show_bug.cgi?id=287112</a> (see last comments) <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=123003" rel="freelink">https://bugzilla.mozilla.org/show_bug.cgi?id=123003</a> <a class="external" href="http://lxr.mozilla.org/seamonkey/source/dom/src/base/nsGlobalWindow.cpp#4946" rel="freelink">http://lxr.mozilla.org/seamonkey/sou...indow.cpp#4946</a></span></p>
+
+<dl>
+ <dt>{{domxref("Window.back()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Recule d'une page dans l'historique de la fenêtre.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.blur()")}}</dt>
+ <dd>Déplace la focalisation hors de la fenêtre.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.cancelAnimationFrame()")}} {{experimental_inline}}</dt>
+ <dd>Vous permet d'annuler un rappel précédemment planifié avec {{domxref("Window.requestAnimationFrame")}}.</dd>
+ <dt>{{domxref("Window.cancelIdleCallback()")}} {{experimental_inline}}</dt>
+ <dd>Vous permet d'annuler un rappel précédemment planifié avec {{domxref("Window.requestIdleCallback")}}.</dd>
+ <dt>{{domxref("Window.captureEvents()")}} {{Deprecated_inline}}</dt>
+ <dd>Enregistre la fenêtre pour qu'elle capture tous les évènements du type spécifié.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.clearImmediate()")}}</dt>
+ <dd>Annule l'exécution répétée définie en utilisant <code>setImmediate</code>.</dd>
+ <dt>{{domxref("Window.close()")}}</dt>
+ <dd>Ferme la fenêtre en cours.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.confirm()")}}</dt>
+ <dd>Affiche une boîte de dialogue avec un message auquel l'utilisateur doit répondre.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.disableExternalCapture()")}} {{obsolete_inline(24)}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.dispatchEvent()")}}</dt>
+ <dd>Utilisé pour déclencher un évènement.</dd>
+ <dt>{{domxref("Window.dump()")}} {{Non-standard_inline}}</dt>
+ <dd>Écrit un message à la console.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.enableExternalCapture()")}} {{obsolete_inline(24)}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.find()")}}</dt>
+ <dd>Recherche la chaîne de caractères donnée dans une fenêtre.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.focus()")}}</dt>
+ <dd>Donne la focalisation à la fenêtre en cours.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.forward()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Avance la fenêtre d'un document dans l'historique.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.getAttention()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Fait flasher l'icône de l'application.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.getAttentionWithCycleCount()")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.getComputedStyle()")}}</dt>
+ <dd>Récupère un style calculé pour l'élément donné. Un style calculé indique les valeurs de toutes les propriétés CSS de l'élément.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.getDefaultComputedStyle()")}} {{Non-standard_inline}}</dt>
+ <dd>Récupère le style calculé par défaut pour l'élément indiqué, en ignorant les feuilles de style d'auteur.</dd>
+ <dt>{{domxref("Window.getSelection()")}}</dt>
+ <dd>Renvoie l'objet de sélection représentant les éléments sélectionnés.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.home()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Renvoie le navigateur à la page d'accueil.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.matchMedia()")}} {{gecko_minversion_inline("6.0")}}</dt>
+ <dd>Renvoie un objet {{domxref("MediaQueryList")}} représentant la chaîne d'interrogation de média spécifiée.</dd>
+ <dt>{{domxref("Window.maximize()")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.minimize()")}} (top-level XUL windows only)</dt>
+ <dd>Minimize la fenêtre.</dd>
+ <dt>{{domxref("Window.moveBy()")}}</dt>
+ <dd>Déplace la fenêtre en cours de la quantité indiquée.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.moveTo()")}}</dt>
+ <dd>Déplace la fenêtre vers les coordonnées spécifiées.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.open()")}}</dt>
+ <dd>Ouvre une nouvelle fenêtre.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.openDialog()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Ouvre une nouvelle fenêtre de dialogue.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.postMessage()")}} {{Fx_minversion_inline(3)}}</dt>
+ <dd>Fournit un moyen sécurisé pour une fenêtre d'envoyer une chaîne de données à une autre fenêtre, qui n'a pas besoin d'être dans le même domaine que la première.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.prompt()")}}</dt>
+ <dd>Ouvre la boîte de dialogue d'impression du document en cours.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.prompt()")}}</dt>
+ <dd>Renvoie le texte saisi par l'utilisateur dans une boîte de dialogue à invite.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.releaseEvents()")}} {{Non-standard_inline}} {{Deprecated_inline}}</dt>
+ <dd>Annule la capture des évènements d'un certain type par la fenêtre.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.requestAnimationFrame()")}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Indique au navigateur qu'une animation est en cours, en demandant au navigateur de planifier une redessinage de la fenêtre lors de l'image d'animation suivante.</dd>
+ <dt>{{domxref("Window.requestIdleCallback()")}}  {{experimental_inline}}</dt>
+ <dd>Active la planification de tâches pendant les périodes d'inactivité du navigateur.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.resizeBy()")}}</dt>
+ <dd>Redimensionne la fenêtre en cours d'une certaine quantité.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.resizeTo()")}}</dt>
+ <dd>Redimensionne dynamiquement la fenêtre.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.restore()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.routeEvent()")}} {{obsolete_inline(24)}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.scroll()")}}</dt>
+ <dd>Fait défiler la fenêtre à un endroit particulier dans le document.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.scrollBy()")}}</dt>
+ <dd>Fait défiler le document dans la fenêtre de la quantité indiquée.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.scrollByLines()")}} {{Non-standard_inline}}</dt>
+ <dd>Fait défiler le document du nombre de lignes indiqué.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.scrollByPages()")}} {{Non-standard_inline}}</dt>
+ <dd>Fait défiler le document en cours du nombre de pages indiqué.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.scrollTo()")}}</dt>
+ <dd>Fait défiler à un jeu de coordonnées particulier dans le document.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.setCursor()")}} {{Non-standard_inline}} (top-level XUL windows only)</dt>
+ <dd>Change le curseur pour la fenêtre en cours.</dd>
+ <dt>{{domxref("Window.setImmediate()")}}</dt>
+ <dd>Exécute une fonction après que le navigateur a terminé d'autres tâches lourdes</dd>
+ <dt>{{domxref("Window.setResizable()")}} {{Non-standard_inline}}</dt>
+ <dd>Inverse la possibilité pour un utilisateur de redimensionner une fenêtre.</dd>
+ <dt>{{domxref("Window.sizeToContent()")}} {{Non-standard_inline}}</dt>
+ <dd>Dimensionne la fenêtre en fonction de son contenu.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.stop()")}}</dt>
+ <dd>Cette méthode arrête le chargement de la fenêtre.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.updateCommands()")}} {{Non-standard_inline}}</dt>
+ <dd>Met à jour l'état des commandes de la fenêtre chrome en cours (IU).</dd>
+ <dt>
+ <h3 id="Méthodes_implémentées_depuis_ailleurs">Méthodes implémentées depuis ailleurs</h3>
+ </dt>
+ <dt>{{domxref("EventTarget.addEventListener()")}}</dt>
+ <dd>Enregistre un gestionnaire d'événement pour un type d'événement spécifique dans la fenêtre.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.atob()")}}</dt>
+ <dd>Décode une chaîne de données qui a été codée en utilisant l'encodage en base 64.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.btoa()")}}</dt>
+ <dd>Crée une chaîne ASCII codée en base 64 à partir d'une chaîne de données binaires.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}</dt>
+ <dd>Annule l'exécution répétée définie en utilisant {{domxref("WindowOrWorkerGlobalScope.setInterval ()")}}.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}</dt>
+ <dd>Annule l'exécution différée définie en utilisant {{domxref("WindowOrWorkerGlobalScope.setTimeout ()")}}.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.createImageBitmap()")}}</dt>
+ <dd>Accepte une variété de sources d'images différentes, et renvoie un {{domxref("Promise")}} qui se résout en une {{domxref("ImageBitmap")}}. En option, la source est détourée avec le rectangle des pixels d'origine en (sx, sy) et de largeur sw, et de hauteur sh.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.fetch()")}}</dt>
+ <dd>Démarre le processus de récupération d'une ressource à partir du réseau.</dd>
+ <dt>{{domxref("EventTarget.removeEventListener")}}</dt>
+ <dd>Supprime un gestionnaire d'événement de la fenêtre.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}</dt>
+ <dd>Planifie une fonction à exécuter à chaque fois qu'un nombre donné de millisecondes s'est écoulé.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}</dt>
+ <dd>Planifie une fonction à exécuter dans un laps de temps donné.</dd>
+ <dt>
+ <h3 id="Méthodes_obsolètes">Méthodes obsolètes</h3>
+ </dt>
+ <dt>{{domxref("Window.showModalDialog()")}} {{obsolete_inline}}</dt>
+ <dd>Affiche un dialogue modal. <strong>Cette méthode a été complètement supprimée dans Chrome 43, et dans Firefox 55</strong>.</dd>
+</dl>
+
+<h2 id=".C3.89v.C3.A8nements" name=".C3.89v.C3.A8nements">Gestionnaires d'évènements</h2>
+
+<p>Ce sont des propriétés de l'objet window qui peuvent être définies pour établir des gestionnaires d'événements pour les différentes choses qui peuvent se produire dans la fenêtre et qui pourraient être intéressantes.</p>
+
+<p><em>Cette interface hérite des gestionnaires d'événements de l'interface {{domxref("EventTarget")}} et elle implémente les gestionnaires d'événements de {{domxref("WindowEventHandlers")}}.</em></p>
+
+<div class="note">
+<p><strong>Note :</strong> à partir de {{Gecko ("9.0")}}, vous pouvez maintenant utiliser la syntaxe <code>if ("onabort" in window)</code> pour déterminer si une propriété de gestionnaire d'événements donnée existe ou non. Cela est dû au fait que les interfaces du gestionnaire d'événements ont été mises à jour pour être des interfaces Web IDL correctes. Voir les gestionnaires d'événements DOM pour plus de détails.</p>
+</div>
+
+<dl>
+ <dt>{{domxref("GlobalEventHandlers.onabort")}}</dt>
+ <dt> </dt>
+ <dd>Appelé quand le chargement d'une ressource a été avorté, comme par le fait qu'un utilisateur annule un chargement alors qu'il était encore en cours.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("WindowEventHandlers.onafterprint")}}</dt>
+ <dd>Appelé lorsque la boîte de dialogue d'impression est fermée. Voir l'événement {{event ("afterprint")}}.</dd>
+ <dt>{{domxref("WindowEventHandlers.onbeforeprint")}}</dt>
+ <dd>Appelé lorsque la boîte de dialogue d'impression est ouverte. Voir l'événement {{event ("beforeprint")}}.</dd>
+ <dt>{{domxref("Window.onbeforeinstallprompt")}}</dt>
+ <dd>Propriété de gestionnaire d'événements qui est déclenchée avant qu'un utilisateur ne soit invité à enregistrer un site Web sur un écran d'accueil sur mobile.</dd>
+ <dt>{{domxref("WindowEventHandlers.onbeforeunload")}}</dt>
+ <dd>Propriété de gestionnaire d'événements pour les événements avant-déchargement dans la fenêtre.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("GlobalEventHandlers.onblur")}}</dt>
+ <dd>Appelé après que la fenêtre a perdu la focalisation, comme en raison d'une fenêtre contextuelle.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("GlobalEventHandlers.onchange")}}</dt>
+ <dd>Propriété de gestionnaire d'événements pour les événements de changement dans la fenêtre.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("GlobalEventHandlers.onclick")}}</dt>
+ <dd>Appelé après qu'un QUELCONQUE bouton de la souris est pressé &amp; relâché.</dd>
+</dl>
+
+<dl>
+ <dt>{domxref("GlobalEventHandlers.ondblclick")}}</dt>
+ <dd>Appelé quand un double clic est fait avec un QUELCONQUE bouton de la souris.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onclose")}}</dt>
+ <dd>Appelé après la fermeture de la fenêtre.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("GlobalEventHandlers.oncontextmenu")}}</dt>
+ <dd>Appelé lorsque le bouton DROIT de la souris est enfoncé.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.ondevicelight")}}</dt>
+ <dd>Propriété de gestionnaire d'événements pour tous les changements de niveaux de luminosité ambiante.</dd>
+ <dt>{{domxref("Window.ondevicemotion")}} {{gecko_minversion_inline("6.0")}}</dt>
+ <dd>Appelé si l'accéléromètre détecte un changement (pour les appareils mobiles).</dd>
+ <dt>{{domxref("Window.ondeviceorientation")}} {{gecko_minversion_inline("6.0")}}</dt>
+ <dd>Appelé lorsque l'orientation est modifiée (pour les appareils mobiles).</dd>
+ <dt>{{domxref("Window.ondeviceorientationabsolute")}} {{non-standard_inline}} Chrome only</dt>
+ <dd>Propriété de gestionnaire d'événements pour tout changement d'orientation de l'appareil.</dd>
+ <dt>{{domxref("Window.ondeviceproximity")}}</dt>
+ <dd>Propriété de gestionnaire d'événement pour l'événement de proximité de l'appareil.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("GlobalEventHandlers.onerror")}}</dt>
+ <dd>Appelé lorsqu'une ressource ne se charge pas OU lorsqu'une erreur se produit lors de l'exécution. Voir l'événement {{event("error")}}.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("GlobalEventHandlers.onfocus")}}</dt>
+ <dd>Appelé après que la fenêtre a reçu ou récupéré la focalisation. Voir les événements {{event("focus")}}.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("WindowEventHandlers.onhashchange")}} {{gecko_minversion_inline("1.9.2")}}</dt>
+ <dd>Propriété de gestionnaire d'événements pour les événements {{event('hashchange')}} dans la fenêtre ; appelé lorsque la partie de l'URL après la marque hash ("#") change.</dd>
+ <dt>{{domxref("Window.onappinstalled")}}</dt>
+ <dd>Appelé lorsque la page est installée en tant que webapp. Voir l'événement {{event('appinstalled')}}.</dd>
+ <dt>{{domxref("Window.ongamepadconnected")}}</dt>
+ <dd>Représente un gestionnaire d'événements qui sera exécuté lorsqu'une manette de jeu est branchée (lorsque l'événement {{event('gamepadconnected')}} se déclenche).</dd>
+ <dt>{{domxref("Window.ongamepaddisconnected")}}</dt>
+ <dd>Représente un gestionnaire d'événements qui s'exécutera quand une manette de jeu est débranchée (lorsque l'événement {{event('gamepaddisconnected')}} se déclenche).</dd>
+ <dt>{{domxref("Window.oninput")}}</dt>
+ <dd>Appelée lorsque la valeur d'un élément &lt;input&gt; change.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onkeydown")}}</dt>
+ <dd>Appelé lorsque vous commencez à presser une touche QUELCONQUE. Voir l'événement {{event("keydown")}}.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("GlobalEventHandlers.onkeypress")}}</dt>
+ <dd>Appelé lorsqu'une touche (à l'exception de Shift, Fn et CapsLock) est en position pressée. Voir l'événement {{event("keypress")}}.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("GlobalEventHandlers.onkeyup")}}</dt>
+ <dd>Appelé lorsque vous avez fini de relâcher une touche QUELCONQUE. Voir l'événement {{event("keyup")}}.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("WindowEventHandlers.onlanguagechange")}}</dt>
+ <dd>Propriété de gestionnaire d'événements pour les événements {{event("languagechange")}} dans la fenêtre.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onload")}}</dt>
+ <dd>Appelé après que toutes les ressources et les DOM ont été entièrement chargés. NE SERA PAS appelé lorsque la page est chargée à partir du cache, comme avec le bouton arrière.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("GlobalEventHandlers.onmousedown")}}</dt>
+ <dd>Appelé quand un bouton QUELCONQUE de la souris est pressé.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("GlobalEventHandlers.onmousemove")}}</dt>
+ <dd>Appelé en continu quand la souris est déplacée dans la fenêtre.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("GlobalEventHandlers.onmouseout")}}</dt>
+ <dd>Appelé lorsque le pointeur quitte la fenêtre.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("GlobalEventHandlers.onmouseover")}}</dt>
+ <dd>Appelé lorsque le pointeur entre dans la fenêtre.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("GlobalEventHandlers.onmouseup")}}</dt>
+ <dd>Appelé quand un bouton QUELCONQUE de la souris est relâché.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.onmozbeforepaint")}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Propriété de gestionnaire d'événements pour l'événement MozBeforePaint, qui est déclenché avant de repeindre la fenêtre si l'événement a été demandé par un appel à la méthode {{domxref("Window.mozRequestAnimationFrame()")}}.</dd>
+ <dt>{{domxref("WindowEventHandlers.onoffline")}}</dt>
+ <dd>Appelé lorsque la connexion réseau est perdue. Voir l'événement {{event("offline")}}.</dd>
+ <dt>{{domxref("WindowEventHandlers.ononline")}}</dt>
+ <dd>Appelé lorsque la connexion réseau est établie. Voir l'événement {{event("online")}}.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpagehide")}}</dt>
+ <dd>Appelé lorsque l'utilisateur quitte la page, avant l'événement onunload. Voir l'événement {{event("pagehide")}}.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpageshow")}}</dt>
+ <dd>Appelé après toutes les ressources et les DOM ont été entièrement chargés. Voir l'événement {{event("pageshow")}}.</dd>
+ <dt>{{domxref("Window.onpaint")}}</dt>
+ <dd>Propriété de gestionnaire d'évènement pour les évènements de dessin de la fenêtre.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("WindowEventHandlers.onpopstate")}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Appelé quand le bouton arrière est pressé.</dd>
+ <dt>{{domxref("Window.onrejectionhandled")}} {{experimental_inline}}</dt>
+ <dd>Gestionnaire d'événements pour les événements de rejet {{jsxref("Promise")}} gérés.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onreset")}}</dt>
+ <dd>Appelé lorsqu'un formulaire est réinitialisé</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("GlobalEventHandlers.onresize")}}</dt>
+ <dd>Appelé en continu lorsque vous redimensionnez la fenêtre.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("GlobalEventHandlers.onscroll")}}</dt>
+ <dd>Appelé lorsque la barre de défilement est déplacée par un moyen QUELCONQUE. Si la ressource correspond entièrement à la fenêtre, cet événement ne peut pas être invoqué.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("GlobalEventHandlers.onwheel")}}</dt>
+ <dd>Appelé lorsque la roue de la souris est tournée autour d'un axe quelconque.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onselect")}}</dt>
+ <dd>Appelé après le texte dans un champ de saisie est sélectionné.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("GlobalEventHandlers.onselectionchange")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code à appeler lorsque l'événement {{event("selectionchange")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onstorage")}}</dt>
+ <dd>Appelé en cas de changement dans le stockage de session ou le stockage local. Voir l'événement {{event("storage")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onsubmit")}}</dt>
+ <dd>Appelé lorsqu'un formulaire est soumis.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("WindowEventHandlers.onunhandledrejection")}} {{experimental_inline}}</dt>
+ <dd>Gestionnaire d'événements pour les événements de rejet {{jsxref("Promise")}} non gérés.</dd>
+ <dt>{{domxref("WindowEventHandlers.onunload")}}</dt>
+ <dd>Appelé lorsque l'utilisateur quitte la page.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.onuserproximity")}}</dt>
+ <dd>Propriété de gestionnaire d'événements pour les événements de proximité d'utilisateur.</dd>
+ <dt>{{domxref("Window.onvrdisplayconnect")}}</dt>
+ <dd>Représente un gestionnaire d'événements qui s'exécutera lorsqu'un périphérique RV compatible a été connecté à l'ordinateur (lorsque l'événement {{event("vrdisplayconnected")}} se déclenche).</dd>
+ <dt>{{domxref("Window.onvrdisplaydisconnect")}}</dt>
+ <dd>Représente un gestionnaire d'événements qui s'exécutera lorsqu'un périphérique RV compatible a été déconnecté de l'ordinateur (lorsque l'événement {{event("vrdisplaydisconnected")}} se déclenche).</dd>
+ <dt>{{domxref("Window.onvrdisplayactivate")}}</dt>
+ <dd>Représente un gestionnaire d'événements qui s'exécutera lorsqu'un affichage peut être présenté (lorsque l'événement {{event("vrdisplayactivate")}} se déclenche), par exemple si un HMD a été déplacé pour sortir de veille, ou a été réveillé en le mettant sur soi.</dd>
+ <dt>{{domxref("Window.onvrdisplaydeactivate")}}</dt>
+ <dd>Représente un gestionnaire d'événements qui s'exécute lorsqu'un affichage ne peut plus être présenté (lorsque l'événement {{event ("vrdisplaydeactivate")}} se déclenche), par exemple si un HMD est passé en veille ou en hibernation en raison d'une période d'inactivité.</dd>
+ <dt>{{domxref("Window.onvrdisplayblur")}}</dt>
+ <dd>Représente un gestionnaire d'événements qui s'exécutera lorsque la présentation sur un affichage a été suspendue pour une raison quelconque par le navigateur, le SE ou le matériel de RV (lorsque l'événement {{event("vrdisplayblur")}} se déclenche - par exemple, lorsque l'utilisateur interagit avec un menu système ou un navigateur, pour empêcher le suivi ou la perte d'expérience.</dd>
+ <dt>{{domxref("Window.onvrdisplayfocus")}}</dt>
+ <dd>Représente un gestionnaire d'événements qui sera exécuté lorsque la présentation sur un afficheur a repris après avoir perdu la focalisation (lorsque l'événement {{event("vrdisplayfocus")}} se déclenche).</dd>
+ <dt>{{domxref("Window.onvrdisplaypresentchange")}}</dt>
+ <dd>Représente un gestionnaire d'événements qui s'exécute lorsque l'état de présentation d'un périphérique de RV change, c'est-à-dire qu'il passe de présentation à non présentation, ou vice versa (lorsque l'événement {{event("vrdisplaypresentchange")}} se déclenche).</dd>
+</dl>
+
+<h2 id="Constructeurs">Constructeurs</h2>
+
+<p>Voir aussi les <a href="/fr-FR/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">Interfaces DOM</a>.</p>
+
+<dl>
+ <dt>{{domxref("DOMParser")}}</dt>
+ <dd><code>DOMParser</code> peut analyser un source XML ou HTML stocké dans une chaîne de caractères en un <a href="/fr-FR/docs/DOM/document">Document</a> DOM. <code>DOMParser</code> est spécifié dans <a href="https://w3c.github.io/DOM-Parsing/">DOM Parsing et Serialization</a>.</dd>
+ <dt>{{domxref("Window.GeckoActiveXObject")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Image")}}</dt>
+ <dd>Used for creating an {{domxref("HTMLImageElement")}}.</dd>
+ <dt>{{domxref("Option")}}</dt>
+ <dd>Used for creating an {{domxref("HTMLOptionElement")}}</dd>
+ <dt>{{domxref("Window.QueryInterface")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.XMLSerializer")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Worker")}}</dt>
+ <dd>Used for creating a <a href="https://developer.mozilla.org/en-US/docs/DOM/Using_web_workers">Web worker</a></dd>
+ <dt>{{domxref("Window.XPCNativeWrapper")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.XPCSafeJSObjectWrapper")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+</dl>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<p>Voir <a href="/fr/docs/Web/API/Document_Object_Model">Référence du DOM</a></p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Mozilla/Working_with_windows_in_chrome_code">Travailler avec des fenêtres dans le code chrome</a></li>
+</ul>
diff --git a/files/fr/web/api/window/innerheight/index.html b/files/fr/web/api/window/innerheight/index.html
new file mode 100644
index 0000000000..6a6c7e8ede
--- /dev/null
+++ b/files/fr/web/api/window/innerheight/index.html
@@ -0,0 +1,147 @@
+---
+title: window.innerHeight
+slug: Web/API/Window/innerHeight
+tags:
+  - API
+  - CSSOM View
+  - Property
+  - Propriété
+  - Reference
+  - Window
+translation_of: Web/API/Window/innerHeight
+---
+<p>{{ ApiRef() }}</p>
+
+<p id="R.C3.A9sum.C3.A9">Récupère la hauteur (en pixels) de la partie visible de la fenêtre de navigation en incluant, si elle est affichée, la barre de défilement horizontale.</p>
+
+<div class="note">
+<p><strong>Note :</strong> La valeur retournée par cette propriété correspond le cas échéant à la hauteur de la fenêtre définie par {{ifmethod("nsIDOMWindowUtils", "setCSSViewport")}}, dans le cas où vous utilisez cette méthode pour définir les dimensions de la fenêtre virtuelle dans le but d'agencer la page.</p>
+</div>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre>var hauteur = window.innerHeight;
+</pre>
+
+<h3 id="Valeur_renvoy.C3.A9e" name="Valeur_renvoy.C3.A9e">Valeur</h3>
+
+<p class="syntaxbox">Renvoie la hauteur de la partie visible de la fenêtre de navigation.<br>
+ La propriété <code>window.innerHeight</code> est accessible en lecture seulement ; elle n'a pas de valeur par défaut.</p>
+
+<h2 class="syntaxbox" id="Notes">Notes</h2>
+
+<ul>
+ <li>La propriété <code>window.innerHeight</code> est supportée par tout objet assimilé à une fenêtre <em>{{domxref("window")}}</em>, un cadre <em>frame </em>, un ensemble de cadres <em>frameset</em>, ou une fenêtre secondaire.</li>
+ <li>Il existe un <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=189112#c7">algorithme</a> pour calculer la hauteur de la partie visible de la fenêtre en excluant la barre de défilement horizontale si est elle affichée.</li>
+</ul>
+
+<h2 id="Attention" name="Attention">Exemples</h2>
+
+<h3 id="Code" name="Code">Sur un <em>frameset</em></h3>
+
+<pre class="brush:js">var intFrameHeight = window.innerHeight; // ou
+
+var intFrameHeight = self.innerHeight;
+// retournera la hauteur de la partie visible du cadre dans frameset
+
+var intFramesetHeight = parent.innerHeight;
+// retournera la hauteur de la partie visible du frameset le plus proche
+
+var intOuterFramesetHeight = top.innerHeight;
+// retournera la hauteur de la partie visible du frameset le plus éloigné
+</pre>
+
+<p>{{todo("ajouter ici un lien vers une démo interactive")}}</p>
+
+<ul>
+ <li>Pour modifier les dimensions d'une fenêtre, voir {{domxref("window.resizeBy()")}} et {{domxref("window.resizeTo()")}}.</li>
+ <li>Pour récupérer la hauteur extérieure d'une fenêtre, c'est-à-dire la hauteur de la fenêtre du navigateur dans sa totalité, voir {{domxref("window.outerHeight")}}.</li>
+</ul>
+
+<h3 id="Exemple_graphique">Exemple graphique</h3>
+
+<p>L'illustration suivante montre la différence entre <code>outerHeight</code> et <code>innerHeight</code>.<br>
+ <img alt="outerHeight vs innerHeight" src="/@api/deki/files/213/=FirefoxInnerVsOuterHeight2.png" style="height: 445px; width: 738px;"></p>
+
+<h2 id="Spécification">Spécification</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('CSSOM View', '#dom-window-innerheight', 'window.innerHeight')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1</td>
+   <td>{{CompatGeckoDesktop(1.0)}}<sup>[1]</sup></td>
+   <td>9</td>
+   <td>9</td>
+   <td>3</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1</td>
+   <td>{{CompatGeckoMobile(1.0)}}<sup>[1]</sup></td>
+   <td>9</td>
+   <td>9</td>
+   <td>3</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Cette propriété était mal gérée dans Firefox versions 4 à 24, et pouvait dans certains cas renvoyer une valeur erronée avant le chargement de la page, voir {{bug(641188)}}.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("window.innerWidth")}}</li>
+ <li>{{domxref("window.outerHeight")}}</li>
+ <li>{{domxref("window.outerWidth")}}</li>
+</ul>
+
+<div class="noinclude"> </div>
+
+<p>{{ languages( { "fr": "fr/DOM/window.innerHeight", "ja": "ja/DOM/window.innerHeight" } ) }}</p>
diff --git a/files/fr/web/api/window/innerwidth/index.html b/files/fr/web/api/window/innerwidth/index.html
new file mode 100644
index 0000000000..00047c4566
--- /dev/null
+++ b/files/fr/web/api/window/innerwidth/index.html
@@ -0,0 +1,109 @@
+---
+title: window.innerWidth
+slug: Web/API/Window/innerWidth
+translation_of: Web/API/Window/innerWidth
+---
+<p>{{ ApiRef() }}</p>
+
+<h2 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h2>
+
+<p>Récupère la largeur du contenu visible de la fenêtre de navigation en incluant, s'il est visible, l'ascenseur vertical.<br>
+ Permet également de fixer une largeur pour le domaine d'affichage de la fenêtre.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre>var largeur = window.innerWidth;
+</pre>
+
+<p>Voir aussi : <a href="/fr/docs/Web/API/Window/innerHeight">window.innerHeight</a>, <a href="/fr/docs/Web/API/Window/outerHeight">window.outerHeight</a> and <a href="/fr/docs/Web/API/Window/outerWidth">window.outerWidth</a>.</p>
+
+<h2 id="Valeur_renvoy.C3.A9e" name="Valeur_renvoy.C3.A9e">Valeur renvoyée</h2>
+
+<dl>
+ <dt><code>innerWidth </code></dt>
+ <dd>un entier (nombre de pixels);</dd>
+</dl>
+
+<h2 id="Notes">Notes</h2>
+
+<p>La propriété <code>innerWidth</code> est supportée par tous les objet "window" comme par exemple une fenêtre, une frame, un frameset, ou une fenêtre secondaire.</p>
+
+<h2 id="Example">Example</h2>
+
+<pre>// Retourne la largeur de la fenêtre
+var largeur = window.innerWidth;
+
+// Retourn la largeur de la fenêtre à l'intérieur d'une "frameset"
+var largeur = self.innerWidth;
+
+// Retourne la largeur de la fenêtre du "frameset" parent
+var largeurDeLaFrame = parent.innerWidth;
+
+// Retourne la largeur de la fenêtre du "frameset" principal
+var largeurDuFrameset = top.innerWidth;</pre>
+
+<p>Pour changer la taille de la fenêtre, voir {{domxref("window.resizeBy")}} and {{domxref("window.resizeTo")}}.</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<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</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.0)}}<sup>[1]</sup></td>
+   <td>9</td>
+   <td>9</td>
+   <td>3</td>
+  </tr>
+ </tbody>
+</table>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.0)}}<sup>[1]</sup></td>
+   <td>9</td>
+   <td>9</td>
+   <td>3</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>[1] From Firefox 4 to 24, this property was buggy and could give a wrong value before page load on certain circumstances, see {{bug(641188)}}.</p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
+
+<p>DOM Level 0. <code>window.innerWidth</code> ne fait partie d'aucune spécification ou recommandation technique du W3C.</p>
+
+<p> </p>
+
+<p> </p>
+
+<div class="noinclude"> </div>
+
+<p>{{ languages( { "en": "en/DOM/window.innerWidth", "ja": "ja/DOM/window.innerWidth" } ) }}</p>
diff --git a/files/fr/web/api/window/issecurecontext/index.html b/files/fr/web/api/window/issecurecontext/index.html
new file mode 100644
index 0000000000..af14866f13
--- /dev/null
+++ b/files/fr/web/api/window/issecurecontext/index.html
@@ -0,0 +1,60 @@
+---
+title: Window.isSecureContext
+slug: Web/API/Window/isSecureContext
+tags:
+  - API
+  - Propriété
+  - Reference
+  - Sécurité
+  - Window
+translation_of: Web/API/Window/isSecureContext
+---
+<p>{{APIRef}}{{SeeCompatTable}}</p>
+
+<p>La propriété en lecteur seule <code><strong>window.isSecureContext</strong></code> indique si un contexte est capable d'utiliser des fonctionnalités qui nécessitent des <a href="/en-US/docs/Web/Security/Secure_Contexts">contextes sécurisés</a>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">var <em>isSecure</em> = window.isSecureContext</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Détection_des_fonctionnalités">Détection des fonctionnalités</h3>
+
+<p>Vous pouvez utiliser la détection des fonctionnalités pour vérifier si elles sont dans un contexte sécurisé ou non à l'aide du booléen <code>isSecureContext</code> qui est exposé sur la portée globale.</p>
+
+<pre class="brush: js notranslate">if (window.isSecureContext) {
+  // La page est un contexte sécurisé afin que les techniciens de service soient désormais disponibles
+  navigator.serviceWorker.register("/offline-worker.js").then(function () {
+    ...
+  });
+}</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('Secure Contexts')}}</td>
+   <td>{{Spec2('Secure Contexts','#monkey-patching-global-object','isSecureContext')}}</td>
+   <td>Spécification initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.Window.isSecureContext")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Security/Secure_Contexts">Contextes sécurisés</a></li>
+</ul>
diff --git a/files/fr/web/api/window/languagechange_event/index.html b/files/fr/web/api/window/languagechange_event/index.html
new file mode 100644
index 0000000000..b849cb7590
--- /dev/null
+++ b/files/fr/web/api/window/languagechange_event/index.html
@@ -0,0 +1,81 @@
+---
+title: 'Window: languagechange event'
+slug: Web/API/Window/languagechange_event
+tags:
+  - Evènement
+  - Expérimentale
+  - HTML DOM
+  - Reference
+  - Window
+translation_of: Web/API/Window/languagechange_event
+---
+<div>{{APIRef}}</div>
+
+<p>L'événement <strong><code>languagechange</code></strong> est déclenché sur l'objet d'étendue globale lorsque la langue préférée de l'utilisateur change.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Bulles</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">Annulable</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("Event")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Propriété de gestionnaire d'événements</th>
+   <td>{{domxref("WindowEventHandlers/onlanguagechange", "onlanguagechange")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Vous pouvez utiliser l'événement <code>languagechange</code> dans une méthode {{domxref("EventTarget/addEventListener", "addEventListener")}} :</p>
+
+<pre class="brush: js notranslate">window.addEventListener('languagechange', function() {
+  console.log('languagechange event detected!');
+});</pre>
+
+<p>Ou utilisez la propriété du gestionnaire d'événements <code><a href="/en-US/docs/Web/API/WindowEventHandlers/onlanguagechange">onlanguagechange</a></code> :</p>
+
+<pre class="brush: js notranslate">window.onlanguagechange = function(event) {
+  console.log('languagechange event detected!');
+};</pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('HTML WHATWG', 'indices.html#event-languagechange', 'languagechange') }}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.Window.languagechange_event")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>{{domxref("NavigatorLanguage.language", "navigator.language")}}</li>
+ <li>{{domxref("NavigatorLanguage.languages", "navigator.languages")}}</li>
+ <li>{{domxref("Navigator")}}</li>
+ <li>{{domxref("Window.onlanguagechange")}}</li>
+</ul>
diff --git a/files/fr/web/api/window/length/index.html b/files/fr/web/api/window/length/index.html
new file mode 100644
index 0000000000..2980798007
--- /dev/null
+++ b/files/fr/web/api/window/length/index.html
@@ -0,0 +1,29 @@
+---
+title: Window.length
+slug: Web/API/Window/length
+translation_of: Web/API/Window/length
+---
+<div>{{ ApiRef() }}</div>
+
+<h2 id="Summary" name="Summary">Résumé</h2>
+
+<p>Retourne le nombre de frames (soit des éléments de frame ou iframe) présent sur la page.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>nombreDeFrames</em>= window.length;
+</pre>
+
+<ul>
+ <li><em>nombreDeFrames est égal au nombre de frames présent sur la page.</em></li>
+</ul>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush:js">if (window.length) {
+  // La page contient des frames
+}</pre>
+
+<h2 id="Specification" name="Specification">Specification</h2>
+
+<p>{{DOM0}}</p>
diff --git a/files/fr/web/api/window/localstorage/index.html b/files/fr/web/api/window/localstorage/index.html
new file mode 100644
index 0000000000..9c157962c2
--- /dev/null
+++ b/files/fr/web/api/window/localstorage/index.html
@@ -0,0 +1,95 @@
+---
+title: Window.localStorage
+slug: Web/API/Window/localStorage
+tags:
+  - API
+  - Propriété
+  - Reference
+  - Stockage
+  - Stockage Web
+  - Window
+  - WindowLocalStorage
+  - lecture seule
+  - localStorage
+translation_of: Web/API/Window/localStorage
+---
+<p>{{APIRef("Web Storage API")}}</p>
+
+<p>La propriété <code>localStorage</code> vous permet d'accéder à un objet local {{domxref("Storage")}}. Le <code>localStorage</code> est similaire au <code><a href="/en-US/docs/Web/API/Window.sessionStorage">sessionStorage</a></code>. La seule différence : les données stockées dans le <code>localStorage</code> n'ont pas de délai d'expiration, alors que les données stockées dans le <code>sessionStorage</code> sont nettoyées quand la session navigateur prend fin — donc quand on ferme le navigateur.</p>
+
+<p>Il convient de noter que les données stockées dans <code>localStorage</code> ou <code>sessionStorage</code> <strong>sont spécifiques au protocole de la page.</strong></p>
+
+<p>Les clés et les valeurs <strong>sont toujours</strong> <u>des chaînes de caractères</u> (à noter que, comme pour les objets, les clés entières seront automatiquement converties en chaînes de caractères).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">monStockage = localStorage;</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un objet {{DOMxRef("Storage")}} qui peut être utilisé pour accéder à l'espace de stockage local de l'origine actuelle.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<dl>
+ <dt><code>SecurityError</code></dt>
+ <dd>La demande viole une décision politique, ou l'origine n'est pas <a href="/fr/docs/Web/Security/Same_origin_policy_for_JavaScript">un schéma/hôte/port valide</a> (cela peut se produire si l'origine utilise le shéma <code>file:</code> ou <code>data:</code>, par exemple). Par exemple, l'utilisateur peut configurer son navigateur de manière à refuser la permission de conserver des données pour l'origine spécifiée.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'extrait de code suivant accède à l'objet local {{domxref("Storage")}} du domaine courant et lui ajoute une entrée en utilisant {{domxref("Storage.setItem()")}}.</p>
+
+<pre class="brush: js">localStorage.setItem('monChat', 'Tom');</pre>
+
+<p>La syntaxe pour la lecture de l'article <code>localStorage</code> est la suivante :</p>
+
+<pre class="brush: js">var cat = localStorage.getItem('myCat');</pre>
+
+<p>La syntaxe pour la suppression de l'élément <code>localStorage</code> est la suivante :</p>
+
+<pre class="brush: js">localStorage.removeItem('myCat');</pre>
+
+<p>La syntaxe pour supprimer tous les éléments de <code>localStorage</code> est la suivante :</p>
+
+<pre class="brush: js">// Effacer tous les éléments
+localStorage.clear();
+</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Se référer à l'article <a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a> pour voir un exemple complet.</p>
+</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("HTML WHATWG", "webstorage.html#dom-localstorage", "localStorage")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Window.localStorage")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></li>
+ <li>{{domxref("Storage/LocalStorage")}}</li>
+ <li>{{domxref("Window/SessionStorage")}}</li>
+ <li>{{domxref("Window.sessionStorage")}}</li>
+</ul>
diff --git a/files/fr/web/api/window/location/index.html b/files/fr/web/api/window/location/index.html
new file mode 100644
index 0000000000..f28ec3ddc0
--- /dev/null
+++ b/files/fr/web/api/window/location/index.html
@@ -0,0 +1,273 @@
+---
+title: window.location
+slug: Web/API/window/location
+tags:
+  - DOM
+  - DOM_0
+translation_of: Web/API/Window/location
+---
+<p>Renvoie un objet <code>Location</code> contenant des informations concernant l'URL actuelle du document et fournit des méthodes pour modifier cette URL. Cette propriété peut être utilisée pour charger une autre page.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">  var adresseActuelle = window.location;
+  window.location = nouvelleAdresse;</pre>
+
+<p>où</p>
+
+<ul>
+ <li><em>adresseActuelle</em> est un objet de type <code>Location</code>, fournissant des informations à propos de l'URL courante et des méthodes pour la modifier. Ses propriétés et méthodes sont décrites ci-dessous.</li>
+ <li><em>nouvelleAdresse</em> est un objet <code>Location</code> ou une chaîne de caractères indiquant l'URL à charger.</li>
+</ul>
+
+<h2 id="L.27objet_Location" name="L.27objet_Location">L'objet <code>Location</code></h2>
+
+<p>Les objets <code>Location</code> ont une méthode <code>toString</code> renvoyant l'URL courante. Il est également possible d'assigner une chaîne à <code>window.location</code>. Cela signifie que <code>window.location</code> peut être utilisé comme s'il s'agissait d'une chaîne dans la plupart des cas. De temps en temps, par exemple pour appeler une méthode d'objet <a href="/fr/R%C3%A9f%C3%A9rence_de_JavaScript_1.5_Core/Objets_globaux/String" title="fr/Référence_de_JavaScript_1.5_Core/Objets_globaux/String">String</a>, il est nécessaire d'appeler explicitement <code>toString</code> :</p>
+
+<pre class="brush: js">alert(window.location.toString().charAt(17))
+</pre>
+
+<h2 id="Propri.C3.A9t.C3.A9s" name="Propri.C3.A9t.C3.A9s">Propriétés</h2>
+
+<p>Toutes les propriétés suivantes sont des chaînes de caractères. Elles peuvent être lues pour obtenir des informations concernant l'URL courante, ou modifiées pour accéder à une autre adresse URL.</p>
+
+<p>La colonne « Exemple » contient les valeurs de ces propriétés pour l'URL suivante :<span class="nowiki"> http://www.example.com:8080/search?q=devmo#test</span></p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th>Propriété</th>
+   <th>Description</th>
+   <th>Exemple</th>
+  </tr>
+  <tr>
+   <td><a name="hash"><code>hash</code></a></td>
+   <td>La partie de l'URL qui suit le symbole « # », s'il y en un, avec ce symbole inclus. Une chaîne de caractères vide s'il n'y a pas de symbole #, ou qu'il n'est suivi par rien. Vous pouvez écouter l'<a href="/en-US/docs/Web/Reference/Events/hashchange" title="/en-US/docs/Web/Reference/Events/hashchange">évènement hashchange</a> pour être alerté des changements du hash dans les navigateurs le supportant.</td>
+   <td>#test</td>
+  </tr>
+  <tr>
+   <td><a name="host"><code>host</code></a></td>
+   <td>Le nom de l'hôte et son numéro de port.</td>
+   <td>www.<span class="nowiki">example</span>.com:8080</td>
+  </tr>
+  <tr>
+   <td><a name="hostname"><code>hostname</code></a></td>
+   <td>Le nom de l'hôte (sans son numéro de port).</td>
+   <td>www.<span class="nowiki">example</span>.com</td>
+  </tr>
+  <tr>
+   <td><a name="href"><code>href</code></a></td>
+   <td>L'URL entière.</td>
+   <td><span class="nowiki">http://www.</span><span class="nowiki">example</span><span class="nowiki">.com:8080/search?q=devmo#test</span></td>
+  </tr>
+  <tr>
+   <td><a name="origin"><code>origin</code></a></td>
+   <td>L'origine de l'URL</td>
+   <td><span class="nowiki">http://www.</span><span class="nowiki">example</span><span class="nowiki">.com:8080</span></td>
+  </tr>
+  <tr>
+   <td><a name="pathname"><code>pathname</code></a></td>
+   <td>Le chemin (relativement à l'hôte).</td>
+   <td>/search</td>
+  </tr>
+  <tr>
+   <td><a name="port"><code>port</code></a></td>
+   <td>Le numéro de port de l'URL. Si l'URL n'a pas de port (si le site utilise le port 80, le port par défaut de la plupart des sites), une chaîne de caractères vide est renvoyée.</td>
+   <td>8080</td>
+  </tr>
+  <tr>
+   <td><a name="protocol"><code>protocol</code></a></td>
+   <td>Le protocole de l'URL.</td>
+   <td>http:</td>
+  </tr>
+  <tr>
+   <td><a name="search"><code>search</code></a></td>
+   <td>La partie de l'URL qui suit le symbole « <code>?</code> », avec ce symbole inclus</td>
+   <td>?q=devmo</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="M.C3.A9thodes" name="M.C3.A9thodes">Méthodes</h2>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th>Méthode</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td><code>assign(<em>url</em>)</code></td>
+   <td>Charge le document situé à l'URL spécifiée.</td>
+  </tr>
+  <tr>
+   <td><code>reload(<em>forceget</em>)</code></td>
+   <td>Recharge le document depuis l'URL actuelle. <code>forceget</code> est une valeur booléenne, qui lorsqu'elle vaut <code>true</code> force la page à être rechargée depuis le serveur. Si elle vaut <code>false</code> ou n'est pas précisée, le navigateur peut recharger la page depuis son cache.</td>
+  </tr>
+  <tr>
+   <td><code>replace(<em>url</em>)</code></td>
+   <td>Remplace le document courant par celui situé à l'URL fournie. La différence avec la méthode <code>assign()</code> est qu'après un <code>replace()</code>, la page courante ne sera pas enregistrée dans l'historique de la session, ce qui signifie que l'utilisateur ne pourra pas utiliser le bouton « Page précédente » pour y retourner.</td>
+  </tr>
+  <tr>
+   <td><code>toString()</code></td>
+   <td>Renvoie la représentation sous forme de chaîne de l'URL de l'objet <code>Location</code>. Consultez la <a href="/fr/docs/JavaScript/Référence_JavaScript/Référence_JavaScript/Objets_globaux/Object/toString" title="fr/Référence_de_JavaScript_1.5_Core/Objets_globaux/Object/toString">référence JavaScript</a> pour plus de détails.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemple" name="Exemple">Exemples</h2>
+
+<h3 id="Exemple_1_Naviguer_vers_une_nouvelle_page">Exemple 1 : Naviguer vers une nouvelle page</h3>
+
+<p>A chaque fois qu'une nouvelle valeur est assignée à l'objet <code>Location</code>, un document sera chargé en utilisant l'URL fournie, comme si <code>window.location.assign() </code>avait été appelé avec la nouvelle URL.</p>
+
+<pre class="brush: js">window.location.assign("http://www.mozilla.org"); // ou
+window.location = "http://www.mozilla.org";
+</pre>
+
+<h3 id="Exemple_2_Forcer_le_rechargement_de_la_page_actuelle_depuis_le_serveur">Exemple 2 :  Forcer le rechargement de la page actuelle depuis le serveur</h3>
+
+<pre class="brush: js">window.location.reload(true);</pre>
+
+<h3 id="Exemple_3_Afficher_les_propriétés_de_l'URL_actuelle_dans_une_fenêtre_d'alerte">Exemple 3 : Afficher les propriétés de l'URL actuelle dans une fenêtre d'alerte</h3>
+
+<pre class="brush: js">function montrerLoc() {
+  var oLocation = window.location, aLog = ["Propriété (Typeof): valeur", "window.location (" + (typeof oLocation) + "): " + oLocation ];
+  for (var sProp in oLocation){
+    aLog.push(sProp + " (" + (typeof oLocation[sProp]) + "): " +  (oLocation[sProp] || "n/a"));
+  }
+  alert(aLog.join("\n"));
+}
+
+// dans le HTM: &lt;button onclick="montrerLoc();"&gt;Montrer les propriétés de Location&lt;/button&gt;
+</pre>
+
+<h3 id="Exemple_4_Envoyer_une_chaine_de_données_au_serveur_en_modifiant_la_propriété_search">Exemple 4 : Envoyer une chaine de données au serveur en modifiant la propriété <code>search</code></h3>
+
+<pre class="brush: js">function envoyerDonnees (sData) {
+  window.location.search = sData;
+}
+
+// dans le HTML : &lt;button onclick="envoyerDonnees('des infos');"&gt;Envoyer des données&lt;/button&gt;
+</pre>
+
+<p>L'adresse URL complêtée par "?des%20infos" est envoyée au serveur (si aucune action est prise en charge par le serveur, le document actuel est rechargé avec la nouvelle chaîne de caractère modifié).</p>
+
+<h3 id="Exemple_5_Obtenir_la_valeur_d'un_paramètre_de_l'URL_par_window.location.search">Exemple 5 : Obtenir la valeur d'un paramètre de l'URL par <code>window.location.search</code></h3>
+
+<pre class="brush: js">function obtenirParametre (sVar) {
+  return unescape(window.location.search.replace(new RegExp("^(?:.*[&amp;\\?]" + escape(sVar).replace(/[\.\+\*]/g, "\\$&amp;") + "(?:\\=([^&amp;]*))?)?.*$", "i"), "$1"));
+}
+
+alert(obtenirParametre("nom"));
+</pre>
+
+<h3 id="Exemple_6_Placer_les_valeurs_obtenues_par_window.location.search_dans_un_objet_nommé_oParametres">Exemple 6 : Placer les valeurs obtenues par <code>window.location.search</code> dans un objet nommé <code>oParametres</code></h3>
+
+<pre class="brush: js">var oParametre = {};
+
+if (window.location.search.length &gt; 1) {
+  for (var aItKey, nKeyId = 0, aCouples = window.location.search.substr(1).split("&amp;"); nKeyId &lt; aCouples.length; nKeyId++) {
+    aItKey = aCouples[nKeyId].split("=");
+    oParametre[unescape(aItKey[0])] = aItKey.length &gt; 1 ? unescape(aItKey[1]) : "";
+  }
+}
+
+// alert(oParametre.votreValeur);
+</pre>
+
+<p>… la même chose avec un constructeur anonyme :</p>
+
+<pre class="brush: js">var oParametre = new (function (sRecherche) {
+  if (sRecherche.length &gt; 1) {
+    for (var aItKey, nKeyId = 0, aCouples = sRecherche.substr(1).split("&amp;"); nKeyId &lt; aCouples.length; nKeyId++) {
+      aItKey = aCouples[nKeyId].split("=");
+      this[unescape(aItKey[0])] = aItKey.length &gt; 1 ? unescape(aItKey[1]) : "";
+    }
+  }
+})(window.location.search);
+
+// alert(oParametre.votreValeur);
+</pre>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
+
+<p>{{SpecName("HTML WHATWG", "#the-location-interface")}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>
+    <p>{{ CompatVersionUnknown() }}</p>
+   </td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>window.location.origin</code></td>
+   <td>
+    <p>{{ CompatVersionUnknown() }}</p>
+   </td>
+   <td>{{CompatGeckoDesktop(21)}}</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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>window.location.origin</code></td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatGeckoMobile(21)}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatUnknown()}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/Guide/DOM/Manipuler_historique_du_navigateur" title="en/DOM/Manipulating the browser history">Manipuler l'historique du navigateur</a></li>
+ <li>{{domxref('window.history')}}</li>
+ <li><a href="/en-US/docs/Web/Reference/Events/hashchange" title="/en-US/docs/DOM/Mozilla_event_reference/hashchange">hashchange</a></li>
+</ul>
diff --git a/files/fr/web/api/window/locationbar/index.html b/files/fr/web/api/window/locationbar/index.html
new file mode 100644
index 0000000000..aa38a49d88
--- /dev/null
+++ b/files/fr/web/api/window/locationbar/index.html
@@ -0,0 +1,74 @@
+---
+title: Window.locationbar
+slug: Web/API/Window/locationbar
+tags:
+  - API
+  - HTML DOM
+  - Propriété
+  - Reference
+  - Window
+translation_of: Web/API/Window/locationbar
+---
+<div>{{APIRef}}</div>
+
+<p>Renvoie l'objet <code>locationbar</code>, dont la visibilité peut être vérifiée.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><var>objRef</var> = window.locationbar
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'exemple HTML complet suivant montre comment la propriété <code>visible</code> de l'objet <code>locationbar</code> est utilisée.</p>
+
+<pre class="brush:html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html lang="fr"&gt;
+&lt;head&gt;
+&lt;meta charset="UTF-8" /&gt;
+&lt;title&gt;Divers tests DOM&lt;/title&gt;
+
+&lt;script&gt;
+var visible = window.locationbar.visible;
+&lt;/script&gt;
+
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;p&gt;Divers tests DOM&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</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('HTML WHATWG', 'browsers.html#dom-window-locationbar', 'Window.locationbar')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-window-locationbar', 'Window.locationbar')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez vérifier <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.Window.locationbar")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>{{domxref("window.locationbar")}}, {{domxref("window.menubar")}}, {{domxref("window.personalbar")}}, {{domxref("window.scrollbars")}}, {{domxref("window.statusbar")}}, {{domxref("window.toolbar")}}</li>
+</ul>
diff --git a/files/fr/web/api/window/matchmedia/index.html b/files/fr/web/api/window/matchmedia/index.html
new file mode 100644
index 0000000000..1237675eeb
--- /dev/null
+++ b/files/fr/web/api/window/matchmedia/index.html
@@ -0,0 +1,77 @@
+---
+title: window.matchMedia
+slug: Web/API/Window/matchMedia
+translation_of: Web/API/Window/matchMedia
+---
+<div>
+ {{ApiRef}}</div>
+<h2 id="Summary" name="Summary">Résumé</h2>
+<p>Retourne un nouvel objet {{domxref("MediaQueryList")}} contenant les résultats de la chaîne de caractères <a href="/en-US/docs/CSS/Media_queries" title="CSS/Media queries">media query</a> spécifiée.</p>
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+<pre class="syntaxbox"><em>mql</em> = window.matchMedia(<em>mediaQueryString</em>)</pre>
+<p>Ici, <code>mediaQueryString</code> est une chaîne de caractère représentant la media query pour laquelle on retourne un nouvel objet {{domxref("MediaQueryList")}}.</p>
+<h2 id="Example" name="Example">Exemple</h2>
+<pre class="brush: js">if (window.matchMedia("(min-width: 400px)").matches) {
+  /* the view port is at least 400 pixels wide */
+} else {
+  /* the view port is less than 400 pixels wide */
+}</pre>
+<p>Ce code permet de gérer la mise en page d'une manière différente quand l'écran est moins large.</p>
+<p>Voir <a href="/en-US/docs/DOM/Using_media_queries_from_code" title="/en-US/docs/DOM/Using_media_queries_from_code">Utiliser les media queries avec du code</a> pour plus d'exemples.</p>
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</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>9</td>
+    <td>{{CompatGeckoDesktop("6.0")}}</td>
+    <td>10 PP3 {{property_prefix("ms")}}</td>
+    <td>{{CompatNo()}}</td>
+    <td>5.1</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Feature</th>
+    <th>Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Basic support</td>
+    <td>3.0</td>
+    <td>{{CompatGeckoMobile("6.0")}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>5</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h2 id="Specification" name="Specification">Spécification</h2>
+<ul>
+ <li><a class="external" href="http://dev.w3.org/csswg/cssom-view/#the-mediaquerylist-interface">The CSSOM View Module: The MediaQueryList Interface</a></li>
+</ul>
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+<ul>
+ <li><a href="/en-US/docs/CSS/Media_queries" title="CSS/Media queries">Media queries</a></li>
+ <li><a href="/en-US/docs/DOM/Using_media_queries_from_code" title="CSS/Using media queries from code">Using media queries from code</a></li>
+ <li>{{domxref("MediaQueryList")}}</li>
+ <li>{{domxref("MediaQueryListListener")}}</li>
+</ul>
diff --git a/files/fr/web/api/window/menubar/index.html b/files/fr/web/api/window/menubar/index.html
new file mode 100644
index 0000000000..eb2a7337ec
--- /dev/null
+++ b/files/fr/web/api/window/menubar/index.html
@@ -0,0 +1,74 @@
+---
+title: Window.menubar
+slug: Web/API/Window/menubar
+tags:
+  - API
+  - HTML DOM
+  - Propriété
+  - Reference
+  - Window
+translation_of: Web/API/Window/menubar
+---
+<div>{{ APIRef() }}</div>
+
+<p>La propriété <code><strong>Window.menubar</strong></code> renvoie l'objet <code>menubar</code>, dont la visibilité peut être vérifiée.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><em>objRef</em> = <em>window</em>.menubar
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'exemple HTML complet suivant montre comment la propriété <code>visible</code> de l'objet <code>menubar</code> est utilisée.</p>
+
+<pre class="brush:html notranslate">&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;Divers Tests DOM&lt;/title&gt;
+  &lt;script&gt;
+    var visible = window.menubar.visible;
+  &lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;p&gt;Divers Tests DOM&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</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', 'browsers.html#dom-window-menubar', 'Window.menubar')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-window-menubar', 'Window.menubar')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.Window.menubar")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>{{domxref("Window.locationbar")}}</li>
+ <li>{{domxref("Window.personalbar")}}</li>
+ <li>{{domxref("Window.scrollbars")}}</li>
+ <li>{{domxref("Window.statusbar")}}</li>
+ <li>{{domxref("Window.toolbar")}}</li>
+</ul>
diff --git a/files/fr/web/api/window/message_event/index.html b/files/fr/web/api/window/message_event/index.html
new file mode 100644
index 0000000000..4c401afaa8
--- /dev/null
+++ b/files/fr/web/api/window/message_event/index.html
@@ -0,0 +1,84 @@
+---
+title: 'Window: message event'
+slug: Web/API/Window/message_event
+tags:
+  - Evènement
+  - Window
+translation_of: Web/API/Window/message_event
+---
+<div>{{APIRef}}</div>
+
+<p>L'événement <code>message</code> est déclenché sur un objet {{domxref('Window')}} lorsque la fenêtre reçoit un message, par exemple d'un appel a <code><a href="/en-US/docs/Web/API/Window/postMessage">Window.postMessage()</a></code> depuis un autre contexte de navigation.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Bulles</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">Annulable</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("MessageEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Propriété de gestionnaire d'événements</th>
+   <td><code><a href="/en-US/docs/Web/API/WindowEventHandlers/onmessage">onmessage</a></code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p><span class="tlid-translation translation" lang="fr"><span title="">Supposons qu'un script envoie un message à un contexte de navigation différent, tel qu'un autre </span></span><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe">&lt;iframe&gt;</a></code>, en utilisant un code comme celui-ci:</p>
+
+<pre class="brush: js notranslate">const targetFrame = window.top.frames[1];
+const targetOrigin = 'https://exemple.org';
+const windowMessageButton = document.querySelector('#window-message');
+
+windowMessageButton.addEventListener('click', () =&gt; {
+    targetFrame.postMessage('bonjour', targetOrigin);
+});</pre>
+
+<p>Le récepteur peut écouter le message en utilisant <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> avec un code comme celui-ci:</p>
+
+<pre class="brush: js notranslate">window.addEventListener('message', (event) =&gt; {
+    console.log(`Message reçu: ${event.data}`);
+});</pre>
+
+<p>Alternativement l'écouteur peut utiliser la propriété du gestionnaire d'événements <code><a href="/en-US/docs/Web/API/WindowEventHandlers/onmessage">onmessage</a></code>:</p>
+
+<pre class="brush: js notranslate">window.onmessage = (event) =&gt; {
+    console.log(`Message reçu: ${event.data}`);
+};</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>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'indices.html#event-message')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.Window.message_event")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>Événements liés: <code><a href="/docs/Web/API/Window/messageerror_event">messageerror</a></code>.</li>
+ <li><code><a href="/en-US/docs/Web/API/Window/postMessage">Window.postMessage()</a></code>.</li>
+</ul>
diff --git a/files/fr/web/api/window/messageerror_event/index.html b/files/fr/web/api/window/messageerror_event/index.html
new file mode 100644
index 0000000000..9f7cc2a8be
--- /dev/null
+++ b/files/fr/web/api/window/messageerror_event/index.html
@@ -0,0 +1,79 @@
+---
+title: 'Window: messageerror event'
+slug: Web/API/Window/messageerror_event
+tags:
+  - API
+  - Evènement
+  - Message d'événement
+  - Reference
+  - Window
+translation_of: Web/API/Window/messageerror_event
+---
+<div>{{APIRef}}</div>
+
+<p>L'événement <code>messageerror</code> est déclenché sur un objet {{domxref('Window')}} lorsqu'il reçoit un message qui ne peut pas être désérialisé.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Bulles</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">Annulable</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("MessageEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Propriété de gestionnaire d'événements</th>
+   <td>{{domxref("WindowEventHandlers/onmessageerror", "onmessageerror")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Écoutez <code>messageerror</code> en utilisant {{domxref("EventTarget/addEventListener", "addEventListener()")}} :</p>
+
+<pre class="brush: js notranslate">window.addEventListener('messageerror', (event) =&gt; {
+    console.error(event);
+});</pre>
+
+<p>Idem, mais en utilisant la propriété de gestionnaire d'événements {{domxref("WindowEventHandlers/onmessageerror", "onmessageerror")}} :</p>
+
+<pre class="brush: js notranslate">window.onmessageerror = (event) =&gt; {
+    console.error(event);
+};</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>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'indices.html#event-messageerror')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.Window.messageerror_event")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>{{domxref("Window.postMessage()")}}</li>
+ <li>Événements liés: {{domxref("Window/message_event", "message")}}.</li>
+</ul>
diff --git a/files/fr/web/api/window/mozanimationstarttime/index.html b/files/fr/web/api/window/mozanimationstarttime/index.html
new file mode 100644
index 0000000000..a536dff700
--- /dev/null
+++ b/files/fr/web/api/window/mozanimationstarttime/index.html
@@ -0,0 +1,41 @@
+---
+title: Window.mozAnimationStartTime
+slug: Web/API/Window/mozAnimationStartTime
+tags:
+  - API
+  - HTML DOM
+  - Obsolete
+  - Propriété
+  - Reference
+  - Window
+translation_of: Web/API/Window/mozAnimationStartTime
+---
+<p>{{APIRef("Mozilla Extensions")}}{{Non-standard_Header}}{{Obsolete_Header("Gecko42")}}</p>
+
+<p>Renvoie l'heure, en millisecondes depuis l'époque, à laquelle les animations ont commencé maintenant doivent être considérées comme ayant commencé. Cette valeur doit être utilisée à la place, par exemple, <code><a href="/en/JavaScript/Reference/Global_Objects/Date/now" title="en/JavaScript/Reference/Global Objects/Date/now">Date.now()</a></code>, car cette valeur sera la même pour toutes les animations lancées dans cette fenêtre pendant cet intervalle d'actualisation, leur permettant de rester synchronisées les unes avec les autres.</p>
+
+<p>Cela permet également aux animations basées sur JavaScript de rester synchronisées avec les transitions CSS et les animations SMIL déclenchées pendant le même intervalle d'actualisation.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="eval notranslate"><em>time</em> = window.mozAnimationStartTime;
+</pre>
+
+<h3 id="Parameters" name="Parameters">Paramètres</h3>
+
+<ul>
+ <li><em><code>time</code></em> est le temps en millisecondes depuis l'époque à laquelle les animations de la fenêtre actuelle doivent être considérées comme ayant démarré.</li>
+</ul>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.Window.mozAnimationStartTime")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>{{domxref("window.mozRequestAnimationFrame()")}}</li>
+ <li>{{domxref("window.onmozbeforepaint")}}</li>
+</ul>
diff --git a/files/fr/web/api/window/mozinnerscreenx/index.html b/files/fr/web/api/window/mozinnerscreenx/index.html
new file mode 100644
index 0000000000..932e10789f
--- /dev/null
+++ b/files/fr/web/api/window/mozinnerscreenx/index.html
@@ -0,0 +1,47 @@
+---
+title: Window.mozInnerScreenX
+slug: Web/API/Window/mozInnerScreenX
+tags:
+  - API
+  - HTML DOM
+  - NeedsSpecTable
+  - Propriété
+  - Reference
+  - Window
+translation_of: Web/API/Window/mozInnerScreenX
+---
+<div>{{APIRef}}{{gecko_minversion_header("1.9.2")}}</div>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Obtient la coordonnée X du coin supérieur gauche de la fenêtre de la fenêtre, en coordonnées d'écran.</p>
+
+<div class="note"><strong>Note:</strong> Cette coordonnée est indiquée en pixels CSS et non en pixels matériels. <span class="tlid-translation translation" lang="fr"><span title="">Cela signifie qu'il peut être affecté par le niveau de zoom</span></span>; <span class="tlid-translation translation" lang="fr"><span title="">pour calculer le nombre réel de pixels d'écran physiques, vous devez utiliser la propriété</span></span><a href="/en-US/docs/XPCOM_Interface_Reference/nsIDOMWindowUtils"> <code>nsIDOMWindowUtils.screenPixelsPerCSSPixel</code></a>.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><var>screenX</var> = window.mozInnerScreenX;</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<ul>
+ <li><var>screenX</var> stocke la valeur de la propriété <code>window.mozInnerScreenX</code>.</li>
+ <li>La propriété <code>window.mozInnerScreenX</code> est une valeur en lecture seule à virgule flottante; il n'a pas de valeur par défaut.</li>
+</ul>
+
+<h2 id="Spécification">Spécification</h2>
+
+<p>Ne fait partie d'aucune spécification ou recommandation technique du W3C.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.Window.mozInnerScreenX")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>{{domxref("window.mozInnerScreenY")}}</li>
+ <li><a href="/en-US/docs/XPCOM_Interface_Reference/nsIDOMWindowUtils"><code>nsIDOMWindowUtils.screenPixelsPerCSSPixel</code></a></li>
+</ul>
diff --git a/files/fr/web/api/window/mozinnerscreeny/index.html b/files/fr/web/api/window/mozinnerscreeny/index.html
new file mode 100644
index 0000000000..8799ff3f43
--- /dev/null
+++ b/files/fr/web/api/window/mozinnerscreeny/index.html
@@ -0,0 +1,47 @@
+---
+title: Window.mozInnerScreenY
+slug: Web/API/Window/mozInnerScreenY
+tags:
+  - API
+  - HTML DOM
+  - NeedsExample
+  - Propriété
+  - Reference
+  - Window
+translation_of: Web/API/Window/mozInnerScreenY
+---
+<div>{{APIRef}}{{gecko_minversion_header("1.9.2")}}</div>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Obtient la coordonnée Y du coin supérieur gauche de la fenêtre de la fenêtre, en coordonnées d'écran.</p>
+
+<div class="note"><strong>Note:</strong> Cette coordonnée est indiquée en pixels CSS et non en pixels matériels. Cela signifie qu'il peut être affecté par le niveau de zoom; pour calculer le nombre réel de pixels d'écran physiques, vous devez utiliser la propriété<a href="/en-US/docs/XPCOM_Interface_Reference/nsIDOMWindowUtils"> <code>nsIDOMWindowUtils.screenPixelsPerCSSPixel</code></a>.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><var>screenY</var> = window.mozInnerScreenY;</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<ul>
+ <li><var>screenY</var> stocke la valeur de la propriété <code>window.mozInnerScreenY</code>.</li>
+ <li>La propriété <code>window.mozInnerScreenY</code> <span class="tlid-translation translation" lang="fr"><span title="">est une valeur en lecture seule à virgule flottante;</span> <span title="">il n'a pas de valeur par défaut.</span></span></li>
+</ul>
+
+<h2 id="Spécification">Spécification</h2>
+
+<p>Ne fait partie d'aucune spécification ou recommandation technique du W3C.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.Window.mozInnerScreenY")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>{{domxref("window.mozInnerScreenX")}}</li>
+ <li><a href="/en-US/docs/XPCOM_Interface_Reference/nsIDOMWindowUtils"><code>nsIDOMWindowUtils.screenPixelsPerCSSPixel</code></a></li>
+</ul>
diff --git a/files/fr/web/api/window/mozpaintcount/index.html b/files/fr/web/api/window/mozpaintcount/index.html
new file mode 100644
index 0000000000..7293c9c43a
--- /dev/null
+++ b/files/fr/web/api/window/mozpaintcount/index.html
@@ -0,0 +1,37 @@
+---
+title: Window.mozPaintCount
+slug: Web/API/Window/mozPaintCount
+tags:
+  - API
+  - 'API:Mozilla Extensions'
+  - Déprécié
+  - HTML DOM
+  - NeedsExample
+  - Non-standard
+  - Propriété
+  - Reference
+  - Window
+translation_of: Web/API/Window/mozPaintCount
+---
+<p>{{APIRef("Mozilla Extensions")}}{{Non-standard_Header}}{{Obsolete_Header("Gecko72")}}{{Gecko_MinVersion_Header("2.0")}}</p>
+
+<p>Renvoie le nombre de fois où le document actuel a été peint à l'écran dans cette fenêtre.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><code>var <em>paintCount</em> = window.mozPaintCount;</code></pre>
+
+<ul>
+ <li><code><em>paintCount</em></code> stocke la valeur de la propriété <code>window.mozPaintCount</code>.</li>
+ <li>La valeur <code>window.mozPaintCount</code> est <code>longue</code>, et commence à zéro <span class="tlid-translation translation" lang="fr"><span title="">lorsque le document est créé pour la première fois, en incrémentant de un à chaque fois que le document est peint.</span></span></li>
+</ul>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<p>Ne fait partie d'aucune spécification ou recommandation du <abbr title="World Wide Web Consortium">W3C</abbr>.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.Window.mozPaintCount")}}</p>
diff --git a/files/fr/web/api/window/name/index.html b/files/fr/web/api/window/name/index.html
new file mode 100644
index 0000000000..ef7efa9448
--- /dev/null
+++ b/files/fr/web/api/window/name/index.html
@@ -0,0 +1,54 @@
+---
+title: Window.name
+slug: Web/API/Window/name
+tags:
+  - API
+  - HTML DOM
+  - Propriété
+  - Reference
+translation_of: Web/API/Window/name
+---
+<div>{{APIRef}}</div>
+
+<h2 id="En_bref">En bref</h2>
+
+<p>Récupère ou définit le nom de la fenêtre.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js"><var>string</var> = window.name;
+window.name = <var>string</var>;
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush:js">window.name = "lab_view";
+</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Les noms de fenêtres sont principalement utilisés pour définir les cibles de liens hypertextes et de formulaires. Les fenêtres n'ont pas besoin d'être nommées.</p>
+
+<p>Les noms de fenêtres ont en outre été utilisés par quelques <em>frameworks </em>pour le support des échanges de messages inter-domaines (par exemple <a href="http://www.thomasfrank.se/sessionvars.html">SessionVars</a> et <a href="http://www.sitepen.com/blog/2008/07/22/windowname-transport/">dojox.io.windowName</a> de Dojo) comme une alternative plus sécurisée à JSONP. Toutefois, les applications web modernes manipulant des données sensibles devraient utiliser l'<a href="/fr/docs/Web/API/Window/postMessage">API postMessage</a> pour les échanges de messages inter-domaines plutôt que s'appuyer sur <code>window.name</code>.</p>
+
+<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>{{SpecName('HTML WHATWG', 'browsers.html#dom-name', 'Window.name')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-name', 'Window.name')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/api/window/navigator/index.html b/files/fr/web/api/window/navigator/index.html
new file mode 100644
index 0000000000..52d536f092
--- /dev/null
+++ b/files/fr/web/api/window/navigator/index.html
@@ -0,0 +1,125 @@
+---
+title: window.navigator
+slug: Web/API/Window/navigator
+tags:
+  - DOM
+  - DOM_0
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/Window/navigator
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p>Renvoie une référence à l'objet
+ <i>
+  navigator</i>
+ , qui peut être interrogé pour obtenir des informations concernant l'application exécutant le script.</p>
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+<pre class="eval">alert("Vous utilisez " + navigator.appName);
+</pre>
+<h3 id="Notes" name="Notes">Notes</h3>
+<p>L'objet navigator est utilisé pour connaître le navigateur en cours d'utilisation. Il fournit des propriétés permettant d'obtenir des informations sur le navigateur lui-même. Toutes les propriétés et méthodes disponibles depuis window.navigator peuvent également être référencées simplement avec navigator.</p>
+<h3 id="Propri.C3.A9t.C3.A9s" name="Propri.C3.A9t.C3.A9s">Propriétés</h3>
+<dl>
+ <dt>
+  <a href="fr/DOM/window.navigator.appcodeName">navigator.appCodeName</a></dt>
+ <dd>
+  Renvoie le nom de code interne du navigateur courant.</dd>
+ <dt>
+  <a href="fr/DOM/window.navigator.appName">navigator.appName</a></dt>
+ <dd>
+  Renvoie le nom officiel du navigateur.</dd>
+ <dt>
+  <a href="fr/DOM/window.navigator.appVersion">navigator.appVersion</a></dt>
+ <dd>
+  Renvoie la version du navigateur sous la forme d'une chaîne.</dd>
+ <dt>
+  <a href="fr/DOM/window.navigator.buildID">navigator.buildID</a></dt>
+ <dd>
+  Renvoie l'identifiant de compilation du navigateur (par exemple « 2006090803 »)</dd>
+ <dt>
+  <a href="fr/DOM/window.navigator.cookieEnabled">navigator.cookieEnabled</a></dt>
+ <dd>
+  Renvoie un booléen indiquant si les cookies sont activés ou non dans le navigateur.</dd>
+ <dt>
+  <a href="fr/DOM/window.navigator.language">navigator.language</a></dt>
+ <dd>
+  Renvoie une chaîne représentant la langue utilisée par le navigateur.</dd>
+ <dt>
+  <a href="fr/DOM/window.navigator.mimeTypes">navigator.mimeTypes</a></dt>
+ <dd>
+  Renvoie une liste des types MIME gérés par le navigateur.</dd>
+ <dt>
+  <a href="fr/DOM/window.navigator.onLine">navigator.onLine</a></dt>
+ <dd>
+  Renvoie un booléen indiquant si le navigateur est en mode en ligne.</dd>
+ <dt>
+  <a href="fr/DOM/window.navigator.oscpu">navigator.oscpu</a></dt>
+ <dd>
+  Renvoie une chaîne indiquant le système d'exploitation.</dd>
+ <dt>
+  <a href="fr/DOM/window.navigator.platform">navigator.platform</a></dt>
+ <dd>
+  Renvoie une chaîne représentant la plateforme du navigateur.</dd>
+ <dt>
+  <a href="fr/DOM/window.navigator.plugins">navigator.plugins</a></dt>
+ <dd>
+  Renvoie un tableau listant les plugins installés dans le navigateur.</dd>
+ <dt>
+  <a href="fr/DOM/window.navigator.product">navigator.product</a></dt>
+ <dd>
+  Renvoie le nom de produit du navigateur (par exemple « Gecko »)</dd>
+ <dt>
+  <a href="fr/DOM/window.navigator.productSub">navigator.productSub</a></dt>
+ <dd>
+  Renvoie le numéro de compilation du produit (par exemple « 20060909 »)</dd>
+ <dt>
+  <a href="fr/DOM/window.navigator.securityPolicy">navigator.securityPolicy</a></dt>
+ <dd>
+  Renvoie une chaîne vide. Dans Netscape 4.7x, renvoyait « US &amp; CA domestic policy » ou « Export policy ».</dd>
+ <dt>
+  <a href="fr/DOM/window.navigator.userAgent">navigator.userAgent</a></dt>
+ <dd>
+  Renvoie la chaîne d'identification d'agent utilisateur pour le navigateur courant.</dd>
+ <dt>
+  <a href="fr/DOM/window.navigator.vendor">navigator.vendor</a></dt>
+ <dd>
+  Renvoie le nom du vendeur du navigateur (par exemple « Netscape6 »)</dd>
+ <dt>
+  <a href="fr/DOM/window.navigator.vendorSub">navigator.vendorSub</a></dt>
+ <dd>
+  Renvoie le numéro de version du vendeur (par exemple « 6.1 »)</dd>
+</dl>
+<h3 id="M.C3.A9thodes" name="M.C3.A9thodes">Méthodes</h3>
+<dl>
+ <dt>
+  <a href="fr/DOM/window.navigator.javaEnabled">navigator.javaEnabled</a></dt>
+ <dd>
+  Indique si le navigateur hôte dispose de Java activé ou non.</dd>
+ <dt>
+  <a href="fr/DOM/window.navigator.isLocallyAvailable">navigator.isLocallyAvailable</a></dt>
+ <dd>
+  Permet de vérifier si le document à une URI donnée est disponible sans utiliser le réseau.</dd>
+ <dt>
+  <a href="fr/DOM/window.navigator.preference">navigator.preference</a></dt>
+ <dd>
+  Définit une préférence utilisateur. Cette méthode est <a class="external" href="http://www.faqts.com/knowledge_base/view.phtml/aid/1608/fid/125/lang/en">uniquement disponible pour du code privilégié</a>, et il est préférable d'utiliser l'<a href="fr/API_des_pr%c3%a9f%c3%a9rences">API des préférences</a> XPCOM à la place.</dd>
+ <dt>
+  <a href="fr/DOM/window.navigator.registerContentHandler">navigator.registerContentHandler</a></dt>
+ <dd>
+  Permet aux sites Web de s'enregistrer comme gestionnaires possibles pour un type MIME donné.</dd>
+ <dt>
+  <a href="fr/DOM/window.navigator.registerProtocolHandler">navigator.registerProtocolHandler</a> {{ Fx_minversion_inline(3) }} </dt>
+ <dd>
+  Permet aux sites Web de s'enregistrer comme gestionnaires possibles pour un protocole donné.</dd>
+ <dt>
+  <a href="fr/DOM/window.navigator.taintEnabled">navigator.taintEnabled</a> {{ Obsolete_inline() }} </dt>
+ <dd>
+  Renvoie <code>false</code>. Les fonctions JavaScript taint/untaint ont été retirées de JavaScript dans sa version 1.2<a class="external" href="http://devedge-temp.mozilla.org/library/manuals/2000/javascript/1.3/reference/nav.html#1194117"> </a></dd>
+</dl>
+<h3 id="Voir_.C3.A9galement" name="Voir_.C3.A9galement"><a class="external" href="http://devedge-temp.mozilla.org/library/manuals/2000/javascript/1.3/reference/nav.html#1194117">Voir également </a></h3>
+<p><a href="fr/R%c3%a9f%c3%a9rence_objet_crois%c3%a9e_des_clients_DOM/navigator">Référence objet croisée des clients DOM:navigator</a></p>
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+<p>{{ DOM0() }}</p>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "en": "en/DOM/window.navigator", "ja": "ja/DOM/window.navigator", "pl": "pl/DOM/window.navigator" } ) }}</p>
diff --git a/files/fr/web/api/window/offline_event/index.html b/files/fr/web/api/window/offline_event/index.html
new file mode 100644
index 0000000000..a038b1ea4a
--- /dev/null
+++ b/files/fr/web/api/window/offline_event/index.html
@@ -0,0 +1,73 @@
+---
+title: 'Window: Evenement offline'
+slug: Web/API/Window/offline_event
+tags:
+  - API
+  - Event
+  - Offline
+  - Reference
+  - Window
+translation_of: Web/API/Window/offline_event
+---
+<p>{{APIRef}}</p>
+
+<p>L'événement <strong><code>offline</code></strong> de l'interface {{domxref("Window")}} se déclenche lorsque le navigateur perd la connexion au réseau et la valeur de  {{domxref("Navigator.onLine")}} bascule à <code>false</code>.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Bulles</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">Annulable</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("Event")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Propriété de gestionnaire d'événements</th>
+   <td>{{domxref("GlobalEventHandlers.onoffline", "onoffline")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js notranslate">//version addEventListener
+window.addEventListener('offline', (event) =&gt; {
+    console.log("La Connexion au réseau est perdu.");
+});
+
+// onoffline version
+window.onoffline = (event) =&gt; {
+  console.log("La Connexion au réseau a été perdue.");
+};
+</pre>
+
+<h2 class="brush: js" id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "indices.html#event-offline", "offline event")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_Navigateurs">Compatibilité des Navigateurs</h2>
+
+<p>{{Compat("api.Window.offline_event")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Window/online_event"><code>online</code></a></li>
+</ul>
diff --git a/files/fr/web/api/window/ondevicelight/index.html b/files/fr/web/api/window/ondevicelight/index.html
new file mode 100644
index 0000000000..4a4357ec9a
--- /dev/null
+++ b/files/fr/web/api/window/ondevicelight/index.html
@@ -0,0 +1,34 @@
+---
+title: Window.ondevicelight
+slug: Web/API/Window/ondevicelight
+tags:
+  - API
+  - Ambient Light Events
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/API/Window/ondevicelight
+---
+<div>{{obsolete_header}}</div>
+
+<p>Spécifie un écouteur d'événements pour recevoir des événements {{event ("devicelight")}}. Ces événements se produisent lorsque le capteur de niveau de lumière de l'appareil détecte une modification de l'intensité du niveau de lumière ambiante.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">window.ondevicelight = <var>funcRef</var></pre>
+
+<p><code><em>funcRef</em></code> est une fonction à appeler lorsque l'événement {{event("devicelight")}} se produit. Ces événements sont de type {{domxref("DeviceLightEvent")}}.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.Window.ondevicelight")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>{{event("devicelight")}}</li>
+ <li>{{domxref("DeviceLightEvent")}}</li>
+ <li><a href="/en-US/docs/Web/API/DeviceLightEvent/Using_light_events">Using Light Events</a></li>
+</ul>
diff --git a/files/fr/web/api/window/online_event/index.html b/files/fr/web/api/window/online_event/index.html
new file mode 100644
index 0000000000..0dd968c064
--- /dev/null
+++ b/files/fr/web/api/window/online_event/index.html
@@ -0,0 +1,79 @@
+---
+title: 'Window: online event'
+slug: Web/API/Window/online_event
+tags:
+  - API
+  - Evènement
+  - Online
+  - Reference
+  - Window
+translation_of: Web/API/Window/online_event
+---
+<div>{{APIRef}}</div>
+
+<p>L'événement <strong><code>online</code></strong> de l'interface {{domxref("Window")}} est déclenché lorsque le navigateur a obtenu l'accès au réseau et que la valeur de {{domxref("Navigator.onLine")}} passe à <code>true</code>.</p>
+
+<div class="note"><strong>Note:</strong> Cet événement ne doit pas être utilisé pour déterminer la disponibilité d'un site Web particulier. Des problèmes de réseau ou des pare-feu peuvent encore empêcher l'accès au site Web.</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Bulles</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Annulable</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("Event")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Propriété de gestionnaire d'événements</th>
+   <td>{{domxref("GlobalEventHandlers.ononline", "ononline")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;"></dt>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js notranslate">// addEventListener version
+window.addEventListener('online', (event) =&gt; {
+    console.log("Vous êtes maintenant connecté au réseau.");
+});
+
+// ononline version
+window.ononline = (event) =&gt; {
+  console.log("Vous êtes maintenant connecté au réseau.");
+};
+</pre>
+
+<h2 class="brush: js" id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "indices.html#event-online", "online event")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Window.online_event")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Window/offline_event"><code>offline</code></a></li>
+</ul>
diff --git a/files/fr/web/api/window/onpaint/index.html b/files/fr/web/api/window/onpaint/index.html
new file mode 100644
index 0000000000..351683ba0c
--- /dev/null
+++ b/files/fr/web/api/window/onpaint/index.html
@@ -0,0 +1,37 @@
+---
+title: Window.onpaint
+slug: Web/API/Window/onpaint
+tags:
+  - API
+  - Event Handler
+  - HTML DOM
+  - Non-standard
+  - Propriété
+translation_of: Web/API/Window/onpaint
+---
+<div>{{ ApiRef() }} {{Non-standard_header}}</div>
+
+<p><code><strong>Window.onpaint</strong></code> est un gestionnaire d'événements pour l'événement <code>paint</code> sur la fenêtre.</p>
+
+<div class="blockIndicator warning">
+<p>Ne fonctionne pas dans les applications basées sur Gecko actuellement, voir la section Notes!</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">window.onpaint = <em>funcRef</em>;
+</pre>
+
+<ul>
+ <li><code>funcRef</code> est une fonction de gestionnaire.</li>
+</ul>
+
+<h2 id="Notes">Notes</h2>
+
+<p><code>onpaint</code> ne fonctionne pas actuellement, et il est douteux que cet événement fonctionne du tout, voir {{ Bug(239074) }}.</p>
+
+<p>L'événement <code>paint</code> est déclenché lorsque la fenêtre est rendue. Cet événement se produit après l'événement {{Event ("load")}} pour une fenêtre, et se reproduit chaque fois que la fenêtre doit être restituée, par exemple lorsqu'une autre fenêtre l'obscurcit et est ensuite effacée.</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<p>Cela ne fait partie d'aucune spécification.</p>
diff --git a/files/fr/web/api/window/onresize/index.html b/files/fr/web/api/window/onresize/index.html
new file mode 100644
index 0000000000..d2c0d6304f
--- /dev/null
+++ b/files/fr/web/api/window/onresize/index.html
@@ -0,0 +1,78 @@
+---
+title: window.onresize
+slug: Web/API/Window/onresize
+tags:
+  - API
+  - DOM
+  - Gestionnaires d'évènements
+  - Propriété
+  - évènements
+translation_of: Web/API/GlobalEventHandlers/onresize
+---
+<p>{{ ApiRef() }}</p>
+
+<p>La propriété <code><strong>GlobalEventHandlers.onresize</strong></code> contient un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements)</em> qui survient quand un évènement {{event("resize")}} est reçu.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="eval">window.onresize = <em>funcRef</em>;
+</pre>
+
+<h3 id="Parameters" name="Parameters">Paramètres</h3>
+
+<ul>
+ <li><code>funcRef</code> est une référence à une fonction.</li>
+</ul>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre>window.onresize = doFunc;
+</pre>
+
+<pre class="line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>title</span><span class="punctuation token">&gt;</span></span>onresize test<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>title</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</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>Resize the browser window to fire the resize event.<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>Window height: <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>span</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>height<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>span</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>Window width: <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>span</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>width<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>span</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/javascript<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
+  <span class="keyword token">var</span> heightOutput <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'#height'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">var</span> widthOutput <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'#width'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="keyword token">function</span> <span class="function token">resize</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    heightOutput<span class="punctuation token">.</span>textContent <span class="operator token">=</span> window<span class="punctuation token">.</span>innerHeight<span class="punctuation token">;</span>
+    widthOutput<span class="punctuation token">.</span>textContent <span class="operator token">=</span> window<span class="punctuation token">.</span>innerWidth<span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+
+  window<span class="punctuation token">.</span>onresize <span class="operator token">=</span> resize<span class="punctuation token">;</span>
+</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>L’événement <code>resize</code> est déclenché après le redimensionnement de la fenêtre.</p>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<table class="spectable 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','webappapis.html#handler-onresize','onresize')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/api/window/open/index.html b/files/fr/web/api/window/open/index.html
new file mode 100644
index 0000000000..d4fced2fa8
--- /dev/null
+++ b/files/fr/web/api/window/open/index.html
@@ -0,0 +1,770 @@
+---
+title: window.open
+slug: Web/API/Window/open
+tags:
+  - DOM
+  - DOM_0
+translation_of: Web/API/Window/open
+---
+<p>{{ ApiRef() }}</p>
+
+<h3 id="D.C3.A9finition" name="D.C3.A9finition">Définition</h3>
+
+<p>Crée une nouvelle fenêtre de navigation secondaire et y charge la ressource référencée.</p>
+
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+
+<pre class="syntaxbox  language-html"><code class="language-html">var windowObjectReference = window.open(strUrl, strWindowName[, strWindowFeatures]);</code></pre>
+
+<h3 id="Valeur_renvoy.C3.A9e_et_param.C3.A8tres" name="Valeur_renvoy.C3.A9e_et_param.C3.A8tres">Valeur renvoyée et paramètres</h3>
+
+<dl>
+ <dt><code>WindowObjectReference</code></dt>
+ <dd>Il s'agit de la référence pointant vers la fenêtre de navigation nouvellement créée. Cette référence est la valeur renvoyée par la méthode <code>open()</code> ; elle sera à <code>null</code> si pour une raison ou une autre l'appel n'a pas réussi à ouvrir une fenêtre. Une variable globale est le meilleur endroit pour stocker une telle référence. Il est alors possible, par exemple, de l'utiliser pour obtenir certaines propriétés de la nouvelle fenêtre, ou accéder à certaines de ses méthodes, à condition que la relation entre votre fenêtre principale et votre fenêtre secondaire se conforme avec les paramètres de sécurité de même origine (<em><a class="external" href="http://www.mozilla.org/projects/security/components/same-origin.html">Same origin policy</a> security requirements</em> ).</dd>
+</dl>
+
+<dl>
+ <dt><code>strUrl</code></dt>
+ <dd>Il s'agit de l'URL à charger dans la fenêtre nouvellement créée. <var>strUrl</var> peut être un document HTML, un fichier image, ou tout autre type de fichier géré par le navigateur.</dd>
+</dl>
+
+<dl>
+ <dt><code>strWindowName</code></dt>
+ <dd>Il s'agit de la chaîne d'identification de la nouvelle fenêtre. Celle-ci peut être utilisée pour être la cible de liens et de formulaires lorsque l'attribut <code>target</code> d'un élément <code style="font-size: 1em;">&lt;a&gt;</code> ou d'un élément <code style="font-size: 1em;">&lt;form&gt;</code> est spécifié. Cette chaîne ne peut contenir d'espaces. <var>strWindowName</var> ne spécifie pas le titre de la fenêtre, juste son nom interne.</dd>
+</dl>
+
+<dl>
+ <dt><code>strWindowFeatures</code></dt>
+ <dd>Paramètre optionnel. Il s'agit de la chaîne listant les fonctionnalités de la nouvelle fenêtre de navigation (et de ses barres d'outils). Cette chaîne ne peut contenir d'espaces. Chaque fonctionnalité doit être séparée par une virgule au sein de la chaîne de caractères.</dd>
+</dl>
+
+<h3 id="Description" name="Description">Description</h3>
+
+<p>La méthode <code>open()</code> crée une nouvelle fenêtre secondaire de navigation, de façon similaire au choix de l'option Nouvelle fenêtre du menu Fichier. Le paramètre <var>strUrl</var> spécifie l'URL à récupérer et à charger dans la nouvelle fenêtre. Si <var>strUrl</var> est une chaîne vide, une nouvelle fenêtre vide de tout contenu (l'URL <code>about:blank</code> sera chargée) est créée avec les barres d'outils par défaut de la fenêtre principale.</p>
+
+<p>Notez que les URL distantes ne seront pas chargées instantanément. Lorsque l'appel à <code>window.open()</code> se termine et renvoie sa valeur, la fenêtre contient toujours <code>about:blank</code>. Le chargement proprement dit de l'URL est reporté et ne commence effectivement qu'après la fin de l'exécution du bloc de script courant. La création de la fenêtre d'une part et le chargement de la ressource référencée d'autre part sont faits de manière asynchrone.</p>
+
+<h4 id="Exemples" name="Exemples">Exemples</h4>
+
+<pre class="brush:js  language-js"><code class="language-js"><span class="keyword token">var</span> windowObjectReference<span class="punctuation token">;</span>
+<span class="keyword token">var</span> strWindowFeatures <span class="operator token">=</span> <span class="string token">"menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes"</span><span class="punctuation token">;</span>
+
+<span class="keyword token">function</span> <span class="function token">openRequestedPopup<span class="punctuation token">(</span></span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  windowObjectReference <span class="operator token">=</span> window<span class="punctuation token">.</span><span class="function token">open<span class="punctuation token">(</span></span><span class="string token">"http://www.cnn.com/"</span><span class="punctuation token">,</span> <span class="string token">"CNN_WindowName"</span><span class="punctuation token">,</span> strWindowFeatures<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<pre class="brush:js  language-js"><code class="language-js"><span class="keyword token">var</span> windowObjectReference<span class="punctuation token">;</span>
+
+<span class="keyword token">function</span> <span class="function token">openRequestedPopup<span class="punctuation token">(</span></span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  windowObjectReference <span class="operator token">=</span> window<span class="punctuation token">.</span><span class="function token">open<span class="punctuation token">(</span></span>
+    <span class="string token">"http://www.domainname.ext/path/ImageFile.png"</span><span class="punctuation token">,</span>
+    <span class="string token">"DescriptiveWindowName"</span><span class="punctuation token">,</span>
+    <span class="string token">"resizable,scrollbars,status"</span>
+  <span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+
+
+<p>Si une fenêtre du nom <var>strWindowName</var> existe déjà, alors, au lieu d'ouvrir une nouvelle fenêtre, <var>strUrl</var> est chargée dans cette fenêtre existante. Dans ce cas, la valeur renvoyée par la méthode est la fenêtre existante, et <var>strWindowFeatures</var> est ignorée. Fournir une chaîne vide pour <var>strUrl</var> est une manière d'obtenir une référence à une fenêtre ouverte par son nom sans en changer l'adresse. Si vous désirez ouvrir une nouvelle fenêtre à chaque appel de <code>window.open()</code>, il faut utiliser la nom réservé <var>_blank</var> pour <var>strWindowName</var>.</p>
+
+<div class="note">
+<p><strong>Note à propos de l'utilisation de window.open pour ré-ouvrir ou donner le focus à une fenêtre existante portant un nom connu du domaine </strong>: Cette fonctionalité n'est pas valide pour tous les navigateurs et qui plus est avec des comportement variables. Firefox (50.0.1) fonctionne comme il est décrit ici : depuis le même domaine+port la ré-exécution de window.open avec le même nom va accéder à la fenêtre précédemment ouverte.  Google Chrome (55.0.2883.87 m ) pour sa part ne l'exécutera qu'à partir du même parent (nommé "opener", comme si les fenêtres étaient créées avec une dépendance et uniquement avec window.open). Il s'agit là d'une limitation considérable ce qui génère une incroyable complexité de développement parfois sans issue. Firefox récupère le handle vers toutes les fenêtres du domaine dont le nom est connu, ce qui permet d'accéder à leur données, mais il ne peut exécuter une commande HTMLElement.focus() vers l'une quelconque de ces fenêtres, ce qui interdit de réouvrir la fenêtre pourtant connue comme active. Pour sa part Chrome peut redonner le focus à une fenêtre (onglet) enfant mais l'opération est impossible entre frères et depuis l'enfant vers le parent. Quant aux autres fenêtres du même domaine (même famille ?) non ouvertes avec window.open elles sont inconnues et<code> window.open('',&lt;name&gt;,'')</code> ouvrira alors des doublons. La fonction <code>hw=window.open('',strWindowName<strong> </strong> ,'')</code> est pourtant la seule qui permette de récupérer un handle en connaissant un nom et théoriquement éviter la création de doublons, mais pour l'instant, 22/02/2017, les différences de comportement des navigateurs ne permettent de l'utiliser que de manière partielle dans des cas très restreints.</p>
+</div>
+
+<p><var>strWindowFeatures</var> est une chaîne optionnelle contenant une liste, séparée par des virgules, de fonctionnalités demandées pour la nouvelle fenêtre. Après qu'une fenêtre soit ouverte, vous ne pouvez pas utiliser JavaScript pour changer ses fonctionnalités et ses barres d'outils. Si <var>strWindowName</var> ne spécifie pas une fenêtre existante et si vous ne fournissez pas le paramètre <var>strWindowFeatures</var> (ou si celui-ci est une chaîne vide), la nouvelle fenêtre secondaire comportera les barres d'outils par défaut de la fenêtre principale.</p>
+
+<p>Si le paramètre <var>strWindowFeatures</var> est utilisé et si aucune information de taille n'est définie, les dimensions de la nouvelle fenêtre seront les mêmes que celles de la fenêtre ouverte la plus récemment.</p>
+
+<p>Si le paramètre <var>strWindowFeatures</var> est utilisé et qu'aucune information de position n'est définie, les coordonnées du coin en haut à gauche de la nouvelle fenêtre seront décalées de 22 pixels vers le bas et vers la droite par rapport à celles de la fenêtre ouverte le plus récemment. Un décalage est utilisé par tous les concepteurs de navigateurs (il est de 29 pixels dans Internet Explorer 6 SP2 avec le thème par défaut) et son but est d'aider l'utilisateur à remarquer l'ouverture d'une nouvelle fenêtre. Si la fenêtre ouverte le plus récemment était maximisée, il n'y aura pas de décalage et la nouvelle fenêtre secondaire sera maximisée également.</p>
+
+<p><strong>Si le paramètre <var>strWindowFeatures</var> est défini, les fonctionnalités qui ne sont pas listées, explicitement demandées dans la chaîne, seront désactivées ou enlevées</strong> (à l'exception de <var>titlebar</var> et <var>close</var> qui sont par défaut à <var>yes</var>).</p>
+
+<div class="note">
+<p><strong>Astuce</strong> : Si vous utilisez le paramètre <var>strWindowFeatures</var>, listez uniquement les fonctionnalités dont vous avez besoin, qui doivent être activées ou affichées. Les autres (à l'exception de <var>titlebar</var> et <var>close</var>) seront désactivées ou enlevées.</p>
+</div>
+
+<p style="border: 1px dotted green;"><img alt="Illustration des barres d'outils du chrome de Firefox" class="internal" src="/@api/deki/files/1286/=FirefoxChromeToolbarsDescription7a.png"></p>
+
+<h4 id="Fonctionnalit.C3.A9s_de_position_et_de_taille" name="Fonctionnalit.C3.A9s_de_position_et_de_taille">Fonctionnalités de position et de taille</h4>
+
+<p><a href="#Note_sur_les_corrections_d.27erreurs_de_position_et_de_dimension">Note sur les corrections d'erreurs de position et de dimension</a></p>
+
+<div class="bug">{{bug(176320) }}</div>
+
+<p><a href="#Note_sur_les_priorit.C3.A9s">Note sur les priorités</a></p>
+
+<dl>
+ <dt>left </dt>
+ <dd><span id="left">Spécifie la distance</span> à laquelle la nouvelle fenêtre est placée depuis le bord gauche de la zone de travail destinée aux applications du système d'exploitation de l'utilisateur jusqu'à la bordure extérieure (bordure de redimensionnement) de la fenêtre de navigation. La nouvelle fenêtre ne peut pas être positionnée initialement hors de l'écran.</dd>
+ <dd>Reconnu par : , , , , ,</dd>
+</dl>
+
+<dl>
+ <dt>top </dt>
+ <dd><span id="topS">Spécifie la distance</span> à laquelle la nouvelle fenêtre est placée depuis le bord supérieur de la zone de travail destinée aux applications du système d'exploitation de l'utilisateur jusqu'à la bordure extérieure (bordure de redimensionnement) de la fenêtre de navigation. La nouvelle fenêtre ne peut pas être positionnée initialement hors de l'écran.</dd>
+ <dd>Reconnu par : , , , , ,</dd>
+</dl>
+
+<dl>
+ <dt>height </dt>
+ <dd><span id="height">Spécifie la hauteur</span> de la zone de contenu, l'espace de visualisation de la nouvelle fenêtre secondaire, en pixels. La valeur de hauteur comprend celle de la barre de défilement horizontale si celle-ci est présente. La valeur minimale requise est 100.</dd>
+ <dd><a href="#Note_sur_la_diff.C3.A9rence_entre_outerHeight_et_height">Note sur la différence entre outerHeight et height (ou innerHeight)</a></dd>
+ <dd>Reconnu par : , , , , ,</dd>
+</dl>
+
+<dl>
+ <dt>width </dt>
+ <dd><span id="width">Spécifie la largeur</span> de la zone de contenu, l'espace de visualisation de la nouvelle fenêtre secondaire, en pixels. La valeur de largeur comprend celle de la barre de défilement verticale si celle-ci est présente. Elle ne prend pas en compte un éventuel panneau latéral si celui-ci est déplié. La valeur minimale requise est 100.</dd>
+ <dd>Reconnu par : , , , , ,</dd>
+</dl>
+
+<dl>
+ <dt>screenX </dt>
+ <dd>Déprécié. Ne plus utiliser. Similaire à <a href="#left">left</a>, mais uniquement reconnu par les navigateurs Netscape et basés sur Mozilla.</dd>
+ <dd>Reconnu par : , , ,</dd>
+</dl>
+
+<dl>
+ <dt>screenY </dt>
+ <dd>Déprécié. Ne plus utiliser. Similaire à <a href="#topS">top</a>, mais uniquement reconnu par les navigateurs Netscape et basés sur Mozilla.</dd>
+ <dd>Reconnu par : , , ,</dd>
+</dl>
+
+<dl>
+ <dt>outerHeight </dt>
+ <dd>Spécifie la hauteur de toute la fenêtre de navigation en pixels. Cette valeur outerHeight comprend toute barre d'outils présente, la barre de défilement horizontale de la fenêtre (si présente) et les bordures inférieures et supérieures. La valeur minimale requise est 100.</dd>
+ <dd><strong>Note</strong> : étant donné que la barre de titre est toujours visible, demander une valeur outerHeight=100 rendra la valeur innerHeight de la fenêtre de navigation plus petite que les 100 pixels minimaux habituels.</dd>
+ <dd><a href="#Note_sur_la_diff.C3.A9rence_entre_outerHeight_et_height">Note sur les différences entre outerHeight et height (ou innerHeight)</a></dd>
+ <dd>Reconnu par : , , ,</dd>
+</dl>
+
+<dl>
+ <dt>outerWidth </dt>
+ <dd>Spécifie la largeur de toute la fenêtre de navigation en pixels. Cette valeur outerWidth comprend la barre de défilement verticale (si présente) et les bords gauche et droits de la fenêtre.</dd>
+ <dd>Reconnu par : , , ,</dd>
+</dl>
+
+<dl>
+ <dt>innerHeight </dt>
+ <dd>Similaire à <a href="#height">height</a>, mais uniquement reconnu par les navigateurs Netscape et basés sur Mozilla. Spécifie la hauteur de la zone de contenu, l'espace de visualisation de la nouvelle fenêtre secondaire, en pixels. La valeur <code>innerHeight</code> comprend la hauteur de la barre de défilement horizontale si celle-ci est présente. La valeur minimale requise est 100.</dd>
+ <dd><a href="#Note_sur_la_diff.C3.A9rence_entre_outerHeight_et_height">Note sur les différences entre outerHeight et height (ou innerHeight)</a></dd>
+ <dd>Reconnu par : , , ,</dd>
+</dl>
+
+<dl>
+ <dt>innerWidth </dt>
+ <dd>Similaire à <a href="#width">width</a> , mais uniquement reconnu par les navigateurs Netscape et basés sur Mozilla. Spécifie la largeur de la zone de contenu, l'espace de visualisation de la nouvelle fenêtre secondaire, en pixels. La valeur <code>innerWidth</code> comprend la largeur de la barre de défilement verticale si celle-ci est présente. Elle ne prend pas en compte un éventuel panneau latéral si celui-ci est déplié. La valeur minimale requise est 100.</dd>
+ <dd>Reconnu par : , , ,</dd>
+</dl>
+
+<h4 id="Fonctionnalit.C3.A9s_de_barres_d.27outils_et_de_chrome" name="Fonctionnalit.C3.A9s_de_barres_d.27outils_et_de_chrome">Fonctionnalités de barres d'outils et de chrome</h4>
+
+<dl>
+ <dt>menubar </dt>
+ <dd>Si cette fonctionnalité est définie à <var>yes</var>, la nouvelle fenêtre secondaire disposera d'une barre de menus.</dd>
+ <dd>Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours avoir une barre de menus en positionnant <code>dom.disable_window_open_feature.menubar</code> à <var>true</var> dans <kbd>about:config</kbd> ou dans leur <a class="external" href="http://www.mozilla.org/support/firefox/edit#user">fichier user.js</a>.</dd>
+ <dd>Reconnu par : , , , ,</dd>
+</dl>
+
+<dl>
+ <dt>toolbar </dt>
+ <dd>Si cette fonctionnalité est définie à <var>yes</var>, la nouvelle fenêtre secondaire disposera d'une barre de navigation (boutons Précédente, Suivante, Actualiser et Arrêter). En plus de la barre de navigation, les navigateurs basés sur Mozilla afficheront également la barre d'onglets si elle est toujours visible et présente dans la fenêtre parente.</dd>
+ <dd>Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours afficher la barre de navigation en positionnant <code>dom.disable_window_open_feature.toolbar</code> à <var>true</var> dans <kbd>about:config</kbd> ou dans leur <a class="external" href="http://www.mozilla.org/support/firefox/edit#user">fichier user.js</a>.</dd>
+ <dd>Reconnu par : , , , ,</dd>
+</dl>
+
+<dl>
+ <dt>location </dt>
+ <dd>Si cette fonctionnalité est définie à <var>yes</var>, la nouvelle fenêtre secondaire affichera une barre d'adresse (ou d'emplacement).</dd>
+ <dd>Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours afficher la barre d'adresse en positionnant <code>dom.disable_window_open_feature.location</code> à <var>true</var> dans <kbd>about:config</kbd> ou dans leur <a class="external" href="http://www.mozilla.org/support/firefox/edit#user">fichier user.js</a>.</dd>
+ <dd>Notez qu'Internet Explorer 7 force la présence de la barre d'adresse : « Nous pensons que la barre d'adresse est aussi importante pour les utilisateurs <strong>à voir dans les fenêtres pop-up</strong>. Une barre d'adresse manquante crée une opportunité pour un fraudeur de contrefaire une adresse. Pour aider à contrer cela, <strong>IE7 va afficher une barre d'adresse sur toutes les fenêtres de navigation pour aider les utilisateurs à voir où ils sont</strong>. » provenant de <a class="external" href="http://blogs.msdn.com/ie/archive/2005/11/21.aspx">Better Website Identification</a>.</dd>
+ <dd>Il est également dans les intentions de Mozilla de forcer la présence de la Barre d'adresse dans une prochaine version de Firefox :</dd>
+ <dd>
+ <div class="bug">{{bug(337344) }}</div>
+ </dd>
+</dl>
+
+<dl>
+ <dd>Reconnu par : , , , , ,</dd>
+</dl>
+
+<dl>
+ <dt>directories </dt>
+ <dd>Si cette fonctionnalité est définie à <var>yes</var>, la nouvelle fenêtre secondaire affichera la barre personnelle dans les navigateurs Netscape 6.x, Netscape 7.x, Mozilla et Firefox. Dans Internet Explorer 5+, la barre de liens sera affichée. En plus de la barre personnelle, les navigateurs Mozilla afficheront la barre de navigation du site si celle-ci est visible et présente dans la fenêtre parente.</dd>
+ <dd>Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours afficher leur barre personnelle en positionnant<code>dom.disable_window_open_feature.directories</code> à <var>true</var> dans <kbd>about:config</kbd> ou dans leur <a class="external" href="http://www.mozilla.org/support/firefox/edit#user">fichier user.js</a>.</dd>
+ <dd>Reconnu par : , , , ,</dd>
+</dl>
+
+<dl>
+ <dt>personalbar </dt>
+ <dd>Similaire à <var>directories</var>, mais ne fonctionne que dans Netscape et les navigateurs basés sur Mozilla.</dd>
+ <dd>Reconnu par : , , ,</dd>
+</dl>
+
+<dl>
+ <dt>status </dt>
+ <dd>Si cette fonctionnalité est définie à <var>yes</var>, la nouvelle fenêtre secondaire disposera d'une barre d'état. Les utilisateurs peuvent forcer la présence de la barre d'état dans tous les navigateurs basés sur Mozilla, dans Internet Explorer 6 SP2 (<a href="#Note_sur_les_probl.C3.A8mes_de_s.C3.A9curit.C3.A9_li.C3.A9s_.C3.A0_la_pr.C3.A9sence_de_la_barre_d.27.C3.A9tat">Note sur la barre d'état avec XP SP2</a>) et dans Opera 6+. Les réglages par défaut des navigateurs récents basés sur Mozilla et Firefox 1.0 forcent la présence de la barre d'état.</dd>
+ <dd><a href="#Note_sur_la_barre_d.27.C3.A9tat">Note sur la barre d'état</a></dd>
+ <dd>Reconnu par : , , , ,</dd>
+</dl>
+
+<h4 id="Fonctionnalit.C3.A9s_relatives_.C3.A0_la_fen.C3.AAtre" name="Fonctionnalit.C3.A9s_relatives_.C3.A0_la_fen.C3.AAtre">Fonctionnalités relatives à la fenêtre</h4>
+
+<dl>
+ <dt>resizable </dt>
+ <dd>Si cette fonctionnalité est définie à <var>yes</var>, la nouvelle fenêtre secondaire sera redimensionnable.</dd>
+ <dd><strong>Note</strong> : à partir de la version 1.4, les navigateurs basés sur Mozilla ont une zone de redimensionnement à l'extrémité droite de la barre d'état. Cela permet de s'assurer que les utilisateurs peuvent toujours redimensionner la fenêtre même si l'auteur de la page Web a demandé que cette fenêtre secondaire ne soit pas redimensionnable. Dans ce cas, les icônes de maximisation/restauration dans la barre de titre de la fenêtre seront désactivées et les bordures de la fenêtre ne permettront pas de la redimensionner, mais celle-ci pourra toujours être redimensionnée via cette zone de la barre d'état.</dd>
+ <dd>Il est probable qu'à partir de Firefox 3, toutes les fenêtres secondaires seront redimensionnables ({{ Bug(177838) }})</dd>
+</dl>
+
+<div class="note">
+<p><strong>Astuce</strong> : pour des raisons d'accessibilité, il est vivement recommandé de toujours définir cette fonctionnalité à <var>yes</var>.</p>
+</div>
+
+<dl>
+ <dd>Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à être facilement redimensionnables en positionnant <code>dom.disable_window_open_feature.resizable</code> à <var>true</var> dans <kbd>about:config</kbd> ou dans leur <a class="external" href="http://www.mozilla.org/support/firefox/edit#user">fichier user.js</a>.</dd>
+ <dd>Reconnu par : , , , ,</dd>
+</dl>
+
+<dl>
+ <dt>scrollbars </dt>
+ <dd>Si cette fonctionnalité est définie à <var>yes</var>, la nouvelle fenêtre secondaire affichera des barres de défilement horizontales et/ou verticales si le document ne rentre pas dans la zone d'affichage de la fenêtre.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Astuce</strong> : pour des raisons d'accessibilité, il est vivement recommandé de toujours définir cette fonctionnalité à <var>yes</var>.</p>
+</div>
+
+<dl>
+ <dd>Les utilisateurs de Mozilla et Firefox peuvent obliger cette option à être toujours activée en positionnant <code>dom.disable_window_open_feature.scrollbars</code> à <var>true</var> dans <kbd>about:config</kbd> ou dans leur <a class="external" href="http://www.mozilla.org/support/firefox/edit#user">fichier user.js</a>.</dd>
+ <dd><a href="#Note_sur_les_barres_de_d.C3.A9filement">Note sur les barres de défilement</a></dd>
+ <dd>Reconnu par : , , , ,</dd>
+</dl>
+
+<dl>
+ <dt>dependent </dt>
+ <dd>Si définie à <var>yes</var>, la nouvelle fenêtre est dite dépendante de sa fenêtre parente. Une fenêtre dépendante se ferme lorsque sa fenêtre parente est fermée. Une fenêtre dépendante est réduite dans la barre des tâches uniquement lorsque sa fenêtre parente est réduite. Sur les plateformes Windows, une fenêtre dépendante n'est pas affichée sur la barre des tâches. Elle reste également en avant-plan de la fenêtre parente.</dd>
+ <dd>Les fenêtres dépendantes n'existent pas sous Mac OS X, cette option y sera ignorée.</dd>
+ <dd>La suppression complète de cette fonctionnalité sur toutes les plateformes est en cours de discussion ({{ Bug(214867) }})</dd>
+ <dd>Dans Internet Explorer 6, le plus proche équivalent à cette fonctionnalité est la méthode <code>showModelessDialog()</code>.</dd>
+ <dd>Reconnu par : , , ,</dd>
+</dl>
+
+<dl>
+ <dt>modal </dt>
+ <dd><strong>Note</strong> : à partir de Mozilla 1.2.1, cette fonctionnalité requiert le privilège <code>UniversalBrowserWrite</code> ({{ Bug(180048) }}). Sans ce privilège, elle est équivalente à <code>dependent</code>.</dd>
+ <dd>Si définie à <var>yes</var>, la nouvelle fenêtre est dite modale. L'utilisateur ne peut pas retourner à la fenêtre principale tant que la fenêtre modale n'est pas fermée. Une fenêtre modale typique est créée par la <a href="fr/DOM/window.alert">fonction alert()</a>.</dd>
+ <dd>Le comportement exact des fenêtres modales dépend de la plateforme et de la version de Mozilla.</dd>
+ <dd>L'équivalent de cette fonctionnalité dans Internet Explorer 6 est la méthode <code>showModalDialog()</code>.</dd>
+ <dd>Reconnu par : , , ,</dd>
+</dl>
+
+<dl>
+ <dt>dialog </dt>
+ <dd>La fonctionnalité <code>dialog</code> retire toutes les icônes (restaurer, réduire, agrandir) de la barre de titre de la fenêtre, laissant uniquement le bouton de fermeture. Mozilla 1.2+ et Netscape 7.1 afficheront les autres commandes du menu système (dans Firefox 1.0 et Netscape 7.0x, le menu de commandes système n'est pas associé avec l'icône de Firefox/Netscape 7.0x à l'extrémité gauche de la barre de titre, il s'agit probablement d'un bug. Il est possible d'accéder au menu de commandes système avec un clic droit sur la barre de titre). Les fenêtres de dialogue sont des fenêtres qui n'ont pas d'icône de commande système de réduction ni d'agrandissement/restauration dans la barre de titre, ni dans les choix correspondants du menu de commandes système. On les appelle dialogues car leur utilisation normale est uniquement de notifier une information et d'être ensuite immédiatement fermées. Sur les systèmes Mac, les fenêtres de dialogue ont une bordure différente et peuvent prendre la forme de<em>sheets</em> .</dd>
+ <dd>Reconnu par : , , ,</dd>
+</dl>
+
+<dl>
+ <dt>minimizable </dt>
+ <dd>Ce paramètre peut uniquement s'appliquer à des fenêtres de dialogue ; l'utilisation de « minimizable » nécessite <code>dialog=yes</code>. Si <code>minimizable</code> est défini à <var>yes</var>, le nouveau dialogue aura une commande système de réduction dans la barre de titre et il sera possible de le réduire dans la barre des tâches. Toute fenêtre n'étant pas un dialogue est toujours réductible, cette option y sera donc ignorée.</dd>
+ <dd>Reconnu par : , , ,</dd>
+</dl>
+
+<dl>
+ <dt>fullscreen </dt>
+ <dd>À ne pas utiliser. N'est pas reconnu par Mozilla, et il n'existe aucun plan prévoyant de le faire fonctionner dans Mozilla.</dd>
+ <dd>Ce paramètre ne fonctionne plus dans Internet Explorer 6 SP2 de la façon dont il le faisait dans Internet Explorer 5.x. La barre des tâches de Windows, ainsi que la barre de titre et la barre d'état de la fenêtre ne sont ni visibles, ni accessibles lorsque le mode plein écran est activé dans IE 5.x.</dd>
+ <dd><code>fullscreen</code> ennuie toujours les utilisateurs disposant d'un grand écran ou de plusieurs écrans. Obliger les autres utilisateurs à passer en plein écran avec <code>fullscreen</code> est également extrêmement impopulaire et est considéré comme une tentative impolie d'imposer les préférences d'affichage de l'auteur à l'utilisateur.</dd>
+ <dd><a href="#Note_sur_le_plein_.C3.A9cran_.28fullscreen.29">Note sur fullscreen</a></dd>
+ <dd>Reconnu par :</dd>
+ <dd><code>fullscreen</code> ne fonctionne plus vraiment dans Internet Explorer 6 SP2.</dd>
+</dl>
+
+<h4 id="Fonctionnalit.C3.A9s_n.C3.A9cessitant_des_privil.C3.A8ges" name="Fonctionnalit.C3.A9s_n.C3.A9cessitant_des_privil.C3.A8ges">Fonctionnalités nécessitant des privilèges</h4>
+
+<p>Les fonctionnalités suivantes nécessitent le privilège <code>UniversalBrowserWrite</code>, autrement elles seront ignorées. Les scripts chrome bénéficient de ce privilège automatiquement, les autres doivent le demander via le <a href="fr/PrivilegeManager">PrivilegeManager</a>.</p>
+
+<dl>
+ <dt>chrome </dt>
+ <dd><strong>Note</strong> : à partir de Mozilla 1.7/Firefox 0.9, cette fonctionnalité requiert le privilège <code>UniversalBrowserWrite</code> ({{ Bug(244965) }}). Sans ce privilège, elle est ignorée.</dd>
+ <dd>Si définie à <var>yes</var>, la page est chargée en tant qu'unique contenu de la fenêtre, sans aucun autre élément de l'interface de navigation. Il n'y aura pas de menu contextuel défini par défaut, et aucun des raccourcis clavier standard ne fonctionnera. La page est supposée fournir sa propre interface utilisateur, et cette fonctionnalité est habituellement utilisée pour ouvrir des documents XUL (les dialogues standard comme la console JavaScript sont ouverts de cette façon).</dd>
+ <dd>Reconnu par : , , ,</dd>
+</dl>
+
+<dl>
+ <dt>titlebar </dt>
+ <dd>Par défaut, toutes les nouvelles fenêtres secondaires ont une barre de titre. Si défini à <var>no</var>, ce paramètre enlève la barre de titre de la nouvelle fenêtre secondaire.</dd>
+ <dd>Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours avoir une barre de titre en positionnant<code>dom.disable_window_open_feature.titlebar</code> à <var>true</var> dans <kbd>about:config</kbd> ou dans leur <a class="external" href="http://www.mozilla.org/support/firefox/edit#user">fichier user.js</a>.</dd>
+ <dd>Reconnu par : , , ,</dd>
+</dl>
+
+<dl>
+ <dt>alwaysRaised </dt>
+ <dd>Si défini à <var>yes</var>, la nouvelle fenêtre sera toujours affichée par dessus les autres fenêtres du navigateur, qu'elle soit active ou non.</dd>
+ <dd>Reconnu par : , , ,</dd>
+</dl>
+
+<dl>
+ <dt>alwaysLowered </dt>
+ <dd>Si défini à <var>yes</var>, la nouvelle fenêtre créé flottera par dessous sa propre fenêtre parente tant que celle-ci n'est pas réduite. Les fenêtres utilisant alwaysLowered sont souvent appelées pop-under. Celles-ci ne peuvent pas passer au dessus de leur fenêtre parente, mais celle-ci peut être réduite. Dans Netscape 6.x, les fenêtres alwaysLowered n'ont pas de commande système de réduction ni de commande système restaurer/agrandir.</dd>
+ <dd>Reconnu par : , , ,</dd>
+</dl>
+
+<dl>
+ <dt>z-lock </dt>
+ <dd>Identique à <code>alwaysLowered</code>.</dd>
+</dl>
+
+<dl>
+ <dt>close </dt>
+ <dd>Lorsque défini à <var>no</var>, ce paramètre supprime l'icône système de fermeture de la fenêtre, et l'élément de menu correspondant. Il fonctionnera uniquement pour les fenêtres de dialogue (avec la fonctionnalité <code>dialog</code> activée). <code>close=no</code> a précédence sur <code>minimizable=yes</code>.</dd>
+ <dd>Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours avoir un bouton de fermeture en positionnant <code>dom.disable_window_open_feature.close</code> à <var>true</var> dans <kbd>about:config</kbd> ou dans leur <a class="external" href="http://www.mozilla.org/support/firefox/edit#user">fichier user.js</a>.</dd>
+ <dd>Reconnu par : , , ,</dd>
+</dl>
+
+<p>Les fonctionnalités de position et de taille nécessitent d'être accompagnées d'un nombre. Les fonctionnalités de barres d'outils et de fenêtre peuvent être accompagnées de <var>yes</var> (oui) ou <var>no</var> (non) ; il est également possible d'utiliser <var>1</var> à la place de <var>yes</var> et <var>0</var> à la place de <var>no</var>. Les fonctionnalités de barres d'outils et de fenêtre acceptent aussi une forme raccourcie : vous pouvez activer une fonctionnalité en listant simplement son nom dans la chaîne <var>strWindowFeatures</var>. Si vous fournissez le paramètre <var>strWindowFeatures</var>, les fonctionnalités <code>titlebar</code> et <code>close</code> sont toujours à <var>yes</var> par défaut, mais les autres fonctionnalités présentant un choix <var>yes</var>/<var>no</var> seront à <var>no</var> par défaut et seront donc désactivées.</p>
+
+<p>Exemple :</p>
+
+<pre>&lt;script type="text/javascript"&gt;
+var WindowObjectReference; // variable globale
+
+function openRequestedPopup() {
+  WindowObjectReference = window.open("http://www.nomdedomaine.ext/chemin/FichierImg.png",
+        "NomDeFenetreDescriptif",
+        "width=420,height=230,resizable,scrollbars=yes,status=1");
+}
+&lt;/script&gt;
+</pre>
+
+<p>Dans cet exemple, la fenêtre sera redimensionnable, elle affichera des barres de défilement si nécessaire (si le contenu dépasse les dimensions de fenêtre demandées) et affichera la barre d'état. Elle n'affichera pas la barre de menus ni la barre d'adresse. Comme l'auteur connaissait la taille de l'image (400 pixels de large et 200 pixels de haut), il a ajouté les marges appliquées à l'élément racine dans Internet Explorer 6, c'est-à-dire 15 pixels en haut, 15 pixels en bas, 10 pixels à gauche et 10 pixels à droite.</p>
+
+<h3 id="Bonnes_pratiques" name="Bonnes_pratiques">Bonnes pratiques</h3>
+
+<pre>&lt;script type="text/javascript"&gt;
+var WindowObjectReference = null; // variable globale
+
+function openFFPromotionPopup() {
+  if (WindowObjectReference == null || WindowObjectReference.closed) {
+    /* si le pointeur vers l'objet window n'existe pas, ou s'il existe
+       mais que la fenêtre a été fermée */
+    WindowObjectReference = window.open("http://www.spreadfirefox.com/",
+           "PromoteFirefoxWindowName", "resizable=yes,scrollbars=yes,status=yes");
+    /* alors, création du pointeur. La nouvelle fenêtre sera créée par dessus
+       toute autre fenêtre existante. */
+  }
+  else {
+    WindowObjectReference.focus();
+    /* sinon, la référence à la fenêtre existe et la fenêtre n'a pas été
+       fermée: la fenêtre est peut-être minimisée ou derrière la fenêtre
+       principale. Par conséquent, on peut l'amener par dessus les autres à
+       l'aide de la méthode focus(). Il n'est pas nécessaire de recréer la fenêtre
+       ou de recharger la ressource référencée. */
+  };
+}
+&lt;/script&gt;
+
+(...)
+
+&lt;p&gt;&lt;a href="http://www.spreadfirefox.com/" target="PromoteFirefoxWindowName" onclick="openFFPromotionPopup(); return false;" title="Ce lien créera une nouvelle fenêtre ou en réutilisera une déjà ouverte"&gt;Promouvoir
+l'adoption de Firefox&lt;/a&gt;&lt;/p&gt;
+</pre>
+
+<p>Le code ci-dessus résout un certain nombre de problèmes d'utilisabilité (<em>usability</em> ) relatif aux liens ouvrant des fenêtres secondaires. Le but du <code>return false</code> dans le code est d'annuler l'action par défaut du lien : si le gestionnaire d'évènements onclick est exécuté, il n'est pas nécessaire d'exécuter l'action par défaut du lien. Mais si JavaScript est désactivé ou non existant dans le navigateur de l'utilisateur, c'est l'évènement onclick qui est ignoré et le navigateur charge la ressource référencée dans le cadre ou la fenêtre portant le nom « PromoteFirefoxWindowName ». Si aucun cadre ni fenêtre ne porte ce nom, le navigateur créera une nouvelle fenêtre et l'appellera « PromoteFirefoxWindowName ».</p>
+
+<p>Plus d'informations sur l'utilisation de l'attribut target :</p>
+
+<p><a class="external" href="http://www.la-grange.net/w3c/html4.01/present/frames.html#h-16.3.2">HTML 4.01, section 16.3.2 La sémantique de cible</a></p>
+
+<p><a class="external" href="http://www.htmlhelp.com/fr/faq/html/links.html#new-window">Comment créer un lien qui ouvre une nouvelle fenêtre?</a></p>
+
+<p>Vous pouvez également paramétriser la fonction pour la rendre polyvalente, fonctionnelle dans plus de situations, et donc réutilisable dans d'autres scripts et pages Web :</p>
+
+<pre>&lt;script type="text/javascript"&gt;
+var WindowObjectReference = null; // variable globale
+
+function openRequestedPopup(strUrl, strWindowName) {
+  if(WindowObjectReference == null || WindowObjectReference.closed) {
+    WindowObjectReference = window.open(strUrl, strWindowName,
+           "resizable=yes,scrollbars=yes,status=yes");
+  }
+  else {
+    WindowObjectReference.focus();
+  };
+}
+&lt;/script&gt;
+(...)
+
+&lt;p&gt;&lt;a href="http://www.spreadfirefox.com/" target="PromoteFirefoxWindow" onclick="openRequestedPopup(this.href, this.target); return false;" title="Ce lien créera une nouvelle fenêtre ou en réutilisera une déjà ouverte"&gt;Promouvoir l'adoption de Firefox&lt;/a&gt;&lt;/p&gt;
+</pre>
+
+<p>Vous pouvez également ne permettre à cette fonction que d'ouvrir une seule fenêtre secondaire et de la réutiliser pour d'autres liens de cette manière :</p>
+
+<pre>&lt;script type="text/javascript"&gt;
+var WindowObjectReference = null; // variable globale
+var PreviousUrl; /* variable globale qui stockera l'URL actuellement
+                    chargée dans la fenêtre secondaire */
+
+function openRequestedSinglePopup(strUrl)
+{
+  if(WindowObjectReference == null || WindowObjectReference.closed)
+  {
+    WindowObjectReference = window.open(strUrl, "SingleSecondaryWindowName",
+           "resizable=yes,scrollbars=yes,status=yes");
+  }
+  else if(previousUrl != strUrl)
+  {
+    WindowObjectReference = window.open(strUrl, "SingleSecondaryWindowName",
+        "resizable=yes,scrollbars=yes,status=yes");
+    /* si la ressource à charger est différente, on la charge dans la fenêtre
+       secondaire déjà ouverte, et on ramène ensuite celle-ci par dessus
+       sa fenêtre parente. */
+    WindowObjectReference.focus();
+  }
+  else
+  {
+    WindowObjectReference.focus();
+  };
+  PreviousUrl = strUrl;
+  /* explication : on stocke l'URL courante afin de pouvoir la comparer
+     dans le cas d'un autre appel à cette fonction. */
+}
+&lt;/script&gt;
+
+(...)
+
+&lt;p&gt;&lt;a href="http://www.spreadfirefox.com/" target="SingleSecondaryWindowName"
+onclick="openRequestedSinglePopup(this.href); return false;"
+title="Ce lien créera une nouvelle fenêtre ou en réutilisera une déjà ouverte"&gt;Promouvoir
+l'adoption de Firefox&lt;/a&gt;&lt;/p&gt;
+&lt;p&gt;&lt;a href="http://www.mozilla.org/support/firefox/faq"
+target="SingleSecondaryWindowName"
+onclick="openRequestedSinglePopup(this.href); return false;"
+title="Ce lien créera une nouvelle fenêtre ou en réutilisera une déjà ouverte"&gt;FAQ
+de Firefox&lt;/a&gt;&lt;/p&gt;
+</pre>
+
+<h3 id="FAQ" name="FAQ">FAQ</h3>
+
+<dl>
+ <dt>Comment empêcher l'apparition du message de confirmation demandant à l'utilisateur s'il veut fermer la fenêtre ?</dt>
+ <dd>Vous ne pouvez pas. <strong>La règle est que les nouvelles fenêtres qui ne sont pas ouvertes par JavaScript ne peuvent pas être fermées par JavaScript.</strong> La console JavaScript dans les navigateurs basés sur Mozilla affichera le message d'avertissement suivant : <code>"Scripts may not close windows that were not opened by script."</code> Si c'était possible, l'historique des URL visitées durant la session de navigation serait perdu au détriment de l'utilisateur.</dd>
+ <dd><a href="fr/DOM/window.close">Plus de détails sur la méthode window.close()</a></dd>
+</dl>
+
+<dl>
+ <dt>Comment ramener la fenêtre si elle est réduite ou masquée par une autre fenêtre ?</dt>
+ <dd>Vérifiez d'abord l'existence de la référence à l'objet window, et si celle-ci existe et n'a pas été fermée, utilisez la méthode <a href="fr/DOM/window.focus">focus()</a>. Il n'y a pas d'autre manière fiable. Un <a href="#Bonnes_pratiques">exemple montrant comment utiliser la méthode focus()</a> est présenté ci-dessus.</dd>
+</dl>
+
+<dl>
+ <dt>Comment forcer une fenêtre à être agrandie/maximisée ?</dt>
+ <dd>Ce n'est pas possible. Tous les fabricants de navigateurs essaient de rendre l'ouverture d'une nouvelle fenêtre visible et remarquée par les utilisateurs, afin d'éviter de les désorienter.</dd>
+</dl>
+
+<dl>
+ <dt>Comment désactiver le redimensionnement des fenêtres ou supprimer les barres d'outils ?</dt>
+ <dd>Il n'est pas possible de l'imposer. Les utilisateurs de navigateurs basés sur Mozilla ont un contrôle absolu sur les fonctionnalités des fenêtres comme le fait de pouvoir les redimensionner, de les faire défiler et la présence de barres d'outils via les préférences utilisateur dans <code>about:config</code>. Comme vos utilisateurs sont ceux qui sont supposés utiliser de telles fenêtres (et non vous en tant qu'auteur), le mieux est d'éviter d'interférer avec leurs habitudes et préférences. Il est recommandé de toujours positionner la redimensionnabilité et la présence de barres de défilement (si nécessaire) à <code>yes</code> pour assurer l'accessibilité au contenu et l'utilisabilité des fenêtres. Ceci est dans l'intérêt tant de l'auteur Web que de ses utilisateurs.</dd>
+</dl>
+
+<dl>
+ <dt>Comment redimensionner une fenêtre en fonction de son contenu ?</dt>
+ <dd>Ce n'est pas faisable de manière fiable, car les utilisateurs peuvent empêcher la fenêtre d'être redimensionnée en décochant la case <code style="white-space: normal;">Édition/Préférences/Avancé/Scripts &amp; plugins/Autoriser les scripts à/ Déplacer ou redimensionner des fenêtres existantes</code> dans Mozilla ou <code style="white-space: normal;">Outils/Options/Contenu/Activer JavaScript/Bouton Avancé/Déplacer ou redimensionner des fenêtres existantes</code> dans Firefox, ou en positionnant <code>dom.disable_window_move_resize</code> à <var>true</var> dans <kbd>about:config</kbd> ou encore en éditant leur <a class="external" href="http://www.mozilla.org/support/firefox/edit#user">fichier user.js</a>.</dd>
+</dl>
+
+<dl>
+ <dd>En général, les utilisateurs désactivent le déplacement et le redimensionnement des fenêtres, étant donné qu'autoriser les scripts à le faire a été la source d'énormément d'abus dans le passé, et les rares scripts qui n'en abusent pas sont souvent incorrects dans leur manière de redimensionner la fenêtre. 99% de ces scripts désactivent le redimensionnement manuel des fenêtres et les barres de défilement alors qu'ils devraient en fait activer ces deux fonctionnalités pour permettre un mécanisme de récupération sain et circonspect dans le cas où leurs calculs s'avèreraient incorrects.</dd>
+</dl>
+
+<dl>
+ <dd>La méthode <a href="fr/DOM/window.sizeToContent">sizeToContent()</a> de l'objet window est également désactivée si l'utilisateur décoche la préférence <code>Déplacer ou redimensionner des fenêtres existantes</code>. Déplacer et redimensionner une fenêtre à distance sur l'écran de l'utilisateur l'ennuiera très souvent, le désorientera, et au mieux sera incorrect. Les auteurs Web espèrent souvent avoir un contrôle absolu (et un pouvoir de décision) sur tous les aspects de positionnement et de taille des fenêtres de l'utilisateur ... ce qui n'est tout simplement pas vrai.</dd>
+</dl>
+
+<dl>
+ <dt>Comment ouvrir une ressource référencée par un lien dans un nouvel onglet ? ou dans un onglet spécifique ?</dt>
+ <dd>Pour l'instant, ce n'est pas possible. Seul l'utilisateur peut modifier ses préférences avancées pour faire cela. <a class="external" href="http://kmeleon.sourceforge.net/">K-meleon 1.1</a>, un navigateur basé sur Mozilla, donne un contrôle et un pouvoir complet à l'utilisateur sur la manière dont les liens sont ouverts. Certaines extensions avancées donnent également à Mozilla et Firefox un grand pouvoir concernant la manière dont les ressources référencées sont chargées.</dd>
+</dl>
+
+<dl>
+ <dd>Dans quelques années, la <a class="external" href="http://www.w3.org/TR/2004/WD-css3-hyperlinks-20040224/#target0">propriété target du module CSS3 hyperlien</a> pourrait être implémentée (si le module CSS3 Hyperlink tel qu'il existe à présent est approuvé). Même si cela se fait et lorsque cela se produira, attendez-vous à ce que les développeurs de navigateurs utilisant des onglets donnent un pouvoir de veto à l'utilisateur et un contrôle total de la façon dont les liens peuvent ouvrir des pages Web. La façon d'ouvrir un lien devrait toujours être entièrement sous le contrôle de l'utilisateur.</dd>
+</dl>
+
+<dl>
+ <dt>Comment savoir si une fenêtre que j'ai ouverte l'est toujours ?</dt>
+ <dd>Vous pouvez tester l'existence de la référence à l'objet window, qui est la valeur renvoyée en cas de succès de l'appel à window.open(), et vérifier ensuite que la valeur renvoyée par <var>WindowObjectReference</var>.closed est bien <var>false</var>.</dd>
+</dl>
+
+<dl>
+ <dt>Comment savoir si ma fenêtre a été bloquée par un bloqueur de popups ?</dt>
+ <dd>Avec les bloqueurs de popups intégrés dans Mozilla/Firefox et Internet Explorer 6 SP2, il est possible de vérifier la valeur renvoyée par <code>window.open()</code> : elle sera <var>null</var> si la fenêtre n'a pas été autorisée à s'ouvrir. Cependant, pour la plupart des autres bloqueurs de popups, il n'existe pas de manière fiable.</dd>
+</dl>
+
+<dl>
+ <dt>Quelle est la relation JavaScript entre la fenêtre principale et la fenêtre secondaire ?</dt>
+ <dd>La valeur renvoyée par la méthode window.open() est la propriété <a href="fr/DOM/window.opener">opener</a>. La variable <var>WindowObjectReference</var> lie la fenêtre principale (opener) à la fenêtre secondaire qu'elle a ouverte, tandis que le mot-clé <code>opener</code> liera la fenêtre secondaire à sa fenêtre principale (celle qui a déclenché son ouverture).</dd>
+</dl>
+
+<dl>
+ <dt>Je n'arrive pas à accéder aux propriétés de la nouvelle fenêtre secondaire. J'obtiens toujours une erreur dans la console JavaScript disant « Erreur <span class="nowiki">:</span> uncaught exception<span class="nowiki">:</span> Permission denied to get property &lt;property_name or method_name&gt; ». Pourquoi cela ?</dt>
+ <dd>Ceci est causé par la restriction de sécurité des scripts entre domaines (aussi appelée<em>Same Origin Policy</em> , « Politique de même origine »). Un script chargé dans une fenêtre (ou cadre) d'une origine donnée (nom de domaine) <strong>ne peut pas obtenir ou modifier</strong> des propriétés d'une autre fenêtre (ou cadre) ou les propriétés d'aucun de ses objets HTML si celle-ci provient d'une autre origine distincte (nom de domaine). C'est pourquoi, avant d'exécuter un script se référant à une fenêtre secondaire depuis la fenêtre principale, le navigateur vérifiera que la fenêtre secondaire possède le même nom de domaine.</dd>
+ <dd>Plus d'informations à propos de la restriction de sécurité des scripts entre domaines : <a class="external" href="http://www.mozilla.org/projects/security/components/same-origin.html" rel="freelink">http://www.mozilla.org/projects/secu...me-origin.html</a></dd>
+</dl>
+
+<h3 id="Probl.C3.A8mes_d.27utilisabilit.C3.A9" name="Probl.C3.A8mes_d.27utilisabilit.C3.A9">Problèmes d'utilisabilité</h3>
+
+<h4 id=".C3.89vitez_de_recourir_.C3.A0_window.open.28.29" name=".C3.89vitez_de_recourir_.C3.A0_window.open.28.29">Évitez de recourir à <code>window.open()</code></h4>
+
+<p>De manière générale, il est préférable d'éviter d'utiliser window.open() pour plusieurs raisons :</p>
+
+<ul>
+ <li>Tous les navigateurs basés sur Mozilla offrent la navigation par onglets, et il s'agit du mode préféré pour ouvrir des ressources référencées… pas seulement dans le cas des navigateurs basés sur Mozilla, mais dans tous les autres navigateurs offrant la navigation par onglets. En d'autres mots, les utilisateurs de navigateurs utilisant des onglets préfèrent ouvrir des onglets que des fenêtres dans la plupart des situations. Ce type de navigateur gagne rapidement en popularité depuis plusieurs années et cette tendance ne semble pas près de s'arrêter. La version 7 d'Internet Explorer sortie en octobre 2006 propose également la navigation par onglets.</li>
+</ul>
+
+<ul>
+ <li>Il existe à présent <a class="link-https" href="https://addons.update.mozilla.org/extensions/showlist.php?application=mozilla&amp;category=Tabbed+Browsing&amp;numpg=50&amp;os=windows&amp;version=auto-detect&amp;submit=Update">plusieurs extensions à Mozilla</a> (comme Multizilla) et <a class="link-https" href="https://addons.update.mozilla.org/extensions/showlist.php?application=firefox&amp;version=1.0+&amp;os=Windows&amp;category=Tabbed%20Browsing">à Firefox</a> (comme <a class="link-https" href="https://addons.update.mozilla.org/extensions/moreinfo.php?application=firefox&amp;version=1.0%20&amp;os=Windows&amp;category=Tabbed%20Browsing&amp;numpg=10&amp;id=158">Tabbrowser preferences</a>), fonctionnalités et préférences avancées basées sur la navigation par onglets, sur la conversion des appels à window.open() en ouvertures d'onglets, et sur la neutralisation des appels à window.open(). En particulier, afin de neutraliser l'ouverture de nouvelles fenêtres non demandées (souvent présentés comme bloquant les fenêtre popups non sollicitées ou les ouvertures automatiques de fenêtres par des scripts). Parmi ces fonctionnalités qu'on peut retrouver dans des extensions, il y a l'ouverture d'un lien dans une nouvelle fenêtre ou non, dans la même fenêtre, dans un nouvel onglet ou non, en arrière-plan ou non. Coder sans réfléchir pour ouvrir de nouvelles fenêtres n'est plus assuré de succès, ne pourra pas se faire par la force, et dans le cas où l'auteur Web y parvient, ne fera qu'ennuyer la majorité des utilisateurs.</li>
+</ul>
+
+<ul>
+ <li>Les nouvelles fenêtres peuvent avoir leur barre de menu, leurs barres de défilement, leur barre d'état, leur redimensionnabilité etc. désactivées. Ceci n'est pas possible avec de nouveaux onglets. Par conséquent, de nombreux utilisateurs préfèrent utiliser des onglets étant donné que l'interface de leur navigateur est laissée intacte et reste stable.</li>
+</ul>
+
+<ul>
+ <li>L'ouverture de nouvelles fenêtres, même avec leurs fonctionnalités réduites, utilise des ressources système considérables sur l'ordinateur de l'utilisateur (processeur, mémoire RAM) et met en jeu une grande quantité de code à exécuter (gestion de la sécurité, de la mémoire, diverses options de code parfois assez complexes, la construction du cadre de la fenêtre, des barres d'outils de la fenêtre, son positionnement et sa taille, etc.). L'ouverture de nouveaux onglets demande nettement moins de ressources système et est plus rapide à exécuter que d'ouvrir de nouvelles fenêtres.</li>
+</ul>
+
+<h4 id="Offrez_d.27ouvrir_un_lien_dans_une_nouvelle_fen.C3.AAtre.2C_en_suivant_ces_recommandations" name="Offrez_d.27ouvrir_un_lien_dans_une_nouvelle_fen.C3.AAtre.2C_en_suivant_ces_recommandations">Offrez d'ouvrir un lien dans une nouvelle fenêtre, en suivant ces recommandations</h4>
+
+<p>Si vous voulez permettre l'ouverture d'un lien dans une nouvelle fenêtre, suivez ces règles d'utilisabilité et d'accessibilité testées et éprouvées :</p>
+
+<h5 id="N.27utilisez_jamais_ce_format_de_code_pour_les_liens_.3Ca_href.3D.22javascriptwindow.open.28....29.22_....3E" name="N.27utilisez_jamais_ce_format_de_code_pour_les_liens_:.3Ca_href.3D.22javascript:window.open.28....29.22_....3E">N'utilisez <em>jamais</em> ce format de code pour les liens :<br>
+ <code>&lt;a href="javascript:window.open(...)" ...&gt;</code></h5>
+
+<p>Les liens « javascript: » sont toujours mauvais pour l'accessibilité et l'utilisabilité des pages Web dans tous les navigateurs.</p>
+
+<ul>
+ <li>Les pseudo-liens « javascript:» ne fonctionnent plus du tout lorsque la gestion de JavaScript est désactivée ou inexistante. Certaines sociétés n'autorisent leurs employés à utiliser le Web que suivant des politiques de sécurité très strictes : JavaScript désactivé, pas de Java, pas d'ActiveX, pas de Flash. Pour diverses raisons (sécurité, accès public, navigateurs texte, etc.), environ 5% à 10% des utilisateurs naviguent sur le Web avec JavaScript désactivé.</li>
+ <li>Les liens « javascript: » interfèrent avec les fonctionnalités avancées de la navigation par onglets : entre autres, le clic du milieu sur des liens, le raccourci Ctrl+clic sur un lien, les fonctions de certaines extensions, etc.</li>
+ <li>Les liens « javascript: » interfèrent avec le processus d'indexation des pages Web par les moteurs de recherche.</li>
+ <li>Les liens « javascript: » interfèrent avec les technologies d'assistance (par exemple les lecteurs vocaux) et diverses applications utilisant le Web (par exemple les <abbr title="Personal Digital Assistant (assistant personnel numérique)">PDA</abbr> ou les navigateurs pour mobiles).</li>
+ <li>Les liens « javascript: » interfèrent également avec les fonctionnalités de « mouse gestures » proposées par certains navigateurs.</li>
+ <li>Le schéma de protocole « javascript: » sera rapporté comme une erreur par les validateurs et vérificateurs de liens.</li>
+</ul>
+
+<p><strong>Plus d'informations à ce sujet :</strong></p>
+
+<ul>
+ <li><a class="external" href="http://www.useit.com/alertbox/20021223.html">Top Ten Web-Design Mistakes of 2002</a>, 6. JavaScript in Links, Jakob Nielsen, Décembre 2002</li>
+ <li><a class="external" href="http://www.evolt.org/article/Links_and_JavaScript_Living_Together_in_Harmony/17/20938/">Links &amp; JavaScript Living Together in Harmony</a>, Jeff Howden, Février 2002</li>
+ <li><a class="external" href="http://jibbering.com/faq/#FAQ4_24">FAQ de la discussion dans le newsgroup comp.lang.javascript sur les liens "javascript:"</a></li>
+</ul>
+
+<h5 id="N.27utilisez_jamais_.3Ca_href.3D.22.23.22_onclick.3D.22window.open.28....29.3B.22.3E" name="N.27utilisez_jamais_.3Ca_href.3D.22.23.22_onclick.3D.22window.open.28....29.3B.22.3E">N'utilisez jamais <code>&lt;a href="#" onclick="window.open(...);"&gt;</code></h5>
+
+<p>Un tel pseudo-lien met également en péril l'accessibilité des liens. <strong>Utilisez toujours une véritable URL pour la valeur de l'attribut href</strong>, afin que si JavaScript s'avère désactivé ou absent, ou si le navigateur ne peut pas ouvrir de fenêtre secondaire (comme Microsoft Web TV, les navigateurs en mode texte, etc.), de tels navigateurs pourront toujours charger la référence référencée dans leur mode de chargement/gestion de nouvelles ressources par défaut. Cette forme de code interfère également avec les fonctionnalités avancées de navigation par onglets de certains navigateurs, comme le clic du milieu et les raccourcis Ctrl+clic et Ctrl+Entrée sur les liens, les « mouse gestures », etc.</p>
+
+<h5 id="Identifiez_toujours_les_liens_qui_cr.C3.A9eront_.28ou_r.C3.A9utiliseront.29_une_nouvelle_fen.C3.AAtre_secondaire" name="Identifiez_toujours_les_liens_qui_cr.C3.A9eront_.28ou_r.C3.A9utiliseront.29_une_nouvelle_fen.C3.AAtre_secondaire">Identifiez toujours les liens qui créeront (ou réutiliseront) une nouvelle fenêtre secondaire</h5>
+
+<p>Identifiez les liens qui ouvriront de nouvelles fenêtre de manière à aider les utilisateurs en utilisant l'attribut <code>title</code> du lien, en ajoutant une icône à la fin du lien, ou en modifiant le curseur de la souris.</p>
+
+<p>Le but est d'avertir les utilisateurs à l'avance des changements de contexte pour réduire la confusion de leur part : changer la fenêtre courante ou afficher subitement une nouvelle fenêtre peut être très désorientant pour certains utilisateurs (le bouton Précédent devient inutilisable).</p>
+
+<blockquote>
+<p>« Souvent, les utilisateurs ne remarquent pas qu'une nouvelle fenêtre s'est ouverte, particulièrement si ils utilisent un petit écran où les fenêtres sont agrandies pour utiliser toute la surface de l'écran. Ainsi, l'utilisateur voulant retourner à la page initiale sera dérouté par un bouton<em>Précédente</em> grisé. »<br>
+ citation de <a class="external" href="http://www.useit.com/alertbox/990530.html">The Top Ten<em>New</em> Mistakes of Web Design</a>: 2. Opening New Browser Windows, Jakob Nielsen, mai 1999</p>
+</blockquote>
+
+<p>Lorsque des changements complets de contexte sont identifiés explicitement avant qu'ils se produisent, l'utilisateur peut déterminer s'il désire le faire ou s'y préparer : non seulement il ne sera pas perturbé ni désorienté, mais des utilisateurs plus expérimentés pourront eux-mêmes décider comment ouvrir de tels liens (dans une nouvelle fenêtre ou non, dans la même fenêtre, dans un nouvel onglet ou non, en arrière-plan ou non).</p>
+
+<p><strong>Références</strong></p>
+
+<ul>
+ <li>« Si votre lien crée une nouvelle fenêtre, ou fait apparaitre d'autres fenêtres sur votre affichage, ou déplace le focus du système vers un autre cadre ou une autre fenêtre, alors la chose sympathique à faire est d'indiquer à l'utilisateur que quelque chose de ce genre va se produire. » <a class="external" href="http://www.w3.org/WAI/wcag-curric/sam77-0.htm">World Wide Web Consortium Accessibility Initiative regarding popups</a></li>
+ <li>« Utilisez les titres de liens pour donner aux utilisateurs un aperçu d'où chaque lien les emmènera, avant qu'ils aient cliqué dessus. » <a class="external" href="http://www.useit.com/alertbox/991003.html">Ten Good Deeds in Web Design</a>, Jakob Nielsen, octobre 1999</li>
+ <li><a class="external" href="http://www.useit.com/alertbox/980111.html">Using Link Titles to Help Users Predict Where They Are Going</a>, Jakob Nielsen, janvier 1998</li>
+</ul>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header" colspan="4">Exemples de curseurs et icônes « Nouvelle fenêtre »</td>
+  </tr>
+  <tr>
+   <td style="width: 25%;"></td>
+   <td style="width: 25%;"></td>
+   <td style="width: 25%;"></td>
+   <td style="width: 25%;"></td>
+  </tr>
+  <tr>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td colspan="2"></td>
+   <td colspan="2"></td>
+  </tr>
+ </tbody>
+</table>
+
+<h5 id="Utilisez_toujours_l.27attribut_target" name="Utilisez_toujours_l.27attribut_target">Utilisez toujours l'attribut target</h5>
+
+<p>Si JavaScript est désactivé ou absent, le navigateur créera une fenêtre secondaire ou affichera la ressource demandée selon sa gestion habituelle de l'attribut target : par exemple certains navigateurs ne pouvant pas créer de nouvelles fenêtres comme Microsoft Web TV, chargeront la ressource demandée et l'ajouteront à la fin du document courant. Le but et l'idée est d'essayer de fournir — <strong>sans l'imposer</strong> — à l'utilisateur une manière d'ouvrir la ressource référencée, de suivre le lien. Votre code ne doit pas interférer avec les fonctionnalités du navigateur à disposition de l'utilisateur, et doit toujours lui laisser le chemin libre et le choix de la décision finale.</p>
+
+<h5 id="N.27utilisez_pas_target.3D.22_blank.22" name="N.27utilisez_pas_target.3D.22_blank.22">N'utilisez pas <code>target="_blank"</code></h5>
+
+<p>Fournissez toujours un nom significatif dans votre attribut target, et essayez de le réutiliser dans votre page afin qu'un clic sur un autre lien puisse charger la ressource dans une fenêtre déjà utilisée (ce qui rend l'opération beaucoup plus rapide pour l'utilisateur), ce qui justifie la raison (et les ressources système, et le temps dépensé) d'avoir créé une fenêtre secondaire. Utiliser une seule cible et la réutiliser pour plusieurs liens est bien moins gourmand en matière de ressources puisqu'une seule fenêtre est créée et recyclée. D'un autre côté, utiliser « _blank » comme attribut target créera plusieurs nouvelles fenêtre anonymes sur le bureau de l'utilisateur qui ne peuvent ni être recyclées ni réutilisées.</p>
+
+<p>Dans tous les cas, si votre code est bien fait, il ne devrait pas interférer avec le choix final de l'utilisateur mais lui offrira plutôt des choix supplémentaires, plus de façons d'ouvrir les liens et plus de pouvoir sur l'outil qu'il utilise (son navigateur).</p>
+
+<h3 id="Glossaire" name="Glossaire">Glossaire</h3>
+
+<dl>
+ <dt>Fenêtre ouvrante, opener, fenêtre parente, fenêtre principale, première fenêtre </dt>
+ <dd>Termes souvent utilisés pour décrire ou identifier la même fenêtre. Il s'agit de la fenêtre depuis laquelle une nouvelle fenêtre sera créée. C'est la fenêtre dans laquelle l'utilisateur clique sur un lien qui mène à la création d'une autre, nouvelle fenêtre.</dd>
+</dl>
+
+<dl>
+ <dt>Sous-fenêtre, fenêtre enfant, fenêtre secondaire, deuxième fenêtre </dt>
+ <dd>Termes souvent utilisés pour décrire ou identifier la même fenêtre. C'est la nouvelle fenêtre qui a été créée.</dd>
+</dl>
+
+<dl>
+ <dt>Fenêtres popup non sollicitées </dt>
+ <dd>Ouverture automatique de fenêtres initiée par un script sans le consentement de l'utilisateur.</dd>
+</dl>
+
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+
+<p>{{ DOM0() }} <code>window.open()</code> ne fait partie d'aucune spécification ou recommandation technique du <abbr title="World Wide Web Consortium">W3C</abbr>.</p>
+
+<h3 id="Notes" name="Notes">Notes</h3>
+
+<h4 id="Note_sur_les_priorit.C3.A9s" name="Note_sur_les_priorit.C3.A9s">Note sur les priorités</h4>
+
+<p>Dans les cas où <code>left</code> et <code>screenX</code> (et/ou <code>top</code> et <code>screenY</code>) ont des valeurs contradictoires, <code>left</code> et <code>top</code> ont priorité sur <code>screenX</code> et <code>screenY</code> respectivement. Si <code>left</code> et <code>screenX</code> (et/ou <code>top</code> et <code>screenY</code>) sont définies dans la liste <var>strWindowFeatures</var>, les valeurs <code>left</code> (et/ou <code>top</code>) seront reconnues et utilisées. Dans l'exemple suivant, la nouvelle fenêtre sera positionnée à 100 pixels du bord gauche de la zone de travail des applications du système d'exploitation de l'utilisateur, et non à 200 pixels.</p>
+
+<pre>&lt;script type="text/javascript"&gt;
+WindowObjectReference = window.open("http://www.lemonde.fr/",
+           "NomDeLaFenetreLeMonde",
+           "left=100,screenX=200,resizable,scrollbars,status");
+&lt;/script&gt;
+</pre>
+
+<p>Si <code>left</code> est défini, mais que <code>top</code> n'a aucune valeur mais que <code>screenY</code> en a une, <code>left</code> et <code>screenY</code> seront les coordonnées de positionnement de la fenêtre secondaire.</p>
+
+<p><code>outerWidth</code> a priorité sur <code>width</code>, et <code>width</code> a priorité sur <code>innerWidth</code>. <code>outerHeight</code> a priorité sur <code>height</code> et <code>height</code> a priorité sur <code>innerHeight</code>. Dans l'exemple suivant, les navigateurs basés sur Mozilla créeront une nouvelle fenêtre avec une taille extérieure (outerWidth) de 600 pixels de large et ignoreront la requête d'une largeur (width) de 500 pixels ainsi que celle d'une taille intérieure (innerWidth) de 400 pixels.</p>
+
+<pre>&lt;script type="text/javascript"&gt;
+WindowObjectReference = window.open("http://www.wwf.org/",
+           "NomDeLaFenetreWWF",
+           "outerWidth=600,width=500,innerWidth=400,resizable,scrollbars,status");
+&lt;/script&gt;
+</pre>
+
+<h4 id="Note_sur_les_corrections_d.27erreurs_de_position_et_de_dimension" name="Note_sur_les_corrections_d.27erreurs_de_position_et_de_dimension">Note sur les corrections d'erreurs de position et de dimension</h4>
+
+<p>Les positions et dimensions demandées dans la liste <var>strWindowFeatures</var> ne seront pas respectées et <strong>seront corrigées</strong> si n'importe laquelle de ces valeurs ne permet pas à la fenêtre complète d'être affichée dans la zone de travail des applications du système d'exploitation de l'utilisateur. <strong>Aucune partie de la nouvelle fenêtre ne peut être initialement positionnée hors de l'écran. Ceci est le réglage par défaut de tous les navigateurs basés sur Mozilla.</strong></p>
+
+<p><a class="external" href="http://msdn.microsoft.com/security/productinfo/xpsp2/default.aspx?pull=/library/en-us/dnwxp/html/xpsp2web.asp#xpsp_topic5">Internet Explorer 6 SP2 dispose d'un mécanisme de correction d'erreur similaire</a>, mais celui-ci n'est pas activé par défaut pour tous les niveaux de sécurité : un niveau de sécurité trop bas peut désactiver ce mécanisme de correction d'erreurs.</p>
+
+<h4 id="Note_sur_les_barres_de_d.C3.A9filement" name="Note_sur_les_barres_de_d.C3.A9filement">Note sur les barres de défilement</h4>
+
+<p>Lorsque le contenu dépasse les dimensions de la zone de visualisation de la fenêtre, des barres de défilement (ou un mécanisme de définement similaire) sont nécessaires pour s'assurer que les utilisateurs puissent accéder au contenu. Le contenu ou la boîte du document d'une page web peut outrepasser, excéder les dimensions demandées pour la fenêtre pour plusieurs raisons qui sont hors du contrôle des auteurs Web :</p>
+
+<ul>
+ <li>l'utilisateur a redimensionné la fenêtre</li>
+ <li>l'utilisateur a augmenté la taille de police du texte via le menu Affichage/Taille du texte (%) dans Mozilla ou Affichage/Taille du texte/Plus grande ou Plus petite dans Firefox</li>
+ <li>l'utilisateur a défini une taille minimale de police pour les pages qui est plus grande que celle demandée par l'auteur. Les personnes de plus de 40 ans ou ayant des habitudes particulières de lecture choisissent souvent une taille minimale de police dans les navigateurs basés sur Mozilla.</li>
+ <li>l'auteur n'est pas conscient des marges par défaut (et/ou bordures et/ou padding) appliquées à l'élément racine ou nœud <code>body</code> dans les différents navigateurs et versions de ceux-ci</li>
+ <li>l'utilisateur utilise une feuille de style utilisateur (<a class="external" href="http://www.mozilla.org/support/firefox/edit#content">userContent.css in Mozilla-based browsers</a>) pour ses habitudes de navigation qui modifie les dimensions habituelles pour ses habitudes de lecture (marges, padding, taille de police par défaut)</li>
+ <li>l'utilisateur peut personnaliser individuellement la taille (hauteur ou largeur) de la plupart des barres d'outils via son système d'exploitation. Par exemple les bordures de fenêtres, la hauteur de la barre de titre, des menus et des barres de défilement, ainsi que la taille du texte sont entièrement personnalisables par l'utilisateur dans le système d'exploitation Windows XP. Ces dimensions de barres d'outils peuvent également être changées par des thèmes du navigateur, ou du système d'exploitation</li>
+ <li>l'auteur ne s'attend pas à ce que la fenêtre de l'utilisateur dispose de barres d'outils spécifiques supplémentaires ; comme des barres de préférences, la barre web developer, des barres d'accessibilité, de blocage de popups et de recherche, etc.</li>
+ <li>l'utilisateur utilise des technologies assistives ou addons qui modifient la zone de travail des applications, par exemple Microsoft Magnifier</li>
+ <li>l'utilisateur repositionne et/ou redimensionne directement la zone de travail des apllications : par exemple il redimensionne la barre des tâches de Windows, la place sur le côté gauche de l'écran (versions en langues arabes) ou sur la droite (versions en hébreu), l'utilisateur a une barre de lancement rapide Microsoft Office, etc.</li>
+ <li>certains systèmes d'exploitation (Mac OS X) forcent la présence de barres d'outils qui peuvent démentir les anticipations et calculs de l'auteur Web sur les dimensions effectives de la fenêtre de navigation</li>
+</ul>
+
+<h4 id="Note_sur_la_barre_d.27.C3.A9tat" name="Note_sur_la_barre_d.27.C3.A9tat">Note sur la barre d'état</h4>
+
+<p>Vous devez vous attendre à ce qu'une large majorité des navigateurs affichent la barre d'état, ou qu'une large majorité des utilisateurs voudront forcer sa présence : le mieux est de toujours positionner cette fonctionnalité à yes. De plus, si vous demandez spécifiquement de retirer la barre d'état, les utilisateurs de Firefox ne pourront plus utilser la barre de navigation de site si elle est installée. Dans Mozilla et dans Firefox, toutes les fenêtres peuvent être redimensionnées à partir de la zone inférieure droite de la barre d'état. Celle-ci fournit également des informations sur la connexion http, l'emplacement des ressources hypertextes, la barre de progression du téléchargement, l'icône de chiffrement/connexion sécurisée avec <abbr title="Secure Socket Layer">SSL</abbr> (affichant une icône de cadenas jaune), des icônes de zones de sécurité, de politique de sécurité en matière de cookies, etc. <strong>Enlever la barre d'état retire souvent de très nombreuses fonctionnalités et informations considérées comme utiles (et parfois vitales) par les utilisateurs.</strong></p>
+
+<h4 id="Note_sur_les_probl.C3.A8mes_de_s.C3.A9curit.C3.A9_li.C3.A9s_.C3.A0_la_pr.C3.A9sence_de_la_barre_d.27.C3.A9tat" name="Note_sur_les_probl.C3.A8mes_de_s.C3.A9curit.C3.A9_li.C3.A9s_.C3.A0_la_pr.C3.A9sence_de_la_barre_d.27.C3.A9tat">Note sur les problèmes de sécurité liés à la présence de la barre d'état</h4>
+
+<p>Dans Internet Explorer 6 pour XP SP2, pour les fenêtres ouvertes à l'aide de window.open() :</p>
+
+<blockquote>
+<p>« Pour les fenêtres ouvertes à l'aide de window.open() :<br>
+ Attendez-vous à ce que la barre d'état soit présente, et codez en conséquence. <strong>La barre d'état sera activée par défaut</strong> et fait entre 20 et 25 pixels de haut. (...) »<br>
+ citation de <a class="external" href="http://msdn.microsoft.com/security/productinfo/xpsp2/default.aspx?pull=/library/en-us/dnwxp/html/xpsp2web.asp#xpsp_topic5">Fine-Tune Your Web Site for Windows XP Service Pack 2, Browser Window Restrictions in XP SP2</a></p>
+</blockquote>
+
+<blockquote>
+<p>« (...) les fenêtres créées à l'aide de la méthode window.open() peuvent être appelées par des scripts et utilisées pour imiter une fausse interface utilisateur ou bureau, ou pour masquer des informations ou des activités malveillantes en dimensionnant la fenêtre de manière à rendre la barre d'état invisible.<br>
+ Les fenêtres d'Internet Explorer fournissent des informations de sécurité visibles par l'utilisateur pour l'aider à identifier avec certitude la source de la page et le niveau de sécurité de la communication avec cette page. Lorsque ces éléments ne sont pas visibles, les utilisateurs peuvent penser qu'ils sont sur une page plus digne de confiance ou interagissent avec un processus système alors qu'il sont en train d'interagir avec un hôte malveillant. (...)<br>
+ <strong>Les fenêtres lancées par des scripts seront affichées entièrement, avec la barre de titre d'Internet Explorer et sa barre d'état.</strong> (...)<br>
+ Gestion de la barre d'état d'Internet Explorer par les scripts<br>
+ Description détaillée<br>
+ <strong>Internet Explorer a été modifié pour ne désactiver la barre d'état pour aucune fenêtre. La barre d'état est toujours visible pour toutes les fenêtres d'Internet Explorer.</strong> (...) Sans ce changement, les fenêtres créées à l'aide de la méthode window.open() peuvent être appelées par des scripts et imiter une fausse interface utilisateur ou bureau, ou pour masquer des informations importantes pour l'utilisateur.<br>
+ La barre d'état est une fonction de sécurité des fenêtres d'Internet Explorer qui fournissent à l'utilisateur des informations sur les zones de sécurité. Cette zone ne peut pas être imitée (...)"<br>
+ citation de <a class="external" href="http://www.microsoft.com/technet/prodtechnol/winxppro/maintain/sp2brows.mspx#ECAA">Changes to Functionality in Microsoft Windows XP Service Pack 2, Internet Explorer Window Restrictions</a></p>
+</blockquote>
+
+<h4 id="Note_sur_le_plein_.C3.A9cran_.28fullscreen.29" name="Note_sur_le_plein_.C3.A9cran_.28fullscreen.29">Note sur le plein écran (fullscreen)</h4>
+
+<p>Dans Internet Explorer 6 pour XP SP2 :</p>
+
+<ul>
+ <li>« window.open() avec fullscreen=yes donnera à présent une fenêtre maximisée, et non une fenêtre en mode kiosque. »</li>
+</ul>
+
+<ul>
+ <li>« La définition de la spécification de fullscreen=yes est modifiée pour signifier "afficher la fenêtre maximisée," ce qui gardera la barre de titre, la barre d'adresse et la barre d'état visibles. »</li>
+</ul>
+
+<p><em>Références :</em></p>
+
+<ul>
+ <li><a class="external" href="http://msdn.microsoft.com/security/productinfo/xpsp2/default.aspx?pull=/library/en-us/dnwxp/html/xpsp2web.asp#xpsp_topic5">Fine-Tune Your Web Site for Windows XP Service Pack 2</a></li>
+</ul>
+
+<ul>
+ <li><a class="external" href="http://www.microsoft.com/technet/prodtechnol/winxppro/maintain/sp2brows.mspx#ECAA">Changes to Functionality in Microsoft Windows XP Service Pack 2, Script sizing of Internet Explorer windows</a></li>
+</ul>
+
+<h4 id="Note_sur_la_diff.C3.A9rence_entre_outerHeight_et_height" name="Note_sur_la_diff.C3.A9rence_entre_outerHeight_et_height">Note sur la différence entre outerHeight et height</h4>
+
+
+
+<h3 id="Tutoriels" name="Tutoriels">Tutoriels</h3>
+
+<p><strong>en français :</strong></p>
+
+<p><a class="external" href="http://openweb.eu.org/articles/popup/">Créer des pop-up intelligentes</a> par Fabrice Bonny, OpenWeb</p>
+
+<p><strong>en anglais :</strong></p>
+
+<p><a class="external" href="http://www.infimum.dk/HTML/JSwindows.html">JavaScript windows (tutorial)</a> par Lasse Reichstein Nielsen</p>
+
+<p><a class="external" href="http://www.accessify.com/tutorials/the-perfect-pop-up.asp">The perfect pop-up (tutorial)</a> par Ian Lloyd</p>
+
+<p><a class="external" href="http://www.gtalbot.org/FirefoxSection/Popup/PopupAndFirefox.html">Popup windows and Firefox (interactive demos)</a> par Gérard Talbot</p>
+
+<h3 id="R.C3.A9f.C3.A9rences" name="R.C3.A9f.C3.A9rences">Références</h3>
+
+<p><a class="external" href="http://www.cs.tut.fi/~jkorpela/www/links.html">Links Want To Be Links</a> by Jukka K. Korpela</p>
+
+<p><a class="external" href="http://www.evolt.org/article/Links_and_JavaScript_Living_Together_in_Harmony/17/20938/">Links &amp; JavaScript Living Together in Harmony</a> by Jeff Howden</p>
+
+
+
+<div class="noinclude"></div>
+
+<p>{{ languages( { "en": "en/DOM/window.open", "ja": "ja/DOM/window.open", "pl": "pl/DOM/window.open", "zh-cn": "cn/DOM/window.open" } ) }}</p>
diff --git a/files/fr/web/api/window/opendialog/index.html b/files/fr/web/api/window/opendialog/index.html
new file mode 100644
index 0000000000..1c366c5355
--- /dev/null
+++ b/files/fr/web/api/window/opendialog/index.html
@@ -0,0 +1,111 @@
+---
+title: window.openDialog
+slug: Web/API/Window/openDialog
+tags:
+  - DOM
+  - Gecko
+  - Window
+  - boîte de dialogue
+translation_of: Web/API/Window/openDialog
+---
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">{{ ApiRef() }}</p>
+
+<h3 id="Summary" name="Summary">Résumé</h3>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><code style="color: rgb(37, 34, 29); font-weight: inherit;">window.openDialog</code> est une extension à <a href="/fr/DOM/window.open" title="fr/DOM/window.open">window.open()</a>. Elle s'utilise de la même manière, excepté qu'elle peut prendre plusieurs paramètres optionnels après <code style="color: rgb(37, 34, 29); font-weight: inherit;">windowFeatures</code>, et que <code style="color: rgb(37, 34, 29); font-weight: inherit;">windowFeatures</code> est traîté différemment.</p>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Les paramètres optionnels, si présents, seront regroupés dans un objet JavaScript Array et seront accessibles depuis la nouvelle fenêtre par la propriété <code>window.arguments</code>. Ils sont accessibles depuis les scripts de la fenêtre à tout moment, notamment lors du traitement d'un évênement <code style="color: rgb(37, 34, 29); font-weight: inherit;">load</code> . Ces paramètres peuvent donc être utilisés pour passer des arguments à une boîte de dialogue, et pour les récupérer ensuite.</p>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Notez que l'appel à la méthode <code style="color: rgb(37, 34, 29); font-weight: inherit;">openDialog()</code> se termine immédiatement. Si vous souhaitez le bloquer jusqu'à ce que l'utilisateur ferme la boîte de dialogue, utilisez la valeur <code style="color: rgb(37, 34, 29); font-weight: inherit;">modal</code> pour le paramètre f<code style="color: rgb(37, 34, 29); font-weight: inherit;">eatures</code>. En conséquence, l'utilisateur ne pourra pas interagir avec la fenêtre parente jusqu'à ce qu'il ferme la boîte de dialogue modale.</p>
+
+<h3 id="Syntax" name="Syntax">Syntaxe</h3>
+
+<pre class="eval"><em>newWindow</em> = openDialog(<em>url</em>, <em>name</em>, <em>features</em>, <em>arg1</em>, <em>arg2</em>, ...)
+</pre>
+
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">newWindow </dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">La nouvelle fenêtre ouverte.</dd>
+ <dt style="font-style: normal; font-weight: bold;">url </dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">L'URL du document à charger dans la nouvelle fenêtre.</dd>
+ <dt style="font-style: normal; font-weight: bold;">name </dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Le nom de la fenêtre (optionnel). Voir la description de <a href="/fr/DOM/window.open" title="fr/DOM/window.open">window.open()</a> pour plus de détails.</dd>
+ <dt style="font-style: normal; font-weight: bold;">features </dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Voir la description de <a href="/fr/DOM/window.open" title="fr/DOM/window.open">window.open()</a> pour la description.</dd>
+ <dt style="font-style: normal; font-weight: bold;">arg1, arg2, ... </dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Les arguments à passer à la nouvelle fenêtre (optionnel).</dd>
+</dl>
+
+<h3 id="Example" name="Example">Exemple</h3>
+
+<pre class="brush: js">var win = openDialog("http://example.tld/zzz.xul", "dlg", "", "pizza", 6.98);</pre>
+
+<h3 id="Notes" name="Notes">Notes</h3>
+
+<h4 id="New_Features" name="New_Features">Nouvelles fonctionnalités</h4>
+
+<dl>
+ <dt><code>all</code></dt>
+</dl>
+
+<dl>
+ <dd>Active ou désactive (<code>"all=no"</code>) toutes les fonctionnalités (excepté <code>chrome</code>, <code>dialog</code> et <code>modal</code>). Peut être utilisé conjointement avec les autres drapeaux (par exemple, <code>"menubar=no, all"</code> active toutes les fonctionnalités excepté <code>menubar</code>). Ce drapeau est ignorée par la méthode <a href="/fr/DOM/window.open" title="fr/DOM/window.open">window.open()</a> mais pas par window.openDialog().</dd>
+</dl>
+
+<h4 id="Default_behaviour" name="Default_behaviour">Comportement</h4>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">La méthode <code>window.openDialog()</code> traite l'absence du paramètre <code>features</code> de la même manière que <a href="/fr/DOM/window.open" title="fr/DOM/window.open">window.open()</a> (une chaîne vide désactive toutes les fonctionnalités) excepté pour <code>chrome</code> et <code>dialog</code> qui sont activés par défaut et peuvent être explicitement désactivées par "<code style="color: rgb(37, 34, 29); font-weight: inherit;">chrome=no</code>".</p>
+
+<h4 id="Passing_extra_parameters_to_the_dialog" name="Passing_extra_parameters_to_the_dialog">Passage de paramètres supplémentaires</h4>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Pour passer des paramètres supplémentaires à la boîte de dialogue, vous pouvez simplement les ajouter après le paramètre f<code style="color: rgb(37, 34, 29); font-weight: inherit;">eatures</code> :</p>
+
+<pre class="brush: js">openDialog("http://example.tld/zzz.xul", "dlg", "", "pizza", 6.98);</pre>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Ces paramètres seront ensuite regroupés dans une propriété <code style="color: rgb(37, 34, 29); font-weight: inherit;">arguments</code> de type <a href="/en/Core_JavaScript_1.5_Reference/Global_Objects/Array" style="text-decoration: none; color: rgb(4, 137, 183) !important; cursor: default;" title="en/Core_JavaScript_1.5_Reference/Global_Objects/Array">Array</a>, et cette propriété sera ajoutée à la nouvelle boîte de dialogue.</p>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Pour accéder à ces paramètres depuis un script de la boîte de dialogue, utilisez le procédé suivant :</p>
+
+<pre class="brush: js">var food = window.arguments[0];
+var price = window.arguments[1];</pre>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Notez que vous pouvez accéder à cette propriété depuis n'importe où dans le script. (<a href="/en/Code_snippets/Dialogs_and_Prompts#Passing_arguments_and_displaying_a_dialog" title="en/Code snippets/Dialogs and Prompts#Passing arguments and displaying a dialog">Autre exemple</a>).</p>
+
+<h4 id="Returning_values_from_the_dialog" name="Returning_values_from_the_dialog">Retourner des arguments depuis la boîte de dialogue</h4>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Depuis que <code style="color: rgb(37, 34, 29); font-weight: inherit;"><a href="/fr/DOM/window.close" title="fr/DOM/window.close">window.close()</a></code> efface toutes les propriétés associées à la boîte de dialogue (c'est-à-dire les variables spécifiées depuis le code JavaScript chargé depuis la boîte de dialogue), il n'est pas possible de retourner des valeur après la fermeture de la boîte de dialogue en utilisant des variables globales (ou toute autre méthode).</p>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Pour pouvoir retourner des valeurs à la fenêtre parente, vous devez passer un objet via les paramètres supplémentaires. Vous pouvez ensuite accéder à cet objet depuis la boîte de dialogue et modifier ces propriétés, dont les données que vous souhaiter conserver après l'appel à la méthode <code style="color: rgb(37, 34, 29); font-weight: inherit;">window.close()</code>.</p>
+
+<pre class="brush: js">var retVals = { address: null, delivery: null };
+openDialog("http://example.tld/zzz.xul", "dlg", "modal", "pizza", 6.98, retVals);</pre>
+
+<p>Si vous modifiez les propriétés de l'objet <code style="color: rgb(37, 34, 29); font-weight: inherit;">retVals</code> depuis la boîte de dialogue comme décrit précédemment, vous pouvez y accéder via le tableau <code style="color: rgb(37, 34, 29); font-weight: inherit;">retVals</code> après l'appel à <code style="color: rgb(37, 34, 29); font-weight: inherit;">openDialog()</code>.</p>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Depuis la boîte de dialogue, vous pouvez modifier les propriétés comme suit :</p>
+
+<pre class="brush: js">var retVals = window.arguments[2];
+retVals.address = enteredAddress;
+retVals.delivery = "immediate";</pre>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Voir aussi <a class="external" href="http://groups.google.com/group/netscape.public.dev.xul/msg/02075a1736406b40" title="http://groups.google.com/group/netscape.public.dev.xul/msg/02075a1736406b40">ce message</a>. (<a href="/en/Code_snippets/Dialogs_and_Prompts#Passing_arguments_and_displaying_a_dialog" style="text-decoration: none; color: rgb(4, 137, 183) !important; cursor: default;" title="en/Code_snippets/Dialogs_and_Prompts#Passing_arguments_and_displaying_a_dialog">Autre exemple</a>).<br>
+ Voir aussi <a href="/fr/DOM/window.importDialog" title="fr/DOM/window.importDialog">window.importDialog()</a>.</p>
+
+<h3 id="Specification" name="Specification">Spécification</h3>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">{{ DOM0() }}</p>
+
+<h3 id="Compatibilité_des_navigateurs" style="margin: 0px 0px 1.7em; padding: 0px;">Compatibilité des navigateurs</h3>
+
+<p>{{Compat("api.Window.openDialog")}}</p>
+
+<h3 id="Voir_également">Voir également</h3>
+
+<p> </p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/Add-ons/Code_snippets/Dialogs_and_Prompts#Passing_arguments_and_displaying_a_dialog">Another example</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Archive/Web/Window.importDialog"><code>window.importDialog</code></a> (mobile) {{obsolete_inline}}</li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/web/api/window/opener/index.html b/files/fr/web/api/window/opener/index.html
new file mode 100644
index 0000000000..43c965d501
--- /dev/null
+++ b/files/fr/web/api/window/opener/index.html
@@ -0,0 +1,27 @@
+---
+title: window.opener
+slug: Web/API/Window/opener
+tags:
+  - DOM
+  - DOM_0
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/Window/opener
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p>Renvoie une référence vers la fenêtre qui a ouvert la fenêtre courante.</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<pre class="eval"><i>refObj</i> = window.opener
+</pre>
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+<pre> if window.opener != indexWin {
+     referToTop(window.opener);
+ }
+</pre>
+<h3 id="Notes" name="Notes">Notes</h3>
+<p>Lorsqu'une fenêtre est ouverte depuis une autre fenêtre, elle conserve une référence à cette première fenêtre dans <b>window.opener</b>. Si la fenêtre courante n'a pas été ouverte par une autre fenêtre, la méthode renvoie <code>null</code>.</p>
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+<p>{{ DOM0() }}</p>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "en": "en/DOM/window.opener", "ja": "ja/DOM/window.opener", "pl": "pl/DOM/window.opener" } ) }}</p>
diff --git a/files/fr/web/api/window/orientation/index.html b/files/fr/web/api/window/orientation/index.html
new file mode 100644
index 0000000000..fb06ea1c88
--- /dev/null
+++ b/files/fr/web/api/window/orientation/index.html
@@ -0,0 +1,37 @@
+---
+title: Window.orientation
+slug: Web/API/Window/orientation
+translation_of: Web/API/Window/orientation
+---
+<div>{{APIRef}}{{deprecated_header}}</div>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Renvoie l'orientation en degrés (par incréments de 90 degrés) de la fenêtre par rapport à l'orientation naturelle de l'appareil.</p>
+
+<p>Les seules valeurs possibles sont <code>-90</code>, <code>0</code>, <code>90</code>, et <code>180</code>. Les valeurs positives sont dans le sens des aiguilles d'une montre; les valeurs négatives sont dans le sens antihoraire.</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('Compat', '#dom-window-orientation', 'Window.orientation')}}</td>
+   <td>{{Spec2('Compat')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden"><span class="tlid-translation translation" lang="fr"><span title="">Le tableau de compatibilité de cette page est généré à partir de données structurées.</span> <span title="">Si vous souhaitez contribuer aux données, veuillez consulter</span></span> <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.Window.orientation")}}</p>
diff --git a/files/fr/web/api/window/outerheight/index.html b/files/fr/web/api/window/outerheight/index.html
new file mode 100644
index 0000000000..9dab0e95d3
--- /dev/null
+++ b/files/fr/web/api/window/outerheight/index.html
@@ -0,0 +1,110 @@
+---
+title: Window.outerHeight
+slug: Web/API/Window/outerHeight
+translation_of: Web/API/Window/outerHeight
+---
+<div>{{APIRef}}</div>
+
+<h2 id="Summary" name="Summary">Résumé</h2>
+
+<p><code>Window.outerHeight</code> retourne la hauteur de la fenêtre (du navigateur) en pixels. La hauteur retournée prends en compte la fenêtre du navigateur entier, y compris la barre latérale, window chrome and window resizing borders/handles.</p>
+
+<p>Cette propriété n'a pas de valeur par défaut.</p>
+
+<p>Syntaxe</p>
+
+<pre class="syntaxbox"><var>outWindowHeight</var> = window.outerHeight;
+</pre>
+
+<p>La valeur retournée correspond à la hauteur extérieure de la fenêtre.</p>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Pour changer la taille de la fenêtre, utilisez {{domxref("window.resizeBy()")}} et {{domxref("window.resizeTo()")}}.</p>
+
+<p>Pour obtenir la hauteur intérieure de la fenêtre (la hauteur de la page actuelle), utilisez {{domxref("window.innerHeight")}}.</p>
+
+<h3 id="Graphical_example" name="Graphical_example">Exemple illustré</h3>
+
+<p>La figure suivante montre la différence entre <code>outerHeight</code> et <code>innerHeight</code>.</p>
+
+<p><img alt="innerHeight vs outerHeight illustration" src="/@api/deki/files/213/=FirefoxInnerVsOuterHeight2.png"></p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>9</td>
+   <td>9</td>
+   <td>3</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1</td>
+   <td>{{CompatGeckoMobile(1.0)}}</td>
+   <td>9</td>
+   <td>9</td>
+   <td>3</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Specification" name="Specification">Specification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSSOM View', '#dom-window-outerheight', 'Window.outerHeight') }}</td>
+   <td>{{ Spec2('CSSOM View') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("window.innerHeight")}}</li>
+ <li>{{domxref("window.innerWidth")}}</li>
+ <li>{{domxref("window.outerWidth")}}</li>
+ <li>{{domxref("window.resizeBy()")}}</li>
+ <li>{{domxref("window.resizeTo()")}}</li>
+</ul>
diff --git a/files/fr/web/api/window/outerwidth/index.html b/files/fr/web/api/window/outerwidth/index.html
new file mode 100644
index 0000000000..bb3f08e90b
--- /dev/null
+++ b/files/fr/web/api/window/outerwidth/index.html
@@ -0,0 +1,111 @@
+---
+title: Window.outerWidth
+slug: Web/API/Window/outerWidth
+tags:
+  - API
+  - CSSOM View
+  - NeedsContent
+  - Property
+  - Reference
+translation_of: Web/API/Window/outerWidth
+---
+<div>{{APIRef}}</div>
+
+<h2 id="Summary" name="Summary">Résumé</h2>
+
+<p><code>Window.outerWidth</code> <span class="tlid-translation translation"><span class="alt-edited">récupère la largeur de l'extérieur de la fenêtre du navigateur. Elle représente la largeur de toute la fenêtre du navigateur, y compris la barre latérale (si elle est agrandie), la fenêtre chrome et le redimensionnement de la fenêtre.</span></span></p>
+
+<p><span class="tlid-translation translation"><span class="alt-edited">Cette propriété est en lecture seule ; elle n'a pas de valeur par défaut.</span></span></p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>largeurExterieureFenetre</var> = window.outerWidth;
+</pre>
+
+<p>Lors du retour, <code>largeurExterieureFenetre</code> vaut la largeur de l'extérieur de la fenêtre.</p>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p><span class="tlid-translation translation"><span class="alt-edited">Pour changer la taille d'une fenêtre, voir {{domxref("window.resizeBy()")}} et {{domxref("window.resizeTo ()")}}.</span></span></p>
+
+<p><span class="tlid-translation translation"><span class="alt-edited">Pour récupérer la largeur interne d'une fenêtre, c'est-à-dire la largeur de la page affichée, voir {{domxref ("window.innerWidth")}}.</span></span></p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>9</td>
+   <td>9</td>
+   <td>3</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.0)}}</td>
+   <td>9</td>
+   <td>9</td>
+   <td>3</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Specification" name="Specification">Spécification</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('CSSOM View', '#dom-window-outerwidth', 'Window.outerWidth') }}</td>
+   <td>{{ Spec2('CSSOM View') }}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("window.outerHeight")}}, {{domxref("window.innerHeight")}}, {{domxref("window.innerWidth")}}</li>
+ <li>{{domxref("window.resizeBy()")}}, {{domxref("window.resizeTo()")}}</li>
+</ul>
diff --git a/files/fr/web/api/window/parent/index.html b/files/fr/web/api/window/parent/index.html
new file mode 100644
index 0000000000..f45781f517
--- /dev/null
+++ b/files/fr/web/api/window/parent/index.html
@@ -0,0 +1,25 @@
+---
+title: window.parent
+slug: Web/API/Window/parent
+tags:
+  - DOM
+  - DOM_0
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/Window/parent
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p>Renvoie une référence à la fenêtre parente ou cadre parent de la fenêtre courante ou du cadre courant.</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<pre class="eval"><i>refObj</i> = window.parent
+</pre>
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+<pre class="eval">if (window.parent != window.top) {
+     // on se trouve dans une imbrication de cadres
+}
+</pre>
+<h3 id="Notes" name="Notes">Notes</h3>
+<p>Si une fenêtre n'a pas de parent, sa propriété <b>parent</b> est une référence vers elle-même.</p>
+<p>Lorsqu'une fenêtre est chargée dans un ensemble de cadres (frameset), son parent est le cadre parent (c'est-à-dire le document dans lequel se trouve l'élément <code>&lt;frame&gt;</code> qui fait référence à la fenêtre).</p>
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+<p>{{ DOM0() }}</p>
diff --git a/files/fr/web/api/window/paste_event/index.html b/files/fr/web/api/window/paste_event/index.html
new file mode 100644
index 0000000000..f06204f102
--- /dev/null
+++ b/files/fr/web/api/window/paste_event/index.html
@@ -0,0 +1,73 @@
+---
+title: 'Window: paste event'
+slug: Web/API/Window/paste_event
+tags:
+  - Evènement
+  - Reference
+  - Window
+  - paste
+translation_of: Web/API/Window/paste_event
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary">L'événement <strong><code>paste</code></strong> est déclenché lorsque l'utilisateur a lancé une action de "paste" via l'interface utilisateur du navigateur.</span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Bulles</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">Annulable</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("ClipboardEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Propriété du gestionnaire d'événements</th>
+   <td>{{domxref("HTMLElement/onpaste", "onpaste")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><span class="tlid-translation translation" lang="fr"><span title="">La cible d'origine de cet événement est le {{domxref ("Element")}} qui était la cible prévue de l'action de collage</span></span>. Vous pouvez écouter cet événement sur l'interface {{domxref ("Window")}} pour le gérer dans les phases de capture ou de bullage. Pour plus de détails sur cet événement, veuillez consulter la page sur le <a href="/en-US/docs/Web/API/Element/paste_event">Element: paste event</a>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js notranslate">window.addEventListener('paste', (event) =&gt; {
+    console.log('paste action initiated')
+});</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Statut</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Clipboard API', '#clipboard-event-paste')}}</td>
+   <td>{{Spec2('Clipboard API')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.Window.paste_event")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>Événements liés: {{domxref("Window/cut_event", "cut")}}, {{domxref("Window/copy_event", "copy")}}</li>
+ <li>Cet événement sur {{domxref("Element")}} cible: {{domxref("Element/paste_event", "paste")}}</li>
+ <li>Cet événement sur {{domxref("Document")}} cible: {{domxref("Document/paste_event", "paste")}}</li>
+</ul>
diff --git a/files/fr/web/api/window/popstate_event/index.html b/files/fr/web/api/window/popstate_event/index.html
new file mode 100644
index 0000000000..98725fa936
--- /dev/null
+++ b/files/fr/web/api/window/popstate_event/index.html
@@ -0,0 +1,143 @@
+---
+title: popstate
+slug: Web/API/Window/popstate_event
+translation_of: Web/API/Window/popstate_event
+---
+<p>L'événement <code>popstate</code> est exécuté lorsque l'entrée active de l'historique change. Si l'entrée active de l'historique en cours d'activation a été créé par un appel à <code>history.pushState()</code> ou a été affectée par un appel à <code>history.replaceState()</code>, la propriété <code>state</code> de l'événement <code>popstate</code> contient une copie de l'objet <code>state</code> de l'entrée d'historique.</p>
+
+<p>Notez qu'un appel à <code>history.pushState()</code> ou <code>history.replaceState()</code> n'exécutera pas l'événement <code>popstate</code>. L'événement <code>popstate</code> est uniquement exécuté en réalisant une action dans le navigateur telle que cliquer sur le bouton de retour (ou appeler <code>history.back()</code> en JavaScript).</p>
+
+<p>Les navigateurs ont tendance à gérer l'événement <code>popstate</code> différemment lors du chargement de la page. Chrome (avant la v34) et Safari émettent toujours un événement <code>popstate</code> lors du chargement de la page, contrairement à Firefox.</p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Specification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-popstate">HTML5</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">PopStateEvent</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
+ <dd style="margin: 0 0 0 120px;">Yes</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
+ <dd style="margin: 0 0 0 120px;">No</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Target</dt>
+ <dd style="margin: 0 0 0 120px;">defaultView</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">None</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The browsing context (<code>window</code>).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+  <tr>
+   <td><code>state</code> {{readonlyInline}}</td>
+   <td><em>any</em></td>
+   <td>The current history entry's state object (if any).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Supportbasique</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2")}}</td>
+   <td>10.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}[1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>3.0[2]</td>
+   <td>{{CompatGeckoMobile("2")}}</td>
+   <td>10.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}[1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] L'implémentation est supportée de façon limitée.</p>
+
+<p>[2] L'implémentation sous Android 2.2 et 2.3 était buggée.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Une page <code>http://example.com/example.html</code> exécutant le code suivant génèrera un journal comme spécifié :</p>
+
+<pre class="brush: js">window.onpopstate = function(event) {
+  console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
+};
+history.pushState({page: 1}, "title 1", "?page=1");
+history.pushState({page: 2}, "title 2", "?page=2");
+history.replaceState({page: 3}, "title 3", "?page=3");
+history.back(); // Logs "location: http://example.com/example.html?page=1, state: {"page":1}"
+history.back(); // Logs "location: http://example.com/example.html, state: null
+history.go(2);  // Logs "location: http://example.com/example.html?page=3, state: {"page":3}
+</pre>
+
+<p>Notez que même si l'entrée d'historique originelle (pour <code>http://example.com/example.html</code>) n'a pas d'objet state associé, un événement <code>popstate</code> est tout de même exécuté lorsque nous activons cette entrée au second appel à <code>history.back()</code>.</p>
+
+<h2 id="Événements_liés">Événements liés</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Mozilla_event_reference/hashchange"><code>hashchange</code></a></li>
+</ul>
diff --git a/files/fr/web/api/window/postmessage/index.html b/files/fr/web/api/window/postmessage/index.html
new file mode 100644
index 0000000000..9c4e349959
--- /dev/null
+++ b/files/fr/web/api/window/postmessage/index.html
@@ -0,0 +1,179 @@
+---
+title: Window.postMessage
+slug: Web/API/Window/postMessage
+tags:
+  - API
+  - DOM
+  - Méthode
+  - Reference
+  - postMessage
+translation_of: Web/API/Window/postMessage
+---
+<div>{{ ApiRef() }}</div>
+
+<div></div>
+
+<p>La méthode <strong><code>window.postMessage</code></strong> permet une communication inter-domaine en toute sécurité. Normalement, les scripts de différentes pages sont autorisés à accéder les uns aux autres si et seulement si les pages depuis lesquelles ils sont exécutés ont des URL de même <a href="/en-US/docs/Glossary/Origin">origine</a>, c'est-à-dire avec le même protocole (généralement <code>http</code> ou <code>https</code>), le même numéro de port (<code>80</code> étant le port par défaut pour  <code>http</code>), et le même nom d'hôte (à condition que <a href="/en-US/docs/DOM/document.domain" title="DOM/document.domain">document.domain</a> soit initialisé à la même valeur par les deux pages). <code>window.postMessage</code> fournit un mécanisme contrôlé pour contourner cette restriction d'une manière sécurisée si bien utilisée.</p>
+
+<p>La méthode <code>window.postMessage</code>, quand elle est appelée, provoque l'envoi d'un {{domxref("MessageEvent")}} à la fenêtre ciblée une fois que tout script en attente a terminé son exécution (par exemple, les gestionnaires d'évènements restants si <code>window.postMessage</code> est appelée depuis un gestionnaire d'évènement, des timeouts en attente enregistrées auparavant, etc.) Le {{domxref("MessageEvent")}} est de type <code>message</code>, a une propriété <code>data</code> qui est initialisée à la valeur du premier argument passé à<code> window.postMessage</code>, une propriété <code>origin</code> correspondant à l'origine du document principal de la fenêtre appelant <code>window.postMessage</code> au moment où <code>window.postMessage</code> a été appelée, et une propriété <code>source</code> qui est la fenêtre depuis laquelle <code>window.postMessage</code> est appelée. (les autres propriétés standard d'évènement sont présentes avec leurs valeurs attendues).</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>otherWindow</em>.postMessage(<em>message</em>, <em>targetOrigin</em>, [<em>transfer</em>]);</pre>
+
+<dl>
+ <dt><code><em>otherWindow</em></code></dt>
+ <dd>Une référence à une autre fenêtre ; une telle référence peut être obtenue, par exemple, <em>via</em> la propriété <code>contentWindow</code> d'un élément <code>iframe</code>, l'objet retourné par <a href="/fr/docs/DOM/window.open" title="DOM/window.open">window.open</a>, ou par index nommé ou numérique de <a href="/fr/docs/Web/API/window.frames" title="DOM/window.frames">window.frames</a>.</dd>
+ <dt><code><em>message</em></code></dt>
+ <dd>La donnée à envoyer à l'autre fenêtre. Elle est sérialisée en utilisant <a href="/fr/docs/Web/Guide/API/DOM/The_structured_clone_algorithm" title="DOM/The structured clone algorithm">l'algorithme de clônage structuré</a>. Cela signifie que vous pouvez passer sereinement une large variété d'objets de données à la fenêtre de destination sans avoir à les sérialiser vous-mêmes. [1]</dd>
+ <dt><code><em>targetOrigin</em></code></dt>
+ <dd>Indique quelle doit être l'origine de <code>otherWindow</code> pour l'évènement à envoyer, soit comme la chaîne littérale <code>"*"</code> (signifiant pas de préférence) soit comme une URI. Si, au moment où l'évènement est inscrit pour être envoyé, le protocole, le nom d'hôte ou le port du document de <code>otherWindow</code> ne correspond pas à ceux contenus dans <code>targetOrigin</code>,  l'évènement ne sera pas envoyé ; il ne le sera que si les trois correspondent. Ce mécanisme permet de contrôler où les messages sont envoyés ; par exemple, si <code>postMessage</code> était utilisé pour transmettre un mot de passe, il serait absolument vital que cet argument soit une URI dont l'origine est la même que le récepteur prévu du message contenant le mot de passe, afin de prévenir l'interception du mot de passe par une tierce-partie malicieuse. <strong>Fournissez toujours une <code>targetOrigin</code> spécifique, jamais <code>*</code>, si vous savez où le document de l'autre fenêtre est censé se trouver. Ne pas fournir une cible spécifique expose les données que vous envoyez à tout site malicieux à l'écoute.</strong></dd>
+ <dt><code><em><strong>transfer</strong></em></code> {{optional_Inline}}</dt>
+ <dd>Séquence d'objets {{domxref("Transferable")}} qui sera transmise avec le message. La possession de ces objets est cédée à la destination et ils ne sont plus utilisables du côté de l'expéditeur.</dd>
+</dl>
+
+<h2 id="The_dispatched_event" name="The_dispatched_event">L'évènement envoyé</h2>
+
+<p><code>otherWindow</code> peut surveiller les messages envoyés en exécutant le JavaScript suivant :</p>
+
+<pre class="brush: js">window.addEventListener("message", receiveMessage, false);
+
+function receiveMessage(event)
+{
+  if (event.origin !== "http://example.org:8080")
+    return;
+
+  // ...
+}
+</pre>
+
+<p>Les propriétés du message envoyé sont :</p>
+
+<dl>
+ <dt><code>data</code></dt>
+ <dd>L'objet passé depuis l'autre fenêtre.</dd>
+ <dt><code>origin</code></dt>
+ <dd>L'<a href="/en-US/docs/Origin" title="Origin">origine</a> de la fenêtre qui a envoyé le message au moment où <code>postMessage</code> a été appelée. Des exemples typiques d'origines sont <code><span class="nowiki">https://example.org</span></code> (sous-entendu port <code>443</code>), <code><span class="nowiki">http://example.net</span></code> (sous-entendu port <code>80</code>), et <code><span class="nowiki">http://example.com:8080</span></code>. Notez qu'il n'est pas garanti que cette origine soit l'origine actuelle ou future de cette fenêtre, qui peut avoir été naviguée vers une adresse différente depuis l'appel à <code>postMessage</code>.</dd>
+ <dt><code>source</code></dt>
+ <dd>Une référence à l'objet <code><a href="/fr/docs/DOM/window" title="DOM/window">window</a></code> qui a envoyé le message ; vous pouvez utiliser ceci pour établir une communication dans les deux sens entre deux fenêtres ayant différentes origines.</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h2 id="Security_concerns" name="Security_concerns">Précautions de sécurité</h2>
+
+<p><strong>Si vous ne prévoyez pas de recevoir de messages depuis d'autres sites, n'ajoutez pas de gestionnaire d'évènement pour les évènements <code>message</code>.</strong> C'est un moyen sûr d'éviter les problèmes de sécurité.</p>
+
+<p>Si vous prévoyez de recevoir des messages depuis d'autres sites, <strong>vérifiez toujours l'identité de l'expéditeur</strong> à l'aide des propriétés <code>origin</code> et si possible <code>source</code>. Toute fenêtre (y compris, par exemple, <code><span class="nowiki">http://evil.example.com</span></code>) peut envoyer un message à toute autre fenêtre, et vous n'avez aucune garantie qu'un expéditeur inconnu ne va pas envoyer de message malicieux. Cependant, même si vous vérifiez l'identité, vous devriez <strong>toujours vérifier la syntaxe du message reçu</strong>. Dans le cas contraire, une faille de sécurité dans le site auquel vous faites confiance peut ouvrir une vulnérabilité XSS dans votre propre site.</p>
+
+<p><strong>Spécifiez toujours explicitement une origine de destination, jamais <code>*</code>, quand vous utilisez <code>postMessage</code> pour envoyer des données à d'autres fenêtres.</strong> Un site malicieux peut changer l'adresse de la fenêtre à votre insu, et ainsi intercepter les données envoyées à l'aide de <code>postMessage</code>.</p>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">/*
+ * Dans les scripts de la fenêtre A, avec A sur &lt;http://example.com:8080&gt;:
+ */
+
+var popup = window.open(...popup details...);
+
+// Quand la popup est chargée, si pas bloquée par un bloqueur de popups:
+
+// Ceci ne fait rien, en supposant que la fenêtre n'a pas changé d'adresse.
+popup.postMessage("The user is 'bob' and the password is 'secret'",
+                  "https://secure.example.net");
+
+// Ceci va planifier l'envoi d'un message à la popup, en supposant que
+// la fenêtre n'a pas changé d'adresse.
+popup.postMessage("hello there!", "http://example.org");
+
+function receiveMessage(event)
+{
+  // Faisons-nous confiance à l'expéditeur de ce message ?  (il pourrait être
+  // différent de la fenêtre que nous avons ouverte au départ, par exemple).
+  if (event.origin !== "http://example.org")
+    return;
+
+  // event.source est la popup
+  // event.data est "hi there yourself!  the secret response is: rheeeeet!"
+}
+window.addEventListener("message", receiveMessage, false);
+</pre>
+
+<pre class="brush: js">/*
+ * Dans les scripts de la popup, sur &lt;http://example.org&gt;:
+ */
+
+// Appelée quelques instants après que postMessage a été appelée
+function receiveMessage(event)
+{
+  // Faisons-nous confiance à l'expéditeur de ce message ?
+  if (event.origin !== "http://example.com:8080")
+    return;
+
+  // event.source est window.opener
+  // event.data est "hello there!"
+
+  // Supposant que vous avez vérifié l'origine du message reçu
+  // (ce que vous devriez faire en toutes circonstances),
+  // un moyen pratique de répondre à un message est d'appeler postMessage
+  // sur event.source et fournir event.origin comme targetOrigin.
+  event.source.postMessage("hi there yourself!  the secret response " +
+                           "is: rheeeeet!",
+                           event.origin);
+}
+
+window.addEventListener("message", receiveMessage, false);
+</pre>
+
+<h3 id="Notes" name="Notes">Notes</h3>
+
+<p>Toute fenêtre peut accéder à cette méthode sur toute autre fenêtre, à tout moment, peu importe l'adresse du document dans la fenêtre, pour y envoyer un message. Par conséquent, tout gestionnaire d'évènement utilisé pour recevoir des messages <strong>doit</strong> d'abord vérifier l'identité de l'expéditeur du message, en utilisant les propriétés <code>origin</code> et si possible <code>source</code>. Cela ne peut pas être minimisé : <strong>ne pas vérifier les propriétés <code>origin</code> et si possible <code>source</code> permet des attaques inter-site.</strong></p>
+
+<p>De même qu'avec les scripts exécutés de manière asynchrone (timeouts, evènements générés par l'utilisateur), il n'est pas possible pour l'appelant à <code>postMessage</code> de détecter quand un gestionnaire d'évènement écoutant des évènements envoyés par <code>postMessage</code> lance une exception.</p>
+
+<p>La valeur de la propriété <code>origin</code> de l'évènement envoyé n'est pas affectée par la valeur actuelle de <code>document.domain</code> dans la fenêtre appelante.</p>
+
+<p>Pour les noms d'hôte IDN uniquement, la valeur de la propriété <code>origin</code> n'est pas systématiquement Unicode ou punycode ; pour la plus grande compatibilité, testez à la fois les valeurs IDN et punycode quand vous utilisez cette propriété si vous attendez des messages de sites IDN. Cette valeur sera systématiquement IDN à l'avenir, mais pour l'instant vous devriez gérer à la fois les formes IDN et punycode.</p>
+
+<p>La valeur de la propriété <code>origin</code> quand la fenêtre expéditrice contient une URL <code>javascript:</code> ou <code>data:</code> est l'origin du script qui a chargé cette URL.</p>
+
+<h3 id="Utiliser_window.postMessage_dans_les_extensions_Non-standard_inline">Utiliser window.postMessage dans les extensions {{Non-standard_inline}}</h3>
+
+<p><code>window.postMessage</code> est disponible depuis le JavaScript exécuté en code chrome (par exemple dans les extensions et le code privilégié), mais la propriété <code>source</code> de l'évènement envoyé est toujours <code>null</code> par mesure de sécurité. (Les autres propriétés ont leurs valeurs usuelles.) L'argument <code>targetOrigin</code> pour un message envoyé à une fenêtre située à une URL<code> chrome:</code> est actuellement mal interprété, si bien que la seule valeur qui conduit à l'envoi d'un message est <code>"*"</code>. Comme cette valeur n'est pas sûre quand la fenêtre ciblée peut être naviguée n'importe où par un site malicieux, il est recommandé de ne pas utiliser <code>postMessage</code> pour communiquer avec des pages <code>chrome:</code> pour l'instant ; utilisez une méthode différente (comme une query string quand la fenêtre est ouverte) pour communiquer avec des fenêtres chrome. Enfin, poster un message à une page à une URL <code>file:</code> requiert actuellement que l'argument <code>targetOrigin</code> soit <code>"*"</code>. <code>file://</code> ne peut pas être utilisé comme restriction de sécurité ; cette restriction pourrait être modifiée à l'avenir.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col"><strong>Spécification</strong></th>
+   <th scope="col"><strong>Status</strong></th>
+   <th scope="col"><strong>Comment</strong>aire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#dom-window-postmessage", "window.postMessage")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Pas de changement depuis {{SpecName('HTML5 Web Messaging')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 Web Messaging', '#dom-window-postmessage', 'window.postMessage')}}</td>
+   <td>{{Spec2('HTML5 Web Messaging')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Window.postMessage")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/document.domain" title="DOM/document.domain">Document.domain</a></li>
+ <li><a href="/en-US/docs/Web/API/CustomEvent" title="/en-US/docs/Web/API/CustomEvent">CustomEvent</a></li>
+ <li><a href="/en-US/docs/Code_snippets/Interaction_between_privileged_and_non-privileged_pages" title="/en-US/docs/Code_snippets/Interaction_between_privileged_and_non-privileged_pages">Interaction entre les pages privilégiées et non privilégiées</a></li>
+</ul>
diff --git a/files/fr/web/api/window/print/index.html b/files/fr/web/api/window/print/index.html
new file mode 100644
index 0000000000..17eeacc763
--- /dev/null
+++ b/files/fr/web/api/window/print/index.html
@@ -0,0 +1,54 @@
+---
+title: Window.print()
+slug: Web/API/Window/print
+tags:
+  - API
+  - BesoinDeCompatibilitéAvecLeNavigateur
+  - BesoinDeCompatibilitéAvecLeNavigateurMobile
+  - DOM
+  - Méthode
+  - Reference
+  - Window
+translation_of: Web/API/Window/print
+---
+<p>{{ ApiRef() }}</p>
+
+<h2 id="Summary" name="Summary">Résumé</h2>
+
+<p>Ouvre la fenêtre de dialogue d'impression pour imprimer le document courant. </p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="eval">window.print()
+</pre>
+
+<h2 id="Specification" name="Specification">Notes</h2>
+
+<p>Disponible à partir de Chrome {{CompatChrome(45.0)}}, cette méthode est bloquée à l'intérieur d'une balise {{htmlelement("iframe")}} sauf si son attribut sandbox a la valeur allow-modal.</p>
+
+<h2 id="Specification" name="Specification">Spécification</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('HTML5 Web application', '#dom-print', 'print()')}}</td>
+   <td>{{Spec2('HTML5 Web application')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="/en/Printing" title="en/Printing">Printing</a></li>
+ <li>{{ domxref("window.onbeforeprint") }}</li>
+ <li>{{ domxref("window.onafterprint") }}</li>
+</ul>
+
+<p>{{ languages( { "ja": "ja/DOM/window.print", "it": "it/DOM/window.print" , "zh-cn": "zh-cn/DOM/window.print" } ) }}</p>
diff --git a/files/fr/web/api/window/prompt/index.html b/files/fr/web/api/window/prompt/index.html
new file mode 100644
index 0000000000..cb3128f648
--- /dev/null
+++ b/files/fr/web/api/window/prompt/index.html
@@ -0,0 +1,93 @@
+---
+title: window.prompt
+slug: Web/API/Window/prompt
+tags:
+  - API
+  - DOM
+  - Méthode
+  - Reference
+  - Window
+translation_of: Web/API/Window/prompt
+---
+<div>{{ApiRef("Window")}}</div>
+
+<p>La méthode <code>Window.prompt()</code> affiche une boîte de dialogue, éventuellement avec un message, qui invite l'utilisateur à saisir un texte.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><em>résultat</em> = window.prompt(<em>message</em>, <em>défaut</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>message</code> {{optional_inline}}</dt>
+ <dd>Une chaîne de caractères qui sera affichée pour l'utilisateur. Cet argument peut ne pas être utilisé s'il n'y a rien à afficher dans la fenêtre.</dd>
+ <dt><code>default</code> {{optional_inline}}</dt>
+ <dd>Une chaîne de caractères contenant la valeur par défaut affichée pour la saisie. Pour Internet Explorer 7 et 8, si cet argument n'est pas fourni, ce sera la chaîne de caractères <code>"undefined"</code> qui sera la valeur par défaut.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>La chaîne de caractères qui a été saisie par l'utilisateur ou <code>null</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js notranslate">let signe = prompt("Quel est votre signe astrologique ?");
+
+if (signe.toLowerCase() == "verseau") {
+  console.log("Oh ? moi aussi je suis verseau :)");
+}
+
+// Différentes façons d'utiliser prompt
+signe = window.prompt(); // ouvre une fenêtre de saisie sans texte
+signe = prompt();       //  ouvre une fenêtre de saisie sans texte
+
+ // ouvre une fenêtre avec le texte "Quelle est la réponse ?"
+signe = window.prompt('Quelle est la réponse ?');
+
+// ouvre une fenêtre avec le texte "Quelle est la réponse ?"
+// avec la valeur "42" comme réponse par défaut
+signe = window.prompt('Quelle est la réponse ?', '42');</pre>
+
+<p>Lorsque l'utilisateur clique sur le bouton OK, le texte saisi dans le champ est renvoyé par la fonction. Si l'utilisateur clique sur OK sans avoir saisi de texte, c'est la chaîne vide qui est renvoyée. Si l'utilisateur clique sur le bouton "Annuler", la fonction renvoie <code>null</code>.</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Une boîte de dialogue contient un texte sur une ligne, un bouton "Annuler" ainsi qu'un bouton "OK". Elle permet de renvoyer le texte (éventuellement vide) saisi par l'utilisateur dans le champ de saisie.</p>
+
+<p><span class="comment">The following text is shared between this article, DOM:window.confirm and DOM:window.alert</span>Les boîtes de dialogue sont des fenêtres modales : elles empêchent l'utilisateur d'accéder au reste de l'interface du programme tant que la fenêtre n'est pas fermée. Pour ces raisons, mieux vaut ne pas abuser des fonctions qui créent de telles boîtes de dialogue et autres fenêtres modales.</p>
+
+<p>On notera que le résultat de la fonction est une chaîne de caractères. Cela signifie qu'il faut parfois convertir la valeur founie par l'utilisateur. Si, par exemple, on souhaite que la réponse soit un nombre, il faudra la convertir (avec le constructeur {{jsxref("Number")}} éventuellement).</p>
+
+<pre class="brush: js notranslate">const aNumber = Number(window.prompt("Veuillez saisir un nombre.", ""));</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="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', 'timers-and-user-prompts.html#dom-prompt', 'prompt()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Window.prompt")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("window.alert", "alert")}}</li>
+ <li>{{domxref("window.confirm", "confirm")}}</li>
+</ul>
diff --git a/files/fr/web/api/window/rejectionhandled_event/index.html b/files/fr/web/api/window/rejectionhandled_event/index.html
new file mode 100644
index 0000000000..ad18e72fc0
--- /dev/null
+++ b/files/fr/web/api/window/rejectionhandled_event/index.html
@@ -0,0 +1,82 @@
+---
+title: 'Window: rejectionhandled event'
+slug: Web/API/Window/rejectionhandled_event
+tags:
+  - API
+  - Evènement
+  - HTML DOM
+  - JavaScript
+  - Promesse
+  - Reference
+  - Window
+  - onrejectionhandled
+  - rejectionhandled
+translation_of: Web/API/Window/rejectionhandled_event
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><span class="seoSummary">L'événement <strong><code>rejectionhandled</code></strong> est envoyé à la portée globale du script (généralement {{domxref("window")}} mais aussi {{domxref("Worker")}}) chaque fois qu'un JavaScript {{jsxref("Promise")}} est rejeté mais après que le rejet de la promesse a été traité.</span> Cela peut être utilisé dans le débogage et pour la résilience générale des applications, en tandem avec l'événement {{domxref ("Window.unhandledrejection_event", "unhandledrejection")}}, qui est envoyé lorsqu'une promesse est rejetée mais qu'il n'y a pas de responsable du rejet .</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Bulles</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">Annulable</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("PromiseRejectionEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Propriété de gestionnaire d'événements</th>
+   <td>{{domxref("WindowEventHandlers.onrejectionhandled", "onrejectionhandled")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Vous pouvez utiliser l'événement <code>rejectionhandled</code> pour consigner les promesses rejetées sur la console, ainsi que les raisons pour lesquelles elles ont été rejetées :</p>
+
+<pre class="brush: js notranslate">window.addEventListener("rejectionhandled", event =&gt; {
+  console.log("Promise rejected; reason: " + event.reason);
+}, false);
+</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('HTML WHATWG', 'webappapis.html#unhandled-promise-rejections', 'rejectionhandled')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.Window.rejectionhandled_event")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>{{SectionOnPage("/en-US/docs/Web/JavaScript/Guide/Using_promises", "Promise rejection events")}}</li>
+ <li>{{domxref("PromiseRejectionEvent")}}</li>
+ <li>{{jsxref("Promise")}}</li>
+ <li>{{domxref("Window/unhandledrejection_event", "unhandledrejection")}}</li>
+</ul>
diff --git a/files/fr/web/api/window/requestanimationframe/index.html b/files/fr/web/api/window/requestanimationframe/index.html
new file mode 100644
index 0000000000..8bdb9c1f89
--- /dev/null
+++ b/files/fr/web/api/window/requestanimationframe/index.html
@@ -0,0 +1,91 @@
+---
+title: Window.requestAnimationFrame()
+slug: Web/API/Window/requestAnimationFrame
+tags:
+  - API
+  - DOM
+  - JavaScript
+translation_of: Web/API/window/requestAnimationFrame
+---
+<p>{{APIRef("Window")}}</p>
+
+<p>La méthode <strong><code>window.requestAnimationFrame()</code></strong> notifie le navigateur que vous souhaitez exécuter une animation et demande que celui-ci exécute une fonction spécifique de mise à jour de l'animation, avant le prochain rafraîchissement du navigateur. Cette méthode prend comme argument un callback qui sera appelé avant le rafraîchissement du navigateur.</p>
+
+<div class="note"><strong>Note:</strong> Si vous souhaitez animer une nouvelle frame durant le prochain repaint, votre callback doit appeler la méthode <code>requestAnimationFrame()</code>.</div>
+
+<p>Vous devez appeler cette méthode dès que vous êtes prêt à rafraîchir votre animation. La fonction contenant l'animation doit être appelée avant que le navigateur n'effectue un nouveau rafraîchissement . En moyenne, le callback sera appelé 60 fois par seconde, cela dépendra de la fréquence de rafraîchissement de votre écran, conformément aux recommandations de la W3C. Cette fréquence peut être inférieure si plusieurs onglets sont ouverts simultanément.</p>
+
+<p>Le callback possède un seul argument, un {{domxref("DOMHighResTimeStamp")}}, qui est le temps, en millisecondes avec une précision minimum de 10 µs, durant lequel l'exécution du rafraîchissement est prévu.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="brush: js"><em>requestID</em> = window.requestAnimationFrame(<em>callback</em>);       // Firefox 23 / IE 10 / Chrome / Safari 7 (incl. iOS)
+<em>requestID</em> = window.mozRequestAnimationFrame(<em>callback</em>);    // Firefox &lt; 23
+<em>requestID</em> = window.webkitRequestAnimationFrame(callback); // Anciennes versions de Safari / Chrome
+</pre>
+
+<h3 id="Parameters" name="Parameters">Paramètres</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Un paramètre définissant la fonction à appeler lorsque votre animation va être rafraîchie lors du prochain rafraîchissement. Le callback ne prend qu'un seul argument, un {{domxref("DOMHighResTimeStamp")}}, qui est le temps à partir duquel requestAnimationFrame va commencer à appeler les callbacks.</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p><code>requestID</code> est un entier <code>long</code> unique identifiant l'élément dans la liste des callbacks. C'est une valeur différente de zéro, mais il est prudent de ne pas faire de suppositions sur cette valeur. En passant cette valeur en paramètre de la méthode {{domxref("window.cancelAnimationFrame()")}},  vous annulez l'appel du callback.</p>
+
+<h2 id="Notes" name="Notes">Exemple</h2>
+
+<pre class="brush: js">window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
+                              window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
+
+
+var start = null;
+
+var d = document.getElementById("SomeElementYouWantToAnimate");
+
+function step(timestamp) {
+  var progress;
+  if (start === null) start = timestamp;
+  progress = timestamp - start;
+  d.style.left = Math.min(progress/10, 200) + "px";
+  if (progress &lt; 2000) {
+    requestAnimationFrame(step);
+  }
+}
+
+requestAnimationFrame(step);
+</pre>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilités</h2>
+
+<div>
+<p>{{Compat("api.Window.requestAnimationFrame")}}</p>
+</div>
+
+<h3 id="Specification" name="Specification">Notes pour Gecko</h3>
+
+<p>[1] Avant Gecko 11.0 {{geckoRelease("11.0")}}, <code>mozRequestAnimationFrame()</code> pouvait être appelée sans paramètres d'entrée. Cela n'est plus supporté et n'est pas <span class="short_text" id="result_box" lang="fr"><span class="hps">susceptible</span></span> d'être standardisé.</p>
+
+<p>[2] Le callback prend comme paramètre un {{domxref("DOMTimeStamp")}} au lieu d'un {{domxref("DOMHighResTimeStamp")}} si c'est la version préfixée qui est utilisée. <code>DOMTimeStamp</code> n'a qu'une précision de l'ordre de la milliseconde, mais <code>DOMHightResTimeStamp</code> a une précision minimale de l'ordre de 10 microsecondes.</p>
+
+<h3 id="Notes_pour_Chrome">Notes pour Chrome</h3>
+
+<p>La syntaxe correcte, dans Chrome, pour annuler l'exécution est<code> window.cancelAnimationFrame()</code>. Dans les anciennes versions, <code>window.webkitCancelAnimationFrame()</code> &amp; <code>window.webkitCancelRequestAnimationFrame() sont obsolètes</code> mais sont toujours supportées pour le moment.</p>
+
+<h2 id="Specification" name="Specification">Specification</h2>
+
+<p>{{spec("http://www.w3.org/TR/animation-timing/#requestAnimationFrame", "Timing control for script-based animations: requestAnimationFrame", "WD")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("window.mozAnimationStartTime")}}</li>
+ <li>{{domxref("window.cancelAnimationFrame()")}}</li>
+ <li><a href="http://weblogs.mozillazine.org/roc/archives/2010/08/mozrequestanima.html">mozRequestAnimationFrame</a> - Blog post</li>
+ <li><a href="http://paulirish.com/2011/requestanimationframe-for-smart-animating/">requestAnimationFrame for smart animating</a> - Blog post</li>
+ <li><a href="http://hacks.mozilla.org/2011/08/animating-with-javascript-from-setinterval-to-requestanimationframe/">Animating with javascript: from setInterval to requestAnimationFrame</a> - Blog post</li>
+ <li><a href="http://blogs.msdn.com/b/ie/archive/2011/07/05/using-pc-hardware-more-efficiently-in-html5-new-web-performance-apis-part-1.aspx">Using PC Hardware more efficiently in HTML5: New Web Performance APIs, Part 1</a> - Blog post</li>
+ <li><a href="http://www.testufo.com/#test=animation-time-graph" title="http://www.testufo.com/#test=animation-time-graph">TestUFO: Test your web browser for requestAnimationFrame() Timing Deviations</a></li>
+</ul>
diff --git a/files/fr/web/api/window/requestidlecallback/index.html b/files/fr/web/api/window/requestidlecallback/index.html
new file mode 100644
index 0000000000..f78ca5dfae
--- /dev/null
+++ b/files/fr/web/api/window/requestidlecallback/index.html
@@ -0,0 +1,111 @@
+---
+title: window.requestIdleCallback()
+slug: Web/API/Window/requestIdleCallback
+translation_of: Web/API/Window/requestIdleCallback
+---
+<div>{{APIRef}}{{SeeCompatTable}}</div>
+
+<h2 id="Summary" name="Summary">Résumé</h2>
+
+<p>La méthode <code><strong>window.requestIdleCallback() </strong></code>mémorise une fonction qui sera appellée lorsque le navigateur n'aura plus aucune autre tâche en cours. Cela offre au développeur la possibilité de réaliser des tâches à basse priorité en arrière-plan sur le thread principal, sans impacter l'expérience utilisateur (ralentissement des animations, etc). L'ordre des appels aux fonctions est généralement premier entré, premier sorti, sauf si le timeout défini au moment de l'enregistrement est atteint avant que le navigateur n'ait eu le temps d'appeler la fonction en question.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><code>var idleCallbackId = window.requestIdleCallback(fonction[, options])</code></pre>
+
+<h3 id="Returns" name="Returns">Retour de l'appel</h3>
+
+<p>Un entier long non-signé qui peut être utilisé pour annulé l'appel à la fonction via la méthode {{domxref("window.cancelIdleCallback()")}}.</p>
+
+<h3 id="Parameters" name="Parameters">Paramètres</h3>
+
+<dl>
+ <dt><font face="Consolas, Liberation Mono, Courier, monospace">fonction</font></dt>
+ <dd>La référence d'une fonction qui devrait être appellée dans un futur proche. La fonction en question recevra en argument un objet de type temps restant avec les propriétés suivantes :
+ <ul>
+  <li><code>timeRemaining </code>: Fonction qui retourne un {{domxref("DOMHighResTimeStamp")}} repésentant le temps restant estimé par le navigateur pour exécuter la tâche, ayant pour valeur minimale zéro. Les tâches nécessitant un temps d'exécution relativement long sont susceptibles de recourir à plusieurs appels à cette méthode s'il reste du travail à effectuer, rendant la main au navigateur peu avant que le compteur n'atteigne zéro. <code>timeRemaining()</code> retournera toujours zéro si <code>didTimeout</code> est positionné à true (i.e. la fonction n'a pas été appelée durant la période de repos du navigateur). La limite de temps est limitée à 50ms, même si le navigateur reste n'a pas d'autre tâche à exécuter pendant une durée plus longue.</li>
+  <li><code>didTimeout </code>: Un booléen positionné à true si la fonction est appelée car le timeout a été atteint, et false si elle a été appelée par le navigateur durant une période de repos.</li>
+ </ul>
+ </dd>
+ <dt><code>options</code> {{optional_inline}}</dt>
+ <dd>Objet contenant des paramètres de configuration optionnels. Les propriétés sont les suivantes :
+ <ul>
+  <li><code>timeout </code>: Si <code>timeout</code> est spécifié et possède une valeur positive, la fonction sera appelée au bout de au moins <code>timeout</code> millisecondes si elle n'a pas été appelée par le navigateur au préalable.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Specifications" name="Specifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Spécification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Background Tasks')}}</td>
+   <td>{{Spec2('Background Tasks')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité avec les navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(47)}}</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(34)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(47)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(47)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] En voie d'être déployé dans Firefox 52, voir le {{bug(1198381)}}.</p>
diff --git a/files/fr/web/api/window/resizeby/index.html b/files/fr/web/api/window/resizeby/index.html
new file mode 100644
index 0000000000..8ad1939c15
--- /dev/null
+++ b/files/fr/web/api/window/resizeby/index.html
@@ -0,0 +1,75 @@
+---
+title: Window.resizeBy()
+slug: Web/API/Window/resizeBy
+tags:
+  - API
+  - Window
+translation_of: Web/API/Window/resizeBy
+---
+<div>{{APIRef}}</div>
+
+<p>La méthode <code><strong>Window.resizeBy()</strong></code> redimensionne la fenêtre actuelle d'une taille spécifié.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">window.resizeBy(<em>xDelta, yDelta</em>)
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<ul>
+ <li><code>xDelta</code> est le nombre de pixels pour agrandir la fenêtre horizontalement.</li>
+ <li><code>yDelta</code> est le nombre de pixels pour agrandir la fenêtre verticalement.</li>
+</ul>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush:js notranslate">// Réduit la fenêtre
+window.resizeBy(-200, -200);
+</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Cette méthode redimensionne la fenêtre par rapport à sa taille actuelle. Pour redimensionner la fenêtre en termes absolus, utilisez {{domxref ("window.resizeTo ()")}}.</p>
+
+<h3 id="Créer_et_redimensionner_une_fenêtre_externe">Créer et redimensionner une fenêtre externe</h3>
+
+<p>Pour des raisons de sécurité, il n'est plus possible dans Firefox pour un site Web de modifier la taille par défaut d'une fenêtre dans un navigateur si la fenêtre n'a pas été créée par window.open () ou contient plusieurs onglets. Consultez le tableau de compatibilité pour plus de détails sur le changement.</p>
+
+<p>Même si vous créez une fenêtre avec <code>window.open()</code> <strong>elle n'est pas redimensionnable par défaut.</strong> Pour rendre la fenêtre redimensionnable, vous devez l'ouvrir avec le paramètre <code>"resizable"</code> .</p>
+
+<pre class="brush: js notranslate">// Créer une fenêtre redimensionnable
+myExternalWindow = window.open("http://myurl.domain", "myWindowName", "resizable");
+
+// Redimensionner la fenêtre à 500 x 500
+myExternalWindow.resizeTo(500, 500);
+
+// Rendre la fenêtre relativement plus petit à 400 x 400
+myExternalWindow.resizeBy(-100, -100);</pre>
+
+<p>La fenêtre que vous créez doit respecter la politique de même origine. Si la fenêtre que vous ouvrez n'est pas dans la même origine que la fenêtre actuelle, vous ne pourrez pas redimensionner ni accéder aux informations sur cette fenêtre / cet onglet.</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('CSSOM View', '#dom-window-resizeby', 'window.resizeBy()') }}</td>
+   <td>{{ Spec2('CSSOM View') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter https://github.com/mdn/browser-compat-data et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.Window.resizeBy")}}</p>
diff --git a/files/fr/web/api/window/screen/index.html b/files/fr/web/api/window/screen/index.html
new file mode 100644
index 0000000000..ff16ac6bc9
--- /dev/null
+++ b/files/fr/web/api/window/screen/index.html
@@ -0,0 +1,55 @@
+---
+title: Window.screen
+slug: Web/API/Window/screen
+tags:
+  - API
+  - CSSOM View
+  - DOM
+  - Fenêtre
+  - Propriété
+  - Vue CSSOM
+  - Écran
+translation_of: Web/API/Window/screen
+---
+<div>{{APIRef("CSSOM View")}}</div>
+
+<div>Retourne une référence à l'objet <code style="font-style: normal; line-height: 1.5;">screen</code> associé à la fenêtre. L'object <code style="font-style: normal; line-height: 1.5;">screen</code>, qui implémente l'interface <span style="line-height: 1.5;">{{domxref("Screen")}}, est un objet spécial servant à examiner les propriétés de l'écran qui affiche la fenêtre courante.</span></div>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>objetEcran</var> = <var>window</var>.screen;
+</pre>
+
+<h2 id="Example" name="Example">Examples</h2>
+
+<pre class="brush:js">if (screen.pixelDepth &lt; 8) {
+  // utiliser la page en colorisation réduite
+} else {
+  // utiliser la page en coolorisation normale
+}
+</pre>
+
+<h2 id="Specification" name="Specification">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('CSSOM View', '#dom-window-screen', 'window.screen')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Window.screen")}}</p>
diff --git a/files/fr/web/api/window/screenx/index.html b/files/fr/web/api/window/screenx/index.html
new file mode 100644
index 0000000000..3a6e7737cb
--- /dev/null
+++ b/files/fr/web/api/window/screenx/index.html
@@ -0,0 +1,101 @@
+---
+title: Window.screenX
+slug: Web/API/Window/screenX
+tags:
+  - API
+  - Propriété
+  - Window
+  - lecture seule
+translation_of: Web/API/Window/screenX
+---
+<div>{{APIRef}}</div>
+
+<p>La propriété  <code><strong>Window.screenX</strong></code> retourne la distance honrizontale, in CSS pixels, of the left border of the user's browser from the left side of the screen.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>lLoc</em> = window.screenX
+</pre>
+
+<ul>
+ <li><em><code>lLoc</code></em> is the number of CSS pixels from the left side the screen.</li>
+</ul>
+
+<h2 id="Specifications" name="Specifications">Specifications</h2>
+
+<table class="standard-table" style="height: 49px; width: 1000px;">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSSOM View', '#dom-window-screenx', 'Window.screenX') }}</td>
+   <td>{{ Spec2('CSSOM View') }}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_avec_les_navigateurs">Compatibilité avec les navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalitée</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support basic</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }} [1]</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalitée</th>
+   <th>Android</th>
+   <th>Chrome pour Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basic</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }} [1]</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Avant Firefox 28, Gecko utilisait les dimensions de l'appareil au lieu des pixels CSS ; dans d'autres mots, it was assuming a value of <code>screenPixelsPerCSSPixel</code> of 1 for any device.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Window.screenY")}}</li>
+</ul>
diff --git a/files/fr/web/api/window/scroll/index.html b/files/fr/web/api/window/scroll/index.html
new file mode 100644
index 0000000000..82075c6ba2
--- /dev/null
+++ b/files/fr/web/api/window/scroll/index.html
@@ -0,0 +1,27 @@
+---
+title: window.scroll
+slug: Web/API/Window/scroll
+translation_of: Web/API/Window/scroll
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Summary" name="Summary">Résumé</h3>
+<p>Fait glisser la fenêtre vers une position particulière du document</p>
+<h3 id="Syntax" name="Syntax">Syntax</h3>
+<pre class="eval">window.scroll(<i>x-coord</i>,<i>y-coord</i>)
+</pre>
+<h3 id="Parameters" name="Parameters">Parameters</h3>
+<ul>
+ <li><code>x-coord</code> est la position horizontale du pixel que vous voulez voir apparaitre en haut à gauche de l’écran.</li>
+ <li><code>y-coord</code> est la position verticale du pixel que vous voulez voir apparaitre en haut à gauche de l’écran.</li>
+</ul>
+<h3 id="Example" name="Example">Example</h3>
+<pre> // Déplace la fenêtre 100px plus bas
+ &lt;button onClick="scroll(0, 100);"&gt;click to scroll down 100 pixels&lt;/button&gt;
+</pre>
+<h3 id="Notes" name="Notes">Notes</h3>
+<p><a href="en/Window.scrollTo">window.scrollTo</a> a un effet identique à cette méthode. Pour se déplacer par pas dans la page, utilisez <a href="en/Window.scrollBy">window.scrollBy</a>. Jetez aussi un œil à <a href="en/Window.scrollByLines">window.scrollByLines</a> et <a href="en/Window.scrollByPages">window.scrollByPages</a>.</p>
+<h3 id="Specification" name="Specification">Specification</h3>
+<p>DOM Level 0. Hors spécification.</p>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "ja": "ja/DOM/window.scroll", "pl": "pl/DOM/window.scroll" } ) }}</p>
diff --git a/files/fr/web/api/window/scrollbars/index.html b/files/fr/web/api/window/scrollbars/index.html
new file mode 100644
index 0000000000..8d563a54bc
--- /dev/null
+++ b/files/fr/web/api/window/scrollbars/index.html
@@ -0,0 +1,75 @@
+---
+title: Window.scrollbars
+slug: Web/API/Window/scrollbars
+tags:
+  - API
+  - HTML DOM
+  - Propriété
+  - Reference
+  - Window
+translation_of: Web/API/Window/scrollbars
+---
+<div>{{APIRef()}}</div>
+
+<p>La propriété <code><strong>Window.scrollbars</strong></code> renvoie l'objet <code>scrollbars</code>, dont la visibilité peut être vérifié.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><em>objRef</em> = window.scrollbars
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'exemple HTML complet suivant montre comment la propriété <code>visible</code> de l'objet scrollbars est utilisée.</p>
+
+<pre class="brush: html notranslate">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;Divers Tests DOM&lt;/title&gt;
+  &lt;script&gt;
+    let visibleScrollbars = window.scrollbars.visible;
+  &lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;p&gt;Divers Tests DOM&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</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', 'browsers.html#dom-window-scrollbars', 'Window.scrollbars')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-window-scrollbars', 'Window.scrollbars')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.Window.scrollbars")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>{{domxref("window.locationbar")}}</li>
+ <li>{{domxref("window.menubar")}}</li>
+ <li>{{domxref("window.personalbar")}}</li>
+ <li>{{domxref("window.statusbar")}}</li>
+ <li>{{domxref("window.toolbar")}}</li>
+</ul>
diff --git a/files/fr/web/api/window/scrollby/index.html b/files/fr/web/api/window/scrollby/index.html
new file mode 100644
index 0000000000..17b80d2ea6
--- /dev/null
+++ b/files/fr/web/api/window/scrollby/index.html
@@ -0,0 +1,58 @@
+---
+title: Window.scrollBy()
+slug: Web/API/Window/scrollBy
+tags:
+  - API
+  - CSSOM View
+  - Méthode
+  - Référence(2)
+translation_of: Web/API/Window/scrollBy
+---
+<p>{{ APIRef() }}</p>
+
+<h2 id="Summary" name="Summary">Description</h2>
+
+<p>Fait défiler le document dans la fenêtre du nombre de pixels passé en paramètre.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="eval">window.scrollBy(<em>X</em>, <em>Y</em>);
+</pre>
+
+<h3 id="Parameters" name="Parameters">Paramètres</h3>
+
+<ul>
+ <li><code>X</code> est le nombre en pixels pour le défilement horizontal.</li>
+ <li><code>Y</code> est le nombre en pixels pour le défilement vertical.</li>
+</ul>
+
+<p>Des coordonnées positives feront défiler à droite et vers le bas de la page. Des coordonnées négatives feront défiler à gauche et vers le haut de la page. </p>
+
+<h2 id="Example" name="Example">Exemples</h2>
+
+<pre class="eval">// fait défiler d'une page
+window.scrollBy(0, window.innerHeight);
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p><a href="/fr/docs/DOM/Window.scrollBy">window.scrollBy</a> fait défiler en fonction d'un nombre précis, alors que <a href="/fr/docs/DOM/Window.scroll">window.scroll</a> fait défiler vers une position absolue dans le document. Voir aussi <a href="/fr/docs/DOM/Window.scrollByLines">window.scrollByLines</a>, <a href="/fr/docs/DOM/Window.scrollByPages">window.scrollByPages</a></p>
+
+<h2 id="Specification" name="Specification">Spécification</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('CSSOM View', '#dom-window-scrollby', 'window.scrollBy()') }}</td>
+   <td>{{ Spec2('CSSOM View') }}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/api/window/scrollbylines/index.html b/files/fr/web/api/window/scrollbylines/index.html
new file mode 100644
index 0000000000..471bae984f
--- /dev/null
+++ b/files/fr/web/api/window/scrollbylines/index.html
@@ -0,0 +1,53 @@
+---
+title: Window.scrollByLines()
+slug: Web/API/Window/scrollByLines
+tags:
+  - API
+  - DOM
+  - DOM_0
+  - Méthode
+  - Non-standard
+  - Window
+translation_of: Web/API/Window/scrollByLines
+---
+<div>{{ ApiRef() }}</div>
+
+<div>
+<p id="comment_text_2">{{Non-standard_header}}</p>
+</div>
+
+<h2 id="Summary" name="Summary">Description</h2>
+
+<p>Fait défiler le document du nombre de lignes spécifié.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox">window.scrollByLines(<var>lignes</var>)
+</pre>
+
+<h2 id="Parameters" name="Parameters">Paramètres</h2>
+
+<ul>
+ <li><code>lignes</code> est le nombre de lignes à faire défiler.</li>
+ <li><code>lignes</code> peut être un entier positif ou négatif.</li>
+</ul>
+
+<h2 id="Example" name="Example">Exemples</h2>
+
+<pre class="brush:html">&lt;!-- Faire défiler le document de 5 lignes vers le bas. --&gt;
+&lt;button onclick="scrollByLines(5);"&gt;5 lignes vers le bas&lt;/button&gt;
+</pre>
+
+<pre class="brush:html">&lt;!-- Faire défiler le document de 5 lignes vers le haut. --&gt;
+&lt;button onclick="scrollByLines(-5);"&gt;5 lignes vers le haut&lt;/button&gt;
+</pre>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<p id="comment_text_2">Ne fait partie d'aucune spécification.</p>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("window.scrollBy")}}, {{domxref("window.scrollByPages")}}</li>
+</ul>
diff --git a/files/fr/web/api/window/scrollbypages/index.html b/files/fr/web/api/window/scrollbypages/index.html
new file mode 100644
index 0000000000..e352ef57e0
--- /dev/null
+++ b/files/fr/web/api/window/scrollbypages/index.html
@@ -0,0 +1,46 @@
+---
+title: Window.scrollByPages()
+slug: Web/API/Window/scrollByPages
+tags:
+  - API
+  - DOM
+  - Gecko
+  - Méthode
+translation_of: Web/API/Window/scrollByPages
+---
+<p>{{ ApiRef() }}{{Non-standard_header}}</p>
+
+<h3 id="Summary" name="Summary">Description</h3>
+
+<p>Fait défiler le document du nombre de pages spécifié.</p>
+
+<h3 id="Syntax" name="Syntax">Syntaxe</h3>
+
+<pre class="eval">window.scrollByPages(<em>pages</em>)
+</pre>
+
+<h3 id="Parameters" name="Parameters">Paramètres</h3>
+
+<ul>
+ <li><code>pages</code> est le nombre de pages à faire défiler.</li>
+ <li><code>pages</code> peut être un entier positif ou négatif.</li>
+</ul>
+
+<h3 id="Example" name="Example">Exemples</h3>
+
+<pre>// fait défiler le document d'une page vers le bas
+window.scrollByPages(1);
+
+// fait défiler le document d'une page vers le haut
+window.scrollByPages(-1);
+</pre>
+
+<h3 id="Notes" name="Notes">Notes</h3>
+
+<p>Voir aussi <a href="/fr/docs/Web/API/Window/scrollByPages" title="en/DOM/window.scrollBy">window.scrollBy</a>, <a href="/fr/docs/Web/API/Window/scrollByPages" title="en/DOM/window.scrollByLines">window.scrollByLines</a>, <a href="/fr/docs/Web/API/Window/scroll" title="en/DOM/window.scroll">window.scroll</a>, <a href="fr/docs/Web/API/Window/scrollTo" title="en/DOM/window.scrollTo">window.scrollTo</a>.</p>
+
+<h3 id="Specification" name="Specification">Spécification</h3>
+
+<p>DOM Niveau 0. Ne fait pas partie de la spécification.</p>
+
+<p>{{ languages( { "ja": "ja/DOM/window.scrollByPages", "pl": "pl/DOM/window.scrollByPages", "zh-cn": "zh-cn/DOM/window.scrollByPages" } ) }}</p>
diff --git a/files/fr/web/api/window/scrollto/index.html b/files/fr/web/api/window/scrollto/index.html
new file mode 100644
index 0000000000..8198308355
--- /dev/null
+++ b/files/fr/web/api/window/scrollto/index.html
@@ -0,0 +1,42 @@
+---
+title: window.scrollTo
+slug: Web/API/Window/scrollTo
+tags:
+  - DOM
+  - DOM_0
+translation_of: Web/API/Window/scrollTo
+---
+<p>{{ ApiRef() }}</p>
+
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+
+<p>Fait défiler le document jusqu'à un jeu de coordonnées particulier.</p>
+
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+
+<pre class="eval">window.scrollTo(<em>coord-x</em>,<em>coord-y</em>);
+</pre>
+
+<h3 id="Param.C3.A8tres" name="Param.C3.A8tres">Paramètres</h3>
+
+<ul>
+ <li><code>coord-x</code> est le pixel le long de l'axe horizontal du document qui doit être affiché en haut à gauche.</li>
+ <li><code>coord-y</code> est le pixel le long de l'axe vertical du document qui doit être affiché en haut à gauche.</li>
+</ul>
+
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+
+<pre>window.scrollTo(0, 1000);
+</pre>
+
+<h3 id="Notes" name="Notes">Notes</h3>
+
+<p>Cette fonction est fonctionnellement identique à <a href="scroll">window.scroll</a>. Pour un défilement relatif, consultez <a href="scrollBy">window.scrollBy</a>, <a href="scrollByLines">window.scrollByLines</a> et <a href="scrollByPages">window.scrollByPages</a>.</p>
+
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+
+<p>{{ DOM0() }}</p>
+
+<div class="noinclude"> </div>
+
+<p>{{ languages( { "en": "en/DOM/window.scrollTo", "ja": "ja/DOM/window.scrollTo", "pl": "pl/DOM/window.scrollTo" } ) }}</p>
diff --git a/files/fr/web/api/window/scrolly/index.html b/files/fr/web/api/window/scrolly/index.html
new file mode 100644
index 0000000000..fcc4947b16
--- /dev/null
+++ b/files/fr/web/api/window/scrolly/index.html
@@ -0,0 +1,125 @@
+---
+title: Window.scrollY
+slug: Web/API/Window/scrollY
+translation_of: Web/API/Window/scrollY
+---
+<div>{{APIRef}}</div>
+
+<h2 id="Summary" name="Summary">Résumé</h2>
+
+<p>La propriété <code><strong>scrollY</strong></code> de l'objet {{domxref("Window")}} est une propriété en lecture seule. Elle retourne le nombre de pixels la page actuellement défilés verticalement. Dans les navigateurs modernes, cette valeur est précise au sous-pixel près. Ainsi, la valeur retournée n'est pas forcement un entier.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox">var y = window.scrollY;</pre>
+
+<ul>
+ <li><code>y</code> est le nombre de pixels verticaux défilés.</li>
+</ul>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush:js">// make sure and go down to the second page
+if (window.scrollY) {
+  window.scroll(0, 0);  // reset the scroll position to the top left of the document.
+}
+
+window.scrollByPages(1);</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Utilisez cette propriété pour être sûre que le document n'as pas été défilé verticalement si vous utilisez les fonctions de défilement tels que {{domxref("window.scrollBy")}}, {{domxref("window.scrollByLines")}}, ou {{domxref("window.scrollByPages")}}.</p>
+
+<p>La propriété <code>pageYOffset</code> est un alias de la propriété <code>scrollY</code>:</p>
+
+<pre>window.pageYOffset == window.scrollY; // toujours vrai</pre>
+
+<p>Pour une compatibilité multi-navigateur, utilisez <code>window.pageYOffset</code> à la place de <code>window.scrollY</code>. <strong>En outre</strong>, les anciennes versions d'Internet Explorer (&lt; 9) ne supportent pas non plus la propriété et doit-être utilisé à l'aide d'autres propriétés qui ne sont pas standards. Un exemple entièrement compatible :</p>
+
+<pre class="brush:js">var supportPageOffset = window.pageXOffset !== undefined;
+var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
+
+var x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;
+var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
+</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commentaire(s)</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSSOM View', '#dom-window-scrolly', 'window.scrollY') }}</td>
+   <td>{{ Spec2('CSSOM View') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>Edge</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile" style="line-height: 19.0909080505371px;">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Voir également</h2>
+
+<ul>
+ <li>{{domxref("window.scrollX")}}</li>
+</ul>
diff --git a/files/fr/web/api/window/sessionstorage/index.html b/files/fr/web/api/window/sessionstorage/index.html
new file mode 100644
index 0000000000..6d6bed8021
--- /dev/null
+++ b/files/fr/web/api/window/sessionstorage/index.html
@@ -0,0 +1,93 @@
+---
+title: Window.sessionStorage
+slug: Web/API/Window/sessionStorage
+tags:
+  - API
+translation_of: Web/API/Window/sessionStorage
+---
+<p>{{APIRef}}</p>
+
+<p>La propriété <code>sessionStorage</code> permet d'utiliser un objet {{domxref("Storage")}} valable pour la session de navigation en cours et pour les pages du même domaine que la page actuelle. L'objet global <code>sessionStorage</code> est similaire à {{domxref("Window.localStorage")}}, à la différence que les données enregistrées dans <code>sessionStorage</code> ont une durée vie limitée et expirent à la fin de la session de navigation actuelle. Une session de navigation dure aussi longtemps que le navigateur est ouvert et s'étend sur plusieurs chargements, rechargements et restaurations de pages. En revanche, une session de navigation n'est valable que pour le contexte de navigation actuel, c'est-à-dire que le fait d'<strong>ouvrir une page dans un nouvel onglet ou dans une nouvelle fenêtre provoquera l'initialisation d'une nouvelle session de navigation</strong>, ce qui diffère du comportement des sessions utilisant des cookies.</p>
+
+<p>Il est à noter que les données stockées dans sessionStorage ou localStorage sont <strong>spécifiques au protocole de la page.</strong></p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js notranslate">// Enregistrer des données dans sessionStorage
+sessionStorage.setItem('clé', 'valeur');
+
+// Récupérer des données depuis sessionStorage
+<code>var data = sessionStorage.getItem('clé');
+
+// Supprimer des données de sessionStorage
+sessionStorage.removeItem('clé');
+
+// Supprimer toutes les données de sessionStorage
+sessionStorage.clear();</code>
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un objet {{domxref("Storage")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'exemple de code suivant accède à l'objet de stockage de session associé au domaine actuel et y ajoute une donnée à l'aide de {{domxref("Storage.setItem()")}}.</p>
+
+<pre class="brush: js notranslate">sessionStorage.setItem('myCat', 'Tom');</pre>
+
+<p>L'exemple suivant sauvegarde automatiquement le contenu d'un champ textuel. Si la page est accidentellement rafraîchie, le contenu du champ est restauré de sorte qu'aucune saisie n'est perdue.</p>
+
+<pre class="brush: js notranslate">// Récupération du champ à enregistrer
+var champ = document.getElementById("champ");
+
+// Vérification de l'existence d'une donnée enregistrée auparavant
+// (ce ne sera le cas que si la page a été rafraîchie)
+if (sessionStorage.getItem("autosave")) {
+  // Restauration du contenu du champ
+  champ.value = sessionStorage.getItem("autosave");
+}
+
+// Écoute des changements de valeur du champ
+champ.addEventListener("change", function() {
+  // Enregistrement de la saisie utilisateur dans le stockage de session
+  sessionStorage.setItem("autosave", champ.value);
+});</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Veuillez vous référer à l'article <a href="/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utilisation de l'API Web Storage</a> pour des exemples plus complets.</p>
+</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("HTML WHATWG", "webstorage.html#dom-sessionstorage", "sessionStorage")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatilibité_des_navigateurs">Compatilibité des navigateurs</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Window.sessionStorage")}}</p>
+
+<p>Chaque navigateur attribue des capacités de stockage limitées pour <code>localStorage</code> et <code>sessionStorage</code>. Vous en trouverez certaines dans ce <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/">récapitulatif de tests des capacités de stockage attribuées en fonction du navigateur</a>.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utilisation de l'API Web Storage</a></li>
+ <li>{{domxref("Window.localStorage")}}</li>
+</ul>
diff --git a/files/fr/web/api/window/showmodaldialog/index.html b/files/fr/web/api/window/showmodaldialog/index.html
new file mode 100644
index 0000000000..20cdd6248a
--- /dev/null
+++ b/files/fr/web/api/window/showmodaldialog/index.html
@@ -0,0 +1,91 @@
+---
+title: window.showModalDialog
+slug: Web/API/Window/showModalDialog
+tags:
+  - Obsolete
+translation_of: Web/API/Window/showModalDialog
+---
+<p>{{ ApiRef() }} {{ Fx_minversion_header(3) }}</p>
+
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+
+<p>Crée et affiche un dialogue modal contenant un document HTML spécifié.</p>
+
+<div class="note">
+<p><strong><em>Cette fonction est obsolète</em></strong>.</p>
+
+<p>Le support a été arrêté avec la sortie de <a href="http://blog.chromium.org/2014/07/disabling-showmodaldialog.html">Chrome 37</a>. Il y possibilité de la laisser active juqu'en Mai 2015 en configurant les paramètres de politique d'entreprise, plus de détails : <a href="http://www.chromium.org/administrators/policy-list-3#EnableDeprecatedWebPlatformFeatures">ici</a>.</p>
+
+<p>Mozilla a annoncé que le support de cette méthode sera supprimé ({{bug(981796)}}). Ce changement ne sera pas effectif avant Firefox 39, planifié pour les alentours de mi-juin 2015. Pour les entreprises, il est possible d'utiliser le build ESR 38 qui supportera la méthode jusqu'en milieu d'année 2016.</p>
+</div>
+
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+
+<pre class="eval"><em>retour</em> = window.showModalDialog(<em>uri</em>[,<em>arguments</em>][,<em>options</em>]);
+</pre>
+
+<p>où</p>
+
+<ul>
+ <li><code>retour</code> est un variant, indiquant la propriété returnValue telle que définie par la fenêtre du document spécifié par <code>uri</code>.</li>
+ <li><code>uri</code> est l'URI du document à afficher dans la boîte de dialogue.</li>
+ <li><code>arguments</code> est un variant optionnel contenant les valeurs à passer à la boîte de dialogue ; celles-ci sont disponibles dans la propriété <code><a href="fr/DOM/window.dialogArguments">window.dialogArguments</a></code> de son objet <code><a href="fr/DOM/window">window</a></code>.</li>
+ <li><code>options</code> est une chaîne optionnelle spécifiant les décorations de la fenêtre de dialogue, avec une ou plusieurs valeurs séparées par des points-virgules :</li>
+</ul>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Syntaxe</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td><code>center: <span class="nowiki">{on | off | yes | no | 1 | 0 }</span></code></td>
+   <td>Si cette valeur est <code>on</code>, <code>yes</code> ou 1, la fenêtre de dialogue est centrée sur le bureau ; autrement elle est cachée. La valeur par défaut est <code>yes</code>.</td>
+  </tr>
+  <tr>
+   <td><code>dialogheight:<em>height</em> </code></td>
+   <td>Spécifie la hauteur de la boîte de dialogue ; par défaut, la taille est spécifiée en pixels.</td>
+  </tr>
+  <tr>
+   <td><code>dialogleft:<em>left</em> </code></td>
+   <td>Spécifie la position horizontale de la boîte de dialogue par rapport au coin supérieur gauche du bureau.</td>
+  </tr>
+  <tr>
+   <td><code>dialogwidth:<em>width</em> </code></td>
+   <td>Spécifie la largeur de la boîte de dialogue ; par défaut, la taille est spécifiée en pixels.</td>
+  </tr>
+  <tr>
+   <td><code>dialogtop:<em>top</em> </code></td>
+   <td>Spécifie la position verticale de la boîte de dialogue par rapport au coin supérieur gauche du bureau.</td>
+  </tr>
+  <tr>
+   <td><code>resizable: <span class="nowiki">{on | off | yes | no | 1 | 0 }</span></code></td>
+   <td>Si cette valeur est <code>on</code>, <code>yes</code> ou 1, la fenêtre de dialogue peut être redimensionnée par l'utilisateur ; autrement sa taille est fixe. La valeur par défaut est <code>no</code>.</td>
+  </tr>
+  <tr>
+   <td><code>scroll: <span class="nowiki">{on | off | yes | no | 1 | 0 }</span></code></td>
+   <td>Si cette valeur est <code>on</code>, <code>yes</code> ou 1, la fenêtre de dialogue a des barres de défilement ; autrement elle n'en a pas. La valeur par défaut est <code>no</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{ Note("Firefox n\'implémente pas les paramètres <code>dialogHide</code>, <code>edge</code>, <code>status</code> ou <code>unadorned</code>.") }}</p>
+
+<h3 id="Compatibilit.C3.A9" name="Compatibilit.C3.A9">Compatibilité</h3>
+
+<p>Introduit par Microsoft Internet Explorer 4. Support ajouté à Firefox dans Firefox 3.</p>
+
+<h3 id="Exemples" name="Exemples">Exemples</h3>
+
+<p><a class="external" href="http://developer.mozilla.org/samples/domref/showModalDialog.html">Essayer <code>showModalDialog()</code></a>.</p>
+
+<h3 id="Notes" name="Notes">Notes</h3>
+
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+
+<p>Microsoft MSDN : <a class="external" href="http://msdn2.microsoft.com/en-us/library/ms536759.aspx">showModalDialog</a></p>
+
+<div class="noinclude"> </div>
+
+<p>{{ languages( { "en": "en/DOM/window.showModalDialog", "ja": "ja/DOM/window.showModalDialog" } ) }}</p>
diff --git a/files/fr/web/api/window/stop/index.html b/files/fr/web/api/window/stop/index.html
new file mode 100644
index 0000000000..f3652b10da
--- /dev/null
+++ b/files/fr/web/api/window/stop/index.html
@@ -0,0 +1,58 @@
+---
+title: Window.stop()
+slug: Web/API/Window/stop
+tags:
+  - API
+  - DOM
+  - HTML DOM
+  - Méthode
+  - Reference
+  - Window
+  - stop
+translation_of: Web/API/Window/stop
+---
+<div> {{APIRef}}</div>
+
+<div><span class="seoSummary"><strong><code>window.stop()</code></strong> arrête le chargment des ressources supplémentaires dans le contexte de navigation actuel, ce qui équivaut au bouton d'arrêt dans le navigateur.</span></div>
+
+<div></div>
+
+<div>En raison de la manière dont les scripts sont exécutés, cette méthode ne peut pas interrompre le chargement de son document parent, mais elle arrêtera ses images, nouvelles fenêtres et autres objets en cours de chargement.</div>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">window.stop()
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush:js notranslate">window.stop();
+</pre>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécifications</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','browsers.html#dom-window-stop','Window.stop()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-window-stop', 'Window.stop')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.Window.stop")}}</p>
diff --git a/files/fr/web/api/window/storage_event/index.html b/files/fr/web/api/window/storage_event/index.html
new file mode 100644
index 0000000000..49152ebc7d
--- /dev/null
+++ b/files/fr/web/api/window/storage_event/index.html
@@ -0,0 +1,83 @@
+---
+title: 'Window: storage event'
+slug: Web/API/Window/storage_event
+tags:
+  - API
+  - Evènement
+  - Reference
+  - Stockage
+  - Stockage Web
+  - Window
+translation_of: Web/API/Window/storage_event
+---
+<div>{{APIRef}}</div>
+
+<p>L'événement <strong><code>storage</code></strong> de l'interface {{domxref("Window")}} se déclenche lorsqu'une de stockage (<code>localStorage</code>) a été modifiée dans le contexte d'un autre document.</p>
+
+<table class="properties">
+ <thead>
+ </thead>
+ <tbody>
+  <tr>
+   <th>Bulles</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th>Annulable</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th>Interface</th>
+   <td>{{domxref("StorageEvent")}}</td>
+  </tr>
+  <tr>
+   <th>Propriété de gestionnaire d'événements</th>
+   <td>{{domxref("WindowEventHandlers.onstorage", "onstorage")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Consignez l'élément <code>sampleList</code> sur la console lorsque l'événement <code>storage</code> se déclenche :</p>
+
+<pre class="brush: js notranslate">window.addEventListener('storage', () =&gt; {
+  // Lorsque le stockage local change, vider la liste sur
+  // la console.
+  console.log(JSON.parse(window.localStorage.getItem('sampleList')));
+});</pre>
+
+<p>La même action peut être réalisée ) l'aide de la propriété du gestionnaire d'événements <code><a href="/en-US/docs/Web/API/WindowEventHandlers/onstorage">onstorage</a></code> :</p>
+
+<pre class="brush: js notranslate">window.onstorage = () =&gt; {
+  // Lorsque le stockage local change, vider la liste dans
+  // la console.
+  console.log(JSON.parse(window.localStorage.getItem('sampleList')));
+};
+</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>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'indices.html#event-storage', 'storage')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Window.storage_event")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Storage_API">Web Storage API</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></li>
+</ul>
diff --git a/files/fr/web/api/window/top/index.html b/files/fr/web/api/window/top/index.html
new file mode 100644
index 0000000000..6ccc92f659
--- /dev/null
+++ b/files/fr/web/api/window/top/index.html
@@ -0,0 +1,56 @@
+---
+title: Window.top
+slug: Web/API/Window/top
+tags:
+  - API
+  - HTML DOM
+  - NeedsExample
+  - Propriété
+  - Reference
+  - Window
+translation_of: Web/API/Window/top
+---
+<div>{{APIRef}}</div>
+
+<p>Renvoie une référence à la fenêtre la plus haute dans la hiérarchie des fenêtres</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">var <var>topWindow</var> = window.top;
+</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Là où la propriété {{domxref("window.parent")}} renvoie le parent immédiat de la fenêtre courante, <code>window.top</code> renvoie la fenêtre la plus haute dans la hiérarchie des objets de fenêtre.</p>
+
+<p>Cette propriété est particulièrement utile lorsque vous avez affaire à une fenêtre qui se trouve dans une subframe d'un ou de plusieurs parents, et que vous souhaitez accéder au jeu de frameset de niveau supérieur.</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">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'browsers.html#dom-top', 'window.top')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-top', 'window.top')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Spécification initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.Window.top")}}</p>
diff --git a/files/fr/web/api/window/url/index.html b/files/fr/web/api/window/url/index.html
new file mode 100644
index 0000000000..fa84a12f6d
--- /dev/null
+++ b/files/fr/web/api/window/url/index.html
@@ -0,0 +1,94 @@
+---
+title: Window.URL
+slug: Web/API/Window/URL
+translation_of: Web/API/URL
+---
+<p>{{ApiRef("Window")}}{{SeeCompatTable}}</p>
+
+<p>La propriété <strong><code>Window.URL</code></strong> retourne un objet qui fournit les méthodes statiques utilisées pour créer et gérer les objets URLs. On peut aussi l'appeler comme uns constructeur pour instancier des objets {{domxref("URL")}}.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p>Utilisation de la méthode statique:</p>
+
+<pre class="syntaxbox"><code><var>img</var>.src = URL.{{domxref("URL.createObjectURL", "createObjectURL")}}(<var>blob</var>);</code></pre>
+
+<p>Utilisation d'un objet instancié:</p>
+
+<pre class="syntaxbox"><code>var <var>url</var> = new {{domxref("URL.URL", "URL")}}("../cats/", "https://www.example.com/dogs/");</code></pre>
+
+<h2 id="Specification">Specification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('URL', '#dom-url', 'URL')}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</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>8.0<sup>[2]</sup></td>
+   <td>{{CompatGeckoDesktop("2.0")}}<sup>[1]</sup><br>
+    {{CompatGeckoDesktop("19.0")}}</td>
+   <td>10.0</td>
+   <td>15.0<sup>[2]</sup></td>
+   <td>6.0<sup>[2]</sup><br>
+    7.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}<sup>[2]</sup></td>
+   <td>{{CompatGeckoMobile("14.0")}}<sup>[1]</sup><br>
+    {{CompatGeckoMobile("19.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>15.0<sup>[2]</sup></td>
+   <td>6.0<sup>[2]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] From Gecko 2 (Firefox 4) to Gecko 18 included, Gecko returned an object with the non-standard <code>nsIDOMMozURLProperty</code> internal type. In practice, this didn't make any difference.</p>
+
+<p>[2] Implemented under the non-standard name <code>webkitURL</code>.</p>
diff --git a/files/fr/web/api/window/vrdisplayconnect_event/index.html b/files/fr/web/api/window/vrdisplayconnect_event/index.html
new file mode 100644
index 0000000000..dab575facf
--- /dev/null
+++ b/files/fr/web/api/window/vrdisplayconnect_event/index.html
@@ -0,0 +1,83 @@
+---
+title: 'Window: vrdisplayconnect event'
+slug: Web/API/Window/vrdisplayconnect_event
+tags:
+  - Evènement
+  - Reference
+  - WebVR
+  - onvrdisplayconnect
+  - vrdisplayconnect
+translation_of: Web/API/Window/vrdisplayconnect_event
+---
+<div>{{APIRef("Window")}}</div>
+
+<div>
+<p>L'événement <strong><code>vrdisplayconnect</code></strong> de l'<a href="/en-US/docs/Web/API/WebVR_API">API WebVR</a> est déclenché lorsqu'un écran VR compatible est connecté à l'ordinateur.</p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Bulles</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">Annulable</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("VRDisplayEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Propriété de gestionnaire d'événements</th>
+   <td><code><a href="/en-US/docs/Web/API/Window/onvrdisplayconnect">onvrdisplayconnect</a></code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Vous pouvez utiliser l'événement <code>vrdisplayconnect</code> dans une méthode <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener</a></code> :</p>
+
+<pre class="brush: js notranslate">window.addEventListener('vrdisplayconnect', function() {
+  info.textContent = 'Affichage connecté.';
+  reportDisplays();
+});</pre>
+
+<p>Ou utilisez la propriété du gestionnaire d'événements <code><a href="/en-US/docs/Web/API/Window/onvrdisplayconnect">onvrdisplayconnect</a></code> :</p>
+
+<pre class="brush: js notranslate">window.onvrdisplayconnect = function() {
+  info.textContent = 'Affichage connecté.';
+  reportDisplays();
+};</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">Commentair</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebVR 1.1', '#dom-window-onvrdisplayconnect', 'vrdisplayconnect')}}</td>
+   <td>{{Spec2('WebVR 1.1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.Window.vrdisplayconnect_event")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a></li>
+ <li><a href="http://mozvr.com/">MozVr.com</a> — démos, téléchargements et autres ressources de l'équipe Mozilla VR.</li>
+</ul>
diff --git a/files/fr/web/api/window/vrdisplaydisconnect_event/index.html b/files/fr/web/api/window/vrdisplaydisconnect_event/index.html
new file mode 100644
index 0000000000..74b66bc520
--- /dev/null
+++ b/files/fr/web/api/window/vrdisplaydisconnect_event/index.html
@@ -0,0 +1,83 @@
+---
+title: 'Window: vrdisplaydisconnect event'
+slug: Web/API/Window/vrdisplaydisconnect_event
+tags:
+  - Evènement
+  - Reference
+  - WebVR
+  - onvrdisplaydisconnect
+  - vrdisplaydisconnect
+translation_of: Web/API/Window/vrdisplaydisconnect_event
+---
+<div>{{APIRef("Window")}}</div>
+
+<div>
+<p>L'événement <strong><code>vrdisplaydisconnect</code></strong> de l'<a href="/en-US/docs/Web/API/WebVR_API">API WebVR</a> est déclenché lorsqu'un écran VR compatible est déconnecté de l'ordinateur.</p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Bulles</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">Annulable</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("VRDisplayEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Propriété de gestionnaire d'événements</th>
+   <td><code><a href="/en-US/docs/Web/API/Window/onvrdisplaydisconnect">onvrdisplaydisconnect</a></code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Vous pouvez utiliser l'événement <code>vrdisplaydisconnect</code> dans une méthode <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener</a></code> :</p>
+
+<pre class="brush: js notranslate">window.addEventListener('vrdisplaydisconnect', function() {
+  info.textContent = 'Affichage déconnecté';
+  reportDisplays();
+});</pre>
+
+<p>Ou utilisez la propriété du gestionnaire d'événements <code><a href="/en-US/docs/Web/API/Window/onvrdisplaydisconnect">onvrdisplaydisconnect</a></code> :</p>
+
+<pre class="brush: js notranslate">window.onvrdisplaydisconnect = function() {
+  info.textContent = 'Affichage déconnecté';
+  reportDisplays();
+);</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">Commentair</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebVR 1.1', '#dom-window-onvrdisplaydisconnect', 'vrdisplaydisconnect')}}</td>
+   <td>{{Spec2('WebVR 1.1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.Window.vrdisplaydisconnect_event")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a></li>
+ <li><a href="http://mozvr.com/">MozVr.com</a> — démos, téléchargements et autres ressources de l'équipe Mozilla VR.</li>
+</ul>
diff --git a/files/fr/web/api/window/vrdisplaypresentchange_event/index.html b/files/fr/web/api/window/vrdisplaypresentchange_event/index.html
new file mode 100644
index 0000000000..d1acc663fd
--- /dev/null
+++ b/files/fr/web/api/window/vrdisplaypresentchange_event/index.html
@@ -0,0 +1,91 @@
+---
+title: 'Window: vrdisplaypresentchange event'
+slug: Web/API/Window/vrdisplaypresentchange_event
+tags:
+  - Evènement
+  - Reference
+  - WebVR
+  - onvrdisplaypresentchange
+  - vrdisplaypresentchange
+translation_of: Web/API/Window/vrdisplaypresentchange_event
+---
+<div>{{APIRef("Window")}}</div>
+
+<div>
+<p>L'événement <strong><code>vrdisplaypresentchange</code></strong> de l'<a href="/en-US/docs/Web/API/WebVR_API">API WebVR</a> est déclenché lorsque l'état de présentation d'un affichage VR change — c'est à dire passe de la présentation à la non présentation, ou vice versa.</p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Bulles</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">Annulable</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("VRDisplayEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Propriété de gestionnaire d'événements</th>
+   <td><code><a href="/en-US/docs/Web/API/Window/onvrdisplaypresentchange">onvrdisplaypresentchange</a></code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Vous pouvez utiliser l'événement <code>vrdisplaypresentchange</code> dans une méthode <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener</a></code> :</p>
+
+<pre class="brush: js notranslate">window.addEventListener('vrdisplaypresentchange', function() {
+  if(vrDisplay.isPresenting) {
+    info.textContent = "L'affichage a commencé à présenter.";
+  } else {
+    info.textContent = "L'affichage a cessé de se présenter.";
+  }
+  reportDisplays();
+});</pre>
+
+<p>Ou utilisez la propriété de gestionnaire d'événements <code><a href="/en-US/docs/Web/API/Window/onvrdisplaypresentchange">onvrdisplaypresentchange</a></code> :</p>
+
+<pre class="brush: js notranslate">window.onvrdisplaypresentchange = function() {
+  if(vrDisplay.isPresenting) {
+    info.textContent = "L'affichage a commencé à présenter.";
+  } else {
+    info.textContent = "L'affichage a cessé de se présenter.";
+  }
+  reportDisplays();
+};</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('WebVR 1.1', '#dom-window-onvrdisplaypresentchange', 'vrdisplaypresentchange')}}</td>
+   <td>{{Spec2('WebVR 1.1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.Window.vrdisplaypresentchange_event")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a></li>
+ <li><a href="http://mozvr.com/">MozVr.com</a> — démos, téléchargements et autres ressources de l'équipe Mozilla VR.</li>
+</ul>
diff --git a/files/fr/web/api/windowbase64/atob/index.html b/files/fr/web/api/windowbase64/atob/index.html
new file mode 100644
index 0000000000..b04c255040
--- /dev/null
+++ b/files/fr/web/api/windowbase64/atob/index.html
@@ -0,0 +1,132 @@
+---
+title: window.atob
+slug: Web/API/WindowBase64/atob
+tags:
+  - API
+  - DOM
+  - Reference
+  - WindowOrWorkerGlobalScope
+  - atob
+translation_of: 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>{{CompatibilityTable}}</p>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support de base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1)}}<sup>[1]</sup><br>
+    {{CompatGeckoDesktop(27)}}<sup>[2]</sup><br>
+    {{CompatGeckoDesktop(52)}}<sup>[3]</sup></td>
+   <td>10</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1)}}<br>
+    {{CompatGeckoDesktop(52)}}<sup>[3]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>[1] <code>atob()</code> est aussi disponible pour les composants XPCOM implémentés en JavaScript, même si <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window">window</a></code> n'est pas l'objet global dans les composants.</p>
+
+<p>[2] A partir de <a href="https://developer.mozilla.org/en-US/Firefox/Releases/27/Site_Compatibility">Firefox 27</a>, <code>atob()</code> ignore tous les caractères espace dans l'argument pour se conformer à la spéc HTML5 la plus récente (voir {{bug(711180)}}).</p>
+
+<p>[3] <code>atob()</code> maintenant définie dans le mixin {{domxref("WindowOrWorkerGlobalScope")}}.</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/windowbase64/btoa/index.html b/files/fr/web/api/windowbase64/btoa/index.html
new file mode 100644
index 0000000000..7d993f35fa
--- /dev/null
+++ b/files/fr/web/api/windowbase64/btoa/index.html
@@ -0,0 +1,174 @@
+---
+title: WindowBase64.btoa()
+slug: Web/API/WindowBase64/btoa
+tags:
+  - API
+  - DOM
+  - Méthode
+  - Reference
+  - Web
+  - WindowOrWorkerGlobalScope
+  - btoa
+  - chaînes
+  - données
+translation_of: 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>{{CompatibilityTable}}</p>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</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>Support de base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1)}}<sup>[1]</sup><br>
+    {{CompatGeckoDesktop(52)}}<sup>[2]</sup></td>
+   <td>10</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1)}}<br>
+    {{CompatGeckoMobile(52)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>[1] <code>btoa()</code> est aussi pour les composants XPCOM implémentés en JavaScript, même si <code><a href="https://developer.mozilla.org/en-US/docs/DOM/window">window</a></code> n'est pas l'objet global dans les composants.</p>
+
+<p>[2] <code>btoa()</code> maintenant défini dans le mixin {{domxref("WindowOrWorkerGlobalScope")}}.</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/windowbase64/décoder_encoder_en_base64/index.html b/files/fr/web/api/windowbase64/décoder_encoder_en_base64/index.html
new file mode 100644
index 0000000000..ae762bf333
--- /dev/null
+++ b/files/fr/web/api/windowbase64/décoder_encoder_en_base64/index.html
@@ -0,0 +1,343 @@
+---
+title: Décoder et encoder en base64
+slug: Web/API/WindowBase64/Décoder_encoder_en_base64
+tags:
+  - Advanced
+  - Base64
+  - JavaScript
+  - Reference
+  - Typed Arrays
+  - URI
+  - URL
+  - Unicode Problem
+  - atob()
+  - btoa()
+translation_of: Glossary/Base64
+---
+<p><strong>Base64</strong> est un groupe de schéma pour encoder des données binaires sous forme d'un texte au format ASCII grâce à la représentation de ces données en base 64. Le terme base64 vient à l'origine de l'encodage utilisé pour transférer certains <a href="https://fr.wikipedia.org/wiki/Multipurpose_Internet_Mail_Extensions#Content-Transfer-Encoding">contenus MIME</a>.</p>
+
+<p>Les schémas d'encodage en base64 sont principalement utilisés lorsqu'il s'agit d'enregistrer ou d'envoyer des données binaires via un media qui a été conçu pour gérer du texte. Cette transformation permet de conserver l'intégrité et la véracité des données envoyées lors du transport. Base64 est utilisé par plusieurs applications, notamment celles qui gèrent les courriels avec <a href="https://fr.wikipedia.org/wiki/MIME">MIME</a>, et le stockage de données complexes en <a href="/fr/docs/XML">XML</a>.</p>
+
+<p>Pour JavaScript, il existe deux fonctions utilisées pour encoder et décoder des chaînes en base64 :</p>
+
+<ul>
+ <li>{{domxref("window.atob","atob()")}}</li>
+ <li>{{domxref("window.btoa","btoa()")}}</li>
+</ul>
+
+<p>La fonction <code>atob()</code> permet de décoder des données encodées en une chaîne de caractères en base 64. La fonction <code>btoa()</code>, quant à elle, permet de créer une chaîne ASCII en base64 à partir d'une « chaîne » de données binaires.</p>
+
+<p>Les deux méthodes, <code>atob()</code> et <code>btoa()</code>, fonctionnent sur des chaînes de caractères. Si vous voulez utiliser des <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/ArrayBuffer"><code>ArrayBuffers</code></a>, lisez <a href="#Solution_.232_.E2.80.93_rewriting_atob%28%29_and_btoa%28%29_using_TypedArrays_and_UTF-8">ce paragraphe</a>.</p>
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h2 class="Documentation" id="Documentation" name="Documentation">Documentation</h2>
+
+    <dl>
+     <dt><a href="/fr/docs/Web/HTTP/data_URIs" title="https://developer.mozilla.org/en-US/docs/data_URIs">URIs de données</a></dt>
+     <dd><small>Les URIs de données, définies par la <a class="external" href="http://tools.ietf.org/html/rfc2397" title="http://tools.ietf.org/html/rfc2397">RFC 2397</a>, permettent aux créateurs de contenus d'intégrer des fichiers en ligne dans des documents.</small></dd>
+     <dt><a href="https://fr.wikipedia.org/wiki/Base_64" title="https://fr.wikipedia.org/wiki/Base_64">Base64</a></dt>
+     <dd><small>Article Wikipédia sur l'encodage en base64.</small></dd>
+     <dt>{{domxref("window.atob","atob()")}}</dt>
+     <dd><small>Méthode permettant de décoder une chaîne de donnée qui a été encodée en base64.</small></dd>
+     <dt>{{domxref("window.btoa","btoa()")}}</dt>
+     <dd><small>Méthode permettant de créer une chaîne ASCII en base64 à partir d'une « chaîne » de données binaires.</small></dd>
+     <dt><a href="#The_.22Unicode_Problem.22">Le « problème Unicode »</a></dt>
+     <dd><small>Pour la plupart des navigateurs, l'utilisation de <code>btoa()</code> sur une chaîne de caractères Unicode entraînera une exception <code>Character Out Of Range</code>. Ce paragraphe indique quelques solutions.</small></dd>
+     <dt><a href="/fr/docs/URIScheme" title="/fr/docs/URIScheme">URIScheme</a></dt>
+     <dd><small>Une liste de schémas URI supportés par Mozilla</small>.</dd>
+     <dt><a href="/fr/Add-ons/Code_snippets/StringView" title="/en-US/Add-ons/Code_snippets/StringView"><code>StringView</code></a></dt>
+     <dd>Dans cet article, nous publions une bibliothèque dont les buts sont :
+     <ul>
+      <li>de créer une interface pour les chaînes de caractères à la façon du langage <a class="external" href="https://fr.wikipedia.org/wiki/C_%28langage%29" title="https://fr.wikipedia.org/wiki/C_%28langage%29">C</a> (i.e. un tableau de code de caractères —<a href="/fr/docs/Web/API/ArrayBufferView" title="/fr/docs/Web/API/ArrayBufferView"> <code>ArrayBufferView</code></a> en JavaScript) basée sur l'interface JavaScript <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/ArrayBuffer" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/ArrayBuffer"><code>ArrayBuffer</code></a>,</li>
+      <li>de créer un ensemble de méthodes pour ces objets qui fonctionnent <strong>sur des tableaux de nombres</strong> plutôt que sur chaînes de caractères JavaScript immuables,</li>
+      <li>de travailler avec d'autres encodages Unicode, y compris ceux différent d'UTF-16 qui est l'encodage par défaut de JavaScript pour les <a href="/fr/docs/Web/API/DOMString" title="/fr/docs/Web/API/DOMString"><code>DOMString</code></a>.</li>
+     </ul>
+     </dd>
+    </dl>
+
+    <p><span class="alllinks"><a href="/fr/docs/tag/Base64">Voir toutes les pages sur base64...</a></span></p>
+   </td>
+   <td>
+    <h2 class="Tools" id="Tools" name="Tools">Outils</h2>
+
+    <ul>
+     <li><a href="#Solution_.232_.E2.80.93_rewriting_atob()_and_btoa()_using_TypedArrays_and_UTF-8">Réécrire <code>atob()</code>et <code>btoa()</code> en utilisant des <code>TypedArray</code>s et l'UTF-8</a></li>
+     <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code> – une représentation des chaînes de caractères semblable à celle du langage C, basée sur les tableaux typés.</a></li>
+    </ul>
+
+    <p><span class="alllinks"><a href="/fr/docs/tag/Base64">Voir toutes les pages sur base64...</a></span></p>
+
+    <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Sujets connexes</h2>
+
+    <ul>
+     <li><a href="/fr/docs/Web/JavaScript/Typed_arrays/ArrayBuffer"><code>ArrayBuffer</code></a></li>
+     <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Les tableaux typés</a></li>
+     <li><a href="/fr/docs/Web/API/ArrayBufferView">ArrayBufferView</a></li>
+     <li><a href="/fr/docs/Web/API/Uint8Array"><code>Uint8Array</code></a></li>
+     <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code> – une représentation des chaînes de caractères semblable à celle du langage C, basée sur les tableaux typés</a></li>
+     <li><a href="/fr/docs/Web/API/DOMString" title="/fr/docs/Web/API/DOMString"><code>DOMString</code></a></li>
+     <li><a href="/fr/docs/Glossary/URI" title="/fr/docs/Glossary/URI"><code>URI</code></a></li>
+     <li><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/encodeURI" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/encodeURI"><code>encodeURI()</code></a></li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Le_«_problème_Unicode_»">Le « problème Unicode »</h2>
+
+<p>Les objets <a href="/en-US/docs/Web/API/DOMString" title="/en-US/docs/Web/API/DOMString"><code>DOMString</code></a> sont des chaînes de caractères encodées sur 16 bits. Pour la plupart des navigateurs, lorsqu'on appelle <code>window.btoa</code> sur une chaîne Unicode, cela entraîne une exception <code>Character Out Of Range</code> si la représentation du caractère dépasse les 8 bits ASCII. Deux méthodes existent pour résoudre le problème :</p>
+
+<ul>
+ <li>échapper la chaîne dans son intégralité puis l'encoder,</li>
+ <li>convertir la chaîne UTF-16 <a href="/en-US/docs/Web/API/DOMString" title="/en-US/docs/Web/API/DOMString"><code>DOMString</code></a> en un tableau UTF-8 de caractères puis l'encoder.</li>
+</ul>
+
+<p>Voici ces deux méthodes :</p>
+
+<h3 id="Première_solution_–_échapper_la_chaîne_avant_de_lencoder">Première solution  – échapper la chaîne avant de l'encoder</h3>
+
+<pre class="brush:js notranslate">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'); // "4pyTIMOgIGxhIG1vZGU="
+b64_to_utf8('4pyTIMOgIGxhIG1vZGU='); // "✓ à la mode"</pre>
+
+<p>Cette solution a été proposée dans un article de <a href="http://ecmanaut.blogspot.com/2006/07/encoding-decoding-utf8-in-javascript.html">Johan Sundström</a>.</p>
+
+<h3 id="Seconde_solution_–_réécrire_atob_et_btoa_en_utilisant_des_TypedArray_avec_de_lUTF-8">Seconde solution – réécrire <code>atob()</code> et <code>btoa()</code> en utilisant des <code>TypedArray</code> avec de l'UTF-8</h3>
+
+<div class="note"><strong>Note :</strong> Le code suivant peut également être utilisé pour obtenir un <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/ArrayBuffer">ArrayBuffer</a> depuis une chaîne en base 64 (et vice-versa, voir ci-après). <strong>Pour un article concernant une bibliothèque complète sur les tableaux typés, voir <a href="/fr/Add-ons/Code_snippets/StringView" title="/fr/Add-ons/Code_snippets/StringView">cet article</a></strong>.</div>
+
+<pre class="brush: js notranslate">"use strict";
+
+/*\
+|*|
+|*|  utilitairezs de manipulations de chaînes base 64 / binaires / UTF-8
+|*|
+|*|  https://developer.mozilla.org/fr/docs/Décoder_encoder_en_base64
+|*|
+\*/
+
+/* Décoder un tableau d'octets depuis une chaîne en base64 */
+
+function b64ToUint6 (nChr) {
+
+  return nChr &gt; 64 &amp;&amp; nChr &lt; 91 ?
+      nChr - 65
+    : nChr &gt; 96 &amp;&amp; nChr &lt; 123 ?
+      nChr - 71
+    : nChr &gt; 47 &amp;&amp; nChr &lt; 58 ?
+      nChr + 4
+    : nChr === 43 ?
+      62
+    : nChr === 47 ?
+      63
+    :
+      0;
+
+}
+
+function base64DecToArr (sBase64, nBlocksSize) {
+
+  var
+    sB64Enc = sBase64.replace(/[^A-Za-z0-9\+\/]/g, ""), nInLen = sB64Enc.length,
+    nOutLen = nBlocksSize ? Math.ceil((nInLen * 3 + 1 &gt;&gt; 2) / nBlocksSize) * nBlocksSize : nInLen * 3 + 1 &gt;&gt; 2, taBytes = new Uint8Array(nOutLen);
+
+  for (var nMod3, nMod4, nUint24 = 0, nOutIdx = 0, nInIdx = 0; nInIdx &lt; nInLen; nInIdx++) {
+    nMod4 = nInIdx &amp; 3;
+    nUint24 |= b64ToUint6(sB64Enc.charCodeAt(nInIdx)) &lt;&lt; 18 - 6 * nMod4;
+    if (nMod4 === 3 || nInLen - nInIdx === 1) {
+      for (nMod3 = 0; nMod3 &lt; 3 &amp;&amp; nOutIdx &lt; nOutLen; nMod3++, nOutIdx++) {
+        taBytes[nOutIdx] = nUint24 &gt;&gt;&gt; (16 &gt;&gt;&gt; nMod3 &amp; 24) &amp; 255;
+      }
+      nUint24 = 0;
+
+    }
+  }
+
+  return taBytes;
+}
+
+/* encodage d'un tableau en une chaîne en base64 */
+
+function uint6ToB64 (nUint6) {
+
+  return nUint6 &lt; 26 ?
+      nUint6 + 65
+    : nUint6 &lt; 52 ?
+      nUint6 + 71
+    : nUint6 &lt; 62 ?
+      nUint6 - 4
+    : nUint6 === 62 ?
+      43
+    : nUint6 === 63 ?
+      47
+    :
+      65;
+
+}
+
+function base64EncArr (aBytes) {
+
+  var nMod3 = 2, sB64Enc = "";
+
+  for (var nLen = aBytes.length, nUint24 = 0, nIdx = 0; nIdx &lt; nLen; nIdx++) {
+    nMod3 = nIdx % 3;
+    if (nIdx &gt; 0 &amp;&amp; (nIdx * 4 / 3) % 76 === 0) { sB64Enc += "\r\n"; }
+    nUint24 |= aBytes[nIdx] &lt;&lt; (16 &gt;&gt;&gt; nMod3 &amp; 24);
+    if (nMod3 === 2 || aBytes.length - nIdx === 1) {
+      sB64Enc += String.fromCharCode(uint6ToB64(nUint24 &gt;&gt;&gt; 18 &amp; 63), uint6ToB64(nUint24 &gt;&gt;&gt; 12 &amp; 63), uint6ToB64(nUint24 &gt;&gt;&gt; 6 &amp; 63), uint6ToB64(nUint24 &amp; 63));
+      nUint24 = 0;
+    }
+  }
+
+  return sB64Enc.substr(0, sB64Enc.length - 2 + nMod3) + (nMod3 === 2 ? '' : nMod3 === 1 ? '=' : '==');
+
+}
+
+/* Tableau UTF-8 en DOMString et vice versa */
+
+function UTF8ArrToStr (aBytes) {
+
+  var sView = "";
+
+  for (var nPart, nLen = aBytes.length, nIdx = 0; nIdx &lt; nLen; nIdx++) {
+    nPart = aBytes[nIdx];
+    sView += String.fromCharCode(
+      nPart &gt; 251 &amp;&amp; nPart &lt; 254 &amp;&amp; nIdx + 5 &lt; nLen ? /* six bytes */
+        /* (nPart - 252 &lt;&lt; 32) n'est pas possible pour ECMAScript donc, on utilise un contournement... : */
+        (nPart - 252) * 1073741824 + (aBytes[++nIdx] - 128 &lt;&lt; 24) + (aBytes[++nIdx] - 128 &lt;&lt; 18) + (aBytes[++nIdx] - 128 &lt;&lt; 12) + (aBytes[++nIdx] - 128 &lt;&lt; 6) + aBytes[++nIdx] - 128
+      : nPart &gt; 247 &amp;&amp; nPart &lt; 252 &amp;&amp; nIdx + 4 &lt; nLen ? /* five bytes */
+        (nPart - 248 &lt;&lt; 24) + (aBytes[++nIdx] - 128 &lt;&lt; 18) + (aBytes[++nIdx] - 128 &lt;&lt; 12) + (aBytes[++nIdx] - 128 &lt;&lt; 6) + aBytes[++nIdx] - 128
+      : nPart &gt; 239 &amp;&amp; nPart &lt; 248 &amp;&amp; nIdx + 3 &lt; nLen ? /* four bytes */
+        (nPart - 240 &lt;&lt; 18) + (aBytes[++nIdx] - 128 &lt;&lt; 12) + (aBytes[++nIdx] - 128 &lt;&lt; 6) + aBytes[++nIdx] - 128
+      : nPart &gt; 223 &amp;&amp; nPart &lt; 240 &amp;&amp; nIdx + 2 &lt; nLen ? /* three bytes */
+        (nPart - 224 &lt;&lt; 12) + (aBytes[++nIdx] - 128 &lt;&lt; 6) + aBytes[++nIdx] - 128
+      : nPart &gt; 191 &amp;&amp; nPart &lt; 224 &amp;&amp; nIdx + 1 &lt; nLen ? /* two bytes */
+        (nPart - 192 &lt;&lt; 6) + aBytes[++nIdx] - 128
+      : /* nPart &lt; 127 ? */ /* one byte */
+        nPart
+    );
+  }
+
+  return sView;
+
+}
+
+function strToUTF8Arr (sDOMStr) {
+
+  var aBytes, nChr, nStrLen = sDOMStr.length, nArrLen = 0;
+
+  /* mapping... */
+
+  for (var nMapIdx = 0; nMapIdx &lt; nStrLen; nMapIdx++) {
+    nChr = sDOMStr.charCodeAt(nMapIdx);
+    nArrLen += nChr &lt; 0x80 ? 1 : nChr &lt; 0x800 ? 2 : nChr &lt; 0x10000 ? 3 : nChr &lt; 0x200000 ? 4 : nChr &lt; 0x4000000 ? 5 : 6;
+  }
+
+  aBytes = new Uint8Array(nArrLen);
+
+  /* transcription... */
+
+  for (var nIdx = 0, nChrIdx = 0; nIdx &lt; nArrLen; nChrIdx++) {
+    nChr = sDOMStr.charCodeAt(nChrIdx);
+    if (nChr &lt; 128) {
+      /* one byte */
+      aBytes[nIdx++] = nChr;
+    } else if (nChr &lt; 0x800) {
+      /* two bytes */
+      aBytes[nIdx++] = 192 + (nChr &gt;&gt;&gt; 6);
+      aBytes[nIdx++] = 128 + (nChr &amp; 63);
+    } else if (nChr &lt; 0x10000) {
+      /* three bytes */
+      aBytes[nIdx++] = 224 + (nChr &gt;&gt;&gt; 12);
+      aBytes[nIdx++] = 128 + (nChr &gt;&gt;&gt; 6 &amp; 63);
+      aBytes[nIdx++] = 128 + (nChr &amp; 63);
+    } else if (nChr &lt; 0x200000) {
+      /* four bytes */
+      aBytes[nIdx++] = 240 + (nChr &gt;&gt;&gt; 18);
+      aBytes[nIdx++] = 128 + (nChr &gt;&gt;&gt; 12 &amp; 63);
+      aBytes[nIdx++] = 128 + (nChr &gt;&gt;&gt; 6 &amp; 63);
+      aBytes[nIdx++] = 128 + (nChr &amp; 63);
+    } else if (nChr &lt; 0x4000000) {
+      /* five bytes */
+      aBytes[nIdx++] = 248 + (nChr &gt;&gt;&gt; 24);
+      aBytes[nIdx++] = 128 + (nChr &gt;&gt;&gt; 18 &amp; 63);
+      aBytes[nIdx++] = 128 + (nChr &gt;&gt;&gt; 12 &amp; 63);
+      aBytes[nIdx++] = 128 + (nChr &gt;&gt;&gt; 6 &amp; 63);
+      aBytes[nIdx++] = 128 + (nChr &amp; 63);
+    } else /* if (nChr &lt;= 0x7fffffff) */ {
+      /* six bytes */
+      aBytes[nIdx++] = 252 + /* (nChr &gt;&gt;&gt; 32) is not possible in ECMAScript! So...: */ (nChr / 1073741824);
+      aBytes[nIdx++] = 128 + (nChr &gt;&gt;&gt; 24 &amp; 63);
+      aBytes[nIdx++] = 128 + (nChr &gt;&gt;&gt; 18 &amp; 63);
+      aBytes[nIdx++] = 128 + (nChr &gt;&gt;&gt; 12 &amp; 63);
+      aBytes[nIdx++] = 128 + (nChr &gt;&gt;&gt; 6 &amp; 63);
+      aBytes[nIdx++] = 128 + (nChr &amp; 63);
+    }
+  }
+
+  return aBytes;
+
+}
+</pre>
+
+<h4 id="Tests">Tests</h4>
+
+<pre class="brush: js notranslate">/* Tests */
+
+var entréeChaîne = "base64 \u2014 Mozilla Developer Network";
+
+var entréeUTF8 = strToUTF8Arr(entréeChaîne);
+
+var base64 = base64EncArr(entréeUTF8);
+
+alert(base64);
+
+var sortieUT8 = base64DecToArr(base64);
+
+var sortieChaîne = UTF8ArrToStr(sortieUT8);
+
+alert(sortieChaîne);</pre>
+
+<h4 id="Annexe_Décoder_une_chaîne_en_base64_en_un_objet_Uint8Array_ou_ArrayBuffer">Annexe : Décoder une chaîne en base64 en un objet <a href="/fr/docs/Web/API/Uint8Array">Uint8Array</a> ou <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/ArrayBuffer">ArrayBuffer</a></h4>
+
+<p>Ces fonctions permettent de créer des objets <a href="/fr/docs/Web/API/Uint8Array">uint8Arrays</a> ou <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/ArrayBuffer">arrayBuffers</a> à partir de chaînes en base64 :</p>
+
+<pre class="brush: js notranslate">var monTableau = base64DecToArr("QmFzZSA2NCDigJQgTW96aWxsYSBEZXZlbG9wZXIgTmV0d29yaw=="); // "Base 64 \u2014 Mozilla Developer Network"
+
+var monBuffer = base64DecToArr("QmFzZSA2NCDigJQgTW96aWxsYSBEZXZlbG9wZXIgTmV0d29yaw==").buffer; // "Base 64 \u2014 Mozilla Developer Network"
+
+alert(monBuffer.byteLength);</pre>
+
+<div class="note"><strong>Note :</strong> La fonction <code>base64DecToArr(sBase64[, <em>nTailleBloc</em>])</code> renvoie un <a href="/en-US/docs/Web/JavaScript/Typed_arrays/Uint8Array"><code>uint8Array</code></a> d'octets. Si vous souhaitez utiliser un tampon mémoire de 16 bits, 32 bits, 64 bits pour les données brutes, utilisez l'argument <code>nTailleBloc</code>, qui représente le nombre d'octets dont la propriété <code>uint8Array.buffer.bytesLength</code> doit être un multiple (<code>1</code> ou pas de paramètre pour l'ASCII, <a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMString/Binary">les chaînes binaires</a> ou les chaînes encodées UTF-8, <code>2</code> pour les chaînes UTF-16, <code>4</code> pour les chaînes UTF-32).</div>
+
+<p>Pour une bibliothèque plus complète, voir <a href="/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code> – une représentation des chaînes de caractères semblable à celle du langage C, basée sur les tableaux typés</a></p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("window.atob","atob()")}}</li>
+ <li>{{domxref("window.btoa","btoa()")}}</li>
+ <li><a href="/fr/docs/Web/HTTP/data_URIs" title="/fr/docs/Web/HTTP/data_URIs">URIs de données </a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/ArrayBuffer">ArrayBuffer</a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Tableaux typés</a></li>
+ <li><a href="/fr/docs/Web/API/ArrayBufferView">ArrayBufferView</a></li>
+ <li><a href="/fr/docs/Web/API/Uint8Array">Uint8Array</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code> – une représentation des chaînes, basée sur les tableaux typés</a></li>
+ <li><a href="/fr/docs/Web/API/DOMString" title="/fr/docs/Web/API/DOMString">DOMString</a></li>
+ <li><a href="/fr/docs/Glossary/URI" title="/fr/docs/Glossary/URI"><code>URI</code></a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/encodeURI" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/encodeURI"><code>encodeURI()</code></a></li>
+ <li><a href="/fr/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIURIFixup" title="/fr/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIURIFixup"><code>nsIURIFixup()</code></a></li>
+ <li><a href="https://fr.wikipedia.org/wiki/Base64" title="https://fr.wikipedia.org/wiki/Base64">Article sur la base64 sur Wikipédia</a></li>
+</ul>
diff --git a/files/fr/web/api/windowclient/focus/index.html b/files/fr/web/api/windowclient/focus/index.html
new file mode 100644
index 0000000000..941c9b4bb6
--- /dev/null
+++ b/files/fr/web/api/windowclient/focus/index.html
@@ -0,0 +1,126 @@
+---
+title: WindowClient.focus()
+slug: Web/API/WindowClient/focus
+tags:
+  - API
+  - Client
+  - Experimental
+  - Focus
+  - Method
+  - Reference
+  - Service Workers
+  - WindowClient
+translation_of: Web/API/WindowClient/focus
+---
+<p>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</p>
+
+<p>La méthode <strong><code>focus()</code></strong> de l'interface {{domxref("WindowClient")}} focus le client en cours et retourne une {{jsxref("Promise")}} qui est résolue vers le<span> {{domxref("WindowClient")}} existant.</span></p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Client.focus().then(function(WindowClient) {
+  // utilisez le WindowClient une fois qu'il est focus
+});</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Nil.</p>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une {{jsxref("Promise")}} qui est résolue vers le {{domxref("WindowClient")}} existant.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">self.addEventListener('notificationclick', function(event) {
+  console.log('On notification click: ', event.notification.tag);
+  event.notification.close();
+
+<code>  // Vérifie si le client en cours est ouvert et
+  // le focus le cas échéant</code>
+  event.waitUntil(clients.matchAll({
+    type: "window"
+  }).then(function(clientList) {
+    for (var i = 0; i &lt; clientList.length; i++) {
+      var client = clientList[i];
+      if (client.url == '/' &amp;&amp; 'focus' in client)
+        return client.focus();
+    }
+    if (clients.openWindow)
+      return clients.openWindow('/');
+  }));
+});</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#client-focus-method', 'focus()')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale..</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatChrome(42.0)}}</td>
+   <td>{{ CompatGeckoDesktop("44.0") }}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoMobile("44.0") }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(42.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p><br>
+ [1] Les Service workers (et <a href="https://developer.mozilla.org/en-US/docs/Web/API/Push_API">Push</a>) sont désactivés dans <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 Extended Support Release</a> (ESR.)</p>
diff --git a/files/fr/web/api/windowclient/focused/index.html b/files/fr/web/api/windowclient/focused/index.html
new file mode 100644
index 0000000000..7b4db1157f
--- /dev/null
+++ b/files/fr/web/api/windowclient/focused/index.html
@@ -0,0 +1,113 @@
+---
+title: WindowClient.focused
+slug: Web/API/WindowClient/focused
+translation_of: Web/API/WindowClient/focused
+---
+<div>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</div>
+
+<p>La propriété <strong><code>focused</code></strong> , en lecture seule de l'interface  {{domxref("WindowClient")}} , est un {{domxref("Boolean")}} qui indique si client actuel a le focus .</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">myFocused = WindowClient.focused;</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>A {{domxref("Boolean")}}.</p>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js">self.addEventListener('notificationclick', function(event) {
+  console.log('On notification click: ', event.notification.tag);
+  event.notification.close();
+
+  // This looks to see if the current is already open and
+  // focuses if it is
+  event.waitUntil(clients.matchAll({
+    type: "window"
+  }).then(function(clientList) {
+    for (var i = 0; i &lt; clientList.length; i++) {
+      var client = clientList[i];
+      if (client.url == '/' &amp;&amp; 'focus' in client) {
+        if(!client.focused)
+          return client.focus();
+        }
+      }
+    }
+    if (clients.openWindow)
+      return clients.openWindow('/');
+  }));
+});</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#window-client-interface', 'WindowClient')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_Navigateurs">Compatibilité des Navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(42.0)}}</td>
+   <td>{{ CompatGeckoDesktop("44.0") }}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoMobile("44.0") }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(42.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Service workers (and <a href="/en-US/docs/Web/API/Push_API">Push</a>) have been disabled in the <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 and 52 Extended Support Releases</a> (ESR.)</p>
diff --git a/files/fr/web/api/windowclient/index.html b/files/fr/web/api/windowclient/index.html
new file mode 100644
index 0000000000..0bcb278c98
--- /dev/null
+++ b/files/fr/web/api/windowclient/index.html
@@ -0,0 +1,165 @@
+---
+title: WindowClient
+slug: Web/API/WindowClient
+tags:
+  - API
+  - Client
+  - Experimental
+  - Interface
+  - Reference
+  - Service Workers
+  - ServiceWorker
+  - WindowClient
+translation_of: Web/API/WindowClient
+---
+<p>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</p>
+
+<p>L'interface <code>WindowClient</code> de l'<a href="/en-US/docs/Web/API/ServiceWorker_API">API ServiceWorker</a> représente la portée d'un client service worker lorsque celui-ci existe en tant que document dans un contexte navigateur, controlé par un worker actif. Le client sélectionne et utilise un service worker pour son propre chargement et celui de ses sous-ressources.</p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em><code>WindowClient</code> hérite certaines méthodes de son parent, {{domxref("Client")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("WindowClient.focus()")}}</dt>
+ <dd>Assigne le focus au client en cours.</dd>
+ <dt>{{domxref("WindowClient.navigate()")}}</dt>
+ <dd>Charge l'url spécifiée dans la page en cours.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em><code>WindowClient</code> hérite certaines propriétés de son parent, {{domxref("Client")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("WindowClient.focused")}} {{readonlyInline}}</dt>
+ <dd>Un booléen qui indique si oui ou non le client en cours est focus.</dd>
+ <dt>{{domxref("WindowClient.visibilityState")}} {{readonlyInline}}</dt>
+ <dd>Indique la visibilité du client en cours. Peut prendre les valeures <code>hidden</code>, <code>visible</code>, <code>prerender</code>, ou <code>unloaded</code>.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">self.addEventListener('notificationclick', function(event) {
+  console.log('On notification click: ', event.notification.tag);
+  event.notification.close();
+
+  // Vérifie si le client en cours est ouvert et
+  // le focus le cas échéant
+  event.waitUntil(clients.matchAll({
+    type: "window"
+  }).then(function(clientList) {
+    for (var i = 0; i &lt; clientList.length; i++) {
+      var client = clientList[i];
+      if (client.url == '/' &amp;&amp; 'focus' in client)
+        return client.focus();
+    }
+    if (clients.openWindow)
+      return clients.openWindow('/');
+  }));
+});</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#window-client-interface', 'WindowClient')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatChrome(42.0)}}</td>
+   <td>{{ CompatGeckoDesktop("44.0") }}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>navigate()</code></td>
+   <td>{{CompatChrome(49.0)}}</td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("44.0") }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(42.0)}}</td>
+  </tr>
+  <tr>
+   <td><code>navigate()</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td>{{CompatChrome(49.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Les Service workers (et <a href="/en-US/docs/Web/API/Push_API">Push</a>) sont désactivés dans <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 Extended Support Release</a> (ESR.)</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li>
+ <li><a href="https://github.com/mdn/sw-test">Service workers basic code example</a></li>
+ <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a></li>
+ <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li>
+ <li><a href="/en-US/docs/Web/API/Channel_Messaging_API">Channel Messaging API</a></li>
+</ul>
diff --git a/files/fr/web/api/windowclient/navigate/index.html b/files/fr/web/api/windowclient/navigate/index.html
new file mode 100644
index 0000000000..0cc4c15659
--- /dev/null
+++ b/files/fr/web/api/windowclient/navigate/index.html
@@ -0,0 +1,109 @@
+---
+title: WindowClient.navigate()
+slug: Web/API/WindowClient/navigate
+tags:
+  - API
+  - Client
+  - Expérimentale
+  - Method
+  - Navigate
+  - Reference
+  - Service Workers
+  - WindowClient
+translation_of: Web/API/WindowClient/navigate
+---
+<p>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</p>
+
+<p>La méthode <strong><code>navigate()</code></strong> de l'interface  {{domxref("WindowClient")}} <span id="noHighlight_0.005279926980020444">charge une URL spécifiée dans une page de client contrôlée, puis retourne une</span>  {{jsxref("Promise")}}  <span id="noHighlight_0.005279926980020444">qui devra être analysée p</span>ar  {{domxref("WindowClient")}} (le demandeur).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>WindowClient</em>.navigate(<em>url</em>).then(function(<em>WindowClient</em>) {
+  // do something with your WindowClient after navigation
+});</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>url</code></dt>
+ <dd><span id="noHighlight_0.8092575892867941">L'emplacement pour naviguer vers (url est une string)</span> .</dd>
+</dl>
+
+<h3 id="Retour">Retour</h3>
+
+<p>Une {{jsxref("Promise")}}  qui sera analysée par le demandeur {{domxref("WindowClient")}} (fonctionnement asynchrone : je te promet de faire, mais je suis pas sûr, à toi de vérifier) .</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('Service Workers', '#client-navigate-method', 'navigate()')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_Navigateurs">Compatibilité des Navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(49.0)}}</td>
+   <td>{{CompatGeckoDesktop(50)}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(50)}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(49.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Service workers (and <a href="/en-US/docs/Web/API/Push_API">Push</a>) ont été  désactivés dans  <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 52 Extended Support Release</a> (ESR.)</p>
diff --git a/files/fr/web/api/windowclient/visibilitystate/index.html b/files/fr/web/api/windowclient/visibilitystate/index.html
new file mode 100644
index 0000000000..83791f1f9b
--- /dev/null
+++ b/files/fr/web/api/windowclient/visibilitystate/index.html
@@ -0,0 +1,107 @@
+---
+title: WindowClient.visibilityState
+slug: Web/API/WindowClient/visibilityState
+translation_of: Web/API/WindowClient/visibilityState
+---
+<p><span style="line-height: 19.0909080505371px;">{{SeeCompatTable}}{{APIRef("Service Workers API")}}</span></p>
+
+<p><span style="line-height: 19.0909080505371px;">La propriété <strong><code>visibilityState</code></strong>,  en lecture seule de l'interface {{domxref("WindowClient")}} indique la visibilité du client courant</span>. La valeur pourra être :  <code>hidden</code>, <code>visible</code>, <code>prerender</code>, or <code>unloaded</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">myVisState = WindowClient.visibilityState;</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>une  {{domxref("DOMString")}}.</p>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js">  event.waitUntil(clients.matchAll({
+    type: "window"
+  }).then(function(clientList) {
+    for (var i = 0; i &lt; clientList.length; i++) {
+      var client = clientList[i];
+      if (client.url == '/' &amp;&amp; 'focus' in client) {
+        if(visibilityState === 'hidden')
+          return client.focus();
+        }
+      }
+    }
+    if (clients.openWindow)
+      return clients.openWindow('/');
+  }));
+});</pre>
+
+<h2 id="Spécifications" style="line-height: 30px; font-size: 2.14285714285714rem;">Spécifications</h2>
+
+<table class="standard-table" style="line-height: 19.0909080505371px;">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#window-client-interface', 'WindowClient')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_Navigateurs">Compatibilité des Navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(42.0)}}</td>
+   <td>{{ CompatGeckoDesktop("44.0") }}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoMobile("44.0") }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(42.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Service workers (and <a href="/en-US/docs/Web/API/Push_API">Push</a>) have been disabled in the <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 and 52 Extended Support Releases</a> (ESR.)</p>
diff --git a/files/fr/web/api/windoweventhandlers/index.html b/files/fr/web/api/windoweventhandlers/index.html
new file mode 100644
index 0000000000..40c8846588
--- /dev/null
+++ b/files/fr/web/api/windoweventhandlers/index.html
@@ -0,0 +1,96 @@
+---
+title: WindowEventHandlers
+slug: Web/API/WindowEventHandlers
+tags:
+  - API
+translation_of: Web/API/WindowEventHandlers
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<div>La mixin <strong><code>WindowEventHandlers</code></strong> décrit les gestionnaires d'événements communs à plusieurs interfaces comme {{domxref("Window")}}, or {{domxref("HTMLBodyElement")}} et {{domxref("HTMLFrameSetElement")}}. Chacune de ces interfaces peut implémenter des gestionnaires d'événement supplémentaires.</div>
+
+<div> </div>
+
+<div class="note">
+<p><strong>Note</strong>: <code>WindowEventHandlers</code> est une mixin et non une interface; il n'est pas possible de créer un objet de type <code>WindowEventHandlers</code>.</p>
+</div>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Les propriétés d'événement, de la forme <code>onXYZ</code>, sont définis sur {{domxref("WindowEventHandlers")}} et implémentées par {{domxref("Window")}} ou {{domxref("WorkerGlobalScope")}} pour les Web Workers.</em></p>
+
+<dl>
+ <dt>{{domxref("WindowEventHandlers.onafterprint")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code à appeler lorsque l'événement {{event("afterprint")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onbeforeprint")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code à appeler lorsque l'événement {{event("beforeprint")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onbeforeunload")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code à appeler lorsque l'événement {{event("beforeunload")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onhashchange")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code à appeler lorsque l'événement {{event("hashchange")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onlanguagechange")}} {{experimental_inline}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code à appeler lorsque l'événement {{event("languagechange")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onmessage")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code à appeler lorsque l'événement {{event("message")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onoffline")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code à appeler lorsque l'événement {{event("offline")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.ononline")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code à appeler lorsque l'événement {{event("online")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpagehide")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code à appeler lorsque l'événement {{event("pagehide")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpageshow")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code à appeler lorsque l'événement {{event("pageshow")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpopstate")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code à appeler lorsque l'événement {{event("popstate")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onresize")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code à appeler lorsque l'événement {{event("resize")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onstorage")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code à appeler lorsque l'événement {{event("storage")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onunload")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code à appeler lorsque l'événement {{event("unload")}} est déclenché.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Cette interface ne définit aucune méthode.</em></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#windoweventhandlers', 'GlobalEventHandlers')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Pas de changement depuis {{SpecName("HTML5.1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot de {{SpecName("HTML WHATWG")}}. Ajoute <code>onlanguage</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot de {{SpecName("HTML WHATWG")}}. Création de <code>WindowEventHandlers</code> (les propriétés étaient sur la cible avant).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.WindowEventHandlers")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Window")}} et {{domxref("WorkerGlobalScope")}}</li>
+</ul>
diff --git a/files/fr/web/api/windoweventhandlers/onafterprint/index.html b/files/fr/web/api/windoweventhandlers/onafterprint/index.html
new file mode 100644
index 0000000000..3a7b4c259b
--- /dev/null
+++ b/files/fr/web/api/windoweventhandlers/onafterprint/index.html
@@ -0,0 +1,67 @@
+---
+title: WindowEventHandlers.onafterprint
+slug: Web/API/WindowEventHandlers/onafterprint
+tags:
+  - API
+  - DOM
+  - HTML-DOM
+  - Propriété
+  - Reference
+  - Window
+  - impression
+  - évènements
+translation_of: Web/API/WindowEventHandlers/onafterprint
+---
+<div>{{ApiRef}}</div>
+
+<p>La propriété WindowEventHandlers.onafterprint définit et renvoie {{event("afterprint")}} {{domxref("EventHandler")}} pourl a fenêtre actuelle.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>window</em>.onafterprint = <em>code de traitement de l'événement</em>
+</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Les événements <code>beforeprint</code> et <code>afterprint</code> permettent aux pages de modifier leur contenu avant le début de l'impression (pour supprimer une bannière, par exemple), puis d'annuler ces modifications une fois l'impression terminée. En général, les auteurs de contenu devraient préférer l'utilisation d'une règle CSS <a href="/en-US/docs/Web/CSS/@media">@media print</a>, mais il peut être nécessaire d'utiliser ces événements dans certains cas.</p>
+
+<p>L'événement <code>afterprint</code> est appelé après l'impression par l'utilisateur, ou s'il interrompt la boîte de dialogue d'impression.</p>
+
+<p> </p>
+
+<p> </p>
+
+<p>Safari ne reconnaît pas ces événements.</p>
+
+<h2 id="Spécification">Spécification</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', '#handler-window-onafterprint', 'onafterprint')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.WindowEventHandlers.onafterprint")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>{{domxref("window.print")}}</li>
+ <li>{{domxref("window.onbeforeprint")}}</li>
+ <li><a href="/en-US/docs/Printing" title="Printing">Printing</a></li>
+</ul>
+
+<div class="grammarly-disable-indicator"> </div>
diff --git a/files/fr/web/api/windoweventhandlers/onbeforeprint/index.html b/files/fr/web/api/windoweventhandlers/onbeforeprint/index.html
new file mode 100644
index 0000000000..4f5e06adb8
--- /dev/null
+++ b/files/fr/web/api/windoweventhandlers/onbeforeprint/index.html
@@ -0,0 +1,70 @@
+---
+title: WindowEventHandlers.onbeforeprint
+slug: Web/API/WindowEventHandlers/onbeforeprint
+tags:
+  - API
+  - DOM
+  - Propriété
+  - impression
+translation_of: Web/API/WindowEventHandlers/onbeforeprint
+---
+<div>{{ApiRef}}</div>
+
+<p>La propriété <code>onbeforeprint</code> définit et retourne le code du gestionnaire d'événement <code>onbeforeprint</code> onbeforeprint pour la fenêtre actuelle.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox">window.onbeforeprint = <em>code de traitement de l'événement</em>
+</pre>
+
+<h2 class="Notes" id="Notes">Notes</h2>
+
+<p>Les événements <code>beforeprint</code> et <code>afterprint</code> permettent aux pages de modifier leur contenu avant le début de l'impression (peut-être pour supprimer une bannière, par exemple), puis d'annuler ces modifications une fois l'impression terminée. En général, les auteurs de contenu devraient préférer l'utilisation d'une règle CSS <a href="/en-US/docs/Web/CSS/@media">@media print</a>, mais il peut être nécessaire d'utiliser ces événements dans certains cas.</p>
+
+<p>L'événement <code>beforeprint</code> est appelé avant l'ouverture de la fenêtre de dialogue d'impression.</p>
+
+<p>Safari ne reconnaît pas ces événements, mais un résultat équivalent à l'événement <code>beforeprint</code> peut être obtenu avec <code>{{domxref("window.matchMedia")}}('print')</code>.</p>
+
+<p> </p>
+
+<p> </p>
+
+<pre class="brush: js">var mediaQueryList = window.matchMedia('print');
+mediaQueryList.addListener(function(mql) {
+  if(mql.matches) {
+    console.log('équivalent webkit de onbeforeprint');
+  }
+});</pre>
+
+<h2 id="Specification" name="Specification">Spécification</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', '#handler-window-onbeforeprint', 'onbeforeprint')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.WindowEventHandlers.onbeforeprint")}}</p>
+
+<h2 id="See_also" name="See_also">Voir également</h2>
+
+<ul>
+ <li>{{domxref("window.print")}}</li>
+ <li>{{domxref("window.onafterprint")}}</li>
+ <li><a href="/en-US/docs/Printing">Printing</a></li>
+</ul>
diff --git a/files/fr/web/api/windoweventhandlers/onbeforeunload/index.html b/files/fr/web/api/windoweventhandlers/onbeforeunload/index.html
new file mode 100644
index 0000000000..b63c5b4caf
--- /dev/null
+++ b/files/fr/web/api/windoweventhandlers/onbeforeunload/index.html
@@ -0,0 +1,49 @@
+---
+title: window.onbeforeunload
+slug: Web/API/WindowEventHandlers/onbeforeunload
+translation_of: Web/API/WindowEventHandlers/onbeforeunload
+---
+<h2 id="Sommaire" name="Sommaire">Résumé</h2>
+
+<p>Le gestionnaire d'événement <code><strong>WindowEventHandlers.onbeforeunload</strong></code> contient le code exécuté lorsque l'évènement {{event("beforeunload")}} est envoyé. Cet événement se déclenche lorsque la fenêtre est sur le point de recharger ses ressources.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: html">&lt;element beforeunload="funcRef(event);" /&gt;</pre>
+
+<pre class="brush: js">&lt;script type="text/javascript"&gt;
+	window.onbeforeunload = funcRef
+&lt;/script&gt;</pre>
+
+<ul>
+ <li>funcRef : Référence à une fonction appelée lorsque l'évènement se déclenche</li>
+</ul>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre class="brush: js">window.onbeforeunload = function (e) {
+  var e = e || window.event;
+
+  // For IE and Firefox
+  if (e) {
+    e.returnValue = 'Any string';
+  }
+
+  // For Safari
+  return 'Any string';
+};
+</pre>
+
+<h2 id="EventProperty" name="EventProperty">Propriétés de l'objet <strong>event</strong></h2>
+
+<pre>returnValue</pre>
+
+<ul>
+ <li>Applique ou récupère la valeur de retour de l'évènement.</li>
+</ul>
+
+<h2 id="Spécification">Spécification</h2>
+
+<p>L'évènement 'onbeforeunload' a été introduit par Microsoft dans IE4 et s'est généralisé dans tous les navigateurs.</p>
+
+<p><a class="external" href="http://msdn.microsoft.com/en-us/library/ms536907%28VS.85%29.aspx" title="MSDN—onbeforeunload Event">MSDN—onbeforeunload Event</a></p>
diff --git a/files/fr/web/api/windoweventhandlers/onhashchange/index.html b/files/fr/web/api/windoweventhandlers/onhashchange/index.html
new file mode 100644
index 0000000000..bbb31c4752
--- /dev/null
+++ b/files/fr/web/api/windoweventhandlers/onhashchange/index.html
@@ -0,0 +1,181 @@
+---
+title: WindowEventHandlers.onhashchange
+slug: Web/API/WindowEventHandlers/onhashchange
+translation_of: Web/API/WindowEventHandlers/onhashchange
+---
+<div>
+<div>{{APIRef("HTML DOM")}}</div>
+
+<div>L'événement <strong>hashchange</strong> est déclenché lorsque le hash de l'url change (cf. {{domxref("Window.location", "location.hash")}}).</div>
+
+<div> </div>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">window.onhashchange = funcRef;
+</pre>
+
+<p><strong>ou</strong></p>
+
+<pre class="syntaxbox">&lt;body onhashchange="funcRef();"&gt;
+</pre>
+
+<p><strong>ou</strong></p>
+
+<pre class="syntaxbox">window.addEventListener("hashchange", funcRef, false);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>funcRef</code></dt>
+ <dd>Une référence à une fonction.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:js">if ("onhashchange" in window) {
+    alert("Le navigateur prend en charge l'événement hashchange!");
+}
+
+function locationHashChanged() {
+    if (location.hash === "#somecoolfeature") {
+        somecoolfeature();
+    }
+}
+
+window.onhashchange = locationHashChanged;
+</pre>
+
+<h2 id="L'événement_hashchange">L'événement hashchange</h2>
+
+<p>Lorsque l'observateur d'événement déclenche l'événement hashchange il passe en paramêtres les arguments suivante:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Paramêtre</td>
+   <td class="header">Type</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>newURL</code> {{gecko_minversion_inline("6.0")}}</td>
+   <td><code>DOMString</code></td>
+   <td>Le nouvel URL où le navigateur est.</td>
+  </tr>
+  <tr>
+   <td><code>oldURL</code> {{gecko_minversion_inline("6.0")}}</td>
+   <td><code>DOMString</code></td>
+   <td>L'ancien URL où le navigateur se trouvait.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Une_solution_autour_de_event.newURL_et_event.oldURL">Une solution autour de event.newURL et event.oldURL</h3>
+
+<pre class="brush:js">//insérez ce bout de code au début de votre code pour observer les changements de hash dans l'URL
+if(!window.HashChangeEvent)(function(){
+	var lastURL=document.URL;
+	window.addEventListener("hashchange",function(event){
+		Object.defineProperty(event,"oldURL",{enumerable:true,configurable:true,value:lastURL});
+		Object.defineProperty(event,"newURL",{enumerable:true,configurable:true,value:document.URL});
+		lastURL=document.URL;
+	});
+}());
+</pre>
+
+<h3 id="sect1"> </h3>
+
+<h2 id="Spécifications">Spécifications </h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécifications</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#windoweventhandlers', 'GlobalEventHandlers')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>5.0</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
+   <td>
+    <p>8.0</p>
+
+    <p><code style="font-size: 14px;">oldURL</code>/<code style="font-size: 14px;">newURL</code> attributes are not supported.</p>
+   </td>
+   <td>10.6</td>
+   <td>5.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>2.2</td>
+   <td>{{CompatGeckoMobile("1.9.2")}}</td>
+   <td>9.0</td>
+   <td>11.0</td>
+   <td>5.0</td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<h2 id="Lire_également">Lire également</h2>
+</div>
+
+<ul>
+ <li><a href="/fr/docs/Web/Guide/DOM/Manipuler_historique_du_navigateur">Manipuler l'historique du navigateur</a></li>
+ <li>Méthodes <a href="/fr/docs/Web/API/Window/history" title="DOM/window.history">history.pushState() et history.replaceState()</a></li>
+ <li>L'événement <a href="/fr/docs/Web/API/WindowEventHandlers/onpopstate" title="DOM/window.onpopstate">popstate</a></li>
+</ul>
diff --git a/files/fr/web/api/windoweventhandlers/onlanguagechange/index.html b/files/fr/web/api/windoweventhandlers/onlanguagechange/index.html
new file mode 100644
index 0000000000..aaa590371d
--- /dev/null
+++ b/files/fr/web/api/windoweventhandlers/onlanguagechange/index.html
@@ -0,0 +1,66 @@
+---
+title: WindowEventHandlers.onlanguagechange
+slug: Web/API/WindowEventHandlers/onlanguagechange
+tags:
+  - API
+  - Event Handler
+  - Experimental
+  - Propriété
+  - Reference
+  - Window
+translation_of: Web/API/WindowEventHandlers/onlanguagechange
+---
+<div>{{APIRef("HTML DOM")}} {{SeeCompatTable}}</div>
+
+<p>La propriété <code><strong>onlanguagechange</strong></code> du mixin {{domxref("WindowEventHandlers")}} est le {{domxref("EventHandler")}} pour le traitement des événements {{event("languagechange")}}.</p>
+
+<p>Ces événements sont reçus par l'objet implémentant cette interface, généralement un {{domxref ("Window")}}, un {{domxref ("HTMLBodyElement")}} ou un {{domxref ("HTMLIFrameElement")}}. Un tel événement est envoyé par le navigateur pour informer que la liste des langues préférées a été mise à jour. La liste est accessible via {{domxref("NavigatorLanguage.languages")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><em>object</em>.onlanguagechange = <em>function</em>;
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<ul>
+ <li><code>function</code> est le nom d'une fonction définie par l'utilisateur, sans le suffixe <code>()</code> ni aucun paramètre, ou une déclaration de fonction anonyme, telle que <code>function(event) {...}</code>. Un gestionnaire d'événements a toujours un seul paramètre, contenant l'événement, ici de type {{domxref ("Event")}}.</li>
+</ul>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js notranslate">window.onlanguagechange = function(event) {
+  console.log('événement de changement de langue détecté!');
+};
+</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('HTML WHATWG', '#handler-window-onlanguagechange', 'WindowEventHandler.onlanguagechange') }}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td>Spécification initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.WindowEventHandlers.onlanguagechange")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>L'événement {{event("languagechange")}} et son type, {{domxref("Event")}}</li>
+</ul>
diff --git a/files/fr/web/api/windoweventhandlers/onpopstate/index.html b/files/fr/web/api/windoweventhandlers/onpopstate/index.html
new file mode 100644
index 0000000000..1eb120e770
--- /dev/null
+++ b/files/fr/web/api/windoweventhandlers/onpopstate/index.html
@@ -0,0 +1,58 @@
+---
+title: window.onpopstate
+slug: Web/API/WindowEventHandlers/onpopstate
+translation_of: Web/API/WindowEventHandlers/onpopstate
+---
+<p>{{ ApiRef() }}</p>
+
+<p>{{ gecko_minversion_header("2") }}</p>
+
+<h3 id="Résumé">Résumé</h3>
+
+<p>Un gestionnaire d'évènement pour l'évènement <code>popstate</code> de la fenêtre.</p>
+
+<p><span style="line-height: inherit;">L'évènement <code>popstate</code></span> est envoyé à la fenêtre à chaque fois que l'entrée actuelle de l'historique change avec 2 autres entrées du même document. Si l'entrée actuelle a été créée en appelant <code>history.pushState()</code> ou a été modifiée en appelant <code>history.replaceState()</code>, la propriété <font face="Courier New, Andale Mono, monospace">state</font> de l'évènement <code>popstate</code> contient une copie de l'objet d'entrée de l'historique.</p>
+
+<p>Sachez qu'appeler <code>history.pushState()</code> ou <code>history.replaceState()</code> ne déclenchera pas l'évènement <code>popstate</code>. Cet évènement n'est déclenché que par une action utilisateur telle que cliquer sur le bouton Retour (ou appeler <code>history.back()</code>, en JavaScript). L'évènement n'est déclenché que pour la navigation entre deux entrées du même document.</p>
+
+<h3 id="Syntax" name="Syntax">Syntaxe</h3>
+
+<pre class="eval">window.onpopstate = <em>funcRef</em>;
+</pre>
+
+<ul>
+ <li><code>funcRef</code> est une référence à une fonction.</li>
+</ul>
+
+<h3 id="Lévènement_popstate">L'évènement popstate</h3>
+
+<p>Par exemple, une page à l'adresse <a class="external" href="http://example.com/example.html" rel="freelink">http://example.com/example.html</a> exécutant le code suivant générera les alertes suivantes:</p>
+
+<pre class="brush: js">window.onpopstate = function(event) {
+  alert("adresse: " + document.location + ", état: " + JSON.stringify(event.state));
+};
+history.pushState({page: 1}, "titre 1", "?page=1");
+history.pushState({page: 2}, "titre 2", "?page=2");
+history.replaceState({page: 3}, "titre 3", "?page=3");
+history.back(); // affiche "adresse: http://example.com/example.html?page=1, état: {"page":1}"
+history.back(); // affiche "adresse: http://example.com/example.html, état: null
+history.go(2);  // affiche "adresse: http://example.com/example.html?page=3, état: {"page":3}
+</pre>
+
+<p>Même si l'entrée originelle (de <a class="external" href="http://example.com/example.html" rel="freelink">http://example.com/example.html</a>) n'a aucun objet d'état associé, l'évènement <code>popstate</code> est toujours déclenché lorsque l'entrée est activée après un deuxième appel à <code>history.back()</code>.</p>
+
+<h3 id="Specification" name="Specification">Spécification</h3>
+
+<ul>
+ <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#handler-window-onpopstate" title="http://www.whatwg.org/specs/web-apps/current-work/#handler-window-onpopstate">HTML5 popstate event</a></li>
+</ul>
+
+<h3 id="Lire_également">Lire également</h3>
+
+<ul>
+ <li>{{ domxref("window.history") }}</li>
+ <li><a href="/fr/docs/DOM/manipuler_lhistorique_du_navigateur" title="/fr/docs/DOM/manipuler_lhistorique_du_navigateur">Manipuler l'historique du navigateur</a></li>
+ <li><a href="/fr/docs/DOM/Manipulating_the_browser_history/Example" title="/fr/docs/DOM/Manipulating_the_browser_history/Example">Exemple de navigation en Ajax</a></li>
+</ul>
+
+<p>{{ languages( {"zh-cn": "zh-cn/DOM/window.onpopstate" } ) }}</p>
diff --git a/files/fr/web/api/windoweventhandlers/onunload/index.html b/files/fr/web/api/windoweventhandlers/onunload/index.html
new file mode 100644
index 0000000000..e218cb7656
--- /dev/null
+++ b/files/fr/web/api/windoweventhandlers/onunload/index.html
@@ -0,0 +1,58 @@
+---
+title: WindowEventHandlers.onunload
+slug: Web/API/WindowEventHandlers/onunload
+tags:
+  - API
+  - Propriétés
+  - Reference
+  - WindowEventHandlers
+translation_of: Web/API/WindowEventHandlers/onunload
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>L'événement <strong><code>unload</code></strong> est déclenché lorsque le contenu et les ressources sont déchargés à la fermeture de la fenêtre. Le processus de suppression des ressources se fait <em>après</em> que l'événement <code>unload </code>a eu lieu.</p>
+
+<p>Les navigateurs équipés d'un bloqueur de pop-up vont ignorer tout appel de window.open() lancé depuis onunload.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">window.addEventListener("unload", function(event) { ... });
+window.onunload = function(event) { ... };
+</pre>
+
+<p>Généralement, mieux vaut utiliser {{domxref("EventTarget.addEventListener", "window.addEventListener()")}} et l'événement {{event("unload")}} plutôt que <code>onunload</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>{{SpecName('HTML WHATWG', '#handler-window-onunload', 'onunload')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.WindowEventHandlers.onunload")}}</p>
diff --git a/files/fr/web/api/windoworworkerglobalscope/caches/index.html b/files/fr/web/api/windoworworkerglobalscope/caches/index.html
new file mode 100644
index 0000000000..d05a1c95ad
--- /dev/null
+++ b/files/fr/web/api/windoworworkerglobalscope/caches/index.html
@@ -0,0 +1,79 @@
+---
+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/crossoriginisolated/index.html b/files/fr/web/api/windoworworkerglobalscope/crossoriginisolated/index.html
new file mode 100644
index 0000000000..cb7f6948a0
--- /dev/null
+++ b/files/fr/web/api/windoworworkerglobalscope/crossoriginisolated/index.html
@@ -0,0 +1,58 @@
+---
+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
new file mode 100644
index 0000000000..ac6ff19360
--- /dev/null
+++ b/files/fr/web/api/windoworworkerglobalscope/fetch/index.html
@@ -0,0 +1,193 @@
+---
+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: myHeaders,
+               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/index.html b/files/fr/web/api/windoworworkerglobalscope/index.html
new file mode 100644
index 0000000000..ba34af3193
--- /dev/null
+++ b/files/fr/web/api/windoworworkerglobalscope/index.html
@@ -0,0 +1,186 @@
+---
+title: WindowOrWorkerGlobalScope
+slug: Web/API/WindowOrWorkerGlobalScope
+tags:
+  - API
+  - DOM
+  - DOM API
+  - Service Worker
+  - TopicStub
+  - Window
+  - WindowOrWorkerGlobalScope
+  - Worker
+  - WorkerGlobalScope
+translation_of: Web/API/WindowOrWorkerGlobalScope
+---
+<div>{{ApiRef()}}</div>
+
+<p>Le mixin <strong><code>WindowOrWorkerGlobalScope</code></strong> décrit plusieurs fonctionnalités communes aux interfaces {{domxref("Window")}} et {{domxref("WorkerGlobalScope")}}. Chacune de ces interfaces peut, bien entendu, ajouter d'autres fonctionnalités en plus de celles listées ci-dessous.</p>
+
+<div class="note">
+<p><strong>Note</strong>: <code>WindowOrWorkerGlobalScope</code> est un mixin et non une interface; vous ne pouvez pas réellement créer un objet de type <code>WindowOrWorkerGlobalScope</code>.</p>
+</div>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p>Ces propriétés sont définies sur le mixin {{domxref("WindowOrWorkerGlobalScope")}}, et implémentées par {{domxref("Window")}} et {{domxref("WorkerGlobalScope")}}.</p>
+
+<div id="Properties">
+<dl>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.caches")}} {{readOnlyinline}}</dt>
+ <dd>Renvoie l'objet {{domxref("CacheStorage")}} associé au contexte actuel. Cet objet active des fonctionnalités telles que le stockage des actifs pour une utilisation hors ligne et la génération de réponses personnalisées aux demandes.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.indexedDB")}} {{readonlyInline}}</dt>
+ <dd>Fournit un mécanisme permettant aux applications d'accéder de manière asynchrone aux capacités des bases de données indexées; renvoie un objet {{domxref ("IDBFactory")}}.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.isSecureContext")}} {{readOnlyinline}}</dt>
+ <dd>Renvoie un booléen indiquant si le contexte actuel est sécurisé (<code>true</code>) ou non (<code>false</code>).</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.origin")}} {{readOnlyinline}}</dt>
+ <dd>Renvoie l'origine de la portée globale, sérialisée sous forme de chaîne.</dd>
+</dl>
+</div>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p>Ces propriétés sont définies sur le mixin {{domxref("WindowOrWorkerGlobalScope")}}, et implémentées par {{domxref("Window")}} et {{domxref("WorkerGlobalScope")}}.</p>
+
+<dl>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.atob()")}}</dt>
+ <dd>Décode une chaîne de données qui a été encodée à l'aide d'un encodage base 64.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.btoa()")}}</dt>
+ <dd>Crée une chaîne ASCII encodée en base 64 à partir d'une chaîne de données binaires.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}</dt>
+ <dd>Annule le jeu d'exécutions répétées ) l'aide de {{domxref("WindowOrWorkerGlobalScope.setInterval()")}}.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}</dt>
+ <dd>Annule l'exécution différé définie à l'aide de {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.createImageBitmap()")}}</dt>
+ <dd>Accepte une variété de sources d'images différentes et renvoie un {{domxref ("Promise")}} qui se résout en {{domxref ("ImageBitmap")}}. Facultativement, la source est rognée sur le rectangle de pixels originaire de (sx, sy) avec une largeur sw et une hauteur sh.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.fetch()")}}</dt>
+ <dd>Démarre le processus de récupération d'une ressource sur le réseau.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}</dt>
+ <dd>Planifie une fonction à exécuter chaque fois qu'un nombre donné de millisecondes s'écoule.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}</dt>
+ <dd>Planifie une fonction à exécuter dans un laps de temps donné.</dd>
+</dl>
+
+<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("HTML WHATWG",'webappapis.html#windoworworkerglobalscope-mixin', '<code>WindowOrWorkerGlobalScope</code> mixin')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>C'est là que le mixin principal est défini.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#fetch-method','fetch()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Définition de la méthode <code>fetch()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#self-caches', 'caches')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition de la propriété <code>caches</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB 2', '#dom-windoworworkerglobalscope-indexeddb', 'indexedDB')}}</td>
+   <td>{{Spec2('IndexedDB 2')}}</td>
+   <td>Définition de la propriété <code>indexedDB</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Secure Contexts', 'webappapis.html#dom-origin', 'isSecureContext')}}</td>
+   <td>{{Spec2('Secure Contexts')}}</td>
+   <td>Définition de la propriété <code>isSecureContext</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatGeckoDesktop(52)}}</td>
+   <td>54</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>origine</code></td>
+   <td>{{CompatGeckoDesktop(54)}}</td>
+   <td>59</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(52)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>54</td>
+  </tr>
+  <tr>
+   <td><code>origine</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(54)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>59</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>{{domxref("Window")}}</li>
+ <li>{{domxref("WorkerGlobalScope")}}</li>
+</ul>
diff --git a/files/fr/web/api/windoworworkerglobalscope/indexeddb/index.html b/files/fr/web/api/windoworworkerglobalscope/indexeddb/index.html
new file mode 100644
index 0000000000..b18f70c21f
--- /dev/null
+++ b/files/fr/web/api/windoworworkerglobalscope/indexeddb/index.html
@@ -0,0 +1,76 @@
+---
+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
new file mode 100644
index 0000000000..e7f3c8c1fc
--- /dev/null
+++ b/files/fr/web/api/windoworworkerglobalscope/issecurecontext/index.html
@@ -0,0 +1,46 @@
+---
+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
new file mode 100644
index 0000000000..e0775b82bd
--- /dev/null
+++ b/files/fr/web/api/windoworworkerglobalscope/origin/index.html
@@ -0,0 +1,50 @@
+---
+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
new file mode 100644
index 0000000000..163513e5e7
--- /dev/null
+++ b/files/fr/web/api/windoworworkerglobalscope/queuemicrotask/index.html
@@ -0,0 +1,121 @@
+---
+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>
+
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.<br>
+<br>
+NOTE: data on this has been submitted; just waiting on it to be reviewed, merged, and for a new data release before it will show up here. See https://github.com/mdn/browser-compat-data/pull/4754 for PR.</div>
+
+<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
new file mode 100644
index 0000000000..2c549c7d04
--- /dev/null
+++ b/files/fr/web/api/windoworworkerglobalscope/settimeout/index.html
@@ -0,0 +1,362 @@
+---
+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>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<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/windowtimers/clearinterval/index.html b/files/fr/web/api/windowtimers/clearinterval/index.html
new file mode 100644
index 0000000000..8041342b1d
--- /dev/null
+++ b/files/fr/web/api/windowtimers/clearinterval/index.html
@@ -0,0 +1,73 @@
+---
+title: WindowOrWorkerGlobalScope.clearInterval()
+slug: Web/API/WindowTimers/clearInterval
+tags:
+  - API
+  - Méthode
+  - Reference
+  - WindowOrWorkerGlobalScope
+  - clearInterval
+translation_of: 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>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<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/worker/functions_and_classes_available_to_workers/index.html b/files/fr/web/api/worker/functions_and_classes_available_to_workers/index.html
new file mode 100644
index 0000000000..379f86edd6
--- /dev/null
+++ b/files/fr/web/api/worker/functions_and_classes_available_to_workers/index.html
@@ -0,0 +1,240 @@
+---
+title: Fonctions et classes disponibles dans les Web Workers
+slug: Web/API/Worker/Functions_and_classes_available_to_workers
+translation_of: Web/API/Web_Workers_API/Functions_and_classes_available_to_workers
+---
+<p>En plus de l'ensemble des fonctions standard <a href="/en-US/docs/Web/JavaScript">JavaScript</a> (telles que {{jsxref("Global_Objects/String", "String")}}, {{jsxref("Global_Objects/Array", "Array")}}, {{jsxref("Global_Objects/Object", "Object")}}, {{jsxref("Global_Objects/JSON", "JSON")}} etc), des fonctions du DOM restent disponibles pour les workers. Cet article en fournit la liste.</p>
+
+<p><strong>Les workers s'exécutent dans un contexte global, {{domxref("DedicatedWorkerGlobalScope")}} différent du contexte de la fenêtre courante</strong>. Par défaut les méthodes et propriétés de {{domxref("Window")}} ne leur sont pas disponibles, mais {{domxref("DedicatedWorkerGlobalScope")}}, comme <code>Window</code>, implémente {{domxref("WindowTimers")}} et {{domxref("WindowBase64")}}.</p>
+
+<h2 id="Comparaison_des_propriétés_et_méthodes_des_différents_types_de_workers">Comparaison des propriétés et méthodes des différents types de workers</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Fonctions</td>
+   <td class="header">Workers dédiés</td>
+   <td class="header">Workers partagés</td>
+   <td class="header">Service workers</td>
+   <td class="header">Chrome workers {{Non-standard_inline}}</td>
+   <td class="header">En dehors des  workers</td>
+  </tr>
+  <tr>
+   <td>{{domxref("WindowBase64.atob", "atob()")}}</td>
+   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+   <td>oui, sur {{domxref("Window")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("WindowBase64.btoa", "btoa()")}}</td>
+   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+   <td>oui, sur {{domxref("Window")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("WindowTimers.clearInterval", "clearInterval()")}}</td>
+   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+   <td>oui, sur {{domxref("Window")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("WindowTimers.clearTimeout", "clearTimeout()")}}</td>
+   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+   <td>oui, sur {{domxref("Window")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("Window.dump()", "dump()")}} {{non-standard_inline}}</td>
+   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+   <td>oui, sur {{domxref("Window")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("WindowTimers.setInterval", "setInterval()")}}</td>
+   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+   <td>oui, sur {{domxref("Window")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("WindowTimers.setTimeout", "setTimeout()")}}</td>
+   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+   <td>oui, sur {{domxref("Window")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("WorkerGlobalScope.importScripts", "importScripts()")}}</td>
+   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+   <td>non</td>
+  </tr>
+  <tr>
+   <td>{{domxref("WorkerGlobalScope.close", "close()")}} {{non-standard_inline}}</td>
+   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+   <td>oui, mais sans effet</td>
+   <td>Inconnu</td>
+   <td>non</td>
+  </tr>
+  <tr>
+   <td>{{domxref("DedicatedWorkerGlobalScope.postMessage", "postMessage()")}}</td>
+   <td>oui, sur {{domxref("DedicatedWorkerGlobalScope")}}</td>
+   <td>non</td>
+   <td>non</td>
+   <td>Inconnu</td>
+   <td>non</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="APIs_disponibles_dans_les_workers">APIs disponibles dans les workers</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Fonction</td>
+   <td class="header">Fonctionnalité</td>
+   <td class="header">Support dans Gecko (Firefox)</td>
+   <td class="header">Support dans IE</td>
+   <td class="header">Support dans Blink (Chrome et Opera)</td>
+   <td class="header">Support dans WebKit (Safari)</td>
+  </tr>
+  <tr>
+   <td><code>XMLHttpRequest</code></td>
+   <td>Crée et retourne un nouvel objet {{domxref("XMLHttpRequest")}}; il imite le comportement du constructeur standard <code>XMLHttpRequest()</code>. Remarquez que les attributs <code>responseXML</code> et <code>channel</code> de <code>XMLHttpRequest</code> retourne toujours <code>null</code>.</td>
+   <td>
+    <p>Basique : {{CompatGeckoDesktop("1.9.1")}}</p>
+
+    <p>{{domxref("XMLHttpRequest.response", "response")}} et {{domxref("XMLHttpRequest.responseType", "responseType")}} sont disponibles depuis {{CompatGeckoDesktop("10")}}</p>
+
+    <p>{{domxref("XMLHttpRequest.timeout", "timeout")}} et {{domxref("XMLHttpRequest.ontimeout", "ontimeout")}} sont disponibles depuis {{CompatGeckoDesktop("13")}}</p>
+   </td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>Worker</code></td>
+   <td>Crée un nouveau {{ domxref("Worker") }}. Oui, les workers peuvent engendrer des workers supplémentaires.</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>10.0</td>
+   <td>{{CompatNo}} Voir <a class="external" href="http://code.google.com/p/chromium/issues/detail?id=31666" rel="external" title="http://code.google.com/p/chromium/issues/detail?id=31666">crbug.com/31666</a></td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{ domxref("URL") }}</td>
+   <td>Les workers peuvent utiliser les méthodes statiques <a href="/en-US/docs/DOM/window.URL.createObjectURL" title="/en-US/docs/DOM/window.URL.createObjectURL">URL.createObjectURL</a> et <a href="/en-US/docs/DOM/window.URL.revokeObjectURL" title="/en-US/docs/DOM/window.URL.revokeObjectURL">URL.revokeObjectURL</a> avec les objets {{domxref("Blob")}} accessibles au worker.<br>
+    Les workers peuvent aussi créer une nouvelle URL en utilisant le constructeur {{domxref("URL.URL", "URL()")}} et appeler n'importe quelle méthode normale sur l'objet retourné.</td>
+   <td>{{CompatGeckoDesktop(21)}} et {{CompatGeckoDesktop(26)}} pour le constructeur URL()</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("TextEncoder")}} and {{domxref("TextDecoder")}}</td>
+   <td>Crée et retourne un nouveau {{domxref("TextEncoder")}}, ou respectivement {{domxref("TextDecoder")}}, permettant d'encoder ou de décoder des chaînes de caractère dans un encodage spécifique.</td>
+   <td>{{CompatGeckoDesktop(20)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("WorkerNavigator")}}</td>
+   <td>Le sous-ensemble de l'interface {{domxref("Navigator")}} disponible aux workers.</td>
+   <td>Implémentation basique {{CompatVersionUnknown}}<br>
+    {{domxref("NavigatorID.appCodeName", "appCodeName")}}, {{domxref("NavigatorID.product", "product")}}, {{domxref("NavigatorID.taintEnabled", "taintEnabled()")}}: {{CompatGeckoDesktop(28)}}<br>
+    {{domxref("WorkerNavigator.onLine", "onLine")}}: {{CompatGeckoDesktop(29)}}<br>
+    {{domxref("NavigatorLanguage")}}: {{CompatNo}}</td>
+   <td>{{domxref("NavigatorID.appName", "appName")}}, {{domxref("NavigatorID.appVersion", "appName")}}, {{domxref("WorkerNavigator.onLine", "onLine")}}, {{domxref("NavigatorID.platform", "platform")}}, {{domxref("NavigatorID.userAgent", "userAgent")}}: 10.0<br>
+    Autre : {{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("WorkerLocation")}}</td>
+   <td>Le sous-ensemble de l'interface {{domxref("Location")}} disponible aux workers.</td>
+   <td>{{CompatGeckoDesktop(1.9.2)}}</td>
+   <td>10.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("WorkerGlobalScope")}}</td>
+   <td>Le contexte global des workers. Cet objet définit <a href="#workerscope">les fonctions spécifiques aux workers</a>.</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("ImageData")}}</td>
+   <td>Les données en pixels sous-jacentes à une zone d'un élément {{domxref("canvas")}}. Manipuler de telles données peut être une tâche complexe qu'il est plus approprié de déléguer à un web worker.</td>
+   <td>{{CompatGeckoDesktop(25)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("FileReaderSync")}}</td>
+   <td>Cette API permet la lecture synchrone d'objets {{domxref("Blob")}} et {{domxref("File")}}. C'est une API qui fonctionne uniquement au sein des workers.</td>
+   <td>{{CompatGeckoDesktop(8)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("IndexedDB_API", "IndexedDB")}}</td>
+   <td>Une base de données pour stocker des enregistrements contenant des valeurs simples et des objets hiérarchiques.</td>
+   <td>{{CompatGeckoDesktop(37)}}</td>
+   <td>10.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("WebSocket")}}</td>
+   <td>Crée et retourne un nouvel objet {{domxref("WebSocket")}}; Il imite le comportement d'un constructeur <code>WebSocket()</code> standard.</td>
+   <td>{{CompatGeckoDesktop(36)}}</td>
+   <td>11.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/API/Data_Store_API">Data Store API</a></td>
+   <td>Un mécanisme de stockage puissant et flexible pour de multiples applications Firefox OS qui ont l'habitude de stocker et d'échanger des données entre elles de manière rapide, efficace et sécurisée.</td>
+   <td>Seulement dans les applications internes (certifiées) de Firefox OS, deuis v1.0.1.</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a></td>
+   <td>Les objets JavaScript qui vous permettent d'écrire des fonctions asynchrones.</td>
+   <td>{{CompatGeckoDesktop(28)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Utilisation_des_web_workers" title="https://developer.mozilla.org/En/Using_web_workers">Utilisation des web workers</a></li>
+ <li>{{ domxref("Worker") }}</li>
+</ul>
diff --git a/files/fr/web/api/worker/index.html b/files/fr/web/api/worker/index.html
new file mode 100644
index 0000000000..98ed0a13c4
--- /dev/null
+++ b/files/fr/web/api/worker/index.html
@@ -0,0 +1,132 @@
+---
+title: Worker
+slug: Web/API/Worker
+tags:
+  - API
+  - DOM
+  - JavaScript
+  - Reference
+  - Web Workers
+  - Worker
+  - Workers
+translation_of: Web/API/Worker
+---
+<p>{{APIRef("Web Workers API")}}</p>
+
+<p>L'interface <strong>Worker</strong> de l'<a href="https://developer.mozilla.org/fr/docs/Web/API/Web_Workers_API">API Web Workers</a> représente une tâche de fond qui peut facilement être créée et peut envoyer des messages en retour à son créateur. Créer un Worker est aussi simple que d'appeler le constructeur <code>Worker()</code>, en spécifiant un script qui définira le comportement du thread du worker.</p>
+
+<p>Notez qu'un worker peut lui aussi lancer d'autre Worker tant que ces autres workers sont hébergés par une page qui a la même origine que la page parente. (Note: <a href="https://bugs.webkit.org/show_bug.cgi?id=22723">Les workers imbriqués ne sont pas encore implémentés dans WebKit</a>).</p>
+
+<p>De plus les workers peuvent utiliser <a class="internal" href="/en/DOM/XMLHttpRequest" title="En/XMLHttpRequest"><code>XMLHttpRequest</code></a> pour les communiquer avec le réseau, à l'exception des attributs <code>responseXML</code> et <code>channel</code> qui vont toujours retourner <code>null</code>.</p>
+
+<p>Toutes les<a href="/fr/DOM/Worker/Functions_available_to_workers"> interfaces et toutes les fonctions</a> ne seront pas disponibles pour le script associé au worker.</p>
+
+<div class="blockIndicator note">
+<p>Dans firefox, si vous souhaitez utiliser les workers dans une extension et que vous souhaitez avoir accès au <a href="/en/js-ctypes" title="en/js-ctypes">js-ctypes</a>, vous devez utiliser le {{ domxref("ChromeWorker") }} à la place.</p>
+</div>
+
+<h2 id="Constructeurs">Constructeurs</h2>
+
+<dl>
+ <dt>{{domxref("Worker.Worker", "Worker()")}}</dt>
+ <dd>Créer un web worker dédié qui execute le script qui est au bout de l'URL spécifié. Les workers peuvent aussi être créés en utilisant les <a href="https://developer.mozilla.org/fr/docs/Web/API/Blob">Blobs</a>.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Il hérite de propriétés de son parent, {{domxref("EventTarget")}}, et implémente les propriétés de {{domxref("AbstractWorker")}}.</em></p>
+
+<h3 id="Gestionnaires_dévénements">Gestionnaires d'événements</h3>
+
+<dl>
+ <dt>{{domxref("AbstractWorker.onerror")}}</dt>
+ <dd>Un {{ domxref("EventListener") }} qui est appelé quand un {{domxref("ErrorEvent")}} de type <code>error</code> arrive dans le worker. Il est hérité de {{domxref("AbstractWorker")}}.</dd>
+ <dt>{{domxref("Worker.onmessage")}}</dt>
+ <dd>Un {{ domxref("EventListener") }} qui est appelé quand un {{domxref("MessageEvent")}} de type <code>message</code> arrive dans le worker — i.e. quand un message est envoyé au document parent depuis le worker via {{domxref("DedicatedWorkerGlobalScope.postMessage")}}. Le message est stocké dans la propriété {{domxref("MessageEvent.data", "data")}} de l'événement.</dd>
+ <dt>{{domxref("Worker.onmessageerror")}}</dt>
+ <dd>Un {{domxref("EventHandler")}} qui indique le code à appeler quand un message {{event("messageerror")}} arrive.</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Il hérite de son parent, </em> <em>{{domxref("EventTarget")}},</em> et implémente les propriétés de <em>{{domxref("AbstractWorker")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("Worker.postMessage()")}}</dt>
+ <dd>Envoie un message, qui est n'importe quel objets JavaScript vers la clôture du worker.</dd>
+ <dt>{{domxref("Worker.terminate()")}}</dt>
+ <dd>Termine immédiatement le worker. Ceci n'offre aucune chance au worker de finir son opération en cours, il est simplement arrêté une fois pour toute. Les instances de <code><a href="/fr/docs/Web/API/ServiceWorker">ServiceWorker</a></code> ne supportent pas cette méthode.</dd>
+</dl>
+
+<h2 id="Évènements">Évènements</h2>
+
+<dl>
+ <dt><code><a href="/fr/docs/Web/API/Worker/message_event">message</a></code></dt>
+ <dd>Lorsque le worker parent reçoit un message venant du worker. On peut aussi y accéder via la propriété {{domxref("Worker.onmessage")}}.</dd>
+ <dt><code><a href="/fr/docs/Web/API/Worker/messageerror_event">messageerror</a></code></dt>
+ <dd>Lorsque le worker reçois un message qu'il ne peut <a href="/fr/docs/Web/API/Web_Workers_API/Structured_clone_algorithm">désérialiser</a>. Aussi disponible à travers la propriété {{domxref("Worker.onmessageerror")}}.</dd>
+</dl>
+
+<dl>
+ <dt><code><a href="/fr/docs/Web/API/Window/rejectionhandled_event">rejectionhandled</a></code></dt>
+ <dd>Levé à chaque fois qu'une {{jsxref("Promise")}} est rejeté, avec ou sans gestionnaire pour intercepter l'exception. Aussi disponible à travers le gestionnaire <code><a href="/fr/docs/Web/API/WindowEventHandlers/onrejectionhandled">onrejectionhandled</a></code>.</dd>
+ <dt><code><a href="/fr/docs/Web/API/Window/unhandledrejection_event">unhandledrejection</a></code></dt>
+ <dd>Levé quand une {{jsxref("Promise")}} est rejetée sans gestionnaire pour récupérer l'exception. Aussi disponible à travers la propriété <code><a href="/fr/docs/Web/API/WindowEventHandlers/onunhandledrejection">onunhandledrejection</a></code>.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'extrait de code suivant montre la création d'un objet {{domxref("Worker")}} en utilisant le constructeur {{domxref("Worker.Worker", "Worker()")}} et l'utilisation de l'objet:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> monWorker <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Worker</span><span class="punctuation token">(</span><span class="string token">"worker.js"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> premier <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'#numero1'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+premier<span class="punctuation token">.</span>onchange <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>
+  monWorker<span class="punctuation token">.</span><span class="function token">postMessage</span><span class="punctuation token">(</span><span class="punctuation token">[premiere</span><span class="punctuation token">.</span>valeur<span class="punctuation token">, deuxieme</span><span class="punctuation token">.</span>valeur<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">'Message envoyé au worker'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>Pour un exemple complet, voir <a class="external external-icon" href="https://github.com/mdn/simple-web-worker">Exemple basique de worker dédié</a> (<a class="external external-icon" href="http://mdn.github.io/simple-web-worker/">exécuter le worker dédié</a>).</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statuts</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#worker", "Worker")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_avec_les_navigateurs">Compatibilité avec les navigateurs</h2>
+
+<div>
+<p>Voici le support des différents type de worker. Voir les pages de chaque worker pour avoir les particularités.</p>
+
+
+
+<p>{{Compat("api.Worker")}}</p>
+
+<h3 id="Comportement_des_erreur_Cross-origin_sur_les_worker">Comportement des erreur Cross-origin sur les worker</h3>
+
+<p>Dans les premières versions des spécifications, charger un scripte worker en cross-origin lève une exception <code>SecurityError</code>. Désormais, à la place un évènement {{event("error")}} lancé. Pour en savoir plus, voir <em><a href="https://www.fxsitecompat.com/en-CA/docs/2016/loading-cross-origin-worker-now-fires-error-event-instead-of-throwing-worker-in-sandboxed-iframe-no-longer-allowed/">(en) Loading cross-origin worker now fires error event instead of throwing; worker in sandboxed iframe no longer allowed</a></em>.</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="internal" href="/fr/docs/Web/API/Web_Workers_API/Utilisation_des_web_workers" title="Utiliser les web Worker">Utiliser les web Worker</a></li>
+ <li><a href="/fr/docs/Web/API/Worker/Functions_and_classes_available_to_workers">Fonctions et classes disponibles dans les Web Workers</a></li>
+ <li>D'autres type de workers: {{ domxref("SharedWorker") }}, et <a href="https://developer.mozilla.org/fr/docs/Web/API/ServiceWorker_API">ServiceWorker</a>.</li>
+ <li>Worker non-standard, spécifique à Gecko: {{ domxref("ChromeWorker") }}, utilisé par les extensions.</li>
+</ul>
diff --git a/files/fr/web/api/worker/onmessage/index.html b/files/fr/web/api/worker/onmessage/index.html
new file mode 100644
index 0000000000..be2e625626
--- /dev/null
+++ b/files/fr/web/api/worker/onmessage/index.html
@@ -0,0 +1,79 @@
+---
+title: Worker.onmessage
+slug: Web/API/Worker/onmessage
+tags:
+  - API
+  - Property
+  - Reference
+translation_of: Web/API/Worker/onmessage
+---
+<p>{{ APIRef("Web Workers API") }}</p>
+
+<p>La propriété <strong><code>onmessage</code></strong> de l'interface {{domxref("Worker")}} représente un {{domxref("EventHandler")}}, à savoir une fonction qui est appelée lorsque l'événement {{event("message")}} survient. Ces événements sont du type {{domxref("MessageEvent")}} et sont appelés quand le parent du worker reçoit un message (c’est-à-dire à partir de la méthode {{domxref("DedicatedWorkerGlobalScope.postMessage")}}).</p>
+
+<div class="note">
+<p><strong>Remarque </strong>: le contenu du message est fourni par la propriété <code>data</code> de l'événement {{event("message")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">myWorker.onmessage = function(e) { ... }</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'extrait de code suivant illustre la création d'un objet {{domxref("Worker")}} utilisant le constructeur {{domxref("Worker.Worker", "Worker()")}}. Les messages sont passés au worker lorsque la valeur de l'élément de formulaire <code>first</code> change. Un gestionnaire onmessage est également présent pour s'occuper des messages retournés par le worker.</p>
+
+<pre class="brush: js">var myWorker = new Worker("worker.js");
+
+first.onchange = function() {
+  myWorker.postMessage([first.value,second.value]);
+  console.log('Message envoyé au worker');
+}
+
+myWorker.onmessage = function(e) {
+  result.textContent = e.data;
+  console.log('Message reçu du worker');
+}
+</pre>
+
+<p>Dans le script <code>worker.js</code>, un gestionnaire <code>onmessage</code> se charge des messages en provenance du script principal :</p>
+
+<pre class="brush: js">onmessage = function(e) {
+  console.log('Message reçu du script principal');
+  var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
+  console.log('Renvoi d\'un message au script principal');
+  postMessage(workerResult);
+}</pre>
+
+<p>Remarquez comment dans le script principal, <code>onmessage</code> doit être appelée par <code>myWorker</code>, tandis que dans le script du worker vous avez juste besoin d'appeler <code>onmessage</code> parce que le worker est en réalité le contexte global ({{domxref("DedicatedWorkerGlobalScope")}}).</p>
+
+<p>Pour un exemple complet, consulter notre <a class="external external-icon" href="https://github.com/mdn/simple-web-worker">Exemple basique de worker dédié</a> (<a class="external external-icon" href="http://mdn.github.io/simple-web-worker/">lancez le worker dédié</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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#handler-worker-onmessage", "Worker.onmessage")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+
+
+<p>{{Compat("api.Worker.onmessage")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p>L'interface {{domxref("Worker")}} à laquelle elle appartient.</p>
diff --git a/files/fr/web/api/worker/postmessage/index.html b/files/fr/web/api/worker/postmessage/index.html
new file mode 100644
index 0000000000..d8a3e7be93
--- /dev/null
+++ b/files/fr/web/api/worker/postmessage/index.html
@@ -0,0 +1,153 @@
+---
+title: Worker.postMessage()
+slug: Web/API/Worker/postMessage
+translation_of: Web/API/Worker/postMessage
+---
+<p>{{ apiref("Worker") }}</p>
+
+<p>La méthode <code><strong>Worker.postMessage()</strong></code> envoie un message à la portée locale du worker. Cette fonction accepte un seul paramètre, qui est la donnée à envoyer au worker. Cette donnée peut-être de n'importe quelle valeur ou un objet JavaScript pris en charge par l'algorithme de clone structuré, qui inclut les références cycliques.</p>
+
+<p>Le Worker peut renvoyer une information au thread qui l'a créé en utilisant la méthode {{domxref("DedicatedWorkerGlobalScope.postMessage")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>worker.</em>postMessage(<em>aMessage</em>, <em>[transferList</em>]);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><em>aMessage</em></dt>
+ <dd>L'objet à envoyer au worker; il va être dans le champ de donnée <code>data</code> dans l'évènement délivré au gestonnaire d'évènement {{domxref("Worker.onmessage")}}. Cette donnée peut être de n'importe quelle valeur ou un objet JavaScript pris en charge par l'algorithme de <a href="/fr/docs/Web/API/Web_Workers_API/algorithme_clonage_structure">clone structuré</a>, qui inclut les références cycliques.</dd>
+ <dt><em>transferList</em> {{optional_inline}}</dt>
+ <dd>Un tableau optionnel d'objets {{domxref("Transferable")}} desquels on doit transférer la propriété. Si la propriété d'un objet est transférée, il devient inutilisable (<em>neutralisé</em>) pour le contexte émétteur et devient disponible uniquement pour le worker auquel cela a été envoyé.</dd>
+ <dd>Seulement des objets de types {{domxref("MessagePort")}}, {{domxref("ArrayBuffer")}} ou {{domxref("ImageBitmap")}} peuvent être transférés. <code>null</code> n'est pas une valeur accéptée pour <code>transfer</code>.</dd>
+ <dt>
+ <h3 id="Retour">Retour</h3>
+ </dt>
+</dl>
+
+<p>Vide.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'extrait de code suivant montre la création d'un objet {{domxref("Worker")}} en utilisant le constructeur {{domxref("Worker.Worker", "Worker()")}}. Quand les deux champs de formulaire (<code>fisrt</code> et <code>second</code>) ont été changés, les évènements {{event("change")}} invoquent <code>postMessage()</code> pour envoyer la valeur des deux entrées au <em>worker</em> courant.</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> myWorker <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Worker</span><span class="punctuation token">(</span><span class="string token">'worker.js'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+first<span class="punctuation token">.</span><span class="function function-variable token">onchange</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>
+  myWorker<span class="punctuation token">.</span><span class="function token">postMessage</span><span class="punctuation token">(</span><span class="punctuation token">[</span>first<span class="punctuation token">.</span>value<span class="punctuation token">,</span>second<span class="punctuation token">.</span>value<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">'Message posted to worker'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+second<span class="punctuation token">.</span><span class="function function-variable token">onchange</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>
+  myWorker<span class="punctuation token">.</span><span class="function token">postMessage</span><span class="punctuation token">(</span><span class="punctuation token">[</span>first<span class="punctuation token">.</span>value<span class="punctuation token">,</span>second<span class="punctuation token">.</span>value<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">'Message posted to worker'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>Pour l'exemple en entier, voir <a href="https://github.com/mdn/simple-web-worker">Basic dedicated worder example</a> (<a href="http://mdn.github.io/simple-web-worker/">démonstration</a>).</p>
+
+<div class="blockIndicator note">
+<p><strong>Remarque:</strong> <code>postMessage()</code> peut n'envoyer qu'un objet à la fois. Comme ci-dessus, si vous voulez envoyez plusieurs valeurs, vous pouvez utiliser un tableau.</p>
+</div>
+
+<h3 id="Exemple_de_transfert">Exemple de transfert</h3>
+
+<p>Cette exemple montre une extension pour Firefox qui transfert un <code>ArrarBuffer</code> depuis le <em>thread</em> principal vers le <code>ChromeWorker</code>, et le <code>ChromeWorker</code> répond au le thread principal.</p>
+
+<h4 id="Main_thread_code">Main thread code:</h4>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> myWorker <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">ChromeWorker</span><span class="punctuation token">(</span>self<span class="punctuation token">.</span>path <span class="operator token">+</span> <span class="string token">'myWorker.js'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="keyword token">function</span> <span class="function token">handleMessageFromWorker</span><span class="punctuation token">(</span><span class="parameter token">msg</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">'incoming message from worker, msg:'</span><span class="punctuation token">,</span> msg<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">switch</span> <span class="punctuation token">(</span>msg<span class="punctuation token">.</span>data<span class="punctuation token">.</span>aTopic<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        <span class="keyword token">case</span> <span class="string token">'do_sendMainArrBuff'</span><span class="punctuation token">:</span>
+            <span class="function token">sendMainArrBuff</span><span class="punctuation token">(</span>msg<span class="punctuation token">.</span>data<span class="punctuation token">.</span>aBuf<span class="punctuation token">)</span>
+            <span class="keyword token">break</span><span class="punctuation token">;</span>
+        <span class="keyword token">default</span><span class="punctuation token">:</span>
+            <span class="keyword token">throw</span> <span class="string token">'no aTopic on incoming message to ChromeWorker'</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+<span class="punctuation token">}</span>
+
+myWorker<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'message'</span><span class="punctuation token">,</span> handleMessageFromWorker<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// Ok lets create the buffer and send it</span>
+<span class="keyword token">var</span> arrBuf <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">ArrayBuffer</span><span class="punctuation token">(</span><span class="number token">8</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">info</span><span class="punctuation token">(</span><span class="string token">'arrBuf.byteLength pre transfer:'</span><span class="punctuation token">,</span> arrBuf<span class="punctuation token">.</span>byteLength<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+myWorker<span class="punctuation token">.</span><span class="function token">postMessage</span><span class="punctuation token">(</span>
+    <span class="punctuation token">{</span>
+        aTopic<span class="punctuation token">:</span> <span class="string token">'do_sendWorkerArrBuff'</span><span class="punctuation token">,</span>
+        aBuf<span class="punctuation token">:</span> arrBuf <span class="comment token">// The array buffer that we passed to the transferrable section 3 lines below</span>
+    <span class="punctuation token">}</span><span class="punctuation token">,</span>
+    <span class="punctuation token">[</span>
+        arrBuf <span class="comment token">// The array buffer we created 9 lines above</span>
+    <span class="punctuation token">]</span>
+<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+console<span class="punctuation token">.</span><span class="function token">info</span><span class="punctuation token">(</span><span class="string token">'arrBuf.byteLength post transfer:'</span><span class="punctuation token">,</span> arrBuf<span class="punctuation token">.</span>byteLength<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h4 id="Worker_code">Worker code</h4>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js">self<span class="punctuation token">.</span><span class="function function-variable token">onmessage</span> <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span><span class="parameter token">msg</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">switch</span> <span class="punctuation token">(</span><span class="parameter token">msg<span class="punctuation token">.</span>data<span class="punctuation token">.</span>aTopic</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        <span class="keyword token">case</span> <span class="string token">'do_sendWorkerArrBuff'</span><span class="punctuation token">:</span>
+               <span class="function token"> sendWorkerArrBuff</span><span class="punctuation token">(</span>msg<span class="punctuation token">.</span>data<span class="punctuation token">.</span>aBuf<span class="punctuation token">)</span>
+            <span class="keyword token">break</span><span class="punctuation token">;</span>
+        <span class="keyword token">default</span><span class="punctuation token">:</span>
+            <span class="keyword token">throw</span> <span class="string token">'no aTopic on incoming message to ChromeWorker'</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">sendWorkerArrBuff</span><span class="punctuation token">(</span><span class="parameter token">aBuf</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    console<span class="punctuation token">.</span><span class="function token">info</span><span class="punctuation token">(</span><span class="string token">'from worker, PRE send back aBuf.byteLength:'</span><span class="punctuation token">,</span> aBuf<span class="punctuation token">.</span>byteLength<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+    self<span class="punctuation token">.</span><span class="function token">postMessage</span><span class="punctuation token">(</span><span class="punctuation token">{</span>aTopic<span class="punctuation token">:</span><span class="string token">'do_sendMainArrBuff'</span><span class="punctuation token">,</span> aBuf<span class="punctuation token">:</span>aBuf<span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="punctuation token">[</span>aBuf<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">info</span><span class="punctuation token">(</span><span class="string token">'from worker, POST send back aBuf.byteLength:'</span><span class="punctuation token">,</span> aBuf<span class="punctuation token">.</span>byteLength<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h4 id="Output_logged">Output logged</h4>
+
+<pre class="line-numbers language-html"><code class="language-html">arrBuf.byteLength pre transfer: 8                              bootstrap.js:40
+arrBuf.byteLength post transfer: 0                             bootstrap.js:42
+
+from worker, PRE send back aBuf.byteLength: 8                  myWorker.js:5:2
+
+incoming message from worker, msg: message { ... }             bootstrap.js:20
+got back buf in main thread, aBuf.byteLength: 8                bootstrap.js:12
+
+from worker, POST send back aBuf.byteLength: 0                 myWorker.js:7:2</code></pre>
+
+<p><code>byteLength</code> passe à 0 quand il est transferré. Pour voir l'exemple de cette extension de démonstration de Firefox, voir <a href="https://github.com/Noitidart/ChromeWorker/tree/aca57d9cadc4e68af16201bdecbfb6f9a6f9ca6b">GitHub :: ChromeWorker - demo-transfer-arraybuffer</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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#dom-worker-postmessage", "Worker.postMessage()")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+
+
+<p>{{Compat("api.Worker.postMessage")}}</p>
+[1] Internet Explorer ne supporte pas les objets {{domxref("Transferable")}}.</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("Worker")}} auquel il appartient.</li>
+</ul>
diff --git a/files/fr/web/api/worker/terminate/index.html b/files/fr/web/api/worker/terminate/index.html
new file mode 100644
index 0000000000..6565192498
--- /dev/null
+++ b/files/fr/web/api/worker/terminate/index.html
@@ -0,0 +1,58 @@
+---
+title: Worker.terminate()
+slug: Web/API/Worker/terminate
+translation_of: Web/API/Worker/terminate
+---
+<p>{{ apiref("Worker") }}</p>
+
+<p>La méthode <code> <strong>terminate()</strong></code> de l'interface {{domxref("Worker")}} termine immédiatement le {{domxref("Worker")}}. Cette interruption ne permet pas au worker de finaliser ses opérations, il est juste arrêté sur le champ.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">myWorker.terminate();</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Aucun.</p>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Néant.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'extrait de code suivant montre la création d'un objet {{domxref("Worker")}} en utilisant le constructeur {{domxref("Worker.Worker", "Worker()")}}, qui est alors immédiatement interrompu.</p>
+
+<pre class="brush: js">var myWorker = new Worker("worker.js");
+
+myWorker.terminate();
+</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', "#dom-worker-terminate", "Worker.terminate()")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+
+
+<p>{{Compat("api.Worker.terminate")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p>L'interface {{domxref("Worker")}} à laquelle elle appartient.</p>
diff --git a/files/fr/web/api/worker/worker/index.html b/files/fr/web/api/worker/worker/index.html
new file mode 100644
index 0000000000..34717d9a21
--- /dev/null
+++ b/files/fr/web/api/worker/worker/index.html
@@ -0,0 +1,88 @@
+---
+title: Worker()
+slug: Web/API/Worker/Worker
+tags:
+  - API
+  - Reference
+translation_of: Web/API/Worker/Worker
+---
+<p>{{APIRef("Worker")}}</p>
+
+<p>Le constructeur <code><strong>Worker()</strong></code> crée un objet {{domxref("Worker")}} qui exécute le script à l'URL spécifiée. Ce script doit obéir à la <a href="/en/Same_origin_policy_for_JavaScript" title="Same origin policy for JavaScript">same-origin policy</a>.</p>
+
+<div class="note">
+<p><strong>Remarque </strong>: il y a un désaccord entre les éditeurs de navigateur sur la question de savoir si une donnée URI relève ou non de la même origine. Bien que Gecko 10.0 {{ geckoRelease("10.0") }} et suivant accepte les données URIs, ce n'est pas le cas dans tous les autres navigateurs.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var myWorker = new Worker(aURL, options);</pre>
+
+<h3 id="Arguments">Arguments</h3>
+
+<dl>
+ <dt><em>aURL</em></dt>
+ <dd>Est un {{domxref("DOMString")}} représentant l'URL du script que le worker va exécuter. Il doit obéir à la same-origin policy.</dd>
+ <dt>options {{optional_inline}}</dt>
+ <dd>
+ <p>Un objet contenant des propriétés pour définir les options. Les propriétés suivantes sont valables:</p>
+
+ <ul>
+  <li><code>type</code>: Une {{domxref("DOMString")}} définissant le type de worker à créer. The valeur peuvent être <code>classic</code> ou <code>module</code>. Si cette prpriété n'est pas définie, la valeur sera <code>classic</code>.</li>
+  <li><code>credentials</code>: Une {{domxref("DOMString")}} définissant le type de politique d'origine à utiliser pour le <em>worker</em>. Les valeurs peuvent être <dfn><code>omit</code></dfn>, <code><dfn>same-origin</dfn></code> ou <dfn><code>include</code>. </dfn>Si cette propriété n'est pas définie, ou que type est défini à <code>classic</code>, la valeur sera <code>classic</code>.</li>
+  <li><code>name</code>: Une {{domxref("DOMString")}} définissant un identifiant pour l'environment du worker {{domxref("DedicatedWorkerGlobalScope")}}, souvent utilisé pour le débogage.<span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span></li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<ul>
+ <li><code>SecurityError</code> est levé si le document n'est pas autorisé à démarer des <em>workers</em>; par exemple si l'URL à une syntaxe invalide ou que la politique d'origine n'est pas respectée.</li>
+ <li><code>NetworkError</code> est levé si le type MIME du script du worker est incorect. Il doit toujours être défini à <code>text/javascript</code>.</li>
+ <li><code>SyntaxError</code> est levé si l'URL ne peut pas être analysée.</li>
+</ul>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'extrait de code suivant illustre la création d'un objet {{domxref("Worker")}} en utilisant le constructeur <code>Worker()</code> et l'usage qui peut alors en être fait :</p>
+
+<pre class="brush: js">var myWorker = new Worker("worker.js");
+
+first.onchange = function() {
+  myWorker.postMessage([first.value,second.value]);
+  console.log('Message envoyé au worker');
+}</pre>
+
+<p>Pour un exemple complet, consultez notre <a class="external external-icon" href="https://github.com/mdn/simple-web-worker">Exemple basique d'un worker dédié </a>(<a class="external external-icon" href="http://mdn.github.io/simple-web-worker/">lancer le worker dédié</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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#dom-worker", "Worker()")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Worker.Worker")}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Remarque:</strong> Un navigateur peut indiquer avoir un support complet de <code>Worker()</code> même s'il ne supporte pas les fichiers worker écrit comme des modules. À partir du premier août 2019, aucun navigateur n'est connu pour avoir un support en production des fichiers <em>worker</em> écrit comme des modules. Sans ces suppports, les fichiers <em>workers</em> écrit sous forme de module et les modules utilisés dans les workers doivent être transpilés ou convertis en non-module pour être utilisables.</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p>L'interface {{domxref("Worker")}} auquel il appartient.</p>
diff --git a/files/fr/web/api/workerglobalscope/close/index.html b/files/fr/web/api/workerglobalscope/close/index.html
new file mode 100644
index 0000000000..4d02224a9d
--- /dev/null
+++ b/files/fr/web/api/workerglobalscope/close/index.html
@@ -0,0 +1,34 @@
+---
+title: WorkerGlobalScope.close()
+slug: Web/API/WorkerGlobalScope/close
+translation_of: Web/API/WorkerGlobalScope/close
+---
+<p>{{APIRef("Web Workers API")}}{{obsolete_header}}</p>
+
+<p>La méthode <code><strong>close()</strong></code> de l'interface {{domxref("WorkerGlobalScope")}} annule toutes les tâches en attente dans la boucle d'événements du <code>WorkerGlobalScope</code>, mettant fin alors à ce contexte précis.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">self.close();</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Si vous souhaitez fermer votre instance de worker au sein du worker lui-même, vous pouvez appeler la méthode comme suit :</p>
+
+<pre class="brush: js">close();</pre>
+
+<p><code>close()</code> et <code>self.close()</code> sont effectivement équivalentes — les deux expressions correspondent à un appel de la méthode <code>close()</code> à partir du contexte local du worker.</p>
+
+<div class="note">
+<p><strong>Remarque</strong>: il y a également une façon de stopper le worker à partir du thread principal: la méthode {{domxref("Worker.terminate")}}.</p>
+</div>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.WorkerGlobalScope.close")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p>{{domxref("WorkerGlobalScope")}}</p>
diff --git a/files/fr/web/api/workerglobalscope/console/index.html b/files/fr/web/api/workerglobalscope/console/index.html
new file mode 100644
index 0000000000..f045e26b62
--- /dev/null
+++ b/files/fr/web/api/workerglobalscope/console/index.html
@@ -0,0 +1,50 @@
+---
+title: WorkerGlobalScope.console
+slug: Web/API/WorkerGlobalScope/console
+tags:
+  - API
+  - Propriété
+  - Reference
+  - Web Workers
+  - WorkerGlobalScope
+  - lecture seule
+translation_of: Web/API/WorkerGlobalScope/console
+---
+<p>{{APIRef("Web Workers API")}}{{Non-standard_header}}</p>
+
+<p>La propriété en lecture seule <code><strong>console</strong></code> de l'interface {{domxref("WorkerGlobalScope")}} retourne un objet {{domxref("Console")}} donnant accès à la console du navigateur pour le worker.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var consoleObj = self.console;</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un objet {{domxref("Console")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Cette propriété vous permet d'avoir accès à la console du navigateur à des fins de débogage dans un worker. Par exemple, vous pouvez appeler</p>
+
+<pre class="brush: js">console.log('test');</pre>
+
+<p>dans un worker (qui est tout simplement l'équivalent de <code>self.console.log('test');</code>, car appelé dans le contexte du worker, qui peut être référencé par {{domxref("WorkerGlobalScope.self")}}), afin de retourner un message de test dans la console du navigateur.</p>
+
+<p>Si vous appelez <code>console.log()</code> depuis un {{domxref("DedicatedWorkerGlobalScope")}} ou un autre contexte qui agit sur une seule fenêtre chargée, la console de l'onglet correspondant recevra le message. En revanche, si vous appelez <code>console.log()</code> depuis un {{domxref("SharedWorkerGlobalScope")}}, la console globale du navigateur recevra le message.</p>
+
+<h2 id="Specifications" name="Specifications">Spécifications</h2>
+
+<p>Ne fait pas encore parti d'une spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.WorkerGlobalScope.console")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Console")}}</li>
+ <li>{{domxref("WorkerGlobalScope")}}</li>
+</ul>
diff --git a/files/fr/web/api/workerglobalscope/dump/index.html b/files/fr/web/api/workerglobalscope/dump/index.html
new file mode 100644
index 0000000000..8a6d9e31f2
--- /dev/null
+++ b/files/fr/web/api/workerglobalscope/dump/index.html
@@ -0,0 +1,52 @@
+---
+title: WorkerGlobalScope.dump()
+slug: Web/API/WorkerGlobalScope/dump
+translation_of: Web/API/WorkerGlobalScope/dump
+---
+<div>{{APIRef("Web Workers API")}}</div>
+
+<div class="blockIndicator warning">
+<p><span class="pl-s1"><span class="pl-s">Cette fonctionnalité n'est ni standard, ni en voie de standardisation. Ne l'utilisez pas pour des sites accessibles sur le Web : elle ne fonctionnera pas pour tout utilisateur. Il peut également y avoir d'importantes incompatibilités entre les implémentations et son comportement peut être modifié dans le futur.</span></span></p>
+</div>
+
+<p>La méthode <code><strong>dump()</strong></code> de l'interface {{domxref("WorkerGlobalScope")}} permet d'écrire des messages vers <code>stdout</code> — i.e. dans le terminal, seulement sur Firefox. C'est la même chose que {{domxref("window.dump")}} dans Firefox, mais pour les <em>worker</em>s.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">dump('Mon message\n');</pre>
+
+<h3 id="Paramètre">Paramètre</h3>
+
+<p>Une {{domxref("DOMString")}} contenant le message que vous voulez envoyer.</p>
+
+<h3 id="Retour">Retour</h3>
+
+<p>Rien.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Pour écrire quelque chose depuis votre <em>worker</em> vers votre terminal, vous devez d'abord ouvrir une instance de Firefox depuis votre invité de commande ou terminal. Par exemple, sous Mac OS X vous le lancer en utilisant quelque chose comme (en supposant que vous êtes dans le répertoire de l'application):</p>
+
+<pre class="brush: bash">./Firefox.app/Contents/MacOS/firefox-bin -profile /tmp -no-remote</pre>
+
+<p>Maintenant allez dans <code>about:config</code> et activez la préférence <code>browser.dom.window.dump.enabled</code>.</p>
+
+<p>Après, lancez un worker contenant la ligne suivante:</p>
+
+<pre class="brush: js">dump('test\n');</pre>
+
+<p>Vous devriez observer le message «test» apparaître dans le terminal.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette méthode n’apparaît dans aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.WorkerGlobalScope.dump")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p>{{domxref("WorkerGlobalScope")}}</p>
diff --git a/files/fr/web/api/workerglobalscope/importscripts/index.html b/files/fr/web/api/workerglobalscope/importscripts/index.html
new file mode 100644
index 0000000000..1ec7ac124b
--- /dev/null
+++ b/files/fr/web/api/workerglobalscope/importscripts/index.html
@@ -0,0 +1,73 @@
+---
+title: WorkerGlobalScope.importScripts()
+slug: Web/API/WorkerGlobalScope/importScripts
+translation_of: Web/API/WorkerGlobalScope/importScripts
+---
+<p>{{APIRef("Web Workers API")}}</p>
+
+<p>La méthode <code><strong>importScripts()</strong></code> de l'interface synchrome {{domxref("WorkerGlobalScope")}} importe un ou plusieurs scripts dans l'environnement du worker.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">self.importScripts('foo.js');
+self.importScripts('foo.js', 'bar.js', ...);</pre>
+
+<h3 id="Specifications" name="Specifications">Paramètres</h3>
+
+<p>Une liste d'objets {{domxref("DOMString")}} séparés par des virgules et représentant les scripts à importer.</p>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Rien.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Exception</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>NetworkError</code></td>
+   <td>Importer un script qui n'est pas servi avec un type MIME valide. (i.e. <code>text/javascript</code>).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Si vous disposez d'un code présent dans un script indépendant appelé <code>foo.js</code> que vous souhaitez utiliser à l'intérieur de worker.js, vous pouvez l'importer de la façon suivante:</p>
+
+<pre class="brush: js">importScripts('foo.js');</pre>
+
+<p><code>importScripts()</code> et <code>self.importScripts()</code> sont effectivement équivalentes — les deux expressions correspondent à la façon d'appeler <code>importScripts()</code> au sein du contexte local du worker.</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('HTML WHATWG', '#dom-workerglobalscope-importscripts', 'importScripts()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">he compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("api.WorkerGlobalScope.importScripts")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p>{{domxref("WorkerGlobalScope")}}</p>
diff --git a/files/fr/web/api/workerglobalscope/index.html b/files/fr/web/api/workerglobalscope/index.html
new file mode 100644
index 0000000000..56d0b2210c
--- /dev/null
+++ b/files/fr/web/api/workerglobalscope/index.html
@@ -0,0 +1,254 @@
+---
+title: WorkerGlobalScope
+slug: Web/API/WorkerGlobalScope
+tags:
+  - API
+  - Interface
+  - Reference
+  - TopicStub
+  - WorkerGlobalScope
+  - Workers
+translation_of: Web/API/WorkerGlobalScope
+---
+<p>{{APIRef("Web Workers API")}}</p>
+
+<p>L'interface <code><strong>WorkerGlobalScope</strong></code> de l'<a href="/en-US/docs/Web/API/Web_Workers_API">API Web Workers</a> est une interface représentant la portée de tout worker. Les Workers n'ont pas de contexte de navigation; cette portée contient les informations généralement véhiculées par les objets {{domxref("Window")}} — dans ce cas les gestionnaires d'événements, la console ou l'objet {{domxref("WorkerNavigator")}} associé. Chaque <code>WorkerGlobalScope</code> a sa propre boucle d'événements.</p>
+
+<p>Cette interface est généralement spécialisée par chaque type de worker : {{domxref("DedicatedWorkerGlobalScope")}} pour les workers dédiés, {{domxref("SharedWorkerGlobalScope")}} pour les workers partagés, et {{domxref("ServiceWorkerGlobalScope")}} pour <a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker</a>. La propriété <code>self</code> renvoie la portée spécialisée pour chaque contexte.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Cette interface hérite des propriétés de l'interface {{domxref("EventTarget")}} et implémente les propriétés de {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, et {{domxref("WindowEventHandlers")}}.</em></p>
+
+<h3 id="Propriétés_standard">Propriétés standard</h3>
+
+<dl>
+ <dt>{{domxref("WorkerGlobalScope.navigator")}} {{readOnlyinline}}</dt>
+ <dd>Renvoie le {{domxref("WorkerNavigator")}} associé au worker. C'est un objet navigator spécifique, principalement un sous-ensemble de {{domxref("Navigator")}} pour la navigation dans les portées, mais adapté aux workers.</dd>
+ <dt>{{domxref("WorkerGlobalScope.self")}} {{readOnlyinline}}</dt>
+ <dd>Renvoie une référence au <code>WorkerGlobalScope</code> lui-même. La plupart du temps, il s'agit d'une portée spécifique comme {{domxref("DedicatedWorkerGlobalScope")}},  {{domxref("SharedWorkerGlobalScope")}} ou {{domxref("ServiceWorkerGlobalScope")}}.</dd>
+ <dt>{{domxref("WorkerGlobalScope.location")}} {{readOnlyinline}}</dt>
+ <dd>Renvoie le {{domxref("WorkerLocation")}} associé au worker. Il s'agit d'un objet de localisation spécifique, principalement un sous-ensemble de {{domxref ("Location")}} pour les portées de navigation, mais adapté aux workers.</dd>
+</dl>
+
+<h3 id="Propriétés_non_standard">Propriétés non standard</h3>
+
+<dl>
+ <dt>{{domxref("WorkerGlobalScope.performance")}} {{readOnlyinline}} {{Non-standard_inline}}</dt>
+ <dd>Renvoie la {{domxref ("Performance")}} associée au worker. Il s'agit d'un objet de performance standard, sauf que seul un sous-ensemble de sa propriété et de ses méthodes est disponible pour les nœuds de calcul.</dd>
+ <dt>{{domxref("WorkerGlobalScope.console")}} {{readOnlyinline}} {{Non-standard_inline}}</dt>
+ <dd>Renvoie la {{domxref("Console")}} associée au worker.</dd>
+</dl>
+
+<h3 id="Gestionnaires_dévénements">Gestionnaires d'événements</h3>
+
+<p>Cette interface hérite des gestionnaires d'événements de l'interface {{domxref ("EventTarget")}} et implémente les gestionnaires d'événements de {{domxref ("WindowTimers")}} et {{domxref ("WindowBase64")}}.</p>
+
+<dl>
+ <dt>{{domxref("WorkerGlobalScope.onerror")}}</dt>
+ <dd>Est un {{domxref ("EventHandler")}} représentant le code à appeler lorsque l'événement {{event ("error")}} est déclenché.</dd>
+ <dt>{{domxref("WorkerGlobalScope.onoffline")}}</dt>
+ <dd>Est un {{domxref ("EventHandler")}} représentant le code à appeler lorsque l'événement {{event ("offline")}} est déclenché.</dd>
+ <dt>{{domxref("WorkerGlobalScope.ononline")}}</dt>
+ <dd>Est un {{domxref ("EventHandler")}} représentant le code à appeler lorsque l'événement {{event ("online")}} est déclenché.</dd>
+ <dt>{{domxref("WorkerGlobalScope.onlanguagechange")}}</dt>
+ <dd>Un {{domxref ("EventHandler")}} déclenché sur l'objet de portée global / worker lorsque les langues préférées de l'utilisateur changent.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("WorkerGlobalScope.onclose")}} {{Non-standard_inline}}</dt>
+ <dd>Est un {{domxref ("EventHandler")}} représentant le code à appeler lorsque l'événement {{event ("close")}} est déclenché.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p>Cette interface hérite des méthodes de l'interface {{domxref ("EventTarget")}} et implémente les méthodes de {{domxref ("WindowTimers")}}, {{domxref ("WindowBase64")}}, {{domxref ("WindowEventHandlers")}} et {{domxref ("GlobalFetch")}}.</p>
+
+<h3 id="Méthodes_standard">Méthodes standard</h3>
+
+<dl>
+ <dt>{{domxref("WorkerGlobalScope.close()")}}</dt>
+ <dd>Ignore toutes les tâches mises en file d'attente dans la boucle d'événements de <code>WorkerGlobalScope</code>, fermant ainsi cette portée particulière.</dd>
+ <dt>{{domxref("WorkerGlobalScope.importScripts()")}}</dt>
+ <dd>Importe un ou plusieurs scripts dans la portée du worker. Vous pouvez en spécifier autant que vous le souhaitez, séparés par des virgules. Par exemple:<code> importScripts('foo.js', 'bar.js');</code></dd>
+</dl>
+
+<h3 id="Méthodes_non_standard">Méthodes non standard</h3>
+
+<dl>
+ <dt>{{domxref("WorkerGlobalScope.dump()")}} {{non-standard_inline}}</dt>
+ <dd>Vous permet d'écrire un message stdout — c'est-à-dire dans votre terminal. C'est la même chose que {{domxref ("window.dump")}} de Firefox, mais pour les workers.</dd>
+</dl>
+
+<h3 id="Méthodes_mises_en_œuvre_dailleurs">Méthodes mises en œuvre d'ailleurs</h3>
+
+<dl>
+ <dt>{{domxref("WindowBase64.atob()")}}</dt>
+ <dd>Décode une chaîne de données qui a été encodée à l'aide d'un encodage base 64.</dd>
+ <dt>{{domxref("WindowBase64.btoa()")}}</dt>
+ <dd>Crée une chaîne ASCII encodée en base 64 à partir d'une chaîne de données binaires.</dd>
+ <dt>{{domxref("WindowTimers.clearInterval()")}}</dt>
+ <dd>Annule l'exécution répétée définie à l'aide de {{domxref ("WindowTimers.setInterval ()")}}.</dd>
+ <dt>{{domxref("WindowTimers.clearTimeout()")}}</dt>
+ <dd>Annule l'exécution répétée définie à l'aide de {{domxref ("WindowTimers.setTimeout ()")}}.</dd>
+ <dt>{{domxref("GlobalFetch.fetch()")}}</dt>
+ <dd>Démarre le processus de récupération d'une ressource.</dd>
+ <dt>{{domxref("WindowTimers.setInterval()")}}</dt>
+ <dd>Planifie l'exécution d'une fonction toutes les X millisecondes.</dd>
+ <dt>{{domxref("WindowTimers.setTimeout()")}}</dt>
+ <dd>Définit un délai pour l'exécution d'une fonction.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Vous n'accéderez pas à <code>WorkerGlobalScope</code> directement dans votre code; cependant, ses propriétés et méthodes sont héritées par des portées globales plus spécifiques telles que {{domxref ("DedicatedWorkerGlobalScope")}} et {{domxref ("SharedWorkerGlobalScope")}}. Par exemple, vous pouvez importer un autre script dans le worker et imprimer le contenu de l'objet <code>navigator</code> de l'étendue du worker en utilisant les deux lignes suivantes:</p>
+
+<pre class="brush: js notranslate">importScripts('foo.js');
+console.log(navigator);</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Étant donné que la portée globale du script de worker est effectivement la portée globale du worker que vous exécutez ({{domxref ("DedicatedWorkerGlobalScope")}} ou autre) et que toutes les portées globales de worker héritent des méthodes, des propriétés, etc. À partir de <code>WorkerGlobalScope</code>, vous pouvez exécuter des lignes telles que celles ci-dessus sans spécifier d'objet parent.</p>
+</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('HTML WHATWG', '#workerglobalscope', 'WorkerGlobalScope')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Aucun changement par rapport à {{SpecName ("Web Workers")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Workers', '#workerglobalscope', 'WorkerGlobalScope')}}</td>
+   <td>{{Spec2('Web Workers')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatChrome(4)}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>10</td>
+   <td>10.6</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td><code>ononline</code>, <code>onoffline</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("29")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>console</code> {{Non-standard_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("29")}} as  <code>WorkerConsole</code><br>
+    {{CompatGeckoDesktop("30")}} as the regular <code>Console</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>performance</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("34")}}</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>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.9.1")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>11.5</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td><code>ononline</code>, <code>onoffline</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("29")}} as a specific <code>WorkerConsole</code><br>
+    {{CompatGeckoMobile("30")}} as the regular <code>Console</code></td>
+   <td>1.4</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>console</code> {{Non-standard_inline}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("29")}}</td>
+   <td>1.4</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>performance</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("34")}}</td>
+   <td>2.1</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>Autre interface d'objet globale: {{domxref("Window")}}, {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}}, , {{domxref("ServiceWorkerGlobalScope")}}</li>
+ <li>Autres interfaces liées aux travailleurs: {{domxref("Worker")}}, {{domxref("WorkerLocation")}}, {{domxref("WorkerGlobalScope")}}, et {{domxref("ServiceWorkerGlobalScope")}}.</li>
+ <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers" title="/en-US/docs/Web/Guide/Performance/Using_web_workers">Utilisation de web workers.</a></li>
+</ul>
+
+<dl>
+</dl>
diff --git a/files/fr/web/api/workerglobalscope/location/index.html b/files/fr/web/api/workerglobalscope/location/index.html
new file mode 100644
index 0000000000..9406fa3aeb
--- /dev/null
+++ b/files/fr/web/api/workerglobalscope/location/index.html
@@ -0,0 +1,69 @@
+---
+title: WorkerGlobalScope.location
+slug: Web/API/WorkerGlobalScope/location
+translation_of: Web/API/WorkerGlobalScope/location
+---
+<p>{{APIRef("Web Workers API")}}</p>
+
+<p>La propriété en lecture seule <code><strong>location</strong></code> de l'interface {{domxref("WorkerGlobalScope")}} retourne l'objet {{domxref("WorkerLocation")}} associé au worker. C'est un objet location spécifique, essentiellement un sous-ensemble de {{domxref("Location")}} pour les contextes de navigation, mais adapté aux workers.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var locationObj = self.location;</pre>
+
+<h3 id="Specifications" name="Specifications">Valeur de retour</h3>
+
+<p>Un objet {{domxref("WorkerLocation")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Si vous appelez l'instruction suivante dans un document délivré par <code>localhost:8000</code></p>
+
+<pre class="brush: js">console.log(location);</pre>
+
+<p>à l'intérieur d'un worker (ce qui équivaut à <code>self.console.log(self.location);</code>, puisqu'il est appelé dans le contexte du worker qui peut être référencé par {{domxref("WorkerGlobalScope.self")}}), la console vous retournera un objet {{domxref("WorkerLocation")}}  — comme ce qui suit :</p>
+
+<pre class="brush: js">WorkerLocation {hash: "", search: "", pathname: "/worker.js", port: "8000", hostname: "localhost"…}
+  hash: ""
+  host: "localhost:8000"
+  hostname: "localhost"
+  href: "http://localhost:8000/worker.js"
+  origin: "http://localhost:8000"
+  pathname: "/worker.js"
+  port: "8000"
+  protocol: "http:"
+  search: ""
+  __proto__: WorkerLocation</pre>
+
+<p>Vous pouvez utiliser l'objet location pour récupérer des informations supplémentaires sur la localisation du document, comme vous pourriez le faire avec un objet {{domxref("Location")}} normal.</p>
+
+<div class="note">
+<p><strong>Remarque </strong>: Firefox rencontre un bogue avec l'utilisation de <code>console.log</code> à l'intérieur des workers partagés/service (voir {{Bug("1058644")}}), ce qui peut occasionner d'étranges résultats, mais cela devrait être bientôt corrigé.</p>
+</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('HTML WHATWG', '#dom-workerglobalscope-location', 'location')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.WorkerGlobalScope.location")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p>{{domxref("WorkerGlobalScope")}}</p>
diff --git a/files/fr/web/api/workerglobalscope/navigator/index.html b/files/fr/web/api/workerglobalscope/navigator/index.html
new file mode 100644
index 0000000000..a90b3657fc
--- /dev/null
+++ b/files/fr/web/api/workerglobalscope/navigator/index.html
@@ -0,0 +1,70 @@
+---
+title: WorkerGlobalScope.navigator
+slug: Web/API/WorkerGlobalScope/navigator
+translation_of: Web/API/WorkerGlobalScope/navigator
+---
+<p>{{APIRef("Web Workers API")}}</p>
+
+<p>La propriété en lecture seule <code><strong>navigator</strong></code> de l'interface {{domxref("WorkerGlobalScope")}} retourne le {{domxref("WorkerNavigator")}} associé au worker. C'est un objet navigator spécifique, essentiellement un sous-ensemble de {{domxref("Navigator")}} pour les contextes de navigation, mais adapté aux workers.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var navigatorObj = self.navigator;</pre>
+
+<h3 id="Specifications" name="Specifications">Valeur de retour</h3>
+
+<p>Un objet  {{domxref("WorkerNavigator")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Si vous appelez</p>
+
+<pre class="brush: js">console.log(navigator);</pre>
+
+<p>à l'intérieur d'un worker (ce qui équivaut à <code>self.console.log(self.navigator);</code>, puisqu'il est appelé dans le contexte du worker qui peut être référencé par {{domxref("WorkerGlobalScope.self")}}), la console vous retournera un objet {{domxref("WorkerNavigator")}} — comme ce qui suit :</p>
+
+<pre class="brush: js">Object {onLine: true, userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_1) Ap…ML, like Gecko) Chrome/40.0.2214.93 Safari/537.36", product: "Gecko", platform: "MacIntel", appVersion: "5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKi…ML, like Gecko) Chrome/40.0.2214.93 Safari/537.36"…}
+    appCodeName: "Mozilla"
+    appName: "Netscape"
+    appVersion: "5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.93 Safari/537.36"
+    hardwareConcurrency: 4
+    onLine: true
+    platform: "MacIntel"
+    product: "Gecko"
+    userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.93 Safari/537.36"
+    __proto__: Object</pre>
+
+<p>Vous pouvez utiliser l'objet navigator pour récupérer des informations supplémentaires sur l'environnement d'exécution, comme vous pourriez le faire avec un objet {{domxref("Navigator")}} normal.</p>
+
+<div class="note">
+<p><strong>Remarque </strong>: Firefox rencontre un bogue avec l'utilisation de <code>console.log</code> à l'intérieur des workers partagés/service (voir {{Bug("1058644")}}), ce qui peut occasionner d'étranges résultats, mais cela devrait être bientôt corrigé.</p>
+</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('HTML WHATWG', '#dom-worker-navigator', 'navigator')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.WorkerGlobalScope.navigator")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p>{{domxref("WorkerNavigator")}}</p>
diff --git a/files/fr/web/api/workerglobalscope/onclose/index.html b/files/fr/web/api/workerglobalscope/onclose/index.html
new file mode 100644
index 0000000000..1eee58ed77
--- /dev/null
+++ b/files/fr/web/api/workerglobalscope/onclose/index.html
@@ -0,0 +1,42 @@
+---
+title: WorkerGlobalScope.onclose
+slug: Web/API/WorkerGlobalScope/onclose
+translation_of: Web/API/WorkerGlobalScope/onclose
+---
+<p>{{APIRef("Web Workers API")}}{{obsolete_header}}</p>
+
+<div class="blockIndicator warning">
+<p><strong>Non-standard</strong></p>
+
+<p>Cette fonctionnalité n'est ni standard, ni en voie de standardisation. Ne l'utilisez pas pour des sites accessibles sur le Web: elle ne fonctionnera pas pour tout utilisateur. Il peut également y avoir d'importantes incompatibilités entre les implémentations et son comportement peut être modifié dans le futur.</p>
+</div>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>La propriété <strong><code>onclose</code></strong> de l'interface {{domxref("WorkerGlobalScope")}} représente un {{domxref("EventHandler")}} à appeler lorsque l'événement {{event("close")}} survient et se propage à travers le {{domxref("Worker")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre>self.onclose = function() { ... };</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'extrait de code suivant montre la création d'un gestionnaire <code>onclose</code> placé au sein d'un worker :</p>
+
+<pre class="brush: js">self.onclose = function() {
+  console.log('Your worker instance has been closed');
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette fonctionnalité n'est défini dans plus aucune spécification.</p>
+
+<h2 id="Compatibilité_des_naviguateurs">Compatibilité des naviguateurs</h2>
+
+
+
+<p>{{Compat("api.WorkerGlobalScope.onclose")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p>L'interface {{domxref("WorkerGlobalScope")}} à laquelle elle appartient.</p>
diff --git a/files/fr/web/api/workerglobalscope/onerror/index.html b/files/fr/web/api/workerglobalscope/onerror/index.html
new file mode 100644
index 0000000000..f2c782a986
--- /dev/null
+++ b/files/fr/web/api/workerglobalscope/onerror/index.html
@@ -0,0 +1,47 @@
+---
+title: WorkerGlobalScope.onerror
+slug: Web/API/WorkerGlobalScope/onerror
+translation_of: Web/API/WorkerGlobalScope/onerror
+---
+<p>{{APIRef("Web Workers API")}}</p>
+
+<p>La propriété <strong><code>onerror</code></strong> de l'interface {{domxref("WorkerGlobalScope")}} représente un {{domxref("EventHandler")}} à appeler lorsque l'événement {{event("error")}} survient et se propage à travers le {{domxref("Worker")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre>self.onerror = function() { ... };</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'extrait de code suivant montre un gestionnaire <code>onerror</code> placé au sein d'un worker :</p>
+
+<pre class="brush: js">self.onerror = function() {
+  console.log('There is an error inside your worker!');
+}</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', "#handler-workerglobalscope-onerror", "WorkerGlobalScope.onerror")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_naviguateurs">Compatibilité des naviguateurs</h2>
+
+
+
+<p>{{Compat("api.WorkerGlobalScope.onerror")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p>L'interface {{domxref("WorkerGlobalScope")}} à laquelle il appartient.</p>
diff --git a/files/fr/web/api/workerglobalscope/onlanguagechange/index.html b/files/fr/web/api/workerglobalscope/onlanguagechange/index.html
new file mode 100644
index 0000000000..674f00906a
--- /dev/null
+++ b/files/fr/web/api/workerglobalscope/onlanguagechange/index.html
@@ -0,0 +1,47 @@
+---
+title: WorkerGlobalScope.onlanguagechange
+slug: Web/API/WorkerGlobalScope/onlanguagechange
+translation_of: Web/API/WorkerGlobalScope/onlanguagechange
+---
+<p>{{APIRef("Web Workers API")}}</p>
+
+<p>La propriété <strong><code>onlanguagechange</code></strong> de l'interface {{domxref("WorkerGlobalScope")}} représente un {{domxref("EventHandler")}} à appeler lorsque l'événement {{event("languagechange")}} survient et se propage à travers le {{domxref("Worker")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre>self.onlanguagechange = function() { ... };</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'extrait de code suivant montre un gestionnaire <code>onlanguagechange</code> placé au sein d'un worker :</p>
+
+<pre class="brush: js">self.onlanguagechange = function() {
+  console.log('Your preferred language settings have been changed');
+}</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', "#handler-workerglobalscope-onlanguagechange", "WorkerGlobalScope.onlanguagechange")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.WorkerGlobalScope.onlanguagechange")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p>L'interface {{domxref("WorkerGlobalScope")}} à laquelle elle appartient.</p>
diff --git a/files/fr/web/api/workerglobalscope/onoffline/index.html b/files/fr/web/api/workerglobalscope/onoffline/index.html
new file mode 100644
index 0000000000..df5d70eb36
--- /dev/null
+++ b/files/fr/web/api/workerglobalscope/onoffline/index.html
@@ -0,0 +1,47 @@
+---
+title: WorkerGlobalScope.onoffline
+slug: Web/API/WorkerGlobalScope/onoffline
+translation_of: Web/API/WorkerGlobalScope/onoffline
+---
+<p>{{APIRef("Web Workers API")}}</p>
+
+<p>La propriété <strong><code>onoffline</code></strong> de l'interface {{domxref("WorkerGlobalScope")}} représente un {{domxref("EventHandler")}} à appeler lorsque l'événement {{event("offline")}} survient et se propage à travers le {{domxref("Worker")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre>self.onoffline = function() { ... };</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'extrait de code suivant montre un gestionnaire <code>onoffline</code> placé dans un worker :</p>
+
+<pre class="brush: js">self.onoffline = function() {
+  console.log('Your worker is now offline');
+}</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', "#handler-workerglobalscope-onoffline", "WorkerGlobalScope.onoffline")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.WorkerGlobalScope.onoffline")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p>L'interface {{domxref("WorkerGlobalScope")}} à laquelle il appartient.</p>
diff --git a/files/fr/web/api/workerglobalscope/ononline/index.html b/files/fr/web/api/workerglobalscope/ononline/index.html
new file mode 100644
index 0000000000..0b8d96433b
--- /dev/null
+++ b/files/fr/web/api/workerglobalscope/ononline/index.html
@@ -0,0 +1,49 @@
+---
+title: WorkerGlobalScope.ononline
+slug: Web/API/WorkerGlobalScope/ononline
+translation_of: Web/API/WorkerGlobalScope/ononline
+---
+<p>{{APIRef("Web Workers API")}}</p>
+
+<p>La propriété <strong><code>ononline</code></strong> de l'interface {{domxref("WorkerGlobalScope")}} représente un {{domxref("EventHandler")}} à appeler lorsque l'événement {{event("online")}} survient et se propage à travers le {{domxref("Worker")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre>self.ononline = function() { ... };</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'extrait de code suivant montre un gestionnaire <code>ononline</code> placé dans un worker :</p>
+
+<pre class="brush: js">self.ononline = function() {
+  console.log('Your worker is now online');
+}</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', "#handler-workerglobalscope-ononline", "WorkerGlobalScope.ononline")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.WorkerGlobalScope.ononline")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p>L'interface {{domxref("WorkerGlobalScope")}} à laquelle il appartient.</p>
diff --git a/files/fr/web/api/workerglobalscope/self/index.html b/files/fr/web/api/workerglobalscope/self/index.html
new file mode 100644
index 0000000000..ef79718e43
--- /dev/null
+++ b/files/fr/web/api/workerglobalscope/self/index.html
@@ -0,0 +1,79 @@
+---
+title: WorkerGlobalScope.self
+slug: Web/API/WorkerGlobalScope/self
+translation_of: Web/API/WorkerGlobalScope/self
+---
+<p>{{APIRef("Web Workers API")}}</p>
+
+<p>La propriété en lecture seule <code><strong>self</strong></code> de l'interface {{domxref("WorkerGlobalScope")}} retourne une référence au <code>WorkerGlobalScope</code> lui-même. La plupart du temps il s'agit d'un contexte spécifique comme {{domxref("DedicatedWorkerGlobalScope")}},  {{domxref("SharedWorkerGlobalScope")}}, ou {{domxref("ServiceWorkerGlobalScope")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var selfRef = self;</pre>
+
+<h3 id="Specifications" name="Specifications">Valeur</h3>
+
+<p>Un objet global scope (qui diffère selon le type du worker concerné, comme indiqué ci-dessus).</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Si vous appelez</p>
+
+<pre class="brush: js">console.log(self);</pre>
+
+<p>au sein d'un worker, vous obtiendrez un worker global scope du même type que l'objet worker écrit sur la console — quelque chose comme ce qui suit :</p>
+
+<pre class="brush: js">DedicatedWorkerGlobalScope {
+undefined: undefined, Infinity: Infinity, Math: MathConstructor, NaN: NaN, Intl: Object…}
+    Infinity: Infinity
+    Array: function Array() { [native code] }
+      arguments: null
+      caller: null
+      isArray: function isArray() { [native code] }
+      length: 1
+      name: "Array"
+      observe: function observe() { [native code] }
+      prototype: Array[0]
+      unobserve: function unobserve() { [native code] }
+      __proto__: function Empty() {}
+      &lt;function scope&gt;
+    ArrayBuffer: function ArrayBuffer() { [native code] }
+    Blob: function Blob() { [native code] }
+    Boolean: function Boolean() { [native code] }
+    DataView: function DataView() { [native code] }
+    Date: function Date() { [native code] }
+    DedicatedWorkerGlobalScope: function DedicatedWorkerGlobalScope() { [native code] }
+    Error: function Error() { [native code] }
+<em>// etc. etc.</em>
+</pre>
+
+<p>Cette trace fournit la liste complète des objets disponibles dans le contexte d'un worker, et constitue un test très utile lorsqu'il s'agit de savoir ce qui est disponible ou non au sein d'un worker. Nous maintenons aussi une liste des <a href="/en-US/docs/Web/API/Worker/Functions_and_classes_available_to_workers">Fonctions et classes disponibles dans les Web Workers</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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-workerglobalscope-self', 'self')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.WorkerGlobalScope.self")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p>{{domxref("WorkerGlobalScope")}}</p>
diff --git a/files/fr/web/api/workerlocation/index.html b/files/fr/web/api/workerlocation/index.html
new file mode 100644
index 0000000000..ef84bcb1b7
--- /dev/null
+++ b/files/fr/web/api/workerlocation/index.html
@@ -0,0 +1,79 @@
+---
+title: WorkerLocation
+slug: Web/API/WorkerLocation
+tags:
+  - API
+  - Web Workers
+translation_of: Web/API/WorkerLocation
+---
+<div>{{APIRef("Web Workers API")}}</div>
+
+<p>L'interface <strong><code>WorkerLocation</code></strong> définit l'emplacement complet du script exécuté par le {{domxref("Worker")}}. Un tel objet est initialisé pour chaque <em>worker </em>et est disponible via la propriété {{domxref("WorkerGlobalScope.location")}} récupérée par l'appel à <code>window.self.location</code>.</p>
+
+<p>Cette interface est uniquement visible à l'intérieur d'un script JavaScript exécuté dans le contexte d'un <em>web worker</em>.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>L'interface <code>WorkerLocation</code> n'hérite d'aucune propriété mais implémente les propriétés définies par l'interface {{domxref("URLUtilsReadOnly")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("URLUtilsReadOnly.href")}} {{readOnlyInline}}</dt>
+ <dd>{{domxref("DOMString")}} contenant la totalité de URL du script exécuté dans le {{domxref("Worker")}}.</dd>
+ <dt>{{domxref("URLUtilsReadOnly.protocol")}} {{readOnlyInline}}</dt>
+ <dd>{{domxref("DOMString")}} contenant le schéma du protocole de l'URL du script exécuté dans le {{domxref("Worker")}}, incluant les deux points de terminaison<code>':'</code>.</dd>
+ <dt>{{domxref("URLUtilsReadOnly.host")}} {{readOnlyInline}}</dt>
+ <dd>{{domxref("DOMString")}} contenant l'hôte, constitué du nom d'hôte <em>hostname</em>, de deux points <code>':'</code>, et du numéro de <em>port</em> de l'URL du script exécuté dans le {{domxref("Worker")}}.</dd>
+ <dt>{{domxref("URLUtilsReadOnly.hostname")}} {{readOnlyInline}}</dt>
+ <dd>{{domxref("DOMString")}} contenant le nom de domaine du script exécuté dans le {{domxref("Worker")}}.</dd>
+ <dt>{{domxref("URLUtilsReadOnly.origin")}} {{readOnlyInline}}</dt>
+ <dd>{{domxref("DOMString")}} contenant l'origine de l'URL sous sa forme canonique.</dd>
+ <dt>{{domxref("URLUtilsReadOnly.port")}} {{readOnlyInline}}</dt>
+ <dd>{{domxref("DOMString")}} contenant le numéro de port de l'URL du script exécuté dans le {{domxref("Worker")}}.</dd>
+ <dt>{{domxref("URLUtilsReadOnly.pathname")}} {{readOnlyInline}}</dt>
+ <dd>{{domxref("DOMString")}} contenant une barre oblique initiale <code>'/'</code> suivie du chemin de l'URL du script exécuté dans le {{domxref("Worker")}}.</dd>
+ <dt>{{domxref("URLUtilsReadOnly.search")}} {{readOnlyInline}}</dt>
+ <dd>{{domxref("DOMString")}} contenant un point d'interrogation intial <code>'?'</code> suivi des paramètres de l'URL du script exécuté dans le {{domxref("Worker")}}.</dd>
+ <dt>{{domxref("URLUtilsReadOnly.hash")}} {{readOnlyInline}}</dt>
+ <dd>{{domxref("DOMString")}} contenant un dièse initial <code>'#'</code> suivi de l'identifiant de l'ancre de l'URL du script exécuté dans le {{domxref("Word'hôteker")}}.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>L'interface <code>WorkerLocation</code> n'hérite d'aucune méthode mais implémente les méthodes définies par l'interface {{domxref("URLUtilsReadOnly")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("URLUtilsReadOnly.toString()")}}</dt>
+ <dd>Retourne une chaîne de caractères {{domxref("DOMString")}} contenant l'URL complète du script exécuté dans le {{domxref("Worker")}}. C'est un synonyme de la propriété {{domxref("URLUtilsReadOnly.href")}}.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#workerlocation', 'WorkerLocation')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.WorkerLocation")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Autres interfaces apparentées au <em>Worker</em>: {{domxref("Worker")}}, {{domxref("WorkerNavigator")}} et {{domxref("WorkerGlobalScope")}}.</li>
+ <li><a href="/fr/docs/Utilisation_des_web_workers">Utilisation des web workers</a></li>
+</ul>
diff --git a/files/fr/web/api/xmldocument/async/index.html b/files/fr/web/api/xmldocument/async/index.html
new file mode 100644
index 0000000000..436e3e5215
--- /dev/null
+++ b/files/fr/web/api/xmldocument/async/index.html
@@ -0,0 +1,42 @@
+---
+title: Document.async
+slug: Web/API/XMLDocument/async
+tags:
+  - API
+  - Asynchrone
+  - DOM
+  - Document
+  - Propriété
+  - XML
+translation_of: Web/API/XMLDocument/async
+---
+<p>{{APIRef("DOM")}}{{Deprecated_header}} {{Non-standard_header}}</p>
+
+<p><code>document.async</code> peut être défini pour indiquer si un appel {{domxref("document.load")}} doit être une requête asynchrone ou synchrone. <code>true</code> (<em>vrai</em>) est la valeur par défaut, indiquant que les documents doivent être chargés de façon asynchrone.</p>
+
+<p>(Il a été possible de charger des documents de manière synchrone depuis 1.4 alpha.)</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush:js">function loadXMLData(e) {
+  alert(new XMLSerializer().serializeToString(e.target)); // Donne le contenu querydata.xml sous forme "string" (<em>chaîne de caractère</em>)
+}
+
+var xmlDoc = document.implementation.createDocument("", "test", null);
+
+xmlDoc.async = false;
+xmlDoc.onload = loadXMLData;
+xmlDoc.load('querydata.xml');</pre>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-3-LS/load-save.html#LS-DocumentLS">DOM Level 3 Load &amp; Save module</a></li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/XML_dans_Mozilla" title="XML_in_Mozilla">XML in Mozilla</a></li>
+ <li>{{domxref("document.load")}}</li>
+</ul>
diff --git a/files/fr/web/api/xmldocument/index.html b/files/fr/web/api/xmldocument/index.html
new file mode 100644
index 0000000000..172a071dd6
--- /dev/null
+++ b/files/fr/web/api/xmldocument/index.html
@@ -0,0 +1,64 @@
+---
+title: XMLDocument
+slug: Web/API/XMLDocument
+tags:
+  - API
+  - DOM
+  - Experimental
+translation_of: Web/API/XMLDocument
+---
+<p>{{ ApiRef("DOM") }} {{SeeCompatTable}}</p>
+
+<p>L'interface XMLDocument représente un document XML. Elle hérite du {{domxref("Document")}} générique et ne lui ajoute aucune méthode ou propriété spécifique : néanmoins, plusieurs algorithmes se comportent différemment avec les deux types de documents.</p>
+
+<h2 id="Propriété">Propriété</h2>
+
+<p><em>Cette interface n'a pas de propriété spécifique et n'en hérite aucune.</em></p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Cette interface n'ajoute aucune nouvelle méthode.</em></p>
+
+<dl>
+ <dt>{{domxref("XMLDocument.load()")}}</dt>
+ <dd>Charge un document XML.</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">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", 'dom.html#xmldocument', "Extension to XMLDocument")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Pas de changement par rapport à {{SpecName("HTML5 W3C")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "dom.html#loading-xml-documents", "Extension to XMLDocument")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Ajoute la méthode <code>load()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#xmldocument', 'XMLDocument')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">La table de compatibilité de cette page est générée à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et de nous envoyer une "pull request".</div>
+
+<p>{{Compat("api.XMLDocument")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Document_Object_Model">Référence du DOM</a></li>
+</ul>
diff --git a/files/fr/web/api/xmldocument/load/index.html b/files/fr/web/api/xmldocument/load/index.html
new file mode 100644
index 0000000000..ac0ba54a1e
--- /dev/null
+++ b/files/fr/web/api/xmldocument/load/index.html
@@ -0,0 +1,51 @@
+---
+title: XMLDocument.load()
+slug: Web/API/XMLDocument/load
+tags:
+  - API
+  - DOM
+  - Deprecated
+  - Experimental
+  - Expérimental(2)
+  - Method
+  - Reference
+  - Référence(2)
+translation_of: Web/API/XMLDocument/load
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><code>document.load()</code> fait partie d'une ancienne version du module W3C <a href="http://www.w3.org/TR/2003/WD-DOM-Level-3-LS-20030619/load-save.html#LS-DocumentLS">DOM Level 3 Load &amp; Save</a>. Elle peut être utilisée avec document.async pour indiquer si la requête est synchrone ou asynchrone (par défaut). À partir d'au moins Gecko 1.9, elle ne prend plus en charge le chargement inter-site de documents (utilisez <a href="/fr/docs/Web/API/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a> à la place).</p>
+
+<h2 id="Examples" name="Examples">Exemples</h2>
+
+<div style="overflow: hidden;">
+<pre>var docXml = document.implementation.createDocument("", "test", null);
+
+function documentCharge (e) {
+  alert(new XMLSerializer().serializeToString(e.target)); // Donne le contenu de querydata.xml comme une chaîne
+}
+
+xmlDoc.addEventListener("load", documentCharge, false);
+xmlDoc.load('querydata.xml');</pre>
+</div>
+
+<p>{{Source("content/xml/tests/load/", "Voir aussi l'extrait de chargement")}} dans le dossier de tests XML. (Pour tester cette fonctionnalité, créez les fichiers sur votre disque local ou sur un serveur web, plutôt que de charger le fichier load.html depuis la page générée par LXR, qui servira le fichier text.xml comme HTML.)</p>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/2003/WD-DOM-Level-3-LS-20030619/load-save.html#LS-DocumentLS">Old W3C Working Draft of the DOM Level 3 Load &amp; Save module</a></li>
+</ul>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.XMLDocument.load")}}</p>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Document/async" title="DOM/document.async">document.async</a></li>
+ <li><a href="/fr/docs/XML_dans_Mozilla" title="XML_in_Mozilla">XML dans Mozilla</a></li>
+</ul>
diff --git a/files/fr/web/api/xmlhttprequest/index.html b/files/fr/web/api/xmlhttprequest/index.html
new file mode 100644
index 0000000000..bfacafac2b
--- /dev/null
+++ b/files/fr/web/api/xmlhttprequest/index.html
@@ -0,0 +1,192 @@
+---
+title: XMLHttpRequest
+slug: Web/API/XMLHttpRequest
+tags:
+  - AJAX
+  - API
+  - HTTP
+  - Interface
+  - Reference
+  - Web
+  - XMLHttpRequest
+translation_of: Web/API/XMLHttpRequest
+---
+<div>{{DefaultAPISidebar("XMLHttpRequest")}}</div>
+
+<p><span class="seoSummary">Les objets <code>XMLHttpRequest</code> (XHR) permettent d'interagir avec des serveurs. On peut récupérer des données à partir d'une URL sans avoir à rafraîchir complètement la page. Cela permet à une page web d'être mise à jour sans perturber les actions de l'utilisateur.</span> <code>XMLHttpRequest</code> est beaucoup utilisé par l'approche {{Glossary("AJAX")}}.</p>
+
+<p>{{InheritanceDiagram(650, 150)}}</p>
+
+<p>Malgré son nom, <code>XMLHttpRequest</code> peut être utilisé afin de récupérer tout type de données et pas uniquement du XML.</p>
+
+<p>Si vos opérations de communication nécessitent l'échange d'évènements ou de messages avec un serveur, pensez à utiliser <a href="/fr/docs/Web/API/Server-sent_events">les évènements serveur</a> via l'interface {{domxref("EventSource")}}. Pour une communication bidirectionnelle complète, les <a href="/fr/docs/Web/API/WebSockets_API">WebSockets</a> peuvent être une meilleure alternative.</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("XMLHttpRequest.XMLHttpRequest", "XMLHttpRequest()")}}</dt>
+ <dd>Le constructeur initialise un objet <code>XMLHttpRequest</code>. Il doit être appelé avant toute autre méthode.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Cette interface hérite également des propriétés de {{domxref("XMLHttpRequestEventTarget")}} et de {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt id="xmlhttprequest-onreadystatechange">{{domxref("XMLHttpRequest.onreadystatechange")}}</dt>
+ <dd>Un gestionnaire d'évènement ({{domxref("EventHandler")}}) invoqué à chaque fois que l'attribut <code>readyState</code> change.</dd>
+ <dt id="xmlhttprequest-readystate">{{domxref("XMLHttpRequest.readyState")}} {{readonlyinline}}</dt>
+ <dd>L'état de la requête sous la forme d'un <code>unsigned short</code>.</dd>
+ <dt>{{domxref("XMLHttpRequest.response")}} {{readonlyinline}}</dt>
+ <dd>Un objet {{jsxref("ArrayBuffer")}}, {{domxref("Blob")}}, {{domxref("Document")}}, un objet JavaScript ou une chaîne de caractères ({{domxref("DOMString")}}) selon la valeur de {{domxref("XMLHttpRequest.responseType")}}. Cet objet contient le corps de la réponse.</dd>
+ <dt id="xmlhttprequest-responsetext">{{domxref("XMLHttpRequest.responseText")}} {{readonlyinline}}</dt>
+ <dd>Une chaîne de caractères {{domxref("DOMString")}} qui contient la réponse à la requête sous forme de texte ou la valeur <code>null</code> si la requête a échoué ou n'a pas encore été envoyée.</dd>
+ <dt id="xmlhttprequest-responsetype">{{domxref("XMLHttpRequest.responseType")}}</dt>
+ <dd>Une valeur parmi une liste qui définit le type de réponse.</dd>
+ <dt id="xmlhttprequest-responsexml">{{domxref("XMLHttpRequest.responseURL")}} {{readonlyinline}}</dt>
+ <dd>L'URL sérialisée de la réponse ou la chaîne vide si l'URL est nulle.</dd>
+ <dt id="xmlhttprequest-responsexml">{{domxref("XMLHttpRequest.responseXML")}} {{readonlyinline}}</dt>
+ <dd>Un objet {{domxref("Document")}} qui contient la réponse de la requête ou <code>null</code> si la requête a échoué, qu'elle n'a pas encore été envoyée ou qu'elle ne peut pas être analysée comme XML ou HTML. Cette propriété n'est pas disponible dans les <em>workers</em>.</dd>
+ <dt id="xmlhttprequest-status">{{domxref("XMLHttpRequest.status")}} {{readonlyinline}}</dt>
+ <dd>Une valeur numérique <code>unsigned short</code> qui décrit le statut de la réponse à la requête.</dd>
+ <dt id="xmlhttprequest-statustext">{{domxref("XMLHttpRequest.statusText")}} {{readonlyinline}}</dt>
+ <dd>Une chaîne {{domxref("DOMString")}} qui contient la chaîne de caractères / réponse renvoyée par le serveur HTTP. À la différence de {{domxref("XMLHttpRequest.status")}}, tout le texte du statut est inclus ("<code>200 OK</code>" plutôt que "<code>200</code>" par exemple).</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note :</strong> Selon la spécification HTTP/2 (<a href="https://http2.github.io/http2-spec/#rfc.section.8.1.2.4">voir 8.1.2.4</a> <a href="https://http2.github.io/http2-spec/#HttpResponse">Response Pseudo-Header Fields</a>), HTTP/2 ne définit pas de méthode pour porter la version ou la raison/phrase incluse dans la ligne de statut HTTP/1.1.</p>
+</div>
+
+<dl>
+ <dt id="xmlhttprequest-timeout">{{domxref("XMLHttpRequest.timeout")}}</dt>
+ <dd>Un entier <code>unsigned long</code> qui représente le nombre de millisecondes qu'une requête peut prendre avant d'être terminée automatiquement.</dd>
+ <dt id="xmlhttprequesteventtarget-ontimeout">{{domxref("XMLHttpRequestEventTarget.ontimeout")}}</dt>
+ <dd>Un gestionnaire d'évènement ({{domxref("EventHandler")}}) appelé lorsque la requête a expiré. {{gecko_minversion_inline("12.0")}}</dd>
+ <dt id="xmlhttprequest-upload">{{domxref("XMLHttpRequest.upload")}} {{readonlyinline}}</dt>
+ <dd>Un objet {{domxref("XMLHttpRequestUpload")}} qui représente le processus d'<em>upload</em>.</dd>
+ <dt id="xmlhttprequest-withcredentials">{{domxref("XMLHttpRequest.withCredentials")}}</dt>
+ <dd>Un booléen ({{domxref("Boolean")}}) qui indique si des requêtes <code>Access-Control</code> d'origines différentes peuvent être effectuées avec des informations d'authentification telles que des cookies ou des en-têtes d'autorisation.</dd>
+</dl>
+
+<h3 id="Propriétés_non-standard">Propriétés non-standard</h3>
+
+<dl>
+ <dt>{{domxref("XMLHttpRequest.channel")}}{{ReadOnlyInline}}</dt>
+ <dd>Un objet {{Interface("nsIChannel")}}. Le canal à utiliser par l'objet lorsqu'il effectue la requête.</dd>
+ <dt>{{domxref("XMLHttpRequest.mozAnon")}}{{ReadOnlyInline}}</dt>
+ <dd>Un booléen. S'il est vrai, la requête sera envoyée sans cookie ou en-tête d'autorisation.</dd>
+ <dt>{{domxref("XMLHttpRequest.mozSystem")}}{{ReadOnlyInline}}</dt>
+ <dd>Un booléen. S'il est vrai, la politique d'origine unique ne sera pas vérifiée pour la requête.</dd>
+ <dt>{{domxref("XMLHttpRequest.mozBackgroundRequest")}}</dt>
+ <dd>Un booléen qui indique si l'objet représente une requête de service en arrière-plan.</dd>
+ <dt>{{domxref("XMLHttpRequest.mozResponseArrayBuffer")}}{{gecko_minversion_inline("2.0")}} {{obsolete_inline("6")}} {{ReadOnlyInline}}</dt>
+ <dd>Un objet {{jsxref("ArrayBuffer")}} qui est la réponse à la requête sous la forme d'un tableau typé JavaScript.</dd>
+ <dt>{{domxref("XMLHttpRequest.multipart")}}{{obsolete_inline("22")}}</dt>
+ <dd><strong>Cette fonctionnalité spécifique à Gecko a été retirée avec Firefox/Gecko 22.</strong> Veuillez utiliser <a href="/fr/docs/Web/API/Server-sent_events">les évènements serveurs</a> ou <a href="/fr/docs/Web/API/WebSockets_API">les web sockets</a> ou encore la propriété <code>responseText</code> des évènements de progression.</dd>
+</dl>
+
+<h3 id="Gestionnaires_dévènement">Gestionnaires d'évènement</h3>
+
+<p>Le gestionnaire <code>onreadystatechange</code>, comme propriété des instances <code>XMLHttpRequest</code>, est pris en charge par l'ensemble des navigateurs.</p>
+
+<p>D'autres gestionnaires d'évènements ont également été implémentés dans différents navigateurs (<code>onload</code>, <code>onerror</code>, <code>onprogress</code>, etc.). Voir le guide <a href="/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest">Manipuler XMLHttpRequest</a>.</p>
+
+<p>La plupart des navigateurs récents gère également les évènements via la méthode {{domxref("EventTarget.addEventListener", "addEventListener()")}} (en plus des méthodes  <code>on*</code>).</p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("XMLHttpRequest.abort()")}}</dt>
+ <dd>Interrompt la requête si elle a déjà été envoyée.</dd>
+ <dt>{{domxref("XMLHttpRequest.getAllResponseHeaders()")}}</dt>
+ <dd>Renvoie, via une chaîne de caractères, l'ensemble des en-têtes de la réponse, séparés par {{Glossary("CRLF")}} ou la valeur <code>null</code> si aucune réponse n'a été reçue.</dd>
+ <dt>{{domxref("XMLHttpRequest.getResponseHeader()")}}</dt>
+ <dd>Renvoie la chaîne de caractères contenant le texte de l'en-tête voulue ou <code>null</code> si aucune des réponse n'a été reçue ou si l'en-tête n'existe pas dans la réponse.</dd>
+ <dt>{{domxref("XMLHttpRequest.open()")}}</dt>
+ <dd>Initialise une requête. Cette méthode doit être utilisée par du code JavaScript.</dd>
+ <dt>{{domxref("XMLHttpRequest.overrideMimeType()")}}</dt>
+ <dd>Surcharge le type MIME renvoyé par le serveur.</dd>
+ <dt>{{domxref("XMLHttpRequest.send()")}}</dt>
+ <dd>Envoie la requête. Si la requête est asynchrone (le comportement par défaut), la méthode renvoie un résultat dès que la requête est envoyée.</dd>
+ <dt>{{domxref("XMLHttpRequest.setRequestHeader()")}}</dt>
+ <dd>Définit la valeur d'un en-tête de requête HTTP. Cette méthode doit être appelée après <code>open()</code> mais avant<code>send()</code>.</dd>
+</dl>
+
+<h3 id="Méthodes_non-standard">Méthodes non-standard</h3>
+
+<dl>
+ <dt>{{domxref("XMLHttpRequest.init()")}}</dt>
+ <dd>Initialise l'objet depuis pour une utilisation depuis du code C++.</dd>
+</dl>
+
+<div class="warning"><strong>Attention !</strong> Cette méthode ne doit pas être appelée depuis du code JavaScript.</div>
+
+<dl>
+ <dt>{{domxref("XMLHttpRequest.openRequest()")}}</dt>
+ <dd>Initialise une requête depuis du code natif. Voir la méthode <a class="internal" href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequest#open()"><code>open()</code></a> ci-avant pour initialiser une requête de façon standard en JavaSCript.</dd>
+ <dt>{{domxref("XMLHttpRequest.sendAsBinary()")}}{{deprecated_inline()}}</dt>
+ <dd>Une variante de <code>send()</code> afin d'envoyer des données binaires.</dd>
+</dl>
+
+<h2 id="Évènements">Évènements</h2>
+
+<dl>
+ <dt>{{domxref("XMLHttpRequest/abort_event", "abort")}}</dt>
+ <dd>Se déclenche lorsqu'une requête a été interrompue (par exemple via {{domxref("XMLHttpRequest.abort()")}}). Le gestionnaire<br>
+ {{domxref("XMLHttpRequestEventTarget/onabort", "onabort")}} est également disponible.</dd>
+ <dt>{{domxref("XMLHttpRequest/error_event", "error")}}</dt>
+ <dd>Se déclenche lorsqu'une requête a rencontré une erreur.<br>
+ Le gestionnaire {{domxref("XMLHttpRequestEventTarget/onerror", "onerror")}} est également disponible.</dd>
+ <dt>{{domxref("XMLHttpRequest/load_event", "load")}}</dt>
+ <dd>Se déclenche lorsqu'une transaction {{domxref("XMLHttpRequest")}} se termine correctement. Le gestionnaire {{domxref("XMLHttpRequestEventTarget/onload", "onload")}} est également disponible.</dd>
+ <dt>{{domxref("XMLHttpRequest/loadend_event", "loadend")}}</dt>
+ <dd>Se déclenche lorsqu'une requête est terminée (avec une erreur ou non). Quand elle a réussi, l'évènement a lieu après {{domxref("XMLHttpRequest/load_event", "load")}}). Quand elle a échoué, l'évènement survient après {{domxref("XMLHttpRequest/error_event", "error")}}).<br>
+ Le gestionnaire {{domxref("XMLHttpRequestEventTarget/onloadend", "onloadend")}} est également disponible.</dd>
+ <dt>{{domxref("XMLHttpRequest/loadstart_event", "loadstart")}}</dt>
+ <dd>Se déclenche lorsqu'une requête commence à charger des données.<br>
+ Le gestionnaire {{domxref("XMLHttpRequestEventTarget/onloadstart", "onloadstart")}} est également disponible.</dd>
+ <dt>{{domxref("XMLHttpRequest/progress_event", "progress")}}</dt>
+ <dd>Se déclenche périodiquement lorsqu'une requête reçoit des données supplémentaires. Le gestionnaire {{domxref("XMLHttpRequestEventTarget/onprogress", "onprogress")}} est également disponible.</dd>
+ <dt>{{domxref("XMLHttpRequest/timeout_event", "timeout")}}</dt>
+ <dd>Se déclenche lorsque la progression est terminée du fait de l'expiration de la durée limite. Le gestionnaire {{domxref("XMLHttpRequestEventTarget/ontimeout", "ontimeout")}} est également disponible.</dd>
+</dl>
+
+<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('XMLHttpRequest')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>Standard évolutif, version la plus récente.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<div>{{Compat("api.XMLHttpRequest")}}</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("XMLSerializer")}} : sérialiser un arbre DOM en XML</li>
+ <li>Les tutoriels MDN sur <code>XMLHttpRequest</code>:
+  <ul>
+   <li><a href="/fr/docs/Web/Guide/AJAX/Premiers_pas">Introduction à AJAX</a></li>
+   <li><a href="/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest">Utiliser XMLHttpRequest</a></li>
+   <li><a href="/fr/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">Manipuler le HTML avec XMLHttpRequest</a></li>
+   <li><a href="/fr/docs/Web/API/Fetch_API" title="Fetch API">L'API Fetch</a></li>
+  </ul>
+ </li>
+ <li><a class="external" href="https://www.html5rocks.com/en/tutorials/file/xhr2/">HTML5 Rocks — Nouvelles astuces avec XMLHttpRequest2 (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/api/xmlhttprequest/onreadystatechange/index.html b/files/fr/web/api/xmlhttprequest/onreadystatechange/index.html
new file mode 100644
index 0000000000..27916885ff
--- /dev/null
+++ b/files/fr/web/api/xmlhttprequest/onreadystatechange/index.html
@@ -0,0 +1,59 @@
+---
+title: XMLHttpRequest.onreadystatechange
+slug: Web/API/XMLHttpRequest/onreadystatechange
+translation_of: Web/API/XMLHttpRequest/onreadystatechange
+---
+<div>{{APIRef}}</div>
+
+<p>Un <a href="/en-US/docs/Web/API/EventHandler" title="A possible way to get notified of Events of a particular type (such as click) for a given object is to specify an event handler using:"><code>EventHandler</code></a> qui réagit aux changements de <code>readyState</code>. Le callback est appelé dans le contexte du thread de rendu. La propriété <strong><code>XMLHttpRequest.onreadystatechange</code></strong>  contient le gestionnaire d'évènement appelé lorsque l'évènement {{event("readystatechange")}} est déclenché, soit chaque fois que la propriété {{domxref("XMLHttpRequest.readyState", "readyState")}} de {{domxref("XMLHttpRequest")}} est modifiée.</p>
+
+<div class="warning">
+<p><strong>Attention:</strong> Ne doit pas être utilisé avec des requêtes synchrone ni avec du code natif.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>XMLHttpRequest</em>.onreadystatechange = <em>callback</em>;</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<ul>
+ <li><code><em>callback</em></code> est la fonction exécutée lorsque <code>readyState</code> change.</li>
+</ul>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">var xhr = new XMLHttpRequest(),
+    method = "GET",
+    url = "https://developer.mozilla.org/";
+
+xhr.open(<em>method</em>, <em>url</em>, true);
+xhr.onreadystatechange = function () {
+  if(xhr.readyState === 4 &amp;&amp; xhr.status === 200) {
+    console.log(xhr.responseText);
+  }
+};
+xhr.send();</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>{{SpecName('XMLHttpRequest', '#handler-xhr-onreadystatechange')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>WHATWG living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_fureteurs">Compatibilité des fureteurs</h2>
+
+
+
+<p>{{Compat("api.XMLHttpRequest.onreadystatechange")}}</p>
diff --git a/files/fr/web/api/xmlhttprequest/open/index.html b/files/fr/web/api/xmlhttprequest/open/index.html
new file mode 100644
index 0000000000..14a1ec2501
--- /dev/null
+++ b/files/fr/web/api/xmlhttprequest/open/index.html
@@ -0,0 +1,67 @@
+---
+title: XMLHttpRequest.open()
+slug: Web/API/XMLHttpRequest/open
+translation_of: Web/API/XMLHttpRequest/open
+---
+<div>{{APIRef('XMLHttpRequest')}}</div>
+
+<p>La méthode <code><strong>open()</strong></code> de {{domxref("XMLHttpRequest")}} instancie une nouvelle requête ou réinitialise un déjà existante.</p>
+
+<div class="note"><strong>Note:</strong> Appeler cette méthode pour une requête déjà active (pour laquelle une méthode <code>open()</code> a déjà été appelée) est équivalent à appeler  {{domxref("XMLHttpRequest.abort", "abort()")}}.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>XMLHttpRequest</em>.open(<var>method</var>,<var> url</var>)
+<em>XMLHttpRequest</em>.open(<var>method</var>,<var> url</var>,<var> async)</var>
+<em>XMLHttpRequest</em>.open(<var>method</var>,<var> url</var>,<var> async</var>,<var> user</var>)
+<em>XMLHttpRequest</em>.open(<var>method</var>,<var> url</var>,<var> async</var>,<var> user</var>,<var> password</var>)
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>method</code></dt>
+ <dd>La méthode  <a href="/en-US/docs/Web/HTTP/Methods">HTTP request </a> à utiliser telles que : <code>"GET"</code>, <code>"POST"</code>, <code>"PUT"</code>, <code>"DELETE"</code>, etc. Ignorée pour les URL non-HTTP(S).</dd>
+ <dt><code>url</code></dt>
+ <dd>Une {{domxref("DOMString")}} représentant l'URL à laquelle envoyer la requête.</dd>
+ <dt><code>async</code> {{optional_inline}}</dt>
+ <dd>Un booléen optionnel par défaut à <code>true</code>, indiquant s'il faut, ou pas, traiter la requête en asynchrone.  Si la valeur est à <code>false</code>, la méthode <code>send()</code> ne retourne rien tant qu'elle n'a pas reçu la réponse. Si la valeur est à  <code>true</code>, une notification de transaction complétée est fournie en utilisant un gestionnaire d'évènements. Le paramètre doit être sur "true" si l'attribut <code>multipart</code> est sur "true" aussi ou une exception sera levée.
+ <div class="note"><strong>Note:</strong> Les requêtes asynchrones sur le "thread" principal peuvent facilement dérouter l'utilisateur et devraient être évitées; En fait, de nombreux navigateurs ont un support XHR obsolète sur la totalité du "thread" principal. Les requêtes synchrones sont acceptées dans  {{domxref("Worker")}}s.</div>
+ </dd>
+ <dt><code>user</code> {{optional_inline}}</dt>
+ <dd>Le nom de l'utilisateur, optionnel, à utiliser dans un but d'authentification. Sa valeur par défaut est <code>null</code>.</dd>
+ <dt><code>password</code> {{optional_inline}}</dt>
+ <dd>Le mot de passe, optionnel, à utiliser dans un but d'authentification. Sa valeur par défaut est <code>null</code>.</dd>
+</dl>
+
+<h2 id="Spécificités">Spécificités</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('XMLHttpRequest', '#the-open()-method', 'open()')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>WHATWG living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api.XMLHttpRequest.open")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest">Utiliser XMLHttpRequest</a></li>
+ <li>Méthodes {{domxref("XMLHttpRequest")}} en relation : {{domxref("XMLHttpRequest.setRequestHeader", "setRequestHeader()")}},{{domxref("XMLHttpRequest.send", "send()")}}, and {{domxref("XMLHttpRequest.abort", "abort()")}}</li>
+</ul>
diff --git a/files/fr/web/api/xmlhttprequest/readystate/index.html b/files/fr/web/api/xmlhttprequest/readystate/index.html
new file mode 100644
index 0000000000..65fc74878c
--- /dev/null
+++ b/files/fr/web/api/xmlhttprequest/readystate/index.html
@@ -0,0 +1,102 @@
+---
+title: XMLHttpRequest.readyState
+slug: Web/API/XMLHttpRequest/readyState
+translation_of: Web/API/XMLHttpRequest/readyState
+---
+<p>{{APIRef('XMLHttpRequest')}}</p>
+
+<p>La propriété XMLHttpRequest.readyState renvoie l'état dans lequel se trouve un client XMLHttpRequest.Un client <abbr title="XMLHttpRequest">XHR</abbr> existe dans l'un des états suivants :</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Value</td>
+   <td class="header">State</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>0</code></td>
+   <td><code>UNSENT</code></td>
+   <td>Le client a été créé. open() n'a pas encore été appelé.</td>
+  </tr>
+  <tr>
+   <td><code>1</code></td>
+   <td><code>OPENED</code></td>
+   <td><code>open()</code>a été appelé.</td>
+  </tr>
+  <tr>
+   <td><code>2</code></td>
+   <td><code>HEADERS_RECEIVED</code></td>
+   <td><code>send()</code> a été appelé, et les en-têtes et le statut sont disponibles.</td>
+  </tr>
+  <tr>
+   <td><code>3</code></td>
+   <td><code>LOADING</code></td>
+   <td>Téléchargement; <code>responseText</code> contient des données partielles.</td>
+  </tr>
+  <tr>
+   <td><code>4</code></td>
+   <td><code>DONE</code></td>
+   <td>L'opération est terminée.</td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+ <dt>UNSENT</dt>
+ <dd>Le client XMLHttpRequest a été créé, mais la méthode open() n'a pas encore été appelée.</dd>
+ <dt>OPENED</dt>
+ <dd>La méthode open() a été invoquée. Pendant cet état, les en-têtes de requête peuvent être définis à l'aide de la méthode <a href="/en-US/docs/Web/API/XMLHttpRequest/setRequestHeader">setRequestHeader()</a>  et la méthode <a href="/en-US/docs/Web/API/XMLHttpRequest/send">send()</a>  peut être appelée, ce qui lancera la récupération.</dd>
+ <dt>HEADERS_RECEIVED</dt>
+ <dd>send() a été appelé et les en-têtes de réponse ont été reçus</dd>
+ <dt>LOADING</dt>
+ <dd>Le corps de la réponse est en cours de réception. Si <code><a href="/en-US/docs/Web/API/XMLHttpRequest/responseType">responseType</a></code> is "text"  ou une chaîne vide, <code><a href="/en-US/docs/Web/API/XMLHttpRequest/responseText">responseText</a></code> aura la réponse textuelle partielle au fur et à mesure de son chargement.</dd>
+ <dt>DONE</dt>
+ <dd>L'opération de récupération est terminée. Cela peut signifier que le transfert de données a été effectué avec succès ou a échoué.</dd>
+</dl>
+
+<div class="note">
+<p>Les noms des États sont différents dans les versions d'Internet Explorer antérieures à 11. Au lieu de <code>UNSENT</code>, <code>OPENED</code>,<code> HEADERS_RECEIVED</code>,<code> LOADING</code> and <code>DONE</code>, the names <code>READYSTATE_UNINITIALIZED</code> (0), <code>READYSTATE_LOADING</code> (1), <code>READYSTATE_LOADED</code> (2), <code>READYSTATE_INTERACTIVE</code> (3) et <code>READYSTATE_COMPLETE</code> (4) sont utilisés.</p>
+</div>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js notranslate">var xhr = new XMLHttpRequest();
+console.log('UNSENT', xhr.readyState); // readyState will be 0
+
+xhr.open('GET', '/api', true);
+console.log('OPENED', xhr.readyState); // readyState will be 1
+
+xhr.onprogress = function () {
+    console.log('LOADING', xhr.readyState); // readyState will be 3
+};
+
+xhr.onload = function () {
+    console.log('DONE', xhr.readyState); // readyState will be 4
+};
+
+xhr.send(null);
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#states')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>WHATWG living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer à ces données, veuillez consulter le site https://github.com/mdn/browser-compat-data et nous envoyer une demande d'extraction.</div>
+
+<p>{{Compat("api.XMLHttpRequest.readyState")}}</p>
diff --git a/files/fr/web/api/xmlhttprequest/response/index.html b/files/fr/web/api/xmlhttprequest/response/index.html
new file mode 100644
index 0000000000..1e0987e584
--- /dev/null
+++ b/files/fr/web/api/xmlhttprequest/response/index.html
@@ -0,0 +1,181 @@
+---
+title: XMLHttpRequest.response
+slug: Web/API/XMLHttpRequest/response
+tags:
+  - AJAX
+  - Reference
+  - XMLHttpRequest
+translation_of: Web/API/XMLHttpRequest/response
+---
+<div>{{draft}}</div>
+
+<div>{{APIRef('XMLHttpRequest')}}</div>
+
+<div>La propriété <code>XMLHttpRequest.response</code> contient le corps de la réponse. Elle peut être de type ArrayBuffer, Blob, Document, un objet JavaScript ou une DOMString en fonction de la valeur de la propriété <code>XMLHttpRequest.responseType</code>. La réponse ( <code>Value of response</code> ) est nulle si la requête est incomplète ou n'as pas été effectué avec succès. Cependant, si <code>responseType</code> est "text" ou une chaine vide et tant que la requête est en cours ( dans l'état <em>loading</em> ), <code>response</code> peut contenir la réponse partielle.</div>
+
+<div> </div>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Valeur de <code>responseType</code></td>
+   <td class="header">Type de donnée de la propriété <code>response</code></td>
+  </tr>
+  <tr>
+   <td><code>""</code></td>
+   <td>{{domxref("DOMString")}} (valeur par défaut)</td>
+  </tr>
+  <tr>
+   <td><code>"arraybuffer"</code></td>
+   <td>{{domxref("ArrayBuffer")}}</td>
+  </tr>
+  <tr>
+   <td><code>"blob"</code></td>
+   <td>{{domxref("Blob")}}</td>
+  </tr>
+  <tr>
+   <td><code>"document"</code></td>
+   <td>{{domxref("Document")}}</td>
+  </tr>
+  <tr>
+   <td><code>"json"</code></td>
+   <td>
+    <p>Objet JavaScript depuis une réponse JSON.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>"text"</code></td>
+   <td>{{domxref("DOMString")}}</td>
+  </tr>
+  <tr>
+   <td><code>"moz-blob"</code> {{non-standard_inline}}</td>
+   <td>
+    <p>Used by Firefox to allow retrieving partial {{domxref("Blob")}} data from progress events. This lets your progress event handler start processing data while it's still being received. {{gecko_minversion_inline("12.0")}}</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>"moz-chunked-text"</code>{{non-standard_inline}}</td>
+   <td>
+    <p>Similar to <code>"text"</code>, but is streaming. This means that the value in <code>response</code> is only available during dispatch of the <code>"progress"</code> event and only contains the data received since the last <code>"progress"</code> event.</p>
+
+    <p>When <code>response</code> is accessed during a <code>"progress"</code> event it contains a string with the data. Otherwise it returns <code>null</code>.</p>
+
+    <p>This mode currently only works in Firefox. {{gecko_minversion_inline("9.0")}}</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>"moz-chunked-arraybuffer"</code>{{non-standard_inline}}</td>
+   <td>
+    <p>Similar to <code>"arraybuffer"</code>, but is streaming. This means that the value in <code>response</code> is only available during dispatch of the <code>"progress"</code> event and only contains the data received since the last <code>"progress"</code> event.</p>
+
+    <p>When <code>response</code> is accessed during a <code>"progress"</code> event it contains a string with the data. Otherwise it returns <code>null</code>.</p>
+
+    <p>This mode currently only works in Firefox. {{gecko_minversion_inline("9.0")}}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>"ms-stream"{{non-standard_inline}}</td>
+   <td>
+    <p>Indique que la réponse est une partie d'un téléchargement d'un flux (?). Supporté uniquement pour les requêtes des téléchargements et disponible uniquement dans Internet Explorer.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Note:</strong> À partir de Gecko 11.0 {{geckoRelease("11.0")}} et de WebKit build 528, ces navigateurs ne permettent plus l'utilisation de l'attribut <code>responseType</code> lors des requêtes synchrones. Cela renvoi l'erreur <code>NS_ERROR_DOM_INVALID_ACCESS_ERR</code>. Ce changement a été proposé au W3C afin d'être standardisé. </p>
+</div>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js">var url = 'somePage.html'; // une page locale
+
+function load(url, callback) {
+  var xhr = new XMLHttpRequest();
+
+  xhr.onreadystatechange = function() {
+    if (xhr.readyState === 4) {
+      console.log(xhr.response); // Par défault une DOMString
+    }
+  }
+
+  xhr.open('GET', url, true);
+  xhr.send('');
+}
+
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#the-response-attribute')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>WHATWG living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
diff --git a/files/fr/web/api/xmlhttprequest/responsetext/index.html b/files/fr/web/api/xmlhttprequest/responsetext/index.html
new file mode 100644
index 0000000000..da6938fa1d
--- /dev/null
+++ b/files/fr/web/api/xmlhttprequest/responsetext/index.html
@@ -0,0 +1,73 @@
+---
+title: XMLHttpRequest.responseText
+slug: Web/API/XMLHttpRequest/responseText
+translation_of: Web/API/XMLHttpRequest/responseText
+---
+<div>{{draft}}</div>
+
+<div>{{APIRef('XMLHttpRequest')}}</div>
+
+<p><span class="seoSummary">La lecture seule {{domxref("XMLHttpRequest")}} propriété  <strong><code>responseText</code></strong> renvoie le texte reçu d'un serveur suite à l'envoi d'une requête.</span></p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate">var <var>resultText</var> = <var>XMLHttpRequest</var>.responseText;</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>A {{domxref("DOMString")}} qui contient soit les données textuelles reçues à l'aide du<code>XMLHttpRequest</code> ou <code>null</code> si la demande a échoué ou <code>""</code> si la demande n'a pas encore été envoyée en appelant {{domxref("XMLHttpRequest.send", "send()")}}.</p>
+
+<p>Lors du traitement d'une requête asynchrone, la valeur de <code>responseText</code> reçoit toujours le contenu actuel du serveur, même s'il est incomplet car les données n'ont pas encore été complètement reçues.</p>
+
+<p>Vous savez que tout le contenu a été reçu lorsque la valeur de {{domxref("XMLHttpRequest.readyState", "readyState")}} deviens {{domxref("XMLHttpRequest.DONE", "XMLHttpRequest.DONE")}} (<code>4</code>), et {{domxref("XMLHttpRequest.status", "status")}} becomes 200 (<code>"OK"</code>).</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<dl>
+ <dt><code>InvalidStateError</code></dt>
+ <dd>Le {{domxref("XMLHttpRequest.responseType")}} n'est défini ni sur la chaîne vide ni sur "texte". Étant donné que la propriété responseText n'est valide que pour le contenu texte, toute autre valeur est une condition d'erreur.</dd>
+</dl>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js notranslate">var xhr = new XMLHttpRequest();
+xhr.open('GET', '/server', true);
+
+// If specified, responseType must be empty string or "text"
+xhr.responseType = 'text';
+
+xhr.onload = function () {
+    if (xhr.readyState === xhr.DONE) {
+        if (xhr.status === 200) {
+            console.log(xhr.response);
+            console.log(xhr.responseText);
+        }
+    }
+};
+
+xhr.send(null);</pre>
+
+<h2 id="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('XMLHttpRequest', '#the-responsetext-attribute')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>WHATWG living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.XMLHttpRequest.responseText")}}</p>
diff --git a/files/fr/web/api/xmlhttprequest/send/index.html b/files/fr/web/api/xmlhttprequest/send/index.html
new file mode 100644
index 0000000000..507b4b7731
--- /dev/null
+++ b/files/fr/web/api/xmlhttprequest/send/index.html
@@ -0,0 +1,135 @@
+---
+title: XMLHttpRequest.send()
+slug: Web/API/XMLHttpRequest/send
+tags:
+  - AJAX
+  - API
+  - Besoin d'exemples
+  - Besoin de Contenu
+  - Method
+  - References
+  - Requête XMLHttp
+  - XHR
+  - requête HTTP
+  - requête XHR
+  - send
+translation_of: Web/API/XMLHttpRequest/send
+---
+<div>{{APIRef('XMLHttpRequest')}}</div>
+
+<p><span class="seoSummary">La méthode  {{domxref("XMLHttpRequest")}} <code><strong>send()</strong></code> envoie la requête au serveur.  Si la requête est asynchrone (elle l'est par défaut), la méthode envoie un retour dés que la requête est partie et le résultat est intégré en utilisant les évènements.</span>En cas de requête synchrone, elle ne renvoie rien tant que la réponse n'est pas retournée.</p>
+
+<p><code>send()</code> accepte un paramètre optionnel qui qui vous permet de spécifier le corps de la requête; c'est principalement utilisé pour les requêtes comme  {{HTTPMethod("PUT")}}. Si la méthode est {{HTTPMethod("GET")}} ou {{HTTPMethod("HEAD")}}, le paramètre <code>body</code> est ignoré et le corps de la requête est fixé à <code>null</code>.</p>
+
+<p>Si aucun "header"{{HTTPHeader("Accept")}} n'a été paramétré dans {{domxref("XMLHttpRequest.setRequestHeader", "setRequestHeader()")}}, un "header" <code>Accept</code> avec le type <code>"*/*"</code> (tous types) est envoyé.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><var>XMLHttpRequest</var>.send(<var>body</var>)
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>body</code> {{optional_inline}}</dt>
+ <dd>Le corps des données à envoyer dans la requête XHR. Cela peut être :
+ <ul>
+  <li>Un {{domxref("Document")}}, dans quel cas il est sérialisé avant d'être envoyé.</li>
+  <li>Un  <code>XMLHttpRequestBodyInit</code> , dont le which <a href="https://fetch.spec.whatwg.org/#bodyinit">standard </a><a href="https://fetch.spec.whatwg.org/#bodyinit">Fetch</a> peut être un  {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, ou un objet  {{domxref("USVString")}} .</li>
+  <li><code>null</code></li>
+ </ul>
+ Si la valeur du corps n'est pas spécifiée, la valeur par défaut <code>null</code> est employée.</dd>
+</dl>
+
+<p>La meilleure manière d'envoyer du contenu binaire (par exemple dans l'upload de fichiers) est d'utiliser un {{domxref("ArrayBufferView")}} ou  {{domxref("Blob")}} en conjonction avec la méthode <code>send()</code>.</p>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p><code>undefined</code>.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Exception</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>InvalidStateError</code></td>
+   <td><code>send()</code> a déjà été invoquée pour la requête, et/ou celle-ci est incomplète.</td>
+  </tr>
+  <tr>
+   <td><code>NetworkError</code></td>
+   <td>Le type de ressource à récupérer est un <strong>BLOB</strong>, <em>(binary large object</em>) , et la méthode n'est pas <code>GET</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemple_GET">Exemple: GET</h2>
+
+<pre class="brush: js notranslate"><code>var xhr = new XMLHttpRequest();
+xhr.open('GET', '/server', true);
+
+xhr.onload = function () {
+  // Requête finie, traitement ici.
+};
+
+xhr.send(null);
+// xhr.send('string');
+</code>// <code>xhr.send(new Blob());
+// xhr.send(new Int8Array());
+// xhr.send(document);</code>
+</pre>
+
+<h2 id="Example_POST">Example: POST</h2>
+
+<pre class="brush: js notranslate"><code>var xhr = new XMLHttpRequest();
+xhr.open("POST", '/server', true);
+
+//Envoie les informations du header adaptées avec la requête
+xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+
+xhr.onreadystatechange = function() { //Appelle une fonction au changement d'état.
+    if (this.readyState === XMLHttpRequest.DONE &amp;&amp; this.status === 200) {
+// Requête finie, traitement ici.
+    }
+}
+xhr.send("foo=bar&amp;lorem=ipsum");
+// xhr.send(new Int8Array());
+// xhr.send(document);</code>
+</pre>
+
+<h2 id="Spécificités">Spécificités</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specificité</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#the-send()-method', 'send()')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>WHATWG living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateur">Compatibilité navigateur</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer à ces données, veuillez consulter le site<a href="/fr/docs/"> https://github.com/mdn/browser-compat-data</a> et nous envoyer une demande d'extraction.</div>
+
+<div>{{Compat("api.XMLHttpRequest.send")}}</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest">L'utilisation de XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">HTML dans XMLHttpRequest</a></li>
+</ul>
diff --git a/files/fr/web/api/xmlhttprequest/sendasbinary/index.html b/files/fr/web/api/xmlhttprequest/sendasbinary/index.html
new file mode 100644
index 0000000000..d9414ee78c
--- /dev/null
+++ b/files/fr/web/api/xmlhttprequest/sendasbinary/index.html
@@ -0,0 +1,49 @@
+---
+title: XMLHttpRequest.sendAsBinary()
+slug: Web/API/XMLHttpRequest/sendAsBinary
+tags:
+  - HTTP
+  - Méthode
+  - Non-standard
+  - Obsolete
+  - Reference
+  - XHR
+translation_of: Web/API/XMLHttpRequest/sendAsBinary
+---
+<div>{{APIRef('XMLHttpRequest')}}</div>
+
+<p><span class="seoSummary">La méthode <code><strong>sendAsBinary()</strong></code>, rattachée à l'interface {{domxref("XMLHttpRequest")}} est une variante de la méthode {{domxref("XMLHttpRequest.send", "send()")}} qui envoie des données au format binaire. <u><strong>Cette méthode est désormais obsolète</strong></u>. En effet, la méthode <code>send()</code> prend désormais en charge la transmission de données binaires</span>et devrait être utilisée pour cet usage.</p>
+
+<p>Cette méthode rend possible <a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files">la lecture et <strong>l'upload</strong> de tout type de fichier</a> et la <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify">conversion en chaîne </a>des données brutes.</p>
+
+<div class="warning">
+<p><strong>Attention :</strong> Cette méthode est dépréciée et ne devrait plus être utilisée. Privilégiez plutôt la méthode <code>send()</code>, qui prend désormais en charge l'envoi de données binaires.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>XMLHttpRequest</em>.sendAsBinary(<em>binaryString</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>binaryString</code></dt>
+ <dd>Une chaîne de caractères {{domxref("DOMString")}} encodant le contenu binaire à envoyer. La chaîne binaire peut être construite grâce à la méthode {{domxref("FileRequest.readAsBinaryString", "readAsBinaryString()")}} de {{domxref("FileReader")}}. La chaîne de caractères est convertie en binaire pour le transfert en retirant l'octet le plus haut de chaque caractère.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p><code>undefined</code>.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.XMLHttpRequest.sendAsBinary")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest">Utiliser <code>XMLHttpRequest</code></a></li>
+</ul>
diff --git a/files/fr/web/api/xmlhttprequest/setrequestheader/index.html b/files/fr/web/api/xmlhttprequest/setrequestheader/index.html
new file mode 100644
index 0000000000..0c42055656
--- /dev/null
+++ b/files/fr/web/api/xmlhttprequest/setrequestheader/index.html
@@ -0,0 +1,66 @@
+---
+title: XMLHttpRequest.setRequestHeader()
+slug: Web/API/XMLHttpRequest/setRequestHeader
+translation_of: Web/API/XMLHttpRequest/setRequestHeader
+---
+<div>{{APIRef('XMLHttpRequest')}}</div>
+
+<p>La méthode <code><strong>setRequestHeader()</strong></code> de l'objet {{domxref("XMLHttpRequest")}} permet d'éditer le header d'une requête HTTP. Vous devez appeler la méthode <code>setRequestHeader()</code>, après la méthode {{domxref("XMLHttpRequest.open", "open()")}}, et avant {{domxref("XMLHttpRequest.send", "send()")}}. Si vous faite appel plusieurs fois à <code>setRequestHeader()</code> dans une même requête, tout sera combiné au sein d'un même header.</p>
+
+<p>A chaque fois que vous appellez <code>setRequestHeader()</code>, son contenu est ajouté à la fin du header existant.</p>
+
+<p>Si aucun {{HTTPHeader("Accept")}} n'a été configurer avec cette méthode, un <code>Accept</code> header avec le type <code>"*/*"</code> sera envoyé avec la requête lorsque {{domxref("XMLHttpRequest.send", "send()")}} sera appellée.</p>
+
+<p>Pour des raisons de sécurité, certain header ne peuvent être manipulés que par le user agent. Ceux-ci contiennent les paramètres {{Glossary("Forbidden_header_name", "forbidden header names", 1)}}  et {{Glossary("Forbidden_response_header_name", "forbidden response header names", 1)}}.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Dans certain cas, vous pourrez rencontrer l'erreur / exception "<strong>not allowed by Access-Control-Allow-Headers in preflight response</strong>" quand vous enverez une requête cross domains. Dans ce cas, vous devrez configurer {{HTTPHeader("Access-Control-Allow-Headers")}} dans votre réponse HTTP <u>coté serveur</u>.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>XMLHttpRequest</em>.setRequestHeader(<var>header</var>, <var>value</var>)
+</pre>
+
+<h3 id="Paramètre">Paramètre</h3>
+
+<dl>
+ <dt><code>header</code></dt>
+ <dd>Le paramètre du header.</dd>
+ <dt><code>value</code></dt>
+ <dd>La valeur de ce paramètre.</dd>
+</dl>
+
+<h3 id="Valeurs_de_retour">Valeurs de retour</h3>
+
+<p><code>undefined</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('XMLHttpRequest', '#the-setRequestHeader()-method', 'setRequestHeader()')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>WHATWG living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilitée_avec_les_navigateurs">Compatibilitée avec les navigateurs</h2>
+
+<div class="hidden">La table de compatibilité présente ici est générée d'après une base de donnée. Si vous voulez y contribuer, rendez-vous sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et demandée une pull request.</div>
+
+<p>{{Compat("api.XMLHttpRequest.setRequestHeader")}}</p>
+
+<h2 id="A_voir_aussi">A voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">HTML in XMLHttpRequest</a></li>
+</ul>
diff --git a/files/fr/web/api/xmlhttprequest/status/index.html b/files/fr/web/api/xmlhttprequest/status/index.html
new file mode 100644
index 0000000000..cfac1c97e1
--- /dev/null
+++ b/files/fr/web/api/xmlhttprequest/status/index.html
@@ -0,0 +1,70 @@
+---
+title: XMLHttpRequest.status
+slug: Web/API/XMLHttpRequest/status
+translation_of: Web/API/XMLHttpRequest/status
+---
+<div>{{APIRef('XMLHttpRequest')}}</div>
+
+<p>La propriété en lecture seule XMLHttpRequest.status renvoie le code d'état HTTP numérique de la réponse de XMLHttpRequest.</p>
+
+<p>Avant que la demande ne se termine, la valeur du statut est 0. Les navigateurs signalent également un statut de 0 en cas d'erreurs XMLHttpRequest.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js notranslate">var xhr = new XMLHttpRequest();
+console.log('UNSENT: ', xhr.status);
+
+xhr.open('GET', '/server');
+console.log('OPENED: ', xhr.status);
+
+xhr.onprogress = function () {
+  console.log('LOADING: ', xhr.status);
+};
+
+xhr.onload = function () {
+  console.log('DONE: ', xhr.status);
+};
+
+xhr.send();
+
+/**
+ * Outputs the following:
+ *
+ * UNSENT: 0
+ * OPENED: 0
+ * LOADING: 200
+ * DONE: 200
+ */
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#the-status-attribute')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>WHATWG living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer à ces données, veuillez consulter le site https://github.com/mdn/browser-compat-data et nous envoyer une demande d'extraction.</div>
+
+<p>{{Compat("api.XMLHttpRequest.status")}}</p>
+
+<p>Voir aussi</p>
+
+<ul>
+ <li>Liste des <a href="/en-US/docs/Web/HTTP/Response_codes">HTTP response codes</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/fr/web/api/xmlhttprequest/timeout/index.html b/files/fr/web/api/xmlhttprequest/timeout/index.html
new file mode 100644
index 0000000000..ccd4842f60
--- /dev/null
+++ b/files/fr/web/api/xmlhttprequest/timeout/index.html
@@ -0,0 +1,63 @@
+---
+title: XMLHttpRequest.timeout
+slug: Web/API/XMLHttpRequest/timeout
+tags:
+  - AJAX
+  - API
+  - Propriété
+  - Reference
+  - XHR
+  - XMLHttpRequest
+translation_of: Web/API/XMLHttpRequest/timeout
+---
+<div>{{APIRef('XMLHttpRequest')}}</div>
+
+<p>La propriété <code><strong>XMLHttpRequest.timeout</strong></code> est un <code>unsigned long</code> (un entier long, non-signé) représentant la durée, en millisecondes, qu'une requête peut prendre avant d'être automatiquement terminée. Par défaut, la valeur est 0 et il n'y pas de <em>timeout</em>. Lorsqu'une requête expire, un évènement <code><a href="/fr/docs/Web/API/XMLHttpRequest/timeout_event">timeout</a></code> est déclenché.</p>
+
+<div class="note"><strong>Note :</strong> Pour un exemple, voir <a href="/fr/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests#Example_using_a_timeout">Utiliser la propriété <code>timeout</code> avec une requête asynchrone</a>.</div>
+
+<div class="note"><strong>Note :</strong> Ces délais d'expiration ne devraient pas être utilisés pour les requêtes <code>XMLHttpRequest</code> synchrones dans <a href="/fr/docs/Glossaire/Environnement_de_document">un environnement de document</a> : ils déclencheront une exception <code>InvalidAccessError</code>. On ne peut donc pas utiliser de <em>timeout</em> pour les requêtes synchrones avec une fenêtre parente.</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var xhr = new XMLHttpRequest();
+xhr.open('GET', '/server', true);
+
+xhr.timeout = 2000; // durée en millisecondes
+
+xhr.onload = function () {
+  // Requête terminée. On traite le résultat ici.
+};
+
+xhr.ontimeout = function (e) {
+  // Requête qui a expiré. On traite ce cas.
+};
+
+xhr.send(null);</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('XMLHttpRequest', '#the-timeout-attribute')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>Standard évolutif WHATWG</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.XMLHttpRequest.timeout")}}</p>
+
+<p>Pour Internet Explorer, la propriété <code>timeout</code> ne peut être définie qu'après avoir appelé la méthode <code><a href="/fr/docs/Web/API/XMLHttpRequest/open">open()</a></code> et avant d'appeler la méthode <code><a href="/fr/docs/Web/API/XMLHttpRequest/send">send()</a></code>.</p>
diff --git a/files/fr/web/api/xmlhttprequest/utiliser_xmlhttprequest/index.html b/files/fr/web/api/xmlhttprequest/utiliser_xmlhttprequest/index.html
new file mode 100644
index 0000000000..fc3bb319ee
--- /dev/null
+++ b/files/fr/web/api/xmlhttprequest/utiliser_xmlhttprequest/index.html
@@ -0,0 +1,755 @@
+---
+title: Utiliser XMLHttpRequest
+slug: Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest
+tags:
+  - AJAX
+  - File API
+  - FormData
+  - JXON
+  - Progression
+  - Téléchargement
+  - XML
+  - XMLHttpRequest
+  - upload
+translation_of: Web/API/XMLHttpRequest/Using_XMLHttpRequest
+---
+<p> </p>
+
+<p><a href="/en-US/docs/DOM/XMLHttpRequest" title="XMLHttpRequest"><code>XMLHttpRequest</code></a> permet d'envoyer des requêtes HTTP de manière très simple.  Il suffit de créer une instance de l'objet, d'ouvrir une URL, et d'envoyer la requête.  Le <a href="/en-US/docs/HTTP/HTTP_response_codes" title="HTTP response codes">status HTTP</a> du résultat, tout comme le contenu de la réponse, sont disponibles dans l'objet de la requête quand la transaction est terminée. Cette page présente quelques-uns des cas d'utilisation communs et même un peu obscurs pour cet objet JavaScript puissant.</p>
+
+<pre class="brush: js">function reqListener () {
+  console.log(this.responseText);
+}
+
+var oReq = new XMLHttpRequest();
+oReq.onload = reqListener;
+oReq.open("get", "yourFile.txt", true);
+oReq.send();</pre>
+
+<h2 id="Types_de_requêtes">Types de requêtes</h2>
+
+<p>Une demande faite via XMLHttpRequest peut récupérer les données dans l'une des deux façons, de manière asynchrone ou synchrone. Le type de demande est dictée par l'argument optionnel <span style="font-family: courier new,andale mono,monospace; line-height: normal;">async</span> (le troisième argument) qui est mis sur la méthode <a href="/en-US/docs/DOM/XMLHttpRequest#open()" title="DOM/XMLHttpRequest#open()">open()</a> XMLHttpRequest (). Si cet argument est <span style="font-family: courier new,andale mono,monospace; line-height: normal;">true</span> ou non spécifié, l'objet <span style="font-family: courier new,andale mono,monospace; line-height: normal;">XMLHttpRequest</span> est traitée de manière asynchrone, sinon le processus est effectué de façon synchrone. Une discussion détaillée et des démonstrations de ces deux types de demandes peuvent être trouvés sur la page des <a href="/en-US/docs/DOM/XMLHttpRequest/Synchronous_and_Asynchronous_Requests" style="text-decoration: underline;" title="Synchronous and Asynchronous Requests">requêtes synchrones et asynchrones</a>. En général, vous devriez rarement, voire jamais, utiliser requêtes synchrones.</p>
+
+<div class="note"><strong>Note:</strong> A partir de Gecko 30.0 {{ geckoRelease("30.0") }}, les requêtes synchrones sur le processus principal ont été dépréciées en raison de l'effet négatif sur l'expérience utilisateur.</div>
+
+<h2 id="Gérer_les_réponses">Gérer les réponses</h2>
+
+<p><span style="line-height: 1.5;">Il existe plusieurs types </span><a href="http://www.w3.org/TR/XMLHttpRequest2/#response" title="http://www.w3.org/TR/XMLHttpRequest2/#response">d'attributs de réponse</a><span style="line-height: 1.5;"> définies par la spécification W3C pour XMLHttpRequest. Ceci indique que le client faisant l'objet XMLHttpRequest des informations importantes sur l'état ​​de la réponse. Certains cas où, traitant de types de réponse non-texte peuvent impliquer une certaine manipulation et l'analyse comme indiqué dans les sections suivantes.</span></p>
+
+<h3 id="Analyser_et_manipuler_la_propriété_responseXML">Analyser et manipuler la propriété <code>responseXML</code></h3>
+
+<p>Si vous utlisez <code>XMLHttpRequest </code>pour obtenir le contenu d'un fichier XML distant, la propriété <code>responseXML </code>sera un Objet DOM contenant le document XML parsé, qui peut être difficile à manipuler et analyser. Il y a quatres moyens principaux d'analyser ce document XML :</p>
+
+<ol>
+ <li>Utiliser <a href="/en-US/docs/XPath" title="XPath">XPath</a> pour localiser des parties.</li>
+ <li>Utiliser <a href="/en-US/docs/JXON" title="JXON">JXON</a> pour le convertir en Objet structuré JavaScript.</li>
+ <li>Manuellement <a href="/en-US/docs/Parsing_and_serializing_XML" title="Parsing_and_serializing_XML">parser et serializer le XML</a> en chaînes de caractères ou en objets.</li>
+ <li>Utiliser <a href="/en-US/docs/XMLSerializer" title="XMLSerializer">XMLSerializer</a> pour serializer <strong>le DOM en chaînes ou en fichiers.</strong></li>
+ <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/RegExp" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/regexp">RegExp </a>peut être utlisé si vous connaissez à l'avance le contenu du document XML. Vous pouvez supprimer les sauts de ligne, si vous utlisez RegExp en prenant en compte ces sauts. Toutefois, cette méthode est un "dernier recours", car si le code XML change légèrement, la méthode échouera probablement.</li>
+</ol>
+
+<h3 id="Analyser_et_manipuler_une_propriété_responseText_contenant_un_document_HTML">Analyser et manipuler une propriété <code>responseText</code> contenant un document HTML</h3>
+
+<div class="note"><strong>Note:</strong> La spécification W3C <a href="http://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html">XMLHttpRequest</a>  autorise le HTML a être parsé via la propritété <code>XMLHttpRequest.responseXML</code>. Lisez l'article à propos du <a href="/en-US/docs/HTML_in_XMLHttpRequest" title="HTML_in_XMLHttpRequest">HTML dans XMLHttpRequest</a> pour plus de détails.</div>
+
+<p>Si vous utilisez <code>XMLHttpRequest</code> pour récupérer le contenu d'une page HTML distante, la propriété <code>responseText</code> est une chaîne de caractères contenant une "soupe" de tous les tags HTML, qui peut être difficile à manipuler et à analyser. Il y a trois moyens principaux d'analyser cette soupe de HTML :</p>
+
+<ol>
+ <li>Utiliser la propriété <code>XMLHttpRequest.responseXML</code>.</li>
+ <li>Injecter le contenu dans le body d'un <a href="/en-US/docs/Web/API/DocumentFragment">fragment de document</a> via <code>fragment.body.innerHTML</code> et traverser le DOM du fragment.</li>
+ <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/RegExp" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/regexp">RegExp </a>peut être utlisé si vous connaissez à l'avance le contenu du document HTML dans <span style="font-family: courier new,andale mono,monospace; line-height: normal;">responseText</span>. Vous pouvez supprimer les sauts de ligne, si vous utlisez RegExp en prenant en compte ces sauts. Toutefois, cette méthode est un "dernier recours", car si le code XML change légèrement, la méthode échouera probablement.</li>
+</ol>
+
+<h2 id="Gérer_les_données_binaires">Gérer les données binaires</h2>
+
+<p>Bien que <code>XMLHttpRequest</code> est le plus souvent utilisé pour envoyer et recevoir des données textuelles, on peut l'utiliser pour envoyer et recevoir du contenu binaire.Il existe plusieurs méthodes éprouvées pour contraindre la réponse d'un XMLHttpRequest en l'envoi de données binaires. Celles-ci impliquent d'utiliser la méthode .overrideMimeType() sur l'objet XMLHttpRequest, ce qui est une solution viable.</p>
+
+<pre class="brush:js">var oReq = new XMLHttpRequest();
+oReq.open("GET", url, true);
+// récupérer les données non traitées comme une chaîne binaire
+oReq.overrideMimeType("text/plain; charset=x-user-defined");
+/* ... */
+</pre>
+
+<p>La Spécification XMLHttpRequest Niveau 2 ajoute de nouveaux <a href="http://www.w3.org/TR/XMLHttpRequest2/#the-responsetype-attribute" title="http://www.w3.org/TR/XMLHttpRequest2/#the-responsetype-attribute">attributs responseType</a> qui permettent d'envoyer et de recevoir des données binaires plus facilement.</p>
+
+<pre class="brush:js">var oReq = new XMLHttpRequest();
+
+oReq.open("GET", url, true);
+oReq.responseType = "arraybuffer";
+oReq.onload = function(e) {
+  var arraybuffer = oReq.response; // n'est pas responseText
+  /* ... */
+}
+oReq.send();
+</pre>
+
+<p>Pour plus d'exemples, jettez un oeil à la page <a href="/en-US/docs/DOM/XMLHttpRequest/Sending_and_Receiving_Binary_Data" title="DOM/XMLHttpRequest/Sending_and_Receiving_Binary_Data">Envoyer et recevoir des données binaires</a></p>
+
+<h2 id="Surveiller_la_progression">Surveiller la progression</h2>
+
+<p><code>XMLHttpRequest</code> fournit la possibilité d'écouter différents évènements qui peuvent se produire pendant que la requête est traitée. Cela inclu des notifications de progression périodiques, des notifications d'erreur, ainsi de suite.</p>
+
+<p>Le support des évènements de progression DOM de <code>XMLHttpRequest</code> suit l'API web <a href="http://dev.w3.org/2006/webapi/progress/Progress.html" title="http://dev.w3.org/2006/webapi/progress/Progress.html">de spécifications des évènements de progression</a>: ils implémentent l'interface {{domxref("ProgressEvent")}}.</p>
+
+<pre class="brush:js">var oReq = new XMLHttpRequest();
+
+oReq.addEventListener("progress", updateProgress, false);
+oReq.addEventListener("load", transferComplete, false);
+oReq.addEventListener("error", transferFailed, false);
+oReq.addEventListener("abort", transferCanceled, false);
+
+oReq.open();
+
+// ...
+
+// progression des transferts depuis le serveur jusqu'au client (téléchargement)
+function updateProgress (oEvent) {
+  if (oEvent.lengthComputable) {
+    var percentComplete = oEvent.loaded / oEvent.total;
+    // ...
+  } else {
+    // Impossible de calculer la progression puisque la taille totale est inconnue
+  }
+}
+
+function transferComplete(evt) {
+  alert("Le transfert est terminé.");
+}
+
+function transferFailed(evt) {
+  alert("Une erreur est survenue pendant le transfert du fichier.");
+}
+
+function transferCanceled(evt) {
+  alert("Le transfert a été annulé par l'utilisateur.");
+}</pre>
+
+<p>Les lignes 3-6 ajoutent des écouteurs pour les différents évènements lancés pendant la transfert de données d'une <code>XMLHttpRequest</code>.</p>
+
+<div class="note"><strong>Note:</strong> Vous devez ajouter les écouteurs avant d'appeler <code>open()</code> sur la requête. Sinon, les évènements de progression ne seront pas lancés.</div>
+
+<p>Le gestionnaire de progression, spécifié par la fonction <code>updateProgress()</code> dans cet exemple, reçoit le nombre total de bytes à transférer ainsi que le nombre de bytes déjà transférés dans les champs <code>total</code> et <code>loaded</code>.  Cependant, si le champ <code>lengthComputable</code> est false, la taille totale est inconnue et sera zéro.</p>
+
+<p>Les évènements de progression sont disponibles pour l'envoi et la réception de données. Les évènements de téléchargement sont lancés sur l'objet <code>XMLHttpRequest</code> lui-même, comme montré dans l'exemple ci-dessus. Les évènements d'envoi (upload) sont lancés sur l'objet <code>XMLHttpRequest.upload</code>, comme montré ci-dessous:</p>
+
+<pre class="brush:js">var oReq = new XMLHttpRequest();
+
+oReq.upload.addEventListener("progress", updateProgress, false);
+oReq.upload.addEventListener("load", transferComplete, false);
+oReq.upload.addEventListener("error", transferFailed, false);
+oReq.upload.addEventListener("abort", transferCanceled, false);
+
+oReq.open();
+</pre>
+
+<div class="note"><strong>Note:</strong> Les évènements de progression ne sont pas disponibles sur le protocole <code>file:</code>.</div>
+
+<div class="note"><strong>Note</strong>: Actuellement, il y a encore des bugs ouverts pour les évènements de progression qui affectent la version 25 de Firefox sur <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=908375">OS X</a> et <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=786953">Linux</a>.</div>
+
+<div class="note">
+<p><strong>Note:</strong> A partir de {{Gecko("9.0")}}, les évènements de progression peuvent désormais être assurément présents pour chaque morceau de données reçu, y compris le dernier morceau dans les cas où le dernier paquet est reçu et la connexion fermée avant que l'évènement ne soit lancé. Dans ce cas, l'évènement de progression est automatiquement lancé quand l'évènement load se produit pour ce paquet. Cela vous permet de surveiller fiablement la progression grâce à son évènement.</p>
+</div>
+
+<div class="note">
+<p><strong>Note:</strong> Dans {{Gecko("12.0")}}, si votre évènement de progression est appelé avec un <code>responseType</code> "moz-blob", la valeur de la réponse est un {{domxref("Blob")}} contenant les données reçues jusqu'à présent.</p>
+</div>
+
+<p>Une fonction peut aussi être appelée peu importe le status de fin de la requête (<code>abort</code>, <code>load</code>, ou <code>error</code>) en utilisant l'évènement <code>loadend</code> :</p>
+
+<pre class="brush:js">req.addEventListener("loadend", loadEnd, false);
+
+function loadEnd(e) {
+  alert("Le transfert est terminé (même si l'on ne sait pas si ça a fonctionné ou pas).");
+}
+</pre>
+
+<p>Notez qu'il n'y a pas moyen d'être certain des informations reçues dans l'évènement  <code>loadend</code> event comme la condition qui a causé la fin de l'opération; toutefois, vous pouvez utiliser cet évènement pour gérer les tâches qui doivent être exécutées dans tous les cas une fois un transfert terminé.</p>
+
+<h2 id="Envoyer_des_formulaires_et_uploader_des_fichiers">Envoyer des formulaires et uploader des fichiers</h2>
+
+<p>Les instances de <code>XMLHttpRequest</code> peuvent être utilisées pour envoyer des formulaires de deux façons :</p>
+
+<ul>
+ <li>n'utiliser rien de plus qu'AJAX</li>
+ <li>utiliser l'API <a href="/en-US/docs/DOM/XMLHttpRequest/FormData" title="DOM/XMLHttpRequest/FormData"><code>FormData</code></a></li>
+</ul>
+
+<p>La <strong>seconde solution</strong> (utiliser l'API <a href="/en-US/docs/DOM/XMLHttpRequest/FormData" title="DOM/XMLHttpRequest/FormData"><code>FormData</code></a>) est la plus simple et la plus rapide, mais a le désavantage que les données collectées ne peuvent pas être <a href="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify" title="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify">chainifiées</a>.<br>
+ La <strong>première solution</strong> est plutôt la plus complexe, mais se prête à être plus flexible et puissante.</p>
+
+<h3 id="Rien_de_plus_que_XMLHttpRequest">Rien de plus que <code>XMLHttpRequest</code></h3>
+
+<p>Envoyer des formulaires sans l'API <a href="/en-US/docs/DOM/XMLHttpRequest/FormData" title="DOM/XMLHttpRequest/FormData"><code>FormData</code></a> ne demande rien de plus, si ce n'est l'API <a href="/en-US/docs/DOM/FileReader" style="line-height: 1.5;" title="/en-US/docs/DOM/FileReader"><code style="font-size: 14px;">FileReader</code></a><span style="line-height: 1.5;">, mais seulement </span><strong style="line-height: 1.5;">si vous voulez envoyer un fichier ou plus</strong><span style="line-height: 1.5;">.</span></p>
+
+<h4 id="Une_brève_introduction_au_méthodes_de_submission">Une brève introduction au méthodes de submission</h4>
+
+<p>Un élément HTML {{ HTMLElement("form") }} peut être envoyé de quatre manières :</p>
+
+<ul>
+ <li>en utilisant la méthode <code>POST</code> et en configurant son attribut <code>enctype</code> sur <code>application/x-www-form-urlencoded</code> (par défaut);</li>
+ <li>en utilisant la méthode <code>POST</code> et en configurant son attribut <code>enctype</code> sur <code>text/plain</code>;</li>
+ <li>en utilisant la méthode <code>POST</code> et en configurant son attribut <code>enctype</code> sur <code>multipart/form-data</code>;</li>
+ <li>en utilisant la méthode <code>GET</code> (dans ce cas, l'attribut <code>enctype</code> sera ignoré).</li>
+</ul>
+
+<p>Maintenant, considérons qu'on envoie un formulaire contenant seulement deux champs, nommées<span style="line-height: 1.5;"> </span><code style="font-size: 14px;">foo</code><span style="line-height: 1.5;"> et </span><code style="font-size: 14px;">baz</code><span style="line-height: 1.5;">. Si vous utilisez la méthode </span><code style="font-size: 14px;">POST</code><span style="line-height: 1.5;">, le serveur va recevoir une chaîne similaire à l'un des trois suivantes, en fonction de l'encodage que vous utilisez :</span></p>
+
+<ul>
+ <li>
+  <p>Méthode: <code>POST</code>; Encodage: <code>application/x-www-form-urlencoded</code> (par défaut):</p>
+
+  <pre>Content-Type: application/x-www-form-urlencoded
+
+foo=bar&amp;baz=The+first+line.&amp;#37;0D%0AThe+second+line.%0D%0A</pre>
+ </li>
+ <li>
+  <p>Méthode: <code>POST</code>; Encodage: <code>text/plain</code>:</p>
+
+  <pre>Content-Type: text/plain
+
+foo=bar
+baz=The first line.
+The second line.</pre>
+ </li>
+ <li>
+  <p>Méthode: <code>POST</code>; Encodage: <code>multipart/form-data</code>:</p>
+
+  <pre style="height: 100px; overflow: auto;">Content-Type: multipart/form-data; boundary=---------------------------314911788813839
+
+-----------------------------314911788813839
+Content-Disposition: form-data; name="foo"
+
+bar
+-----------------------------314911788813839
+Content-Disposition: form-data; name="baz"
+
+The first line.
+The second line.
+
+-----------------------------314911788813839--</pre>
+ </li>
+</ul>
+
+<p>Si vous utilisez la méthode <code>GET</code> à la place, une chaîne comme celle-ci sera simplement ajoutée à l'URL :</p>
+
+<pre>?foo=bar&amp;baz=The%20first%20line.%0AThe%20second%20line.</pre>
+
+<h4 id="Un_petit_framework_vanilla">Un petit framework vanilla</h4>
+
+<p>Tout celà est fait automatiquement par le serveur quand vous envoyez un {{ HTMLElement("form") }}. Mais si vous voulez faire la même chose en utilisant JavaScript vous devez <em>tout</em> dire à l'interprète. Pour celà, la manière d'envoyer des formulaires en <em>pure</em> AJAX est trop compliquée pour être expliquée ici. Pour cette raison, nous avons posté un <strong>framework complet (mais tout de  même didactique)</strong>, qui est capable d'utiliser les quatres méthodes de <em>submit</em> , et aussi de <strong>transférer des fichiers</strong>:</p>
+
+<div style="height: 400px; margin-bottom: 12px; overflow: auto;">
+<pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
+&lt;title&gt;Sending forms with pure AJAX &amp;ndash; MDN&lt;/title&gt;
+&lt;script type="text/javascript"&gt;
+
+"use strict";
+
+/*\
+|*|
+|*|  :: XMLHttpRequest.prototype.sendAsBinary() Polyfill ::
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest#sendAsBinary()
+\*/
+
+if (!XMLHttpRequest.prototype.sendAsBinary) {
+  XMLHttpRequest.prototype.sendAsBinary = function(sData) {
+    var nBytes = sData.length, ui8Data = new Uint8Array(nBytes);
+    for (var nIdx = 0; nIdx &lt; nBytes; nIdx++) {
+      ui8Data[nIdx] = sData.charCodeAt(nIdx) &amp; 0xff;
+    }
+    /* send as ArrayBufferView...: */
+    this.send(ui8Data);
+    /* ...or as ArrayBuffer (legacy)...: this.send(ui8Data.buffer); */
+  };
+}
+
+/*\
+|*|
+|*|  :: AJAX Form Submit Framework ::
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest
+|*|
+|*|  This framework is released under the GNU Public License, version 3 or later.
+|*|  http://www.gnu.org/licenses/gpl-3.0-standalone.html
+|*|
+|*|  Syntax:
+|*|
+|*|   AJAXSubmit(HTMLFormElement);
+\*/
+
+var AJAXSubmit = (function () {
+
+  function ajaxSuccess () {
+    /* console.log("AJAXSubmit - Success!"); */
+    alert(this.responseText);
+    /* you can get the serialized data through the "submittedData" custom property: */
+    /* alert(JSON.stringify(this.submittedData)); */
+  }
+
+  function submitData (oData) {
+    /* the AJAX request... */
+    var oAjaxReq = new XMLHttpRequest();
+    oAjaxReq.submittedData = oData;
+    oAjaxReq.onload = ajaxSuccess;
+    if (oData.technique === 0) {
+      /* method is GET */
+      oAjaxReq.open("get", oData.receiver.replace(/(?:\?.*)?$/, oData.segments.length &gt; 0 ? "?" + oData.segments.join("&amp;") : ""), true);
+      oAjaxReq.send(null);
+    } else {
+      /* method is POST */
+      oAjaxReq.open("post", oData.receiver, true);
+      if (oData.technique === 3) {
+        /* enctype is multipart/form-data */
+        var sBoundary = "---------------------------" + Date.now().toString(16);
+        oAjaxReq.setRequestHeader("Content-Type", "multipart\/form-data; boundary=" + sBoundary);
+        oAjaxReq.sendAsBinary("--" + sBoundary + "\r\n" + oData.segments.join("--" + sBoundary + "\r\n") + "--" + sBoundary + "--\r\n");
+      } else {
+        /* enctype is application/x-www-form-urlencoded or text/plain */
+        oAjaxReq.setRequestHeader("Content-Type", oData.contentType);
+        oAjaxReq.send(oData.segments.join(oData.technique === 2 ? "\r\n" : "&amp;"));
+      }
+    }
+  }
+
+  function processStatus (oData) {
+    if (oData.status &gt; 0) { return; }
+    /* the form is now totally serialized! do something before sending it to the server... */
+    /* doSomething(oData); */
+    /* console.log("AJAXSubmit - The form is now serialized. Submitting..."); */
+    submitData (oData);
+  }
+
+  function pushSegment (oFREvt) {
+    this.owner.segments[this.segmentIdx] += oFREvt.target.result + "\r\n";
+    this.owner.status--;
+    processStatus(this.owner);
+  }
+
+  function plainEscape (sText) {
+    /* how should I treat a text/plain form encoding? what characters are not allowed? this is what I suppose...: */
+    /* "4\3\7 - Einstein said E=mc2" ----&gt; "4\\3\\7\ -\ Einstein\ said\ E\=mc2" */
+    return sText.replace(/[\s\=\\]/g, "\\$&amp;");
+  }
+
+  function SubmitRequest (oTarget) {
+    var nFile, sFieldType, oField, oSegmReq, oFile, bIsPost = oTarget.method.toLowerCase() === "post";
+    /* console.log("AJAXSubmit - Serializing form..."); */
+    this.contentType = bIsPost &amp;&amp; oTarget.enctype ? oTarget.enctype : "application\/x-www-form-urlencoded";
+    this.technique = bIsPost ? this.contentType === "multipart\/form-data" ? 3 : this.contentType === "text\/plain" ? 2 : 1 : 0;
+    this.receiver = oTarget.action;
+    this.status = 0;
+    this.segments = [];
+    var fFilter = this.technique === 2 ? plainEscape : escape;
+    for (var nItem = 0; nItem &lt; oTarget.elements.length; nItem++) {
+      oField = oTarget.elements[nItem];
+      if (!oField.hasAttribute("name")) { continue; }
+      sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT";
+      if (sFieldType === "FILE" &amp;&amp; oField.files.length &gt; 0) {
+        if (this.technique === 3) {
+          /* enctype is multipart/form-data */
+          for (nFile = 0; nFile &lt; oField.files.length; nFile++) {
+            oFile = oField.files[nFile];
+            oSegmReq = new FileReader();
+            /* (custom properties:) */
+            oSegmReq.segmentIdx = this.segments.length;
+            oSegmReq.owner = this;
+            /* (end of custom properties) */
+            oSegmReq.onload = pushSegment;
+            this.segments.push("Content-Disposition: form-data; name=\"" + oField.name + "\"; filename=\""+ oFile.name + "\"\r\nContent-Type: " + oFile.type + "\r\n\r\n");
+            this.status++;
+            oSegmReq.readAsBinaryString(oFile);
+          }
+        } else {
+          /* enctype is application/x-www-form-urlencoded or text/plain or method is GET: files will not be sent! */
+          for (nFile = 0; nFile &lt; oField.files.length; this.segments.push(fFilter(oField.name) + "=" + fFilter(oField.files[nFile++].name)));
+        }
+      } else if ((sFieldType !== "RADIO" &amp;&amp; sFieldType !== "CHECKBOX") || oField.checked) {
+        /* field type is not FILE or is FILE but is empty */
+        this.segments.push(
+          this.technique === 3 ? /* enctype is multipart/form-data */
+            "Content-Disposition: form-data; name=\"" + oField.name + "\"\r\n\r\n" + oField.value + "\r\n"
+          : /* enctype is application/x-www-form-urlencoded or text/plain or method is GET */
+            fFilter(oField.name) + "=" + fFilter(oField.value)
+        );
+      }
+    }
+    processStatus(this);
+  }
+
+  return function (oFormElement) {
+    if (!oFormElement.action) { return; }
+    new SubmitRequest(oFormElement);
+  };
+
+})();
+
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+
+&lt;h1&gt;Sending forms with pure AJAX&lt;/h1&gt;
+
+&lt;h2&gt;Using the GET method&lt;/h2&gt;
+
+&lt;form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Registration example&lt;/legend&gt;
+    &lt;p&gt;
+      First name: &lt;input type="text" name="firstname" /&gt;&lt;br /&gt;
+      Last name: &lt;input type="text" name="lastname" /&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input type="submit" value="Submit" /&gt;
+    &lt;/p&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+
+&lt;h2&gt;Using the POST method&lt;/h2&gt;
+&lt;h3&gt;Enctype: application/x-www-form-urlencoded (default)&lt;/h3&gt;
+
+&lt;form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Registration example&lt;/legend&gt;
+    &lt;p&gt;
+      First name: &lt;input type="text" name="firstname" /&gt;&lt;br /&gt;
+      Last name: &lt;input type="text" name="lastname" /&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input type="submit" value="Submit" /&gt;
+    &lt;/p&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+
+&lt;h3&gt;Enctype: text/plain&lt;/h3&gt;
+
+&lt;form action="register.php" method="post" enctype="text/plain" onsubmit="AJAXSubmit(this); return false;"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Registration example&lt;/legend&gt;
+    &lt;p&gt;
+      Your name: &lt;input type="text" name="user" /&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      Your message:&lt;br /&gt;
+      &lt;textarea name="message" cols="40" rows="8"&gt;&lt;/textarea&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input type="submit" value="Submit" /&gt;
+    &lt;/p&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+
+&lt;h3&gt;Enctype: multipart/form-data&lt;/h3&gt;
+
+&lt;form action="register.php" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Upload example&lt;/legend&gt;
+    &lt;p&gt;
+      First name: &lt;input type="text" name="firstname" /&gt;&lt;br /&gt;
+      Last name: &lt;input type="text" name="lastname" /&gt;&lt;br /&gt;
+      Sex:
+      &lt;input id="sex_male" type="radio" name="sex" value="male" /&gt; &lt;label for="sex_male"&gt;Male&lt;/label&gt;
+      &lt;input id="sex_female" type="radio" name="sex" value="female" /&gt; &lt;label for="sex_female"&gt;Female&lt;/label&gt;&lt;br /&gt;
+      Password: &lt;input type="password" name="secret" /&gt;&lt;br /&gt;
+      What do you prefer:
+      &lt;select name="image_type"&gt;
+        &lt;option&gt;Books&lt;/option&gt;
+        &lt;option&gt;Cinema&lt;/option&gt;
+        &lt;option&gt;TV&lt;/option&gt;
+      &lt;/select&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      Post your photos:
+      &lt;input type="file" multiple name="photos[]"&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /&gt; &lt;label for="vehicle_bike"&gt;I have a bike&lt;/label&gt;&lt;br /&gt;
+      &lt;input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /&gt; &lt;label for="vehicle_car"&gt;I have a car&lt;/label&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      Describe yourself:&lt;br /&gt;
+      &lt;textarea name="description" cols="50" rows="8"&gt;&lt;/textarea&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input type="submit" value="Submit" /&gt;
+    &lt;/p&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>Pour le tester, créez une page nommée <strong>register.php</strong> (qui est l'attribut <code>action</code> des formulaires d'exemple) et mettez y ce contenu <em><span class="long_text short_text" id="result_box" lang="en"><span class="hps">minimaliste</span></span></em>:</p>
+
+<pre class="brush: php">&lt;?php
+/* register.php */
+
+header("Content-type: text/plain");
+
+/*
+NOTE: You should never use `print_r()` in production scripts, or
+otherwise output client-submitted data without sanitizing it first.
+Failing to sanitize can lead to cross-site scripting vulnerabilities.
+*/
+
+echo ":: data received via GET ::\n\n";
+print_r($_GET);
+
+echo "\n\n:: Data received via POST ::\n\n";
+print_r($_POST);
+
+echo "\n\n:: Data received as \"raw\" (text/plain encoding) ::\n\n";
+if (isset($HTTP_RAW_POST_DATA)) { echo $HTTP_RAW_POST_DATA; }
+
+echo "\n\n:: Files received ::\n\n";
+print_r($_FILES);
+
+</pre>
+
+<p>La syntaxe de ce script est la suivante:</p>
+
+<pre class="syntaxbox">AJAXSubmit(myForm);</pre>
+
+<div class="note"><strong>Note:</strong> Ce framework utilise l'API <a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader"><code>FileReader</code></a> pour transmettre les fichiers uploadés. C'est une API récente qui n'est pas implémentée dans IE9 ou inférieur. Pour cette raison, l'upload via AJAX uniquement <strong>est une technique expérimentale</strong>. Si vous n'avez pas besoin de transférer des fichiers binaires, ce framework fonctionne bien dans la majorité des navigateurs.</div>
+
+<div class="note"><strong>Note:</strong> La meilleure façon d'envoyer du contenu binaire est de passer par <a href="/en-US/docs/JavaScript/Typed_arrays/ArrayBuffer" title="/en-US/docs/JavaScript/Typed_arrays/ArrayBuffer">ArrayBuffers</a> ou <a href="/en-US/docs/DOM/Blob" title="/en-US/docs/DOM/Blob">Blobs</a> en conjonction avec la méthode <a href="/en-US/docs/DOM/XMLHttpRequest#send%28%29" title="/en-US/docs/DOM/XMLHttpRequest#send()"><code>send()</code></a> et possiblement avec la méthode <a href="/en-US/docs/DOM/FileReader#readAsArrayBuffer()" title="/en-US/docs/DOM/FileReader#readAsArrayBuffer()"><code>readAsArrayBuffer()</code></a> de l'API <a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader"><code>FileReader</code></a>. Mais dans la mesure où le but de ce script est de fonctionner avec des données <a href="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify" title="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify">chaînifiable</a>, nous avons utilisé la méthode <a href="/en-US/docs/DOM/XMLHttpRequest#sendAsBinary%28%29" title="/en-US/docs/DOM/XMLHttpRequest#sendAsBinary()"><code>sendAsBinary()</code></a> en conjonction avec la méthode <a href="/en-US/docs/DOM/FileReader#readAsBinaryString%28%29" title="/en-US/docs/DOM/FileReader#readAsBinaryString()"><code>readAsBinaryString()</code></a> de l'API <a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader"><code>FileReader</code></a>. Du coup, le script ci-dessous n'a de sens que quand vous voulez transférer de petits fichiers. Si vous n'avez pas l'intention de transférer des données binaires, songez plutôt à utilisez l'API <a href="/en-US/docs/DOM/XMLHttpRequest/FormData" title="DOM/XMLHttpRequest/FormData"><code>FormData</code></a>.</div>
+
+<div class="note"><strong>Note:</strong> La méthode non-strandard <code>sendAsBinary </code>est dépréciée à partir de Gecko 31 {{ geckoRelease(31) }} et sera prochainement supprimée. La méthode standard <code>send(Blob data)</code> peut être utilisée à la place.</div>
+
+<h3 id="Utiliser_les_objets_FormData">Utiliser les objets FormData</h3>
+
+<p>Le constructeur de <a href="/en-US/docs/DOM/XMLHttpRequest/FormData" title="DOM/XMLHttpRequest/FormData"><code>FormData</code></a> vous permet de compiler des paires de clé/valeur à envoyer via <code>XMLHttpRequest</code>. Il est principalement prévu pour être utilisé dans l'envoi de formulaires, mais il peut être utilisé indépendemment des formulaires dans le but de transmettre des données associées. Les données transmises sont de même format que la méthode <code>submit()</code> d'un formulaire utiliserait pour envoyer les données si l'encodage du formulaire était configuré à "multipart/form-data". Les objets FormData peuvent être utilisés de nombreuses manières avec XMLHttpRequest. Pour des exemples et des explications sur la manière d'utiliser FormData avec une XMLHttpRequest, jettez un oeil sur la page <a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="Using FormData Objects">Utiliser les Objets FormData</a>. Pour des raisons didactiques seulement, nous postons ici <strong>une</strong> <strong>traduction</strong> <strong><a href="#A_little_vanilla_framework" title="#A_little_vanilla_framework">du précédent exemple</a> transformé pour utiliser l'API <code>FormData</code></strong>. Notez la brièveté du code :</p>
+
+<div style="height: 400px; margin-bottom: 12px; overflow: auto;">
+<pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
+&lt;title&gt;Sending forms with FormData &amp;ndash; MDN&lt;/title&gt;
+&lt;script type="text/javascript"&gt;
+"use strict";
+
+function ajaxSuccess () {
+  alert(this.responseText);
+}
+
+function AJAXSubmit (oFormElement) {
+  if (!oFormElement.action) { return; }
+  var oReq = new XMLHttpRequest();
+  oReq.onload = ajaxSuccess;
+  if (oFormElement.method.toLowerCase() === "post") {
+    oReq.open("post", oFormElement.action, true);
+    oReq.send(new FormData(oFormElement));
+  } else {
+    var oField, sFieldType, nFile, sSearch = "";
+    for (var nItem = 0; nItem &lt; oFormElement.elements.length; nItem++) {
+      oField = oFormElement.elements[nItem];
+      if (!oField.hasAttribute("name")) { continue; }
+      sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT";
+      if (sFieldType === "FILE") {
+        for (nFile = 0; nFile &lt; oField.files.length; sSearch += "&amp;" + escape(oField.name) + "=" + escape(oField.files[nFile++].name));
+      } else if ((sFieldType !== "RADIO" &amp;&amp; sFieldType !== "CHECKBOX") || oField.checked) {
+        sSearch += "&amp;" + escape(oField.name) + "=" + escape(oField.value);
+      }
+    }
+    oReq.open("get", oFormElement.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&amp;/, "?")), true);
+    oReq.send(null);
+  }
+}
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+
+&lt;h1&gt;Sending forms with FormData&lt;/h1&gt;
+
+&lt;h2&gt;Using the GET method&lt;/h2&gt;
+
+&lt;form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Registration example&lt;/legend&gt;
+    &lt;p&gt;
+      First name: &lt;input type="text" name="firstname" /&gt;&lt;br /&gt;
+      Last name: &lt;input type="text" name="lastname" /&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input type="submit" value="Submit" /&gt;
+    &lt;/p&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+
+&lt;h2&gt;Using the POST method&lt;/h2&gt;
+&lt;h3&gt;Enctype: application/x-www-form-urlencoded (default)&lt;/h3&gt;
+
+&lt;form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Registration example&lt;/legend&gt;
+    &lt;p&gt;
+      First name: &lt;input type="text" name="firstname" /&gt;&lt;br /&gt;
+      Last name: &lt;input type="text" name="lastname" /&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input type="submit" value="Submit" /&gt;
+    &lt;/p&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+
+&lt;h3&gt;Enctype: text/plain&lt;/h3&gt;
+
+&lt;p&gt;The text/plain encoding is not supported by the FormData API.&lt;/p&gt;
+
+&lt;h3&gt;Enctype: multipart/form-data&lt;/h3&gt;
+
+&lt;form action="register.php" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Upload example&lt;/legend&gt;
+    &lt;p&gt;
+      First name: &lt;input type="text" name="firstname" /&gt;&lt;br /&gt;
+      Last name: &lt;input type="text" name="lastname" /&gt;&lt;br /&gt;
+      Sex:
+      &lt;input id="sex_male" type="radio" name="sex" value="male" /&gt; &lt;label for="sex_male"&gt;Male&lt;/label&gt;
+      &lt;input id="sex_female" type="radio" name="sex" value="female" /&gt; &lt;label for="sex_female"&gt;Female&lt;/label&gt;&lt;br /&gt;
+      Password: &lt;input type="password" name="secret" /&gt;&lt;br /&gt;
+      What do you prefer:
+      &lt;select name="image_type"&gt;
+        &lt;option&gt;Books&lt;/option&gt;
+        &lt;option&gt;Cinema&lt;/option&gt;
+        &lt;option&gt;TV&lt;/option&gt;
+      &lt;/select&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      Post your photos:
+      &lt;input type="file" multiple name="photos[]"&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /&gt; &lt;label for="vehicle_bike"&gt;I have a bike&lt;/label&gt;&lt;br /&gt;
+      &lt;input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /&gt; &lt;label for="vehicle_car"&gt;I have a car&lt;/label&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      Describe yourself:&lt;br /&gt;
+      &lt;textarea name="description" cols="50" rows="8"&gt;&lt;/textarea&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input type="submit" value="Submit" /&gt;
+    &lt;/p&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<div class="note"><strong>Note:</strong> Comme déjà dit, les objets<strong> {{domxref("FormData")}} ne sont pas des objets <a href="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify" title="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify">chainifiables</a></strong>. Si vous voulez chainifier les données soumises, utilisez <a href="#A_little_vanilla_framework" title="#A_little_vanilla_framework">l'exemple précédent en <em>pure</em>-AJAX</a>. Notez également que, bien que dans cet exemple il y a quelques champs <code>file</code> {{ HTMLElement("input") }}, <strong>quand vous soumettez un formulaire via l'API <code>FormData</code> vous n'avez pas besoin d'utiliser l'API <a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader"><code>FileReader</code></a> également </strong>: les fichiers sont automatiquement chargés et transférés.</div>
+
+<h2 id="Récupérer_la_date_de_modification">Récupérer la date de modification</h2>
+
+<pre class="brush: js">function getHeaderTime () {
+  alert(this.getResponseHeader("Last-Modified"));  /* Une chaine valide GMTString ou null */
+}
+
+var oReq = new XMLHttpRequest();
+oReq.open("HEAD" /* utilisez HEAD seulement si vous ne voulez que les headers ! */, "mapage.html", true);
+oReq.onload = getHeaderTime;
+oReq.send();</pre>
+
+<h3 id="Faire_quelque_chose_quand_la_date_de_dernière_modification_change">Faire quelque chose quand la date de dernière modification change</h3>
+
+<p>Créons deux fonctions:</p>
+
+<pre class="brush: js">function getHeaderTime () {
+
+  var
+    nLastVisit = parseFloat(window.localStorage.getItem('lm_' + this.filepath)),
+    nLastModif = Date.parse(this.getResponseHeader("Last-Modified"));
+
+  if (isNaN(nLastVisit) || nLastModif &gt; nLastVisit) {
+    window.localStorage.setItem('lm_' + this.filepath, Date.now());
+    isFinite(nLastVisit) &amp;&amp; this.callback(nLastModif, nLastVisit);
+  }
+
+}
+
+function ifHasChanged(sURL, fCallback) {
+  var oReq = new XMLHttpRequest();
+  oReq.open("HEAD" /* utilisons HEAD - nous ne voulons que les Headers ! */, sURL, true);
+  oReq.callback = fCallback;
+  oReq.filepath = sURL;
+  oReq.onload = getHeaderTime;
+  oReq.send();
+}</pre>
+
+<p>Test:</p>
+
+<pre class="brush: js">/* Testons le fichier "mapage.html"... */
+
+ifHasChanged("mapage.html", function (nModif, nVisit) {
+  alert("La page '" + this.filepath + "' a été changée le " + (new Date(nModif)).toLocaleString() + "!");
+});</pre>
+
+<p>Si vous voulez savoir <strong>si la <em>page courante</em> a changée</strong>, lisez l'article à propos de la propriété <a href="/en-US/docs/Web/API/document.lastModified" style="line-height: 1.5;" title="/en-US/docs/Web/API/document.lastModified"><code style="font-size: 14px;">document.lastModified</code></a><span style="line-height: 1.5;">.</span></p>
+
+<h2 id="Cross-site_XMLHttpRequest">Cross-site XMLHttpRequest</h2>
+
+<p>Les navigateurs récents supportent les requêtes cross-site en implémentant le Standard <a href="/en-US/docs/HTTP_access_control" title="HTTP access control">Access Control for Cross-Site Requests</a> (Web Application Working Group).  Tant que le serveur est configuré pour autoriser les requêtes depuis l'origine de votre web application, <code>XMLHttpRequest</code> fonctionnera. Sinon, une exception <code>INVALID_ACCESS_ERR</code> sera lancée.</p>
+
+<h2 id="Contourner_le_cache">Contourner le cache</h2>
+
+<p><span style="line-height: 1.572;">Une approche cross-browser pour contourner le cache est d'ajouter le timestamp à l'URL, en étant sûr d'inclure un "?" ou un "&amp;" selon les cas. Par exemple :</span></p>
+
+<pre>http://foo.com/bar.html -&gt; http://foo.com/bar.html?12345
+http://foo.com/bar.html?foobar=baz -&gt; http://foo.com/bar.html?foobar=baz&amp;12345
+</pre>
+
+<p>Comme le cache local est indexé selon les URL, celà permet à toutes les requêtes d'être uniques, et du coup de contourner le cache.</p>
+
+<p>Vous pouvez automatiquement ajuster les URL en utilisant le code suivant :</p>
+
+<pre class="brush:js">var oReq = new XMLHttpRequest();
+
+oReq.open("GET", url + ((/\?/).test(url) ? "&amp;" : "?") + (new Date()).getTime(), true);
+oReq.send(null);</pre>
+
+<h2 id="Sécurité">Sécurité</h2>
+
+<p>{{fx_minversion_note(3, "Les versions de Firefox avant Firefox 3 autorisaient à mettre les préférences <code>capability.policy.&lt;policyname&gt;.XMLHttpRequest.open&lt;/policyname&gt;</code> à <code>allAccess</code> pour donner l'accès cross-sites à des sites spécifiques. Cela n'est plus possible.")}}</p>
+
+<p>{{fx_minversion_note(5, "Les versions de Firefox avant Firefox 5 pouvaient utiliser <code>netscape.security.PrivilegeManager.enablePrivilege(\"UniversalBrowserRead\");</code> pour demander un accès cross-site. Ce n'est plus supporté, me^me si cela ne produit aucun avertissement et que la demande de permission est toujours présente.")}}</p>
+
+<p>La manière recommandée d'activer les requêtes cross-sites est d'utiliser le header HTTP <code>Access-Control-Allow-Origin </code> dans la réponse du XMLHttpRequest.</p>
+
+<h3 id="XMLHttpRequests_stoppées">XMLHttpRequests stoppées</h3>
+
+<p>Si vous vous retrouvez avec une XMLHttpRequest ayant <code style="font-size: 14px;">status=0</code> et <code style="font-size: 14px;">statusText=null</code>, cela signifie que la requête n'a pas été autorisée à être effectuée. Elle a été <code style="font-size: 14px;"><a href="http://www.w3.org/TR/XMLHttpRequest/#dom-xmlhttprequest-unsent" title="http://www.w3.org/TR/XMLHttpRequest/#dom-xmlhttprequest-unsent">UNSENT</a></code>. Une cause probable est lorsque <a href="http://www.w3.org/TR/XMLHttpRequest/#xmlhttprequest-origin" style="line-height: 1.5; text-decoration: underline; outline: dotted 1px; outline-offset: 0pt;">l'origine <code style="font-size: 14px;">XMLHttpRequest</code> </a><span style="line-height: 1.5;"> (lors de la création de l'objet XMLHttpRequest) a changé quand l'objet XMLHttpRequest est déjà </span><span style="font-family: courier new,andale mono,monospace; line-height: normal;">open()</span><span style="line-height: 1.5;">. Ce cas peut se produire par exemple lorsque l'on a une XMLHttpRequest qui est lancée sur un évènement onunload d'une fenêtre: l'objet XMLHttpRequest est en fait créé lorsque la fenêtre sur le point de se fermer est toujours là, et la demande est envoyée (c'est à dire </span><span style="font-family: courier new,andale mono,monospace; line-height: normal;">open()</span><span style="line-height: 1.5;">) lorsque cette fenêtre a perdu son focus et une autre fenêtre a potentiellement pris le focus. La manière d'éviter ce problème est de fixer un écouteur sur l'évènement </span><span style="line-height: 1.5;">"activate" </span><span style="line-height: 1.5;">de la nouvelle fenêtre qui se lance quand l'ancienne fenêtre a son événement "unload" lancé.</span></p>
+
+<h2 id="Utiliser_XMLHttpRequest_depuis_un_module_JavaScript_un_composant_XPCOM">Utiliser XMLHttpRequest depuis un module JavaScript / un composant XPCOM</h2>
+
+<p>Instancier une <code>XMLHttpRequest</code> depuis un <a href="/en-US/docs/JavaScript_code_modules/Using" title="https://developer.mozilla.org/en/JavaScript_code_modules/Using_JavaScript_code_modules">module JavaScript</a> ou un composant XPCOM fonctionne un peu différemment; on ne peut pas l'instancier via le constructeur <code>XMLHttpRequest()</code>. Le constructeur n'est pas défini dans le composant et le code retourne une erreur. Le meilleur moyen de fixer le problème est d'utiliser le constructeur du composant XPCOM.</p>
+
+<pre class="brush: js">const XMLHttpRequest = Components.Constructor("@mozilla.org/xmlextras/xmlhttprequest;1", "nsIXMLHttpRequest");
+</pre>
+
+<p>Malheureusement dans les versions de Gecko avant Gecko 16 il y a un bug : les requêtes créées ainsi peuvent être annulées sans raison. Si votre code doit marcher sur Gecko 15 ou moins, vous pouvez utiliser le constructeur XMLHttpRequest depuis le DOM caché de la fenêtre comme ceci :</p>
+
+<pre class="brush:js">const { XMLHttpRequest } = Components.classes["@mozilla.org/appshell/appShellService;1"]
+                                     .getService(Components.interfaces.nsIAppShellService)
+                                     .hiddenDOMWindow;
+var oReq = new XMLHttpRequest();</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ol>
+ <li><a href="/en-US/docs/AJAX/Getting_Started" title="AJAX/Getting_Started">MDN AJAX introduction</a></li>
+ <li><a href="/en-US/docs/HTTP_access_control" title="HTTP access control">HTTP access control</a></li>
+ <li><a href="/en-US/docs/How_to_check_the_security_state_of_an_XMLHTTPRequest_over_SSL" title="How to check the security state of an XMLHTTPRequest over SSL">How to check the security state of an XMLHTTPRequest over SSL</a></li>
+ <li><a href="http://www.peej.co.uk/articles/rich-user-experience.html">XMLHttpRequest - REST and the Rich User Experience</a></li>
+ <li><a href="http://msdn.microsoft.com/library/default.asp?url=/library/en-us/xmlsdk/html/xmobjxmlhttprequest.asp">Microsoft documentation</a></li>
+ <li><a href="http://developer.apple.com/internet/webcontent/xmlhttpreq.html">Apple developers' reference</a></li>
+ <li><a href="http://jibbering.com/2002/4/httprequest.html">"Using the XMLHttpRequest Object" (jibbering.com)</a></li>
+ <li><a href="http://www.w3.org/TR/XMLHttpRequest/">The XMLHttpRequest Object: W3C Specification</a></li>
+ <li><a href="http://dev.w3.org/2006/webapi/progress/Progress.html" title="http://dev.w3.org/2006/webapi/progress/Progress.html">Web Progress Events specification</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest">XMLHttpRequest (Référence Web API)</a></li>
+</ol>
diff --git a/files/fr/web/api/xmlhttprequest/withcredentials/index.html b/files/fr/web/api/xmlhttprequest/withcredentials/index.html
new file mode 100644
index 0000000000..bc95a84280
--- /dev/null
+++ b/files/fr/web/api/xmlhttprequest/withcredentials/index.html
@@ -0,0 +1,56 @@
+---
+title: XMLHttpRequest.withCredentials
+slug: Web/API/XMLHttpRequest/withCredentials
+tags:
+  - API
+  - Propriété
+  - Reference
+  - XHR
+  - XMLHttpRequest
+translation_of: Web/API/XMLHttpRequest/withCredentials
+---
+<div>{{APIRef('XMLHttpRequest')}}</div>
+
+<p>La propriété <code><strong>XMLHttpRequest.withCredentials</strong></code> est un booléen qui indique si une requête <code>Access-Control</code> entre plusieurs sites devrait être réalisée avec des informations d'authentification (<em>credentials</em>) telles que des cookies, des en-têtes d'autorisation ou des certificats clients. Activer <code>withCredentials</code> n'aura aucun impact sur les requêtes effectuées sur un même site.</p>
+
+<p>Cette propriété est également utilisée afin d'indiquer lorsque les cookies doivent être ignorés pour une réponse. Par défaut, la valeur est à <code>false</code>. Une requête <code>XMLHttpRequest</code> d'un autre domaine ne pourra pas définir de cookies pour cet autre domaine à moins que <code>withCredentials</code> vaille <code>true</code> avant la requête.</p>
+
+<p>Les cookies tiers obtenus lorsque <code>withCredentials</code> vaut <code>true</code> continuent de respecter la règle de même origine et ne peuvent donc pas être manipulés en script via <code><a href="/fr/docs/Web/API/Document/cookie">document.cookie</a></code> ou depuis les en-têtes de la réponse.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Cette propriété n'a aucun impact pour les requêtes effectuées sur le même site.</p>
+</div>
+
+<div class="note">
+<p><strong>Note :</strong> Les réponses<strong> </strong><code>XMLHttpRequest</code> provenant d'un domaine différent ne peuvent pas définir de cookies pour ce domaine à moins d'avoir <code>withCredentials</code> à <code>true</code> avant l'envoi de la requête (quelle que soit la valeur de l'en-tête <code>Access-Control-</code>).</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var xhr = new XMLHttpRequest();
+xhr.open('GET', 'http://example.com/', true);
+xhr.withCredentials = true;
+xhr.send(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('XMLHttpRequest', '#the-withcredentials-attribute')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.XMLHttpRequest.withCredentials")}}</p>
diff --git a/files/fr/web/api/xmlhttprequest/xmlhttprequest/index.html b/files/fr/web/api/xmlhttprequest/xmlhttprequest/index.html
new file mode 100644
index 0000000000..3a5f635aca
--- /dev/null
+++ b/files/fr/web/api/xmlhttprequest/xmlhttprequest/index.html
@@ -0,0 +1,62 @@
+---
+title: XMLHttpRequest()
+slug: Web/API/XMLHttpRequest/XMLHttpRequest
+tags:
+  - API
+  - Accès serveur
+  - Besoin d'exemples
+  - Compatibilité des navigateurs
+  - Constructeur
+  - Créer un XMLHttpRequest
+  - Lire des données
+  - Reference
+  - Récupérer des données
+  - XHR
+  - XMLHttpRequest
+translation_of: Web/API/XMLHttpRequest/XMLHttpRequest
+---
+<div>{{draft}}{{APIRef('XMLHttpRequest')}}</div>
+
+<p><span class="seoSummary">Le constructeur <code><strong>XMLHttpRequest()</strong></code> crée une nouvelle instance {{domxref("XMLHttpRequest")}}.</span></p>
+
+<p>Pour plus de détails sur l'utilisation de <code>XMLHttpRequest</code>, voir <a class="internal" href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a>.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">const <var>request</var> = new XMLHttpRequest();
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Aucun.</p>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Un nouvel objet {{domxref("XMLHttpRequest")}}. L'objet doit être au minimum initialisé par l'appel de {{domxref("XMLHttpRequest.open", "open()")}} avant d'appeler {{domxref("XMLHttpRequest.send", "send()")}} pour envoyer la requête au serveur.</p>
+
+<h2 id="La_syntaxe_de_Firefox_non-standard">La syntaxe de Firefox non-standard</h2>
+
+<p>Firefox 16 a ajouté un paramètre non standard au constructeur qui peut activer le mode anonyme (voir {{Bug("692677")}}). Mettre le drapeau <code>mozAnon</code> à <code>true</code> revient à être identique au constructeur <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#dom-anonxmlhttprequest" title="see AnonXMLHttpRequest in the XMLHttpRequest specification"><code>AnonXMLHttpRequest()</code></a> décrit dans de vieilles versions des  specifications de XMLHttpRequest.</p>
+
+<pre class="syntaxbox">const <var>request</var> = new XMLHttpRequest(<var>paramsDictionary</var>);</pre>
+
+<h3 id="Paramètres_non_standard">Paramètres (non standard)</h3>
+
+<dl>
+ <dt><code>objParameters</code> {{gecko_minversion_inline("16.0")}}</dt>
+ <dd>Il y a deux drapeaux qui peuvent être activés
+ <dl>
+  <dt><code>mozAnon</code></dt>
+  <dd>Booléen: Mettre ce drapeau à <code>true</code> évitera au navigateur d'exposer le {{Glossary("origin")}} and <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#user-credentials" title="Defintion of “User credentials” in the XMLHttpRequest specification.">credentials de l'utilisateur</a> lors de la récupération des ressources. Plus important, cela signifie que les {{Glossary("Cookie", "cookies")}} ne seront pas envoyés, sauf si ils sont clairement ajoutés en utilisant setRequestHeader.</dd>
+  <dt><code>mozSystem</code></dt>
+  <dd>Booléen: Mettre ce drapeau à <code>true</code> autorise les connections cross-site sans requérir le serveur à utiliser {{Glossary("CORS")}}. <em>Paramètre requis </em>:<em> <code>mozAnon: true</code>, i.e. cela ne peut pas être combiné avec l'envoi de cookies ou d'autres identifiants utilisateurs. Cela fonctionne seulement sur les applications autorisées ({{Bug("692677")}}); ne marche pas sur les pages chargées arbitraitement dans Firefox</em></dd>
+ </dl>
+ </dd>
+</dl>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Utiliser XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">HTML dans XMLHttpRequest</a></li>
+</ul>
diff --git a/files/fr/web/api/xmlhttprequesteventtarget/index.html b/files/fr/web/api/xmlhttprequesteventtarget/index.html
new file mode 100644
index 0000000000..a47661ac70
--- /dev/null
+++ b/files/fr/web/api/xmlhttprequesteventtarget/index.html
@@ -0,0 +1,67 @@
+---
+title: XMLHttpRequestEventTarget
+slug: Web/API/XMLHttpRequestEventTarget
+tags:
+  - AJAX
+  - API
+  - NeedsBrowserCompatibility
+  - NeedsContent
+  - Reference
+  - TopicStub
+  - XMLHttpRequest
+translation_of: Web/API/XMLHttpRequestEventTarget
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p><code>XMLHttpRequestEventTarget</code> est l'interface qui décrit les gestionnaires d'événements que vous pouvez implémenter dans un objet qui gérera les événements pour un {{ domxref("XMLHttpRequest") }}.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{ domxref("XMLHttpRequestEventTarget.onabort") }}</dt>
+ <dd>Contient la fonction à appeler lorsqu'une demande est abandonnée et que l'événement {{event('abort')}} est reçu par cet objet.</dd>
+ <dt>{{ domxref("XMLHttpRequestEventTarget.onerror") }}</dt>
+ <dd>Contient la fonction à appeler lorsqu'une demande rencontre une erreur et que l'événement {{event('error')}} est reçu par cet objet.</dd>
+ <dt>{{ domxref("XMLHttpRequestEventTarget.onload") }}</dt>
+ <dd>Contient la fonction à appeler lorsqu'une requête HTTP revient après avoir récupéré le contenu avec succès et que l'événement {{event('load')}} est reçu par cet objet.</dd>
+ <dt>{{ domxref("XMLHttpRequestEventTarget.onloadstart") }}</dt>
+ <dd>Contient la fonction qui est appelée lorsque la requête HTTP commence à charger des données et que l'événement {{event('loadstart')}} est reçu par cet objet.</dd>
+ <dt>{{ domxref("XMLHttpRequestEventTarget.onprogress") }}</dt>
+ <dd>Contient la fonction qui est appelée périodiquement avec des informations sur l'avancement de la demande et l'événement {{event('progress')}} est reçu par cet objet.</dd>
+ <dt>{{ domxref("XMLHttpRequestEventTarget.ontimeout") }}</dt>
+ <dd>Contient la fonction qui est appelée si l'événement expire et que l'événement {{event("timeout")}} est reçu par cet objet ; cela ne se produit que si un délai d'attente a été préalablement établi en définissant la valeur de l'attribut timeout de l'objet XMLHttpRequest.</dd>
+ <dt>{{ domxref("XMLHttpRequestEventTarget.onloadend") }}</dt>
+ <dd>Contient la fonction qui est appelée lorsque le chargement est terminé, même si la demande a échoué, et que l'événement {{event('loadend')}} est reçu par cet 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">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>WHATWG living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité sur cette page est généré à partir de données structurées. Si vous souhaitez contribuer à ces données, veuillez consulter le site https://github.com/mdn/browser-compat-data et nous envoyer une demande d'extraction.</div>
+
+<p>{{Compat("api.XMLHttpRequestEventTarget")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{ domxref("XMLHttpRequest") }}</li>
+ <li><a href="/en/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li>
+</ul>
diff --git a/files/fr/web/api/xmlhttprequesteventtarget/onload/index.html b/files/fr/web/api/xmlhttprequesteventtarget/onload/index.html
new file mode 100644
index 0000000000..33c90dabc2
--- /dev/null
+++ b/files/fr/web/api/xmlhttprequesteventtarget/onload/index.html
@@ -0,0 +1,56 @@
+---
+title: XMLHttpRequestEventTarget.onload
+slug: Web/API/XMLHttpRequestEventTarget/onload
+translation_of: Web/API/XMLHttpRequestEventTarget/onload
+---
+<p> </p>
+
+<div>{{APIRef("XMLHttpRequest")}}</div>
+
+<p>The <strong><code>XMLHttpRequestEventTarget.onload</code></strong> is the function called when an {{domxref("XMLHttpRequest")}} transaction completes successfully.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate"><em>XMLHttpRequest</em>.onload = <em>callback</em>;</pre>
+
+<h3 id="Values">Values</h3>
+
+<ul>
+ <li><code><em>callback</em></code> is the function to be executed when the request completes successfully. It receives a {{domxref("ProgressEvent")}} object as its first argument. The value of <em>this</em> (i.e. the context) is the same {{domxref("XMLHttpRequest")}} this callback is related to.</li>
+</ul>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<pre class="brush: js notranslate">var xmlhttp = new XMLHttpRequest(),
+  method = 'GET',
+  url = 'https://developer.mozilla.org/';
+
+xmlhttp.open(<em>method</em>, <em>url</em>, true);
+xmlhttp.onload = function () {
+  // Do something with the retrieved data ( found in xmlhttp.response )
+};
+xmlhttp.send();
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#handler-xhr-onload')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>WHATWG living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.XMLHttpRequestEventTarget.onload")}}</p>
diff --git a/files/fr/web/api/xpathexpression/index.html b/files/fr/web/api/xpathexpression/index.html
new file mode 100644
index 0000000000..8c39da4897
--- /dev/null
+++ b/files/fr/web/api/xpathexpression/index.html
@@ -0,0 +1,20 @@
+---
+title: XPathExpression
+slug: Web/API/XPathExpression
+tags:
+  - API
+  - DOM
+  - Document
+  - XPath
+translation_of: Web/API/XPathExpression
+---
+<p>{{APIRef}}</p>
+
+<p>Une <code>XPathExpression</code> est une requête de XPath compilé renvoyée par {{domxref("document.createExpression()")}}. Elle a une méthode <code>evaluate()</code> qui peut être utilisée pour exécuter le XPath compilé.</p>
+
+<h2 id="Methods" name="Methods">Méthodes</h2>
+
+<ul>
+ <li>evaluate (<code>contextNode</code>, <code>type</code>, <code>result</code>) - fournit un noeud / document contextuel, une constante {{domxref("XPathResult")}} et <code>XPathResult</code> pour stocker la requête ou null pour renvoyer un nouveau XPathResult.</li>
+ <li>evaluateWithContext (<code>contextNode</code>, <code>contextPosition</code>, <code>contextSize</code>, <code>type</code>, <code>result</code>) - fournit un noeud / document, une position et une taille contextuels, une constante <code>XPathResult</code> et un <code>XPathResult</code> pour stocker la requête ou null pour renvoyer un nouveau XPathResult.</li>
+</ul>
diff --git a/files/fr/web/api/xsltprocessor/index.html b/files/fr/web/api/xsltprocessor/index.html
new file mode 100644
index 0000000000..379e132c35
--- /dev/null
+++ b/files/fr/web/api/xsltprocessor/index.html
@@ -0,0 +1,187 @@
+---
+title: XSLTProcessor
+slug: Web/API/XSLTProcessor
+tags:
+  - API
+  - DOM
+  - DOM Reference
+  - Reference
+  - TopicStub
+  - XSLT
+translation_of: Web/API/XSLTProcessor
+---
+<div>{{APIRef("XSLT")}}</div>
+
+<p>Un <strong><code>XSLTProcessor</code></strong> applique une transformation de feuille de style <a href="/en-US/docs/Web/XSLT">XSLT</a> à un document XML pour générer un nouveau document XML. Il fait appel à des méthodes pour charger la feuille de style XSLT, donner des valeurs aux paramètres <code>&lt;xsl:param&gt;</code> et pour appliquer les transformations au document.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Le constructeur n'a pas de paramètre.</p>
+
+<pre class="syntaxbox notranslate">new XSLTProcessor()</pre>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt><code><a href="/en-US/docs/Mozilla/WebIDL_bindings#Throws">[Throws]</a> void </code>{{domxref("XSLTProcessor.importStylesheet")}}<code>(</code>{{domxref("Node")}}<code> styleSheet)</code></dt>
+ <dd>Importe une feuille de style XSLT. Si le nœud passé en argument est un nœud de document, vous pouvez passer une transformation XSL complète ou un <a class="external" href="http://www.w3.org/TR/xslt#result-element-stylesheet">transformation d'élèment résultant</a>; sinon, il doit s'agir d'un élèment <code>&lt;xsl:stylesheet&gt;</code> ou <code>&lt;xsl:transform&gt;</code>.</dd>
+ <dt><code><a href="/en-US/docs/Mozilla/WebIDL_bindings#Throws">[Throws]</a> </code>{{domxref("DocumentFragment")}} {{domxref("XSLTProcessor.transformToFragment")}}<code>(</code>{{domxref("Node")}}<code> source, </code>{{domxref("Document")}}<code> owner)</code></dt>
+ <dd>Transforme la source du nœud en applicant la fonction {{domxref("XSLTProcessor.importStylesheet()")}}. Le document propriétaire du fragment de document résultant est le nœud propriétaire.</dd>
+ <dt><code><a href="/en-US/docs/Mozilla/WebIDL_bindings#Throws">[Throws]</a></code> {{domxref("Document")}} {{domxref("XSLTProcessor.transformToDocument")}}<code>(</code>{{domxref("Node")}}<code> source)</code></dt>
+ <dd>
+ <p>Transforme la source du nœud en appliquant la feuille de style donnée lors de l'importation à l'aide de la fonction {{domxref ("XSLTProcessor.importStylesheet ()")}}.</p>
+
+ <p>L'objet résultant dépend de la <a class="external" href="http://www.w3.org/TR/xslt#output">méthode de sortie</a> de la feuille de style :</p>
+
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col">Méthode de sortie</th>
+    <th scope="col">Type de résultat</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td><code>html</code></td>
+    <td>{{domxref("HTMLDocument")}}</td>
+   </tr>
+   <tr>
+    <td><code>xml</code></td>
+    <td>{{domxref("XMLDocument")}}</td>
+   </tr>
+   <tr>
+    <td><code>text</code></td>
+    <td>{{domxref("XMLDocument")}} avec un seul élèment racine <code>&lt;transformiix:result&gt;</code> avec le texte comme enfant</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt><code><a href="/en-US/docs/Mozilla/WebIDL_bindings#Throws">[Throws]</a> void </code>{{domxref("XSLTProcessor.setParameter")}}<code>(</code>{{jsxref("String")}}<code> namespaceURI, </code>{{jsxref("String")}}<code> localName, any value)</code></dt>
+ <dd>Définit un paramètre dans la feuille de style XSLT qui a été importée. (Définit la valeur d'un <code>&lt;xsl:param&gt;</code>.) Une valeur nulle pour <code>namespaceURI</code> sera traitée comme une chaîne vide.</dd>
+ <dt><code><a href="/en-US/docs/Mozilla/WebIDL_bindings#Throws">[Throws]</a> any </code>{{domxref("XSLTProcessor.getParameter")}}<code>(</code>{{jsxref("String")}}<code> namespaceURI, </code>{{jsxref("String")}}<code> localName)</code></dt>
+ <dd>Récupére un paramètre de la feuille de style XSLT. Une valeur nulle pour <code>namespaceURI</code> sera traitée comme une chaîne vide.</dd>
+ <dt><code><a href="/en-US/docs/Mozilla/WebIDL_bindings#Throws">[Throws]</a> void </code>{{domxref("XSLTProcessor.removeParameter")}}<code>(</code>{{jsxref("String")}}<code> namespaceURI, </code>{{jsxref("String")}}<code> localName)</code></dt>
+ <dd>Supprime le paramètre s'il a déjà été défni. Le <code>XSLTProcessor</code> utilisera alors la valeur par défaut du paramètre. Si une valeur nulle est donnée pour <code>namespaceURI</code>, elle sera traitée comme une chaîne vide.</dd>
+ <dt><code>void </code>{{domxref("XSLTProcessor.clearParameters()")}}</dt>
+ <dd>Supprime tous les paramètres définis dans le <code>XSLTProcessor</code>. Le <code>XSLTProcessor</code> utilisera alors les valeurs par défaut spécifiées dans la feuille de style XSLT.</dd>
+ <dt><code>void </code>{{domxref("XSLTProcessor.reset()")}}</dt>
+ <dd>Supprime tous les paramétres et feuilles de style du <code>XSLTProcessor</code>.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<h3 id="Propriétés_non-apparentes_au_Web">Propriétés non-apparentes au Web</h3>
+
+<p>Les propriétés suivantes sont <a href="/en-US/docs/Mozilla/WebIDL_bindings#ChromeOnly"><code>[ChromeOnly]</code></a> et ne sont pas apparentes au contenu Web :</p>
+
+<dl>
+ <dt><code><a href="/en-US/docs/Mozilla/WebIDL_bindings#ChromeOnly">[ChromeOnly]</a> attribute unsigned long </code>{{domxref("XSLTProcessor.flags")}}</dt>
+ <dd>
+ <p>Drapeaux qui modifient le comportement du processeur. Pas de réinitialisation en appelant {{domxref("XSLTProcessor.reset()")}}. Valeur par défaut: <code>0</code></p>
+
+ <p>Possible values are:</p>
+
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col">Nom</th>
+    <th scope="col">Valeur</th>
+    <th scope="col">Effet</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td>(None)</td>
+    <td><code>0</code></td>
+    <td>Aucun</td>
+   </tr>
+   <tr>
+    <td><code>DISABLE_ALL_LOADS</code></td>
+    <td><code>1</code></td>
+    <td>Désactiver le chargement de documents externes (par ex. <code>&lt;xsl:import&gt;</code> et <code>document()</code>)</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<ol>
+ <li><a href="/fr-FR/docs/XSLT/XSLT_JS_Interface_in_Gecko/Basic_Example">Exemple simple</a></li>
+ <li><a href="/fr-FR/docs/XSLT/XSLT_JS_Interface_in_Gecko/Advanced_Example">Exemple avancé</a></li>
+ <li><a href="/fr-FR/docs/XSLT/XSLT_JS_Interface_in_Gecko/JavaScript_XSLT_Bindings">Exemple additionnel</a></li>
+</ol>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p><em>Ne fait partie d'aucune spécification.</em> Il s'agit d'une interface propriétaire qui provient de Gecko.</p>
+
+<h2 id="Gecko_IDL">Gecko IDL</h2>
+
+<ul>
+ <li><code>{{ Source("dom/webidl/XSLTProcessor.webidl", "XSLTProcessor.webidl") }}</code></li>
+ <li><code>{{ Source("dom/xslt/nsIXSLTProcessor.idl", "nsIXSLTProcessor.idl") }}</code></li>
+</ul>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Microsoft Edge</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr-FR/docs/Using_the_Mozilla_JavaScript_interface_to_XSL_Transformations">Utilisation de l'interface JavaScript de Mozilla pour les transformations XML</a></li>
+</ul>